UI: Über Rapport Modal, einheitliche Icons (Stift), Pinnwand Pills

- Sidebar Footer: "Über Rapport" öffnet About-Modal (Lizenz, Technologien), Versionsnummer öffnet Changelog
- Dashboard: material-symbols-outlined → material-icons für Edit-Button
- Contacts, Clients, Personen, Projects: "Bearbeiten"-Text entfernt, nur Stift-Icon
- Pinnwand: Inaktive Pills Hintergrund transparent → var(--surface)

src/App.jsx

@@ -187,6 +187,7 @@ export default function App() {
   const [darkMode, setDarkMode] = useState(() => localStorage.getItem("rapport_dark") === "1");
   const [showChangelog, setShowChangelog] = useState(() => localStorage.getItem("rapport_changelog_seen") !== "0.5");
   const [changelogVersion, setChangelogVersion] = useState("0.5");
+  const [showAbout, setShowAbout] = useState(false);
   const [navOpen, setNavOpen] = useState(false);
   const [expandedNav, setExpandedNav] = useState(new Set(["buchhaltung"]));
   const [sidebarCollapsed, setSidebarCollapsed] = useState(() => localStorage.getItem("rapport_sidebar_collapsed") === "1");
@@ -534,11 +535,12 @@ export default function App() {
           ))}
         </div>
 
-        {!collapsed && <div style={{ padding: "8px 16px", borderTop: "1px solid #2d2d28", fontSize: 10, color: "#aaa", letterSpacing: "0.08em" }}>
-          <div style={{ display: "flex", flexDirection: "column", gap: 3 }}>
-            <button onClick={() => { setChangelogVersion("0.5"); setShowChangelog(true); }} style={{ background: "none", border: "none", padding: 0, color: "#aaa", fontSize: 10, letterSpacing: "0.08em", cursor: "pointer", fontFamily: "inherit", textAlign: "left" }}>ALPHA 0.5 ↗</button>
-            <a href="https://www.gnu.org/licenses/agpl-3.0.html" target="_blank" rel="noreferrer" style={{ color: "#555", fontSize: 10, letterSpacing: "0.08em", textDecoration: "none" }}>AGPL-3.0 ↗</a>
-            <a href="https://rapport.gabrielevarano.ch/" target="_blank" rel="noreferrer" style={{ color: "#555", fontSize: 10, letterSpacing: "0.08em", textDecoration: "none" }}>WEBSITE ↗</a>
+        {!collapsed && <div style={{ padding: "8px 16px", borderTop: "1px solid #2d2d28" }}>
+          <div style={{ display: "flex", justifyContent: "space-between", alignItems: "center" }}>
+            <button onClick={() => setShowAbout(true)} style={{ background: "none", border: "none", padding: 0, color: "#555", fontSize: 10, letterSpacing: "0.08em", cursor: "pointer", fontFamily: "inherit", textAlign: "left" }}
+              onMouseEnter={e => e.currentTarget.style.color = "#aaa"} onMouseLeave={e => e.currentTarget.style.color = "#555"}>ÜBER RAPPORT</button>
+            <button onClick={() => { setChangelogVersion("0.5"); setShowChangelog(true); }} style={{ background: "none", border: "none", padding: 0, color: "#aaa", fontSize: 10, letterSpacing: "0.08em", cursor: "pointer", fontFamily: "inherit" }}
+              onMouseEnter={e => e.currentTarget.style.color = "#f0ede8"} onMouseLeave={e => e.currentTarget.style.color = "#aaa"}>0.5</button>
           </div>
         </div>}
 
@@ -679,6 +681,50 @@ export default function App() {
           </div>
         );
       })()}
