feat(help): help page with tree navigation, 6 help articles, routes in StartLayout

frontend/src/pages/help/HelpContacts.tsx

@@ -0,0 +1,25 @@
+import React from 'react';
+
+export function HelpContactsPage() {
+  return (
+    <div className="max-w-3xl mx-auto prose prose-secondary">
+      <h1 className="text-2xl font-bold text-secondary-900 mb-4">Kontakte verwalten</h1>
+      <h2 className="text-lg font-semibold text-secondary-800 mt-6 mb-2">Kontakte erstellen</h2>
+      <p className="text-secondary-600 mb-4">
+        Gehen Sie zu Kontakte und klicken Sie auf "Neuer Kontakt". Füllen Sie die Felder aus und speichern Sie. Sie können Firmen und Personen anlegen.
+      </p>
+      <h2 className="text-lg font-semibold text-secondary-800 mt-6 mb-2">Kontaktpersonen</h2>
+      <p className="text-secondary-600 mb-4">
+        Jeder Firma können mehrere Kontaktpersonen zugeordnet werden. Öffnen Sie eine Firma und fügen Sie Personen hinzu.
+      </p>
+      <h2 className="text-lg font-semibold text-secondary-800 mt-6 mb-2">Tags</h2>
+      <p className="text-secondary-600 mb-4">
+        Verwenden Sie Tags um Kontakte zu kategorisieren. Tags können frei vergeben werden und helfen bei der Filterung.
+      </p>
+      <h2 className="text-lg font-semibold text-secondary-800 mt-6 mb-2">Ordner</h2>
+      <p className="text-secondary-600 mb-4">
+        Organisieren Sie Kontakte in Ordnern. Ordner können verschachtelt werden und eigene Berechtigungen haben.
+      </p>
+    </div>
+  );
+}

frontend/src/pages/help/HelpLogin.tsx

