+ + + {/* Mobile Header */} +

+ +

RAPPORT

+ + {/* Sidebar */} +

+ {collapsed ? ( + + ) : ( + <> + + + + )} +

+ {visibleNavItems.map(item => { + const isParentActive = view === item.id || (item.children || []).some(c => c.id === view); + const isExpanded = expandedNav.has(item.id); + const toggleExpand = (e) => { + e.stopPropagation(); + setExpandedNav(prev => { + const next = new Set(prev); + next.has(item.id) ? next.delete(item.id) : next.add(item.id); + return next; + }); + }; + if (item.children) { + if (collapsed) { + return ( + + ); + } + return ( +

+ + +

+ {isExpanded && ( +

+ {item.children.map(child => ( + + ))} +

+ )} +

+ ); + } + if (collapsed) { + return ( + + ); + } + return ( + + ); + })} +

+ {/* ── Vor / Zurück ── */} +

+ {[["goBack", "‹", goBack, navCanBack, "Zurück"], ["goForward", "›", goForward, navCanForward, "Vorwärts"]].map(([key, ch, fn, enabled, title]) => ( + + ))} +

+ + {!collapsed &&

+ + AGPL-3.0 ↗ + WEBSITE ↗ +

} + + {/* Benutzer + Logout + Theme */} +

+ {!collapsed && ( +

+ {currentUserRecord?.avatar + ?

+ : userInitials} +

+ {currentUser.displayName || currentUser.username} +

+ {currentUser.role === "admin" &&

ADMIN

} +

+ )} +

+ + +

+ + {/* Main */} +

+ {view === "dashboard" && } + {view === "pinnwand" && } + {view === "projects" && !selectedProjectId && } + {view === "projects" && selectedProjectId && setSelectedProjectId(null)} setPrintContent={setPrintContent} modal={modal} setModal={setModal} currentUser={currentUser} />} + {view === "time" && } + {view === "quotes" && } + {view === "dokumente" && } + {view === "lieferscheine" && } + {view === "protokolle" && } + {view === "buchhaltung" && } + {view === "invoices" && } + {view === "loehne" && } + {view === "expenses" && } + {view === "internal-expenses" && } + {view === "personen" && } + {view === "mitarbeiter" && } + {view === "letters" && } + {view === "settings" && } + {view === "studio-budget" && } +

+ + {showChangelog && (() => { + const CHANGELOGS = { + "0.5": { + items: [ + ["Anmeldesystem", "Benutzerverwaltung mit Rollen und Passwörtern. Jeder Mitarbeiter erhält einen eigenen Login. Berechtigungen steuern, welche Module sichtbar sind."], + ["Migration bestehender Daten", "Beim ersten Start mit einer bestehenden Datenbank erscheint ein Migrations-Assistent: Daten sichern, Admin-Konto einrichten — alle bisherigen Inhalte bleiben erhalten."], + ["Rechnungstypen: Akonto / Teilrechnung / Schluss", "Klare Trennung der Rechnungsarten mit unterschiedlicher steuerlicher Behandlung. Akonto ist erst bei der Schlussrechnung steuerrelevant; Teilrechnungen sind sofort wirksam."], + ["Neuer Rechnungsdialog", "Zweistufige Auswahl: zuerst Art der Rechnung (Akonto / Teilrechnung / Schlussrechnung), dann Berechnungsmethode (Stunden / % vom Budget / Fixer Betrag / SIA-Phase)."], + ["Akonto & Teilrechnung nach SIA-Phase", "Für Pauschal-Projekte können einzelne SIA-Phasen direkt verrechnet werden — bereits verrechnete Phasen werden als solche markiert."], + ["Aufwandsrechnungen erweitert", "Stundenprojekte unterstützen jetzt Akonto (Stunden bis heute, %, Fixbetrag) und Teilrechnung (Stunden auswählen, %, Fixbetrag, SIA-Phase)."], + ["Buchhaltung: Akonto-MwSt getrennt", "Akonto-Rechnungen werden in der Buchhaltung separat ausgewiesen — die MwSt wird erst bei der Schlussrechnung als steuerrelevant gezählt."], + ["Mitarbeiter: Intern & Absenzen", "Umbenennung zu «Intern / Absenzen». Neue Jahresübersicht mit Monatsvergleich und Vorjahr, Absenzkategorien-Matrix, sowie Auswertung interner Stunden ohne Projektbezug."], + ], + }, + "0.4": { + items: [ + ["Material Design 3", "Sidebar mit einklappbarem Icon-Modus und Material Symbols Rounded Icons. Buttons als Pill, Inputs und Cards mit mehr Radius, Tags als Chips, Modals mit Backdrop-Blur."], + ["Interne Projektbeteiligung", "Mitarbeitende können direkt im Projekt zugewiesen werden. In Protokollen erscheinen unter «Intern» nur noch die zugewiesenen Personen."], + ["Offerten im Budget", "Neben Rechnungen können jetzt auch Offerten in die Einnahmen-Planung des Bürobudgets einbezogen werden."], + ["Kategorien direkt auf der Seite", "Spesenarten und Ausgaben-Kategorien werden neu direkt auf der jeweiligen Seite verwaltet, nicht mehr in den Einstellungen."], + ], + }, + "0.3": { + items: [ + ["Visuelles Redesign", "Sidebar schwebt als eigenständiges Panel mit Radius und Schatten. Cards haben mehr Tiefe. Header kompakter, Abstände überarbeitet, Menüpunkte in Kapitälchen. Studio-Name in der Sidebar."], + ["Zoom", "Der UI-Zoom betrifft nur den Hauptinhalt — die Sidebar bleibt immer gleich gross und unverzerrt."], + ], + }, + "0.2": { + items: [ + ["Neue Module", "Lohnabrechnung, Bürobudget, Protokolle, Lieferscheine und Spesen (Mitarbeiter & intern) hinzugefügt."], + ["Zeiterfassung Wochenansicht", "Visuelles Zeitraster mit Drag & Drop — Einträge verschieben und skalieren, Wechsel zwischen Tag-, Wochen- und Monatsansicht."], + ["Ferienplanung", "Ferienanträge stellen, genehmigen und zurückziehen. Absenzverwaltung ausgebaut."], + ["Teilzeit", "Lohn wird proportional zum Pensum berechnet, pro Monat überschreibbar."], + ], + }, + "0.1": { + items: [ + ["Erster Release", "Projekte, Kunden, Mitarbeiterverwaltung, Zeiterfassung."], + ["Rechnungen & Offerten", "Rechnungen mit QR-Einzahlungsschein, Offerten nach SIA 102, manuell oder frei — konvertierbar zur Rechnung."], + ["Einstellungen", "Studio-Stammdaten, Stundensätze, Rollen, MwSt und Projektnummern-Format."], + ], + }, + }; + const versions = Object.keys(CHANGELOGS); + const current = CHANGELOGS[changelogVersion] || CHANGELOGS["0.5"]; + return ( +

CHANGELOG

Alpha {changelogVersion}

+ {versions.map(v => ( + + ))} +

+ {current.items.map(([title, desc]) => ( +

{title}

{desc}

+ ))} +

+ +

+ ); + })()} +

+ ); +} diff --git a/src/App.jsx.bak b/src/App.jsx.bak new file mode 100755 index 0000000..5b15ac2 --- /dev/null +++ b/src/App.jsx.bak @@ -0,0 +1,451 @@ +import React, { useState, useEffect, useCallback } from "react"; +import { STORAGE_KEY, NAV_ITEMS, defaultData } from "./constants.js"; +import Dashboard from "./views/Dashboard.jsx"; +import { Projects, ProjectDetail } from "./views/Projects.jsx"; +import Time from "./views/Time.jsx"; +import { Spesen, InternalExpenses } from "./views/Spesen.jsx"; +import Protokolle from "./views/Protokolle.jsx"; +import Lieferscheine from "./views/Lieferscheine.jsx"; +import Buchhaltung from "./views/Buchhaltung.jsx"; +import Invoices from "./views/Invoices.jsx"; +import Quotes, { ConvertQuoteModal } from "./views/Quotes.jsx"; +import Personen from "./views/Personen.jsx"; +import Letters from "./views/Letters.jsx"; +import Settings from "./views/Settings.jsx"; +import StudioBudget from "./views/StudioBudget.jsx"; +import Loehne from "./views/Loehne.jsx"; +import Mitarbeiter from "./views/Mitarbeiter.jsx"; +import Dokumente from "./views/Dokumente.jsx"; +import { PrintView } from "./print/PrintComponents.jsx"; + +export default function App() { + const [data, setData] = useState(() => { + try { + const stored = localStorage.getItem(STORAGE_KEY); + if (stored) { + const parsed = JSON.parse(stored); + let merged = { ...defaultData, ...parsed, settings: { ...defaultData.settings, ...parsed.settings } }; + + // Migrate: clients[] + contacts[] → persons[] + if (!merged.persons && (merged.clients?.length || merged.contacts?.length)) { + const idMap = {}; + const persons = []; + const usedContactIds = new Set(); + for (const c of merged.clients || []) { + const linked = (merged.contacts || []).find(ct => ct.id === c.linkedContactId); + persons.push({ + ...c, + isAuftraggeber: true, + isPartner: !!linked, + type: c.type || linked?.type || "", + note: c.note || linked?.note || "", + honorarOffers: c.honorarOffers || linked?.honorarOffers || [], + contacts: c.contacts?.length ? c.contacts : (linked?.contacts || []), + linkedContactId: undefined, + linkedClientId: undefined, + }); + if (linked) { usedContactIds.add(linked.id); idMap[linked.id] = c.id; } + } + for (const ct of merged.contacts || []) { + if (usedContactIds.has(ct.id)) continue; + persons.push({ ...ct, isAuftraggeber: false, isPartner: true, linkedClientId: undefined }); + } + const remapProjects = (merged.projects || []).map(p => ({ + ...p, + projectContacts: (p.projectContacts || []).map(pc => ({ ...pc, contactId: idMap[pc.contactId] || pc.contactId })), + })); + const remapProtocols = (merged.protocols || []).map(p => ({ + ...p, + entries: (p.entries || []).map(e => ({ ...e, assignee: e.assignee ? (idMap[e.assignee] || e.assignee) : e.assignee })), + })); + merged = { ...merged, persons, projects: remapProjects, protocols: remapProtocols, clients: undefined, contacts: undefined }; + } + + // Migrate: projects linked to SIA/manual quotes should be pauschal (not stundensatz) + const allQuotes = merged.quotes || []; + const projects = (merged.projects || []).map(p => { + if ((p.billingType || p.type || "stundensatz") === "stundensatz" && (p.linkedQuotes || []).length > 0) { + const linkedQs = (p.linkedQuotes || []).map(lq => allQuotes.find(q => q.id === lq.quoteId)).filter(Boolean); + if (linkedQs.some(q => q.mode === "sia" || q.mode === "manual")) { + return { ...p, billingType: "pauschal", budget: p.budget || p.budgetAmount || 0 }; + } + } + return p; + }); + return { ...merged, projects }; + } + } catch {} + return defaultData; + }); + const [view, setView] = useState("dashboard"); + const [selectedProjectId, setSelectedProjectId] = useState(null); + const [modal, setModal] = useState(null); + const [printContent, setPrintContent] = useState(null); + const [darkMode, setDarkMode] = useState(() => localStorage.getItem("rapport_dark") === "1"); + const [whatsNewDismissed, setWhatsNewDismissed] = useState(() => localStorage.getItem("rapport_whats_new_v0_2_0") === "1"); + const [navOpen, setNavOpen] = useState(false); + const [expandedNav, setExpandedNav] = useState(new Set(["buchhaltung"])); + const [uiZoom, setUiZoom] = useState(() => parseFloat(localStorage.getItem("rapport_zoom") || "1")); + + // Persist dark mode + useEffect(() => { localStorage.setItem("rapport_dark", darkMode ? "1" : "0"); }, [darkMode]); + + // UI-Zoom via Tauri native API (kein CSS-Balken-Problem), Fallback auf document.body.style.zoom + useEffect(() => { + localStorage.setItem("rapport_zoom", String(uiZoom)); + const apply = async () => { + try { + if (window.__TAURI_INTERNALS__) { + const { getCurrentWebviewWindow } = await import("@tauri-apps/api/webviewWindow"); + await getCurrentWebviewWindow().setZoom(uiZoom); + } else { + document.body.style.zoom = uiZoom === 1 ? "" : String(uiZoom); + } + } catch { + document.body.style.zoom = uiZoom === 1 ? "" : String(uiZoom); + } + }; + apply(); + }, [uiZoom]); + + const zoomStep = 0.05; + const zoomIn = () => setUiZoom(z => Math.min(1.5, Math.round((z + zoomStep) * 100) / 100)); + const zoomOut = () => setUiZoom(z => Math.max(0.5, Math.round((z - zoomStep) * 100) / 100)); + + + // Navigation zu Protokoll von Projekt aus + useEffect(() => { + const handler = (e) => { + setView("protokolle"); + window.__openProtokoll = e.detail?.id || null; + }; + window.addEventListener("openProtokoll", handler); + return () => window.removeEventListener("openProtokoll", handler); + }, []); + + // Auto-expand parent when navigating to a child + useEffect(() => { + NAV_ITEMS.forEach(item => { + if (item.children?.some(c => c.id === view)) { + setExpandedNav(prev => { const next = new Set(prev); next.add(item.id); return next; }); + } + }); + }, [view]); + + const save = useCallback((newData) => { + setData(newData); + try { localStorage.setItem(STORAGE_KEY, JSON.stringify(newData)); } catch {} + }, []); + + const update = useCallback((key, value) => { + save({ ...data, [key]: value }); + }, [data, save]); + + // Auto-überfällig + useEffect(() => { + const today = new Date().toISOString().slice(0, 10); + const updated = data.invoices.map(inv => + inv.status === "gesendet" && inv.dueDate && inv.dueDate < today + ? { ...inv, status: "überfällig" } : inv + ); + if (updated.some((inv, i) => inv.status !== data.invoices[i].status)) + save({ ...data, invoices: updated }); + // eslint-disable-next-line react-hooks/exhaustive-deps + }, []); + + if (printContent) { + return setPrintContent(null)} settings={data.settings} />; + } + + return ( +

+ + + {/* Mobile Header */} +

+ +

RAPPORT

{NAV_ITEMS.find(n => n.id === view || (n.children||[]).some(c=>c.id===view))?.label || ""}

+ + {/* Sidebar */} +

RAPPORT

STUDIO ADMINISTRATION

+ +

+ {NAV_ITEMS.map(item => { + const isParentActive = view === item.id || (item.children || []).some(c => c.id === view); + const isExpanded = expandedNav.has(item.id); + const toggleExpand = (e) => { + e.stopPropagation(); + setExpandedNav(prev => { + const next = new Set(prev); + next.has(item.id) ? next.delete(item.id) : next.add(item.id); + return next; + }); + }; + if (item.children) { + return ( +

+ + +

+ {isExpanded && ( +

+ {item.children.map(child => ( + + ))} +

+ )} +

+ ); + } + return ( + + ); + })} +

+ {/* Zoom-Steuerung */} +

+ + + +

+ +

ALPHA 0.2.1

AGPL-3.0

+ +

+ + {/* Main */} +

+ {view === "dashboard" && } + {view === "projects" && !selectedProjectId && } + {view === "projects" && selectedProjectId && setSelectedProjectId(null)} setPrintContent={setPrintContent} modal={modal} setModal={setModal} />} + {view === "time" && } + {view === "quotes" && } + {view === "dokumente" && } + {view === "lieferscheine" && } + {view === "protokolle" && } + {view === "buchhaltung" && } + {view === "invoices" && } + {view === "loehne" && } + {view === "expenses" && } + {view === "internal-expenses" && } + {view === "personen" && } + {view === "mitarbeiter" && } + {view === "letters" && } + {view === "settings" && } + {view === "studio-budget" && } +

+ + {!whatsNewDismissed && ( +

NEUERUNGEN

Version 0.2.0

+ {[ + ["Wochenansicht", "Zeiterfassung mit Kalender-Ansicht, Einträge per Drag & Drop verschieben und skalieren"], + ["Tagessaldo", "Wochenkopf zeigt Soll/Ist-Differenz pro Tag — wie im Monatskalender"], + ["Eintrag kopieren", "Rechtsklick auf einen Eintrag → auf morgen duplizieren"], + ["Teilzeit & Pensum", "Lohn wird automatisch gemäss Pensum berechnet, pro Monat überschreibbar"], + ["Ferien zurückziehen", "Beantragte und genehmigte Ferien können jederzeit zurückgezogen werden"], + ].map(([title, desc]) => ( +

{title}

{desc}

+ ))} +

Datenbank-Neustart empfohlen

Aufgrund umfangreicher Neuerungen und fehlerhafter Teile im letzten Build wird empfohlen, unter Einstellungen → Datenbank löschen neu zu starten.

+ +

+ )} +

+ ); +} diff --git a/src/assets/hero.png b/src/assets/hero.png new file mode 100755 index 0000000..02251f4 Binary files /dev/null and b/src/assets/hero.png differ diff --git a/src/assets/react.svg b/src/assets/react.svg new file mode 100755 index 0000000..6c87de9 --- /dev/null +++ b/src/assets/react.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/assets/vite.svg b/src/assets/vite.svg new file mode 100755 index 0000000..5101b67 --- /dev/null +++ b/src/assets/vite.svg @@ -0,0 +1 @@ + diff --git a/src/components/UI.jsx b/src/components/UI.jsx new file mode 100755 index 0000000..4a7dcf9 --- /dev/null +++ b/src/components/UI.jsx @@ -0,0 +1,469 @@ +import React, { useState, useEffect, useRef } from "react"; +import { STATUS_COLORS, STATUS_BG } from "../constants.js"; + +export function StatusBadge({ status }) { + const color = STATUS_COLORS[status] || "#888"; + const bg = STATUS_BG[status] || "#f5f5f5"; + return ( + {status} + ); +} + +export function StatusSelect({ value, options, onChange }) { + const color = STATUS_COLORS[value] || "#888"; + const bg = STATUS_BG[value] || "#f5f5f5"; + return ( + + ); +} + +export function Header({ title, action }) { + return ( +

{title}

+ {action} +

+ ); +} + +export function FormField({ label, children }) { + return ( +

+ {label} + {children} +

+ ); +} + +export function Modal({ title, onClose, onSave, saveLabel, hideSave, children, wide, overflow }) { + return ( +

e.target === e.currentTarget && onClose()}> +

{title}

+ {children} +

+ + {!hideSave && } +

+ ); +} + +export function StudioLogo({ settings, size = 24 }) { + if (settings.logo) { + const h = settings.logoSize || 60; + return

; + } + return

{settings.name}

; +} + +export function useConfirm() { + const [pending, setPending] = useState(null); + const askConfirm = (msg, confirmLabel = "Löschen") => + new Promise(resolve => setPending({ msg, confirmLabel, resolve })); + const ConfirmModalEl = pending ? ( +

{pending.msg}

+ + +

+ ) : null; + return { askConfirm, ConfirmModalEl }; +} + +export function DateInput({ value, onChange, style, ...props }) { + const toDE = (iso) => { + if (!iso || !/^\d{4}-\d{2}-\d{2}$/.test(iso)) return ""; + return `${iso.slice(8, 10)}.${iso.slice(5, 7)}.${iso.slice(0, 4)}`; + }; + const toISO = (de) => { + const m = de.match(/^(\d{1,2})\.(\d{1,2})\.(\d{4})$/); + if (!m) return null; + const iso = `${m[3]}-${m[2].padStart(2, "0")}-${m[1].padStart(2, "0")}`; + return isNaN(new Date(iso).getTime()) ? null : iso; + }; + const [text, setText] = React.useState(() => toDE(value)); + React.useEffect(() => { const de = toDE(value); if (de !== text) setText(de); }, [value]); + const handleChange = (e) => { + const digits = e.target.value.replace(/\D/g, "").slice(0, 8); + let fmt = ""; + if (digits.length <= 2) fmt = digits; + else if (digits.length <= 4) fmt = `${digits.slice(0, 2)}.${digits.slice(2)}`; + else fmt = `${digits.slice(0, 2)}.${digits.slice(2, 4)}.${digits.slice(4)}`; + setText(fmt); + const iso = toISO(fmt); + if (iso) onChange({ target: { value: iso } }); + }; + return ( + { if (!toISO(text) && value) setText(toDE(value)); }} + placeholder="TT.MM.JJJJ" + style={style} + {...props} + /> + ); +} + +export function RichEditor({ value, onChange, minHeight = 420, compact = false }) { + const editorRef = React.useRef(null); + const isInternalChange = React.useRef(false); + const lastValue = React.useRef(value); + const savedRange = React.useRef(null); + const colorInputRef = React.useRef(null); + const [colorValue, setColorValue] = React.useState("#000000"); + + // Only push content into DOM when value changes from outside (template load) + useEffect(() => { + if (!editorRef.current) return; + if (value !== lastValue.current && !isInternalChange.current) { + editorRef.current.innerHTML = value; + lastValue.current = value; + } + isInternalChange.current = false; + }, [value]); + + const saveSelection = () => { + const sel = window.getSelection(); + if (sel && sel.rangeCount > 0 && editorRef.current?.contains(sel.anchorNode)) { + savedRange.current = sel.getRangeAt(0).cloneRange(); + } + }; + + const restoreSelection = () => { + editorRef.current?.focus(); + if (!savedRange.current) { + // Place cursor at end if no saved range + const range = document.createRange(); + range.selectNodeContents(editorRef.current); + range.collapse(false); + const sel = window.getSelection(); + if (sel) { sel.removeAllRanges(); sel.addRange(range); } + return; + } + const sel = window.getSelection(); + if (sel) { sel.removeAllRanges(); sel.addRange(savedRange.current); } + }; + + const exec = (cmd, val = null) => { + restoreSelection(); + document.execCommand(cmd, false, val); + saveSelection(); + // Sync content after command + isInternalChange.current = true; + const html = editorRef.current?.innerHTML || ""; + lastValue.current = html; + onChange(html); + }; + + + + const TB = ({ cmd, val, title, style: s, children }) => ( + + ); + const Sep = () =>

; + + return ( +

+ B + I + U + + + + + + + + + + + + + + {/* Font size */} + + + + + {/* Color */} + + { setColorValue(e.target.value); exec("foreColor", e.target.value); }} + style={{ position: "absolute", width: 0, height: 0, opacity: 0, pointerEvents: "none" }} + /> +

+ + {/* Editor */} +

{ + isInternalChange.current = true; + const html = editorRef.current?.innerHTML || ""; + lastValue.current = html; + onChange(html); + }} + onKeyUp={saveSelection} + onMouseUp={saveSelection} + onBlur={saveSelection} + onPaste={e => { + e.preventDefault(); + const text = e.clipboardData.getData("text/plain"); + restoreSelection(); + document.execCommand("insertText", false, text); + saveSelection(); + }} + style={{ + minHeight, padding: compact ? "8px 10px" : "20px 24px", outline: "none", + fontSize: compact ? 12 : 13, lineHeight: 1.8, color: "var(--text)", + background: "var(--surface)", + fontFamily: "'DM Mono', 'Courier New', monospace", + }} + /> +

+ ); +} + +export function CalendarPopup({ value, onChange, onClose, align = "left", showClear = true }) { + const [viewYM, setViewYM] = useState(() => { + const d = value ? new Date(value + "T00:00:00") : new Date(); + return { year: d.getFullYear(), month: d.getMonth() }; + }); + const todayStr = new Date().toISOString().slice(0, 10); + const { year, month } = viewYM; + const firstDay = new Date(year, month, 1); + const lastDay = new Date(year, month + 1, 0); + const startWeekday = (firstDay.getDay() + 6) % 7; + const cells = []; + for (let i = 0; i < startWeekday; i++) cells.push(null); + for (let d = 1; d <= lastDay.getDate(); d++) { + cells.push(`${year}-${String(month + 1).padStart(2, "0")}-${String(d).padStart(2, "0")}`); + } + const prevMonth = () => { const d = new Date(year, month - 1, 1); setViewYM({ year: d.getFullYear(), month: d.getMonth() }); }; + const nextMonth = () => { const d = new Date(year, month + 1, 1); setViewYM({ year: d.getFullYear(), month: d.getMonth() }); }; + const select = (ds) => { onChange(ds); onClose(); }; + + return ( +

e.stopPropagation()} + > +

+ +

+ {firstDay.toLocaleDateString("de-CH", { month: "long", year: "numeric" })} +

+ +

+ {["Mo", "Di", "Mi", "Do", "Fr", "Sa", "So"].map(d => ( +

{d}

+ ))} +

+ {cells.map((ds, i) => { + if (!ds) return

; + const dow = new Date(ds + "T00:00:00").getDay(); + const isWeekend = dow === 0 || dow === 6; + const isSelected = ds === value; + const isToday = ds === todayStr; + return ( + + ); + })} +

+ {showClear && value && ( +

+ +

+ )} +

+ ); +} + +export function DatePicker({ value, onChange, style, placeholder, align = "left", ...props }) { + const [open, setOpen] = useState(false); + const wrapRef = useRef(null); + const toDE = (iso) => { + if (!iso || !/^\d{4}-\d{2}-\d{2}$/.test(iso)) return ""; + return `${iso.slice(8, 10)}.${iso.slice(5, 7)}.${iso.slice(0, 4)}`; + }; + useEffect(() => { + if (!open) return; + const close = (e) => { if (!wrapRef.current?.contains(e.target)) setOpen(false); }; + document.addEventListener("mousedown", close); + return () => document.removeEventListener("mousedown", close); + }, [open]); + return ( +

+ setOpen(o => !o)} + placeholder={placeholder || "TT.MM.JJJJ"} + style={{ cursor: "pointer", ...style }} + {...props} + /> + {open && ( + onChange({ target: { value: ds } })} + onClose={() => setOpen(false)} + align={align} + /> + )} +

+ ); +} + +export function NavArrows({ onPrev, onNext, disabledNext = false }) { + const btn = (onClick, disabled, children) => ( + + ); + return ( +

+ {btn(onPrev, false, "‹")} +

+ {btn(onNext, disabledNext, "›")} +

{title}

+ {action} +

+ ); +} + +export function FormField({ label, children }) { + return ( +

+ {label} + {children} +

+ ); +} + +export function Modal({ title, onClose, onSave, saveLabel, hideSave, children, wide, overflow }) { + return ( +

e.target === e.currentTarget && onClose()}> +

{title}

+ {children} +

+ + {!hideSave && } +

+ ); +} + +export function StudioLogo({ settings, size = 24 }) { + if (settings.logo) { + const h = settings.logoSize || 60; + return

; + } + return

{settings.name}

{pending.msg}

+ + +

; + + return ( +

+ + {/* Editor */} +

e.stopPropagation()} + > +

+ +

+ {firstDay.toLocaleDateString("de-CH", { month: "long", year: "numeric" })} +

+ +

+ {["Mo", "Di", "Mi", "Do", "Fr", "Sa", "So"].map(d => ( +

{d}

+ ))} +

+ {cells.map((ds, i) => { + if (!ds) return

; + const dow = new Date(ds + "T00:00:00").getDay(); + const isWeekend = dow === 0 || dow === 6; + const isSelected = ds === value; + const isToday = ds === todayStr; + return ( + + ); + })} +

+ {showClear && value && ( +

+ +

+ )} +

+ ); +} + +export function useCalendarNav() { + const [open, setOpen] = useState(false); + const ref = useRef(null); + useEffect(() => { + if (!open) return; + const close = (e) => { if (!ref.current?.contains(e.target)) setOpen(false); }; + document.addEventListener("mousedown", close); + return () => document.removeEventListener("mousedown", close); + }, [open]); + return { open, setOpen, ref }; +} diff --git a/src/constants.js b/src/constants.js new file mode 100755 index 0000000..e7a2325 --- /dev/null +++ b/src/constants.js @@ -0,0 +1,252 @@ +// ─── CONSTANTS ────────────────────────────────────────────────── + +export const STORAGE_KEY = "studio_data_v1"; + +// SIA-Phasen nach SIA 102/103 (Architektur) +export const SIA_PHASES = [ + { id: "11", label: "11 Strategische Planung" }, + { id: "21", label: "21 Vorstudien" }, + { id: "22", label: "22 Machbarkeitsstudie" }, + { id: "31", label: "31 Vorprojekt" }, + { id: "32", label: "32 Bauprojekt" }, + { id: "33", label: "33 Bewilligungsverfahren" }, + { id: "41", label: "41 Ausschreibung" }, + { id: "51", label: "51 Ausführungsprojekt" }, + { id: "52", label: "52 Ausführung" }, + { id: "53", label: "53 Inbetriebnahme / Abschluss" }, +]; + +// SIA 102 Teilleistungen mit Standard-Prozentanteilen +export const SIA_PHASE_WEIGHTS = [ + { id: "31", label: "Vorprojekt", items: [ + { label: "Lösungsstudien / Grobschätzung", pct: 3 }, + { label: "Vorprojekt / Kostenschätzung", pct: 6 }, + ]}, + { id: "32", label: "Bauprojekt", items: [ + { label: "Bauprojekt", pct: 13 }, + { label: "Detailstudien", pct: 4 }, + { label: "Kostenvoranschlag", pct: 4 }, + ]}, + { id: "33", label: "Bewilligungsverfahren", items: [ + { label: "Bewilligungsverfahren", pct: 2.5 }, + ]}, + { id: "41", label: "Ausschreibung", items: [ + { label: "Ausschreibungspläne", pct: 10 }, + { label: "Ausschreibung / Offertvergleich", pct: 8 }, + ]}, + { id: "51", label: "Ausführungsplanung", items: [ + { label: "Ausführungspläne", pct: 15 }, + { label: "Werkverträge", pct: 1 }, + ]}, + { id: "52", label: "Ausführung", items: [ + { label: "Gestalterische Leitung", pct: 6 }, + { label: "Bauleitung / Kostenkontrolle", pct: 23 }, + ]}, + { id: "53", label: "Inbetriebnahme / Abschluss", items: [ + { label: "Inbetriebnahme", pct: 1 }, + { label: "Dokumentation", pct: 1 }, + { label: "Garantiearbeiten", pct: 1.5 }, + { label: "Schlussabrechnung", pct: 1 }, + ]}, +]; + +// Projekt-Typen +export const PROJECT_TYPES = [ + "Wettbewerb", + "Studienauftrag", + "Direktauftrag", + "Machbarkeitsstudie", + "Gutachten", + "Grafik", + "Sonstiges", +]; + +export const EXPENSE_CATEGORIES = [ + "Reise / Fahrt", "Drucken / Reprografie", "Modellbau / Material", + "Büromaterial", "Weiterbildung", + "Unterauftrag / Freelancer", "Verpflegung / Geschäftsessen", + "Sonstiges", +]; + +export const INTERNAL_EXPENSE_CATEGORIES = [ + "Miete / Raumkosten", "Software / Lizenzen", "Hardware / IT", + "Telefon / Internet", "Versicherung", "Steuern / Abgaben", + "Büromaterial", "Marketing / Werbung", "Weiterbildung", + "Unterauftrag / Freelancer", "Bankgebühren", "Sonstiges", +]; + +export const NAV_ITEMS = [ + { id: "dashboard", label: "Übersicht", icon: "grid_view" }, + { id: "pinnwand", label: "Pinnwand", icon: "campaign" }, + { id: "projects", label: "Projekte", icon: "work" }, + { id: "time", label: "Zeiterfassung", icon: "schedule" }, + { id: "quotes", label: "Offerten", icon: "request_quote" }, + { id: "buchhaltung", label: "Buchhaltung", icon: "account_balance", children: [ + { id: "invoices", label: "Rechnungen" }, + { id: "internal-expenses", label: "Ausgaben" }, + { id: "expenses", label: "Spesen" }, + { id: "loehne", label: "Löhne" }, + { id: "studio-budget", label: "Budget" }, + ]}, + { id: "dokumente", label: "Dokumente", icon: "folder", children: [ + { id: "protokolle", label: "Protokolle" }, + { id: "lieferscheine", label: "Lieferscheine" }, + { id: "letters", label: "Briefe" }, + ]}, + { id: "personen", label: "Personen", icon: "group" }, + { id: "mitarbeiter", label: "Mitarbeiter", icon: "badge" }, + { id: "settings", label: "Einstellungen", icon: "settings" }, +]; + +export const STATUS_COLORS = { + aktiv: "#2d6a4f", abgeschlossen: "#555", pausiert: "#b5621e", + entwurf: "#7a6a00", gesendet: "#1a4e8a", bezahlt: "#2d6a4f", überfällig: "#8a1a1a", + offen: "#7a6a00", angenommen: "#2d6a4f", abgelehnt: "#8a1a1a", abgelaufen: "#888", + genehmigt: "#1a4e8a", "auf nächsten Lohn": "#b5621e", ausbezahlt: "#2d6a4f", +}; + +export const STATUS_BG = { + aktiv: "#e8f5ee", abgeschlossen: "#f0f0ee", pausiert: "#fdf0e8", + entwurf: "#fffbe6", gesendet: "#e8f0fa", bezahlt: "#e8f5ee", überfällig: "#fdf2f2", + offen: "#fffbe6", angenommen: "#e8f5ee", abgelehnt: "#fdf2f2", abgelaufen: "#f2f2f2", + genehmigt: "#e8f0fa", "auf nächsten Lohn": "#fdf0e8", ausbezahlt: "#e8f5ee", +}; + +export const defaultData = { + settings: { + setupCompleted: false, + name: "Mein Studio", + address: "Musterstrasse 1\n8001 Zürich", + street: "", + zip: "", + city: "", + country: "CH", + email: "mail@studio.ch", + phone: "+41 79 000 00 00", + iban: "CH00 0000 0000 0000 0000 0", + ibanType: "qr", // "qr" | "normal" + mwst: "CHE-000.000.000 MWST", + mwstRate: 8.1, + defaultHourlyRate: 120, + autoPrint: false, + logoSize: 60, + expenseCategories: [...EXPENSE_CATEGORIES], + internalExpenseCategories: [...INTERNAL_EXPENSE_CATEGORIES], + projectNumberFormat: "YYYY/NN", + invoiceNumberFormat: "YYYY-NNN", + protokollNumberFormat: "YYYY-TT-NN", + protokollTypeAbbreviations: { + "Bausitzung": "BS", + "Planungssitzung": "PS", + "Baubesprechung": "BB", + "Jour fixe": "JF", + "Interne Sitzung": "IS", + "Kundensitzung": "KS", + "Abnahme": "AB", + "Sonstiges": "SO", + }, + pdfNameFormat: "{studio}_{typ}_{nummer}", + qrNewPage: true, + pageMarginTop: 20, + pageMarginBottom: 20, + pageMarginLeft: 20, + pageMarginRight: 20, + defaultWochenstunden: 35, + defaultFerienWochen: 5, + closedMonths: [], + blockMaiTag: true, + roles: [ + { id: "PL", label: "Projektleiter/in", rate: 140 }, + { id: "TS", label: "Technischer Support", rate: 120 }, + { id: "BL", label: "Bauleiter/in", rate: 135 }, + { id: "AS", label: "Administrativer Support", rate: 120 }, + ], + }, + persons: [], + projects: [], + timeEntries: [], + invoices: [], + quotes: [], + expenses: [], + internalExpenses: [], + deliveryNotes: [], + protocols: [], + employees: [], + feiertage: [], + absences: [], + ferienEntries: [], + absenzTypes: [], + lohnEntries: [], + uberstundenAbschluss: [], + dashboardTemplates: [ + { id: "tpl-admin", name: "Administrator", isPublic: true, layout: [ + { id: "dw-a1", cols: 4, minH: 0, widgets: ["kpi-projekte","kpi-stunden","kpi-ausstehend","kpi-umsatz"] }, + { id: "dw-a2", cols: 1, minH: 0, widgets: ["warnungen"] }, + { id: "dw-a3", cols: 2, minH: 0, widgets: ["aktive-projekte","unverrechnete-stunden"] }, + { id: "dw-a4", cols: 2, minH: 0, widgets: ["umsatz-sparkline","offene-offerten"] }, + { id: "dw-a5", cols: 1, minH: 0, widgets: ["letzte-zeiteintraege"] }, + ]}, + { id: "tpl-projektleiter", name: "Projektleiter", isPublic: true, layout: [ + { id: "dw-p1", cols: 2, minH: 0, widgets: ["kpi-projekte","kpi-stunden"] }, + { id: "dw-p2", cols: 1, minH: 0, widgets: ["warnungen"] }, + { id: "dw-p3", cols: 3, minH: 0, widgets: ["meine-projekte","team-auslastung","offene-offerten"] }, + { id: "dw-p4", cols: 1, minH: 0, widgets: ["letzte-zeiteintraege"] }, + ]}, + { id: "tpl-mitarbeiter", name: "Mitarbeiter", isPublic: true, layout: [ + { id: "dw-m1", cols: 3, minH: 0, widgets: ["kpi-stunden","ueberstunden","meine-ferien"] }, + { id: "dw-m2", cols: 2, minH: 0, widgets: ["meine-projekte","stunden-woche"] }, + { id: "dw-m3", cols: 1, minH: 0, widgets: ["meine-zeiteintraege"] }, + ]}, + ], + appRoles: [ + { id: "r-admin", name: "Administrator", permissions: null, dashboardTemplateId: "tpl-admin" }, + { id: "r-projektleiter", name: "Projektleiter", permissions: ["dashboard","projects","time","quotes","personen","mitarbeiter","settings"], dashboardTemplateId: "tpl-projektleiter" }, + { id: "r-mitarbeiter", name: "Mitarbeiter", permissions: ["dashboard","projects","time","personen","settings"], dashboardTemplateId: "tpl-mitarbeiter" }, + ], + users: [ + { id: "admin", username: "admin", password: "admin", role: "admin", displayName: "Administrator", appRoleId: "r-admin" }, + ], + blogPosts: [], + letterTemplates: [ + { id: "offer", name: "Offerte", body: "Sehr geehrte/r {{client}}\n\nGerne unterbreiten wir Ihnen die Offerte für das Projekt «{{project}}».\n\n[Leistungsumfang]\n\nHonorar: CHF [Betrag]\n\nWir freuen uns auf die Zusammenarbeit.\n\nFreundliche Grüsse" }, + { id: "reminder", name: "Zahlungserinnerung", body: "Sehr geehrte/r {{client}}\n\nBei einer Überprüfung unserer Buchhaltung stellen wir fest, dass die Rechnung [Nr.] vom [Datum] über CHF [Betrag] noch nicht beglichen ist.\n\nWir bitten Sie höflich, den offenen Betrag innert 10 Tagen zu überweisen.\n\nFreundliche Grüsse" }, + ], +}; + +export const PROTOKOLL_TYPES = ["Bausitzung", "Planungssitzung", "Baubesprechung", "Jour fixe", "Interne Sitzung", "Kundensitzung", "Abnahme", "Sonstiges"]; + +export const PROTOKOLL_ENTRY_TYPES = [ + { id: "beschluss", label: "Beschluss", color: "#1a4e8a", bg: "#e8f0fa", icon: "⬡" }, + { id: "info", label: "Info", color: "#2d6a4f", bg: "#e8f5ee", icon: "ℹ" }, + { id: "aufgabe", label: "Aufgabe", color: "#b5621e", bg: "#fdf0e8", icon: "◎" }, +]; + +export const DASHBOARD_WIDGETS = [ + { id: "kpi-projekte", label: "Aktive Projekte (KPI)", span: 3 }, + { id: "kpi-stunden", label: "Stunden diesen Monat (KPI)", span: 3 }, + { id: "kpi-ausstehend", label: "Ausstehend (KPI)", span: 3 }, + { id: "kpi-umsatz", label: "Jahresumsatz (KPI)", span: 3 }, + { id: "warnungen", label: "Warnungen", span: 12 }, + { id: "aktive-projekte", label: "Projektliste mit Budget", span: 4 }, + { id: "unverrechnete-stunden", label: "Unverrechnete Stunden", span: 4 }, + { id: "umsatz-sparkline", label: "Umsatz Sparkline", span: 4 }, + { id: "offene-offerten", label: "Offene Offerten", span: 4 }, + { id: "letzte-zeiteintraege", label: "Letzte Zeiteinträge", span: 12 }, + { id: "meine-zeiteintraege", label: "Meine Zeiteinträge", span: 12 }, + { id: "meine-projekte", label: "Meine Projekte", span: 6 }, + { id: "meine-ferien", label: "Ferienstand", span: 4 }, + { id: "ueberstunden", label: "Stundensaldo", span: 4 }, + { id: "stunden-woche", label: "Stunden pro Woche", span: 6 }, + { id: "team-auslastung", label: "Team-Auslastung", span: 6 }, + { id: "interner-blog", label: "Pinnwand", span: 6 }, +]; + +export const DEFAULT_ABSENZ_TYPES = [ + { id: "krankheit", label: "Krankheit", color: "#8a1a1a" }, + { id: "unfall", label: "Unfall", color: "#b5621e" }, + { id: "intern", label: "Intern", color: "#1a4e8a" }, + { id: "informatik", label: "Informatik", color: "#555" }, + { id: "rechnungswesen", label: "Rechnungswesen", color: "#7a6a00" }, + { id: "weiterbildung", label: "Weiterbildung", color: "#2d6a4f" }, + { id: "militaer", label: "Militär / Zivildienst", color: "#3d3d38" }, +]; diff --git a/src/index.css b/src/index.css new file mode 100755 index 0000000..3cb100e --- /dev/null +++ b/src/index.css @@ -0,0 +1,3 @@ +*, *::before, *::after { box-sizing: border-box; } +html, body { margin: 0; padding: 0; height: 100%; } +#root { height: 100%; } diff --git a/src/main.jsx b/src/main.jsx new file mode 100755 index 0000000..b9a1a6d --- /dev/null +++ b/src/main.jsx @@ -0,0 +1,10 @@ +import { StrictMode } from 'react' +import { createRoot } from 'react-dom/client' +import './index.css' +import App from './App.jsx' + +createRoot(document.getElementById('root')).render( + + + , +) diff --git a/src/print/PrintComponents.jsx b/src/print/PrintComponents.jsx new file mode 100755 index 0000000..8976d9e --- /dev/null +++ b/src/print/PrintComponents.jsx @@ -0,0 +1,1686 @@ +import React, { useState, useEffect } from "react"; +import { SIA_PHASES, PROJECT_TYPES, STATUS_COLORS } from "../constants.js"; +import { calcSIAHours, calcManualHours, formatCHF, formatDate, formatHours, formatSenderAddress, isQRIban, generateQRReference, formatIban, buildPdfName } from "../utils.js"; +import { StudioLogo } from "../components/UI.jsx"; + +export +function PrintView({ content, onClose, settings }) { + const triggerPrint = async () => { + const pdfName = buildPdfName(settings?.pdfNameFormat, content, settings); + const prevTitle = document.title; + document.title = pdfName; + try { + if (window.__TAURI_INTERNALS__) { + const { getCurrentWebviewWindow } = await import("@tauri-apps/api/webviewWindow"); + await getCurrentWebviewWindow().print(); + } else { + window.print(); + } + } catch { + window.print(); + } finally { + setTimeout(() => { document.title = prevTitle; }, 2000); + } + }; + + useEffect(() => { + if (!settings.autoPrint) return; + const timer = setTimeout(() => triggerPrint(), 400); + return () => clearTimeout(timer); + }, [settings.autoPrint]); + + const mTop = settings?.pageMarginTop ?? 20; + const mBottom = settings?.pageMarginBottom ?? 20; + const mLeft = settings?.pageMarginLeft ?? 20; + const mRight = settings?.pageMarginRight ?? 20; + const isQrOnly = content.type === "qrbill"; + + return ( +

+ +

+ + +

+ +

+ {content.type === "invoice" && } + {content.type === "invoice+qr" && ( + <> + +

+ +

+ + )} + {content.type === "letter" && } + {content.type === "projectDetail" && } + {content.type === "projectsOverview" && } + {content.type === "qrbill" && } + {content.type === "quote" && } + {content.type === "buchhaltung" && } + {content.type === "lohn" && } + {content.type === "lieferschein" && } + {content.type === "studioBudget" && } + {content.type === "protokoll" && } + {content.type === "mitarbeiterOverview" && } + {content.type === "timeReport" && } +

+ ); +} + +export +function InvoicePrint({ inv, client, settings }) { + return ( + <> +

+ +

{formatSenderAddress(settings)}

{settings.email} · {settings.phone}

RECHNUNG

Nr. {inv.number}

+ +

RECHNUNG AN

{client?.name || "—"}

+ {(() => { + const contact = inv.contactId ? (client?.contacts || []).find(ct => ct.id === inv.contactId) : null; + if (contact) return

z.H. {contact.name}{contact.position ? `, ${contact.position}` : ""}

; + return null; + })()} + {client?.street &&

{client.street}

} + {(client?.zip || client?.city) &&

{[client.zip, client.city].filter(Boolean).join(" ")}

} + {!client?.street && client?.address &&

{client.address}

} +

Datum: {formatDate(inv.date)}

+ {inv.dueDate &&

Fällig: {formatDate(inv.dueDate)}

} +

+ + + + + + + + {(inv.items || []).some(it => (it.discount || 0) > 0) && ( + + )} + + + + + {(inv.items || []).map((item, i) => { + const lineTotal = item.qty * item.price; + const lineDisc = (item.discount || 0) > 0 ? lineTotal * (item.discount / 100) : 0; + const hasAnyDiscount = (inv.items || []).some(it => (it.discount || 0) > 0); + return ( + + + + + {hasAnyDiscount && ( + + )} + + + ); + })} + +

BESCHREIBUNG	MENGE	PREIS	RABATT	TOTAL
{item.desc}	{item.qty}	{formatCHF(item.price)}	+ {(item.discount \|\| 0) > 0 ? `−${item.discount}%` : "—"} +	{formatCHF(lineTotal - lineDisc)}

+ +

+ {(inv.globalDisc || 0) > 0 && <> +

Zwischentotal{formatCHF((inv.items || []).reduce((s, it) => { const l = it.qty * it.price; return s + l - ((it.discount||0) > 0 ? l*(it.discount/100) : 0); }, 0))}

{inv.discountLabel || "Rabatt"}−{formatCHF(inv.globalDisc)}

+ } + {inv.mwst && <> +

Netto{formatCHF(inv.sub)}

MWST {inv.mwstRate || settings.mwstRate}%{formatCHF(inv.tax)}

+ } +

+ Total{formatCHF(inv.total)} +

+ + {inv.notes &&

{inv.notes}

} + +

ZAHLUNG AUF

{settings.iban}

Referenz: {inv.number}

{settings.mwst}

+ + ); +} + +export +function LieferscheinPrint({ note, client, data, settings }) { + const project = note.projectId ? (data?.projects || []).find(p => p.id === note.projectId) : null; + const projectLabel = project?.name || note.projectManual || null; + const addr = note.deliveryAddress || client?.address || ""; + + return ( + <> + {/* Kopf */} +

+ +

{formatSenderAddress(settings)}

{settings.email} · {settings.phone}

LIEFERSCHEIN

{note.number || "—"}

Datum: {formatDate(note.date)}

+ + {/* Empfänger & Projektinfo */} +

LIEFERUNG AN

{client?.name || note.clientManual || "—"}

+ {client?.company &&

{client.company}

} + {addr &&

{addr}

} +

+ {projectLabel && ( +

PROJEKT

{projectLabel}

+ {project?.number &&

{project.number}

} +

+ )} +

+ + {/* Positionen */} + + + + + + + + + + + + + {(note.items || []).map((it, i) => ( + + + + + + + + + ))} + +

POS.	BESCHREIBUNG	MENGE	EINHEIT	BEMERKUNG	EMPFANGEN ✓
{i + 1}	{it.desc \|\| "—"}	{it.qty}	{it.unit}	{it.note \|\| ""}	+ +

+ + {/* Notizen */} + {note.notes && ( +

+ {note.notes} +

+ )} + + {/* Unterschriften */} +

+ ÜBERGABE – {settings.name} +

Datum / Unterschrift

+ EMPFANG – {client?.name || note.clientManual || "Empfänger"} +

Datum / Unterschrift

+ + {/* Footer */} +

{settings.name} · {formatSenderAddress(settings).split("\n")[0]}

{note.number}

+ + ); +} + +export +function StudioBudgetPrint({ snapshot, settings }) { + const r = snapshot.results || {}; + const rateOk = (r.currentRate || 0) >= (r.zielHonorar || 0); + const b = snapshot.b || {}; + + const PRow = ({ label, value, bold, indent, color }) => ( +

+ {label} + {value} +

+ ); + + return ( + <> + {/* Kopf */} +

+ +

{formatSenderAddress(settings)}

BÜROBUDGET

{snapshot.name}

+ Erstellt: {snapshot.savedAt ? new Date(snapshot.savedAt).toLocaleDateString("de-CH", { day: "numeric", month: "long", year: "numeric" }) : "—"} +

+ +

+ + {/* Kostenstruktur */} +

KOSTENSTRUKTUR / JAHR

+ + + + +

+ Gesamtkosten + {formatCHF(r.gesamtKosten || 0)} +

+ + {/* Jahresstunden & Kernresultat */} +

STUNDENANALYSE

+ + +

SELBSTKOSTEN/H

{formatCHF(Math.round(r.selbstkosten || 0))}

ZIEL-HONORAR/H

{formatCHF(Math.round(r.zielHonorar || 0))}

inkl. {b.zielMarge || 25}% Marge

+ {rateOk ? "✓ Aktueller Ansatz ausreichend" : "⚠ Aktueller Ansatz zu tief"} +

+ Aktuell: {formatCHF(r.currentRate || 0)}/h · Ziel: {formatCHF(Math.round(r.zielHonorar || 0))}/h · Differenz: {rateOk ? "+" : ""}{formatCHF(Math.round((r.currentRate || 0) - (r.zielHonorar || 0)))} +

+ + {/* Personal-Detail */} + {(snapshot.empSnapshot || []).length > 0 && ( +

PERSONAL

+ + + + + + + + + + {snapshot.empSnapshot.filter(r => r.aktiv).map((r, i) => ( + + + + + + ))} + +

Mitarbeiter	Jahreskosten	Jahresstunden
{r.name}	{formatCHF(r.kosten)}	{r.stunden}h

+ )} + + {/* Fixkosten-Detail */} + {(snapshot.fixSnapshot || []).length > 0 && ( +

FIXKOSTEN

+ + + + + + + + + {snapshot.fixSnapshot.map((r, i) => ( + + + + + ))} + +

Posten	CHF/Jahr
{r.label}	{formatCHF(r.amount)}

+ )} + + {/* Footer */} +

{settings.name}

Bürobudget · {snapshot.name}

+ + ); +} + +export +function ProtokollPrint({ protokoll, data, settings }) { + const p = protokoll; + const proj = data?.projects?.find(x => x.id === p.projectId); + const projLabel = proj?.name || p.projectManual || null; + const today = new Date().toLocaleDateString("de-CH", { day: "numeric", month: "long", year: "numeric" }); + + const statusLabels = { anwesend: "A", entschuldigt: "E", abwesend: "Ab", eingeladen: "Eingeladen" }; + const statusColors = { anwesend: "#2d6a4f", entschuldigt: "#b5621e", abwesend: "#8a1a1a", eingeladen: "#1a4e8a" }; + + const allTasks = (p.traktanden || []).flatMap(t => + (t.items || []).filter(it => it.type === "aufgabe") + .map(it => ({ ...it, tNr: t.nr, tTitle: t.title })) + ); + const allBeschluesse = (p.traktanden || []).flatMap(t => + (t.items || []).filter(it => it.type === "beschluss") + .map(it => ({ ...it, tNr: t.nr, tTitle: t.title })) + ); + + return ( + <> + {/* Kopf */} +

+ +

{formatSenderAddress(settings)}

PROTOKOLL

{p.nummer}

+ + {/* Titel & Meta */} +

{p.title || "Protokoll"}

+ {[ + { label: "TYP", value: p.type }, + { label: "DATUM", value: p.date ? `${formatDate(p.date)}${p.time ? `, ${p.time}${p.endTime ? `–${p.endTime}` : ""} Uhr` : ""}` : "—" }, + { label: "ORT", value: p.location || "—" }, + { label: "PROJEKT", value: projLabel || "—" }, + ].map(m => ( +

{m.label}

{m.value}

+ ))} +

+ + {/* Teilnehmer */} + {(p.participants || []).length > 0 && ( +

TEILNEHMER

+ + + + + + + + + + {(p.participants || []).map((tn, i) => ( + + + + + + ))} + +

Name	Funktion	Status
{tn.name}	{tn.role \|\| "—"}	+ {statusLabels[tn.status] \|\| tn.status} +

+ )} + + {/* Traktanden */} + {(p.traktanden || []).map(t => { + const hasContent = t.title || (t.items || []).length > 0; + if (!hasContent) return null; + return ( +

+ {t.nr} + {t.title || "—"} +

+ {(t.items || []).map((item, ii) => { + const icons = { info: "ℹ", beschluss: "✅", aufgabe: "📌" }; + const colors = { info: "#1a4e8a", beschluss: "#2d6a4f", aufgabe: "#b5621e" }; + return ( +

{icons[item.type]}

{item.text || "—"}

+ {item.type === "beschluss" && item.date && ( +

Beschluss vom {formatDate(item.date)}

+ )} + {item.type === "aufgabe" && ( +

+ {item.responsible && → {item.responsible}} + {item.dueDateType === "kw" ? (item.dueKW ? `KW ${item.dueKW}/${item.dueYear || ""}` : "—") : item.dueDate ? formatDate(item.dueDate) : "—"} + {item.status} +

+ )} +

+ ); + })} +

+ ); + })} + + {/* Aufgabenliste */} + {allTasks.length > 0 && ( +

AUFGABEN-ÜBERSICHT

+ + + + + + + + + + + {allTasks.map((t, i) => ( + + + + + + + ))} + +

Aufgabe	Verantwortlich	Fälligkeit	Status
+ {t.tNr}.{t.text \|\| "—"} +	{t.responsible \|\| "—"}	+ {t.dueDateType === "kw" ? (t.dueKW ? `KW ${t.dueKW}/${t.dueYear \|\| ""}` : "—") : t.dueDate ? formatDate(t.dueDate) : "—"} +	{t.status}

+ )} + + {/* Nächste Sitzung */} + {(p.nextDate || p.verteiler) && ( +

+ {p.nextDate &&

Nächste Sitzung:{formatDate(p.nextDate)}

} + {p.verteiler &&

Verteiler:{p.verteiler}

} +

+ )} + + {/* Unterschriften */} +

PROTOKOLLFÜHRUNG

Datum / Unterschrift

GENEHMIGUNG

Datum / Unterschrift

+ + {/* Footer */} +

{settings.name} · {p.nummer}

Erstellt {today}{p.verteiler ? ` · Verteiler: ${p.verteiler}` : ""}

+ + ); +} + +export +function LetterPrint({ client, subject, body, isHtml, settings }) { + return ( + <> +

+ +

{formatSenderAddress(settings)}

{settings.email}

{settings.phone}

+ +

+ {client ? (<> +

{client.name}

+ {client.company &&

{client.company}

} + {client.street &&

{client.street}

} + {(client.zip || client.city) &&

{[client.zip, client.city].filter(Boolean).join(" ")}

} + {!client.street && !client.city && client.address &&

{client.address}

} + ) :

[Empfänger]

} +

+ +

+ {settings.city || (settings.address || "").split("\n").pop().replace(/^\d{4,5}\s*/, "").trim() || "Zürich"}, {new Date().toLocaleDateString("de-CH", { day: "numeric", month: "long", year: "numeric" })} +

+ + {subject &&

{subject}

} + + + {isHtml + ?

+ :

{body}

+ } + +

{settings.name}

+ + ); +} + +export +function ProjectDetailPrint({ content, settings }) { + const { project, client, entries, phaseStats, unassignedMins, totalMinutes, totalAmount, billingType, invoices, data } = content; + return ( + <> +

+ +

{formatSenderAddress(settings)}

PROJEKTREPORT

{new Date().toLocaleDateString("de-CH")}

+ +

{(project.category || "PROJEKT").toUpperCase()}

{project.name}

+ {client &&

{client.name}{client.company ? ` · ${client.company}` : ""}

} + {project.description &&

{project.description}

} +

+ +

STUNDEN TOTAL

{formatHours(totalMinutes)}

{billingType === "stundensatz" ? "AUFWAND" : "PAUSCHALE"}

{formatCHF(totalAmount)}

EINTRÄGE

{entries.length}

+ + {phaseStats.length > 0 && ( +

+ AUFWAND PRO SIA-PHASE · HAUPTAUFTRAG +

+ {phaseStats.map(ps => ( +

+ {ps.label} + {formatHours(ps.minutes)} · {ps.percent.toFixed(1)}% +

+ ))} + {unassignedMins > 0 &&

Ohne Phasen-Zuordnung: {formatHours(unassignedMins)}

} +

+ )} + + {(project.positions || []).filter(pos => { + const posEntries = entries.filter(e => e.positionId === pos.code); + return posEntries.length > 0 || (pos.enabledPhases || []).length > 0; + }).map(pos => { + const posEntries = entries.filter(e => e.positionId === pos.code); + const posMins = posEntries.reduce((s, e) => s + (e.minutes || 0), 0); + const allPhaseIds = [...new Set([...(pos.enabledPhases || []), ...posEntries.map(e => e.phaseId).filter(Boolean)])]; + const linkedQ = pos.quoteId ? (data?.quotes || []).find(q => q.id === pos.quoteId) : null; + return ( +

+ ↪ {pos.code}{pos.label ? ` · ${pos.label}` : ""}{linkedQ ? ` · ${linkedQ.number}` : ""} + {formatHours(posMins)} +

+ {allPhaseIds.length > 0 ? allPhaseIds.map(phId => { + const ph = SIA_PHASES.find(p => p.id === phId); + if (!ph) return null; + const phMins = posEntries.filter(e => e.phaseId === phId).reduce((s, e) => s + (e.minutes || 0), 0); + const pct = posMins > 0 ? (phMins / posMins) * 100 : 0; + return ( +

+ {ph.label} + {formatHours(phMins)} · {pct.toFixed(1)}% +

+ ); + }) : ( + posMins === 0 ? null :

Keine Phasen-Unterteilung · {formatHours(posMins)}

+ )} +

+ ); + })} + + {entries.length > 0 && ( +

ZEITEINTRÄGE

+ + + + + + + + + + + {entries.map(e => { + const phase = SIA_PHASES.find(p => p.id === e.phaseId); + return ( + + + + + + + ); + })} + +

DATUM	PHASE	TÄTIGKEIT	DAUER
{formatDate(e.date)}	{phase?.id \|\| "—"}	{e.description \|\| "—"}	{formatHours(e.minutes)}

+ )} + + {invoices && invoices.length > 0 && ( +

RECHNUNGEN

+ + + {invoices.map(inv => ( + + + + + + + ))} + +

{inv.number}

{formatDate(inv.date)}

{inv.status}

{formatCHF(inv.total)}

+ )} + + ); +} + +export +function ProjectsOverviewPrint({ projects, data, settings }) { + const projectMinutes = (id) => data.timeEntries.filter(e => e.projectId === id).reduce((s, e) => s + (e.minutes || 0), 0); + const projectAmount = (p) => { + const bType = p.billingType || p.type; + if (bType === "stundensatz") return (projectMinutes(p.id) / 60) * p.hourlyRate; + return p.budget || 0; + }; + + const grouped = PROJECT_TYPES.map(cat => ({ + category: cat, + projects: projects.filter(p => (p.category || "Sonstiges") === cat), + })).filter(g => g.projects.length > 0); + + const uncategorized = projects.filter(p => !p.category); + if (uncategorized.length > 0) grouped.push({ category: "Ohne Kategorie", projects: uncategorized }); + + const totalMins = projects.reduce((s, p) => s + projectMinutes(p.id), 0); + const totalAmount = projects.reduce((s, p) => s + projectAmount(p), 0); + + return ( + <> +

+ +

{formatSenderAddress(settings)}

PROJEKTÜBERSICHT

{new Date().toLocaleDateString("de-CH")}

+ +

Alle Projekte

{projects.length} Projekte · {formatHours(totalMins)} · {formatCHF(totalAmount)}

+ + {grouped.map(g => ( +

{g.category.toUpperCase()} — {g.projects.length}

+ + + + + + + + + + + + + + + + + + + {g.projects.map(p => { + const client = ((data.persons||[]).filter(p=>p.isAuftraggeber)).find(c => c.id === p.clientId); + return ( + + + + + + + + ); + })} + +

PROJEKT	KUNDE	STATUS	STUNDEN	BETRAG
{p.name}	{client?.name \|\| "—"}	{p.status}	+ {formatHours(projectMinutes(p.id))} + {p.budgetHours > 0 && / {p.budgetHours}h} +	{formatCHF(projectAmount(p))}

+ ))} + +

+ Total + {formatHours(totalMins)} · {formatCHF(totalAmount)} +

+ + ); +} + +export +function QRBillPrint({ inv, client, settings }) { + const [qrSvg, setQrSvg] = useState(null); + const [error, setError] = useState(null); + + useEffect(() => { + let cancelled = false; + + const loadSwissQRBill = () => new Promise((resolve, reject) => { + if (window.SwissQRBill) return resolve(window.SwissQRBill); + const existing = document.querySelector('script[data-swissqrbill]'); + if (existing) { + existing.addEventListener("load", () => resolve(window.SwissQRBill)); + existing.addEventListener("error", reject); + return; + } + const script = document.createElement("script"); + script.src = "https://cdn.jsdelivr.net/npm/swissqrbill@4/lib/browser/bundle/svg.min.js"; + script.dataset.swissqrbill = "true"; + script.onload = () => resolve(window.SwissQRBill); + script.onerror = () => { + // Fallback URL + const fallback = document.createElement("script"); + fallback.src = "https://cdn.jsdelivr.net/npm/swissqrbill/lib/browser/bundle/index.js"; + fallback.onload = () => resolve(window.SwissQRBill); + fallback.onerror = reject; + document.head.appendChild(fallback); + }; + document.head.appendChild(script); + }); + + (async () => { + try { + const lib = await loadSwissQRBill(); + if (cancelled) return; + if (!lib) throw new Error("swissqrbill-Bibliothek konnte nicht geladen werden"); + + // Daten vorbereiten + const ibanClean = (settings.iban || "").replace(/\s/g, "").toUpperCase(); + const hasQRIban = isQRIban(ibanClean); + const data = { + currency: "CHF", + amount: inv.total, + creditor: { + name: settings.name || "—", + address: settings.street || "—", + zip: settings.zip || "", + city: settings.city || "", + account: ibanClean, + country: settings.country || "CH", + }, + }; + if (client) { + data.debtor = { + name: client.company || client.name || "—", + address: client.street || "—", + zip: client.zip || "", + city: client.city || "", + country: client.country || "CH", + }; + } + if (hasQRIban) { + data.reference = generateQRReference(inv.number); + } + if (inv.notes || inv.number) { + data.message = `Rechnung ${inv.number}`; + } + + // SVG erstellen — je nach Exportstruktur unterschiedlich + const SVG = lib.SVG || lib.SwissQRBill || (lib.svg && lib.svg.SVG); + if (!SVG) throw new Error("SVG-Klasse nicht gefunden in swissqrbill"); + const qr = new SVG(data); + const svgElement = qr.element || qr.outerHTML || qr; + const svgString = typeof svgElement === "string" ? svgElement : svgElement.outerHTML; + + if (!cancelled) setQrSvg(svgString); + } catch (err) { + console.error("QR-Bill Fehler:", err); + if (!cancelled) setError(err.message || "Fehler beim Generieren der QR-Rechnung"); + } + })(); + + return () => { cancelled = true; }; + }, [inv, client, settings]); + + if (error) { + return ( +

Fehler beim Generieren

{error}

+ Mögliche Ursachen: fehlende Empfänger-Adresse (Strasse, PLZ, Ort), ungültige IBAN, oder fehlende Internetverbindung zum CDN. +

+ ); + } + + if (!qrSvg) { + return ( +

QR-Rechnung wird generiert…

+ ); + } + + return ( +

+ ); +} + +export +function QuotePrint({ quote, client, settings }) { + const taxRate = settings.mwstRate || 8.1; + const roles = quote.quoteRoles || settings.roles || []; + const siaCalc = quote.mode === "sia" && quote.sia ? calcSIAHours(quote.sia.baukosten, quote.sia.schwierigkeit, quote.sia.phases) : null; + const manCalc = quote.mode === "manual" ? calcManualHours(quote.manualPhases || [], roles) : null; + const stundenansatz = quote.sia?.stundenansatz || 0; + + return ( + <> +

+ +

{formatSenderAddress(settings)}

{settings.email} · {settings.phone}

HONORAROFFERTE

Nr. {quote.number}

+ +

OFFERTE AN

+ {client ? ( + <> + {client.company &&

{client.company}

} +

{client.name || "—"}

+ {client.street &&

{client.street}

} + {(client.zip || client.city) &&

{[client.zip, client.city].filter(Boolean).join(" ")}

} + {!client.street && !client.city && client.address &&

{client.address}

} + + ) :

—

} +

Datum: {formatDate(quote.date)}

+ {quote.validUntil &&

Gültig bis: {formatDate(quote.validUntil)}

} +

+ + {quote.notes &&

{quote.notes}

} + + {/* SIA-Modus */} + {quote.mode === "sia" && siaCalc && ( + <> +

+ HONORARBERECHNUNG NACH SIA 102 +

Aufwandbestimmende Baukosten

{formatCHF(quote.sia.baukosten)}

Schwierigkeitsgrad n

{quote.sia.schwierigkeit}

Stundenansatz

CHF {stundenansatz}.–/h

+ + + + + + + + + + + + {siaCalc.phases.map(ph => ( + + + + + {ph.items.filter(it => it.enabled !== false && it.hours > 0).map((it, idx) => ( + + + + + + + ))} + + + + + + + ))} + +

TEILLEISTUNG	%	STUNDEN	HONORAR
+ Phase {ph.id} · {ph.label} +
{it.label}	{it.pct}%	{formatHours(Math.round(it.hours * 60))}	{formatCHF(it.hours * stundenansatz)}
Total Phase {ph.id}	{formatHours(Math.round(ph.hours * 60))}	{formatCHF(ph.hours * stundenansatz)}

+ + )} + + {/* Manueller Modus */} + {quote.mode === "manual" && manCalc && ( + <> +

+ HONORARSCHÄTZUNG STUNDENAUFWAND +

+ {roles.map(r => ( +

{r.id} {r.label} — CHF {r.rate}.–/h

+ ))} +

+ + + + + {roles.map(r => ( + + ))} + + + + + + {manCalc.phases.filter(p => p.totalHours > 0).map(ph => ( + + + {roles.map(r => { + const h = ph.roleDetails.find(rd => rd.id === r.id)?.hours || 0; + return ; + })} + + + + ))} + +

PHASE	{r.id}	Std	Honorar
{ph.label}	{h \|\| "—"}	{ph.totalHours}	{formatCHF(ph.totalAmount)}

+ + )} + + {/* Freier Modus */} + {quote.mode === "free" && (quote.freeItems || []).length > 0 && ( + <> +

+ LEISTUNGEN / POSITIONEN +

+ + + + + + + + + + + {(quote.freeItems || []).map((it, idx) => ( + + + + + + + ))} + +

BESCHREIBUNG	MENGE	PREIS	TOTAL
{it.desc \|\| "—"}	{it.qty}	{formatCHF(it.price)}	{formatCHF(it.qty * it.price)}

+ + )} + + {/* Total */} +

+ Netto + {formatCHF(quote.sub)} +

+ {quote.mwst && ( +

+ MWST {taxRate}% + {formatCHF(quote.tax)} +

+ )} +

+ Offertsumme + {formatCHF(quote.total)} +

+ +

+ Diese Offerte ist unverbindlich und {quote.validUntil ? `gültig bis ${formatDate(quote.validUntil)}` : "zeitlich unbegrenzt gültig"}. + {quote.mode !== "free" && " Honorar gemäss SIA-Ordnung 102."} Änderungen am Auftragsumfang können zu einer Anpassung führen. +

+ + ); +} + +export +function LohnPrint({ entry, emp, data, monatLabel, settings }) { + const spesen = (data.expenses || []).filter(e => e.lohnEntryId === entry.id); + // Immer den gespeicherten Snapshot verwenden — nie live emp-Werte + const s = entry.saetzeSnapshot || emp; + + const LRow = ({ label, betrag, satz, bold, sub, color, topBorder }) => ( + + {label} + {satz || ""} + {formatCHF(betrag)} + + ); + + return ( +

+ {/* Header: Arbeitgeber links, Arbeitnehmer rechts */} +

+ +

+ {formatSenderAddress(settings).split("\n").map((l,i) =>

{l}

)} + {settings.email &&

{settings.email}

} +

LOHNABRECHNUNG

{entry.empSnapshot?.name || emp.name}

+ {emp.role &&

{emp.role}

} + {emp.personalNr &&

Personal-Nr. {emp.personalNr}

} + {emp.ahvNr &&

AHV-Nr. {emp.ahvNr}

} + {emp.adresse &&

{emp.adresse}

} + {emp.ort &&

{emp.ort}

} +

+ + {/* Periode */} +

PERIODE

{monatLabel}

ABRECHNUNGSDATUM

{new Date(entry.createdAt).toLocaleDateString("de-CH")}

+ {emp.eintrittsdatum && ( +

EINTRITTSDATUM

{formatDate(emp.eintrittsdatum)}

+ )} +

PENSUM

{s.pensum || 100}%

+ + {/* Lohn-Tabelle */} + + + + + + + + + + + {(s.pensum || 100) < 100 && entry.bruttoBase != null && entry.bruttoBase !== entry.brutto && ( + + )} + {entry.dreizehnter > 0 && } + {entry.bonusBetrag > 0 && } + + + {/* Spacer */} + + + + + + + + {entry.qst > 0 && } + + + + {spesen.length > 0 && <> + + {spesen.map(s => )} + } + + + +

POSITION	SATZ	BETRAG CHF
ABZÜGE ARBEITNEHMER
SPESENERSTATTUNG

+ + {/* Überweisungsdetails */} + {emp.lohnIban && ( +

ÜBERWEISUNG AUF

{formatIban(emp.lohnIban)}

+ {emp.name &&

{emp.name}{emp.ort ? ` · ${emp.ort}` : ""}

} +

+ )} + + {/* Arbeitgeber-Anteile (informativ, klein) */} +

ARBEITGEBERANTEILE (informativ)

+ {[ + { label: "AHV/IV/EO", val: Math.round(entry.bruttoTotal * (s.ahvSatz ?? 5.3) / 100 * 100)/100 }, + { label: "ALV", val: Math.round(entry.bruttoTotal * (s.alvSatz ?? 1.1) / 100 * 100)/100 }, + { label: "BVG/PK (AG)", val: Math.round(entry.bruttoTotal * (s.bvgSatz ?? 8.0) / 100 * 100)/100 }, + { label: "UVG BU", val: Math.round(entry.bruttoTotal * 0.5 / 100 * 100)/100 }, + ].map(r => ( +

{r.label}

{formatCHF(r.val)}

+ ))} +

+ +

+ Lohnabrechnung gemäss OR Art. 323b · {settings.name}{settings.mwst ? ` · ${settings.mwst}` : ""} +

+ ); +} + +export +function BuchhaltungPrint({ data, filterYear, settings }) { + const mwstRate = settings.mwstRate || 8.1; + const invoices = [...data.invoices] + .filter(i => !filterYear || (i.date || "").startsWith(filterYear)) + .sort((a, b) => (a.date || "").localeCompare(b.date || "")); + const expenses = [...(data.expenses || [])] + .filter(e => !filterYear || (e.date || "").startsWith(filterYear)) + .sort((a, b) => (a.date || "").localeCompare(b.date || "")); + const loehne = [...(data.lohnEntries || [])] + .filter(l => !filterYear || l.monat.startsWith(filterYear)) + .sort((a, b) => a.monat.localeCompare(b.monat)); + + const totalInvoicedNet = invoices.reduce((s, i) => s + (i.sub || 0), 0); + const totalInvoicedTax = invoices.reduce((s, i) => s + (i.tax || 0), 0); + const totalExpBrutto = expenses.reduce((s, e) => s + (e.amount || 0), 0); + const totalExpNet = expenses.reduce((s, e) => { const net = e.inclMwst ? e.amount / (1 + (e.mwstRate || 0) / 100) : e.amount; return s + net; }, 0); + const totalExpTax = totalExpBrutto - totalExpNet; + const totalLoehne = loehne.reduce((s, l) => s + (l.auszahlung || 0), 0); + const totalAusgaben = totalExpNet + totalLoehne; + + const thStyle = { textAlign: "left", padding: "6px 0", fontSize: 8, letterSpacing: "0.1em", color: "#888", fontWeight: 500, borderBottom: "1px solid #1a1a18" }; + const thR = { ...thStyle, textAlign: "right" }; + const tdStyle = { padding: "5px 0", fontSize: 9, borderBottom: "1px solid #f0f0f0" }; + const tdR = { ...tdStyle, textAlign: "right" }; + + return ( + <> + {/* Header */} +

+ +

{formatSenderAddress(settings)}

BUCHHALTUNGSÜBERSICHT

{filterYear || "Alle Jahre"}

{new Date().toLocaleDateString("de-CH")}

+ + {/* Zusammenfassung */} +

EINNAHMEN

+ {[ + { label: "Umsatz (Netto)", value: totalInvoicedNet }, + { label: `MWST ${mwstRate}%`, value: totalInvoicedTax, small: true }, + { label: "Umsatz (Brutto)", value: totalInvoicedNet + totalInvoicedTax, bold: true }, + ].map((r, i) => ( +

+ {r.label} + {formatCHF(r.value)} +

+ ))} +

AUSGABEN & ERGEBNIS

+ {[ + { label: "Spesen / Ausgaben (Netto)", value: totalExpNet }, + { label: "Vorsteuer", value: totalExpTax, small: true }, + { label: `Personalaufwand / Löhne (${loehne.length})`, value: totalLoehne }, + { label: "Ergebnis (Netto)", value: totalInvoicedNet - totalAusgaben, bold: true }, + { label: "MWST-Schuld", value: totalInvoicedTax - totalExpTax, bold: true, small: true }, + ].map((r, i) => ( +

+ {r.label} + {formatCHF(r.value)} +

+ ))} +

+ + {/* Rechnungen */} +

+ RECHNUNGEN ({invoices.length}) +

+ + + + + + + + + + + + + + + {invoices.map(inv => { + const client = ((data.persons||[]).filter(p=>p.isAuftraggeber)).find(c => c.id === inv.clientId); + const desc = (inv.items || []).map(it => it.desc).filter(Boolean).join(", "); + return ( + + + + + + + + + + + ); + })} + + + + + + + + + + +

NR.	DATUM	KUNDE	BESCHREIBUNG	NETTO	MWST	TOTAL	STATUS
{inv.number}	{formatDate(inv.date)}	{client?.name \|\| "—"}	{desc \|\| "—"}	{formatCHF(inv.sub)}	{inv.mwst ? formatCHF(inv.tax) : "—"}	{formatCHF(inv.total)}	{inv.status}
Total	{formatCHF(totalInvoicedNet)}	{formatCHF(totalInvoicedTax)}	{formatCHF(totalInvoicedNet + totalInvoicedTax)}

+ + {/* Spesen */} +

+ SPESEN / AUSGABEN ({expenses.length}) +

+ + + + + + + + + + + + + + {expenses.map(e => { + const proj = data.projects.find(p => p.id === e.projectId); + const net = e.inclMwst ? e.amount / (1 + (e.mwstRate || 0) / 100) : e.amount; + const tax = e.amount - net; + return ( + + + + + + + + + + ); + })} + + + + + + + + + +

DATUM	KATEGORIE	PROJEKT	BESCHREIBUNG	NETTO	VORSTEUER	BRUTTO
{formatDate(e.date)}	{e.category}	{proj?.name \|\| "—"}	{e.description \|\| "—"}	{formatCHF(net)}	{e.mwstRate > 0 ? formatCHF(tax) : "—"}	{formatCHF(e.amount)}
Total	{formatCHF(totalExpNet)}	{formatCHF(totalExpTax)}	{formatCHF(totalExpBrutto)}

+ + {/* Personalaufwand / Löhne */} + {loehne.length > 0 && ( +

+ PERSONALAUFWAND / LÖHNE ({loehne.length}) +

+ + + + + + + + + + + + + + {loehne.map(l => ( + + + + + + + + + + ))} + + + + + + + + + +

MONAT	MITARBEITER	BRUTTO	ABZÜGE AN	NETTO	SPESEN	AUSZAHLUNG
{l.monat}	{l.empSnapshot?.name \|\| "—"}	{formatCHF(l.bruttoTotal)}	{formatCHF(l.totalAbzuege)}	{formatCHF(l.netto)}	{l.spesenTotal > 0 ? formatCHF(l.spesenTotal) : "—"}	{formatCHF(l.auszahlung)}
Total Auszahlungen			{formatCHF(totalLoehne)}

+ )} + +

+ {settings.name} · {settings.mwst} · Erstellt am {new Date().toLocaleDateString("de-CH")} +

+ + ); +} + +function MitarbeiterOverviewPrint({ employees, settings }) { + const active = employees.filter(e => e.status !== "inaktiv"); + const inactive = employees.filter(e => e.status === "inaktiv"); + + const Row = ({ label, value }) => value ? ( +

+ {label} + {value} +

+ ) : null; + + const EmpCard = ({ emp }) => ( +

{emp.name}

+ {emp.role &&

{emp.role}

} +

+ {emp.personalNr &&

#{emp.personalNr}

} +

+ + + + + +

+ ); + + return ( + <> +

+ +

{formatSenderAddress(settings)}

MITARBEITERÜBERSICHT

{new Date().toLocaleDateString("de-CH")}

+ +

Mitarbeiter

{employees.length} Mitarbeitende · {active.length} aktiv

+ + {active.length > 0 && ( +

AKTIV — {active.length}

+ {active.map(e => )} +

+ )} + + {inactive.length > 0 && ( +

INAKTIV — {inactive.length}

+ {inactive.map(e => )} +

+ )} + + ); +} + +function TimeReportPrint({ employee, entries, month, data, settings }) { + const monthEntries = entries.filter(e => e.date.startsWith(month)) + .sort((a, b) => a.date.localeCompare(b.date) || (a.startTime || "").localeCompare(b.startTime || "")); + + const projects = data.projects || []; + const getProj = (id) => projects.find(p => p.id === id); + + const totalMins = monthEntries.reduce((s, e) => s + (e.minutes || 0), 0); + + const byProject = {}; + monthEntries.forEach(e => { + const k = e.projectId || "__none__"; + if (!byProject[k]) byProject[k] = { proj: getProj(e.projectId), mins: 0 }; + byProject[k].mins += e.minutes || 0; + }); + + const monthLabel = new Date(month + "-01").toLocaleDateString("de-CH", { month: "long", year: "numeric" }); + + return ( + <> +

+ +

{formatSenderAddress(settings)}

STUNDENRAPPORT

{new Date().toLocaleDateString("de-CH")}

+ +

{employee?.name}

{monthLabel} · {formatHours(totalMins)}

+ + {/* Zusammenfassung */} +

ZUSAMMENFASSUNG PRO PROJEKT

+ {Object.values(byProject).sort((a, b) => b.mins - a.mins).map(({ proj, mins }) => ( +

+ {proj ? `${proj.number ? proj.number + " " : ""}${proj.name}` : "Kein Projekt"} + {formatHours(mins)} +

+ ))} +

+ Total{formatHours(totalMins)} +

+ + {/* Detailliste */} +

EINZELEINTRÄGE

+ + + + {["Datum", "Projekt", "Zeit", "Stunden", "Notiz"].map(h => ( + + ))} + + + + {monthEntries.map(e => { + const proj = getProj(e.projectId); + return ( + + + + + + + + ); + })} + +

{h}
{formatDate(e.date)}	{proj ? `${proj.number ? proj.number + " " : ""}${proj.name}` : "—"}	{e.startTime && e.endTime ? `${e.startTime}–${e.endTime}` : "—"}	{formatHours(e.minutes \|\| 0)}	{e.note \|\| ""}

+ + {monthEntries.length === 0 && ( +

Keine Einträge für diesen Monat

+ )} + + ); +} diff --git a/src/utils.js b/src/utils.js new file mode 100755 index 0000000..7e2aba1 --- /dev/null +++ b/src/utils.js @@ -0,0 +1,540 @@ +// ─── UTILS ────────────────────────────────────────────────── + +import { DEFAULT_ABSENZ_TYPES } from "./constants.js"; + +// SIA-Honorar-Formel: p = Z1 + Z2 / ∛B +export function calcSIAHours(baukosten, schwierigkeit, phasen) { + if (!baukosten || baukosten <= 0) return { p: 0, total: 0, phases: [] }; + const cbrtB = Math.cbrt(baukosten); + const p = 0.062 + 10.58 / cbrtB; + const results = phasen.map(ph => { + const items = ph.items.map(it => { + if (it.enabled === false) return { ...it, hours: 0 }; + const r = it.r ?? 1; + const hours = baukosten * (p / 100) * schwierigkeit * (it.pct / 100) * r; + return { ...it, hours: Math.round(hours * 10) / 10 }; + }); + const phaseHours = items.reduce((s, it) => s + it.hours, 0); + return { ...ph, items, hours: phaseHours }; + }); + const total = results.reduce((s, ph) => s + ph.hours, 0); + return { p: Math.round(p * 1000) / 1000, cbrtB, total, phases: results }; +} + +// Manuelle Aufwandschätzung: Stunden pro Rolle × Stundensatz +export function calcManualHours(phases, roles) { + const results = phases.filter(ph => ph.enabled).map(ph => { + const roleDetails = (roles || []).map(r => ({ + ...r, hours: ph.hoursByRole?.[r.id] || 0, + })); + const totalHours = roleDetails.reduce((s, r) => s + r.hours, 0); + const totalAmount = roleDetails.reduce((s, r) => s + r.hours * r.rate, 0); + return { ...ph, roleDetails, totalHours, totalAmount }; + }); + return { + phases: results, + totalHours: results.reduce((s, p) => s + p.totalHours, 0), + totalAmount: results.reduce((s, p) => s + p.totalAmount, 0), + }; +} + +// Berechnet Budget aus linkedQuotes-Array (Migration von sourceQuoteId) +export function migrateLinkedQuotes(project) { + if (project.linkedQuotes) return project.linkedQuotes; + if (project.sourceQuoteId) return [{ quoteId: project.sourceQuoteId, role: "Hauptofferte" }]; + return []; +} + +export function deriveQuoteBudget(linkedQuotes, allQuotes, settingsRoles) { + const quotes = (linkedQuotes || []).map(lq => allQuotes.find(q => q.id === lq.quoteId)).filter(Boolean); + let totalHours = 0; + let totalAmount = 0; + const phaseMap = {}; // phaseId -> hours (summed) + const enabledSet = new Set(); // phases enabled in quotes even with 0 hours + + quotes.forEach(q => { + const roles = q.quoteRoles || settingsRoles || []; + if (q.mode === "sia") { + const calc = calcSIAHours(q.sia?.baukosten, q.sia?.schwierigkeit, q.sia?.phases || []); + totalHours += calc.total || 0; + totalAmount += (calc.total || 0) * (q.sia?.stundenansatz || 0); + (calc.phases || []).forEach(ph => { + if (ph.hours > 0) phaseMap[ph.id] = (phaseMap[ph.id] || 0) + ph.hours; + }); + } else if (q.mode === "manual") { + const calc = calcManualHours(q.manualPhases || [], roles); + totalHours += calc.totalHours || 0; + totalAmount += calc.totalAmount || 0; + (q.manualPhases || []).filter(ph => ph.enabled).forEach(ph => { + enabledSet.add(ph.id); + const h = roles.reduce((s, r) => s + (ph.hoursByRole?.[r.id] || 0), 0); + if (h > 0) phaseMap[ph.id] = (phaseMap[ph.id] || 0) + h; + }); + } else if (q.mode === "free") { + totalAmount += (q.freeItems || []).reduce((s, it) => s + (it.qty * it.price), 0); + } + }); + + const phasesBudget = Object.entries(phaseMap).map(([id, hours]) => ({ id, hours: Math.round(hours * 10) / 10 })); + const enabledPhases = [...new Set([...phasesBudget.map(p => p.id), ...enabledSet])]; + return { + budgetHours: Math.round(totalHours * 10) / 10, + budgetAmount: Math.round(totalAmount), + phasesBudget, + enabledPhases, + hasFreeQuotes: quotes.some(q => q.mode === "free"), + hasHourQuotes: quotes.some(q => q.mode === "sia" || q.mode === "manual"), + }; +} + +export function generateId() { + return Date.now().toString(36) + Math.random().toString(36).slice(2, 6); +} + +export function formatCHF(amount) { + return new Intl.NumberFormat("de-CH", { style: "currency", currency: "CHF" }).format(amount || 0); +} + +export function formatDate(dateStr) { + if (!dateStr) return "—"; + return new Date(dateStr).toLocaleDateString("de-CH"); +} + +// Schweizer 5-Rappen-Rundung +export function roundCHF(amount) { + return Math.round((amount || 0) * 20) / 20; +} + +// Absender-Adresse aus strukturierten Feldern bauen; Fallback auf altes Freitext-Feld +export function formatSenderAddress(settings) { + const parts = []; + if (settings.street) parts.push(settings.street); + const line2 = [settings.zip, settings.city].filter(Boolean).join(" "); + if (line2) parts.push(line2); + if (parts.length > 0) return parts.join("\n"); + return settings.address || ""; +} + +// ─── QR-BILL HELPERS ────────────────────────────────────────── + +// Prüft ob IBAN eine QR-IBAN ist (IID im Bereich 30000-31999) +export function isQRIban(iban) { + const clean = (iban || "").replace(/\s/g, "").toUpperCase(); + if (!clean.startsWith("CH") && !clean.startsWith("LI")) return false; + const iid = parseInt(clean.slice(4, 9)); + return iid >= 30000 && iid <= 31999; +} + +// IBAN-Formatierung mit Leerzeichen alle 4 Stellen +export function formatIban(iban) { + const clean = (iban || "").replace(/\s/g, "").toUpperCase(); + return clean.match(/.{1,4}/g)?.join(" ") || ""; +} + +// Modulo-10-Rekursiv Prüfziffer (für QR-Referenz) +export function mod10(input) { + const table = [[0,9,4,6,8,2,7,1,3,5],[9,4,6,8,2,7,1,3,5,0],[4,6,8,2,7,1,3,5,0,9],[6,8,2,7,1,3,5,0,9,4],[8,2,7,1,3,5,0,9,4,6],[2,7,1,3,5,0,9,4,6,8],[7,1,3,5,0,9,4,6,8,2],[1,3,5,0,9,4,6,8,2,7],[3,5,0,9,4,6,8,2,7,1],[5,0,9,4,6,8,2,7,1,3]]; + let carry = 0; + for (const ch of input) { + const digit = parseInt(ch); + if (isNaN(digit)) continue; + carry = table[carry][digit]; + } + return ((10 - carry) % 10).toString(); +} + +// Generiert 27-stellige QR-Referenz aus Rechnungsnummer +export function generateQRReference(invoiceNumber) { + // Nur Ziffern extrahieren, links mit Nullen auf 26 Stellen auffüllen, dann Prüfziffer + const digits = (invoiceNumber || "").replace(/\D/g, "").padStart(26, "0").slice(-26); + return digits + mod10(digits); +} + +// Formatiert Referenz in 5er-Blöcken von rechts +export function formatReference(ref) { + const clean = (ref || "").replace(/\s/g, ""); + const reversed = clean.split("").reverse().join(""); + const blocks = reversed.match(/.{1,5}/g) || []; + return blocks.map(b => b.split("").reverse().join("")).reverse().join(" "); +} + +export function formatHours(minutes) { + const h = Math.floor((minutes || 0) / 60); + const m = (minutes || 0) % 60; + return `${h}h${m > 0 ? " " + m + "m" : ""}`; +} + +// Formatiert Projektnummer nach konfigurierbarem Format +// Platzhalter: YYYY=2025, YY=25, NN=01..99 +export function applyProjectNumberFormat(fmt, seq) { + const now = new Date(); + const yyyy = String(now.getFullYear()); + const yy = yyyy.slice(2); + const nn = String(seq).padStart(2, "0"); + return (fmt || "YYYY/NN").replace(/YYYY/g, yyyy).replace(/YY/g, yy).replace(/NN/g, nn); +} + +// Parst die laufende Nummer aus einer gespeicherten Projektnummer anhand des Formats +export function parseSeqFromNumber(num, fmt) { + if (!num || !fmt) return null; + const now = new Date(); + const yyyy = String(now.getFullYear()); + const yy = yyyy.slice(2); + // Escape regex special chars, then replace placeholders with capture groups + const pattern = (fmt || "YYYY/NN") + .replace(/[-/\\^$*+?.()|[\]{}]/g, "\\$&") + .replace(/YYYY/g, yyyy) + .replace(/YY/g, yy) + .replace(/NN/g, "(\\d+)"); + const match = num.match(new RegExp("^" + pattern + "$")); + return match ? parseInt(match[1]) : null; +} + +export function exportBuchhaltungCSV(data, year = "") { + const sep = ";"; + const q = (s) => `"${String(s || "").replace(/"/g, '""')}"`; + const mwstRate = data.settings.mwstRate || 8.1; + const rows = []; + + // Einnahmen + rows.push(["EINNAHMEN", "", "", "", "", "", "", ""].map(q).join(sep)); + rows.push(["Datum", "Rechnungs-Nr.", "Kunde", "Beschreibung", "Netto CHF", "MWST-Satz %", "MWST CHF", "Brutto CHF"].map(q).join(sep)); + const paidInvoices = [...data.invoices].filter(i => !year || (i.date || "").startsWith(year)).sort((a, b) => (a.date || "").localeCompare(b.date || "")); + paidInvoices.forEach(inv => { + const client = (data.persons||[]).find(c => c.id === inv.clientId); + const desc = (inv.items || []).map(it => it.desc).filter(Boolean).join(", "); + const taxRate = inv.mwst ? mwstRate : 0; + rows.push([inv.date, inv.number, client?.name || "", desc, (inv.sub || 0).toFixed(2), taxRate, (inv.tax || 0).toFixed(2), (inv.total || 0).toFixed(2)].map(q).join(sep)); + }); + const totalNet = paidInvoices.reduce((s, i) => s + (i.sub || 0), 0); + const totalTax = paidInvoices.reduce((s, i) => s + (i.tax || 0), 0); + const totalGross = paidInvoices.reduce((s, i) => s + (i.total || 0), 0); + rows.push(["", "", "", "TOTAL", totalNet.toFixed(2), "", totalTax.toFixed(2), totalGross.toFixed(2)].map(q).join(sep)); + rows.push([""].join(sep)); + + // Ausgaben + rows.push(["SPESEN (MITARBEITERBEZOGEN)", "", "", "", "", "", "", ""].map(q).join(sep)); + rows.push(["Datum", "Kategorie", "Projekt", "Beschreibung", "Netto CHF", "MWST-Satz %", "MWST CHF", "Brutto CHF"].map(q).join(sep)); + const sortedExp = [...(data.expenses || [])].filter(e => !year || (e.date || "").startsWith(year)).sort((a, b) => (a.date || "").localeCompare(b.date || "")); + sortedExp.forEach(exp => { + const proj = data.projects.find(p => p.id === exp.projectId); + const net = exp.inclMwst ? (exp.amount / (1 + (exp.mwstRate || 0) / 100)) : exp.amount; + const taxAmt = exp.amount - net; + rows.push([exp.date, exp.category, proj?.name || "", exp.description, net.toFixed(2), exp.mwstRate || 0, taxAmt.toFixed(2), exp.amount.toFixed(2)].map(q).join(sep)); + }); + const expTotal = sortedExp.reduce((s, e) => s + (e.amount || 0), 0); + const expTax = sortedExp.reduce((s, e) => { const net = e.inclMwst ? (e.amount / (1 + (e.mwstRate || 0) / 100)) : e.amount; return s + (e.amount - net); }, 0); + rows.push(["", "", "", "TOTAL", (expTotal - expTax).toFixed(2), "", expTax.toFixed(2), expTotal.toFixed(2)].map(q).join(sep)); + rows.push([""].join(sep)); + + // Interne Ausgaben + rows.push(["INTERNE AUSGABEN", "", "", "", "", "", "", ""].map(q).join(sep)); + rows.push(["Datum", "Kategorie", "Beschreibung", "Wiederkehrend", "Netto CHF", "MWST-Satz %", "MWST CHF", "Brutto CHF"].map(q).join(sep)); + const sortedIntExp = [...(data.internalExpenses || [])].filter(e => !year || (e.date || "").startsWith(year)).sort((a, b) => (a.date || "").localeCompare(b.date || "")); + sortedIntExp.forEach(exp => { + const net = exp.inclMwst ? (exp.amount / (1 + (exp.mwstRate || 0) / 100)) : exp.amount; + const taxAmt = exp.amount - net; + rows.push([exp.date, exp.category, exp.description, exp.recurring ? (exp.recurringInterval || "monatlich") : "", net.toFixed(2), exp.mwstRate || 0, taxAmt.toFixed(2), exp.amount.toFixed(2)].map(q).join(sep)); + }); + const intExpTotal = sortedIntExp.reduce((s, e) => s + (e.amount || 0), 0); + const intExpTax = sortedIntExp.reduce((s, e) => { const net = e.inclMwst ? (e.amount / (1 + (e.mwstRate || 0) / 100)) : e.amount; return s + (e.amount - net); }, 0); + rows.push(["", "", "", "TOTAL", (intExpTotal - intExpTax).toFixed(2), "", intExpTax.toFixed(2), intExpTotal.toFixed(2)].map(q).join(sep)); + rows.push([""].join(sep)); + + // Personalaufwand (Löhne) + const sortedLoehne = [...(data.lohnEntries || [])].filter(l => !year || l.monat.startsWith(year)).sort((a, b) => a.monat.localeCompare(b.monat)); + if (sortedLoehne.length > 0) { + rows.push(["PERSONALAUFWAND / LÖHNE", "", "", "", "", "", "", "", ""].map(q).join(sep)); + rows.push(["Monat", "Mitarbeiter", "Brutto", "Abzüge AN", "Netto", "Spesen", "Auszahlung AN", "PK AG-Anteil", "Gesamtlohnkosten"].map(q).join(sep)); + sortedLoehne.forEach(l => { + const name = l.empSnapshot?.name || ""; + const bvgAG = l.bvgAG || 0; + const gesamt = (l.auszahlung || 0) + bvgAG; + rows.push([l.monat, name, (l.bruttoTotal || 0).toFixed(2), (l.totalAbzuege || 0).toFixed(2), (l.netto || 0).toFixed(2), (l.spesenTotal || 0).toFixed(2), (l.auszahlung || 0).toFixed(2), bvgAG.toFixed(2), gesamt.toFixed(2)].map(q).join(sep)); + }); + const lohnTotal = sortedLoehne.reduce((s, l) => s + (l.auszahlung || 0) + (l.bvgAG || 0), 0); + rows.push(["", "", "", "", "", "", "", "TOTAL", lohnTotal.toFixed(2)].map(q).join(sep)); + rows.push([""].join(sep)); + } + + // Zusammenfassung + const lohnTotalAll = sortedLoehne.reduce((s, l) => s + (l.auszahlung || 0) + (l.bvgAG || 0), 0); + rows.push(["ZUSAMMENFASSUNG", "", "", "", "", "", "", ""].map(q).join(sep)); + rows.push(["", "", "", "Einnahmen (Netto)", totalNet.toFixed(2), "", "", ""].map(q).join(sep)); + rows.push(["", "", "", "Spesen (Netto)", (expTotal - expTax).toFixed(2), "", "", ""].map(q).join(sep)); + rows.push(["", "", "", "Interne Ausgaben (Netto)", (intExpTotal - intExpTax).toFixed(2), "", "", ""].map(q).join(sep)); + rows.push(["", "", "", "Personalaufwand (Löhne)", lohnTotalAll.toFixed(2), "", "", ""].map(q).join(sep)); + rows.push(["", "", "", "Ergebnis (Netto)", (totalNet - (expTotal - expTax) - (intExpTotal - intExpTax) - lohnTotalAll).toFixed(2), "", "", ""].map(q).join(sep)); + rows.push(["", "", "", "MWST auf Einnahmen", "", "", totalTax.toFixed(2), ""].map(q).join(sep)); + rows.push(["", "", "", "Vorsteuer (Spesen + Ausgaben)", "", "", (expTax + intExpTax).toFixed(2), ""].map(q).join(sep)); + rows.push(["", "", "", "MWST-Schuld", "", "", (totalTax - expTax - intExpTax).toFixed(2), ""].map(q).join(sep)); + + const bom = ""; + const blob = new Blob([bom + rows.join("\n")], { type: "text/csv;charset=utf-8;" }); + const url = URL.createObjectURL(blob); + const a = document.createElement("a"); + a.href = url; + a.download = `buchhaltung-${year || "gesamt"}.csv`; + a.click(); + URL.revokeObjectURL(url); +} + +export function buildReminderLetter(inv, nr, sentDate, clients, settings) { + const client = clients.find(c => c.id === inv.clientId); + const existingReminders = inv.reminders || []; + const daysPast = Math.floor((new Date() - new Date(inv.dueDate)) / 86400000); + const intro = nr === 1 + ? `Bei einer Überprüfung unserer Buchhaltung stellen wir fest, dass die Rechnung Nr. ${inv.number} vom ${formatDate(inv.date)} über ${formatCHF(inv.total)} seit ${daysPast} Tagen (Fälligkeit: ${formatDate(inv.dueDate)}) noch nicht beglichen ist.\n\nWir bitten Sie höflich, den offenen Betrag innert 10 Tagen zu überweisen.` + : nr === 2 + ? `Leider mussten wir feststellen, dass unsere Zahlungserinnerung vom ${formatDate(existingReminders[0]?.sentDate || existingReminders[0]?.date)} bezüglich Rechnung Nr. ${inv.number} über ${formatCHF(inv.total)} bisher ohne Reaktion geblieben ist.\n\nWir fordern Sie hiermit auf, den ausstehenden Betrag innert 7 Tagen zu begleichen.` + : `Trotz unserer Zahlungserinnerungen vom ${existingReminders.map(r => formatDate(r.sentDate || r.date)).join(" und ")} ist die Rechnung Nr. ${inv.number} über ${formatCHF(inv.total)} nach wie vor unbeglichen.\n\nWir sehen uns gezwungen, bei weiterem Ausbleiben der Zahlung innerhalb von 5 Tagen rechtliche Schritte einzuleiten.`; + const body = `Sehr geehrte/r ${client?.name || "[Kunde]"}\n\n${intro}\n\nIBAN: ${settings.iban}\nReferenz: ${inv.number}\n\nFreundliche Grüsse\n${settings.name}`; + const subject = nr === 1 ? `Zahlungserinnerung – Rechnung Nr. ${inv.number}` : `${nr}. Mahnung – Rechnung Nr. ${inv.number}`; + return { client, subject, body }; +} + +export function getKW(dateStr) { + if (!dateStr) return "—"; + const d = new Date(dateStr); + const jan4 = new Date(d.getFullYear(), 0, 4); + const startOfWeek = new Date(jan4); + startOfWeek.setDate(jan4.getDate() - ((jan4.getDay() + 6) % 7)); + const kw = Math.ceil(((d - startOfWeek) / 86400000 + 1) / 7); + return `KW ${kw}`; +} + +export function linkedClientForNote(n, data) { + if (n.clientId) return (data.persons||[]).find(c => c.id === n.clientId) || null; + return n.clientManual ? { name: n.clientManual, address: n.deliveryAddress || "" } : null; +} + +export function getWeekNumber(date) { + const d = new Date(date); + d.setHours(0, 0, 0, 0); + d.setDate(d.getDate() + 3 - ((d.getDay() + 6) % 7)); + const week1 = new Date(d.getFullYear(), 0, 4); + return Math.round(((d - week1) / 86400000 + ((week1.getDay() + 6) % 7) - 2) / 7) + 1; +} + +export function formatKW(dateStr) { + if (!dateStr) return "—"; + return `KW ${getWeekNumber(dateStr)} / ${new Date(dateStr).getFullYear()}`; +} + +// Generiert nächste Protokollnummer (legacy, nicht mehr direkt genutzt) +export function nextProtoNumber(protocols, projectNumber) { + const prefix = projectNumber ? `${projectNumber}-P` : "P"; + const existing = (protocols || []).map(p => { + const m = (p.nummer || p.number || "").match(/(\d+)$/); + return m ? parseInt(m[1]) : 0; + }); + const max = existing.length ? Math.max(...existing) : 0; + return `${prefix}${String(max + 1).padStart(2, "0")}`; +} + +// Nächste Sequenznummer aus bestehenden Protokollnummern ableiten +// Ignoriert Jahr-artige Zahlen (4-stellig, 2000–2099) +export function nextProtoSeq(protocols) { + let max = 0; + (protocols || []).forEach(p => { + const groups = (p.nummer || "").match(/\d+/g) || []; + groups.forEach(n => { + const num = parseInt(n); + if (n.length <= 3 || !(num >= 2000 && num <= 2099)) { + if (num > max) max = num; + } + }); + }); + return max + 1; +} + +// Wendet konfigurierbares Protokollnummer-Format an +// Platzhalter: YYYY YY MM DD PP(Projektnr.) TT(Typkürzel) NN/NNN(Sequenz) +export function applyProtoNumberFormat(fmt, { date, projectNumber, seq, typKuerzel }) { + const d = date ? new Date(date + "T12:00:00") : new Date(); + const yyyy = String(d.getFullYear()); + const yy = yyyy.slice(2); + const mm = String(d.getMonth() + 1).padStart(2, "0"); + const dd = String(d.getDate()).padStart(2, "0"); + // Normalize separators in project number, then strip a leading year segment + // so PP can be combined with YYYY/YY without producing a double year. + const ppNorm = (projectNumber || "") + .replace(/[\/\s.]/g, "-") + .replace(/-+/g, "-") + .replace(/^-|-$/g, ""); + const pp4 = ppNorm.replace(/^\d{4}-/, ""); + const pp2 = ppNorm.replace(/^\d{2}-/, ""); + const ppStripped = pp4 !== ppNorm ? pp4 : pp2 !== ppNorm ? pp2 : ppNorm; + const pp = ppStripped || ppNorm || "P"; + const tt = typKuerzel || "SO"; + const tokens = { + YYYY: yyyy, YY: yy, MM: mm, DD: dd, + PPP: ppNorm || "P", PP: pp, TT: tt, + NNN: String(seq).padStart(3, "0"), + NN: String(seq).padStart(2, "0"), + }; + return (fmt || "PP-TT-NN").replace(/YYYY|YY|NNN|NN|MM|DD|PPP|PP|TT/g, m => tokens[m] ?? m); +} + +// Convert plain text (legacy templates) to HTML +export function textToHtml(text) { + if (!text) return ""; + if (text.trim().startsWith("<")) return text; // already HTML + return text + .split("\n\n") + .map(para => `

${para.replace(/\n/g, "
")}

`) + .join(""); +} + +// Convert HTML back to plain text for print (fallback) +export function htmlToText(html) { + const div = document.createElement("div"); + div.innerHTML = html; + return div.innerText || div.textContent || ""; +} + +export function getFeiertageForYear(feiertage, year) { + return (feiertage || []).filter(f => { + if (f.repeatsYearly) return true; + return f.date.startsWith(String(year)); + }).map(f => { + if (f.repeatsYearly) return { ...f, date: `${year}-${f.date.slice(5, 10)}` }; + return f; + }); +} + +export function getAbsenzTypes(data) { + const custom = data.absenzTypes || []; + const overrideMap = new Map(custom.map(t => [t.id, t])); + const defaultIds = new Set(DEFAULT_ABSENZ_TYPES.map(t => t.id)); + const defaults = DEFAULT_ABSENZ_TYPES + .map(t => overrideMap.get(t.id) || t) + .filter(t => !overrideMap.get(t.id)?.deleted); + const newCustom = custom.filter(t => !defaultIds.has(t.id) && !t.deleted); + return [...defaults, ...newCustom]; +} + +export function getWorkdaysInMonth(year, month, feiertage) { + // month: 0-based; use ISO string to avoid local-midnight timezone offset + const days = []; + const monthStr = `${year}-${String(month + 1).padStart(2, "0")}`; + const d = new Date(`${monthStr}-01`); + while (d.toISOString().slice(0, 7) === monthStr) { + const ds = d.toISOString().slice(0, 10); + const dow = d.getDay(); + if (dow !== 0 && dow !== 6) { + const ft = (feiertage || []).find(f => f.date === ds); + days.push({ date: ds, feiertag: ft || null }); + } + d.setDate(d.getDate() + 1); + } + return days; +} + +export function getSollStunden(employee, date, feiertage) { + // Returns Soll-Stunden for a given workday + const pensum = (employee.pensum || 100) / 100; + const wochenstunden = (employee.wochenstunden || 35); + const tagessoll = (wochenstunden * pensum) / 5; + const ft = (feiertage || []).find(f => f.date === date); + if (ft) return tagessoll + (ft.stundenDelta || 0); // e.g. -1 for Halbfeiertag, 0 for full + return tagessoll; +} + +// ─── LOHNBERECHNUNG HELPER ────────────────────────────────────── +export function calcLohn(emp, monat, spesen, bonus) { + const pensumFactor = (emp.pensum || 100) / 100; + const bruttoBase = emp.monatslohn || 0; + const brutto = Math.round(bruttoBase * pensumFactor * 100) / 100; + // 13. Monatslohn: 1/12 pro Monat + const dreizehnter = emp.dreizehnterLohn ? Math.round(brutto / 12 * 100) / 100 : 0; + const bonusBetrag = Math.round((bonus || 0) * 100) / 100; + const bruttoTotal = brutto + dreizehnter + bonusBetrag; // Bonus ist AHV-pflichtig + + const ahv = Math.round(bruttoTotal * ((emp.ahvSatz ?? 5.3) / 100) * 100) / 100; + const alv = Math.round(bruttoTotal * ((emp.alvSatz ?? 1.1) / 100) * 100) / 100; + const bvg = Math.round(bruttoTotal * ((emp.bvgSatz ?? 8.0) / 100) * 100) / 100; + const nbu = Math.round(bruttoTotal * ((emp.nbuSatz ?? 1.5) / 100) * 100) / 100; + const ktg = Math.round(bruttoTotal * ((emp.ktgSatz ?? 0.5) / 100) * 100) / 100; + const qst = emp.quellensteuerPflichtig + ? Math.round(bruttoTotal * ((emp.quellensteuerSatz ?? 10) / 100) * 100) / 100 : 0; + const bvgAG = Math.round(bruttoTotal * ((emp.pkAGSatz ?? 8.0) / 100) * 100) / 100; + + const totalAbzuege = ahv + alv + bvg + nbu + ktg + qst; + const netto = Math.round((bruttoTotal - totalAbzuege) * 100) / 100; + const spesenTotal = Math.round((spesen || []).reduce((s, e) => s + (e.amount || 0), 0) * 100) / 100; + const auszahlung = Math.round((netto + spesenTotal) * 100) / 100; + + return { brutto, bruttoBase, dreizehnter, bonusBetrag, bruttoTotal, ahv, alv, bvg, nbu, ktg, qst, totalAbzuege, netto, spesenTotal, auszahlung, bvgAG }; +} + +// ─── Dashboard layout helpers ────────────────────────────────────────────────── + +const KPI_IDS = ["kpi-projekte","kpi-stunden","kpi-ausstehend","kpi-umsatz"]; +const MID_IDS = ["aktive-projekte","unverrechnete-stunden","umsatz-sparkline","offene-offerten"]; +const FULL_IDS = ["warnungen","letzte-zeiteintraege","meine-zeiteintraege"]; + +export function widgetsToRows(widgetIds) { + const uid = () => Math.random().toString(36).slice(2, 8); + const kpi = widgetIds.filter(w => KPI_IDS.includes(w)); + const mid = widgetIds.filter(w => MID_IDS.includes(w)); + const full = widgetIds.filter(w => FULL_IDS.includes(w)); + const rows = []; + if (kpi.length) rows.push({ id: uid(), cols: Math.min(4, Math.max(2, kpi.length)), minH: 0, widgets: kpi }); + for (let i = 0; i < mid.length; i += 3) { + const chunk = mid.slice(i, i + 3); + rows.push({ id: uid(), cols: Math.max(2, chunk.length), minH: 0, widgets: chunk }); + } + full.forEach(w => rows.push({ id: uid(), cols: 1, minH: 0, widgets: [w] })); + return rows; +} + +export function migrateDashboardLayout(val) { + if (!val || !Array.isArray(val) || val.length === 0) return null; + if (typeof val[0] === "object" && "widgets" in val[0]) return val; + return widgetsToRows(val); +} + +// PDF-Dateiname aus Format und Content ableiten +export function buildPdfName(format, content, settings) { + const studio = (settings?.name || "RAPPORT").replace(/\s+/g, "-"); + const typeLabels = { + "invoice": "Rechnung", "invoice+qr": "Rechnung", "qrbill": "QR-Rechnung", + "quote": "Offerte", "lieferschein": "Lieferschein", "protokoll": "Protokoll", + "lohn": "Lohnabrechnung", "letter": "Brief", "projectDetail": "Projekt", + "projectsOverview": "Projekte", "buchhaltung": "Buchhaltung", "studioBudget": "Budget", + }; + const typ = typeLabels[content?.type] || content?.type || "Dokument"; + let nummer = ""; + let kunde = ""; + let datum = new Date().toISOString().slice(0, 10); + if (content?.inv) { + nummer = content.inv.number || ""; + datum = content.inv.date || datum; + kunde = content.client?.company || content.client?.name || ""; + } else if (content?.quote) { + nummer = content.quote.number || ""; + datum = content.quote.date || datum; + kunde = content.client?.company || content.client?.name || ""; + } else if (content?.note) { + nummer = content.note.number || ""; + kunde = content.client?.company || content.client?.name || ""; + } else if (content?.protokoll) { + datum = content.protokoll.date || datum; + nummer = content.protokoll.number || ""; + } else if (content?.emp) { + kunde = content.emp.name || ""; + nummer = content.monatLabel || ""; + } else if (content?.filterYear) { + nummer = String(content.filterYear); + } + const sanitize = (s) => (s || "").replace(/[^a-zA-Z0-9äöüÄÖÜ_\-\.]/g, "-").replace(/-+/g, "-").replace(/^-|-$/g, ""); + const fmt = format || "{studio}_{typ}_{nummer}"; + const result = fmt + .replace("{studio}", sanitize(studio)) + .replace("{typ}", sanitize(typ)) + .replace("{nummer}", sanitize(nummer)) + .replace("{kunde}", sanitize(kunde)) + .replace("{datum}", sanitize(datum)); + return result.replace(/-+/g, "-").replace(/^-|-$/g, "") || "RAPPORT"; +} diff --git a/src/views/Buchhaltung.jsx b/src/views/Buchhaltung.jsx new file mode 100755 index 0000000..f294418 --- /dev/null +++ b/src/views/Buchhaltung.jsx @@ -0,0 +1,374 @@ +import React, { useState } from "react"; +import { formatCHF, formatDate, exportBuchhaltungCSV } from "../utils.js"; +import { Header, StatusBadge } from "../components/UI.jsx"; +import { MahnModal } from "./Protokolle.jsx"; +import { ReceiptViewer } from "./Spesen.jsx"; + +export default +function Buchhaltung({ data, update, setView, setPrintContent }) { + const mwstRate = data.settings.mwstRate || 8.1; + const currentYear = new Date().getFullYear().toString(); + const [filterYear, setFilterYear] = useState(currentYear); + + const availableYears = Array.from(new Set([ + ...data.invoices.map(i => (i.date || "").slice(0, 4)), + ...(data.expenses || []).map(e => (e.date || "").slice(0, 4)), + ].filter(Boolean))).sort().reverse(); + if (!availableYears.includes(currentYear)) availableYears.unshift(currentYear); + + // Gefilterte Daten + const invoices = data.invoices.filter(i => !filterYear || (i.date || "").startsWith(filterYear)); + const expenses = (data.expenses || []).filter(e => !filterYear || (e.date || "").startsWith(filterYear)); + const lohnEntries = (data.lohnEntries || []).filter(l => !filterYear || l.monat.startsWith(filterYear)); + + // Einnahmen + const totalInvoiced = invoices.reduce((s, i) => s + (i.sub || 0), 0); + const totalTax = invoices.reduce((s, i) => s + (i.tax || 0), 0); + // Akonto-MwSt ist erst bei Schlussrechnung steuerrelevant — separat ausweisen + const akontoInvoices = invoices.filter(i => i.invoiceKind === "akonto"); + const akontoTax = akontoInvoices.reduce((s, i) => s + (i.tax || 0), 0); + const akontoSub = akontoInvoices.reduce((s, i) => s + (i.sub || 0), 0); + const taxWithoutAkonto = totalTax - akontoTax; + const totalPaid = invoices.filter(i => i.status === "bezahlt").reduce((s, i) => s + (i.total || 0), 0); + const totalOpen = invoices.filter(i => i.status === "gesendet" || i.status === "entwurf").reduce((s, i) => s + (i.total || 0), 0); + const totalOverdue = invoices.filter(i => i.status === "überfällig").reduce((s, i) => s + (i.total || 0), 0); + const totalDraftSub = invoices.filter(i => i.status === "entwurf").reduce((s, i) => s + (i.sub || 0), 0); + const totalBilledSub = totalInvoiced - totalDraftSub; + + // Ausgaben Spesen + const totalExpBrutto = expenses.reduce((s, e) => s + (e.amount || 0), 0); + const totalExpNet = expenses.reduce((s, e) => { const net = e.inclMwst ? e.amount / (1 + (e.mwstRate || 0) / 100) : e.amount; return s + net; }, 0); + const totalExpTax = totalExpBrutto - totalExpNet; + + // Interne Ausgaben + const internalExpenses = (data.internalExpenses || []).filter(e => !filterYear || (e.date || "").startsWith(filterYear)); + const totalIntExpBrutto = internalExpenses.reduce((s, e) => s + (e.amount || 0), 0); + const totalIntExpNet = internalExpenses.reduce((s, e) => { const net = e.inclMwst ? e.amount / (1 + (e.mwstRate || 0) / 100) : e.amount; return s + net; }, 0); + const totalIntExpTax = totalIntExpBrutto - totalIntExpNet; + + // Personalaufwand (abgeschlossene Lohnabrechnungen — Auszahlung an MA + AG-Abgaben) + const totalLoehne = lohnEntries.reduce((s, l) => s + (l.auszahlung || 0), 0); + const totalLoehneAGAbgaben = lohnEntries.reduce((s, l) => s + (l.bvgAG || 0), 0); + const totalLoehneGesamt = totalLoehne + totalLoehneAGAbgaben; + const totalLoehneAnzahl = lohnEntries.length; + + const totalAusgaben = totalExpNet + totalIntExpNet + totalLoehneGesamt; + const result = totalInvoiced - totalAusgaben; + + // Überfällige Rechnungen für Mahnwesen + const today = new Date().toISOString().slice(0, 10); + const [mahnModal, setMahnModal] = useState(null); + const [mahnMode, setMahnMode] = useState("new"); + const [mahnSentDate, setMahnSentDate] = useState(new Date().toISOString().slice(0, 10)); + const [receiptView, setReceiptView] = useState(null); + + const overdueInvoices = data.invoices.filter(i => + (i.status === "gesendet" || i.status === "überfällig") && i.dueDate && i.dueDate < today + ).sort((a, b) => (a.dueDate || "").localeCompare(b.dueDate || "")); + + const sendReminder = (inv) => { + const reminders = inv.reminders || []; + setMahnMode(reminders.length === 0 ? "new" : "reprint"); + setMahnSentDate(new Date().toISOString().slice(0, 10)); + setMahnModal({ inv }); + }; + + return ( +

+ + + +

+ } /> + + {/* KPI-Karten */} +

+ {[ + { label: "UMSATZ NETTO", value: formatCHF(totalInvoiced), sub: totalDraftSub > 0 ? `${invoices.length} Rechnungen — davon ${formatCHF(totalDraftSub)} erwartet` : `${invoices.length} Rechnungen`, color: "#2d6a4f" }, + { label: "DAVON BEZAHLT", value: formatCHF(totalPaid), sub: "eingegangen", color: "#2d6a4f" }, + { label: "OFFEN / ÜBERFÄLLIG", value: formatCHF(totalOpen + totalOverdue), sub: `${overdueInvoices.length} überfällig`, color: totalOverdue > 0 ? "#8a1a1a" : "#7a6a00" }, + { label: "AUSGABEN TOTAL", value: formatCHF(totalAusgaben), sub: `Spesen + ${totalLoehneAnzahl} Lohnabrechnungen (inkl. AG-Abgaben)`, color: "#555" }, + ].map(c => ( +

{c.label}

{c.value}

{c.sub}

+ ))} +

+ +

+ {/* Ergebnis-Übersicht */} +

JAHRESERGEBNIS {filterYear || "GESAMT"}

+ {[ + { label: "Einnahmen (Netto)", value: totalInvoiced, bold: false }, + totalDraftSub > 0 && { label: "→ Davon fakturiert", value: totalBilledSub, note: true }, + totalDraftSub > 0 && { label: "→ Davon erwartet (Entwürfe)", value: totalDraftSub, note: true, expected: true }, + { label: "Spesen (Netto)", value: -totalExpNet, bold: false }, + { label: "Interne Ausgaben (Netto)", value: -totalIntExpNet, bold: false }, + { label: "Personalaufwand (Löhne)", value: -totalLoehne, bold: false }, + totalLoehneAGAbgaben > 0 && { label: "→ AG-Sozialabgaben (PK/BVG)", value: -totalLoehneAGAbgaben, note: true }, + { label: "Ergebnis vor MWST", value: result, bold: true, sep: true }, + { label: `MWST auf Einnahmen (${mwstRate}%, excl. Akonto)`, value: taxWithoutAkonto, bold: false, small: true }, + akontoTax > 0 && { label: `↳ Akonto-MWST ausstehend (bei Schlussrechn.)`, value: akontoTax, bold: false, small: true, pending: true }, + { label: "Vorsteuer (Spesen + Ausgaben)", value: -(totalExpTax + totalIntExpTax), bold: false, small: true }, + { label: "MWST-Schuld (excl. Akonto)", value: taxWithoutAkonto - totalExpTax - totalIntExpTax, bold: true, small: true }, + ].filter(Boolean).map((row, i) => ( +

+ + {row.label} + {row.expected && noch nicht fakturiert} + {row.pending && ausstehend} + + + {formatCHF(row.value)} + +

+ ))} +

+ + {/* Monatsumsatz */} +

MONATSUMSATZ {filterYear || new Date().getFullYear()}

+ {(() => { + const year = filterYear || String(new Date().getFullYear()); + const months = ["Jan","Feb","Mär","Apr","Mai","Jun","Jul","Aug","Sep","Okt","Nov","Dez"]; + const monthData = months.map((label, i) => { + const key = `${year}-${String(i + 1).padStart(2, "0")}`; + const invs = data.invoices.filter(inv => (inv.date || "").startsWith(key)); + const paid = invs.filter(inv => inv.status === "bezahlt").reduce((s, inv) => s + (inv.sub || 0), 0); + const open = invs.filter(inv => inv.status === "gesendet" || inv.status === "überfällig").reduce((s, inv) => s + (inv.sub || 0), 0); + const draft = invs.filter(inv => inv.status === "entwurf").reduce((s, inv) => s + (inv.sub || 0), 0); + return { label, key, paid, open, draft, total: paid + open + draft }; + }); + const maxVal = Math.max(...monthData.map(m => m.total), 1); + const yearTotal = monthData.reduce((s, m) => s + m.total, 0); + const currentMonth = new Date().toISOString().slice(0, 7); + return ( + <> +

+ Total {formatCHF(yearTotal)} · {data.invoices.filter(i => (i.date||"").startsWith(year)).length} Rechnungen +

+ {monthData.map(m => ( +

+ {m.total === 0 ? ( +

+ ) : ( + <> + {m.draft > 0 &&

} + {m.open > 0 &&

} + {m.paid > 0 &&

} + + )} +

+ ))} +

+ {monthData.map(m => ( +

{m.label}

+ ))} +

+ {[ + { color: "#2d6a4f", label: "Bezahlt" }, + { color: "#b07848", label: "Ausstehend" }, + { color: "#ccc", label: "Entwurf" }, + ].map(l => ( +

+ {l.label} +

+ ))} +

+ + ); + })()} +

+ + {/* Mahnwesen */} +

+ MAHNWESEN — ÜBERFÄLLIGE RECHNUNGEN + {overdueInvoices.length === 0 && ✓ Keine überfälligen Rechnungen} +

+ {overdueInvoices.length > 0 && ( + + + + + + {overdueInvoices.map(inv => { + const client = ((data.persons||[]).filter(p=>p.isAuftraggeber)).find(c => c.id === inv.clientId); + const daysPast = Math.floor((new Date() - new Date(inv.dueDate)) / 86400000); + const reminders = inv.reminders || []; + const nextNr = reminders.length + 1; + const mahnLabel = nextNr === 1 ? "Zahlungserinnerung" : `${nextNr}. Mahnung`; + const mahnColor = nextNr >= 3 ? "#8a1a1a" : nextNr === 2 ? "#b5621e" : "#7a6a00"; + return ( + + + + + + + + + ); + })} + +

Nr.	Kunde	Fällig seit	Mahnungen	Betrag
{inv.number}	{client?.name \|\| "—"}	+ 30 ? "#8a1a1a" : "#b5621e", fontWeight: 500 }}> + {formatDate(inv.dueDate)} ({daysPast} Tage) + +	+ {reminders.length === 0 ? ( + Keine + ) : ( + + {reminders.map((r, i) => ( + + {i === 0 ? "Erinnerung" : `${i + 1}. Mahnung`} · {formatDate(r.date)} + + ))} + + )} +	{formatCHF(inv.total)}	+ +

+ )} +

+ + {/* Letzte Rechnungen */} +

LETZTE RECHNUNGEN

+ +

+ + + + {[...data.invoices].sort((a, b) => (b.date || "").localeCompare(a.date || "")).slice(0, 6).map(inv => { + const client = ((data.persons||[]).filter(p=>p.isAuftraggeber)).find(c => c.id === inv.clientId); + return ( + + + + + + + + ); + })} + +

Nr.	Kunde	Datum	Betrag	Status
{inv.number}	{client?.name \|\| "—"}	{formatDate(inv.date)}	{formatCHF(inv.total)}

+ + {/* Spesen & Belege */} + {expenses.length > 0 && ( +

+ SPESEN {filterYear || ""} + + {expenses.filter(e => e.receiptData).length} von {expenses.length} mit Beleg + +

+ +

+ + + + + + + + + + + + + + {[...expenses].sort((a, b) => (b.date || "").localeCompare(a.date || "")).map(e => { + const emp = (data.employees || []).find(em => em.id === e.employeeId); + const expStatus = e.status || "offen"; + const statusColors = { offen: "#b07848", genehmigt: "#2d6a4f", "auf nächsten Lohn": "#1a4e8a", ausbezahlt: "#2d6a4f" }; + return ( + + + + + + + + + + ); + })} + + + + + + + + +

Datum	Kategorie	Beschreibung	Mitarbeiter	Brutto	Beleg	Status
{formatDate(e.date)}	{e.category}	{e.description \|\| "—"}	{emp?.name \|\| "—"}	{formatCHF(e.amount)}	+ {e.receiptData ? ( + + ) : ( + — + )} +	+ + {expStatus.charAt(0).toUpperCase() + expStatus.slice(1)} + +
{expenses.length} Einträge	{formatCHF(totalExpBrutto)}

+ )} + + {/* Mahnung-Dialog */} + {mahnModal && ( + setMahnModal(null)} + mahnMode={mahnMode} + setMahnMode={setMahnMode} + mahnSentDate={mahnSentDate} + setMahnSentDate={setMahnSentDate} + /> + )} + setReceiptView(null)} /> +

+ ); +} diff --git a/src/views/Clients.jsx b/src/views/Clients.jsx new file mode 100755 index 0000000..bdffdf4 --- /dev/null +++ b/src/views/Clients.jsx @@ -0,0 +1,452 @@ +import React, { useState } from "react"; +import { generateId } from "../utils.js"; +import { Header, Modal, FormField, useConfirm } from "../components/UI.jsx"; + +export default +function Clients({ data, update, modal, setModal, setView }) { + const clients = data.clients || []; + const { askConfirm, ConfirmModalEl } = useConfirm(); + + const [selectedId, setSelectedId] = useState(() => { + const id = window.__navToClient || null; + window.__navToClient = null; + return id; + }); + const [search, setSearch] = useState(""); + const [groupBy, setGroupBy] = useState("alpha"); + const [contactModal, setContactModal] = useState(null); + const [contactForm, setContactForm] = useState({ name: "", position: "", email: "", phone: "" }); + const [showHauptPicker, setShowHauptPicker] = useState(false); + + const emptyForm = { + name: "", street: "", zip: "", city: "", country: "CH", + email: "", phone: "", website: "", + contacts: [], + _contactName: "", _contactPosition: "", + }; + const [form, setForm] = useState(emptyForm); + + const selectedClient = clients.find(c => c.id === selectedId) || null; + + // ── Client speichern ── + const save = () => { + if (!form.name.trim()) return; + const { _contactName, _contactPosition, ...clientData } = form; + let contacts = clientData.contacts || []; + if (_contactName.trim() && !modal?.id) { + contacts = [{ id: generateId(), name: _contactName.trim(), position: _contactPosition.trim(), email: "", phone: "" }]; + } + const client = { ...clientData, contacts, id: modal?.id || generateId() }; + update("clients", modal?.id ? clients.map(c => c.id === modal.id ? client : c) : [...clients, client]); + setModal(null); + }; + + const openNew = () => { setForm(emptyForm); setModal({ type: "client" }); }; + const openEdit = (c) => { + setForm({ ...emptyForm, ...c, _contactName: "", _contactPosition: "" }); + setModal({ type: "client", id: c.id }); + }; + const del = async (id) => { + if (await askConfirm("Kunde löschen? Alle zugehörigen Projekte verlieren die Kundenzuordnung.")) { + update("clients", clients.filter(c => c.id !== id)); + if (selectedId === id) setSelectedId(null); + } + }; + + // ── Kontakt speichern ── + const saveContact = () => { + if (!contactForm.name.trim()) return; + const client = clients.find(c => c.id === contactModal.clientId); + if (!client) return; + const contacts = client.contacts || []; + const updated = contactModal.contactId + ? contacts.map(ct => ct.id === contactModal.contactId ? { ...ct, ...contactForm } : ct) + : [...contacts, { ...contactForm, id: generateId() }]; + update("clients", clients.map(c => c.id === client.id ? { ...c, contacts: updated } : c)); + setContactModal(null); + }; + const delContact = async (clientId, contactId) => { + if (await askConfirm("Kontaktperson löschen?")) { + const client = clients.find(c => c.id === clientId); + update("clients", clients.map(c => c.id === clientId ? { ...c, contacts: (c.contacts || []).filter(ct => ct.id !== contactId) } : c)); + } + }; + + // ── Detail-Ansicht ── + if (selectedId && selectedClient) { + const projs = (data.projects || []).filter(p => p.clientId === selectedId).sort((a, b) => (b.startDate || "").localeCompare(a.startDate || "")); + const invoices = (data.invoices || []).filter(i => i.clientId === selectedId).sort((a, b) => (b.date || "").localeCompare(a.date || "")); + const quotes = (data.quotes || []).filter(q => q.clientId === selectedId).sort((a, b) => (b.date || "").localeCompare(a.date || "")); + const contacts = selectedClient.contacts || []; + const hauptkontakt = contacts[0] || null; + const addressLine = [selectedClient.street, [selectedClient.zip, selectedClient.city].filter(Boolean).join(" ")].filter(Boolean).join(", "); + + const navTo = (view) => { window.__navClientId = selectedId; setView(view); }; + + const formatCHF = (v) => v != null ? `CHF ${Number(v).toLocaleString("de-CH", { minimumFractionDigits: 2, maximumFractionDigits: 2 })}` : "—"; + const fmtDate = (s) => s ? new Date(s).toLocaleDateString("de-CH") : "—"; + + return ( +

+ {ConfirmModalEl} + + +

{selectedClient.name}

+ {addressLine &&

{addressLine}

} +

+ +

+ {/* Firmeninfo */} +

FIRMENINFO

+ {[ + { label: "E-Mail", value: selectedClient.email, href: `mailto:${selectedClient.email}` }, + { label: "Telefon", value: selectedClient.phone }, + { label: "Website", value: selectedClient.website, href: selectedClient.website?.startsWith("http") ? selectedClient.website : selectedClient.website ? `https://${selectedClient.website}` : null }, + { label: "Adresse", value: addressLine || null }, + ].filter(r => r.value).map(({ label, value, href }) => ( +

+ {label} + {href ? {value} : {value}} +

+ ))} + {contacts.length > 0 && ( +

HAUPTKONTAKT

+ {contacts.length > 1 && ( + + )} +

+ {showHauptPicker ? ( +

+ {contacts.map((ct, i) => ( + + ))} +

+ ) : hauptkontakt ? ( + <> +

{hauptkontakt.name}

+ {hauptkontakt.position &&

{hauptkontakt.position}

} +

+ {hauptkontakt.email && {hauptkontakt.email}} + {hauptkontakt.phone && {hauptkontakt.phone}} +

+ + ) : null} +

+ )} +

+ + {/* Ansprechpartner */} +

0 ? "1px solid #ece8e2" : "none" }}> +

ANSPRECHPARTNER ({contacts.length})

+ +

+ {contacts.length === 0 ? ( +

Noch keine Ansprechpartner erfasst.

+ ) : ( + contacts.map((ct, i) => ( +

+ {ct.name} + {i === 0 && HAUPT} +

+ {ct.position &&

{ct.position}

} +

+ {ct.email && {ct.email}} + {ct.phone && {ct.phone}} +

+ + +

+ )) + )} +

+ + {/* Projekte */} +

0 ? "1px solid #ece8e2" : "none" }}> + PROJEKTE ({projs.length}) + {projs.length > 0 && } +

+ {projs.length === 0 + ?

Noch keine Projekte.

+ : <> + + + + {projs.slice(0, 5).map(p => ( + + + + + + + ))} + +

Projekt	Kategorie	Status	Budget
{p.name}{p.number && {p.number}}	{p.category \|\| "—"}	{p.status}	{p.budget > 0 ? formatCHF(p.budget) : "—"}

+ {projs.length > 5 &&

+{projs.length - 5} weitere —

} + + } +

+ + {/* Rechnungen */} +

0 ? "1px solid #ece8e2" : "none" }}> + RECHNUNGEN ({invoices.length}) + {invoices.length > 0 && } +

+ {invoices.length === 0 + ?

Noch keine Rechnungen.

+ : <> + + + + {invoices.slice(0, 5).map(inv => { + const proj = inv.projectId ? (data.projects || []).find(p => p.id === inv.projectId) : null; + return ( + + + + + + + + ); + })} + +

Nr.	Datum	Projekt	Status	Betrag
{inv.number}	{fmtDate(inv.date)}	{proj?.name \|\| "—"}	{inv.status}	{formatCHF(inv.total)}

+ {invoices.length > 5 &&

+{invoices.length - 5} weitere —

} + + } +

+ + {/* Offerten */} +

0 ? "1px solid #ece8e2" : "none" }}> + OFFERTEN ({quotes.length}) + {quotes.length > 0 && } +

+ {quotes.length === 0 + ?

Noch keine Offerten.

+ : <> + + + + {quotes.slice(0, 5).map(q => ( + + + + + + + + ))} + +

Nr.	Datum	Modus	Status	Honorar
{q.number}	{fmtDate(q.date)}	{q.mode === "sia" ? "SIA 102" : q.mode === "manual" ? "Aufwand" : "Frei"}	{q.status \|\| "—"}	{formatCHF(q.total)}

+ {quotes.length > 5 &&

+{quotes.length - 5} weitere —

} + + } +

+ + {/* Kontakt-Modal */} + {contactModal && ( + setContactModal(null)} onSave={saveContact}> +

+ setContactForm({ ...contactForm, name: e.target.value })} autoFocus /> + setContactForm({ ...contactForm, position: e.target.value })} placeholder="z.B. Geschäftsführer, Bauleiter…" /> +

+ setContactForm({ ...contactForm, email: e.target.value })} /> + setContactForm({ ...contactForm, phone: e.target.value })} /> +

+ + )} + + {/* Client-Edit-Modal */} + {modal?.type === "client" && modal.id && ( + setModal(null)} onSave={save} wide> + {clientFormFields(form, setForm)} + + )} +

+ ); + } + + // ── Listen-Ansicht ── + const filteredClients = clients.filter(c => { + if (!search) return true; + const q = search.toLowerCase(); + return [c.name, c.city, c.email, c.street, ...(c.contacts || []).map(ct => ct.name)].some(v => v?.toLowerCase().includes(q)); + }); + + const clientGroups = (() => { + if (groupBy === "none") return [{ key: "_all", label: null, items: filteredClients }]; + if (groupBy === "alpha") { + const g = {}; + [...filteredClients].sort((a, b) => a.name.localeCompare(b.name, "de")) + .forEach(c => { const k = c.name[0]?.toUpperCase() || "#"; (g[k] = g[k] || []).push(c); }); + return Object.entries(g).sort((a, b) => a[0].localeCompare(b[0])).map(([k, items]) => ({ key: k, label: k, items })); + } + if (groupBy === "city") { + const g = {}; + [...filteredClients].sort((a, b) => a.name.localeCompare(b.name, "de")) + .forEach(c => { const k = c.city || "Ohne Ort"; (g[k] = g[k] || []).push(c); }); + return Object.entries(g).sort((a, b) => a[0].localeCompare(b[0])).map(([k, items]) => ({ key: k, label: k, items })); + } + })(); + + const ClientTable = ({ items }) => ( +

+ + + + + + + + + + + + + {items.length === 0 && } + {items.map(c => { + const projs = (data.projects || []).filter(p => p.clientId === c.id).length; + const cts = c.contacts || []; + const hauptkontakt = cts[0]; + const city = [c.zip, c.city].filter(Boolean).join(" "); + return ( + setSelectedId(c.id)}> + + + + + + + + ); + })} + +

Firmenname	Adresse	Hauptkontakt	Kontakte	Projekte
Keine Treffer
+ {c.name} + {c.email && {c.email} } +	+ {c.street && {c.street} } + {city && {city} } +	+ {hauptkontakt ? ( + <> + {hauptkontakt.name} + {hauptkontakt.position && {hauptkontakt.position} } + + ) : —} +	{cts.length \|\| "—"}	{projs \|\| "—"}	e.stopPropagation()}> + + +

+ ); + + return ( +

+ {ConfirmModalEl} +

+ Neuer Kunde} /> + +

+ setSearch(e.target.value)} + style={{ flex: "1 1 200px", maxWidth: 300, fontSize: 12 }} /> + +

+ + {clients.length === 0 ? ( +

Noch keine Kunden erfasst.

+ ) : filteredClients.length === 0 ? ( +

Keine Treffer

+ ) : clientGroups.map(group => ( +

+ {group.label && ( +

+ {group.label.toUpperCase()} {group.items.length} +

+ )} + +

+ ))} + + {modal?.type === "client" && ( + setModal(null)} onSave={save} wide> + {clientFormFields(form, setForm, !modal.id)} + + )} +

+ ); +} + +function clientFormFields(form, setForm, isNew = false) { + return ( + <> + + setForm({ ...form, name: e.target.value })} autoFocus placeholder="z.B. Müller Immobilien AG" /> + +

+ setForm({ ...form, street: e.target.value })} placeholder="Bahnhofstrasse 1" /> + setForm({ ...form, zip: e.target.value })} style={{ maxWidth: 100 }} /> + setForm({ ...form, city: e.target.value })} /> + setForm({ ...form, country: e.target.value.toUpperCase() })} maxLength={2} style={{ maxWidth: 70 }} /> +

+ setForm({ ...form, email: e.target.value })} /> + setForm({ ...form, phone: e.target.value })} /> + setForm({ ...form, website: e.target.value })} placeholder="www.beispiel.ch" /> +

+ + {isNew && ( + <> +

+ HAUPTKONTAKT (optional) +

+ + setForm({ ...form, _contactName: e.target.value })} placeholder="z.B. Hans Müller" /> + + + setForm({ ...form, _contactPosition: e.target.value })} placeholder="z.B. Geschäftsführer" /> + +

Weitere Ansprechpartner können in der Kundendetailseite hinzugefügt werden.

+ + )} + + ); +} diff --git a/src/views/Contacts.jsx b/src/views/Contacts.jsx new file mode 100755 index 0000000..a12eefa --- /dev/null +++ b/src/views/Contacts.jsx @@ -0,0 +1,456 @@ +import React, { useState } from "react"; +import { generateId } from "../utils.js"; +import { Header, Modal, FormField, useConfirm , DateInput } from "../components/UI.jsx"; + +const CONTACT_TYPES = [ + "Elektroplaner", "HLKSE-Planer", "Statiker", "Tragwerksplaner", + "Kostenplaner", "Landschaftsarchitekt", "Bauphysiker", + "Vermessungsingenieur", "Brandschutzspezialist", "Geologe", + "Generalunternehmer", "Fachplaner", "Sonstiges", +]; + +const fmtCHF = (v) => v != null ? `CHF ${Number(v).toLocaleString("de-CH", { minimumFractionDigits: 2, maximumFractionDigits: 2 })}` : "—"; +const fmtDate = (s) => s ? new Date(s).toLocaleDateString("de-CH") : "—"; + +export default +function Contacts({ data, update }) { + const contacts = data.contacts || []; + const { askConfirm, ConfirmModalEl } = useConfirm(); + + const [selectedId, setSelectedId] = useState(() => { + const id = window.__navToContact || null; + window.__navToContact = null; + return id; + }); + const [search, setSearch] = useState(""); + const [typeFilter, setTypeFilter] = useState(""); + const [groupBy, setGroupBy] = useState("alpha"); + + const emptyFirm = { + name: "", type: "", street: "", zip: "", city: "", email: "", phone: "", website: "", note: "", + contacts: [], honorarOffers: [], + _personName: "", _personPosition: "", + }; + const [firmModal, setFirmModal] = useState(null); + const [firmForm, setFirmForm] = useState(emptyFirm); + + const [personModal, setPersonModal] = useState(null); + const [personForm, setPersonForm] = useState({ name: "", position: "", email: "", phone: "" }); + + const [honorarModal, setHonorarModal] = useState(null); + const [honorarForm, setHonorarForm] = useState({ date: "", amount: "", phase: "", description: "", note: "" }); + + const selectedContact = contacts.find(c => c.id === selectedId) || null; + + // ── Firm CRUD ── + const saveFirm = () => { + if (!firmForm.name.trim()) return; + const { _personName, _personPosition, ...firmData } = firmForm; + let persons = firmData.contacts || []; + if (_personName.trim() && !firmModal?.id) { + persons = [{ id: generateId(), name: _personName.trim(), position: _personPosition.trim(), email: "", phone: "" }]; + } + const firm = { ...firmData, contacts: persons, id: firmModal?.id || generateId() }; + update("contacts", firmModal?.id ? contacts.map(c => c.id === firmModal.id ? firm : c) : [...contacts, firm]); + setFirmModal(null); + }; + const openNew = () => { setFirmForm(emptyFirm); setFirmModal({}); }; + const openEdit = (c) => { setFirmForm({ ...emptyFirm, ...c, _personName: "", _personPosition: "" }); setFirmModal({ id: c.id }); }; + const delFirm = async (id) => { + if (await askConfirm("Kontakt löschen?")) { + update("contacts", contacts.filter(c => c.id !== id)); + if (selectedId === id) setSelectedId(null); + } + }; + + // ── Person CRUD ── + const savePerson = () => { + if (!personForm.name.trim()) return; + const firm = contacts.find(c => c.id === personModal.contactId); + if (!firm) return; + const persons = firm.contacts || []; + const updated = personModal.personId + ? persons.map(p => p.id === personModal.personId ? { ...p, ...personForm } : p) + : [...persons, { ...personForm, id: generateId() }]; + update("contacts", contacts.map(c => c.id === firm.id ? { ...c, contacts: updated } : c)); + setPersonModal(null); + }; + const delPerson = async (contactId, personId) => { + if (await askConfirm("Person löschen?")) { + update("contacts", contacts.map(c => c.id === contactId + ? { ...c, contacts: (c.contacts || []).filter(p => p.id !== personId) } : c)); + } + }; + + // ── Honorar CRUD ── + const saveHonorar = () => { + const firm = contacts.find(c => c.id === honorarModal.contactId); + if (!firm) return; + const offers = firm.honorarOffers || []; + const offer = { id: honorarModal.offerId || generateId(), date: honorarForm.date, amount: parseFloat(honorarForm.amount) || 0, phase: honorarForm.phase, description: honorarForm.description, note: honorarForm.note }; + const updated = honorarModal.offerId ? offers.map(o => o.id === honorarModal.offerId ? offer : o) : [...offers, offer]; + update("contacts", contacts.map(c => c.id === firm.id ? { ...c, honorarOffers: updated } : c)); + setHonorarModal(null); + }; + const delHonorar = async (contactId, offerId) => { + if (await askConfirm("Honorarangebot löschen?")) { + update("contacts", contacts.map(c => c.id === contactId + ? { ...c, honorarOffers: (c.honorarOffers || []).filter(o => o.id !== offerId) } : c)); + } + }; + + // ── Form fields (shared new/edit) ── + const firmFormFields = (isNew) => ( + <> +

+ + setFirmForm(f => ({ ...f, name: e.target.value }))} autoFocus placeholder="z.B. Elektroplaner AG" /> + + + + +

+ setFirmForm(f => ({ ...f, street: e.target.value }))} /> + setFirmForm(f => ({ ...f, zip: e.target.value }))} style={{ maxWidth: 90 }} /> + setFirmForm(f => ({ ...f, city: e.target.value }))} /> +

+ setFirmForm(f => ({ ...f, email: e.target.value }))} /> + setFirmForm(f => ({ ...f, phone: e.target.value }))} /> + setFirmForm(f => ({ ...f, website: e.target.value }))} placeholder="www.beispiel.ch" /> +

+ setFirmForm(f => ({ ...f, note: e.target.value }))} /> + {isNew && ( + <> +

+ HAUPTKONTAKT (optional) +

+ + setFirmForm(f => ({ ...f, _personName: e.target.value }))} placeholder="z.B. Max Muster" /> + + + setFirmForm(f => ({ ...f, _personPosition: e.target.value }))} placeholder="z.B. Projektleiter" /> + +

Weitere Personen können in der Detailansicht hinzugefügt werden.

+ + )} + + ); + + // ── Detail view ── + if (selectedId && selectedContact) { + const persons = selectedContact.contacts || []; + const offers = selectedContact.honorarOffers || []; + const hauptperson = persons[0] || null; + const linkedProjects = (data.projects || []).filter(p => (p.projectContacts || []).some(pc => pc.contactId === selectedId)); + const addressLine = [selectedContact.street, [selectedContact.zip, selectedContact.city].filter(Boolean).join(" ")].filter(Boolean).join(", "); + + return ( +

+ {ConfirmModalEl} + + +

+ {selectedContact.type &&

{selectedContact.type.toUpperCase()}

} +

{selectedContact.name}

+ {addressLine &&

{addressLine}

} +

+ + +

+ +

+ {/* Firmeninfo */} +

FIRMENINFO

+ {[ + { label: "E-Mail", value: selectedContact.email, href: selectedContact.email ? `mailto:${selectedContact.email}` : null }, + { label: "Telefon", value: selectedContact.phone }, + { label: "Website", value: selectedContact.website, href: selectedContact.website ? (selectedContact.website.startsWith("http") ? selectedContact.website : `https://${selectedContact.website}`) : null }, + { label: "Adresse", value: addressLine || null }, + ].filter(r => r.value).map(({ label, value, href }) => ( +

+ {label} + {href ? {value} : {value}} +

+ ))} + {selectedContact.note &&

{selectedContact.note}

} + {persons.length > 0 && hauptperson && ( +

HAUPTKONTAKT

{hauptperson.name}

+ {hauptperson.position &&

{hauptperson.position}

} +

+ {hauptperson.email && {hauptperson.email}} + {hauptperson.phone && {hauptperson.phone}} +

+ )} +

+ + {/* Ansprechpartner */} +

0 ? "1px solid #ece8e2" : "none" }}> +

ANSPRECHPARTNER ({persons.length})

+ +

+ {persons.length === 0 + ?

Noch keine Ansprechpartner erfasst.

+ : persons.map((p, i) => ( +

+ {p.name} + {i === 0 && HAUPT} +

+ {p.position &&

{p.position}

} +

+ {p.email && {p.email}} + {p.phone && {p.phone}} +

+ + +

+ )) + } +

+ + {/* Honorar-Angebote */} +

0 ? "1px solid #ece8e2" : "none" }}> +

HONORAR-ANGEBOTE ({offers.length})

+ +

+ {offers.length === 0 + ?

Noch keine Honorar-Angebote erfasst.

+ : ( + + + + {[...offers].sort((a, b) => (b.date || "").localeCompare(a.date || "")).map(o => ( + + + + + + + + ))} + + {offers.length > 1 && ( + + + + + + + )} +

Datum	Beschrieb	Phase	Betrag
{fmtDate(o.date)}	+ {o.description \|\| —} + {o.note && {o.note} } +	{o.phase \|\| "—"}	{fmtCHF(o.amount)}	+ + +
Total	{fmtCHF(offers.reduce((s, o) => s + (parseFloat(o.amount) \|\| 0), 0))}	+

+ ) + } +

+ + {/* Beteiligt an */} + {linkedProjects.length > 0 && ( +

BETEILIGT AN ({linkedProjects.length})

+ + + + {linkedProjects.map(proj => { + const client = (data.clients || []).find(c => c.id === proj.clientId); + return ( + + + + + + ); + })} + +

Projekt	Kunde	Status
{proj.number ? {proj.number} : null}{proj.name}	{client?.name \|\| "—"}	{proj.status}

+ )} + + {/* Person modal */} + {personModal && ( + setPersonModal(null)} onSave={savePerson}> +

+ setPersonForm(f => ({ ...f, name: e.target.value }))} autoFocus /> + setPersonForm(f => ({ ...f, position: e.target.value }))} placeholder="z.B. Projektleiter" /> +

+ setPersonForm(f => ({ ...f, email: e.target.value }))} /> + setPersonForm(f => ({ ...f, phone: e.target.value }))} /> +

+ + )} + + {/* Honorar modal */} + {honorarModal && ( + setHonorarModal(null)} onSave={saveHonorar}> +

+ setHonorarForm(f => ({ ...f, date: e.target.value }))} /> + setHonorarForm(f => ({ ...f, amount: e.target.value }))} placeholder="0" /> +

+ setHonorarForm(f => ({ ...f, description: e.target.value }))} placeholder="z.B. Elektroplanung Rohbau" /> + setHonorarForm(f => ({ ...f, phase: e.target.value }))} placeholder="z.B. Phase 31–33" /> + setHonorarForm(f => ({ ...f, note: e.target.value }))} /> + + )} + + {/* Edit modal */} + {firmModal && ( + setFirmModal(null)} onSave={saveFirm} wide> + {firmFormFields(false)} + + )} +

+ ); + } + + // ── List view ── + const allTypes = [...new Set(contacts.map(c => c.type).filter(Boolean))].sort(); + const filtered = contacts + .filter(c => + (!typeFilter || c.type === typeFilter) && + (!search || c.name.toLowerCase().includes(search.toLowerCase()) || + (c.type || "").toLowerCase().includes(search.toLowerCase()) || + (c.contacts || []).some(p => p.name.toLowerCase().includes(search.toLowerCase()))) + ) + .sort((a, b) => a.name.localeCompare(b.name, "de")); + + const contactGroups = (() => { + if (groupBy === "none") return [{ key: "_all", label: null, items: filtered }]; + if (groupBy === "alpha") { + const g = {}; + filtered.forEach(c => { const k = c.name[0]?.toUpperCase() || "#"; (g[k] = g[k] || []).push(c); }); + return Object.entries(g).sort((a, b) => a[0].localeCompare(b[0])).map(([k, items]) => ({ key: k, label: k, items })); + } + if (groupBy === "type") { + const g = {}; + filtered.forEach(c => { const k = c.type || "Ohne Typ"; (g[k] = g[k] || []).push(c); }); + return Object.entries(g).sort((a, b) => a[0].localeCompare(b[0])).map(([k, items]) => ({ key: k, label: k, items })); + } + })(); + + const ContactTable = ({ items }) => ( +

+ + + + + + + + + + + + + + {items.length === 0 && } + {items.map(c => { + const persons = c.contacts || []; + const haupt = persons[0]; + const city = [c.zip, c.city].filter(Boolean).join(" "); + const projCount = (data.projects || []).filter(p => (p.projectContacts || []).some(pc => pc.contactId === c.id)).length; + return ( + setSelectedId(c.id)}> + + + + + + + + + ); + })} + +

Firma	Typ	Adresse	Hauptkontakt	Personen	Projekte
Keine Treffer
+ {c.name} + {c.email && {c.email} } +	{c.type \|\| —}	+ {c.street && {c.street} } + {city && {city} } +	+ {haupt ? ( + <> + {haupt.name} + {haupt.position && {haupt.position} } + + ) : —} +	{persons.length \|\| "—"}	0 ? "#1a4e8a" : "#ccc", fontWeight: projCount > 0 ? 600 : 400 }}>{projCount \|\| "—"}	e.stopPropagation()}> + + +

+ ); + + return ( +

+ {ConfirmModalEl} +

+ Neuer Kontakt} /> + +

+ setSearch(e.target.value)} placeholder="Suchen…" + style={{ flex: "1 1 200px", maxWidth: 300, fontSize: 12 }} /> + {allTypes.length > 0 && ( + + )} + +

+ + {contacts.length === 0 ? ( +

Noch keine Kontakte erfasst.

+ ) : filtered.length === 0 ? ( +

Keine Treffer

+ ) : contactGroups.map(group => ( +

+ {group.label && ( +

+ {group.label.toUpperCase()} {group.items.length} +

+ )} + +

+ ))} + + {firmModal && ( + setFirmModal(null)} onSave={saveFirm} wide> + {firmFormFields(!firmModal.id)} + + )} +

+ ); +} diff --git a/src/views/Dashboard.jsx b/src/views/Dashboard.jsx new file mode 100755 index 0000000..5b4c0fd --- /dev/null +++ b/src/views/Dashboard.jsx @@ -0,0 +1,762 @@ +import React, { useState, useRef, useEffect } from "react"; +import { SIA_PHASES, DASHBOARD_WIDGETS } from "../constants.js"; +import { formatCHF, formatDate, formatHours, migrateDashboardLayout, widgetsToRows, generateId } from "../utils.js"; + +const HEIGHT_OPTS = [ + { v: 0, l: "Auto" }, + { v: 160, l: "S" }, + { v: 280, l: "M" }, + { v: 420, l: "L" }, +]; + +function deepCloneLayout(layout) { + return (layout || []).map(r => ({ ...r, widgets: [...r.widgets] })); +} + +export default function Dashboard({ data, setView, currentUser, saveAll }) { + const today = new Date().toISOString().slice(0, 10); + const thisMonth = today.slice(0, 7); + const thisYear = today.slice(0, 4); + const lastMonth = (() => { const d = new Date(); d.setMonth(d.getMonth() - 1); return d.toISOString().slice(0, 7); })(); + + // ─── Layout resolution ───────────────────────────────────────────── + const myUser = (data.users || []).find(u => u.id === currentUser?.id); + const myRole = (data.appRoles || []).find(r => r.id === (currentUser?.appRoleId || myUser?.appRoleId)); + const myTpl = (data.dashboardTemplates || []).find(t => t.id === myRole?.dashboardTemplateId); + const roleLayout = myTpl + ? migrateDashboardLayout(myTpl.layout) + : migrateDashboardLayout(myRole?.dashboardWidgets) // fallback for old data + || widgetsToRows(DASHBOARD_WIDGETS.map(w => w.id)); + const savedLayout = myUser?.dashboardWidgets ? migrateDashboardLayout(myUser.dashboardWidgets) : null; + + const [editMode, setEditMode] = useState(false); + const [layout, setLayout] = useState([]); + const [dragOver, setDragOver] = useState(null); + const [addPopoverRowId, setAddPopoverRowId] = useState(null); + const [saveTemplateOpen, setSaveTemplateOpen] = useState(false); + const [newPublicName, setNewPublicName] = useState(""); + const [newPrivateName, setNewPrivateName] = useState(""); + const dragRef = useRef(null); + + const activeLayout = editMode ? layout : (savedLayout || roleLayout); + + // ─── Data ────────────────────────────────────────────────────────── + const activeProjects = data.projects.filter(p => p.status === "aktiv"); + const projMins = id => data.timeEntries.filter(e => e.projectId === id).reduce((s, e) => s + (e.minutes || 0), 0); + const monthMins = data.timeEntries.filter(e => (e.date||"").startsWith(thisMonth)).reduce((s,e)=>s+(e.minutes||0),0); + const lastMoMins = data.timeEntries.filter(e => (e.date||"").startsWith(lastMonth)).reduce((s,e)=>s+(e.minutes||0),0); + const myEmpId = currentUser?.employeeId; + const myMonthMins = data.timeEntries.filter(e => (e.date||"").startsWith(thisMonth) && e.employeeId===myEmpId).reduce((s,e)=>s+(e.minutes||0),0); + const recentTime = [...data.timeEntries].sort((a,b)=>(b.date||"").localeCompare(a.date||"")).slice(0,6); + const myRecentTime = [...data.timeEntries].filter(e=>e.employeeId===myEmpId).sort((a,b)=>(b.date||"").localeCompare(a.date||"")).slice(0,6); + const openInvoices = data.invoices.filter(i => i.status==="gesendet"||i.status==="überfällig"); + const overdueInvoices = data.invoices.filter(i => i.status==="überfällig"); + const openAmount = openInvoices.reduce((s,i)=>s+(i.total||0),0); + const paidThisYear = data.invoices.filter(i=>i.status==="bezahlt"&&(i.date||"").startsWith(thisYear)).reduce((s,i)=>s+(i.sub||0),0); + const pendingQuotes = (data.quotes||[]).filter(q=>q.status==="gesendet"); + const expiredQuotes = (data.quotes||[]).filter(q=>q.status==="gesendet"&&q.validUntil&&q.validUntil{ + const mins = data.timeEntries.filter(e=>e.projectId===p.id&&!e.invoiceId).reduce((s,e)=>s+(e.minutes||0),0); + return {...p, unbilledMins:mins, unbilledAmt:(mins/60)*(p.hourlyRate||0)}; + }).filter(p=>p.unbilledMins>0&&(p.billingType||p.type)==="stundensatz").sort((a,b)=>b.unbilledMins-a.unbilledMins); + const totalUnbilled = unbilledProjects.reduce((s,p)=>s+p.unbilledMins,0); + const last6Months = Array.from({length:6},(_,i)=>{const d=new Date();d.setMonth(d.getMonth()-(5-i));return d.toISOString().slice(0,7);}); + const monthlyRevenue = last6Months.map(m=>({m,paid:data.invoices.filter(i=>i.status==="bezahlt"&&(i.date||"").startsWith(m)).reduce((s,i)=>s+(i.sub||0),0)})); + const maxRev = Math.max(...monthlyRevenue.map(m=>m.paid),1); + + // ─── Permission ──────────────────────────────────────────────────── + const canSaveTemplate = !myRole || myRole.permissions === null || (myRole.permissions||[]).includes("dashboard-vorlage"); + + // ─── Edit mode ───────────────────────────────────────────────────── + const enterEdit = () => { setLayout(deepCloneLayout(savedLayout || roleLayout)); setEditMode(true); }; + const cancelEdit = () => { setEditMode(false); setAddPopoverRowId(null); setSaveTemplateOpen(false); setNewPublicName(""); setNewPrivateName(""); }; + const saveEdit = () => { + if (currentUser && saveAll) { + const users = (data.users||[]).map(u => u.id===currentUser.id ? {...u, dashboardWidgets: layout} : u); + saveAll({ ...data, users }); + } + setEditMode(false); setAddPopoverRowId(null); setSaveTemplateOpen(false); setNewPublicName(""); setNewPrivateName(""); + }; + const loadTemplate = tplId => { + const tpl = (data.dashboardTemplates||[]).find(t=>t.id===tplId); + if (tpl?.layout) setLayout(deepCloneLayout(migrateDashboardLayout(tpl.layout))); + }; + const saveAsTemplate = (tplId) => { + if (!saveAll) return; + const dashboardTemplates = (data.dashboardTemplates||[]).map(t => t.id===tplId ? {...t, layout} : t); + saveAll({ ...data, dashboardTemplates }); + setSaveTemplateOpen(false); + }; + const createTemplate = (name, isPublic) => { + if (!name.trim() || !saveAll) return; + const tpl = { id: generateId(), name: name.trim(), isPublic, layout, ...(!isPublic ? { createdBy: currentUser?.id } : {}) }; + saveAll({ ...data, dashboardTemplates: [...(data.dashboardTemplates||[]), tpl] }); + setSaveTemplateOpen(false); + if (isPublic) setNewPublicName(""); else setNewPrivateName(""); + }; + // Add widget to row, moving it out of any other row it's already in + const addWidgetExclusive = (rowId, wid) => { + setLayout(l => l.map(r => { + if (r.id === rowId) return { ...r, widgets: r.widgets.includes(wid) ? r.widgets : [...r.widgets, wid] }; + return { ...r, widgets: r.widgets.filter(w => w !== wid) }; + })); + setAddPopoverRowId(null); + }; + // Close popovers on outside click + useEffect(() => { + if (!addPopoverRowId && !saveTemplateOpen) return; + const close = e => { if (!e.target.closest("[data-popover]")) { setAddPopoverRowId(null); setSaveTemplateOpen(false); } }; + document.addEventListener("mousedown", close); + return () => document.removeEventListener("mousedown", close); + }, [addPopoverRowId, saveTemplateOpen]); + + // ─── Row operations ──────────────────────────────────────────────── + const updateRow = (rowId, patch) => setLayout(l => l.map(r => r.id===rowId ? {...r,...patch} : r)); + const addRow = (afterId) => { + const row = { id: generateId(), cols: 2, minH: 0, widgets: [] }; + setLayout(l => { + const i = l.findIndex(r=>r.id===afterId); + const next = [...l]; + next.splice(i+1, 0, row); + return next; + }); + }; + const deleteRow = rowId => setLayout(l => l.filter(r=>r.id!==rowId)); + const moveRow = (rowId, dir) => setLayout(l => { + const i = l.findIndex(r=>r.id===rowId); + const j = i + dir; + if (j<0||j>=l.length) return l; + const next=[...l]; + [next[i],next[j]]=[next[j],next[i]]; + return next; + }); + const addWidgetToRow = (rowId, wid) => + setLayout(l => l.map(r => r.id===rowId ? {...r, widgets:[...r.widgets,wid]} : r)); + const removeWidgetFromRow = (rowId, wid) => + setLayout(l => l.map(r => r.id===rowId ? {...r, widgets:r.widgets.filter(w=>w!==wid)} : r)); + + // ─── Drag & Drop ─────────────────────────────────────────────────── + const handleDragStart = (fromRowId, widgetId) => { + dragRef.current = { fromRowId, widgetId }; + }; + const handleDragEnd = () => { + dragRef.current = null; + setDragOver(null); + }; + const handleDrop = (toRowId, beforeWidgetId) => { + const src = dragRef.current; + if (!src) return; + const { fromRowId, widgetId } = src; + setLayout(l => { + const next = deepCloneLayout(l); + const fromRow = next.find(r=>r.id===fromRowId); + const toRow = next.find(r=>r.id===toRowId); + if (!fromRow||!toRow) return l; + fromRow.widgets = fromRow.widgets.filter(w=>w!==widgetId); + if (beforeWidgetId) { + const idx = toRow.widgets.indexOf(beforeWidgetId); + toRow.widgets.splice(idx<0 ? toRow.widgets.length : idx, 0, widgetId); + } else { + if (!toRow.widgets.includes(widgetId)) toRow.widgets.push(widgetId); + } + return next; + }); + dragRef.current = null; + setDragOver(null); + }; + + // ─── Styles ──────────────────────────────────────────────────────── + const ctrlBtn = "pill"; + const activeCtrlBtn = "pill active"; + + // ─── Widget content renderers ────────────────────────────────────── + const wContent = { + "kpi-projekte": () => p.status==="abgeschlossen").length} abgeschlossen`} />, + "kpi-stunden": () => 0?`Vormonat: ${formatHours(lastMoMins)}`:undefined} />, + "kpi-ausstehend": () => 0?"#8a1a1a":"#7a6a00"} go="invoices" setView={!editMode?setView:undefined} sub={overdueInvoices.length>0?`${overdueInvoices.length} überfällig`:`${openInvoices.length} gesendet`} />, + "kpi-umsatz": () => , + "warnungen": () => { + const has = overdueInvoices.length>0||expiredQuotes.length>0; + if (!editMode&&!has) return null; + return has ? ( +

+ {overdueInvoices.length>0&&

setView("invoices"):undefined} style={{flex:1,minWidth:180,padding:"12px 16px",background:"#fff3f3",border:"1.5px solid #e0b0b0",borderRadius:8,cursor:editMode?"default":"pointer",display:"flex",alignItems:"center",gap:12}}> +

⚠

{overdueInvoices.length} überfällige Rechnung{overdueInvoices.length>1?"en":""}

{formatCHF(overdueInvoices.reduce((s,i)=>s+i.total,0))} ausstehend

} + {expiredQuotes.length>0&&

setView("quotes"):undefined} style={{flex:1,minWidth:180,padding:"12px 16px",background:"#fffbe8",border:"1.5px solid #e0d090",borderRadius:8,cursor:editMode?"default":"pointer",display:"flex",alignItems:"center",gap:12}}> +

⏱

{expiredQuotes.length} Offerte{expiredQuotes.length>1?"n":""} abgelaufen

Gültigkeit überschritten

} +

+ ) :

Warnungen (keine aktuellen)

; + }, + "aktive-projekte": () => ( +

AKTIVE PROJEKTE

+ +

+ {activeProjects.length===0?

Keine aktiven Projekte

:activeProjects.slice(0,6).map(p=>{ + const used=projMins(p.id),budget=p.budgetHours||0,pct=budget>0?Math.min((used/60)/budget,1):0,over=budget>0&&(used/60)>budget; + const cl=(data.persons||[]).filter(x=>x.isAuftraggeber).find(c=>c.id===p.clientId); + return (

{p.name}

{cl&&

{cl.name}

}

{formatHours(used)}{budget>0?` / ${budget}h`:""}

+ {budget>0&&

0.8?"#b5621e":"#2d6a4f",borderRadius:2,transition:"width 0.3s"}}/>

} +

); + })} +

+ ), + "unverrechnete-stunden": () => ( +

UNVERRECHNETE STUNDEN

+ +

+ {totalUnbilled===0?

✓ Alles verrechnet

:<> +

{formatHours(totalUnbilled)}

≈ {formatCHF(unbilledProjects.reduce((s,p)=>s+p.unbilledAmt,0))}

+ {unbilledProjects.slice(0,5).map(p=>

{p.name}{formatHours(p.unbilledMins)}

)} + } +

+ ), + "umsatz-sparkline": () => ( +

UMSATZ LETZTE 6 MONATE

+ {monthlyRevenue.map(({m,paid})=>( +

0?`${Math.max((paid/maxRev)*54,4)}px`:"2px",background:m===thisMonth?"#b07848":paid>0?"#2d6a4f":"var(--border2)",borderRadius:"2px 2px 0 0",transition:"height 0.3s"}} title={formatCHF(paid)}/> +

{new Date(m+"-01").toLocaleString("de-CH",{month:"short"})}

+ ))} +

+ ), + "offene-offerten": () => ( +

OFFENE OFFERTEN

+ +

+ {pendingQuotes.length===0?

Keine pendenten Offerten

:pendingQuotes.slice(0,5).map(q=>{ + const cl=(data.persons||[]).filter(p=>p.isAuftraggeber).find(c=>c.id===q.clientId); + const expired=q.validUntil&&q.validUntil +

{q.number}

{cl&&

{cl.name}

}

{formatCHF(q.total)}

{expired&&

abgelaufen

}

); + })} +

+ ), + "letzte-zeiteintraege": () => ( +

LETZTE ZEITEINTRÄGE

+ +

+ ), + "meine-zeiteintraege": () => ( +

MEINE ZEITEINTRÄGE

+ +

+ ), + + "meine-projekte": () => { + const myProjects = (data.projects||[]).filter(p=>p.status==="aktiv"&&(p.internalMembers||[]).includes(myEmpId)); + return ( +

MEINE PROJEKTE

+ +

+ {myProjects.length===0 + ?

Keinen Projekten zugewiesen

+ : myProjects.map(p=>{ + const myMins=data.timeEntries.filter(e=>e.projectId===p.id&&e.employeeId===myEmpId).reduce((s,e)=>s+(e.minutes||0),0); + const cl=(data.persons||[]).find(c=>c.id===p.clientId); + return ( +

{p.name}

+ {cl&&

{cl.name}

} +

{formatHours(myMins)}

+ ); + }) + } +

+ ); + }, + + "meine-ferien": () => { + const myEmp=(data.employees||[]).find(e=>e.id===myEmpId); + if(!myEmpId||!myEmp) return

Kein Mitarbeiterprofil verknüpft

; + const anspruchTage=(myEmp.ferienWochen||5)*5; + const approvedEntries=(data.ferienEntries||[]).filter(f=>f.employeeId===myEmpId&&(f.status==="approved"||!f.status)&&(f.dateFrom||"").startsWith(thisYear)); + const countWorkdays=(from,to)=>{ + let n=0;const d=new Date(from);const end=new Date(to); + while(d<=end){const dow=d.getDay();if(dow!==0&&dow!==6)n++;d.setDate(d.getDate()+1);} + return n; + }; + const bezogenTage=approvedEntries.reduce((s,f)=>s+countWorkdays(f.dateFrom,f.dateTo),0); + const restTage=anspruchTage-bezogenTage; + const pct=Math.min(bezogenTage/anspruchTage,1); + const upcoming=(data.ferienEntries||[]).filter(f=>f.employeeId===myEmpId&&(f.status==="approved"||!f.status)&&f.dateFrom>today).slice(0,2); + return ( +

FERIENSTAND {thisYear}

{restTage}

Verbleibend

{bezogenTage}

Bezogen

{anspruchTage}

Anspruch

+ {upcoming.length>0&&<> +

NÄCHSTE FERIEN

+ {upcoming.map(f=>

{formatDate(f.dateFrom)} – {formatDate(f.dateTo)}

)} + } +

+ ); + }, + + "ueberstunden": () => { + const myEmp=(data.employees||[]).find(e=>e.id===myEmpId); + if(!myEmpId||!myEmp) return

Kein Mitarbeiterprofil verknüpft

; + const pensum=(myEmp.pensum||100)/100; + const tagessollH=((myEmp.wochenstunden||35)*pensum)/5; + const startOfYear=`${thisYear}-01-01`; + const fts=data.feiertage||[]; + // Respect eintrittsdatum: only count from when the employee actually started + const effectiveYearStart=myEmp.eintrittsdatum&&myEmp.eintrittsdatum>startOfYear?myEmp.eintrittsdatum:startOfYear; + const todayD=new Date(today); + let workdays=0;const d=new Date(effectiveYearStart); + while(d<=todayD){const dow=d.getDay();const ds=d.toISOString().slice(0,10);const ft=fts.find(f=>f.date===ds);const isFt=ft&&(ft.stundenDelta===0||ft.stundenDelta===null||ft.stundenDelta===undefined);if(dow!==0&&dow!==6&&!isFt)workdays++;d.setDate(d.getDate()+1);} + const sollMin=workdays*tagessollH*60; + const istMin=data.timeEntries.filter(e=>e.employeeId===myEmpId&&(e.date||"")>=effectiveYearStart&&(e.date||"")<=today).reduce((s,e)=>s+(e.minutes||0),0); + const deltaMin=istMin-sollMin; + const isPos=deltaMin>=0; + // This month — also respect eintrittsdatum + const effectiveMonthStart=myEmp.eintrittsdatum&&myEmp.eintrittsdatum>`${thisMonth}-01`?myEmp.eintrittsdatum:`${thisMonth}-01`; + const sollMonthMin=(() => { + let wd=0;const me=new Date(new Date(`${thisMonth}-01`).getFullYear(),new Date(`${thisMonth}-01`).getMonth()+1,0); + const end=mef.date===ds);const isFt=ft&&(ft.stundenDelta===0||ft.stundenDelta===null||ft.stundenDelta===undefined);if(dow!==0&&dow!==6&&!isFt)wd++;dd.setDate(dd.getDate()+1);} + return wd*tagessollH*60; + })(); + const istMonthMin=data.timeEntries.filter(e=>e.employeeId===myEmpId&&(e.date||"").startsWith(thisMonth)).reduce((s,e)=>s+(e.minutes||0),0); + const deltaMonth=istMonthMin-sollMonthMin; + return ( +

STUNDENSALDO

JAHRESSALDO {thisYear}

+ {isPos?"+":""}{formatHours(Math.abs(deltaMin))} + {isPos?"Überstunden":"Minusstunden"} +

{formatHours(istMin)} von {formatHours(sollMin)} Soll

DIESER MONAT

=0?"#2d6a4f":"#8a1a1a"}}> + {deltaMonth>=0?"+":""}{formatHours(Math.abs(deltaMonth))} +

{formatHours(istMonthMin)} von {formatHours(sollMonthMin)} Soll

+ ); + }, + + "stunden-woche": () => { + const myEmp=(data.employees||[]).find(e=>e.id===myEmpId); + const pensum=(myEmp?.pensum||100)/100; + const sollH=(myEmp?.wochenstunden||35)*pensum; + const getMonday=(dateStr)=>{const d=new Date(dateStr);const day=d.getDay();d.setDate(d.getDate()-(day===0?6:day-1));return d;}; + const monday=getMonday(today); + const weeks=Array.from({length:5},(_,i)=>{ + const mon=new Date(monday);mon.setDate(mon.getDate()-(4-i)*7); + const sun=new Date(mon);sun.setDate(sun.getDate()+6); + const monStr=mon.toISOString().slice(0,10); + const sunStr=sun.toISOString().slice(0,10); + const isCurrent=i===4; + const mins=(myEmpId?data.timeEntries.filter(e=>e.employeeId===myEmpId&&e.date>=monStr&&e.date<=sunStr):data.timeEntries.filter(e=>e.date>=monStr&&e.date<=sunStr)).reduce((s,e)=>s+(e.minutes||0),0); + const kw=(() => { const d2=new Date(mon);d2.setHours(0,0,0,0);d2.setDate(d2.getDate()+3-(d2.getDay()||7)+1); const w1=new Date(d2.getFullYear(),0,4);return 1+Math.round(((d2-w1)/86400000+((w1.getDay()||7)-1))/7); })(); + return {kw,mins,isCurrent}; + }); + const maxMins=Math.max(...weeks.map(w=>w.mins),sollH*60,1); + const sollPct=(sollH*60)/maxMins; + return ( +

STUNDEN PRO WOCHE

+ {weeks.map(({kw,mins,isCurrent})=>{ + const pct=mins/maxMins; + const over=mins>sollH*60; + return ( +

{mins>0?formatHours(mins):""}

0?4:1)}px`,background:isCurrent?(over?"#2d6a4f":"#b07848"):over?"#2d6a4f33":"var(--border2)",borderRadius:"3px 3px 0 0",transition:"height 0.3s"}}/> +

KW{kw}

+ ); + })} +

+ — Soll: {sollH}h / Woche +

+ ); + }, + + "interner-blog": () => { + const posts = (data.blogPosts || []); + const recent = [...posts].sort((a,b) => { + if (a.pinned !== b.pinned) return a.pinned ? -1 : 1; + return b.createdAt.localeCompare(a.createdAt); + }).slice(0, 3); + const getMonday = d => { const dd=new Date(d); dd.setDate(dd.getDate()-(dd.getDay()===0?6:dd.getDay()-1)); return dd; }; + const weekStart = getMonday(new Date(today)); + const weekEnd = new Date(weekStart); weekEnd.setDate(weekEnd.getDate()+6); + const feiertageWeek = (data.feiertage||[]).filter(f=>f.date>=weekStart.toISOString().slice(0,10)&&f.date<=weekEnd.toISOString().slice(0,10)); + const TYPE_COLOR = { beitrag:"#1a4e8a", ankuendigung:"#b5621e", event:"#2d6a4f" }; + const TYPE_LABEL = { beitrag:"Beitrag", ankuendigung:"Ankündigung", event:"Event" }; + return ( +

PINNWAND

+ +

+ {feiertageWeek.length>0&&( +

+ 🎉 + Feiertag diese Woche: {feiertageWeek.map(f=>f.name).join(", ")} +

+ )} + {recent.length===0 + ?

Keine Beiträge

+ : recent.map(p=>( +

+ {(TYPE_LABEL[p.type]||"").toUpperCase()} + {p.pinned&&📌} +

+ {p.title&&

{p.title}

} +

{p.body}

{p.authorName} · {new Date(p.createdAt).toLocaleDateString("de-CH")}

+ )) + } +

+ ); + }, + + "team-auslastung": () => { + const activeEmps=(data.employees||[]).filter(e=>e.aktiv!==false); + const pensum=e=>(e.pensum||100)/100; + const sollH=e=>((e.wochenstunden||35)*pensum(e))/5*(() => { + let wd=0;const d=new Date(`${thisMonth}-01`);const end=new Date(d.getFullYear(),d.getMonth()+1,0);const todayD=new Date(today); + const cap=end{ + const istMin=data.timeEntries.filter(t=>t.employeeId===e.id&&(t.date||"").startsWith(thisMonth)).reduce((s,t)=>s+(t.minutes||0),0); + const sollMin=sollH(e)*60; + const pct=sollMin>0?Math.min(istMin/sollMin,1.5):0; + return{...e,istMin,sollMin,pct}; + }).sort((a,b)=>b.istMin-a.istMin); + return ( +

TEAM-AUSLASTUNG {new Date().toLocaleString("de-CH",{month:"long"}).toUpperCase()}

+ {empData.length===0 + ?

Keine Mitarbeitenden

+ : empData.map(e=>{ + const over=e.pct>1; + return ( +

{e.name}

{formatHours(e.istMin)}{e.sollMin>0?` / ${formatHours(e.sollMin)}`:""}

0.8?"#b07848":"var(--border3)",borderRadius:2,transition:"width 0.3s"}}/> +

+ ); + }) + } +

+ ); + }, + }; + + // ─── Row renderer ────────────────────────────────────────────────── + const renderRow = (row, rowIdx) => { + const isDragOverRow = dragOver?.rowId === row.id && dragOver?.before === null; + const content = wContent[row.id] ? null : null; // widget lookup happens below + + return ( +

+ {/* Row toolbar */} + {editMode && ( +

+ SPALTEN + {[1,2,3,4].map(n=>( + + ))} + HÖHE + {HEIGHT_OPTS.map(opt=>( + + ))} +

+ + {addPopoverRowId===row.id&&( +

+ {DASHBOARD_WIDGETS.map(d=>{ + const inThis=row.widgets.includes(d.id); + const inOther=!inThis&&layout.some(r=>r.id!==row.id&&r.widgets.includes(d.id)); + return ( + + ); + })} +

+ )} +

+ {rowIdx>0&&} + {rowIdxmoveRow(row.id,1)} className={ctrlBtn}>↓} + + +

+ )} + + {/* Row grid */} +

{e.preventDefault();setDragOver({rowId:row.id,before:null});}:undefined} + onDrop={editMode?e=>{e.preventDefault();handleDrop(row.id,null);}:undefined} + > + {row.widgets.map(wid=>{ + const content = wContent[wid]; + if (!content) return null; + const rendered = content(); + if (rendered===null&&!editMode) return null; + const isBefore = dragOver?.rowId===row.id&&dragOver?.before===wid; + const isDragging = dragRef.current?.widgetId===wid; + return ( +

handleDragStart(row.id,wid):undefined} + onDragEnd={editMode?handleDragEnd:undefined} + onDragOver={editMode?e=>{e.preventDefault();e.stopPropagation();setDragOver({rowId:row.id,before:wid});}:undefined} + onDrop={editMode?e=>{e.preventDefault();e.stopPropagation();handleDrop(row.id,wid);}:undefined} + style={{ + position:"relative", + height:"100%", + opacity:isDragging?0.35:1, + boxShadow:isBefore?"inset 3px 0 0 var(--text)":undefined, + borderRadius:10, + cursor:editMode?"grab":"default", + transition:"opacity 0.15s", + }} + > + {rendered===null?

{DASHBOARD_WIDGETS.find(d=>d.id===wid)?.label}

:rendered} + {editMode&&( + + )} +

+ ); + })} + + {/* Empty slot drop target */} + {editMode&&( +

{e.preventDefault();setDragOver({rowId:row.id,before:null});}} + onDrop={e=>{e.preventDefault();handleDrop(row.id,null);}} + style={{minHeight:80,border:"1.5px dashed var(--border3)",borderRadius:10,display:"flex",alignItems:"center",justifyContent:"center",color:"var(--text5)",fontSize:13}} + > + ablegen +

+ )} +

+ ); + }; + + // ─── Render ──────────────────────────────────────────────────────── + return ( +

+ {/* Header */} +

+ {data.settings.name||"Studio"} +

+ {new Date().toLocaleDateString("de-CH",{weekday:"long",day:"numeric",month:"long",year:"numeric"}).toUpperCase()} +

+ {editMode?( + <> + +

+ + {saveTemplateOpen&&( +

+ {canSaveTemplate&&(<> +

ÖFFENTLICHE VORLAGE

+ {(data.dashboardTemplates||[]).filter(t=>t.isPublic).map(t=>( + + ))} +

+ setNewPublicName(e.target.value)} placeholder="Neue öffentliche Vorlage…" + onKeyDown={e=>e.key==="Enter"&&createTemplate(newPublicName,true)} + style={{flex:1,height:26,border:"1px solid var(--border)",borderRadius:4,padding:"0 8px",fontSize:11,background:"var(--surface)",color:"var(--text)",fontFamily:"inherit",outline:"none"}} /> + +

+ )} +

PERSÖNLICHE VORLAGE

+ {(data.dashboardTemplates||[]).filter(t=>!t.isPublic&&t.createdBy===currentUser?.id).map(t=>( + + ))} +

+ setNewPrivateName(e.target.value)} placeholder="Neue persönliche Vorlage…" + onKeyDown={e=>e.key==="Enter"&&createTemplate(newPrivateName,false)} + style={{flex:1,height:26,border:"1px solid var(--border)",borderRadius:4,padding:"0 8px",fontSize:11,background:"var(--surface)",color:"var(--text)",fontFamily:"inherit",outline:"none"}} /> + +

+ )} +

+ + + + ):( + + )} +

+ + {/* Edit banner */} + {editMode&&( +

+ Dashboard anpassen — Spaltenanzahl und Höhe pro Zeile wählen. Widgets per Drag & Drop verschieben oder mit × entfernen. +

+ )} + + {/* Rows */} + {activeLayout.map((row,idx) => renderRow(row,idx))} + + {/* Edit mode: add first row / add row at bottom */} + {editMode&&( +

+ +

+ )} +

+ ); +} + +function KpiCard({label,value,sub,color,go,setView}) { + return ( +

setView(go):undefined} + style={{borderTop:`3px solid ${color||"var(--border)"}`,cursor:go&&setView?"pointer":"default",transition:"transform 0.15s",height:"100%",boxSizing:"border-box"}} + onMouseEnter={go&&setView?e=>{e.currentTarget.style.transform="translateY(-2px)";}:undefined} + onMouseLeave={go&&setView?e=>{e.currentTarget.style.transform="";}:undefined} + > +

{label}

{value}

+ {sub&&

{sub}

} +

+ ); +} + +function TimeTable({entries,data}) { + if (!entries.length) return

Noch keine Zeiteinträge

; + return ( + + + + {entries.map(e=>{ + const proj=data.projects.find(p=>p.id===e.projectId); + const phase=SIA_PHASES.find(ph=>ph.id===e.phaseId); + return ( + + + + + ); + })} + +

Datum	Projekt	Beschreibung	Dauer
{formatDate(e.date)}	{proj?.name\|\|"—"} {phase&& Phase {phase.id} }	{e.description\|\|"—"}	{formatHours(e.minutes)}

+ ); +} diff --git a/src/views/Dashboard.jsx.bak b/src/views/Dashboard.jsx.bak new file mode 100755 index 0000000..888abb2 --- /dev/null +++ b/src/views/Dashboard.jsx.bak @@ -0,0 +1,252 @@ +import React from "react"; +import { SIA_PHASES } from "../constants.js"; +import { formatCHF, formatDate, formatHours } from "../utils.js"; + +export default function Dashboard({ data, setView }) { + const today = new Date().toISOString().slice(0, 10); + const thisMonth = today.slice(0, 7); + const thisYear = today.slice(0, 4); + const lastMonth = (() => { const d = new Date(); d.setMonth(d.getMonth() - 1); return d.toISOString().slice(0, 7); })(); + + // Projekte + const activeProjects = data.projects.filter(p => p.status === "aktiv"); + const projectMinutes = (id) => data.timeEntries.filter(e => e.projectId === id).reduce((s, e) => s + (e.minutes || 0), 0); + + // Zeit + const monthMinutes = data.timeEntries.filter(e => (e.date || "").startsWith(thisMonth)).reduce((s, e) => s + (e.minutes || 0), 0); + const lastMonthMinutes = data.timeEntries.filter(e => (e.date || "").startsWith(lastMonth)).reduce((s, e) => s + (e.minutes || 0), 0); + const recentTime = [...data.timeEntries].sort((a, b) => (b.date || "").localeCompare(a.date || "")).slice(0, 6); + + // Rechnungen + const openInvoices = data.invoices.filter(i => i.status === "gesendet" || i.status === "überfällig"); + const overdueInvoices = data.invoices.filter(i => i.status === "überfällig"); + const openAmount = openInvoices.reduce((s, i) => s + (i.total || 0), 0); + const paidThisYear = data.invoices.filter(i => i.status === "bezahlt" && (i.date || "").startsWith(thisYear)).reduce((s, i) => s + (i.sub || 0), 0); + + // Offerten + const pendingQuotes = (data.quotes || []).filter(q => q.status === "gesendet"); + const expiredQuotes = (data.quotes || []).filter(q => q.status === "gesendet" && q.validUntil && q.validUntil < today); + + // Unverrechnete Stunden + const unbilledProjects = activeProjects + .map(p => { + const mins = data.timeEntries.filter(e => e.projectId === p.id && !e.invoiceId).reduce((s, e) => s + (e.minutes || 0), 0); + return { ...p, unbilledMins: mins, unbilledAmount: (mins / 60) * (p.hourlyRate || 0) }; + }) + .filter(p => p.unbilledMins > 0 && (p.billingType || p.type) === "stundensatz") + .sort((a, b) => b.unbilledMins - a.unbilledMins); + const totalUnbilledMins = unbilledProjects.reduce((s, p) => s + p.unbilledMins, 0); + + // Monats-Umsatz für Sparkline (letzten 6 Monate) + const last6Months = Array.from({ length: 6 }, (_, i) => { + const d = new Date(); d.setMonth(d.getMonth() - (5 - i)); + return d.toISOString().slice(0, 7); + }); + const monthlyRevenue = last6Months.map(m => ({ + m, paid: data.invoices.filter(i => i.status === "bezahlt" && (i.date || "").startsWith(m)).reduce((s, i) => s + (i.sub || 0), 0), + })); + const maxRevMonth = Math.max(...monthlyRevenue.map(m => m.paid), 1); + + const Card = ({ label, value, sub, color, go, children }) => ( +

setView(go) : undefined} + style={{ borderTop: `3px solid ${color || "var(--border)"}`, cursor: go ? "pointer" : "default", transition: "transform 0.15s" }} + onMouseEnter={go ? e => { e.currentTarget.style.transform = "translateY(-2px)"; } : undefined} + onMouseLeave={go ? e => { e.currentTarget.style.transform = ""; } : undefined}> +

{label}

+ {value !== undefined &&

{value}

} + {sub &&

{sub}

} + {children} +

+ ); + + return ( +

+ {/* Header */} +

+ {data.settings.name || "Studio"} +

+ {new Date().toLocaleDateString("de-CH", { weekday: "long", day: "numeric", month: "long", year: "numeric" }).toUpperCase()} +

+ + {/* KPI Cards */} +

+ p.status === "abgeschlossen").length} abgeschlossen`} /> + 0 ? `Vormonat: ${formatHours(lastMonthMinutes)}` : "Noch keine Vormonatsdaten"} /> + 0 ? "#8a1a1a" : "#7a6a00"} go="invoices" + sub={overdueInvoices.length > 0 ? `${overdueInvoices.length} überfällig` : `${openInvoices.length} gesendet`} /> + +

+ + {/* Warnungen */} + {(overdueInvoices.length > 0 || expiredQuotes.length > 0) && ( +

+ {overdueInvoices.length > 0 && ( +

setView("invoices")} style={{ flex: 1, minWidth: 200, padding: "12px 16px", background: "#fff3f3", border: "1.5px solid #e0b0b0", borderRadius: 8, cursor: "pointer", display: "flex", alignItems: "center", gap: 12 }}> +

⚠

{overdueInvoices.length} überfällige Rechnung{overdueInvoices.length > 1 ? "en" : ""}

{formatCHF(overdueInvoices.reduce((s, i) => s + i.total, 0))} ausstehend

+ )} + {expiredQuotes.length > 0 && ( +

setView("quotes")} style={{ flex: 1, minWidth: 200, padding: "12px 16px", background: "#fffbe8", border: "1.5px solid #e0d090", borderRadius: 8, cursor: "pointer", display: "flex", alignItems: "center", gap: 12 }}> +

⏱

{expiredQuotes.length} Offerte{expiredQuotes.length > 1 ? "n" : ""} abgelaufen

Gültigkeit überschritten

+ )} +

+ )} + + {/* Hauptbereich: 3 Spalten */} +

+ + {/* Aktive Projekte mit Budget */} +

AKTIVE PROJEKTE

+ +

+ {activeProjects.length === 0 ? ( +

Keine aktiven Projekte

+ ) : activeProjects.slice(0, 6).map(p => { + const used = projectMinutes(p.id); + const budget = p.budgetHours || 0; + const pct = budget > 0 ? Math.min((used / 60) / budget, 1) : 0; + const overBudget = budget > 0 && (used / 60) > budget; + const client = ((data.persons||[]).filter(p=>p.isAuftraggeber)).find(c => c.id === p.clientId); + return ( +

{p.name}

+ {client &&

{client.name}

} +

+ {formatHours(used)}{budget > 0 ? ` / ${budget}h` : ""} +

+ {budget > 0 && ( +

0.8 ? "#b5621e" : "#2d6a4f", borderRadius: 2, transition: "width 0.3s" }} /> +

+ )} +

+ ); + })} +

+ + {/* Unverrechnete Stunden */} +

UNVERRECHNETE STUNDEN

+ +

+ {totalUnbilledMins === 0 ? ( +

✓ Alles verrechnet

+ ) : ( + <> +

{formatHours(totalUnbilledMins)}

≈ {formatCHF(unbilledProjects.reduce((s, p) => s + p.unbilledAmount, 0))}

+ {unbilledProjects.slice(0, 5).map(p => ( +

+ {p.name} + {formatHours(p.unbilledMins)} +

+ ))} + + )} +

+ + {/* Monatsumsatz Sparkline + Offerte */} +

UMSATZ LETZTE 6 MONATE

+ {monthlyRevenue.map(({ m, paid }) => ( +

0 ? `${Math.max((paid / maxRevMonth) * 54, 4)}px` : "2px", background: m === thisMonth ? "#d4a85a" : paid > 0 ? "#2d6a4f" : "var(--border2)", borderRadius: "2px 2px 0 0", transition: "height 0.3s" }} title={formatCHF(paid)} /> +

+ {new Date(m + "-01").toLocaleString("de-CH", { month: "short" })} +

+ ))} +

+ +

OFFENE OFFERTEN

+ +

+ {pendingQuotes.length === 0 ? ( +

Keine pendenten Offerten

+ ) : pendingQuotes.slice(0, 4).map(q => { + const cl = ((data.persons||[]).filter(p=>p.isAuftraggeber)).find(c => c.id === q.clientId); + const expired = q.validUntil && q.validUntil < today; + return ( +

{q.number}

+ {cl &&

{cl.name}

} +

{formatCHF(q.total)}

+ {expired &&

abgelaufen

} +

+ ); + })} +

+ + {/* Untere Zeile: Letzte Zeiteinträge */} +

LETZTE ZEITEINTRÄGE

+ +

+ {recentTime.length === 0 ? ( +

Noch keine Zeiteinträge

+ ) : ( + + + + + + + + {recentTime.map(e => { + const proj = data.projects.find(p => p.id === e.projectId); + const phase = SIA_PHASES.find(ph => ph.id === e.phaseId); + return ( + + + + + + + ); + })} + +

Datum	Projekt	Beschreibung	Dauer
{formatDate(e.date)}	+ {proj?.name \|\| "—"} + {phase && Phase {phase.id} } +	{e.description \|\| "—"}	{formatHours(e.minutes)}

+ )} +

+ ); +} diff --git a/src/views/Dokumente.jsx b/src/views/Dokumente.jsx new file mode 100755 index 0000000..5fa3e1f --- /dev/null +++ b/src/views/Dokumente.jsx @@ -0,0 +1,194 @@ +import React from "react"; +import { PROTOKOLL_TYPES } from "../constants.js"; +import { formatDate } from "../utils.js"; +import { Header } from "../components/UI.jsx"; + +export default function Dokumente({ data, setView }) { + const protocols = (data.protocols || []).sort((a, b) => (b.date || "").localeCompare(a.date || "")); + const deliveryNotes = (data.deliveryNotes || []).sort((a, b) => (b.date || "").localeCompare(a.date || "")); + const letterTemplates = data.letterTemplates || []; + + const recentProtos = protocols.slice(0, 6); + const recentNotes = deliveryNotes.slice(0, 5); + + const protoByType = PROTOKOLL_TYPES.map(t => ({ + type: t, + count: protocols.filter(p => p.type === t).length, + })).filter(r => r.count > 0).sort((a, b) => b.count - a.count); + const maxTypeCount = protoByType[0]?.count || 1; + + const getClient = (n) => { + if (n.clientId) return (data.persons||[]).filter(p=>p.isAuftraggeber).find(c => c.id === n.clientId)?.name || "—"; + if (n.projectId) { + const proj = data.projects?.find(p => p.id === n.projectId); + if (proj?.clientId) return (data.persons||[]).filter(p=>p.isAuftraggeber).find(c => c.id === proj.clientId)?.name || "—"; + } + return "—"; + }; + + const getProject = (n) => { + if (!n.projectId) return null; + return data.projects?.find(p => p.id === n.projectId)?.name || null; + }; + + const SectionCard = ({ title, count, action, onAction, children, accent }) => ( +

+ {title} + {count > 0 && ( + {count} + )} +

+ +

+ {children} +

+ ); + + return ( +

+ + {/* KPI-Zeile */} +

+ {[ + { label: "Protokolle", count: protocols.length, sub: `${recentProtos.length > 0 ? formatDate(recentProtos[0]?.date) : "—"} zuletzt`, view: "protokolle", color: "#2d6a4f", bg: "#e8f5ee" }, + { label: "Lieferscheine", count: deliveryNotes.length, sub: `${recentNotes.length > 0 ? formatDate(recentNotes[0]?.date) : "—"} zuletzt`, view: "lieferscheine", color: "#1a4e8a", bg: "#e8f0fa" }, + { label: "Briefvorlagen", count: letterTemplates.length, sub: "Vorlagen", view: "letters", color: "#7a3e8a", bg: "#f3eafa" }, + ].map(({ label, count, sub, view: v, color, bg }) => ( +

setView(v)}> +

{label.toUpperCase()}

{count}

{sub}

+ → Öffnen +

+ ))} +

+ +

+ + {/* Linke Spalte */} +

+ {/* Letzte Protokolle */} + setView("protokolle")} accent="#e8f5ee"> + {recentProtos.length === 0 ? ( +

Noch keine Protokolle erfasst.

+ ) : ( + + + + + + + + + + + + {recentProtos.map(p => { + const proj = getProject(p); + return ( + + + + + + + + ); + })} + +

Datum	Typ	Titel	Projekt	Einträge
{formatDate(p.date)}	+ {p.type \|\| "—"} +	{p.title \|\| —}	{proj \|\| —}	{(p.entries \|\| []).length}

+ )} + + + {/* Letzte Lieferscheine */} + setView("lieferscheine")} accent="#e8f0fa"> + {recentNotes.length === 0 ? ( +

Noch keine Lieferscheine erfasst.

+ ) : ( + + + + + + + + + + + + {recentNotes.map(n => ( + + + + + + + + ))} + +

Nr.	Datum	Kunde	Projekt	Positionen
{n.number \|\| "—"}	{formatDate(n.date)}	{getClient(n)}	{getProject(n) \|\| —}	{(n.items \|\| []).length}

+ )} + +

+ + {/* Rechte Spalte */} +

+ {/* Protokoll-Typen */} + {protoByType.length > 0 && ( +

PROTOKOLLE NACH TYP

+ {protoByType.map(({ type, count }) => { + const pct = (count / maxTypeCount) * 100; + return ( +

+ {type} + {count} +

+ ); + })} +

+ )} + + {/* Briefvorlagen */} +

0 ? "1px solid #ece8e2" : "none" }}> + BRIEFVORLAGEN + +

+ {letterTemplates.length === 0 ? ( +

Noch keine Briefvorlagen erstellt.

+ ) : ( +

+ {letterTemplates.map(t => ( +

+ {t.name || "Unbenannt"} + + {t.body ? `${t.body.replace(/<[^>]+>/g, "").slice(0, 40)}…` : "—"} + +

+ ))} +

+ )} +

+ ); +} diff --git a/src/views/Invoices.jsx b/src/views/Invoices.jsx new file mode 100755 index 0000000..7996700 --- /dev/null +++ b/src/views/Invoices.jsx @@ -0,0 +1,1467 @@ +import React, { useState, useEffect } from "react"; +import { SIA_PHASES } from "../constants.js"; +import { generateId, formatCHF, formatDate, formatHours, roundCHF, isQRIban, generateQRReference, formatReference } from "../utils.js"; +import { Header, Modal, FormField, StatusBadge, StatusSelect, useConfirm , DateInput } from "../components/UI.jsx"; +import { MahnModal } from "./Protokolle.jsx"; + +export default +function Invoices({ data, update, saveAll, modal, setModal, setPrintContent, setView }) { + const invoices = data.invoices || []; + const clients = (data.persons || []).filter(p => p.isAuftraggeber); + const [form, setForm] = useState({ number: "", clientId: "", contactId: "", projectId: "", date: new Date().toISOString().slice(0, 10), dueDate: "", items: [{ id: generateId(), desc: "", qty: 1, price: 0 }], mwst: true, notes: "", status: "entwurf" }); + const [filter, setFilter] = useState(() => { const cid = window.__navClientId || ""; window.__navClientId = null; return { status: "", clientId: cid, year: "", search: "" }; }); + const [groupBy, setGroupBy] = useState("date"); + const [sort, setSort] = useState({ col: "date", dir: -1 }); + const toggleSort = (col) => setSort(s => ({ col, dir: s.col === col ? -s.dir : -1 })); + const SortTh = ({ col, children, style }) => ( + toggleSort(col)} style={{ cursor: "pointer", userSelect: "none", whiteSpace: "nowrap", ...style }}> + {children} {sort.col === col ? (sort.dir === 1 ? "▲" : "▼") : "⇅"} + + ); + + const nextNumber = () => { + const fmt = data.settings.invoiceNumberFormat || "YYYY-NNN"; + const now = new Date(); + const yyyy = String(now.getFullYear()); + const yy = yyyy.slice(2); + // Build regex to extract the sequence number from existing invoice numbers + const pattern = fmt + .replace(/[-/\^$*+?.()|[\]{}]/g, "\\$&") + .replace(/YYYY/g, yyyy).replace(/YY/g, yy) + .replace(/N+/, "(\\d+)"); + const rx = new RegExp("^" + pattern + "$"); + const nums = invoices.map(i => { + const m = (i.number || "").match(rx); + return m ? parseInt(m[1]) : null; + }).filter(n => n !== null); + const nextSeq = nums.length ? Math.max(...nums) + 1 : 1; + const padLen = (fmt.match(/N+/) || ["NNN"])[0].length; + return fmt + .replace(/YYYY/g, yyyy).replace(/YY/g, yy) + .replace(/N+/, String(nextSeq).padStart(padLen, "0")); + }; + + const openNew = () => { + const due = new Date(); due.setDate(due.getDate() + 30); + setForm({ number: nextNumber(), clientId: "", projectId: "", date: new Date().toISOString().slice(0, 10), dueDate: due.toISOString().slice(0, 10), items: [{ id: generateId(), desc: "", qty: 1, price: 0 }], mwst: true, mwstRate: data.settings.mwstRate, notes: "Zahlbar innert 30 Tagen netto.", status: "entwurf" }); + setModal({ type: "invoice" }); + }; + + const editingId = modal?.id || null; + + const calcTotal = (items, mwst, rate, discountType, discountValue) => { + const sub = (items || []).reduce((s, i) => { + const line = i.qty * i.price; + const disc = (i.discount || 0) > 0 ? line * ((i.discount || 0) / 100) : 0; + return s + line - disc; + }, 0); + const globalDisc = discountType === "percent" ? sub * ((discountValue || 0) / 100) + : discountType === "amount" ? (discountValue || 0) : 0; + const subAfterDisc = sub - globalDisc; + const tax = mwst ? subAfterDisc * (rate / 100) : 0; + const total = roundCHF(subAfterDisc + tax); + return { sub, globalDisc, subAfterDisc, tax, total }; + }; + + const calcLineTotal = (item) => { + const line = (item.qty || 0) * (item.price || 0); + return line * (1 - ((item.discount || 0) / 100)); + }; + + // Offene Zeiteinträge + die bereits zu dieser Rechnung gehören (beim Bearbeiten) + const openEntriesForProject = (projectId) => { + if (!projectId) return []; + return data.timeEntries + .filter(e => e.projectId === projectId && (!e.invoiceId || e.invoiceId === editingId)) + .sort((a, b) => (a.date || "").localeCompare(b.date || "")); + }; + + const [sendModal, setSendModal] = useState(null); + const [newInvModal, setNewInvModal] = useState(false); + const [ni, setNi] = useState({ tab: "projekt", projectId: "", quoteId: "", mode: "teilrechnung", pct: 30, amt: 0, phaseId: "" }); + + useEffect(() => { + if (modal?.type === "newInvoice" && modal.quoteId) { + setNi({ tab: "offerte", quoteId: modal.quoteId, mode: "schluss", pct: 30, amt: 0 }); + setNewInvModal(true); + setModal(null); + } + }, [modal?.type, modal?.quoteId]); + + // ── Akonto-Planer ────────────────────────────────────────────── + const defaultStartDate = () => { + const d = new Date(); d.setDate(1); d.setMonth(d.getMonth() + 1); + return d.toISOString().slice(0, 10); + }; + const emptyAp = { projectId: "", clientId: "", totalAmt: 0, mode: "interval", intervalMonths: 4, count: 4, startDate: defaultStartDate(), manualRows: [] }; + const [akontoModal, setAkontoModal] = useState(false); + const [ap, setAp] = useState(emptyAp); + + const apRows = (() => { + if (ap.mode === "interval") { + const start = new Date(ap.startDate || new Date()); + const perInv = ap.count > 0 ? Math.round((ap.totalAmt / ap.count) * 100) / 100 : 0; + return Array.from({ length: Math.max(1, Math.min(ap.count, 24)) }, (_, i) => { + const d = new Date(start); + d.setMonth(d.getMonth() + i * (ap.intervalMonths || 1)); + return { id: String(i), date: d.toISOString().slice(0, 10), amt: perInv }; + }); + } + return ap.manualRows; + })(); + + const generateSequentialNumbers = (count) => { + const fmt = data.settings.invoiceNumberFormat || "YYYY-NNN"; + const now = new Date(); + const yyyy = String(now.getFullYear()); const yy = yyyy.slice(2); + const escaped = fmt.replace(/[-/\^$*+?.()|[\]{}]/g, "\\$&").replace(/YYYY/g, yyyy).replace(/YY/g, yy).replace(/N+/, "(\\d+)"); + const rx = new RegExp("^" + escaped + "$"); + const nums = invoices.map(i => { const m = (i.number || "").match(rx); return m ? parseInt(m[1]) : null; }).filter(n => n !== null); + let nextSeq = nums.length ? Math.max(...nums) + 1 : 1; + const padLen = (fmt.match(/N+/) || ["NNN"])[0].length; + return Array.from({ length: count }, () => { + const n = fmt.replace(/YYYY/g, yyyy).replace(/YY/g, yy).replace(/N+/, String(nextSeq).padStart(padLen, "0")); + nextSeq++; + return n; + }); + }; + + const createAkontoInvoices = () => { + const rows = apRows.filter(r => r.date && r.amt > 0); + if (rows.length === 0) return; + const proj = data.projects.find(p => p.id === ap.projectId); + const numbers = generateSequentialNumbers(rows.length); + const newInvoices = rows.map((row, i) => { + const due = new Date(row.date); due.setDate(due.getDate() + 30); + const { sub, tax, total, subAfterDisc, globalDisc } = calcTotal( + [{ id: generateId(), desc: `Akontorechnung – ${proj?.name || ""}`, qty: 1, price: row.amt, discount: 0 }], + true, data.settings.mwstRate, "none", 0 + ); + return { + id: generateId(), number: numbers[i], date: row.date, + dueDate: due.toISOString().slice(0, 10), + clientId: ap.clientId || proj?.clientId || "", + projectId: ap.projectId, invoiceKind: "akonto", + items: [{ id: generateId(), desc: `Akontorechnung – ${proj?.name || ""}`, qty: 1, price: row.amt, discount: 0 }], + mwst: true, mwstRate: data.settings.mwstRate, + notes: "Zahlbar innert 30 Tagen netto.", + status: "entwurf", discountType: "none", discountValue: 0, + sub, tax, total, subAfterDisc, globalDisc, + createdAt: new Date().toISOString(), + }; + }); + update("invoices", [...invoices, ...newInvoices]); + setAkontoModal(false); + setAp(emptyAp); + }; + + const confirmNewInvoice = () => { + const todayStr = new Date().toISOString().slice(0, 10); + const due = new Date(); due.setDate(due.getDate() + 30); + const base = { + number: nextNumber(), date: todayStr, dueDate: due.toISOString().slice(0, 10), + mwst: true, mwstRate: data.settings.mwstRate, + notes: "Zahlbar innert 30 Tagen netto.", status: "entwurf", + discountType: "none", discountValue: 0, discountLabel: "Rabatt", + }; + + if (ni.tab === "frei") { + setForm({ ...base, clientId: "", projectId: "", entrySelections: {}, items: [{ id: generateId(), desc: "", qty: 1, price: 0, discount: 0 }] }); + } else if (ni.tab === "projekt") { + const proj = data.projects.find(p => p.id === ni.projectId); + if (!proj) return; + const bType = proj.billingType || proj.type; + const projBudget = proj.budget || proj.budgetAmount || 0; + if (ni.mode === "teilrechnung") { + const entries = openEntriesForProject(proj.id); + const entrySelections = {}; + entries.forEach(e => { entrySelections[e.id] = { selected: true, billedMinutes: e.minutes }; }); + const hours = Math.round(entries.reduce((s, e) => s + e.minutes, 0) / 60 * 100) / 100; + setForm({ ...base, clientId: proj.clientId || "", projectId: proj.id, entrySelections, invoiceKind: "teilrechnung", + items: [{ id: generateId(), desc: `Teilrechnung – Architektur-/Grafikleistungen – ${proj.name}`, qty: hours, price: proj.hourlyRate || 0, discount: 0 }] }); + } else if (ni.mode === "teilrechnung-percent") { + const amt = projBudget * (ni.pct / 100); + setForm({ ...base, clientId: proj.clientId || "", projectId: proj.id, entrySelections: {}, invoiceKind: "teilrechnung", + items: [{ id: generateId(), desc: `Teilrechnung – ${proj.name} (${ni.pct.toFixed(1)}%)`, qty: 1, price: Math.round(amt * 100) / 100, discount: 0 }] }); + } else if (ni.mode === "teilrechnung-amount") { + setForm({ ...base, clientId: proj.clientId || "", projectId: proj.id, entrySelections: {}, invoiceKind: "teilrechnung", + items: [{ id: generateId(), desc: `Teilrechnung – ${proj.name}`, qty: 1, price: ni.amt, discount: 0 }] }); + } else if (ni.mode === "akonto-percent") { + const amt = projBudget * (ni.pct / 100); + setForm({ ...base, clientId: proj.clientId || "", projectId: proj.id, entrySelections: {}, invoiceKind: "akonto", + items: [{ id: generateId(), desc: `Akontorechnung – ${proj.name} (${ni.pct.toFixed(1)}%)`, qty: 1, price: Math.round(amt * 100) / 100, discount: 0 }] }); + } else if (ni.mode === "akonto-amount") { + setForm({ ...base, clientId: proj.clientId || "", projectId: proj.id, entrySelections: {}, invoiceKind: "akonto", + items: [{ id: generateId(), desc: `Akontorechnung – ${proj.name}`, qty: 1, price: ni.amt, discount: 0 }] }); + } else if (ni.mode === "akonto-stunden") { + const entries = openEntriesForProject(proj.id).filter(e => (e.date || "") <= todayStr); + const entrySelections = {}; + entries.forEach(e => { entrySelections[e.id] = { selected: true, billedMinutes: e.minutes }; }); + const hours = Math.round(entries.reduce((s, e) => s + e.minutes, 0) / 60 * 100) / 100; + setForm({ ...base, clientId: proj.clientId || "", projectId: proj.id, entrySelections, invoiceKind: "akonto", + items: [{ id: generateId(), desc: `Akontorechnung – ${proj.name}`, qty: hours, price: proj.hourlyRate || 0, discount: 0 }] }); + } else if (ni.mode === "phase") { + const ph = (proj.phasesBudget || []).find(p => p.id === ni.phaseId); + const phInfo = SIA_PHASES.find(p => p.id === ni.phaseId); + const amt = Math.round((ph?.hours || 0) * (proj.hourlyRate || 0) * 100) / 100; + setForm({ ...base, clientId: proj.clientId || "", projectId: proj.id, entrySelections: {}, invoiceKind: "teilrechnung", + items: [{ id: generateId(), desc: `Teilrechnung ${phInfo?.label || ni.phaseId} – ${proj.name}`, qty: 1, price: amt, discount: 0 }] }); + } else if (ni.mode === "akonto-phase") { + const ph = (proj.phasesBudget || []).find(p => p.id === ni.phaseId); + const phInfo = SIA_PHASES.find(p => p.id === ni.phaseId); + const amt = Math.round((ph?.hours || 0) * (proj.hourlyRate || 0) * 100) / 100; + setForm({ ...base, clientId: proj.clientId || "", projectId: proj.id, entrySelections: {}, invoiceKind: "akonto", + items: [{ id: generateId(), desc: `Akontorechnung ${phInfo?.label || ni.phaseId} – ${proj.name}`, qty: 1, price: amt, discount: 0 }] }); + } else { + // schluss + if (bType === "stundensatz") { + const entries = openEntriesForProject(proj.id).filter(e => (e.date || "") <= todayStr); + const entrySelections = {}; + entries.forEach(e => { entrySelections[e.id] = { selected: true, billedMinutes: e.minutes }; }); + const hours = Math.round(entries.reduce((s, e) => s + e.minutes, 0) / 60 * 100) / 100; + setForm({ ...base, clientId: proj.clientId || "", projectId: proj.id, entrySelections, invoiceKind: "schluss", + items: [{ id: generateId(), desc: `Schlussrechnung – ${proj.name}`, qty: hours, price: proj.hourlyRate || 0, discount: 0 }] }); + } else { + // Pauschal-Schluss: Gesamthonorar ausweisen, bisherige Akontozahlungen abziehen + const akontoInvs = invoices.filter(i => i.projectId === proj.id && i.invoiceKind === "akonto" && i.status !== "entwurf"); + const akontoTotal = akontoInvs.reduce((s, i) => s + (i.subAfterDisc ?? i.sub ?? 0), 0); + const schlussItems = [ + { id: generateId(), desc: `Pauschalhonorar – ${proj.name}`, qty: 1, price: projBudget, discount: 0 }, + ...(akontoTotal > 0 ? [{ id: generateId(), desc: `Abzgl. geleistete Akontozahlungen (${akontoInvs.map(i => i.number).filter(Boolean).join(", ")})`, qty: 1, price: -akontoTotal, discount: 0 }] : []), + ]; + const notes = akontoTotal > 0 + ? `Schlussrechnung gemäss Honorarvereinbarung.\nBisherige Akontozahlungen:\n${akontoInvs.map(i => ` – ${i.number}: CHF ${(i.subAfterDisc ?? i.sub ?? 0).toFixed(2)}`).join("\n")}\n\nZahlbar innert 30 Tagen netto.` + : "Zahlbar innert 30 Tagen netto."; + setForm({ ...base, clientId: proj.clientId || "", projectId: proj.id, entrySelections: {}, invoiceKind: "schluss", items: schlussItems, notes }); + } + } + } else if (ni.tab === "offerte") { + const q = (data.quotes || []).find(x => x.id === ni.quoteId); + if (!q) return; + const existing = (invoices).filter(i => i.quoteId === q.id); + const totalInvoiced = existing.reduce((s, i) => s + (i.sub || 0), 0); + const remaining = Math.max(0, (q.sub || 0) - totalInvoiced); + let items = [], invoiceKind = "akonto"; + if (ni.mode === "schluss") { + invoiceKind = "schluss"; + const akontoInvs = existing.filter(i => i.invoiceKind === "akonto" && i.status !== "entwurf"); + const akontoTotal = akontoInvs.reduce((s, i) => s + (i.subAfterDisc ?? i.sub ?? 0), 0); + items = [ + { id: generateId(), desc: `Honorar gemäss Offerte ${q.number}`, qty: 1, price: q.sub || 0, discount: 0 }, + ...(akontoTotal > 0 ? [{ id: generateId(), desc: `Abzgl. geleistete Akontozahlungen (${akontoInvs.map(i => i.number).filter(Boolean).join(", ")})`, qty: 1, price: -akontoTotal, discount: 0 }] : []), + ]; + } else if (ni.mode === "teilrechnung-percent") { + invoiceKind = "teilrechnung"; + const amt = (q.sub || 0) * (ni.pct / 100); + items = [{ id: generateId(), desc: `Teilrechnung gemäss Offerte ${q.number} (${ni.pct.toFixed(1)}%)`, qty: 1, price: Math.round(amt * 100) / 100, discount: 0 }]; + } else if (ni.mode === "teilrechnung-amount") { + invoiceKind = "teilrechnung"; + items = [{ id: generateId(), desc: `Teilrechnung gemäss Offerte ${q.number}`, qty: 1, price: ni.amt, discount: 0 }]; + } else if (ni.mode === "akonto-percent") { + const amt = (q.sub || 0) * (ni.pct / 100); + items = [{ id: generateId(), desc: `Akontorechnung gemäss Offerte ${q.number} (${ni.pct.toFixed(1)}%)`, qty: 1, price: Math.round(amt * 100) / 100, discount: 0 }]; + } else { + items = [{ id: generateId(), desc: `Akontorechnung gemäss Offerte ${q.number}`, qty: 1, price: ni.amt, discount: 0 }]; + } + let notes = `Gemäss Offerte ${q.number}. Zahlbar innert 30 Tagen netto.`; + if (invoiceKind === "schluss" && existing.filter(i => i.invoiceKind === "akonto").length > 0) { + const akontoInvs = existing.filter(i => i.invoiceKind === "akonto" && i.status !== "entwurf"); + notes = `Schlussrechnung gemäss Offerte ${q.number}.\nBisherige Akontozahlungen:\n${akontoInvs.map(i => ` – ${i.number}: CHF ${(i.subAfterDisc ?? i.sub ?? 0).toFixed(2)}`).join("\n")}\n\nZahlbar innert 30 Tagen netto.`; + } + setForm({ ...base, clientId: q.clientId || "", projectId: q.projectId || "", quoteId: q.id, entrySelections: {}, invoiceKind, items, notes }); + } + setNewInvModal(false); + setModal({ type: "invoice" }); + }; + + const save = (statusOverride) => { + if (!form.clientId) { + alert("Bitte einen Kunden auswählen."); + return; + } + const { sub, globalDisc, subAfterDisc, tax, total } = calcTotal(form.items, form.mwst, form.mwstRate ?? data.settings.mwstRate, form.discountType, form.discountValue); + const invoiceId = editingId || generateId(); + const status = statusOverride || form.status || "entwurf"; + const inv = { ...form, id: invoiceId, sub, globalDisc, subAfterDisc, tax, total, mwstRate: form.mwstRate ?? data.settings.mwstRate, status }; + delete inv.entrySelections; + + const selectedIds = Object.entries(form.entrySelections || {}) + .filter(([_, sel]) => sel.selected) + .map(([id]) => id); + + const updatedEntries = data.timeEntries.map(e => { + if (e.invoiceId === editingId) { + return selectedIds.includes(e.id) ? { ...e, invoiceId } : { ...e, invoiceId: null }; + } + if (selectedIds.includes(e.id)) return { ...e, invoiceId }; + return e; + }); + + const updatedInvoices = editingId + ? invoices.map(i => i.id === editingId ? { ...i, ...inv } : i) + : [...invoices, { ...inv, createdAt: new Date().toISOString() }]; + + saveAll({ ...data, invoices: updatedInvoices, timeEntries: updatedEntries }); + setModal(null); + if (!editingId && !statusOverride) setSendModal(inv); + }; + + const openEdit = (inv) => { + const linked = data.timeEntries.filter(e => e.invoiceId === inv.id); + const entrySelections = {}; + linked.forEach(e => { entrySelections[e.id] = { selected: true, billedMinutes: e.minutes }; }); + setForm({ + discountType: "none", discountValue: 0, discountLabel: "Rabatt", + ...inv, + items: (inv.items || []).map(it => ({ discount: 0, ...it })), + entrySelections, + }); + setModal({ type: "invoice", id: inv.id }); + }; + + const del = async (id) => { + if (!(await askConfirm("Rechnung löschen? Zugehörige Zeiteinträge werden wieder als offen markiert."))) return; + const updatedEntries = data.timeEntries.map(e => e.invoiceId === id ? { ...e, invoiceId: null } : e); + saveAll({ ...data, invoices: invoices.filter(i => i.id !== id), timeEntries: updatedEntries }); + }; + const setStatus = (id, status) => update("invoices", invoices.map(i => i.id === id ? { ...i, status } : i)); + + const addItem = () => setForm({ ...form, items: [...form.items, { id: generateId(), desc: "", qty: 1, price: 0, discount: 0 }] }); + const removeItem = (idx) => setForm({ ...form, items: form.items.filter((_, i) => i !== idx) }); + const updateItem = (idx, key, val) => setForm({ ...form, items: form.items.map((it, i) => i === idx ? { ...it, [key]: val } : it) }); + const [openDropdown, setOpenDropdown] = useState(null); + const [dropdownData, setDropdownData] = useState(null); + const [mahnModal, setMahnModal] = useState(null); + const [mahnMode, setMahnMode] = useState("new"); + const [mahnSentDate, setMahnSentDate] = useState(new Date().toISOString().slice(0, 10)); + const { askConfirm, ConfirmModalEl } = useConfirm(); + + const openMahnung = (inv) => { + setMahnMode((inv.reminders || []).length === 0 ? "new" : "reprint-0"); + setMahnSentDate(new Date().toISOString().slice(0, 10)); + setMahnModal({ inv }); + }; + + const toggleEntrySelection = (entryId, entry) => { + const current = form.entrySelections?.[entryId]; + const newSelections = { ...form.entrySelections }; + if (current?.selected) { + newSelections[entryId] = { ...current, selected: false }; + } else { + newSelections[entryId] = { selected: true, billedMinutes: current?.billedMinutes ?? entry.minutes }; + } + setForm(f => ({ ...f, entrySelections: newSelections })); + }; + + const updateBilledMinutes = (entryId, minutes) => { + const newSelections = { ...form.entrySelections }; + newSelections[entryId] = { ...(newSelections[entryId] || { selected: true }), billedMinutes: Math.max(0, minutes) }; + setForm(f => ({ ...f, entrySelections: newSelections })); + }; + + const prefillFromProject = (projectId) => { + if (!projectId) { setForm(f => ({ ...f, projectId: "", entrySelections: {} })); return; } + const proj = data.projects.find(p => p.id === projectId); + if (!proj) return; + const bType = proj.billingType || proj.type; + const openEntries = openEntriesForProject(projectId); + if (bType === "stundensatz") { + const entrySelections = {}; + openEntries.forEach(e => { entrySelections[e.id] = { selected: true, billedMinutes: e.minutes }; }); + const totalMins = openEntries.reduce((s, e) => s + e.minutes, 0); + const hours = Math.round(totalMins / 60 * 100) / 100; + setForm(f => ({ + ...f, projectId, clientId: proj.clientId || f.clientId, entrySelections, + items: hours > 0 + ? [{ id: generateId(), desc: `Architektur-/Grafikleistungen – ${proj.name}`, qty: hours, price: proj.hourlyRate, discount: 0 }] + : [{ id: generateId(), desc: "", qty: 1, price: 0, discount: 0 }] + })); + } else if (bType === "pauschal") { + setForm(f => ({ ...f, projectId, clientId: proj.clientId || f.clientId, entrySelections: {}, + items: [{ id: generateId(), desc: `Pauschalhonorar – ${proj.name}`, qty: 1, price: proj.budget, discount: 0 }] })); + } else { + setForm(f => ({ ...f, projectId, clientId: proj.clientId || f.clientId, entrySelections: {} })); + } + }; + + useEffect(() => { + if (!openDropdown) return; + const close = () => { setOpenDropdown(null); setDropdownData(null); }; + document.addEventListener("click", close); + return () => document.removeEventListener("click", close); + }, [openDropdown]); + + useEffect(() => { + if (!form.projectId) return; + const proj = data.projects.find(p => p.id === form.projectId); + if (!proj || (proj.billingType || proj.type) !== "stundensatz") return; + const totalBilledMins = Object.values(form.entrySelections || {}) + .filter(s => s.selected) + .reduce((sum, s) => sum + (s.billedMinutes || 0), 0); + const hours = Math.round(totalBilledMins / 60 * 100) / 100; + setForm(f => { + const existing = f.items[0] || {}; + if (existing.qty === hours && existing.price === proj.hourlyRate) return f; + const newItems = [...f.items]; + newItems[0] = { id: existing.id || generateId(), desc: existing.desc || `Architektur-/Grafikleistungen – ${proj.name}`, qty: hours, price: proj.hourlyRate, discount: existing.discount || 0 }; + return { ...f, items: newItems }; + }); + // eslint-disable-next-line react-hooks/exhaustive-deps + }, [form.entrySelections, form.projectId]); + + const { sub, globalDisc, subAfterDisc, tax, total } = calcTotal(form.items, form.mwst, form.mwstRate ?? data.settings.mwstRate, form.discountType, form.discountValue); + + // Verfügbare Jahre aus Rechnungen sammeln + const availableYears = Array.from(new Set(invoices.map(i => (i.date || "").slice(0, 4)).filter(Boolean))).sort().reverse(); + + // Filter-Matching + const matchesFilter = (inv) => { + if (filter.status && inv.status !== filter.status) return false; + if (filter.clientId && inv.clientId !== filter.clientId) return false; + if (filter.year && !(inv.date || "").startsWith(filter.year)) return false; + if (filter.search) { + const q = filter.search.toLowerCase(); + const client = clients.find(c => c.id === inv.clientId); + const haystack = [ + inv.number, + client?.name, + client?.company, + inv.notes, + ...(inv.items || []).map(it => it.desc) + ].filter(Boolean).join(" ").toLowerCase(); + if (!haystack.includes(q)) return false; + } + return true; + }; + + const filtered = [...invoices].filter(matchesFilter).sort((a, b) => { + let va, vb; + if (sort.col === "number") { va = a.number || ""; vb = b.number || ""; } + else if (sort.col === "date") { va = a.date || ""; vb = b.date || ""; } + else if (sort.col === "dueDate") { va = a.dueDate || ""; vb = b.dueDate || ""; } + else if (sort.col === "client") { va = clients.find(c => c.id === a.clientId)?.name || ""; vb = clients.find(c => c.id === b.clientId)?.name || ""; } + else if (sort.col === "total") { va = a.total || 0; vb = b.total || 0; } + else if (sort.col === "status") { va = a.status || ""; vb = b.status || ""; } + else { va = a.date || ""; vb = b.date || ""; } + return typeof va === "number" ? (va - vb) * sort.dir : va.localeCompare(vb) * sort.dir; + }); + const filteredTotal = filtered.reduce((s, i) => s + (i.total || 0), 0); + const filteredOpen = filtered.filter(i => i.status === "gesendet" || i.status === "überfällig").reduce((s, i) => s + (i.total || 0), 0); + const filteredOverdue = filtered.filter(i => i.status === "überfällig").reduce((s, i) => s + (i.total || 0), 0); + const filteredPaid = filtered.filter(i => i.status === "bezahlt").reduce((s, i) => s + (i.total || 0), 0); + + // Unverrechnete Stunden über alle aktiven Stundensatz-Projekte (global) + const unbilledProjects = data.projects + .filter(p => (p.billingType || p.type) === "stundensatz" && p.status === "aktiv") + .map(p => { + const mins = data.timeEntries.filter(e => e.projectId === p.id && !e.invoiceId).reduce((s, e) => s + (e.minutes || 0), 0); + const amount = (mins / 60) * (p.hourlyRate || 0); + return { ...p, mins, amount }; + }) + .filter(p => p.mins > 0) + .sort((a, b) => b.mins - a.mins); + const totalUnbilledMins = unbilledProjects.reduce((s, p) => s + p.mins, 0); + const totalUnbilledAmount = unbilledProjects.reduce((s, p) => s + p.amount, 0); + + // Gruppieren + const groupedInvoices = (() => { + if (groupBy === "date") { + const months = {}; + filtered.forEach(inv => { + const key = (inv.date || "").slice(0, 7); + if (!months[key]) months[key] = []; + months[key].push(inv); + }); + return Object.entries(months).sort((a, b) => b[0].localeCompare(a[0])).map(([key, items]) => ({ + key, label: key ? new Date(key + "-01").toLocaleDateString("de-CH", { month: "long", year: "numeric" }) : "Ohne Datum", items, + })); + } + if (groupBy === "client") { + const clients = {}; + filtered.forEach(inv => { + const cl = clients.find(c => c.id === inv.clientId); + const key = inv.clientId || "__none__"; + const label = cl?.name || "Kein Kunde"; + if (!clients[key]) clients[key] = { label, items: [] }; + clients[key].items.push(inv); + }); + return Object.entries(clients).sort((a, b) => a[1].label.localeCompare(b[1].label)).map(([key, val]) => ({ key, label: val.label, items: val.items })); + } + if (groupBy === "status") { + const statuses = {}; + filtered.forEach(inv => { + const key = inv.status || "unbekannt"; + if (!statuses[key]) statuses[key] = []; + statuses[key].push(inv); + }); + return Object.entries(statuses).sort((a, b) => a[0].localeCompare(b[0])).map(([key, items]) => ({ key, label: key.charAt(0).toUpperCase() + key.slice(1), items })); + } + return [{ key: "all", label: "", items: filtered }]; + })(); + + return ( +

+ {ConfirmModalEl} +

+ +

+ + +

+ } /> + + {/* KPI-Cards */} +

BEZAHLT

{formatCHF(filteredPaid)}

{filtered.filter(i => i.status === "bezahlt").length} Rechnung(en)

0 ? "3px solid #8a1a1a" : "3px solid #7a6a00" }}> +

AUSSTEHEND

0 ? "#8a1a1a" : "#7a6a00" }}>{formatCHF(filteredOpen)}

+ {filteredOverdue > 0 ? davon {formatCHF(filteredOverdue)} überfällig : `${filtered.filter(i => i.status === "gesendet" || i.status === "überfällig").length} Rechnung(en)`} +

0 ? "3px solid #b5621e" : "3px solid #aaa" }}> +

UNVERRECHNETE STUNDEN

0 ? "#b5621e" : "#aaa" }}>{formatHours(totalUnbilledMins)}

{totalUnbilledAmount > 0 ? `≈ ${formatCHF(totalUnbilledAmount)}` : "Alle verrechnet ✓"}

PROJEKTE MIT PENDENZEN

+ {unbilledProjects.length === 0 ? ( +

Keine offenen Stunden

+ ) : ( + <> +

{unbilledProjects.length} Projekt{unbilledProjects.length !== 1 ? "e" : ""}

+ {unbilledProjects.slice(0, 4).map(p => ( +

+ {p.name} + {formatHours(p.mins)} +

+ ))} + + )} +

+ +

+ setFilter({ ...filter, search: e.target.value })} style={{ minWidth: 220 }} /> + + + + {(filter.status || filter.clientId || filter.year || filter.search) && ( + + )} +

+ +

+ GRUPPIEREN: + {[{ id: "none", label: "Keine" }, { id: "date", label: "Monat" }, { id: "client", label: "Kunde" }, { id: "status", label: "Status" }].map(g => ( + + ))} +

{filtered.length} {filtered.length === 1 ? "Rechnung" : "Rechnungen"} · {formatCHF(filteredTotal)}

+ {filteredOpen > 0 &&

davon offen: {formatCHF(filteredOpen)}

} +

+ +

+ + Nr.KundeDatumFälligBetragStatus + + {filtered.length === 0 && } + {groupedInvoices.map(group => ( + + {groupBy !== "none" && group.label && ( + + + + )} + {group.items.map(inv => { + const client = clients.find(c => c.id === inv.clientId); + const kindLabel = inv.invoiceKind === "akonto" ? "Akonto" : inv.invoiceKind === "teilrechnung" ? "Teilrechnung" : inv.invoiceKind === "schluss" ? "Schluss" : inv.invoiceKind === "voll" ? "Vollrechnung" : "—"; + const kindColor = inv.invoiceKind === "akonto" ? "#7a6a00" : inv.invoiceKind === "teilrechnung" ? "#2d5a8e" : inv.invoiceKind === "schluss" ? "#1a4e8a" : "transparent"; + return ( + + + + + + + + + + + ); + })} + + ))} + +

Art
{invoices.length === 0 ? "Noch keine Rechnungen" : "Keine Treffer"}
+ {group.label} + + {group.items.length} · {formatCHF(group.items.reduce((s, i) => s + (i.total \|\| 0), 0))} + +
+ {inv.number} + {(inv.reminders \|\| []).length > 0 && ( + + {(inv.reminders \|\| []).length === 1 ? "Erinnerung" : `${(inv.reminders \|\| []).length}× Mahnung`} · {formatDate((inv.reminders \|\| []).at(-1)?.date)} + + )} +	{client?.name \|\| "—"}	+ {inv.invoiceKind && inv.invoiceKind !== "voll" + ? {kindLabel} + : —} +	{formatDate(inv.date)}	{formatDate(inv.dueDate)}	{formatCHF(inv.total)}	+ setStatus(inv.id, v)} /> +	+ {inv.status === "überfällig" && ( + + )} + + + + + + +

+ + {openDropdown && dropdownData && ( +

e.stopPropagation()} + > + {[ + { label: "Rechnung + QR", type: "invoice+qr" }, + { label: "Nur Rechnung", type: "invoice" }, + { label: "Nur QR", type: "qrbill" }, + ].map(opt => ( + + ))} +

+ )} + + {mahnModal && ( + setMahnModal(null)} + mahnMode={mahnMode} + setMahnMode={setMahnMode} + mahnSentDate={mahnSentDate} + setMahnSentDate={setMahnSentDate} + /> + )} + + {modal?.type === "invoice" && ( + setModal(null)} onSave={() => save()} wide> +

+ setForm({ ...form, number: e.target.value })} /> + setForm({ ...form, date: e.target.value })} /> + setForm({ ...form, dueDate: e.target.value })} /> +

+ + + + {form.clientId && (() => { + const cl = clients.find(c => c.id === form.clientId); + const contacts = cl?.contacts || []; + if (contacts.length === 0) return null; + return ( + + + + ); + })()} + + + +

+ + {/* Offene Zeiteinträge des Projekts */} + {(() => { + if (!form.projectId) return null; + const proj = data.projects.find(p => p.id === form.projectId); + if (!proj) return null; + const bType = proj.billingType || proj.type; + if (bType !== "stundensatz") return null; + const openEntries = openEntriesForProject(form.projectId); + if (openEntries.length === 0) return ( +

+ Keine offenen Zeiteinträge für dieses Projekt. +

+ ); + const totalErfasst = openEntries.reduce((s, e) => s + e.minutes, 0); + const totalVerrechnet = Object.entries(form.entrySelections || {}) + .filter(([id, s]) => s.selected && openEntries.some(e => e.id === id)) + .reduce((s, [_, sel]) => s + (sel.billedMinutes || 0), 0); + const diff = totalErfasst - totalVerrechnet; + const allSelected = openEntries.every(e => form.entrySelections?.[e.id]?.selected); + const toggleAll = () => { + const newSel = { ...form.entrySelections }; + if (allSelected) { + openEntries.forEach(e => { newSel[e.id] = { ...newSel[e.id], selected: false }; }); + } else { + openEntries.forEach(e => { newSel[e.id] = { selected: true, billedMinutes: newSel[e.id]?.billedMinutes ?? e.minutes }; }); + } + setForm(f => ({ ...f, entrySelections: newSel })); + }; + return ( +

+ ZEITEINTRÄGE +

+ Erfasst {formatHours(totalErfasst)} · Verrechnet {formatHours(totalVerrechnet)} + {diff > 0 && Nicht verrechnet: {formatHours(diff)}} +

+ + + + + + + + + + + + + {openEntries.map(e => { + const sel = form.entrySelections?.[e.id]; + const selected = sel?.selected; + const billedMinutes = selected ? (sel?.billedMinutes ?? e.minutes) : 0; + const hoursBilled = Math.round((billedMinutes / 60) * 100) / 100; + const phase = SIA_PHASES.find(p => p.id === e.phaseId); + const pos = (proj?.positions || []).find(p => p.code === e.positionId); + return ( + + + + + + + + + ); + })} + +

+ +	Datum	Phase	Tätigkeit	Erfasst	Verrechnet
+ toggleEntrySelection(e.id, e)} style={{ width: "auto", cursor: "pointer" }} /> +	{formatDate(e.date)}	+ {phase?.id \|\| "—"} + {pos && {pos.code}} +	{e.description \|\| "—"}	{formatHours(e.minutes)}	+ {selected ? ( + updateBilledMinutes(e.id, Math.round(+ev.target.value * 60))} + style={{ width: 70, height: 26, fontSize: 11, textAlign: "right", padding: "2px 6px" }} /> + ) : —} + {selected && h} +

+ ); + })()} + +

+ POSITIONEN + +

Beschreibung

Menge

Preis

Rabatt %

Total

+ {form.items.map((item, idx) => { + const lineTotal = calcLineTotal(item); + const hasDiscount = (item.discount || 0) > 0; + return ( +

+ updateItem(idx, "desc", e.target.value)} style={{ flex: 3 }} /> + updateItem(idx, "qty", +e.target.value)} style={{ width: 70, textAlign: "right" }} /> + updateItem(idx, "price", +e.target.value)} style={{ width: 90, textAlign: "right" }} /> + updateItem(idx, "discount", +e.target.value)} style={{ width: 60, textAlign: "right", background: hasDiscount ? "#fff8ed" : undefined }} /> +

+ {hasDiscount &&

{formatCHF(item.qty * item.price)}

} +

{formatCHF(lineTotal)}

+ +

+ ); + })} +

+ + {/* Gesamt-Rabatt */} +

+ Rabatt auf Gesamtbetrag + + {form.discountType && form.discountType !== "none" && ( + <> + setForm({ ...form, discountValue: +e.target.value })} style={{ width: 90, textAlign: "right" }} /> + setForm({ ...form, discountLabel: e.target.value })} style={{ flex: 1, minWidth: 180 }} /> + + )} +

+ +

+ + setForm({ ...form, mwst: e.target.checked })} style={{ width: "auto" }} /> + MWST ausweisen + + {form.mwst && ( +

+ setForm({ ...form, mwstRate: +e.target.value })} style={{ width: 60, fontSize: 12, height: 28 }} /> + % +

+ )} +

Zwischentotal {formatCHF(sub)}

+ {globalDisc > 0 &&

{form.discountLabel || "Rabatt"} −{formatCHF(globalDisc)}

} + {globalDisc > 0 &&

Nach Rabatt {formatCHF(subAfterDisc)}

} + {form.mwst &&

MWST {formatCHF(tax)}

} +

Total {formatCHF(total)}

+ +

setForm({ ...form, notes: e.target.value })} style={{ resize: "vertical" }} /></FormField>
+        </Modal>
+      )}
+
+      {newInvModal && (() => {
+        const todayStr = new Date().toISOString().slice(0, 10);
+        const proj = ni.tab === "projekt" ? (data.projects || []).find(p => p.id === ni.projectId) : null;
+        const bType = proj ? (proj.billingType || proj.type) : "";
+        const q = ni.tab === "offerte" ? (data.quotes || []).find(x => x.id === ni.quoteId) : null;
+
+        // Preview amount
+        let previewAmt = 0;
+        let previewKind = "";
+        if (ni.tab === "projekt" && proj) {
+          const projBudget = proj.budget || proj.budgetAmount || 0;
+          if (ni.mode === "teilrechnung") {
+            previewAmt = openEntriesForProject(proj.id).reduce((s, e) => s + e.minutes, 0) / 60 * (proj.hourlyRate || 0);
+            previewKind = "teilrechnung";
+          } else if (ni.mode === "teilrechnung-percent") {
+            previewAmt = projBudget * (ni.pct / 100);
+            previewKind = "teilrechnung";
+          } else if (ni.mode === "teilrechnung-amount") {
+            previewAmt = ni.amt;
+            previewKind = "teilrechnung";
+          } else if (ni.mode === "akonto-percent") {
+            previewAmt = projBudget * (ni.pct / 100);
+            previewKind = "akonto";
+          } else if (ni.mode === "akonto-amount") {
+            previewAmt = ni.amt;
+            previewKind = "akonto";
+          } else if (ni.mode === "akonto-stunden") {
+            previewAmt = openEntriesForProject(proj.id).filter(e => (e.date || "") <= todayStr).reduce((s, e) => s + e.minutes, 0) / 60 * (proj.hourlyRate || 0);
+            previewKind = "akonto";
+          } else if (ni.mode === "phase") {
+            const ph = (proj.phasesBudget || []).find(p => p.id === ni.phaseId);
+            previewAmt = Math.round((ph?.hours || 0) * (proj.hourlyRate || 0) * 100) / 100;
+            previewKind = "teilrechnung";
+          } else if (ni.mode === "akonto-phase") {
+            const ph = (proj.phasesBudget || []).find(p => p.id === ni.phaseId);
+            previewAmt = Math.round((ph?.hours || 0) * (proj.hourlyRate || 0) * 100) / 100;
+            previewKind = "akonto";
+          } else {
+            if (bType === "stundensatz") {
+              previewAmt = data.timeEntries.filter(e => e.projectId === proj.id && !e.invoiceId && (e.date || "") <= todayStr).reduce((s, e) => s + e.minutes, 0) / 60 * (proj.hourlyRate || 0);
+            } else {
+              const akontoInvs = invoices.filter(i => i.projectId === proj.id && i.invoiceKind === "akonto" && i.status !== "entwurf");
+              const akontoTotal = akontoInvs.reduce((s, i) => s + (i.subAfterDisc ?? i.sub ?? 0), 0);
+              previewAmt = Math.max(0, projBudget - akontoTotal);
+            }
+            previewKind = "schluss";
+          }
+        } else if (ni.tab === "offerte" && q) {
+          const alreadyInv = (invoices).filter(i => i.quoteId === q.id).reduce((s, i) => s + (i.sub || 0), 0);
+          const rem = Math.max(0, (q.sub || 0) - alreadyInv);
+          if (ni.mode === "schluss") { previewAmt = rem; previewKind = "schluss"; }
+          else if (ni.mode === "teilrechnung-percent") { previewAmt = (q.sub || 0) * (ni.pct / 100); previewKind = "teilrechnung"; }
+          else if (ni.mode === "teilrechnung-amount") { previewAmt = ni.amt; previewKind = "teilrechnung"; }
+          else if (ni.mode === "akonto-percent") { previewAmt = (q.sub || 0) * (ni.pct / 100); previewKind = "akonto"; }
+          else { previewAmt = ni.amt; previewKind = "akonto"; }
+        }
+        const previewTax = data.settings.mwstRate ? previewAmt * (data.settings.mwstRate / 100) : 0;
+        const previewTotal = roundCHF(previewAmt + previewTax);
+
+        const canConfirm = ni.tab === "frei" || (ni.tab === "projekt" && ni.projectId) || (ni.tab === "offerte" && ni.quoteId);
+
+        const NiOption = ({ id, title, desc, disabled }) => (
+          <label onClick={() => !disabled && setNi(n => ({ ...n, mode: id }))} style={{
+            display: "block", padding: "11px 13px", marginBottom: 7,
+            borderRadius: 6, border: ni.mode === id ? "2px solid #1a1a18" : "1.5px solid #ddd8d0",
+            cursor: disabled ? "not-allowed" : "pointer", opacity: disabled ? 0.4 : 1,
+            background: ni.mode === id ? "#faf8f5" : "#fff", textTransform: "none",
+          }}>
+            <div style={{ display: "flex", alignItems: "center", gap: 10 }}>
+              <div style={{ width: 16, height: 16, borderRadius: "50%", border: ni.mode === id ? "5px solid #1a1a18" : "2px solid #aaa", flexShrink: 0 }} />
+              <div>
+                <div style={{ fontSize: 13, fontWeight: 500, color: "#1a1a18" }}>{title}</div>
+                {desc && <div style={{ fontSize: 11, color: "#888", marginTop: 2 }}>{desc}</div>}
+              </div>
+            </div>
+          </label>
+        );
+
+        return (
+          <div className="modal-overlay" onClick={e => e.target === e.currentTarget && setNewInvModal(false)}>
+            <div className="modal" style={{ maxWidth: 520 }}>
+              <h2 style={{ fontFamily: "'Playfair Display', serif", fontWeight: 400, marginBottom: 16, fontSize: 22 }}>Neue Rechnung</h2>
+
+              {/* Tabs */}
+              <div style={{ display: "flex", gap: 0, marginBottom: 18, borderBottom: "1.5px solid #e0dbd4" }}>
+                {[{ id: "projekt", label: "Projekt" }, { id: "offerte", label: "Offerte" }, { id: "frei", label: "Freie Rechnung" }].map(tab => (
+                  <button key={tab.id} onClick={() => setNi(n => ({ ...n, tab: tab.id, mode: tab.id === "offerte" ? "schluss" : "teilrechnung" }))} style={{
+                    padding: "9px 18px", background: "transparent", border: "none", fontFamily: "inherit",
+                    borderBottom: ni.tab === tab.id ? "2px solid #1a1a18" : "2px solid transparent",
+                    marginBottom: -1.5, color: ni.tab === tab.id ? "#1a1a18" : "#888",
+                    fontSize: 12, fontWeight: 500, cursor: "pointer",
+                  }}>{tab.label}</button>
+                ))}
+              </div>
+
+              {ni.tab === "frei" && (
+                <p style={{ fontSize: 12, color: "#888", marginBottom: 16 }}>Leeres Formular — Positionen manuell erfassen.</p>
+              )}
+
+              {ni.tab === "projekt" && (
+                <>
+                  <div style={{ marginBottom: 14 }}>
+                    <label style={{ fontSize: 10, letterSpacing: "0.08em", color: "#888", display: "block", marginBottom: 5 }}>PROJEKT</label>
+                    <select value={ni.projectId} onChange={e => {
+                      const selProj = (data.projects || []).find(p => p.id === e.target.value);
+                      const selBType = selProj ? (selProj.billingType || selProj.type) : "";
+                      setNi(n => ({ ...n, projectId: e.target.value, mode: selBType === "stundensatz" ? "teilrechnung" : selBType === "pauschal" ? "akonto-percent" : n.mode }));
+                    }} style={!ni.projectId ? { borderColor: "#b5621e" } : {}}>
+                      <option value="">— Projekt wählen —</option>
+                      {(data.projects || []).filter(p => p.status !== "archiviert").map(p => {
+                        const bt = p.billingType || p.type;
+                        const openMins = bt === "stundensatz" ? data.timeEntries.filter(e => e.projectId === p.id && !e.invoiceId).reduce((s, e) => s + e.minutes, 0) : 0;
+                        return <option key={p.id} value={p.id}>{p.number ? `${p.number} · ` : ""}{p.name}{openMins > 0 ? ` (${formatHours(openMins)} offen)` : ""}</option>;
+                      })}
+                    </select>
+                  </div>
+                  {proj && (() => {
+                    const projBudget = proj.budget || proj.budgetAmount || 0;
+                    const hasPhaseBudget = (proj.phasesBudget || []).filter(p => p.hours > 0).length > 0;
+                    const kind = ni.mode === "schluss" ? "schluss"
+                      : (ni.mode === "akonto-percent" || ni.mode === "akonto-amount" || ni.mode === "akonto-phase" || ni.mode === "akonto-stunden") ? "akonto"
+                      : "teilrechnung";
+                    const subMode = ni.mode === "akonto-percent" || ni.mode === "teilrechnung-percent" ? "percent"
+                      : ni.mode === "akonto-amount" || ni.mode === "teilrechnung-amount" ? "amount"
+                      : ni.mode === "akonto-phase" || ni.mode === "phase" ? "phase"
+                      : "stunden";
+
+                    const KindBtn = ({ id, label, color }) => {
+                      const active = kind === id;
+                      return (
+                        <button onClick={() => {
+                          if (id === "schluss") return setNi(n => ({ ...n, mode: "schluss" }));
+                          if (id === "akonto") return setNi(n => ({ ...n, mode: bType === "stundensatz" ? "akonto-stunden" : "akonto-percent" }));
+                          setNi(n => ({ ...n, mode: bType === "stundensatz" ? "teilrechnung" : "teilrechnung-percent" }));
+                        }} style={{
+                          flex: 1, padding: "10px 8px", border: `2px solid ${active ? color : "#ddd8d0"}`,
+                          borderRadius: 8, background: active ? color : "transparent",
+                          color: active ? "#fff" : "#666", fontFamily: "inherit", fontSize: 12,
+                          fontWeight: 600, cursor: "pointer", letterSpacing: "0.03em",
+                        }}>{label}</button>
+                      );
+                    };
+
+                    const SubBtn = ({ id, label }) => {
+                      const active = subMode === id;
+                      return (
+                        <button onClick={() => setNi(n => ({ ...n, mode: kind === "akonto"
+                          ? (id === "percent" ? "akonto-percent" : id === "amount" ? "akonto-amount" : id === "phase" ? "akonto-phase" : "akonto-stunden")
+                          : (id === "percent" ? "teilrechnung-percent" : id === "amount" ? "teilrechnung-amount" : id === "phase" ? "phase" : "teilrechnung")
+                        }))} style={{
+                          padding: "5px 12px", border: `1.5px solid ${active ? "#1a1a18" : "#ddd8d0"}`,
+                          borderRadius: 20, background: active ? "#1a1a18" : "transparent",
+                          color: active ? "#f0ede8" : "#666", fontFamily: "inherit",
+                          fontSize: 11, cursor: "pointer",
+                        }}>{label}</button>
+                      );
+                    };
+
+                    const PhaseList = ({ invoiceKind }) => {
+                      const billedInvs = invoices.filter(i => i.projectId === proj.id && i.invoiceKind === invoiceKind && i.status !== "entwurf");
+                      return (
+                        <div style={{ marginTop: 10, padding: "10px 12px", background: "#faf8f5", borderRadius: 6, border: "1px solid #ece8e2" }}>
+                          {(proj.phasesBudget || []).filter(p => p.hours > 0).map(ph => {
+                            const phInfo = SIA_PHASES.find(p => p.id === ph.id);
+                            const amt = Math.round(ph.hours * (proj.hourlyRate || 0) * 100) / 100;
+                            const alreadyBilled = billedInvs.some(i => (i.items || []).some(it => (it.desc || "").includes(phInfo?.label || ph.id)));
+                            const isSelected = ni.phaseId === ph.id;
+                            return (
+                              <div key={ph.id} onClick={() => !alreadyBilled && setNi(n => ({ ...n, phaseId: ph.id }))} style={{
+                                display: "flex", alignItems: "center", gap: 10, padding: "7px 4px",
+                                borderBottom: "1px solid #ece8e2", cursor: alreadyBilled ? "not-allowed" : "pointer",
+                                opacity: alreadyBilled ? 0.4 : 1,
+                              }}>
+                                <div style={{ width: 13, height: 13, borderRadius: "50%", flexShrink: 0, border: isSelected ? `4px solid ${invoiceKind === "akonto" ? "#b07848" : "#2d5a8e"}` : "2px solid #ccc" }} />
+                                <div style={{ flex: 1 }}>
+                                  <div style={{ fontSize: 12, fontWeight: 500 }}>{phInfo?.label || ph.id}</div>
+                                  <div style={{ fontSize: 10, color: "#888" }}>{ph.hours}h × {formatCHF(proj.hourlyRate || 0)}/h = <strong>{formatCHF(amt)}</strong></div>
+                                </div>
+                                {alreadyBilled && <span style={{ fontSize: 10, color: "#2d6a4f", background: "#e8f5ee", padding: "2px 6px", borderRadius: 3 }}>✓ verrechnet</span>}
+                              </div>
+                            );
+                          })}
+                        </div>
+                      );
+                    };
+
+                    return (
+                      <>
+                        {/* Ebene 1: Art der Rechnung */}
+                        <div style={{ display: "flex", gap: 8, marginBottom: 14 }}>
+                          <KindBtn id="akonto" label="Akonto" color="#b07848" />
+                          <KindBtn id="teilrechnung" label="Teilrechnung" color="#2d5a8e" />
+                          <KindBtn id="schluss" label="Schlussrechnung" color="#1a1a18" />
+                        </div>
+
+                        {/* Ebene 2: Sub-Optionen */}
+                        {kind !== "schluss" && (
+                          <div style={{ display: "flex", gap: 6, marginBottom: 12, flexWrap: "wrap" }}>
+                            {bType === "stundensatz" && <SubBtn id="stunden" label="Stunden" />}
+                            <SubBtn id="percent" label="% vom Budget" />
+                            <SubBtn id="amount" label="Fixer Betrag" />
+                            {hasPhaseBudget && <SubBtn id="phase" label="Nach SIA-Phase" />}
+                          </div>
+                        )}
+
+                        {/* Inputs */}
+                        {kind !== "schluss" && subMode === "percent" && (
+                          <div style={{ display: "flex", alignItems: "center", gap: 10, padding: "10px 14px", background: kind === "akonto" ? "#fff8ed" : "#edf2fa", borderRadius: 6, border: `1px solid ${kind === "akonto" ? "#f0e4c4" : "#c4d4ea"}`, marginBottom: 10 }}>
+                            <input type="number" min={1} max={100} step="1" value={ni.pct} onChange={e => setNi(n => ({ ...n, pct: Math.max(0, Math.min(100, +e.target.value || 0)) }))} style={{ width: 80, textAlign: "right", background: "#fff" }} />
+                            <span style={{ fontSize: 13, color: "#666" }}>% von {formatCHF(projBudget)} = <strong>{formatCHF(projBudget * ni.pct / 100)}</strong></span>
+                          </div>
+                        )}
+                        {kind !== "schluss" && subMode === "amount" && (
+                          <div style={{ display: "flex", alignItems: "center", gap: 10, padding: "10px 14px", background: kind === "akonto" ? "#fff8ed" : "#edf2fa", borderRadius: 6, border: `1px solid ${kind === "akonto" ? "#f0e4c4" : "#c4d4ea"}`, marginBottom: 10 }}>
+                            <span style={{ fontSize: 13, color: "#666" }}>CHF</span>
+                            <input type="number" min={0} step="50" value={ni.amt} onChange={e => setNi(n => ({ ...n, amt: Math.max(0, +e.target.value || 0) }))} style={{ width: 140, textAlign: "right", background: "#fff" }} />
+                          </div>
+                        )}
+                        {kind !== "schluss" && subMode === "phase" && hasPhaseBudget && (
+                          <PhaseList invoiceKind={kind} />
+                        )}
+
+                        {/* Schluss-Info */}
+                        {kind === "schluss" && (
+                          <div style={{ padding: "10px 14px", background: "#f5f0e8", borderRadius: 6, fontSize: 12, color: "#666", marginBottom: 10 }}>
+                            {bType === "stundensatz"
+                              ? "Alle restlichen offenen Stunden bis heute."
+                              : `Gesamthonorar ${formatCHF(projBudget)} abzgl. bisherige Akonto- und Teilrechnungen.`}
+                          </div>
+                        )}
+
+                        {/* Stunden-Info */}
+                        {bType === "stundensatz" && kind !== "schluss" && subMode === "stunden" && (
+                          <div style={{ padding: "8px 14px", background: kind === "akonto" ? "#fff8ed" : "#edf2fa", borderRadius: 6, fontSize: 11, color: kind === "akonto" ? "#b07848" : "#2d5a8e", marginBottom: 10 }}>
+                            Alle offenen Stunden bis heute vorausgewählt — im nächsten Schritt einzeln ab-/anwählbar.
+                          </div>
+                        )}
+                      </>
+                    );
+                  })()}
+                </>
+              )}
+
+              {ni.tab === "offerte" && (
+                <>
+                  <div style={{ marginBottom: 14 }}>
+                    <label style={{ fontSize: 10, letterSpacing: "0.08em", color: "#888", display: "block", marginBottom: 5 }}>OFFERTE</label>
+                    <select value={ni.quoteId} onChange={e => setNi(n => ({ ...n, quoteId: e.target.value }))} style={!ni.quoteId ? { borderColor: "#b5621e" } : {}}>
+                      <option value="">— Offerte wählen —</option>
+                      {(data.quotes || []).map(x => {
+                        const alrInv = (invoices).filter(i => i.quoteId === x.id).reduce((s, i) => s + (i.sub || 0), 0);
+                        const rem = Math.max(0, (x.sub || 0) - alrInv);
+                        return <option key={x.id} value={x.id}>{x.number}{x.projectName ? ` · ${x.projectName}` : ""} — {formatCHF(x.total)}{alrInv > 0 ? ` (offen: ${formatCHF(rem)})` : ""}</option>;
+                      })}
+                    </select>
+                  </div>
+                  {q && (() => {
+                    const alrInv = (invoices).filter(i => i.quoteId === q.id).reduce((s, i) => s + (i.sub || 0), 0);
+                    const rem = Math.max(0, (q.sub || 0) - alrInv);
+                    const qKind = ni.mode === "schluss" ? "schluss"
+                      : (ni.mode === "akonto-percent" || ni.mode === "akonto-amount") ? "akonto"
+                      : "teilrechnung";
+                    const qSubMode = (ni.mode === "akonto-percent" || ni.mode === "teilrechnung-percent") ? "percent" : "amount";
+
+                    const QKindBtn = ({ id, label, color }) => {
+                      const active = qKind === id;
+                      return (
+                        <button onClick={() => {
+                          if (id === "schluss") return setNi(n => ({ ...n, mode: "schluss" }));
+                          if (id === "akonto") return setNi(n => ({ ...n, mode: "akonto-percent" }));
+                          setNi(n => ({ ...n, mode: "teilrechnung-percent" }));
+                        }} style={{
+                          flex: 1, padding: "10px 8px", border: `2px solid ${active ? color : "#ddd8d0"}`,
+                          borderRadius: 8, background: active ? color : "transparent",
+                          color: active ? "#fff" : "#666", fontFamily: "inherit", fontSize: 12,
+                          fontWeight: 600, cursor: "pointer", letterSpacing: "0.03em",
+                        }}>{label}</button>
+                      );
+                    };
+
+                    const QSubBtn = ({ id, label }) => {
+                      const active = qSubMode === id;
+                      return (
+                        <button onClick={() => setNi(n => ({ ...n, mode: qKind === "akonto"
+                          ? (id === "percent" ? "akonto-percent" : "akonto-amount")
+                          : (id === "percent" ? "teilrechnung-percent" : "teilrechnung-amount")
+                        }))} style={{
+                          padding: "5px 12px", border: `1.5px solid ${active ? "#1a1a18" : "#ddd8d0"}`,
+                          borderRadius: 20, background: active ? "#1a1a18" : "transparent",
+                          color: active ? "#f0ede8" : "#666", fontFamily: "inherit",
+                          fontSize: 11, cursor: "pointer",
+                        }}>{label}</button>
+                      );
+                    };
+
+                    return (
+                      <>
+                        {alrInv > 0 && (
+                          <div style={{ marginBottom: 14, padding: 12, background: "#faf8f5", borderRadius: 6, border: "1px solid #ece8e2", fontSize: 12 }}>
+                            <div style={{ display: "flex", justifyContent: "space-between", color: "#666" }}><span>Total Offerte</span><span>{formatCHF(q.sub)}</span></div>
+                            <div style={{ display: "flex", justifyContent: "space-between", color: "#2d6a4f" }}><span>Bereits verrechnet</span><span>{formatCHF(alrInv)}</span></div>
+                            <div style={{ display: "flex", justifyContent: "space-between", fontWeight: 600, color: "#b5621e", marginTop: 4, paddingTop: 4, borderTop: "1px solid #ece8e2" }}><span>Restbetrag</span><span>{formatCHF(rem)}</span></div>
+                          </div>
+                        )}
+
+                        {/* Ebene 1: Art der Rechnung */}
+                        <div style={{ display: "flex", gap: 8, marginBottom: 14 }}>
+                          <QKindBtn id="akonto" label="Akonto" color="#b07848" />
+                          <QKindBtn id="teilrechnung" label="Teilrechnung" color="#2d5a8e" />
+                          <QKindBtn id="schluss" label="Schlussrechnung" color="#1a1a18" />
+                        </div>
+
+                        {/* Ebene 2: Sub-Optionen */}
+                        {qKind !== "schluss" && (
+                          <div style={{ display: "flex", gap: 6, marginBottom: 12 }}>
+                            <QSubBtn id="percent" label="% vom Gesamthonorar" />
+                            <QSubBtn id="amount" label="Fixer Betrag" />
+                          </div>
+                        )}
+
+                        {/* Inputs */}
+                        {qKind !== "schluss" && qSubMode === "percent" && (
+                          <div style={{ display: "flex", alignItems: "center", gap: 10, padding: "10px 14px", background: qKind === "akonto" ? "#fff8ed" : "#edf2fa", borderRadius: 6, border: `1px solid ${qKind === "akonto" ? "#f0e4c4" : "#c4d4ea"}`, marginBottom: 10 }}>
+                            <input type="number" min={1} max={100} step="1" value={ni.pct} onChange={e => setNi(n => ({ ...n, pct: Math.max(0, Math.min(100, +e.target.value || 0)) }))} style={{ width: 80, textAlign: "right", background: "#fff" }} />
+                            <span style={{ fontSize: 13, color: "#666" }}>% von {formatCHF(q.sub || 0)} = <strong>{formatCHF((q.sub || 0) * ni.pct / 100)}</strong></span>
+                          </div>
+                        )}
+                        {qKind !== "schluss" && qSubMode === "amount" && (
+                          <div style={{ display: "flex", alignItems: "center", gap: 10, padding: "10px 14px", background: qKind === "akonto" ? "#fff8ed" : "#edf2fa", borderRadius: 6, border: `1px solid ${qKind === "akonto" ? "#f0e4c4" : "#c4d4ea"}`, marginBottom: 10 }}>
+                            <span style={{ fontSize: 13, color: "#666" }}>CHF</span>
+                            <input type="number" min={0} step="50" value={ni.amt} onChange={e => setNi(n => ({ ...n, amt: Math.max(0, +e.target.value || 0) }))} style={{ width: 140, textAlign: "right", background: "#fff" }} />
+                          </div>
+                        )}
+
+                        {/* Schluss-Info */}
+                        {qKind === "schluss" && (
+                          <div style={{ padding: "10px 14px", background: "#f5f0e8", borderRadius: 6, fontSize: 12, color: "#666", marginBottom: 10 }}>
+                            {`Gesamthonorar ${formatCHF(q.sub || 0)} abzgl. bisherige Akonto- und Teilrechnungen.`}
+                          </div>
+                        )}
+                      </>
+                    );
+                  })()}
+                </>
+              )}
+
+              {/* Preview */}
+              {ni.tab !== "frei" && (proj || q) && (
+                <div style={{ padding: "12px 14px", background: "#f5f0e8", borderRadius: 6, marginTop: 14, marginBottom: 6 }}>
+                  <div style={{ fontSize: 10, letterSpacing: "0.1em", color: "#888", marginBottom: 8 }}>VORSCHAU</div>
+                  <div style={{ display: "flex", justifyContent: "space-between", fontSize: 12, color: "#666", padding: "2px 0" }}><span>Netto</span><span>{formatCHF(previewAmt)}</span></div>
+                  <div style={{ display: "flex", justifyContent: "space-between", fontSize: 12, color: "#666", padding: "2px 0" }}><span>MWST {data.settings.mwstRate}%</span><span>{formatCHF(previewTax)}</span></div>
+                  <div style={{ display: "flex", justifyContent: "space-between", marginTop: 4, paddingTop: 6, borderTop: "1px solid #d8d0c4", fontSize: 14, fontWeight: 700 }}><span>Total</span><span>{formatCHF(previewTotal)}</span></div>
+                  <div style={{ fontSize: 10, color: "#888", marginTop: 6 }}>{previewKind === "schluss" ? "Schlussrechnung" : previewKind === "teilrechnung" ? "Teilrechnung" : "Akontorechnung"} · Entwurf — im nächsten Schritt editierbar</div>
+                </div>
+              )}
+
+              <div style={{ display: "flex", gap: 10, justifyContent: "flex-end", marginTop: 18 }}>
+                <button className="btn btn-ghost" onClick={() => setNewInvModal(false)}>Abbrechen</button>
+                <button className="btn btn-primary" onClick={confirmNewInvoice} disabled={!canConfirm} style={{ opacity: canConfirm ? 1 : 0.4 }}>
+                  {ni.tab === "frei" ? "Leere Rechnung erstellen" : "Weiter →"}
+                </button>
+              </div>
+            </div>
+          </div>
+        );
+      })()}
+
+      {/* ── Akonto-Planer Modal ── */}
+      {akontoModal && (() => {
+        const apProj = data.projects.find(p => p.id === ap.projectId);
+        const apBudget = apProj ? (apProj.budget || apProj.budgetAmount || 0) : 0;
+        const apTotal = apRows.reduce((s, r) => s + (r.amt || 0), 0);
+        const canCreate = apRows.length > 0 && apRows.every(r => r.date && r.amt > 0) && (ap.projectId || ap.clientId);
+        return (
+          <div className="modal-overlay" onClick={e => e.target === e.currentTarget && setAkontoModal(false)}>
+            <div className="modal" style={{ maxWidth: 540 }}>
+              <h2 style={{ fontFamily: "'Playfair Display', serif", fontWeight: 400, fontSize: 22, marginBottom: 20 }}>Akonto-Plan erstellen</h2>
+
+              {/* Projekt */}
+              <div className="form-row" style={{ marginBottom: 14 }}>
+                <div className="form-group">
+                  <label>Projekt</label>
+                  <select value={ap.projectId} onChange={e => {
+                    const p = data.projects.find(x => x.id === e.target.value);
+                    setAp(a => ({ ...a, projectId: e.target.value, clientId: p?.clientId || a.clientId, totalAmt: p ? (p.budget || p.budgetAmount || 0) : a.totalAmt }));
+                  }}>
+                    <option value="">— Projekt wählen —</option>
+                    {data.projects.filter(p => p.status !== "archiviert").map(p => (
+                      <option key={p.id} value={p.id}>{p.number ? `${p.number} · ` : ""}{p.name}</option>
+                    ))}
+                  </select>
+                </div>
+                <div className="form-group">
+                  <label>Kunde</label>
+                  <select value={ap.clientId} onChange={e => setAp(a => ({ ...a, clientId: e.target.value }))}>
+                    <option value="">— Kunde —</option>
+                    {clients.map(c => <option key={c.id} value={c.id}>{c.name}</option>)}
+                  </select>
+                </div>
+              </div>
+
+              {/* Gesamtbetrag */}
+              <div className="form-group" style={{ marginBottom: 16 }}>
+                <label>Gesamthonorar (Netto, exkl. MWST)
+                  {apBudget > 0 && <span style={{ fontWeight: 400, fontSize: 11, color: "#aaa", marginLeft: 6 }}>Budget: {formatCHF(apBudget)}</span>}
+                </label>
+                <div style={{ display: "flex", gap: 8, alignItems: "center" }}>
+                  <input type="number" step="500" min={0} value={ap.totalAmt} onChange={e => setAp(a => ({ ...a, totalAmt: +e.target.value }))}
+                    style={{ width: 180, textAlign: "right" }} />
+                  {apBudget > 0 && ap.totalAmt !== apBudget && (
+                    <button className="btn btn-ghost" style={{ fontSize: 11, padding: "4px 10px", whiteSpace: "nowrap" }}
+                      onClick={() => setAp(a => ({ ...a, totalAmt: apBudget }))}>= Budget übernehmen</button>
+                  )}
+                </div>
+              </div>
+
+              {/* Verteilung */}
+              <div style={{ marginBottom: 16 }}>
+                <div style={{ fontSize: 10, letterSpacing: "0.08em", color: "#888", marginBottom: 10 }}>VERTEILUNG</div>
+                <div style={{ display: "flex", gap: 8, marginBottom: 12 }}>
+                  {[{ id: "interval", label: "Gleichmässig" }, { id: "manual", label: "Manuell" }].map(m => (
+                    <button key={m.id} onClick={() => setAp(a => ({
+                      ...a, mode: m.id,
+                      manualRows: m.id === "manual" && a.mode === "interval"
+                        ? apRows.map(r => ({ ...r, id: generateId() }))
+                        : a.manualRows,
+                    }))} style={{
+                      padding: "6px 14px", fontSize: 12, borderRadius: 4, border: "1.5px solid",
+                      borderColor: ap.mode === m.id ? "#1a1a18" : "#c8c0b8",
+                      background: ap.mode === m.id ? "#1a1a18" : "transparent",
+                      color: ap.mode === m.id ? "#f0ede8" : "#666",
+                      cursor: "pointer", fontFamily: "inherit",
+                    }}>{m.label}</button>
+                  ))}
+                </div>
+
+                {ap.mode === "interval" && (
+                  <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr 1fr", gap: 12 }}>
+                    <div>
+                      <div style={{ fontSize: 11, color: "#888", marginBottom: 4 }}>Erste Rechnung</div>
+                      <DateInput value={ap.startDate} onChange={e => setAp(a => ({ ...a, startDate: e.target.value }))} />
+                    </div>
+                    <div>
+                      <div style={{ fontSize: 11, color: "#888", marginBottom: 4 }}>Intervall (Monate)</div>
+                      <input type="number" min={1} max={24} step={1} value={ap.intervalMonths}
+                        onChange={e => setAp(a => ({ ...a, intervalMonths: Math.max(1, +e.target.value) }))} />
+                    </div>
+                    <div>
+                      <div style={{ fontSize: 11, color: "#888", marginBottom: 4 }}>Anzahl Raten</div>
+                      <input type="number" min={1} max={24} step={1} value={ap.count}
+                        onChange={e => setAp(a => ({ ...a, count: Math.max(1, +e.target.value) }))} />
+                    </div>
+                  </div>
+                )}
+              </div>
+
+              {/* Vorschau / Manuell-Tabelle */}
+              <div style={{ marginBottom: 16 }}>
+                <div style={{ display: "flex", justifyContent: "space-between", alignItems: "center", marginBottom: 8 }}>
+                  <div style={{ fontSize: 10, letterSpacing: "0.08em", color: "#888" }}>VORSCHAU — {apRows.length} ENTWÜRFE</div>
+                  {ap.mode === "manual" && (
+                    <button className="btn btn-ghost" style={{ fontSize: 11, padding: "3px 10px" }}
+                      onClick={() => setAp(a => ({ ...a, manualRows: [...a.manualRows, { id: generateId(), date: "", amt: 0 }] }))}>
+                      + Zeile
+                    </button>
+                  )}
+                </div>
+                <div style={{ border: "1px solid #ece8e2", borderRadius: 6, overflow: "hidden" }}>
+                  <table style={{ fontSize: 12 }}>
+                    <thead>
+                      <tr style={{ background: "#f5f0e8" }}>
+                        <th style={{ width: 28, padding: "6px 8px", textAlign: "center", color: "#888", fontWeight: 500 }}>#</th>
+                        <th style={{ padding: "6px 8px", color: "#888", fontWeight: 500 }}>Datum</th>
+                        <th style={{ padding: "6px 8px", textAlign: "right", color: "#888", fontWeight: 500 }}>Betrag netto</th>
+                        <th style={{ padding: "6px 8px", textAlign: "right", color: "#888", fontWeight: 500 }}>Total inkl. MWST</th>
+                        {ap.mode === "manual" && <th style={{ width: 28 }}></th>}
+                      </tr>
+                    </thead>
+                    <tbody>
+                      {apRows.map((row, i) => {
+                        const mwstAmt = row.amt * (data.settings.mwstRate / 100);
+                        return (
+                          <tr key={row.id} style={{ borderTop: "1px solid #ece8e2" }}>
+                            <td style={{ padding: "6px 8px", textAlign: "center", color: "#888" }}>{i + 1}</td>
+                            <td style={{ padding: "6px 8px" }}>
+                              {ap.mode === "manual"
+                                ? <DateInput value={row.date} onChange={e => setAp(a => ({ ...a, manualRows: a.manualRows.map(r => r.id === row.id ? { ...r, date: e.target.value } : r) }))} style={{ height: 28, fontSize: 12 }} />
+                                : <span style={{ color: row.date ? "#1a1a18" : "#aaa" }}>{row.date ? formatDate(row.date) : "—"}</span>}
+                            </td>
+                            <td style={{ padding: "6px 8px", textAlign: "right" }}>
+                              {ap.mode === "manual"
+                                ? <input type="number" step="100" min={0} value={row.amt} onChange={e => setAp(a => ({ ...a, manualRows: a.manualRows.map(r => r.id === row.id ? { ...r, amt: +e.target.value } : r) }))} style={{ width: 110, height: 28, fontSize: 12, textAlign: "right" }} />
+                                : <strong>{formatCHF(row.amt)}</strong>}
+                            </td>
+                            <td style={{ padding: "6px 8px", textAlign: "right", color: "#888" }}>
+                              {formatCHF(roundCHF(row.amt + mwstAmt))}
+                            </td>
+                            {ap.mode === "manual" && (
+                              <td style={{ padding: "6px 8px", textAlign: "center" }}>
+                                <button onClick={() => setAp(a => ({ ...a, manualRows: a.manualRows.filter(r => r.id !== row.id) }))}
+                                  style={{ background: "none", border: "none", color: "#bbb", cursor: "pointer", fontSize: 14, padding: 0 }}>×</button>
+                              </td>
+                            )}
+                          </tr>
+                        );
+                      })}
+                    </tbody>
+                    <tfoot>
+                      <tr style={{ borderTop: "1.5px solid #c8c0b8", background: "#faf8f5" }}>
+                        <td colSpan={2} style={{ padding: "7px 8px", fontSize: 11, color: "#888" }}>Total</td>
+                        <td style={{ padding: "7px 8px", textAlign: "right", fontWeight: 700 }}>{formatCHF(apTotal)}</td>
+                        <td style={{ padding: "7px 8px", textAlign: "right", fontWeight: 700 }}>{formatCHF(roundCHF(apTotal * (1 + (data.settings.mwstRate || 0) / 100)))}</td>
+                        {ap.mode === "manual" && <td></td>}
+                      </tr>
+                    </tfoot>
+                  </table>
+                </div>
+                <div style={{ fontSize: 10, color: "#aaa", marginTop: 6 }}>Werden als Entwurf gespeichert — Nummern, Beschreibungen und Beträge danach noch editierbar.</div>
+              </div>
+
+              <div style={{ display: "flex", gap: 10, justifyContent: "flex-end", paddingTop: 14, borderTop: "1px solid #eee" }}>
+                <button className="btn btn-ghost" onClick={() => setAkontoModal(false)}>Abbrechen</button>
+                <button className="btn btn-primary" onClick={createAkontoInvoices} disabled={!canCreate} style={{ opacity: canCreate ? 1 : 0.4 }}>
+                  {apRows.length} Entwürfe erstellen →
+                </button>
+              </div>
+            </div>
+          </div>
+        );
+      })()}
+
+      {sendModal && (
+        <div className="modal-overlay">
+          <div className="modal" style={{ maxWidth: 360 }}>
+            <h2 style={{ fontFamily: "'Playfair Display', serif", fontWeight: 400, fontSize: 18, marginBottom: 16 }}>Rechnung {sendModal.number}</h2>
+            <div style={{ display: "flex", flexDirection: "column", gap: 8 }}>
+              <button className="btn btn-primary" onClick={() => {
+                update("invoices", invoices.map(i => i.id === sendModal.id ? { ...i, status: "gesendet", sentDate: new Date().toISOString().slice(0, 10) } : i));
+                setSendModal(null);
+              }}>Als versendet markieren</button>
+              <button className="btn btn-ghost" onClick={() => {
+                update("invoices", invoices.map(i => i.id === sendModal.id ? { ...i, status: "gesendet", sentDate: new Date().toISOString().slice(0, 10) } : i));
+                setSendModal(null);
+                setPrintContent({ type: "invoice+qr", inv: sendModal, client: clients.find(c => c.id === sendModal.clientId) });
+              }}>Versendet + PDF drucken</button>
+              <button className="btn btn-ghost" onClick={() => {
+                update("invoices", invoices.map(i => i.id === sendModal.id ? { ...i, status: "entwurf" } : i));
+                setSendModal(null);
+              }}>Als Entwurf speichern</button>
+            </div>
+          </div>
+        </div>
+      )}
+    </div>
+  );
+}
diff --git a/src/views/Letters.jsx b/src/views/Letters.jsx
new file mode 100755
index 0000000..cce3e7b
--- /dev/null
+++ b/src/views/Letters.jsx
@@ -0,0 +1,114 @@
+import React, { useState, useEffect } from "react";
+import { generateId, textToHtml, htmlToText } from "../utils.js";
+import { Header, FormField, RichEditor, useConfirm } from "../components/UI.jsx";
+
+export default
+function Letters({ data, update, setPrintContent }) {
+  const [selectedTemplate, setSelectedTemplate] = useState(data.letterTemplates[0]?.id || "");
+  const [clientId, setClientId] = useState("");
+  const [projectId, setProjectId] = useState("");
+  const [body, setBody] = useState(() => textToHtml(data.letterTemplates[0]?.body || ""));
+  const { askConfirm, ConfirmModalEl } = useConfirm();
+  const [subject, setSubject] = useState(data.letterTemplates[0]?.name || "");
+  const prevTemplate = React.useRef(selectedTemplate);
+
+  useEffect(() => {
+    const tpl = data.letterTemplates.find(t => t.id === selectedTemplate);
+    if (tpl) {
+      const client = ((data.persons||[]).filter(p=>p.isAuftraggeber)).find(c => c.id === clientId);
+      const proj = data.projects.find(p => p.id === projectId);
+      let text = tpl.body || "";
+      text = text.replace(/\{\{client\}\}/g, client?.name || "[Kunde]");
+      text = text.replace(/\{\{project\}\}/g, proj?.name || "[Projekt]");
+      setBody(textToHtml(text));
+      setSubject(tpl.name);
+    }
+  }, [selectedTemplate, clientId, projectId]);
+
+  const client = ((data.persons||[]).filter(p=>p.isAuftraggeber)).find(c => c.id === clientId);
+
+  const saveAsTemplate = () => {
+    const name = prompt("Name der neuen Vorlage?");
+    if (!name) return;
+    const tpl = { id: generateId(), name, body };
+    update("letterTemplates", [...data.letterTemplates, tpl]);
+    setSelectedTemplate(tpl.id);
+  };
+
+  const updateTemplate = () => {
+    update("letterTemplates", data.letterTemplates.map(t => t.id === selectedTemplate ? { ...t, body } : t));
+  };
+
+  const deleteTemplate = async () => {
+    if (!(await askConfirm("Vorlage löschen?"))) return;
+    const remaining = data.letterTemplates.filter(t => t.id !== selectedTemplate);
+    update("letterTemplates", remaining);
+    setSelectedTemplate(remaining[0]?.id || "");
+  };
+
+  return (
+    <div>
+      {ConfirmModalEl}
+      <Header title="Briefe" action={
+        <button className="btn btn-primary" onClick={() => setPrintContent({ type: "letter", client, subject, body, isHtml: true, settings: data.settings })}>
+          Drucken / PDF
+        </button>
+      } />
+      <div style={{ display: "grid", gridTemplateColumns: "280px 1fr", gap: 20, alignItems: "start" }}>
+
+        {/* Linke Spalte */}
+        <div style={{ display: "flex", flexDirection: "column", gap: 16 }}>
+          <div className="card">
+            <div style={{ fontSize: 10, letterSpacing: "0.12em", color: "var(--text4)", fontWeight: 600, marginBottom: 12 }}>VORLAGE</div>
+            <select value={selectedTemplate} onChange={e => setSelectedTemplate(e.target.value)} style={{ marginBottom: 10 }}>
+              {data.letterTemplates.map(t => <option key={t.id} value={t.id}>{t.name}</option>)}
+            </select>
+            <div style={{ display: "flex", gap: 6 }}>
+              <button className="btn btn-ghost" style={{ flex: 1, fontSize: 11, padding: "5px 8px" }} onClick={updateTemplate}>Überschreiben</button>
+              <button className="btn btn-ghost" style={{ flex: 1, fontSize: 11, padding: "5px 8px" }} onClick={saveAsTemplate}>Neu speichern</button>
+              <button className="btn btn-ghost" style={{ padding: "5px 8px", fontSize: 11 }} onClick={deleteTemplate}><span className="material-icons" style={{ fontSize: 16 }}>close</span></button>
+            </div>
+          </div>
+
+          <div className="card">
+            <div style={{ fontSize: 10, letterSpacing: "0.12em", color: "var(--text4)", fontWeight: 600, marginBottom: 12 }}>EMPFÄNGER</div>
+            <FormField label="Kunde">
+              <select value={clientId} onChange={e => setClientId(e.target.value)}>
+                <option value="">— wählen —</option>
+                {((data.persons||[]).filter(p=>p.isAuftraggeber)).map(c => <option key={c.id} value={c.id}>{c.name}</option>)}
+              </select>
+            </FormField>
+            <FormField label="Projekt (optional)">
+              <select value={projectId} onChange={e => setProjectId(e.target.value)}>
+                <option value="">— keines —</option>
+                {data.projects.map(p => <option key={p.id} value={p.id}>{p.name}</option>)}
+              </select>
+            </FormField>
+          </div>
+
+          <div className="card" style={{ fontSize: 11, color: "var(--text5)", lineHeight: 1.7 }}>
+            <div style={{ fontSize: 10, letterSpacing: "0.12em", color: "var(--text4)", fontWeight: 600, marginBottom: 8 }}>PLATZHALTER</div>
+            <code style={{ fontSize: 10, background: "var(--surface2)", padding: "1px 5px", borderRadius: 3 }}>{"{{client}}"}</code> Kundenname<br/>
+            <code style={{ fontSize: 10, background: "var(--surface2)", padding: "1px 5px", borderRadius: 3, marginTop: 4, display: "inline-block" }}>{"{{project}}"}</code> Projektname
+          </div>
+        </div>
+
+        {/* Editor */}
+        <div className="card" style={{ padding: 0, overflow: "hidden" }}>
+          <div style={{ padding: "16px 20px", borderBottom: "1px solid var(--border2)" }}>
+            <input
+              value={subject}
+              onChange={e => setSubject(e.target.value)}
+              placeholder="Betreff / Titel"
+              style={{ fontSize: 15, fontWeight: 500, border: "none", background: "transparent", color: "var(--text)", width: "100%", outline: "none", height: "auto" }}
+            />
+          </div>
+          <div style={{ padding: "0" }}>
+            <RichEditor value={body} onChange={setBody} />
+          </div>
+        </div>
+
+      </div>
+    </div>
+  );
+}
diff --git a/src/views/Lieferscheine.jsx b/src/views/Lieferscheine.jsx
new file mode 100755
index 0000000..ee80126
--- /dev/null
+++ b/src/views/Lieferscheine.jsx
@@ -0,0 +1,294 @@
+import React, { useState } from "react";
+import { generateId, formatCHF, formatDate, linkedClientForNote } from "../utils.js";
+import { Header, Modal, FormField, StatusBadge, useConfirm , DateInput } from "../components/UI.jsx";
+
+export default
+function Lieferscheine({ data, update, saveAll, setPrintContent }) {
+  const today = new Date().toISOString().slice(0, 10);
+
+  const emptyForm = {
+    date: today,
+    number: "",
+    projectId: "",
+    clientId: "",
+    clientManual: "",
+    projectManual: "",
+    deliveryAddress: "",
+    notes: "",
+    items: [{ id: generateId(), desc: "", qty: 1, unit: "Stk.", note: "" }],
+  };
+
+  const [modal, setModal] = useState(null); // null | "new" | id
+  const [form, setForm] = useState(emptyForm);
+  const [filter, setFilter] = useState({ search: "", projectId: "", clientId: "" });
+  const [sort, setSort] = useState({ col: "date", dir: -1 });
+  const { askConfirm, ConfirmModalEl } = useConfirm();
+
+  const notes = data.deliveryNotes || [];
+
+  // Nummernvergabe
+  const nextNumber = () => {
+    const year = new Date().getFullYear();
+    const existing = notes.map(n => {
+      const m = (n.number || "").match(/LS[-–]?(\d+)/i);
+      return m ? parseInt(m[1]) : 0;
+    });
+    const max = existing.length ? Math.max(...existing) : 0;
+    return `LS-${year}-${String(max + 1).padStart(3, "0")}`;
+  };
+
+  const openNew = () => {
+    setForm({ ...emptyForm, number: nextNumber() });
+    setModal("new");
+  };
+  const openEdit = (n) => { setForm({ ...n }); setModal(n.id); };
+  const closeModal = () => { setModal(null); setForm(emptyForm); };
+
+  const save = () => {
+    const isNew = modal === "new";
+    const entry = { ...form, id: isNew ? generateId() : modal };
+    const updated = isNew
+      ? [...notes, { ...entry, createdAt: new Date().toISOString() }]
+      : notes.map(n => n.id === modal ? entry : n);
+    saveAll({ ...data, deliveryNotes: updated });
+    closeModal();
+  };
+
+  const del = async (id) => {
+    if (await askConfirm("Lieferschein löschen?"))
+      saveAll({ ...data, deliveryNotes: notes.filter(n => n.id !== id) });
+  };
+
+  const addItem = () => setForm(f => ({ ...f, items: [...f.items, { id: generateId(), desc: "", qty: 1, unit: "Stk.", note: "" }] }));
+  const updateItem = (id, changes) => setForm(f => ({ ...f, items: f.items.map(it => it.id === id ? { ...it, ...changes } : it) }));
+  const removeItem = (id) => setForm(f => ({ ...f, items: f.items.filter(it => it.id !== id) }));
+
+  // Ableitungen für Anzeige
+  const getClient = (n) => {
+    if (n.clientId) return ((data.persons||[]).filter(p=>p.isAuftraggeber)).find(c => c.id === n.clientId)?.name || "—";
+    return n.clientManual || "—";
+  };
+  const getProject = (n) => {
+    if (n.projectId) return data.projects.find(p => p.id === n.projectId)?.name || "—";
+    return n.projectManual || "—";
+  };
+
+  // Filter
+  const filtered = notes.filter(n => {
+    if (filter.projectId && n.projectId !== filter.projectId) return false;
+    if (filter.clientId && n.clientId !== filter.clientId) return false;
+    if (filter.search) {
+      const q = filter.search.toLowerCase();
+      const text = [n.number, getClient(n), getProject(n), n.notes, ...(n.items || []).map(it => it.desc)].join(" ").toLowerCase();
+      if (!text.includes(q)) return false;
+    }
+    return true;
+  });
+
+  const toggleSort = (col) => setSort(s => ({ col, dir: s.col === col ? -s.dir : -1 }));
+  const SortTh = ({ col, children, style }) => (
+    <th onClick={() => toggleSort(col)} style={{ cursor: "pointer", userSelect: "none", ...style }}>
+      {children} <span style={{ color: sort.col === col ? "#b07848" : "#ccc", fontSize: 10 }}>{sort.col === col ? (sort.dir === 1 ? "▲" : "▼") : "⇅"}</span>
+    </th>
+  );
+
+  const sorted = [...filtered].sort((a, b) => {
+    const va = sort.col === "date" ? (a.date || "") : sort.col === "number" ? (a.number || "") : sort.col === "client" ? getClient(a) : getProject(a);
+    const vb = sort.col === "date" ? (b.date || "") : sort.col === "number" ? (b.number || "") : sort.col === "client" ? getClient(b) : getProject(b);
+    return va.localeCompare(vb) * sort.dir;
+  });
+
+  const UNITS = ["Stk.", "m", "m²", "m³", "kg", "l", "Set", "Blatt", "Rolle", "Palette", "Pkg."];
+
+  // Client-Felder im Modal: verknüpft oder manuell
+  const linkedClient = form.clientId ? ((data.persons||[]).filter(p=>p.isAuftraggeber)).find(c => c.id === form.clientId) : null;
+  const linkedProject = form.projectId ? data.projects.find(p => p.id === form.projectId) : null;
+
+  return (
+    <div>
+      {ConfirmModalEl}
+      <Header title="Lieferscheine" action={
+        <button className="btn btn-primary" onClick={openNew}>+ Neuer Lieferschein</button>
+      } />
+
+      <div className="filter-bar">
+        <input className="pill" placeholder="Suche (Nr., Kunde, Projekt, Position…)" value={filter.search} onChange={e => setFilter({ ...filter, search: e.target.value })} style={{ minWidth: 220 }} />
+        <select className="pill" value={filter.clientId} onChange={e => setFilter({ ...filter, clientId: e.target.value })}>
+          <option value="">Alle Kunden</option>
+          {((data.persons||[]).filter(p=>p.isAuftraggeber)).map(c => <option key={c.id} value={c.id}>{c.name}</option>)}
+        </select>
+        <select className="pill" value={filter.projectId} onChange={e => setFilter({ ...filter, projectId: e.target.value })}>
+          <option value="">Alle Projekte</option>
+          {data.projects.map(p => <option key={p.id} value={p.id}>{p.name}</option>)}
+        </select>
+        {(filter.search || filter.clientId || filter.projectId) && (
+          <button className="btn btn-ghost" style={{ fontSize: 12 }} onClick={() => setFilter({ search: "", projectId: "", clientId: "" })}>Zurücksetzen</button>
+        )}
+        <div style={{ marginLeft: "auto", fontSize: 12, color: "#888" }}>
+          <strong style={{ color: "#1a1a18" }}>{filtered.length}</strong> {filtered.length === 1 ? "Lieferschein" : "Lieferscheine"}
+        </div>
+      </div>
+
+      {/* Tabelle */}
+      {sorted.length === 0 ? (
+        <div className="card" style={{ padding: 0 }}>
+          <table>
+            <thead><tr><th style={{ width: 120 }}>Nr.</th><th style={{ width: 100 }}>Datum</th><th style={{ width: 180 }}>Empfänger</th><th>Projekt</th><th style={{ width: 60 }}>Pos.</th><th style={{ width: 120 }}></th></tr></thead>
+            <tbody><tr><td colSpan={6} style={{ textAlign: "center", color: "#aaa", padding: 32, fontSize: 13 }}>{notes.length === 0 ? "Noch keine Lieferscheine" : "Keine Treffer"}</td></tr></tbody>
+          </table>
+        </div>
+      ) : (
+        <div className="card" style={{ padding: 0 }}>
+          <table>
+            <thead>
+              <tr>
+                <SortTh col="number" style={{ width: 120 }}>Nr.</SortTh>
+                <SortTh col="date" style={{ width: 100 }}>Datum</SortTh>
+                <SortTh col="client" style={{ width: 180 }}>Empfänger</SortTh>
+                <SortTh col="project">Projekt</SortTh>
+                <th style={{ width: 60, textAlign: "center" }}>Pos.</th>
+                <th style={{ width: 120 }}></th>
+              </tr>
+            </thead>
+            <tbody>
+              {sorted.map(n => (
+                <tr key={n.id}>
+                  <td><strong style={{ color: "#b07848" }}>{n.number || "—"}</strong></td>
+                  <td>{formatDate(n.date)}</td>
+                  <td>{getClient(n)}</td>
+                  <td style={{ color: "#888" }}>{getProject(n)}</td>
+                  <td style={{ textAlign: "center", color: "#888", fontSize: 12 }}>{(n.items || []).length}</td>
+                  <td style={{ textAlign: "right", whiteSpace: "nowrap" }}>
+                    <button className="btn btn-ghost" style={{ padding: "5px 10px", fontSize: 12, marginRight: 4 }}
+                      onClick={() => { const client = linkedClientForNote(n, data); setPrintContent({ type: "lieferschein", note: n, client, settings: data.settings, data }); }}>
+                      PDF
+                    </button>
+                    <button className="btn btn-ghost" style={{ padding: "5px 10px", fontSize: 12, marginRight: 4 }} onClick={() => openEdit(n)}><span className="material-icons" style={{ fontSize: 16 }}>edit</span></button>
+                    <button className="btn btn-danger" style={{ padding: "5px 10px", fontSize: 12 }} onClick={() => del(n.id)}><span className="material-icons" style={{ fontSize: 16 }}>close</span></button>
+                  </td>
+                </tr>
+              ))}
+            </tbody>
+          </table>
+        </div>
+      )}
+
+      {/* Modal */}
+      {modal && (
+        <Modal title={modal === "new" ? "Neuer Lieferschein" : "Lieferschein bearbeiten"} onClose={closeModal} onSave={save} wide>
+
+          {/* Kopfdaten */}
+          <div style={{ fontSize: 11, letterSpacing: "0.08em", color: "#888", marginBottom: 10 }}>ALLGEMEIN</div>
+          <div className="form-row">
+            <FormField label="Nummer">
+              <input value={form.number} onChange={e => setForm({ ...form, number: e.target.value })} placeholder="LS-2025-001" />
+            </FormField>
+            <FormField label="Datum">
+              <DateInput value={form.date} onChange={e => setForm({ ...form, date: e.target.value })} />
+            </FormField>
+          </div>
+
+          {/* Empfänger */}
+          <div style={{ fontSize: 11, letterSpacing: "0.08em", color: "#888", margin: "14px 0 10px", paddingTop: 12, borderTop: "1px solid var(--border2)" }}>EMPFÄNGER</div>
+          <div className="form-row">
+            <FormField label="Kunde (verknüpft)">
+              <select value={form.clientId} onChange={e => {
+                const c = ((data.persons||[]).filter(p=>p.isAuftraggeber)).find(x => x.id === e.target.value);
+                setForm({ ...form, clientId: e.target.value, clientManual: "", deliveryAddress: "" });
+              }}>
+                <option value="">— manuell eingeben —</option>
+                {((data.persons||[]).filter(p=>p.isAuftraggeber)).map(c => <option key={c.id} value={c.id}>{c.name}</option>)}
+              </select>
+            </FormField>
+            {!form.clientId && (
+              <FormField label="Empfänger (manuell)">
+                <input value={form.clientManual} onChange={e => setForm({ ...form, clientManual: e.target.value })} placeholder="Firmen- oder Personenname" />
+              </FormField>
+            )}
+          </div>
+          <FormField label="Lieferadresse">
+            {form.clientId ? (
+              <div style={{ padding: "8px 10px", background: "var(--surface2)", border: "1.5px solid var(--border)", borderRadius: 4, fontSize: 12, color: "var(--text2)", lineHeight: 1.6, minHeight: 60, whiteSpace: "pre-line" }}>
+                {linkedClient?.address || <span style={{ color: "var(--text4)", fontStyle: "italic" }}>Keine Adresse beim Kunden hinterlegt</span>}
+                <div style={{ fontSize: 10, color: "var(--text4)", marginTop: 6, borderTop: "1px solid var(--border2)", paddingTop: 4 }}>
+                  Adresse aus Kundenstamm · unter «Kunden» bearbeitbar
+                </div>
+              </div>
+            ) : (
+              <textarea
+                value={form.deliveryAddress}
+                onChange={e => setForm({ ...form, deliveryAddress: e.target.value })}
+                placeholder={"Strasse\nPLZ Ort"}
+                style={{ minHeight: 60, resize: "vertical" }}
+              />
+            )}
+          </FormField>
+
+          {/* Projekt */}
+          <div style={{ fontSize: 11, letterSpacing: "0.08em", color: "#888", margin: "14px 0 10px", paddingTop: 12, borderTop: "1px solid var(--border2)" }}>PROJEKT</div>
+          <div className="form-row">
+            <FormField label="Projekt (verknüpft)">
+              <select value={form.projectId} onChange={e => setForm({ ...form, projectId: e.target.value, projectManual: "" })}>
+                <option value="">— manuell eingeben —</option>
+                {data.projects.map(p => <option key={p.id} value={p.id}>{p.name}</option>)}
+              </select>
+            </FormField>
+            {!form.projectId && (
+              <FormField label="Projekt (manuell)">
+                <input value={form.projectManual} onChange={e => setForm({ ...form, projectManual: e.target.value })} placeholder="Projektbezeichnung" />
+              </FormField>
+            )}
+          </div>
+
+          {/* Positionen */}
+          <div style={{ fontSize: 11, letterSpacing: "0.08em", color: "#888", margin: "14px 0 10px", paddingTop: 12, borderTop: "1px solid var(--border2)" }}>POSITIONEN</div>
+          <table style={{ width: "100%", borderCollapse: "collapse", marginBottom: 10 }}>
+            <thead>
+              <tr>
+                <th style={{ fontSize: 10, color: "#888", fontWeight: 500, textAlign: "left", padding: "4px 6px 6px 0", width: "40%" }}>Beschreibung</th>
+                <th style={{ fontSize: 10, color: "#888", fontWeight: 500, textAlign: "right", padding: "4px 6px", width: 70 }}>Menge</th>
+                <th style={{ fontSize: 10, color: "#888", fontWeight: 500, textAlign: "left", padding: "4px 6px", width: 80 }}>Einheit</th>
+                <th style={{ fontSize: 10, color: "#888", fontWeight: 500, textAlign: "left", padding: "4px 6px" }}>Bemerkung</th>
+                <th style={{ width: 32 }}></th>
+              </tr>
+            </thead>
+            <tbody>
+              {form.items.map((it, i) => (
+                <tr key={it.id}>
+                  <td style={{ padding: "4px 6px 4px 0" }}>
+                    <input value={it.desc} onChange={e => updateItem(it.id, { desc: e.target.value })} placeholder={`Position ${i + 1}`} style={{ height: 32, fontSize: 12 }} autoFocus={i === form.items.length - 1 && form.items.length > 1} />
+                  </td>
+                  <td style={{ padding: "4px 6px" }}>
+                    <input type="number" min={0} step="0.01" value={it.qty} onChange={e => updateItem(it.id, { qty: +e.target.value })} style={{ height: 32, fontSize: 12, textAlign: "right" }} />
+                  </td>
+                  <td style={{ padding: "4px 6px" }}>
+                    <select value={it.unit} onChange={e => updateItem(it.id, { unit: e.target.value })} style={{ height: 32, fontSize: 12 }}>
+                      {UNITS.map(u => <option key={u} value={u}>{u}</option>)}
+                    </select>
+                  </td>
+                  <td style={{ padding: "4px 6px" }}>
+                    <input value={it.note || ""} onChange={e => updateItem(it.id, { note: e.target.value })} placeholder="optional" style={{ height: 32, fontSize: 12 }} />
+                  </td>
+                  <td style={{ padding: "4px 0 4px 4px" }}>
+                    {form.items.length > 1 && (
+                      <button onClick={() => removeItem(it.id)} style={{ background: "none", border: "none", color: "#aaa", cursor: "pointer", fontSize: 16, padding: 0, lineHeight: 1 }}><span className="material-icons" style={{ fontSize: 16 }}>close</span></button>
+                    )}
+                  </td>
+                </tr>
+              ))}
+            </tbody>
+          </table>
+          <button className="btn btn-ghost" style={{ fontSize: 12, marginBottom: 14 }} onClick={addItem}>+ Position hinzufügen</button>
+
+          {/* Notizen */}
+          <div style={{ fontSize: 11, letterSpacing: "0.08em", color: "#888", margin: "14px 0 10px", paddingTop: 12, borderTop: "1px solid var(--border2)" }}>NOTIZEN / BEMERKUNGEN</div>
+          <FormField label="">
+            <textarea value={form.notes || ""} onChange={e => setForm({ ...form, notes: e.target.value })} placeholder="Allgemeine Bemerkungen zum Lieferschein…" style={{ minHeight: 72, resize: "vertical" }} />
+          </FormField>
+        </Modal>
+      )}
+    </div>
+  );
+}
+
+// Hilfsfunktion für PDF-Knopf in Tabelle
diff --git a/src/views/Loehne.jsx b/src/views/Loehne.jsx
new file mode 100755
index 0000000..6c9e8fa
--- /dev/null
+++ b/src/views/Loehne.jsx
@@ -0,0 +1,344 @@
+import React, { useState } from "react";
+import { generateId, formatCHF, formatDate, formatIban, calcLohn } from "../utils.js";
+import { Header, useConfirm, NavArrows } from "../components/UI.jsx";
+
+export default
+function Loehne({ data, update, saveAll, setPrintContent, setView }) {
+  const now = new Date();
+  const [selYear, setSelYear] = useState(now.getFullYear());
+  const [selMonth, setSelMonth] = useState(now.getMonth());
+  const [selEmpId, setSelEmpId] = useState("");
+  const [bruttoOverride, setBruttoOverride] = useState({});
+  const [pensumOverride, setPensumOverride] = useState({});
+  const [bonusOverride, setBonusOverride] = useState({}); // empId -> bonus CHF
+  const { askConfirm, ConfirmModalEl } = useConfirm();
+
+  const employees = data.employees || [];
+  const lohnEntries = data.lohnEntries || [];
+  const months = ["Januar","Februar","März","April","Mai","Juni","Juli","August","September","Oktober","November","Dezember"];
+  const monatStr = `${selYear}-${String(selMonth + 1).padStart(2, "0")}`;
+
+  const todayYear = now.getFullYear();
+  const todayMonth = now.getMonth();
+  const isAtFuture = selYear > todayYear || (selYear === todayYear && selMonth >= todayMonth);
+  const goNext = () => {
+    if (isAtFuture) return;
+    if (selMonth === 11) { setSelMonth(0); setSelYear(y => y + 1); } else setSelMonth(m => m + 1);
+  };
+  const goPrev = () => {
+    if (selMonth === 0) { setSelMonth(11); setSelYear(y => y - 1); } else setSelMonth(m => m - 1);
+  };
+
+  const isMonatAvailable = (emp) => {
+    // Nicht in die Zukunft (aktueller Monat ist max)
+    if (selYear > todayYear || (selYear === todayYear && selMonth > todayMonth)) return false;
+    // Nicht vor Eintrittsdatum
+    if (emp.eintrittsdatum) {
+      const parts = emp.eintrittsdatum.split("-");
+      const ey = parseInt(parts[0]);
+      const em = parseInt(parts[1]) - 1; // 0-basiert
+      if (selYear < ey || (selYear === ey && selMonth < em)) return false;
+    }
+    return true;
+  };
+
+  const getEffBrutto = (emp) => bruttoOverride[emp.id] != null ? bruttoOverride[emp.id] : (emp.monatslohn || 0);
+  const getEffPensum = (emp) => pensumOverride[emp.id] != null ? pensumOverride[emp.id] : (emp.pensum || 100);
+
+  const offeneSpesen = (empId) => (data.expenses || []).filter(e =>
+    e.employeeId === empId && (e.date || "").startsWith(monatStr) && !e.lohnEntryId
+  );
+  const findEntry = (empId) => lohnEntries.find(l => l.monat === monatStr && l.employeeId === empId);
+
+  const abschliessen = (emp) => {
+    if (findEntry(emp.id)) return;
+    const spesen = offeneSpesen(emp.id);
+    const effBrutto = getEffBrutto(emp);
+    const effPensum = getEffPensum(emp);
+    const bonus = bonusOverride[emp.id] || 0;
+    const calc = calcLohn({ ...emp, monatslohn: effBrutto, pensum: effPensum }, monatStr, spesen, bonus);
+    // Alle Sätze statisch festhalten — unabhängig von späteren Änderungen
+    const saetzeSnapshot = {
+      ahvSatz:  emp.ahvSatz  ?? 5.3,
+      alvSatz:  emp.alvSatz  ?? 1.1,
+      bvgSatz:  emp.bvgSatz  ?? 8.0,
+      nbuSatz:  emp.nbuSatz  ?? 1.5,
+      ktgSatz:  emp.ktgSatz  ?? 0.5,
+      quellensteuerPflichtig: emp.quellensteuerPflichtig || false,
+      quellensteuerSatz: emp.quellensteuerSatz ?? 10,
+      dreizehnterLohn: emp.dreizehnterLohn || false,
+      pensum: effPensum,
+      eintrittsdatum: emp.eintrittsdatum || "",
+      pkAGSatz: emp.pkAGSatz ?? 8.0,
+    };
+    const entry = {
+      id: generateId(), monat: monatStr, employeeId: emp.id,
+      empSnapshot: { name: emp.name, role: emp.role, adresse: emp.adresse, ort: emp.ort, ahvNr: emp.ahvNr, personalNr: emp.personalNr, lohnIban: emp.lohnIban },
+      saetzeSnapshot,
+      bruttoWasOverridden: bruttoOverride[emp.id] != null,
+      bonusBeschrieb: bonusOverride[`${emp.id}_beschrieb`] || "",
+      ...calc, spesenIds: spesen.map(s => s.id),
+      createdAt: new Date().toISOString(),
+    };
+    const updatedExp = (data.expenses || []).map(e =>
+      spesen.some(s => s.id === e.id) ? { ...e, lohnEntryId: entry.id, status: "ausbezahlt" } : e
+    );
+    saveAll({ ...data, lohnEntries: [...lohnEntries, entry], expenses: updatedExp });
+  };
+
+  const stornieren = async (id) => {
+    if (!(await askConfirm("Lohnabrechnung stornieren? Spesen werden wieder freigegeben.", "Stornieren"))) return;
+    const updatedExp = (data.expenses || []).map(e => e.lohnEntryId === id ? { ...e, lohnEntryId: null, status: "auf nächsten Lohn" } : e);
+    saveAll({ ...data, lohnEntries: lohnEntries.filter(l => l.id !== id), expenses: updatedExp });
+  };
+
+  const selectedEmp = employees.find(e => e.id === selEmpId);
+  const previewSpesen = selEmpId ? offeneSpesen(selEmpId) : [];
+  const previewCalc = selectedEmp ? calcLohn({ ...selectedEmp, monatslohn: getEffBrutto(selectedEmp), pensum: getEffPensum(selectedEmp) }, monatStr, previewSpesen, bonusOverride[selectedEmp?.id] || 0) : null;
+  const existingEntry = selEmpId ? findEntry(selEmpId) : null;
+  const monatEntries = lohnEntries.filter(l => l.monat === monatStr);
+  const cardPensum = existingEntry ? (existingEntry.saetzeSnapshot?.pensum || 100) : (selectedEmp ? getEffPensum(selectedEmp) : 100);
+
+  const LohnRow = ({ label, value, bold, color, indent }) => (
+    <div style={{ display: "flex", justifyContent: "space-between", padding: "3px 0", fontSize: indent ? 11 : 12, color: color || (indent ? "#888" : "#555"), paddingLeft: indent ? 12 : 0 }}>
+      <span>{label}</span><span style={{ fontWeight: bold ? 700 : 400 }}>{formatCHF(value)}</span>
+    </div>
+  );
+
+  const renderCalc = (calc, emp, isPreview, displayPensum) => (
+    <div>
+      {isPreview && (
+        <div style={{ marginBottom: 12, padding: "8px 10px", background: "#faf8f5", border: "1px solid #e0dbd4", borderRadius: 4 }}>
+          <div style={{ fontSize: 10, letterSpacing: "0.08em", color: "#888", marginBottom: 6 }}>MONATSLOHN (100% BASIS) — für diesen Lohnlauf anpassbar</div>
+          <div style={{ display: "flex", alignItems: "center", gap: 8 }}>
+            <input type="number" step={100} min={0} value={getEffBrutto(emp)}
+              onChange={e => setBruttoOverride(o => ({ ...o, [emp.id]: +e.target.value }))}
+              style={{ flex: 1, height: 32, fontSize: 13, textAlign: "right", border: bruttoOverride[emp.id] != null && bruttoOverride[emp.id] !== emp.monatslohn ? "1.5px solid #b5621e" : "1px solid #c8c0b8" }} />
+            <span style={{ fontSize: 11, color: "#888" }}>CHF</span>
+            {bruttoOverride[emp.id] != null && bruttoOverride[emp.id] !== emp.monatslohn && (
+              <button onClick={() => setBruttoOverride(o => { const n={...o}; delete n[emp.id]; return n; })}
+                title="Stammdaten-Wert wiederherstellen"
+                style={{ fontSize: 11, color: "#888", background: "none", border: "1px solid #c8c0b8", borderRadius: 4, cursor: "pointer", padding: "2px 8px" }}>↺ Reset</button>
+            )}
+          </div>
+          {bruttoOverride[emp.id] != null && bruttoOverride[emp.id] !== emp.monatslohn && (
+            <div style={{ fontSize: 10, color: "#b5621e", marginTop: 4 }}>Abweichend von Stammdaten ({formatCHF(emp.monatslohn || 0)})</div>
+          )}
+          <div style={{ fontSize: 10, letterSpacing: "0.08em", color: "#888", margin: "10px 0 6px", paddingTop: 8, borderTop: "1px solid #e0dbd4" }}>PENSUM DIESEN MONAT</div>
+          <div style={{ display: "flex", alignItems: "center", gap: 8, marginBottom: 4 }}>
+            <input type="number" min={10} max={100} step={5}
+              value={getEffPensum(emp)}
+              onChange={e => setPensumOverride(o => ({ ...o, [emp.id]: +e.target.value }))}
+              style={{ width: 72, height: 32, fontSize: 13, textAlign: "right", border: pensumOverride[emp.id] != null && pensumOverride[emp.id] !== (emp.pensum || 100) ? "1.5px solid #b5621e" : "1px solid #c8c0b8" }} />
+            <span style={{ fontSize: 11, color: "#888" }}>%</span>
+            {pensumOverride[emp.id] != null && pensumOverride[emp.id] !== (emp.pensum || 100) && (
+              <button onClick={() => setPensumOverride(o => { const n={...o}; delete n[emp.id]; return n; })}
+                title="Stammdaten-Wert wiederherstellen"
+                style={{ fontSize: 11, color: "#888", background: "none", border: "1px solid #c8c0b8", borderRadius: 4, cursor: "pointer", padding: "2px 8px" }}>↺ Reset</button>
+            )}
+          </div>
+          {pensumOverride[emp.id] != null && pensumOverride[emp.id] !== (emp.pensum || 100) && (
+            <div style={{ fontSize: 10, color: "#b5621e", marginBottom: 4 }}>Abweichend von Stammdaten ({emp.pensum || 100}%)</div>
+          )}
+          <div style={{ fontSize: 10, letterSpacing: "0.08em", color: "#888", margin: "10px 0 6px", paddingTop: 8, borderTop: "1px solid #e0dbd4" }}>EINMALZAHLUNG / BONUS (AHV-pflichtig)</div>
+          <div style={{ display: "flex", gap: 8 }}>
+            <input type="number" step={100} min={0} value={bonusOverride[emp.id] || ""}
+              onChange={e => setBonusOverride(o => ({ ...o, [emp.id]: +e.target.value || 0 }))}
+              placeholder="0"
+              style={{ width: 110, height: 32, fontSize: 13, textAlign: "right", border: bonusOverride[emp.id] ? "1.5px solid #2d6a4f" : "1px solid #c8c0b8" }} />
+            <span style={{ fontSize: 11, color: "#888", lineHeight: "32px" }}>CHF</span>
+            <input value={bonusOverride[`${emp.id}_beschrieb`] || ""}
+              onChange={e => setBonusOverride(o => ({ ...o, [`${emp.id}_beschrieb`]: e.target.value }))}
+              placeholder="Beschrieb (z.B. Jahresbonus)"
+              style={{ flex: 1, height: 32, fontSize: 12, border: "1px solid #c8c0b8" }} />
+          </div>
+        </div>
+      )}
+      <div style={{ display: "flex", justifyContent: "space-between", padding: "3px 0", fontSize: 12, color: "#555" }}>
+        <span>Monatslohn {months[selMonth]} {selYear}{displayPensum < 100 ? ` (${displayPensum}%)` : ""}</span>
+        <span>{formatCHF(calc.brutto)}</span>
+      </div>
+      {displayPensum < 100 && calc.bruttoBase != null && calc.bruttoBase !== calc.brutto && (
+        <div style={{ display: "flex", justifyContent: "space-between", padding: "1px 0 3px 12px", fontSize: 10, color: "#888" }}>
+          <span>Basis 100%: {formatCHF(calc.bruttoBase)} × {displayPensum}%</span>
+        </div>
+      )}
+      {calc.dreizehnter > 0 && <LohnRow label="13. Monatslohn (1/12)" value={calc.dreizehnter} indent />}
+      {calc.bonusBetrag > 0 && <LohnRow label={emp.saetzeSnapshot ? (emp.bonusBeschrieb || "Einmalzahlung / Bonus") : (bonusOverride[`${emp.id}_beschrieb`] || "Einmalzahlung / Bonus")} value={calc.bonusBetrag} indent />}
+      <LohnRow label="Bruttolohn Total" value={calc.bruttoTotal} bold />
+      <div style={{ marginTop: 10, marginBottom: 4, fontSize: 10, letterSpacing: "0.08em", color: "#888" }}>ABZÜGE ARBEITNEHMER</div>
+      {(() => {
+        const s = emp.saetzeSnapshot || emp; // abgeschlossen: snapshot, preview: live emp
+        return <>
+          <LohnRow label={`AHV/IV/EO (${s.ahvSatz ?? 5.3}%)`} value={-calc.ahv} indent color="#8a1a1a" />
+          <LohnRow label={`ALV (${s.alvSatz ?? 1.1}%)`} value={-calc.alv} indent color="#8a1a1a" />
+          <LohnRow label={`BVG/PK (${s.bvgSatz ?? 8.0}%)`} value={-calc.bvg} indent color="#8a1a1a" />
+          <LohnRow label={`NBU (${s.nbuSatz ?? 1.5}%)`} value={-calc.nbu} indent color="#8a1a1a" />
+          <LohnRow label={`KTG (${s.ktgSatz ?? 0.5}%)`} value={-calc.ktg} indent color="#8a1a1a" />
+          {calc.qst > 0 && <LohnRow label={`Quellensteuer (${s.quellensteuerSatz ?? 10}%)`} value={-calc.qst} indent color="#8a1a1a" />}
+        </>;
+      })()}
+      <div style={{ borderTop: "1.5px solid #1a1a18", marginTop: 8, paddingTop: 8 }}>
+        <LohnRow label="Nettolohn" value={calc.netto} bold />
+      </div>
+      {calc.spesenTotal > 0 && <>
+        <div style={{ marginTop: 10, marginBottom: 4, fontSize: 10, letterSpacing: "0.08em", color: "#888" }}>SPESENERSTATTUNG</div>
+        <LohnRow label="Spesen" value={calc.spesenTotal} indent />
+      </>}
+      <div style={{ borderTop: "1.5px solid #1a1a18", marginTop: 8, paddingTop: 8 }}>
+        <LohnRow label="Auszahlung Total" value={calc.auszahlung} bold color="#2d6a4f" />
+      </div>
+      {calc.bvgAG > 0 && (() => {
+        const s = emp.saetzeSnapshot || emp;
+        return (
+          <div style={{ marginTop: 14, paddingTop: 10, borderTop: "1px dashed #c8c0b8" }}>
+            <div style={{ fontSize: 10, letterSpacing: "0.08em", color: "#888", marginBottom: 4 }}>LOHNKOSTEN ARBEITGEBER</div>
+            <LohnRow label={`PK / BVG AG-Anteil (${s.pkAGSatz ?? 8.0}%)`} value={calc.bvgAG} indent color="#b5621e" />
+            <LohnRow label="Gesamtlohnkosten (inkl. PK AG)" value={calc.auszahlung + calc.bvgAG} bold />
+          </div>
+        );
+      })()}
+    </div>
+  );
+
+  return (
+    <div>
+      {ConfirmModalEl}
+      <div style={{ display: "flex", alignItems: "center", gap: 10, marginBottom: 4 }}>
+        
+      </div>
+      <Header title="Löhne" />
+      {employees.length === 0 ? (
+        <div className="card" style={{ padding: 0 }}>
+          <table>
+            <thead><tr><th>Name</th><th style={{ textAlign: "right" }}>Brutto</th><th style={{ textAlign: "right" }}>Netto</th><th style={{ textAlign: "right" }}>Spesen</th><th style={{ textAlign: "right" }}>Auszahlung</th><th>Status</th><th></th></tr></thead>
+            <tbody><tr><td colSpan={7} className="empty-state">Noch keine Mitarbeiter erfasst</td></tr></tbody>
+          </table>
+        </div>
+      ) : (
+        <div className="responsive-grid-2" style={{ display: "grid", gridTemplateColumns: "1fr 340px", gap: 20, alignItems: "start" }}>
+          <div>
+            <div className="card" style={{ display: "flex", alignItems: "center", gap: 12, padding: "12px 20px", marginBottom: 16 }}>
+              <NavArrows onPrev={goPrev} onNext={goNext} disabledNext={isAtFuture} />
+              <div style={{ flex: 1, textAlign: "center", fontFamily: "'Playfair Display', serif", fontSize: 18 }}>{months[selMonth]} {selYear}</div>
+            </div>
+            <div className="card" style={{ padding: 0 }}>
+              <div className="panel-label">MITARBEITER</div>
+              <table>
+                <thead><tr>
+                  <th>Name</th>
+                  <th style={{ textAlign: "right" }}>Brutto</th>
+                  <th style={{ textAlign: "right" }}>Netto</th>
+                  <th style={{ textAlign: "right" }}>Spesen</th>
+                  <th style={{ textAlign: "right" }}>Auszahlung</th>
+                  <th>Status</th>
+                  <th></th>
+                </tr></thead>
+                <tbody>
+                  {employees.filter(e => e.monatslohn > 0).length === 0 && (
+                    <tr><td colSpan={7} className="empty-state">Noch kein Monatslohn hinterlegt.</td></tr>
+                  )}
+                  {employees.filter(e => e.monatslohn > 0).map(emp => {
+                    const available = isMonatAvailable(emp);
+                    const entry = findEntry(emp.id);
+                    const spesen = entry ? (data.expenses || []).filter(e => e.lohnEntryId === entry.id) : offeneSpesen(emp.id);
+                    const effBrutto = getEffBrutto(emp);
+                    const calc = entry ? entry : calcLohn({ ...emp, monatslohn: effBrutto, pensum: getEffPensum(emp) }, monatStr, spesen);
+                    return (
+                      <tr key={emp.id} onClick={() => available && setSelEmpId(emp.id)}
+                        style={{ cursor: available ? "pointer" : "default", background: selEmpId === emp.id ? "#faf8f5" : "", opacity: available ? 1 : 0.35 }}>
+                        <td>
+                          <strong>{emp.name}</strong>
+                          {emp.role && <div style={{ fontSize: 11, color: "#888" }}>{emp.role}</div>}
+                          {!available && <div style={{ fontSize: 10, color: "#aaa" }}>vor Eintritt</div>}
+                        </td>
+                        <td style={{ textAlign: "right" }}>{available ? formatCHF(calc.bruttoTotal) : "—"}</td>
+                        <td style={{ textAlign: "right" }}>{available ? formatCHF(calc.netto) : "—"}</td>
+                        <td style={{ textAlign: "right", color: calc.spesenTotal > 0 ? "#b5621e" : "#aaa" }}>{available && calc.spesenTotal > 0 ? formatCHF(calc.spesenTotal) : "—"}</td>
+                        <td style={{ textAlign: "right", fontWeight: 600 }}>{available ? formatCHF(calc.auszahlung) : "—"}</td>
+                        <td>{!available ? null : entry
+                          ? <span style={{ fontSize: 10, color: "#2d6a4f", background: "#e8f5ee", border: "1px solid #b0d8c0", borderRadius: 20, padding: "2px 10px", fontWeight: 600 }}>Abgeschlossen</span>
+                          : <span style={{ fontSize: 10, color: "#b5621e", background: "#fff8f0", border: "1px solid #f0d0a0", borderRadius: 20, padding: "2px 10px", fontWeight: 600 }}>Offen</span>}
+                        </td>
+                        <td style={{ textAlign: "right" }}>
+                          {available && (entry
+                            ? <button className="btn btn-ghost" style={{ fontSize: 11, padding: "2px 8px" }} onClick={e => { e.stopPropagation(); stornieren(entry.id); }}>Stornieren</button>
+                            : <button className="btn btn-primary" style={{ fontSize: 11, padding: "2px 10px" }} onClick={e => { e.stopPropagation(); abschliessen(emp); }}>Abschliessen</button>
+                          )}
+                        </td>
+                      </tr>
+                    );
+                  })}
+                </tbody>
+                {monatEntries.length > 0 && (() => {
+                  const t = monatEntries.reduce((s,l) => ({ b:s.b+l.bruttoTotal, n:s.n+l.netto, sp:s.sp+l.spesenTotal, a:s.a+l.auszahlung }), {b:0,n:0,sp:0,a:0});
+                  return (
+                    <tfoot>
+                      <tr style={{ borderTop: "1.5px solid #1a1a18", fontWeight: 600 }}>
+                        <td>Total</td>
+                        <td style={{ textAlign: "right" }}>{formatCHF(t.b)}</td>
+                        <td style={{ textAlign: "right" }}>{formatCHF(t.n)}</td>
+                        <td style={{ textAlign: "right" }}>{formatCHF(t.sp)}</td>
+                        <td style={{ textAlign: "right" }}>{formatCHF(t.a)}</td>
+                        <td colSpan={2}></td>
+                      </tr>
+                    </tfoot>
+                  );
+                })()}
+              </table>
+            </div>
+          </div>
+
+          <div>
+            {selectedEmp && isMonatAvailable(selectedEmp) ? (
+              <div className="card">
+                <div className="section-label" style={{ marginBottom: 4 }}>LOHNABRECHNUNG</div>
+                <div style={{ fontFamily: "'Playfair Display', serif", fontSize: 18, marginBottom: 2 }}>{selectedEmp.name}</div>
+                <div style={{ fontSize: 11, color: "#888", marginBottom: 16 }}>{[selectedEmp.role, `${months[selMonth]} ${selYear}`, cardPensum < 100 ? `${cardPensum}%` : null].filter(Boolean).join(" · ")}</div>
+                {existingEntry
+                  ? renderCalc(existingEntry, { ...selectedEmp, ...existingEntry.empSnapshot, saetzeSnapshot: existingEntry.saetzeSnapshot }, false, existingEntry.saetzeSnapshot?.pensum || 100)
+                  : renderCalc(previewCalc, selectedEmp, true, getEffPensum(selectedEmp))
+                }
+                {(() => {
+                  const sp = existingEntry ? (data.expenses||[]).filter(e => e.lohnEntryId === existingEntry.id) : previewSpesen;
+                  return sp.length > 0 ? (
+                    <div style={{ marginTop: 14, paddingTop: 12, borderTop: "1px solid #ece8e2" }}>
+                      <div style={{ fontSize: 10, letterSpacing: "0.08em", color: "#888", marginBottom: 8 }}>SPESEN DETAIL</div>
+                      {sp.map(s => (
+                        <div key={s.id} style={{ display: "flex", justifyContent: "space-between", fontSize: 11, color: "#888", padding: "2px 0" }}>
+                          <span>{s.category}{s.description ? ` — ${s.description}` : ""}</span>
+                          <span>{formatCHF(s.amount)}</span>
+                        </div>
+                      ))}
+                    </div>
+                  ) : null;
+                })()}
+                <div style={{ marginTop: 16, display: "flex", gap: 8 }}>
+                  {existingEntry ? (
+                    <>
+                      <button className="btn btn-ghost" style={{ flex: 1, fontSize: 11 }} onClick={() => setPrintContent({ type: "lohn", entry: existingEntry, emp: selectedEmp, data, monatLabel: `${months[selMonth]} ${selYear}` })}>PDF</button>
+                      <button className="btn btn-ghost" style={{ fontSize: 11, color: "#8a1a1a", borderColor: "#8a1a1a" }} onClick={() => stornieren(existingEntry.id)}>Stornieren</button>
+                    </>
+                  ) : (
+                    <button className="btn btn-primary" style={{ flex: 1, fontSize: 11 }}
+                      onClick={() => abschliessen(selectedEmp)}
+                      disabled={!selectedEmp.monatslohn && bruttoOverride[selectedEmp.id] == null}>
+                      Lohnabrechnung abschliessen
+                    </button>
+                  )}
+                </div>
+                {!existingEntry && !selectedEmp.monatslohn && bruttoOverride[selectedEmp.id] == null && (
+                  <div style={{ marginTop: 10, fontSize: 11, color: "#b5621e" }}>Kein Monatslohn hinterlegt.</div>
+                )}
+              </div>
+            ) : (
+              <div className="card" style={{ color: "#aaa", textAlign: "center", padding: 40, fontSize: 13 }}>
+                Mitarbeiter auswählen für Detailansicht
+              </div>
+            )}
+          </div>
+        </div>
+      )}
+    </div>
+  );
+}
diff --git a/src/views/Login.jsx b/src/views/Login.jsx
new file mode 100755
index 0000000..3298a0e
--- /dev/null
+++ b/src/views/Login.jsx
@@ -0,0 +1,148 @@
+import React, { useState } from "react";
+
+export default function Login({ users, settings, onLogin, version }) {
+  const [username, setUsername] = useState("");
+  const [password, setPassword] = useState("");
+  const [error, setError] = useState(false);
+  const [shake, setShake] = useState(false);
+
+  const handleSubmit = (e) => {
+    e.preventDefault();
+    const user = (users || []).find(
+      u => u.username === username && u.password === password
+    );
+    if (user) {
+      onLogin(user);
+    } else {
+      setError(true);
+      setShake(true);
+      setTimeout(() => setShake(false), 500);
+    }
+  };
+
+  const studioName = settings?.name || "Studio";
+
+  return (
+    <div style={{
+      minHeight: "100vh", minWidth: "100vw",
+      background: "#ebe7e1",
+      display: "flex", alignItems: "center", justifyContent: "center",
+      fontFamily: "'DM Mono', 'Courier New', monospace",
+      position: "fixed", inset: 0, zIndex: 9999,
+    }}>
+      <style>{`
+        @import url('https://fonts.googleapis.com/css2?family=Archivo+Black&family=DM+Mono:wght@300;400;500&family=Playfair+Display:ital,wght@0,400;1,400&display=swap');
+        @keyframes login-shake {
+          0%,100% { transform: translateX(0); }
+          20%,60% { transform: translateX(-8px); }
+          40%,80% { transform: translateX(8px); }
+        }
+        @keyframes login-fade-in {
+          from { opacity: 0; transform: translateY(16px); }
+          to   { opacity: 1; transform: translateY(0); }
+        }
+        .login-card {
+          animation: login-fade-in 0.5s cubic-bezier(0.22,1,0.36,1) both;
+        }
+        .login-card.shake {
+          animation: login-shake 0.45s ease;
+        }
+        .login-input {
+          width: 100%; box-sizing: border-box;
+          background: #f7f4f0; border: 1.5px solid #ddd8d0;
+          border-radius: 10px; padding: 11px 14px;
+          font-family: 'DM Mono', monospace; font-size: 13px;
+          color: #1a1a18; outline: none;
+          transition: border-color 0.18s, box-shadow 0.18s;
+        }
+        .login-input:focus {
+          border-color: #9a7858;
+          box-shadow: 0 0 0 3px rgba(154,120,88,0.14);
+        }
+        .login-input.error {
+          border-color: #b5621e;
+          box-shadow: 0 0 0 3px rgba(181,98,30,0.12);
+        }
+        .login-btn {
+          width: 100%; padding: 13px;
+          background: #1a1a18; color: #f0ede8;
+          border: none; border-radius: 10px;
+          font-family: 'DM Mono', monospace; font-size: 13px;
+          font-weight: 500; letter-spacing: 0.04em;
+          cursor: pointer; transition: background 0.18s, box-shadow 0.18s;
+        }
+        .login-btn:hover {
+          background: #2e2e28;
+          box-shadow: 0 4px 16px rgba(0,0,0,0.28);
+        }
+        .login-btn:active { background: #0e0e0c; }
+      `}</style>
+
+      <div className={`login-card${shake ? " shake" : ""}`} style={{
+        background: "#fdfcfa",
+        borderRadius: 20,
+        padding: "48px 44px 40px",
+        width: "100%", maxWidth: 380,
+        boxShadow: "0 8px 40px rgba(0,0,0,0.10), 0 2px 8px rgba(0,0,0,0.07)",
+        border: "1px solid #ddd8d0",
+        margin: "0 20px",
+      }}>
+        {/* Logo */}
+        <div style={{ textAlign: "center", marginBottom: 36 }}>
+          <div style={{ fontFamily: "Krungthep, 'Archivo Black', sans-serif", fontSize: 36, color: "#1a1a18", letterSpacing: "-0.02em", lineHeight: 1 }}>
+            RAPPORT
+          </div>
+          <div style={{ fontSize: 9, color: "#b0aca4", letterSpacing: "0.2em", marginTop: 8, fontWeight: 500 }}>
+            {studioName.toUpperCase()}
+          </div>
+          <div style={{ width: 32, height: 1.5, background: "#ddd8d0", margin: "16px auto 0" }} />
+        </div>
+
+        <form onSubmit={handleSubmit}>
+          <div style={{ marginBottom: 14 }}>
+            <label style={{ display: "block", fontSize: 9, letterSpacing: "0.15em", color: "#8c8880", marginBottom: 7, fontWeight: 500 }}>
+              BENUTZER
+            </label>
+            <input
+              className={`login-input${error ? " error" : ""}`}
+              type="text"
+              autoComplete="username"
+              autoFocus
+              value={username}
+              onChange={e => { setUsername(e.target.value); setError(false); }}
+              placeholder="admin"
+            />
+          </div>
+
+          <div style={{ marginBottom: 28 }}>
+            <label style={{ display: "block", fontSize: 9, letterSpacing: "0.15em", color: "#8c8880", marginBottom: 7, fontWeight: 500 }}>
+              PASSWORT
+            </label>
+            <input
+              className={`login-input${error ? " error" : ""}`}
+              type="password"
+              autoComplete="current-password"
+              value={password}
+              onChange={e => { setPassword(e.target.value); setError(false); }}
+              placeholder="••••••"
+            />
+          </div>
+
+          {error && (
+            <div style={{ marginBottom: 18, padding: "9px 14px", background: "#fff5f0", borderRadius: 8, border: "1px solid #f5c9b0", fontSize: 11, color: "#b5621e", textAlign: "center" }}>
+              Falscher Benutzername oder Passwort
+            </div>
+          )}
+
+          <button className="login-btn" type="submit">
+            Anmelden
+          </button>
+        </form>
+
+        <div style={{ marginTop: 24, textAlign: "center", fontSize: 9, color: "#c8c4be", letterSpacing: "0.08em" }}>
+          {version ? `V${version}` : ""}
+        </div>
+      </div>
+    </div>
+  );
+}
diff --git a/src/views/MigrationScreen.jsx b/src/views/MigrationScreen.jsx
new file mode 100644
index 0000000..f643fc3
--- /dev/null
+++ b/src/views/MigrationScreen.jsx
@@ -0,0 +1,141 @@
+import React, { useState } from "react";
+import Setup from "./Setup.jsx";
+
+export default function MigrationScreen({ data, onComplete }) {
+  const [backed, setBacked] = useState(false);
+  const [goSetup, setGoSetup] = useState(false);
+
+  const studioName = data.settings?.name || "Studio";
+
+  if (goSetup) {
+    return <Setup onComplete={onComplete} />;
+  }
+
+  const handleBackup = () => {
+    try {
+      const stored = localStorage.getItem("studio_data_v1") || JSON.stringify(data);
+      const blob = new Blob([stored], { type: "application/json" });
+      const url = URL.createObjectURL(blob);
+      const a = document.createElement("a");
+      a.href = url;
+      a.download = `rapport-backup-${new Date().toISOString().split("T")[0]}.json`;
+      document.body.appendChild(a);
+      a.click();
+      document.body.removeChild(a);
+      URL.revokeObjectURL(url);
+    } catch {}
+    setBacked(true);
+  };
+
+  return (
+    <div style={{
+      minHeight: "100vh", minWidth: "100vw",
+      background: "#ebe7e1",
+      display: "flex", alignItems: "center", justifyContent: "center",
+      fontFamily: "'DM Mono', 'Courier New', monospace",
+      position: "fixed", inset: 0, zIndex: 9999,
+      overflowY: "auto", padding: "24px 0",
+    }}>
+      <style>{`
+        @import url('https://fonts.googleapis.com/css2?family=Archivo+Black&family=DM+Mono:wght@300;400;500&display=swap');
+        @keyframes mig-fade-in {
+          from { opacity: 0; transform: translateY(16px); }
+          to   { opacity: 1; transform: translateY(0); }
+        }
+        .mig-card { animation: mig-fade-in 0.5s cubic-bezier(0.22,1,0.36,1) both; }
+        .mig-btn-primary {
+          width: 100%; padding: 13px;
+          background: #1a1a18; color: #f0ede8;
+          border: none; border-radius: 10px;
+          font-family: 'DM Mono', monospace; font-size: 13px;
+          font-weight: 500; letter-spacing: 0.04em;
+          cursor: pointer; transition: background 0.18s;
+        }
+        .mig-btn-primary:hover { background: #2e2e28; }
+        .mig-btn-backup {
+          width: 100%; padding: 13px;
+          background: transparent; color: #1a1a18;
+          border: 2px solid #1a1a18; border-radius: 10px;
+          font-family: 'DM Mono', monospace; font-size: 13px;
+          font-weight: 500; letter-spacing: 0.04em;
+          cursor: pointer; transition: background 0.18s;
+          display: flex; align-items: center; justify-content: center; gap: 8px;
+        }
+        .mig-btn-backup:hover { background: #f0ece6; }
+        .mig-btn-backup.done { border-color: #2d6a4f; color: #2d6a4f; background: #eaf5ee; cursor: default; }
+        .mig-skip { background: none; border: none; font-family: inherit; font-size: 11px; color: #aaa; cursor: pointer; text-decoration: underline; padding: 0; }
+        .mig-skip:hover { color: #888; }
+      `}</style>
+
+      <div className="mig-card" style={{
+        background: "#fdfcfa",
+        borderRadius: 20,
+        padding: "44px 40px 36px",
+        width: "100%", maxWidth: 440,
+        boxShadow: "0 8px 40px rgba(0,0,0,0.10), 0 2px 8px rgba(0,0,0,0.07)",
+        border: "1px solid #ddd8d0",
+        margin: "0 20px",
+      }}>
+        {/* Header */}
+        <div style={{ textAlign: "center", marginBottom: 28 }}>
+          <div style={{ fontFamily: "Krungthep, 'Archivo Black', sans-serif", fontSize: 30, color: "#1a1a18", letterSpacing: "-0.02em", lineHeight: 1 }}>
+            RAPPORT
+          </div>
+          <div style={{ fontSize: 9, color: "#b0aca4", letterSpacing: "0.2em", marginTop: 6, fontWeight: 500 }}>
+            {studioName.toUpperCase()}
+          </div>
+          <div style={{ width: 32, height: 1.5, background: "#ddd8d0", margin: "14px auto 0" }} />
+        </div>
+
+        {/* Info banner */}
+        <div style={{ padding: "14px 16px", background: "#fff8ed", borderRadius: 10, border: "1px solid #f0e4c4", marginBottom: 10 }}>
+          <div style={{ fontSize: 11, fontWeight: 600, color: "#b07848", letterSpacing: "0.06em", marginBottom: 6 }}>
+            VERSION 0.5 — NEUE INITIALISIERUNG
+          </div>
+          <div style={{ fontSize: 12, color: "#7a5a30", lineHeight: 1.65 }}>
+            Diese Version enthält umfangreiche Datenbankänderungen und ein neues Anmeldesystem. Die App muss neu eingerichtet werden.
+          </div>
+        </div>
+
+        {/* Recommendation */}
+        <div style={{ padding: "12px 16px", background: "#f5f0e8", borderRadius: 10, border: "1px solid #e0d8cc", marginBottom: 24, fontSize: 12, color: "#5a5040", lineHeight: 1.65 }}>
+          <strong style={{ display: "block", marginBottom: 4, fontSize: 11, letterSpacing: "0.06em", color: "#1a1a18" }}>EMPFEHLUNG</strong>
+          Sichern Sie zuerst die bestehenden Daten. Alte Datenbankstrukturen sind zwar importierbar, das Einspielen von Backups zum Testen wird jedoch ausdrücklich abgeraten — umbenannte Felder können zu Fehlern führen.
+        </div>
+
+        {/* Step 1: Backup */}
+        <div style={{ marginBottom: 6 }}>
+          <div style={{ fontSize: 9, letterSpacing: "0.15em", color: "#8c8880", marginBottom: 8, fontWeight: 500 }}>
+            SCHRITT 1 — DATEN SICHERN
+          </div>
+          <button
+            className={`mig-btn-backup${backed ? " done" : ""}`}
+            onClick={backed ? undefined : handleBackup}
+          >
+            {backed
+              ? <><span>✓</span> Backup heruntergeladen</>
+              : <><span style={{ fontSize: 16 }}>↓</span> Datenbank herunterladen</>
+            }
+          </button>
+          {!backed && (
+            <div style={{ textAlign: "right", marginTop: 6 }}>
+              <button className="mig-skip" onClick={() => setBacked(true)}>
+                Kein Backup nötig — überspringen
+              </button>
+            </div>
+          )}
+        </div>
+
+        {/* Step 2: Setup */}
+        <div style={{ marginTop: 20, opacity: backed ? 1 : 0.3, transition: "opacity 0.3s", pointerEvents: backed ? "auto" : "none" }}>
+          <div style={{ fontSize: 9, letterSpacing: "0.15em", color: "#8c8880", marginBottom: 8, fontWeight: 500 }}>
+            SCHRITT 2 — NEU EINRICHTEN
+          </div>
+          <button className="mig-btn-primary" onClick={() => setGoSetup(true)}>
+            Weiter zur Einrichtung
+          </button>
+        </div>
+      </div>
+    </div>
+  );
+}
diff --git a/src/views/Mitarbeiter.jsx b/src/views/Mitarbeiter.jsx
new file mode 100755
index 0000000..404505b
--- /dev/null
+++ b/src/views/Mitarbeiter.jsx
@@ -0,0 +1,1284 @@
+import React, { useState } from "react";
+import { generateId, formatDate, formatIban, formatCHF, getFeiertageForYear, getAbsenzTypes, getWorkdaysInMonth, calcLohn } from "../utils.js";
+import { Header, Modal, FormField, useConfirm , DateInput, DatePicker } from "../components/UI.jsx";
+
+export default
+function Mitarbeiter({ data, update, saveAll, setPrintContent }) {
+  const employees = data.employees || [];
+  const feiertage = data.feiertage || [];
+  const absenzTypes = getAbsenzTypes(data);
+  const absences = data.absences || [];
+  const ferienEntries = data.ferienEntries || [];
+
+  const [tab, setTab] = useState(employees.length === 0 ? "mitarbeiter" : "übersicht"); // "übersicht" | "mitarbeiter" | "feiertage" | "absenztypen"
+  const [selectedEmpId, setSelectedEmpId] = useState(null);
+  const [modal, setModal] = useState(null);
+  const [empForm, setEmpForm] = useState({});
+  const [absForm, setAbsForm] = useState({ employeeId: "", type: "", dateFrom: "", dateTo: "", note: "" });
+  const { askConfirm, ConfirmModalEl } = useConfirm();
+  const [ferienForm, setFerienForm] = useState({ employeeId: "", dateFrom: "", dateTo: "", note: "" });
+  const [viewYear, setViewYear] = useState(new Date().getFullYear());
+  const [viewMonth, setViewMonth] = useState(new Date().getMonth());
+  const [abschlussYear, setAbschlussYear] = useState(new Date().getFullYear() - 1);
+  const [abschlussForm, setAbschlussForm] = useState({});
+
+  const selectedEmp = employees.find(e => e.id === selectedEmpId) ?? null;
+
+  // ── Kalkulationen ──
+  const calcEmpMonth = (emp, year, month) => {
+    const today = new Date().toISOString().slice(0, 10);
+    const monthStr = `${year}-${String(month + 1).padStart(2, "0")}`;
+    const entryDate = emp.eintrittsdatum || null;
+    const monthLastDay = `${monthStr}-${new Date(year, month + 1, 0).getDate().toString().padStart(2, "0")}`;
+
+    // Monat liegt vollständig vor Anstellung → leer
+    if (entryDate && entryDate > monthLastDay) return { sollTotal: 0, istH: 0, absenzH: 0, ferienH: 0, saldo: 0, notStarted: true };
+
+    const pensum = (emp.pensum || 100) / 100;
+    const tagessoll = ((emp.wochenstunden || 35) * pensum) / 5;
+    const workdays = getWorkdaysInMonth(year, month, getFTYear(year));
+
+    // Soll: nur Arbeitstage ab Eintrittsdatum und bis heute
+    const sollTotal = workdays.reduce((s, d) => {
+      if (entryDate && d.date < entryDate) return s;
+      if (d.date > today) return s;
+      const ft = getFTYear(year).find(f => f.date === d.date);
+      if (ft && (ft.stundenDelta === 0 || ft.stundenDelta === undefined || ft.stundenDelta === null)) return s;
+      return s + tagessoll + (ft?.stundenDelta || 0);
+    }, 0);
+
+    const istMins = (data.timeEntries || []).filter(e => e.employeeId === emp.id && (e.date || "").startsWith(monthStr)).reduce((s, e) => s + (e.minutes || 0), 0);
+
+    // Absenzen: unterstützt sowohl date als auch dateFrom/dateTo
+    const empAbsences = absences.filter(a => a.employeeId === emp.id);
+    const absenzH = empAbsences.reduce((s, a) => {
+      const from = a.dateFrom || a.date; const to = a.dateTo || a.date;
+      if (!from) return s;
+      if (from.slice(0, 7) > monthStr || to.slice(0, 7) < monthStr) return s;
+      const days = workdays.filter(d => d.date >= from && d.date <= to && (!entryDate || d.date >= entryDate) && d.date <= today && !(d.feiertag && (d.feiertag.stundenDelta === 0 || d.feiertag.stundenDelta === null || d.feiertag.stundenDelta === undefined)));
+      return s + days.length * tagessoll;
+    }, 0);
+
+    // Ferien
+    const empFerienRaw = ferienEntries.filter(f => f.employeeId === emp.id && (!f.status || f.status === "approved"));
+    const ferienH = empFerienRaw.reduce((s, f) => {
+      if (!f.dateFrom) return s;
+      if (f.dateFrom.slice(0, 7) > monthStr || f.dateTo.slice(0, 7) < monthStr) return s;
+      const days = workdays.filter(d => d.date >= f.dateFrom && d.date <= f.dateTo && (!entryDate || d.date >= entryDate) && d.date <= today && !(d.feiertag && (d.feiertag.stundenDelta === 0 || d.feiertag.stundenDelta === null || d.feiertag.stundenDelta === undefined)));
+      return s + days.length * tagessoll;
+    }, 0);
+
+    const istH = istMins / 60;
+    const saldo = istH + absenzH + ferienH - sollTotal;
+    return { sollTotal: Math.round(sollTotal * 10) / 10, istH: Math.round(istH * 10) / 10, absenzH: Math.round(absenzH * 10) / 10, ferienH: Math.round(ferienH * 10) / 10, saldo: Math.round(saldo * 10) / 10 };
+  };
+
+  const getFTYear = (year) => getFeiertageForYear(feiertage, year);
+
+  // Ferien-Kalkulation für ein Jahr
+  // Ferien-Kalkulation für ein Jahr
+  const calcFerienYear = (emp, year) => {
+    const anspruch = emp.ferienWochen || 4;
+    const pensum = (emp.pensum || 100) / 100;
+    const wochenstunden = emp.wochenstunden || 35;
+    const yearStr = String(year);
+    const yearStart = `${year}-01-01`;
+    const yearEnd = `${year}-12-31`;
+    const eintrittsdatum = emp.eintrittsdatum || null;
+
+    if (eintrittsdatum && eintrittsdatum > yearEnd) {
+      return { anspruchH: 0, ubertragH: 0, bezogenH: 0, zukunftH: 0, restH: 0 };
+    }
+    let proRata = 1;
+    if (eintrittsdatum && eintrittsdatum > yearStart) {
+      const entryMonth = parseInt(eintrittsdatum.slice(5, 7));
+      proRata = (13 - entryMonth) / 12;
+    }
+    const anspruchH = Math.round(anspruch * wochenstunden * pensum * proRata * 10) / 10;
+
+    const empFerien = ferienEntries.filter(f => f.employeeId === emp.id && (!f.status || f.status === "approved"));
+    const vorjahr = emp.ferienUebertragVorjahr || {};
+    const ubertragH = vorjahr[year] || 0;
+
+    const bezogenH = empFerien.filter(f => f.dateFrom.startsWith(yearStr) || f.dateTo.startsWith(yearStr)).reduce((s, f) => {
+      const fyear = f.dateFrom.startsWith(yearStr) ? year : year;
+      // count workdays in this entry within the year
+      let count = 0;
+      const d = new Date(f.dateFrom);
+      const end = new Date(f.dateTo);
+      const fts = getFTYear(year);
+      while (d <= end) {
+        const ds = d.toISOString().slice(0, 10);
+        if (ds.startsWith(yearStr)) {
+          const dow = d.getDay();
+          if (dow !== 0 && dow !== 6 && !fts.some(ft => ft.date === ds && !ft.stundenDelta)) count++;
+        }
+        d.setDate(d.getDate() + 1);
+      }
+      const tagessoll = (wochenstunden * pensum) / 5;
+      return s + count * tagessoll;
+    }, 0);
+
+    const zukunftH = empFerien.filter(f => f.dateFrom > new Date().toISOString().slice(0, 10) && f.dateFrom.startsWith(yearStr)).reduce((s, f) => {
+      let count = 0;
+      const d = new Date(f.dateFrom);
+      const end = new Date(f.dateTo);
+      const fts = getFTYear(year);
+      while (d <= end) {
+        const ds = d.toISOString().slice(0, 10);
+        const dow = d.getDay();
+        if (dow !== 0 && dow !== 6 && !fts.some(ft => ft.date === ds && !ft.stundenDelta)) count++;
+        d.setDate(d.getDate() + 1);
+      }
+      const tagessoll = (wochenstunden * pensum) / 5;
+      return s + count * tagessoll;
+    }, 0);
+
+    return {
+      anspruchH: Math.round(anspruchH * 10) / 10,
+      ubertragH: Math.round(ubertragH * 10) / 10,
+      bezogenH: Math.round(bezogenH * 10) / 10,
+      zukunftH: Math.round(zukunftH * 10) / 10,
+      restH: Math.round((anspruchH + ubertragH - bezogenH) * 10) / 10,
+    };
+  };
+
+
+  // Überstundensaldo (total von Eintritt bis heute, minus bereits ausbezahlte)
+  const calcEffectiveUbSaldo = (emp) => {
+    if (!emp?.eintrittsdatum) return 0;
+    const today = new Date().toISOString().slice(0, 10);
+    const start = emp.eintrittsdatum;
+    if (start > today) return 0;
+    const startY = parseInt(start.slice(0, 4));
+    const startM = parseInt(start.slice(5, 7)) - 1;
+    const endY = new Date().getFullYear();
+    const endM = new Date().getMonth();
+    let total = 0;
+    let y = startY, m = startM;
+    while (y < endY || (y === endY && m <= endM)) {
+      total += calcEmpMonth(emp, y, m).saldo;
+      m++;
+      if (m > 11) { m = 0; y++; }
+    }
+    const settled = (data.uberstundenAbschluss || [])
+      .filter(a => a.empId === emp.id && a.type === "payout")
+      .reduce((s, a) => s + (a.hoursSettled || 0), 0);
+    return Math.round((total - settled) * 10) / 10;
+  };
+
+  const saveFerienUebertrag = (emp, hours) => {
+    const updated = employees.map(e => e.id === emp.id ? {
+      ...e,
+      ferienUebertragVorjahr: { ...(e.ferienUebertragVorjahr || {}), [abschlussYear + 1]: +hours }
+    } : e);
+    update("employees", updated);
+  };
+
+  const saveUbAbschluss = (emp, form) => {
+    const stundenlohn = emp.monatslohn
+      ? Math.round((emp.monatslohn * 12 / ((emp.wochenstunden || 35) * 52)) * 100) / 100
+      : 0;
+    if (!stundenlohn || !(form.ubHours > 0)) return;
+    const auszahlungBetrag = Math.round(form.ubHours * stundenlohn * (1 + form.ubZuschlag / 100) * 100) / 100;
+    const entry = {
+      id: generateId(),
+      empId: emp.id,
+      year: abschlussYear,
+      date: new Date().toISOString().slice(0, 10),
+      type: "payout",
+      hoursSettled: form.ubHours,
+      zuschlagPercent: form.ubZuschlag,
+      stundenlohn,
+      auszahlungBetrag,
+    };
+    update("uberstundenAbschluss", [...(data.uberstundenAbschluss || []), entry]);
+    setAbschlussForm(prev => ({ ...prev, [emp.id]: { ...form, ubHours: 0 } }));
+  };
+
+  // ── Handlers ──
+  const nextPersonalNr = () => {
+    const nums = employees
+      .map(e => e.personalNr)
+      .filter(n => n && /^\d+$/.test(String(n)))
+      .map(n => parseInt(n));
+    const next = nums.length ? Math.max(...nums) + 1 : 1;
+    return String(next).padStart(3, "0");
+  };
+
+  const saveEmp = () => {
+    if (!empForm.name?.trim()) { alert("Bitte einen Namen eingeben."); return; }
+    if (!empForm.eintrittsdatum) { alert("Bitte ein Eintrittsdatum angeben."); return; }
+    if (empForm._appAccess && !empForm._appUsername?.trim()) { alert("Bitte einen Benutzernamen eingeben."); return; }
+    const isNew = !empForm.id;
+    const { _appAccess, _appUsername, _appPassword, _appRoleId, _appUserId, ...empData } = empForm;
+    const empId = empData.id || generateId();
+    const emp = { ...empData, id: empId };
+
+    const existingUserId = _appUserId;
+    let updatedUsers = data.users || [];
+    if (_appAccess) {
+      const userId = existingUserId || generateId();
+      const existing = updatedUsers.find(u => u.id === userId);
+      const userEntry = {
+        id: userId,
+        username: _appUsername.trim(),
+        password: _appPassword?.trim() || existing?.password || _appUsername.trim(),
+        role: "mitarbeiter",
+        displayName: emp.name,
+        employeeId: empId,
+        appRoleId: _appRoleId || "",
+      };
+      updatedUsers = existing ? updatedUsers.map(u => u.id === userId ? userEntry : u) : [...updatedUsers, userEntry];
+      emp.appUserId = userId;
+    } else if (existingUserId) {
+    } else if (existingUserId) {
+      const isLastAdmin = (data.users || []).filter(u => u.role === "admin").length <= 1
+        && (data.users || []).find(u => u.id === existingUserId)?.role === "admin";
+      if (isLastAdmin) { alert("Mindestens ein Administrator muss bestehen bleiben."); return; }
+      updatedUsers = updatedUsers.filter(u => u.id !== existingUserId);
+      delete emp.appUserId;
+    }
+
+    const updatedEmployees = isNew ? [...employees, emp] : employees.map(e => e.id === emp.id ? emp : e);
+    saveAll({ ...data, employees: updatedEmployees, users: updatedUsers });
+    if (isNew) setSelectedEmpId(empId);
+    setModal(null);
+  };
+  const delEmp = async (id) => { if (await askConfirm("Mitarbeiter löschen?")) { update("employees", employees.filter(e => e.id !== id)); if (selectedEmpId === id) setSelectedEmpId(null); } };
+
+  const saveAbs = () => {
+    const isNew = !absForm.id;
+    const a = { ...absForm, id: absForm.id || generateId() };
+    update("absences", isNew ? [...absences, a] : absences.map(x => x.id === a.id ? a : x));
+    setModal(null);
+  };
+  const delAbs = (id) => update("absences", absences.filter(a => a.id !== id));
+
+  const saveFerien = () => {
+    const isNew = !ferienForm.id;
+    const f = { ...ferienForm, id: ferienForm.id || generateId() };
+    update("ferienEntries", isNew ? [...ferienEntries, f] : ferienEntries.map(x => x.id === f.id ? f : x));
+    setModal(null);
+  };
+  const delFerien = (id) => update("ferienEntries", ferienEntries.filter(f => f.id !== id));
+
+  const months = ["Januar","Februar","März","April","Mai","Juni","Juli","August","September","Oktober","November","Dezember"];
+
+  const empId = selectedEmp?.id;
+  const monthStats = empId ? calcEmpMonth(selectedEmp, viewYear, viewMonth) : null;
+  const ferienStats = empId ? calcFerienYear(selectedEmp, viewYear) : null;
+  const empAbsences = empId ? absences.filter(a => a.employeeId === empId) : [];
+  const empFerien = empId ? ferienEntries.filter(f => f.employeeId === empId) : [];
+
+  const closedMonths = data.settings.closedMonths || [];
+  const toggleMonth = (monthStr) => {
+    const updated = closedMonths.includes(monthStr)
+      ? closedMonths.filter(m => m !== monthStr)
+      : [...closedMonths, monthStr];
+    update("settings", { ...data.settings, closedMonths: updated });
+  };
+
+  const TABS = [
+    { id: "übersicht", label: "Übersicht" },
+    { id: "ferien", label: "Ferien & Intern / Absenzen" },
+    { id: "mitarbeiter", label: "Mitarbeiter" },
+    { id: "monatsabschluss", label: "Monatsabschluss" },
+    { id: "jahresabschluss", label: "Jahresabschluss" },
+  ];
+
+  return (
+    <div>
+      {ConfirmModalEl}
+      <Header title="Mitarbeiter" action={
+        <div style={{ display: "flex", gap: 8 }}>
+          <button className="btn btn-ghost" onClick={() => setPrintContent({ type: "mitarbeiterOverview", employees, settings: data.settings })}>PDF Übersicht</button>
+          <button className="btn btn-primary" onClick={() => { setEmpForm({ pensum: 100, wochenstunden: data.settings.defaultWochenstunden || 35, ferienWochen: data.settings.defaultFerienWochen || 5, pkAGSatz: data.settings.defaultPkAGSatz || 8.0, ferienUebertragVorjahr: {}, personalNr: nextPersonalNr(), _appAccess: false, _appUsername: "", _appPassword: "", _appRoleId: (data.appRoles || []).find(r => r.id !== "r-admin")?.id || "", _appUserId: undefined }); setModal("emp"); }}>+ Mitarbeiter</button>
+        </div>
+      } />
+
+
+      <div className="filter-bar">
+        {TABS.map(t => (
+          <button key={t.id} onClick={() => setTab(t.id)} className={`pill${tab === t.id ? " active" : ""}`}>{t.label}</button>
+        ))}
+      </div>
+
+
+      {/* ── ÜBERSICHT ── */}
+      {tab === "übersicht" && (
+        <div>
+          {employees.length === 0 ? (
+            <div className="card" style={{ textAlign: "center", padding: 40, color: "#aaa", fontSize: 13 }}>
+              Noch keine Mitarbeiter erfasst — Tab «Mitarbeiter» verwenden.
+            </div>
+          ) : (
+            <>
+              {/* Monats-Navigator */}
+              <div className="card" style={{ display: "flex", alignItems: "center", gap: 12, padding: "12px 20px", marginBottom: 20 }}>
+                <button className="btn btn-ghost" style={{ padding: "0 12px" }} onClick={() => { if (viewMonth === 0) { setViewMonth(11); setViewYear(y => y - 1); } else setViewMonth(m => m - 1); }}>←</button>
+                <div style={{ flex: 1, textAlign: "center", fontFamily: "'Playfair Display', serif", fontSize: 18 }}>
+                  {months[viewMonth]} {viewYear}
+                  {closedMonths.includes(`${viewYear}-${String(viewMonth + 1).padStart(2, "0")}`) && (
+                    <span style={{ marginLeft: 10, fontSize: 11, background: "#1a1a18", color: "#f0ede8", padding: "2px 8px", borderRadius: 3, fontFamily: "inherit", fontWeight: 400 }}>geschlossen</span>
+                  )}
+                </div>
+                <button className="btn btn-ghost" style={{ padding: "0 12px" }} onClick={() => { if (viewMonth === 11) { setViewMonth(0); setViewYear(y => y + 1); } else setViewMonth(m => m + 1); }}>→</button>
+                <select value={viewYear} onChange={e => setViewYear(+e.target.value)} style={{ width: 90, fontSize: 12 }}>
+                  {[viewYear - 2, viewYear - 1, viewYear, viewYear + 1].map(y => <option key={y} value={y}>{y}</option>)}
+                </select>
+              </div>
+
+              {/* Alle Mitarbeiter — Monatstabelle */}
+              <div className="card" style={{ padding: 0, marginBottom: 20 }}>
+                <div style={{ padding: "12px 20px", fontSize: 11, letterSpacing: "0.1em", color: "#888", borderBottom: "1px solid #ece8e2" }}>
+                  MONATSÜBERSICHT — {months[viewMonth].toUpperCase()} {viewYear}
+                </div>
+                <table style={{ width: "100%" }}>
+                  <thead>
+                    <tr>
+                      <th>Mitarbeiter</th>
+                      <th style={{ textAlign: "right" }}>Soll</th>
+                      <th style={{ textAlign: "right" }}>IST</th>
+                      <th style={{ textAlign: "right" }}>Ferien</th>
+                      <th style={{ textAlign: "right" }}>Intern / Abs.</th>
+                      <th style={{ textAlign: "right" }}>Saldo Monat</th>
+                      <th style={{ textAlign: "right" }}>Ferien-Rest</th>
+                    </tr>
+                  </thead>
+                  <tbody>
+                    {employees.map(emp => {
+                      const s = calcEmpMonth(emp, viewYear, viewMonth);
+                      const fs = calcFerienYear(emp, viewYear);
+                      const saldoColor = s.saldo > 0.5 ? "#2d6a4f" : s.saldo < -0.5 ? "#8a1a1a" : "#888";
+                      return (
+                        <tr key={emp.id}>
+                          <td>
+                            <div style={{ fontWeight: 500 }}>{emp.name}</div>
+                            <div style={{ fontSize: 10, color: "#aaa" }}>{emp.pensum || 100}% · {emp.role || ""}</div>
+                          </td>
+                          <td style={{ textAlign: "right", color: "#888" }}>{s.sollTotal}h</td>
+                          <td style={{ textAlign: "right", fontWeight: 500 }}>{s.istH}h</td>
+                          <td style={{ textAlign: "right", color: "#7a6a00" }}>{s.ferienH > 0 ? `${s.ferienH}h` : "—"}</td>
+                          <td style={{ textAlign: "right", color: "#888" }}>{s.absenzH > 0 ? `${s.absenzH}h` : "—"}</td>
+                          <td style={{ textAlign: "right", fontWeight: 700, fontFamily: "'Playfair Display', serif", color: saldoColor }}>
+                            {s.saldo > 0 ? "+" : ""}{s.saldo}h
+                          </td>
+                          <td style={{ textAlign: "right", color: fs.restH < 0 ? "#8a1a1a" : "#2d6a4f", fontWeight: 500 }}>
+                            {fs.restH}h
+                          </td>
+                        </tr>
+                      );
+                    })}
+                  </tbody>
+                </table>
+              </div>
+
+              {/* Jahres-Saldo-Matrix */}
+              {(() => {
+                const today = new Date();
+                const curYear = today.getFullYear();
+                const curMonth = today.getMonth();
+                return (
+                  <div className="card" style={{ padding: 0 }}>
+                    <div style={{ padding: "12px 20px", fontSize: 11, letterSpacing: "0.1em", color: "#888", borderBottom: "1px solid #ece8e2" }}>
+                      ÜBERSTUNDEN-KONTO {viewYear} — MONATSSALDO
+                    </div>
+                    <table style={{ width: "100%", fontSize: 11 }}>
+                        <thead>
+                          <tr>
+                            <th style={{ minWidth: 140 }}>Mitarbeiter</th>
+                            {months.map((m, i) => {
+                              const mStr = `${viewYear}-${String(i + 1).padStart(2, "0")}`;
+                              const isClosed = closedMonths.includes(mStr);
+                              const isFuture = viewYear > curYear || (viewYear === curYear && i > curMonth);
+                              return (
+                                <th key={i} style={{ textAlign: "right", minWidth: 52, color: isFuture ? "#ccc" : "#555", fontWeight: 500 }}>
+                                  {m.slice(0, 3)}
+                                  {isClosed && <span style={{ display: "block", fontSize: 8, color: "#888" }}>●</span>}
+                                </th>
+                              );
+                            })}
+                            <th style={{ textAlign: "right", minWidth: 60 }}>YTD</th>
+                          </tr>
+                        </thead>
+                        <tbody>
+                          {employees.map(emp => {
+                            let ytd = 0;
+                            return (
+                              <tr key={emp.id}>
+                                <td style={{ fontWeight: 500, fontSize: 12 }}>{emp.name}</td>
+                                {months.map((_, i) => {
+                                  const isFuture = viewYear > curYear || (viewYear === curYear && i > curMonth);
+                                  if (isFuture) return <td key={i} style={{ textAlign: "right", color: "#ddd" }}>—</td>;
+                                  const s = calcEmpMonth(emp, viewYear, i);
+                                  if (s.notStarted) return <td key={i} style={{ textAlign: "right", color: "#ddd" }}>—</td>;
+                                  ytd = Math.round((ytd + s.saldo) * 10) / 10;
+                                  const color = s.saldo > 0.5 ? "#2d6a4f" : s.saldo < -0.5 ? "#8a1a1a" : "#888";
+                                  return (
+                                    <td key={i} style={{ textAlign: "right", fontWeight: 500, color }}>
+                                      {s.saldo > 0 ? "+" : ""}{s.saldo}
+                                    </td>
+                                  );
+                                })}
+                                <td style={{ textAlign: "right", fontWeight: 700, fontFamily: "'Playfair Display', serif", color: ytd > 0 ? "#2d6a4f" : ytd < 0 ? "#8a1a1a" : "#888" }}>
+                                  {ytd > 0 ? "+" : ""}{ytd}h
+                                </td>
+                              </tr>
+                            );
+                          })}
+                        </tbody>
+                      </table>
+                  </div>
+                );
+              })()}
+
+              {/* Absenz-Übersicht mit Vorjahresvergleich */}
+              {employees.length > 0 && (() => {
+                const prevYear = viewYear - 1;
+                const curMonth = new Date().getMonth();
+                const curYear = new Date().getFullYear();
+
+                const calcAbsH = (emp, year, monthIdx) => {
+                  const tagessoll = ((emp.wochenstunden || 35) * (emp.pensum || 100) / 100) / 5;
+                  const monthStr = `${year}-${String(monthIdx + 1).padStart(2, "0")}`;
+                  const workdays = getWorkdaysInMonth(year, monthIdx, getFTYear(year));
+                  return absences.filter(a => a.employeeId === emp.id).reduce((s, a) => {
+                    const from = a.dateFrom || a.date; const to = a.dateTo || a.date;
+                    if (!from || from.slice(0, 7) > monthStr || to.slice(0, 7) < monthStr) return s;
+                    const days = workdays.filter(d => d.date >= from && d.date <= to);
+                    return s + days.length * tagessoll;
+                  }, 0);
+                };
+
+                const calcInternH = (emp, year, monthIdx) => {
+                  const monthStr = `${year}-${String(monthIdx + 1).padStart(2, "0")}`;
+                  return (data.timeEntries || []).filter(e =>
+                    e.employeeId === emp.id &&
+                    !e.projectId &&
+                    (e.date || "").startsWith(monthStr)
+                  ).reduce((s, e) => s + (e.minutes || 0), 0) / 60;
+                };
+
+                return (
+                  <>
+                    {/* Absenzen-Matrix */}
+                    <div className="card" style={{ padding: 0, marginTop: 20 }}>
+                      <div style={{ padding: "12px 20px", fontSize: 11, letterSpacing: "0.1em", color: "#888", borderBottom: "1px solid #ece8e2", display: "flex", justifyContent: "space-between", alignItems: "center" }}>
+                        <span>INTERN / ABSENZEN {viewYear}</span>
+                        <span style={{ fontWeight: 400, letterSpacing: 0, color: "#aaa" }}>vs. {prevYear}</span>
+                      </div>
+                      <table style={{ width: "100%", fontSize: 11 }}>
+                        <thead>
+                          <tr>
+                            <th style={{ minWidth: 140 }}>Mitarbeiter</th>
+                            {months.map((m, i) => {
+                              const isFuture = viewYear > curYear || (viewYear === curYear && i > curMonth);
+                              return <th key={i} style={{ textAlign: "right", minWidth: 46, color: isFuture ? "#ccc" : "#555", fontWeight: 500 }}>{m.slice(0, 3)}</th>;
+                            })}
+                            <th style={{ textAlign: "right", minWidth: 52 }}>Total</th>
+                            <th style={{ textAlign: "right", minWidth: 52, color: "#aaa" }}>{prevYear}</th>
+                            <th style={{ textAlign: "right", minWidth: 46 }}>Δ</th>
+                          </tr>
+                        </thead>
+                        <tbody>
+                          {employees.map(emp => {
+                            const monthly = months.map((_, i) => Math.round(calcAbsH(emp, viewYear, i) * 10) / 10);
+                            const total = Math.round(monthly.reduce((s, h) => s + h, 0) * 10) / 10;
+                            const prevTotal = Math.round(months.reduce((s, _, i) => s + calcAbsH(emp, prevYear, i), 0) * 10) / 10;
+                            const delta = Math.round((total - prevTotal) * 10) / 10;
+                            return (
+                              <tr key={emp.id}>
+                                <td style={{ fontWeight: 500, fontSize: 12 }}>{emp.name}</td>
+                                {monthly.map((h, i) => {
+                                  const isFuture = viewYear > curYear || (viewYear === curYear && i > curMonth);
+                                  return <td key={i} style={{ textAlign: "right", color: isFuture ? "#ddd" : h > 0 ? "#8a1a1a" : "#ddd" }}>{h > 0 && !isFuture ? `${h}h` : "—"}</td>;
+                                })}
+                                <td style={{ textAlign: "right", fontWeight: 700, color: total > 0 ? "#8a1a1a" : "#888" }}>{total > 0 ? `${total}h` : "—"}</td>
+                                <td style={{ textAlign: "right", color: "#aaa" }}>{prevTotal > 0 ? `${prevTotal}h` : "—"}</td>
+                                <td style={{ textAlign: "right", fontWeight: 500, color: delta > 0 ? "#8a1a1a" : delta < 0 ? "#2d6a4f" : "#888" }}>
+                                  {delta !== 0 ? `${delta > 0 ? "+" : ""}${delta}h` : "—"}
+                                </td>
+                              </tr>
+                            );
+                          })}
+                        </tbody>
+                      </table>
+                    </div>
+
+                    {/* Absenzen nach Kategorie */}
+                    {(() => {
+                      const calcAbsHByType = (typeId, year, monthIdx) => {
+                        const monthStr = `${year}-${String(monthIdx + 1).padStart(2, "0")}`;
+                        const workdays = getWorkdaysInMonth(year, monthIdx, getFTYear(year));
+                        return absences.filter(a => a.type === typeId).reduce((s, a) => {
+                          const emp = employees.find(e => e.id === a.employeeId);
+                          if (!emp) return s;
+                          const tagessoll = ((emp.wochenstunden || 35) * (emp.pensum || 100) / 100) / 5;
+                          const from = a.dateFrom || a.date; const to = a.dateTo || a.date;
+                          if (!from || from.slice(0, 7) > monthStr || to.slice(0, 7) < monthStr) return s;
+                          const days = workdays.filter(d => d.date >= from && d.date <= to);
+                          return s + days.length * tagessoll;
+                        }, 0);
+                      };
+
+                      const usedTypes = absenzTypes.filter(t =>
+                        absences.some(a => a.type === t.id)
+                      );
+                      if (usedTypes.length === 0) return null;
+
+                      return (
+                        <div className="card" style={{ padding: 0, marginTop: 20 }}>
+                          <div style={{ padding: "12px 20px", fontSize: 11, letterSpacing: "0.1em", color: "#888", borderBottom: "1px solid #ece8e2", display: "flex", justifyContent: "space-between", alignItems: "center" }}>
+                            <span>ABSENZEN NACH KATEGORIE {viewYear}</span>
+                            <span style={{ fontWeight: 400, letterSpacing: 0, color: "#aaa" }}>vs. {prevYear}</span>
+                          </div>
+                          <table style={{ width: "100%", fontSize: 11 }}>
+                            <thead>
+                              <tr>
+                                <th style={{ minWidth: 140 }}>Kategorie</th>
+                                {months.map((m, i) => {
+                                  const isFuture = viewYear > curYear || (viewYear === curYear && i > curMonth);
+                                  return <th key={i} style={{ textAlign: "right", minWidth: 46, color: isFuture ? "#ccc" : "#555", fontWeight: 500 }}>{m.slice(0, 3)}</th>;
+                                })}
+                                <th style={{ textAlign: "right", minWidth: 52 }}>Total</th>
+                                <th style={{ textAlign: "right", minWidth: 52, color: "#aaa" }}>{prevYear}</th>
+                                <th style={{ textAlign: "right", minWidth: 46 }}>Δ</th>
+                              </tr>
+                            </thead>
+                            <tbody>
+                              {usedTypes.map(t => {
+                                const monthly = months.map((_, i) => Math.round(calcAbsHByType(t.id, viewYear, i) * 10) / 10);
+                                const total = Math.round(monthly.reduce((s, h) => s + h, 0) * 10) / 10;
+                                const prevTotal = Math.round(months.reduce((s, _, i) => s + calcAbsHByType(t.id, prevYear, i), 0) * 10) / 10;
+                                const delta = Math.round((total - prevTotal) * 10) / 10;
+                                return (
+                                  <tr key={t.id}>
+                                    <td style={{ fontSize: 12 }}>
+                                      <span style={{ display: "inline-block", width: 8, height: 8, borderRadius: "50%", background: t.color || "#888", marginRight: 7, verticalAlign: "middle" }} />
+                                      {t.label}
+                                    </td>
+                                    {monthly.map((h, i) => {
+                                      const isFuture = viewYear > curYear || (viewYear === curYear && i > curMonth);
+                                      return <td key={i} style={{ textAlign: "right", color: isFuture ? "#ddd" : h > 0 ? "#555" : "#ddd" }}>{h > 0 && !isFuture ? `${h}h` : "—"}</td>;
+                                    })}
+                                    <td style={{ textAlign: "right", fontWeight: 700 }}>{total > 0 ? `${total}h` : "—"}</td>
+                                    <td style={{ textAlign: "right", color: "#aaa" }}>{prevTotal > 0 ? `${prevTotal}h` : "—"}</td>
+                                    <td style={{ textAlign: "right", fontWeight: 500, color: delta > 0 ? "#8a1a1a" : delta < 0 ? "#2d6a4f" : "#888" }}>
+                                      {delta !== 0 ? `${delta > 0 ? "+" : ""}${delta}h` : "—"}
+                                    </td>
+                                  </tr>
+                                );
+                              })}
+                              {/* Totalzeile */}
+                              {(() => {
+                                const monthlyTotals = months.map((_, i) => Math.round(usedTypes.reduce((s, t) => s + calcAbsHByType(t.id, viewYear, i), 0) * 10) / 10);
+                                const grandTotal = Math.round(monthlyTotals.reduce((s, h) => s + h, 0) * 10) / 10;
+                                const prevGrand = Math.round(usedTypes.reduce((s, t) => s + months.reduce((s2, _, i) => s2 + calcAbsHByType(t.id, prevYear, i), 0), 0) * 10) / 10;
+                                const delta = Math.round((grandTotal - prevGrand) * 10) / 10;
+                                return (
+                                  <tr style={{ borderTop: "1.5px solid #c8c0b8", background: "#faf8f5", fontWeight: 700 }}>
+                                    <td style={{ fontSize: 12 }}>Total</td>
+                                    {monthlyTotals.map((h, i) => {
+                                      const isFuture = viewYear > curYear || (viewYear === curYear && i > curMonth);
+                                      return <td key={i} style={{ textAlign: "right", color: isFuture ? "#ddd" : h > 0 ? "#1a1a18" : "#ddd" }}>{h > 0 && !isFuture ? `${h}h` : "—"}</td>;
+                                    })}
+                                    <td style={{ textAlign: "right" }}>{grandTotal > 0 ? `${grandTotal}h` : "—"}</td>
+                                    <td style={{ textAlign: "right", color: "#aaa", fontWeight: 400 }}>{prevGrand > 0 ? `${prevGrand}h` : "—"}</td>
+                                    <td style={{ textAlign: "right", color: delta > 0 ? "#8a1a1a" : delta < 0 ? "#2d6a4f" : "#888" }}>
+                                      {delta !== 0 ? `${delta > 0 ? "+" : ""}${delta}h` : "—"}
+                                    </td>
+                                  </tr>
+                                );
+                              })()}
+                            </tbody>
+                          </table>
+                        </div>
+                      );
+                    })()}
+
+                    {/* Interne Stunden */}
+                    {(() => {
+                      const hasIntern = employees.some(emp =>
+                        months.some((_, i) => calcInternH(emp, viewYear, i) > 0 || calcInternH(emp, prevYear, i) > 0)
+                      );
+                      if (!hasIntern) return null;
+                      return (
+                        <div className="card" style={{ padding: 0, marginTop: 20 }}>
+                          <div style={{ padding: "12px 20px", fontSize: 11, letterSpacing: "0.1em", color: "#888", borderBottom: "1px solid #ece8e2", display: "flex", justifyContent: "space-between", alignItems: "center" }}>
+                            <span>INTERNE STUNDEN {viewYear} — ohne Projektzuweisung</span>
+                            <span style={{ fontWeight: 400, letterSpacing: 0, color: "#aaa" }}>vs. {prevYear}</span>
+                          </div>
+                          <table style={{ width: "100%", fontSize: 11 }}>
+                            <thead>
+                              <tr>
+                                <th style={{ minWidth: 140 }}>Mitarbeiter</th>
+                                {months.map((m, i) => {
+                                  const isFuture = viewYear > curYear || (viewYear === curYear && i > curMonth);
+                                  return <th key={i} style={{ textAlign: "right", minWidth: 46, color: isFuture ? "#ccc" : "#555", fontWeight: 500 }}>{m.slice(0, 3)}</th>;
+                                })}
+                                <th style={{ textAlign: "right", minWidth: 52 }}>Total</th>
+                                <th style={{ textAlign: "right", minWidth: 52, color: "#aaa" }}>{prevYear}</th>
+                                <th style={{ textAlign: "right", minWidth: 46 }}>Δ</th>
+                              </tr>
+                            </thead>
+                            <tbody>
+                              {employees.map(emp => {
+                                const monthly = months.map((_, i) => Math.round(calcInternH(emp, viewYear, i) * 10) / 10);
+                                const total = Math.round(monthly.reduce((s, h) => s + h, 0) * 10) / 10;
+                                const prevTotal = Math.round(months.reduce((s, _, i) => s + calcInternH(emp, prevYear, i), 0) * 10) / 10;
+                                const delta = Math.round((total - prevTotal) * 10) / 10;
+                                if (total === 0 && prevTotal === 0) return null;
+                                return (
+                                  <tr key={emp.id}>
+                                    <td style={{ fontWeight: 500, fontSize: 12 }}>{emp.name}</td>
+                                    {monthly.map((h, i) => {
+                                      const isFuture = viewYear > curYear || (viewYear === curYear && i > curMonth);
+                                      return <td key={i} style={{ textAlign: "right", color: isFuture ? "#ddd" : h > 0 ? "#2d5a8e" : "#ddd" }}>{h > 0 && !isFuture ? `${h}h` : "—"}</td>;
+                                    })}
+                                    <td style={{ textAlign: "right", fontWeight: 700, color: total > 0 ? "#2d5a8e" : "#888" }}>{total > 0 ? `${total}h` : "—"}</td>
+                                    <td style={{ textAlign: "right", color: "#aaa" }}>{prevTotal > 0 ? `${prevTotal}h` : "—"}</td>
+                                    <td style={{ textAlign: "right", fontWeight: 500, color: delta > 0 ? "#b5621e" : delta < 0 ? "#2d6a4f" : "#888" }}>
+                                      {delta !== 0 ? `${delta > 0 ? "+" : ""}${delta}h` : "—"}
+                                    </td>
+                                  </tr>
+                                );
+                              })}
+                            </tbody>
+                          </table>
+                        </div>
+                      );
+                    })()}
+                  </>
+                );
+              })()}
+            </>
+          )}
+        </div>
+      )}
+
+      {/* ── FERIEN ── */}
+      {tab === "ferien" && (
+        <div>
+          {/* Pendente Anträge */}
+          {(() => {
+            const pendingFerien = (data.ferienEntries || []).filter(f => f.status === "pending");
+            const pendingAbs = (data.absences || []).filter(a => a.status === "pending");
+            const total = pendingFerien.length + pendingAbs.length;
+            if (total === 0) return null;
+            const approveFerien = (id) => update("ferienEntries", (data.ferienEntries || []).map(f => f.id === id ? { ...f, status: "approved" } : f));
+            const rejectFerien = async (id) => { if (await askConfirm("Ferienantrag ablehnen?", "Ablehnen")) update("ferienEntries", (data.ferienEntries || []).map(f => f.id === id ? { ...f, status: "rejected" } : f)); };
+            const approveAbs = (id) => update("absences", (data.absences || []).map(a => a.id === id ? { ...a, status: "approved" } : a));
+            const rejectAbs = async (id) => { if (await askConfirm("Absenzantrag ablehnen?", "Ablehnen")) update("absences", (data.absences || []).map(a => a.id === id ? { ...a, status: "rejected" } : a)); };
+            return (
+              <div className="card" style={{ marginBottom: 20, borderLeft: "4px solid #b5621e", padding: "14px 20px" }}>
+                <div style={{ fontSize: 11, fontWeight: 600, letterSpacing: "0.1em", color: "#b5621e", marginBottom: 12 }}>
+                  ⏳ PENDENTE ANTRÄGE ({total})
+                </div>
+                <table style={{ fontSize: 12, width: "100%" }}>
+                  <thead>
+                    <tr style={{ borderBottom: "1px solid #ece8e2" }}>
+                      <th style={{ padding: "4px 8px 4px 0", fontWeight: 500, color: "#888", fontSize: 10 }}>MITARBEITER</th>
+                      <th style={{ padding: "4px 8px", fontWeight: 500, color: "#888", fontSize: 10 }}>TYP</th>
+                      <th style={{ padding: "4px 8px", fontWeight: 500, color: "#888", fontSize: 10 }}>VON</th>
+                      <th style={{ padding: "4px 8px", fontWeight: 500, color: "#888", fontSize: 10 }}>BIS</th>
+                      <th style={{ padding: "4px 8px", fontWeight: 500, color: "#888", fontSize: 10 }}>NOTIZ</th>
+                      <th style={{ padding: "4px 0", fontWeight: 500, color: "#888", fontSize: 10, textAlign: "right" }}>AKTION</th>
+                    </tr>
+                  </thead>
+                  <tbody>
+                    {pendingFerien.map(f => {
+                      const emp = employees.find(e => e.id === f.employeeId);
+                      return (
+                        <tr key={f.id} style={{ borderBottom: "1px solid #f5f2ed" }}>
+                          <td style={{ padding: "7px 8px 7px 0", fontWeight: 500 }}>{emp?.name || "—"}</td>
+                          <td style={{ padding: "7px 8px" }}><span style={{ background: "#fff8e8", color: "#8a6a3a", border: "1px solid #f0d090", borderRadius: 3, padding: "2px 7px", fontSize: 10, fontWeight: 600 }}>🌴 Ferien</span></td>
+                          <td style={{ padding: "7px 8px" }}>{formatDate(f.dateFrom)}</td>
+                          <td style={{ padding: "7px 8px" }}>{formatDate(f.dateTo)}</td>
+                          <td style={{ padding: "7px 8px", color: "#888" }}>{f.note || "—"}</td>
+                          <td style={{ padding: "7px 0", textAlign: "right", whiteSpace: "nowrap" }}>
+                            <button className="btn btn-primary" style={{ padding: "3px 10px", fontSize: 11, marginRight: 6, background: "#2d6a4f" }} onClick={() => approveFerien(f.id)}>✓ Genehmigen</button>
+                            <button className="btn btn-danger" style={{ padding: "3px 10px", fontSize: 11 }} onClick={() => rejectFerien(f.id)}><span className="material-icons" style={{ fontSize: 16 }}>close</span> Ablehnen</button>
+                          </td>
+                        </tr>
+                      );
+                    })}
+                    {pendingAbs.map(a => {
+                      const emp = employees.find(e => e.id === a.employeeId);
+                      const t = absenzTypes.find(x => x.id === a.type);
+                      return (
+                        <tr key={a.id} style={{ borderBottom: "1px solid #f5f2ed" }}>
+                          <td style={{ padding: "7px 8px 7px 0", fontWeight: 500 }}>{emp?.name || "—"}</td>
+                          <td style={{ padding: "7px 8px" }}><span className="tag" style={{ background: t?.color || "#888", fontSize: 10 }}>{t?.label || a.type || "Absenz"}</span></td>
+                          <td style={{ padding: "7px 8px" }}>{formatDate(a.dateFrom)}</td>
+                          <td style={{ padding: "7px 8px" }}>{formatDate(a.dateTo)}</td>
+                          <td style={{ padding: "7px 8px", color: "#888" }}>{a.note || "—"}</td>
+                          <td style={{ padding: "7px 0", textAlign: "right", whiteSpace: "nowrap" }}>
+                            <button className="btn btn-primary" style={{ padding: "3px 10px", fontSize: 11, marginRight: 6, background: "#2d6a4f" }} onClick={() => approveAbs(a.id)}>✓ Genehmigen</button>
+                            <button className="btn btn-danger" style={{ padding: "3px 10px", fontSize: 11 }} onClick={() => rejectAbs(a.id)}><span className="material-icons" style={{ fontSize: 16 }}>close</span> Ablehnen</button>
+                          </td>
+                        </tr>
+                      );
+                    })}
+                  </tbody>
+                </table>
+              </div>
+            );
+          })()}
+
+          <div style={{ display: "flex", justifyContent: "flex-end", gap: 10, marginBottom: 16 }}>
+            <select value={selectedEmpId || ""} onChange={e => setSelectedEmpId(e.target.value)} style={{ maxWidth: 200 }}>
+              <option value="">Alle Mitarbeiter</option>
+              {employees.map(e => <option key={e.id} value={e.id}>{e.name}</option>)}
+            </select>
+            <button className="btn btn-primary" onClick={() => { setFerienForm({ employeeId: selectedEmpId || (employees[0]?.id || ""), dateFrom: "", dateTo: "", note: "" }); setModal("ferien"); }}>+ Ferien eintragen</button>
+          </div>
+
+          <div className="card" style={{ padding: 0, marginBottom: 20 }}>
+            <div style={{ padding: "10px 16px", borderBottom: "1px solid #ece8e2", fontSize: 11, letterSpacing: "0.1em", color: "#888" }}>FERIENEINTRAGUNGEN</div>
+
+            <table>
+              <thead><tr><th>Mitarbeiter</th><th>Von</th><th>Bis</th><th>Notiz</th><th>Status</th><th></th></tr></thead>
+              <tbody>
+                {ferienEntries.filter(f => !selectedEmpId || f.employeeId === selectedEmpId).length === 0
+                  ? <tr><td colSpan={6} style={{ textAlign: "center", color: "#aaa", padding: 24 }}>Noch keine Ferien eingetragen</td></tr>
+                  : ferienEntries.filter(f => !selectedEmpId || f.employeeId === selectedEmpId)
+                      .sort((a, b) => a.dateFrom.localeCompare(b.dateFrom))
+                      .map(f => {
+                        const emp = employees.find(e => e.id === f.employeeId);
+                        const statusBadge = !f.status || f.status === "approved"
+                          ? <span style={{ fontSize: 10, color: "#2d6a4f", background: "#e8f5ee", border: "1px solid #b0d8c0", borderRadius: 3, padding: "2px 7px" }}>✓ Genehmigt</span>
+                          : f.status === "pending"
+                          ? <span style={{ fontSize: 10, color: "#b5621e", background: "#fff8f0", border: "1px solid #f0d0a0", borderRadius: 3, padding: "2px 7px" }}>⏳ Ausstehend</span>
+                          : <span style={{ fontSize: 10, color: "#8a1a1a", background: "#f5e8e8", border: "1px solid #d0b0b0", borderRadius: 3, padding: "2px 7px" }}><span className="material-icons" style={{ fontSize: 12 }}>close</span> Abgelehnt</span>;
+                        return (
+                          <tr key={f.id} style={f.status === "rejected" ? { opacity: 0.5 } : {}}>
+                            <td>{emp?.name || "—"}</td>
+                            <td>{formatDate(f.dateFrom)}</td>
+                            <td>{formatDate(f.dateTo)}</td>
+                            <td style={{ color: "#888" }}>{f.note || "—"}</td>
+                            <td>{statusBadge}</td>
+                            <td style={{ textAlign: "right", whiteSpace: "nowrap" }}>
+                              {(!f.status || f.status === "approved") && <button className="btn btn-ghost" style={{ padding: "2px 7px", fontSize: 11, marginRight: 4 }} onClick={() => { setFerienForm(f); setModal("ferien"); }}><span className="material-icons" style={{ fontSize: 16 }}>edit</span></button>}
+                              <button className="btn btn-danger" style={{ padding: "2px 7px", fontSize: 11 }} onClick={() => delFerien(f.id)}><span className="material-icons" style={{ fontSize: 16 }}>close</span></button>
+                            </td>
+                          </tr>
+                        );
+                      })
+                }
+              </tbody>
+            </table>
+          </div>
+
+          {/* Absenzen-Liste (read-only, Erfassung via MA-Self-Service) */}
+          {(() => {
+            const filteredAbs = absences.filter(a => !selectedEmpId || a.employeeId === selectedEmpId).sort((a, b) => (a.dateFrom || a.date || "").localeCompare(b.dateFrom || b.date || ""));
+            if (filteredAbs.length === 0) return null;
+            return (
+              <div className="card" style={{ padding: 0, marginBottom: 20 }}>
+                <div style={{ padding: "10px 16px", borderBottom: "1px solid #ece8e2", fontSize: 11, letterSpacing: "0.1em", color: "#888" }}>INTERN / ABSENZEN</div>
+                <table>
+                  <thead><tr><th>Mitarbeiter</th><th>Typ</th><th>Von</th><th>Bis</th><th>Notiz</th><th>Status</th><th></th></tr></thead>
+                  <tbody>
+                    {filteredAbs.map(a => {
+                      const emp = employees.find(e => e.id === a.employeeId);
+                      const t = absenzTypes.find(x => x.id === a.type);
+                      const statusBadge = !a.status || a.status === "approved"
+                        ? <span style={{ fontSize: 10, color: "#2d6a4f", background: "#e8f5ee", border: "1px solid #b0d8c0", borderRadius: 3, padding: "2px 7px" }}>✓ Genehmigt</span>
+                        : a.status === "pending"
+                        ? <span style={{ fontSize: 10, color: "#b5621e", background: "#fff8f0", border: "1px solid #f0d0a0", borderRadius: 3, padding: "2px 7px" }}>⏳ Ausstehend</span>
+                        : <span style={{ fontSize: 10, color: "#8a1a1a", background: "#f5e8e8", border: "1px solid #d0b0b0", borderRadius: 3, padding: "2px 7px" }}><span className="material-icons" style={{ fontSize: 12 }}>close</span> Abgelehnt</span>;
+                      return (
+                        <tr key={a.id} style={a.status === "rejected" ? { opacity: 0.5 } : {}}>
+                          <td>{emp?.name || "—"}</td>
+                          <td><span className="tag" style={{ background: t?.color || "#888", fontSize: 10 }}>{t?.label || a.type || "Absenz"}</span></td>
+                          <td>{formatDate(a.dateFrom || a.date)}</td>
+                          <td>{formatDate(a.dateTo || a.date)}</td>
+                          <td style={{ color: "#888" }}>{a.note || "—"}</td>
+                          <td>{statusBadge}</td>
+                          <td style={{ textAlign: "right" }}>
+                            <button className="btn btn-danger" style={{ padding: "2px 7px", fontSize: 11 }} onClick={() => delAbs(a.id)}><span className="material-icons" style={{ fontSize: 16 }}>close</span></button>
+                          </td>
+                        </tr>
+                      );
+                    })}
+                  </tbody>
+                </table>
+              </div>
+            );
+          })()}
+
+          {/* Ferien-Übersicht pro Mitarbeiter */}
+          {employees.length > 0 && (
+            <div className="card">
+              <div style={{ display: "flex", justifyContent: "space-between", alignItems: "center", marginBottom: 16 }}>
+                <div style={{ fontSize: 11, letterSpacing: "0.1em", color: "#888" }}>FERIENANSPRUCH ÜBERSICHT</div>
+                <select value={viewYear} onChange={e => setViewYear(+e.target.value)} style={{ width: 90, fontSize: 12 }}>
+                  {[viewYear - 1, viewYear, viewYear + 1].map(y => <option key={y} value={y}>{y}</option>)}
+                </select>
+              </div>
+              <table>
+                <thead><tr><th>Mitarbeiter</th><th>Pensum</th><th style={{ textAlign: "right" }}>Anspruch</th><th style={{ textAlign: "right" }}>Übertrag</th><th style={{ textAlign: "right" }}>Bezogen</th><th style={{ textAlign: "right" }}>Geplant</th><th style={{ textAlign: "right" }}>Rest</th></tr></thead>
+                <tbody>
+                  {employees.map(emp => {
+                    const fs = calcFerienYear(emp, viewYear);
+                    return (
+                      <tr key={emp.id}>
+                        <td><strong>{emp.name}</strong></td>
+                        <td style={{ color: "#888" }}>{emp.pensum || 100}%</td>
+                        <td style={{ textAlign: "right" }}>{fs.anspruchH}h</td>
+                        <td style={{ textAlign: "right", color: "#888" }}>{fs.ubertragH}h</td>
+                        <td style={{ textAlign: "right" }}>{fs.bezogenH}h</td>
+                        <td style={{ textAlign: "right", color: "#7a6a00" }}>{fs.zukunftH}h</td>
+                        <td style={{ textAlign: "right", fontWeight: 700, color: fs.restH < 0 ? "#8a1a1a" : "#2d6a4f" }}>{fs.restH}h</td>
+                      </tr>
+                    );
+                  })}
+                </tbody>
+              </table>
+            </div>
+          )}
+        </div>
+      )}
+
+      {/* ── MONATSABSCHLUSS ── */}
+      {tab === "monatsabschluss" && (
+        <div>
+          <div style={{ fontSize: 12, color: "#888", marginBottom: 16 }}>
+            Geschlossene Monate können in der Zeiterfassung nicht mehr bearbeitet werden. Monate können jederzeit wieder geöffnet werden.
+          </div>
+          {(() => {
+            const allDates = [
+              ...(data.timeEntries || []).map(e => e.date),
+              ...(data.projects || []).map(p => p.startDate || p.createdAt),
+              ...(data.invoices || []).map(i => i.date),
+              ...(data.expenses || []).map(e => e.date),
+            ].filter(Boolean).sort();
+            const today = new Date();
+            const earliest = allDates[0] ? new Date(allDates[0]) : today;
+            const startYear = earliest.getFullYear();
+            const startMonth = earliest.getMonth(); // 0-indexed
+            const availableYears = [];
+            for (let y = startYear; y <= today.getFullYear() + 1; y++) availableYears.push(y);
+            return (
+          <>
+          <div style={{ display: "flex", justifyContent: "flex-end", marginBottom: 16 }}>
+            <select value={viewYear} onChange={e => setViewYear(+e.target.value)} style={{ width: 90, fontSize: 12 }}>
+              {availableYears.map(y => <option key={y} value={y}>{y}</option>)}
+            </select>
+          </div>
+          <div className="card" style={{ padding: 0 }}>
+            {months.map((m, i) => {
+              const monthStr = `${viewYear}-${String(i + 1).padStart(2, "0")}`;
+              const isClosed = closedMonths.includes(monthStr);
+              const isFuture = viewYear > today.getFullYear() || (viewYear === today.getFullYear() && i > today.getMonth());
+              const isCurrent = viewYear === today.getFullYear() && i === today.getMonth();
+              const isBeforeStart = viewYear < startYear || (viewYear === startYear && i < startMonth);
+              if (isBeforeStart) return null;
+              return (
+                <div key={monthStr} style={{ display: "flex", alignItems: "center", justifyContent: "space-between", padding: "14px 20px", borderBottom: i < 11 ? "1px solid #ece8e2" : "none", background: isClosed ? "#f9f7f4" : "transparent", opacity: isFuture ? 0.4 : 1 }}>
+                  <div style={{ display: "flex", alignItems: "center", gap: 12 }}>
+                    <div style={{ fontSize: 13, fontWeight: 500, minWidth: 100 }}>{m} {viewYear}</div>
+                    {isCurrent && <span style={{ fontSize: 10, color: "#1a4e8a", background: "#e8f0fa", padding: "2px 7px", borderRadius: 3 }}>Aktuell</span>}
+                    {isClosed && <span style={{ fontSize: 10, fontWeight: 600, color: "#555", background: "#e0dbd4", padding: "2px 7px", borderRadius: 3 }}>● Geschlossen</span>}
+                    {!isClosed && !isFuture && <span style={{ fontSize: 10, color: "#2d6a4f", background: "#e8f5ee", padding: "2px 7px", borderRadius: 3 }}>○ Offen</span>}
+                  </div>
+                  {!isFuture && (
+                    <button
+                      className={isClosed ? "btn btn-ghost" : "btn btn-ghost"}
+                      style={{ fontSize: 11, padding: "4px 14px", color: isClosed ? "#2d6a4f" : "#8a1a1a", borderColor: isClosed ? "#b0d8c0" : "#e8b0b0" }}
+                      onClick={() => toggleMonth(monthStr)}
+                    >
+                      {isClosed ? "Öffnen" : "Schliessen"}
+                    </button>
+                  )}
+                </div>
+              );
+            })}
+          </div>
+          </>
+          );
+          })()}
+        </div>
+      )}
+
+      {/* ── MITARBEITER ── */}
+      {tab === "mitarbeiter" && (
+        <div>
+          <div style={{ display: "flex", justifyContent: "flex-end", marginBottom: 16 }}>
+            <button className="btn btn-primary" onClick={() => { setEmpForm({ pensum: 100, wochenstunden: data.settings.defaultWochenstunden || 35, ferienWochen: data.settings.defaultFerienWochen || 5, pkAGSatz: data.settings.defaultPkAGSatz || 8.0, ferienUebertragVorjahr: {}, personalNr: nextPersonalNr(), _appAccess: false, _appUsername: "", _appPassword: "", _appRoleId: (data.appRoles || []).find(r => r.id !== "r-admin")?.id || "", _appUserId: undefined }); setModal("emp"); }}>+ Mitarbeiter</button>
+          </div>
+          <div className="card" style={{ padding: 0 }}>
+            <table>
+              <thead><tr><th>Name</th><th>Pensum</th><th>Wochenstunden</th><th>Ferien (Wo)</th><th>Eintritt</th><th></th></tr></thead>
+              <tbody>
+                {employees.length === 0 && <tr><td colSpan={6} style={{ textAlign: "center", color: "#aaa", padding: 32 }}>Noch keine Mitarbeiter erfasst</td></tr>}
+                {employees.map(emp => (
+                  <tr key={emp.id}>
+                    <td><strong>{emp.name}</strong>{emp.role && <div style={{ fontSize: 11, color: "#888" }}>{emp.role}</div>}</td>
+                    <td>{emp.pensum || 100}%</td>
+                    <td>{((emp.wochenstunden || 35) * (emp.pensum || 100) / 100).toFixed(1)}h <span style={{ fontSize: 11, color: "#888" }}>({emp.wochenstunden || 35}h @ 100%)</span></td>
+                    <td>{emp.ferienWochen || 4} Wo</td>
+                    <td style={{ color: "#888" }}>{emp.eintrittsdatum ? formatDate(emp.eintrittsdatum) : "—"}</td>
+                    <td style={{ textAlign: "right", whiteSpace: "nowrap" }}>
+                      <button className="btn btn-ghost" style={{ padding: "5px 10px", fontSize: 12, marginRight: 6 }} onClick={() => {
+                        const linked = (data.users || []).find(u => u.id === emp.appUserId);
+                        setEmpForm({ ...emp, _appAccess: !!linked, _appUsername: linked?.username || "", _appPassword: "", _appRoleId: linked?.appRoleId || (data.appRoles || []).find(r => r.id !== "r-admin")?.id || "", _appUserId: linked?.id });
+                        setModal("emp");
+                      }}><span className="material-icons" style={{ fontSize: 16 }}>edit</span></button>
+                      <button className="btn btn-danger" style={{ padding: "5px 10px", fontSize: 12 }} onClick={() => delEmp(emp.id)}><span className="material-icons" style={{ fontSize: 16 }}>close</span></button>
+                    </td>
+                  </tr>
+                ))}
+              </tbody>
+            </table>
+          </div>
+        </div>
+      )}
+
+
+      {/* ── JAHRESABSCHLUSS ── */}
+      {tab === "jahresabschluss" && (
+        <div>
+          <div style={{ display: "flex", justifyContent: "space-between", alignItems: "center", marginBottom: 20 }}>
+            <div style={{ fontSize: 12, color: "#888" }}>Ferienüberträge bestätigen und Überstunden abrechnen</div>
+            <select value={abschlussYear} onChange={e => setAbschlussYear(+e.target.value)} style={{ width: 100, fontSize: 12 }}>
+              {[...Array(5)].map((_, i) => { const y = new Date().getFullYear() - i; return <option key={y} value={y}>{y}</option>; })}
+            </select>
+          </div>
+
+          {employees.length === 0 && <div className="empty-state">Keine Mitarbeiter erfasst</div>}
+
+          {employees.filter(emp => emp.eintrittsdatum && emp.eintrittsdatum <= `${abschlussYear}-12-31`).length === 0 && employees.length > 0 && (
+            <div className="empty-state">Keine Mitarbeiter waren {abschlussYear} angestellt</div>
+          )}
+
+          {employees.filter(emp => emp.eintrittsdatum && emp.eintrittsdatum <= `${abschlussYear}-12-31`).map(emp => {
+            const fs = calcFerienYear(emp, abschlussYear);
+            const ubSaldo = calcEffectiveUbSaldo(emp);
+            const currentUebertrag = (emp.ferienUebertragVorjahr || {})[abschlussYear + 1];
+            const formDef = { ferienUebertrag: fs.restH > 0 ? fs.restH : 0, ubHours: ubSaldo > 0 ? ubSaldo : 0, ubZuschlag: 25 };
+            const form = { ...formDef, ...(abschlussForm[emp.id] || {}) };
+            const setForm = (val) => setAbschlussForm(prev => ({ ...prev, [emp.id]: { ...form, ...val } }));
+            const stundenlohn = emp.monatslohn
+              ? Math.round((emp.monatslohn * 12 / ((emp.wochenstunden || 35) * 52)) * 100) / 100
+              : 0;
+            const auszahlungBetrag = Math.round(form.ubHours * stundenlohn * (1 + form.ubZuschlag / 100) * 100) / 100;
+            const existingPayouts = (data.uberstundenAbschluss || []).filter(a => a.empId === emp.id && a.year === abschlussYear);
+
+            return (
+              <div key={emp.id} className="card" style={{ marginBottom: 16 }}>
+                <div style={{ display: "flex", justifyContent: "space-between", alignItems: "center", marginBottom: 16, paddingBottom: 12, borderBottom: "1px solid #ece8e2" }}>
+                  <div>
+                    <strong style={{ fontSize: 14 }}>{emp.name}</strong>
+                    {emp.role && <span style={{ fontSize: 12, color: "#888", marginLeft: 10 }}>{emp.role}</span>}
+                  </div>
+                  <span style={{ fontSize: 11, color: "#888" }}>{emp.pensum || 100}% · {((emp.wochenstunden || 35) * (emp.pensum || 100) / 100).toFixed(1)}h/Wo</span>
+                </div>
+
+                <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 32 }}>
+                  {/* Ferien */}
+                  <div>
+                    <div className="section-label" style={{ marginBottom: 10 }}>Ferien {abschlussYear}</div>
+                    {[
+                      { label: "Jahresanspruch", value: `${fs.anspruchH}h` },
+                      fs.ubertragH > 0 ? { label: "Übertrag Vorjahr", value: `+${fs.ubertragH}h` } : null,
+                      { label: "Bezogen", value: `-${fs.bezogenH}h` },
+                    ].filter(Boolean).map(r => (
+                      <div key={r.label} style={{ display: "flex", justifyContent: "space-between", fontSize: 12, color: "#555", padding: "2px 0" }}>
+                        <span>{r.label}</span><span>{r.value}</span>
+                      </div>
+                    ))}
+                    <div style={{ display: "flex", justifyContent: "space-between", fontSize: 13, fontWeight: 600, padding: "6px 0 0", marginTop: 4, borderTop: "1px solid #ece8e2" }}>
+                      <span>Restanspruch</span>
+                      <span style={{ color: fs.restH > 0 ? "#2d6a4f" : fs.restH < 0 ? "#8a1a1a" : "#888" }}>{fs.restH}h</span>
+                    </div>
+
+                    {fs.restH > 0 ? (
+                      <div style={{ marginTop: 16 }}>
+                        <div style={{ fontSize: 11, color: "#888", marginBottom: 6 }}>Übertrag ins {abschlussYear + 1}</div>
+                        <div style={{ display: "flex", gap: 8, alignItems: "center" }}>
+                          <input
+                            type="number" min={0} max={fs.restH} step={0.5}
+                            value={form.ferienUebertrag}
+                            onChange={e => setForm({ ferienUebertrag: Math.min(+e.target.value, fs.restH) })}
+                            style={{ width: 70, fontSize: 12 }}
+                          />
+                          <span style={{ fontSize: 12, color: "#888" }}>h von {fs.restH}h</span>
+                        </div>
+                        <button className="btn btn-primary" style={{ fontSize: 11, padding: "4px 14px", marginTop: 10 }}
+                          onClick={() => saveFerienUebertrag(emp, form.ferienUebertrag)}>
+                          Bestätigen
+                        </button>
+                        {currentUebertrag !== undefined && (
+                          <div style={{ fontSize: 11, color: "#2d6a4f", marginTop: 6 }}>✓ {currentUebertrag}h bestätigt für {abschlussYear + 1}</div>
+                        )}
+                      </div>
+                    ) : fs.restH < 0 ? (
+                      <div style={{ fontSize: 11, color: "#8a1a1a", marginTop: 12 }}>Negativsaldo — Bezug übersteigt Anspruch</div>
+                    ) : (
+                      <div style={{ fontSize: 11, color: "#888", marginTop: 12 }}>Kein Restanspruch — kein Übertrag nötig</div>
+                    )}
+                  </div>
+
+                  {/* Überstunden */}
+                  <div>
+                    <div className="section-label" style={{ marginBottom: 10 }}>Überstunden (Saldo gesamt)</div>
+                    <div style={{ display: "flex", justifyContent: "space-between", fontSize: 13, fontWeight: 600, marginBottom: 12 }}>
+                      <span>Verbleibend</span>
+                      <span style={{ color: ubSaldo > 0 ? "#2d6a4f" : ubSaldo < 0 ? "#8a1a1a" : "#888" }}>{ubSaldo}h</span>
+                    </div>
+
+                    {existingPayouts.length > 0 && (
+                      <div style={{ marginBottom: 12 }}>
+                        {existingPayouts.map(p => (
+                          <div key={p.id} style={{ fontSize: 11, color: "#2d6a4f", background: "#e8f5ee", border: "1px solid #b0d8c0", borderRadius: 20, padding: "4px 12px", marginBottom: 4 }}>
+                            ✓ {p.hoursSettled}h ausbezahlt — {formatCHF(p.auszahlungBetrag)} ({p.zuschlagPercent}% Zuschlag)
+                          </div>
+                        ))}
+                      </div>
+                    )}
+
+                    {ubSaldo > 0 ? (
+                      <>
+                        <div style={{ fontSize: 11, color: "#888", marginBottom: 6 }}>Stunden ausbezahlen</div>
+                        <div style={{ display: "flex", gap: 6, alignItems: "center", marginBottom: 6 }}>
+                          <input
+                            type="number" min={0.5} max={ubSaldo} step={0.5}
+                            value={form.ubHours}
+                            onChange={e => setForm({ ubHours: Math.min(+e.target.value, ubSaldo) })}
+                            placeholder="Std."
+                            style={{ width: 65, fontSize: 12 }}
+                          />
+                          <span style={{ fontSize: 12, color: "#555" }}>h ×</span>
+                          <input
+                            type="number" min={0} step={1}
+                            value={form.ubZuschlag}
+                            onChange={e => setForm({ ubZuschlag: +e.target.value })}
+                            style={{ width: 52, fontSize: 12 }}
+                          />
+                          <span style={{ fontSize: 12, color: "#555" }}>% Zuschlag</span>
+                        </div>
+                        {form.ubZuschlag < 25 && (
+                          <div style={{ fontSize: 10, color: "#b5621e", marginBottom: 6 }}>⚠ OR Art. 321c: mind. 25% Zuschlag empfohlen</div>
+                        )}
+                        {stundenlohn > 0 ? (
+                          <div style={{ fontSize: 12, color: "#555", marginBottom: 10 }}>
+                            {form.ubHours}h × {formatCHF(stundenlohn)}/h = <strong>{formatCHF(auszahlungBetrag)}</strong>
+                          </div>
+                        ) : (
+                          <div style={{ fontSize: 11, color: "#b5621e", marginBottom: 10 }}>Kein Monatslohn hinterlegt</div>
+                        )}
+                        <button
+                          className="btn btn-primary"
+                          style={{ fontSize: 11, padding: "4px 14px" }}
+                          disabled={!stundenlohn || !(form.ubHours > 0)}
+                          onClick={() => saveUbAbschluss(emp, form)}
+                        >
+                          Erfassen
+                        </button>
+                        <div style={{ fontSize: 11, color: "#aaa", marginTop: 6 }}>Restliche Stunden werden übertragen.</div>
+                      </>
+                    ) : (
+                      <div style={{ fontSize: 12, color: "#888" }}>Kein Überstundensaldo vorhanden.</div>
+                    )}
+                  </div>
+                </div>
+              </div>
+            );
+          })}
+        </div>
+      )}
+
+      {/* ── MODALS ── */}
+      {modal === "emp" && (
+        <Modal title={empForm.id ? "Mitarbeiter bearbeiten" : "Neuer Mitarbeiter"} onClose={() => setModal(null)} onSave={saveEmp} wide>
+          <div style={{ fontSize: 11, letterSpacing: "0.08em", color: "#888", marginBottom: 10 }}>PERSONALIEN</div>
+          <div className="form-row">
+            <FormField label="Name *"><input value={empForm.name || ""} onChange={e => setEmpForm({ ...empForm, name: e.target.value })} autoFocus style={!empForm.name?.trim() ? { borderColor: "#b5621e" } : {}} /></FormField>
+            <FormField label="Funktion / Rolle"><input value={empForm.role || ""} onChange={e => setEmpForm({ ...empForm, role: e.target.value })} placeholder="z.B. Architekt, Praktikant…" /></FormField>
+            <FormField label="Personal-Nr.">
+              <div style={{ display: "flex", gap: 6, alignItems: "center" }}>
+                <input value={empForm.personalNr || ""} onChange={e => setEmpForm({ ...empForm, personalNr: e.target.value })} style={{ flex: 1 }} placeholder="001" />
+                {empForm.id && empForm.personalNr === "" && (
+                  <button type="button" className="btn btn-ghost" style={{ padding: "0 10px", height: 36, fontSize: 11 }} onClick={() => setEmpForm({ ...empForm, personalNr: nextPersonalNr() })}>Auto</button>
+                )}
+              </div>
+              {empForm.personalNr && !/^\d+$/.test(empForm.personalNr) && (
+                <div style={{ fontSize: 10, color: "#b5621e", marginTop: 3 }}>Nicht-numerische Nr. wird nicht für Auto-Zählung verwendet</div>
+              )}
+            </FormField>
+          </div>
+          <div className="form-row">
+            <FormField label="Adresse"><input value={empForm.adresse || ""} onChange={e => setEmpForm({ ...empForm, adresse: e.target.value })} placeholder="Musterstrasse 1" /></FormField>
+            <FormField label="PLZ / Ort"><input value={empForm.ort || ""} onChange={e => setEmpForm({ ...empForm, ort: e.target.value })} placeholder="8001 Zürich" /></FormField>
+          </div>
+          <div className="form-row">
+            <FormField label="AHV-Nr."><input value={empForm.ahvNr || ""} onChange={e => setEmpForm({ ...empForm, ahvNr: e.target.value })} placeholder="756.1234.5678.90" /></FormField>
+            <FormField label="Geburtsdatum"><DateInput value={empForm.geburtsdatum || ""} onChange={e => setEmpForm({ ...empForm, geburtsdatum: e.target.value })} /></FormField>
+            <FormField label="E-Mail"><input type="email" value={empForm.email || ""} onChange={e => setEmpForm({ ...empForm, email: e.target.value })} /></FormField>
+          </div>
+          <div className="form-row">
+            <FormField label="Eintrittsdatum *"><DatePicker value={empForm.eintrittsdatum || ""} onChange={e => setEmpForm({ ...empForm, eintrittsdatum: e.target.value })} style={!empForm.eintrittsdatum ? { borderColor: "#b5621e" } : {}} /></FormField>
+          </div>
+          <div style={{ fontSize: 11, letterSpacing: "0.08em", color: "#888", margin: "14px 0 10px", paddingTop: 12, borderTop: "1px solid #ece8e2" }}>ARBEITSZEIT & FERIEN</div>
+          <div className="form-row">
+            <FormField label="Pensum %">
+              <input type="number" min={10} max={100} step={5} value={empForm.pensum || 100} onChange={e => setEmpForm({ ...empForm, pensum: +e.target.value })} />
+            </FormField>
+            <FormField label="Wochenstunden (100%)">
+              <input type="number" min={1} max={50} step={0.5} value={empForm.wochenstunden || data.settings.defaultWochenstunden || 35} onChange={e => setEmpForm({ ...empForm, wochenstunden: +e.target.value })} />
+              <div style={{ fontSize: 11, color: "#888", marginTop: 4 }}>Effektiv: {(((empForm.wochenstunden || 35) * (empForm.pensum || 100)) / 100).toFixed(1)}h/Wo</div>
+            </FormField>
+            <FormField label="Ferien (Wochen/Jahr)">
+              <input type="number" min={4} max={10} step={0.5} value={empForm.ferienWochen || data.settings.defaultFerienWochen || 5} onChange={e => setEmpForm({ ...empForm, ferienWochen: +e.target.value })} />
+              <div style={{ fontSize: 11, color: "#888", marginTop: 4 }}>Minimum: 4 Wochen (OR)</div>
+            </FormField>
+          </div>
+          <div style={{ fontSize: 11, letterSpacing: "0.08em", color: "#888", margin: "14px 0 10px", paddingTop: 12, borderTop: "1px solid #ece8e2" }}>LOHN & AUSZAHLUNG</div>
+          <div className="form-row">
+            <FormField label="Monatslohn Brutto CHF (100% Basis)">
+              <input type="number" min={0} step={100} value={empForm.monatslohn || ""} onChange={e => setEmpForm({ ...empForm, monatslohn: +e.target.value })} placeholder="z.B. 7000" />
+              {(empForm.pensum || 100) < 100 && empForm.monatslohn > 0 && (
+                <div style={{ fontSize: 11, color: "#888", marginTop: 3 }}>Effektiv bei {empForm.pensum}%: {formatCHF(Math.round(empForm.monatslohn * (empForm.pensum / 100) * 100) / 100)}</div>
+              )}
+            </FormField>
+            <FormField label="IBAN Lohnkonto">
+              <input
+                value={empForm.lohnIban || ""}
+                onChange={e => setEmpForm({ ...empForm, lohnIban: formatIban(e.target.value) })}
+                placeholder="CH00 0000 0000 0000 0000 0"
+              />
+            </FormField>
+            <FormField label=" ">
+              <label style={{ display: "flex", alignItems: "center", gap: 8, height: 36, cursor: "pointer", textTransform: "none", fontSize: 13 }}>
+                <input type="checkbox" checked={!!empForm.dreizehnterLohn} onChange={e => setEmpForm({ ...empForm, dreizehnterLohn: e.target.checked })} style={{ width: "auto" }} />
+                13. Monatslohn
+              </label>
+            </FormField>
+          </div>
+          <div style={{ fontSize: 11, color: "#888", marginBottom: 8 }}>Sozialabzüge Arbeitnehmer (anpassbar)</div>
+          <div className="form-row">
+            <FormField label="AHV/IV/EO %">
+              <input type="number" step={0.01} min={0} value={empForm.ahvSatz ?? 5.3} onChange={e => setEmpForm({ ...empForm, ahvSatz: +e.target.value })} />
+              <div style={{ fontSize: 10, color: "#aaa", marginTop: 3 }}>Standard 5.30%</div>
+            </FormField>
+            <FormField label="ALV %">
+              <input type="number" step={0.01} min={0} value={empForm.alvSatz ?? 1.1} onChange={e => setEmpForm({ ...empForm, alvSatz: +e.target.value })} />
+              <div style={{ fontSize: 10, color: "#aaa", marginTop: 3 }}>Standard 1.10%</div>
+            </FormField>
+            <FormField label="BVG / PK AN %">
+              <input type="number" step={0.1} min={0} value={empForm.bvgSatz ?? 8.0} onChange={e => setEmpForm({ ...empForm, bvgSatz: +e.target.value })} />
+              <div style={{ fontSize: 10, color: "#aaa", marginTop: 3 }}>Arbeitnehmer-Anteil</div>
+            </FormField>
+          </div>
+          <div style={{ fontSize: 11, color: "#888", marginBottom: 8 }}>Sozialabgaben Arbeitgeber</div>
+          <div className="form-row">
+            <FormField label="PK / BVG AG %">
+              <input type="number" step={0.1} min={0} value={empForm.pkAGSatz ?? (data.settings.defaultPkAGSatz || 8.0)} onChange={e => setEmpForm({ ...empForm, pkAGSatz: +e.target.value })} />
+              <div style={{ fontSize: 10, color: "#aaa", marginTop: 3 }}>AG muss mind. AN-Anteil zahlen</div>
+            </FormField>
+          </div>
+          <div className="form-row">
+            <FormField label="NBU % (Nichtberufsunfall)">
+              <input type="number" step={0.01} min={0} value={empForm.nbuSatz ?? 1.5} onChange={e => setEmpForm({ ...empForm, nbuSatz: +e.target.value })} />
+              <div style={{ fontSize: 10, color: "#aaa", marginTop: 3 }}>trägt AN</div>
+            </FormField>
+            <FormField label="KTG % (Krankentaggeld)">
+              <input type="number" step={0.01} min={0} value={empForm.ktgSatz ?? 0.5} onChange={e => setEmpForm({ ...empForm, ktgSatz: +e.target.value })} />
+              <div style={{ fontSize: 10, color: "#aaa", marginTop: 3 }}>je nach Vertrag</div>
+            </FormField>
+            <FormField label=" ">
+              <label style={{ display: "flex", alignItems: "center", gap: 8, height: 36, cursor: "pointer", textTransform: "none", fontSize: 13 }}>
+                <input type="checkbox" checked={!!empForm.quellensteuerPflichtig} onChange={e => setEmpForm({ ...empForm, quellensteuerPflichtig: e.target.checked })} style={{ width: "auto" }} />
+                Quellensteuerpflichtig
+              </label>
+              {empForm.quellensteuerPflichtig && (
+                <input type="number" step={0.1} min={0} value={empForm.quellensteuerSatz ?? 10} onChange={e => setEmpForm({ ...empForm, quellensteuerSatz: +e.target.value })} placeholder="Satz %" style={{ marginTop: 4 }} />
+              )}
+            </FormField>
+          </div>
+
+          {/* APP-ZUGANG */}
+          <div style={{ fontSize: 11, letterSpacing: "0.08em", color: "#888", margin: "18px 0 12px", paddingTop: 14, borderTop: "1px solid #ece8e2" }}>APP-ZUGANG</div>
+          <div style={{ marginBottom: 14 }}>
+            <label style={{ display: "flex", alignItems: "center", gap: 10, cursor: "pointer", fontSize: 13, color: "#1a1a18" }}>
+              <input type="checkbox" checked={!!empForm._appAccess} onChange={e => setEmpForm({ ...empForm, _appAccess: e.target.checked })} style={{ width: "auto" }} />
+              Zugang zur App aktivieren
+            </label>
+          </div>
+          {empForm._appAccess && (
+            <>
+              <div className="form-row">
+                <FormField label="Benutzername *">
+                  <input value={empForm._appUsername || ""} onChange={e => setEmpForm({ ...empForm, _appUsername: e.target.value })} placeholder="vorname.nachname" style={!empForm._appUsername?.trim() ? { borderColor: "#b5621e" } : {}} />
+                </FormField>
+                <FormField label={empForm._appUserId ? "Neues Passwort (leer = unverändert)" : "Passwort"}>
+                  <input type="password" value={empForm._appPassword || ""} onChange={e => setEmpForm({ ...empForm, _appPassword: e.target.value })} placeholder={empForm._appUserId ? "••••••" : "Leer = Benutzername"} />
+                </FormField>
+              </div>
+              <FormField label="Rolle">
+                <select value={empForm._appRoleId || ""} onChange={e => setEmpForm({ ...empForm, _appRoleId: e.target.value })}>
+                  <option value="">— Rolle wählen —</option>
+                  {(data.appRoles || []).map(r => (
+                    <option key={r.id} value={r.id}>{r.name}{r.permissions === null ? " (Alle Rechte)" : ` (${(r.permissions || []).length} Bereiche)`}</option>
+                  ))}
+                </select>
+                {!empForm._appRoleId && <div style={{ fontSize: 10, color: "#b5621e", marginTop: 3 }}>Bitte eine Rolle wählen</div>}
+                {empForm._appRoleId && (() => {
+                  const role = (data.appRoles || []).find(r => r.id === empForm._appRoleId);
+                  if (!role) return null;
+                  if (role.permissions === null) return <div style={{ fontSize: 10, color: "#2d6a4f", marginTop: 3 }}>Zugriff auf alle Bereiche</div>;
+                  if (!role.permissions?.length) return <div style={{ fontSize: 10, color: "#b5621e", marginTop: 3 }}>⚠ Rolle hat keine Bereiche — Benutzer sieht nichts</div>;
+                  return <div style={{ fontSize: 10, color: "#888", marginTop: 3 }}>{role.permissions.join(", ")}</div>;
+                })()}
+              </FormField>
+              <div style={{ fontSize: 10, color: "#aaa", marginTop: 4 }}>Rollen und Berechtigungen unter Einstellungen → App-Rollen verwalten.</div>
+            </>
+          )}
+        </Modal>
+      )}
+
+      {modal === "abs" && (
+        <Modal title={absForm.id ? "Absenz bearbeiten" : "Absenz erfassen"} onClose={() => setModal(null)} onSave={saveAbs}>
+          <div className="form-row">
+            <FormField label="Mitarbeiter">
+              <select value={absForm.employeeId || ""} onChange={e => setAbsForm({ ...absForm, employeeId: e.target.value })}>
+                <option value="">— wählen —</option>
+                {employees.map(e => <option key={e.id} value={e.id}>{e.name}</option>)}
+              </select>
+            </FormField>
+            <FormField label="Absenztyp">
+              <select value={absForm.type || ""} onChange={e => setAbsForm({ ...absForm, type: e.target.value })}>
+                <option value="">— wählen —</option>
+                {absenzTypes.map(t => <option key={t.id} value={t.id}>{t.label}</option>)}
+              </select>
+            </FormField>
+          </div>
+          <div className="form-row">
+            <FormField label="Von"><DateInput value={absForm.dateFrom || ""} onChange={e => setAbsForm({ ...absForm, dateFrom: e.target.value })} /></FormField>
+            <FormField label="Bis"><DateInput value={absForm.dateTo || ""} onChange={e => setAbsForm({ ...absForm, dateTo: e.target.value })} /></FormField>
+          </div>
+          <FormField label="Notiz (optional)"><input value={absForm.note || ""} onChange={e => setAbsForm({ ...absForm, note: e.target.value })} /></FormField>
+        </Modal>
+      )}
+
+      {modal === "ferien" && (
+        <Modal title={ferienForm.id ? "Ferien bearbeiten" : "Ferien eintragen"} onClose={() => setModal(null)} onSave={saveFerien}>
+          <FormField label="Mitarbeiter">
+            <select value={ferienForm.employeeId || ""} onChange={e => setFerienForm({ ...ferienForm, employeeId: e.target.value })}>
+              <option value="">— wählen —</option>
+              {employees.map(e => <option key={e.id} value={e.id}>{e.name}</option>)}
+            </select>
+          </FormField>
+          <div className="form-row">
+            <FormField label="Von"><DateInput value={ferienForm.dateFrom || ""} onChange={e => setFerienForm({ ...ferienForm, dateFrom: e.target.value })} /></FormField>
+            <FormField label="Bis"><DateInput value={ferienForm.dateTo || ""} onChange={e => setFerienForm({ ...ferienForm, dateTo: e.target.value })} /></FormField>
+          </div>
+          <FormField label="Notiz (optional)"><input value={ferienForm.note || ""} onChange={e => setFerienForm({ ...ferienForm, note: e.target.value })} /></FormField>
+        </Modal>
+      )}
+
+    </div>
+  );
+}
\ No newline at end of file
diff --git a/src/views/Personen.jsx b/src/views/Personen.jsx
new file mode 100755
index 0000000..57e1e54
--- /dev/null
+++ b/src/views/Personen.jsx
@@ -0,0 +1,682 @@
+import React, { useState } from "react";
+import { generateId, formatCHF, formatDate } from "../utils.js";
+import { Header, Modal, FormField, StatusBadge, useConfirm } from "../components/UI.jsx";
+
+const CONTACT_TYPES = [
+  "Elektroplaner", "HLKSE-Planer", "Statiker", "Tragwerksplaner",
+  "Kostenplaner", "Landschaftsarchitekt", "Bauphysiker",
+  "Vermessungsingenieur", "Brandschutzspezialist", "Geologe",
+  "Generalunternehmer", "Fachplaner", "Sonstiges",
+];
+
+const emptyFirm = {
+  name: "", type: "", street: "", zip: "", city: "", country: "CH",
+  email: "", phone: "", website: "", note: "", contacts: [],
+  honorarOffers: [], isAuftraggeber: false, isPartner: false,
+};
+
+const RoleBadge = ({ label, color, bg }) => (
+  <span style={{ fontSize: 10, fontWeight: 600, color, background: bg, padding: "2px 10px", borderRadius: 20, letterSpacing: "0.04em", whiteSpace: "nowrap" }}>{label}</span>
+);
+
+const SectionHead = ({ label }) => (
+  <div style={{ fontSize: 10, fontWeight: 600, letterSpacing: "0.1em", color: "#aaa", marginTop: 20, marginBottom: 12, paddingTop: 14, borderTop: "1px solid var(--border)" }}>{label}</div>
+);
+
+
+// ── Detail View ────────────────────────────────────────────────────────────────
+function FirmaDetail({ firma, data, onBack, onEdit, onAddPerson, onEditPerson, onDeletePerson, onDeleteFirm }) {
+  const invoices  = (data.invoices  || []).filter(i => i.clientId  === firma.id);
+  const quotes    = (data.quotes    || []).filter(q => q.clientId  === firma.id);
+  const asClient  = (data.projects  || []).filter(p => p.clientId  === firma.id);
+  const asPartner = (data.projects  || []).filter(p => (p.projectContacts || []).some(pc => pc.contactId === firma.id));
+  const allProjects = [...new Map([...asClient, ...asPartner].map(p => [p.id, p])).values()]
+    .sort((a, b) => (b.startDate || "").localeCompare(a.startDate || ""));
+
+  const protocols = (data.protocols || []).filter(proto =>
+    asPartner.some(p => p.id === proto.projectId)
+  ).sort((a, b) => (b.date || "").localeCompare(a.date || ""));
+
+  const addr = [firma.street, [firma.zip, firma.city].filter(Boolean).join(" ")].filter(Boolean).join(", ");
+
+  const InfoRow = ({ label, value }) => value ? (
+    <div style={{ display: "flex", gap: 12, marginBottom: 4 }}>
+      <span style={{ fontSize: 11, color: "var(--text4)", width: 100, flexShrink: 0 }}>{label}</span>
+      <span style={{ fontSize: 13 }}>{value}</span>
+    </div>
+  ) : null;
+
+  return (
+    <div>
+      <button className="btn btn-ghost" onClick={onBack} style={{ marginBottom: 18, padding: "6px 14px", fontSize: 12 }}>← Alle Personen</button>
+
+      {/* Header */}
+      <div style={{ display: "flex", justifyContent: "space-between", alignItems: "flex-start", marginBottom: 24 }}>
+        <div>
+          <div style={{ display: "flex", gap: 6, marginBottom: 8 }}>
+            {firma.isAuftraggeber && <RoleBadge label="Auftraggeber" color="#1a4e8a" bg="#e8f0fa" />}
+            {firma.isPartner      && <RoleBadge label="Partner"      color="#2d6a4f" bg="#e8f5ee" />}
+            {firma.type && <span style={{ fontSize: 11, color: "var(--text4)" }}>{firma.type}</span>}
+          </div>
+          <h1 style={{ fontFamily: "'Playfair Display', serif", fontSize: 34, fontWeight: 400, letterSpacing: "-0.01em", marginBottom: 6 }}>{firma.name}</h1>
+          {addr && <div style={{ fontSize: 13, color: "var(--text3)" }}>{addr}</div>}
+        </div>
+        <div style={{ display: "flex", gap: 8 }}>
+          <button className="btn btn-ghost" onClick={onEdit}><span className="material-icons" style={{ fontSize: 16 }}>edit</span></button>
+        </div>
+      </div>
+
+      {/* KPIs */}
+      <div style={{ display: "grid", gridTemplateColumns: "repeat(4, 1fr)", gap: 14, marginBottom: 28 }} className="responsive-grid-4">
+        {[
+          { label: "PROJEKTE",    value: allProjects.length },
+          ...(firma.isAuftraggeber ? [
+            { label: "RECHNUNGEN",  value: invoices.length },
+            { label: "OFFERTEN",    value: quotes.length },
+            { label: "OFFEN",       value: formatCHF(invoices.filter(i => i.status === "gesendet" || i.status === "überfällig").reduce((s, i) => s + (i.total || 0), 0)), color: "#b5621e" },
+          ] : [
+            { label: "BETEILIGUNGEN", value: asPartner.length },
+            { label: "PROTOKOLLE",    value: protocols.length },
+            { label: "ANSPRECHP.",    value: (firma.contacts || []).length },
+          ]),
+        ].map((k, i) => (
+          <div key={i} className="card">
+            <div style={{ fontSize: 10, color: "var(--text4)", letterSpacing: "0.12em", marginBottom: 8 }}>{k.label}</div>
+            <div style={{ fontSize: 24, fontFamily: "'Playfair Display', serif", fontWeight: 700, color: k.color || "var(--text2)" }}>{k.value}</div>
+          </div>
+        ))}
+      </div>
+
+      <div style={{ display: "grid", gridTemplateColumns: "2fr 1fr", gap: 20 }} className="responsive-grid-2">
+        <div>
+          {/* Projekte */}
+          {allProjects.length > 0 && (
+            <div className="card" style={{ padding: 0, marginBottom: 20 }}>
+              <div style={{ padding: "14px 16px 10px", borderBottom: "1px solid var(--border2)", fontSize: 11, fontWeight: 600, letterSpacing: "0.08em", color: "var(--text4)" }}>PROJEKTE</div>
+              <table style={{ width: "100%" }}>
+                <tbody>
+                  {allProjects.map(p => (
+                    <tr key={p.id}>
+                      <td style={{ fontSize: 11, color: "var(--text4)", width: 80 }}>{p.number || "—"}</td>
+                      <td><strong style={{ fontSize: 13 }}>{p.name}</strong></td>
+                      <td style={{ fontSize: 11, color: "var(--text4)" }}>
+                        {asClient.find(x => x.id === p.id) && <span style={{ marginRight: 6, color: "#1a4e8a" }}>Auftraggeber</span>}
+                        {asPartner.find(x => x.id === p.id) && <span style={{ color: "#2d6a4f" }}>Beteiligt</span>}
+                      </td>
+                      <td style={{ textAlign: "right" }}><StatusBadge status={p.status} /></td>
+                    </tr>
+                  ))}
+                </tbody>
+              </table>
+            </div>
+          )}
+
+          {/* Rechnungen — nur bei Auftraggeber */}
+          {firma.isAuftraggeber && (
+            <div className="card" style={{ padding: 0, marginBottom: 20 }}>
+              <div style={{ padding: "14px 16px 10px", borderBottom: "1px solid var(--border2)", fontSize: 11, fontWeight: 600, letterSpacing: "0.08em", color: "var(--text4)" }}>RECHNUNGEN</div>
+              {invoices.length === 0 ? (
+                <div style={{ padding: "24px 16px", fontSize: 12, color: "var(--text5)" }}>Keine Rechnungen.</div>
+              ) : (
+                <table style={{ width: "100%" }}>
+                  <tbody>
+                    {[...invoices].sort((a, b) => (b.date || "").localeCompare(a.date || "")).map(inv => (
+                      <tr key={inv.id}>
+                        <td style={{ fontSize: 11, color: "var(--text4)", width: 90 }}>{inv.number || "—"}</td>
+                        <td style={{ fontSize: 12 }}>{formatDate(inv.date)}</td>
+                        <td style={{ textAlign: "right", fontWeight: 600, fontSize: 13 }}>{formatCHF(inv.total || 0)}</td>
+                        <td style={{ textAlign: "right", width: 90 }}><StatusBadge status={inv.status} /></td>
+                      </tr>
+                    ))}
+                  </tbody>
+                </table>
+              )}
+            </div>
+          )}
+
+          {/* Offerten — nur bei Auftraggeber */}
+          {firma.isAuftraggeber && (
+            <div className="card" style={{ padding: 0, marginBottom: 20 }}>
+              <div style={{ padding: "14px 16px 10px", borderBottom: "1px solid var(--border2)", fontSize: 11, fontWeight: 600, letterSpacing: "0.08em", color: "var(--text4)" }}>OFFERTEN</div>
+              {quotes.length === 0 ? (
+                <div style={{ padding: "24px 16px", fontSize: 12, color: "var(--text5)" }}>Keine Offerten.</div>
+              ) : (
+                <table style={{ width: "100%" }}>
+                  <tbody>
+                    {[...quotes].sort((a, b) => (b.date || "").localeCompare(a.date || "")).map(q => (
+                      <tr key={q.id}>
+                        <td style={{ fontSize: 11, color: "var(--text4)", width: 90 }}>{q.number || "—"}</td>
+                        <td style={{ fontSize: 12 }}>{formatDate(q.date)}</td>
+                        <td style={{ fontSize: 11, color: "var(--text4)" }}>{q.mode === "sia" ? "SIA 102" : q.mode === "manual" ? "Manuell" : "Frei"}</td>
+                        <td style={{ textAlign: "right", fontWeight: 600, fontSize: 13 }}>{formatCHF(q.sub || 0)}</td>
+                        <td style={{ textAlign: "right", width: 90 }}><StatusBadge status={q.status} /></td>
+                      </tr>
+                    ))}
+                  </tbody>
+                </table>
+              )}
+            </div>
+          )}
+
+          {/* Protokolle — nur bei Partner */}
+          {firma.isPartner && protocols.length > 0 && (
+            <div className="card" style={{ padding: 0, marginBottom: 20 }}>
+              <div style={{ padding: "14px 16px 10px", borderBottom: "1px solid var(--border2)", fontSize: 11, fontWeight: 600, letterSpacing: "0.08em", color: "var(--text4)" }}>PROTOKOLLE</div>
+              <table style={{ width: "100%" }}>
+                <tbody>
+                  {protocols.slice(0, 10).map(proto => {
+                    const proj = (data.projects || []).find(p => p.id === proto.projectId);
+                    return (
+                      <tr key={proto.id}>
+                        <td style={{ fontSize: 11, color: "var(--text4)", width: 80 }}>{formatDate(proto.date)}</td>
+                        <td style={{ fontSize: 12 }}>{proto.type || "Protokoll"}{proto.number ? ` #${proto.number}` : ""}</td>
+                        <td style={{ fontSize: 11, color: "var(--text4)" }}>{proj?.name || ""}</td>
+                      </tr>
+                    );
+                  })}
+                </tbody>
+              </table>
+            </div>
+          )}
+        </div>
+
+        {/* Right column: Stammdaten + Ansprechpartner */}
+        <div>
+          <div className="card" style={{ marginBottom: 16 }}>
+            <div style={{ fontSize: 11, fontWeight: 600, letterSpacing: "0.08em", color: "var(--text4)", marginBottom: 12 }}>STAMMDATEN</div>
+            <InfoRow label="E-Mail" value={firma.email} />
+            <InfoRow label="Telefon" value={firma.phone} />
+            <InfoRow label="Website" value={firma.website} />
+            <InfoRow label="Adresse" value={addr} />
+            {firma.note && <div style={{ marginTop: 10, fontSize: 12, color: "var(--text3)", borderTop: "1px solid var(--border2)", paddingTop: 10 }}>{firma.note}</div>}
+          </div>
+
+          <div className="card">
+            <div style={{ display: "flex", justifyContent: "space-between", alignItems: "center", marginBottom: 12 }}>
+              <div style={{ fontSize: 11, fontWeight: 600, letterSpacing: "0.08em", color: "var(--text4)" }}>ANSPRECHPARTNER</div>
+              <button className="btn btn-ghost" style={{ fontSize: 11, padding: "2px 8px" }} onClick={onAddPerson}>+ Person</button>
+            </div>
+            {(firma.contacts || []).length === 0 ? (
+              <div style={{ fontSize: 12, color: "var(--text5)" }}>Keine Ansprechpartner erfasst.</div>
+            ) : (firma.contacts || []).map(c => (
+              <div key={c.id} style={{ borderBottom: "1px solid var(--border2)", paddingBottom: 10, marginBottom: 10 }}>
+                <div style={{ display: "flex", justifyContent: "space-between", alignItems: "flex-start" }}>
+                  <div>
+                    <div style={{ fontWeight: 600, fontSize: 13 }}>{c.name}</div>
+                    {c.position && <div style={{ fontSize: 11, color: "var(--text4)" }}>{c.position}</div>}
+                    {c.email    && <div style={{ fontSize: 11, color: "var(--text4)" }}>{c.email}</div>}
+                    {c.phone    && <div style={{ fontSize: 11, color: "var(--text4)" }}>{c.phone}</div>}
+                  </div>
+                  <div style={{ display: "flex", gap: 4 }}>
+                    <button className="btn btn-ghost" style={{ fontSize: 11, padding: "2px 7px" }} onClick={() => onEditPerson(firma.id, c.id)}><span className="material-icons" style={{ fontSize: 16 }}>edit</span></button>
+                    <button className="btn btn-danger" style={{ fontSize: 11, padding: "2px 6px" }} onClick={() => onDeletePerson(firma.id, c.id)}><span className="material-icons" style={{ fontSize: 16 }}>close</span></button>
+                  </div>
+                </div>
+              </div>
+            ))}
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}
+
+// ── Main View ──────────────────────────────────────────────────────────────────
+export default function Personen({ data, update, saveAll, setView }) {
+  const persons  = data.persons  || [];
+  const projects = data.projects || [];
+  const { askConfirm, ConfirmModalEl } = useConfirm();
+
+  const [selectedId, setSelectedId] = useState(null);
+  const [search,     setSearch]     = useState("");
+  const [ansicht,    setAnsicht]    = useState("firmen");
+  const [groupBy,    setGroupBy]    = useState("alpha");
+
+  const [firmModal,   setFirmModal]   = useState(null);
+  const [firmForm,    setFirmForm]    = useState({});
+  const [personModal, setPersonModal] = useState(null);
+  const [personForm,  setPersonForm]  = useState({});
+
+  // ── Counts ─────────────────────────────────────────────────────────────────
+  const allPersonsFlat = persons.flatMap(firma =>
+    (firma.contacts || []).map(c => ({ ...c, _firmaId: firma.id, _firmaName: firma.name, _firmaType: firma.type }))
+  );
+
+  // ── Filtering ──────────────────────────────────────────────────────────────
+  const q = search.toLowerCase();
+
+  const filteredFirmen = persons.filter(p => {
+    if (ansicht === "auftraggeber" && !p.isAuftraggeber) return false;
+    if (ansicht === "partner"      && !p.isPartner)      return false;
+    if (q) {
+      const addr = [p.street, p.zip, p.city].filter(Boolean).join(" ");
+      const contactNames = (p.contacts || []).map(c => c.name).join(" ");
+      if (![p.name, p.type, p.email, addr, contactNames].some(v => v?.toLowerCase().includes(q))) return false;
+    }
+    return true;
+  }).sort((a, b) => a.name.localeCompare(b.name, "de"));
+
+  const filteredPersons = allPersonsFlat.filter(c => {
+    if (!q) return true;
+    return [c.name, c.position, c.email, c.phone, c._firmaName].some(v => v?.toLowerCase().includes(q));
+  }).sort((a, b) => a.name.localeCompare(b.name, "de"));
+
+  const showPersonsView = ansicht === "personen";
+
+  // ── Grouping ───────────────────────────────────────────────────────────────
+  const groupedFirmen = (() => {
+    if (groupBy === "none") return [{ key: "_all", label: null, items: filteredFirmen }];
+    if (groupBy === "alpha") {
+      const g = {};
+      filteredFirmen.forEach(p => { const k = p.name[0]?.toUpperCase() || "#"; (g[k] = g[k] || []).push(p); });
+      return Object.entries(g).sort((a, b) => a[0].localeCompare(b[0])).map(([k, items]) => ({ key: k, label: k, items }));
+    }
+    if (groupBy === "type") {
+      const g = {};
+      filteredFirmen.forEach(p => {
+        const k = p.isAuftraggeber && p.isPartner ? "Auftraggeber & Partner"
+                : p.isAuftraggeber ? "Auftraggeber" : (p.type || "Ohne Typ");
+        (g[k] = g[k] || []).push(p);
+      });
+      const order = ["Auftraggeber & Partner", "Auftraggeber"];
+      return Object.entries(g).sort((a, b) => {
+        const oa = order.indexOf(a[0]), ob = order.indexOf(b[0]);
+        if (oa !== -1 && ob !== -1) return oa - ob;
+        if (oa !== -1) return -1; if (ob !== -1) return 1;
+        return a[0].localeCompare(b[0]);
+      }).map(([k, items]) => ({ key: k, label: k, items }));
+    }
+  })();
+
+  const groupedPersons = (() => {
+    if (groupBy === "none") return [{ key: "_all", label: null, items: filteredPersons }];
+    if (groupBy === "alpha") {
+      const g = {};
+      filteredPersons.forEach(c => { const k = c.name[0]?.toUpperCase() || "#"; (g[k] = g[k] || []).push(c); });
+      return Object.entries(g).sort((a, b) => a[0].localeCompare(b[0])).map(([k, items]) => ({ key: k, label: k, items }));
+    }
+    if (groupBy === "firma") {
+      const g = {};
+      filteredPersons.forEach(c => { (g[c._firmaName] = g[c._firmaName] || []).push(c); });
+      return Object.entries(g).sort((a, b) => a[0].localeCompare(b[0])).map(([k, items]) => ({ key: k, label: k, items }));
+    }
+  })();
+
+  const firmenGroupOpts  = [{ id: "alpha", label: "Alphabetisch" }, { id: "type", label: "Nach Typ" }, { id: "none", label: "Keine" }];
+  const personGroupOpts  = [{ id: "alpha", label: "Alphabetisch" }, { id: "firma", label: "Nach Firma" }, { id: "none", label: "Keine" }];
+  const activeGroupOpts  = showPersonsView ? personGroupOpts : firmenGroupOpts;
+  const hasFilter        = search || ansicht !== "firmen";
+
+  // ── Firma CRUD ─────────────────────────────────────────────────────────────
+  const openNewFirm = (preset = {}) => {
+    setFirmForm({ ...emptyFirm, ...preset, _hauptName: "", _hauptPosition: "", _hauptPhone: "", _hauptEmail: "" });
+    setFirmModal({ isNew: true });
+  };
+  const openEditFirm = (id) => {
+    const p = persons.find(x => x.id === id);
+    if (!p) return;
+    setFirmForm({ ...emptyFirm, ...p });
+    setFirmModal({ id });
+  };
+  const saveFirm = () => {
+    if (!firmForm.name?.trim() || (!firmForm.isAuftraggeber && !firmForm.isPartner)) return;
+    const { _hauptName, _hauptPosition, _hauptPhone, _hauptEmail, ...firmData } = firmForm;
+    if (firmModal.id) {
+      update("persons", persons.map(p => p.id === firmModal.id ? { ...p, ...firmData } : p));
+    } else {
+      const hauptkontakt = _hauptName?.trim()
+        ? [{ id: generateId(), name: _hauptName.trim(), position: _hauptPosition || "", phone: _hauptPhone || "", email: _hauptEmail || "" }]
+        : [];
+      update("persons", [...persons, { ...firmData, contacts: [...hauptkontakt, ...(firmData.contacts || [])], id: generateId() }]);
+    }
+    setFirmModal(null);
+  };
+  const deleteFirm = async (id) => {
+    if (!await askConfirm("Firma löschen? Referenzen in Projekten und Rechnungen bleiben erhalten.")) return;
+    update("persons", persons.filter(p => p.id !== id));
+    if (selectedId === id) setSelectedId(null);
+  };
+  const deleteContactFromFirm = async (firmaId, personId) => {
+    if (!await askConfirm("Ansprechpartner entfernen?")) return;
+    update("persons", persons.map(p => p.id === firmaId
+      ? { ...p, contacts: (p.contacts || []).filter(c => c.id !== personId) } : p));
+  };
+
+  // ── Ansprechpartner CRUD ───────────────────────────────────────────────────
+  const openNewPerson = (firmaId = "") => {
+    setPersonForm({ firmaId, name: "", position: "", phone: "", email: "" });
+    setPersonModal({ isNew: true });
+  };
+  const openEditPerson = (firmaId, personId) => {
+    const firma = persons.find(p => p.id === firmaId);
+    const person = (firma?.contacts || []).find(c => c.id === personId);
+    if (!person) return;
+    setPersonForm({ firmaId, name: person.name || "", position: person.position || "", phone: person.phone || "", email: person.email || "" });
+    setPersonModal({ firmaId, personId });
+  };
+  const savePerson = () => {
+    if (!personForm.name?.trim() || !personForm.firmaId) return;
+    if (personModal.personId) {
+      update("persons", persons.map(p => p.id === personModal.firmaId
+        ? { ...p, contacts: (p.contacts || []).map(c => c.id === personModal.personId ? { ...c, name: personForm.name, position: personForm.position, phone: personForm.phone, email: personForm.email } : c) } : p));
+    } else {
+      const newContact = { id: generateId(), name: personForm.name.trim(), position: personForm.position || "", phone: personForm.phone || "", email: personForm.email || "" };
+      update("persons", persons.map(p => p.id === personForm.firmaId
+        ? { ...p, contacts: [...(p.contacts || []), newContact] } : p));
+    }
+    setPersonModal(null);
+  };
+
+
+  // ── Detail view ────────────────────────────────────────────────────────────
+  const selectedFirma = selectedId ? persons.find(p => p.id === selectedId) : null;
+  if (selectedFirma) {
+    return (
+      <div>
+        {ConfirmModalEl}
+        <FirmaDetail
+          firma={selectedFirma}
+          data={data}
+          onBack={() => setSelectedId(null)}
+          onEdit={() => openEditFirm(selectedFirma.id)}
+          onAddPerson={() => openNewPerson(selectedFirma.id)}
+          onEditPerson={openEditPerson}
+          onDeletePerson={deleteContactFromFirm}
+          onDeleteFirm={deleteFirm}
+        />
+        {firmModal && renderFirmModal()}
+        {personModal && renderPersonModal()}
+      </div>
+    );
+  }
+
+  // ── List view helpers ──────────────────────────────────────────────────────
+  function renderFirmModal() {
+    return (
+      <Modal
+        title={firmModal.id ? "Firma bearbeiten" : firmForm.isAuftraggeber && !firmForm.isPartner ? "Neuer Auftraggeber" : !firmForm.isAuftraggeber && firmForm.isPartner ? "Neuer Partner" : "Neue Firma"}
+        onClose={() => setFirmModal(null)}
+        onSave={saveFirm}
+      >
+        <FormField label="Firmenname *">
+          <input autoFocus value={firmForm.name || ""} onChange={e => setFirmForm({ ...firmForm, name: e.target.value })}
+            style={!firmForm.name?.trim() ? { borderColor: "#b5621e" } : {}} />
+        </FormField>
+        <FormField label="Rolle">
+          <div style={{ display: "flex", gap: 20, marginTop: 2 }}>
+            <label style={{ display: "flex", alignItems: "center", gap: 8, fontSize: 13, fontWeight: 400, textTransform: "none", letterSpacing: 0, cursor: "pointer" }}>
+              <input type="checkbox" checked={!!firmForm.isAuftraggeber} onChange={e => setFirmForm({ ...firmForm, isAuftraggeber: e.target.checked })} style={{ width: "auto" }} />
+              Auftraggeber <span style={{ fontSize: 10, color: "#888" }}>(Rechnungen)</span>
+            </label>
+            <label style={{ display: "flex", alignItems: "center", gap: 8, fontSize: 13, fontWeight: 400, textTransform: "none", letterSpacing: 0, cursor: "pointer" }}>
+              <input type="checkbox" checked={!!firmForm.isPartner} onChange={e => setFirmForm({ ...firmForm, isPartner: e.target.checked })} style={{ width: "auto" }} />
+              Partner <span style={{ fontSize: 10, color: "#888" }}>(Projektbeteiligte)</span>
+            </label>
+          </div>
+          {!firmForm.isAuftraggeber && !firmForm.isPartner && (
+            <div style={{ fontSize: 11, color: "#b5621e", marginTop: 4 }}>Mindestens eine Rolle auswählen.</div>
+          )}
+        </FormField>
+        {(firmForm.isPartner || firmForm.type) && (
+          <FormField label="Typ / Branche">
+            <select value={firmForm.type || ""} onChange={e => setFirmForm({ ...firmForm, type: e.target.value })}>
+              <option value="">— auswählen —</option>
+              {CONTACT_TYPES.map(t => <option key={t} value={t}>{t}</option>)}
+            </select>
+          </FormField>
+        )}
+        <div className="form-row">
+          <FormField label="Strasse"><input value={firmForm.street || ""} onChange={e => setFirmForm({ ...firmForm, street: e.target.value })} /></FormField>
+          <FormField label="PLZ"><input value={firmForm.zip || ""} onChange={e => setFirmForm({ ...firmForm, zip: e.target.value })} style={{ maxWidth: 90 }} /></FormField>
+          <FormField label="Ort"><input value={firmForm.city || ""} onChange={e => setFirmForm({ ...firmForm, city: e.target.value })} /></FormField>
+        </div>
+        <div className="form-row">
+          <FormField label="E-Mail (Firma)"><input type="email" value={firmForm.email || ""} onChange={e => setFirmForm({ ...firmForm, email: e.target.value })} /></FormField>
+          <FormField label="Telefon (Firma)"><input value={firmForm.phone || ""} onChange={e => setFirmForm({ ...firmForm, phone: e.target.value })} /></FormField>
+          <FormField label="Website"><input value={firmForm.website || ""} onChange={e => setFirmForm({ ...firmForm, website: e.target.value })} /></FormField>
+        </div>
+        <FormField label="Notiz">
+          <textarea value={firmForm.note || ""} onChange={e => setFirmForm({ ...firmForm, note: e.target.value })} rows={2} style={{ height: "auto" }} />
+        </FormField>
+        {!firmModal.id && (
+          <>
+            <SectionHead label="HAUPTKONTAKT (optional)" />
+            <FormField label="Name">
+              <input value={firmForm._hauptName || ""} onChange={e => setFirmForm({ ...firmForm, _hauptName: e.target.value })} placeholder="Vorname Nachname" />
+            </FormField>
+            <FormField label="Position / Funktion">
+              <input value={firmForm._hauptPosition || ""} onChange={e => setFirmForm({ ...firmForm, _hauptPosition: e.target.value })} placeholder="z.B. Projektleiter" />
+            </FormField>
+            <div className="form-row">
+              <FormField label="Telefon">
+                <input value={firmForm._hauptPhone || ""} onChange={e => setFirmForm({ ...firmForm, _hauptPhone: e.target.value })} />
+              </FormField>
+              <FormField label="E-Mail">
+                <input type="email" value={firmForm._hauptEmail || ""} onChange={e => setFirmForm({ ...firmForm, _hauptEmail: e.target.value })} />
+              </FormField>
+            </div>
+          </>
+        )}
+        {firmModal.id && (() => {
+          const contacts = firmForm.contacts || [];
+          return (
+            <>
+              <SectionHead label="ANSPRECHPARTNER" />
+              {contacts.length === 0 && <div style={{ fontSize: 12, color: "#aaa", marginBottom: 8 }}>Noch keine Ansprechpartner.</div>}
+              {contacts.map(c => (
+                <div key={c.id} style={{ display: "flex", justifyContent: "space-between", alignItems: "center", padding: "8px 0", borderBottom: "1px solid var(--border2)" }}>
+                  <div>
+                    <span style={{ fontWeight: 500, fontSize: 13 }}>{c.name}</span>
+                    {c.position && <span style={{ fontSize: 12, color: "#888", marginLeft: 8 }}>{c.position}</span>}
+                    {c.email && <span style={{ fontSize: 11, color: "#aaa", marginLeft: 8 }}>{c.email}</span>}
+                  </div>
+                  <div style={{ display: "flex", gap: 4 }}>
+                    <button type="button" className="btn btn-ghost" style={{ fontSize: 11, padding: "2px 8px" }}
+                      onClick={() => { setFirmModal(null); openEditPerson(firmModal.id, c.id); }}><span className="material-icons" style={{ fontSize: 16 }}>edit</span></button>
+                    <button type="button" className="btn btn-danger" style={{ fontSize: 11, padding: "2px 6px" }}
+                      onClick={() => setFirmForm(f => ({ ...f, contacts: (f.contacts || []).filter(x => x.id !== c.id) }))}><span className="material-icons" style={{ fontSize: 16 }}>close</span></button>
+                  </div>
+                </div>
+              ))}
+              <button type="button" className="btn btn-ghost" style={{ fontSize: 12, marginTop: 10 }}
+                onClick={() => { setFirmModal(null); openNewPerson(firmModal.id); }}>+ Person hinzufügen</button>
+            </>
+          );
+        })()}
+      </Modal>
+    );
+  }
+
+  function renderPersonModal() {
+    return (
+      <Modal title={personModal.personId ? "Person bearbeiten" : "Neue Person"} onClose={() => setPersonModal(null)} onSave={savePerson}>
+        <FormField label="Firma *">
+          <select value={personForm.firmaId || ""} onChange={e => setPersonForm({ ...personForm, firmaId: e.target.value })}
+            style={!personForm.firmaId ? { borderColor: "#b5621e" } : {}} disabled={!!personModal.personId}>
+            <option value="">— Firma auswählen —</option>
+            {persons.sort((a, b) => a.name.localeCompare(b.name, "de")).map(p => <option key={p.id} value={p.id}>{p.name}</option>)}
+          </select>
+        </FormField>
+        <FormField label="Name *">
+          <input autoFocus value={personForm.name || ""} onChange={e => setPersonForm({ ...personForm, name: e.target.value })}
+            placeholder="Vorname Nachname" style={!personForm.name?.trim() ? { borderColor: "#b5621e" } : {}} />
+        </FormField>
+        <FormField label="Position / Funktion">
+          <input value={personForm.position || ""} onChange={e => setPersonForm({ ...personForm, position: e.target.value })} placeholder="z.B. Bauleiter" />
+        </FormField>
+        <div className="form-row">
+          <FormField label="Telefon"><input value={personForm.phone || ""} onChange={e => setPersonForm({ ...personForm, phone: e.target.value })} /></FormField>
+          <FormField label="E-Mail"><input type="email" value={personForm.email || ""} onChange={e => setPersonForm({ ...personForm, email: e.target.value })} /></FormField>
+        </div>
+      </Modal>
+    );
+  }
+
+  // ── List render ────────────────────────────────────────────────────────────
+  return (
+    <div>
+      {ConfirmModalEl}
+
+      <Header title="Personen" action={
+        <div style={{ display: "flex", gap: 8 }}>
+          <button className="btn btn-ghost" onClick={() => openNewPerson()} disabled={persons.length === 0} title={persons.length === 0 ? "Zuerst eine Firma anlegen" : ""}>+ Neue Person</button>
+          <button className="btn btn-ghost" onClick={() => openNewFirm({ isPartner: true })}>+ Neuer Partner</button>
+          <button className="btn btn-primary" onClick={() => openNewFirm({ isAuftraggeber: true })}>+ Neuer Auftraggeber</button>
+        </div>
+      } />
+
+      <div className="filter-bar">
+        <input className="pill" placeholder="Suche (Firma, Person, E-Mail…)" value={search} onChange={e => setSearch(e.target.value)} style={{ minWidth: 220 }} />
+        <select className="pill" value={ansicht} onChange={e => { setAnsicht(e.target.value); setGroupBy("alpha"); }}>
+          <option value="firmen">Alle Firmen</option>
+          <option value="auftraggeber">Auftraggeber</option>
+          <option value="partner">Partner</option>
+          <option value="personen">Einzelpersonen</option>
+        </select>
+        {hasFilter && <button className="btn btn-ghost" onClick={() => { setSearch(""); setAnsicht("firmen"); }} style={{ fontSize: 12 }}>Zurücksetzen</button>}
+      </div>
+
+      <div className="filter-bar">
+        <span className="filter-label">GRUPPIEREN:</span>
+        {activeGroupOpts.map(g => <button key={g.id} className={`pill${groupBy === g.id ? " active" : ""}`} onClick={() => setGroupBy(g.id)}>{g.label}</button>)}
+        <div style={{ marginLeft: "auto", fontSize: 12, color: "var(--text4)" }}>
+          {showPersonsView
+            ? <><strong style={{ color: "var(--text)" }}>{filteredPersons.length}</strong> {filteredPersons.length === 1 ? "Person" : "Personen"}</>
+            : <><strong style={{ color: "var(--text)" }}>{filteredFirmen.length}</strong> {filteredFirmen.length === 1 ? "Firma" : "Firmen"} · {allPersonsFlat.length} Ansprechpartner</>
+          }
+        </div>
+      </div>
+
+      {/* Einzelpersonen-Ansicht */}
+      {showPersonsView ? (
+        filteredPersons.length === 0 ? (
+          <div className="card" style={{ padding: 48, textAlign: "center", color: "#aaa" }}>
+            {allPersonsFlat.length === 0 ? "Noch keine Ansprechpartner erfasst." : "Keine Treffer"}
+          </div>
+        ) : groupedPersons.map(group => (
+          <div key={group.key} style={{ marginBottom: 20 }}>
+            {group.label && <div style={{ fontSize: 10, letterSpacing: "0.14em", color: "#aaa", fontWeight: 600, marginBottom: 8, paddingLeft: 2 }}>{group.label.toUpperCase()} <span style={{ opacity: 0.55 }}>{group.items.length}</span></div>}
+            <div className="card" style={{ padding: 0 }}>
+              <table style={{ width: "100%" }}>
+                <thead><tr>
+                  <th>Name</th>
+                  <th style={{ width: 150 }}>Position</th>
+                  <th style={{ width: 180 }}>Firma</th>
+                  <th>E-Mail</th>
+                  <th style={{ width: 130 }}>Telefon</th>
+                  <th style={{ width: 60 }}></th>
+                </tr></thead>
+                <tbody>
+                  {group.items.map(c => (
+                    <tr key={`${c._firmaId}-${c.id}`}>
+                      <td><strong>{c.name}</strong></td>
+                      <td style={{ fontSize: 12, color: "var(--text3)" }}>{c.position || <span style={{ color: "#ddd" }}>—</span>}</td>
+                      <td>
+                        <span onClick={() => setSelectedId(c._firmaId)} style={{ fontSize: 12, fontWeight: 500, color: "var(--text2)", cursor: "pointer", textDecoration: "underline", textDecorationColor: "transparent" }}
+                          onMouseEnter={e => e.target.style.textDecorationColor = "currentColor"}
+                          onMouseLeave={e => e.target.style.textDecorationColor = "transparent"}>
+                          {c._firmaName}
+                        </span>
+                        {c._firmaType && <span style={{ fontSize: 10, color: "#aaa", marginLeft: 6 }}>{c._firmaType}</span>}
+                      </td>
+                      <td style={{ fontSize: 12, color: "var(--text3)" }}>{c.email || <span style={{ color: "#ddd" }}>—</span>}</td>
+                      <td style={{ fontSize: 12, color: "var(--text3)" }}>{c.phone || <span style={{ color: "#ddd" }}>—</span>}</td>
+                      <td style={{ textAlign: "right" }}>
+                        <button className="btn btn-ghost" style={{ fontSize: 11, padding: "3px 8px" }} onClick={() => openEditPerson(c._firmaId, c.id)}><span className="material-icons" style={{ fontSize: 16 }}>edit</span></button>
+                      </td>
+                    </tr>
+                  ))}
+                </tbody>
+              </table>
+            </div>
+          </div>
+        ))
+      ) : (
+        /* Firmen-Ansicht */
+        filteredFirmen.length === 0 ? (
+          <div className="card" style={{ padding: 48, textAlign: "center", color: "#aaa" }}>
+            {persons.length === 0 ? "Noch keine Firmen erfasst." : "Keine Treffer"}
+          </div>
+        ) : groupedFirmen.map(group => (
+          <div key={group.key} style={{ marginBottom: 20 }}>
+            {group.label && <div style={{ fontSize: 10, letterSpacing: "0.14em", color: "#aaa", fontWeight: 600, marginBottom: 8, paddingLeft: 2 }}>{group.label.toUpperCase()} <span style={{ opacity: 0.55 }}>{group.items.length}</span></div>}
+            <div className="card" style={{ padding: 0 }}>
+              <table style={{ width: "100%" }}>
+                <thead><tr>
+                  <th>Firma</th>
+                  <th style={{ width: 160 }}>Rolle</th>
+                  <th style={{ width: 130 }}>Branche / Typ</th>
+                  <th>Adresse</th>
+                  <th>Hauptkontakt</th>
+                  <th style={{ textAlign: "center", width: 72 }}>Projekte</th>
+                  <th style={{ width: 110 }}></th>
+                </tr></thead>
+                <tbody>
+                  {group.items.map(p => {
+                    const addr = [p.street, [p.zip, p.city].filter(Boolean).join(" ")].filter(Boolean).join(", ");
+                    const projCount = projects.filter(pr => pr.clientId === p.id || (pr.projectContacts || []).some(pc => pc.contactId === p.id)).length;
+                    const contacts = p.contacts || [];
+                    const hauptkontakt = contacts[0] || null;
+                    return (
+                      <React.Fragment key={p.id}>
+                        <tr style={{ cursor: "pointer" }} onClick={() => setSelectedId(p.id)}>
+                          <td>
+                            <strong style={{ color: "var(--text)" }}>{p.name}</strong>
+                            {p.email && <div style={{ fontSize: 11, color: "#888" }}>{p.email}</div>}
+                          </td>
+                          <td>
+                            <div style={{ display: "flex", gap: 4, flexWrap: "wrap" }}>
+                              {p.isAuftraggeber && <RoleBadge label="Auftraggeber" color="#1a4e8a" bg="#e8f0fa" />}
+                              {p.isPartner      && <RoleBadge label="Partner"      color="#2d6a4f" bg="#e8f5ee" />}
+                            </div>
+                          </td>
+                          <td style={{ fontSize: 12, color: "#888" }}>{p.type || <span style={{ color: "#ddd" }}>—</span>}</td>
+                          <td style={{ fontSize: 12, color: "#777" }}>{addr || <span style={{ color: "#ddd" }}>—</span>}</td>
+                          <td style={{ fontSize: 12 }}>
+                            {hauptkontakt ? (
+                              <div>
+                                <span style={{ fontWeight: 500 }}>{hauptkontakt.name}</span>
+                                {hauptkontakt.position && <span style={{ color: "#aaa" }}>, {hauptkontakt.position}</span>}
+                                {contacts.length > 1 && <span style={{ fontSize: 10, color: "#aaa", marginLeft: 6 }}>+{contacts.length - 1}</span>}
+                              </div>
+                            ) : <span style={{ color: "#ddd" }}>—</span>}
+                          </td>
+                          <td style={{ textAlign: "center", fontSize: 12, color: projCount ? "#2d6a4f" : "#ccc", fontWeight: projCount ? 600 : 400 }}>{projCount || "—"}</td>
+                          <td style={{ textAlign: "right", whiteSpace: "nowrap" }} onClick={e => e.stopPropagation()}>
+                            <div style={{ display: "flex", gap: 4, justifyContent: "flex-end" }}>
+                              <button className="btn btn-ghost" style={{ fontSize: 11, padding: "3px 8px" }} title="Person hinzufügen" onClick={() => openNewPerson(p.id)}>+ P</button>
+                              <button className="btn btn-ghost" style={{ fontSize: 11, padding: "3px 8px" }} title="Bearbeiten" onClick={() => openEditFirm(p.id)}><span className="material-icons" style={{ fontSize: 16 }}>edit</span></button>
+                              <button className="btn btn-danger" style={{ fontSize: 11, padding: "3px 7px" }} onClick={() => deleteFirm(p.id)}><span className="material-icons" style={{ fontSize: 16 }}>close</span></button>
+                            </div>
+                          </td>
+                        </tr>
+                        {contacts.map(c => (
+                          <tr key={c.id} style={{ background: "var(--surface2)", cursor: "default" }} onClick={e => e.stopPropagation()}>
+                            <td colSpan={4} style={{ paddingLeft: 28, fontSize: 12, color: "var(--text3)" }}>
+                              <span style={{ color: "var(--text5)", marginRight: 8 }}>↳</span>
+                              <span style={{ fontWeight: 500 }}>{c.name}</span>
+                              {c.position && <span style={{ color: "var(--text4)" }}>, {c.position}</span>}
+                              {c.email && <span style={{ color: "var(--text4)", marginLeft: 10 }}>{c.email}</span>}
+                              {c.phone && <span style={{ color: "var(--text4)", marginLeft: 10 }}>{c.phone}</span>}
+                            </td>
+                            <td colSpan={3} style={{ textAlign: "right", paddingRight: 12 }}>
+                              <button className="btn btn-ghost" style={{ fontSize: 11, padding: "2px 7px" }} onClick={() => openEditPerson(p.id, c.id)}><span className="material-icons" style={{ fontSize: 16 }}>edit</span></button>
+                              <button className="btn btn-danger" style={{ fontSize: 11, padding: "2px 6px", marginLeft: 4 }} onClick={() => deleteContactFromFirm(p.id, c.id)}><span className="material-icons" style={{ fontSize: 16 }}>close</span></button>
+                            </td>
+                          </tr>
+                        ))}
+                      </React.Fragment>
+                    );
+                  })}
+                </tbody>
+              </table>
+            </div>
+          </div>
+        ))
+      )}
+
+      {firmModal && renderFirmModal()}
+      {personModal && renderPersonModal()}
+    </div>
+  );
+}
diff --git a/src/views/Pinnwand.jsx b/src/views/Pinnwand.jsx
new file mode 100755
index 0000000..62074ff
--- /dev/null
+++ b/src/views/Pinnwand.jsx
@@ -0,0 +1,417 @@
+import React, { useState, useRef } from "react";
+import { generateId } from "../utils.js";
+
+const TYPE_META = {
+  beitrag:      { label: "Beitrag",       color: "#1a4e8a", bg: "#e8f0fa" },
+  ankuendigung: { label: "Ankündigung",   color: "#b5621e", bg: "#fdf0e8" },
+  event:        { label: "Event",         color: "#2d6a4f", bg: "#e8f5ee" },
+};
+
+function canWriteCheck(currentUser, data) {
+  const myUser  = (data.users   || []).find(u => u.id === currentUser?.id);
+  const myRole  = (data.appRoles|| []).find(r => r.id === (currentUser?.appRoleId || myUser?.appRoleId));
+  return currentUser?.role === "admin" || myRole?.permissions === null || (myRole?.permissions || []).includes("pinnwand-schreiben");
+}
+
+// ─── Poll bar ─────────────────────────────────────────────────────────────────
+function PollBlock({ poll, postId, currentUserId, onVote }) {
+  if (!poll) return null;
+  const total = Object.keys(poll.votes || {}).length;
+  const myVote = poll.votes?.[currentUserId];
+  const hasVoted = !!myVote;
+  return (
+    <div style={{ marginTop: 14, padding: "12px 14px", background: "var(--surface2)", borderRadius: 10, border: "1px solid var(--border2)" }}>
+      <div style={{ fontSize: 12, fontWeight: 600, color: "var(--text)", marginBottom: 10 }}>{poll.question}</div>
+      {poll.options.map(opt => {
+        const count = Object.values(poll.votes || {}).filter(v => v === opt.id).length;
+        const pct = total > 0 ? Math.round((count / total) * 100) : 0;
+        const isMyVote = myVote === opt.id;
+        return (
+          <div key={opt.id} style={{ marginBottom: 8 }}>
+            {!hasVoted ? (
+              <button onClick={() => onVote(postId, opt.id)} style={{
+                width: "100%", padding: "8px 14px", textAlign: "left",
+                background: "var(--surface)", border: "1.5px solid var(--border)",
+                borderRadius: 8, cursor: "pointer", fontSize: 13, fontFamily: "inherit",
+                color: "var(--text)", transition: "border-color 0.15s",
+              }}
+                onMouseEnter={e => e.currentTarget.style.borderColor = "#9a7858"}
+                onMouseLeave={e => e.currentTarget.style.borderColor = "var(--border)"}
+              >{opt.label}</button>
+            ) : (
+              <div>
+                <div style={{ display: "flex", justifyContent: "space-between", marginBottom: 4, fontSize: 12 }}>
+                  <span style={{ color: isMyVote ? "var(--text)" : "var(--text3)", fontWeight: isMyVote ? 600 : 400 }}>
+                    {isMyVote ? "✓ " : ""}{opt.label}
+                  </span>
+                  <span style={{ color: "var(--text4)" }}>{count} ({pct}%)</span>
+                </div>
+                <div style={{ height: 4, background: "var(--border2)", borderRadius: 2 }}>
+                  <div style={{ width: `${pct}%`, height: "100%", background: isMyVote ? "#1a4e8a" : "var(--border3)", borderRadius: 2, transition: "width 0.4s" }} />
+                </div>
+              </div>
+            )}
+          </div>
+        );
+      })}
+      {hasVoted && <div style={{ fontSize: 11, color: "var(--text4)", marginTop: 6 }}>{total} Stimme{total !== 1 ? "n" : ""} abgegeben</div>}
+    </div>
+  );
+}
+
+// ─── Post card ────────────────────────────────────────────────────────────────
+function PostCard({ post, currentUser, canWrite, onEdit, onDelete, onPin, onVote }) {
+  const meta = TYPE_META[post.type] || TYPE_META.beitrag;
+  const isOwn = post.authorId === currentUser?.id;
+  const isAdmin = currentUser?.role === "admin";
+  const [expanded, setExpanded] = useState(true);
+  const [confirmDel, setConfirmDel] = useState(false);
+  const bodyLines = (post.body || "").split("\n");
+  const isLong = bodyLines.length > 6 || post.body?.length > 400;
+  const isDraft = post.status === "entwurf";
+
+  return (
+    <div style={{ background: "var(--surface)", border: isDraft ? "1.5px dashed var(--border3)" : "1px solid var(--border2)", borderRadius: 14, marginBottom: 14, boxShadow: "0 1px 4px rgba(0,0,0,0.05)", overflow: "hidden", opacity: isDraft ? 0.85 : 1 }}>
+      {post.image && (
+        <img src={post.image} alt="" style={{ width: "100%", maxHeight: 300, objectFit: "cover", display: "block" }} />
+      )}
+      <div style={{ padding: "18px 22px" }}>
+        <div style={{ display: "flex", alignItems: "flex-start", justifyContent: "space-between", marginBottom: 10 }}>
+          <div style={{ display: "flex", alignItems: "center", gap: 8, flexWrap: "wrap" }}>
+            <span style={{ fontSize: 10, fontWeight: 600, padding: "2px 10px", borderRadius: 20, color: meta.color, background: meta.bg, letterSpacing: "0.06em" }}>
+              {meta.label.toUpperCase()}
+            </span>
+            {isDraft && <span style={{ fontSize: 10, color: "#7a6a00", background: "#fffbe6", fontWeight: 600, padding: "2px 10px", borderRadius: 20, letterSpacing: "0.06em" }}>ENTWURF</span>}
+            {post.pinned && <span style={{ fontSize: 10, color: "#b07848", fontWeight: 600, letterSpacing: "0.06em", display: "flex", alignItems: "center", gap: 3 }}><span className="material-icons" style={{ fontSize: 12 }}>push_pin</span> ANGEPINNT</span>}
+            {post.eventDate && (
+              <span style={{ fontSize: 11, color: "#2d6a4f", background: "#e8f5ee", padding: "2px 10px", borderRadius: 20 }}>
+                📅 {new Date(post.eventDate).toLocaleDateString("de-CH", { weekday: "short", day: "numeric", month: "long" })}
+              </span>
+            )}
+          </div>
+          <div style={{ display: "flex", alignItems: "center", gap: 6, flexShrink: 0, marginLeft: 8 }}>
+            {isAdmin && !isDraft && (
+              <button onClick={() => onPin(post.id)} title={post.pinned ? "Loslösen" : "Anpinnen"}
+                style={{ background: "none", border: "none", cursor: "pointer", opacity: post.pinned ? 1 : 0.4, padding: 2, display: "flex", alignItems: "center" }}><span className="material-icons" style={{ fontSize: 18 }}>push_pin</span></button>
+            )}
+            {(isOwn || isAdmin) && canWrite && (
+              <>
+                <button onClick={() => onEdit(post)} style={{ background: "none", border: "none", cursor: "pointer", color: "var(--text4)", padding: "2px 6px", display: "flex", alignItems: "center" }}><span className="material-icons" style={{ fontSize: 16 }}>edit</span></button>
+                {confirmDel ? (
+                  <>
+                    <span style={{ fontSize: 11, color: "#8a1a1a", fontFamily: "inherit" }}>Löschen?</span>
+                    <button onClick={() => onDelete(post.id)} style={{ background: "#8a1a1a", color: "#fff", border: "none", borderRadius: 5, cursor: "pointer", fontSize: 11, padding: "2px 8px", fontFamily: "inherit" }}>Ja</button>
+                    <button onClick={() => setConfirmDel(false)} style={{ background: "none", border: "1px solid var(--border3)", borderRadius: 5, cursor: "pointer", fontSize: 11, padding: "2px 8px", fontFamily: "inherit", color: "var(--text3)" }}>Nein</button>
+                  </>
+                ) : (
+                  <button onClick={() => setConfirmDel(true)} style={{ background: "none", border: "none", cursor: "pointer", color: "#8a1a1a", padding: "2px 6px", display: "flex", alignItems: "center" }}><span className="material-icons" style={{ fontSize: 16 }}>close</span></button>
+                )}
+              </>
+            )}
+          </div>
+        </div>
+
+        {post.title && <div style={{ fontSize: 17, fontFamily: "'Playfair Display', serif", color: "var(--text)", marginBottom: 8, lineHeight: 1.3 }}>{post.title}</div>}
+
+        <div style={{ fontSize: 13, color: "var(--text2)", lineHeight: 1.7, whiteSpace: "pre-wrap", overflow: "hidden", maxHeight: expanded ? "none" : "6.8em" }}>
+          {post.body}
+        </div>
+        {isLong && (
+          <button onClick={() => setExpanded(e => !e)} style={{ background: "none", border: "none", color: "#9a7858", fontSize: 12, cursor: "pointer", fontFamily: "inherit", padding: "4px 0", marginTop: 2 }}>
+            {expanded ? "Weniger anzeigen ↑" : "Mehr anzeigen ↓"}
+          </button>
+        )}
+
+        <PollBlock poll={post.poll} postId={post.id} currentUserId={currentUser?.id} onVote={onVote} />
+
+        <div style={{ marginTop: 12, fontSize: 11, color: "var(--text4)", display: "flex", gap: 16 }}>
+          <span>{post.authorName}</span>
+          <span>{new Date(post.createdAt).toLocaleDateString("de-CH", { day: "numeric", month: "long", year: "numeric", hour: "2-digit", minute: "2-digit" })}</span>
+        </div>
+      </div>
+    </div>
+  );
+}
+
+// ─── Post modal ───────────────────────────────────────────────────────────────
+function PostModal({ initial, onSave, onClose }) {
+  const [form, setForm] = useState(initial || { title: "", body: "", type: "beitrag", eventDate: "", pinned: false, poll: null, image: "" });
+  const [pollEnabled, setPollEnabled] = useState(!!initial?.poll);
+  const [poll, setPoll] = useState(initial?.poll || { question: "", options: [{ id: generateId(), label: "" }, { id: generateId(), label: "" }], votes: {} });
+  const fileInputRef = useRef(null);
+  const setF = patch => setForm(f => ({ ...f, ...patch }));
+  const setOpt = (id, label) => setPoll(p => ({ ...p, options: p.options.map(o => o.id === id ? { ...o, label } : o) }));
+  const addOpt = () => { if (poll.options.length >= 5) return; setPoll(p => ({ ...p, options: [...p.options, { id: generateId(), label: "" }] })); };
+  const delOpt = id => { if (poll.options.length <= 2) return; setPoll(p => ({ ...p, options: p.options.filter(o => o.id !== id) })); };
+
+  const handleImage = (e) => {
+    const file = e.target.files?.[0];
+    if (!file) return;
+    const reader = new FileReader();
+    reader.onload = (ev) => {
+      const img = new Image();
+      img.onload = () => {
+        const maxW = 1200;
+        const scale = img.width > maxW ? maxW / img.width : 1;
+        const canvas = document.createElement("canvas");
+        canvas.width = Math.round(img.width * scale);
+        canvas.height = Math.round(img.height * scale);
+        canvas.getContext("2d").drawImage(img, 0, 0, canvas.width, canvas.height);
+        setF({ image: canvas.toDataURL("image/jpeg", 0.8) });
+      };
+      img.src = ev.target.result;
+    };
+    reader.readAsDataURL(file);
+    e.target.value = "";
+  };
+
+  const handleSave = (draft = false) => {
+    if (!form.body.trim()) return;
+    const finalPoll = pollEnabled && poll.question.trim() && poll.options.filter(o => o.label.trim()).length >= 2
+      ? { ...poll, options: poll.options.filter(o => o.label.trim()), votes: initial?.poll?.votes || {} }
+      : null;
+    onSave({ ...form, poll: finalPoll }, draft);
+  };
+
+  const isDraft = initial?.status === "entwurf";
+  const isNew = !initial;
+  const primaryLabel = (isNew || isDraft) ? "Veröffentlichen" : "Speichern";
+
+  return (
+    <div className="modal-overlay" onClick={onClose}>
+      <div className="modal" style={{ maxWidth: 580 }} onClick={e => e.stopPropagation()}>
+        <div style={{ fontFamily: "'Playfair Display', serif", fontSize: 20, marginBottom: 20, color: "var(--text)" }}>
+          {initial ? "Beitrag bearbeiten" : "Neuer Beitrag"}
+        </div>
+
+        <div className="form-row" style={{ marginBottom: 14 }}>
+          <div className="form-group" style={{ flex: "0 0 160px" }}>
+            <label>TYP</label>
+            <select value={form.type} onChange={e => setF({ type: e.target.value })}>
+              {Object.entries(TYPE_META).map(([k, v]) => <option key={k} value={k}>{v.label}</option>)}
+            </select>
+          </div>
+          {form.type === "event" && (
+            <div className="form-group">
+              <label>DATUM</label>
+              <input type="date" value={form.eventDate} onChange={e => setF({ eventDate: e.target.value })} />
+            </div>
+          )}
+        </div>
+
+        <div className="form-group" style={{ marginBottom: 14 }}>
+          <label>TITEL (optional)</label>
+          <input value={form.title} onChange={e => setF({ title: e.target.value })} placeholder="Titel des Beitrags…" />
+        </div>
+
+        <div className="form-group" style={{ marginBottom: 14 }}>
+          <label>INHALT *</label>
+          <textarea value={form.body} onChange={e => setF({ body: e.target.value })} rows={5} placeholder="Beitragstext…" style={{ minHeight: 120, resize: "vertical" }} />
+        </div>
+
+        {/* Image upload */}
+        <div style={{ marginBottom: 14 }}>
+          <input ref={fileInputRef} type="file" accept="image/*" style={{ display: "none" }} onChange={handleImage} />
+          {form.image ? (
+            <div style={{ position: "relative" }}>
+              <img src={form.image} alt="" style={{ width: "100%", maxHeight: 220, objectFit: "cover", borderRadius: 8, display: "block" }} />
+              <button onClick={() => setF({ image: "" })} style={{
+                position: "absolute", top: 6, right: 6, background: "rgba(0,0,0,0.55)", border: "none",
+                borderRadius: 6, color: "#fff", fontSize: 11, padding: "4px 10px", cursor: "pointer", fontFamily: "inherit",
+              }}>Bild entfernen</button>
+            </div>
+          ) : (
+            <button onClick={() => fileInputRef.current?.click()} style={{
+              width: "100%", padding: "10px 0", border: "1.5px dashed var(--border3)", borderRadius: 8,
+              background: "transparent", color: "var(--text4)", fontSize: 12, cursor: "pointer", fontFamily: "inherit",
+            }}>+ Beitragsbild hochladen</button>
+          )}
+        </div>
+
+        {/* Poll */}
+        <div style={{ marginBottom: 18, padding: "12px 14px", background: "var(--surface2)", borderRadius: 10, border: "1px solid var(--border2)" }}>
+          <label style={{ display: "flex", alignItems: "center", gap: 8, cursor: "pointer", fontSize: 12, marginBottom: pollEnabled ? 12 : 0 }}>
+            <input type="checkbox" checked={pollEnabled} onChange={e => setPollEnabled(e.target.checked)} style={{ width: "auto" }} />
+            Umfrage hinzufügen
+          </label>
+          {pollEnabled && (
+            <>
+              <div className="form-group" style={{ marginBottom: 10 }}>
+                <label>FRAGE</label>
+                <input value={poll.question} onChange={e => setPoll(p => ({ ...p, question: e.target.value }))} placeholder="z.B. Bist du dabei?" />
+              </div>
+              <label style={{ fontSize: 9, letterSpacing: "0.1em", color: "var(--text4)", fontWeight: 500, display: "block", marginBottom: 6 }}>ANTWORTMÖGLICHKEITEN</label>
+              {poll.options.map((opt, i) => (
+                <div key={opt.id} style={{ display: "flex", gap: 6, marginBottom: 6 }}>
+                  <input value={opt.label} onChange={e => setOpt(opt.id, e.target.value)} placeholder={`Option ${i + 1}`} style={{ flex: 1 }} />
+                  {poll.options.length > 2 && <button onClick={() => delOpt(opt.id)} style={{ background: "none", border: "none", color: "#8a1a1a", cursor: "pointer", padding: "0 4px", display: "flex", alignItems: "center" }}><span className="material-icons" style={{ fontSize: 16 }}>close</span></button>}
+                </div>
+              ))}
+              {poll.options.length < 5 && (
+                <button onClick={addOpt} style={{ background: "none", border: "1px dashed var(--border3)", borderRadius: 6, padding: "5px 12px", fontSize: 11, color: "var(--text4)", cursor: "pointer", fontFamily: "inherit", marginTop: 2 }}>+ Option</button>
+              )}
+            </>
+          )}
+        </div>
+
+        <div style={{ display: "flex", gap: 10, justifyContent: "flex-end" }}>
+          <button className="btn btn-ghost" onClick={onClose}>Abbrechen</button>
+          <button className="btn btn-ghost" onClick={() => handleSave(true)} disabled={!form.body.trim()}>
+            Als Entwurf speichern
+          </button>
+          <button className="btn btn-primary" onClick={() => handleSave(false)} disabled={!form.body.trim()}>
+            {primaryLabel}
+          </button>
+        </div>
+      </div>
+    </div>
+  );
+}
+
+// ─── Main view ────────────────────────────────────────────────────────────────
+export default function Pinnwand({ data, update, currentUser }) {
+  const [modal, setModal] = useState(null); // null | { mode: "create" } | { mode: "edit", post }
+  const [filter, setFilter] = useState("alle");
+  const canWrite = canWriteCheck(currentUser, data);
+  const posts = data.blogPosts || [];
+  const myId = currentUser?.id;
+  const isAdminUser = currentUser?.role === "admin";
+
+  const sorted = [...posts]
+    .filter(p => {
+      if (p.status === "entwurf" && p.authorId !== myId && !isAdminUser) return false;
+      if (filter === "entwuerfe") return p.status === "entwurf";
+      if (filter !== "alle") return p.type === filter;
+      return true;
+    })
+    .sort((a, b) => {
+      if (a.pinned !== b.pinned) return a.pinned ? -1 : 1;
+      return b.createdAt.localeCompare(a.createdAt);
+    });
+
+  const savePost = (form, draft = false) => {
+    const status = draft ? "entwurf" : "published";
+    if (modal?.mode === "edit") {
+      update("blogPosts", posts.map(p => p.id === form.id ? { ...p, ...form, status } : p));
+    } else {
+      const newPost = {
+        ...form,
+        id: generateId(),
+        authorId: myId || "admin",
+        authorName: currentUser?.displayName || currentUser?.username || "—",
+        createdAt: new Date().toISOString(),
+        pinned: false,
+        status,
+      };
+      update("blogPosts", [newPost, ...posts]);
+    }
+    setModal(null);
+  };
+
+  const deletePost = id => update("blogPosts", posts.filter(p => p.id !== id));
+  const togglePin  = id => update("blogPosts", posts.map(p => p.id === id ? { ...p, pinned: !p.pinned } : p));
+
+  const vote = (postId, optionId) => {
+    update("blogPosts", posts.map(p => {
+      if (p.id !== postId || !p.poll) return p;
+      const votes = { ...p.poll.votes, [currentUser?.id]: optionId };
+      return { ...p, poll: { ...p.poll, votes } };
+    }));
+  };
+
+  // Holiday notice this week
+  const today = new Date();
+  const getMonday = d => { const dd = new Date(d); dd.setDate(dd.getDate() - (dd.getDay() === 0 ? 6 : dd.getDay() - 1)); return dd; };
+  const weekStart = getMonday(today);
+  const weekEnd = new Date(weekStart); weekEnd.setDate(weekEnd.getDate() + 6);
+  const toISO = d => d.toISOString().slice(0, 10);
+  const feiertageThisWeek = (data.feiertage || []).filter(f => f.date >= toISO(weekStart) && f.date <= toISO(weekEnd));
+
+  const FILTER_OPTS = [
+    { id: "alle", label: "Alle" },
+    { id: "beitrag", label: "Beiträge" },
+    { id: "ankuendigung", label: "Ankündigungen" },
+    { id: "event", label: "Events" },
+    ...(canWrite ? [{ id: "entwuerfe", label: "Entwürfe" }] : []),
+  ];
+
+  const btnStyle = active => ({
+    padding: "5px 14px", borderRadius: 20, border: "1.5px solid", fontSize: 11, cursor: "pointer", fontFamily: "inherit",
+    background: active ? "var(--text)" : "var(--surface)",
+    color: active ? "var(--bg)" : "var(--text3)",
+    borderColor: active ? "var(--text)" : "var(--border3)",
+    transition: "all 0.15s",
+  });
+
+  const leftPosts  = sorted.filter((_, i) => i % 2 === 0);
+  const rightPosts = sorted.filter((_, i) => i % 2 === 1);
+
+  const renderCard = post => (
+    <PostCard
+      key={post.id}
+      post={post}
+      currentUser={currentUser}
+      canWrite={canWrite}
+      onEdit={p => setModal({ mode: "edit", post: p })}
+      onDelete={deletePost}
+      onPin={togglePin}
+      onVote={vote}
+    />
+  );
+
+  return (
+    <div>
+      <div style={{ display: "flex", justifyContent: "space-between", alignItems: "flex-start", marginBottom: 24 }}>
+        <div>
+          <h1 style={{ fontFamily: "'Playfair Display', serif", fontSize: 30, fontWeight: 400, letterSpacing: "-0.02em", color: "var(--text)", marginBottom: 6 }}>Pinnwand</h1>
+          <div style={{ display: "flex", gap: 6, flexWrap: "wrap" }}>
+            {FILTER_OPTS.map(opt => (
+              <button key={opt.id} onClick={() => setFilter(opt.id)} style={btnStyle(filter === opt.id)}>{opt.label}</button>
+            ))}
+          </div>
+        </div>
+        {canWrite && (
+          <button className="btn btn-primary" onClick={() => setModal({ mode: "create" })} style={{ flexShrink: 0 }}>
+            + Beitrag
+          </button>
+        )}
+      </div>
+
+      {/* Holiday notice */}
+      {feiertageThisWeek.length > 0 && (
+        <div style={{ padding: "12px 18px", background: "#e8f5ee", border: "1.5px solid #a8d8b8", borderRadius: 12, marginBottom: 16, display: "flex", alignItems: "center", gap: 12 }}>
+          <span style={{ fontSize: 20 }}>🎉</span>
+          <div>
+            <div style={{ fontSize: 12, fontWeight: 600, color: "#2d6a4f", marginBottom: 2 }}>Feiertag diese Woche</div>
+            <div style={{ fontSize: 12, color: "#3a7a5a" }}>
+              {feiertageThisWeek.map(f => `${new Date(f.date).toLocaleDateString("de-CH", { weekday: "long", day: "numeric", month: "long" })}: ${f.name}`).join(" · ")}
+            </div>
+          </div>
+        </div>
+      )}
+
+      {sorted.length === 0 && (
+        <div style={{ textAlign: "center", padding: "60px 0", color: "var(--text4)" }}>
+          <div style={{ fontSize: 32, marginBottom: 12 }}>📋</div>
+          <div style={{ fontSize: 14 }}>Noch keine Beiträge</div>
+          {canWrite && <div style={{ fontSize: 12, marginTop: 6 }}>Erstelle den ersten Beitrag mit dem Button oben rechts.</div>}
+        </div>
+      )}
+
+      {sorted.length > 0 && (
+        <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 16, alignItems: "start" }}>
+          <div>{leftPosts.map(renderCard)}</div>
+          <div>{rightPosts.map(renderCard)}</div>
+        </div>
+      )}
+
+      {modal && (
+        <PostModal
+          initial={modal.mode === "edit" ? modal.post : null}
+          onSave={savePost}
+          onClose={() => setModal(null)}
+        />
+      )}
+    </div>
+  );
+}
diff --git a/src/views/Projects.jsx b/src/views/Projects.jsx
new file mode 100755
index 0000000..35b7810
--- /dev/null
+++ b/src/views/Projects.jsx
@@ -0,0 +1,1781 @@
+import React, { useState } from "react";
+import { SIA_PHASES, PROJECT_TYPES, PROTOKOLL_TYPES } from "../constants.js";
+
+const NON_BILLING_CATEGORIES = ["Wettbewerb"];
+import { calcSIAHours, calcManualHours, deriveQuoteBudget, migrateLinkedQuotes, generateId, formatCHF, formatDate, formatHours, applyProjectNumberFormat, parseSeqFromNumber, nextProtoSeq, applyProtoNumberFormat } from "../utils.js";
+import { Header, Modal, FormField, StatusBadge, useConfirm , DateInput } from "../components/UI.jsx";
+
+function ProjectEditForm({ form, setForm, data }) {
+  const [newPhaseLabel, setNewPhaseLabel] = useState("");
+  const togglePhase = (phaseId) => {
+    setForm(prev => {
+      const phases = prev.enabledPhases || [];
+      return { ...prev, enabledPhases: phases.includes(phaseId) ? phases.filter(p => p !== phaseId) : [...phases, phaseId] };
+    });
+  };
+  return (
+    <>
+      <div className="form-row">
+        <FormField label="Projektnummer">
+          <input value={form.number} onChange={e => setForm({ ...form, number: e.target.value })} placeholder={`z.B. ${new Date().getFullYear()}/01`} style={{ maxWidth: 140 }} />
+        </FormField>
+        <FormField label="Projektname *" style={{ flex: 3 }}>
+          <input value={form.name} onChange={e => setForm({ ...form, name: e.target.value })} placeholder="z.B. Wohnhaus Müller" autoFocus style={!form.name?.trim() ? { borderColor: "#b5621e" } : {}} />
+        </FormField>
+      </div>
+      <div className="form-row">
+        <FormField label="Kategorie">
+          <select value={form.category} onChange={e => setForm({ ...form, category: e.target.value })}>
+            {PROJECT_TYPES.map(t => <option key={t} value={t}>{t}</option>)}
+          </select>
+        </FormField>
+        <FormField label="Auftraggeber">
+          <select value={form.clientId} onChange={e => setForm({ ...form, clientId: e.target.value })}>
+            <option value="">— kein Auftraggeber —</option>
+            {(data.persons||[]).filter(p=>p.isAuftraggeber).map(c => <option key={c.id} value={c.id}>{c.name}</option>)}
+          </select>
+        </FormField>
+        <FormField label="Status">
+          <select value={form.status} onChange={e => setForm({ ...form, status: e.target.value })}>
+            {["aktiv", "pausiert", "abgeschlossen"].map(s => <option key={s}>{s}</option>)}
+          </select>
+        </FormField>
+      </div>
+      <div className="form-row">
+        {NON_BILLING_CATEGORIES.includes(form.category) ? (
+          <div style={{ flex: 1, display: "flex", alignItems: "center", gap: 8, padding: "8px 12px", background: "#faf8f5", borderRadius: 6, border: "1px solid #e0dbd4", fontSize: 12, color: "#888" }}>
+            <span style={{ fontSize: 16 }}>○</span>
+            <span><strong style={{ color: "#1a1a18" }}>Nicht verrechenbar</strong> — Stunden werden erfasst, aber nicht fakturiert.</span>
+          </div>
+        ) : (
+          <>
+            <FormField label="Abrechnungstyp">
+              <select value={form.billingType} onChange={e => setForm({ ...form, billingType: e.target.value })}>
+                <option value="stundensatz">Stundensatz</option>
+                <option value="pauschal">Pauschal</option>
+              </select>
+            </FormField>
+            {form.billingType === "stundensatz"
+              ? <FormField label="Stundensatz (CHF)"><input type="number" value={form.hourlyRate} onChange={e => setForm({ ...form, hourlyRate: +e.target.value })} /></FormField>
+              : <FormField label="Pauschalpreis (CHF)"><input type="number" value={form.budget} onChange={e => setForm({ ...form, budget: +e.target.value })} /></FormField>}
+          </>
+        )}
+        <FormField label="Startdatum"><DateInput value={form.startDate} onChange={e => setForm({ ...form, startDate: e.target.value })} /></FormField>
+      </div>
+      <div className="form-row">
+        <FormField label="Stundenbudget (Soll-Stunden)">
+          <input type="number" step="0.5" min={0} value={form.budgetHours || 0}
+            onChange={e => setForm({ ...form, budgetHours: +e.target.value, linkedQuotes: [], phasesBudget: [] })}
+            placeholder="0 = aus Offerten berechnet" />
+        </FormField>
+      </div>
+      {(() => {
+        const linked = form.linkedQuotes || [];
+        const ROLES = ["Hauptofferte", "Nachtrag", "Referenz"];
+
+        const buildPositions = (newLinked, existingPositions) => {
+          const manual = (existingPositions || []).filter(p => !p.quoteId);
+          const nachtraege = newLinked.filter(lq => lq.role === "Nachtrag").map((lq, idx) => {
+            const existing = (existingPositions || []).find(p => p.quoteId === lq.quoteId);
+            const q = (data.quotes || []).find(x => x.id === lq.quoteId);
+            const sd = deriveQuoteBudget([lq], data.quotes || [], data.settings.roles || []);
+            return { code: existing?.code || `N${idx + 1}`, label: existing !== undefined ? existing.label : (q?.projectName || q?.number || ""), enabledPhases: existing?.enabledPhases || sd.enabledPhases, quoteId: lq.quoteId };
+          });
+          return [...manual, ...nachtraege];
+        };
+
+        const addQuote = (quoteId) => {
+          if (!quoteId || linked.some(lq => lq.quoteId === quoteId)) return;
+          const isFirst = linked.length === 0;
+          const newLinked = [...linked, { quoteId, role: isFirst ? "Hauptofferte" : "Nachtrag" }];
+          const d = deriveQuoteBudget(newLinked, data.quotes || [], data.settings.roles || []);
+          const q = (data.quotes || []).find(x => x.id === quoteId);
+          setForm(f => ({
+            ...f, linkedQuotes: newLinked, budgetHours: d.budgetHours, budgetAmount: d.budgetAmount, phasesBudget: d.phasesBudget,
+            enabledPhases: isFirst ? [...new Set([...(f.enabledPhases || []), ...d.enabledPhases])] : (f.enabledPhases || []),
+            billingType: isFirst ? (q?.mode === "manual" ? "stundensatz" : "pauschal") : f.billingType,
+            positions: buildPositions(newLinked, f.positions || []),
+          }));
+        };
+
+        const removeQuote = (quoteId) => {
+          const newLinked = linked.filter(lq => lq.quoteId !== quoteId);
+          const d = newLinked.length > 0 ? deriveQuoteBudget(newLinked, data.quotes || [], data.settings.roles || []) : { budgetHours: 0, budgetAmount: 0, phasesBudget: [] };
+          setForm(f => ({ ...f, linkedQuotes: newLinked, budgetHours: d.budgetHours, budgetAmount: d.budgetAmount, phasesBudget: d.phasesBudget, positions: buildPositions(newLinked, (f.positions || []).filter(p => p.quoteId !== quoteId)) }));
+        };
+
+        const changeRole = (quoteId, role) => setForm(f => {
+          const newLinked = f.linkedQuotes.map(lq => lq.quoteId === quoteId ? { ...lq, role } : lq);
+          return { ...f, linkedQuotes: newLinked, positions: buildPositions(newLinked, f.positions || []) };
+        });
+
+        const updateNachtragPos = (quoteId, updates) => setForm(f => ({ ...f, positions: (f.positions || []).map(p => p.quoteId === quoteId ? { ...p, ...updates } : p) }));
+        const toggleHOPhase = (phId) => setForm(f => { const phases = f.enabledPhases || []; return { ...f, enabledPhases: phases.includes(phId) ? phases.filter(p => p !== phId) : [...phases, phId] }; });
+        const toggleNTPhase = (quoteId, phId) => setForm(f => ({ ...f, positions: (f.positions || []).map(p => { if (p.quoteId !== quoteId) return p; const phases = p.enabledPhases || []; return { ...p, enabledPhases: phases.includes(phId) ? phases.filter(x => x !== phId) : [...phases, phId] }; }) }));
+
+        const alreadyInOtherProjects = new Set((data.projects || []).filter(p => p.id !== form.id).flatMap(p => migrateLinkedQuotes(p).map(lq => lq.quoteId)));
+        const unlinkedQuotes = (data.quotes || []).filter(q => !linked.some(lq => lq.quoteId === q.id) && !alreadyInOtherProjects.has(q.id));
+        const sortedLinked = [...linked.filter(lq => lq.role === "Hauptofferte"), ...linked.filter(lq => lq.role !== "Hauptofferte")];
+
+        return (
+          <div style={{ marginBottom: 14 }}>
+            <div style={{ fontSize: 11, fontWeight: 600, letterSpacing: "0.08em", color: "#888", marginBottom: 10 }}>VERKNÜPFTE HONORAROFFERTEN</div>
+            {sortedLinked.map(lq => {
+              const q = (data.quotes || []).find(x => x.id === lq.quoteId);
+              if (!q) return null;
+              const isNT = lq.role === "Nachtrag";
+              const pos = isNT ? (form.positions || []).find(p => p.quoteId === lq.quoteId) : null;
+              const currentPhases = isNT ? (pos?.enabledPhases || []) : (form.enabledPhases || []);
+              const qRoles = q.quoteRoles || data.settings.roles || [];
+              const qH = q.mode === "sia" ? (calcSIAHours(q.sia?.baukosten, q.sia?.schwierigkeit, q.sia?.phases || []).total || 0) : q.mode === "manual" ? (calcManualHours(q.manualPhases || [], qRoles).totalHours || 0) : 0;
+              const bgColor = isNT ? "#f0f5fd" : "#faf8f5";
+              const borderColor = isNT ? "#c8d8ee" : "#ddd8d0";
+              const accentColor = isNT ? "#1a4e8a" : "#2d6a4f";
+              return (
+                <div key={lq.quoteId} style={{ marginBottom: 10, border: `1px solid ${borderColor}`, borderRadius: 8, overflow: "hidden" }}>
+                  <div style={{ display: "flex", alignItems: "center", gap: 8, padding: "10px 12px", background: bgColor, flexWrap: "wrap" }}>
+                    {isNT && pos ? (
+                      <>
+                        <input value={pos.code || ""} onChange={e => updateNachtragPos(lq.quoteId, { code: e.target.value.toUpperCase().replace(/\s/g, "").slice(0, 6) })} placeholder="N1" style={{ width: 52, fontWeight: 700, fontSize: 12, height: 26, padding: "0 6px" }} />
+                        <input value={pos.label || ""} onChange={e => updateNachtragPos(lq.quoteId, { label: e.target.value })} placeholder="z.B. Nachtrag Fassade" style={{ flex: 1, minWidth: 100, fontSize: 12, height: 26, padding: "0 6px" }} />
+                      </>
+                    ) : (
+                      <span style={{ fontSize: 10, fontWeight: 700, background: "#e8f5ee", color: accentColor, padding: "2px 8px", borderRadius: 3 }}>⬡ HO</span>
+                    )}
+                    <span style={{ fontWeight: 600, color: "#b07848", fontSize: 12 }}>{q.number}</span>
+                    <span style={{ color: "#888", fontSize: 11 }}>{q.mode === "sia" ? "SIA 102" : q.mode === "manual" ? "Aufwand" : "Pauschal"}</span>
+                    {qH > 0 && <span style={{ color: "#555", fontSize: 11 }}>{qH.toFixed(1)}h</span>}
+                    <div style={{ marginLeft: "auto", display: "flex", alignItems: "center", gap: 6 }}>
+                      <select value={lq.role} onChange={e => changeRole(lq.quoteId, e.target.value)} style={{ fontSize: 11, height: 26, padding: "0 6px" }}>
+                        {ROLES.map(r => <option key={r}>{r}</option>)}
+                      </select>
+                      <button className="btn btn-danger" style={{ padding: "0 6px", height: 24, fontSize: 10 }} onClick={() => removeQuote(lq.quoteId)}><span className="material-icons" style={{ fontSize: 16 }}>close</span></button>
+                    </div>
+                  </div>
+                  <div style={{ padding: "10px 12px", background: "#fff" }}>
+                    <div style={{ fontSize: 10, color: "#888", marginBottom: 6, letterSpacing: "0.07em" }}>AKTIVIERTE SIA-PHASEN FÜR ZEITERFASSUNG</div>
+                    <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 3 }}>
+                      {SIA_PHASES.map(ph => (
+                        <label key={ph.id} style={{ display: "flex", alignItems: "center", gap: 6, cursor: "pointer", fontSize: 11, textTransform: "none", color: "#1a1a18" }}>
+                          <input type="checkbox" checked={currentPhases.includes(ph.id)} onChange={() => isNT ? toggleNTPhase(lq.quoteId, ph.id) : toggleHOPhase(ph.id)} style={{ width: "auto" }} />
+                          {ph.label}
+                        </label>
+                      ))}
+                    </div>
+                  </div>
+                </div>
+              );
+            })}
+            {linked.length === 0 && <div style={{ fontSize: 11, color: "#aaa", marginBottom: 8 }}>Noch keine Offerte verknüpft.</div>}
+            {unlinkedQuotes.length > 0 && (
+              <select defaultValue="" onChange={e => { addQuote(e.target.value); e.target.value = ""; }} style={{ fontSize: 12, width: "100%" }}>
+                <option value="">{linked.length === 0 ? "Offerte verknüpfen…" : "+ Nachtrag / weitere Offerte hinzufügen…"}</option>
+                {unlinkedQuotes.map(q => <option key={q.id} value={q.id}>{q.number} — {q.mode === "sia" ? "SIA 102" : q.mode === "manual" ? "Aufwand" : "Pauschal"} · {formatCHF(q.total)}</option>)}
+              </select>
+            )}
+          </div>
+        );
+      })()}
+      <FormField label="Beschreibung"><textarea rows={2} value={form.description} onChange={e => setForm({ ...form, description: e.target.value })} style={{ resize: "vertical" }} /></FormField>
+      <div className="form-group" style={{ marginTop: 6 }}>
+        <label>Eigene Phasen <span style={{ fontWeight: 400, fontSize: 11, color: "#aaa" }}>(z.B. für Wettbewerbe)</span></label>
+        <div style={{ padding: "8px 10px", background: "#faf8f5", borderRadius: 6, border: "1px solid #ece8e2" }}>
+          {(form.customPhases || []).map(cp => (
+            <div key={cp.id} style={{ display: "flex", justifyContent: "space-between", alignItems: "center", padding: "3px 0", borderBottom: "1px solid #ece8e2" }}>
+              <span style={{ fontSize: 12 }}>{cp.label}</span>
+              <button onClick={() => setForm(f => ({ ...f, customPhases: (f.customPhases || []).filter(c => c.id !== cp.id) }))} style={{ background: "none", border: "none", color: "#bbb", cursor: "pointer", fontSize: 15, padding: "0 2px", lineHeight: 1 }}>×</button>
+            </div>
+          ))}
+          <div style={{ display: "flex", gap: 6, alignItems: "center", marginTop: (form.customPhases || []).length > 0 ? 7 : 0 }}>
+            <input value={newPhaseLabel} onChange={e => setNewPhaseLabel(e.target.value)} placeholder="z.B. Visualisierung, Modell, Präsentation…" style={{ flex: 1, height: 28, fontSize: 12 }}
+              onKeyDown={e => { if (e.key === "Enter" && newPhaseLabel.trim()) { setForm(f => ({ ...f, customPhases: [...(f.customPhases || []), { id: "cp_" + generateId(), label: newPhaseLabel.trim() }] })); setNewPhaseLabel(""); }}} />
+            <button className="btn btn-ghost" style={{ height: 28, padding: "0 10px", fontSize: 11, whiteSpace: "nowrap" }}
+              onClick={() => { if (!newPhaseLabel.trim()) return; setForm(f => ({ ...f, customPhases: [...(f.customPhases || []), { id: "cp_" + generateId(), label: newPhaseLabel.trim() }] })); setNewPhaseLabel(""); }}>+ Hinzufügen</button>
+          </div>
+        </div>
+      </div>
+      {(form.linkedQuotes || []).length === 0 && (
+        <div className="form-group" style={{ marginTop: 6 }}>
+          <label>Relevante SIA-Phasen (nur angewählte sind bei der Zeiterfassung verfügbar)</label>
+          <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 6, marginTop: 6, padding: 12, background: "#faf8f5", borderRadius: 6, border: "1px solid #ece8e2" }}>
+            {SIA_PHASES.map(ph => (
+              <label key={ph.id} style={{ display: "flex", alignItems: "center", gap: 8, cursor: "pointer", fontSize: 12, textTransform: "none", color: "#1a1a18", padding: "4px 0" }}>
+                <input type="checkbox" checked={(form.enabledPhases || []).includes(ph.id)} onChange={() => togglePhase(ph.id)} style={{ width: "auto" }} />
+                {ph.label}
+              </label>
+            ))}
+          </div>
+          <div style={{ fontSize: 10, color: "#aaa", marginTop: 4 }}>Leer lassen, wenn keine Phasen-Unterteilung gewünscht.</div>
+        </div>
+      )}
+    </>
+  );
+}
+
+export
+function Projects({ data, update, saveAll, modal, setModal, onSelect, setPrintContent, currentUser }) {
+  const canSeeQuotes   = !currentUser || currentUser.role === "admin" || !currentUser.permissions || currentUser.permissions.includes("quotes");
+  const canSeeInvoices = !currentUser || currentUser.role === "admin" || !currentUser.permissions || currentUser.permissions.includes("invoices");
+  const clients = (data.persons || []).filter(p => p.isAuftraggeber);
+  const emptyForm = { number: "", name: "", clientId: "", category: "Direktauftrag", billingType: "stundensatz", hourlyRate: data.settings.defaultHourlyRate, budget: 0, status: "aktiv", description: "", startDate: "", enabledPhases: [], budgetHours: 0, linkedQuotes: [], positions: [], customPhases: [], projectContacts: [], internalMembers: [] };
+  const [form, setForm] = useState(emptyForm);
+  const [filter, setFilter] = useState(() => { const cid = window.__navClientId || ""; window.__navClientId = null; return { category: "", status: "", search: "", clientId: cid }; });
+  const [groupBy, setGroupBy] = useState("status");
+  const [compact, setCompact] = useState(true);
+  const { askConfirm, ConfirmModalEl } = useConfirm();
+  const [showAddBeteiligter, setShowAddBeteiligter] = useState(false);
+  const [editingContactId, setEditingContactId] = useState(null);
+  const [addContactId, setAddContactId] = useState("");
+  const [addPersonIds, setAddPersonIds] = useState([]);
+
+  const nextProjectNumber = () => {
+    const fmt = data.settings.projectNumberFormat || "YYYY/NN";
+    const currentYear = new Date().getFullYear();
+    const lastSeq = data.settings.lastProjectYear === currentYear ? (data.settings.lastProjectSeq || 0) : 0;
+    return applyProjectNumberFormat(fmt, lastSeq >= 99 ? 1 : lastSeq + 1);
+  };
+
+  const saveProject = () => {
+    if (!form.name?.trim()) { alert("Bitte einen Projektnamen eingeben."); return; }
+    const isNew = !modal?.id;
+    const projects = isNew
+      ? [...data.projects, { ...form, id: generateId(), createdAt: new Date().toISOString() }]
+      : data.projects.map(p => p.id === modal.id ? { ...p, ...form } : p);
+    let settings = data.settings;
+    if (isNew) {
+      const seq = parseSeqFromNumber(form.number, data.settings.projectNumberFormat || "YYYY/NN");
+      if (seq !== null) settings = { ...data.settings, lastProjectSeq: seq, lastProjectYear: new Date().getFullYear() };
+    }
+    saveAll({ ...data, projects, settings });
+    setModal(null);
+  };
+
+  const resetBeteiligter = () => { setShowAddBeteiligter(false); setEditingContactId(null); setAddContactId(""); setAddPersonIds([]); };
+  const openEdit = (p, e) => { e?.stopPropagation(); setForm({ ...emptyForm, ...p, enabledPhases: p.enabledPhases || [], projectContacts: p.projectContacts || [] }); resetBeteiligter(); setModal({ type: "project", id: p.id }); };
+  const openNew = () => { setForm({ ...emptyForm, number: nextProjectNumber(), startDate: new Date().toISOString().slice(0, 10) }); resetBeteiligter(); setModal({ type: "project" }); };
+  const del = async (id, e) => { e?.stopPropagation(); if (await askConfirm("Projekt wirklich löschen?")) update("projects", data.projects.filter(p => p.id !== id)); };
+
+  // Projekt aus Offerte erstellen
+  const createFromQuote = (quote) => {
+    const linkedQuotes = [{ quoteId: quote.id, role: "Hauptofferte" }];
+    const derived = deriveQuoteBudget(linkedQuotes, data.quotes || [], data.settings.roles || []);
+    const newProj = {
+      ...emptyForm,
+      id: generateId(),
+      number: nextProjectNumber(),
+      name: (() => { const proj = data.projects.find(p => p.id === quote.projectId); return proj?.name || "Projekt aus Offerte " + quote.number; })(),
+      clientId: quote.clientId || "",
+      startDate: new Date().toISOString().slice(0, 10),
+      billingType: "pauschal",
+      hourlyRate: quote.mode === "sia" ? (quote.sia?.stundenansatz || data.settings.defaultHourlyRate) : data.settings.defaultHourlyRate,
+      linkedQuotes,
+      budgetHours: derived.budgetHours,
+      phasesBudget: derived.phasesBudget,
+      enabledPhases: derived.enabledPhases,
+      createdAt: new Date().toISOString(),
+    };
+    const seq = parseSeqFromNumber(newProj.number, data.settings.projectNumberFormat || "YYYY/NN");
+    const newSettings = seq !== null ? { ...data.settings, lastProjectSeq: seq, lastProjectYear: new Date().getFullYear() } : data.settings;
+    saveAll({ ...data, projects: [...data.projects, newProj], settings: newSettings });
+    return newProj.id;
+  };
+  const projectMinutes = (id) => data.timeEntries.filter(e => e.projectId === id).reduce((s, e) => s + (e.minutes || 0), 0);
+
+  const [sort, setSort] = useState({ col: "number", dir: 1 });
+  const toggleSort = (col) => setSort(s => ({ col, dir: s.col === col ? -s.dir : 1 }));
+  const SortTh = ({ col, children, style }) => (
+    <th onClick={() => toggleSort(col)} style={{ cursor: "pointer", userSelect: "none", whiteSpace: "nowrap", ...style }}>
+      {children} <span style={{ color: sort.col === col ? "#b07848" : "#ccc", fontSize: 10 }}>{sort.col === col ? (sort.dir === 1 ? "▲" : "▼") : "⇅"}</span>
+    </th>
+  );
+
+  const filtered = data.projects.filter(p => {
+    if (filter.clientId && p.clientId !== filter.clientId) return false;
+    if (filter.category && p.category !== filter.category) return false;
+    if (filter.status && p.status !== filter.status) return false;
+    if (filter.search) {
+      const q = filter.search.toLowerCase();
+      const client = clients.find(c => c.id === p.clientId);
+      return (p.name || "").toLowerCase().includes(q) || (p.number || "").toLowerCase().includes(q) || (client?.name || "").toLowerCase().includes(q) || (p.description || "").toLowerCase().includes(q);
+    }
+    return true;
+  });
+  const sorted = [...filtered].sort((a, b) => {
+    let va, vb;
+    if (sort.col === "number") { va = a.number || ""; vb = b.number || ""; }
+    else if (sort.col === "name") { va = a.name || ""; vb = b.name || ""; }
+    else if (sort.col === "category") { va = a.category || ""; vb = b.category || ""; }
+    else if (sort.col === "client") { va = (clients.find(c => c.id === a.clientId)?.name || ""); vb = (clients.find(c => c.id === b.clientId)?.name || ""); }
+    else if (sort.col === "hours") { va = projectMinutes(a.id); vb = projectMinutes(b.id); }
+    else if (sort.col === "status") { va = a.status || ""; vb = b.status || ""; }
+    else { va = ""; vb = ""; }
+    return typeof va === "number" ? (va - vb) * sort.dir : va.localeCompare(vb) * sort.dir;
+  });
+
+  // Gruppieren
+  const groupedProjects = (() => {
+    if (groupBy === "status") {
+      const groups = {};
+      sorted.forEach(p => { const key = p.status || "unbekannt"; if (!groups[key]) groups[key] = []; groups[key].push(p); });
+      const order = ["aktiv", "pausiert", "abgeschlossen", "unbekannt"];
+      return order.filter(k => groups[k]).map(key => ({ key, label: key.charAt(0).toUpperCase() + key.slice(1), items: groups[key] }));
+    }
+    if (groupBy === "category") {
+      const groups = {};
+      sorted.forEach(p => { const key = p.category || "—"; if (!groups[key]) groups[key] = []; groups[key].push(p); });
+      return Object.entries(groups).sort((a, b) => a[0].localeCompare(b[0])).map(([key, items]) => ({ key, label: key, items }));
+    }
+    if (groupBy === "client") {
+      const groups = {};
+      sorted.forEach(p => { const key = p.clientId || "__none__"; const label = clients.find(c => c.id === p.clientId)?.name || "Kein Auftraggeber"; if (!groups[key]) groups[key] = { label, items: [] }; groups[key].items.push(p); });
+      return Object.entries(groups).sort((a, b) => a[1].label.localeCompare(b[1].label)).map(([key, val]) => ({ key, label: val.label, items: val.items }));
+    }
+    if (groupBy === "year") {
+      const groups = {};
+      sorted.forEach(p => { const key = (p.startDate || p.createdAt || "").slice(0, 4) || "—"; if (!groups[key]) groups[key] = []; groups[key].push(p); });
+      return Object.entries(groups).sort((a, b) => b[0].localeCompare(a[0])).map(([key, items]) => ({ key, label: key, items }));
+    }
+    return [{ key: "all", label: "", items: sorted }];
+  })();
+
+  return (
+    <div>
+      {ConfirmModalEl}
+      <Header title="Projekte" action={
+        <div style={{ display: "flex", gap: 8 }}>
+          <button className="btn btn-ghost" onClick={() => setPrintContent({ type: "projectsOverview", projects: data.projects, data })}>Gesamt-PDF</button>
+          <button className="btn btn-primary" onClick={openNew}>+ Neues Projekt</button>
+        </div>
+      } />
+
+      <div className="filter-bar">
+        <input className="pill" value={filter.search} onChange={e => setFilter({ ...filter, search: e.target.value })} placeholder="Suchen…" style={{ minWidth: 180 }} />
+        <select className="pill" value={filter.clientId} onChange={e => setFilter({ ...filter, clientId: e.target.value })}>
+          <option value="">Alle Auftraggeber</option>
+          {clients.map(c => <option key={c.id} value={c.id}>{c.name}</option>)}
+        </select>
+        <select className="pill" value={filter.category} onChange={e => setFilter({ ...filter, category: e.target.value })}>
+          <option value="">Alle Kategorien</option>
+          {PROJECT_TYPES.map(t => <option key={t} value={t}>{t}</option>)}
+        </select>
+        <select className="pill" value={filter.status} onChange={e => setFilter({ ...filter, status: e.target.value })}>
+          <option value="">Alle Status</option>
+          {["aktiv", "pausiert", "abgeschlossen"].map(s => <option key={s} value={s}>{s}</option>)}
+        </select>
+      </div>
+
+      <div className="filter-bar">
+        <span className="filter-label">GRUPPIEREN:</span>
+        {[{ id: "none", label: "Keine" }, { id: "status", label: "Status" }, { id: "category", label: "Kategorie" }, { id: "client", label: "Auftraggeber" }, { id: "year", label: "Jahr" }].map(g => (
+          <button key={g.id} className={`pill${groupBy === g.id ? " active" : ""}`} onClick={() => setGroupBy(g.id)}>{g.label}</button>
+        ))}
+      </div>
+
+      <div className="card" style={{ padding: 0 }}>
+        <table>
+          <thead><tr>
+            <SortTh col="number" style={{ width: 90 }}>Nr.</SortTh>
+            <SortTh col="name">Projekt</SortTh>
+            <SortTh col="category">Kategorie</SortTh>
+            <SortTh col="client">Kunde</SortTh>
+            <SortTh col="hours">Stunden</SortTh>
+            <SortTh col="status">Status</SortTh>
+            <th></th>
+          </tr></thead>
+          <tbody>
+            {sorted.length === 0 && <tr><td colSpan={7} style={{ textAlign: "center", color: "#aaa", padding: 32, fontSize: 13 }}>{data.projects.length === 0 ? "Noch keine Projekte" : "Keine Treffer"}</td></tr>}
+            {groupedProjects.map(group => (
+              <React.Fragment key={group.key}>
+                {groupBy !== "none" && group.label && (
+                  <tr>
+                    <td colSpan={7} style={{ background: "#f5f0e8", padding: "6px 12px", fontSize: 10, letterSpacing: "0.1em", color: "#888", fontWeight: 600, textTransform: "uppercase", borderTop: "1px solid #e0dbd4" }}>
+                      {group.label}
+                      <span style={{ float: "right", fontWeight: 400, letterSpacing: 0, textTransform: "none", fontSize: 11, color: "#aaa" }}>
+                        {group.items.length} Projekt{group.items.length !== 1 ? "e" : ""}
+                      </span>
+                    </td>
+                  </tr>
+                )}
+                {group.items.map(p => {
+                  const client = clients.find(c => c.id === p.clientId);
+                  const usedMins = projectMinutes(p.id);
+                  const usedHours = usedMins / 60;
+                  const budget = p.budgetHours || 0;
+                  const pct = budget > 0 ? (usedHours / budget) * 100 : 0;
+                  const barColor = pct >= 100 ? "#8a1a1a" : pct >= 80 ? "#b5621e" : "#2d6a4f";
+                  return (
+                    <tr key={p.id} onClick={() => onSelect(p.id)} style={{ cursor: "pointer" }}>
+                      <td style={{ fontSize: 11, color: "#888", fontWeight: 500 }}>{p.number || "—"}</td>
+                      <td><strong>{p.name}</strong>{p.description && <div style={{ fontSize: 11, color: "#aaa", marginTop: 2 }}>{p.description.slice(0, 60)}</div>}</td>
+                      <td style={{ fontSize: 12 }}>{p.category || "—"}</td>
+                      <td>{client?.name || "—"}</td>
+                      <td>
+                        <div style={{ fontSize: 12, fontWeight: 500, color: budget > 0 ? barColor : "#1a1a18" }}>
+                          {formatHours(usedMins)}{budget > 0 && ` / ${budget}h`}
+                        </div>
+                        {budget > 0 && (
+                          <div style={{ marginTop: 4, height: 4, background: "#ece8e2", borderRadius: 2, width: 80, overflow: "hidden" }}>
+                            <div style={{ width: `${Math.min(pct, 100)}%`, height: "100%", background: barColor, borderRadius: 2, transition: "width 0.3s" }} />
+                          </div>
+                        )}
+                      </td>
+                      <td><StatusBadge status={p.status} /></td>
+                      <td style={{ textAlign: "right", whiteSpace: "nowrap" }}>
+                        <button className="btn btn-ghost" style={{ marginRight: 6, padding: "5px 12px", fontSize: 12 }} onClick={(e) => openEdit(p, e)}><span className="material-icons" style={{ fontSize: 16 }}>edit</span></button>
+                        <button className="btn btn-danger" style={{ padding: "5px 12px", fontSize: 12 }} onClick={(e) => del(p.id, e)}><span className="material-icons" style={{ fontSize: 16 }}>close</span></button>
+                      </td>
+                    </tr>
+                  );
+                })}
+              </React.Fragment>
+            ))}
+          </tbody>
+        </table>
+      </div>
+
+      {modal?.type === "project" && (() => {
+        const projectContacts = form.projectContacts || [];
+        const allContacts = (data.persons || []).filter(p => p.isPartner);
+        const alreadyAdded = new Set(projectContacts.map(pc => pc.contactId));
+        const selectedFirm = allContacts.find(c => c.id === addContactId);
+
+        const addBeteiligte = () => {
+          if (!addContactId) return;
+          setForm(f => ({ ...f, projectContacts: [...(f.projectContacts || []), { contactId: addContactId, personIds: addPersonIds }] }));
+          resetBeteiligter();
+        };
+        const saveEditedBeteiligte = (contactId) => {
+          setForm(f => ({ ...f, projectContacts: (f.projectContacts || []).map(pc => pc.contactId === contactId ? { ...pc, personIds: addPersonIds } : pc) }));
+          setEditingContactId(null); setAddPersonIds([]);
+        };
+        const removeBeteiligte = (contactId) => {
+          setForm(f => ({ ...f, projectContacts: (f.projectContacts || []).filter(pc => pc.contactId !== contactId) }));
+        };
+        const togglePerson = (personId) => setAddPersonIds(prev =>
+          prev.includes(personId) ? prev.filter(id => id !== personId) : [...prev, personId]);
+
+        return (
+          <Modal title={modal.id ? "Projekt bearbeiten" : "Neues Projekt"} onClose={() => { setModal(null); resetBeteiligter(); }} onSave={saveProject} wide>
+            <ProjectEditForm form={form} setForm={setForm} data={data} />
+
+            <div style={{ marginTop: 20, paddingTop: 16, borderTop: "1px solid #ece8e2" }}>
+              <div style={{ fontSize: 11, fontWeight: 600, letterSpacing: "0.08em", color: "#888", marginBottom: 12 }}>INTERNE PROJEKTBETEILIGUNG</div>
+              {(data.employees || []).length === 0
+                ? <div style={{ fontSize: 12, color: "#aaa", marginBottom: 10 }}>Noch keine Mitarbeitenden erfasst.</div>
+                : <div style={{ display: "flex", flexWrap: "wrap", gap: 8, marginBottom: 4 }}>
+                    {(data.employees || []).map(emp => {
+                      const checked = (form.internalMembers || []).includes(emp.id);
+                      return (
+                        <label key={emp.id} style={{ display: "flex", alignItems: "center", gap: 6, cursor: "pointer", fontSize: 13, background: checked ? "#f0ede8" : "#faf9f7", border: `1px solid ${checked ? "#c8b89a" : "#ece8e2"}`, borderRadius: 8, padding: "4px 10px" }}>
+                          <input type="checkbox" checked={checked} onChange={() => setForm(f => ({ ...f, internalMembers: checked ? (f.internalMembers || []).filter(id => id !== emp.id) : [...(f.internalMembers || []), emp.id] }))} style={{ margin: 0 }} />
+                          <span>{emp.name}</span>
+                          {emp.role && <span style={{ fontSize: 10, color: "#aaa" }}>{emp.role}</span>}
+                        </label>
+                      );
+                    })}
+                  </div>
+              }
+            </div>
+
+            <div style={{ marginTop: 20, paddingTop: 16, borderTop: "1px solid #ece8e2" }}>
+              <div style={{ fontSize: 11, fontWeight: 600, letterSpacing: "0.08em", color: "#888", marginBottom: 12 }}>PROJEKTBETEILIGTE</div>
+
+              {projectContacts.map(pc => {
+                const firm = allContacts.find(c => c.id === pc.contactId);
+                if (!firm) return null;
+                const selectedPersons = (firm.contacts || []).filter(p => pc.personIds.includes(p.id));
+                const isEditing = editingContactId === pc.contactId;
+                return (
+                  <div key={pc.contactId} style={{ padding: "10px 0", borderBottom: "1px solid #f5f2ec" }}>
+                    <div style={{ display: "flex", justifyContent: "space-between", alignItems: "flex-start" }}>
+                      <div>
+                        {firm.type && <div style={{ fontSize: 10, color: "#aaa", marginBottom: 2, letterSpacing: "0.06em" }}>{firm.type.toUpperCase()}</div>}
+                        <div style={{ fontWeight: 600, fontSize: 13 }}>{firm.name}</div>
+                        {!isEditing && (selectedPersons.length > 0
+                          ? <div style={{ marginTop: 4, display: "flex", flexWrap: "wrap", gap: 6 }}>
+                              {selectedPersons.map(p => <span key={p.id} style={{ fontSize: 11, background: "#f5f2ec", color: "#555", padding: "2px 8px", borderRadius: 10 }}>{p.name}{p.position ? " · " + p.position : ""}</span>)}
+                            </div>
+                          : <div style={{ fontSize: 11, color: "#aaa", marginTop: 3 }}>Alle Ansprechpartner</div>
+                        )}
+                      </div>
+                      <div style={{ display: "flex", gap: 4 }}>
+                        {(firm.contacts || []).length > 0 && !isEditing && (
+                          <button className="btn btn-ghost" style={{ fontSize: 11, padding: "3px 8px" }}
+                            onClick={() => { setEditingContactId(pc.contactId); setAddPersonIds(pc.personIds || []); setShowAddBeteiligter(false); }}><span className="material-icons" style={{ fontSize: 16 }}>edit</span></button>
+                        )}
+                        <button className="btn btn-ghost" style={{ fontSize: 11, padding: "3px 8px", color: "#888" }} onClick={() => removeBeteiligte(pc.contactId)}><span className="material-icons" style={{ fontSize: 16 }}>close</span></button>
+                      </div>
+                    </div>
+                    {isEditing && (
+                      <div style={{ marginTop: 8 }}>
+                        <div style={{ fontSize: 11, color: "#888", marginBottom: 6 }}>Personen (leer = alle):</div>
+                        {(firm.contacts || []).map(p => (
+                          <label key={p.id} style={{ display: "flex", alignItems: "center", gap: 8, cursor: "pointer", fontSize: 13, marginBottom: 4 }}>
+                            <input type="checkbox" checked={addPersonIds.includes(p.id)} onChange={() => togglePerson(p.id)} />
+                            <span>{p.name}</span>
+                            {p.position && <span style={{ fontSize: 11, color: "#888" }}>{p.position}</span>}
+                          </label>
+                        ))}
+                        <div style={{ display: "flex", gap: 8, marginTop: 8 }}>
+                          <button className="btn btn-primary" style={{ fontSize: 12 }} onClick={() => saveEditedBeteiligte(pc.contactId)}>Speichern</button>
+                          <button className="btn btn-ghost" style={{ fontSize: 12 }} onClick={() => { setEditingContactId(null); setAddPersonIds([]); }}>Abbrechen</button>
+                        </div>
+                      </div>
+                    )}
+                  </div>
+                );
+              })}
+
+              {projectContacts.length === 0 && !showAddBeteiligter && allContacts.length === 0 && (
+                <div style={{ fontSize: 12, color: "#aaa", marginBottom: 10 }}>Keine Partner erfasst. Zuerst unter «Personen» Partner hinzufügen.</div>
+              )}
+
+              {showAddBeteiligter ? (
+                <div style={{ marginTop: 12 }}>
+                  <select value={addContactId} onChange={e => { setAddContactId(e.target.value); setAddPersonIds([]); }} style={{ width: "100%", height: 34, marginBottom: 10 }}>
+                    <option value="">— Firma wählen —</option>
+                    {allContacts.filter(c => !alreadyAdded.has(c.id)).sort((a, b) => a.name.localeCompare(b.name)).map(c => (
+                      <option key={c.id} value={c.id}>{c.type ? "[" + c.type + "] " : ""}{c.name}</option>
+                    ))}
+                  </select>
+                  {selectedFirm && (selectedFirm.contacts || []).length > 0 && (
+                    <div style={{ marginBottom: 10 }}>
+                      <div style={{ fontSize: 11, color: "#888", marginBottom: 6 }}>Personen (leer = alle):</div>
+                      {(selectedFirm.contacts || []).map(p => (
+                        <label key={p.id} style={{ display: "flex", alignItems: "center", gap: 8, cursor: "pointer", fontSize: 13, marginBottom: 4 }}>
+                          <input type="checkbox" checked={addPersonIds.includes(p.id)} onChange={() => togglePerson(p.id)} />
+                          <span>{p.name}</span>
+                          {p.position && <span style={{ fontSize: 11, color: "#888" }}>{p.position}</span>}
+                        </label>
+                      ))}
+                    </div>
+                  )}
+                  <div style={{ display: "flex", gap: 8 }}>
+                    <button className="btn btn-primary" style={{ fontSize: 12 }} onClick={addBeteiligte} disabled={!addContactId}>Hinzufügen</button>
+                    <button className="btn btn-ghost" style={{ fontSize: 12 }} onClick={resetBeteiligter}>Abbrechen</button>
+                  </div>
+                </div>
+              ) : allContacts.length > 0 && (
+                <button className="btn btn-ghost" style={{ fontSize: 12, marginTop: 8 }} onClick={() => setShowAddBeteiligter(true)}>+ Beteiligten hinzufügen</button>
+              )}
+            </div>
+          </Modal>
+        );
+      })()}
+    </div>
+  );
+}
+
+export
+function ProjectDetail({ data, update, saveAll, projectId, onBack, setPrintContent, modal, setModal, currentUser }) {
+  const isAdmin        = !currentUser || currentUser.role === "admin" || !currentUser.permissions;
+  const canSeeQuotes   = isAdmin || currentUser.permissions.includes("quotes");
+  const canSeeInvoices = isAdmin || currentUser.permissions.includes("invoices");
+  const canSeeMitarbeiter = isAdmin || currentUser.permissions.includes("mitarbeiter");
+  const project = data.projects.find(p => p.id === projectId);
+  const emptySettingsForm = { number: "", name: "", clientId: "", category: "Direktauftrag", billingType: "stundensatz", hourlyRate: data.settings.defaultHourlyRate, budget: 0, status: "aktiv", description: "", startDate: "", enabledPhases: [], budgetHours: 0, linkedQuotes: [], positions: [], customPhases: [], internalMembers: [] };
+  const [budgetModal, setBudgetModal] = useState(false);
+  const [settingsOpen, setSettingsOpen] = useState(false);
+  const [budgetChartView, setBudgetChartView] = useState("einzeln");
+  const [phaseChartView, setPhaseChartView] = useState("einzeln");
+  const [settingsForm, setSettingsForm] = useState(() => project ? { ...emptySettingsForm, ...project, enabledPhases: project.enabledPhases || [] } : emptySettingsForm);
+  const [showAddBeteiligter, setShowAddBeteiligter] = useState(false);
+  const [editingContactId, setEditingContactId] = useState(null);
+  const [addContactId, setAddContactId] = useState("");
+  const [addPersonIds, setAddPersonIds] = useState([]);
+
+  const openSettings = () => {
+    setSettingsForm({ ...emptySettingsForm, ...project, enabledPhases: project.enabledPhases || [], projectContacts: project.projectContacts || [], internalMembers: project.internalMembers || [] });
+    setShowAddBeteiligter(false);
+    setEditingContactId(null);
+    setAddContactId("");
+    setAddPersonIds([]);
+    setSettingsOpen(true);
+  };
+  const saveSettings = () => {
+    if (!settingsForm.name?.trim()) { alert("Bitte einen Projektnamen eingeben."); return; }
+    update("projects", data.projects.map(p => p.id === projectId ? { ...p, ...settingsForm } : p));
+    setSettingsOpen(false);
+  };
+
+  const buildNachtragPositions = (linked, existingPos) => {
+    const manual = (existingPos || []).filter(p => !p.quoteId);
+    const nachtrag = linked.filter(lq => lq.role === "Nachtrag").map((lq, idx) => {
+      const existing = (existingPos || []).find(p => p.quoteId === lq.quoteId);
+      const q = (data.quotes || []).find(x => x.id === lq.quoteId);
+      const sd = deriveQuoteBudget([lq], data.quotes || [], data.settings.roles || []);
+      return { code: existing?.code || `N${idx + 1}`, label: existing !== undefined ? existing.label : (q?.projectName || q?.number || ""), enabledPhases: existing?.enabledPhases || sd.enabledPhases, quoteId: lq.quoteId };
+    });
+    return [...manual, ...nachtrag];
+  };
+
+  const [budgetForm, setBudgetForm] = useState(() => ({
+    budgetHours: project?.budgetHours || 0,
+    budgetAmount: project?.budgetAmount || 0,
+    linkedQuotes: project ? migrateLinkedQuotes(project) : [],
+    phasesBudget: project?.phasesBudget || [],
+    enabledPhases: project?.enabledPhases || [],
+    billingType: project?.billingType || "stundensatz",
+    positions: project?.positions || [],
+  }));
+
+  if (!project) return <div style={{ padding: 32 }}>Projekt nicht gefunden. <button className="btn btn-ghost" onClick={onBack}>Zurück</button></div>;
+
+  const openBudgetModal = () => {
+    const linked = migrateLinkedQuotes(project);
+    setBudgetForm({
+      budgetHours: project.budgetHours || 0,
+      budgetAmount: project.budgetAmount || 0,
+      linkedQuotes: linked,
+      phasesBudget: project.phasesBudget || [],
+      enabledPhases: project.enabledPhases || [],
+      billingType: project.billingType || "stundensatz",
+      positions: buildNachtragPositions(linked, project.positions || []),
+    });
+  };
+
+  const addLinkedQuote = (quoteId) => {
+    if (!quoteId || budgetForm.linkedQuotes.some(lq => lq.quoteId === quoteId)) return;
+    const isFirst = budgetForm.linkedQuotes.length === 0;
+    const newLq = { quoteId, role: isFirst ? "Hauptofferte" : "Nachtrag" };
+    const newLinked = [...budgetForm.linkedQuotes, newLq];
+    const d = deriveQuoteBudget(newLinked, data.quotes || [], data.settings.roles || []);
+    const q = (data.quotes || []).find(x => x.id === quoteId);
+    setBudgetForm(f => {
+      const positions = isFirst ? (f.positions || []) : buildNachtragPositions(newLinked, f.positions || []);
+      return {
+        ...f,
+        linkedQuotes: newLinked,
+        budgetHours: d.budgetHours,
+        budgetAmount: d.budgetAmount,
+        phasesBudget: d.phasesBudget,
+        enabledPhases: isFirst ? [...new Set([...(f.enabledPhases || []), ...d.enabledPhases])] : (f.enabledPhases || []),
+        billingType: isFirst ? (q?.mode === "manual" ? "stundensatz" : "pauschal") : f.billingType,
+        positions,
+      };
+    });
+  };
+  const removeLinkedQuote = (quoteId) => {
+    const newLinked = budgetForm.linkedQuotes.filter(lq => lq.quoteId !== quoteId);
+    const d = newLinked.length > 0 ? deriveQuoteBudget(newLinked, data.quotes || [], data.settings.roles || []) : { budgetHours: 0, budgetAmount: 0, phasesBudget: [] };
+    setBudgetForm(f => ({
+      ...f, linkedQuotes: newLinked, budgetHours: d.budgetHours, budgetAmount: d.budgetAmount, phasesBudget: d.phasesBudget,
+      positions: buildNachtragPositions(newLinked, f.positions || []),
+    }));
+  };
+  const changeLinkedRole = (quoteId, role) => setBudgetForm(f => {
+    const newLinked = f.linkedQuotes.map(lq => lq.quoteId === quoteId ? { ...lq, role } : lq);
+    return { ...f, linkedQuotes: newLinked, positions: buildNachtragPositions(newLinked, f.positions || []) };
+  });
+
+  const saveBudget = () => {
+    update("projects", data.projects.map(p => p.id === projectId ? { ...p, ...budgetForm } : p));
+    setBudgetModal(false);
+  };
+
+  const clients = (data.persons || []).filter(p => p.isAuftraggeber);
+  const client = clients.find(c => c.id === project.clientId);
+  const entries = data.timeEntries.filter(e => e.projectId === projectId).sort((a, b) => (b.date || "").localeCompare(a.date || ""));
+  const totalMinutes = entries.reduce((s, e) => s + (e.minutes || 0), 0);
+  const totalHours = totalMinutes / 60;
+  const billingType = project.billingType || project.type || "stundensatz";
+  const isNonBilling = NON_BILLING_CATEGORIES.includes(project.category);
+  const isCostControl = billingType !== "stundensatz" || isNonBilling;
+  const totalAmount = billingType === "stundensatz" ? (totalMinutes / 60) * project.hourlyRate : project.budget;
+  const budget = project.budgetHours || 0;
+  const budgetPct = budget > 0 ? (totalHours / budget) * 100 : 0;
+  const budgetColor = budgetPct >= 100 ? "#8a1a1a" : budgetPct >= 80 ? "#b5621e" : "#2d6a4f";
+  const invoicedMinutes = entries.filter(e => e.invoiceId).reduce((s, e) => s + (e.minutes || 0), 0);
+  const openMinutes = totalMinutes - invoicedMinutes;
+
+  // Phasen-Auswertung (nur aktivierte Phasen; aufgeteilt nach HO + Positionen)
+  const positions = project.positions || [];
+  const phaseStats = (project.enabledPhases || []).map(phaseId => {
+    const phase = SIA_PHASES.find(p => p.id === phaseId);
+    const phaseEntries = entries.filter(e => e.phaseId === phaseId);
+    const hoMins = phaseEntries.filter(e => !e.positionId).reduce((s, e) => s + (e.minutes || 0), 0);
+    const totalPhaseMins = phaseEntries.reduce((s, e) => s + (e.minutes || 0), 0);
+    const phaseBudget = (project.phasesBudget || []).find(pb => pb.id === phaseId)?.hours || 0;
+    const byPosition = positions.map(pos => ({
+      code: pos.code, label: pos.label,
+      mins: phaseEntries.filter(e => e.positionId === pos.code).reduce((s, e) => s + (e.minutes || 0), 0),
+    })).filter(p => p.mins > 0);
+    return { ...phase, minutes: totalPhaseMins, hoMins, hours: totalPhaseMins / 60, phaseBudget, percent: totalMinutes > 0 ? (totalPhaseMins / totalMinutes) * 100 : 0, entries: phaseEntries.length, byPosition };
+  });
+  const unassignedMins = entries.filter(e => !e.phaseId).reduce((s, e) => s + (e.minutes || 0), 0);
+  const customPhaseStats = (project.customPhases || []).map(cp => {
+    const mins = entries.filter(e => e.phaseId === cp.id).reduce((s, e) => s + (e.minutes || 0), 0);
+    return { id: cp.id, label: cp.label, mins };
+  });
+  const customMinsTotal = customPhaseStats.reduce((s, cp) => s + cp.mins, 0);
+
+  // Rechnungen zum Projekt
+  const projectInvoices = data.invoices.filter(i => i.projectId === projectId);
+
+  // Offen-Anzeige: nur bei Stundensatz-Projekten oder wenn ein Nachtrag stundensatz-basiert ist
+  const hasStundensatzNachtrag = positions.some(pos => {
+    if (!pos.quoteId) return false;
+    const q = (data.quotes || []).find(q => q.id === pos.quoteId);
+    return q?.mode === "manual";
+  });
+  const showOffen = billingType === "stundensatz" || hasStundensatzNachtrag;
+  const paidInvoices = projectInvoices.filter(i => i.status === "bezahlt");
+  const openInvoices = projectInvoices.filter(i => i.status === "gesendet" || i.status === "überfällig");
+  const paidTotal = paidInvoices.reduce((s, i) => s + (i.total || 0), 0);
+  const openTotal = openInvoices.reduce((s, i) => s + (i.total || 0), 0);
+
+  return (
+    <div>
+      <button className="btn btn-ghost" onClick={onBack} style={{ marginBottom: 18, padding: "6px 14px", fontSize: 12 }}>← Alle Projekte</button>
+
+      <div style={{ display: "flex", justifyContent: "space-between", alignItems: "flex-start", marginBottom: 24 }}>
+        <div>
+          <div style={{ fontSize: 11, letterSpacing: "0.1em", color: "#888", marginBottom: 6 }}>{project.number && <span style={{ color: "#b07848", marginRight: 8 }}>{project.number}</span>}{(project.category || "—").toUpperCase()} · {client?.name || "Kein Auftraggeber"}</div>
+          <h1 style={{ fontFamily: "'Playfair Display', serif", fontSize: 34, fontWeight: 400, letterSpacing: "-0.01em" }}>{project.name}</h1>
+          {project.description && <div style={{ fontSize: 13, color: "#666", marginTop: 6, maxWidth: 600 }}>{project.description}</div>}
+        </div>
+        <div style={{ display: "flex", gap: 8 }}>
+          {isAdmin && <button className="btn btn-ghost" onClick={openSettings}>Einstellungen</button>}
+          {canSeeQuotes && <button className="btn btn-ghost" onClick={() => { openBudgetModal(); setBudgetModal(true); }}>Budget / Offerten</button>}
+          <button className="btn btn-ghost" onClick={() => setPrintContent({ type: "projectDetail", project, client, entries, phaseStats, unassignedMins, totalMinutes, totalAmount, billingType, invoices: projectInvoices, data })}>PDF</button>
+        </div>
+      </div>
+
+      <div className="responsive-grid-4" style={{ display: "grid", gridTemplateColumns: "repeat(4, 1fr)", gap: 16, marginBottom: 28 }}>
+        {(() => {
+          const internalRate = project.hourlyRate || data.settings.defaultHourlyRate || 0;
+          const internalCost = (totalMinutes / 60) * internalRate;
+          if (isCostControl) return [
+            { label: "STUNDEN TOTAL", value: formatHours(totalMinutes), sub: budget > 0 ? `von ${budget}h Soll` : `${entries.length} Einträge`, color: "#b07848" },
+            isNonBilling
+              ? { label: "NICHT VERRECHENBAR", value: project.category, sub: "Stunden fliessen ins Studio-Budget", color: "#aaa" }
+              : { label: "INTERNER AUFWAND", value: internalRate > 0 ? formatCHF(internalCost) : "—", sub: internalRate > 0 ? `bei ${formatCHF(internalRate)}/h · Kostenkontrolle` : "Kein Stundensatz hinterlegt", color: "#888" },
+            { label: "BUDGET GENUTZT", value: budget > 0 ? `${Math.min(Math.round(budgetPct), 999)}%` : "—", sub: budget > 0 ? `${totalHours.toFixed(1)}h / ${budget}h` : "Kein Stundenbudget", color: budget > 0 ? budgetColor : "#aaa" },
+            { label: "STATUS", value: <StatusBadge status={project.status} />, color: "#b07848" },
+          ];
+          return [
+            { label: "STUNDEN TOTAL", value: formatHours(totalMinutes), sub: budget > 0 ? `von ${budget}h Soll` : `${entries.length} Einträge`, color: "#b07848" },
+            { label: "VERRECHNET", value: formatHours(invoicedMinutes), sub: formatCHF(invoicedMinutes / 60 * project.hourlyRate), color: "#2d6a4f" },
+            { label: "OFFEN", value: formatHours(openMinutes), sub: formatCHF(openMinutes / 60 * project.hourlyRate), color: openMinutes > 0 ? "#b5621e" : "#aaa" },
+            { label: "STATUS", value: <StatusBadge status={project.status} />, color: "#b07848" },
+          ];
+        })().map(c => (
+          <div key={c.label} className="card" style={{ borderTop: `3px solid ${c.color}` }}>
+            <div style={{ fontSize: 10, color: "#888", letterSpacing: "0.12em", marginBottom: 10 }}>{c.label}</div>
+            <div style={{ fontSize: 22, fontFamily: "'Playfair Display', serif", fontWeight: 700 }}>{c.value}</div>
+            {c.sub && <div style={{ fontSize: 11, color: "#aaa", marginTop: 4 }}>{c.sub}</div>}
+          </div>
+        ))}
+      </div>
+
+      {/* Projektbeteiligte */}
+      {(project.projectContacts || []).length > 0 && (
+        <div style={{ display: "flex", gap: 10, flexWrap: "wrap", alignItems: "center", marginBottom: 20 }}>
+          <span style={{ fontSize: 10, color: "#aaa", letterSpacing: "0.1em", fontWeight: 600, flexShrink: 0 }}>BETEILIGTE</span>
+          {(project.projectContacts || []).map(pc => {
+            const firm = (data.persons || []).find(p => p.id === pc.contactId);
+            if (!firm) return null;
+            const selectedPersons = (firm.contacts || []).filter(p => (pc.personIds || []).includes(p.id));
+            return (
+              <div key={pc.contactId} style={{ display: "inline-flex", alignItems: "center", gap: 6, background: "var(--surface2)", border: "1px solid var(--border)", borderRadius: 4, padding: "4px 10px" }}>
+                <span style={{ fontSize: 12, fontWeight: 600, color: "var(--text2)" }}>{firm.name}</span>
+                {firm.type && <span style={{ fontSize: 10, color: "#aaa" }}>{firm.type}</span>}
+                {selectedPersons.length > 0 && (
+                  <span style={{ fontSize: 11, color: "var(--text3)", borderLeft: "1px solid var(--border)", paddingLeft: 6 }}>
+                    {selectedPersons.map(p => p.name).join(", ")}
+                  </span>
+                )}
+              </div>
+            );
+          })}
+        </div>
+      )}
+
+      {/* Stundenbudget-Anzeige */}
+      {(() => {
+        const linked = migrateLinkedQuotes(project);
+        const derived = linked.length > 0 ? deriveQuoteBudget(linked, data.quotes || [], data.settings.roles || []) : null;
+        const amountBudget = project.budgetAmount || derived?.budgetAmount || 0;
+        const invoicedAmount = projectInvoices.reduce((s, i) => s + (i.sub || 0), 0);
+
+        if (budget === 0 && amountBudget === 0) return (
+          <div className="card" style={{ marginBottom: 20, borderLeft: "4px solid #ddd", padding: "12px 20px" }}>
+            <div style={{ display: "flex", justifyContent: "space-between", alignItems: "center" }}>
+              <span style={{ fontSize: 12, color: "#aaa" }}>Kein Budget gesetzt</span>
+              <button className="btn btn-ghost" style={{ fontSize: 11, padding: "4px 12px" }}
+                onClick={() => { openBudgetModal(); setBudgetModal(true); }}>
+                + Budget / Offerte verknüpfen
+              </button>
+            </div>
+          </div>
+        );
+
+        // Pro Offerte einzeln berechnen
+        const quoteRows = linked.map(lq => {
+          const q = (data.quotes || []).find(x => x.id === lq.quoteId);
+          if (!q) return null;
+          const roles = q.quoteRoles || data.settings.roles || [];
+          let qHours = 0, qAmount = 0;
+          if (q.mode === "sia") {
+            const calc = calcSIAHours(q.sia?.baukosten, q.sia?.schwierigkeit, q.sia?.phases || []);
+            qHours = calc.total || 0;
+            qAmount = qHours * (q.sia?.stundenansatz || 0);
+          } else if (q.mode === "manual") {
+            const calc = calcManualHours(q.manualPhases || [], roles);
+            qHours = calc.totalHours || 0;
+            qAmount = calc.totalAmount || 0;
+          } else if (q.mode === "free") {
+            qAmount = (q.freeItems || []).reduce((s, it) => s + (it.qty * it.price), 0);
+          }
+          return { lq, q, qHours: Math.round(qHours * 10) / 10, qAmount: Math.round(qAmount) };
+        }).filter(Boolean);
+
+        const isNachtrag = (role) => role && role !== "Hauptofferte";
+        const nachtragRows = quoteRows.filter(r => isNachtrag(r.lq.role));
+        const sortedQuoteRows = [
+          ...quoteRows.filter(r => !isNachtrag(r.lq.role)),
+          ...nachtragRows,
+        ];
+        const hauptTotal = quoteRows.filter(r => !isNachtrag(r.lq.role)).reduce((s, r) => s + r.qHours, 0);
+        const nachtragTotal = nachtragRows.reduce((s, r) => s + r.qHours, 0);
+
+        // resolve per-row posCode from project.positions (custom codes)
+        const rowsWithPos = sortedQuoteRows.map(({ lq, q, qHours, qAmount }) => {
+          const isNT = isNachtrag(lq.role);
+          const pos = isNT ? positions.find(p => p.quoteId === lq.quoteId) : null;
+          const ntIdx = isNT ? nachtragRows.findIndex(r => r.lq.quoteId === lq.quoteId) : -1;
+          const posCode = pos?.code || (isNT ? `N${ntIdx + 1}` : null);
+          const usedMins = isNT
+            ? entries.filter(e => posCode && e.positionId === posCode).reduce((s, e) => s + (e.minutes || 0), 0)
+            : entries.filter(e => !e.positionId).reduce((s, e) => s + (e.minutes || 0), 0);
+          return { lq, q, qHours, qAmount, isNT, posCode, usedH: usedMins / 60 };
+        });
+        const totalBudgetH = rowsWithPos.filter(r => r.qHours > 0).reduce((s, r) => s + r.qHours, 0);
+        const remaining = Math.max(0, budget - totalHours);
+
+        return (
+          <div className="card" style={{ marginBottom: 20, borderLeft: `4px solid ${budgetColor}`, padding: "16px 20px" }}>
+            <div style={{ display: "flex", justifyContent: "space-between", alignItems: "center", marginBottom: 14 }}>
+              <div style={{ display: "flex", alignItems: "center", gap: 10 }}>
+                <div style={{ fontSize: 11, letterSpacing: "0.1em", color: "#888" }}>HONORAR- UND STUNDENBUDGET</div>
+                {quoteRows.length > 1 && (
+                  <div style={{ display: "flex", gap: 1, background: "#ece8e2", borderRadius: 4, padding: 2 }}>
+                    {[["einzeln", "Einzeln"], ["gesamt", "Gesamt"]].map(([v, l]) => (
+                      <button key={v} onClick={() => setBudgetChartView(v)} style={{ fontSize: 10, padding: "2px 9px", borderRadius: 3, border: "none", cursor: "pointer", background: budgetChartView === v ? "#fff" : "transparent", color: budgetChartView === v ? "#1a1a18" : "#888", fontWeight: budgetChartView === v ? 600 : 400 }}>{l}</button>
+                    ))}
+                  </div>
+                )}
+              </div>
+              {canSeeInvoices && <div style={{ fontSize: 11, color: "#888" }}>
+                Total verrechnet: <strong style={{ color: "#1a1a18" }}>{formatCHF(invoicedAmount)}</strong>
+                {amountBudget > 0 && <span> / {formatCHF(amountBudget)}</span>}
+              </div>}
+            </div>
+
+            {budgetChartView === "gesamt" && quoteRows.length > 1 ? (
+              <div>
+                {/* Segmentierter Balken */}
+                <div style={{ display: "flex", height: 28, borderRadius: 4, overflow: "hidden", marginBottom: 10, background: "#ece8e2" }}>
+                  {rowsWithPos.filter(r => r.qHours > 0).map((r, idx, arr) => {
+                    const segW = (r.qHours / totalBudgetH) * 100;
+                    const fillW = Math.min((r.usedH / r.qHours) * 100, 100);
+                    const isOver = r.usedH > r.qHours;
+                    const segBg = r.isNT ? "#c8d8ee" : "#b8dcc8";
+                    const fillColor = isOver ? "#8a1a1a" : (r.isNT ? "#1a4e8a" : "#2d6a4f");
+                    const label = r.posCode || (r.isNT ? "NT" : "HO");
+                    return (
+                      <div key={r.lq.quoteId} style={{ width: `${segW}%`, position: "relative", background: segBg, borderRight: idx < arr.length - 1 ? "2px solid #fff" : "none", overflow: "hidden", flexShrink: 0 }}>
+                        <div style={{ width: `${fillW}%`, height: "100%", background: fillColor, transition: "width 0.4s" }} />
+                        {segW > 6 && <div style={{ position: "absolute", inset: 0, display: "flex", alignItems: "center", justifyContent: "center", fontSize: 9, fontWeight: 700, color: "#fff", pointerEvents: "none", textShadow: "0 1px 2px rgba(0,0,0,0.4)" }}>{label}</div>}
+                      </div>
+                    );
+                  })}
+                </div>
+
+                {/* Legende */}
+                <div style={{ display: "flex", gap: 14, flexWrap: "wrap", marginBottom: 12 }}>
+                  {rowsWithPos.map(r => {
+                    const color = r.isNT ? "#1a4e8a" : "#2d6a4f";
+                    const label = r.posCode || (r.isNT ? "NT" : "HO");
+                    const isOver = r.usedH > r.qHours && r.qHours > 0;
+                    return (
+                      <div key={r.lq.quoteId} style={{ display: "flex", alignItems: "center", gap: 5, fontSize: 11 }}>
+                        <div style={{ width: 10, height: 10, borderRadius: 2, background: isOver ? "#8a1a1a" : color, flexShrink: 0 }} />
+                        <span style={{ color: "#888" }}>{label}:</span>
+                        <span style={{ fontWeight: 600, color: isOver ? "#8a1a1a" : color }}>{r.usedH.toFixed(1)}h</span>
+                        {r.qHours > 0 && <span style={{ color: "#aaa", fontSize: 10 }}>/ {r.qHours}h</span>}
+                        {r.qAmount > 0 && <span style={{ color: "#bbb", fontSize: 10 }}> · {formatCHF(r.qAmount)}</span>}
+                      </div>
+                    );
+                  })}
+                </div>
+
+                {/* Gesamt-Summe */}
+                <div style={{ display: "flex", justifyContent: "space-between", alignItems: "center", fontSize: 12, paddingTop: 10, borderTop: "1px solid var(--border2)" }}>
+                  <div style={{ color: "#888", display: "flex", gap: 16 }}>
+                    <span>Verbraucht: <strong style={{ color: budgetColor }}>{totalHours.toFixed(1)}h</strong></span>
+                    {budget > 0 && <span>Verfügbar: <strong style={{ color: remaining === 0 ? "#8a1a1a" : "#2d6a4f" }}>{remaining.toFixed(1)}h</strong></span>}
+                  </div>
+                  <span style={{ fontWeight: 700, color: budgetColor }}>
+                    {budget > 0 ? `${totalHours.toFixed(1)}h / ${budget}h — ${budgetPct.toFixed(0)}%` : `${totalHours.toFixed(1)}h total`}
+                    {budgetPct >= 100 && <span style={{ marginLeft: 6, fontSize: 11, color: "#8a1a1a" }}>⚠ überschritten</span>}
+                  </span>
+                </div>
+              </div>
+            ) : (
+              <>
+                {/* Einzeln-Ansicht */}
+                {rowsWithPos.map(({ lq, q, qHours, qAmount, isNT, usedH }) => {
+                  const barPct = qHours > 0 ? Math.min((usedH / qHours) * 100, 100) : 0;
+                  const barColor = barPct >= 100 ? "#8a1a1a" : barPct >= 80 ? "#b5621e" : isNT ? "#1a4e8a" : "#2d6a4f";
+                  return (
+                    <div key={lq.quoteId} style={{ marginBottom: 14, paddingBottom: 14, borderBottom: "1px solid var(--border2)" }}>
+                      <div style={{ display: "flex", justifyContent: "space-between", alignItems: "center", marginBottom: 6 }}>
+                        <div style={{ display: "flex", alignItems: "center", gap: 8 }}>
+                          <span style={{ fontSize: 10, fontWeight: 600, padding: "2px 7px", borderRadius: 3, letterSpacing: "0.04em", background: isNT ? "#e8f0fa" : "#f0f8f4", color: isNT ? "#1a4e8a" : "#2d6a4f", border: `1px solid ${isNT ? "#b0c8e8" : "#b8dcc8"}` }}>
+                            {isNT ? "↪ " : "⬡ "}{lq.role}
+                          </span>
+                          <span style={{ fontSize: 12, color: "#555" }}>
+                            {q.number && <span style={{ color: "#b07848", marginRight: 6, fontWeight: 600 }}>{q.number}</span>}
+                            {q.projectName || "—"}
+                          </span>
+                        </div>
+                        <div style={{ fontSize: 12, textAlign: "right" }}>
+                          {qHours > 0 && <span style={{ fontWeight: 600, color: barColor }}>{usedH.toFixed(1)}h / {qHours}h<span style={{ fontWeight: 400, color: "#888", marginLeft: 6 }}>({barPct.toFixed(0)}%)</span></span>}
+                          {qAmount > 0 && <span style={{ color: "#888", fontSize: 11, marginLeft: 10 }}>{formatCHF(qAmount)}</span>}
+                        </div>
+                      </div>
+                      {qHours > 0 && (
+                        <>
+                          <div style={{ height: 7, background: "var(--border)", borderRadius: 4, overflow: "hidden" }}>
+                            <div style={{ width: `${barPct}%`, height: "100%", background: barColor, borderRadius: 4, transition: "width 0.4s" }} />
+                          </div>
+                          {barPct >= 80 && <div style={{ fontSize: 10, color: barColor, marginTop: 3 }}>{barPct >= 100 ? "⚠ Budget überschritten" : "⚠ Budget fast ausgeschöpft"}</div>}
+                        </>
+                      )}
+                    </div>
+                  );
+                })}
+
+                {quoteRows.length > 1 && (
+                  <div style={{ display: "flex", justifyContent: "space-between", fontSize: 12, paddingTop: 4 }}>
+                    <span style={{ color: "#888" }}>
+                      {hauptTotal > 0 && <span>Hauptofferte {hauptTotal.toFixed(1)}h</span>}
+                      {nachtragTotal > 0 && <span style={{ marginLeft: 8, color: "#1a4e8a" }}>+ Nachträge {nachtragTotal.toFixed(1)}h</span>}
+                    </span>
+                    <span style={{ fontWeight: 700, color: budgetColor }}>
+                      {totalHours.toFixed(1)}h / {budget}h — {budgetPct.toFixed(0)}%
+                      {budgetPct >= 100 && <span style={{ marginLeft: 6, fontSize: 11, color: "#8a1a1a" }}>⚠ überschritten</span>}
+                    </span>
+                  </div>
+                )}
+              </>
+            )}
+
+            {/* Fallback wenn kein linked quote aber manuelles Budget */}
+            {quoteRows.length === 0 && budget > 0 && (
+              <div>
+                <div style={{ display: "flex", justifyContent: "space-between", fontSize: 12, marginBottom: 4 }}>
+                  <span style={{ color: "#888" }}>Stunden</span>
+                  <span style={{ fontWeight: 700, color: budgetColor }}>{totalHours.toFixed(1)}h / {budget}h — {budgetPct.toFixed(0)}%</span>
+                </div>
+                <div style={{ height: 8, background: "#ece8e2", borderRadius: 4, overflow: "hidden" }}>
+                  <div style={{ width: `${Math.min(budgetPct, 100)}%`, height: "100%", background: budgetColor, borderRadius: 4 }} />
+                </div>
+              </div>
+            )}
+          </div>
+        );
+      })()}
+
+      {/* Aufwand pro Phase — Hauptofferte + Nachträge in einer Karte */}
+      {((project.enabledPhases || []).length > 0 || positions.some(pos => entries.some(e => e.positionId === pos.code)) || customPhaseStats.length > 0) && (() => {
+        const linked = migrateLinkedQuotes(project);
+        const hauptLq = linked.find(lq => lq.role === "Hauptofferte");
+        const hauptQ = hauptLq ? (data.quotes || []).find(q => q.id === hauptLq.quoteId) : null;
+        const hoMinsTotal = entries.filter(e => !e.positionId).reduce((s, e) => s + (e.minutes || 0), 0);
+        const hasPositions = positions.some(pos => entries.some(e => e.positionId === pos.code));
+        return (
+          <div className="card" style={{ marginBottom: 20 }}>
+            <div style={{ display: "flex", alignItems: "center", gap: 10, marginBottom: 16 }}>
+              <div style={{ fontSize: 11, letterSpacing: "0.1em", color: "#888" }}>AUFWAND PRO PHASE</div>
+              {hasPositions && (project.enabledPhases || []).length > 0 && (
+                <div style={{ display: "flex", gap: 1, background: "#ece8e2", borderRadius: 4, padding: 2 }}>
+                  {[["einzeln", "Einzeln"], ["gesamt", "Gesamt"]].map(([v, l]) => (
+                    <button key={v} onClick={() => setPhaseChartView(v)} style={{ fontSize: 10, padding: "2px 9px", borderRadius: 3, border: "none", cursor: "pointer", background: phaseChartView === v ? "#fff" : "transparent", color: phaseChartView === v ? "#1a1a18" : "#888", fontWeight: phaseChartView === v ? 600 : 400 }}>{l}</button>
+                  ))}
+                </div>
+              )}
+            </div>
+
+            {/* ─ Eigene Phasen (immer einzeln) ─ */}
+            {customPhaseStats.length > 0 && (
+              <div style={{ marginBottom: (project.enabledPhases || []).length > 0 || hasPositions ? 20 : 0 }}>
+                <div style={{ display: "flex", alignItems: "center", gap: 8, marginBottom: 12 }}>
+                  <span style={{ fontSize: 10, fontWeight: 700, background: "#fdf0e8", color: "#b5621e", padding: "2px 8px", borderRadius: 3 }}>EIGENE</span>
+                  <span style={{ marginLeft: "auto", fontSize: 12, color: "#888" }}>{formatHours(customMinsTotal)}</span>
+                </div>
+                {customPhaseStats.map(cp => {
+                  const pct = customMinsTotal > 0 ? (cp.mins / customMinsTotal) * 100 : 0;
+                  return (
+                    <div key={cp.id} style={{ marginBottom: 10 }}>
+                      <div style={{ display: "flex", justifyContent: "space-between", fontSize: 12, marginBottom: 4 }}>
+                        <span style={{ fontWeight: 500 }}>{cp.label}</span>
+                        <span style={{ color: cp.mins > 0 ? "#b5621e" : "#bbb", fontWeight: 500 }}>{formatHours(cp.mins)}</span>
+                      </div>
+                      <div style={{ height: 6, background: "#fdf0e8", borderRadius: 3, overflow: "hidden" }}>
+                        <div style={{ width: `${pct}%`, height: "100%", background: cp.mins > 0 ? "#b5621e" : "transparent" }} />
+                      </div>
+                    </div>
+                  );
+                })}
+              </div>
+            )}
+
+            {phaseChartView === "gesamt" && hasPositions && (project.enabledPhases || []).length > 0 ? (() => {
+              const allPhaseIds = [...new Set([
+                ...(project.enabledPhases || []),
+                ...positions.flatMap(pos => pos.enabledPhases || []),
+                ...entries.map(e => e.phaseId).filter(id => id && SIA_PHASES.some(p => p.id === id)),
+              ])];
+
+              const segments = [
+                { code: null, label: "HO", color: "#2d6a4f" },
+                ...positions.map(pos => ({ code: pos.code, label: pos.code || "NT", color: "#1a4e8a" })),
+              ];
+
+              // Phasenbudgets der Nachträge vorberechnen
+              const posPhasesBudget = positions.map(pos => {
+                const linkedQ = pos.quoteId ? (data.quotes || []).find(q => q.id === pos.quoteId) : null;
+                if (!linkedQ) return { code: pos.code, phases: [] };
+                const roles = linkedQ.quoteRoles || data.settings.roles || [];
+                let phases = [];
+                if (linkedQ.mode === "sia") {
+                  const calc = calcSIAHours(linkedQ.sia?.baukosten, linkedQ.sia?.schwierigkeit, linkedQ.sia?.phases || []);
+                  phases = (calc.phases || []).filter(p => p.hours > 0).map(p => ({ id: p.id, hours: p.hours }));
+                } else if (linkedQ.mode === "manual") {
+                  phases = (linkedQ.manualPhases || []).filter(ph => ph.enabled).map(ph => {
+                    const h = roles.reduce((s, r) => s + (ph.hoursByRole?.[r.id] || 0), 0);
+                    return { id: ph.id, hours: Math.round(h * 10) / 10 };
+                  }).filter(p => p.hours > 0);
+                }
+                return { code: pos.code, phases };
+              });
+
+              const phaseRows = allPhaseIds.map(phId => {
+                const ph = SIA_PHASES.find(p => p.id === phId);
+                if (!ph) return null;
+                const phEntries = entries.filter(e => e.phaseId === phId);
+                const segMins = segments.map(seg => ({
+                  ...seg,
+                  mins: seg.code === null
+                    ? phEntries.filter(e => !e.positionId).reduce((s, e) => s + (e.minutes || 0), 0)
+                    : phEntries.filter(e => e.positionId === seg.code).reduce((s, e) => s + (e.minutes || 0), 0),
+                }));
+                const totalMins = segMins.reduce((s, s2) => s + s2.mins, 0);
+                const hoBudget = phaseStats.find(ps => ps.id === phId)?.phaseBudget || 0;
+                const ntBudget = posPhasesBudget.reduce((s, p) => s + (p.phases.find(p2 => p2.id === phId)?.hours || 0), 0);
+                const totalPhaseBudget = hoBudget + ntBudget;
+                const remainingH = totalPhaseBudget > 0 ? Math.max(0, totalPhaseBudget - totalMins / 60) : 0;
+                return { ph, segMins, totalMins, totalPhaseBudget, remainingH };
+              }).filter(Boolean).filter(r => r.totalPhaseBudget > 0 || r.totalMins > 0);
+
+              const activeSeg = segments.filter(seg =>
+                phaseRows.some(r => r.segMins.find(s => s.code === seg.code)?.mins > 0)
+              );
+
+              return (
+                <div>
+                  <div style={{ display: "flex", gap: 12, flexWrap: "wrap", marginBottom: 14 }}>
+                    {activeSeg.map(seg => (
+                      <div key={seg.label} style={{ display: "flex", alignItems: "center", gap: 5, fontSize: 11 }}>
+                        <div style={{ width: 10, height: 10, borderRadius: 2, background: seg.color }} />
+                        <span style={{ color: "#888" }}>{seg.label}</span>
+                      </div>
+                    ))}
+                    {phaseRows.some(r => r.remainingH > 0) && (
+                      <div style={{ display: "flex", alignItems: "center", gap: 5, fontSize: 11 }}>
+                        <div style={{ width: 10, height: 10, borderRadius: 2, background: "#d0ccc8" }} />
+                        <span style={{ color: "#888" }}>Verfügbar</span>
+                      </div>
+                    )}
+                  </div>
+                  {phaseRows.map(({ ph, segMins, totalMins, totalPhaseBudget, remainingH }) => {
+                    const totalUsedH = totalMins / 60;
+                    const isOver = totalPhaseBudget > 0 && totalUsedH > totalPhaseBudget;
+                    const budgetPctPh = totalPhaseBudget > 0 ? (totalUsedH / totalPhaseBudget) * 100 : 0;
+                    const labelColor = isOver ? "#8a1a1a" : budgetPctPh >= 80 ? "#b5621e" : "#1a1a18";
+                    // Balken-Basis: bei Budget = Budget*60min, sonst = verwendete Minuten
+                    const barBaseMins = totalPhaseBudget > 0 ? totalPhaseBudget * 60 : totalMins;
+                    const remainingBarMins = totalPhaseBudget > 0 ? Math.max(0, totalPhaseBudget * 60 - totalMins) : 0;
+                    return (
+                      <div key={ph.id} style={{ marginBottom: 14 }}>
+                        <div style={{ display: "flex", justifyContent: "space-between", fontSize: 12, marginBottom: 5 }}>
+                          <span style={{ fontWeight: 500 }}>{ph.label}</span>
+                          <span style={{ color: labelColor, fontWeight: 500 }}>
+                            {formatHours(totalMins)}
+                            {totalPhaseBudget > 0 && (
+                              <span style={{ fontWeight: 400, color: "#888", marginLeft: 6 }}>
+                                / {totalPhaseBudget}h
+                                {remainingH > 0
+                                  ? <span style={{ color: "#2d6a4f" }}> · {remainingH.toFixed(1)}h offen</span>
+                                  : isOver
+                                    ? <span style={{ color: "#8a1a1a" }}> · überschritten</span>
+                                    : null}
+                              </span>
+                            )}
+                          </span>
+                        </div>
+                        <div style={{ display: "flex", height: 8, borderRadius: 3, overflow: "hidden", background: "#ece8e2" }}>
+                          {barBaseMins > 0 && segMins.filter(s => s.mins > 0).map((seg, idx, arr) => (
+                            <div key={seg.label} style={{ width: `${(seg.mins / barBaseMins) * 100}%`, height: "100%", background: isOver ? "#8a1a1a" : seg.color, borderRight: idx < arr.length - 1 ? "1px solid rgba(255,255,255,0.4)" : "none", flexShrink: 0 }} />
+                          ))}
+                          {remainingBarMins > 0 && (
+                            <div style={{ width: `${(remainingBarMins / barBaseMins) * 100}%`, height: "100%", background: "#d0ccc8", flexShrink: 0 }} />
+                          )}
+                        </div>
+                      </div>
+                    );
+                  })}
+                  {unassignedMins > 0 && <div style={{ fontSize: 11, color: "#b5621e", marginTop: 4 }}>⚠ {formatHours(unassignedMins)} ohne Phasen-Zuordnung</div>}
+                </div>
+              );
+            })() : (
+              <>
+                {/* ─ Einzeln: Hauptauftrag ─ */}
+                {(project.enabledPhases || []).length > 0 && (
+                  <div style={{ marginBottom: hasPositions ? 20 : 0 }}>
+                    <div style={{ display: "flex", alignItems: "center", gap: 8, marginBottom: 12 }}>
+                      <span style={{ fontSize: 10, fontWeight: 700, background: "#e8f5ee", color: "#2d6a4f", padding: "2px 8px", borderRadius: 3 }}>⬡ HO</span>
+                      {hauptQ?.number && <span style={{ fontWeight: 600, color: "#b07848", fontSize: 12 }}>{hauptQ.number}</span>}
+                      <span style={{ fontSize: 12, color: "#555" }}>Hauptauftrag</span>
+                      <span style={{ marginLeft: "auto", fontSize: 12, color: "#888" }}>{formatHours(hoMinsTotal)}</span>
+                    </div>
+                    {phaseStats.map(ps => {
+                      const hoMins = ps.hoMins;
+                      const hoHours = hoMins / 60;
+                      const phasePct = ps.phaseBudget > 0 ? (hoHours / ps.phaseBudget) * 100 : (hoMinsTotal > 0 ? (hoMins / hoMinsTotal) * 100 : 0);
+                      const barColor = ps.phaseBudget > 0 ? (phasePct >= 100 ? "#8a1a1a" : phasePct >= 80 ? "#b5621e" : "#2d6a4f") : "#2d6a4f";
+                      return (
+                        <div key={ps.id} style={{ marginBottom: 12 }}>
+                          <div style={{ display: "flex", justifyContent: "space-between", fontSize: 12, marginBottom: 4 }}>
+                            <span style={{ fontWeight: 500 }}>{ps.label}</span>
+                            <span style={{ color: barColor, fontWeight: 500 }}>
+                              {formatHours(hoMins)}
+                              {ps.phaseBudget > 0 && ` / ${ps.phaseBudget}h (${phasePct.toFixed(0)}%)`}
+                            </span>
+                          </div>
+                          <div style={{ height: 6, background: "#ece8e2", borderRadius: 3, overflow: "hidden" }}>
+                            <div style={{ width: `${Math.min(phasePct, 100)}%`, height: "100%", background: barColor }} />
+                          </div>
+                        </div>
+                      );
+                    })}
+                    {unassignedMins > 0 && <div style={{ fontSize: 11, color: "#b5621e", marginTop: 4 }}>⚠ {formatHours(unassignedMins)} ohne Phasen-Zuordnung</div>}
+                  </div>
+                )}
+
+                {/* ─ Einzeln: Nachträge / Positionen ─ */}
+                {positions.map(pos => {
+                  const posEntries = entries.filter(e => e.positionId === pos.code);
+                  const posMins = posEntries.reduce((s, e) => s + (e.minutes || 0), 0);
+                  const enabledPhaseIds = pos.enabledPhases || [];
+                  const extraPhaseIds = [...new Set(posEntries.map(e => e.phaseId).filter(Boolean).filter(id => !enabledPhaseIds.includes(id)))];
+                  const allPhaseIds = [...enabledPhaseIds, ...extraPhaseIds];
+                  if (allPhaseIds.length === 0 && posMins === 0) return null;
+                  const linkedQ = pos.quoteId ? (data.quotes || []).find(q => q.id === pos.quoteId) : null;
+                  let nachtragPhasesBudget = [];
+                  if (linkedQ) {
+                    const roles = linkedQ.quoteRoles || data.settings.roles || [];
+                    if (linkedQ.mode === "sia") {
+                      const calc = calcSIAHours(linkedQ.sia?.baukosten, linkedQ.sia?.schwierigkeit, linkedQ.sia?.phases || []);
+                      nachtragPhasesBudget = (calc.phases || []).filter(p => p.hours > 0).map(p => ({ id: p.id, hours: p.hours }));
+                    } else if (linkedQ.mode === "manual") {
+                      nachtragPhasesBudget = (linkedQ.manualPhases || []).filter(ph => ph.enabled).map(ph => {
+                        const h = roles.reduce((s, r) => s + (ph.hoursByRole?.[r.id] || 0), 0);
+                        return { id: ph.id, hours: Math.round(h * 10) / 10 };
+                      }).filter(p => p.hours > 0);
+                    }
+                  }
+                  return (
+                    <div key={pos.code} style={{ paddingTop: 20, borderTop: "1px solid #ece8e2" }}>
+                      <div style={{ display: "flex", alignItems: "center", gap: 8, marginBottom: 12 }}>
+                        <span style={{ fontSize: 10, fontWeight: 700, background: "#e8f0fa", color: "#1a4e8a", padding: "2px 8px", borderRadius: 3 }}>↪ {pos.code}</span>
+                        {linkedQ?.number && <span style={{ fontWeight: 600, color: "#b07848", fontSize: 12 }}>{linkedQ.number}</span>}
+                        <span style={{ fontSize: 12, color: "#555" }}>{pos.label || "Nachtrag"}</span>
+                        <span style={{ marginLeft: "auto", fontSize: 12, color: "#1a4e8a", fontWeight: 600 }}>{formatHours(posMins)}</span>
+                      </div>
+                      {allPhaseIds.length > 0 ? allPhaseIds.map(phId => {
+                        const ph = SIA_PHASES.find(p => p.id === phId);
+                        if (!ph) return null;
+                        const phMins = posEntries.filter(e => e.phaseId === phId).reduce((s, e) => s + (e.minutes || 0), 0);
+                        const phaseBudgetHours = nachtragPhasesBudget.find(p => p.id === phId)?.hours || 0;
+                        const phHours = phMins / 60;
+                        const phPct = phaseBudgetHours > 0 ? (phHours / phaseBudgetHours) * 100 : (posMins > 0 ? (phMins / posMins) * 100 : 0);
+                        const barColor = phaseBudgetHours > 0 ? (phPct >= 100 ? "#8a1a1a" : phPct >= 80 ? "#b5621e" : "#1a4e8a") : (phMins > 0 ? "#1a4e8a" : "#ccc");
+                        return (
+                          <div key={phId} style={{ marginBottom: 12 }}>
+                            <div style={{ display: "flex", justifyContent: "space-between", fontSize: 12, marginBottom: 4 }}>
+                              <span style={{ fontWeight: 500 }}>{ph.label}</span>
+                              <span style={{ color: barColor, fontWeight: 500 }}>
+                                {formatHours(phMins)}
+                                {phaseBudgetHours > 0 && ` / ${phaseBudgetHours}h (${phPct.toFixed(0)}%)`}
+                              </span>
+                            </div>
+                            <div style={{ height: 6, background: "#e8f0fa", borderRadius: 3, overflow: "hidden" }}>
+                              <div style={{ width: `${Math.min(phPct, 100)}%`, height: "100%", background: barColor }} />
+                            </div>
+                          </div>
+                        );
+                      }) : (
+                        <div style={{ fontSize: 12, color: "#aaa" }}>Noch keine Stunden erfasst</div>
+                      )}
+                    </div>
+                  );
+                })}
+              </>
+            )}
+          </div>
+        );
+      })()}
+
+      {/* Mitarbeiter-Auswertung */}
+      {canSeeMitarbeiter && (() => {
+        const employees = data.employees || [];
+        // Gruppe nach Mitarbeiter
+        const byEmp = {};
+        entries.forEach(e => {
+          const empId = e.employeeId || "__none__";
+          if (!byEmp[empId]) byEmp[empId] = { mins: 0, entries: [] };
+          byEmp[empId].mins += e.minutes || 0;
+          byEmp[empId].entries.push(e);
+        });
+        const empRows = Object.entries(byEmp).map(([empId, d]) => {
+          const emp = empId === "__none__" ? null : employees.find(e => e.id === empId);
+          // Aufschlüsselung nach Phase
+          const byPhase = {};
+          d.entries.forEach(e => {
+            const k = e.phaseId || "__none__";
+            byPhase[k] = (byPhase[k] || 0) + (e.minutes || 0);
+          });
+          const amount = billingType === "stundensatz" ? (d.mins / 60) * project.hourlyRate : null;
+          return { empId, emp, mins: d.mins, amount, byPhase, count: d.entries.length };
+        }).sort((a, b) => b.mins - a.mins);
+
+        if (empRows.length === 0) return null;
+
+        const totalMins = empRows.reduce((s, r) => s + r.mins, 0);
+
+        return (
+          <div className="card" style={{ marginBottom: 20 }}>
+            <div style={{ fontSize: 11, letterSpacing: "0.1em", color: "#888", marginBottom: 14 }}>MITARBEITER-AUSWERTUNG</div>
+            <table>
+              <thead>
+                <tr>
+                  <th>Mitarbeiter</th>
+                  <th style={{ textAlign: "right" }}>Stunden</th>
+                  <th style={{ textAlign: "right" }}>Anteil</th>
+                  {billingType === "stundensatz" && <th style={{ textAlign: "right" }}>Betrag</th>}
+                  <th>Einträge</th>
+                  <th>Phasen</th>
+                </tr>
+              </thead>
+              <tbody>
+                {empRows.map(row => {
+                  const pct = totalMins > 0 ? Math.round(row.mins / totalMins * 100) : 0;
+                  const phases = Object.entries(row.byPhase).map(([phId, mins]) => {
+                    const ph = SIA_PHASES.find(p => p.id === phId);
+                    return ph ? `${ph.id} (${formatHours(mins)})` : `— (${formatHours(mins)})`;
+                  }).join(", ");
+                  return (
+                    <tr key={row.empId}>
+                      <td>
+                        <strong>{row.emp?.name || "Ohne Mitarbeiter"}</strong>
+                        {row.emp?.role && <div style={{ fontSize: 11, color: "#888" }}>{row.emp.role}</div>}
+                      </td>
+                      <td style={{ textAlign: "right", fontWeight: 600 }}>{formatHours(row.mins)}</td>
+                      <td style={{ textAlign: "right" }}>
+                        <div style={{ display: "flex", alignItems: "center", gap: 6, justifyContent: "flex-end" }}>
+                          <div style={{ width: 60, height: 6, background: "#ece8e2", borderRadius: 3, overflow: "hidden" }}>
+                            <div style={{ width: `${pct}%`, height: "100%", background: "#b07848", borderRadius: 3 }} />
+                          </div>
+                          <span style={{ fontSize: 12, color: "#888", minWidth: 32 }}>{pct}%</span>
+                        </div>
+                      </td>
+                      {billingType === "stundensatz" && <td style={{ textAlign: "right" }}>{row.amount !== null ? formatCHF(row.amount) : "—"}</td>}
+                      <td style={{ color: "#888", fontSize: 12 }}>{row.count} Einträge</td>
+                      <td style={{ fontSize: 11, color: "#888" }}>{phases || "—"}</td>
+                    </tr>
+                  );
+                })}
+              </tbody>
+              <tfoot>
+                <tr style={{ borderTop: "1.5px solid #1a1a18" }}>
+                  <td><strong>Total</strong></td>
+                  <td style={{ textAlign: "right", fontWeight: 700 }}>{formatHours(totalMins)}</td>
+                  <td style={{ textAlign: "right", fontSize: 12, color: "#888" }}>100%</td>
+                  {billingType === "stundensatz" && <td style={{ textAlign: "right", fontWeight: 700 }}>{formatCHF(empRows.reduce((s, r) => s + (r.amount || 0), 0))}</td>}
+                  <td style={{ color: "#888", fontSize: 12 }}>{entries.length} Einträge</td>
+                  <td></td>
+                </tr>
+              </tfoot>
+            </table>
+          </div>
+        );
+      })()}
+
+      <div className="card" style={{ padding: 0, marginBottom: 20 }}>
+        <div style={{ padding: "16px 20px", fontSize: 11, letterSpacing: "0.1em", color: "#888", borderBottom: "1px solid #ece8e2" }}>ZEITEINTRÄGE</div>
+        <table style={{ tableLayout: "fixed" }}>
+          <thead><tr>
+            <th style={{ width: "12%" }}>Datum</th>
+            {canSeeMitarbeiter && <th style={{ width: "14%" }}>Mitarbeiter</th>}
+            <th style={{ width: "15%" }}>Phase / Position</th>
+            <th>Tätigkeit</th>
+            <th style={{ width: "10%" }}>Dauer</th>
+            {canSeeInvoices && <th style={{ width: "11%" }}>Betrag</th>}
+            {canSeeInvoices && <th style={{ width: "12%" }}>Rechnung</th>}
+          </tr></thead>
+          <tbody>
+            {entries.length === 0 && <tr><td colSpan={canSeeMitarbeiter && canSeeInvoices ? 7 : 4} style={{ textAlign: "center", color: "#aaa", padding: 24 }}>Noch keine Zeiteinträge</td></tr>}
+            {entries.map(e => {
+              const phase = SIA_PHASES.find(p => p.id === e.phaseId);
+              const pos = positions.find(p => p.code === e.positionId);
+              const emp = e.employeeId ? (data.employees || []).find(em => em.id === e.employeeId) : null;
+              const amount = billingType === "stundensatz" ? (e.minutes / 60) * project.hourlyRate : null;
+              const invoice = e.invoiceId ? data.invoices.find(i => i.id === e.invoiceId) : null;
+              const posQuote = pos?.quoteId ? (data.quotes || []).find(q => q.id === pos.quoteId) : null;
+              const isStundensatzEntry = e.positionId
+                ? posQuote?.mode === "manual"
+                : billingType === "stundensatz";
+              return (
+                <tr key={e.id} style={{ opacity: invoice && canSeeInvoices ? 0.75 : 1 }}>
+                  <td>{formatDate(e.date)}</td>
+                  {canSeeMitarbeiter && <td style={{ fontSize: 11, color: "#666" }}>{emp?.name || <span style={{ color: "#ccc" }}>—</span>}</td>}
+                  <td style={{ fontSize: 12 }}>
+                    {isAdmin ? (
+                      <select
+                        value={e.phaseId ? (e.positionId ? e.phaseId + "|" + e.positionId : e.phaseId) : ""}
+                        onChange={ev => {
+                          const val = ev.target.value;
+                          if (!val) { update("timeEntries", data.timeEntries.map(te => te.id === e.id ? { ...te, phaseId: "", positionId: "" } : te)); return; }
+                          const [ph, p] = val.split("|");
+                          update("timeEntries", data.timeEntries.map(te => te.id === e.id ? { ...te, phaseId: ph, positionId: p || "" } : te));
+                        }}
+                        disabled={!!e.invoiceId}
+                        style={{ border: "1px solid #e0dbd4", height: 26, fontSize: 11, maxWidth: "100%", opacity: e.invoiceId ? 0.6 : 1 }}
+                      >
+                        <option value="">—</option>
+                        {(project.customPhases || []).map(cp => <option key={cp.id} value={cp.id}>{cp.label}</option>)}
+                        {positions.length === 0 && (project.enabledPhases || []).map(phId => { const ph = SIA_PHASES.find(p => p.id === phId); return ph ? <option key={ph.id} value={ph.id}>{ph.id}</option> : null; }).filter(Boolean)}
+                        {positions.length > 0 && (project.enabledPhases || []).map(phId => { const ph = SIA_PHASES.find(p => p.id === phId); return ph ? <option key={ph.id} value={ph.id}>{ph.id} HO</option> : null; }).filter(Boolean)}
+                        {positions.flatMap(pos => (pos.enabledPhases || []).map(phId => { const ph = SIA_PHASES.find(p => p.id === phId); return ph ? <option key={ph.id + "|" + pos.code} value={ph.id + "|" + pos.code}>{pos.code}·{ph.id}</option> : null; }).filter(Boolean))}
+                      </select>
+                    ) : phase ? (
+                      <span>
+                        <span style={{ color: "#666" }}>{phase.label.split(" ")[0]}</span>
+                        {pos && <span style={{ fontWeight: 600, color: "#7a6a00", background: "#fffbe8", padding: "1px 5px", borderRadius: 2, marginLeft: 5, fontSize: 11 }}>{pos.code}</span>}
+                      </span>
+                    ) : <span style={{ color: "#ccc" }}>—</span>}
+                  </td>
+                  <td style={{ color: "#666" }}>{e.description || "—"}</td>
+                  <td>{formatHours(e.minutes)}</td>
+                  {canSeeInvoices && <td>{amount !== null ? formatCHF(amount) : "—"}</td>}
+                  {canSeeInvoices && <td style={{ fontSize: 11 }}>
+                    {invoice
+                      ? <span className="tag" style={{ background: "#2d6a4f", fontSize: 10 }}>{invoice.number}</span>
+                      : isStundensatzEntry
+                        ? <span style={{ color: "#aaa" }}>offen</span>
+                        : null}
+                  </td>}
+                </tr>
+              );
+            })}
+          </tbody>
+        </table>
+      </div>
+
+      {canSeeQuotes && (() => {
+        const projectQuotes = (data.quotes || []).filter(q => q.projectId === projectId);
+        if (projectQuotes.length === 0) return null;
+        return (
+          <div className="card" style={{ padding: 0, marginBottom: 20 }}>
+            <div style={{ padding: "16px 20px", fontSize: 11, letterSpacing: "0.1em", color: "#888", borderBottom: "1px solid #ece8e2" }}>OFFERTEN</div>
+            <table style={{ tableLayout: "fixed" }}>
+              <thead><tr><th style={{ width: "18%" }}>Nr.</th><th style={{ width: "14%" }}>Datum</th><th>Modus</th><th style={{ width: "14%" }}>Status</th><th style={{ width: "16%" }}>Honorar</th><th style={{ width: "7%" }}></th></tr></thead>
+              <tbody>
+                {projectQuotes.map(q => (
+                  <tr key={q.id}>
+                    <td><strong>{q.number}</strong></td>
+                    <td>{formatDate(q.date)}</td>
+                    <td style={{ fontSize: 11, color: "#888" }}>{q.mode === "sia" ? "SIA 102" : "Aufwand"}</td>
+                    <td><StatusBadge status={q.status} /></td>
+                    <td><strong>{formatCHF(q.total)}</strong></td>
+                    <td style={{ textAlign: "right" }}>
+                      <button className="btn btn-ghost" style={{ padding: "5px 10px", fontSize: 12 }} onClick={() => setPrintContent({ type: "quote", quote: q, client, settings: data.settings })}>PDF</button>
+                    </td>
+                  </tr>
+                ))}
+              </tbody>
+            </table>
+          </div>
+        );
+      })()}
+
+      {canSeeInvoices && projectInvoices.length > 0 && (
+        <div className="card" style={{ padding: 0 }}>
+          <div style={{ padding: "16px 20px", fontSize: 11, letterSpacing: "0.1em", color: "#888", borderBottom: "1px solid #ece8e2" }}>RECHNUNGEN</div>
+          <table style={{ tableLayout: "fixed" }}>
+            <thead><tr><th style={{ width: "18%" }}>Nr.</th><th style={{ width: "14%" }}>Datum</th><th>Art</th><th style={{ width: "14%" }}>Status</th><th style={{ width: "16%" }}>Betrag</th><th style={{ width: "7%" }}></th></tr></thead>
+            <tbody>
+              {projectInvoices.map(inv => (
+                <tr key={inv.id}>
+                  <td><strong>{inv.number}</strong></td>
+                  <td>{formatDate(inv.date)}</td>
+                  <td style={{ fontSize: 11, color: "#888" }}>{inv.invoiceKind === "akonto" ? "Akonto" : (inv.invoiceKind === "schluss" ? "Schluss" : "—")}</td>
+                  <td><StatusBadge status={inv.status} /></td>
+                  <td><strong>{formatCHF(inv.total)}</strong></td>
+                  <td style={{ textAlign: "right" }}>
+                    <button className="btn btn-ghost" style={{ padding: "5px 10px", fontSize: 12 }} onClick={() => setPrintContent({ type: "invoice", inv, client })}>PDF</button>
+                  </td>
+                </tr>
+              ))}
+            </tbody>
+          </table>
+          {showOffen && (paidTotal > 0 || openTotal > 0) && (
+            <div style={{ padding: "10px 20px", borderTop: "1px solid #ece8e2", display: "flex", gap: 24, fontSize: 12 }}>
+              <span style={{ color: "#4a7c59" }}>Bezahlt: <strong>{formatCHF(paidTotal)}</strong></span>
+              {openTotal > 0 && (
+                <span style={{ color: "#b5621e" }}>Noch offen: <strong>{formatCHF(openTotal)}</strong></span>
+              )}
+              {openTotal === 0 && paidTotal > 0 && (
+                <span style={{ color: "#888", fontSize: 11 }}>Alles bezahlt</span>
+              )}
+            </div>
+          )}
+        </div>
+      )}
+
+      {/* Protokolle zum Projekt */}
+      {(() => {
+        const projProtokolle = (data.protocols || [])
+          .filter(p => p.projectId === projectId)
+          .sort((a, b) => (b.date || "").localeCompare(a.date || ""));
+        return (
+          <div className="card" style={{ padding: 0, marginTop: 20 }}>
+            <div style={{ padding: "16px 20px", display: "flex", justifyContent: "space-between", alignItems: "center", borderBottom: projProtokolle.length > 0 ? "1px solid #ece8e2" : "none" }}>
+              <div style={{ fontSize: 11, letterSpacing: "0.1em", color: "#888" }}>PROTOKOLLE ({projProtokolle.length})</div>
+              <button className="btn btn-ghost" style={{ fontSize: 11, padding: "4px 12px" }} onClick={() => {
+                const p = {
+                  id: generateId(),
+                  title: "",
+                  type: PROTOKOLL_TYPES[0],
+                  date: new Date().toISOString().slice(0, 10),
+                  time: "10:00",
+                  endTime: "",
+                  location: "",
+                  projectId,
+                  projectManual: "",
+                  nummer: (() => {
+                    const all = data.protocols || [];
+                    const abbr = data.settings.protokollTypeAbbreviations || {};
+                    const typKuerzel = abbr[PROTOKOLL_TYPES[0]] || "SO";
+                    const proj = data.projects.find(x => x.id === projectId);
+                    const seq = nextProtoSeq(all);
+                    return applyProtoNumberFormat(data.settings.protokollNumberFormat || "PP-TT-NN", {
+                      date: new Date().toISOString().slice(0, 10),
+                      projectNumber: proj?.number || "",
+                      seq,
+                      typKuerzel,
+                    });
+                  })(),
+                  participants: [],
+                  traktanden: [{ id: generateId(), nr: "1", title: "", items: [] }],
+                  nextDate: "",
+                  verteiler: "",
+                  createdAt: new Date().toISOString(),
+                };
+                saveAll({ ...data, protocols: [...(data.protocols || []), p] });
+                // navigate to protokolle view – signal via a custom event
+                window.__openProtokoll = p.id;
+                window.dispatchEvent(new CustomEvent("openProtokoll", { detail: { id: p.id } }));
+              }}>+ Neues Protokoll</button>
+            </div>
+            {projProtokolle.length > 0 && (
+              <table>
+                <thead>
+                  <tr>
+                    <th style={{ width: 110 }}>Nr.</th>
+                    <th style={{ width: 100 }}>Datum</th>
+                    <th style={{ width: 160 }}>Typ</th>
+                    <th>Titel</th>
+                    <th style={{ width: 60, textAlign: "center" }}>TN</th>
+                    <th style={{ width: 50, textAlign: "center" }}>📌</th>
+                    <th style={{ width: 80 }}></th>
+                  </tr>
+                </thead>
+                <tbody>
+                  {projProtokolle.map(proto => {
+                    const anwesend = (proto.participants || []).filter(x => x.status === "anwesend").length;
+                    const total = (proto.participants || []).length;
+                    const offene = (proto.traktanden || []).flatMap(t => (t.items || []).filter(it => it.type === "aufgabe" && it.status !== "erledigt")).length;
+                    return (
+                      <tr key={proto.id}>
+                        <td><strong style={{ color: "#b07848" }}>{proto.nummer}</strong></td>
+                        <td>{formatDate(proto.date)}</td>
+                        <td style={{ fontSize: 11, color: "#888" }}>{proto.type}</td>
+                        <td>{proto.title || <span style={{ color: "#aaa" }}>Kein Titel</span>}</td>
+                        <td style={{ textAlign: "center", fontSize: 12, color: "#888" }}>{total > 0 ? `${anwesend}/${total}` : "—"}</td>
+                        <td style={{ textAlign: "center" }}>{offene > 0 && <span style={{ fontSize: 11, color: "#b5621e", fontWeight: 600 }}>{offene}</span>}</td>
+                        <td style={{ textAlign: "right" }}>
+                          <button className="btn btn-ghost" style={{ fontSize: 11, padding: "4px 10px" }}
+                            onClick={() => { window.__openProtokoll = proto.id; window.dispatchEvent(new CustomEvent("openProtokoll", { detail: { id: proto.id } })); }}>
+                            Öffnen
+                          </button>
+                        </td>
+                      </tr>
+                    );
+                  })}
+                </tbody>
+              </table>
+            )}
+          </div>
+        );
+      })()}
+
+      {/* Einstellungen Modal */}
+      {settingsOpen && (() => {
+        const projectContacts = settingsForm.projectContacts || [];
+        const allContacts = (data.persons || []).filter(p => p.isPartner);
+        const alreadyAdded = new Set(projectContacts.map(pc => pc.contactId));
+        const selectedFirm = allContacts.find(c => c.id === addContactId);
+
+        const addBeteiligte = () => {
+          if (!addContactId) return;
+          setSettingsForm(f => ({ ...f, projectContacts: [...(f.projectContacts || []), { contactId: addContactId, personIds: addPersonIds }] }));
+          setShowAddBeteiligter(false); setAddContactId(""); setAddPersonIds([]);
+        };
+        const saveEditedBeteiligte = (contactId) => {
+          setSettingsForm(f => ({ ...f, projectContacts: (f.projectContacts || []).map(pc => pc.contactId === contactId ? { ...pc, personIds: addPersonIds } : pc) }));
+          setEditingContactId(null); setAddPersonIds([]);
+        };
+        const removeBeteiligte = (contactId) => {
+          setSettingsForm(f => ({ ...f, projectContacts: (f.projectContacts || []).filter(pc => pc.contactId !== contactId) }));
+        };
+        const togglePerson = (personId) => setAddPersonIds(prev =>
+          prev.includes(personId) ? prev.filter(id => id !== personId) : [...prev, personId]);
+
+        return (
+          <Modal title="Projekteinstellungen" onClose={() => setSettingsOpen(false)} onSave={saveSettings} wide>
+            <ProjectEditForm form={settingsForm} setForm={setSettingsForm} data={data} />
+
+            <div style={{ marginTop: 20, paddingTop: 16, borderTop: "1px solid #ece8e2" }}>
+              <div style={{ fontSize: 11, fontWeight: 600, letterSpacing: "0.08em", color: "#888", marginBottom: 12 }}>INTERNE PROJEKTBETEILIGUNG</div>
+              {(data.employees || []).length === 0
+                ? <div style={{ fontSize: 12, color: "#aaa", marginBottom: 10 }}>Noch keine Mitarbeitenden erfasst.</div>
+                : <div style={{ display: "flex", flexWrap: "wrap", gap: 8, marginBottom: 4 }}>
+                    {(data.employees || []).map(emp => {
+                      const checked = (settingsForm.internalMembers || []).includes(emp.id);
+                      return (
+                        <label key={emp.id} style={{ display: "flex", alignItems: "center", gap: 6, cursor: "pointer", fontSize: 13, background: checked ? "#f0ede8" : "#faf9f7", border: `1px solid ${checked ? "#c8b89a" : "#ece8e2"}`, borderRadius: 8, padding: "4px 10px" }}>
+                          <input type="checkbox" checked={checked} onChange={() => setSettingsForm(f => ({ ...f, internalMembers: checked ? (f.internalMembers || []).filter(id => id !== emp.id) : [...(f.internalMembers || []), emp.id] }))} style={{ margin: 0 }} />
+                          <span>{emp.name}</span>
+                          {emp.role && <span style={{ fontSize: 10, color: "#aaa" }}>{emp.role}</span>}
+                        </label>
+                      );
+                    })}
+                  </div>
+              }
+            </div>
+
+            <div style={{ marginTop: 20, paddingTop: 16, borderTop: "1px solid #ece8e2" }}>
+              <div style={{ fontSize: 11, fontWeight: 600, letterSpacing: "0.08em", color: "#888", marginBottom: 12 }}>PROJEKTBETEILIGTE</div>
+
+              {projectContacts.map(pc => {
+                const firm = allContacts.find(c => c.id === pc.contactId);
+                if (!firm) return null;
+                const selectedPersons = (firm.contacts || []).filter(p => pc.personIds.includes(p.id));
+                const isEditing = editingContactId === pc.contactId;
+                return (
+                  <div key={pc.contactId} style={{ padding: "10px 0", borderBottom: "1px solid #f5f2ec" }}>
+                    <div style={{ display: "flex", justifyContent: "space-between", alignItems: "flex-start" }}>
+                      <div>
+                        {firm.type && <div style={{ fontSize: 10, color: "#aaa", marginBottom: 2, letterSpacing: "0.06em" }}>{firm.type.toUpperCase()}</div>}
+                        <div style={{ fontWeight: 600, fontSize: 13 }}>{firm.name}</div>
+                        {!isEditing && (selectedPersons.length > 0
+                          ? <div style={{ marginTop: 4, display: "flex", flexWrap: "wrap", gap: 6 }}>
+                              {selectedPersons.map(p => <span key={p.id} style={{ fontSize: 11, background: "#f5f2ec", color: "#555", padding: "2px 8px", borderRadius: 10 }}>{p.name}{p.position ? " · " + p.position : ""}</span>)}
+                            </div>
+                          : <div style={{ fontSize: 11, color: "#aaa", marginTop: 3 }}>Alle Ansprechpartner</div>
+                        )}
+                      </div>
+                      <div style={{ display: "flex", gap: 4 }}>
+                        {(firm.contacts || []).length > 0 && !isEditing && (
+                          <button className="btn btn-ghost" style={{ fontSize: 11, padding: "3px 8px" }}
+                            onClick={() => { setEditingContactId(pc.contactId); setAddPersonIds(pc.personIds || []); setShowAddBeteiligter(false); }}><span className="material-icons" style={{ fontSize: 16 }}>edit</span></button>
+                        )}
+                        <button className="btn btn-ghost" style={{ fontSize: 11, padding: "3px 8px", color: "#888" }} onClick={() => removeBeteiligte(pc.contactId)}><span className="material-icons" style={{ fontSize: 16 }}>close</span></button>
+                      </div>
+                    </div>
+                    {isEditing && (
+                      <div style={{ marginTop: 8 }}>
+                        <div style={{ fontSize: 11, color: "#888", marginBottom: 6 }}>Personen (leer = alle):</div>
+                        {(firm.contacts || []).map(p => (
+                          <label key={p.id} style={{ display: "flex", alignItems: "center", gap: 8, cursor: "pointer", fontSize: 13, marginBottom: 4 }}>
+                            <input type="checkbox" checked={addPersonIds.includes(p.id)} onChange={() => togglePerson(p.id)} />
+                            <span>{p.name}</span>
+                            {p.position && <span style={{ fontSize: 11, color: "#888" }}>{p.position}</span>}
+                          </label>
+                        ))}
+                        <div style={{ display: "flex", gap: 8, marginTop: 8 }}>
+                          <button className="btn btn-primary" style={{ fontSize: 12 }} onClick={() => saveEditedBeteiligte(pc.contactId)}>Speichern</button>
+                          <button className="btn btn-ghost" style={{ fontSize: 12 }} onClick={() => { setEditingContactId(null); setAddPersonIds([]); }}>Abbrechen</button>
+                        </div>
+                      </div>
+                    )}
+                  </div>
+                );
+              })}
+
+              {projectContacts.length === 0 && !showAddBeteiligter && (
+                <div style={{ fontSize: 12, color: "#aaa", marginBottom: 10 }}>Noch keine Beteiligten erfasst.</div>
+              )}
+
+              {showAddBeteiligter ? (
+                <div style={{ marginTop: 12 }}>
+                  <select value={addContactId} onChange={e => { setAddContactId(e.target.value); setAddPersonIds([]); }} style={{ width: "100%", height: 34, marginBottom: 10 }}>
+                    <option value="">— Firma wählen —</option>
+                    {allContacts.filter(c => !alreadyAdded.has(c.id)).sort((a, b) => a.name.localeCompare(b.name)).map(c => (
+                      <option key={c.id} value={c.id}>{c.type ? "[" + c.type + "] " : ""}{c.name}</option>
+                    ))}
+                  </select>
+                  {selectedFirm && (selectedFirm.contacts || []).length > 0 && (
+                    <div style={{ marginBottom: 10 }}>
+                      <div style={{ fontSize: 11, color: "#888", marginBottom: 6 }}>Personen (leer = alle):</div>
+                      {(selectedFirm.contacts || []).map(p => (
+                        <label key={p.id} style={{ display: "flex", alignItems: "center", gap: 8, cursor: "pointer", fontSize: 13, marginBottom: 4 }}>
+                          <input type="checkbox" checked={addPersonIds.includes(p.id)} onChange={() => togglePerson(p.id)} />
+                          <span>{p.name}</span>
+                          {p.position && <span style={{ fontSize: 11, color: "#888" }}>{p.position}</span>}
+                        </label>
+                      ))}
+                    </div>
+                  )}
+                  <div style={{ display: "flex", gap: 8 }}>
+                    <button className="btn btn-primary" style={{ fontSize: 12 }} onClick={addBeteiligte} disabled={!addContactId}>Hinzufügen</button>
+                    <button className="btn btn-ghost" style={{ fontSize: 12 }} onClick={() => { setShowAddBeteiligter(false); setAddContactId(""); setAddPersonIds([]); }}>Abbrechen</button>
+                  </div>
+                </div>
+              ) : (
+                <button className="btn btn-ghost" style={{ fontSize: 12, marginTop: 10 }} onClick={() => setShowAddBeteiligter(true)}>+ Beteiligten hinzufügen</button>
+              )}
+            </div>
+          </Modal>
+        );
+      })()}
+
+            {/* Budget / Offerten-Modal */}
+      {budgetModal && (() => {
+        const ROLES = ["Hauptofferte", "Nachtrag", "Referenz"];
+        const linked = budgetForm.linkedQuotes || [];
+        const nachtragLinked = linked.filter(lq => lq.role !== "Hauptofferte" && lq.role !== "Referenz");
+        const alreadyInOtherProjects = new Set((data.projects || []).filter(p => p.id !== projectId).flatMap(p => migrateLinkedQuotes(p).map(lq => lq.quoteId)));
+        const unlinked = (data.quotes || []).filter(q => !linked.some(lq => lq.quoteId === q.id) && !alreadyInOtherProjects.has(q.id));
+        const sortedLinked = [
+          ...linked.filter(lq => lq.role === "Hauptofferte"),
+          ...linked.filter(lq => lq.role !== "Hauptofferte"),
+        ];
+        return (
+          <Modal title="Budget & Honorarofferten" onClose={() => setBudgetModal(false)} onSave={saveBudget} wide>
+            <div style={{ fontSize: 11, fontWeight: 600, letterSpacing: "0.08em", color: "#888", marginBottom: 10 }}>VERKNÜPFTE OFFERTEN</div>
+
+            {sortedLinked.map((lq, lqIdx) => {
+              const q = (data.quotes || []).find(x => x.id === lq.quoteId);
+              if (!q) return null;
+              const isNT = lq.role !== "Hauptofferte";
+              const ntIdx = isNT ? nachtragLinked.findIndex(x => x.quoteId === lq.quoteId) : -1;
+              const posCode = isNT ? `N${ntIdx + 1}` : null;
+              const pos = isNT
+                ? ((budgetForm.positions || []).find(p => p.quoteId === lq.quoteId) || (posCode ? (budgetForm.positions || []).find(p => p.code === posCode) : null))
+                : null;
+              const currentPhases = isNT ? (pos?.enabledPhases || []) : (budgetForm.enabledPhases || []);
+              const togglePhase = (phId) => {
+                if (isNT) {
+                  setBudgetForm(f => ({
+                    ...f,
+                    positions: f.positions.map(p =>
+                      (p.quoteId ? p.quoteId === lq.quoteId : p.code === posCode)
+                        ? { ...p, enabledPhases: (p.enabledPhases || []).includes(phId) ? (p.enabledPhases || []).filter(x => x !== phId) : [...(p.enabledPhases || []), phId] }
+                        : p
+                    ),
+                  }));
+                } else {
+                  setBudgetForm(f => {
+                    const phases = f.enabledPhases || [];
+                    return { ...f, enabledPhases: phases.includes(phId) ? phases.filter(p => p !== phId) : [...phases, phId] };
+                  });
+                }
+              };
+              const qRoles = q.quoteRoles || data.settings.roles || [];
+              const qH = q.mode === "sia" ? (calcSIAHours(q.sia?.baukosten, q.sia?.schwierigkeit, q.sia?.phases || []).total || 0)
+                : q.mode === "manual" ? (calcManualHours(q.manualPhases || [], qRoles).totalHours || 0) : 0;
+              const bgColor = isNT ? "#f0f5fd" : "#faf8f5";
+              const borderColor = isNT ? "#c8d8ee" : "#ddd8d0";
+              const accentColor = isNT ? "#1a4e8a" : "#2d6a4f";
+              return (
+                <div key={lq.quoteId} style={{ marginBottom: 12, border: `1px solid ${borderColor}`, borderRadius: 8, overflow: "hidden" }}>
+                  <div style={{ display: "flex", alignItems: "center", gap: 8, padding: "10px 14px", background: bgColor, flexWrap: "wrap" }}>
+                    {isNT && pos ? (
+                      <>
+                        <input value={pos.code || ""} onChange={e => setBudgetForm(f => ({ ...f, positions: f.positions.map(p => p.quoteId === lq.quoteId ? { ...p, code: e.target.value.toUpperCase().replace(/\s/g, "").slice(0, 6) } : p) }))} placeholder="N1" style={{ width: 52, fontWeight: 700, fontSize: 12, height: 26, padding: "0 6px" }} />
+                        <input value={pos.label || ""} onChange={e => setBudgetForm(f => ({ ...f, positions: f.positions.map(p => p.quoteId === lq.quoteId ? { ...p, label: e.target.value } : p) }))} placeholder="z.B. Nachtrag Fassade" style={{ flex: 1, minWidth: 80, fontSize: 12, height: 26, padding: "0 6px" }} />
+                      </>
+                    ) : (
+                      <span style={{ fontSize: 10, fontWeight: 700, background: "#e8f5ee", color: accentColor, padding: "2px 8px", borderRadius: 3 }}>⬡ HO</span>
+                    )}
+                    <span style={{ fontWeight: 600, color: "#b07848" }}>{q.number}</span>
+                    <span style={{ color: "#888", fontSize: 11 }}>{q.mode === "sia" ? "SIA 102" : q.mode === "manual" ? "Aufwand" : "Pauschal"}</span>
+                    {qH > 0 && <span style={{ color: "#555", fontSize: 11 }}>{qH.toFixed(1)}h · {formatCHF(q.sub || q.total || 0)}</span>}
+                    <div style={{ marginLeft: "auto", display: "flex", alignItems: "center", gap: 6 }}>
+                      <select value={lq.role} onChange={e => changeLinkedRole(lq.quoteId, e.target.value)} style={{ fontSize: 11, height: 26, padding: "0 6px" }}>
+                        {ROLES.map(r => <option key={r}>{r}</option>)}
+                      </select>
+                      <button className="btn btn-danger" style={{ padding: "0 6px", height: 24, fontSize: 10 }} onClick={() => removeLinkedQuote(lq.quoteId)}><span className="material-icons" style={{ fontSize: 16 }}>close</span></button>
+                    </div>
+                  </div>
+                  <div style={{ padding: "10px 14px", background: "#fff" }}>
+                    <div style={{ fontSize: 10, color: "#888", marginBottom: 6, letterSpacing: "0.07em" }}>AKTIVIERTE SIA-PHASEN FÜR ZEITERFASSUNG</div>
+                    <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 4 }}>
+                      {SIA_PHASES.map(ph => (
+                        <label key={ph.id} style={{ display: "flex", alignItems: "center", gap: 8, cursor: "pointer", fontSize: 12, textTransform: "none", color: "#1a1a18", padding: "3px 0" }}>
+                          <input type="checkbox" checked={currentPhases.includes(ph.id)} onChange={() => togglePhase(ph.id)} style={{ width: "auto" }} />
+                          {ph.label}
+                        </label>
+                      ))}
+                    </div>
+                  </div>
+                </div>
+              );
+            })}
+
+            {linked.length === 0 && (
+              <div style={{ fontSize: 12, color: "#aaa", marginBottom: 10 }}>Noch keine Offerte verknüpft. SIA, Aufwand und Pauschal-Offerten können verknüpft werden.</div>
+            )}
+            {unlinked.length > 0 && (
+              <select defaultValue="" onChange={e => { if (e.target.value) { addLinkedQuote(e.target.value); e.target.value = ""; } }} style={{ fontSize: 12, width: "100%", marginBottom: 16 }}>
+                <option value="">{linked.length === 0 ? "Offerte verknüpfen…" : "+ Nachtrag / weitere Offerte hinzufügen…"}</option>
+                {unlinked.map(q => <option key={q.id} value={q.id}>{q.number} — {q.mode === "sia" ? "SIA 102" : q.mode === "manual" ? "Aufwand" : "Pauschal"} · {formatCHF(q.total)}</option>)}
+              </select>
+            )}
+
+            <FormField label="Stundenbudget manuell überschreiben (leert Offerten-Verknüpfung)">
+              <input type="number" step="0.5" min={0} value={budgetForm.budgetHours || 0}
+                onChange={e => setBudgetForm(f => ({ ...f, budgetHours: +e.target.value, linkedQuotes: [], phasesBudget: [] }))}
+                placeholder="0 = aus Offerten berechnet" />
+            </FormField>
+          </Modal>
+        );
+      })()}
+    </div>
+  );
+}
diff --git a/src/views/Protokolle.jsx b/src/views/Protokolle.jsx
new file mode 100755
index 0000000..9f1f18d
--- /dev/null
+++ b/src/views/Protokolle.jsx
@@ -0,0 +1,978 @@
+import React, { useState, useEffect, useRef } from "react";
+import { PROTOKOLL_TYPES, PROTOKOLL_ENTRY_TYPES } from "../constants.js";
+import { generateId, formatCHF, formatDate, formatHours, buildReminderLetter, getKW, getWeekNumber, formatKW, nextProtoNumber, nextProtoSeq, applyProtoNumberFormat } from "../utils.js";
+import { Header, Modal, FormField, StatusBadge, useConfirm, RichEditor , DateInput } from "../components/UI.jsx";
+
+export
+function MahnModal({ inv, data, update, setPrintContent, onClose, mahnMode, setMahnMode, mahnSentDate, setMahnSentDate }) {
+  const reminders = inv.reminders || [];
+  const nextNr = reminders.length + 1;
+  const lastReminder = reminders.at(-1);
+  const nextLabel = nextNr === 1 ? "Zahlungserinnerung" : `${nextNr}. Mahnung`;
+  const nextColor = nextNr >= 3 ? "#8a1a1a" : nextNr === 2 ? "#b5621e" : "#7a6a00";
+
+  const confirm = () => {
+    if (mahnMode.startsWith("reprint-")) {
+      const idx = parseInt(mahnMode.split("-")[1]);
+      const r = reminders[idx];
+      const { client, subject, body } = buildReminderLetter(inv, r.nr, r.sentDate || r.date, (data.persons||[]).filter(p=>p.isAuftraggeber), data.settings);
+      setPrintContent({ type: "letter", client, subject, body, settings: data.settings });
+    } else {
+      const { client, subject, body } = buildReminderLetter(inv, nextNr, mahnSentDate, (data.persons||[]).filter(p=>p.isAuftraggeber), data.settings);
+      setPrintContent({ type: "letter", client, subject, body, settings: data.settings });
+      const newReminder = { nr: nextNr, date: new Date().toISOString().slice(0, 10), sentDate: mahnSentDate, daysPast: Math.floor((new Date() - new Date(inv.dueDate)) / 86400000) };
+      update("invoices", data.invoices.map(i => i.id === inv.id
+        ? { ...i, status: "überfällig", reminders: [...reminders, newReminder] }
+        : i
+      ));
+    }
+    onClose();
+  };
+
+  return (
+    <div className="modal-overlay" onClick={e => e.target === e.currentTarget && onClose()}>
+      <div className="modal" style={{ maxWidth: 480 }}>
+        <h2 style={{ fontFamily: "'Playfair Display', serif", fontWeight: 400, marginBottom: 6, fontSize: 22 }}>Mahnung</h2>
+        <div style={{ fontSize: 12, color: "var(--text4)", marginBottom: 20 }}>Rechnung {inv.number} · {formatCHF(inv.total)}</div>
+        {reminders.length > 0 && (
+          <div style={{ marginBottom: 20, padding: "10px 14px", background: "var(--surface2)", borderRadius: 6, border: "1px solid var(--border2)" }}>
+            <div style={{ fontSize: 10, letterSpacing: "0.08em", color: "var(--text4)", marginBottom: 8 }}>BISHERIGE MAHNUNGEN</div>
+            {reminders.map((r, i) => (
+              <div key={i} style={{ display: "flex", justifyContent: "space-between", fontSize: 12, padding: "3px 0", borderBottom: i < reminders.length - 1 ? "1px solid var(--border2)" : "none" }}>
+                <span style={{ color: "var(--text2)" }}>{i === 0 ? "Zahlungserinnerung" : `${r.nr}. Mahnung`}</span>
+                <span style={{ color: "var(--text4)" }}>gesendet {formatDate(r.sentDate || r.date)}</span>
+              </div>
+            ))}
+          </div>
+        )}
+        <div style={{ display: "flex", flexDirection: "column", gap: 8, marginBottom: 20 }}>
+          {reminders.map((r, i) => {
+            const rLabel = i === 0 ? "Zahlungserinnerung" : `${r.nr}. Mahnung`;
+            const rMode = `reprint-${i}`;
+            return (
+              <label key={i} style={{ display: "flex", gap: 12, padding: "11px 14px", borderRadius: 6, border: `1.5px solid ${mahnMode === rMode ? "var(--text)" : "var(--border)"}`, cursor: "pointer", textTransform: "none", fontSize: 13, color: "var(--text)" }}>
+                <input type="radio" checked={mahnMode === rMode} onChange={() => setMahnMode(rMode)} style={{ width: "auto", marginTop: 2 }} />
+                <div>
+                  <div style={{ fontWeight: 500 }}>{rLabel} nochmals drucken</div>
+                  <div style={{ fontSize: 11, color: "var(--text4)", marginTop: 2 }}>Gesendet am {formatDate(r.sentDate || r.date)} · kein neuer Eintrag</div>
+                </div>
+              </label>
+            );
+          })}
+          <label style={{ display: "flex", gap: 12, padding: "11px 14px", borderRadius: 6, border: `1.5px solid ${mahnMode === "new" ? "var(--text)" : "var(--border)"}`, cursor: "pointer", textTransform: "none", fontSize: 13, color: "var(--text)" }}>
+            <input type="radio" checked={mahnMode === "new"} onChange={() => setMahnMode("new")} style={{ width: "auto", marginTop: 2 }} />
+            <div style={{ flex: 1 }}>
+              <div style={{ fontWeight: 500, color: nextColor }}>{nextLabel} auslösen</div>
+              <div style={{ fontSize: 11, color: "var(--text4)", marginTop: 2 }}>Wird als neuer Eintrag gespeichert</div>
+              {mahnMode === "new" && (
+                <div style={{ marginTop: 10, display: "flex", alignItems: "center", gap: 8 }}>
+                  <label style={{ fontSize: 11, color: "var(--text4)", textTransform: "uppercase", letterSpacing: "0.06em", whiteSpace: "nowrap" }}>Sendedatum</label>
+                  <DateInput value={mahnSentDate} onChange={e => setMahnSentDate(e.target.value)} style={{ flex: 1, height: 32, fontSize: 12 }} />
+                </div>
+              )}
+            </div>
+          </label>
+        </div>
+        <div style={{ display: "flex", gap: 10, justifyContent: "flex-end" }}>
+          <button className="btn btn-ghost" onClick={onClose}>Abbrechen</button>
+          <button className="btn btn-primary" onClick={confirm} style={{ background: mahnMode === "new" ? nextColor : "#2a2a22" }}>
+            ✉ Drucken{mahnMode === "new" ? " & speichern" : ""}
+          </button>
+        </div>
+      </div>
+    </div>
+  );
+}
+
+export default
+function Protokolle({ data, update, saveAll, setPrintContent }) {
+  const today = new Date().toISOString().slice(0, 10);
+  const protokolle = data.protocols || [];
+
+  const [detailId, setDetailId] = useState(() => {
+    const id = window.__openProtokoll || null;
+    window.__openProtokoll = null;
+    return id;
+  });
+  const [filter, setFilter] = useState({ search: "", type: "", projectId: "" });
+  const [sort, setSort] = useState({ col: "date", dir: -1 });
+
+  const detail = detailId ? protokolle.find(p => p.id === detailId) : null;
+
+  // hooks must be called before any early return
+  const { askConfirm, ConfirmModalEl } = useConfirm();
+  const deleteProtokoll = async (id) => {
+    if (await askConfirm("Protokoll löschen?")) {
+      saveAll({ ...data, protocols: protokolle.filter(x => x.id !== id) });
+    }
+  };
+
+  // ── Detail-Ansicht ────────────────────────────────────────────
+  if (detail) {
+    return <ProtokollDetail
+      protokoll={detail}
+      data={data}
+      onBack={() => setDetailId(null)}
+      onSave={p => { saveAll({ ...data, protocols: protokolle.map(x => x.id === p.id ? p : x) }); }}
+      onDelete={id => { saveAll({ ...data, protocols: protokolle.filter(x => x.id !== id) }); setDetailId(null); }}
+      setPrintContent={setPrintContent}
+      saveAll={saveAll}
+    />;
+  }
+
+  // ── Listenansicht ─────────────────────────────────────────────
+
+  const newProtokoll = () => {
+    const defaultType = PROTOKOLL_TYPES[0];
+    const abbr = data.settings.protokollTypeAbbreviations || {};
+    const typKuerzel = abbr[defaultType] || "SO";
+    const seq = nextProtoSeq(protokolle);
+    const nummer = applyProtoNumberFormat(data.settings.protokollNumberFormat || "YYYY-TT-NN", {
+      date: today, projectNumber: "", seq, typKuerzel,
+    });
+    const p = {
+      id: generateId(),
+      title: "",
+      type: defaultType,
+      date: today,
+      time: "10:00",
+      endTime: "",
+      location: "",
+      projectId: "",
+      projectManual: "",
+      nummer,
+      participants: [],
+      traktanden: [{ id: generateId(), nr: "1", title: "", items: [] }],
+      nextDate: "",
+      verteiler: "",
+      createdAt: new Date().toISOString(),
+    };
+    saveAll({ ...data, protocols: [...protokolle, p] });
+    setDetailId(p.id);
+  };
+
+  const filtered = protokolle.filter(p => {
+    if (filter.type && p.type !== filter.type) return false;
+    if (filter.projectId && p.projectId !== filter.projectId) return false;
+    if (filter.search) {
+      const q = filter.search.toLowerCase();
+      const proj = data.projects.find(x => x.id === p.projectId);
+      if (![p.title, p.nummer, p.type, proj?.name, p.location].filter(Boolean).join(" ").toLowerCase().includes(q)) return false;
+    }
+    return true;
+  });
+
+  const toggleSort = col => setSort(s => ({ col, dir: s.col === col ? -s.dir : -1 }));
+  const SortTh = ({ col, children, style }) => (
+    <th onClick={() => toggleSort(col)} style={{ cursor: "pointer", userSelect: "none", ...style }}>
+      {children} <span style={{ color: sort.col === col ? "#b07848" : "#ccc", fontSize: 10 }}>{sort.col === col ? (sort.dir === 1 ? "▲" : "▼") : "⇅"}</span>
+    </th>
+  );
+
+  const sorted = [...filtered].sort((a, b) => {
+    const va = sort.col === "date" ? (a.date || "") : sort.col === "type" ? (a.type || "") : sort.col === "nummer" ? (a.nummer || "") : (a.title || "");
+    const vb = sort.col === "date" ? (b.date || "") : sort.col === "type" ? (b.type || "") : sort.col === "nummer" ? (b.nummer || "") : (b.title || "");
+    return va.localeCompare(vb) * sort.dir;
+  });
+
+  // Offene Aufgaben über alle Protokolle
+  const alleTasks = protokolle.flatMap(p =>
+    (p.traktanden || []).flatMap(t =>
+      (t.items || []).filter(it => it.type === "aufgabe" && it.status !== "erledigt")
+        .map(it => ({ ...it, protokollId: p.id, protokollNr: p.nummer, protokollTitle: p.title, protokollDate: p.date }))
+    )
+  );
+
+  return (
+    <div>
+      {ConfirmModalEl}
+      <Header title="Protokolle" action={
+        <button className="btn btn-primary" onClick={newProtokoll}>+ Neues Protokoll</button>
+      } />
+
+      {/* Offene Aufgaben-Banner */}
+      {alleTasks.length > 0 && (
+        <div className="card" style={{ marginBottom: 20, borderLeft: "4px solid #b5621e", padding: "12px 20px" }}>
+          <div style={{ fontSize: 11, letterSpacing: "0.1em", color: "#b5621e", marginBottom: 10, fontWeight: 600 }}>
+            → OFFENE AUFGABEN ({alleTasks.length})
+          </div>
+          <div style={{ display: "flex", flexWrap: "wrap", gap: 8 }}>
+            {alleTasks.slice(0, 6).map(t => {
+              const due = t.dueDateType === "kw" ? `KW ${t.dueKW}/${t.dueYear || new Date().getFullYear()}` : t.dueDate ? formatDate(t.dueDate) : "—";
+              const isLate = t.dueDate && t.dueDateType === "datum" && t.dueDate < today;
+              return (
+                <div key={t.id} onClick={() => setDetailId(t.protokollId)}
+                  style={{ fontSize: 12, padding: "5px 10px", background: isLate ? "#fdf2f2" : "var(--surface2)", border: `1px solid ${isLate ? "#e8b0b0" : "var(--border)"}`, borderRadius: 4, cursor: "pointer" }}>
+                  <span style={{ color: "var(--text4)", fontSize: 10, marginRight: 6 }}>{t.protokollNr}</span>
+                  <strong>{t.text}</strong>
+                  {t.responsible && <span style={{ color: "var(--text4)", marginLeft: 6 }}>→ {t.responsible}</span>}
+                  <span style={{ color: isLate ? "#8a1a1a" : "var(--text4)", marginLeft: 6, fontSize: 10 }}>{due}</span>
+                </div>
+              );
+            })}
+            {alleTasks.length > 6 && <div style={{ fontSize: 12, color: "var(--text4)", padding: "5px 10px" }}>+{alleTasks.length - 6} weitere</div>}
+          </div>
+        </div>
+      )}
+
+      <div className="filter-bar">
+        <input className="pill" placeholder="Suche (Titel, Nr., Ort…)" value={filter.search} onChange={e => setFilter({ ...filter, search: e.target.value })} style={{ minWidth: 200 }} />
+        <select className="pill" value={filter.type} onChange={e => setFilter({ ...filter, type: e.target.value })}>
+          <option value="">Alle Typen</option>
+          {PROTOKOLL_TYPES.map(t => <option key={t} value={t}>{t}</option>)}
+        </select>
+        <select className="pill" value={filter.projectId} onChange={e => setFilter({ ...filter, projectId: e.target.value })}>
+          <option value="">Alle Projekte</option>
+          {data.projects.map(p => <option key={p.id} value={p.id}>{p.name}</option>)}
+        </select>
+        {(filter.search || filter.type || filter.projectId) && (
+          <button className="btn btn-ghost" style={{ fontSize: 12 }} onClick={() => setFilter({ search: "", type: "", projectId: "" })}>Zurücksetzen</button>
+        )}
+        <div style={{ marginLeft: "auto", fontSize: 12, color: "#888" }}>
+          <strong style={{ color: "#1a1a18" }}>{filtered.length}</strong> Protokolle
+        </div>
+      </div>
+
+      {sorted.length === 0 ? (
+        <div className="card" style={{ padding: 0 }}>
+          <table>
+            <thead><tr><th style={{ width: 110 }}>Nr.</th><th style={{ width: 100 }}>Datum</th><th style={{ width: 160 }}>Typ</th><th>Titel</th><th style={{ width: 160 }}>Projekt</th><th style={{ width: 50 }}>TN</th><th style={{ width: 50 }}>📌</th><th style={{ width: 130 }}></th></tr></thead>
+            <tbody><tr><td colSpan={8} style={{ textAlign: "center", color: "#aaa", padding: 32, fontSize: 13 }}>{protokolle.length === 0 ? "Noch keine Protokolle" : "Keine Treffer"}</td></tr></tbody>
+          </table>
+        </div>
+      ) : (
+        <div className="card" style={{ padding: 0 }}>
+          <table>
+            <thead>
+              <tr>
+                <SortTh col="nummer" style={{ width: 110 }}>Nr.</SortTh>
+                <SortTh col="date" style={{ width: 100 }}>Datum</SortTh>
+                <SortTh col="type" style={{ width: 160 }}>Typ</SortTh>
+                <SortTh col="title">Titel</SortTh>
+                <th style={{ width: 160 }}>Projekt</th>
+                <th style={{ width: 50, textAlign: "center" }}>TN</th>
+                <th style={{ width: 50, textAlign: "center" }}>📌</th>
+                <th style={{ width: 130 }}></th>
+              </tr>
+            </thead>
+            <tbody>
+              {sorted.map(p => {
+                const proj = data.projects.find(x => x.id === p.projectId);
+                const anwesend = (p.participants || []).filter(x => x.status === "anwesend").length;
+                const total = (p.participants || []).length;
+                const offeneTasks = (p.traktanden || []).flatMap(t => (t.items || []).filter(it => it.type === "aufgabe" && it.status !== "erledigt")).length;
+                return (
+                  <tr key={p.id} onClick={() => setDetailId(p.id)} style={{ cursor: "pointer" }}>
+                    <td><strong style={{ color: "#b07848" }}>{p.nummer}</strong></td>
+                    <td>{formatDate(p.date)}</td>
+                    <td><span style={{ fontSize: 11, color: "#555" }}>{p.type}</span></td>
+                    <td><strong>{p.title || <span style={{ color: "#aaa", fontWeight: 400 }}>Kein Titel</span>}</strong></td>
+                    <td style={{ color: "#888", fontSize: 12 }}>{proj?.name || p.projectManual || "—"}</td>
+                    <td style={{ textAlign: "center", fontSize: 12, color: "#888" }}>{total > 0 ? `${anwesend}/${total}` : "—"}</td>
+                    <td style={{ textAlign: "center" }}>
+                      {offeneTasks > 0 && <span style={{ fontSize: 11, color: "#b5621e", fontWeight: 600 }}>{offeneTasks}</span>}
+                    </td>
+                    <td style={{ textAlign: "right", whiteSpace: "nowrap" }}>
+                      <button className="btn btn-ghost" style={{ fontSize: 12, padding: "5px 10px", marginRight: 4 }}
+                        onClick={e => { e.stopPropagation(); setPrintContent({ type: "protokoll", protokoll: p, data, settings: data.settings }); }}>PDF</button>
+                      <button className="btn btn-ghost" style={{ fontSize: 12, padding: "5px 10px", marginRight: 4 }}
+                        onClick={e => { e.stopPropagation(); setDetailId(p.id); }}><span className="material-icons" style={{ fontSize: 16 }}>edit</span></button>
+                      <button className="btn btn-danger" style={{ fontSize: 12, padding: "5px 10px" }}
+                        onClick={e => { e.stopPropagation(); deleteProtokoll(p.id); }}><span className="material-icons" style={{ fontSize: 16 }}>close</span></button>
+                    </td>
+                  </tr>
+                );
+              })}
+            </tbody>
+          </table>
+        </div>
+      )}
+    </div>
+  );
+}
+
+
+export
+function ItemEditor({ tId, item, today, onUpdate, onRemove }) {
+  const typeConfig = {
+    info:     { icon: "ℹ",  color: "#1a4e8a", label: "Information" },
+    beschluss:{ icon: "✓",  color: "#2d6a4f", label: "Beschluss" },
+    aufgabe:  { icon: "→",  color: "#b5621e", label: "Aufgabe" },
+  };
+  const tc = typeConfig[item.type] || typeConfig.info;
+
+  return (
+    <div style={{ display: "flex", gap: 10, alignItems: "flex-start", flex: 1 }}>
+      <div style={{ flexShrink: 0, width: 24, height: 24, borderRadius: 4, background: tc.color, display: "flex", alignItems: "center", justifyContent: "center", fontSize: 12, marginTop: 6 }}>{tc.icon}</div>
+      <div style={{ flex: 1 }}>
+        <RichEditor value={item.text || ""} onChange={html => onUpdate({ text: html })} minHeight={60} compact />
+        {item.type === "beschluss" && (
+          <div style={{ display: "flex", gap: 8, marginTop: 6, alignItems: "center" }}>
+            <label style={{ fontSize: 11, color: "var(--text4)", textTransform: "uppercase", letterSpacing: "0.06em" }}>Beschlussdatum</label>
+            <DateInput value={item.date || today} onChange={e => onUpdate({ date: e.target.value })}
+              style={{ height: 28, fontSize: 11, width: 140 }} />
+          </div>
+        )}
+        {item.type === "aufgabe" && (
+          <div style={{ display: "flex", gap: 8, marginTop: 6, flexWrap: "wrap", alignItems: "center" }}>
+            <input value={item.responsible || ""} onChange={e => onUpdate({ responsible: e.target.value })}
+              placeholder="Verantwortliche/r" style={{ height: 28, fontSize: 11, flex: "1 1 140px", maxWidth: 200 }} />
+            <select value={item.dueDateType || "kw"} onChange={e => onUpdate({ dueDateType: e.target.value })}
+              style={{ height: 28, fontSize: 11, width: 70 }}>
+              <option value="kw">KW</option>
+              <option value="datum">Datum</option>
+            </select>
+            {(item.dueDateType || "kw") === "kw" ? (
+              <>
+                <input type="number" min={1} max={53} value={item.dueKW || ""} onChange={e => onUpdate({ dueKW: e.target.value })}
+                  placeholder="KW" style={{ height: 28, fontSize: 11, width: 60 }} />
+                <input type="number" min={2024} max={2035} value={item.dueYear || new Date().getFullYear()} onChange={e => onUpdate({ dueYear: +e.target.value })}
+                  style={{ height: 28, fontSize: 11, width: 72 }} />
+              </>
+            ) : (
+              <DateInput value={item.dueDate || ""} onChange={e => onUpdate({ dueDate: e.target.value })}
+                style={{ height: 28, fontSize: 11, width: 140 }} />
+            )}
+            <select value={item.status || "offen"} onChange={e => onUpdate({ status: e.target.value })}
+              style={{ height: 28, fontSize: 11, width: 100,
+                background: item.status === "erledigt" ? "#e8f5ee" : item.status === "in Arbeit" ? "#fffbe6" : "var(--input-bg)",
+                color: item.status === "erledigt" ? "#2d6a4f" : item.status === "in Arbeit" ? "#7a6a00" : "#b5621e",
+                fontWeight: 600 }}>
+              <option value="offen">Offen</option>
+              <option value="in Arbeit">In Arbeit</option>
+              <option value="erledigt">Erledigt</option>
+            </select>
+          </div>
+        )}
+      </div>
+      <button onClick={onRemove}
+        style={{ background: "none", border: "none", color: "var(--text4)", cursor: "pointer", fontSize: 16, padding: 0, marginTop: 6, flexShrink: 0 }}><span className="material-icons" style={{ fontSize: 16 }}>close</span></button>
+    </div>
+  );
+}
+
+
+export
+function ProtokollDetail({ protokoll, data, onBack, onSave, onDelete, setPrintContent, saveAll }) {
+  const [p, setP] = useState(() => JSON.parse(JSON.stringify(protokoll)));
+  const isDirty = JSON.stringify(p) !== JSON.stringify(protokoll);
+  const today = new Date().toISOString().slice(0, 10);
+  const [showFolge, setShowFolge] = useState(false);
+  const { askConfirm, ConfirmModalEl } = useConfirm();
+  const [folgeSelection, setFolgeSelection] = useState(null); // built on open
+
+  const save = () => onSave(p);
+  const setField = (k, v) => setP(prev => {
+    const updated = { ...prev, [k]: v };
+    if (k === "projectId" || k === "date" || k === "type") {
+      const abbr = data.settings.protokollTypeAbbreviations || {};
+      const proj = data.projects.find(x => x.id === updated.projectId);
+      const typKuerzel = abbr[updated.type] || "SO";
+      const groups = (prev.nummer || "").match(/\d+/g) || [];
+      const seq = (() => {
+        for (let i = groups.length - 1; i >= 0; i--) {
+          const n = parseInt(groups[i]);
+          if (!(groups[i].length === 4 && n >= 2000 && n <= 2099)) return n;
+        }
+        return 1;
+      })();
+      updated.nummer = applyProtoNumberFormat(data.settings.protokollNumberFormat || "YYYY-TT-NN", {
+        date: updated.date, projectNumber: proj?.number || "", seq, typKuerzel,
+      });
+    }
+    return updated;
+  });
+
+  // ── Teilnehmer ────────────────────────────────────────────────
+  const proj = data.projects.find(x => x.id === p.projectId);
+  const projectContactPersons = proj ? (proj.projectContacts || []).flatMap(pc => {
+    const firm = (data.persons || []).find(c => c.id === pc.contactId);
+    if (!firm) return [];
+    const firmPersons = firm.contacts || [];
+    if (pc.personIds && pc.personIds.length > 0) {
+      return firmPersons.filter(fp => pc.personIds.includes(fp.id)).map(fp => ({
+        id: `pc-${fp.id}`,
+        name: fp.name,
+        role: [fp.position, firm.name].filter(Boolean).join(" · "),
+        source: "extern",
+      }));
+    }
+    // No specific persons selected — show firm entry (if it has no contacts) or all persons
+    if (firmPersons.length === 0) {
+      return [{ id: `pcf-${firm.id}`, name: firm.name, role: firm.type || "Beteiligter", source: "extern" }];
+    }
+    return firmPersons.map(fp => ({
+      id: `pc-${fp.id}`,
+      name: fp.name,
+      role: [fp.position, firm.name].filter(Boolean).join(" · "),
+      source: "extern",
+    }));
+  }) : [];
+
+  const projectMembers = proj?.internalMembers?.length
+    ? (data.employees || []).filter(e => proj.internalMembers.includes(e.id))
+    : (data.employees || []);
+
+  const allPersons = [
+    ...projectMembers.map(e => ({ id: `emp-${e.id}`, name: e.name, role: e.role || "Mitarbeiter", source: "intern" })),
+    ...projectContactPersons,
+    ...(data.persons || []).filter(p => p.isAuftraggeber).flatMap(c => {
+      if (c.contacts && c.contacts.length > 0) {
+        return c.contacts.map(ct => ({
+          id: `cnt-${ct.id}`,
+          name: ct.name,
+          role: [ct.position, c.name].filter(Boolean).join(" · "),
+          source: "extern",
+        }));
+      }
+      return [{ id: `cli-${c.id}`, name: c.name, role: "Auftraggeber", source: "extern" }];
+    }),
+  ];
+
+  const addParticipant = (personId) => {
+    if (!personId || p.participants.some(x => x.id === personId)) return;
+    const person = allPersons.find(x => x.id === personId);
+    if (!person) return;
+    setP(prev => ({ ...prev, participants: [...prev.participants, { ...person, status: "anwesend" }] }));
+  };
+
+  const addManualParticipant = () => {
+    const name = prompt("Name der Person:");
+    if (!name?.trim()) return;
+    const role = prompt("Funktion / Firma (optional):") || "";
+    setP(prev => ({ ...prev, participants: [...prev.participants, { id: generateId(), name: name.trim(), role, source: "manuell", status: "anwesend" }] }));
+  };
+
+  const setParticipantStatus = (id, status) =>
+    setP(prev => ({ ...prev, participants: prev.participants.map(x => x.id === id ? { ...x, status } : x) }));
+
+  const removeParticipant = (id) =>
+    setP(prev => ({ ...prev, participants: prev.participants.filter(x => x.id !== id) }));
+
+  // ── Traktanden ────────────────────────────────────────────────
+  const addTraktandum = () => {
+    const maxNr = Math.max(0, ...(p.traktanden || []).map(t => parseInt(t.nr) || 0));
+    setP(prev => ({ ...prev, traktanden: [...(prev.traktanden || []), { id: generateId(), nr: String(maxNr + 1), title: "", items: [] }] }));
+  };
+
+  const setTraktandum = (id, changes) =>
+    setP(prev => ({ ...prev, traktanden: (prev.traktanden || []).map(t => t.id === id ? { ...t, ...changes } : t) }));
+
+  const removeTraktandum = (id) =>
+    setP(prev => ({ ...prev, traktanden: (prev.traktanden || []).filter(t => t.id !== id) }));
+
+  const addItem = (tId, type) => {
+    const item = type === "aufgabe"
+      ? { id: generateId(), type, text: "", responsible: "", dueDateType: "kw", dueKW: "", dueYear: new Date().getFullYear(), dueDate: "", status: "offen" }
+      : type === "beschluss"
+      ? { id: generateId(), type, text: "", date: today }
+      : { id: generateId(), type: "info", text: "" };
+    setP(prev => ({ ...prev, traktanden: (prev.traktanden || []).map(t => t.id === tId ? { ...t, items: [...(t.items || []), item] } : t) }));
+  };
+
+  const setItem = (tId, iId, changes) =>
+    setP(prev => ({ ...prev, traktanden: (prev.traktanden || []).map(t => t.id === tId ? { ...t, items: (t.items || []).map(it => it.id === iId ? { ...it, ...changes } : it) } : t) }));
+
+  const removeItem = (tId, iId) =>
+    setP(prev => ({ ...prev, traktanden: (prev.traktanden || []).map(t => t.id === tId ? { ...t, items: (t.items || []).filter(it => it.id !== iId) } : t) }));
+
+  const statusConfig = {
+    anwesend: { label: "Anwesend", color: "#2d6a4f", bg: "#e8f5ee" },
+    entschuldigt: { label: "Entschuldigt", color: "#b5621e", bg: "#fdf0e8" },
+    abwesend: { label: "Abwesend", color: "#8a1a1a", bg: "#fdf2f2" },
+    eingeladen: { label: "Eingeladen", color: "#1a4e8a", bg: "#e8f0fa" },
+  };
+
+  const unaddedPersons = allPersons.filter(x => !p.participants.some(pt => pt.id === x.id));
+
+  // ── Drag & Drop ───────────────────────────────────────────────
+  // Pointer-based drag (reliable in Tauri/WKWebView — HTML5 drag API is not)
+  const dragItem = React.useRef(null);   // { kind: "traktandum"|"item", idx, tId? }
+  const dragOver = React.useRef(null);   // { idx, tId? }
+  const [dragOverTraktandum, setDragOverTraktandum] = React.useState(null);
+  const [dragOverItem, setDragOverItem] = React.useState(null); // { tId, idx }
+  const [draggingTraktandum, setDraggingTraktandum] = React.useState(null);
+  const [draggingItem, setDraggingItem] = React.useState(null); // { tId, idx }
+
+  const commitDrag = () => {
+    const { kind, idx: from, tId } = dragItem.current || {};
+    const to = dragOver.current?.idx;
+    dragItem.current = null;
+    dragOver.current = null;
+    setDragOverTraktandum(null);
+    setDragOverItem(null);
+    setDraggingTraktandum(null);
+    setDraggingItem(null);
+    if (from == null || to == null || from === to) return;
+    if (kind === "traktandum") {
+      setP(prev => {
+        const arr = [...(prev.traktanden || [])];
+        const [moved] = arr.splice(from, 1);
+        arr.splice(to, 0, moved);
+        return { ...prev, traktanden: arr };
+      });
+    } else if (kind === "item") {
+      setP(prev => ({
+        ...prev,
+        traktanden: (prev.traktanden || []).map(t => {
+          if (t.id !== tId) return t;
+          const arr = [...(t.items || [])];
+          const [moved] = arr.splice(from, 1);
+          arr.splice(to, 0, moved);
+          return { ...t, items: arr };
+        }),
+      }));
+    }
+  };
+
+  React.useEffect(() => {
+    const up = () => { if (dragItem.current) commitDrag(); };
+    window.addEventListener("mouseup", up);
+    return () => window.removeEventListener("mouseup", up);
+  });
+
+  const startDragTraktandum = (idx) => {
+    dragItem.current = { kind: "traktandum", idx };
+    dragOver.current = { idx };
+    setDraggingTraktandum(idx);
+  };
+  const enterTraktandum = (idx) => {
+    if (dragItem.current?.kind !== "traktandum") return;
+    dragOver.current = { idx };
+    setDragOverTraktandum(idx);
+  };
+  const startDragItem = (tId, idx) => {
+    dragItem.current = { kind: "item", idx, tId };
+    dragOver.current = { idx };
+    setDraggingItem({ tId, idx });
+  };
+  const enterItem = (tId, idx) => {
+    if (dragItem.current?.kind !== "item" || dragItem.current?.tId !== tId) return;
+    dragOver.current = { idx };
+    setDragOverItem({ tId, idx });
+  };
+
+  return (
+    <div>
+      {ConfirmModalEl}
+      {/* Header */}
+      <div style={{ display: "flex", alignItems: "center", gap: 10, marginBottom: 4 }}>
+        <button onClick={onBack} style={{ background: "none", border: "none", fontSize: 12, color: "#888", cursor: "pointer", padding: 0, fontFamily: "inherit" }}>← Protokolle</button>
+        {isDirty && <span style={{ fontSize: 11, color: "#b5621e" }}>● Ungespeichert</span>}
+      </div>
+      <div style={{ display: "flex", justifyContent: "space-between", alignItems: "flex-start", marginBottom: 24 }}>
+        <div style={{ flex: 1, marginRight: 20 }}>
+          <input
+            value={p.title}
+            onChange={e => setField("title", e.target.value)}
+            placeholder="Protokolltitel…"
+            style={{ fontSize: 28, fontFamily: "'Playfair Display', serif", fontWeight: 400, background: "none", border: "none", borderBottom: "2px solid var(--border)", borderRadius: 0, padding: "4px 0", width: "100%", outline: "none", color: "var(--text)" }}
+          />
+          <div style={{ fontSize: 12, color: "var(--text4)", marginTop: 6 }}>
+            {p.nummer}
+            {p.type && <span> · {p.type}</span>}
+            {(() => { const proj = data.projects.find(x => x.id === p.projectId); return proj?.number ? <span style={{ color: "#b07848", marginLeft: 8, fontWeight: 600 }}>{proj.number}</span> : null; })()}
+          </div>
+        </div>
+        <div style={{ display: "flex", gap: 8, flexShrink: 0 }}>
+          <button className="btn btn-ghost" onClick={async () => { if (await askConfirm("Protokoll löschen?")) onDelete(p.id); }}>Löschen</button>
+          <button className="btn btn-ghost" onClick={() => setShowFolge(true)} title="Neue Sitzung auf Basis dieses Protokolls erstellen">↪ Folgesitzung</button>
+          <button className="btn btn-ghost" onClick={() => setPrintContent({ type: "protokoll", protokoll: p, data, settings: data.settings })}>PDF</button>
+          <button className="btn btn-primary" onClick={save} style={isDirty ? { background: "#2d6a4f" } : {}}>
+            {isDirty ? "Speichern ●" : "Gespeichert"}
+          </button>
+        </div>
+      </div>
+
+      <div style={{ display: "grid", gridTemplateColumns: "1fr 340px", gap: 20, alignItems: "start" }}>
+
+        {/* ── LINKE SPALTE: Metadaten + Traktanden ── */}
+        <div style={{ display: "flex", flexDirection: "column", gap: 16 }}>
+
+          {/* Kopfdaten */}
+          <div className="card">
+            <div style={{ fontSize: 11, letterSpacing: "0.1em", color: "var(--text4)", marginBottom: 14 }}>SITZUNGSDETAILS</div>
+            <div className="form-row">
+              <FormField label="Typ">
+                <select value={p.type} onChange={e => setField("type", e.target.value)}>
+                  {PROTOKOLL_TYPES.map(t => <option key={t} value={t}>{t}</option>)}
+                </select>
+              </FormField>
+              <FormField label="Datum">
+                <DateInput value={p.date} onChange={e => setField("date", e.target.value)} />
+              </FormField>
+              <FormField label="Von">
+                <input type="time" value={p.time || ""} onChange={e => setField("time", e.target.value)} />
+              </FormField>
+              <FormField label="Bis">
+                <input type="time" value={p.endTime || ""} onChange={e => setField("endTime", e.target.value)} />
+              </FormField>
+            </div>
+            <div className="form-row">
+              <FormField label="Ort / Raum">
+                <input value={p.location || ""} onChange={e => setField("location", e.target.value)} placeholder="z.B. Büro Studio, Baustelle…" />
+              </FormField>
+              <FormField label="Projekt">
+                <select value={p.projectId || ""} onChange={e => setField("projectId", e.target.value)}>
+                  <option value="">— kein Projekt —</option>
+                  {data.projects.map(x => <option key={x.id} value={x.id}>{x.name}</option>)}
+                </select>
+              </FormField>
+            </div>
+            {!p.projectId && (
+              <FormField label="Projekt (manuell)">
+                <input value={p.projectManual || ""} onChange={e => setField("projectManual", e.target.value)} placeholder="Projektbezeichnung" />
+              </FormField>
+            )}
+            <div className="form-row">
+              <FormField label="Nächste Sitzung">
+                <DateInput value={p.nextDate || ""} onChange={e => setField("nextDate", e.target.value)} />
+              </FormField>
+              <FormField label="Verteiler">
+                <input value={p.verteiler || ""} onChange={e => setField("verteiler", e.target.value)} placeholder="z.B. alle TN, Archiv…" />
+              </FormField>
+            </div>
+          </div>
+
+          {/* Traktanden – draggable */}
+          {(p.traktanden || []).map((t, ti) => {
+            const isDragTarget = dragOverTraktandum === ti;
+            return (
+              <div
+                key={t.id}
+                onMouseEnter={() => enterTraktandum(ti)}
+                className="card"
+                style={{
+                  borderLeft: "4px solid #b07848",
+                  outline: isDragTarget ? "2px dashed #b07848" : "none",
+                  outlineOffset: 2,
+                  opacity: draggingTraktandum === ti ? 0.5 : 1,
+                  transition: "outline 0.1s",
+                }}
+              >
+                {/* Traktandum-Header */}
+                <div style={{ display: "flex", gap: 10, alignItems: "center", marginBottom: 12 }}>
+                  {/* Drag handle */}
+                  <div
+                    title="Verschieben"
+                    style={{ cursor: "grab", color: "var(--text4)", fontSize: 14, flexShrink: 0, userSelect: "none", paddingTop: 2 }}
+                    onMouseDown={e => { e.preventDefault(); startDragTraktandum(ti); }}
+                  >⠿</div>
+                  <input value={t.nr} onChange={e => setTraktandum(t.id, { nr: e.target.value })}
+                    style={{ width: 48, height: 32, fontSize: 13, fontWeight: 700, textAlign: "center", background: "#b07848", color: "#1a1a18", border: "none", borderRadius: 4 }} />
+                  <input value={t.title} onChange={e => setTraktandum(t.id, { title: e.target.value })}
+                    placeholder="Traktandentitel…"
+                    style={{ flex: 1, height: 32, fontSize: 14, fontWeight: 500, background: "none", border: "none", borderBottom: "1.5px solid var(--border)", borderRadius: 0, outline: "none", color: "var(--text)" }} />
+                  {(p.traktanden || []).length > 1 && (
+                    <button onClick={() => removeTraktandum(t.id)}
+                      style={{ background: "none", border: "none", color: "var(--text4)", cursor: "pointer", fontSize: 16, padding: 0 }}><span className="material-icons" style={{ fontSize: 16 }}>close</span></button>
+                  )}
+                </div>
+
+                {/* Items */}
+                {(t.items || []).map((item, ii) => {
+                  const isItemTarget = dragOverItem?.tId === t.id && dragOverItem?.idx === ii;
+                  return (
+                    <div
+                      key={item.id}
+                      onMouseEnter={() => enterItem(t.id, ii)}
+                      style={{
+                        outline: isItemTarget ? "2px dashed #b07848" : "none",
+                        outlineOffset: 1,
+                        borderRadius: 4,
+                        opacity: draggingItem?.tId === t.id && draggingItem?.idx === ii ? 0.4 : 1,
+                        transition: "outline 0.1s",
+                      }}
+                    >
+                      <div style={{ display: "flex", gap: 10, padding: "10px 0", borderBottom: "1px solid var(--border2)", alignItems: "flex-start" }}>
+                        {/* Item drag handle */}
+                        <div
+                          title="Verschieben"
+                          style={{ cursor: "grab", color: "var(--text4)", fontSize: 12, flexShrink: 0, marginTop: 8, userSelect: "none" }}
+                          onMouseDown={e => { e.preventDefault(); startDragItem(t.id, ii); }}
+                        >⠿</div>
+                        <ItemEditor
+                          tId={t.id}
+                          item={item}
+                          today={today}
+                          onUpdate={changes => setItem(t.id, item.id, changes)}
+                          onRemove={() => removeItem(t.id, item.id)}
+                        />
+                      </div>
+                    </div>
+                  );
+                })}
+
+                {/* Item-Buttons */}
+                <div style={{ display: "flex", gap: 8, marginTop: 12 }}>
+                  {[
+                    { type: "info", icon: "ℹ", label: "Info", color: "#1a4e8a" },
+                    { type: "beschluss", icon: "✓",  label: "Beschluss", color: "#2d6a4f" },
+                    { type: "aufgabe",  icon: "→",  label: "Aufgabe",   color: "#b5621e" },
+                  ].map(btn => (
+                    <button key={btn.type} onClick={() => addItem(t.id, btn.type)} style={{
+                      fontSize: 11, padding: "5px 12px", borderRadius: 4,
+                      border: `1.5px solid ${btn.color}20`,
+                      background: `${btn.color}10`,
+                      color: btn.color, cursor: "pointer", fontFamily: "inherit", display: "flex", alignItems: "center", gap: 5,
+                    }}>
+                      {btn.icon} {btn.label}
+                    </button>
+                  ))}
+                </div>
+              </div>
+            );
+          })}
+
+          <button className="btn btn-ghost" onClick={addTraktandum} style={{ alignSelf: "flex-start" }}>
+            + Traktandum hinzufügen
+          </button>
+        </div>
+
+        {/* ── RECHTE SPALTE: Teilnehmer + Aufgaben-Zusammenfassung ── */}
+        <div style={{ display: "flex", flexDirection: "column", gap: 16 }}>
+
+          {/* Teilnehmer */}
+          <div className="card">
+            <div style={{ fontSize: 11, letterSpacing: "0.1em", color: "var(--text4)", marginBottom: 14 }}>TEILNEHMER ({p.participants.length})</div>
+
+            {/* Hinzufügen */}
+            <div style={{ display: "flex", gap: 6, marginBottom: 12 }}>
+              <select defaultValue="" onChange={e => { addParticipant(e.target.value); e.target.value = ""; }}
+                style={{ flex: 1, height: 32, fontSize: 12 }}>
+                <option value="">+ Person hinzufügen…</option>
+                {unaddedPersons.length > 0 && <optgroup label="Intern">
+                  {unaddedPersons.filter(x => x.source === "intern").map(x => <option key={x.id} value={x.id}>{x.name}</option>)}
+                </optgroup>}
+                {unaddedPersons.filter(x => x.source === "extern").length > 0 && <optgroup label="Kunden">
+                  {unaddedPersons.filter(x => x.source === "extern").map(x => <option key={x.id} value={x.id}>{x.name}</option>)}
+                </optgroup>}
+              </select>
+              <button className="btn btn-ghost" style={{ fontSize: 11, padding: "0 10px", whiteSpace: "nowrap", height: 32 }} onClick={addManualParticipant}>+ Manuell</button>
+            </div>
+
+            {/* Teilnehmerliste */}
+            {p.participants.length === 0 ? (
+              <div style={{ fontSize: 12, color: "var(--text4)", padding: "8px 0" }}>Noch keine Teilnehmer</div>
+            ) : (
+              <div style={{ display: "flex", flexDirection: "column", gap: 4 }}>
+                {p.participants.map(tn => {
+                  const sc = statusConfig[tn.status] || statusConfig.anwesend;
+                  return (
+                    <div key={tn.id} style={{ display: "flex", alignItems: "center", gap: 8, padding: "6px 8px", borderRadius: 6, background: sc.bg, border: `1px solid ${sc.color}30` }}>
+                      <div style={{ flex: 1, minWidth: 0 }}>
+                        <div style={{ fontSize: 12, fontWeight: 500, overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap" }}>{tn.name}</div>
+                        {tn.role && <div style={{ fontSize: 10, color: sc.color, opacity: 0.8 }}>{tn.role}</div>}
+                      </div>
+                      <select value={tn.status} onChange={e => setParticipantStatus(tn.id, e.target.value)}
+                        style={{ height: 26, fontSize: 10, fontWeight: 600, color: sc.color, background: "transparent", border: `1px solid ${sc.color}40`, borderRadius: 3, padding: "0 4px", maxWidth: 110 }}>
+                        {Object.entries(statusConfig).map(([k, v]) => <option key={k} value={k}>{v.label}</option>)}
+                      </select>
+                      <button onClick={() => removeParticipant(tn.id)}
+                        style={{ background: "none", border: "none", color: "var(--text4)", cursor: "pointer", fontSize: 14, padding: 0, flexShrink: 0 }}><span className="material-icons" style={{ fontSize: 16 }}>close</span></button>
+                    </div>
+                  );
+                })}
+              </div>
+            )}
+
+            {/* Anwesenheits-Statistik */}
+            {p.participants.length > 0 && (
+              <div style={{ marginTop: 12, paddingTop: 10, borderTop: "1px solid var(--border2)", display: "flex", gap: 12, fontSize: 11 }}>
+                {Object.entries(statusConfig).map(([k, v]) => {
+                  const count = p.participants.filter(x => x.status === k).length;
+                  return count > 0 ? (
+                    <div key={k} style={{ color: v.color, fontWeight: 600 }}>{count} {v.label}</div>
+                  ) : null;
+                })}
+              </div>
+            )}
+          </div>
+
+          {/* Aufgaben-Überblick */}
+          {(() => {
+            const tasks = (p.traktanden || []).flatMap(t => (t.items || []).filter(it => it.type === "aufgabe"));
+            if (tasks.length === 0) return null;
+            const offen = tasks.filter(t => t.status !== "erledigt");
+            const erledigt = tasks.filter(t => t.status === "erledigt");
+            return (
+              <div className="card">
+                <div style={{ fontSize: 11, letterSpacing: "0.1em", color: "var(--text4)", marginBottom: 14 }}>
+                  AUFGABEN ({tasks.length})
+                </div>
+                <div style={{ display: "flex", gap: 12, marginBottom: 12, fontSize: 12 }}>
+                  <div style={{ color: "#b5621e", fontWeight: 600 }}>{offen.length} offen</div>
+                  <div style={{ color: "#2d6a4f", fontWeight: 600 }}>{erledigt.length} erledigt</div>
+                </div>
+                <div style={{ height: 6, background: "var(--border)", borderRadius: 3, overflow: "hidden", marginBottom: 14 }}>
+                  <div style={{ width: `${tasks.length > 0 ? (erledigt.length / tasks.length) * 100 : 0}%`, height: "100%", background: "#2d6a4f", borderRadius: 3 }} />
+                </div>
+                {offen.map(t => {
+                  const due = t.dueDateType === "kw" ? (t.dueKW ? `KW ${t.dueKW}/${t.dueYear || new Date().getFullYear()}` : "—") : t.dueDate ? formatDate(t.dueDate) : "—";
+                  const isLate = t.dueDate && t.dueDateType === "datum" && t.dueDate < today;
+                  return (
+                    <div key={t.id} style={{ padding: "6px 0", borderBottom: "1px solid var(--border2)", fontSize: 12 }}>
+                      <div style={{ fontWeight: 500, color: isLate ? "#8a1a1a" : "var(--text)" }}>{t.text || "—"}</div>
+                      <div style={{ fontSize: 10, color: "var(--text4)", marginTop: 2, display: "flex", gap: 8 }}>
+                        {t.responsible && <span>→ {t.responsible}</span>}
+                        <span style={{ color: isLate ? "#8a1a1a" : "var(--text4)" }}>{due}</span>
+                      </div>
+                    </div>
+                  );
+                })}
+              </div>
+            );
+          })()}
+
+          {/* Beschlüsse-Überblick */}
+          {(() => {
+            const beschluesse = (p.traktanden || []).flatMap(t => (t.items || []).filter(it => it.type === "beschluss"));
+            if (beschluesse.length === 0) return null;
+            return (
+              <div className="card">
+                <div style={{ fontSize: 11, letterSpacing: "0.1em", color: "var(--text4)", marginBottom: 14 }}>BESCHLÜSSE ({beschluesse.length})</div>
+                {beschluesse.map(b => (
+                  <div key={b.id} style={{ padding: "6px 0", borderBottom: "1px solid var(--border2)", fontSize: 12 }}>
+                    <div style={{ fontWeight: 500 }}>{b.text || "—"}</div>
+                    <div style={{ fontSize: 10, color: "var(--text4)", marginTop: 2 }}>{b.date ? formatDate(b.date) : "—"}</div>
+                  </div>
+                ))}
+              </div>
+            );
+          })()}
+        </div>
+      </div>
+
+      {/* ── Folgesitzung-Dialog ── */}
+      {showFolge && (() => {
+        // Initialisiere Auswahl beim ersten Öffnen
+        if (!folgeSelection) {
+          const sel = (p.traktanden || []).map(t => ({
+            tId: t.id,
+            tTitle: t.title,
+            tNr: t.nr,
+            include: true,
+            items: (t.items || []).map(it => ({
+              id: it.id,
+              type: it.type,
+              text: it.text,
+              // Aufgaben: offen/in Arbeit → automatisch übernommen; erledigt → nicht
+              include: it.type !== "aufgabe" ? false : (it.status || "offen") !== "erledigt",
+              isErledigt: it.type === "aufgabe" && (it.status || "offen") === "erledigt",
+              original: it,
+            })),
+          }));
+          setFolgeSelection(sel);
+          return null;
+        }
+
+        const toggleTraktandum = (tId) => setFolgeSelection(prev => prev.map(t => t.tId === tId ? { ...t, include: !t.include } : t));
+        const toggleItem = (tId, iId) => setFolgeSelection(prev => prev.map(t => t.tId === tId ? { ...t, items: t.items.map(it => it.id === iId ? { ...it, include: !it.include } : it) } : t));
+
+        const createFolge = () => {
+          const allProts = data.protocols || [];
+          const abbr = data.settings.protokollTypeAbbreviations || {};
+          const typKuerzel = abbr[p.type] || "SO";
+          const folgeDate = p.nextDate || new Date().toISOString().slice(0, 10);
+          const proj = data.projects.find(x => x.id === p.projectId);
+          const seq = nextProtoSeq(allProts);
+          const newNummer = applyProtoNumberFormat(data.settings.protokollNumberFormat || "YYYY-TT-NN", {
+            date: folgeDate, projectNumber: proj?.number || "", seq, typKuerzel,
+          });
+
+          const newTraktanden = folgeSelection
+            .filter(t => t.include)
+            .map(t => ({
+              id: generateId(),
+              nr: t.tNr,
+              title: t.tTitle,
+              items: t.items
+                .filter(it => it.include)
+                .map(it => ({ ...it.original, id: generateId(), status: it.original.type === "aufgabe" ? (it.original.status === "erledigt" ? "erledigt" : it.original.status) : it.original.status })),
+            }));
+
+          if (newTraktanden.length === 0) newTraktanden.push({ id: generateId(), nr: "1", title: "", items: [] });
+
+          const folge = {
+            id: generateId(),
+            title: "",
+            type: p.type,
+            date: p.nextDate || new Date().toISOString().slice(0, 10),
+            time: p.time || "10:00",
+            endTime: p.endTime || "",
+            location: p.location || "",
+            projectId: p.projectId,
+            projectManual: p.projectManual || "",
+            nummer: newNummer,
+            participants: (p.participants || []).map(pt => ({ ...pt, status: "eingeladen" })),
+            traktanden: newTraktanden,
+            vorgaenger: p.id,
+            nextDate: "",
+            verteiler: p.verteiler || "",
+            createdAt: new Date().toISOString(),
+          };
+          const updated = { ...data, protocols: [...allProts, folge] };
+          // Save and navigate to new protokoll
+          if (typeof saveAll === "function") saveAll(updated);
+          setShowFolge(false);
+          setFolgeSelection(null);
+          onSave(p); // save current first
+          setTimeout(() => {
+            window.__openProtokoll = folge.id;
+            window.dispatchEvent(new CustomEvent("openProtokoll", { detail: { id: folge.id } }));
+          }, 100);
+        };
+
+        const typeIcons = { info: "ℹ", beschluss: "✅", aufgabe: "📌" };
+        const typeColors = { info: "#1a4e8a", beschluss: "#2d6a4f", aufgabe: "#b5621e" };
+
+        return (
+          <Modal title="Folgesitzung erstellen" onClose={() => { setShowFolge(false); setFolgeSelection(null); }} onSave={createFolge} saveLabel="Folgesitzung erstellen" wide>
+            <div style={{ fontSize: 13, color: "var(--text3)", marginBottom: 16 }}>
+              Wähle welche Traktanden und Punkte übernommen werden sollen.
+              <span style={{ color: "#2d6a4f", marginLeft: 8, fontSize: 12 }}>✓ Offene Aufgaben sind vorausgewählt</span>
+            </div>
+
+            {folgeSelection.map(t => (
+              <div key={t.tId} style={{ marginBottom: 12, border: "1px solid var(--border)", borderRadius: 6, overflow: "hidden", opacity: t.include ? 1 : 0.5 }}>
+                {/* Traktandum-Header */}
+                <div style={{ display: "flex", alignItems: "center", gap: 10, padding: "10px 14px", background: t.include ? "#fffbe6" : "var(--surface2)", borderBottom: t.items.length > 0 ? "1px solid var(--border2)" : "none", cursor: "pointer" }}
+                  onClick={() => toggleTraktandum(t.tId)}>
+                  <input type="checkbox" checked={t.include} onChange={() => toggleTraktandum(t.tId)} onClick={e => e.stopPropagation()} style={{ width: "auto", flexShrink: 0 }} />
+                  <span style={{ fontSize: 12, fontWeight: 700, color: "#b5861e", marginRight: 4 }}>{t.tNr}</span>
+                  <span style={{ fontSize: 13, fontWeight: 500 }}>{t.tTitle || <span style={{ color: "var(--text4)", fontStyle: "italic" }}>Kein Titel</span>}</span>
+                  <span style={{ fontSize: 11, color: "var(--text4)", marginLeft: "auto" }}>{t.items.length} Punkte</span>
+                </div>
+
+                {/* Items */}
+                {t.items.map(it => (
+                  <div key={it.id} style={{
+                    display: "flex", alignItems: "flex-start", gap: 10, padding: "8px 14px 8px 28px",
+                    borderBottom: "1px solid var(--border2)",
+                    background: it.isErledigt ? (it.include ? "#e8f5ee" : "var(--surface2)") : "transparent",
+                    opacity: (!t.include || !it.include) ? 0.45 : 1,
+                  }}>
+                    <input type="checkbox" checked={it.include && t.include} disabled={!t.include}
+                      onChange={() => toggleItem(t.tId, it.id)} style={{ width: "auto", flexShrink: 0, marginTop: 3 }} />
+                    <span style={{ fontSize: 12, marginTop: 1, flexShrink: 0 }}>{typeIcons[it.type]}</span>
+                    <div style={{ flex: 1 }}>
+                      <span style={{ fontSize: 12 }}>{it.text || <span style={{ color: "var(--text4)", fontStyle: "italic" }}>Leer</span>}</span>
+                      {it.isErledigt && <span style={{ fontSize: 10, color: "#2d6a4f", marginLeft: 8, fontWeight: 600 }}>✓ erledigt</span>}
+                      {it.original?.responsible && <span style={{ fontSize: 10, color: "var(--text4)", marginLeft: 8 }}>→ {it.original.responsible}</span>}
+                    </div>
+                  </div>
+                ))}
+              </div>
+            ))}
+
+            <div style={{ marginTop: 12, padding: "10px 14px", background: "var(--surface2)", borderRadius: 6, fontSize: 12, color: "var(--text4)" }}>
+              Alle Teilnehmer werden übernommen mit Status «Eingeladen». Datum wird auf «Nächste Sitzung» ({p.nextDate ? formatDate(p.nextDate) : "nicht gesetzt"}) gesetzt.
+            </div>
+          </Modal>
+        );
+      })()}
+    </div>
+  );
+}
+
+// ─── LIEFERSCHEINE ──────────────────────────────────────────────────
diff --git a/src/views/Quotes.jsx b/src/views/Quotes.jsx
new file mode 100755
index 0000000..6736cca
--- /dev/null
+++ b/src/views/Quotes.jsx
@@ -0,0 +1,980 @@
+import React, { useState, useEffect, useCallback, useMemo } from "react";
+import { SIA_PHASES, SIA_PHASE_WEIGHTS, STORAGE_KEY } from "../constants.js";
+import { calcSIAHours, calcManualHours, generateId, formatCHF, formatDate, formatHours, roundCHF, applyProjectNumberFormat, migrateLinkedQuotes, deriveQuoteBudget } from "../utils.js";
+import { Header, Modal, FormField, StatusBadge, StatusSelect, useConfirm , DateInput } from "../components/UI.jsx";
+
+export default
+function Quotes({ data, update, setData, saveAll, modal, setModal, setPrintContent, setView, onSelectProject }) {
+  const clients = (data.persons || []).filter(p => p.isAuftraggeber);
+  const roles = data.settings.roles || [];
+  const defaultRolesForPhase = () => {
+    const obj = {};
+    roles.forEach(r => { obj[r.id] = 0; });
+    return obj;
+  };
+  const emptyManualPhases = () => SIA_PHASES.map(p => ({
+    id: p.id, label: p.label, enabled: ["31","32","33","41","51","52","53"].includes(p.id),
+    hoursByRole: defaultRolesForPhase(),
+  }));
+  const emptySIAPhases = () => SIA_PHASE_WEIGHTS.map(ph => ({
+    id: ph.id, label: ph.label,
+    items: ph.items.map(it => ({ ...it, enabled: true, r: 1 })),
+  }));
+  const defaultQuoteRoles = () => (data.settings.roles || []).map(r => ({ ...r }));
+  const emptyForm = {
+    number: "", clientId: "", projectId: "", projectName: "", date: new Date().toISOString().slice(0,10),
+    validUntil: "", mode: "sia", notes: "", status: "entwurf", mwst: true,
+    manualPhases: emptyManualPhases(),
+    quoteRoles: defaultQuoteRoles(),
+    sia: { baukosten: 0, schwierigkeit: 1, stundenansatz: data.settings.defaultHourlyRate || 120, phases: emptySIAPhases() },
+    freeItems: [{ id: generateId(), desc: "", qty: 1, price: 0 }],
+  };
+  const [form, setForm] = useState(emptyForm);
+  const [filter, setFilter] = useState(() => { const cid = window.__navClientId || ""; window.__navClientId = null; return { status: "", search: "", clientId: cid, year: "" }; });
+  const [groupBy, setGroupBy] = useState("date");
+  const [sort, setSort] = useState({ col: "date", dir: -1 });
+  const [compact, setCompact] = useState(true);
+  const { askConfirm, ConfirmModalEl } = useConfirm();
+
+  const toggleSort = (col) => setSort(s => ({ col, dir: s.col === col ? -s.dir : -1 }));
+  const SortTh = ({ col, children, style }) => (
+    <th onClick={() => toggleSort(col)} style={{ cursor: "pointer", userSelect: "none", whiteSpace: "nowrap", ...style }}>
+      {children} <span style={{ color: sort.col === col ? "#b07848" : "#ccc", fontSize: 10 }}>{sort.col === col ? (sort.dir === 1 ? "▲" : "▼") : "⇅"}</span>
+    </th>
+  );
+
+  const nextNum = () => {
+    const y = new Date().getFullYear();
+    const nums = (data.quotes||[]).filter(q => q.number?.startsWith("O"+y+"-")).map(q => parseInt(q.number.split("-")[1]||"0")).filter(Boolean);
+    return "O"+y+"-"+String((nums.length ? Math.max(...nums)+1 : 1)).padStart(3,"0");
+  };
+  const openNew = () => {
+    const vd = new Date(); vd.setDate(vd.getDate()+60);
+    setForm({ ...emptyForm, number: nextNum(), validUntil: vd.toISOString().slice(0,10), manualPhases: emptyManualPhases(), quoteRoles: defaultQuoteRoles(), sia: { ...emptyForm.sia, phases: emptySIAPhases() } });
+    setModal({ type: "quote" });
+  };
+  const openEdit = (q) => {
+    setForm({ ...emptyForm, ...q, manualPhases: q.manualPhases || emptyManualPhases(), quoteRoles: q.quoteRoles || defaultQuoteRoles(), sia: q.sia || emptyForm.sia, freeItems: q.freeItems || [{ id: generateId(), desc: "", qty: 1, price: 0 }] });
+    setModal({ type: "quote", id: q.id });
+  };
+  const del = async (id) => { if (await askConfirm("Offerte löschen?")) update("quotes", (data.quotes||[]).filter(q => q.id !== id)); };
+  const setStatus = (id, st) => update("quotes", (data.quotes||[]).map(q => q.id === id ? { ...q, status: st } : q));
+
+  const createProjectFromQuote = (q) => {
+    const qRoles = q.quoteRoles || data.settings.roles || [];
+    const siaH = q.mode === "sia" ? calcSIAHours(q.sia?.baukosten, q.sia?.schwierigkeit, q.sia?.phases || []) : null;
+    const manH = q.mode === "manual" ? calcManualHours(q.manualPhases || [], qRoles) : null;
+    const budgetHours = q.mode === "sia" ? Math.round((siaH?.total || 0) * 10) / 10
+      : q.mode === "manual" ? Math.round((manH?.totalHours || 0) * 10) / 10 : 0;
+    const enabledPhases = q.mode === "sia"
+      ? (siaH?.phases || []).filter(ph => ph.hours > 0).map(ph => ph.id)
+      : q.mode === "manual"
+      ? (q.manualPhases || []).filter(ph => ph.enabled).map(ph => ph.id)
+      : [];
+    const phasesBudget = q.mode === "sia"
+      ? (siaH?.phases || []).filter(ph => ph.hours > 0).map(ph => ({ id: ph.id, hours: Math.round(ph.hours * 10) / 10 }))
+      : q.mode === "manual"
+      ? (q.manualPhases || []).filter(ph => ph.enabled).map(ph => ({
+          id: ph.id, hours: Math.round(qRoles.reduce((s, r) => s + (ph.hoursByRole?.[r.id] || 0), 0) * 10) / 10
+        }))
+      : [];
+
+    // Projektnummer generieren
+    const fmt = data.settings.projectNumberFormat || "YYYY/NN";
+    const currentYear = new Date().getFullYear();
+    const lastSeq = data.settings.lastProjectYear === currentYear ? (data.settings.lastProjectSeq || 0) : 0;
+    const nextSeq = lastSeq >= 99 ? 1 : lastSeq + 1;
+    const projNumber = applyProjectNumberFormat(fmt, nextSeq);
+
+    const existingProj = data.projects.find(p => p.id === q.projectId);
+    const projName = q.projectName || existingProj?.name || ("Projekt " + q.number);
+    const stundenansatz = q.mode === "sia" ? (q.sia?.stundenansatz || data.settings.defaultHourlyRate)
+      : q.mode === "manual" ? (qRoles[0]?.rate || data.settings.defaultHourlyRate)
+      : data.settings.defaultHourlyRate;
+    const billingType = q.mode === "manual" ? "stundensatz" : "pauschal";
+    const budgetFromQuote = q.mode === "free"
+      ? (q.freeItems || []).reduce((s, it) => s + it.qty * it.price, 0)
+      : q.sub || 0;
+    const newProj = {
+      id: generateId(),
+      number: projNumber,
+      name: projName,
+      clientId: q.clientId || "",
+      category: existingProj?.category || "Direktauftrag",
+      billingType,
+      hourlyRate: stundenansatz,
+      budget: billingType === "pauschal" ? budgetFromQuote : 0,
+      status: "aktiv",
+      description: "",
+      startDate: new Date().toISOString().slice(0, 10),
+      enabledPhases,
+      budgetHours,
+      budgetAmount: budgetFromQuote,
+      phasesBudget,
+      linkedQuotes: [{ quoteId: q.id, role: "Hauptofferte" }],
+      createdAt: new Date().toISOString(),
+    };
+    const newSettings = { ...data.settings, lastProjectSeq: nextSeq, lastProjectYear: currentYear };
+    // Offerte mit neuem Projekt verknüpfen
+    const updatedQuotes = (data.quotes || []).map(x => x.id === q.id ? { ...x, projectId: newProj.id } : x);
+    saveAll({ ...data, projects: [...data.projects, newProj], quotes: updatedQuotes, settings: newSettings });
+    if (setView && onSelectProject) { setView("projects"); onSelectProject(newProj.id); }
+  };
+
+  // Berechnungen
+  const activeRoles = form.quoteRoles || roles;
+  const siaCalc = form.mode === "sia" ? calcSIAHours(form.sia.baukosten, form.sia.schwierigkeit, form.sia.phases) : null;
+  const manCalc = form.mode === "manual" ? calcManualHours(form.manualPhases, activeRoles) : null;
+  const freeSubTotal = form.mode === "free" ? (form.freeItems || []).reduce((s, it) => s + (it.qty * it.price), 0) : 0;
+  const subTotal = form.mode === "sia" ? (siaCalc?.total || 0) * (form.sia.stundenansatz || 0) : form.mode === "manual" ? (manCalc?.totalAmount || 0) : freeSubTotal;
+  const totalHours = form.mode === "sia" ? (siaCalc?.total || 0) : form.mode === "manual" ? (manCalc?.totalHours || 0) : 0;
+  const taxRate = data.settings.mwstRate || 8.1;
+  const tax = form.mwst ? subTotal * (taxRate / 100) : 0;
+  const total = roundCHF(subTotal + tax);
+
+  const save = () => {
+    if (!form.clientId) { alert("Bitte einen Kunden auswählen."); return; }
+    // Projektname oder verknüpftes Projekt
+    if (!form.projectId && !form.projectName?.trim()) {
+      alert("Bitte einen Projektnamen eingeben oder ein Projekt verknüpfen."); return;
+    }
+    // Mindestens eine Position
+    if (form.mode === "free") {
+      const hasItem = (form.freeItems || []).some(it => it.desc?.trim() || it.price > 0);
+      if (!hasItem) { alert("Bitte mindestens eine Position mit Beschreibung oder Betrag erfassen."); return; }
+    } else if (form.mode === "manual") {
+      const hasPhase = (form.manualPhases || []).some(ph => ph.enabled && Object.values(ph.hoursByRole || {}).some(h => h > 0));
+      if (!hasPhase) { alert("Bitte mindestens eine Phase mit Stunden erfassen."); return; }
+    } else if (form.mode === "sia") {
+      if (!form.sia?.baukosten || form.sia.baukosten <= 0) {
+        alert("Bitte Baukosten eingeben (SIA-Modus)."); return;
+      }
+    }
+    const q = { ...form, sub: subTotal, totalHours, tax, total, id: modal?.id || generateId(), createdAt: modal?.id ? form.createdAt : new Date().toISOString() };
+    const quotes = modal?.id ? (data.quotes||[]).map(x => x.id === modal.id ? q : x) : [...(data.quotes||[]), q];
+    update("quotes", quotes);
+    setModal(null);
+  };
+
+  const [projectModal, setProjectModal] = useState(null); // quote object when open
+  const [pmMode, setPmMode] = useState("new");
+  const [pmName, setPmName] = useState("");
+  const [pmAttachId, setPmAttachId] = useState("");
+
+  // Hilfsfunktion: erstellt die eigentliche Rechnung (UNUSED - kept for reference)
+  const createInvoice_UNUSED = (q, mode, value) => {
+    const existing = data.invoices.filter(i => i.quoteId === q.id);
+    const totalInvoiced = existing.reduce((s, i) => s + (i.sub || 0), 0);
+    const totalQuoteSub = q.sub || 0;
+    const remaining = Math.max(0, totalQuoteSub - totalInvoiced);
+
+    // Rechnungsnummer (format-aware)
+    const _fmt = data.settings.invoiceNumberFormat || "YYYY-NNN";
+    const _now = new Date();
+    const _yyyy = String(_now.getFullYear()); const _yy = _yyyy.slice(2);
+    const _pat = _fmt.replace(/[-/\^$*+?.()|[\]{}]/g,"\\$&").replace(/YYYY/g,_yyyy).replace(/YY/g,_yy).replace(/N+/,"(\\d+)");
+    const _rx = new RegExp("^"+_pat+"$");
+    const _nums = data.invoices.map(i => { const m=(i.number||"").match(_rx); return m?parseInt(m[1]):null; }).filter(n=>n!==null);
+    const _seq = _nums.length ? Math.max(..._nums)+1 : 1;
+    const _pad = (_fmt.match(/N+/)||["NNN"])[0].length;
+    const invNum = _fmt.replace(/YYYY/g,_yyyy).replace(/YY/g,_yy).replace(/N+/,String(_seq).padStart(_pad,"0"));
+
+    let items = [];
+    let invoiceKind = "voll";
+
+    if (mode === "voll") {
+      if (existing.length > 0) {
+        // Restbetrag als Schlussrechnung
+        invoiceKind = "schluss";
+        items = [{
+          id: generateId(),
+          desc: `Schlussrechnung gemäss Offerte ${q.number}`,
+          qty: 1, price: Math.round(remaining * 100) / 100, discount: 0,
+        }];
+      } else {
+        invoiceKind = "voll";
+        if (q.mode === "sia" && q.sia) {
+          const c = calcSIAHours(q.sia.baukosten, q.sia.schwierigkeit, q.sia.phases);
+          items = c.phases.filter(ph => ph.hours > 0).map(ph => ({
+            id: generateId(), desc: "Phase "+ph.id+" "+ph.label,
+            qty: Math.round(ph.hours*100)/100, price: q.sia.stundenansatz, discount: 0,
+          }));
+        } else if (q.mode === "manual") {
+          const c = calcManualHours(q.manualPhases, q.quoteRoles || roles);
+          items = c.phases.filter(ph => ph.totalHours > 0).map(ph => ({
+            id: generateId(), desc: ph.label,
+            qty: Math.round(ph.totalHours*100)/100,
+            price: ph.totalHours > 0 ? Math.round(ph.totalAmount/ph.totalHours*100)/100 : 0, discount: 0,
+          }));
+        } else if (q.mode === "free") {
+          items = (q.freeItems || []).filter(it => it.desc || it.price).map(it => ({
+            id: generateId(), desc: it.desc, qty: it.qty, price: it.price, discount: 0,
+          }));
+        }
+      }
+    } else if (mode === "akonto-percent") {
+      invoiceKind = "akonto";
+      const akontoBetrag = totalQuoteSub * (value / 100);
+      items = [{
+        id: generateId(),
+        desc: `Akontorechnung gemäss Offerte ${q.number} (${value.toFixed(1)}% des Gesamthonorars)`,
+        qty: 1, price: Math.round(akontoBetrag * 100) / 100, discount: 0,
+      }];
+    } else if (mode === "akonto-amount") {
+      invoiceKind = "akonto";
+      const pct = totalQuoteSub > 0 ? (value / totalQuoteSub) * 100 : 0;
+      items = [{
+        id: generateId(),
+        desc: `Akontorechnung gemäss Offerte ${q.number}${pct > 0 ? ` (${pct.toFixed(1)}% des Gesamthonorars)` : ""}`,
+        qty: 1, price: value, discount: 0,
+      }];
+    }
+
+    if (items.length === 0) { alert("Keine Positionen — Offerte ist leer oder fehlerhaft."); return; }
+
+    const due = new Date(); due.setDate(due.getDate()+30);
+    const sub = items.reduce((s,it) => s + it.qty*it.price, 0);
+    const t = q.mwst ? sub*(taxRate/100) : 0;
+    let notes = `Gemäss Offerte ${q.number}. Zahlbar innert 30 Tagen netto.`;
+    if (invoiceKind === "schluss" && existing.length > 0) {
+      const akontoListe = existing.map(i => `  – ${i.number}: CHF ${(i.sub||0).toFixed(2)}`).join("\n");
+      notes = `Schlussrechnung gemäss Offerte ${q.number}.\nBisherige Akontorechnungen:\n${akontoListe}\n\nZahlbar innert 30 Tagen netto.`;
+    }
+
+    const newInv = {
+      id: generateId(), number: invNum, clientId: q.clientId, projectId: q.projectId, quoteId: q.id,
+      invoiceKind,
+      date: new Date().toISOString().slice(0,10), dueDate: due.toISOString().slice(0,10),
+      items, mwst: q.mwst, notes,
+      status: "entwurf", discountType: "none", discountValue: 0, discountLabel: "Rabatt",
+      sub, subAfterDisc: sub, globalDisc: 0, tax: t, total: roundCHF(sub+t), createdAt: new Date().toISOString(),
+    };
+
+    // Beide Updates atomar
+    setData(prev => {
+      const updatedInvoices = [...prev.invoices, newInv];
+      const updatedQuotes = (prev.quotes || []).map(x => x.id === q.id ? {
+        ...x, status: mode === "schluss" ? "angenommen" : x.status,
+      } : x);
+      const next = { ...prev, invoices: updatedInvoices, quotes: updatedQuotes };
+      try { localStorage.setItem(STORAGE_KEY, JSON.stringify(next)); } catch {}
+      return next;
+    });
+
+  };
+
+  const convertToInvoice = (q) => {
+    setView("invoices");
+    setModal({ type: "newInvoice", quoteId: q.id });
+  };
+
+  // SIA-Editor Helpers
+  const toggleSIAItem = (phId, idx) => {
+    setForm(f => ({ ...f, sia: { ...f.sia, phases: f.sia.phases.map(p => p.id !== phId ? p : { ...p, items: p.items.map((it,i) => i === idx ? { ...it, enabled: !it.enabled } : it) }) } }));
+  };
+  const updateSIAItem = (phId, idx, changes) => {
+    setForm(f => ({ ...f, sia: { ...f.sia, phases: f.sia.phases.map(p => p.id !== phId ? p : { ...p, items: p.items.map((it,i) => i === idx ? { ...it, ...changes } : it) }) } }));
+  };
+  const updateManualHours = (phId, roleId, val) => {
+    setForm(f => ({ ...f, manualPhases: f.manualPhases.map(p => p.id !== phId ? p : { ...p, hoursByRole: { ...p.hoursByRole, [roleId]: Math.max(0,+val||0) } }) }));
+  };
+  const toggleManualPhase = (phId, enabled) => {
+    setForm(f => ({ ...f, manualPhases: f.manualPhases.map(p => p.id !== phId ? p : { ...p, enabled }) }));
+  };
+
+  const filtered = [...(data.quotes||[])].filter(q => {
+    if (filter.status && q.status !== filter.status) return false;
+    if (filter.clientId && q.clientId !== filter.clientId) return false;
+    if (filter.year && !(q.date||"").startsWith(filter.year)) return false;
+    if (filter.search) {
+      const s = filter.search.toLowerCase();
+      const cl = clients.find(c => c.id === q.clientId);
+      if (![q.number,cl?.name,cl?.company,q.notes,q.projectName].filter(Boolean).join(" ").toLowerCase().includes(s)) return false;
+    }
+    return true;
+  }).sort((a, b) => {
+    let va, vb;
+    if (sort.col === "number") { va = a.number || ""; vb = b.number || ""; }
+    else if (sort.col === "date") { va = a.date || ""; vb = b.date || ""; }
+    else if (sort.col === "validUntil") { va = a.validUntil || ""; vb = b.validUntil || ""; }
+    else if (sort.col === "client") { va = clients.find(c => c.id === a.clientId)?.name || ""; vb = clients.find(c => c.id === b.clientId)?.name || ""; }
+    else if (sort.col === "total") { va = a.total || 0; vb = b.total || 0; }
+    else if (sort.col === "status") { va = a.status || ""; vb = b.status || ""; }
+    else { va = a.date || ""; vb = b.date || ""; }
+    return typeof va === "number" ? (va - vb) * sort.dir : va.localeCompare(vb) * sort.dir;
+  });
+
+  const availableQuoteYears = Array.from(new Set((data.quotes||[]).map(q => (q.date||"").slice(0,4)).filter(Boolean))).sort().reverse();
+
+  // Gruppieren
+  const groupedQuotes = (() => {
+    if (groupBy === "date") {
+      const months = {};
+      filtered.forEach(q => {
+        const key = (q.date || "").slice(0, 7);
+        if (!months[key]) months[key] = [];
+        months[key].push(q);
+      });
+      return Object.entries(months).sort((a, b) => b[0].localeCompare(a[0])).map(([key, items]) => ({
+        key, label: key ? new Date(key + "-01").toLocaleDateString("de-CH", { month: "long", year: "numeric" }) : "Ohne Datum", items,
+      }));
+    }
+    if (groupBy === "client") {
+      const clients = {};
+      filtered.forEach(q => {
+        const cl = clients.find(c => c.id === q.clientId);
+        const key = q.clientId || "__none__";
+        const label = cl?.name || "Kein Kunde";
+        if (!clients[key]) clients[key] = { label, items: [] };
+        clients[key].items.push(q);
+      });
+      return Object.entries(clients).sort((a, b) => a[1].label.localeCompare(b[1].label)).map(([key, val]) => ({ key, label: val.label, items: val.items }));
+    }
+    if (groupBy === "status") {
+      const statuses = {};
+      filtered.forEach(q => {
+        const key = q.status || "unbekannt";
+        if (!statuses[key]) statuses[key] = [];
+        statuses[key].push(q);
+      });
+      return Object.entries(statuses).sort((a, b) => a[0].localeCompare(b[0])).map(([key, items]) => ({ key, label: key.charAt(0).toUpperCase() + key.slice(1), items }));
+    }
+    return [{ key: "all", label: "", items: filtered }];
+  })();
+
+  return (
+    <div>
+      {ConfirmModalEl}
+      <Header title="Offerten" action={<button className="btn btn-primary" onClick={openNew}>+ Neue Offerte</button>} />
+      <div className="filter-bar">
+        <input className="pill" placeholder="Suche…" value={filter.search} onChange={e => setFilter({...filter, search: e.target.value})} style={{ minWidth: 180 }} />
+        <select className="pill" value={filter.status} onChange={e => setFilter({...filter, status: e.target.value})}>
+          <option value="">Alle Status</option>
+          {["entwurf","gesendet","angenommen","abgelehnt","abgelaufen"].map(s => <option key={s}>{s}</option>)}
+        </select>
+        <select className="pill" value={filter.clientId || ""} onChange={e => setFilter({...filter, clientId: e.target.value})}>
+          <option value="">Alle Kunden</option>
+          {clients.map(c => <option key={c.id} value={c.id}>{c.name}</option>)}
+        </select>
+        <select className="pill" value={filter.year || ""} onChange={e => setFilter({...filter, year: e.target.value})}>
+          <option value="">Alle Jahre</option>
+          {availableQuoteYears.map(y => <option key={y} value={y}>{y}</option>)}
+        </select>
+        <div style={{ marginLeft: "auto", fontSize: 12, color: "var(--text4)" }}>{filtered.length} Offerte{filtered.length !== 1 ? "n" : ""} · {formatCHF(filtered.reduce((s,q)=>s+(q.total||0),0))}</div>
+      </div>
+
+      <div className="filter-bar">
+        <span className="filter-label">GRUPPIEREN:</span>
+        {[{ id: "none", label: "Keine" }, { id: "date", label: "Monat" }, { id: "client", label: "Kunde" }, { id: "status", label: "Status" }].map(g => (
+          <button key={g.id} className={`pill${groupBy === g.id ? " active" : ""}`} onClick={() => setGroupBy(g.id)}>{g.label}</button>
+        ))}
+      </div>
+      <div className="card" style={{ padding: 0 }}>
+        <table>
+          <thead><tr><SortTh col="number" style={{ width: 100 }}>Nr.</SortTh><SortTh col="client">Kunde</SortTh><th className={compact ? "hide-compact" : ""}>Modus</th><SortTh col="date" className={compact ? "hide-compact" : ""}>Datum</SortTh><SortTh col="validUntil" className={compact ? "hide-compact" : ""}>Gültig bis</SortTh><SortTh col="total">Honorar</SortTh><SortTh col="status">Status</SortTh><th></th></tr></thead>
+          <tbody>
+            {filtered.length === 0 && <tr><td colSpan={8} style={{ textAlign: "center", color: "#aaa", padding: 32, fontSize: 13 }}>{(data.quotes||[]).length === 0 ? "Noch keine Offerten" : "Keine Treffer"}</td></tr>}
+            {groupedQuotes.map(group => (
+              <React.Fragment key={group.key}>
+                {groupBy !== "none" && group.label && (
+                  <tr>
+                    <td colSpan={8} style={{ background: "#f5f0e8", padding: "6px 12px", fontSize: 10, letterSpacing: "0.1em", color: "#888", fontWeight: 600, textTransform: "uppercase", borderTop: "1px solid #e0dbd4" }}>
+                      {group.label}
+                      <span style={{ float: "right", fontWeight: 400, letterSpacing: 0, textTransform: "none", fontSize: 11, color: "#aaa" }}>
+                        {group.items.length} · {formatCHF(group.items.reduce((s, q) => s + (q.total || 0), 0))}
+                      </span>
+                    </td>
+                  </tr>
+                )}
+            {group.items.map(q => {
+              const cl = clients.find(c => c.id === q.clientId);
+              const qInvoiced = q.status === "angenommen"
+                ? (data.invoices || []).filter(i => i.quoteId === q.id).reduce((s, i) => s + (i.sub || 0), 0)
+                : 0;
+              return (
+                <tr key={q.id}>
+                  <td><strong>{q.number}</strong>{q.projectName && <div style={{ fontSize: 11, color: "#888", marginTop: 1 }}>{q.projectName}</div>}</td>
+                  <td>{cl?.name || "—"}</td>
+                  <td style={{ fontSize: 11, color: "#888" }}>{q.mode === "sia" ? "SIA 102" : q.mode === "free" ? "Freie Positionen" : "Aufwand"}</td>
+                  <td>{formatDate(q.date)}</td>
+                  <td>{formatDate(q.validUntil)}</td>
+                  <td>
+                    <strong>{formatCHF(q.total)}</strong>
+                    {qInvoiced > 0 && <div style={{ fontSize: 10, color: "#2d6a4f", marginTop: 1 }}>verrechnet {formatCHF(qInvoiced)}</div>}
+                  </td>
+                  <td>
+                    <StatusSelect value={q.status} options={["entwurf","gesendet","angenommen","abgelehnt","abgelaufen"]} onChange={v => setStatus(q.id, v)} />
+                  </td>
+                  <td style={{ textAlign: "right", whiteSpace: "nowrap" }}>
+                    <button className="btn btn-ghost" style={{ marginRight: 6, padding: "5px 10px", fontSize: 12 }} onClick={() => setPrintContent({ type: "quote", quote: q, client: cl, settings: data.settings })}>PDF</button>
+                    {!q.convertedToInvoiceId && <button className="btn btn-ghost" style={{ marginRight: 6, padding: "5px 10px", fontSize: 12, borderColor: "#2d6a4f", color: "#2d6a4f" }} onClick={() => convertToInvoice(q)}>→ Rechnung</button>}
+                    {(q.mode === "sia" || q.mode === "manual" || q.mode === "free") && (() => {
+                      const linkedProj = data.projects.find(p => migrateLinkedQuotes(p).some(lq => lq.quoteId === q.id));
+                      return linkedProj
+                        ? <button className="btn btn-ghost" style={{ marginRight: 6, padding: "5px 10px", fontSize: 12, borderColor: "#1a4e8a", color: "#1a4e8a" }} onClick={() => { const suggested = q.projectName || linkedProj.name || ("Projekt " + q.number); setPmMode("new"); setPmName(suggested); setPmAttachId(linkedProj.id); setProjectModal(q); }}>⬡ {linkedProj.number || "Projekt"}</button>
+                        : <button className="btn btn-ghost" style={{ marginRight: 6, padding: "5px 10px", fontSize: 12, borderColor: "#7a6a00", color: "#7a6a00" }} onClick={() => { const suggested = q.projectName || (data.projects.find(p => p.id === q.projectId)?.name) || ("Projekt " + q.number); setPmMode("new"); setPmName(suggested); setPmAttachId(q.projectId || ""); setProjectModal(q); }}>→ Projekt</button>;
+                    })()}
+                    <button className="btn btn-ghost" style={{ marginRight: 6, padding: "5px 10px", fontSize: 12 }} onClick={() => openEdit(q)}><span className="material-icons" style={{ fontSize: 16 }}>edit</span></button>
+                    <button className="btn btn-danger" style={{ padding: "5px 10px", fontSize: 12 }} onClick={() => del(q.id)}><span className="material-icons" style={{ fontSize: 16 }}>close</span></button>
+                  </td>
+                </tr>
+              );
+            })}
+              </React.Fragment>
+            ))}
+          </tbody>
+        </table>
+      </div>
+      {projectModal && (() => {
+        const q = projectModal;
+        const qRoles = q.quoteRoles || data.settings.roles || [];
+        const siaH = q.mode === "sia" ? calcSIAHours(q.sia?.baukosten, q.sia?.schwierigkeit, q.sia?.phases || []) : null;
+        const manH = q.mode === "manual" ? calcManualHours(q.manualPhases || [], qRoles) : null;
+        const budgetH = q.mode === "sia" ? Math.round((siaH?.total||0)*10)/10 : q.mode === "manual" ? Math.round((manH?.totalHours||0)*10)/10 : 0;
+        const stundenansatz = q.mode === "sia" ? (q.sia?.stundenansatz || data.settings.defaultHourlyRate) : data.settings.defaultHourlyRate;
+        const alreadyLinkedProject = data.projects.find(p => migrateLinkedQuotes(p).some(lq => lq.quoteId === q.id));
+
+        // Offerte entkoppeln
+        const doUnlink = () => {
+          const updatedProjects = data.projects.map(p => {
+            const linked = migrateLinkedQuotes(p).filter(lq => lq.quoteId !== q.id);
+            if (linked.length === migrateLinkedQuotes(p).length) return p;
+            const derived = deriveQuoteBudget(linked, data.quotes || [], data.settings.roles || []);
+            return { ...p, linkedQuotes: linked, budgetHours: derived.budgetHours, budgetAmount: derived.budgetAmount, phasesBudget: derived.phasesBudget };
+          });
+          const updatedQuotes = (data.quotes || []).map(x => x.id === q.id ? { ...x, projectId: null } : x);
+          saveAll({ ...data, projects: updatedProjects, quotes: updatedQuotes });
+          setProjectModal(null);
+        };
+
+        const doCreate = () => {
+          if (pmMode === "new") {
+            createProjectFromQuote({ ...q, projectName: pmName });
+          } else {
+            if (!pmAttachId) return;
+            const proj = data.projects.find(p => p.id === pmAttachId);
+            if (!proj) return;
+            const existingLinked = migrateLinkedQuotes(proj);
+            if (existingLinked.some(lq => lq.quoteId === q.id)) { setProjectModal(null); return; }
+            const newLinked = [...existingLinked, { quoteId: q.id, role: existingLinked.length === 0 ? "Hauptofferte" : "Nachtrag" }];
+            const derived = deriveQuoteBudget(newLinked, data.quotes || [], data.settings.roles || []);
+            const updatedProjects = data.projects.map(p => p.id === pmAttachId ? {
+              ...p, linkedQuotes: newLinked, budgetHours: derived.budgetHours,
+              budgetAmount: derived.budgetAmount, phasesBudget: derived.phasesBudget,
+              enabledPhases: [...new Set([...(p.enabledPhases || []), ...derived.enabledPhases])],
+              hourlyRate: p.hourlyRate || stundenansatz,
+            } : p);
+            const updatedQuotes = (data.quotes || []).map(x => x.id === q.id ? { ...x, projectId: pmAttachId } : x);
+            saveAll({ ...data, projects: updatedProjects, quotes: updatedQuotes });
+            if (setView && onSelectProject) { setView("projects"); onSelectProject(pmAttachId); }
+          }
+          setProjectModal(null);
+        };
+
+        // Wenn Offerte bereits verknüpft: Entkoppeln-Dialog zeigen
+        if (alreadyLinkedProject) {
+          return (
+            <div className="modal-overlay" onClick={e => e.target === e.currentTarget && setProjectModal(null)}>
+              <div className="modal">
+                <h2 style={{ fontFamily: "'Playfair Display', serif", fontWeight: 400, marginBottom: 16, fontSize: 22 }}>Offerte verknüpft</h2>
+                <div style={{ marginBottom: 20, padding: 12, background: "#faf8f5", borderRadius: 6, border: "1px solid #ece8e2", fontSize: 12 }}>
+                  <div style={{ fontSize: 10, letterSpacing: "0.08em", color: "#888", marginBottom: 6 }}>OFFERTE</div>
+                  <div><strong>{q.number}</strong>{q.projectName ? " · " + q.projectName : ""}</div>
+                  <div style={{ marginTop: 8, fontSize: 10, letterSpacing: "0.08em", color: "#888", marginBottom: 4 }}>VERKNÜPFTES PROJEKT</div>
+                  <div><strong>{alreadyLinkedProject.number ? alreadyLinkedProject.number + " · " : ""}{alreadyLinkedProject.name}</strong></div>
+                </div>
+                <div style={{ display: "flex", flexDirection: "column", gap: 10, marginBottom: 20 }}>
+                  <button className="btn btn-primary" onClick={() => { setView("projects"); onSelectProject(alreadyLinkedProject.id); setProjectModal(null); }}
+                    style={{ padding: "12px 18px", textAlign: "left", display: "flex", justifyContent: "space-between", alignItems: "center" }}>
+                    <span>Zum Projekt navigieren</span>
+                    <span style={{ opacity: 0.7 }}>→</span>
+                  </button>
+                  <button className="btn btn-ghost" onClick={doUnlink}
+                    style={{ padding: "12px 18px", textAlign: "left", display: "flex", justifyContent: "space-between", alignItems: "center", borderColor: "#c0a0a0", color: "#8a1a1a" }}>
+                    <span>Offerte entkoppeln</span>
+                    <span style={{ opacity: 0.7, fontSize: 11 }}>Verknüpfung aufheben</span>
+                  </button>
+                </div>
+                <div style={{ display: "flex", justifyContent: "flex-end" }}>
+                  <button className="btn btn-ghost" onClick={() => setProjectModal(null)}>Abbrechen</button>
+                </div>
+              </div>
+            </div>
+          );
+        }
+
+        return (
+          <Modal title="Projekt aus Offerte" onClose={() => setProjectModal(null)} onSave={doCreate} saveLabel={pmMode === "new" ? "Neues Projekt erstellen" : "Zu Projekt hinzufügen"}>
+            <div style={{ marginBottom: 16, padding: 12, background: "#faf8f5", borderRadius: 6, border: "1px solid #ece8e2", fontSize: 12 }}>
+              <div style={{ display: "flex", gap: 16, marginBottom: 4 }}>
+                <span><strong>{q.number}</strong> · {q.mode === "sia" ? "SIA 102" : q.mode === "manual" ? "Aufwand" : "Pauschal"}</span>
+                {budgetH > 0 && <span style={{ color: "#888" }}>{budgetH}h Soll-Budget</span>}
+                <span style={{ color: "#888" }}>CHF {stundenansatz}/h</span>
+                <span style={{ fontWeight: 600 }}>{formatCHF(q.total)}</span>
+              </div>
+              {q.projectName && <div style={{ color: "#555" }}>Auftragsbezeichnung: <strong>{q.projectName}</strong></div>}
+            </div>
+            <div style={{ display: "flex", gap: 0, marginBottom: 16, borderBottom: "1.5px solid #e0dbd4" }}>
+              {[{ id: "new", label: "Neues Projekt erstellen" }, { id: "attach", label: "Zu bestehendem Projekt" }].map(tab => (
+                <button key={tab.id} onClick={() => setPmMode(tab.id)} style={{
+                  padding: "9px 18px", background: "transparent", border: "none", fontFamily: "inherit",
+                  borderBottom: pmMode === tab.id ? "2px solid #1a1a18" : "2px solid transparent",
+                  marginBottom: -1.5, color: pmMode === tab.id ? "#1a1a18" : "#888",
+                  fontSize: 12, fontWeight: 500, cursor: "pointer",
+                }}>{tab.label}</button>
+              ))}
+            </div>
+            {pmMode === "new" ? (
+              <div>
+                <FormField label="Projektname">
+                  <input value={pmName} onChange={e => setPmName(e.target.value)} autoFocus placeholder="z.B. Umbau EFH Muster" />
+                </FormField>
+                <div style={{ fontSize: 11, color: "#888", marginTop: 4 }}>
+                  Neues Projekt wird erstellt mit: Stundenbudget {budgetH}h, Stundensatz CHF {stundenansatz}/h, SIA-Phasen aus der Offerte.
+                </div>
+              </div>
+            ) : (
+              <div>
+                <FormField label="Projekt auswählen">
+                  <select value={pmAttachId} onChange={e => setPmAttachId(e.target.value)} autoFocus>
+                    <option value="">— Projekt wählen —</option>
+                    {data.projects.map(p => (
+                      <option key={p.id} value={p.id}>{p.number ? `${p.number} · ` : ""}{p.name}</option>
+                    ))}
+                  </select>
+                </FormField>
+                {pmAttachId && (() => {
+                  const proj = data.projects.find(p => p.id === pmAttachId);
+                  const existing = migrateLinkedQuotes(proj);
+                  const alreadyLinked = existing.some(lq => lq.quoteId === q.id);
+                  return (
+                    <div style={{ fontSize: 11, color: alreadyLinked ? "#b5621e" : "#888", marginTop: 4 }}>
+                      {alreadyLinked
+                        ? "⚠ Diese Offerte ist bereits mit diesem Projekt verknüpft."
+                        : `Offerte wird als ${existing.length === 0 ? "Hauptofferte" : "Nachtrag"} hinzugefügt. Stundenbudget: ${proj.budgetHours || 0}h + ${budgetH}h = ${(proj.budgetHours || 0) + budgetH}h`}
+                    </div>
+                  );
+                })()}
+              </div>
+            )}
+          </Modal>
+        );
+      })()}
+      {modal?.type === "quote" && (
+        <Modal title={modal.id ? "Offerte bearbeiten" : "Neue Offerte"} onClose={() => setModal(null)} onSave={save} wide>
+          <div className="form-row">
+            <FormField label="Nr."><input value={form.number} onChange={e => setForm({...form, number: e.target.value})} /></FormField>
+            <FormField label="Datum"><DateInput value={form.date} onChange={e => setForm({...form, date: e.target.value})} /></FormField>
+            <FormField label="Gültig bis"><DateInput value={form.validUntil} onChange={e => setForm({...form, validUntil: e.target.value})} /></FormField>
+          </div>
+          <div className="form-row">
+            <FormField label="Kunde *">
+              <select value={form.clientId} onChange={e => setForm({...form, clientId: e.target.value})} style={!form.clientId ? { borderColor: "#b5621e" } : {}}>
+                <option value="">— Kunde wählen (Pflichtfeld) —</option>
+                {clients.map(c => <option key={c.id} value={c.id}>{c.name}</option>)}
+              </select>
+            </FormField>
+            <FormField label="Auftragsbezeichnung / Projektname">
+              <input value={form.projectName || ""} onChange={e => setForm({...form, projectName: e.target.value})} placeholder="z.B. Umbau EFH Muster, Neubau MFH…" />
+            </FormField>
+            <FormField label="Projekt verknüpfen (optional)">
+              <select value={form.projectId} onChange={e => setForm({...form, projectId: e.target.value, projectName: e.target.value ? (data.projects.find(p => p.id === e.target.value)?.name || form.projectName) : form.projectName})}>
+                <option value="">— kein Projekt —</option>
+                {data.projects.map(p => <option key={p.id} value={p.id}>{p.number ? `${p.number} · ` : ""}{p.name}</option>)}
+              </select>
+            </FormField>
+          </div>
+          {/* Tab-Auswahl */}
+          <div style={{ display: "flex", gap: 0, marginBottom: 16, borderBottom: "1.5px solid #e0dbd4" }}>
+            {[{ id: "sia", label: "SIA 102 (Baukosten)" }, { id: "manual", label: "Aufwandschätzung (Stunden)" }, { id: "free", label: "Freie Positionen" }].map(tab => (
+              <button key={tab.id} onClick={() => setForm({...form, mode: tab.id})} style={{
+                padding: "10px 20px", background: "transparent", border: "none", fontFamily: "inherit",
+                borderBottom: form.mode === tab.id ? "2px solid #1a1a18" : "2px solid transparent",
+                marginBottom: -1.5, color: form.mode === tab.id ? "#1a1a18" : "#888",
+                fontSize: 12, fontWeight: 500, cursor: "pointer",
+              }}>{tab.label}</button>
+            ))}
+          </div>
+          {/* Freier Modus */}
+          {form.mode === "free" && (
+            <div style={{ marginBottom: 16 }}>
+              <div style={{ display: "flex", justifyContent: "space-between", alignItems: "center", marginBottom: 8 }}>
+                <div style={{ fontSize: 11, color: "#888" }}>Positionen frei definieren</div>
+                <button className="btn btn-ghost" style={{ padding: "4px 12px", fontSize: 11 }} onClick={() => setForm({...form, freeItems: [...(form.freeItems||[]), { id: generateId(), desc: "", qty: 1, price: 0 }]})}>+ Position</button>
+              </div>
+              <div style={{ borderRadius: 6, border: "1px solid #ece8e2", overflow: "hidden" }}>
+                <table style={{ fontSize: 12 }}>
+                  <thead>
+                    <tr style={{ background: "#f5f0e8" }}>
+                      <th style={{ padding: "8px 10px" }}>Beschreibung</th>
+                      <th style={{ padding: "8px 6px", textAlign: "right", width: 75 }}>Menge</th>
+                      <th style={{ padding: "8px 6px", textAlign: "right", width: 100 }}>Preis CHF</th>
+                      <th style={{ padding: "8px 6px", textAlign: "right", width: 100 }}>Total</th>
+                      <th style={{ width: 36 }}></th>
+                    </tr>
+                  </thead>
+                  <tbody>
+                    {(form.freeItems || []).map((it, idx) => (
+                      <tr key={it.id} style={{ borderTop: "1px solid #ece8e2" }}>
+                        <td style={{ padding: "4px 6px" }}>
+                          <input value={it.desc} onChange={e => setForm({...form, freeItems: form.freeItems.map((x,i) => i===idx ? {...x, desc: e.target.value} : x)})} placeholder="Leistungsbeschreibung" style={{ border: "1px solid #e0dbd4", height: 28, fontSize: 12 }} />
+                        </td>
+                        <td style={{ padding: "4px 4px" }}>
+                          <input type="number" step="0.25" min={0} value={it.qty} onChange={e => setForm({...form, freeItems: form.freeItems.map((x,i) => i===idx ? {...x, qty: +e.target.value} : x)})} style={{ border: "1px solid #e0dbd4", height: 28, fontSize: 12, textAlign: "right" }} />
+                        </td>
+                        <td style={{ padding: "4px 4px" }}>
+                          <input type="number" step="0.05" min={0} value={it.price} onChange={e => setForm({...form, freeItems: form.freeItems.map((x,i) => i===idx ? {...x, price: +e.target.value} : x)})} style={{ border: "1px solid #e0dbd4", height: 28, fontSize: 12, textAlign: "right" }} />
+                        </td>
+                        <td style={{ padding: "4px 6px", textAlign: "right", color: "#888" }}>{formatCHF(it.qty * it.price)}</td>
+                        <td style={{ padding: "4px 4px", textAlign: "center" }}>
+                          <button className="btn btn-danger" style={{ padding: "0 7px", height: 26, fontSize: 11 }} onClick={() => setForm({...form, freeItems: form.freeItems.filter((_,i) => i!==idx)})}><span className="material-icons" style={{ fontSize: 16 }}>close</span></button>
+                        </td>
+                      </tr>
+                    ))}
+                  </tbody>
+                </table>
+              </div>
+            </div>
+          )}
+          {/* SIA-Modus */}
+          {form.mode === "sia" && siaCalc && (
+            <div>
+              <div style={{ display: "grid", gridTemplateColumns: "repeat(3, 1fr)", gap: 10, marginBottom: 14, padding: 14, background: "#fff8ed", borderRadius: 6, border: "1px solid #f0e4c4" }}>
+                <FormField label="Baukosten (CHF)">
+                  <input type="number" value={form.sia.baukosten} onChange={e => setForm({...form, sia: {...form.sia, baukosten: +e.target.value}})} style={{ background: "#fff" }} />
+                </FormField>
+                <FormField label="Schwierigkeitsgrad n">
+                  <input type="number" step="0.1" value={form.sia.schwierigkeit} onChange={e => setForm({...form, sia: {...form.sia, schwierigkeit: +e.target.value}})} style={{ background: "#fff" }} />
+                </FormField>
+                <FormField label="Stundenansatz CHF/h">
+                  <input type="number" value={form.sia.stundenansatz} onChange={e => setForm({...form, sia: {...form.sia, stundenansatz: +e.target.value}})} style={{ background: "#fff" }} />
+                </FormField>
+              </div>
+              <div style={{ display: "flex", gap: 16, marginBottom: 12, padding: "6px 14px", background: "#faf8f5", borderRadius: 6, fontSize: 11, color: "#666" }}>
+                <div>∛B = <strong style={{ color: "#1a1a18" }}>{siaCalc.cbrtB?.toFixed(1)}</strong></div>
+                <div>p = <strong style={{ color: "#1a1a18" }}>{siaCalc.p}</strong></div>
+                <div style={{ marginLeft: "auto" }}>Total <strong style={{ color: "#1a1a18" }}>{formatHours(Math.round(siaCalc.total * 60))}</strong> · <strong style={{ color: "#1a1a18" }}>{formatCHF(siaCalc.total * (form.sia.stundenansatz||0))}</strong></div>
+              </div>
+              <div style={{ marginBottom: 16, borderRadius: 6, border: "1px solid #ece8e2", overflow: "hidden" }}>
+                <table style={{ fontSize: 12 }}>
+                  <thead>
+                    <tr style={{ background: "#f5f0e8" }}>
+                      <th style={{ padding: "8px", width: 30 }}></th>
+                      <th style={{ padding: "8px" }}>Teilleistung</th>
+                      <th style={{ padding: "8px", textAlign: "right", width: 55 }}>q %</th>
+                      <th style={{ padding: "8px", textAlign: "right", width: 55 }}>r</th>
+                      <th style={{ padding: "8px", textAlign: "right", width: 75 }}>Stunden</th>
+                      <th style={{ padding: "8px", textAlign: "right", width: 95 }}>Honorar</th>
+                    </tr>
+                  </thead>
+                  <tbody>
+                    {siaCalc.phases.map(ph => (
+                      <React.Fragment key={ph.id}>
+                        <tr style={{ background: "#faf8f5" }}>
+                          <td colSpan={4} style={{ padding: "6px 8px", fontSize: 11, fontWeight: 600, color: "#555" }}>PHASE {ph.id} · {ph.label}</td>
+                          <td style={{ padding: "6px 8px", textAlign: "right", fontWeight: 600, fontSize: 11 }}>{formatHours(Math.round(ph.hours*60))}</td>
+                          <td style={{ padding: "6px 8px", textAlign: "right", fontWeight: 600, fontSize: 11 }}>{formatCHF(ph.hours*(form.sia.stundenansatz||0))}</td>
+                        </tr>
+                        {ph.items.map((it, idx) => (
+                          <tr key={idx} style={{ opacity: it.enabled !== false ? 1 : 0.35 }}>
+                            <td style={{ padding: "4px 8px" }}>
+                              <input type="checkbox" checked={it.enabled !== false} onChange={() => toggleSIAItem(ph.id, idx)} style={{ width: "auto" }} />
+                            </td>
+                            <td style={{ padding: "4px 8px" }}>{it.label}</td>
+                            <td style={{ padding: "4px 8px" }}>
+                              <input type="number" step="0.5" value={it.pct} onChange={e => updateSIAItem(ph.id, idx, { pct: +e.target.value })} disabled={it.enabled === false} style={{ width: 48, height: 26, fontSize: 11, textAlign: "right" }} />
+                            </td>
+                            <td style={{ padding: "4px 8px" }}>
+                              <input type="number" step="0.05" value={it.r ?? 1} onChange={e => updateSIAItem(ph.id, idx, { r: +e.target.value })} disabled={it.enabled === false} style={{ width: 48, height: 26, fontSize: 11, textAlign: "right" }} />
+                            </td>
+                            <td style={{ padding: "4px 8px", textAlign: "right", color: "#888" }}>{formatHours(Math.round(it.hours*60))}</td>
+                            <td style={{ padding: "4px 8px", textAlign: "right", color: "#888" }}>{formatCHF(it.hours*(form.sia.stundenansatz||0))}</td>
+                          </tr>
+                        ))}
+                      </React.Fragment>
+                    ))}
+                  </tbody>
+                </table>
+              </div>
+            </div>
+          )}
+          {/* Manueller Modus */}
+          {form.mode === "manual" && manCalc && (
+            <div>
+              <div style={{ marginBottom: 14, padding: 12, background: "#fff8ed", borderRadius: 6, border: "1px solid #f0e4c4" }}>
+                <div style={{ display: "flex", justifyContent: "space-between", alignItems: "center", marginBottom: 8 }}>
+                  <div style={{ fontSize: 11, fontWeight: 600, letterSpacing: "0.08em", color: "#888" }}>ROLLEN & STUNDENSÄTZE FÜR DIESE OFFERTE</div>
+                  <div style={{ display: "flex", gap: 6 }}>
+                    <button className="btn btn-ghost" style={{ fontSize: 11, padding: "3px 10px" }}
+                      title="Rollen aus Einstellungen zurücksetzen"
+                      onClick={() => setForm(f => ({ ...f, quoteRoles: defaultQuoteRoles() }))}>
+                      ↺ Reset
+                    </button>
+                    <button className="btn btn-ghost" style={{ fontSize: 11, padding: "3px 10px" }}
+                      onClick={() => {
+                        const newId = "R" + (form.quoteRoles.length + 1);
+                        setForm(f => ({ ...f, quoteRoles: [...f.quoteRoles, { id: newId, label: "Neue Rolle", rate: 120 }] }));
+                      }}>
+                      + Rolle
+                    </button>
+                  </div>
+                </div>
+                <table style={{ width: "100%", fontSize: 12, borderCollapse: "collapse" }}>
+                  <thead>
+                    <tr style={{ borderBottom: "1px solid #e0dbd4" }}>
+                      <th style={{ textAlign: "left", padding: "4px 6px", fontSize: 10, color: "#888", fontWeight: 500, width: 70 }}>KÜRZEL</th>
+                      <th style={{ textAlign: "left", padding: "4px 6px", fontSize: 10, color: "#888", fontWeight: 500 }}>BEZEICHNUNG</th>
+                      <th style={{ textAlign: "right", padding: "4px 6px", fontSize: 10, color: "#888", fontWeight: 500, width: 110 }}>CHF/h</th>
+                      <th style={{ width: 32 }}></th>
+                    </tr>
+                  </thead>
+                  <tbody>
+                    {(form.quoteRoles || []).map((r, idx) => (
+                      <tr key={idx} style={{ borderBottom: "1px solid #f0e8d8" }}>
+                        <td style={{ padding: "3px 6px" }}>
+                          <input
+                            value={r.id}
+                            onChange={e => setForm(f => ({ ...f, quoteRoles: f.quoteRoles.map((x, i) => i === idx ? { ...x, id: e.target.value.toUpperCase().slice(0,4) } : x) }))}
+                            style={{ width: 52, height: 26, fontSize: 12, fontWeight: 600, textAlign: "center", border: "1px solid #e0dbd4", background: "#fff" }}
+                            maxLength={4}
+                          />
+                        </td>
+                        <td style={{ padding: "3px 6px" }}>
+                          <input
+                            value={r.label}
+                            onChange={e => setForm(f => ({ ...f, quoteRoles: f.quoteRoles.map((x, i) => i === idx ? { ...x, label: e.target.value } : x) }))}
+                            style={{ width: "100%", height: 26, fontSize: 12, border: "1px solid #e0dbd4", background: "#fff" }}
+                          />
+                        </td>
+                        <td style={{ padding: "3px 6px", textAlign: "right" }}>
+                          <input
+                            type="number"
+                            min={0}
+                            step={5}
+                            value={r.rate}
+                            onChange={e => setForm(f => ({ ...f, quoteRoles: f.quoteRoles.map((x, i) => i === idx ? { ...x, rate: +e.target.value } : x) }))}
+                            style={{ width: 80, height: 26, fontSize: 12, textAlign: "right", border: "1px solid #e0dbd4", background: "#fff" }}
+                          />
+                        </td>
+                        <td style={{ padding: "3px 4px", textAlign: "center" }}>
+                          <button className="btn btn-danger" style={{ padding: "0 7px", height: 26, fontSize: 11 }}
+                            onClick={() => setForm(f => ({ ...f, quoteRoles: f.quoteRoles.filter((_, i) => i !== idx), manualPhases: f.manualPhases.map(p => { const h = { ...p.hoursByRole }; delete h[r.id]; return { ...p, hoursByRole: h }; }) }))}>
+                            <span className="material-icons" style={{ fontSize: 16 }}>close</span>
+                          </button>
+                        </td>
+                      </tr>
+                    ))}
+                  </tbody>
+                </table>
+              </div>
+              <div style={{ marginBottom: 16, borderRadius: 6, border: "1px solid #ece8e2", overflow: "hidden" }}>
+                <table style={{ fontSize: 12 }}>
+                  <thead>
+                    <tr style={{ background: "#f5f0e8" }}>
+                      <th style={{ padding: "8px", width: 30 }}></th>
+                      <th style={{ padding: "8px" }}>Phase</th>
+                      {activeRoles.map(r => <th key={r.id} style={{ padding: "8px", textAlign: "right", width: 65 }} title={r.label+" · CHF "+r.rate+"/h"}>{r.id}</th>)}
+                      <th style={{ padding: "8px", textAlign: "right", width: 65 }}>Std</th>
+                      <th style={{ padding: "8px", textAlign: "right", width: 95 }}>Honorar</th>
+                    </tr>
+                  </thead>
+                  <tbody>
+                    {form.manualPhases.map(rawPh => {
+                      const calcPh = manCalc.phases.find(p => p.id === rawPh.id);
+                      return (
+                        <tr key={rawPh.id} style={{ opacity: rawPh.enabled ? 1 : 0.35 }}>
+                          <td style={{ padding: "4px 8px" }}>
+                            <input type="checkbox" checked={rawPh.enabled} onChange={e => toggleManualPhase(rawPh.id, e.target.checked)} style={{ width: "auto" }} />
+                          </td>
+                          <td style={{ padding: "4px 8px", fontSize: 11 }}>{rawPh.label}</td>
+                          {activeRoles.map(r => (
+                            <td key={r.id} style={{ padding: "4px 4px" }}>
+                              <input type="number" min={0} step="0.5" value={rawPh.hoursByRole?.[r.id] || 0}
+                                onChange={e => updateManualHours(rawPh.id, r.id, e.target.value)}
+                                disabled={!rawPh.enabled}
+                                style={{ width: 56, height: 26, fontSize: 11, textAlign: "right", background: rawPh.enabled ? "#fff8ed" : undefined }} />
+                            </td>
+                          ))}
+                          <td style={{ padding: "4px 8px", textAlign: "right", color: "#888" }}>{calcPh ? formatHours(Math.round(calcPh.totalHours*60)) : "—"}</td>
+                          <td style={{ padding: "4px 8px", textAlign: "right", color: "#888" }}>{calcPh ? formatCHF(calcPh.totalAmount) : "—"}</td>
+                        </tr>
+                      );
+                    })}
+                  </tbody>
+                </table>
+              </div>
+              <div style={{ display: "flex", justifyContent: "flex-end", fontSize: 11, color: "#666", marginBottom: 10 }}>
+                Total: <strong style={{ marginLeft: 8, color: "#1a1a18" }}>{formatHours(Math.round(manCalc.totalHours*60))} · {formatCHF(manCalc.totalAmount)}</strong>
+              </div>
+            </div>
+          )}
+          {/* Total */}
+          <div style={{ display: "flex", justifyContent: "space-between", alignItems: "center", marginBottom: 14, padding: "12px 14px", background: "#faf8f5", borderRadius: 6, border: "1px solid #ece8e2" }}>
+            <label style={{ display: "flex", alignItems: "center", gap: 8, cursor: "pointer", textTransform: "none", fontSize: 13, color: "#1a1a18" }}>
+              <input type="checkbox" checked={form.mwst} onChange={e => setForm({...form, mwst: e.target.checked})} style={{ width: "auto" }} />
+              MWST {taxRate}% ausweisen
+            </label>
+            <div style={{ textAlign: "right", fontSize: 12 }}>
+              <div style={{ color: "#888" }}>Honorar netto {formatCHF(subTotal)}</div>
+              {form.mwst && <div style={{ color: "#888" }}>MWST {formatCHF(tax)}</div>}
+              <div style={{ fontSize: 16, fontWeight: 700, marginTop: 3 }}>Total {formatCHF(total)}</div>
+            </div>
+          </div>
+          <FormField label="Bemerkungen">
+            <textarea rows={3} value={form.notes} onChange={e => setForm({...form, notes: e.target.value})} style={{ resize: "vertical" }} />
+          </FormField>
+        </Modal>
+      )}
+    </div>
+  );
+}
+
+export
+function ConvertQuoteModal({ quote, existingInvoices, taxRate, onClose, onConfirm }) {
+  const totalSub = quote.sub || 0;
+  const totalInvoiced = existingInvoices.reduce((s, i) => s + (i.sub || 0), 0);
+  const remaining = Math.max(0, totalSub - totalInvoiced);
+  const hasExisting = existingInvoices.length > 0;
+  const progressPct = totalSub > 0 ? (totalInvoiced / totalSub) * 100 : 0;
+
+  const [mode, setMode] = useState("voll");
+  const [percentValue, setPercentValue] = useState(30);
+  const [amountValue, setAmountValue] = useState(Math.round(remaining * 100) / 100);
+
+  // Vollrechnung = remaining when akonto exists, otherwise full total
+  const vollAmount = hasExisting ? remaining : totalSub;
+
+  let previewAmount = 0;
+  if (mode === "voll") previewAmount = vollAmount;
+  else if (mode === "akonto-percent") previewAmount = totalSub * (percentValue / 100);
+  else if (mode === "akonto-amount") previewAmount = amountValue;
+  const previewTax = quote.mwst ? previewAmount * (taxRate / 100) : 0;
+  const previewTotal = roundCHF(previewAmount + previewTax);
+
+  const canSubmit = previewAmount > 0;
+
+  const handleConfirm = () => {
+    let value = 0;
+    if (mode === "akonto-percent") value = percentValue;
+    else if (mode === "akonto-amount") value = amountValue;
+    onConfirm(quote, mode, value);
+  };
+
+  const Option = ({ id, title, desc, disabled }) => (
+    <label
+      onClick={() => !disabled && setMode(id)}
+      style={{
+        display: "block", padding: "12px 14px", marginBottom: 8,
+        borderRadius: 6, border: mode === id ? "2px solid #1a1a18" : "1.5px solid #ddd8d0",
+        cursor: disabled ? "not-allowed" : "pointer",
+        opacity: disabled ? 0.4 : 1, background: mode === id ? "#faf8f5" : "#fff",
+        textTransform: "none",
+      }}>
+      <div style={{ display: "flex", alignItems: "center", gap: 10 }}>
+        <div style={{
+          width: 16, height: 16, borderRadius: "50%",
+          border: mode === id ? "5px solid #1a1a18" : "2px solid #aaa",
+          flexShrink: 0,
+        }} />
+        <div>
+          <div style={{ fontSize: 13, fontWeight: 500, color: "#1a1a18" }}>{title}</div>
+          {desc && <div style={{ fontSize: 11, color: "#888", marginTop: 2 }}>{desc}</div>}
+        </div>
+      </div>
+    </label>
+  );
+
+  return (
+    <div className="modal-overlay" onClick={e => e.target === e.currentTarget && onClose()}>
+      <div className="modal" style={{ maxWidth: 540 }}>
+        <h2 style={{ fontFamily: "'Playfair Display', serif", fontWeight: 400, marginBottom: 8, fontSize: 22 }}>
+          Rechnung aus Offerte
+        </h2>
+        <div style={{ fontSize: 12, color: "#888", marginBottom: 18 }}>
+          Offerte {quote.number} · Honorar netto {formatCHF(totalSub)}
+        </div>
+
+        {/* Fortschritts-Anzeige */}
+        {hasExisting && (
+          <div style={{ marginBottom: 18, padding: 14, background: "#faf8f5", borderRadius: 6, border: "1px solid #ece8e2" }}>
+            <div style={{ display: "flex", justifyContent: "space-between", fontSize: 11, color: "#666", marginBottom: 6 }}>
+              <span>Bereits verrechnet</span>
+              <span><strong style={{ color: "#1a1a18" }}>{formatCHF(totalInvoiced)}</strong> · {progressPct.toFixed(0)}%</span>
+            </div>
+            <div style={{ height: 6, background: "#ece8e2", borderRadius: 3, overflow: "hidden", marginBottom: 8 }}>
+              <div style={{ width: `${progressPct}%`, height: "100%", background: "#2d6a4f" }}></div>
+            </div>
+            <div style={{ display: "flex", justifyContent: "space-between", fontSize: 11, color: "#666" }}>
+              <span>Restbetrag</span>
+              <span><strong style={{ color: "#b5621e" }}>{formatCHF(remaining)}</strong></span>
+            </div>
+            <div style={{ marginTop: 10, paddingTop: 10, borderTop: "1px solid #ece8e2", fontSize: 10, color: "#888" }}>
+              {existingInvoices.map(i => (
+                <div key={i.id} style={{ display: "flex", justifyContent: "space-between", padding: "2px 0" }}>
+                  <span>{i.number} · {i.invoiceKind === "akonto" ? "Akonto" : i.invoiceKind} · {formatDate(i.date)}</span>
+                  <span>{formatCHF(i.sub)}</span>
+                </div>
+              ))}
+            </div>
+          </div>
+        )}
+
+        <div style={{ marginBottom: 14 }}>
+          <Option
+            id="voll"
+            title={hasExisting ? "Schlussrechnung / Restbetrag" : "Vollrechnung"}
+            desc={hasExisting
+              ? `Noch offenes Honorar verrechnen: ${formatCHF(remaining)}`
+              : "Gesamtes Offerthonorar in einer Rechnung verrechnen"}
+            disabled={hasExisting && remaining <= 0}
+          />
+          <Option
+            id="akonto-percent"
+            title="Akontorechnung (Prozent)"
+            desc={`Teilbetrag als % vom Gesamthonorar (${formatCHF(totalSub)})`}
+          />
+          {mode === "akonto-percent" && (
+            <div style={{ marginLeft: 26, marginTop: -4, marginBottom: 12, padding: "10px 14px", background: "#fff8ed", borderRadius: 6, border: "1px solid #f0e4c4", display: "flex", alignItems: "center", gap: 10 }}>
+              <input type="number" min={1} max={100} step="1" value={percentValue} onChange={e => setPercentValue(Math.max(0, Math.min(100, +e.target.value || 0)))} style={{ width: 80, textAlign: "right", background: "#fff" }} />
+              <span style={{ fontSize: 13, color: "#666" }}>% des Gesamthonorars</span>
+            </div>
+          )}
+          <Option
+            id="akonto-amount"
+            title="Akontorechnung (Betrag)"
+            desc={`Spezifischer CHF-Betrag`}
+          />
+          {mode === "akonto-amount" && (
+            <div style={{ marginLeft: 26, marginTop: -4, marginBottom: 12, padding: "10px 14px", background: "#fff8ed", borderRadius: 6, border: "1px solid #f0e4c4", display: "flex", alignItems: "center", gap: 10 }}>
+              <span style={{ fontSize: 13, color: "#666" }}>CHF</span>
+              <input type="number" min={0} step="50" value={amountValue} onChange={e => setAmountValue(Math.max(0, +e.target.value || 0))} style={{ width: 140, textAlign: "right", background: "#fff" }} />
+            </div>
+          )}
+        </div>
+
+        {/* Vorschau */}
+        <div style={{ padding: "12px 14px", background: "#f5f0e8", borderRadius: 6, marginBottom: 18 }}>
+          <div style={{ fontSize: 10, letterSpacing: "0.1em", color: "#888", marginBottom: 8 }}>VORSCHAU NEUE RECHNUNG</div>
+          <div style={{ display: "flex", justifyContent: "space-between", fontSize: 12, color: "#666", padding: "2px 0" }}>
+            <span>Netto</span><span>{formatCHF(previewAmount)}</span>
+          </div>
+          {quote.mwst && (
+            <div style={{ display: "flex", justifyContent: "space-between", fontSize: 12, color: "#666", padding: "2px 0" }}>
+              <span>MWST {taxRate}%</span><span>{formatCHF(previewTax)}</span>
+            </div>
+          )}
+          <div style={{ display: "flex", justifyContent: "space-between", marginTop: 4, paddingTop: 6, borderTop: "1px solid #d8d0c4", fontSize: 14, fontWeight: 700 }}>
+            <span>Total</span><span>{formatCHF(previewTotal)}</span>
+          </div>
+        </div>
+
+        <div style={{ display: "flex", gap: 10, justifyContent: "flex-end" }}>
+          <button className="btn btn-ghost" onClick={onClose}>Abbrechen</button>
+          <button className="btn btn-primary" onClick={handleConfirm} disabled={!canSubmit} style={{ opacity: canSubmit ? 1 : 0.4 }}>Rechnung erstellen</button>
+        </div>
+      </div>
+    </div>
+  );
+}
+
+// ─── CLIENTS ──────────────────────────────────────────────────
diff --git a/src/views/Settings.jsx b/src/views/Settings.jsx
new file mode 100755
index 0000000..e58aee2
--- /dev/null
+++ b/src/views/Settings.jsx
@@ -0,0 +1,840 @@
+import React, { useState } from "react";
+import { STORAGE_KEY, DEFAULT_ABSENZ_TYPES } from "../constants.js";
+import { formatIban, isQRIban, applyProjectNumberFormat, applyProtoNumberFormat, generateId, getFeiertageForYear, getAbsenzTypes } from "../utils.js";
+import { Header, FormField, Modal, DateInput, useConfirm } from "../components/UI.jsx";
+
+const PERMISSION_GROUPS = [
+  { label: "Grundmodule", items: [
+    { id: "dashboard", label: "Übersicht" },
+    { id: "projects", label: "Projekte" },
+    { id: "time", label: "Zeiterfassung" },
+    { id: "personen", label: "Kunden & Partner" },
+  ]},
+  { label: "Buchhaltung", items: [
+    { id: "invoices", label: "Rechnungen" },
+    { id: "expenses", label: "Spesen" },
+    { id: "internal-expenses", label: "Ausgaben" },
+    { id: "loehne", label: "Löhne" },
+    { id: "studio-budget", label: "Budget" },
+  ]},
+  { label: "Dokumente", items: [
+    { id: "quotes", label: "Offerten" },
+    { id: "protokolle", label: "Protokolle" },
+    { id: "lieferscheine", label: "Lieferscheine" },
+    { id: "letters", label: "Briefe" },
+  ]},
+  { label: "Administration", items: [
+    { id: "mitarbeiter", label: "Mitarbeiter (inkl. Zeiterfassung aller MA)" },
+    { id: "settings", label: "Einstellungen / Mein Profil" },
+    { id: "dashboard-vorlage", label: "Dashboard-Vorlagen speichern" },
+    { id: "pinnwand-schreiben", label: "Pinnwand — Beiträge verfassen" },
+  ]},
+];
+
+const TABS = [
+  { id: "studio",    label: "Studio" },
+  { id: "dokumente", label: "Dokumente & Formate" },
+  { id: "team",      label: "Team & Rollen" },
+  { id: "kalender",  label: "Feiertage & Absenzen" },
+  { id: "system",    label: "System" },
+  { id: "profil",    label: "Mein Profil" },
+];
+
+const SETTINGS_TABS = new Set(["studio", "dokumente", "team", "system"]);
+
+function Section({ title, children }) {
+  return (
+    <div style={{ marginBottom: 28 }}>
+      <div style={{ fontSize: 10, letterSpacing: "0.12em", color: "#aaa", fontWeight: 600, marginBottom: 14, paddingBottom: 8, borderBottom: "1px solid #ece8e2" }}>{title}</div>
+      {children}
+    </div>
+  );
+}
+
+function FmtRow({ label, value, onChange, placeholder, preview }) {
+  return (
+    <div style={{ marginBottom: 12 }}>
+      <div style={{ fontSize: 12, color: "#555", marginBottom: 5 }}>{label}</div>
+      <div style={{ display: "flex", gap: 8, alignItems: "center" }}>
+        <input value={value} onChange={e => onChange(e.target.value)} style={{ maxWidth: 160, fontFamily: "monospace" }} placeholder={placeholder} />
+        {preview && <span style={{ fontSize: 12, color: "#2d6a4f", fontWeight: 500 }}>→ {preview}</span>}
+      </div>
+    </div>
+  );
+}
+
+function PersonalSettings({ data, update, currentUser, uiZoom, setUiZoom, nav = null }) {
+  const emp = (data.employees || []).find(e => e.id === currentUser.employeeId || e.name === currentUser.displayName);
+  const userRec = (data.users || []).find(u => u.id === currentUser.id);
+  const [empForm, setEmpForm] = useState({
+    street: emp?.street || "",
+    zip: emp?.zip || "",
+    city: emp?.city || "",
+    lohnIban: emp?.lohnIban || "",
+  });
+  const [saved, setSaved] = useState(false);
+  const zoomStep = 0.05;
+
+  const saveProfile = () => {
+    if (emp) {
+      update("employees", (data.employees || []).map(e => e.id === emp.id ? { ...e, ...empForm } : e));
+    }
+    setSaved(true);
+    setTimeout(() => setSaved(false), 2500);
+  };
+
+  const uploadAvatar = (e) => {
+    const file = e.target.files?.[0]; if (!file) return;
+    const reader = new FileReader();
+    reader.onload = ev => update("users", (data.users || []).map(u => u.id === currentUser.id ? { ...u, avatar: ev.target.result } : u));
+    reader.readAsDataURL(file);
+  };
+
+  return (
+    <div>
+      <Header title="Mein Profil" action={
+        <button className="btn btn-primary" style={{ background: saved ? "#2d6a4f" : "#2a2a22", transition: "background 0.3s" }} onClick={saveProfile}>
+          {saved ? "✓ Gespeichert" : "Speichern"}
+        </button>
+      } />
+
+      {nav}
+
+      <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 20 }} className="responsive-grid-2">
+        <div style={{ display: "flex", flexDirection: "column", gap: 20 }}>
+          <div className="card">
+            <Section title="PROFIL">
+              <div style={{ display: "flex", alignItems: "center", gap: 16, marginBottom: 6 }}>
+                <div style={{ width: 64, height: 64, borderRadius: "50%", background: "#f0ede8", border: "2px solid #ece8e2", display: "flex", alignItems: "center", justifyContent: "center", fontSize: 24, color: "#888", overflow: "hidden", flexShrink: 0 }}>
+                  {userRec?.avatar
+                    ? <img src={userRec.avatar} alt="Profil" style={{ width: "100%", height: "100%", objectFit: "cover" }} />
+                    : (currentUser.displayName || currentUser.username).charAt(0).toUpperCase()}
+                </div>
+                <div>
+                  <div style={{ fontSize: 14, fontWeight: 500, color: "#1a1a18", marginBottom: 6 }}>{currentUser.displayName || currentUser.username}</div>
+                  <div style={{ display: "flex", gap: 6, flexWrap: "wrap" }}>
+                    <label className="btn btn-ghost" style={{ padding: "5px 12px", fontSize: 11, cursor: "pointer" }}>
+                      {userRec?.avatar ? "Ersetzen" : "Foto hochladen"}
+                      <input type="file" accept="image/*" style={{ display: "none" }} onChange={uploadAvatar} />
+                    </label>
+                    {userRec?.avatar && (
+                      <button className="btn btn-danger" style={{ padding: "5px 10px", fontSize: 11 }}
+                        onClick={() => update("users", (data.users || []).map(u => u.id === currentUser.id ? { ...u, avatar: null } : u))}>
+                        <span className="material-icons" style={{ fontSize: 16 }}>close</span>
+                      </button>
+                    )}
+                  </div>
+                </div>
+              </div>
+            </Section>
+
+            <Section title="MEINE ADRESSE">
+              <FormField label="Strasse + Nr.">
+                <input value={empForm.street} onChange={e => setEmpForm(f => ({ ...f, street: e.target.value }))} placeholder="z.B. Musterstrasse 1" />
+              </FormField>
+              <div className="form-row">
+                <FormField label="PLZ"><input value={empForm.zip} onChange={e => setEmpForm(f => ({ ...f, zip: e.target.value }))} style={{ maxWidth: 120 }} /></FormField>
+                <FormField label="Ort"><input value={empForm.city} onChange={e => setEmpForm(f => ({ ...f, city: e.target.value }))} /></FormField>
+              </div>
+              {!emp && (
+                <div style={{ fontSize: 11, color: "#b5621e", marginTop: 6, padding: "8px 12px", background: "#fdf0e8", borderRadius: 8 }}>
+                  Kein verknüpfter Mitarbeitereintrag gefunden. Wende dich an den Administrator.
+                </div>
+              )}
+            </Section>
+          </div>
+        </div>
+
+        <div style={{ display: "flex", flexDirection: "column", gap: 20 }}>
+          <div className="card">
+            <Section title="LOHNKONTO">
+              <FormField label="IBAN">
+                <input value={empForm.lohnIban} onChange={e => setEmpForm(f => ({ ...f, lohnIban: formatIban(e.target.value) }))} placeholder="CH00 0000 0000 0000 0000 0" />
+              </FormField>
+              <div style={{ fontSize: 11, color: "#aaa", marginTop: 6, lineHeight: 1.6 }}>
+                Diese Angabe wird für die Lohnüberweisung verwendet und ist nur für den Administrator sichtbar.
+              </div>
+              {!emp && (
+                <div style={{ fontSize: 11, color: "#b5621e", marginTop: 6, padding: "8px 12px", background: "#fdf0e8", borderRadius: 8 }}>
+                  Kein verknüpfter Mitarbeitereintrag gefunden.
+                </div>
+              )}
+            </Section>
+          </div>
+
+          <div className="card">
+            <Section title="DARSTELLUNG">
+              <div style={{ fontSize: 12, color: "#555", marginBottom: 12 }}>Skalierung / Zoom</div>
+              <div style={{ display: "flex", alignItems: "center", gap: 16 }}>
+                <button onClick={() => setUiZoom(z => Math.max(0.5, Math.round((z - zoomStep) * 100) / 100))} style={{ width: 36, height: 36, border: "1.5px solid #ddd8d0", borderRadius: "50%", background: "none", fontSize: 20, cursor: "pointer", display: "flex", alignItems: "center", justifyContent: "center", fontFamily: "inherit" }}>−</button>
+                <div style={{ flex: 1, textAlign: "center" }}>
+                  <div style={{ fontSize: 22, fontWeight: 500, fontFamily: "monospace", color: "#1a1a18" }}>{Math.round((uiZoom || 1) * 100)}%</div>
+                </div>
+                <button onClick={() => setUiZoom(z => Math.min(1.5, Math.round((z + zoomStep) * 100) / 100))} style={{ width: 36, height: 36, border: "1.5px solid #ddd8d0", borderRadius: "50%", background: "none", fontSize: 20, cursor: "pointer", display: "flex", alignItems: "center", justifyContent: "center", fontFamily: "inherit" }}>+</button>
+              </div>
+              {(uiZoom || 1) !== 1 && (
+                <button className="btn btn-ghost" style={{ marginTop: 12, fontSize: 11, width: "100%" }} onClick={() => setUiZoom(1)}>
+                  ↺ Auf 100% zurücksetzen
+                </button>
+              )}
+            </Section>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}
+
+export default function Settings({ data, update, currentUser, uiZoom, setUiZoom }) {
+  const [s, setS] = useState(data.settings);
+  const [saved, setSaved] = useState(false);
+  const [initModal, setInitModal] = useState(false);
+  const [tab, setTab] = useState("studio");
+  const [editingRoleId, setEditingRoleId] = useState(null);
+  const [roleForm, setRoleForm] = useState(null);
+  const [ftForm, setFtForm] = useState({ date: "", label: "", stundenDelta: 0, repeatsYearly: true });
+  const [absenzTypeForm, setAbsenzTypeForm] = useState({ label: "", color: "#555" });
+  const [kalModal, setKalModal] = useState(null);
+  const { askConfirm, ConfirmModalEl } = useConfirm();
+  const isDirty = JSON.stringify(s) !== JSON.stringify(data.settings);
+  const isAdmin = !currentUser || currentUser.role === "admin";
+
+  const setField = (changes) => { setS(prev => ({ ...prev, ...changes })); setSaved(false); };
+
+  const save = () => {
+    update("settings", s);
+    setSaved(true);
+    setTimeout(() => setSaved(false), 2500);
+  };
+
+  const exportData = () => {
+    const blob = new Blob([JSON.stringify(data, null, 2)], { type: "application/json" });
+    const url = URL.createObjectURL(blob);
+    const a = document.createElement("a");
+    a.href = url;
+    a.download = `studio-backup-${new Date().toISOString().slice(0, 10)}.json`;
+    a.click();
+    URL.revokeObjectURL(url);
+  };
+
+  const importData = (e) => {
+    const file = e.target.files?.[0];
+    if (!file) return;
+    const reader = new FileReader();
+    reader.onload = async evt => {
+      try {
+        const imported = JSON.parse(evt.target.result);
+        if (await askConfirm("Aktuelle Daten wirklich überschreiben?", "Überschreiben")) {
+          localStorage.setItem(STORAGE_KEY, JSON.stringify(imported));
+          window.location.reload();
+        }
+      } catch {
+        alert("Datei konnte nicht gelesen werden.");
+      }
+    };
+    reader.readAsText(file);
+  };
+
+  // Number format previews
+  const invFmt = s.invoiceNumberFormat || "YYYY-NNN";
+  const _now = new Date(); const _yyyy = String(_now.getFullYear()); const _yy = _yyyy.slice(2);
+  const _invPadLen = (invFmt.match(/N+/) || ["NNN"])[0].length;
+  const invFmtPreview = invFmt.replace(/YYYY/g, _yyyy).replace(/YY/g, _yy).replace(/N+/, String(1).padStart(_invPadLen, "0"));
+  const protoFmt = s.protokollNumberFormat || "PP-TT-NN";
+  const protoAbbr = s.protokollTypeAbbreviations || {};
+  const protoFmtPreview = applyProtoNumberFormat(protoFmt, {
+    date: new Date().toISOString().slice(0, 10),
+    projectNumber: "2026-01",
+    seq: 1,
+    typKuerzel: Object.values(protoAbbr)[0] || "BS",
+  });
+
+  // App-Rollen
+  const appRoles = data.appRoles || [];
+  const openEditRole = (role) => { setEditingRoleId(role.id); setRoleForm({ ...role, permissions: role.permissions ? [...role.permissions] : null }); };
+  const saveRole = () => { update("appRoles", appRoles.map(r => r.id === roleForm.id ? { ...roleForm } : r)); setEditingRoleId(null); };
+  const addRole = () => { const nr = { id: generateId(), name: "Neue Rolle", permissions: ["dashboard", "projects", "time"] }; update("appRoles", [...appRoles, nr]); openEditRole(nr); };
+  const deleteRole = async (id) => { if (!await askConfirm("Rolle löschen? Benutzer mit dieser Rolle verlieren ihren Zugang.")) return; update("appRoles", appRoles.filter(r => r.id !== id)); };
+  const togglePerm = (permId) => { if (!roleForm || roleForm.permissions === null) return; const cur = roleForm.permissions || []; setRoleForm({ ...roleForm, permissions: cur.includes(permId) ? cur.filter(p => p !== permId) : [...cur, permId] }); };
+
+  // Feiertage & Absenztypen
+  const feiertage = data.feiertage || [];
+  const absenzTypes = getAbsenzTypes(data);
+  const defaultAbsenzIds = new Set(DEFAULT_ABSENZ_TYPES.map(t => t.id));
+
+  const saveFt = () => {
+    const isNew = !ftForm.id;
+    const ft = { ...ftForm, id: ftForm.id || generateId() };
+    update("feiertage", isNew ? [...feiertage, ft] : feiertage.map(f => f.id === ft.id ? ft : f));
+    setKalModal(null);
+  };
+  const delFt = (id) => update("feiertage", feiertage.filter(f => f.id !== id));
+
+  const saveAbsenzType = () => {
+    const t = { ...absenzTypeForm, id: absenzTypeForm.id || generateId() };
+    const custom = data.absenzTypes || [];
+    const exists = custom.some(x => x.id === t.id);
+    update("absenzTypes", exists ? custom.map(x => x.id === t.id ? t : x) : [...custom, t]);
+    setKalModal(null);
+  };
+  const delAbsenzType = (id) => {
+    const inUse = (data.absences || []).some(a => a.type === id);
+    if (inUse) { alert("Dieser Absenztyp ist bereits vergeben und kann nicht gelöscht werden."); return; }
+    if (defaultAbsenzIds.has(id)) {
+      const custom = data.absenzTypes || [];
+      const exists = custom.some(x => x.id === id);
+      update("absenzTypes", exists ? custom.map(x => x.id === id ? { ...x, deleted: true } : x) : [...custom, { id, deleted: true }]);
+    } else {
+      update("absenzTypes", (data.absenzTypes || []).filter(t => t.id !== id));
+    }
+  };
+
+  if (!isAdmin) {
+    return <PersonalSettings data={data} update={update} currentUser={currentUser} uiZoom={uiZoom || 1} setUiZoom={setUiZoom || (() => {})} />;
+  }
+
+  return (
+    <div>
+      {ConfirmModalEl}
+
+      {tab !== "profil" && (
+        <div className="filter-bar" style={{ marginBottom: 20 }}>
+          {TABS.map(t => (
+            <button key={t.id} onClick={() => setTab(t.id)} className={`pill${tab === t.id ? " active" : ""}`}>{t.label}</button>
+          ))}
+        </div>
+      )}
+
+      {/* ── Profil-Tab ── */}
+      {tab === "profil" && <PersonalSettings data={data} update={update} currentUser={currentUser} uiZoom={uiZoom || 1} setUiZoom={setUiZoom || (() => {})} nav={
+        <div className="filter-bar" style={{ marginBottom: 20 }}>
+          {TABS.map(t => (
+            <button key={t.id} onClick={() => setTab(t.id)} className={`pill${tab === t.id ? " active" : ""}`}>{t.label}</button>
+          ))}
+        </div>
+      } />}
+
+      {/* ── Settings-Tabs (studio / dokumente / team / system / kalender) ── */}
+      {tab !== "profil" && <>
+        {initModal && (
+          <div className="modal-overlay" onClick={() => setInitModal(false)}>
+            <div className="modal" style={{ maxWidth: 440 }} onClick={e => e.stopPropagation()}>
+              <div style={{ fontFamily: "'Playfair Display',serif", fontSize: 20, marginBottom: 6 }}>Neu initialisieren</div>
+              <p style={{ fontSize: 13, color: "#666", lineHeight: 1.7, marginBottom: 16 }}>
+                Die App wird auf den Ausgangszustand zurückgesetzt. Alle Projekte, Rechnungen, Mitarbeitende und Einstellungen gehen unwiderruflich verloren.
+              </p>
+              <div style={{ padding: "10px 14px", background: "#fdf2f2", border: "1px solid #e0b0b0", borderRadius: 8, fontSize: 12, color: "#8a1a1a", marginBottom: 20, lineHeight: 1.6 }}>
+                Backup vorher erstellen empfohlen.
+              </div>
+              <button className="btn btn-primary" style={{ width: "100%", marginBottom: 10 }} onClick={exportData}>↓ Backup erstellen</button>
+              <button className="btn btn-danger" style={{ width: "100%", marginBottom: 10 }} onClick={async () => {
+                setInitModal(false);
+                if (!await askConfirm("Wirklich initialisieren? Alle Daten gehen verloren.", "Initialisieren")) return;
+                localStorage.removeItem(STORAGE_KEY);
+                window.location.reload();
+              }}>Trotzdem initialisieren</button>
+              <button className="btn btn-ghost" style={{ width: "100%" }} onClick={() => setInitModal(false)}>Abbrechen</button>
+            </div>
+          </div>
+        )}
+
+        {/* Feiertage / Absenztypen Modals */}
+        {kalModal === "ft" && (
+          <Modal title={ftForm.id ? "Feiertag bearbeiten" : "Neuer Feiertag"} onClose={() => setKalModal(null)} onSave={saveFt}>
+            <div className="form-row">
+              <FormField label="Datum"><DateInput value={ftForm.date || ""} onChange={e => setFtForm({ ...ftForm, date: e.target.value })} autoFocus /></FormField>
+              <FormField label="Bezeichnung"><input value={ftForm.label || ""} onChange={e => setFtForm({ ...ftForm, label: e.target.value })} placeholder="z.B. Nationalfeiertag" /></FormField>
+            </div>
+            <div className="form-row">
+              <FormField label="Stunden-Delta (0 = ganzer Tag frei)">
+                <input type="number" step={0.5} value={ftForm.stundenDelta ?? 0} onChange={e => setFtForm({ ...ftForm, stundenDelta: +e.target.value })} />
+                <div style={{ fontSize: 11, color: "#888", marginTop: 4 }}>z.B. −3.5 für Halbtag, −1 für 1h früher</div>
+              </FormField>
+              <FormField label=" ">
+                <label style={{ display: "flex", alignItems: "center", gap: 8, height: 36, cursor: "pointer", textTransform: "none", fontSize: 13 }}>
+                  <input type="checkbox" checked={!!ftForm.repeatsYearly} onChange={e => setFtForm({ ...ftForm, repeatsYearly: e.target.checked })} style={{ width: "auto" }} />
+                  Jährlich wiederkehrend
+                </label>
+              </FormField>
+            </div>
+          </Modal>
+        )}
+
+        {kalModal === "absenztype" && (
+          <Modal title={absenzTypeForm.id ? "Absenztyp bearbeiten" : "Neuer Absenztyp"} onClose={() => setKalModal(null)} onSave={saveAbsenzType}>
+            <div className="form-row">
+              <FormField label="Bezeichnung"><input value={absenzTypeForm.label || ""} onChange={e => setAbsenzTypeForm({ ...absenzTypeForm, label: e.target.value })} autoFocus /></FormField>
+              <FormField label="Farbe">
+                <div style={{ display: "flex", gap: 8, alignItems: "center" }}>
+                  <input type="color" value={absenzTypeForm.color || "#555"} onChange={e => setAbsenzTypeForm({ ...absenzTypeForm, color: e.target.value })} style={{ width: 44, height: 36, padding: 2, border: "1px solid #e0dbd4", borderRadius: 4 }} />
+                  <input value={absenzTypeForm.color || ""} onChange={e => setAbsenzTypeForm({ ...absenzTypeForm, color: e.target.value })} style={{ flex: 1 }} placeholder="#555" />
+                </div>
+              </FormField>
+            </div>
+          </Modal>
+        )}
+
+        {/* Stable header — Speichern only for settings tabs */}
+        <Header title="Einstellungen" action={
+          SETTINGS_TABS.has(tab)
+            ? <button className="btn btn-primary" style={{ background: saved ? "#2d6a4f" : isDirty ? "#8a6a3a" : "#2a2a22", transition: "background 0.3s" }} onClick={save}>
+                {saved ? "✓ Gespeichert" : isDirty ? "Speichern *" : "Gespeichert"}
+              </button>
+            : null
+        } />
+
+        {/* ── Tab: Studio ── */}
+        {tab === "studio" && (
+          <>
+          <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 20 }} className="responsive-grid-2">
+            <div className="card">
+              <Section title="STUDIO & ERSCHEINUNGSBILD">
+                <div style={{ marginBottom: 16 }}>
+                  <div style={{ fontSize: 12, color: "#555", marginBottom: 6 }}>Logo (SVG / PNG)</div>
+                  <div style={{ display: "flex", gap: 10, alignItems: "center" }}>
+                    {s.logo && <img src={s.logo} alt="Logo" style={{ maxHeight: 40, maxWidth: 120, border: "1px solid #ece8e2", borderRadius: 4, padding: 4, background: "#fff" }} />}
+                    <label className="btn btn-ghost" style={{ padding: "6px 12px", fontSize: 11, cursor: "pointer" }}>
+                      {s.logo ? "Ersetzen" : "Hochladen"}
+                      <input type="file" accept="image/svg+xml,image/png,image/jpeg" style={{ display: "none" }} onChange={e => {
+                        const file = e.target.files?.[0]; if (!file) return;
+                        const reader = new FileReader();
+                        reader.onload = ev => setField({ logo: ev.target.result });
+                        reader.readAsDataURL(file);
+                      }} />
+                    </label>
+                    {s.logo && <button className="btn btn-danger" style={{ padding: "6px 10px", fontSize: 11 }} onClick={() => setField({ logo: null })}><span className="material-icons" style={{ fontSize: 16 }}>close</span></button>}
+                  </div>
+                </div>
+                <div style={{ display: "flex", alignItems: "center", justifyContent: "space-between", marginBottom: 14 }}>
+                  <span style={{ fontSize: 12, color: "#555" }}>Logohöhe auf PDFs</span>
+                  <div style={{ display: "flex", alignItems: "center", gap: 8 }}>
+                    <input type="number" min={20} max={200} step={5} value={s.logoSize || 60} onChange={e => setField({ logoSize: +e.target.value })} style={{ width: 70 }} />
+                    <span style={{ fontSize: 11, color: "#888" }}>px</span>
+                    {(s.logoSize || 60) !== 60 && <button className="btn btn-ghost" style={{ fontSize: 11, padding: "4px 10px" }} onClick={() => setField({ logoSize: 60 })}>↺ Standard</button>}
+                  </div>
+                </div>
+                <FormField label="Name / Firma"><input value={s.name} onChange={e => setField({ name: e.target.value })} /></FormField>
+              </Section>
+
+              <Section title="ADRESSE">
+                <FormField label="Strasse + Nr."><input value={s.street || ""} onChange={e => setField({ street: e.target.value })} placeholder="z.B. Bahnhofstrasse 1" /></FormField>
+                <div className="form-row">
+                  <FormField label="PLZ"><input value={s.zip || ""} onChange={e => setField({ zip: e.target.value })} style={{ maxWidth: 120 }} /></FormField>
+                  <FormField label="Ort"><input value={s.city || ""} onChange={e => setField({ city: e.target.value })} /></FormField>
+                  <FormField label="Land"><input value={s.country || "CH"} onChange={e => setField({ country: e.target.value.toUpperCase() })} maxLength={2} style={{ maxWidth: 80 }} /></FormField>
+                </div>
+                <div className="form-row">
+                  <FormField label="E-Mail"><input type="email" value={s.email} onChange={e => setField({ email: e.target.value })} /></FormField>
+                  <FormField label="Telefon"><input value={s.phone} onChange={e => setField({ phone: e.target.value })} /></FormField>
+                </div>
+              </Section>
+            </div>
+
+            <div className="card">
+              <Section title="FINANZEN">
+                <FormField label="IBAN">
+                  <input value={s.iban} onChange={e => { const f = formatIban(e.target.value); setField({ iban: f, ibanType: isQRIban(f) ? "qr" : "normal" }); }} placeholder="CH00 0000 0000 0000 0000 0" />
+                  <div style={{ fontSize: 11, color: isQRIban(s.iban) ? "#2d6a4f" : "#b5621e", marginTop: 4 }}>
+                    {isQRIban(s.iban) ? "✓ QR-IBAN — strukturierte Referenz verfügbar" : "Normale IBAN — ohne strukturierte Referenz"}
+                  </div>
+                </FormField>
+                <FormField label="MWST-Nr."><input value={s.mwst} onChange={e => setField({ mwst: e.target.value })} /></FormField>
+                <div className="form-row">
+                  <FormField label="MWST-Satz (%)">
+                    <input type="number" step="0.1" value={s.mwstRate} onChange={e => setField({ mwstRate: +e.target.value })} />
+                  </FormField>
+                  <FormField label="Standard-Stundensatz (CHF)">
+                    <input type="number" value={s.defaultHourlyRate} onChange={e => setField({ defaultHourlyRate: +e.target.value })} />
+                  </FormField>
+                </div>
+              </Section>
+            </div>
+          </div>
+
+          <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 20, marginTop: 20 }} className="responsive-grid-2">
+            <div className="card">
+              <Section title="SPESENKATEGORIEN">
+                <div style={{ fontSize: 11, color: "#aaa", marginBottom: 12 }}>Kategorien für Mitarbeiterspesen.</div>
+                {(s.expenseCategories || []).map((cat, i) => (
+                  <div key={i} style={{ display: "flex", gap: 6, marginBottom: 6, alignItems: "center" }}>
+                    <input value={cat} onChange={e => setField({ expenseCategories: (s.expenseCategories || []).map((c, j) => j === i ? e.target.value : c) })} style={{ flex: 1, fontSize: 12 }} />
+                    <button className="btn btn-danger" style={{ padding: "0 7px", height: 30, fontSize: 11 }} onClick={() => setField({ expenseCategories: (s.expenseCategories || []).filter((_, j) => j !== i) })}><span className="material-icons" style={{ fontSize: 16 }}>close</span></button>
+                  </div>
+                ))}
+                <button className="btn btn-ghost" style={{ marginTop: 4, fontSize: 11 }} onClick={() => setField({ expenseCategories: [...(s.expenseCategories || []), ""] })}>+ Kategorie</button>
+              </Section>
+            </div>
+            <div className="card">
+              <Section title="INTERNE AUSGABEN-KATEGORIEN">
+                <div style={{ fontSize: 11, color: "#aaa", marginBottom: 12 }}>Kategorien für interne Büroausgaben.</div>
+                {(s.internalExpenseCategories || []).map((cat, i) => (
+                  <div key={i} style={{ display: "flex", gap: 6, marginBottom: 6, alignItems: "center" }}>
+                    <input value={cat} onChange={e => setField({ internalExpenseCategories: (s.internalExpenseCategories || []).map((c, j) => j === i ? e.target.value : c) })} style={{ flex: 1, fontSize: 12 }} />
+                    <button className="btn btn-danger" style={{ padding: "0 7px", height: 30, fontSize: 11 }} onClick={() => setField({ internalExpenseCategories: (s.internalExpenseCategories || []).filter((_, j) => j !== i) })}><span className="material-icons" style={{ fontSize: 16 }}>close</span></button>
+                  </div>
+                ))}
+                <button className="btn btn-ghost" style={{ marginTop: 4, fontSize: 11 }} onClick={() => setField({ internalExpenseCategories: [...(s.internalExpenseCategories || []), ""] })}>+ Kategorie</button>
+              </Section>
+            </div>
+          </div>
+          </>
+        )}
+
+        {/* ── Tab: Dokumente & Formate ── */}
+        {tab === "dokumente" && (
+          <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 20 }} className="responsive-grid-2">
+            <div className="card">
+              <Section title="NUMMERNFORMATE">
+                <div style={{ fontSize: 11, color: "#aaa", marginBottom: 14 }}>
+                  <code style={{ background: "#f0ede8", padding: "1px 4px", borderRadius: 2 }}>YYYY</code> = {_yyyy}  
+                  <code style={{ background: "#f0ede8", padding: "1px 4px", borderRadius: 2 }}>YY</code> = {_yy}  
+                  <code style={{ background: "#f0ede8", padding: "1px 4px", borderRadius: 2 }}>MM</code> = Monat  
+                  <code style={{ background: "#f0ede8", padding: "1px 4px", borderRadius: 2 }}>NN</code> = laufende Nr.
+                </div>
+                <FmtRow label="Projektnummer" value={s.projectNumberFormat || "YYYY/NN"} onChange={v => setField({ projectNumberFormat: v })} placeholder="YYYY/NN" preview={applyProjectNumberFormat(s.projectNumberFormat || "YYYY/NN", 1)} />
+                <FmtRow label="Rechnungsnummer" value={invFmt} onChange={v => setField({ invoiceNumberFormat: v })} placeholder="YYYY-NNN" preview={invFmtPreview} />
+                <FmtRow label="Protokollnummer" value={protoFmt} onChange={v => setField({ protokollNumberFormat: v })} placeholder="PP-TT-NN" preview={protoFmtPreview} />
+                <div style={{ fontSize: 11, color: "#aaa", marginTop: 8, lineHeight: 1.8 }}>
+                  <code style={{ background: "#f0ede8", padding: "1px 4px", borderRadius: 2 }}>PP</code> = Projektnr. ohne Jahreszahl  
+                  <code style={{ background: "#f0ede8", padding: "1px 4px", borderRadius: 2 }}>PPP</code> = Projektnr. komplett  
+                  <code style={{ background: "#f0ede8", padding: "1px 4px", borderRadius: 2 }}>TT</code> = Sitzungstyp
+                </div>
+              </Section>
+
+              <Section title="PDF-DATEINAME">
+                <div style={{ marginBottom: 8 }}>
+                  <input value={s.pdfNameFormat || "{studio}_{typ}_{nummer}"} onChange={e => setField({ pdfNameFormat: e.target.value })} style={{ width: "100%", fontFamily: "monospace" }} placeholder="{studio}_{typ}_{nummer}" />
+                </div>
+                <div style={{ fontSize: 11, color: "#aaa", lineHeight: 1.8 }}>
+                  <code style={{ background: "#f0ede8", padding: "1px 4px", borderRadius: 2 }}>{"{studio}"}</code>  
+                  <code style={{ background: "#f0ede8", padding: "1px 4px", borderRadius: 2 }}>{"{typ}"}</code>  
+                  <code style={{ background: "#f0ede8", padding: "1px 4px", borderRadius: 2 }}>{"{nummer}"}</code>  
+                  <code style={{ background: "#f0ede8", padding: "1px 4px", borderRadius: 2 }}>{"{kunde}"}</code>  
+                  <code style={{ background: "#f0ede8", padding: "1px 4px", borderRadius: 2 }}>{"{datum}"}</code>
+                </div>
+              </Section>
+            </div>
+
+            <div style={{ display: "flex", flexDirection: "column", gap: 20 }}>
+              <div className="card">
+                <Section title="SEITENRÄNDER (MM)">
+                  <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: "8px 16px" }}>
+                    {[["pageMarginTop", "Oben"], ["pageMarginBottom", "Unten"], ["pageMarginLeft", "Links"], ["pageMarginRight", "Rechts"]].map(([key, label]) => (
+                      <div key={key}>
+                        <div style={{ fontSize: 11, color: "#888", marginBottom: 4 }}>{label}</div>
+                        <input type="number" min={0} max={60} value={s[key] ?? 20} onChange={e => setField({ [key]: +e.target.value })} style={{ width: "100%", fontFamily: "monospace" }} />
+                      </div>
+                    ))}
+                  </div>
+                  <div style={{ fontSize: 11, color: "#aaa", marginTop: 10 }}>Gilt für alle Dokumente ausser QR-Rechnung.</div>
+                </Section>
+              </div>
+
+              <div className="card">
+                <Section title="DRUCKOPTIONEN">
+                  <label style={{ display: "flex", alignItems: "center", gap: 10, cursor: "pointer", fontSize: 13, color: "#1a1a18", marginBottom: 10 }}>
+                    <input type="checkbox" checked={!!s.autoPrint} onChange={e => setField({ autoPrint: e.target.checked })} style={{ width: "auto" }} />
+                    Druckdialog automatisch öffnen
+                  </label>
+                  <label style={{ display: "flex", alignItems: "center", gap: 10, cursor: "pointer", fontSize: 13, color: "#1a1a18" }}>
+                    <input type="checkbox" checked={s.qrNewPage !== false} onChange={e => setField({ qrNewPage: e.target.checked })} style={{ width: "auto" }} />
+                    QR-Rechnung auf separater Seite
+                  </label>
+                </Section>
+              </div>
+
+              <div className="card">
+                <div style={{ display: "flex", justifyContent: "space-between", alignItems: "center", marginBottom: 14, paddingBottom: 8, borderBottom: "1px solid #ece8e2" }}>
+                  <div style={{ fontSize: 10, letterSpacing: "0.12em", color: "#aaa", fontWeight: 600 }}>PROTOKOLL-TYPKÜRZEL</div>
+                  <button className="btn btn-ghost" style={{ padding: "3px 10px", fontSize: 11 }} onClick={() => setField({ protokollTypeAbbreviations: { ...protoAbbr, "Neuer Typ": "NT" } })}>+ Typ</button>
+                </div>
+                <div style={{ fontSize: 11, color: "#aaa", marginBottom: 12 }}>
+                  Kürzel für Platzhalter <code style={{ background: "#f0ede8", padding: "1px 4px", borderRadius: 2 }}>TT</code> in der Protokollnummer.
+                </div>
+                <div style={{ display: "flex", flexDirection: "column", gap: 6 }}>
+                  {Object.entries(protoAbbr).map(([typName, kuerzel]) => (
+                    <div key={typName} style={{ display: "flex", gap: 6, alignItems: "center" }}>
+                      <input defaultValue={typName} onBlur={e => {
+                        const newName = e.target.value.trim();
+                        if (!newName || newName === typName) { e.target.value = typName; return; }
+                        const newAbbr = Object.fromEntries(Object.entries(protoAbbr).map(([k, v]) => [k === typName ? newName : k, v]));
+                        setField({ protokollTypeAbbreviations: newAbbr });
+                      }} placeholder="Sitzungstyp" style={{ flex: 1, fontSize: 12 }} />
+                      <input value={kuerzel} onChange={e => setField({ protokollTypeAbbreviations: { ...protoAbbr, [typName]: e.target.value.toUpperCase().slice(0, 4) } })}
+                        placeholder="BS" style={{ width: 52, textAlign: "center", fontWeight: 600, fontSize: 12, fontFamily: "monospace" }} maxLength={4} />
+                      <button className="btn btn-danger" style={{ padding: "0 7px", height: 30, fontSize: 11 }} onClick={() => setField({ protokollTypeAbbreviations: Object.fromEntries(Object.entries(protoAbbr).filter(([k]) => k !== typName)) })}><span className="material-icons" style={{ fontSize: 16 }}>close</span></button>
+                    </div>
+                  ))}
+                </div>
+              </div>
+            </div>
+          </div>
+        )}
+
+        {/* ── Tab: Team & Rollen ── */}
+        {tab === "team" && (
+          <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 20 }} className="responsive-grid-2">
+            <div style={{ display: "flex", flexDirection: "column", gap: 20 }}>
+              <div className="card">
+                <Section title="MITARBEITER-STANDARDS">
+                  <div style={{ fontSize: 11, color: "#aaa", marginBottom: 14 }}>Vorausgefüllt bei neuen Mitarbeitern.</div>
+                  <FormField label="Wochenstunden (100%)">
+                    <input type="number" min={1} max={50} step={0.5} value={s.defaultWochenstunden || 35} onChange={e => setField({ defaultWochenstunden: +e.target.value })} />
+                  </FormField>
+                  <FormField label="Ferienwochen / Jahr">
+                    <input type="number" min={4} max={10} step={0.5} value={s.defaultFerienWochen || 5} onChange={e => setField({ defaultFerienWochen: +e.target.value })} />
+                    <div style={{ fontSize: 11, color: "#aaa", marginTop: 3 }}>Minimum gesetzlich: 4 Wochen</div>
+                  </FormField>
+                  <FormField label="PK / BVG AG-Anteil %">
+                    <input type="number" min={0} step={0.1} value={s.defaultPkAGSatz ?? 8.0} onChange={e => setField({ defaultPkAGSatz: +e.target.value })} />
+                  </FormField>
+                </Section>
+              </div>
+
+              <div className="card">
+                <div style={{ display: "flex", justifyContent: "space-between", alignItems: "center", marginBottom: 14, paddingBottom: 8, borderBottom: "1px solid #ece8e2" }}>
+                  <div style={{ fontSize: 10, letterSpacing: "0.12em", color: "#aaa", fontWeight: 600 }}>ROLLEN FÜR OFFERTEN</div>
+                  <button className="btn btn-ghost" style={{ padding: "3px 10px", fontSize: 11 }} onClick={() => setField({ roles: [...(s.roles || []), { id: "", label: "", rate: s.defaultHourlyRate || 120 }] })}>+ Rolle</button>
+                </div>
+                <div style={{ fontSize: 11, color: "#aaa", marginBottom: 12 }}>Kürzel, Bezeichnung und Stundensatz für Aufwandschätzungen in Offerten.</div>
+                {(s.roles || []).map((r, idx) => (
+                  <div key={idx} style={{ display: "flex", gap: 6, marginBottom: 8, alignItems: "center" }}>
+                    <input value={r.id} onChange={e => setField({ roles: s.roles.map((x, i) => i === idx ? { ...x, id: e.target.value.toUpperCase().slice(0, 3) } : x) })} placeholder="PL" style={{ width: 46, textAlign: "center", fontSize: 11 }} />
+                    <input value={r.label} onChange={e => setField({ roles: s.roles.map((x, i) => i === idx ? { ...x, label: e.target.value } : x) })} placeholder="Bezeichnung" style={{ flex: 1, fontSize: 12 }} />
+                    <input type="number" value={r.rate} onChange={e => setField({ roles: s.roles.map((x, i) => i === idx ? { ...x, rate: +e.target.value } : x) })} style={{ width: 72, textAlign: "right", fontSize: 12 }} />
+                    <span style={{ fontSize: 11, color: "#888" }}>CHF/h</span>
+                    <button className="btn btn-danger" style={{ padding: "0 7px", height: 30, fontSize: 11 }} onClick={() => setField({ roles: s.roles.filter((_, i) => i !== idx) })}><span className="material-icons" style={{ fontSize: 16 }}>close</span></button>
+                  </div>
+                ))}
+              </div>
+            </div>
+
+            <div className="card">
+              <div style={{ display: "flex", justifyContent: "space-between", alignItems: "center", marginBottom: 8, paddingBottom: 8, borderBottom: "1px solid #ece8e2" }}>
+                <div style={{ fontSize: 10, letterSpacing: "0.12em", color: "#aaa", fontWeight: 600 }}>APP-ROLLEN & BERECHTIGUNGEN</div>
+                <button className="btn btn-ghost" style={{ padding: "3px 10px", fontSize: 11 }} onClick={addRole}>+ Rolle</button>
+              </div>
+              <div style={{ fontSize: 11, color: "#aaa", marginBottom: 16 }}>
+                Rollen bestimmen, welche Bereiche Mitarbeitende sehen können.
+              </div>
+
+              {appRoles.map(role => (
+                <div key={role.id} style={{ marginBottom: 10, border: "1.5px solid #ece8e2", borderRadius: 8, overflow: "hidden" }}>
+                  <div style={{ display: "flex", alignItems: "center", justifyContent: "space-between", padding: "10px 14px", background: "#faf8f5" }}>
+                    <div>
+                      <div style={{ fontSize: 13, fontWeight: 500 }}>{role.name}</div>
+                      <div style={{ fontSize: 11, color: "#aaa", marginTop: 2 }}>
+                        {role.permissions === null ? "Voller Zugriff" : `${(role.permissions || []).length} Bereiche`}
+                        {" · "}{(data.users || []).filter(u => u.appRoleId === role.id).length} Benutzer
+                      </div>
+                    </div>
+                    <div style={{ display: "flex", gap: 6 }}>
+                      {editingRoleId === role.id
+                        ? <><button className="btn btn-primary" style={{ padding: "4px 12px", fontSize: 11 }} onClick={saveRole}>Speichern</button>
+                           <button className="btn btn-ghost" style={{ padding: "4px 10px", fontSize: 11 }} onClick={() => setEditingRoleId(null)}>Abbrechen</button></>
+                        : <button className="btn btn-ghost" style={{ padding: "4px 10px", fontSize: 11 }} onClick={() => openEditRole(role)}><span className="material-icons" style={{ fontSize: 16 }}>edit</span></button>
+                      }
+                      {role.id !== "r-admin" && <button className="btn btn-danger" style={{ padding: "4px 8px", fontSize: 11 }} onClick={() => deleteRole(role.id)}><span className="material-icons" style={{ fontSize: 16 }}>close</span></button>}
+                    </div>
+                  </div>
+
+                  {editingRoleId === role.id && roleForm && (
+                    <div style={{ padding: "14px 14px 10px", borderTop: "1px solid #ece8e2" }}>
+                      <div style={{ marginBottom: 12 }}>
+                        <label style={{ fontSize: 11, color: "#888", display: "block", marginBottom: 5 }}>Rollenname</label>
+                        <input value={roleForm.name} onChange={e => setRoleForm({ ...roleForm, name: e.target.value })} style={{ fontSize: 13, width: "100%", maxWidth: 300 }} />
+                      </div>
+                      <div style={{ marginBottom: 14 }}>
+                        <label style={{ display: "flex", alignItems: "center", gap: 8, cursor: "pointer", fontSize: 12, marginBottom: 10 }}>
+                          <input type="checkbox" checked={roleForm.permissions === null}
+                            onChange={e => setRoleForm({ ...roleForm, permissions: e.target.checked ? null : ["dashboard"] })}
+                            style={{ width: "auto" }} />
+                          Voller Zugriff (Administrator)
+                        </label>
+                        {roleForm.permissions !== null && (
+                          <div style={{ display: "grid", gridTemplateColumns: "repeat(auto-fill, minmax(180px, 1fr))", gap: "10px 20px" }}>
+                            {PERMISSION_GROUPS.map(group => (
+                              <div key={group.label}>
+                                <div style={{ fontSize: 10, letterSpacing: "0.1em", color: "#aaa", marginBottom: 6, fontWeight: 600 }}>{group.label.toUpperCase()}</div>
+                                {group.items.map(perm => (
+                                  <label key={perm.id} style={{ display: "flex", alignItems: "center", gap: 7, cursor: "pointer", fontSize: 12, marginBottom: 5 }}>
+                                    <input type="checkbox" checked={(roleForm.permissions || []).includes(perm.id)} onChange={() => togglePerm(perm.id)} style={{ width: "auto" }} />
+                                    {perm.label}
+                                  </label>
+                                ))}
+                              </div>
+                            ))}
+                          </div>
+                        )}
+                      </div>
+                      <div style={{ paddingTop: 10, borderTop: "1px solid #ece8e2" }}>
+                        <label style={{ fontSize: 11, color: "#888", display: "block", marginBottom: 6 }}>Dashboard-Vorlage</label>
+                        <select value={roleForm.dashboardTemplateId || ""} onChange={e => setRoleForm({ ...roleForm, dashboardTemplateId: e.target.value || null })} style={{ width: "100%", maxWidth: 300 }}>
+                          <option value="">— keine —</option>
+                          {(data.dashboardTemplates || []).filter(t => t.isPublic).map(t => <option key={t.id} value={t.id}>{t.name}</option>)}
+                        </select>
+                      </div>
+                    </div>
+                  )}
+                </div>
+              ))}
+            </div>
+          </div>
+        )}
+
+        {/* ── Tab: Feiertage & Absenzen ── */}
+        {tab === "kalender" && (
+          <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 20 }} className="responsive-grid-2">
+            <div className="card">
+              <div style={{ display: "flex", justifyContent: "space-between", alignItems: "center", marginBottom: 14, paddingBottom: 8, borderBottom: "1px solid #ece8e2" }}>
+                <div style={{ fontSize: 10, letterSpacing: "0.12em", color: "#aaa", fontWeight: 600 }}>FEIERTAGE</div>
+                <button className="btn btn-ghost" style={{ padding: "3px 10px", fontSize: 11 }} onClick={() => { setFtForm({ date: "", label: "", stundenDelta: 0, repeatsYearly: true }); setKalModal("ft"); }}>+ Feiertag</button>
+              </div>
+              <div style={{ fontSize: 11, color: "#aaa", marginBottom: 14, lineHeight: 1.6 }}>
+                Gelten für alle Mitarbeiter. Jährlich wiederkehrende werden automatisch übertragen. Mit «Stunden-Delta» lassen sich Halbfeiertage definieren (z.B. −3.5h für den 24.12.).
+              </div>
+              <div className="card" style={{ padding: 0, marginBottom: feiertage.length === 0 ? 12 : 0 }}>
+                <table>
+                  <thead><tr><th>Datum</th><th>Bezeichnung</th><th style={{ textAlign: "right" }}>Delta</th><th></th></tr></thead>
+                  <tbody>
+                    {feiertage.length === 0 && <tr><td colSpan={4} style={{ textAlign: "center", color: "#aaa", padding: 24 }}>Noch keine Feiertage erfasst</td></tr>}
+                    {[...feiertage].sort((a, b) => (a.date || "").slice(5).localeCompare((b.date || "").slice(5))).map(f => (
+                      <tr key={f.id}>
+                        <td style={{ fontSize: 12 }}>{f.repeatsYearly ? f.date.slice(5).replace("-", ".") + " ↻" : f.date ? new Date(f.date).toLocaleDateString("de-CH") : "—"}</td>
+                        <td style={{ fontWeight: 500, fontSize: 12 }}>{f.label}</td>
+                        <td style={{ textAlign: "right", fontSize: 12, color: f.stundenDelta < 0 ? "#b5621e" : "#aaa" }}>{f.stundenDelta === 0 || f.stundenDelta === null ? "ganztag" : `${f.stundenDelta}h`}</td>
+                        <td style={{ textAlign: "right", whiteSpace: "nowrap" }}>
+                          <button className="btn btn-ghost" style={{ padding: "3px 8px", fontSize: 11, marginRight: 4 }} onClick={() => { setFtForm({ ...f }); setKalModal("ft"); }}><span className="material-icons" style={{ fontSize: 16 }}>edit</span></button>
+                          <button className="btn btn-danger" style={{ padding: "3px 8px", fontSize: 11 }} onClick={() => delFt(f.id)}><span className="material-icons" style={{ fontSize: 16 }}>close</span></button>
+                        </td>
+                      </tr>
+                    ))}
+                  </tbody>
+                </table>
+              </div>
+              {feiertage.length === 0 && (
+                <button className="btn btn-ghost" style={{ fontSize: 11, width: "100%" }} onClick={() => {
+                  const easterSunday = (year) => {
+                    const a = year%19, b = Math.floor(year/100), c = year%100;
+                    const d = Math.floor(b/4), e = b%4, f = Math.floor((b+8)/25);
+                    const g = Math.floor((b-f+1)/3), h = (19*a+b-d-g+15)%30;
+                    const i = Math.floor(c/4), k = c%4;
+                    const l = (32+2*e+2*i-h-k)%7;
+                    const m = Math.floor((a+11*h+22*l)/451);
+                    const month = Math.floor((h+l-7*m+114)/31);
+                    const day = ((h+l-7*m+114)%31)+1;
+                    return new Date(year, month-1, day);
+                  };
+                  const addDays = (date, days) => { const d = new Date(date); d.setDate(d.getDate()+days); return d; };
+                  const fmt = (date) => `${date.getFullYear()}-${String(date.getMonth()+1).padStart(2,'0')}-${String(date.getDate()).padStart(2,'0')}`;
+                  const yr = new Date().getFullYear();
+                  const fixe = [
+                    { label: "Neujahr", date: "2000-01-01", stundenDelta: 0, repeatsYearly: true },
+                    { label: "Berchtoldstag", date: "2000-01-02", stundenDelta: 0, repeatsYearly: true },
+                    { label: "Tag der Arbeit", date: "2000-05-01", stundenDelta: 0, repeatsYearly: true },
+                    { label: "Nationalfeiertag", date: "2000-08-01", stundenDelta: 0, repeatsYearly: true },
+                    { label: "Weihnachten", date: "2000-12-25", stundenDelta: 0, repeatsYearly: true },
+                    { label: "Stephanstag", date: "2000-12-26", stundenDelta: 0, repeatsYearly: true },
+                    { label: "Heiligabend (Halbtag)", date: "2000-12-24", stundenDelta: -3.5, repeatsYearly: true },
+                    { label: "Silvester (Halbtag)", date: "2000-12-31", stundenDelta: -3.5, repeatsYearly: true },
+                  ].map(f => ({ ...f, id: generateId() }));
+                  const beweglich = [];
+                  for (let y = yr; y <= yr+3; y++) {
+                    const ostern = easterSunday(y);
+                    [
+                      { label: "Karfreitag", offset: -2 },
+                      { label: "Ostermontag", offset: 1 },
+                      { label: "Auffahrt", offset: 39 },
+                      { label: "Auffahrt Vortag (Halbtag)", offset: 38, stundenDelta: -3.5 },
+                      { label: "Pfingstmontag", offset: 50 },
+                    ].forEach(({ label, offset, stundenDelta = 0 }) => {
+                      beweglich.push({ id: generateId(), label, date: fmt(addDays(ostern, offset)), stundenDelta, repeatsYearly: false });
+                    });
+                  }
+                  update("feiertage", [...feiertage, ...fixe, ...beweglich]);
+                }}>↓ CH-Vorlagen laden (inkl. Ostern, Auffahrt, Pfingsten…)</button>
+              )}
+            </div>
+
+            <div className="card">
+              <div style={{ display: "flex", justifyContent: "space-between", alignItems: "center", marginBottom: 14, paddingBottom: 8, borderBottom: "1px solid #ece8e2" }}>
+                <div style={{ fontSize: 10, letterSpacing: "0.12em", color: "#aaa", fontWeight: 600 }}>ABSENZTYPEN</div>
+                <button className="btn btn-ghost" style={{ padding: "3px 10px", fontSize: 11 }} onClick={() => { setAbsenzTypeForm({ label: "", color: "#555" }); setKalModal("absenztype"); }}>+ Typ</button>
+              </div>
+              <table>
+                <thead><tr><th>Bezeichnung</th><th>Farbe</th><th>Typ</th><th></th></tr></thead>
+                <tbody>
+                  {absenzTypes.map(t => {
+                    const inUse = (data.absences || []).some(a => a.type === t.id);
+                    const isDefault = defaultAbsenzIds.has(t.id);
+                    const isOverridden = isDefault && (data.absenzTypes || []).some(x => x.id === t.id);
+                    return (
+                      <tr key={t.id}>
+                        <td><span className="tag" style={{ background: t.color, fontSize: 10 }}>{t.label}</span></td>
+                        <td style={{ color: "#888", fontSize: 12 }}>{t.color}</td>
+                        <td style={{ fontSize: 11, color: isDefault ? (isOverridden ? "#b07848" : "#aaa") : "#2d6a4f" }}>
+                          {isDefault ? (isOverridden ? "Angepasst" : "Standard") : "Eigener"}
+                        </td>
+                        <td style={{ textAlign: "right", whiteSpace: "nowrap" }}>
+                          <button className="btn btn-ghost" style={{ padding: "3px 8px", fontSize: 11, marginRight: 4 }} onClick={() => { setAbsenzTypeForm(t); setKalModal("absenztype"); }}><span className="material-icons" style={{ fontSize: 16 }}>edit</span></button>
+                          <button className="btn btn-danger" style={{ padding: "3px 8px", fontSize: 11, opacity: inUse ? 0.35 : 1 }} onClick={() => delAbsenzType(t.id)} title={inUse ? "In Verwendung" : "Löschen"}><span className="material-icons" style={{ fontSize: 16 }}>close</span></button>
+                        </td>
+                      </tr>
+                    );
+                  })}
+                </tbody>
+              </table>
+            </div>
+          </div>
+        )}
+
+        {/* ── Tab: System ── */}
+        {tab === "system" && (
+          <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 20 }} className="responsive-grid-2">
+            <div className="card">
+              <Section title="DATEN & BACKUP">
+                <p style={{ fontSize: 13, color: "#666", lineHeight: 1.7, marginBottom: 16 }}>
+                  Alle Daten liegen ausschliesslich im Browser (localStorage). Regelmässige Backups sind empfohlen.
+                </p>
+                <button className="btn btn-primary" style={{ width: "100%", marginBottom: 10 }} onClick={exportData}>↓ Backup als JSON herunterladen</button>
+                <label className="btn btn-ghost" style={{ width: "100%", textAlign: "center", display: "block", marginBottom: 10 }}>
+                  ↑ Backup importieren
+                  <input type="file" accept=".json" onChange={importData} style={{ display: "none" }} />
+                </label>
+                <button className="btn btn-danger" style={{ width: "100%" }} onClick={() => setInitModal(true)}>
+                  Neu initialisieren…
+                </button>
+              </Section>
+
+              <Section title="DATENBANKÜBERSICHT">
+                {[
+                  { label: "Personen", value: (data.persons || []).length },
+                  { label: "Projekte", value: data.projects.length },
+                  { label: "Zeiteinträge", value: data.timeEntries.length },
+                  { label: "Rechnungen", value: data.invoices.length },
+                  { label: "Offerten", value: (data.quotes || []).length },
+                  { label: "Spesen", value: (data.expenses || []).length },
+                  { label: "Interne Ausgaben", value: (data.internalExpenses || []).length },
+                ].map(r => (
+                  <div key={r.label} style={{ display: "flex", justifyContent: "space-between", padding: "4px 0", fontSize: 12, borderBottom: "1px solid #f0ede8" }}>
+                    <span style={{ color: "#888" }}>{r.label}</span>
+                    <strong style={{ color: "#555" }}>{r.value}</strong>
+                  </div>
+                ))}
+              </Section>
+            </div>
+
+            <div className="card">
+              <Section title="ZEITERFASSUNG">
+                <label style={{ display: "flex", alignItems: "center", gap: 10, cursor: "pointer", fontSize: 13, color: "#1a1a18" }}>
+                  <input type="checkbox" checked={s.blockMaiTag !== false} onChange={e => setField({ blockMaiTag: e.target.checked })} style={{ width: "auto" }} />
+                  Tag der Arbeit (1. Mai) in Wochenansicht sperren
+                </label>
+              </Section>
+            </div>
+          </div>
+        )}
+      </>}
+    </div>
+  );
+}
diff --git a/src/views/Setup.jsx b/src/views/Setup.jsx
new file mode 100755
index 0000000..d52c7b5
--- /dev/null
+++ b/src/views/Setup.jsx
@@ -0,0 +1,416 @@
+import React, { useState, useRef } from "react";
+import { defaultData } from "../constants.js";
+import { generateId } from "../utils.js";
+
+// ─── Palette — matches the app's light theme exactly ─────────────────────────
+const C = {
+  bg:       "#ebe7e1",
+  surface:  "#fdfcfa",
+  surface2: "#f7f4f0",
+  border:   "#ddd8d0",
+  border2:  "#e6e1da",
+  text:     "#1a1a18",
+  text3:    "#6a6660",
+  text4:    "#8c8880",
+  danger:   "#8a1a1a",
+  dangerBg: "#fdf2f2",
+  dangerBorder: "#e0b0b0",
+};
+
+const S = {
+  wrap: {
+    background: C.bg,
+    minHeight: "100vh",
+    display: "flex",
+    alignItems: "center",
+    justifyContent: "center",
+    fontFamily: "'DM Mono','Courier New',monospace",
+    color: C.text,
+    padding: "32px 16px",
+  },
+  card: {
+    width: "100%",
+    maxWidth: 460,
+    background: C.surface,
+    borderRadius: 14,
+    padding: "44px 40px",
+    boxShadow: "0 2px 24px rgba(60,50,40,0.10)",
+    border: `1px solid ${C.border}`,
+  },
+  logo: {
+    fontFamily: "Krungthep,'Archivo Black',sans-serif",
+    fontSize: 34,
+    color: C.text,
+    letterSpacing: "-0.02em",
+    textAlign: "center",
+    marginBottom: 4,
+  },
+  sub: {
+    textAlign: "center",
+    fontSize: 10,
+    color: C.text4,
+    letterSpacing: "0.14em",
+    marginBottom: 32,
+  },
+  progress: {
+    display: "flex",
+    gap: 6,
+    justifyContent: "center",
+    marginBottom: 32,
+  },
+  dot: (active, done) => ({
+    width: active ? 22 : 8,
+    height: 8,
+    borderRadius: 4,
+    background: done ? C.text : active ? C.text : C.border,
+    opacity: done ? 1 : active ? 1 : 0.4,
+    transition: "all 0.3s",
+  }),
+  label: {
+    fontSize: 9,
+    letterSpacing: "0.14em",
+    color: C.text4,
+    display: "block",
+    marginBottom: 5,
+    marginTop: 16,
+  },
+  input: {
+    width: "100%",
+    boxSizing: "border-box",
+    background: C.surface,
+    border: `1px solid ${C.border}`,
+    borderRadius: 6,
+    padding: "9px 12px",
+    color: C.text,
+    fontFamily: "'DM Mono',monospace",
+    fontSize: 13,
+    outline: "none",
+    transition: "border-color 0.15s",
+  },
+  inputErr: { border: `1px solid ${C.dangerBorder}` },
+  textarea: {
+    width: "100%",
+    boxSizing: "border-box",
+    background: C.surface,
+    border: `1px solid ${C.border}`,
+    borderRadius: 6,
+    padding: "9px 12px",
+    color: C.text,
+    fontFamily: "'DM Mono',monospace",
+    fontSize: 13,
+    outline: "none",
+    resize: "vertical",
+    minHeight: 64,
+  },
+  err: { fontSize: 11, color: C.danger, marginTop: 4 },
+  hint: { fontSize: 11, color: C.text4, marginTop: 5, lineHeight: 1.5 },
+  btnPrimary: {
+    width: "100%",
+    background: C.text,
+    border: "none",
+    borderRadius: 8,
+    padding: "12px 0",
+    color: "#fff",
+    fontFamily: "'DM Mono',monospace",
+    fontSize: 13,
+    cursor: "pointer",
+    marginTop: 28,
+    letterSpacing: "0.04em",
+    transition: "opacity 0.15s",
+  },
+  btnGhost: {
+    width: "100%",
+    background: "transparent",
+    border: `1px solid ${C.border}`,
+    borderRadius: 8,
+    padding: "10px 0",
+    color: C.text4,
+    fontFamily: "'DM Mono',monospace",
+    fontSize: 12,
+    cursor: "pointer",
+    marginTop: 10,
+  },
+};
+
+// ─── Prompt for users with existing data ─────────────────────────────────────
+
+export function SetupPrompt({ onSetup, onSkip }) {
+  return (
+    <div style={S.wrap}>
+      <div style={S.card}>
+        <div style={S.logo}>RAPPORT</div>
+        <div style={S.sub}>NEUE VERSION</div>
+
+        <div style={{ fontFamily: "'Playfair Display',serif", fontSize: 20, color: C.text, marginBottom: 10 }}>
+          Neuer Einrichtungsassistent.
+        </div>
+        <div style={{ fontSize: 12, color: C.text3, lineHeight: 1.7, marginBottom: 24 }}>
+          Rapport verfügt über einen neuen Setup-Assistenten für Studio, Admin-Account und Mitarbeiterprofil.
+          Möchtest du ihn durchlaufen?
+        </div>
+
+        <div style={{ background: C.dangerBg, border: `1px solid ${C.dangerBorder}`, borderRadius: 8, padding: "10px 14px", fontSize: 11, color: C.danger, marginBottom: 4 }}>
+          Neu einrichten löscht alle bestehenden Daten unwiderruflich.
+        </div>
+
+        <button onClick={onSetup} style={{ ...S.btnPrimary, marginTop: 16 }}>Neu einrichten</button>
+        <button onClick={onSkip} style={S.btnGhost}>Vorhandene Daten behalten →</button>
+      </div>
+    </div>
+  );
+}
+
+// ─── Main setup wizard ────────────────────────────────────────────────────────
+
+export default function Setup({ onComplete }) {
+  const TOTAL = 3;
+  const [step, setStep]     = useState(1);
+  const [studio, setStudio] = useState({ name: "", address: "", email: "", phone: "" });
+  const [account, setAccount] = useState({ displayName: "", username: "admin", password: "", confirm: "" });
+  const [errors, setErrors] = useState({});
+  const [showPw, setShowPw] = useState(false);
+  const [importErr, setImportErr] = useState("");
+  const importRef = useRef(null);
+
+  const handleImport = (e) => {
+    const file = e.target.files?.[0];
+    if (!file) return;
+    const reader = new FileReader();
+    reader.onload = (ev) => {
+      try {
+        const parsed = JSON.parse(ev.target.result);
+        if (!parsed.settings || !Array.isArray(parsed.projects)) {
+          setImportErr("Ungültiges Backup-Format.");
+          return;
+        }
+        onComplete({
+          ...defaultData,
+          ...parsed,
+          settings: { ...defaultData.settings, ...parsed.settings, setupCompleted: true },
+          appRoles: parsed.appRoles || defaultData.appRoles,
+          users: parsed.users || defaultData.users,
+        });
+      } catch {
+        setImportErr("Datei konnte nicht gelesen werden.");
+      }
+    };
+    reader.readAsText(file);
+    e.target.value = "";
+  };
+
+  const setS = (k, v) => setStudio(s => ({ ...s, [k]: v }));
+  const setA = (k, v) => setAccount(a => ({ ...a, [k]: v }));
+  const clearErr = k => setErrors(e => { const n = { ...e }; delete n[k]; return n; });
+
+  const validate = () => {
+    const errs = {};
+    if (step === 1 && !studio.name.trim()) errs.name = "Pflichtfeld";
+    if (step === 2) {
+      if (!account.displayName.trim()) errs.displayName = "Pflichtfeld";
+      if (!account.username.trim())    errs.username = "Pflichtfeld";
+      if (account.password.length < 4) errs.password = "Mindestens 4 Zeichen";
+      if (account.password !== account.confirm) errs.confirm = "Passwörter stimmen nicht überein";
+    }
+    setErrors(errs);
+    return Object.keys(errs).length === 0;
+  };
+
+  const next   = () => { if (validate()) setStep(s => s + 1); };
+  const back   = () => setStep(s => s - 1);
+
+  const finish = () => {
+    const empId = generateId();
+    onComplete({
+      ...defaultData,
+      settings: {
+        ...defaultData.settings,
+        setupCompleted: true,
+        name:    studio.name.trim(),
+        address: studio.address.trim() || defaultData.settings.address,
+        email:   studio.email.trim()   || defaultData.settings.email,
+        phone:   studio.phone.trim()   || defaultData.settings.phone,
+      },
+      users: [{
+        id: "admin",
+        username:    account.username.trim(),
+        password:    account.password,
+        role:        "admin",
+        displayName: account.displayName.trim(),
+        appRoleId:   "r-admin",
+        employeeId:  empId,
+      }],
+      employees: [{
+        id: empId,
+        name: account.displayName.trim(),
+        email: studio.email.trim() || "",
+        wochenstunden: defaultData.settings.defaultWochenstunden || 35,
+        ferienWochen:  defaultData.settings.defaultFerienWochen  || 5,
+        eintrittsdatum: new Date().toISOString().slice(0, 10),
+        aktiv: true,
+        appUserId: "admin",
+      }],
+    });
+  };
+
+  const Progress = () => (
+    <div style={S.progress}>
+      {Array.from({ length: TOTAL }, (_, i) => (
+        <div key={i} style={S.dot(i + 1 === step, i + 1 < step)} />
+      ))}
+    </div>
+  );
+
+  const Header = ({ step: n, title, lead }) => (
+    <>
+      <div style={S.logo}>RAPPORT</div>
+      <div style={S.sub}>SCHRITT {n} VON {TOTAL}</div>
+      <Progress />
+      <div style={{ fontFamily: "'Playfair Display',serif", fontSize: 20, color: C.text, marginBottom: 6 }}>{title}</div>
+      {lead && <div style={{ fontSize: 12, color: C.text3, lineHeight: 1.65, marginBottom: 20 }}>{lead}</div>}
+    </>
+  );
+
+  // ── Step 1: Studio ──────────────────────────────────────────────────────────
+  if (step === 1) return (
+    <div style={S.wrap}>
+      <div style={S.card}>
+        <Header step={1} title="Willkommen."
+          lead="Lass uns Rapport für dein Studio einrichten. Das dauert weniger als zwei Minuten." />
+
+        <label style={S.label}>STUDIO / UNTERNEHMEN *</label>
+        <input
+          style={{ ...S.input, ...(errors.name ? S.inputErr : {}) }}
+          placeholder="Muster Architektur GmbH"
+          autoFocus
+          value={studio.name}
+          onChange={e => { setS("name", e.target.value); clearErr("name"); }}
+          onKeyDown={e => e.key === "Enter" && next()}
+        />
+        {errors.name && <div style={S.err}>{errors.name}</div>}
+
+        <label style={S.label}>ADRESSE</label>
+        <textarea
+          style={S.textarea}
+          placeholder={"Musterstrasse 1\n8001 Zürich"}
+          value={studio.address}
+          onChange={e => setS("address", e.target.value)}
+        />
+
+        <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 12 }}>
+          <div>
+            <label style={S.label}>E-MAIL</label>
+            <input style={S.input} type="email" placeholder="mail@studio.ch"
+              value={studio.email} onChange={e => setS("email", e.target.value)} />
+          </div>
+          <div>
+            <label style={S.label}>TELEFON</label>
+            <input style={S.input} placeholder="+41 44 000 00 00"
+              value={studio.phone} onChange={e => setS("phone", e.target.value)} />
+          </div>
+        </div>
+
+        <button style={S.btnPrimary} onClick={next}>Weiter →</button>
+
+        <div style={{ display: "flex", alignItems: "center", gap: 10, margin: "18px 0 4px" }}>
+          <div style={{ flex: 1, height: 1, background: C.border }} />
+          <span style={{ fontSize: 10, color: C.text4, letterSpacing: "0.1em" }}>ODER</span>
+          <div style={{ flex: 1, height: 1, background: C.border }} />
+        </div>
+
+        <input ref={importRef} type="file" accept=".json" style={{ display: "none" }} onChange={handleImport} />
+        <button style={S.btnGhost} onClick={() => { setImportErr(""); importRef.current?.click(); }}>
+          Backup importieren
+        </button>
+        {importErr && <div style={{ ...S.err, textAlign: "center", marginTop: 8 }}>{importErr}</div>}
+      </div>
+    </div>
+  );
+
+  // ── Step 2: Admin-Account ───────────────────────────────────────────────────
+  if (step === 2) return (
+    <div style={S.wrap}>
+      <div style={S.card}>
+        <Header step={2} title="Dein Account."
+          lead="Dieser Account hat vollen Systemzugriff. Weitere Mitarbeitende können später mit eingeschränkten Berechtigungen hinzugefügt werden." />
+
+        <label style={S.label}>DEIN NAME *</label>
+        <input
+          style={{ ...S.input, ...(errors.displayName ? S.inputErr : {}) }}
+          placeholder="Anna Muster"
+          autoFocus
+          value={account.displayName}
+          onChange={e => { setA("displayName", e.target.value); clearErr("displayName"); }}
+        />
+        {errors.displayName && <div style={S.err}>{errors.displayName}</div>}
+        <div style={S.hint}>Wird als Mitarbeiterprofil angelegt und im System angezeigt.</div>
+
+        <label style={S.label}>BENUTZERNAME *</label>
+        <input
+          style={{ ...S.input, ...(errors.username ? S.inputErr : {}) }}
+          placeholder="admin"
+          value={account.username}
+          onChange={e => { setA("username", e.target.value.toLowerCase().replace(/\s/g, "")); clearErr("username"); }}
+        />
+        {errors.username && <div style={S.err}>{errors.username}</div>}
+
+        <label style={S.label}>PASSWORT *</label>
+        <div style={{ position: "relative" }}>
+          <input
+            style={{ ...S.input, ...(errors.password ? S.inputErr : {}), paddingRight: 80 }}
+            type={showPw ? "text" : "password"}
+            placeholder="Mindestens 4 Zeichen"
+            value={account.password}
+            onChange={e => { setA("password", e.target.value); clearErr("password"); }}
+          />
+          <button onClick={() => setShowPw(v => !v)}
+            style={{ position: "absolute", right: 10, top: "50%", transform: "translateY(-50%)", background: "none", border: "none", color: C.text4, cursor: "pointer", fontSize: 11, fontFamily: "inherit" }}>
+            {showPw ? "verbergen" : "anzeigen"}
+          </button>
+        </div>
+        {errors.password && <div style={S.err}>{errors.password}</div>}
+
+        <label style={S.label}>PASSWORT BESTÄTIGEN *</label>
+        <input
+          style={{ ...S.input, ...(errors.confirm ? S.inputErr : {}) }}
+          type={showPw ? "text" : "password"}
+          placeholder="Nochmals eingeben"
+          value={account.confirm}
+          onChange={e => { setA("confirm", e.target.value); clearErr("confirm"); }}
+          onKeyDown={e => e.key === "Enter" && next()}
+        />
+        {errors.confirm && <div style={S.err}>{errors.confirm}</div>}
+
+        <button style={S.btnPrimary} onClick={next}>Weiter →</button>
+        <button style={S.btnGhost} onClick={back}>← Zurück</button>
+      </div>
+    </div>
+  );
+
+  // ── Step 3: Done ────────────────────────────────────────────────────────────
+  return (
+    <div style={S.wrap}>
+      <div style={S.card}>
+        <Header step={3} title="Alles bereit." />
+
+        {[
+          { label: "STUDIO", value: studio.name },
+          { label: "MITARBEITER", value: account.displayName },
+          { label: "BENUTZERNAME", value: account.username },
+          { label: "ADRESSE", value: studio.address || "—" },
+        ].map(({ label, value }) => (
+          <div key={label} style={{ padding: "10px 0", borderBottom: `1px solid ${C.border2}`, display: "flex", justifyContent: "space-between", alignItems: "baseline", gap: 16 }}>
+            <div style={{ fontSize: 9, color: C.text4, letterSpacing: "0.12em", flexShrink: 0 }}>{label}</div>
+            <div style={{ fontSize: 12, color: C.text, textAlign: "right" }}>{value}</div>
+          </div>
+        ))}
+
+        <div style={{ marginTop: 20, padding: "12px 14px", background: C.surface2, borderRadius: 8, border: `1px solid ${C.border}`, fontSize: 11, color: C.text3, lineHeight: 1.65 }}>
+          Projekte, Mitarbeitende, Einstellungen und Berechtigungen können jederzeit in der App angepasst werden.
+        </div>
+
+        <button style={S.btnPrimary} onClick={finish}>Rapport starten →</button>
+        <button style={S.btnGhost} onClick={back}>← Zurück</button>
+      </div>
+    </div>
+  );
+}
diff --git a/src/views/Spesen.jsx b/src/views/Spesen.jsx
new file mode 100755
index 0000000..9e3e6d0
--- /dev/null
+++ b/src/views/Spesen.jsx
@@ -0,0 +1,914 @@
+import React, { useState, useRef } from "react";
+import { EXPENSE_CATEGORIES, INTERNAL_EXPENSE_CATEGORIES } from "../constants.js";
+import { generateId, formatCHF, formatDate } from "../utils.js";
+import { Header, Modal, FormField, StatusSelect, useConfirm, DateInput } from "../components/UI.jsx";
+
+export
+function Spesen({ data, update, saveAll, standalone, setView }) {
+  const mwstRate = data.settings.mwstRate || 8.1;
+  const expCats = data.settings.expenseCategories || EXPENSE_CATEGORIES;
+  const currentYear = new Date().getFullYear().toString();
+  const emptyExp = { date: new Date().toISOString().slice(0, 10), category: expCats[0], projectId: "", employeeId: "", description: "", amount: 0, mwstRate: mwstRate, inclMwst: true, status: "offen" };
+  const [modal, setModal] = useState(null);
+  const [form, setForm] = useState(emptyExp);
+  const [filter, setFilter] = useState({ year: currentYear, category: "", projectId: "", employeeId: "", search: "", status: "" });
+  const [compact, setCompact] = useState(true);
+  const [groupBy, setGroupBy] = useState("date"); // "date" | "category" | "project"
+  const { askConfirm, ConfirmModalEl } = useConfirm();
+  const [sort, setSort] = useState({ col: "date", dir: -1 });
+  const [receiptView, setReceiptView] = useState(null);
+  const receiptInputRef = useRef(null);
+  const [expCatModal, setExpCatModal] = useState(false);
+  const [expCatEdit, setExpCatEdit] = useState("");
+  const [expCatEditIdx, setExpCatEditIdx] = useState(null);
+  const [newExpCat, setNewExpCat] = useState("");
+
+  const years = Array.from(new Set((data.expenses || []).map(e => (e.date || "").slice(0, 4)).filter(Boolean))).sort().reverse();
+
+  const handleReceiptUpload = (e) => {
+    const file = e.target.files?.[0];
+    if (!file) return;
+    const isPdf = file.type === "application/pdf";
+    const reader = new FileReader();
+    reader.onload = (ev) => {
+      if (isPdf) {
+        setForm(f => ({ ...f, receiptData: ev.target.result, receiptName: file.name }));
+      } else {
+        const img = new Image();
+        img.onload = () => {
+          const maxW = 1600;
+          const scale = img.width > maxW ? maxW / img.width : 1;
+          const canvas = document.createElement("canvas");
+          canvas.width = Math.round(img.width * scale);
+          canvas.height = Math.round(img.height * scale);
+          canvas.getContext("2d").drawImage(img, 0, 0, canvas.width, canvas.height);
+          setForm(f => ({ ...f, receiptData: canvas.toDataURL("image/jpeg", 0.82), receiptName: file.name }));
+        };
+        img.src = ev.target.result;
+      }
+    };
+    reader.readAsDataURL(file);
+    e.target.value = "";
+  };
+
+  const openNew = () => { setForm(emptyExp); setModal("new"); };
+  const openEdit = (e) => { setForm({ ...e }); setModal(e.id); };
+  const closeModal = () => { setModal(null); setForm(emptyExp); };
+  const saveExp = () => {
+    if (!form.amount) return;
+    const isNew = modal === "new";
+    const prevStatus = isNew ? null : (data.expenses || []).find(e => e.id === modal)?.status;
+    const newId = isNew ? generateId() : modal;
+    const expenses = isNew
+      ? [...(data.expenses || []), { ...form, id: newId }]
+      : (data.expenses || []).map(e => e.id === modal ? { ...form, id: modal } : e);
+    if (form.status === "ausbezahlt" && prevStatus !== "ausbezahlt" && !form.lohnEntryId) {
+      const newInternal = {
+        id: generateId(),
+        date: form.date || new Date().toISOString().slice(0, 10),
+        category: "Sonstiges",
+        description: `Barauszahlung Spese: ${form.description || form.category}`,
+        amount: form.amount,
+        mwstRate: 0,
+        inclMwst: false,
+        recurring: false,
+      };
+      saveAll({ ...data, expenses, internalExpenses: [...(data.internalExpenses || []), newInternal] });
+    } else {
+      update("expenses", expenses);
+    }
+    closeModal();
+  };
+  const delExp = async (id) => { if (await askConfirm("Spese löschen?")) update("expenses", (data.expenses || []).filter(e => e.id !== id)); };
+
+  const handleStatusChange = (exp, v) => {
+    if (v === "ausbezahlt" && !exp.lohnEntryId) {
+      const newInternal = {
+        id: generateId(),
+        date: exp.date || new Date().toISOString().slice(0, 10),
+        category: "Sonstiges",
+        description: `Barauszahlung Spese: ${exp.description || exp.category}`,
+        amount: exp.amount,
+        mwstRate: 0,
+        inclMwst: false,
+        recurring: false,
+      };
+      saveAll({
+        ...data,
+        expenses: (data.expenses || []).map(x => x.id === exp.id ? { ...x, status: "ausbezahlt" } : x),
+        internalExpenses: [...(data.internalExpenses || []), newInternal],
+      });
+    } else {
+      update("expenses", (data.expenses || []).map(x => x.id === exp.id ? { ...x, status: v } : x));
+    }
+  };
+
+  // Filtern
+  const allFiltered = [...(data.expenses || [])].filter(e => {
+    if (filter.year && !(e.date || "").startsWith(filter.year)) return false;
+    if (filter.category && e.category !== filter.category) return false;
+    if (filter.projectId && e.projectId !== filter.projectId) return false;
+    if (filter.status && (e.status || "offen") !== filter.status) return false;
+    if (filter.employeeId && e.employeeId !== filter.employeeId) return false;
+    if (filter.search) {
+      const q = filter.search.toLowerCase();
+      const proj = data.projects.find(p => p.id === e.projectId);
+      const emp = (data.employees || []).find(em => em.id === e.employeeId);
+      if (![e.description, e.category, proj?.name, emp?.name].filter(Boolean).join(" ").toLowerCase().includes(q)) return false;
+    }
+    return true;
+  });
+
+  // Sortieren
+  const sorted = [...allFiltered].sort((a, b) => {
+    let va, vb;
+    if (sort.col === "date") { va = a.date || ""; vb = b.date || ""; }
+    else if (sort.col === "amount") { va = a.amount || 0; vb = b.amount || 0; }
+    else if (sort.col === "category") { va = a.category || ""; vb = b.category || ""; }
+    else if (sort.col === "project") {
+      va = data.projects.find(p => p.id === a.projectId)?.name || "";
+      vb = data.projects.find(p => p.id === b.projectId)?.name || "";
+    } else if (sort.col === "employee") {
+      va = (data.employees || []).find(e => e.id === a.employeeId)?.name || "";
+      vb = (data.employees || []).find(e => e.id === b.employeeId)?.name || "";
+    }
+    else { va = ""; vb = ""; }
+    return typeof va === "number" ? (va - vb) * sort.dir : va.localeCompare(vb) * sort.dir;
+  });
+
+  const toggleSort = (col) => setSort(s => ({ col, dir: s.col === col ? -s.dir : -1 }));
+  const SortTh = ({ col, children, style }) => (
+    <th onClick={() => toggleSort(col)} style={{ cursor: "pointer", userSelect: "none", ...style }}>
+      {children} <span style={{ color: sort.col === col ? "#b07848" : "#ccc", fontSize: 10 }}>{sort.col === col ? (sort.dir === 1 ? "▲" : "▼") : "⇅"}</span>
+    </th>
+  );
+
+  // Gruppieren
+  const getNet = (e) => e.inclMwst ? e.amount / (1 + (e.mwstRate || 0) / 100) : e.amount;
+  const getTax = (e) => e.amount - getNet(e);
+
+  const groupedData = (() => {
+    if (groupBy === "date") {
+      // Nach Monat gruppieren
+      const months = {};
+      sorted.forEach(e => {
+        const key = (e.date || "").slice(0, 7);
+        if (!months[key]) months[key] = [];
+        months[key].push(e);
+      });
+      return Object.entries(months).sort((a, b) => sort.dir * b[0].localeCompare(a[0])).map(([key, items]) => ({
+        key,
+        label: key ? new Date(key + "-01").toLocaleDateString("de-CH", { month: "long", year: "numeric" }) : "Ohne Datum",
+        items,
+      }));
+    }
+    if (groupBy === "category") {
+      const cats = {};
+      sorted.forEach(e => {
+        const key = e.category || "Sonstiges";
+        if (!cats[key]) cats[key] = [];
+        cats[key].push(e);
+      });
+      return Object.entries(cats).sort((a, b) => a[0].localeCompare(b[0])).map(([key, items]) => ({ key, label: key, items }));
+    }
+    if (groupBy === "project") {
+      const projs = {};
+      sorted.forEach(e => {
+        const proj = data.projects.find(p => p.id === e.projectId);
+        const key = e.projectId || "__none__";
+        const label = proj?.name || "Kein Projekt";
+        if (!projs[key]) projs[key] = { label, items: [] };
+        projs[key].items.push(e);
+      });
+      return Object.entries(projs).sort((a, b) => a[1].label.localeCompare(b[1].label)).map(([key, val]) => ({ key, label: val.label, items: val.items }));
+    }
+    return [{ key: "all", label: "", items: sorted }];
+  })();
+
+  // Totals
+  const totalNet = allFiltered.reduce((s, e) => s + getNet(e), 0);
+  const totalTax = allFiltered.reduce((s, e) => s + getTax(e), 0);
+  const totalBrutto = allFiltered.reduce((s, e) => s + (e.amount || 0), 0);
+
+  // KPI nach Kategorie für Mini-Balken
+  const categoryTotals = expCats.map(cat => ({
+    cat,
+    amount: allFiltered.filter(e => e.category === cat).reduce((s, e) => s + (e.amount || 0), 0),
+  })).filter(c => c.amount > 0).sort((a, b) => b.amount - a.amount).slice(0, 4);
+
+  const hasFilters = filter.category || filter.projectId || filter.employeeId || filter.search || filter.status;
+
+  return (
+    <div>
+      {ConfirmModalEl}
+      <ReceiptViewer expense={receiptView} onClose={() => setReceiptView(null)} />
+      {standalone && (
+        <>
+          <div style={{ display: "flex", alignItems: "center", gap: 10, marginBottom: 4 }}>
+
+          </div>
+          <Header title="Spesen" action={
+            <div style={{ display: "flex", gap: 8 }}>
+              <button className="btn btn-ghost" onClick={() => { setExpCatEdit(""); setExpCatEditIdx(null); setExpCatModal(true); }}>Kategorien verwalten</button>
+              <button className="btn btn-primary" onClick={openNew}>+ Spese erfassen</button>
+            </div>
+          } />
+
+          {expCatModal && (
+            <div style={{ position: "fixed", inset: 0, background: "rgba(0,0,0,0.4)", zIndex: 100, display: "flex", alignItems: "center", justifyContent: "center", padding: 24 }}>
+              <div className="modal" style={{ maxWidth: 420 }}>
+                <div style={{ fontSize: 18, fontFamily: "'Playfair Display', serif", fontWeight: 400, marginBottom: 20 }}>Spesenarten verwalten</div>
+                <div style={{ marginBottom: 16 }}>
+                  {expCats.map((cat, idx) => {
+                    const inUse = (data.expenses || []).some(e => e.category === cat);
+                    return (
+                      <div key={idx} style={{ display: "flex", alignItems: "center", gap: 8, marginBottom: 6 }}>
+                        {expCatEditIdx === idx ? (
+                          <input autoFocus value={expCatEdit} onChange={e => setExpCatEdit(e.target.value)}
+                            onBlur={() => {
+                              if (expCatEdit.trim()) {
+                                const updated = expCats.map((c, i) => i === idx ? expCatEdit.trim() : c);
+                                update("settings", { ...data.settings, expenseCategories: updated });
+                              }
+                              setExpCatEditIdx(null);
+                            }}
+                            onKeyDown={e => { if (e.key === "Enter") e.target.blur(); if (e.key === "Escape") setExpCatEditIdx(null); }}
+                            style={{ flex: 1, height: 30, fontSize: 12 }} />
+                        ) : (
+                          <div style={{ flex: 1, fontSize: 13, padding: "4px 0" }}>{cat}</div>
+                        )}
+                        <button className="btn btn-ghost" style={{ padding: "3px 8px", fontSize: 11 }} onClick={() => { setExpCatEdit(cat); setExpCatEditIdx(idx); }}><span className="material-icons" style={{ fontSize: 16 }}>edit</span></button>
+                        <button className="btn btn-danger" style={{ padding: "3px 8px", fontSize: 11, opacity: inUse ? 0.35 : 1 }}
+                          onClick={() => { if (!inUse) update("settings", { ...data.settings, expenseCategories: expCats.filter((_, i) => i !== idx) }); }}
+                          title={inUse ? "In Verwendung" : "Löschen"}><span className="material-icons" style={{ fontSize: 16 }}>close</span></button>
+                      </div>
+                    );
+                  })}
+                </div>
+                <div style={{ display: "flex", gap: 8, marginBottom: 20 }}>
+                  <input value={newExpCat} placeholder="Neue Kategorie…"
+                    onChange={e => setNewExpCat(e.target.value)}
+                    onKeyDown={e => { if (e.key === "Enter" && newExpCat.trim()) { update("settings", { ...data.settings, expenseCategories: [...expCats, newExpCat.trim()] }); setNewExpCat(""); } }}
+                    style={{ flex: 1, height: 32, fontSize: 12 }} />
+                  <button className="btn btn-ghost" style={{ whiteSpace: "nowrap" }}
+                    onClick={() => { if (newExpCat.trim()) { update("settings", { ...data.settings, expenseCategories: [...expCats, newExpCat.trim()] }); setNewExpCat(""); } }}>+ Hinzufügen</button>
+                </div>
+                <div style={{ display: "flex", justifyContent: "flex-end" }}>
+                  <button className="btn btn-primary" onClick={() => setExpCatModal(false)}>Schliessen</button>
+                </div>
+              </div>
+            </div>
+          )}
+        </>
+      )}
+
+      {/* KPI-Streifen */}
+      {allFiltered.length > 0 && (
+        <div style={{ display: "grid", gridTemplateColumns: "repeat(4, 1fr)", gap: 16, marginBottom: 20 }}>
+          <div className="card" style={{ borderTop: "3px solid #555" }}>
+            <div style={{ fontSize: 10, color: "#888", letterSpacing: "0.12em", marginBottom: 6 }}>TOTAL BRUTTO</div>
+            <div style={{ fontSize: 20, fontFamily: "'Playfair Display', serif", fontWeight: 700 }}>{formatCHF(totalBrutto)}</div>
+            <div style={{ fontSize: 11, color: "#aaa", marginTop: 2 }}>{allFiltered.length} Einträge</div>
+          </div>
+          <div className="card" style={{ borderTop: "3px solid #888" }}>
+            <div style={{ fontSize: 10, color: "#888", letterSpacing: "0.12em", marginBottom: 6 }}>NETTO</div>
+            <div style={{ fontSize: 20, fontFamily: "'Playfair Display', serif", fontWeight: 700 }}>{formatCHF(totalNet)}</div>
+            <div style={{ fontSize: 11, color: "#aaa", marginTop: 2 }}>abzgl. Vorsteuer</div>
+          </div>
+          <div className="card" style={{ borderTop: "3px solid #b5621e" }}>
+            <div style={{ fontSize: 10, color: "#888", letterSpacing: "0.12em", marginBottom: 6 }}>VORSTEUER</div>
+            <div style={{ fontSize: 20, fontFamily: "'Playfair Display', serif", fontWeight: 700 }}>{formatCHF(totalTax)}</div>
+            <div style={{ fontSize: 11, color: "#aaa", marginTop: 2 }}>rückforderbar</div>
+          </div>
+          <div className="card" style={{ borderTop: "3px solid #2d6a4f" }}>
+            <div style={{ fontSize: 10, color: "#888", letterSpacing: "0.12em", marginBottom: 6 }}>TOP KATEGORIE</div>
+            {categoryTotals[0] ? (
+              <>
+                <div style={{ fontSize: 13, fontWeight: 600, marginBottom: 6 }}>{categoryTotals[0].cat}</div>
+                {categoryTotals.map(c => (
+                  <div key={c.cat} style={{ marginBottom: 4 }}>
+                    <div style={{ display: "flex", justifyContent: "space-between", fontSize: 10, color: "#888", marginBottom: 2 }}>
+                      <span style={{ overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap", maxWidth: 100 }}>{c.cat}</span>
+                      <span>{formatCHF(c.amount)}</span>
+                    </div>
+                    <div style={{ height: 3, background: "#ece8e2", borderRadius: 2 }}>
+                      <div style={{ width: `${(c.amount / categoryTotals[0].amount) * 100}%`, height: "100%", background: "#b07848", borderRadius: 2 }} />
+                    </div>
+                  </div>
+                ))}
+              </>
+            ) : <div style={{ fontSize: 12, color: "#aaa" }}>—</div>}
+          </div>
+        </div>
+      )}
+
+      <div className="filter-bar">
+        <input className="pill" placeholder="Suche (Beschreibung, Kategorie, Projekt…)" value={filter.search} onChange={e => setFilter({ ...filter, search: e.target.value })} style={{ minWidth: 220 }} />
+        <select className="pill" value={filter.year} onChange={e => setFilter({ ...filter, year: e.target.value })}>
+          <option value="">Alle Jahre</option>
+          {years.map(y => <option key={y} value={y}>{y}</option>)}
+        </select>
+        <select className="pill" value={filter.category} onChange={e => setFilter({ ...filter, category: e.target.value })}>
+          <option value="">Alle Kategorien</option>
+          {expCats.map(c => <option key={c} value={c}>{c}</option>)}
+        </select>
+        <select className="pill" value={filter.projectId} onChange={e => setFilter({ ...filter, projectId: e.target.value })}>
+          <option value="">Alle Projekte</option>
+          {data.projects.map(p => <option key={p.id} value={p.id}>{p.name}</option>)}
+        </select>
+        <select className="pill" value={filter.employeeId} onChange={e => setFilter({ ...filter, employeeId: e.target.value })}>
+          <option value="">Alle Mitarbeiter</option>
+          {(data.employees || []).map(em => <option key={em.id} value={em.id}>{em.name}</option>)}
+        </select>
+        <select className="pill" value={filter.status} onChange={e => setFilter({ ...filter, status: e.target.value })}>
+          <option value="">Alle Status</option>
+          <option value="offen">Offen</option>
+          <option value="genehmigt">Genehmigt</option>
+          <option value="auf nächsten Lohn">Auf nächsten Lohn</option>
+          <option value="ausbezahlt">Ausbezahlt</option>
+        </select>
+        {hasFilters && (
+          <button className="btn btn-ghost" style={{ fontSize: 12 }} onClick={() => setFilter({ year: filter.year, category: "", projectId: "", employeeId: "", search: "", status: "" })}>Zurücksetzen</button>
+        )}
+        <div style={{ marginLeft: "auto", fontSize: 12, color: "var(--text4)" }}>
+          <strong style={{ color: "var(--text)" }}>{allFiltered.length}</strong> {allFiltered.length === 1 ? "Eintrag" : "Einträge"} · {formatCHF(totalBrutto)}
+        </div>
+      </div>
+
+      <div className="filter-bar">
+        <span className="filter-label">GRUPPIEREN:</span>
+        {[{ id: "date", label: "Monat" }, { id: "category", label: "Kategorie" }, { id: "project", label: "Projekt" }].map(g => (
+          <button key={g.id} className={`pill${groupBy === g.id ? " active" : ""}`} onClick={() => setGroupBy(g.id)}>{g.label}</button>
+        ))}
+      </div>
+
+      {/* Tabelle gruppiert */}
+      {allFiltered.length === 0 ? (
+        <div className="card" style={{ padding: 0 }}>
+          <table>
+            <thead><tr><th style={{ width: 100 }}>Datum</th><th style={{ width: 170 }}>Kategorie</th><th style={{ width: 140 }}>Projekt</th><th style={{ width: 130 }}>Mitarbeiter</th><th>Beschreibung</th><th style={{ textAlign: "right", width: 110 }}>Netto</th><th style={{ textAlign: "right", width: 100 }}>Vorsteuer</th><th style={{ textAlign: "right", width: 120 }}>Brutto</th><th style={{ width: 130 }}>Status</th><th style={{ width: 90 }}></th></tr></thead>
+            <tbody><tr><td colSpan={10} style={{ textAlign: "center", color: "#aaa", padding: 32, fontSize: 13 }}>{(data.expenses || []).length === 0 ? "Noch keine Spesen" : "Keine Treffer"}</td></tr></tbody>
+          </table>
+        </div>
+      ) : (
+        <div className="card" style={{ padding: 0 }}>
+          <table>
+            <thead>
+              <tr>
+                <SortTh col="date" style={{ width: 100 }}>Datum</SortTh>
+                {groupBy !== "category" && <SortTh col="category" style={{ width: 170 }}>Kategorie</SortTh>}
+                {groupBy !== "project" && <SortTh col="project" style={{ width: 140 }}>Projekt</SortTh>}
+                <SortTh col="employee" style={{ width: 130 }}>Mitarbeiter</SortTh>
+                <th>Beschreibung</th>
+                <SortTh col="amount" style={{ textAlign: "right", width: 110 }}>Netto</SortTh>
+                <th className={compact ? "hide-compact" : ""} style={{ textAlign: "right", width: 100 }}>Vorsteuer</th>
+                <SortTh col="amount" style={{ textAlign: "right", width: 120 }}>Brutto</SortTh>
+                <th style={{ width: 130 }}>Status</th>
+                <th style={{ width: 90 }}></th>
+              </tr>
+            </thead>
+            <tbody>
+              {groupedData.map(group => {
+                const gNet = group.items.reduce((s, e) => s + getNet(e), 0);
+                const gTax = group.items.reduce((s, e) => s + getTax(e), 0);
+                const gBrutto = group.items.reduce((s, e) => s + (e.amount || 0), 0);
+                return (
+                  <React.Fragment key={group.key}>
+                    {/* Gruppen-Header (nur wenn > 1 Gruppe) */}
+                    {groupedData.length > 1 && (
+                      <tr style={{ background: "#f5f0e8" }}>
+                        <td colSpan={groupBy === "date" ? 8 : 7} style={{ padding: "6px 12px", fontSize: 11, fontWeight: 600, letterSpacing: "0.04em", color: "#555" }}>
+                          {group.label}
+                          <span style={{ marginLeft: 10, fontWeight: 400, color: "#888", fontSize: 10 }}>{group.items.length} Einträge</span>
+                        </td>
+                        <td colSpan={2} style={{ padding: "6px 12px", textAlign: "right", fontSize: 11, fontWeight: 600 }}>{formatCHF(gBrutto)}</td>
+                      </tr>
+                    )}
+                    {group.items.map(e => {
+                      const proj = data.projects.find(p => p.id === e.projectId);
+                      const emp = (data.employees || []).find(em => em.id === e.employeeId);
+                      const net = getNet(e);
+                      const tax = getTax(e);
+                      const expStatus = e.status || "offen";
+                      return (
+                        <tr key={e.id}>
+                          <td>{formatDate(e.date)}</td>
+                          {groupBy !== "category" && <td>{e.category}</td>}
+                          {groupBy !== "project" && <td style={{ color: "#888" }}>{proj?.name || "—"}</td>}
+                          <td style={{ color: "#888", fontSize: 12 }}>{emp?.name || "—"}</td>
+                          <td style={{ color: "#555" }}>{e.description || "—"}</td>
+                          <td style={{ textAlign: "right" }}>{formatCHF(net)}</td>
+                          <td className={compact ? "hide-compact" : ""} style={{ textAlign: "right", color: "#888" }}>{e.mwstRate > 0 ? formatCHF(tax) : "—"}</td>
+                          <td style={{ textAlign: "right" }}><strong>{formatCHF(e.amount)}</strong></td>
+                          <td>
+                            {e.lohnEntryId
+                              ? <span style={{ display: "inline-block", padding: "2px 9px", borderRadius: 4, fontSize: 11, fontWeight: 600, letterSpacing: "0.03em", color: "#2d6a4f", background: "#e8f5ee", border: "1.5px solid #2d6a4f40", whiteSpace: "nowrap" }}>✓ Via Lohn</span>
+                              : <StatusSelect value={expStatus} options={["offen", "genehmigt", "auf nächsten Lohn", "ausbezahlt"]} onChange={v => handleStatusChange(e, v)} />
+                            }
+                          </td>
+                          <td style={{ textAlign: "right", whiteSpace: "nowrap" }}>
+                            {e.receiptData && (
+                              <button className="btn btn-ghost" title="Beleg anzeigen" style={{ padding: "5px 10px", fontSize: 12, marginRight: 4 }} onClick={() => setReceiptView(e)}>
+                                <span className="material-icons" style={{ fontSize: 14, verticalAlign: "middle" }}>receipt_long</span>
+                              </button>
+                            )}
+                            <button className="btn btn-ghost" style={{ padding: "5px 10px", fontSize: 12, marginRight: 4 }} onClick={() => openEdit(e)}><span className="material-icons" style={{ fontSize: 16 }}>edit</span></button>
+                            <button className="btn btn-danger" style={{ padding: "5px 10px", fontSize: 12 }} onClick={() => delExp(e.id)}><span className="material-icons" style={{ fontSize: 16 }}>close</span></button>
+                          </td>
+                        </tr>
+                      );
+                    })}
+                    {/* Gruppen-Subtotal wenn > 1 Gruppe */}
+                    {groupedData.length > 1 && (
+                      <tr style={{ background: "#faf8f5", borderTop: "1px solid #e0dbd4" }}>
+                        <td colSpan={groupBy === "date" ? 5 : 4} style={{ padding: "5px 12px", fontSize: 11, color: "#888", fontStyle: "italic" }}>Total {group.label}</td>
+                        <td style={{ textAlign: "right", padding: "5px 12px", fontWeight: 600, fontSize: 11 }}>{formatCHF(gNet)}</td>
+                        <td className={compact ? "hide-compact" : ""} style={{ textAlign: "right", padding: "5px 12px", fontWeight: 600, fontSize: 11, color: "#888" }}>{formatCHF(gTax)}</td>
+                        <td colSpan={3} style={{ textAlign: "right", padding: "5px 12px", fontWeight: 700, fontSize: 11 }}>{formatCHF(gBrutto)}</td>
+                      </tr>
+                    )}
+                  </React.Fragment>
+                );
+              })}
+            </tbody>
+            <tfoot>
+              <tr style={{ borderTop: "2px solid #1a1a18" }}>
+                <td colSpan={groupBy === "date" ? 5 : 4} style={{ color: "#888", fontSize: 12 }}>
+                  {allFiltered.length} {allFiltered.length === 1 ? "Eintrag" : "Einträge"} {filter.year ? filter.year : ""}
+                </td>
+                <td style={{ textAlign: "right", fontWeight: 600 }}>{formatCHF(totalNet)}</td>
+                <td className={compact ? "hide-compact" : ""} style={{ textAlign: "right", fontWeight: 600, color: "#888" }}>{formatCHF(totalTax)}</td>
+                <td colSpan={3} style={{ textAlign: "right", fontWeight: 700 }}>{formatCHF(totalBrutto)}</td>
+              </tr>
+            </tfoot>
+          </table>
+        </div>
+      )}
+
+      {modal && (
+        <Modal title={modal === "new" ? "Spese erfassen" : "Spese bearbeiten"} onClose={closeModal} onSave={saveExp}>
+          <div className="form-row">
+            <FormField label="Datum"><DateInput value={form.date} onChange={e => setForm({ ...form, date: e.target.value })} /></FormField>
+            <FormField label="Kategorie">
+              <select value={form.category} onChange={e => setForm({ ...form, category: e.target.value })}>
+                {expCats.map(c => <option key={c}>{c}</option>)}
+              </select>
+            </FormField>
+          </div>
+          <div className="form-row">
+            <FormField label="Mitarbeiter">
+              <select value={form.employeeId || ""} onChange={e => setForm({ ...form, employeeId: e.target.value })}>
+                <option value="">— kein Mitarbeiter —</option>
+                {(data.employees || []).map(em => <option key={em.id} value={em.id}>{em.name}</option>)}
+              </select>
+            </FormField>
+            <FormField label="Projekt (optional)">
+              <select value={form.projectId} onChange={e => setForm({ ...form, projectId: e.target.value })}>
+                <option value="">— kein Projekt —</option>
+                {data.projects.map(p => <option key={p.id} value={p.id}>{p.name}</option>)}
+              </select>
+            </FormField>
+          </div>
+          <div className="form-row">
+            <FormField label="Status">
+              <select value={form.status || "offen"} onChange={e => setForm({ ...form, status: e.target.value })}>
+                <option value="offen">Offen</option>
+                <option value="genehmigt">Genehmigt</option>
+                <option value="auf nächsten Lohn">Auf nächsten Lohn</option>
+                <option value="ausbezahlt">Ausbezahlt</option>
+              </select>
+            </FormField>
+          </div>
+          <FormField label="Beschreibung"><input value={form.description} onChange={e => setForm({ ...form, description: e.target.value })} placeholder="z.B. Zug Zürich–Bern, Plotkosten…" autoFocus /></FormField>
+          <div className="form-row">
+            <FormField label="Betrag CHF"><input type="number" step="0.05" value={form.amount} onChange={e => setForm({ ...form, amount: +e.target.value })} /></FormField>
+            <FormField label="MWST-Satz %"><input type="number" step="0.1" value={form.mwstRate} onChange={e => setForm({ ...form, mwstRate: +e.target.value })} /></FormField>
+            <FormField label=" ">
+              <label style={{ display: "flex", alignItems: "center", gap: 6, height: 36, cursor: "pointer", textTransform: "none", fontSize: 13 }}>
+                <input type="checkbox" checked={!!form.inclMwst} onChange={e => setForm({ ...form, inclMwst: e.target.checked })} style={{ width: "auto" }} />
+                Betrag inkl. MWST
+              </label>
+            </FormField>
+          </div>
+          {form.amount > 0 && (
+            <div style={{ fontSize: 11, color: "#888", padding: "8px 12px", background: "#faf8f5", borderRadius: 4 }}>
+              {form.inclMwst
+                ? `Netto: ${formatCHF(form.amount / (1 + (form.mwstRate || 0) / 100))} · MWST: ${formatCHF(form.amount - form.amount / (1 + (form.mwstRate || 0) / 100))}`
+                : `Brutto inkl. ${form.mwstRate}% MWST: ${formatCHF(form.amount * (1 + (form.mwstRate || 0) / 100))}`}
+            </div>
+          )}
+          <div style={{ borderTop: "1px solid var(--border2)", paddingTop: 14, marginTop: 14 }}>
+            <label style={{ fontSize: 10, color: "#888", letterSpacing: "0.08em", display: "block", marginBottom: 8 }}>BELEG / QUITTUNG</label>
+            {form.receiptData ? (
+              <div style={{ display: "flex", alignItems: "center", gap: 8, background: "#faf8f5", padding: "8px 12px", borderRadius: 4 }}>
+                <span style={{ fontSize: 12, color: "#555", flex: 1, overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap", display: "flex", alignItems: "center", gap: 4 }}>
+                  <span className="material-icons" style={{ fontSize: 15 }}>receipt_long</span>
+                  {form.receiptName || "Beleg hochgeladen"}
+                </span>
+                <button className="btn btn-ghost" type="button" style={{ fontSize: 12 }} onClick={() => setReceiptView({ ...form })}>Anzeigen</button>
+                <button className="btn btn-danger" type="button" style={{ fontSize: 12 }} onClick={() => setForm(f => ({ ...f, receiptData: null, receiptName: null }))}>Entfernen</button>
+              </div>
+            ) : (
+              <label style={{ display: "inline-flex", alignItems: "center", gap: 6, cursor: "pointer", fontSize: 12, color: "#b07848", border: "1px dashed #b07848", borderRadius: 4, padding: "6px 14px" }}>
+                <span className="material-icons" style={{ fontSize: 15 }}>upload_file</span>
+                Quittung hochladen (Bild oder PDF)
+                <input ref={receiptInputRef} type="file" accept="image/*,application/pdf" onChange={handleReceiptUpload} style={{ display: "none" }} />
+              </label>
+            )}
+          </div>
+        </Modal>
+      )}
+    </div>
+  );
+}
+
+export function ReceiptViewer({ expense, onClose }) {
+  if (!expense?.receiptData) return null;
+  const isPdf = expense.receiptData.startsWith("data:application/pdf");
+  return (
+    <div
+      style={{ position: "fixed", inset: 0, background: "rgba(0,0,0,0.78)", zIndex: 300, display: "flex", alignItems: "center", justifyContent: "center", padding: 24 }}
+      onClick={onClose}
+    >
+      <div
+        style={{ background: "#fff", borderRadius: 8, maxWidth: 860, width: "100%", maxHeight: "92vh", display: "flex", flexDirection: "column", boxShadow: "0 8px 40px rgba(0,0,0,0.35)" }}
+        onClick={e => e.stopPropagation()}
+      >
+        <div style={{ display: "flex", alignItems: "center", justifyContent: "space-between", padding: "12px 18px", borderBottom: "1px solid #e0dbd4", gap: 12 }}>
+          <div style={{ minWidth: 0 }}>
+            <div style={{ fontSize: 15, fontWeight: 600, fontFamily: "'Playfair Display', serif", overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap" }}>
+              {expense.description || expense.category || "Beleg"}
+            </div>
+            {expense.receiptName && <div style={{ fontSize: 11, color: "#888", marginTop: 2 }}>{expense.receiptName}</div>}
+          </div>
+          <div style={{ display: "flex", gap: 8, flexShrink: 0 }}>
+            <a href={expense.receiptData} download={expense.receiptName || "beleg"} className="btn btn-ghost" style={{ fontSize: 12 }}>↓ Herunterladen</a>
+            <button className="btn btn-ghost" onClick={onClose}><span className="material-icons" style={{ fontSize: 16, verticalAlign: "middle" }}>close</span> Schliessen</button>
+          </div>
+        </div>
+        <div style={{ flex: 1, overflow: "auto", padding: 16, display: "flex", justifyContent: "center", alignItems: "flex-start" }}>
+          {isPdf ? (
+            <iframe src={expense.receiptData} style={{ width: "100%", height: "75vh", border: "none" }} title="Beleg" />
+          ) : (
+            <img src={expense.receiptData} alt="Beleg" style={{ maxWidth: "100%", maxHeight: "75vh", objectFit: "contain", borderRadius: 4 }} />
+          )}
+        </div>
+      </div>
+    </div>
+  );
+}
+
+export
+function InternalExpenses({ data, update, setView }) {
+  const mwstRate = data.settings.mwstRate || 8.1;
+  const intCats = data.settings.internalExpenseCategories || INTERNAL_EXPENSE_CATEGORIES;
+  const currentYear = new Date().getFullYear().toString();
+  const emptyItem = { date: new Date().toISOString().slice(0, 10), category: intCats[0], description: "", amount: 0, mwstRate: mwstRate, inclMwst: true, recurring: false, recurringInterval: "monatlich" };
+  const [modal, setModal] = useState(null);
+  const [form, setForm] = useState(emptyItem);
+  const [catModal, setCatModal] = useState(false);
+  const [catEdit, setCatEdit] = useState("");
+  const [catEditIdx, setCatEditIdx] = useState(null);
+  const [newCat, setNewCat] = useState("");
+  const [filter, setFilter] = useState({ year: currentYear, category: "", search: "" });
+  const [sort, setSort] = useState({ col: "date", dir: -1 });
+  const [groupBy, setGroupBy] = useState("date");
+  const { askConfirm: askConfirmInt, ConfirmModalEl: ConfirmModalElInt } = useConfirm();
+
+  const items = data.internalExpenses || [];
+  const years = Array.from(new Set(items.map(e => (e.date || "").slice(0, 4)).filter(Boolean))).sort().reverse();
+
+  const openNew = () => { setForm(emptyItem); setModal("new"); };
+  const openEdit = (e) => { setForm({ ...e }); setModal(e.id); };
+  const closeModal = () => { setModal(null); setForm(emptyItem); };
+  const save = () => {
+    if (!form.amount) return;
+    const isNew = modal === "new";
+    const updated = isNew
+      ? [...items, { ...form, id: generateId() }]
+      : items.map(e => e.id === modal ? { ...form, id: modal } : e);
+    update("internalExpenses", updated);
+    closeModal();
+  };
+  const del = async (id) => { if (await askConfirmInt("Ausgabe löschen?")) update("internalExpenses", items.filter(e => e.id !== id)); };
+
+  const getNet = (e) => e.inclMwst ? e.amount / (1 + (e.mwstRate || 0) / 100) : e.amount;
+  const getTax = (e) => e.amount - getNet(e);
+
+  const allFiltered = items.filter(e => {
+    if (filter.year && !(e.date || "").startsWith(filter.year)) return false;
+    if (filter.category && e.category !== filter.category) return false;
+    if (filter.search) {
+      const q = filter.search.toLowerCase();
+      if (![e.description, e.category].filter(Boolean).join(" ").toLowerCase().includes(q)) return false;
+    }
+    return true;
+  });
+
+  const toggleSort = (col) => setSort(s => ({ col, dir: s.col === col ? -s.dir : -1 }));
+  const SortTh = ({ col, children, style }) => (
+    <th onClick={() => toggleSort(col)} style={{ cursor: "pointer", userSelect: "none", ...style }}>
+      {children} <span style={{ color: sort.col === col ? "#b07848" : "#ccc", fontSize: 10 }}>{sort.col === col ? (sort.dir === 1 ? "▲" : "▼") : "⇅"}</span>
+    </th>
+  );
+
+  const sorted = [...allFiltered].sort((a, b) => {
+    let va, vb;
+    if (sort.col === "date") { va = a.date || ""; vb = b.date || ""; }
+    else if (sort.col === "amount") { va = a.amount || 0; vb = b.amount || 0; }
+    else if (sort.col === "category") { va = a.category || ""; vb = b.category || ""; }
+    else { va = ""; vb = ""; }
+    return typeof va === "number" ? (va - vb) * sort.dir : va.localeCompare(vb) * sort.dir;
+  });
+
+  const groupedData = (() => {
+    if (groupBy === "date") {
+      const months = {};
+      sorted.forEach(e => {
+        const key = (e.date || "").slice(0, 7);
+        if (!months[key]) months[key] = [];
+        months[key].push(e);
+      });
+      return Object.entries(months).sort((a, b) => sort.dir * b[0].localeCompare(a[0])).map(([key, its]) => ({
+        key, label: key ? new Date(key + "-01").toLocaleDateString("de-CH", { month: "long", year: "numeric" }) : "Ohne Datum", items: its,
+      }));
+    }
+    if (groupBy === "category") {
+      const cats = {};
+      sorted.forEach(e => { const k = e.category || "Sonstiges"; if (!cats[k]) cats[k] = []; cats[k].push(e); });
+      return Object.entries(cats).sort((a, b) => a[0].localeCompare(b[0])).map(([key, its]) => ({ key, label: key, items: its }));
+    }
+    return [{ key: "all", label: "", items: sorted }];
+  })();
+
+  const totalNet = allFiltered.reduce((s, e) => s + getNet(e), 0);
+  const totalTax = allFiltered.reduce((s, e) => s + getTax(e), 0);
+  const totalBrutto = allFiltered.reduce((s, e) => s + (e.amount || 0), 0);
+
+  const categoryTotals = intCats.map(cat => ({
+    cat, amount: allFiltered.filter(e => e.category === cat).reduce((s, e) => s + (e.amount || 0), 0),
+  })).filter(c => c.amount > 0).sort((a, b) => b.amount - a.amount).slice(0, 4);
+
+  const hasFilters = filter.category || filter.search;
+
+  return (
+    <div>
+      {ConfirmModalElInt}
+      <div style={{ display: "flex", alignItems: "center", gap: 10, marginBottom: 4 }}>
+
+      </div>
+      <Header title="Ausgaben" action={
+        <div style={{ display: "flex", gap: 8 }}>
+          <button className="btn btn-ghost" onClick={() => { setCatEdit(""); setCatEditIdx(null); setCatModal(true); }}>Kategorien verwalten</button>
+          <button className="btn btn-primary" onClick={openNew}>+ Ausgabe erfassen</button>
+        </div>
+      } />
+
+      {catModal && (
+        <div style={{ position: "fixed", inset: 0, background: "rgba(0,0,0,0.4)", zIndex: 100, display: "flex", alignItems: "center", justifyContent: "center", padding: 24 }}>
+          <div className="modal" style={{ maxWidth: 420 }}>
+            <div style={{ fontSize: 18, fontFamily: "'Playfair Display', serif", fontWeight: 400, marginBottom: 20 }}>Kategorien verwalten</div>
+            <div style={{ marginBottom: 16 }}>
+              {intCats.map((cat, idx) => {
+                const inUse = items.some(e => e.category === cat);
+                return (
+                  <div key={idx} style={{ display: "flex", alignItems: "center", gap: 8, marginBottom: 6 }}>
+                    {catEditIdx === idx ? (
+                      <input autoFocus value={catEdit} onChange={e => setCatEdit(e.target.value)}
+                        onBlur={() => {
+                          if (catEdit.trim()) {
+                            const updated = intCats.map((c, i) => i === idx ? catEdit.trim() : c);
+                            update("settings", { ...data.settings, internalExpenseCategories: updated });
+                          }
+                          setCatEditIdx(null);
+                        }}
+                        onKeyDown={e => { if (e.key === "Enter") e.target.blur(); if (e.key === "Escape") setCatEditIdx(null); }}
+                        style={{ flex: 1, height: 30, fontSize: 12 }} />
+                    ) : (
+                      <div style={{ flex: 1, fontSize: 13, padding: "4px 0" }}>{cat}</div>
+                    )}
+                    <button className="btn btn-ghost" style={{ padding: "3px 8px", fontSize: 11 }} onClick={() => { setCatEdit(cat); setCatEditIdx(idx); }}><span className="material-icons" style={{ fontSize: 16 }}>edit</span></button>
+                    <button className="btn btn-danger" style={{ padding: "3px 8px", fontSize: 11, opacity: inUse ? 0.35 : 1 }}
+                      onClick={() => {
+                        if (inUse) return;
+                        update("settings", { ...data.settings, internalExpenseCategories: intCats.filter((_, i) => i !== idx) });
+                      }} title={inUse ? "In Verwendung" : "Löschen"}><span className="material-icons" style={{ fontSize: 16 }}>close</span></button>
+                  </div>
+                );
+              })}
+            </div>
+            <div style={{ display: "flex", gap: 8, marginBottom: 20 }}>
+              <input value={newCat} placeholder="Neue Kategorie…"
+                onChange={e => setNewCat(e.target.value)}
+                onKeyDown={e => { if (e.key === "Enter" && newCat.trim()) { update("settings", { ...data.settings, internalExpenseCategories: [...intCats, newCat.trim()] }); setNewCat(""); } }}
+                style={{ flex: 1, height: 32, fontSize: 12 }} />
+              <button className="btn btn-ghost" style={{ whiteSpace: "nowrap" }}
+                onClick={() => { if (newCat.trim()) { update("settings", { ...data.settings, internalExpenseCategories: [...intCats, newCat.trim()] }); setNewCat(""); } }}>+ Hinzufügen</button>
+            </div>
+            <div style={{ display: "flex", justifyContent: "flex-end" }}>
+              <button className="btn btn-primary" onClick={() => setCatModal(false)}>Schliessen</button>
+            </div>
+          </div>
+        </div>
+      )}
+
+      {allFiltered.length > 0 && (
+        <div style={{ display: "grid", gridTemplateColumns: "repeat(4, 1fr)", gap: 16, marginBottom: 20 }}>
+          <div className="card" style={{ borderTop: "3px solid #1a4e8a" }}>
+            <div style={{ fontSize: 10, color: "#888", letterSpacing: "0.12em", marginBottom: 6 }}>TOTAL BRUTTO</div>
+            <div style={{ fontSize: 20, fontFamily: "'Playfair Display', serif", fontWeight: 700 }}>{formatCHF(totalBrutto)}</div>
+            <div style={{ fontSize: 11, color: "#aaa", marginTop: 2 }}>{allFiltered.length} Einträge</div>
+          </div>
+          <div className="card" style={{ borderTop: "3px solid #888" }}>
+            <div style={{ fontSize: 10, color: "#888", letterSpacing: "0.12em", marginBottom: 6 }}>NETTO</div>
+            <div style={{ fontSize: 20, fontFamily: "'Playfair Display', serif", fontWeight: 700 }}>{formatCHF(totalNet)}</div>
+            <div style={{ fontSize: 11, color: "#aaa", marginTop: 2 }}>abzgl. Vorsteuer</div>
+          </div>
+          <div className="card" style={{ borderTop: "3px solid #b5621e" }}>
+            <div style={{ fontSize: 10, color: "#888", letterSpacing: "0.12em", marginBottom: 6 }}>VORSTEUER</div>
+            <div style={{ fontSize: 20, fontFamily: "'Playfair Display', serif", fontWeight: 700 }}>{formatCHF(totalTax)}</div>
+            <div style={{ fontSize: 11, color: "#aaa", marginTop: 2 }}>rückforderbar</div>
+          </div>
+          <div className="card" style={{ borderTop: "3px solid #2d6a4f" }}>
+            <div style={{ fontSize: 10, color: "#888", letterSpacing: "0.12em", marginBottom: 6 }}>TOP KATEGORIE</div>
+            {categoryTotals[0] ? (
+              <>
+                <div style={{ fontSize: 13, fontWeight: 600, marginBottom: 6 }}>{categoryTotals[0].cat}</div>
+                {categoryTotals.map(c => (
+                  <div key={c.cat} style={{ marginBottom: 4 }}>
+                    <div style={{ display: "flex", justifyContent: "space-between", fontSize: 10, color: "#888", marginBottom: 2 }}>
+                      <span style={{ overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap", maxWidth: 100 }}>{c.cat}</span>
+                      <span>{formatCHF(c.amount)}</span>
+                    </div>
+                    <div style={{ height: 3, background: "#ece8e2", borderRadius: 2 }}>
+                      <div style={{ width: `${(c.amount / categoryTotals[0].amount) * 100}%`, height: "100%", background: "#b07848", borderRadius: 2 }} />
+                    </div>
+                  </div>
+                ))}
+              </>
+            ) : <div style={{ fontSize: 12, color: "#aaa" }}>—</div>}
+          </div>
+        </div>
+      )}
+
+      <div className="filter-bar">
+        <input className="pill" placeholder="Suche (Beschreibung, Kategorie…)" value={filter.search} onChange={e => setFilter({ ...filter, search: e.target.value })} style={{ minWidth: 200 }} />
+        <select className="pill" value={filter.year} onChange={e => setFilter({ ...filter, year: e.target.value })}>
+          <option value="">Alle Jahre</option>
+          {years.map(y => <option key={y} value={y}>{y}</option>)}
+        </select>
+        <select className="pill" value={filter.category} onChange={e => setFilter({ ...filter, category: e.target.value })}>
+          <option value="">Alle Kategorien</option>
+          {intCats.map(c => <option key={c} value={c}>{c}</option>)}
+        </select>
+        {hasFilters && (
+          <button className="btn btn-ghost" style={{ fontSize: 12 }} onClick={() => setFilter({ year: filter.year, category: "", search: "" })}>Zurücksetzen</button>
+        )}
+        <div style={{ marginLeft: "auto", fontSize: 12, color: "var(--text4)" }}>
+          <strong style={{ color: "var(--text)" }}>{allFiltered.length}</strong> {allFiltered.length === 1 ? "Eintrag" : "Einträge"} · {formatCHF(totalBrutto)}
+        </div>
+      </div>
+
+      <div className="filter-bar">
+        <span className="filter-label">GRUPPIEREN:</span>
+        {[{ id: "date", label: "Monat" }, { id: "category", label: "Kategorie" }].map(g => (
+          <button key={g.id} className={`pill${groupBy === g.id ? " active" : ""}`} onClick={() => setGroupBy(g.id)}>{g.label}</button>
+        ))}
+      </div>
+
+      {allFiltered.length === 0 ? (
+        <div className="card" style={{ padding: 0 }}>
+          <table>
+            <thead><tr><th style={{ width: 100 }}>Datum</th><th style={{ width: 190 }}>Kategorie</th><th>Beschreibung</th><th style={{ width: 80 }}>Wiederk.</th><th style={{ textAlign: "right", width: 110 }}>Netto</th><th style={{ textAlign: "right", width: 100 }}>Vorsteuer</th><th style={{ textAlign: "right", width: 120 }}>Brutto</th><th style={{ width: 90 }}></th></tr></thead>
+            <tbody><tr><td colSpan={8} style={{ textAlign: "center", color: "#aaa", padding: 32, fontSize: 13 }}>{items.length === 0 ? "Noch keine internen Ausgaben" : "Keine Treffer"}</td></tr></tbody>
+          </table>
+        </div>
+      ) : (
+        <div className="card" style={{ padding: 0 }}>
+          <table>
+            <thead>
+              <tr>
+                <SortTh col="date" style={{ width: 100 }}>Datum</SortTh>
+                {groupBy !== "category" && <SortTh col="category" style={{ width: 190 }}>Kategorie</SortTh>}
+                <th>Beschreibung</th>
+                <th style={{ width: 80 }}>Wiederk.</th>
+                <SortTh col="amount" style={{ textAlign: "right", width: 110 }}>Netto</SortTh>
+                <th style={{ textAlign: "right", width: 100 }}>Vorsteuer</th>
+                <SortTh col="amount" style={{ textAlign: "right", width: 120 }}>Brutto</SortTh>
+                <th style={{ width: 90 }}></th>
+              </tr>
+            </thead>
+            <tbody>
+              {groupedData.map(group => {
+                const gNet = group.items.reduce((s, e) => s + getNet(e), 0);
+                const gTax = group.items.reduce((s, e) => s + getTax(e), 0);
+                const gBrutto = group.items.reduce((s, e) => s + (e.amount || 0), 0);
+                return (
+                  <React.Fragment key={group.key}>
+                    {groupedData.length > 1 && (
+                      <tr style={{ background: "#f5f0e8" }}>
+                        <td colSpan={groupBy === "category" ? 5 : 6} style={{ padding: "6px 12px", fontSize: 11, fontWeight: 600, letterSpacing: "0.04em", color: "#555" }}>
+                          {group.label}
+                          <span style={{ marginLeft: 10, fontWeight: 400, color: "#888", fontSize: 10 }}>{group.items.length} Einträge</span>
+                        </td>
+                        <td style={{ padding: "6px 12px", textAlign: "right", fontSize: 11, fontWeight: 600 }}>{formatCHF(gBrutto)}</td>
+                        <td></td>
+                      </tr>
+                    )}
+                    {group.items.map(e => {
+                      const net = getNet(e);
+                      const tax = getTax(e);
+                      return (
+                        <tr key={e.id}>
+                          <td>{formatDate(e.date)}</td>
+                          {groupBy !== "category" && <td>{e.category}</td>}
+                          <td style={{ color: "#555" }}>{e.description || "—"}</td>
+                          <td style={{ textAlign: "center", fontSize: 11, color: e.recurring ? "#2d6a4f" : "#ccc" }}>
+                            {e.recurring ? <span title={e.recurringInterval || "monatlich"}>↻ {e.recurringInterval || "mtl."}</span> : "—"}
+                          </td>
+                          <td style={{ textAlign: "right" }}>{formatCHF(net)}</td>
+                          <td style={{ textAlign: "right", color: "#888" }}>{e.mwstRate > 0 ? formatCHF(tax) : "—"}</td>
+                          <td style={{ textAlign: "right" }}><strong>{formatCHF(e.amount)}</strong></td>
+                          <td style={{ textAlign: "right", whiteSpace: "nowrap" }}>
+                            <button className="btn btn-ghost" style={{ padding: "5px 10px", fontSize: 12, marginRight: 4 }} onClick={() => openEdit(e)}><span className="material-icons" style={{ fontSize: 16 }}>edit</span></button>
+                            <button className="btn btn-danger" style={{ padding: "5px 10px", fontSize: 12 }} onClick={() => del(e.id)}><span className="material-icons" style={{ fontSize: 16 }}>close</span></button>
+                          </td>
+                        </tr>
+                      );
+                    })}
+                    {groupedData.length > 1 && (
+                      <tr style={{ background: "#faf8f5", borderTop: "1px solid #e0dbd4" }}>
+                        <td colSpan={groupBy === "category" ? 4 : 5} style={{ padding: "5px 12px", fontSize: 11, color: "#888", fontStyle: "italic" }}>Total {group.label}</td>
+                        <td style={{ textAlign: "right", padding: "5px 12px", fontWeight: 600, fontSize: 11 }}>{formatCHF(gNet)}</td>
+                        <td style={{ textAlign: "right", padding: "5px 12px", fontWeight: 600, fontSize: 11, color: "#888" }}>{formatCHF(gTax)}</td>
+                        <td style={{ textAlign: "right", padding: "5px 12px", fontWeight: 700, fontSize: 11 }}>{formatCHF(gBrutto)}</td>
+                        <td></td>
+                      </tr>
+                    )}
+                  </React.Fragment>
+                );
+              })}
+            </tbody>
+            <tfoot>
+              <tr style={{ borderTop: "2px solid #1a1a18" }}>
+                <td colSpan={groupBy === "category" ? 4 : 5} style={{ color: "#888", fontSize: 12 }}>
+                  {allFiltered.length} {allFiltered.length === 1 ? "Eintrag" : "Einträge"} {filter.year || ""}
+                </td>
+                <td style={{ textAlign: "right", fontWeight: 600 }}>{formatCHF(totalNet)}</td>
+                <td style={{ textAlign: "right", fontWeight: 600, color: "#888" }}>{formatCHF(totalTax)}</td>
+                <td style={{ textAlign: "right", fontWeight: 700 }}>{formatCHF(totalBrutto)}</td>
+                <td></td>
+              </tr>
+            </tfoot>
+          </table>
+        </div>
+      )}
+
+      {modal && (
+        <Modal title={modal === "new" ? "Ausgabe erfassen" : "Ausgabe bearbeiten"} onClose={closeModal} onSave={save}>
+          <div className="form-row">
+            <FormField label="Datum"><DateInput value={form.date} onChange={e => setForm({ ...form, date: e.target.value })} /></FormField>
+            <FormField label="Kategorie">
+              <select value={form.category} onChange={e => setForm({ ...form, category: e.target.value })}>
+                {intCats.map(c => <option key={c}>{c}</option>)}
+              </select>
+            </FormField>
+          </div>
+          <FormField label="Beschreibung"><input value={form.description} onChange={e => setForm({ ...form, description: e.target.value })} placeholder="z.B. Jahresmiete Büro, Adobe CC Lizenz…" autoFocus /></FormField>
+          <div className="form-row">
+            <FormField label="Betrag CHF"><input type="number" step="0.05" value={form.amount} onChange={e => setForm({ ...form, amount: +e.target.value })} /></FormField>
+            <FormField label="MWST-Satz %"><input type="number" step="0.1" value={form.mwstRate} onChange={e => setForm({ ...form, mwstRate: +e.target.value })} /></FormField>
+            <FormField label=" ">
+              <label style={{ display: "flex", alignItems: "center", gap: 6, height: 36, cursor: "pointer", textTransform: "none", fontSize: 13 }}>
+                <input type="checkbox" checked={!!form.inclMwst} onChange={e => setForm({ ...form, inclMwst: e.target.checked })} style={{ width: "auto" }} />
+                Betrag inkl. MWST
+              </label>
+            </FormField>
+          </div>
+          {form.amount > 0 && (
+            <div style={{ fontSize: 11, color: "#888", padding: "8px 12px", background: "#faf8f5", borderRadius: 4, marginBottom: 12 }}>
+              {form.inclMwst
+                ? `Netto: ${formatCHF(form.amount / (1 + (form.mwstRate || 0) / 100))} · MWST: ${formatCHF(form.amount - form.amount / (1 + (form.mwstRate || 0) / 100))}`
+                : `Brutto inkl. ${form.mwstRate}% MWST: ${formatCHF(form.amount * (1 + (form.mwstRate || 0) / 100))}`}
+            </div>
+          )}
+          <div style={{ borderTop: "1px solid var(--border2)", paddingTop: 12, marginTop: 4 }}>
+            <label style={{ display: "flex", alignItems: "center", gap: 8, cursor: "pointer", textTransform: "none", fontSize: 13, marginBottom: 10 }}>
+              <input type="checkbox" checked={!!form.recurring} onChange={e => setForm({ ...form, recurring: e.target.checked })} style={{ width: "auto" }} />
+              Wiederkehrende Ausgabe
+            </label>
+            {form.recurring && (
+              <FormField label="Intervall">
+                <select value={form.recurringInterval || "monatlich"} onChange={e => setForm({ ...form, recurringInterval: e.target.value })}>
+                  <option value="monatlich">Monatlich</option>
+                  <option value="quartalsweise">Quartalsweise</option>
+                  <option value="jährlich">Jährlich</option>
+                </select>
+              </FormField>
+            )}
+          </div>
+        </Modal>
+      )}
+    </div>
+  );
+}
diff --git a/src/views/StudioBudget.jsx b/src/views/StudioBudget.jsx
new file mode 100755
index 0000000..091ce1e
--- /dev/null
+++ b/src/views/StudioBudget.jsx
@@ -0,0 +1,847 @@
+import React, { useState } from "react";
+import { generateId, formatCHF, calcLohn } from "../utils.js";
+import { Header, FormField } from "../components/UI.jsx";
+
+export default
+function StudioBudget({ data, update, setView, setPrintContent }) {
+  const employees = data.employees || [];
+  const internalExpenses = data.internalExpenses || [];
+  const currentYear = new Date().getFullYear();
+  const saved = data.settings.studioBudget || {};
+
+  // ── Hilfsfunktion: Auto-Werte für einen MA berechnen ──────────
+  const calcEmpAuto = (emp, agZuschlag) => {
+    const pensum = (emp.pensum || 100) / 100;
+    const brutto12 = (emp.monatslohn || 0) * 12;
+    const brutto13 = emp.dreizehnterLohn ? brutto12 + (emp.monatslohn || 0) : brutto12;
+    const agAnteil = brutto13 * ((agZuschlag || 20) / 100);
+    const totalKosten = brutto13 + agAnteil;
+    const ferienWochen = emp.ferienWochen || data.settings.defaultFerienWochen || 5;
+    const wochenstunden = (emp.wochenstunden || data.settings.defaultWochenstunden || 35) * pensum;
+    const nettoWochen = 52 - ferienWochen - 1.5;
+    const jahresStunden = Math.round(wochenstunden * nettoWochen);
+    return { brutto13, agAnteil, totalKosten, jahresStunden };
+  };
+
+  // ── Hilfsfunktion: Auto-Werte für interne Ausgaben ───────────
+  const calcFixAuto = () => {
+    const rows = [];
+    internalExpenses.forEach(e => {
+      const year = (e.date || "").slice(0, 4);
+      const net = e.inclMwst ? e.amount / (1 + (e.mwstRate || 0) / 100) : e.amount;
+      let annualized = net;
+      if (e.recurring) {
+        if (e.recurringInterval === "monatlich") annualized = net * 12;
+        else if (e.recurringInterval === "quartalsweise") annualized = net * 4;
+      } else if (year !== String(currentYear)) return;
+      rows.push({ id: e.id, label: e.description || e.category, cat: e.category, amount: annualized });
+    });
+    return rows;
+  };
+
+  // ── State: ein Eintrag pro MA, pro Fixkostenposten, plus globale Parameter ──
+  const initState = () => {
+    const sv = saved;
+    const agZuschlag = sv.agZuschlag ?? 20;
+
+    // Mitarbeiter-Zeilen
+    const empRows = employees.map(emp => {
+      const auto = calcEmpAuto(emp, agZuschlag);
+      const saved_emp = (sv.empRows || []).find(r => r.id === emp.id) || {};
+      return {
+        id: emp.id,
+        aktiv: saved_emp.aktiv ?? true,
+        kostenOverride: saved_emp.kostenOverride ?? false,
+        kostenManual: saved_emp.kostenManual ?? auto.totalKosten,
+        stundenOverride: saved_emp.stundenOverride ?? false,
+        stundenManual: saved_emp.stundenManual ?? auto.jahresStunden,
+      };
+    });
+
+    // Fixkosten-Zeilen (aus internen Ausgaben)
+    const autoFix = calcFixAuto();
+    const fixRows = autoFix.map(f => {
+      const saved_fix = (sv.fixRows || []).find(r => r.id === f.id) || {};
+      return {
+        id: f.id,
+        aktiv: saved_fix.aktiv ?? true,
+        amountOverride: saved_fix.amountOverride ?? false,
+        amountManual: saved_fix.amountManual ?? f.amount,
+      };
+    });
+
+    // Zusätzliche manuelle Fixkostenposten
+    const extraRows = (sv.extraRows || []);
+
+    // Manuelle Einnahmen + Rechnungs-Toggles
+    const extraIncome = sv.extraIncome || [];
+
+    return {
+      agZuschlag,
+      empRows,
+      fixRows,
+      extraRows, // { id, label, amount, aktiv }
+      extraIncome, // { id, label, amount, aktiv }
+      inkludiereRechnungen: sv.inkludiereRechnungen ?? true,
+      inkludiereEntwuerfe: sv.inkludiereEntwuerfe ?? true,
+      inkludiereOfferten: sv.inkludiereOfferten ?? false,
+      inkludiereOffertEntwuerfe: sv.inkludiereOffertEntwuerfe ?? false,
+      reserve: sv.reserve ?? 10,
+      produktivQuote: sv.produktivQuote ?? 70,
+      zielMarge: sv.zielMarge ?? 25,
+      rateOverride: sv.rateOverride ?? false,
+      rateManual: sv.rateManual ?? (data.settings.defaultHourlyRate || 120),
+    };
+  };
+
+  const [b, setB] = useState(initState);
+  const [newExtra, setNewExtra] = useState({ label: "", amount: 0 });
+  const [newIncome, setNewIncome] = useState({ label: "", amount: 0 });
+
+  const setField = (k, v) => setB(prev => ({ ...prev, [k]: v }));
+
+  const setEmpRow = (id, changes) => setB(prev => ({
+    ...prev,
+    empRows: prev.empRows.map(r => r.id === id ? { ...r, ...changes } : r),
+  }));
+  const setFixRow = (id, changes) => setB(prev => ({
+    ...prev,
+    fixRows: prev.fixRows.map(r => r.id === id ? { ...r, ...changes } : r),
+  }));
+  const addExtra = () => {
+    if (!newExtra.label.trim() || !newExtra.amount) return;
+    setB(prev => ({ ...prev, extraRows: [...prev.extraRows, { id: generateId(), label: newExtra.label, amount: newExtra.amount, aktiv: true }] }));
+    setNewExtra({ label: "", amount: 0 });
+  };
+  const setExtraRow = (id, changes) => setB(prev => ({
+    ...prev,
+    extraRows: prev.extraRows.map(r => r.id === id ? { ...r, ...changes } : r),
+  }));
+  const delExtra = (id) => setB(prev => ({ ...prev, extraRows: prev.extraRows.filter(r => r.id !== id) }));
+
+  const addIncome = () => {
+    if (!newIncome.label.trim() || !newIncome.amount) return;
+    setB(prev => ({ ...prev, extraIncome: [...(prev.extraIncome || []), { id: generateId(), label: newIncome.label, amount: newIncome.amount, aktiv: true }] }));
+    setNewIncome({ label: "", amount: 0 });
+  };
+  const setIncomeRow = (id, changes) => setB(prev => ({
+    ...prev,
+    extraIncome: (prev.extraIncome || []).map(r => r.id === id ? { ...r, ...changes } : r),
+  }));
+  const delIncome = (id) => setB(prev => ({ ...prev, extraIncome: (prev.extraIncome || []).filter(r => r.id !== id) }));
+
+  // ── Berechnungen ──────────────────────────────────────────────
+
+  const autoFix = calcFixAuto();
+
+  const empCalcRows = employees.map(emp => {
+    const auto = calcEmpAuto(emp, b.agZuschlag);
+    const row = b.empRows.find(r => r.id === emp.id) || { aktiv: true, kostenOverride: false, kostenManual: 0, stundenOverride: false, stundenManual: 0 };
+    const kosten = row.kostenOverride ? (row.kostenManual || 0) : auto.totalKosten;
+    const stunden = row.stundenOverride ? (row.stundenManual || 0) : auto.jahresStunden;
+    return { emp, auto, row, kosten, stunden, aktiv: row.aktiv };
+  });
+
+  const personalKosten = empCalcRows.filter(r => r.aktiv).reduce((s, r) => s + r.kosten, 0);
+  const jahresStundenTotal = empCalcRows.filter(r => r.aktiv).reduce((s, r) => s + r.stunden, 0);
+  const jahresStundenFallback = employees.length === 0 ? 1800 : jahresStundenTotal;
+
+  const fixCalcRows = autoFix.map(f => {
+    const row = b.fixRows.find(r => r.id === f.id) || { aktiv: true, amountOverride: false, amountManual: f.amount };
+    const amount = row.amountOverride ? (row.amountManual || 0) : f.amount;
+    return { ...f, row, amount, aktiv: row.aktiv };
+  });
+  const fixKosten = fixCalcRows.filter(r => r.aktiv).reduce((s, r) => s + r.amount, 0);
+  const extraKosten = b.extraRows.filter(r => r.aktiv).reduce((s, r) => s + (r.amount || 0), 0);
+
+  const basisKosten = personalKosten + fixKosten + extraKosten;
+  const reserve = basisKosten * ((b.reserve || 0) / 100);
+  const gesamtKosten = basisKosten + reserve;
+
+  const produktivStunden = Math.round(jahresStundenFallback * ((b.produktivQuote || 70) / 100));
+  const selbstkosten = produktivStunden > 0 ? gesamtKosten / produktivStunden : 0;
+  const zielHonorar = selbstkosten > 0 ? selbstkosten / (1 - (b.zielMarge || 25) / 100) : 0;
+
+  const defaultRate = data.settings.defaultHourlyRate || 120;
+  const currentRate = b.rateOverride ? (b.rateManual || defaultRate) : defaultRate;
+
+  // ── Einnahmen ─────────────────────────────────────────────────
+  const yearInvoices = (data.invoices || []).filter(i => (i.date || "").startsWith(String(currentYear)));
+  const paidRevenue = yearInvoices.filter(i => i.status === "bezahlt").reduce((s, i) => s + (i.sub || 0), 0);
+  const sentRevenue = yearInvoices.filter(i => i.status === "gesendet" || i.status === "überfällig").reduce((s, i) => s + (i.sub || 0), 0);
+  const draftRevenue = yearInvoices.filter(i => i.status === "entwurf").reduce((s, i) => s + (i.sub || 0), 0);
+  const invoiceAutoRevenue = b.inkludiereRechnungen
+    ? paidRevenue + sentRevenue + (b.inkludiereEntwuerfe ? draftRevenue : 0)
+    : 0;
+
+  const yearQuotes = (data.quotes || []).filter(q => (q.date || "").startsWith(String(currentYear)));
+  const acceptedQuoteRevenue = yearQuotes.filter(q => q.status === "angenommen").reduce((s, q) => s + (q.sub || 0), 0);
+  const sentQuoteRevenue = yearQuotes.filter(q => q.status === "gesendet").reduce((s, q) => s + (q.sub || 0), 0);
+  const draftQuoteRevenue = yearQuotes.filter(q => q.status === "entwurf").reduce((s, q) => s + (q.sub || 0), 0);
+  const quoteAutoRevenue = b.inkludiereOfferten
+    ? acceptedQuoteRevenue + sentQuoteRevenue + (b.inkludiereOffertEntwuerfe ? draftQuoteRevenue : 0)
+    : 0;
+
+  const autoRevenue = invoiceAutoRevenue + quoteAutoRevenue;
+  const manualIncomeTotal = (b.extraIncome || []).filter(r => r.aktiv).reduce((s, r) => s + (r.amount || 0), 0);
+  const totalRevenue = autoRevenue + manualIncomeTotal;
+  const ergebnis = totalRevenue - gesamtKosten;
+
+  // ── IST-Daten aus Zeiterfassung ───────────────────────────────
+  const NON_BILLING_CATEGORIES = ["Wettbewerb"];
+  const projects = data.projects || [];
+  const wbProjIds = new Set(projects.filter(p => NON_BILLING_CATEGORIES.includes(p.category)).map(p => p.id));
+  const yearEntries = (data.timeEntries || []).filter(e => (e.date || "").startsWith(String(currentYear)));
+  const totalTrackedMins = yearEntries.reduce((s, e) => s + (e.minutes || 0), 0);
+  const billingMins = yearEntries.filter(e => e.projectId && !wbProjIds.has(e.projectId)).reduce((s, e) => s + (e.minutes || 0), 0);
+  const wbTotalMins = yearEntries.filter(e => wbProjIds.has(e.projectId)).reduce((s, e) => s + (e.minutes || 0), 0);
+  const noProjectMins = yearEntries.filter(e => !e.projectId).reduce((s, e) => s + (e.minutes || 0), 0);
+  const istProduktivQuote = totalTrackedMins > 0 ? (billingMins / totalTrackedMins) * 100 : null;
+  const wbProjects = projects.filter(p => NON_BILLING_CATEGORIES.includes(p.category));
+  const wbRows = wbProjects.map(p => {
+    const mins = yearEntries.filter(e => e.projectId === p.id).reduce((s, e) => s + (e.minutes || 0), 0);
+    return { id: p.id, name: p.name, mins, hours: mins / 60, cost: (mins / 60) * selbstkosten };
+  }).filter(r => r.mins > 0).sort((a, b) => b.mins - a.mins);
+  const wbTotalHours = wbTotalMins / 60;
+  const rateDiff = currentRate - zielHonorar;
+  const rateOk = rateDiff >= 0;
+
+  // ── Versionen ────────────────────────────────────────────────
+  const versions = data.settings.studioBudgetVersions || [];
+  const [showVersions, setShowVersions] = useState(false);
+  const [saveName, setSaveName] = useState("");
+
+  const buildSnapshot = (name) => ({
+    id: generateId(),
+    name: name || `Budget ${new Date().toLocaleDateString("de-CH")}`,
+    savedAt: new Date().toISOString(),
+    b: { agZuschlag: b.agZuschlag, empRows: b.empRows, fixRows: b.fixRows, extraRows: b.extraRows, extraIncome: b.extraIncome, inkludiereRechnungen: b.inkludiereRechnungen, inkludiereEntwuerfe: b.inkludiereEntwuerfe, inkludiereOfferten: b.inkludiereOfferten, inkludiereOffertEntwuerfe: b.inkludiereOffertEntwuerfe, reserve: b.reserve, produktivQuote: b.produktivQuote, zielMarge: b.zielMarge },
+    results: { personalKosten, fixKosten, extraKosten, basisKosten, reserve: basisKosten * ((b.reserve || 0) / 100), gesamtKosten, totalRevenue, ergebnis, jahresStundenTotal: jahresStundenFallback, produktivStunden, selbstkosten, zielHonorar, currentRate },
+    empSnapshot: empCalcRows.map(r => ({ name: r.emp.name, kosten: r.kosten, stunden: r.stunden, aktiv: r.aktiv })),
+    fixSnapshot: [...fixCalcRows.filter(r => r.aktiv).map(r => ({ label: r.label, amount: r.amount })), ...b.extraRows.filter(r => r.aktiv).map(r => ({ label: r.label, amount: r.amount }))],
+  });
+
+  const saveVersion = () => {
+    const name = saveName.trim() || `Budget ${new Date().toLocaleDateString("de-CH")}`;
+    const snap = buildSnapshot(name);
+    update("settings", { ...data.settings, studioBudgetVersions: [...versions, snap], studioBudget: { agZuschlag: b.agZuschlag, empRows: b.empRows, fixRows: b.fixRows, extraRows: b.extraRows, reserve: b.reserve, produktivQuote: b.produktivQuote, zielMarge: b.zielMarge } });
+    setSaveName("");
+  };
+
+  const loadVersion = (v) => {
+    setB(prev => ({ ...prev, ...v.b }));
+    setShowVersions(false);
+  };
+
+  const deleteVersion = (id) => {
+    update("settings", { ...data.settings, studioBudgetVersions: versions.filter(v => v.id !== id) });
+  };
+
+  const saveSettings = () => {
+    update("settings", { ...data.settings, studioBudget: {
+      agZuschlag: b.agZuschlag,
+      empRows: b.empRows,
+      fixRows: b.fixRows,
+      extraRows: b.extraRows,
+      extraIncome: b.extraIncome,
+      inkludiereRechnungen: b.inkludiereRechnungen,
+      inkludiereEntwuerfe: b.inkludiereEntwuerfe,
+      inkludiereOfferten: b.inkludiereOfferten,
+      inkludiereOffertEntwuerfe: b.inkludiereOffertEntwuerfe,
+      reserve: b.reserve,
+      produktivQuote: b.produktivQuote,
+      zielMarge: b.zielMarge,
+      rateOverride: b.rateOverride,
+      rateManual: b.rateManual,
+    }});
+  };
+
+  // ── Kleines Inline-Override-Feld ─────────────────────────────
+  const OverrideInput = ({ label, aktiv, checked, onToggle, value, onChange, autoVal, unit = "CHF", step = 100 }) => (
+    <div style={{ display: "flex", alignItems: "center", gap: 6, opacity: aktiv ? 1 : 0.4 }}>
+      <label style={{ display: "flex", alignItems: "center", gap: 4, textTransform: "none", fontSize: 11, color: "var(--text4)", whiteSpace: "nowrap", cursor: "pointer" }}>
+        <input type="checkbox" checked={checked} onChange={e => onToggle(e.target.checked)} style={{ width: "auto" }} disabled={!aktiv} />
+        übersteuern
+      </label>
+      {checked && aktiv ? (
+        <input type="number" step={step} value={value} onChange={e => onChange(+e.target.value)}
+          style={{ width: 110, height: 28, fontSize: 12, padding: "0 8px" }} />
+      ) : (
+        <span style={{ fontSize: 12, color: "var(--text3)" }}>{unit === "CHF" ? formatCHF(autoVal) : `${autoVal}h`}</span>
+      )}
+    </div>
+  );
+
+  const SectionLabel = ({ children }) => (
+    <div className="section-label">{children}</div>
+  );
+
+  return (
+    <div>
+      <div style={{ display: "flex", alignItems: "center", gap: 10, marginBottom: 4 }}>
+        
+      </div>
+      <Header title="Budget" action={
+        <div style={{ display: "flex", gap: 8, alignItems: "center" }}>
+          <button className="btn btn-ghost" onClick={() => setShowVersions(v => !v)}>
+            ⊞ Versionen {versions.length > 0 && <span style={{ marginLeft: 4, background: "#b07848", color: "#1a1a18", borderRadius: 10, fontSize: 10, padding: "1px 6px", fontWeight: 700 }}>{versions.length}</span>}
+          </button>
+          <button className="btn btn-ghost" onClick={() => setPrintContent({ type: "studioBudget", snapshot: buildSnapshot("Aktuell"), settings: data.settings })}>PDF</button>
+          <button className="btn btn-primary" onClick={saveSettings}>Speichern</button>
+        </div>
+      } />
+
+      {/* Versions-Panel */}
+      {showVersions && (
+        <div className="card" style={{ marginBottom: 20, borderLeft: "4px solid #b07848" }}>
+          <div style={{ fontSize: 11, letterSpacing: "0.1em", color: "var(--text4)", marginBottom: 14 }}>VERSIONEN</div>
+
+          {/* Neue Version speichern */}
+          <div style={{ display: "flex", gap: 8, marginBottom: 16, alignItems: "center" }}>
+            <input
+              value={saveName}
+              onChange={e => setSaveName(e.target.value)}
+              placeholder={`z.B. Budget ${new Date().getFullYear()}, Szenario A…`}
+              style={{ flex: 1, height: 34, fontSize: 12 }}
+              onKeyDown={e => e.key === "Enter" && saveVersion()}
+            />
+            <button className="btn btn-primary" style={{ whiteSpace: "nowrap" }} onClick={saveVersion}>
+              + Als Version speichern
+            </button>
+          </div>
+
+          {versions.length === 0 ? (
+            <div style={{ fontSize: 12, color: "var(--text4)" }}>Noch keine Versionen gespeichert.</div>
+          ) : (
+            <table style={{ width: "100%", borderCollapse: "collapse" }}>
+              <thead>
+                <tr>
+                  <th style={{ fontSize: 10, color: "var(--text4)", fontWeight: 500, textAlign: "left", padding: "4px 8px 8px 0", borderBottom: "1px solid var(--border)" }}>Name</th>
+                  <th style={{ fontSize: 10, color: "var(--text4)", fontWeight: 500, textAlign: "right", padding: "4px 8px 8px", borderBottom: "1px solid var(--border)" }}>Selbstkosten/h</th>
+                  <th style={{ fontSize: 10, color: "var(--text4)", fontWeight: 500, textAlign: "right", padding: "4px 8px 8px", borderBottom: "1px solid var(--border)" }}>Ziel-Honorar/h</th>
+                  <th style={{ fontSize: 10, color: "var(--text4)", fontWeight: 500, textAlign: "right", padding: "4px 8px 8px", borderBottom: "1px solid var(--border)" }}>Gesamtkosten</th>
+                  <th style={{ fontSize: 10, color: "var(--text4)", fontWeight: 500, textAlign: "right", padding: "4px 0 8px 8px", borderBottom: "1px solid var(--border)" }}>Gespeichert</th>
+                  <th style={{ borderBottom: "1px solid var(--border)", width: 110 }}></th>
+                </tr>
+              </thead>
+              <tbody>
+                {[...versions].reverse().map(v => (
+                  <tr key={v.id}>
+                    <td style={{ padding: "8px 8px 8px 0", fontWeight: 500, fontSize: 13, borderBottom: "1px solid var(--border2)" }}>{v.name}</td>
+                    <td style={{ padding: "8px", textAlign: "right", fontSize: 12, borderBottom: "1px solid var(--border2)" }}>{formatCHF(Math.round(v.results?.selbstkosten || 0))}</td>
+                    <td style={{ padding: "8px", textAlign: "right", fontSize: 12, fontWeight: 600, color: "#b07848", borderBottom: "1px solid var(--border2)" }}>{formatCHF(Math.round(v.results?.zielHonorar || 0))}</td>
+                    <td style={{ padding: "8px", textAlign: "right", fontSize: 12, borderBottom: "1px solid var(--border2)" }}>{formatCHF(Math.round(v.results?.gesamtKosten || 0))}</td>
+                    <td style={{ padding: "8px 0 8px 8px", textAlign: "right", fontSize: 11, color: "var(--text4)", borderBottom: "1px solid var(--border2)" }}>
+                      {new Date(v.savedAt).toLocaleDateString("de-CH")}
+                    </td>
+                    <td style={{ padding: "8px 0", textAlign: "right", whiteSpace: "nowrap", borderBottom: "1px solid var(--border2)" }}>
+                      <button className="btn btn-ghost" style={{ fontSize: 11, padding: "4px 8px", marginRight: 4 }}
+                        onClick={() => setPrintContent({ type: "studioBudget", snapshot: v, settings: data.settings })}>PDF</button>
+                      <button className="btn btn-ghost" style={{ fontSize: 11, padding: "4px 8px", marginRight: 4 }}
+                        onClick={() => loadVersion(v)}>Laden</button>
+                      <button className="btn btn-danger" style={{ fontSize: 11, padding: "4px 8px" }}
+                        onClick={() => deleteVersion(v.id)}><span className="material-icons" style={{ fontSize: 16 }}>close</span></button>
+                    </td>
+                  </tr>
+                ))}
+              </tbody>
+            </table>
+          )}
+        </div>
+      )}
+
+      {/* ── ANALYSE — full width, ganz oben ── */}
+      <div className="card" style={{ borderTop: `3px solid ${rateOk ? "#2d6a4f" : "#8a1a1a"}`, marginBottom: 20 }}>
+        <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr 1fr auto", gap: 0, alignItems: "stretch" }}>
+          <div style={{ padding: "14px 20px 14px 0", borderRight: "1px solid var(--border2)" }}>
+            <div style={{ fontSize: 10, color: "var(--text4)", letterSpacing: "0.1em", marginBottom: 8 }}>SELBSTKOSTENSATZ</div>
+            <div style={{ fontSize: 32, fontFamily: "'Playfair Display', serif", fontWeight: 700, lineHeight: 1 }}>{formatCHF(Math.round(selbstkosten))}</div>
+            <div style={{ fontSize: 10, color: "var(--text4)", marginTop: 6 }}>pro produktive Stunde</div>
+          </div>
+          <div style={{ padding: "14px 20px", borderRight: "1px solid var(--border2)" }}>
+            <div style={{ fontSize: 10, color: "var(--text4)", letterSpacing: "0.1em", marginBottom: 8 }}>ZIEL-HONORAR</div>
+            <div style={{ fontSize: 32, fontFamily: "'Playfair Display', serif", fontWeight: 700, color: "#b07848", lineHeight: 1 }}>{formatCHF(Math.round(zielHonorar))}</div>
+            <div style={{ fontSize: 10, color: "var(--text4)", marginTop: 6 }}>inkl. {b.zielMarge}% Marge</div>
+          </div>
+          <div style={{ padding: "14px 20px", borderRight: "1px solid var(--border2)" }}>
+            <div style={{ fontSize: 10, color: "var(--text4)", letterSpacing: "0.1em", marginBottom: 8 }}>GESAMTKOSTEN / JAHR</div>
+            <div style={{ fontSize: 32, fontFamily: "'Playfair Display', serif", fontWeight: 700, lineHeight: 1 }}>{formatCHF(gesamtKosten)}</div>
+            <div style={{ fontSize: 10, color: "var(--text4)", marginTop: 6 }}>{jahresStundenFallback}h verfügbar · {produktivStunden}h produktiv</div>
+          </div>
+          <div style={{ padding: "14px 0 14px 20px", display: "flex", flexDirection: "column", justifyContent: "center", minWidth: 180 }}>
+            <div style={{ padding: "10px 14px", borderRadius: 6, border: `1.5px solid ${rateOk ? "#b8dcc8" : "#e8b0b0"}`, background: rateOk ? "#f0f8f4" : "#fdf2f2" }}>
+              <div style={{ fontSize: 11, fontWeight: 600, color: rateOk ? "#2d6a4f" : "#8a1a1a", marginBottom: 4 }}>
+                {rateOk ? "✓ Ansatz ausreichend" : "⚠ Ansatz zu tief"}
+              </div>
+              <div style={{ fontSize: 20, fontWeight: 700, fontFamily: "'Playfair Display', serif", color: rateOk ? "#2d6a4f" : "#8a1a1a" }}>
+                {rateOk ? "+" : ""}{formatCHF(Math.round(rateDiff))}
+              </div>
+              <div style={{ fontSize: 10, color: "var(--text4)", marginTop: 3 }}>Aktuell {formatCHF(currentRate)}/h</div>
+            </div>
+            {selbstkosten > 0 && (
+              <div style={{ marginTop: 10 }}>
+                <div style={{ height: 4, background: "var(--border)", borderRadius: 2, overflow: "hidden" }}>
+                  <div style={{ width: `${Math.min((produktivStunden / Math.ceil(gesamtKosten / currentRate)) * 100, 100)}%`, height: "100%", background: rateOk ? "#2d6a4f" : "#b5621e", borderRadius: 2 }} />
+                </div>
+                <div style={{ fontSize: 10, color: "var(--text4)", marginTop: 3 }}>Break-even: {Math.ceil(gesamtKosten / currentRate)}h</div>
+              </div>
+            )}
+          </div>
+        </div>
+      </div>
+
+      <div style={{ display: "grid", gridTemplateColumns: "3fr 2fr", gap: 20, alignItems: "start" }}>
+
+        {/* ── LINKE SPALTE ── */}
+        <div style={{ display: "flex", flexDirection: "column", gap: 16 }}>
+
+          {/* Personalkosten */}
+          <div className="card">
+            <SectionLabel>PERSONALKOSTEN / JAHR</SectionLabel>
+            <div style={{ marginBottom: 12 }}>
+              <FormField label="AG-Sozialleistungen %">
+                <input type="number" step="0.5" min={0} max={50} value={b.agZuschlag}
+                  onChange={e => { const v = +e.target.value; setField("agZuschlag", v); setB(prev => ({ ...prev, agZuschlag: v })); }} />
+                <div style={{ fontSize: 11, color: "var(--text4)", marginTop: 3 }}>AHV, UVG, BVG, KTG AG-Anteil (typisch 18–22%)</div>
+              </FormField>
+            </div>
+
+            {employees.length === 0 ? (
+              <div style={{ fontSize: 12, color: "var(--text4)", padding: "8px 0" }}>Keine Mitarbeiter erfasst – unter «Mitarbeiter» Löhne hinterlegen.</div>
+            ) : (
+              <table style={{ width: "100%", borderCollapse: "collapse", marginBottom: 4 }}>
+                <thead>
+                  <tr>
+                    <th style={{ fontSize: 10, color: "var(--text4)", fontWeight: 500, textAlign: "left", padding: "4px 6px 4px 0", borderBottom: "1px solid var(--border)" }}>Mitarbeiter</th>
+                    <th style={{ fontSize: 10, color: "var(--text4)", fontWeight: 500, textAlign: "right", padding: "4px 6px", borderBottom: "1px solid var(--border)" }}>Kosten/Jahr</th>
+                    <th style={{ fontSize: 10, color: "var(--text4)", fontWeight: 500, textAlign: "right", padding: "4px 0 4px 6px", borderBottom: "1px solid var(--border)" }}>Jahresstunden</th>
+                  </tr>
+                </thead>
+                <tbody>
+                  {empCalcRows.map(({ emp, auto, row, kosten, stunden, aktiv }) => (
+                    <tr key={emp.id} style={{ opacity: aktiv ? 1 : 0.45 }}>
+                      <td style={{ padding: "8px 6px 8px 0", borderBottom: "1px solid var(--border2)", verticalAlign: "top" }}>
+                        <label style={{ display: "flex", alignItems: "center", gap: 6, cursor: "pointer", textTransform: "none", fontSize: 12 }}>
+                          <input type="checkbox" checked={aktiv} onChange={e => setEmpRow(emp.id, { aktiv: e.target.checked })} style={{ width: "auto" }} />
+                          <div>
+                            <div style={{ fontWeight: 500 }}>{emp.name}</div>
+                            <div style={{ fontSize: 10, color: "var(--text4)" }}>{emp.pensum || 100}% · {emp.dreizehnterLohn ? "13 Mt." : "12 Mt."}</div>
+                          </div>
+                        </label>
+                      </td>
+                      <td style={{ padding: "8px 6px", borderBottom: "1px solid var(--border2)", verticalAlign: "top", textAlign: "right" }}>
+                        <OverrideInput aktiv={aktiv} checked={row.kostenOverride} onToggle={v => setEmpRow(emp.id, { kostenOverride: v })}
+                          value={row.kostenManual} onChange={v => setEmpRow(emp.id, { kostenManual: v })} autoVal={auto.totalKosten} step={500} />
+                      </td>
+                      <td style={{ padding: "8px 0 8px 6px", borderBottom: "1px solid var(--border2)", verticalAlign: "top", textAlign: "right" }}>
+                        <OverrideInput aktiv={aktiv} checked={row.stundenOverride} onToggle={v => setEmpRow(emp.id, { stundenOverride: v })}
+                          value={row.stundenManual} onChange={v => setEmpRow(emp.id, { stundenManual: v })} autoVal={auto.jahresStunden} unit="h" step={10} />
+                      </td>
+                    </tr>
+                  ))}
+                </tbody>
+              </table>
+            )}
+            <div style={{ display: "flex", justifyContent: "space-between", fontWeight: 600, fontSize: 13, paddingTop: 8, borderTop: "1.5px solid var(--border)" }}>
+              <span>Total Personalkosten</span>
+              <span style={{ fontFamily: "'Playfair Display', serif" }}>{formatCHF(personalKosten)}</span>
+            </div>
+          </div>
+
+          {/* Fixkosten */}
+          <div className="card">
+            <SectionLabel>FIXKOSTEN / JAHR</SectionLabel>
+
+            {fixCalcRows.length === 0 && b.extraRows.length === 0 ? (
+              <div style={{ fontSize: 12, color: "var(--text4)", marginBottom: 12 }}>
+                Keine internen Ausgaben erfasst – unter «Interne Ausgaben» hinterlegen oder manuell unten hinzufügen.
+              </div>
+            ) : (
+              <table style={{ width: "100%", borderCollapse: "collapse", marginBottom: 12 }}>
+                <thead>
+                  <tr>
+                    <th style={{ fontSize: 10, color: "var(--text4)", fontWeight: 500, textAlign: "left", padding: "4px 6px 4px 0", borderBottom: "1px solid var(--border)" }}>Posten</th>
+                    <th style={{ fontSize: 10, color: "var(--text4)", fontWeight: 500, textAlign: "right", padding: "4px 0", borderBottom: "1px solid var(--border)" }}>CHF/Jahr</th>
+                  </tr>
+                </thead>
+                <tbody>
+                  {fixCalcRows.map(f => (
+                    <tr key={f.id} style={{ opacity: f.aktiv ? 1 : 0.45 }}>
+                      <td style={{ padding: "7px 6px 7px 0", borderBottom: "1px solid var(--border2)", verticalAlign: "middle" }}>
+                        <label style={{ display: "flex", alignItems: "center", gap: 6, cursor: "pointer", textTransform: "none", fontSize: 12 }}>
+                          <input type="checkbox" checked={f.aktiv} onChange={e => setFixRow(f.id, { aktiv: e.target.checked })} style={{ width: "auto" }} />
+                          <div>
+                            <div style={{ fontWeight: 500 }}>{f.label}</div>
+                            <div style={{ fontSize: 10, color: "var(--text4)" }}>{f.cat}</div>
+                          </div>
+                        </label>
+                      </td>
+                      <td style={{ padding: "7px 0 7px 6px", borderBottom: "1px solid var(--border2)", textAlign: "right" }}>
+                        <OverrideInput aktiv={f.aktiv} checked={f.row.amountOverride} onToggle={v => setFixRow(f.id, { amountOverride: v })}
+                          value={f.row.amountManual} onChange={v => setFixRow(f.id, { amountManual: v })} autoVal={f.amount} step={100} />
+                      </td>
+                    </tr>
+                  ))}
+                  {b.extraRows.map(r => (
+                    <tr key={r.id} style={{ opacity: r.aktiv ? 1 : 0.45 }}>
+                      <td style={{ padding: "7px 6px 7px 0", borderBottom: "1px solid var(--border2)" }}>
+                        <label style={{ display: "flex", alignItems: "center", gap: 6, cursor: "pointer", textTransform: "none", fontSize: 12 }}>
+                          <input type="checkbox" checked={r.aktiv} onChange={e => setExtraRow(r.id, { aktiv: e.target.checked })} style={{ width: "auto" }} />
+                          <span style={{ fontWeight: 500, fontStyle: "italic", color: "var(--text3)" }}>{r.label}</span>
+                        </label>
+                      </td>
+                      <td style={{ padding: "7px 0 7px 6px", borderBottom: "1px solid var(--border2)", textAlign: "right" }}>
+                        <div style={{ display: "flex", alignItems: "center", gap: 6, justifyContent: "flex-end" }}>
+                          <input type="number" step="100" value={r.amount} onChange={e => setExtraRow(r.id, { amount: +e.target.value })}
+                            style={{ width: 110, height: 28, fontSize: 12, padding: "0 8px" }} />
+                          <button onClick={() => delExtra(r.id)} style={{ background: "none", border: "none", color: "var(--text4)", cursor: "pointer", fontSize: 14, padding: 0 }}><span className="material-icons" style={{ fontSize: 16 }}>close</span></button>
+                        </div>
+                      </td>
+                    </tr>
+                  ))}
+                </tbody>
+              </table>
+            )}
+
+            {/* Neuen Posten hinzufügen */}
+            <div style={{ display: "flex", gap: 6, alignItems: "center", marginBottom: 12 }}>
+              <input value={newExtra.label} onChange={e => setNewExtra(p => ({ ...p, label: e.target.value }))}
+                placeholder="Bezeichnung (z.B. Buchführung)" style={{ flex: 1, height: 32, fontSize: 12 }} />
+              <input type="number" step="100" value={newExtra.amount || ""} onChange={e => setNewExtra(p => ({ ...p, amount: +e.target.value }))}
+                placeholder="CHF/Jahr" style={{ width: 100, height: 32, fontSize: 12 }} />
+              <button className="btn btn-ghost" style={{ height: 32, padding: "0 12px", fontSize: 12, whiteSpace: "nowrap" }} onClick={addExtra}>+ Hinzufügen</button>
+            </div>
+
+            <div style={{ display: "flex", justifyContent: "space-between", fontWeight: 600, fontSize: 13, paddingTop: 8, borderTop: "1.5px solid var(--border)" }}>
+              <span>Total Fixkosten</span>
+              <span style={{ fontFamily: "'Playfair Display', serif" }}>{formatCHF(fixKosten + extraKosten)}</span>
+            </div>
+          </div>
+
+          {/* Einnahmen */}
+          <div className="card">
+            <div style={{ display: "flex", justifyContent: "space-between", alignItems: "center", marginBottom: 10 }}>
+              <SectionLabel>EINNAHMEN / JAHR</SectionLabel>
+            </div>
+
+            <div style={{ display: "flex", gap: 12, marginBottom: 4, flexWrap: "wrap" }}>
+              <label style={{ display: "flex", alignItems: "center", gap: 5, fontSize: 11, color: "var(--text3)", cursor: "pointer", textTransform: "none" }}>
+                <input type="checkbox" checked={b.inkludiereRechnungen} onChange={e => setField("inkludiereRechnungen", e.target.checked)} style={{ width: "auto" }} />
+                Rechnungen aus Buchhaltung
+              </label>
+              <label style={{ display: "flex", alignItems: "center", gap: 5, fontSize: 11, color: "var(--text3)", cursor: "pointer", textTransform: "none" }}>
+                <input type="checkbox" checked={b.inkludiereOfferten} onChange={e => setField("inkludiereOfferten", e.target.checked)} style={{ width: "auto" }} />
+                Offerten
+              </label>
+            </div>
+
+            {b.inkludiereRechnungen && (
+              <div style={{ marginBottom: 14, padding: "10px 12px", background: "var(--surface2)", borderRadius: 6 }}>
+                <div style={{ fontSize: 10, letterSpacing: "0.08em", color: "var(--text4)", marginBottom: 8 }}>AUS RECHNUNGEN {currentYear}</div>
+                {[
+                  { label: "Bezahlt", value: paidRevenue, color: "#2d6a4f" },
+                  { label: "Versendet / Überfällig", value: sentRevenue, color: "#b07848" },
+                ].map(({ label, value, color }) => value > 0 && (
+                  <div key={label} style={{ display: "flex", justifyContent: "space-between", fontSize: 12, marginBottom: 4 }}>
+                    <span style={{ color: "var(--text3)" }}>{label}</span>
+                    <span style={{ fontWeight: 500, color }}>{formatCHF(value)}</span>
+                  </div>
+                ))}
+                {draftRevenue > 0 && (
+                  <div style={{ marginTop: 6, paddingTop: 6, borderTop: "1px solid var(--border2)" }}>
+                    <label style={{ display: "flex", alignItems: "center", justifyContent: "space-between", cursor: "pointer", textTransform: "none" }}>
+                      <span style={{ display: "flex", alignItems: "center", gap: 5, fontSize: 11, color: "var(--text3)" }}>
+                        <input type="checkbox" checked={b.inkludiereEntwuerfe} onChange={e => setField("inkludiereEntwuerfe", e.target.checked)} style={{ width: "auto" }} />
+                        Entwürfe einbeziehen
+                      </span>
+                      <span style={{ fontSize: 12, fontWeight: 500, color: b.inkludiereEntwuerfe ? "#b5621e" : "var(--text4)", fontStyle: b.inkludiereEntwuerfe ? "normal" : "italic" }}>
+                        {b.inkludiereEntwuerfe ? formatCHF(draftRevenue) : "—"}
+                        {b.inkludiereEntwuerfe && <span style={{ fontSize: 10, color: "var(--text4)", marginLeft: 4 }}>erwartet</span>}
+                      </span>
+                    </label>
+                  </div>
+                )}
+                {paidRevenue === 0 && sentRevenue === 0 && draftRevenue === 0 && (
+                  <div style={{ fontSize: 11, color: "var(--text4)" }}>Keine Rechnungen in {currentYear} gefunden.</div>
+                )}
+              </div>
+            )}
+
+            {b.inkludiereOfferten && (
+              <div style={{ marginBottom: 14, padding: "10px 12px", background: "var(--surface2)", borderRadius: 6 }}>
+                <div style={{ fontSize: 10, letterSpacing: "0.08em", color: "var(--text4)", marginBottom: 8 }}>AUS OFFERTEN {currentYear}</div>
+                {[
+                  { label: "Angenommen", value: acceptedQuoteRevenue, color: "#2d6a4f" },
+                  { label: "Gesendet", value: sentQuoteRevenue, color: "#b07848" },
+                ].map(({ label, value, color }) => value > 0 && (
+                  <div key={label} style={{ display: "flex", justifyContent: "space-between", fontSize: 12, marginBottom: 4 }}>
+                    <span style={{ color: "var(--text3)" }}>{label}</span>
+                    <span style={{ fontWeight: 500, color }}>{formatCHF(value)}</span>
+                  </div>
+                ))}
+                {draftQuoteRevenue > 0 && (
+                  <div style={{ marginTop: 6, paddingTop: 6, borderTop: "1px solid var(--border2)" }}>
+                    <label style={{ display: "flex", alignItems: "center", justifyContent: "space-between", cursor: "pointer", textTransform: "none" }}>
+                      <span style={{ display: "flex", alignItems: "center", gap: 5, fontSize: 11, color: "var(--text3)" }}>
+                        <input type="checkbox" checked={b.inkludiereOffertEntwuerfe} onChange={e => setField("inkludiereOffertEntwuerfe", e.target.checked)} style={{ width: "auto" }} />
+                        Entwürfe einbeziehen
+                      </span>
+                      <span style={{ fontSize: 12, fontWeight: 500, color: b.inkludiereOffertEntwuerfe ? "#b5621e" : "var(--text4)", fontStyle: b.inkludiereOffertEntwuerfe ? "normal" : "italic" }}>
+                        {b.inkludiereOffertEntwuerfe ? formatCHF(draftQuoteRevenue) : "—"}
+                        {b.inkludiereOffertEntwuerfe && <span style={{ fontSize: 10, color: "var(--text4)", marginLeft: 4 }}>erwartet</span>}
+                      </span>
+                    </label>
+                  </div>
+                )}
+                {acceptedQuoteRevenue === 0 && sentQuoteRevenue === 0 && draftQuoteRevenue === 0 && (
+                  <div style={{ fontSize: 11, color: "var(--text4)" }}>Keine Offerten in {currentYear} gefunden.</div>
+                )}
+              </div>
+            )}
+
+            {(b.extraIncome || []).length > 0 && (
+              <table style={{ width: "100%", borderCollapse: "collapse", marginBottom: 12 }}>
+                <tbody>
+                  {(b.extraIncome || []).map(r => (
+                    <tr key={r.id} style={{ opacity: r.aktiv ? 1 : 0.45 }}>
+                      <td style={{ padding: "7px 6px 7px 0", borderBottom: "1px solid var(--border2)" }}>
+                        <label style={{ display: "flex", alignItems: "center", gap: 6, cursor: "pointer", textTransform: "none", fontSize: 12 }}>
+                          <input type="checkbox" checked={r.aktiv} onChange={e => setIncomeRow(r.id, { aktiv: e.target.checked })} style={{ width: "auto" }} />
+                          <span style={{ fontWeight: 500, fontStyle: "italic", color: "var(--text3)" }}>{r.label}</span>
+                        </label>
+                      </td>
+                      <td style={{ padding: "7px 0 7px 6px", borderBottom: "1px solid var(--border2)", textAlign: "right" }}>
+                        <div style={{ display: "flex", alignItems: "center", gap: 6, justifyContent: "flex-end" }}>
+                          <input type="number" step="100" value={r.amount} onChange={e => setIncomeRow(r.id, { amount: +e.target.value })}
+                            style={{ width: 110, height: 28, fontSize: 12, padding: "0 8px" }} />
+                          <button onClick={() => delIncome(r.id)} style={{ background: "none", border: "none", color: "var(--text4)", cursor: "pointer", fontSize: 14, padding: 0 }}><span className="material-icons" style={{ fontSize: 16 }}>close</span></button>
+                        </div>
+                      </td>
+                    </tr>
+                  ))}
+                </tbody>
+              </table>
+            )}
+
+            <div style={{ display: "flex", gap: 6, alignItems: "center", marginBottom: 12 }}>
+              <input value={newIncome.label} onChange={e => setNewIncome(p => ({ ...p, label: e.target.value }))}
+                placeholder="z.B. Subvention, Förderung…" style={{ flex: 1, height: 32, fontSize: 12 }}
+                onKeyDown={e => e.key === "Enter" && addIncome()} />
+              <input type="number" step="100" value={newIncome.amount || ""} onChange={e => setNewIncome(p => ({ ...p, amount: +e.target.value }))}
+                placeholder="CHF/Jahr" style={{ width: 100, height: 32, fontSize: 12 }} />
+              <button className="btn btn-ghost" style={{ height: 32, padding: "0 12px", fontSize: 12, whiteSpace: "nowrap" }} onClick={addIncome}>+ Hinzufügen</button>
+            </div>
+
+            <div style={{ display: "flex", justifyContent: "space-between", fontWeight: 600, fontSize: 13, paddingTop: 8, borderTop: "1.5px solid var(--border)" }}>
+              <span>Total Einnahmen</span>
+              <span style={{ fontFamily: "'Playfair Display', serif", color: "#2d6a4f" }}>{formatCHF(totalRevenue)}</span>
+            </div>
+          </div>
+
+          {/* Reserve & Stunden & Marge — kompakt in einer Zeile */}
+          <div className="card">
+            <SectionLabel>PARAMETER</SectionLabel>
+            <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr 1fr", gap: 16, marginBottom: 16 }}>
+              {[
+                { label: "Reserve %", key: "reserve", min: 0, max: 50, hint: "Puffer für Unvorhergesehenes" },
+                { label: "Produktiv-Quote %", key: "produktivQuote", min: 10, max: 100, hint: "Verrechenbare Stunden (60–75%)" },
+                { label: "Ziel-Marge %", key: "zielMarge", min: 0, max: 80, hint: "Aufschlag für Gewinn / Reinvestition" },
+              ].map(({ label, key, min, max, hint }) => (
+                <div key={key}>
+                  <div style={{ fontSize: 11, color: "var(--text4)", marginBottom: 5 }}>{label}</div>
+                  <input type="number" step="1" min={min} max={max} value={b[key]}
+                    onChange={e => setField(key, +e.target.value)}
+                    style={{ width: "100%", height: 34, fontSize: 13, padding: "0 10px" }} />
+                  <div style={{ fontSize: 10, color: "var(--text4)", marginTop: 4 }}>{hint}</div>
+                </div>
+              ))}
+            </div>
+            <div style={{ paddingTop: 12, borderTop: "1px solid var(--border2)" }}>
+              <div style={{ fontSize: 11, color: "var(--text4)", marginBottom: 6 }}>Aktueller Stundensatz (Vergleichswert)</div>
+              <OverrideInput
+                label="übersteuern"
+                aktiv={true}
+                checked={b.rateOverride}
+                onToggle={v => setField("rateOverride", v)}
+                value={b.rateManual}
+                onChange={v => setField("rateManual", v)}
+                autoVal={defaultRate}
+                unit="CHF"
+                step={5}
+              />
+              <div style={{ fontSize: 10, color: "var(--text4)", marginTop: 4 }}>Standard aus Einstellungen: {formatCHF(defaultRate)}/h</div>
+            </div>
+          </div>
+
+        </div>
+
+        {/* ── RECHTE SPALTE: Ergebnis ── */}
+        <div style={{ display: "flex", flexDirection: "column", gap: 16 }}>
+
+          {/* Kostenstruktur */}
+          <div className="card">
+            <SectionLabel>KOSTENSTRUKTUR / JAHR</SectionLabel>
+            {[
+              { label: "Personalkosten", value: personalKosten },
+              { label: "Fixkosten", value: fixKosten + extraKosten },
+              { label: "Basiskosten", value: basisKosten, bold: true },
+              { label: `+ Reserve (${b.reserve}%)`, value: reserve, indent: true },
+              { label: "Gesamtkosten", value: gesamtKosten, total: true },
+            ].map((r, i) => (
+              <div key={i} style={{ display: "flex", justifyContent: "space-between", padding: r.total ? "8px 0 2px" : r.indent ? "2px 0 2px 12px" : "4px 0", borderTop: r.total ? "2px solid var(--text)" : "none", borderBottom: r.total ? "none" : "1px solid var(--border2)", marginTop: r.total ? 4 : 0 }}>
+                <span style={{ fontSize: r.total ? 13 : r.indent ? 11 : 12, fontWeight: r.total || r.bold ? 700 : 400, color: r.total || r.bold ? "var(--text)" : "var(--text2)" }}>{r.label}</span>
+                <span style={{ fontSize: r.total ? 15 : 12, fontWeight: r.total || r.bold ? 700 : 400, fontFamily: r.total || r.bold ? "'Playfair Display', serif" : "inherit" }}>{formatCHF(r.value)}</span>
+              </div>
+            ))}
+            {totalRevenue > 0 && (
+              <>
+                <div style={{ display: "flex", justifyContent: "space-between", padding: "8px 0 4px", marginTop: 8, borderTop: "1px dashed var(--border)" }}>
+                  <span style={{ fontSize: 12, color: "var(--text2)" }}>
+                    Einnahmen
+                    {b.inkludiereEntwuerfe && draftRevenue > 0 && b.inkludiereRechnungen && (
+                      <span style={{ fontSize: 10, color: "#b5621e", marginLeft: 5 }}>inkl. {formatCHF(draftRevenue)} erwartet (Rechnungen)</span>
+                    )}
+                    {b.inkludiereOffertEntwuerfe && draftQuoteRevenue > 0 && b.inkludiereOfferten && (
+                      <span style={{ fontSize: 10, color: "#b5621e", marginLeft: 5 }}>inkl. {formatCHF(draftQuoteRevenue)} erwartet (Offerten)</span>
+                    )}
+                  </span>
+                  <span style={{ fontSize: 12, fontWeight: 600, color: "#2d6a4f" }}>{formatCHF(totalRevenue)}</span>
+                </div>
+                <div style={{ display: "flex", justifyContent: "space-between", padding: "8px 0 2px", borderTop: "2px solid var(--text)", marginTop: 4 }}>
+                  <span style={{ fontSize: 13, fontWeight: 700 }}>Ergebnis</span>
+                  <span style={{ fontSize: 15, fontWeight: 700, fontFamily: "'Playfair Display', serif", color: ergebnis >= 0 ? "#2d6a4f" : "#8a1a1a" }}>
+                    {ergebnis >= 0 ? "+" : ""}{formatCHF(ergebnis)}
+                  </span>
+                </div>
+              </>
+            )}
+          </div>
+
+          {/* Stunden — Soll + Ist zusammen */}
+          <div className="card">
+            <SectionLabel>STUNDEN</SectionLabel>
+            <div style={{ display: "flex", justifyContent: "space-between", padding: "4px 0", borderBottom: "1px solid var(--border2)", fontSize: 12 }}>
+              <span style={{ color: "var(--text2)" }}>Verfügbar</span>
+              <span>{jahresStundenFallback}h {employees.length === 0 && <span style={{ color: "var(--text4)", fontSize: 10 }}>Fallback</span>}</span>
+            </div>
+            <div style={{ display: "flex", justifyContent: "space-between", padding: "4px 0", borderBottom: "1px solid var(--border2)", fontSize: 12 }}>
+              <span style={{ color: "var(--text2)" }}>Produktiv ({b.produktivQuote}%)</span>
+              <span style={{ fontWeight: 600 }}>{produktivStunden}h</span>
+            </div>
+            <div style={{ marginTop: 10 }}>
+              <div style={{ height: 5, background: "var(--border)", borderRadius: 3, overflow: "hidden" }}>
+                <div style={{ width: `${b.produktivQuote}%`, height: "100%", background: b.produktivQuote >= 80 ? "#8a1a1a" : b.produktivQuote >= 70 ? "#b5621e" : "#2d6a4f", borderRadius: 3 }} />
+              </div>
+              <div style={{ fontSize: 10, color: "var(--text4)", marginTop: 3 }}>Über 75% ist anspruchsvoll</div>
+            </div>
+
+            {totalTrackedMins > 0 && (
+              <div style={{ marginTop: 14, paddingTop: 14, borderTop: "1px solid var(--border2)" }}>
+                <div style={{ fontSize: 10, letterSpacing: "0.08em", color: "var(--text4)", marginBottom: 10 }}>IST {currentYear}</div>
+                {[
+                  { label: "Verrechenbar", mins: billingMins, color: "#2d6a4f" },
+                  { label: "Wettbewerbe", mins: wbTotalMins, color: "#b5621e" },
+                  { label: "Ohne Projekt", mins: noProjectMins, color: "#bbb" },
+                ].map(({ label, mins, color }) => {
+                  if (mins === 0) return null;
+                  const pct = (mins / totalTrackedMins) * 100;
+                  return (
+                    <div key={label} style={{ marginBottom: 8 }}>
+                      <div style={{ display: "flex", justifyContent: "space-between", fontSize: 11, marginBottom: 3 }}>
+                        <span style={{ color: "var(--text2)" }}>{label}</span>
+                        <span>{Math.round(mins / 60)}h <span style={{ color: "var(--text4)" }}>({Math.round(pct)}%)</span></span>
+                      </div>
+                      <div style={{ height: 4, background: "var(--border)", borderRadius: 2, overflow: "hidden" }}>
+                        <div style={{ width: `${pct}%`, height: "100%", background: color, borderRadius: 2 }} />
+                      </div>
+                    </div>
+                  );
+                })}
+                <div style={{ display: "flex", justifyContent: "space-between", fontSize: 12, paddingTop: 6, borderTop: "1px solid var(--border2)", marginTop: 2 }}>
+                  <span style={{ color: "var(--text2)" }}>Total erfasst</span>
+                  <span style={{ fontWeight: 600 }}>{Math.round(totalTrackedMins / 60)}h</span>
+                </div>
+                {istProduktivQuote !== null && (
+                  <div style={{ marginTop: 8, display: "flex", justifyContent: "space-between", fontSize: 11, padding: "6px 10px", borderRadius: 5, background: "var(--surface2)" }}>
+                    <span style={{ color: "var(--text3)" }}>Ist-Produktivquote</span>
+                    <span>
+                      <strong style={{ color: Math.abs(istProduktivQuote - b.produktivQuote) > 10 ? "#b5621e" : "var(--text)" }}>{Math.round(istProduktivQuote)}%</strong>
+                      <span style={{ color: "var(--text4)", marginLeft: 5 }}>Soll: {b.produktivQuote}%</span>
+                    </span>
+                  </div>
+                )}
+              </div>
+            )}
+          </div>
+
+          {/* Wettbewerbe – Interner Aufwand */}
+          {wbProjects.length > 0 && (
+            <div className="card">
+              <SectionLabel>WETTBEWERBE — INTERNER AUFWAND</SectionLabel>
+              {wbRows.length === 0 ? (
+                <div style={{ fontSize: 12, color: "var(--text4)" }}>Keine Wettbewerb-Stunden in {currentYear} erfasst.</div>
+              ) : (
+                <>
+                  <table style={{ width: "100%", borderCollapse: "collapse", marginBottom: 10 }}>
+                    <thead>
+                      <tr>
+                        <th style={{ fontSize: 10, color: "var(--text4)", fontWeight: 500, textAlign: "left", padding: "4px 6px 6px 0", borderBottom: "1px solid var(--border)" }}>Projekt</th>
+                        <th style={{ fontSize: 10, color: "var(--text4)", fontWeight: 500, textAlign: "right", padding: "4px 6px 6px", borderBottom: "1px solid var(--border)" }}>Std.</th>
+                        <th style={{ fontSize: 10, color: "var(--text4)", fontWeight: 500, textAlign: "right", padding: "4px 0 6px", borderBottom: "1px solid var(--border)" }}>Interner Aufwand</th>
+                      </tr>
+                    </thead>
+                    <tbody>
+                      {wbRows.map(r => (
+                        <tr key={r.id}>
+                          <td style={{ padding: "6px 6px 6px 0", borderBottom: "1px solid var(--border2)", fontSize: 12 }}>{r.name}</td>
+                          <td style={{ padding: "6px 6px", borderBottom: "1px solid var(--border2)", textAlign: "right", fontSize: 12 }}>{Math.round(r.hours * 10) / 10}h</td>
+                          <td style={{ padding: "6px 0", borderBottom: "1px solid var(--border2)", textAlign: "right", fontSize: 12 }}>{selbstkosten > 0 ? formatCHF(Math.round(r.cost)) : "—"}</td>
+                        </tr>
+                      ))}
+                    </tbody>
+                    <tfoot>
+                      <tr>
+                        <td style={{ padding: "7px 6px 2px 0", fontWeight: 600, fontSize: 12 }}>Total</td>
+                        <td style={{ padding: "7px 6px 2px", textAlign: "right", fontWeight: 600, fontSize: 12 }}>{Math.round(wbTotalHours * 10) / 10}h</td>
+                        <td style={{ padding: "7px 0 2px", textAlign: "right", fontWeight: 600, fontSize: 12 }}>{selbstkosten > 0 ? formatCHF(Math.round(wbTotalHours * selbstkosten)) : "—"}</td>
+                      </tr>
+                    </tfoot>
+                  </table>
+                  {selbstkosten > 0 && (
+                    <div style={{ fontSize: 11, color: "var(--text4)", paddingTop: 8, borderTop: "1px solid var(--border2)" }}>
+                      Entgangenes Honorar: {Math.round(wbTotalHours)}h × {formatCHF(currentRate)}/h = <strong style={{ color: "var(--text3)" }}>{formatCHF(Math.round(wbTotalHours * currentRate))}</strong>
+                    </div>
+                  )}
+                </>
+              )}
+            </div>
+          )}
+
+          {/* Rollenvergleich */}
+          {(data.settings.roles || []).length > 0 && selbstkosten > 0 && (
+            <div className="card">
+              <SectionLabel>ROLLEN-VERGLEICH</SectionLabel>
+              {(data.settings.roles || []).map(role => {
+                const diff = role.rate - zielHonorar;
+                const ok = diff >= 0;
+                return (
+                  <div key={role.id} style={{ display: "flex", justifyContent: "space-between", alignItems: "center", padding: "5px 0", borderBottom: "1px solid var(--border2)" }}>
+                    <div>
+                      <span style={{ fontSize: 12 }}>{role.label}</span>
+                      <span style={{ fontSize: 10, color: "var(--text4)", marginLeft: 6 }}>{formatCHF(role.rate)}/h</span>
+                    </div>
+                    <span style={{ fontSize: 12, fontWeight: 600, color: ok ? "#2d6a4f" : "#8a1a1a" }}>
+                      {ok ? "+" : ""}{formatCHF(Math.round(diff))} {ok ? "▲" : "▼"}
+                    </span>
+                  </div>
+                );
+              })}
+              <div style={{ fontSize: 10, color: "var(--text4)", marginTop: 8 }}>Differenz zum Ziel-Honorar von {formatCHF(Math.round(zielHonorar))}/h</div>
+            </div>
+          )}
+
+        </div>
+      </div>
+    </div>
+  );
+}
diff --git a/src/views/Time.jsx b/src/views/Time.jsx
new file mode 100755
index 0000000..5fcac19
--- /dev/null
+++ b/src/views/Time.jsx
@@ -0,0 +1,1494 @@
+import React, { useState, useRef, useEffect } from "react";
+import { SIA_PHASES, EXPENSE_CATEGORIES } from "../constants.js";
+import { generateId, formatDate, formatHours, getAbsenzTypes } from "../utils.js";
+import { Header, FormField, Modal, DateInput, DatePicker, CalendarPopup, useCalendarNav, NavArrows } from "../components/UI.jsx";
+
+const SLOT_START_H = 0;
+const SLOT_END_H = 24;
+const SLOT_COUNT = (SLOT_END_H - SLOT_START_H) * 4;
+const SLOT_H = 12;
+const slotToTime = (idx) => { const m = SLOT_START_H * 60 + idx * 15; return `${String(Math.floor(m/60)).padStart(2,"0")}:${String(m%60).padStart(2,"0")}`; };
+const PROJ_COLORS = ["#b07848","#4a7c8c","#6b8c4a","#8c5a7c","#5a6c8c","#8c7a4a","#5a8c7a","#8c6a5a"];
+
+export default
+function Time({ data, update, currentUser, setPrintContent }) {
+  const myEmployeeId = currentUser?.employeeId || null;
+  const isAdmin = !myEmployeeId;
+  const [currentDate, setCurrentDate] = useState(new Date().toISOString().slice(0, 10));
+  const [selectedEmpId, setSelectedEmpId] = useState(() => myEmployeeId || "");
+  const [viewMode, setViewMode] = useState("woche");
+  const [weekSelectStart, setWeekSelectStart] = useState(null);
+  const [weekHover, setWeekHover] = useState(null);
+  const [weekForm, setWeekForm] = useState(null);
+  const [weekAbsForm, setWeekAbsForm] = useState(null);
+  const [weekEditForm, setWeekEditForm] = useState(null);
+  const [contextMenu, setContextMenu] = useState(null);
+  const weekGridRef = useRef(null);
+  const resizingRef = useRef(null);
+  const [resizeTick, setResizeTick] = useState(0);
+  const dataRef = useRef(data);
+  const updateRef = useRef(update);
+  dataRef.current = data;
+  updateRef.current = update;
+
+  const employees = data.employees || [];
+  const selectedEmp = employees.find(e => e.id === selectedEmpId) || null;
+
+  const changeDate = (delta) => {
+    const d = new Date(currentDate);
+    d.setDate(d.getDate() + delta);
+    setCurrentDate(d.toISOString().slice(0, 10));
+  };
+  const goToday = () => setCurrentDate(new Date().toISOString().slice(0, 10));
+
+  // Wenn MA gewählt: nur dessen Einträge + Einträge ohne MA-Zuweisung ausblenden
+  // Wenn kein MA gewählt: alle Einträge (inkl. ohne MA)
+  const dayEntries = data.timeEntries.filter(e => {
+    if (e.date !== currentDate) return false;
+    if (selectedEmpId) return e.employeeId === selectedEmpId;
+    return true;
+  }).sort((a, b) => (a.createdAt || "").localeCompare(b.createdAt || ""));
+  const dayTotalMins = dayEntries.reduce((s, e) => s + (e.minutes || 0), 0);
+
+  // Hilfsfunktion: Feiertage für ein Jahr auflösen
+  const resolveFTs = (yr) => {
+    const fts = (data.feiertage || []).map(f =>
+      f.repeatsYearly ? { ...f, date: `${yr}-${f.date.slice(5, 10)}` } : f
+    );
+    // Tag vor Feiertag: -1h (nur wenn stundenDelta nicht schon gesetzt)
+    const ftDates = new Set(fts.filter(f => f.stundenDelta === 0 || f.stundenDelta === null || f.stundenDelta === undefined).map(f => f.date));
+    const vortage = [];
+    ftDates.forEach(ftDate => {
+      const d = new Date(ftDate);
+      d.setDate(d.getDate() - 1);
+      const ds = d.toISOString().slice(0, 10);
+      const dow = d.getDay();
+      if (dow !== 0 && dow !== 6 && !ftDates.has(ds) && !fts.some(f => f.date === ds)) {
+        vortage.push({ id: `vortag-${ds}`, date: ds, label: `Vortag ${ftDate}`, stundenDelta: -1 });
+      }
+    });
+    return [...fts, ...vortage];
+  };
+
+  // Prüft ob ein Mitarbeiter an einem Tag bestätigte Ferien hat
+  const isApprovedVacationDay = (empId, dateStr) =>
+    (data.ferienEntries || []).some(f => {
+      if (f.employeeId !== empId) return false;
+      const active = f.status === "approved" || !f.status || (f.status === "pending" && f.originalData);
+      if (!active) return false;
+      const df = (f.status === "pending" && f.originalData) ? f.originalData.dateFrom : f.dateFrom;
+      const dt = (f.status === "pending" && f.originalData) ? f.originalData.dateTo : f.dateTo;
+      return dateStr >= df && dateStr <= dt;
+    });
+
+  // Tages-Soll für gewählten Mitarbeiter
+  const getSollForDay = (emp, dateStr) => {
+    if (!emp) return 0;
+    // Vor Eintrittsdatum: 0
+    if (emp.eintrittsdatum && dateStr < emp.eintrittsdatum) return 0;
+    const d = new Date(dateStr);
+    const dow = d.getDay();
+    if (dow === 0 || dow === 6) return 0;
+    const yr = d.getFullYear();
+    const fts = resolveFTs(yr);
+    const ft = fts.find(f => f.date === dateStr);
+    const pensum = (emp.pensum || 100) / 100;
+    const tagessoll = ((emp.wochenstunden || 35) * pensum) / 5;
+    if (ft && (ft.stundenDelta === 0 || ft.stundenDelta === null || ft.stundenDelta === undefined)) return 0;
+    if (isApprovedVacationDay(emp.id, dateStr)) return 0;
+    if (ft) return Math.max(0, tagessoll + (ft.stundenDelta || 0));
+    return tagessoll;
+  };
+  const daySoll = getSollForDay(selectedEmp, currentDate);
+
+  // Monatssaldo
+  const viewDate2 = new Date(currentDate);
+  const calcMonthSaldo = (emp) => {
+    if (!emp) return null;
+    const yr = viewDate2.getFullYear();
+    const mo = viewDate2.getMonth();
+    const monthStr = `${yr}-${String(mo + 1).padStart(2, "0")}`;
+    const today = new Date().toISOString().slice(0, 10);
+    const pensum = (emp.pensum || 100) / 100;
+    const tagessoll = ((emp.wochenstunden || 35) * pensum) / 5;
+    const fts = resolveFTs(yr);
+    let soll = 0, sollTotal = 0;
+    const d = new Date(`${yr}-${String(mo + 1).padStart(2, "0")}-01`);
+    while (d.toISOString().slice(0, 7) === monthStr) {
+      const ds = d.toISOString().slice(0, 10);
+      if (!(emp.eintrittsdatum && ds < emp.eintrittsdatum)) {
+        const dow = d.getDay();
+        if (dow !== 0 && dow !== 6 && !isApprovedVacationDay(emp.id, ds)) {
+          const ft = fts.find(f => f.date === ds);
+          let h = 0;
+          if (!ft || (ft.stundenDelta === 0 || ft.stundenDelta === null || ft.stundenDelta === undefined)) {
+            h = ft ? 0 : tagessoll;
+          } else {
+            h = Math.max(0, tagessoll + (ft.stundenDelta || 0));
+          }
+          sollTotal += h;
+          if (ds <= today) soll += h;
+        }
+      }
+      d.setDate(d.getDate() + 1);
+    }
+    const istMins = (data.timeEntries || []).filter(e => e.date?.startsWith(monthStr) && e.employeeId === emp.id).reduce((s, e) => s + (e.minutes || 0), 0);
+    const absenzH = (data.absences || []).filter(a => a.employeeId === emp.id).reduce((s, a) => {
+      const from = a.dateFrom || a.date; const to = a.dateTo || a.date;
+      if (!from) return s;
+      const isSingleDay = from === to;
+      const ad = new Date(from); const ae = new Date(to);
+      let h = 0;
+      while (ad <= ae) {
+        const ds = ad.toISOString().slice(0, 10);
+        if (ds.startsWith(monthStr) && ds <= today && ad.getDay()!==0 && ad.getDay()!==6 && !fts.some(ft=>ft.date===ds&&(ft.stundenDelta===0||ft.stundenDelta===null||ft.stundenDelta===undefined))) {
+          if (isSingleDay && a.startTime && a.endTime) { const [sh,sm]=a.startTime.split(":").map(Number); const [eh,em]=a.endTime.split(":").map(Number); h+=(eh*60+em-sh*60-sm)/60; }
+          else if (isSingleDay) { const ex=(a.hours||0)*60+(a.minutes||0); h+=ex>0?ex/60:tagessoll; }
+          else { h+=tagessoll; }
+        }
+        ad.setDate(ad.getDate()+1);
+      }
+      return s + h;
+    }, 0);
+    const istH = Math.round(istMins / 60 * 10) / 10;
+    return { soll: Math.round(soll*10)/10, sollTotal: Math.round(sollTotal*10)/10, ist: istH, absenz: Math.round(absenzH*10)/10, saldo: Math.round((istH+absenzH-soll)*10)/10, saldoTotal: Math.round((istH+absenzH-sollTotal)*10)/10 };
+  };
+  const monthSaldo = calcMonthSaldo(selectedEmp);
+
+  // Totalsaldo (Eintrittsdatum bis heute)
+  const calcTotalSaldo = (emp) => {
+    if (!emp) return null;
+    const today = new Date().toISOString().slice(0, 10);
+    const start = emp.eintrittsdatum || `${new Date().getFullYear()}-01-01`;
+    if (start > today) return { soll: 0, ist: 0, ferien: 0, absenz: 0, saldo: 0 };
+    const pensum = (emp.pensum || 100) / 100;
+    const tagessoll = ((emp.wochenstunden || 35) * pensum) / 5;
+    const ftsCache = {};
+    const getFts = (yr) => { if (!ftsCache[yr]) ftsCache[yr] = resolveFTs(yr); return ftsCache[yr]; };
+    const todayDate = new Date(today);
+    let soll = 0;
+    const d = new Date(start);
+    while (d <= todayDate) {
+      const ds = d.toISOString().slice(0, 10);
+      const yr = d.getFullYear();
+      const fts = getFts(yr);
+      const dow = d.getDay();
+      if (dow !== 0 && dow !== 6 && !isApprovedVacationDay(emp.id, ds)) {
+        const ft = fts.find(f => f.date === ds);
+        if (!ft || ft.stundenDelta === 0 || ft.stundenDelta === null || ft.stundenDelta === undefined) {
+          soll += ft ? 0 : tagessoll;
+        } else {
+          soll += Math.max(0, tagessoll + (ft.stundenDelta || 0));
+        }
+      }
+      d.setDate(d.getDate() + 1);
+    }
+    const istMins = (data.timeEntries || []).filter(e => e.employeeId === emp.id && e.date >= start && e.date <= today).reduce((s, e) => s + (e.minutes || 0), 0);
+    const absenzH = (data.absences || []).filter(a => a.employeeId === emp.id).reduce((s, a) => {
+      const from = a.dateFrom || a.date; const to = a.dateTo || a.date;
+      if (!from) return s;
+      const isSingleDay = from === to;
+      const ad = new Date(from < start ? start : from);
+      const ae = new Date(to > today ? today : to);
+      let h = 0;
+      while (ad <= ae) {
+        const ds = ad.toISOString().slice(0, 10);
+        const fts = getFts(ad.getFullYear());
+        if (ad.getDay()!==0 && ad.getDay()!==6 && !fts.some(ft=>ft.date===ds&&(ft.stundenDelta===0||ft.stundenDelta===null||ft.stundenDelta===undefined))) {
+          if (isSingleDay && a.startTime && a.endTime) { const [sh,sm]=a.startTime.split(":").map(Number); const [eh,em]=a.endTime.split(":").map(Number); h+=(eh*60+em-sh*60-sm)/60; }
+          else if (isSingleDay) { const ex=(a.hours||0)*60+(a.minutes||0); h+=ex>0?ex/60:tagessoll; }
+          else { h+=tagessoll; }
+        }
+        ad.setDate(ad.getDate()+1);
+      }
+      return s + h;
+    }, 0);
+    const istH = Math.round(istMins / 60 * 10) / 10;
+    return { soll: Math.round(soll*10)/10, ist: istH, absenz: Math.round(absenzH*10)/10, saldo: Math.round((istH+absenzH-soll)*10)/10 };
+  };
+  const totalSaldo = calcTotalSaldo(selectedEmp);
+
+  // Feriensaldo
+  const calcFerienSaldo = (emp) => {
+    if (!emp) return null;
+    const yr = viewDate2.getFullYear();
+    const yearStr = String(yr);
+    const pensum = (emp.pensum || 100) / 100;
+    const tagessoll = ((emp.wochenstunden || 35) * pensum) / 5;
+    const yearStart = `${yr}-01-01`;
+    const eintrittsdatum = emp.eintrittsdatum || null;
+    let proRata = 1;
+    if (eintrittsdatum && eintrittsdatum > yearStart) {
+      const entryMonth = parseInt(eintrittsdatum.slice(5, 7));
+      proRata = (13 - entryMonth) / 12;
+    }
+    const anspruchH = (emp.ferienWochen || 4) * (emp.wochenstunden || 35) * pensum * proRata;
+    const ubertragH = (emp.ferienUebertragVorjahr || {})[yr] || 0;
+    const fts = resolveFTs(yr);
+    const today = new Date().toISOString().slice(0, 10);
+    const isFtFree = (ds) => fts.some(ft => ft.date === ds && (ft.stundenDelta === 0 || ft.stundenDelta === null || ft.stundenDelta === undefined));
+    const countWorkdays = (from, to, onlyPast, onlyFuture) => {
+      let cnt = 0;
+      const d = new Date(from); const e = new Date(to);
+      while (d <= e) {
+        const ds = d.toISOString().slice(0, 10);
+        if (ds.startsWith(yearStr) && d.getDay() !== 0 && d.getDay() !== 6 && !isFtFree(ds)) {
+          if (onlyPast && ds > today) { d.setDate(d.getDate() + 1); continue; }
+          if (onlyFuture && ds <= today) { d.setDate(d.getDate() + 1); continue; }
+          cnt++;
+        }
+        d.setDate(d.getDate() + 1);
+      }
+      return cnt;
+    };
+    // Bestätigte Ferien: approved OR pending-with-originalData (use originalData dates)
+    const confirmedEntries = (data.ferienEntries || []).filter(f =>
+      f.employeeId === emp.id && (f.status === "approved" || !f.status || (f.status === "pending" && f.originalData))
+    ).map(f => ({
+      from: (f.status === "pending" && f.originalData) ? f.originalData.dateFrom : f.dateFrom,
+      to: (f.status === "pending" && f.originalData) ? f.originalData.dateTo : f.dateTo,
+    }));
+    const bezogenH = confirmedEntries.reduce((s, f) => s + countWorkdays(f.from, f.to, true, false) * tagessoll, 0);
+    const geplantH = confirmedEntries.filter(f => f.from > today).reduce((s, f) => s + countWorkdays(f.from, f.to, false, true) * tagessoll, 0);
+    // Beantragt: pending entries (use their requested dates)
+    const beantragtH = (data.ferienEntries || []).filter(f =>
+      f.employeeId === emp.id && f.status === "pending" &&
+      (f.dateFrom.startsWith(yearStr) || f.dateTo.startsWith(yearStr))
+    ).reduce((s, f) => s + countWorkdays(f.dateFrom, f.dateTo, false, false) * tagessoll, 0);
+    return {
+      anspruch: Math.round(anspruchH*10)/10,
+      ubertrag: Math.round(ubertragH*10)/10,
+      bezogen: Math.round(bezogenH*10)/10,
+      geplant: Math.round(geplantH*10)/10,
+      beantragt: Math.round(beantragtH*10)/10,
+      rest: Math.round((anspruchH + ubertragH - bezogenH - geplantH) * 10) / 10,
+    };
+  };
+  const ferienSaldo = calcFerienSaldo(selectedEmp);
+
+  const projectHasPhases = (proj) => {
+    if (!proj) return false;
+    return (proj.enabledPhases || []).length > 0 || (proj.customPhases || []).length > 0 ||
+      (proj.positions || []).some(pos => (pos.enabledPhases || []).length > 0);
+  };
+
+  const getFirstPhaseForProject = (proj) => {
+    if (!proj) return { phaseId: "", positionId: "" };
+    const cp = proj.customPhases || [];
+    if (cp.length > 0) return { phaseId: cp[0].id, positionId: "" };
+    const ep = proj.enabledPhases || [];
+    if (ep.length > 0) return { phaseId: ep[0], positionId: "" };
+    for (const pos of (proj.positions || [])) {
+      if ((pos.enabledPhases || []).length > 0) return { phaseId: pos.enabledPhases[0], positionId: pos.code };
+    }
+    return { phaseId: "", positionId: "" };
+  };
+
+  const closedMonths = data.settings.closedMonths || [];
+  const isMonthClosed = (date) => closedMonths.includes((date || "").slice(0, 7));
+
+  const addEntry = () => {
+    if (isMonthClosed(currentDate)) { alert("Dieser Monat ist abgeschlossen und kann nicht mehr bearbeitet werden."); return; }
+    const firstActive = data.projects.find(p => p.status === "aktiv") || data.projects[0];
+    const { phaseId, positionId } = getFirstPhaseForProject(firstActive);
+    const toTime = (m) => `${String(Math.floor(m / 60)).padStart(2, "0")}:${String(m % 60).padStart(2, "0")}`;
+    const todayEnds = data.timeEntries.filter(e => e.date === currentDate && (!selectedEmpId || e.employeeId === selectedEmpId) && e.endTime);
+    let startMins = 8 * 60;
+    if (todayEnds.length > 0) {
+      const maxEnd = todayEnds.reduce((max, e) => { const [h, m] = e.endTime.split(":").map(Number); return Math.max(max, h * 60 + m); }, 0);
+      if (maxEnd > 0) startMins = maxEnd;
+    }
+    const defaultMins = 60;
+    const newEntry = { id: generateId(), date: currentDate, projectId: firstActive?.id || "", phaseId, positionId, minutes: defaultMins, startTime: toTime(startMins), endTime: toTime(startMins + defaultMins), description: "", createdAt: new Date().toISOString(), ...(selectedEmpId ? { employeeId: selectedEmpId } : {}) };
+    update("timeEntries", [...data.timeEntries, newEntry]);
+  };
+
+  const updateEntry = (id, changes) => {
+    const entry = data.timeEntries.find(e => e.id === id);
+    if (entry?.invoiceId) { alert("Dieser Eintrag ist bereits verrechnet und kann nicht mehr geändert werden. Lösche zuerst die zugehörige Rechnung."); return; }
+    if (isMonthClosed(entry?.date)) { alert("Dieser Monat ist abgeschlossen und kann nicht mehr bearbeitet werden."); return; }
+    const merged = { ...entry, ...changes };
+    if ("minutes" in changes && merged.startTime) {
+      const [h, m] = merged.startTime.split(":").map(Number);
+      const endMins = h * 60 + m + (merged.minutes || 0);
+      changes = { ...changes, endTime: `${String(Math.floor(endMins / 60)).padStart(2, "0")}:${String(endMins % 60).padStart(2, "0")}` };
+    }
+    update("timeEntries", data.timeEntries.map(e => e.id === id ? { ...e, ...changes } : e));
+  };
+
+  const delEntry = (id) => {
+    const entry = data.timeEntries.find(e => e.id === id);
+    if (entry?.invoiceId) { alert("Dieser Eintrag ist bereits verrechnet und kann nicht gelöscht werden. Lösche zuerst die zugehörige Rechnung."); return; }
+    if (isMonthClosed(entry?.date)) { alert("Dieser Monat ist abgeschlossen und kann nicht mehr gelöscht werden."); return; }
+    update("timeEntries", data.timeEntries.filter(e => e.id !== id));
+  };
+
+  // Tages-Spesen — inline editing
+  const mwstRate = data.settings.mwstRate || 8.1;
+  const dayExpenses = (data.expenses || []).filter(e => {
+    if (e.date !== currentDate) return false;
+    if (selectedEmpId) return e.employeeId === selectedEmpId;
+    return true;
+  });
+
+  const addExp = () => {
+    update("expenses", [...(data.expenses || []), { id: generateId(), date: currentDate, category: (data.settings.expenseCategories || EXPENSE_CATEGORIES)[0], projectId: "", description: "", amount: 0, mwstRate, inclMwst: true, employeeId: selectedEmpId || "" }]);
+  };
+  const updateExp = (id, changes) => update("expenses", (data.expenses || []).map(e => e.id === id ? { ...e, ...changes } : e));
+  const delExp = (id) => update("expenses", (data.expenses || []).filter(e => e.id !== id));
+
+  // Intern / Absenz — inline editing
+  const absenzTypes = getAbsenzTypes(data);
+  const dayAbs = (data.absences || []).filter(a => {
+    const matchDate = a.date === currentDate || (a.dateFrom && a.dateTo && currentDate >= a.dateFrom && currentDate <= a.dateTo);
+    return matchDate && (!selectedEmpId || a.employeeId === selectedEmpId);
+  });
+
+  const dayAbsMins = selectedEmp ? dayAbs.reduce((s, a) => {
+    if (a.startTime && a.endTime) { const [sh,sm]=a.startTime.split(":").map(Number); const [eh,em]=a.endTime.split(":").map(Number); return s+(eh*60+em)-(sh*60+sm); }
+    const ex=(a.hours||0)*60+(a.minutes||0); return s+(ex>0?ex:daySoll*60);
+  }, 0) : 0;
+  const dayIst = (dayTotalMins + dayAbsMins) / 60;
+  const dayDiff = Math.round((dayIst - daySoll) * 10) / 10;
+
+  const toAbsTime = (m) => `${String(Math.floor(m / 60)).padStart(2, "0")}:${String(m % 60).padStart(2, "0")}`;
+  const addAbs = () => {
+    const todayAbs = (data.absences || []).filter(a =>
+      (a.date === currentDate || (a.dateFrom && a.dateTo && currentDate >= a.dateFrom && currentDate <= a.dateTo)) &&
+      (!selectedEmpId || a.employeeId === selectedEmpId)
+    );
+    let startMins = 8 * 60;
+    if (todayAbs.length > 0) {
+      const maxEnd = todayAbs.reduce((max, a) => {
+        let endM;
+        if (a.endTime) { const [h,m]=a.endTime.split(":").map(Number); endM=h*60+m; }
+        else { const dur=(a.hours||0)*60+(a.minutes||0); endM=8*60+(dur>0?dur:Math.round(daySoll*60)); }
+        return Math.max(max, endM);
+      }, 8 * 60);
+      if (maxEnd > 8 * 60) startMins = maxEnd;
+    }
+    const endMins = startMins + 60;
+    update("absences", [...(data.absences || []), { id: generateId(), date: currentDate, employeeId: selectedEmpId || (employees[0]?.id || ""), type: absenzTypes[0]?.id || "", startTime: toAbsTime(startMins), endTime: toAbsTime(endMins), hours: 1, minutes: 0, note: "", status: "pending", createdAt: new Date().toISOString() }]);
+  };
+  const updateAbs = (id, changes) => {
+    const abs = (data.absences || []).find(a => a.id === id);
+    if (!abs) return;
+    if (abs.startTime && ("hours" in changes || "minutes" in changes)) {
+      const [sh, sm] = abs.startTime.split(":").map(Number);
+      const newH = "hours" in changes ? changes.hours : (abs.hours || 0);
+      const newM = "minutes" in changes ? changes.minutes : (abs.minutes || 0);
+      const endMins = Math.min(sh * 60 + sm + newH * 60 + newM, 23 * 60 + 59);
+      changes = { ...changes, endTime: toAbsTime(endMins) };
+    }
+    update("absences", (data.absences || []).map(a => a.id === id ? { ...a, ...changes } : a));
+  };
+  const delAbs = (id) => update("absences", (data.absences || []).filter(a => a.id !== id));
+
+  // Ferien-Antrag Modal
+  const [antragModal, setAntragModal] = useState(null);
+  const [antragForm, setAntragForm] = useState({});
+
+  const openFerienAntrag = () => {
+    setAntragForm({ employeeId: selectedEmpId || (employees[0]?.id || ""), dateFrom: currentDate, dateTo: currentDate, note: "" });
+    setAntragModal("ferien");
+  };
+  const [antragSaved, setAntragSaved] = useState(false);
+  const saveAntrag = () => {
+    if (!antragForm.employeeId || !antragForm.dateFrom || !antragForm.dateTo) return;
+    if (antragForm.id) {
+      const existing = (data.ferienEntries || []).find(f => f.id === antragForm.id);
+      let entry;
+      if (existing?.status === "approved" || !existing?.status) {
+        entry = {
+          ...antragForm,
+          status: "pending",
+          originalData: existing?.originalData || { dateFrom: existing.dateFrom, dateTo: existing.dateTo, note: existing.note || "" },
+        };
+      } else {
+        entry = { ...antragForm, status: "pending" };
+      }
+      update("ferienEntries", (data.ferienEntries || []).map(f => f.id === entry.id ? entry : f));
+    } else {
+      const entry = { ...antragForm, id: generateId(), status: "pending", createdAt: new Date().toISOString() };
+      update("ferienEntries", [...(data.ferienEntries || []), entry]);
+    }
+    setAntragModal(null);
+    setAntragSaved(true);
+    setTimeout(() => setAntragSaved(false), 3000);
+  };
+  const deleteFerien = (id) => update("ferienEntries", (data.ferienEntries || []).filter(f => f.id !== id));
+  const markFerienSeen = (id) => update("ferienEntries", (data.ferienEntries || []).map(f => f.id === id ? { ...f, seen: true } : f));
+  const approveFerien = (id) => update("ferienEntries", (data.ferienEntries || []).map(f => {
+    if (f.id !== id) return f;
+    const { originalData, ...rest } = f;
+    return { ...rest, status: "approved" };
+  }));
+  const cancelFerienEdit = (id) => update("ferienEntries", (data.ferienEntries || []).map(f => {
+    if (f.id !== id || !f.originalData) return f;
+    const { originalData, ...rest } = f;
+    return { ...rest, dateFrom: originalData.dateFrom, dateTo: originalData.dateTo, note: originalData.note, status: "approved" };
+  }));
+  const editFerien = (f) => { setAntragForm({ ...f }); setAntragModal("ferien"); };
+
+  const [ferienUebersicht, setFerienUebersicht] = useState(false);
+  const navCal = useCalendarNav();
+
+  // Pendente Ferienanträge
+  const myPendingFerien = (data.ferienEntries || []).filter(f => (!selectedEmpId || f.employeeId === selectedEmpId) && f.status === "pending");
+  const totalPending = myPendingFerien.length;
+
+  const viewDate = new Date(currentDate);
+  const year = viewDate.getFullYear();
+  const month = viewDate.getMonth();
+  const firstDay = new Date(year, month, 1);
+  const lastDay = new Date(year, month + 1, 0);
+  const startWeekday = (firstDay.getDay() + 6) % 7; // Montag = 0
+
+  const calFTs = resolveFTs(year);
+
+  const todayStr = new Date().toISOString().slice(0, 10);
+  const monthCells = [];
+  for (let i = 0; i < startWeekday; i++) monthCells.push(null);
+  for (let d = 1; d <= lastDay.getDate(); d++) {
+    const dateStr = `${year}-${String(month + 1).padStart(2, "0")}-${String(d).padStart(2, "0")}`;
+    const mins = data.timeEntries.filter(e => e.date === dateStr && (!selectedEmpId || e.employeeId === selectedEmpId || !e.employeeId)).reduce((s, e) => s + (e.minutes || 0), 0);
+    const ft = calFTs.find(f => f.date === dateStr);
+    const dow = new Date(dateStr).getDay();
+    const isWeekend = dow === 0 || dow === 6;
+    const isFeiertag = ft && (ft.stundenDelta === 0 || ft.stundenDelta === null || ft.stundenDelta === undefined);
+    const isVortag = ft && ft.stundenDelta === -1 && (ft.id || "").startsWith("vortag-");
+    const sollH = selectedEmp ? getSollForDay(selectedEmp, dateStr) : null;
+    // Ferien/Absenz für diesen Tag (nur wenn Mitarbeiter gewählt)
+    const isFerien = selectedEmpId ? isApprovedVacationDay(selectedEmpId, dateStr) : false;
+    const isPendingFerien = selectedEmpId ? (data.ferienEntries || []).some(f => f.employeeId === selectedEmpId && f.status === "pending" && dateStr >= f.dateFrom && dateStr <= f.dateTo) : false;
+    const isAbsenz = selectedEmpId ? (data.absences || []).some(a => a.employeeId === selectedEmpId && (!a.status || a.status === "approved") && (a.date === dateStr || (a.dateFrom && a.dateTo && dateStr >= a.dateFrom && dateStr <= a.dateTo))) : false;
+    const isPendingAbsenz = selectedEmpId ? (data.absences || []).some(a => a.employeeId === selectedEmpId && a.status === "pending" && (a.date === dateStr || (a.dateFrom && a.dateTo && dateStr >= a.dateFrom && dateStr <= a.dateTo))) : false;
+    monthCells.push({ day: d, dateStr, mins, ft, isWeekend, isFeiertag, isVortag, sollH, isFerien, isPendingFerien, isAbsenz, isPendingAbsenz, isPast: dateStr <= todayStr });
+  }
+
+  const monthTotalMins = monthCells.filter(c => c).reduce((s, c) => s + c.mins, 0);
+
+  const weekdayLabel = new Date(currentDate).toLocaleDateString("de-CH", { weekday: "long" });
+  const dateLabel = new Date(currentDate).toLocaleDateString("de-CH", { day: "numeric", month: "long", year: "numeric" });
+  const monthLabel = viewDate.toLocaleDateString("de-CH", { month: "long", year: "numeric" });
+  const isToday = currentDate === new Date().toISOString().slice(0, 10);
+
+  const getWeekDays = (ds) => {
+    const d = new Date(ds);
+    const dow = d.getDay();
+    const mon = new Date(d);
+    mon.setDate(d.getDate() - (dow === 0 ? 6 : dow - 1));
+    return Array.from({ length: 7 }, (_, i) => {
+      const day = new Date(mon); day.setDate(mon.getDate() + i);
+      return day.toISOString().slice(0, 10);
+    });
+  };
+  const weekDays = getWeekDays(currentDate);
+  const weekLabel = (() => {
+    const from = new Date(weekDays[0]); const to = new Date(weekDays[6]);
+    return `${from.toLocaleDateString("de-CH", { day: "numeric", month: "short" })} – ${to.toLocaleDateString("de-CH", { day: "numeric", month: "short", year: "numeric" })}`;
+  })();
+  const changeWeek = (delta) => {
+    const d = new Date(currentDate); d.setDate(d.getDate() + delta * 7);
+    setCurrentDate(d.toISOString().slice(0, 10)); setWeekForm(null); setWeekSelectStart(null); setWeekAbsForm(null); setWeekEditForm(null);
+  };
+  const handleSlotClick = (dayStr, slotIdx) => {
+    if (isMonthClosed(dayStr)) return;
+    if (selectedEmp?.eintrittsdatum && dayStr < selectedEmp.eintrittsdatum) return;
+    if (!weekSelectStart) { setWeekSelectStart({ dayStr, slotIdx }); return; }
+    if (weekSelectStart.dayStr !== dayStr) { setWeekSelectStart({ dayStr, slotIdx }); return; }
+    const startSlot = Math.min(weekSelectStart.slotIdx, slotIdx);
+    const endSlot = Math.max(weekSelectStart.slotIdx, slotIdx);
+    const firstActive = data.projects.find(p => p.status === "aktiv") || data.projects[0];
+    setWeekForm({ dayStr, startSlot, endSlot, mode: "projekt", projectId: firstActive?.id || "", phaseId: "", positionId: "", description: "", absType: absenzTypes[0]?.id || "", absNote: "" });
+    setWeekEditForm(null); setWeekSelectStart(null);
+  };
+  const saveWeekEntry = () => {
+    if (isMonthClosed(weekForm?.dayStr)) return;
+    const mins = (weekForm.endSlot - weekForm.startSlot + 1) * 15;
+    if (weekForm?.mode === "absenz") {
+      update("absences", [...(data.absences || []), {
+        id: generateId(), date: weekForm.dayStr,
+        employeeId: selectedEmpId || "",
+        type: weekForm.absType || (absenzTypes[0]?.id || ""),
+        startTime: slotToTime(weekForm.startSlot), endTime: slotToTime(weekForm.endSlot + 1),
+        minutes: mins, hours: 0,
+        note: weekForm.absNote || "", status: "pending",
+        createdAt: new Date().toISOString(),
+      }]);
+      setWeekForm(null);
+      return;
+    }
+    if (!weekForm?.projectId) return;
+    update("timeEntries", [...data.timeEntries, {
+      id: generateId(), date: weekForm.dayStr,
+      projectId: weekForm.projectId, phaseId: weekForm.phaseId || "", positionId: weekForm.positionId || "",
+      minutes: mins, startTime: slotToTime(weekForm.startSlot), endTime: slotToTime(weekForm.endSlot + 1),
+      description: weekForm.description || "", employeeId: selectedEmpId || "",
+      createdAt: new Date().toISOString(),
+    }]);
+    setWeekForm(null);
+  };
+
+  const saveWeekAbs = () => {
+    if (!weekAbsForm) return;
+    const h = weekAbsForm.hours || 0; const m = weekAbsForm.minutes || 0;
+    const startMins = 8 * 60;
+    const durMins = (h > 0 || m > 0) ? h * 60 + m : Math.round(getSollForDay(selectedEmp, weekAbsForm.dayStr) * 60) || 60;
+    update("absences", [...(data.absences || []), {
+      id: generateId(), date: weekAbsForm.dayStr,
+      employeeId: selectedEmpId || (employees[0]?.id || ""),
+      type: weekAbsForm.type || (absenzTypes[0]?.id || ""),
+      startTime: toAbsTime(startMins), endTime: toAbsTime(startMins + durMins),
+      hours: h, minutes: m,
+      note: weekAbsForm.note || "", status: "pending",
+      createdAt: new Date().toISOString(),
+    }]);
+    setWeekAbsForm(null);
+  };
+
+  useEffect(() => {
+    if (viewMode === "woche" && weekGridRef.current) {
+      weekGridRef.current.scrollTop = (7 - SLOT_START_H) * 4 * SLOT_H;
+    }
+  }, [viewMode]);
+
+  useEffect(() => {
+    const onMove = (ev) => {
+      const r = resizingRef.current;
+      if (!r) return;
+      const scrollTop = weekGridRef.current?.scrollTop || 0;
+      const absY = ev.clientY + scrollTop;
+      const deltaSlots = Math.round((absY - r.startAbsY) / SLOT_H);
+      if (deltaSlots !== 0) r.moved = true;
+      const origDur = Math.round(r.origMinutes / 15);
+      let newStart, newDur;
+      if (r.edge === "bottom") {
+        newStart = r.origSlot;
+        newDur = Math.max(1, origDur + deltaSlots);
+      } else if (r.edge === "top") {
+        const s = Math.max(0, Math.min(r.origSlot + deltaSlots, r.origSlot + origDur - 1));
+        newStart = s; newDur = r.origSlot + origDur - s;
+      } else {
+        newStart = Math.max(0, Math.min(SLOT_COUNT - origDur, r.origSlot + deltaSlots));
+        newDur = origDur;
+      }
+      if (newStart + newDur > SLOT_COUNT) newDur = SLOT_COUNT - newStart;
+      const overlaps = !r.isAbs && r.edge !== "move" && dataRef.current.timeEntries.filter(e2 =>
+        e2.date === r.dayStr && e2.startTime && e2.id !== r.entryId && (!r.empId || e2.employeeId === r.empId)
+      ).map(e2 => { const [h,m] = e2.startTime.split(":").map(Number); const s = Math.round((h*60+m-SLOT_START_H*60)/15); return { start: s, end: s + Math.round(e2.minutes/15) }; })
+      .some(o => newStart < o.end && newStart + newDur > o.start);
+      if (!overlaps) { r.previewStart = slotToTime(newStart); r.previewMins = newDur * 15; }
+      setResizeTick(t => t + 1);
+    };
+    const onUp = () => {
+      const r = resizingRef.current;
+      if (r) {
+        if (!r.moved) {
+          setWeekEditForm({ entryId: r.entryId, isAbs: r.isAbs || false });
+        } else if (r.previewMins !== undefined) {
+          const [sh, sm] = r.previewStart.split(":").map(Number);
+          const endTime = slotToTime((sh * 60 + sm - SLOT_START_H * 60) / 15 + r.previewMins / 15);
+          const pStart = Math.round((sh * 60 + sm - SLOT_START_H * 60) / 15);
+          const pEnd = pStart + Math.round(r.previewMins / 15);
+          if (r.isAbs) {
+            updateRef.current("absences", dataRef.current.absences.map(a =>
+              a.id === r.entryId ? { ...a, startTime: r.previewStart, endTime, minutes: r.previewMins } : a
+            ));
+          } else {
+            let newEntries = dataRef.current.timeEntries.map(e =>
+              e.id === r.entryId ? { ...e, startTime: r.previewStart, endTime, minutes: r.previewMins } : e
+            );
+            if (r.edge === "move") {
+              newEntries = newEntries.map(e2 => {
+                if (e2.id === r.entryId || e2.date !== r.dayStr || !e2.startTime) return e2;
+                if (r.empId && e2.employeeId !== r.empId) return e2;
+                const [h, m] = e2.startTime.split(":").map(Number);
+                const s = Math.round((h * 60 + m - SLOT_START_H * 60) / 15);
+                const dur = Math.round(e2.minutes / 15);
+                if (s >= pEnd || s + dur <= pStart) return e2;
+                const newS = s >= pStart ? pEnd : pStart - dur;
+                if (newS < 0 || newS + dur > SLOT_COUNT) return e2;
+                return { ...e2, startTime: slotToTime(newS), endTime: slotToTime(newS + dur) };
+              });
+            }
+            updateRef.current("timeEntries", newEntries);
+          }
+        }
+      }
+      resizingRef.current = null;
+      setResizeTick(t => t + 1);
+    };
+    document.addEventListener("mousemove", onMove);
+    document.addEventListener("mouseup", onUp);
+    return () => { document.removeEventListener("mousemove", onMove); document.removeEventListener("mouseup", onUp); };
+  }, []);
+
+  const duplicateToNextDay = (entry) => {
+    const d = new Date(entry.date);
+    d.setDate(d.getDate() + 1);
+    const nextDay = d.toISOString().slice(0, 10);
+    update("timeEntries", [...data.timeEntries, { ...entry, id: generateId(), date: nextDay, createdAt: new Date().toISOString() }]);
+  };
+
+  return (
+    <div>
+      <Header title="Zeiterfassung" action={selectedEmp ? (
+        <div style={{ display: "flex", gap: 8 }}>
+          <button className="btn btn-ghost" onClick={() => setPrintContent({ type: "timeReport", employee: selectedEmp, entries: (data.timeEntries || []).filter(e => e.employeeId === selectedEmpId), month: currentDate.slice(0, 7), data, settings: data.settings })}>PDF Stunden</button>
+          <button className="btn btn-ghost" onClick={() => setFerienUebersicht(true)}>Übersicht ↗</button>
+          <button className="btn btn-primary" onClick={openFerienAntrag}>Ferien beantragen</button>
+        </div>
+      ) : null} />
+
+
+      <div className="responsive-grid-2" style={{ display: "grid", gridTemplateColumns: "1fr 320px", gap: 20, alignItems: "start" }}>
+        {/* Tages-Erfassung */}
+        <div style={{ position: "relative" }}>
+          {!selectedEmpId && isAdmin && (
+            <div style={{ position: "absolute", inset: 0, background: "rgba(250,248,245,0.88)", zIndex: 10, borderRadius: 8, display: "flex", alignItems: "center", justifyContent: "center", backdropFilter: "blur(1px)" }}>
+              <div style={{ textAlign: "center", color: "#888" }}>
+                {employees.length === 0 ? (
+                  <>
+                    <div style={{ fontSize: 13, fontWeight: 500, color: "#555" }}>Noch keine Mitarbeiter erfasst</div>
+                    <div style={{ fontSize: 11, color: "#aaa", marginTop: 4 }}>Mitarbeiter unter «Mitarbeiter» anlegen</div>
+                  </>
+                ) : (
+                  <>
+                    <div style={{ fontSize: 13, fontWeight: 500, color: "#555" }}>Bitte zuerst einen Mitarbeiter wählen</div>
+                    <div style={{ fontSize: 11, color: "#aaa", marginTop: 4 }}>Mitarbeiterwahl rechts →</div>
+                  </>
+                )}
+              </div>
+            </div>
+          )}
+          <div className="card" style={{ marginBottom: 16, display: "flex", alignItems: "center", gap: 8, padding: "12px 16px" }}>
+            <NavArrows onPrev={() => viewMode === "tag" ? changeDate(-1) : changeWeek(-1)} onNext={() => viewMode === "tag" ? changeDate(1) : changeWeek(1)} />
+            <div ref={navCal.ref} style={{ flex: 1, textAlign: "center", position: "relative" }}>
+              {viewMode === "tag" ? (
+                <div onClick={() => navCal.setOpen(o => !o)} style={{ cursor: "pointer", display: "inline-block" }} title="Datum wählen">
+                  <div style={{ fontFamily: "'Playfair Display', serif", fontSize: 18, fontWeight: 400 }}>
+                    {`${weekdayLabel}, ${new Date(currentDate).toLocaleDateString("de-CH", { day: "numeric", month: "long" })}`}
+                  </div>
+                </div>
+              ) : (
+                <div style={{ fontFamily: "'Playfair Display', serif", fontSize: 18, fontWeight: 400 }}>{weekLabel}</div>
+              )}
+              {navCal.open && (
+                <CalendarPopup
+                  value={currentDate}
+                  onChange={ds => { setCurrentDate(ds); navCal.setOpen(false); }}
+                  onClose={() => navCal.setOpen(false)}
+                  showClear={false}
+                />
+              )}
+            </div>
+            {!isToday && <button className="btn btn-ghost" onClick={goToday} style={{ fontSize: 11 }}>Heute</button>}
+            <div style={{ display: "flex", border: "1px solid var(--border2)", borderRadius: 20, overflow: "hidden", marginLeft: 4 }}>
+              {[["tag", "Tag"], ["woche", "Woche"]].map(([mode, label], i) => (
+                <React.Fragment key={mode}>
+                  {i > 0 && <div style={{ width: 1, background: "var(--border2)", alignSelf: "stretch" }} />}
+                  <button onClick={() => { setViewMode(mode); setWeekSelectStart(null); setWeekForm(null); setWeekAbsForm(null); setWeekEditForm(null); }} style={{
+                    fontSize: 11, padding: "0 12px", height: 30, border: "none", cursor: "pointer", fontFamily: "inherit",
+                    background: viewMode === mode ? "var(--text)" : "transparent",
+                    color: viewMode === mode ? "var(--bg)" : "var(--text3)", transition: "all 0.15s",
+                  }}>{label}</button>
+                </React.Fragment>
+              ))}
+            </div>
+          </div>
+
+          {viewMode === "tag" ? (
+            <>
+              <div className="card" style={{ padding: 0 }}>
+                <table style={{ width: "100%" }}>
+                  <thead>
+                    <tr>
+                      <th style={{ width: "24%" }}>Projekt</th>
+                      <th style={{ width: 130 }}>Phase / Position</th>
+                      <th>Tätigkeit</th>
+                      <th style={{ width: 80 }}>Std</th>
+                      <th style={{ width: 80 }}>Min</th>
+                      <th style={{ width: 40 }}></th>
+                    </tr>
+                  </thead>
+                  <tbody>
+                    {dayEntries.length === 0 && (
+                      <tr><td colSpan={6} style={{ textAlign: "center", color: "#aaa", padding: 28 }}>Keine Einträge an diesem Tag</td></tr>
+                    )}
+                    {dayEntries.map(e => {
+                      const proj = data.projects.find(p => p.id === e.projectId);
+                      const projEnabledIds = proj?.enabledPhases || [];
+                      const enabledPhases = projEnabledIds.map(id => SIA_PHASES.find(ph => ph.id === id)).filter(Boolean);
+                      const positions = proj?.positions || [];
+                      const customPhases = proj?.customPhases || [];
+                      const isInvoiced = !!e.invoiceId;
+                      const disabled = isInvoiced || isMonthClosed(e.date);
+                      const hasAnyPhase = enabledPhases.length > 0 || customPhases.length > 0 || positions.some(pos => (pos.enabledPhases || []).length > 0);
+                      const combinedVal = e.phaseId ? (e.positionId ? e.phaseId + "|" + e.positionId : e.phaseId) : "";
+                      const onCombinedChange = (val) => {
+                        if (!val) { updateEntry(e.id, { phaseId: "", positionId: "" }); return; }
+                        const [ph, pos] = val.split("|");
+                        updateEntry(e.id, { phaseId: ph, positionId: pos || "" });
+                      };
+                      return (
+                        <tr key={e.id} style={isInvoiced ? { opacity: 0.6, background: "#f5f2ed" } : {}}>
+                          <td style={{ padding: "6px 8px" }}>
+                            <select disabled={disabled} value={e.projectId} onChange={ev => { const proj = data.projects.find(p => p.id === ev.target.value); const { phaseId, positionId } = getFirstPhaseForProject(proj); updateEntry(e.id, { projectId: ev.target.value, phaseId, positionId }); }} style={{ border: "1px solid #e0dbd4", height: 32, fontSize: 12 }}>
+                              <option value="">—</option>
+                              {data.projects.map(p => <option key={p.id} value={p.id}>{p.name}</option>)}
+                            </select>
+                          </td>
+                          <td style={{ padding: "6px 8px" }}>
+                            <select disabled={disabled || !hasAnyPhase} value={combinedVal} onChange={ev => onCombinedChange(ev.target.value)} style={{ border: `1px solid ${hasAnyPhase && !combinedVal && !disabled ? "#b5621e" : "#e0dbd4"}`, height: 32, fontSize: 12, color: e.positionId ? "#7a6a00" : "inherit", fontWeight: e.positionId ? 600 : 400, opacity: !hasAnyPhase ? 0.4 : 1 }}>
+                              <option value="">—</option>
+                              {customPhases.length > 0 && (enabledPhases.length > 0 || positions.length > 0) && (<optgroup label="Eigene Phasen">{customPhases.map(cp => <option key={cp.id} value={cp.id}>{cp.label}</option>)}</optgroup>)}
+                              {customPhases.length > 0 && enabledPhases.length === 0 && positions.length === 0 && customPhases.map(cp => <option key={cp.id} value={cp.id}>{cp.label}</option>)}
+                              {positions.length === 0 && enabledPhases.map(ph => <option key={ph.id} value={ph.id}>{ph.id} · {ph.label.split(" ").slice(1).join(" ")}</option>)}
+                              {positions.length > 0 && (<>{enabledPhases.length > 0 && (<optgroup label="Hauptauftrag">{enabledPhases.map(ph => <option key={ph.id} value={ph.id}>{ph.id} · {ph.label.split(" ").slice(1).join(" ")}</option>)}</optgroup>)}{positions.map(pos => { const pp = (pos.enabledPhases||[]).map(id=>SIA_PHASES.find(ph=>ph.id===id)).filter(Boolean); if(!pp.length) return null; return <optgroup key={pos.code} label={pos.code+(pos.label?" · "+pos.label:"")}>{pp.map(ph=><option key={ph.id} value={ph.id+"|"+pos.code}>{ph.id} · {ph.label.split(" ").slice(1).join(" ")}</option>)}</optgroup>; })}</>)}
+                            </select>
+                          </td>
+                          <td style={{ padding: "6px 8px" }}>
+                            <input disabled={disabled} value={e.description || ""} onChange={ev => updateEntry(e.id, { description: ev.target.value })} placeholder="Was wurde gemacht?" style={{ border: "1px solid #e0dbd4", height: 32, fontSize: 12 }} />
+                          </td>
+                          <td style={{ padding: "6px 8px" }}>
+                            <input disabled={disabled} type="number" min={0} max={24} value={Math.floor((e.minutes || 0) / 60)} onChange={ev => updateEntry(e.id, { minutes: (+ev.target.value * 60) + ((e.minutes || 0) % 60) })} style={{ border: "1px solid #e0dbd4", height: 32, fontSize: 12 }} />
+                          </td>
+                          <td style={{ padding: "6px 8px" }}>
+                            <select disabled={disabled} value={(e.minutes || 0) % 60} onChange={ev => updateEntry(e.id, { minutes: Math.floor((e.minutes || 0) / 60) * 60 + +ev.target.value })} style={{ border: "1px solid #e0dbd4", height: 32, fontSize: 12 }}>
+                              {[0, 15, 30, 45].map(m => <option key={m} value={m}>{m}</option>)}
+                            </select>
+                          </td>
+                          <td style={{ padding: "6px 8px", textAlign: "right" }}>
+                            <button disabled={disabled} className="btn btn-sm btn-danger" onClick={() => delEntry(e.id)}><span className="material-icons" style={{fontSize:16,verticalAlign:"middle"}}>close</span></button>
+                          </td>
+                        </tr>
+                      );
+                    })}
+                  </tbody>
+                  <tfoot>
+                    <tr>
+                      <td colSpan={3} style={{ padding: "12px 12px" }}>
+                        <button className="btn btn-ghost" onClick={addEntry} style={{ fontSize: 12 }}>+ Zeile hinzufügen</button>
+                      </td>
+                      <td colSpan={2} style={{ padding: "12px 8px", textAlign: "right", fontSize: 13 }}>
+                        <span style={{ color: "#888" }}>Tagestotal: </span><strong>{formatHours(dayTotalMins)}</strong>
+                      </td>
+                      <td></td>
+                    </tr>
+                    {selectedEmp && (daySoll > 0 || dayTotalMins > 0) && (
+                      <tr style={{ borderTop: "1px solid #ece8e2", background: "#faf8f5" }}>
+                        <td colSpan={3} style={{ padding: "6px 12px", fontSize: 11, color: "#888" }}>{selectedEmp.name}{daySoll === 0 ? " · Wochenende / Feiertag" : " · Soll heute"}</td>
+                        <td colSpan={2} style={{ padding: "6px 8px", textAlign: "right", fontSize: 12 }}>
+                          {daySoll > 0 ? (<><span style={{ color: "#888" }}>{Math.round(daySoll * 10) / 10}h Soll · </span><span style={{ fontWeight: 600, color: dayDiff === 0 ? "#555" : dayDiff > 0 ? "#2d6a4f" : "#8a1a1a" }}>{dayDiff === 0 ? "±0h" : `${dayDiff > 0 ? "+" : ""}${dayDiff}h`}</span></>) : (<span style={{ fontWeight: 600, color: "#b07848" }}>{Math.round(dayIst * 10) / 10}h</span>)}
+                        </td>
+                        <td></td>
+                      </tr>
+                    )}
+                  </tfoot>
+                </table>
+              </div>
+
+              {dayAbs.length > 0 && (
+                <div className="card" style={{ marginTop: 16, padding: 0 }}>
+                  <div style={{ padding: "10px 16px", borderBottom: "1px solid #ece8e2", fontSize: 11, letterSpacing: "0.1em", color: "#888" }}>ABSENZEN</div>
+                  <table style={{ fontSize: 12 }}>
+                    <thead><tr><th style={{ width: "22%" }}>Typ</th><th>Bemerkung</th><th style={{ width: 70 }}>Std</th><th style={{ width: 70 }}>Min</th><th style={{ width: 40 }}></th></tr></thead>
+                    <tbody>
+                      {dayAbs.map(a => {
+                        const absTotalMins = a.startTime && a.endTime
+                          ? (() => { const [sh,sm]=a.startTime.split(":").map(Number); const [eh,em]=a.endTime.split(":").map(Number); return Math.max(0,(eh*60+em)-(sh*60+sm)); })()
+                          : (a.hours||0)*60+(a.minutes||0);
+                        const absH = Math.floor(absTotalMins / 60);
+                        const absM = absTotalMins % 60;
+                        return (
+                          <tr key={a.id}>
+                            <td style={{ padding: "6px 8px" }}>
+                              <select value={a.type || ""} onChange={ev => updateAbs(a.id, { type: ev.target.value })} style={{ border: "1px solid #e0dbd4", height: 32, fontSize: 12 }}>
+                                {absenzTypes.map(t => <option key={t.id} value={t.id}>{t.label}</option>)}
+                              </select>
+                            </td>
+                            <td style={{ padding: "6px 8px" }}>
+                              <input value={a.note || ""} onChange={ev => updateAbs(a.id, { note: ev.target.value })} placeholder="Bemerkung…" style={{ border: "1px solid #e0dbd4", height: 32, fontSize: 12 }} />
+                            </td>
+                            <td style={{ padding: "6px 8px" }}>
+                              <input type="number" min={0} max={24} value={absH} onChange={ev => updateAbs(a.id, { hours: +ev.target.value, minutes: absM })} style={{ border: "1px solid #e0dbd4", height: 32, fontSize: 12 }} />
+                            </td>
+                            <td style={{ padding: "6px 8px" }}>
+                              <select value={absM} onChange={ev => updateAbs(a.id, { hours: absH, minutes: +ev.target.value })} style={{ border: "1px solid #e0dbd4", height: 32, fontSize: 12 }}>
+                                {[0, 15, 30, 45].map(m => <option key={m} value={m}>{m}</option>)}
+                              </select>
+                            </td>
+                            <td style={{ padding: "6px 8px", textAlign: "right" }}>
+                              <button className="btn btn-danger" style={{ padding: "0 8px", height: 28, fontSize: 12 }} onClick={() => delAbs(a.id)}><span className="material-icons" style={{ fontSize: 16 }}>close</span></button>
+                            </td>
+                          </tr>
+                        );
+                      })}
+                    </tbody>
+                    <tfoot><tr><td colSpan={4} style={{ padding: "10px 12px" }}><button className="btn btn-ghost" onClick={addAbs} style={{ fontSize: 12 }}>+ Zeile hinzufügen</button></td><td></td></tr></tfoot>
+                  </table>
+                </div>
+              )}
+
+              {dayAbs.length === 0 && (
+                <div style={{ marginTop: 10, display: "flex", gap: 6, justifyContent: "flex-end" }}>
+                  <button className="btn btn-ghost" style={{ fontSize: 11, padding: "4px 12px", background: "#fff" }} onClick={addAbs}>+ Absenz erfassen</button>
+                </div>
+              )}
+
+              {dayExpenses.length > 0 && (
+                <div className="card" style={{ marginTop: 16, padding: 0 }}>
+                  <div style={{ padding: "10px 16px", borderBottom: "1px solid #ece8e2", fontSize: 11, letterSpacing: "0.1em", color: "#888" }}>SPESEN</div>
+                  <table style={{ fontSize: 12 }}>
+                    <thead><tr><th style={{ width: "22%" }}>Kategorie</th><th style={{ width: "20%" }}>Projekt</th><th>Beschreibung</th><th style={{ width: 90 }}>Betrag CHF</th><th style={{ width: 40 }}></th></tr></thead>
+                    <tbody>
+                      {dayExpenses.map(e => (
+                        <tr key={e.id}>
+                          <td style={{ padding: "6px 8px" }}><select value={e.category} onChange={ev => updateExp(e.id, { category: ev.target.value })} style={{ border: "1px solid #e0dbd4", height: 32, fontSize: 12 }}>{(data.settings.expenseCategories || EXPENSE_CATEGORIES).map(c => <option key={c}>{c}</option>)}</select></td>
+                          <td style={{ padding: "6px 8px" }}><select value={e.projectId || ""} onChange={ev => updateExp(e.id, { projectId: ev.target.value })} style={{ border: "1px solid #e0dbd4", height: 32, fontSize: 12 }}><option value="">— kein Projekt —</option>{data.projects.map(p => <option key={p.id} value={p.id}>{p.name}</option>)}</select></td>
+                          <td style={{ padding: "6px 8px" }}><input value={e.description || ""} onChange={ev => updateExp(e.id, { description: ev.target.value })} placeholder="Beschreibung…" style={{ border: "1px solid #e0dbd4", height: 32, fontSize: 12 }} /></td>
+                          <td style={{ padding: "6px 8px" }}><input type="number" step="0.05" min={0} value={e.amount || ""} onChange={ev => updateExp(e.id, { amount: +ev.target.value })} style={{ border: "1px solid #e0dbd4", height: 32, fontSize: 12 }} /></td>
+                          <td style={{ padding: "6px 8px", textAlign: "right" }}><button className="btn btn-danger" style={{ padding: "0 8px", height: 28, fontSize: 12 }} onClick={() => delExp(e.id)}><span className="material-icons" style={{ fontSize: 16 }}>close</span></button></td>
+                        </tr>
+                      ))}
+                    </tbody>
+                    <tfoot><tr><td colSpan={3} style={{ padding: "10px 12px" }}><button className="btn btn-ghost" onClick={addExp} style={{ fontSize: 12 }}>+ Zeile hinzufügen</button></td><td style={{ padding: "10px 8px", textAlign: "right", fontSize: 13 }}><span style={{ color: "#888" }}>Total: </span><strong>{(dayExpenses.reduce((s, e) => s + (e.amount || 0), 0)).toFixed(2)}</strong></td><td></td></tr></tfoot>
+                  </table>
+                </div>
+              )}
+
+              {dayExpenses.length === 0 && (
+                <div style={{ marginTop: 10, display: "flex", gap: 6, justifyContent: "flex-end" }}>
+                  <button className="btn btn-ghost" style={{ fontSize: 11, padding: "4px 12px", background: "#fff" }} onClick={addExp}>+ Spese erfassen</button>
+                </div>
+              )}
+            </>
+          ) : (
+            /* WOCHENANSICHT */
+            <div className="card" style={{ padding: 0, overflow: "hidden" }}>
+              {void resizeTick /* trigger re-render during resize */}
+              {resizingRef.current && <style>{`* { cursor: ${resizingRef.current.edge === "move" ? "grabbing" : "ns-resize"} !important; user-select: none !important; }`}</style>}
+              {/* Zeitraster mit sticky Tageskopf */}
+              <div ref={weekGridRef} style={{ isolation: "isolate", overflowY: "auto", maxHeight: "calc(100vh - 260px)" }} onMouseLeave={() => setWeekHover(null)}>
+
+                {/* Sticky Tageskopf */}
+                <div style={{ display: "flex", position: "sticky", top: 0, zIndex: 20, background: "#fff", borderBottom: "2px solid #e8e3dc", transform: "translateZ(0)", willChange: "transform" }}>
+                  <div style={{ width: 44, flexShrink: 0 }} />
+                  {weekDays.map(ds => {
+                    const d = new Date(ds);
+                    const isThisToday = ds === todayStr;
+                    const isCurDay = ds === currentDate;
+                    const ft = calFTs.find(f => f.date === ds);
+                    const isFeiertag = ft && (ft.stundenDelta === 0 || ft.stundenDelta === null || ft.stundenDelta === undefined);
+                    const dow = d.getDay();
+                    const noWork = dow === 0 || dow === 6 || isFeiertag;
+                    const isBeforeEintritt = !!(selectedEmp?.eintrittsdatum && ds < selectedEmp.eintrittsdatum);
+                    const wkTotal = data.timeEntries.filter(e => e.date === ds && (!selectedEmpId || e.employeeId === selectedEmpId)).reduce((s, e) => s + (e.minutes || 0), 0);
+                    const absMinutes = selectedEmpId ? (data.absences || []).filter(a => {
+                      const matchDate = a.date === ds || (a.dateFrom && a.dateTo && ds >= a.dateFrom && ds <= a.dateTo);
+                      return matchDate && a.employeeId === selectedEmpId;
+                    }).reduce((s, a) => {
+                      if (a.startTime && a.endTime) { const [sh,sm]=a.startTime.split(":").map(Number); const [eh,em]=a.endTime.split(":").map(Number); return s+(eh*60+em)-(sh*60+sm); }
+                      const ex=(a.hours||0)*60+(a.minutes||0); return s+(ex>0?ex:getSollForDay(selectedEmp,ds)*60);
+                    }, 0) : 0;
+                    const istH = (wkTotal + absMinutes) / 60;
+                    const sollH = selectedEmp ? getSollForDay(selectedEmp, ds) : 0;
+                    const isPast = ds <= todayStr;
+                    const isVacDay = selectedEmpId ? isApprovedVacationDay(selectedEmpId, ds) : false;
+                    const isPendingVacDay = !isVacDay && selectedEmpId ? (data.ferienEntries || []).some(f => f.employeeId === selectedEmpId && f.status === "pending" && !f.originalData && ds >= f.dateFrom && ds <= f.dateTo) : false;
+                    const diff = Math.round((istH - sollH) * 10) / 10;
+                    return (
+                      <div key={ds} style={{ flex: 1, textAlign: "center", padding: "8px 4px 6px", position: "relative", borderLeft: "1px solid #ece8e2", cursor: "pointer", background: isCurDay ? "#1a1a18" : isVacDay ? ((!isPast && Math.ceil((new Date(ds) - new Date(todayStr)) / 86400000) > 21) ? "#e8f0fa" : "#e8f5ee") : isPendingVacDay ? "#fff8e8" : isFeiertag ? "#f5f2ed" : "#fff" }}
+                        onClick={() => { setCurrentDate(ds); setViewMode("tag"); }}>
+                        <div style={{ fontSize: 9, letterSpacing: "0.1em", color: isCurDay ? "#e8e5df" : isBeforeEintritt ? "#ddd" : "#aaa" }}>{d.toLocaleDateString("de-CH", { weekday: "short" }).toUpperCase()}</div>
+                        <div style={{ fontFamily: "'Playfair Display', serif", fontSize: 18, lineHeight: 1.2, color: isCurDay ? "#e8e5df" : isBeforeEintritt ? "#ccc" : isThisToday ? "var(--accent)" : isFeiertag ? "#bbb" : "#1a1a18" }}>{d.getDate()}</div>
+                        <div style={{ position: "absolute", top: 8, right: 4, textAlign: "right", lineHeight: 1.2 }}>
+                          {(() => {
+                            if (!selectedEmp || noWork || isBeforeEintritt) return wkTotal > 0 ? <div style={{ fontSize: 9, fontWeight: 500, color: isCurDay ? "#e8e5df" : "#8a6a3a" }}>{istH.toFixed(1)}h</div> : null;
+                            if (isVacDay && wkTotal === 0) {
+                              const daysAway = Math.ceil((new Date(ds) - new Date(todayStr)) / 86400000);
+                              const isPlanned = !isPast && daysAway > 21;
+                              const color = isCurDay ? "#a0c4e8" : isPlanned ? "#1a4e8a" : "#2d6a4f";
+                              return <div style={{ fontSize: 8, fontWeight: 600, color }}>Ferien</div>;
+                            }
+                            if (isPendingVacDay && wkTotal === 0) return <div style={{ fontSize: 8, fontWeight: 600, color: isCurDay ? "#e8e5df" : "#b5621e" }}>Ferien?</div>;
+                            if (!isPast) return wkTotal > 0 ? <div style={{ fontSize: 9, fontWeight: 500, color: isCurDay ? "#e8e5df" : "#8a6a3a" }}>{istH.toFixed(1)}h</div> : null;
+                            const saldoColor = isCurDay ? "#e8e5df" : diff === 0 ? "#555" : diff > 0 ? "#2d6a4f" : "#b5621e";
+                            const saldoText = (wkTotal + absMinutes) === 0 ? `-${sollH.toFixed(1)}h` : diff === 0 ? `${istH.toFixed(1)}h` : `${diff > 0 ? "+" : ""}${diff.toFixed(1)}h`;
+                            return <div style={{ fontSize: 9, fontWeight: 600, color: saldoColor }}>{saldoText}</div>;
+                          })()}
+                        </div>
+                      </div>
+                    );
+                  })}
+                </div>
+
+
+                {/* Zeitgitter */}
+                <div style={{ display: "flex" }}>
+                <div style={{ width: 44, flexShrink: 0, pointerEvents: "none" }}>
+                  {Array.from({ length: SLOT_COUNT }, (_, i) => {
+                    const hour = i / 4;
+                    const isOffHour = hour < 7 || hour >= 19;
+                    const isHourMark = i % 4 === 0 && i > 0;
+                    const labelColor = isOffHour ? "#7a9db8" : "#888";
+                    return (
+                      <div key={i} style={{ height: SLOT_H, display: "flex", alignItems: "flex-start", justifyContent: "flex-end", paddingRight: 6, paddingTop: 2, fontSize: 10, color: labelColor, lineHeight: 1, boxSizing: "border-box", borderTop: isHourMark ? `1px solid ${isOffHour ? "#e8eef2" : "#f0ede8"}` : "none", fontWeight: isOffHour ? 400 : 500 }}>
+                        {isHourMark ? slotToTime(i) : ""}
+                      </div>
+                    );
+                  })}
+                </div>
+                {weekDays.map(ds => {
+                  const colTimed = data.timeEntries.filter(e => e.date === ds && e.startTime && (!selectedEmpId || e.employeeId === selectedEmpId));
+                  const ft = calFTs.find(f => f.date === ds);
+                  const isFeiertag = ft && (ft.stundenDelta === 0 || ft.stundenDelta === null || ft.stundenDelta === undefined);
+                  const colBeforeEintritt = !!(selectedEmp?.eintrittsdatum && ds < selectedEmp.eintrittsdatum);
+                  const isMaiTag = ds.slice(5) === "05-01";
+                  const maiTagBlocked = isMaiTag && (data.settings.blockMaiTag !== false);
+                  return (
+                    <div key={ds} style={{ flex: 1, position: "relative", borderLeft: "1px solid #ece8e2", background: maiTagBlocked || colBeforeEintritt ? "#faf8f5" : isFeiertag ? "#f7f5f1" : "#fff" }}>
+                      {Array.from({ length: SLOT_COUNT }, (_, slotIdx) => {
+                        const isHour = slotIdx % 4 === 0;
+                        const isHalf = slotIdx % 2 === 0 && !isHour;
+                        const slotHour = slotIdx / 4;
+                        const isOffHours = slotHour < 7 || slotHour >= 19;
+                        const inHover = weekSelectStart?.dayStr === ds && weekHover?.dayStr === ds && slotIdx >= Math.min(weekSelectStart.slotIdx, weekHover.slotIdx) && slotIdx <= Math.max(weekSelectStart.slotIdx, weekHover.slotIdx);
+                        const isStart = weekSelectStart?.dayStr === ds && slotIdx === weekSelectStart.slotIdx && !weekHover;
+                        const inSel = weekForm?.dayStr === ds && slotIdx >= weekForm.startSlot && slotIdx <= weekForm.endSlot;
+                        const blocked = maiTagBlocked || colBeforeEintritt;
+                        const offBg = isOffHours ? "rgba(100,140,175,0.06)" : "transparent";
+                        return (
+                          <div key={slotIdx} style={{ height: SLOT_H, boxSizing: "border-box", borderTop: slotIdx > 0 ? `1px solid ${isHour ? (isOffHours ? "#e4eaf0" : "#e8e3dc") : isHalf ? "#f0ede8" : "#f7f5f2"}` : "none", background: inSel ? "rgba(212,168,90,0.15)" : (inHover || isStart) ? "rgba(212,168,90,0.08)" : offBg, cursor: blocked ? "default" : "crosshair" }}
+                            onClick={() => !blocked && !resizingRef.current && handleSlotClick(ds, slotIdx)}
+                            onMouseEnter={() => setWeekHover({ dayStr: ds, slotIdx })} />
+                        );
+                      })}
+                      {colTimed.map(e => {
+                        const r = resizingRef.current;
+                        const isRes = r?.entryId === e.id;
+                        const dispStart = isRes && r.previewStart !== undefined ? r.previewStart : e.startTime;
+                        const dispMins = isRes && r.previewMins !== undefined ? r.previewMins : e.minutes;
+                        const [sh, sm] = dispStart.split(":").map(Number);
+                        const top = ((sh * 60 + sm) - SLOT_START_H * 60) / 15 * SLOT_H;
+                        if (top < 0) return null;
+                        const height = Math.max(SLOT_H, (dispMins / 15) * SLOT_H) - 2;
+                        const proj = data.projects.find(p => p.id === e.projectId);
+                        const bg = PROJ_COLORS[data.projects.findIndex(p => p.id === e.projectId) % PROJ_COLORS.length] || PROJ_COLORS[0];
+                        const handleH = Math.min(5, Math.floor(height / 3));
+                        const phaseDisplay = e.phaseId ? (() => {
+                          const cp = (proj?.customPhases||[]).find(c => c.id === e.phaseId);
+                          if (cp) return cp.label;
+                          const sia = SIA_PHASES.find(p => p.id === e.phaseId);
+                          return sia ? (e.positionId ? `${e.positionId}·${e.phaseId}` : e.phaseId) : e.phaseId;
+                        })() : null;
+                        const startResizing = (ev, edge) => {
+                          if (isMonthClosed(ds)) return;
+                          ev.stopPropagation(); ev.preventDefault();
+                          const [s, m] = e.startTime.split(":").map(Number);
+                          const origSlot = Math.round((s * 60 + m - SLOT_START_H * 60) / 15);
+                          resizingRef.current = { entryId: e.id, dayStr: ds, empId: selectedEmpId, edge, moved: false, startAbsY: ev.clientY + (weekGridRef.current?.scrollTop || 0), origMinutes: e.minutes, origStartTime: e.startTime, origSlot, previewStart: e.startTime, previewMins: e.minutes };
+                          setResizeTick(t => t + 1);
+                        };
+                        const isMoving = isRes && resizingRef.current?.edge === "move";
+                        return (
+                          <div key={e.id} title={`${proj?.name||"—"}: ${(dispMins/60).toFixed(1)}h${e.description?" · "+e.description:""}`}
+                            onContextMenu={ev => { ev.preventDefault(); setContextMenu({ x: ev.clientX, y: ev.clientY, entry: e }); }}
+                            style={{ position: "absolute", top, left: 2, right: 2, height, background: bg, borderRadius: 3, padding: `${handleH}px 4px`, fontSize: 9, color: "#fff", overflow: "hidden", zIndex: isRes ? 10 : 2, boxSizing: "border-box", userSelect: "none" }}>
+                            <div style={{ position: "absolute", top: 0, left: 0, right: 0, height: handleH, cursor: "ns-resize", background: "rgba(0,0,0,0.15)", borderRadius: "3px 3px 0 0", zIndex: 1 }} onMouseDown={ev => startResizing(ev, "top")} />
+                            <div style={{ position: "absolute", top: handleH, left: 0, right: 0, bottom: handleH, cursor: isMoving ? "grabbing" : "grab", zIndex: 1 }} onMouseDown={ev => startResizing(ev, "move")} />
+                            <div style={{ fontWeight: 600, whiteSpace: "nowrap", overflow: "hidden", textOverflow: "ellipsis", paddingTop: 1, pointerEvents: "none" }}>{proj?.name||"—"}</div>
+                            {phaseDisplay && height > 24 && <div style={{ fontSize: 7, opacity: 0.8, whiteSpace: "nowrap", overflow: "hidden", textOverflow: "ellipsis", marginTop: 0, pointerEvents: "none" }}>{phaseDisplay}</div>}
+                            {height > 36 && <div style={{ fontSize: 8, opacity: 0.85, marginTop: 1, pointerEvents: "none" }}>{slotToTime((sh*60+sm-SLOT_START_H*60)/15)} – {slotToTime((sh*60+sm-SLOT_START_H*60)/15 + dispMins/15)}</div>}
+                            {height > 52 && e.description && <div style={{ opacity: 0.75, fontSize: 8, whiteSpace: "nowrap", overflow: "hidden", textOverflow: "ellipsis", pointerEvents: "none" }}>{e.description}</div>}
+                            <div style={{ position: "absolute", bottom: 0, left: 0, right: 0, height: handleH, cursor: "ns-resize", background: "rgba(0,0,0,0.15)", borderRadius: "0 0 3px 3px", zIndex: 1 }} onMouseDown={ev => startResizing(ev, "bottom")} />
+                          </div>
+                        );
+                      })}
+                      {/* Absenz-Blöcke im Zeitraster */}
+                      {(data.absences || []).filter(a => a.date === ds && a.startTime && a.endTime && (!selectedEmpId || a.employeeId === selectedEmpId)).map(a => {
+                        const rA = resizingRef.current;
+                        const isResA = rA?.entryId === a.id;
+                        const dispStartA = isResA && rA.previewStart !== undefined ? rA.previewStart : a.startTime;
+                        const [shA, smA] = dispStartA.split(":").map(Number);
+                        const dispMinsA = isResA && rA.previewMins !== undefined ? rA.previewMins : (() => { const [eh,em]=a.endTime.split(":").map(Number); return (eh*60+em)-(shA*60+smA); })();
+                        const topA = ((shA * 60 + smA) - SLOT_START_H * 60) / 15 * SLOT_H;
+                        if (topA < 0) return null;
+                        const heightA = Math.max(SLOT_H, (dispMinsA / 15) * SLOT_H) - 2;
+                        const handleHA = Math.min(5, Math.floor(heightA / 3));
+                        const t = absenzTypes.find(x => x.id === a.type);
+                        const bg = t?.color || "#888";
+                        const isMovingA = isResA && rA?.edge === "move";
+                        const origDurA = (() => { const [eh,em]=a.endTime.split(":").map(Number); return (eh*60+em)-(shA*60+smA); })();
+                        const startResizingA = (ev, edge) => {
+                          if (isMonthClosed(ds)) return;
+                          ev.stopPropagation(); ev.preventDefault();
+                          const [s, m] = a.startTime.split(":").map(Number);
+                          const origSlot = Math.round((s * 60 + m - SLOT_START_H * 60) / 15);
+                          resizingRef.current = { entryId: a.id, dayStr: ds, empId: selectedEmpId, isAbs: true, edge, moved: false, startAbsY: ev.clientY + (weekGridRef.current?.scrollTop || 0), origMinutes: origDurA, origStartTime: a.startTime, origSlot, previewStart: a.startTime, previewMins: origDurA };
+                          setResizeTick(t => t + 1);
+                        };
+                        return (
+                          <div key={a.id} title={`${t?.label || a.type}: ${(dispMinsA/60).toFixed(1)}h${a.note ? " · " + a.note : ""}`}
+                            style={{ position: "absolute", top: topA, left: 2, right: 2, height: heightA, background: bg, opacity: 0.85, borderRadius: 3, padding: `${handleHA}px 5px`, fontSize: 9, color: "#fff", overflow: "hidden", zIndex: isResA ? 10 : 2, boxSizing: "border-box", userSelect: "none" }}>
+                            <div style={{ position: "absolute", top: 0, left: 0, right: 0, height: handleHA, cursor: "ns-resize", background: "rgba(0,0,0,0.15)", borderRadius: "3px 3px 0 0", zIndex: 1 }} onMouseDown={ev => startResizingA(ev, "top")} />
+                            <div style={{ position: "absolute", top: handleHA, left: 0, right: 0, bottom: handleHA, cursor: isMovingA ? "grabbing" : "grab", zIndex: 1 }} onMouseDown={ev => startResizingA(ev, "move")} />
+                            <div style={{ fontWeight: 700, whiteSpace: "nowrap", overflow: "hidden", textOverflow: "ellipsis", pointerEvents: "none" }}>{t?.label || a.type}</div>
+                            {heightA > 28 && <div style={{ fontSize: 8, opacity: 0.85, marginTop: 1, pointerEvents: "none" }}>{dispStartA} – {slotToTime((shA*60+smA-SLOT_START_H*60)/15 + dispMinsA/15)}</div>}
+                            {heightA > 44 && a.note && <div style={{ opacity: 0.75, fontSize: 8, whiteSpace: "nowrap", overflow: "hidden", textOverflow: "ellipsis", pointerEvents: "none" }}>{a.note}</div>}
+                            <div style={{ position: "absolute", bottom: 0, left: 0, right: 0, height: handleHA, cursor: "ns-resize", background: "rgba(0,0,0,0.15)", borderRadius: "0 0 3px 3px", zIndex: 1 }} onMouseDown={ev => startResizingA(ev, "bottom")} />
+                          </div>
+                        );
+                      })}
+                      {ds === todayStr && (() => {
+                        const now = new Date();
+                        const top = (now.getHours() * 60 + now.getMinutes() - SLOT_START_H * 60) / 15 * SLOT_H;
+                        if (top < 0 || top > SLOT_COUNT * SLOT_H) return null;
+                        return <div style={{ position: "absolute", left: 0, right: 0, top, height: 2, background: "var(--accent)", zIndex: 5, pointerEvents: "none" }} />;
+                      })()}
+                    </div>
+                  );
+                })}
+                </div>{/* end display:flex time grid */}
+              </div>{/* end scroll container */}
+
+
+              {weekSelectStart && !weekForm && (
+                <div style={{ borderTop: "1px solid #ece8e2", padding: "8px 16px 8px 56px", fontSize: 11, color: "#888", background: "#faf8f5", display: "flex", alignItems: "center", gap: 8 }}>
+                  <span style={{ color: "var(--accent)", fontWeight: 600 }}>{slotToTime(weekSelectStart.slotIdx)}</span>
+                  <span>ausgewählt — Endzeit anklicken</span>
+                  <button className="btn btn-ghost" onClick={() => setWeekSelectStart(null)} style={{ marginLeft: "auto", fontSize: 11, padding: "2px 8px" }}>Abbrechen</button>
+                </div>
+              )}
+
+              {weekForm && (() => {
+                const isAbsMode = weekForm.mode === "absenz";
+                const accentColor = isAbsMode ? (absenzTypes.find(t => t.id === weekForm.absType)?.color || "#6b5a8a") : "var(--accent)";
+                const proj = data.projects.find(p => p.id === weekForm.projectId);
+                const enabledPhases = (proj?.enabledPhases||[]).map(id => SIA_PHASES.find(ph => ph.id === id)).filter(Boolean);
+                const customPhases = proj?.customPhases || [];
+                const positions = proj?.positions || [];
+                const hasPhase = enabledPhases.length > 0 || customPhases.length > 0 || positions.some(pos => (pos.enabledPhases||[]).length > 0);
+                const combinedVal = weekForm.phaseId ? (weekForm.positionId ? weekForm.phaseId+"|"+weekForm.positionId : weekForm.phaseId) : "";
+                const onPhaseChange = (val) => { if (!val) { setWeekForm({...weekForm, phaseId:"", positionId:""}); return; } const [ph,pos]=val.split("|"); setWeekForm({...weekForm, phaseId:ph, positionId:pos||""}); };
+                const mins = (weekForm.endSlot - weekForm.startSlot + 1) * 15;
+                return (
+                  <div style={{ borderTop: `2px solid ${accentColor}`, padding: "12px 16px", background: "#faf8f5" }}>
+                    <div style={{ display: "flex", alignItems: "center", gap: 12, marginBottom: 10 }}>
+                      <div style={{ fontSize: 10, letterSpacing: "0.1em", color: accentColor, fontWeight: 600 }}>
+                        {new Date(weekForm.dayStr).toLocaleDateString("de-CH", { weekday: "long", day: "numeric", month: "long" }).toUpperCase()} · {slotToTime(weekForm.startSlot)} – {slotToTime(weekForm.endSlot + 1)} · {mins >= 60 ? `${mins%60===0?mins/60:(mins/60).toFixed(1)}h` : `${mins} min`}
+                      </div>
+                      <div style={{ display: "flex", gap: 4, marginLeft: "auto", flexShrink: 0 }}>
+                        {[["projekt", "Projekt"], ["absenz", "Intern / Absenz"]].map(([m, label]) => (
+                          <button key={m} className={`pill${weekForm.mode === m ? " active" : ""}`} onClick={() => setWeekForm({ ...weekForm, mode: m })}>{label}</button>
+                        ))}
+                      </div>
+                    </div>
+                    <div style={{ display: "flex", gap: 8, flexWrap: "wrap", alignItems: "flex-end" }}>
+                      {isAbsMode ? (
+                        <>
+                          <div style={{ flex: "1 1 180px" }}>
+                            <div style={{ fontSize: 10, color: "#aaa", marginBottom: 3, letterSpacing: "0.06em" }}>TYP</div>
+                            <select value={weekForm.absType || ""} onChange={e => setWeekForm({ ...weekForm, absType: e.target.value })} style={{ height: 34, fontSize: 12, width: "100%" }} autoFocus>
+                              <option value="">— wählen —</option>
+                              {absenzTypes.map(t => <option key={t.id} value={t.id}>{t.label}</option>)}
+                            </select>
+                          </div>
+                          <div style={{ flex: "2 1 180px" }}>
+                            <div style={{ fontSize: 10, color: "#aaa", marginBottom: 3, letterSpacing: "0.06em" }}>NOTIZ</div>
+                            <input value={weekForm.absNote || ""} onChange={e => setWeekForm({ ...weekForm, absNote: e.target.value })} placeholder="Notiz…" style={{ height: 34, fontSize: 12, width: "100%", boxSizing: "border-box" }} onKeyDown={e => e.key === "Enter" && saveWeekEntry()} />
+                          </div>
+                        </>
+                      ) : (
+                        <>
+                          <div style={{ flex: "1 1 150px" }}>
+                            <div style={{ fontSize: 10, color: "#aaa", marginBottom: 3, letterSpacing: "0.06em" }}>PROJEKT</div>
+                            <select value={weekForm.projectId} onChange={e => { const proj = data.projects.find(p => p.id === e.target.value); const { phaseId, positionId } = getFirstPhaseForProject(proj); setWeekForm({...weekForm, projectId:e.target.value, phaseId, positionId}); }} style={{ height: 34, fontSize: 12, width: "100%" }} autoFocus>
+                              <option value="">— wählen —</option>
+                              {data.projects.map(p => <option key={p.id} value={p.id}>{p.name}</option>)}
+                            </select>
+                          </div>
+                          {hasPhase && (
+                            <div style={{ flex: "1 1 120px" }}>
+                              <div style={{ fontSize: 10, color: !combinedVal ? "#b5621e" : "#aaa", marginBottom: 3, letterSpacing: "0.06em" }}>PHASE *</div>
+                              <select value={combinedVal} onChange={e => onPhaseChange(e.target.value)} style={{ height: 34, fontSize: 12, width: "100%", borderColor: !combinedVal ? "#b5621e" : undefined }}>
+                                <option value="">— wählen —</option>
+                                {customPhases.map(cp => <option key={cp.id} value={cp.id}>{cp.label}</option>)}
+                                {enabledPhases.map(ph => <option key={ph.id} value={ph.id}>{ph.id} · {ph.label.split(" ").slice(1).join(" ")}</option>)}
+                                {positions.flatMap(pos => (pos.enabledPhases||[]).map(id=>SIA_PHASES.find(ph=>ph.id===id)).filter(Boolean).map(ph => <option key={ph.id+"|"+pos.code} value={ph.id+"|"+pos.code}>{pos.code} · {ph.id}</option>))}
+                              </select>
+                            </div>
+                          )}
+                          <div style={{ flex: "2 1 180px" }}>
+                            <div style={{ fontSize: 10, color: "#aaa", marginBottom: 3, letterSpacing: "0.06em" }}>TÄTIGKEIT</div>
+                            <input value={weekForm.description} onChange={e => setWeekForm({...weekForm, description:e.target.value})} placeholder="Beschreibung…" style={{ height: 34, fontSize: 12, width: "100%", boxSizing: "border-box" }} onKeyDown={e => e.key === "Enter" && saveWeekEntry()} />
+                          </div>
+                        </>
+                      )}
+                      <div style={{ display: "flex", gap: 6 }}>
+                        <button className="btn btn-primary" onClick={saveWeekEntry} disabled={isAbsMode ? !weekForm.absType : (!weekForm.projectId || (hasPhase && !combinedVal))} style={{ fontSize: 12, height: 34 }}>Speichern</button>
+                        <button className="btn btn-ghost" onClick={() => { setWeekForm(null); setWeekSelectStart(null); }} style={{ fontSize: 12, height: 34 }}><span className="material-icons" style={{fontSize:16,verticalAlign:"middle"}}>close</span></button>
+                      </div>
+                    </div>
+                  </div>
+                );
+              })()}
+
+              {weekEditForm && !weekForm && (() => {
+                if (weekEditForm.isAbs) {
+                  const a = (data.absences||[]).find(x => x.id === weekEditForm.entryId);
+                  if (!a) return null;
+                  const t = absenzTypes.find(x => x.id === a.type);
+                  const accentColor = t?.color || "#6b5a8a";
+                  const [shE,smE]=a.startTime.split(":").map(Number); const [ehE,emE]=a.endTime.split(":").map(Number);
+                  const durE = (ehE*60+emE)-(shE*60+smE);
+                  return (
+                    <div style={{ borderTop: `2px solid ${accentColor}`, padding: "12px 16px", background: "#faf8f5" }}>
+                      <div style={{ fontSize: 10, color: accentColor, fontWeight: 600, letterSpacing: "0.1em", marginBottom: 10 }}>
+                        {new Date(a.date).toLocaleDateString("de-CH", { weekday: "long", day: "numeric", month: "long" }).toUpperCase()} · {a.startTime} – {a.endTime} · {(durE/60).toFixed(1)}h
+                      </div>
+                      <div style={{ display: "flex", gap: 8, flexWrap: "wrap", alignItems: "flex-end" }}>
+                        <div style={{ flex: "1 1 180px" }}>
+                          <div style={{ fontSize: 10, color: "#aaa", marginBottom: 3, letterSpacing: "0.06em" }}>TYP</div>
+                          <select value={a.type || ""} onChange={ev => update("absences", (data.absences||[]).map(x => x.id === a.id ? {...x, type: ev.target.value} : x))} style={{ height: 34, fontSize: 12, width: "100%" }} autoFocus>
+                            <option value="">— wählen —</option>
+                            {absenzTypes.map(at => <option key={at.id} value={at.id}>{at.label}</option>)}
+                          </select>
+                        </div>
+                        <div style={{ flex: "2 1 180px" }}>
+                          <div style={{ fontSize: 10, color: "#aaa", marginBottom: 3, letterSpacing: "0.06em" }}>NOTIZ</div>
+                          <input value={a.note || ""} onChange={ev => update("absences", (data.absences||[]).map(x => x.id === a.id ? {...x, note: ev.target.value} : x))} placeholder="Notiz…" style={{ height: 34, fontSize: 12, width: "100%", boxSizing: "border-box" }} />
+                        </div>
+                        <div style={{ display: "flex", gap: 6 }}>
+                          <button className="btn btn-danger" onClick={() => { update("absences", (data.absences||[]).filter(x => x.id !== a.id)); setWeekEditForm(null); }} style={{ fontSize: 12, height: 34 }}>Löschen</button>
+                          <button className="btn btn-ghost" onClick={() => setWeekEditForm(null)} style={{ fontSize: 12, height: 34 }}><span className="material-icons" style={{fontSize:16,verticalAlign:"middle"}}>close</span></button>
+                        </div>
+                      </div>
+                    </div>
+                  );
+                } else {
+                  const e = data.timeEntries.find(x => x.id === weekEditForm.entryId);
+                  if (!e) return null;
+                  const projE = data.projects.find(p => p.id === e.projectId);
+                  const enabledPhasesE = (projE?.enabledPhases||[]).map(id => SIA_PHASES.find(ph => ph.id === id)).filter(Boolean);
+                  const customPhasesE = projE?.customPhases || [];
+                  const positionsE = projE?.positions || [];
+                  const hasPhaseE = enabledPhasesE.length > 0 || customPhasesE.length > 0 || positionsE.some(pos => (pos.enabledPhases||[]).length > 0);
+                  const combinedValE = e.phaseId ? (e.positionId ? e.phaseId+"|"+e.positionId : e.phaseId) : "";
+                  const onPhaseChangeE = (val) => { if (!val) { updateEntry(e.id, { phaseId: "", positionId: "" }); return; } const [ph, pos] = val.split("|"); updateEntry(e.id, { phaseId: ph, positionId: pos || "" }); };
+                  const isInvoiced = !!e.invoiceId;
+                  const disabledE = isInvoiced || isMonthClosed(e.date);
+                  const bgE = PROJ_COLORS[data.projects.findIndex(p => p.id === e.projectId) % PROJ_COLORS.length] || PROJ_COLORS[0];
+                  const durE = e.startTime && e.endTime ? (() => { const [sh,sm]=e.startTime.split(":").map(Number); const [eh,em]=e.endTime.split(":").map(Number); return (eh*60+em)-(sh*60+sm); })() : e.minutes;
+                  return (
+                    <div style={{ borderTop: `2px solid ${bgE}`, padding: "12px 16px", background: "#faf8f5" }}>
+                      <div style={{ fontSize: 10, color: bgE, fontWeight: 600, letterSpacing: "0.1em", marginBottom: 10, display: "flex", alignItems: "center", gap: 8 }}>
+                        <span>{new Date(e.date).toLocaleDateString("de-CH", { weekday: "long", day: "numeric", month: "long" }).toUpperCase()} · {e.startTime} – {e.endTime} · {(durE/60).toFixed(1)}h</span>
+                        {isInvoiced && <span style={{ fontSize: 9, color: "#b5621e", fontWeight: 400 }}>verrechnet</span>}
+                      </div>
+                      <div style={{ display: "flex", gap: 8, flexWrap: "wrap", alignItems: "flex-end" }}>
+                        <div style={{ flex: "1 1 150px" }}>
+                          <div style={{ fontSize: 10, color: "#aaa", marginBottom: 3, letterSpacing: "0.06em" }}>PROJEKT</div>
+                          <select disabled={disabledE} value={e.projectId} onChange={ev => updateEntry(e.id, { projectId: ev.target.value, phaseId: "", positionId: "" })} style={{ height: 34, fontSize: 12, width: "100%" }} autoFocus>
+                            <option value="">—</option>
+                            {data.projects.map(p => <option key={p.id} value={p.id}>{p.name}</option>)}
+                          </select>
+                        </div>
+                        {hasPhaseE && (
+                          <div style={{ flex: "1 1 120px" }}>
+                            <div style={{ fontSize: 10, color: "#aaa", marginBottom: 3, letterSpacing: "0.06em" }}>PHASE</div>
+                            <select disabled={disabledE} value={combinedValE} onChange={ev => onPhaseChangeE(ev.target.value)} style={{ height: 34, fontSize: 12, width: "100%" }}>
+                              <option value="">—</option>
+                              {customPhasesE.map(cp => <option key={cp.id} value={cp.id}>{cp.label}</option>)}
+                              {enabledPhasesE.map(ph => <option key={ph.id} value={ph.id}>{ph.id} · {ph.label.split(" ").slice(1).join(" ")}</option>)}
+                              {positionsE.flatMap(pos => (pos.enabledPhases||[]).map(id=>SIA_PHASES.find(ph=>ph.id===id)).filter(Boolean).map(ph => <option key={ph.id+"|"+pos.code} value={ph.id+"|"+pos.code}>{pos.code} · {ph.id}</option>))}
+                            </select>
+                          </div>
+                        )}
+                        <div style={{ flex: "2 1 180px" }}>
+                          <div style={{ fontSize: 10, color: "#aaa", marginBottom: 3, letterSpacing: "0.06em" }}>TÄTIGKEIT</div>
+                          <input disabled={disabledE} value={e.description || ""} onChange={ev => updateEntry(e.id, { description: ev.target.value })} placeholder="Beschreibung…" style={{ height: 34, fontSize: 12, width: "100%", boxSizing: "border-box" }} />
+                        </div>
+                        <div style={{ display: "flex", gap: 6 }}>
+                          <button className="btn btn-danger" disabled={disabledE} onClick={() => { delEntry(e.id); setWeekEditForm(null); }} style={{ fontSize: 12, height: 34, opacity: disabledE ? 0.4 : 1 }}>Löschen</button>
+                          <button className="btn btn-ghost" onClick={() => setWeekEditForm(null)} style={{ fontSize: 12, height: 34 }}><span className="material-icons" style={{fontSize:16,verticalAlign:"middle"}}>close</span></button>
+                        </div>
+                      </div>
+                    </div>
+                  );
+                }
+              })()}
+            </div>
+          )}
+        </div>
+
+        {/* Modal: Ferien-Übersicht */}
+        {ferienUebersicht && selectedEmp && (
+          <Modal title={`Ferien — ${selectedEmp.name}`} onClose={() => setFerienUebersicht(false)}>
+            {(() => {
+              const today = new Date().toISOString().slice(0, 10);
+              const empFerien = (data.ferienEntries || []).filter(f => f.employeeId === selectedEmp.id).sort((a, b) => (b.dateFrom || "").localeCompare(a.dateFrom || ""));
+              if (empFerien.length === 0) return <div style={{ fontSize: 13, color: "#aaa", padding: "12px 0" }}>Keine Ferieneinträge vorhanden.</div>;
+              const groups = [
+                { label: "Pendent", entries: empFerien.filter(f => f.status === "pending") },
+                { label: "Bestätigt", entries: empFerien.filter(f => f.status !== "pending") },
+              ];
+              return groups.filter(g => g.entries.length > 0).map(g => (
+                <div key={g.label} style={{ marginBottom: 16 }}>
+                  <div style={{ fontSize: 10, letterSpacing: "0.1em", color: "#888", marginBottom: 8 }}>{g.label.toUpperCase()}</div>
+                  {g.entries.map(f => {
+                    const isPending = f.status === "pending";
+                    const isEditPending = isPending && !!f.originalData;
+                    const displayTo = isPending && f.originalData ? f.originalData.dateTo : f.dateTo;
+                    const isPast = displayTo < today;
+                    return (
+                      <div key={f.id} style={{ display: "flex", alignItems: "center", gap: 8, padding: "8px 0", borderBottom: "1px solid #f0ede8" }}>
+                        <div style={{ flex: 1 }}>
+                          {isEditPending ? (
+                            <>
+                              <div style={{ fontSize: 11, color: "#aaa", textDecoration: "line-through" }}>{formatDate(f.originalData.dateFrom)} – {formatDate(f.originalData.dateTo)}</div>
+                              <div style={{ fontSize: 13, color: "#222" }}>{formatDate(f.dateFrom)} – {formatDate(f.dateTo)} <span style={{ fontSize: 10, color: "#b5621e", fontWeight: 600 }}>neu</span></div>
+                            </>
+                          ) : (
+                            <div style={{ fontSize: 13, color: "#222" }}>{formatDate(f.dateFrom)} – {formatDate(f.dateTo)}</div>
+                          )}
+                          {f.note && <div style={{ fontSize: 11, color: "#aaa", marginTop: 2 }}>{f.note}</div>}
+                        </div>
+                        <span style={{ fontSize: 10, padding: "2px 10px", borderRadius: 20, background: isPending ? "#fff8e8" : "#e8f5ee", color: isPending ? "#b5621e" : "#2d6a4f", fontWeight: 600, flexShrink: 0, whiteSpace: "nowrap" }}>
+                          {isEditPending ? "Änderung" : isPending ? "pendent" : "bestätigt"}
+                        </span>
+                        {!isPast && !isPending && (
+                          <button onClick={() => { setFerienUebersicht(false); editFerien(f); }} style={{ background: "none", border: "none", color: "#888", cursor: "pointer", fontSize: 13, padding: "0 3px", lineHeight: 1, flexShrink: 0 }} title="Bearbeiten"><span className="material-icons" style={{fontSize:16,verticalAlign:"middle"}}>edit</span></button>
+                        )}
+                        {isPast
+                          ? <span style={{ fontSize: 11, color: "#ccc", flexShrink: 0, padding: "0 4px" }}>vergangen</span>
+                          : isEditPending
+                            ? <button onClick={() => cancelFerienEdit(f.id)} style={{ background: "none", border: "none", color: "#bbb", cursor: "pointer", fontSize: 13, padding: "0 2px", lineHeight: 1, flexShrink: 0 }} title="Änderung verwerfen"><span className="material-icons" style={{fontSize:16,verticalAlign:"middle"}}>close</span></button>
+                            : <button className="btn btn-sm btn-danger" onClick={() => deleteFerien(f.id)} title="Zurücknehmen"><span className="material-icons" style={{fontSize:16,verticalAlign:"middle"}}>close</span></button>
+                        }
+                      </div>
+                    );
+                  })}
+                </div>
+              ));
+            })()}
+          </Modal>
+        )}
+
+        {/* Modal: Ferienantrag */}
+        {antragModal === "ferien" && (
+          <Modal title="Ferien beantragen" onClose={() => setAntragModal(null)} onSave={saveAntrag} overflow>
+            {employees.length > 1 && (
+              <FormField label="Mitarbeiter">
+                <select value={antragForm.employeeId || ""} onChange={e => setAntragForm({ ...antragForm, employeeId: e.target.value })}>
+                  <option value="">— wählen —</option>
+                  {employees.map(e => <option key={e.id} value={e.id}>{e.name}</option>)}
+                </select>
+              </FormField>
+            )}
+            <div className="form-row">
+              <FormField label="Von"><DatePicker value={antragForm.dateFrom || ""} onChange={e => setAntragForm({ ...antragForm, dateFrom: e.target.value })} /></FormField>
+              <FormField label="Bis"><DatePicker value={antragForm.dateTo || ""} onChange={e => setAntragForm({ ...antragForm, dateTo: e.target.value })} /></FormField>
+            </div>
+            <FormField label="Notiz (optional)"><input value={antragForm.note || ""} onChange={e => setAntragForm({ ...antragForm, note: e.target.value })} /></FormField>
+          </Modal>
+        )}
+
+        <div>
+          {employees.length > 0 && (
+            <div className="card" style={{ marginBottom: 12, padding: "10px 14px" }}>
+              <div style={{ fontSize: 10, letterSpacing: "0.08em", color: "#888", marginBottom: 6 }}>MITARBEITER</div>
+              {(() => {
+                const canSwitchEmployee = isAdmin || (currentUser?.permissions || []).includes("mitarbeiter");
+                if (canSwitchEmployee) {
+                  return (
+                    <select value={selectedEmpId} onChange={e => setSelectedEmpId(e.target.value)} style={{ width: "100%", fontSize: 13 }}>
+                      {isAdmin && <option value="">— Alle / Kein Filter —</option>}
+                      {employees.map(e => <option key={e.id} value={e.id}>{e.name} · {e.pensum||100}%</option>)}
+                    </select>
+                  );
+                }
+                return (
+                  <div style={{ fontSize: 13, fontWeight: 500, color: "#1a1a18" }}>
+                    {employees.find(e => e.id === myEmployeeId)?.name || "—"}
+                  </div>
+                );
+              })()}
+            </div>
+          )}
+          <div className="card">
+          <div style={{ display: "flex", justifyContent: "space-between", alignItems: "center", marginBottom: 12 }}>
+            <NavArrows onPrev={() => { const d = new Date(viewDate); d.setMonth(d.getMonth() - 1); setCurrentDate(d.toISOString().slice(0, 10)); }} onNext={() => { const d = new Date(viewDate); d.setMonth(d.getMonth() + 1); setCurrentDate(d.toISOString().slice(0, 10)); }} />
+            <div style={{ fontFamily: "'Playfair Display', serif", fontSize: 14, textAlign: "center" }}>{monthLabel}</div>
+            <div style={{ width: 55 }} />
+          </div>
+
+          <div style={{ display: "grid", gridTemplateColumns: "repeat(7, 1fr)", gap: 2, marginBottom: 6 }}>
+            {["Mo", "Di", "Mi", "Do", "Fr", "Sa", "So"].map(d => (
+              <div key={d} style={{ fontSize: 9, color: "#aaa", textAlign: "center", letterSpacing: "0.05em", padding: "4px 0" }}>{d}</div>
+            ))}
+          </div>
+
+          <div style={{ display: "grid", gridTemplateColumns: "repeat(7, 1fr)", gap: 2 }}>
+            {monthCells.map((cell, i) => {
+              if (!cell) return <div key={i}></div>;
+              const isSelected = cell.dateStr === currentDate;
+              const isCurToday = cell.dateStr === new Date().toISOString().slice(0, 10);
+              const hasEntries = cell.mins > 0;
+              const noWork = cell.isWeekend || cell.isFeiertag;
+              const isVortag = cell.isVortag && !cell.isFeiertag;
+
+              let bg = "transparent";
+              if (isSelected) bg = "#1a1a18";
+              else if (cell.isFerien) bg = "#e8f5ee";
+              else if (cell.isPendingFerien) bg = "#fff8e8";
+              else if (cell.isAbsenz) bg = "#f0f0f0";
+              else if (cell.isPendingAbsenz) bg = "#f5f0f8";
+              else if (hasEntries && !noWork) bg = "#faf3e4";
+              else if (hasEntries && noWork) bg = "#f5f0e8";
+
+              const textColor = isSelected ? "#e8e5df" : (noWork && !hasEntries) ? "#ccc" : "#1a1a18";
+
+              return (
+                <button key={i} onClick={() => setCurrentDate(cell.dateStr)} style={{
+                  aspectRatio: "1", padding: 1,
+                  background: bg, color: textColor,
+                  border: isCurToday && !isSelected ? "1.5px solid var(--accent)" : "1px solid transparent",
+                  borderRadius: 4, fontFamily: "inherit",
+                  display: "flex", flexDirection: "column", alignItems: "center", justifyContent: "center",
+                  cursor: "pointer", transition: "all 0.1s",
+                }}>
+                  <div style={{ fontSize: 11, fontWeight: noWork ? 400 : 500 }}>{cell.day}</div>
+                  {!selectedEmp && hasEntries && (
+                    <div style={{ fontSize: 7, color: isSelected ? "#e8e5df" : "#8a6a3a", marginTop: 1 }}>
+                      {(cell.mins / 60).toFixed(1)}h
+                    </div>
+                  )}
+                  {selectedEmp && hasEntries && (
+                    <div style={{ fontSize: 7, color: isSelected ? "#e8e5df" : "#2d6a4f", fontWeight: 600, marginTop: 1 }}>
+                      {(cell.mins / 60).toFixed(1)}h
+                    </div>
+                  )}
+                  {(cell.isFerien || cell.isPendingFerien) && !isSelected && (
+                    <div style={{ marginTop: 2, display: "flex", justifyContent: "center" }}>
+                      {cell.isPendingFerien ? (
+                        <div style={{ fontSize: 7, color: "#b5621e", lineHeight: 1 }}>?</div>
+                      ) : (
+                        <svg width="7" height="7" viewBox="0 0 12 12" fill="none">
+                          <circle cx="6" cy="6" r="2.5" fill="#2d6a4f"/>
+                          <line x1="6" y1="0" x2="6" y2="2" stroke="#2d6a4f" strokeWidth="1.2" strokeLinecap="round"/>
+                          <line x1="6" y1="10" x2="6" y2="12" stroke="#2d6a4f" strokeWidth="1.2" strokeLinecap="round"/>
+                          <line x1="0" y1="6" x2="2" y2="6" stroke="#2d6a4f" strokeWidth="1.2" strokeLinecap="round"/>
+                          <line x1="10" y1="6" x2="12" y2="6" stroke="#2d6a4f" strokeWidth="1.2" strokeLinecap="round"/>
+                          <line x1="1.8" y1="1.8" x2="3.2" y2="3.2" stroke="#2d6a4f" strokeWidth="1.2" strokeLinecap="round"/>
+                          <line x1="8.8" y1="8.8" x2="10.2" y2="10.2" stroke="#2d6a4f" strokeWidth="1.2" strokeLinecap="round"/>
+                          <line x1="10.2" y1="1.8" x2="8.8" y2="3.2" stroke="#2d6a4f" strokeWidth="1.2" strokeLinecap="round"/>
+                          <line x1="3.2" y1="8.8" x2="1.8" y2="10.2" stroke="#2d6a4f" strokeWidth="1.2" strokeLinecap="round"/>
+                        </svg>
+                      )}
+                    </div>
+                  )}
+                  {(cell.isAbsenz || cell.isPendingAbsenz) && !isSelected && !cell.isFerien && !cell.isPendingFerien && (
+                    <div style={{ fontSize: 7, color: cell.isPendingAbsenz ? "#7a5a9a" : "#888", marginTop: 1 }}>
+                      {cell.isPendingAbsenz ? "?" : <span className="material-icons" style={{fontSize:8,verticalAlign:"middle"}}>close</span>}
+                    </div>
+                  )}
+                  {isVortag && !hasEntries && !cell.isFerien && !cell.isAbsenz && (
+                    <div style={{ fontSize: 7, color: "#bbb", marginTop: 1 }}>−1h</div>
+                  )}
+                </button>
+              );
+            })}
+          </div>
+
+          <div style={{ marginTop: 16, paddingTop: 14, borderTop: "1px solid #ece8e2", display: "flex", justifyContent: "space-between", fontSize: 11 }}>
+            <span style={{ color: "#888" }}>Monatstotal</span>
+            <strong>{formatHours(monthTotalMins)}</strong>
+          </div>
+        </div>
+
+        {selectedEmp && (
+          <div className="card" style={{ marginTop: 12, padding: "14px 16px" }}>
+            <div style={{ paddingBottom: 8, marginBottom: 8, borderBottom: "1px solid #ece8e2" }}>
+              <div className="section-label" style={{ marginBottom: 4 }}>Saldo seit Eintritt</div>
+              {totalSaldo && [
+                { label: "Soll bis heute", value: `${totalSaldo.soll}h` },
+                { label: "IST", value: `${totalSaldo.ist}h` },
+              ].map(r => (
+                <div key={r.label} style={{ display: "flex", justifyContent: "space-between", padding: "1px 0", fontSize: 11, color: "#555" }}>
+                  <span>{r.label}</span><span>{r.value}</span>
+                </div>
+              ))}
+              {totalSaldo && (
+                <div style={{ display: "flex", justifyContent: "space-between", marginTop: 4, paddingTop: 4, borderTop: "1px solid #e0dbd4", fontFamily: "'Playfair Display', serif", fontSize: 13 }}>
+                  <span>Saldo</span>
+                  <strong style={{ color: totalSaldo.saldo >= 0 ? "#2d6a4f" : "#8a1a1a" }}>
+                    {totalSaldo.saldo === 0 ? "0h" : `${totalSaldo.saldo > 0 ? "+" : ""}${totalSaldo.saldo}h`}
+                  </strong>
+                </div>
+              )}
+            </div>
+            <div style={{ paddingBottom: 8, marginBottom: 8, borderBottom: "1px solid #ece8e2" }}>
+              <div className="section-label" style={{ marginBottom: 4 }}>Monatssaldo — {new Date(currentDate + "T12:00:00").toLocaleString("de-CH", { month: "long" })}</div>
+              {monthSaldo && [
+                { label: "Soll", value: `${monthSaldo.soll}h` },
+                { label: "IST", value: `${monthSaldo.ist}h` },
+              ].map(r => (
+                <div key={r.label} style={{ display: "flex", justifyContent: "space-between", padding: "1px 0", fontSize: 11, color: "#555" }}>
+                  <span>{r.label}</span><span>{r.value}</span>
+                </div>
+              ))}
+              {monthSaldo && (
+                <div style={{ display: "flex", justifyContent: "space-between", marginTop: 4, paddingTop: 4, borderTop: "1px solid #e0dbd4", fontFamily: "'Playfair Display', serif", fontSize: 13 }}>
+                  <span>Saldo</span>
+                  <strong style={{ color: monthSaldo.saldo >= 0 ? "#2d6a4f" : "#8a1a1a" }}>
+                    {monthSaldo.saldo === 0 ? "0h" : `${monthSaldo.saldo > 0 ? "+" : ""}${monthSaldo.saldo}h`}
+                  </strong>
+                </div>
+              )}
+            </div>
+            <div>
+              <div className="section-label" style={{ marginBottom: 4 }}>Ferien {new Date().getFullYear()}</div>
+              {ferienSaldo && [
+                { label: "Anspruch", value: `${ferienSaldo.anspruch}h`, show: true },
+                { label: "Übertrag", value: `${ferienSaldo.ubertrag}h`, show: ferienSaldo.ubertrag > 0 },
+                { label: "Bezogen", value: `${ferienSaldo.bezogen}h`, show: ferienSaldo.bezogen > 0 },
+                { label: "Geplant", value: `${ferienSaldo.geplant}h`, show: ferienSaldo.geplant > 0 },
+              ].filter(r => r.show).map(r => (
+                <div key={r.label} style={{ display: "flex", justifyContent: "space-between", padding: "1px 0", fontSize: 11, color: "#555" }}>
+                  <span>{r.label}</span><span>{r.value}</span>
+                </div>
+              ))}
+              {ferienSaldo && (
+                <div style={{ display: "flex", justifyContent: "space-between", marginTop: 4, paddingTop: 4, borderTop: "1px solid #e0dbd4", fontFamily: "'Playfair Display', serif", fontSize: 13 }}>
+                  <span>Rest</span>
+                  <strong style={{ color: ferienSaldo.rest >= 0 ? "#2d6a4f" : "#8a1a1a" }}>
+                    {ferienSaldo.rest === 0 ? "0h" : `${ferienSaldo.rest > 0 ? "+" : ""}${ferienSaldo.rest}h`}
+                  </strong>
+                </div>
+              )}
+            </div>
+          </div>
+        )}
+
+        </div>
+      </div>
+
+      {contextMenu && (
+        <>
+          <div style={{ position: "fixed", inset: 0, zIndex: 999 }} onClick={() => setContextMenu(null)} onContextMenu={ev => { ev.preventDefault(); setContextMenu(null); }} />
+          <div style={{ position: "fixed", top: contextMenu.y, left: contextMenu.x, zIndex: 1000, background: "#fff", border: "1px solid #e0dbd4", borderRadius: 6, boxShadow: "0 4px 16px rgba(0,0,0,0.12)", minWidth: 180, padding: "4px 0" }}>
+            <button style={{ display: "block", width: "100%", textAlign: "left", padding: "8px 14px", fontSize: 12, background: "none", border: "none", cursor: "pointer", fontFamily: "inherit", color: "#1a1a18" }}
+              onMouseEnter={ev => ev.currentTarget.style.background = "#faf8f5"}
+              onMouseLeave={ev => ev.currentTarget.style.background = "none"}
+              onClick={() => { duplicateToNextDay(contextMenu.entry); setContextMenu(null); }}>
+              Auf morgen kopieren
+            </button>
+          </div>
+        </>
+      )}
+    </div>
+  );
+}
+
diff --git a/vite.config.js b/vite.config.js
new file mode 100755
index 0000000..8b0f57b
--- /dev/null
+++ b/vite.config.js
@@ -0,0 +1,7 @@
+import { defineConfig } from 'vite'
+import react from '@vitejs/plugin-react'
+
+// https://vite.dev/config/
+export default defineConfig({
+  plugins: [react()],
+})

Erste Schritte

{title}

{title}

{title}

{title}

{selectedClient.name}

{selectedContact.name}

+ {data.settings.name||"Studio"} +

+ {data.settings.name || "Studio"} +