+
+      {showAbout && (
+        <div style={{ position: "fixed", inset: 0, background: "rgba(0,0,0,0.55)", zIndex: 200, display: "flex", alignItems: "center", justifyContent: "center", padding: 24 }}>
+          <div style={{ background: "#fff", borderRadius: 10, width: "100%", maxWidth: 480, boxShadow: "0 8px 40px rgba(0,0,0,0.18)", overflow: "hidden" }}>
+            <div style={{ background: "#1a1a18", padding: "28px 32px 24px" }}>
+              <div style={{ fontSize: 10, letterSpacing: "0.18em", color: "#b07848", marginBottom: 8, fontWeight: 600 }}>ÜBER RAPPORT</div>
+              <div style={{ fontFamily: "'Playfair Display', serif", fontSize: 28, color: "#f0ede8", fontWeight: 400, lineHeight: 1.1 }}>Rapport</div>
+              <div style={{ fontSize: 11, color: "#888", marginTop: 6, letterSpacing: "0.04em" }}>Alpha 0.5 · Studio-Management für Architekturbüros</div>
+            </div>
+            <div style={{ padding: "20px 32px 8px" }}>
+              <div style={{ fontSize: 11, fontWeight: 600, color: "#888", letterSpacing: "0.1em", marginBottom: 12 }}>LIZENZ</div>
+              <div style={{ display: "flex", gap: 14, marginBottom: 14 }}>
+                <div style={{ width: 4, flexShrink: 0, background: "#b07848", borderRadius: 2 }} />
+                <div>
+                  <div style={{ fontSize: 13, fontWeight: 600, color: "#1a1a18", marginBottom: 2 }}>GNU AGPL-3.0</div>
+                  <div style={{ fontSize: 12, color: "#888", lineHeight: 1.5 }}>Rapport ist freie Software. Der Quellcode darf eingesehen, verändert und weitergegeben werden — unter den Bedingungen der AGPL-3.0-Lizenz.</div>
+                  <a href="https://www.gnu.org/licenses/agpl-3.0.html" target="_blank" rel="noreferrer" style={{ fontSize: 11, color: "#b07848", textDecoration: "none", display: "inline-block", marginTop: 4 }}>www.gnu.org/licenses/agpl-3.0 ↗</a>
+                </div>
+              </div>
+              <div style={{ fontSize: 11, fontWeight: 600, color: "#888", letterSpacing: "0.1em", marginBottom: 12, marginTop: 20 }}>TECHNOLOGIEN</div>
+              {[
+                ["React 19", "UI-Framework"],
+                ["Vite", "Build-Tool"],
+                ["Tauri", "Desktop-App-Rahmen"],
+                ["Material Symbols", "Icons von Google"],
+              ].map(([name, desc]) => (
+                <div key={name} style={{ display: "flex", justifyContent: "space-between", padding: "6px 0", borderBottom: "1px solid #f0ede8" }}>
+                  <div style={{ fontSize: 12, fontWeight: 600, color: "#1a1a18" }}>{name}</div>
+                  <div style={{ fontSize: 12, color: "#aaa" }}>{desc}</div>
+                </div>
+              ))}
+              <div style={{ marginTop: 20, padding: "12px 14px", background: "#f7f5f2", borderRadius: 8 }}>
+                <div style={{ fontSize: 11, color: "#888", lineHeight: 1.6 }}>
+                  Entwickelt von <span style={{ color: "#1a1a18", fontWeight: 600 }}>Gabriele Varano</span><br />
+                  <a href="https://rapport.gabrielevarano.ch/" target="_blank" rel="noreferrer" style={{ color: "#b07848", textDecoration: "none" }}>rapport.gabrielevarano.ch ↗</a>
+                </div>
+              </div>
+            </div>
+            <div style={{ padding: "16px 32px 24px" }}>
+              <button className="btn btn-primary" style={{ width: "100%", fontSize: 13 }} onClick={() => setShowAbout(false)}>Schliessen</button>
+            </div>
+          </div>
+        </div>
+      )}
     </div>
   );
 }

src/views/Dashboard.jsx

@@ -696,7 +696,7 @@ export default function Dashboard({ data, setView, currentUser, saveAll }) {
             </>
           ):(
             <button onClick={enterEdit} className={ctrlBtn} style={{display:"flex",alignItems:"center",gap:5}}>
-              <span className="material-symbols-outlined" style={{fontSize:13,verticalAlign:"middle"}}>edit</span>
+              <span className="material-icons" style={{fontSize:13,verticalAlign:"middle"}}>edit</span>
               Anpassen
             </button>
           )}