@@ -0,0 +1,23 @@
+import React from 'react';
+
+export function HelpLoginPage() {
+  return (
+    <div className="max-w-3xl mx-auto prose prose-secondary">
+      <h1 className="text-2xl font-bold text-secondary-900 mb-4">Login & Anmeldung</h1>
+      <h2 className="text-lg font-semibold text-secondary-800 mt-6 mb-2">Anmeldung</h2>
+      <p className="text-secondary-600 mb-4">
+        Rufen Sie die LeoCRM-URL auf (z.B. https://crm.media-on.de) und melden Sie sich mit Ihrer E-Mail-Adresse und Ihrem Passwort an.
+      </p>
+      <h2 className="text-lg font-semibold text-secondary-800 mt-6 mb-2">Passwort vergessen?</h2>
+      <p className="text-secondary-600 mb-4">
+        Klicken Sie auf der Login-Seite auf "Passwort vergessen". Sie erhalten eine E-Mail mit einem Link zum Zurücksetzen Ihres Passworts.
+      </p>
+      <h2 className="text-lg font-semibold text-secondary-800 mt-6 mb-2">Sicherheit</h2>
+      <ul className="list-disc list-inside text-secondary-600 space-y-1">
+        <li>Ihre Sitzung wird über ein sicheres HttpOnly-Cookie verwaltet</li>
+        <li>Nach Inaktivität wird die Sitzung automatisch beendet</li>
+        <li>Passwörter werden mit bcrypt (cost=12) verschlüsselt gespeichert</li>
+      </ul>
+    </div>
+  );
+}

frontend/src/pages/help/HelpMailSetup.tsx

@@ -0,0 +1,25 @@
+import React from 'react';
+
+export function HelpMailSetupPage() {
+  return (
+    <div className="max-w-3xl mx-auto prose prose-secondary">
+      <h1 className="text-2xl font-bold text-secondary-900 mb-4">Postfach einrichten</h1>
+      <h2 className="text-lg font-semibold text-secondary-800 mt-6 mb-2">IMAP-Konto hinzufügen</h2>
+      <p className="text-secondary-600 mb-4">
+        Gehen Sie zu Einstellungen → Email und klicken Sie auf "Konto hinzufügen". Geben Sie Ihre IMAP- und SMTP-Serverdaten ein.
+      </p>
+      <h2 className="text-lg font-semibold text-secondary-800 mt-6 mb-2">Benötigte Daten</h2>
+      <ul className="list-disc list-inside text-secondary-600 space-y-1">
+        <li>IMAP-Server (z.B. imap.example.com)</li>
+        <li>IMAP-Port (meist 993 für SSL)</li>
+        <li>SMTP-Server (z.B. smtp.example.com)</li>
+        <li>SMTP-Port (meist 587 für TLS)</li>
+        <li>E-Mail-Adresse und Passwort</li>
+      </ul>
+      <h2 className="text-lg font-semibold text-secondary-800 mt-6 mb-2">Synchronisation</h2>
+      <p className="text-secondary-600 mb-4">
+        Nach dem Einrichten wird Ihr Postfach automatisch synchronisiert. Neue E-Mails werden im Hintergrund abgerufen.
+      </p>
+    </div>
+  );
+}

frontend/src/pages/help/HelpNavigation.tsx

@@ -0,0 +1,29 @@
+import React from 'react';
+
+export function HelpNavigationPage() {
+  return (
+    <div className="max-w-3xl mx-auto prose prose-secondary">
+      <h1 className="text-2xl font-bold text-secondary-900 mb-4">Navigation</h1>
+      <h2 className="text-lg font-semibold text-secondary-800 mt-6 mb-2">Startseite</h2>
+      <p className="text-secondary-600 mb-4">
+        Nach dem Login gelangen Sie zur Startseite. Hier können Sie einen Workspace auswählen oder zu den Einstellungen und der Hilfe navigieren.
+      </p>
+      <h2 className="text-lg font-semibold text-secondary-800 mt-6 mb-2">Workspace</h2>
+      <p className="text-secondary-600 mb-4">
+        Ein Workspace ist Ihr Arbeitsbereich mit Sidebar-Navigation. Hier finden Sie Kontakte, Kalender, E-Mail und alle anderen Module.
+      </p>
+      <h2 className="text-lg font-semibold text-secondary-800 mt-6 mb-2">Sidebar</h2>
+      <p className="text-secondary-600 mb-4">
+        Das Hamburger-Menü oben links blendet die Seitenleiste ein und aus. Die Sidebar zeigt alle verfügbaren Module.
+      </p>
+      <h2 className="text-lg font-semibold text-secondary-800 mt-6 mb-2">Zurück-Pfeil</h2>
+      <p className="text-secondary-600 mb-4">
+        Rechts neben dem Hamburger-Menü finden Sie einen Zurück-Pfeil, der Sie zurück zur Startseite bringt.
+      </p>
+      <h2 className="text-lg font-semibold text-secondary-800 mt-6 mb-2">Globale Suche</h2>
+      <p className="text-secondary-600 mb-4">
+        Verwenden Sie die Lupe oben oder Strg+K um das Kommando-Palette zu öffnen und schnell nach Kontakten, Mails oder Dateien zu suchen.
+      </p>
+    </div>
+  );
+}

frontend/src/pages/help/HelpPlaceholder.tsx

@@ -0,0 +1,17 @@
+import React from 'react';
+import { useParams } from 'react-router-dom';
+
+export function HelpPlaceholderPage() {
+  const params = useParams();
+  return (
+    <div className="max-w-3xl mx-auto prose prose-secondary">
+      <h1 className="text-2xl font-bold text-secondary-900 mb-4">Hilfe</h1>
+      <p className="text-secondary-600">
+        Diese Hilfeseite ({params['*'] || 'unbekannt'}) wird gerade erstellt. Schauen Sie später wieder vorbei.
+      </p>
+      <p className="text-secondary-400 text-sm mt-4">
+        Wählen Sie ein Thema aus dem Menü links um weitere Hilfe-Artikel zu lesen.
+      </p>
+    </div>
+  );
+}

frontend/src/pages/help/HelpWelcome.tsx

@@ -0,0 +1,33 @@
+import React from 'react';
+
+export function HelpWelcomePage() {
+  return (
+    <div className="max-w-3xl mx-auto prose prose-secondary">
+      <h1 className="text-2xl font-bold text-secondary-900 mb-4">Willkommen bei LeoCRM</h1>
+      <p className="text-secondary-600 mb-4">
+        LeoCRM ist ein selbst-gehostetes CRM-System für kleine Vertriebsteams. Es bietet Kontakte, Kalender, E-Mail, Dateiverwaltung und mehr — alles in einer Anwendung.
+      </p>
+      <h2 className="text-lg font-semibold text-secondary-800 mt-6 mb-2">Hauptfunktionen</h2>
+      <ul className="list-disc list-inside text-secondary-600 space-y-1">
+        <li><strong>Kontakte verwalten</strong> — Firmen, Personen, Kontaktdaten zentral speichern</li>
+        <li><strong>Kalender</strong> — Termine, Aufgaben und Erinnerungen</li>
+        <li><strong>E-Mail</strong> — IMAP-Postfächer synchronisieren, direkt antworten</li>
+        <li><strong>Dateien (DMS)</strong> — Dokumente hochladen, teilen und verwalten</li>
+        <li><strong>KI-Assistent</strong> — Intelligente Hilfe bei der Arbeit</li>
+        <li><strong>Workflows</strong> — Automatisierte Prozesse</li>
+      </ul>
+      <h2 className="text-lg font-semibold text-secondary-800 mt-6 mb-2">Erste Schritte</h2>
+      <ol className="list-decimal list-inside text-secondary-600 space-y-1">
+        <li>Melden Sie sich mit Ihren Zugangsdaten an</li>
+        <li>Wählen Sie einen Workspace auf der Startseite</li>
+        <li>Beginnen Sie mit dem Anlegen von Kontakten</li>
+        <li>Richten Sie Ihr E-Mail-Postfach unter Einstellungen → Email ein</li>
+      </ol>
+      <div className="mt-6 p-4 bg-primary-50 rounded-lg border border-primary-200">
+        <p className="text-sm text-primary-700">
+          💡 <strong>Tipp:</strong> Nutzen Sie die globale Suche (Lupe oben) oder das Kommando-Palette (Strg+K) um schnell zu finden was Sie brauchen.
+        </p>
+      </div>
+    </div>
+  );
+}