feat(frontend): Tailwind UI + Whitelabel + Multi-Tenant Components

Tech:
- Tailwind 3.4 + PostCSS + Autoprefixer
- Inter via rsms.me, Slate + Indigo (brand-* Farbpalette)
- Komponenten-Klassen .btn-{primary|secondary|danger|ghost}, .input, .label, .card, .badge-*

Visuelles Refresh:
- Logo entfernt - Wortmarke Pfandsystem mit Mono-Box
- Login: zentriertes Card-Layout mit Tenant-Slug-Toggle
- TopNav: cleanes Header mit Tabs + User-Menue, Demo-Badge
- Konsistente Card/Table/Badge-Patterns ueber alle Views
- Mobile-First (Tabellen scrollen, Filter wrap)

Komponenten neu/umgebaut:
- Auth/Login.jsx        - Tenant-Slug aus URL-Param ?tenant=...
- Auth/PasswordChange.jsx
- Dashboard/Dashboard.jsx
- Dashboard/TopNav.jsx  - inkl. Mobile-Hamburger
- Dashboard/Account.jsx (neu)
- Dashboard/AdminDashboard.jsx - Soll-Ist mit CSV-Export
- Dashboard/VorgangsListe.jsx
- Dashboard/BildModal.jsx
- Eingabe/VorgangForm.jsx - Kunden-Info-Popup mit Hinweis+Bildern+Maps
- KundenVerwaltung.jsx - inkl. Anlieferungshinweis, Lieferzeit, Bilder-Modal
- MitarbeiterVerwaltung.jsx - Aktiv-Toggle, Fahrer-Rolle
- Geraete.jsx (neu) - CRUD mit Status-Badges, Filter
- TourPlanung.jsx (neu) - Sortiert nach Lieferzeit, Navi-Button, Done-Persistenz
- SuperAdmin.jsx (neu) - Tenant-Liste + Demo-Anlage-Modal + Verlaengern

API Client:
- relative URL /api (Traefik-Proxy)
- Tenant-Slug im Login
- Endpoints fuer tenants, geraete, kunden-bilder

Sonstiges:
- nginx.conf: SSL raus (Traefik macht TLS), Host-Lock raus, Gzip, immutable Cache
- docker-compose: Frontend baut via Dockerfile (multi-stage)
- Manifest/Theme: #4338ca (Indigo)
- Aufgeraeumt: alte Supabase-Reste, Logout-Komponente (jetzt im Menu),
               nicht mehr noetige Deploy-Skripte

src/components/Auth/Login.jsx

@@ -2,96 +2,81 @@ import { useState } from 'react';
 import { api } from '../../api/client';
 
 export default function Login({ onLogin }) {
+  const params = new URLSearchParams(window.location.search);
+  const tenantFromUrl = params.get('tenant') || '';
+
   const [email, setEmail] = useState('');
   const [password, setPassword] = useState('');
-  const [message, setMessage] = useState('');
+  const [tenantSlug, setTenantSlug] = useState(tenantFromUrl);
+  const [showTenant, setShowTenant] = useState(!!tenantFromUrl);
+  const [error, setError] = useState('');
   const [loading, setLoading] = useState(false);
 
-  const handleLogin = async (e) => {
+  const submit = async (e) => {
     e.preventDefault();
-    setLoading(true);
-    setMessage('');
-    
+    setError(''); setLoading(true);
     try {
-      const data = await api.login(email, password);
-      setMessage('Login erfolgreich!');
-      if (onLogin) {
-        onLogin(data.user);
-      }
-    } catch (error) {
-      setMessage(error.message || 'Login fehlgeschlagen');
-    } finally {
-      setLoading(false);
-    }
+      const data = await api.login(email, password, tenantSlug || undefined);
+      onLogin?.(data.user);
+    } catch (err) {
+      setError(err.message || 'Login fehlgeschlagen');
+    } finally { setLoading(false); }
   };
 
   return (
-    <div style={{
-      maxWidth: 380,
-      margin: '64px auto',
-      background: '#fff',
-      borderRadius: 22,
-      boxShadow: '0 4px 22px #1976d222',
-      padding: 36,
-      fontFamily: 'DM Sans, Work Sans, Arial, sans-serif',
-      display: 'flex', flexDirection: 'column', alignItems: 'center',
-    }}>
-      <h1 style={{
-        fontFamily: 'DM Sans, Work Sans, Arial, sans-serif',
-        fontWeight: 700, fontSize: 32, margin: '0 0 18px 0', color: '#1976d2', letterSpacing: 0.5,
-        textAlign: 'center', textShadow: '0 2px 8px #0001'
-      }}>
-        Pfandsystem
-      </h1>
-      <h2 style={{ textAlign: 'center', marginBottom: 24, fontWeight: 600, color: '#222', fontSize: 22, letterSpacing: 0.1 }}>Login</h2>
-      <form onSubmit={handleLogin} style={{ display: 'flex', flexDirection: 'column', gap: 18, width: '100%' }}>
-        <input
-          type="email"
-          placeholder="E-Mail"
-          value={email}
-          onChange={e => setEmail(e.target.value)}
-          required
-          style={{
-            fontSize: 18,
-            padding: '14px 14px',
-            borderRadius: 12,
-            border: '1.5px solid #dbeafe',
-            background: '#f6f7fb',
-            outline: 'none',
-            marginBottom: 2
-          }}
-        />
-        <input
-          type="password"
-          placeholder="Passwort"
-          value={password}
-          onChange={e => setPassword(e.target.value)}
-          required
-          style={{
-            fontSize: 18,
-            padding: '14px 14px',
-            borderRadius: 12,
-            border: '1.5px solid #dbeafe',
-            background: '#f6f7fb',
-            outline: 'none',
-            marginBottom: 2
-          }}
-        />
-        <button type="submit" disabled={loading} style={{
-          marginTop: 8,
-          background: loading ? '#ccc' : '#1976d2',
-          color: '#fff',
-          fontWeight: 700,
-          fontSize: 18,
-          border: 'none',
-          borderRadius: 12,
-          padding: '13px 0',
-          boxShadow: '0 2px 10px #1976d222',
-          cursor: loading ? 'not-allowed' : 'pointer',
-          transition: 'background 0.18s',
-        }}>{loading ? 'Wird geladen...' : 'Login'}</button>
-      </form>
-      {message && <div style={{ color: '#1976d2', marginTop: 18, fontWeight: 500 }}>{message}</div>}
+    <div className="min-h-screen flex items-center justify-center px-4 py-12 bg-gradient-to-br from-slate-50 to-slate-100">
+      <div className="w-full max-w-sm">
+        <div className="text-center mb-6">
+          <div className="inline-flex items-center justify-center h-14 w-14 rounded-2xl bg-brand-600 text-white text-xl font-bold mb-3 shadow-soft">
+            P
+          </div>
+          <h1 className="text-2xl font-bold tracking-tight text-slate-900">Pfandsystem</h1>
+          <p className="text-sm text-slate-500 mt-1">Demo-Portal</p>
+        </div>
+
+        <form onSubmit={submit} className="card space-y-4">
+          <div>
+            <label className="label">E-Mail</label>
+            <input type="email" required value={email}
+                   onChange={e => setEmail(e.target.value)}
+                   className="input" placeholder="name@firma.de" />
+          </div>
+          <div>
+            <label className="label">Passwort</label>
+            <input type="password" required value={password}
+                   onChange={e => setPassword(e.target.value)}
+                   className="input" placeholder="••••••••" />
+          </div>
+
+          {showTenant ? (
+            <div>
+              <label className="label">Tenant-Kennung</label>
+              <input type="text" value={tenantSlug}
+                     onChange={e => setTenantSlug(e.target.value)}
+                     className="input" placeholder="z. B. firma-a1b2" />
+            </div>
+          ) : (
+            <button type="button" onClick={() => setShowTenant(true)}
+                    className="text-xs text-brand-600 hover:text-brand-700">
+              Mehrere Konten? Tenant-Kennung angeben
+            </button>
+          )}
+
+          {error && (
+            <div className="rounded-md bg-rose-50 px-3 py-2 text-sm text-rose-700 ring-1 ring-rose-200">
+              {error}
+            </div>
+          )}
+
+          <button type="submit" disabled={loading} className="btn-primary w-full">
+            {loading ? 'Anmelden…' : 'Anmelden'}
+          </button>
+        </form>
+
+        <p className="text-center text-xs text-slate-400 mt-6">
+          Kein Zugang? Demo-Account anfragen unter <a className="text-brand-600 hover:underline" href="mailto:demo@dockly.de">demo@dockly.de</a>
+        </p>
+      </div>
     </div>
   );
 }

src/components/Auth/Logout.jsx

@@ -1,27 +0,0 @@
-import { api } from '../../api/client';
-
-export default function Logout({ onLogout }) {
-  const handleLogout = async () => {
-    api.logout();
-    if (onLogout) {
-      onLogout();
-    }
-    // Seite neu laden um sicherzustellen dass der User ausgeloggt ist
-    window.location.reload();
-  };
-  return (
-    <button onClick={handleLogout} style={{ 
-      margin: 8, 
-      padding: '10px 20px', 
-      background: '#d32f2f', 
-      color: '#fff',
-      border: 'none', 
-      borderRadius: 6, 
-      cursor: 'pointer',
-      fontWeight: 600,
-      fontSize: 14
-    }}>
-      Logout
-    </button>
-  );
-}

src/components/Auth/PasswordChange.jsx

@@ -2,131 +2,42 @@ import { useState } from 'react';
 import { api } from '../../api/client';
 
 export default function PasswordChange() {
-  const [form, setForm] = useState({
-    currentPassword: '',
-    newPassword: '',
-    confirmPassword: ''
-  });
-  const [error, setError] = useState('');
-  const [success, setSuccess] = useState('');
-  const [loading, setLoading] = useState(false);
+  const [form, setForm] = useState({ currentPassword: '', newPassword: '', confirm: '' });
+  const [err, setErr] = useState('');
+  const [ok, setOk] = useState('');
+  const [busy, setBusy] = useState(false);
+  const update = e => { setForm(f => ({ ...f, [e.target.name]: e.target.value })); setErr(''); setOk(''); };
 
-  const handleChange = (e) => {
-    setForm(f => ({ ...f, [e.target.name]: e.target.value }));
-    setError('');
-    setSuccess('');
-  };
-
-  const handleSubmit = async (e) => {
+  const submit = async (e) => {
     e.preventDefault();
-    setError('');
-    setSuccess('');
-
-    // Validierung
-    if (!form.currentPassword || !form.newPassword || !form.confirmPassword) {
-      setError('Bitte alle Felder ausfüllen');
-      return;
-    }
-
-    if (form.newPassword.length < 6) {
-      setError('Neues Passwort muss mindestens 6 Zeichen lang sein');
-      return;
-    }
-
-    if (form.newPassword !== form.confirmPassword) {
-      setError('Passwörter stimmen nicht überein');
-      return;
-    }
-
-    setLoading(true);
+    if (form.newPassword.length < 6) return setErr('Neues Passwort min. 6 Zeichen');
+    if (form.newPassword !== form.confirm) return setErr('Passwoerter stimmen nicht ueberein');
+    setBusy(true);
     try {
       await api.changePassword(form.currentPassword, form.newPassword);
-      setSuccess('Passwort erfolgreich geändert!');
-      setForm({ currentPassword: '', newPassword: '', confirmPassword: '' });
-    } catch (err) {
-      setError(err.message || 'Fehler beim Ändern des Passworts');
-    } finally {
-      setLoading(false);
-    }
+      setOk('Passwort geaendert');
+      setForm({ currentPassword: '', newPassword: '', confirm: '' });
+    } catch (e) { setErr(e.message); } finally { setBusy(false); }
   };
 
   return (
-    <div style={{ marginTop: 24, padding: 20, background: '#f5f5f5', borderRadius: 8 }}>
-      <h3 style={{ marginBottom: 16, fontSize: 18, fontWeight: 600 }}>Passwort ändern</h3>
-      
-      {error && (
-        <div style={{ padding: 12, marginBottom: 12, background: '#ffebee', color: '#c62828', borderRadius: 6, fontSize: 14 }}>
-          {error}
-        </div>
-      )}
-      
-      {success && (
-        <div style={{ padding: 12, marginBottom: 12, background: '#e8f5e9', color: '#2e7d32', borderRadius: 6, fontSize: 14 }}>
-          {success}
-        </div>
-      )}
-
-      <form onSubmit={handleSubmit}>
-        <div style={{ marginBottom: 12 }}>
-          <label style={{ display: 'block', marginBottom: 4, fontSize: 14, fontWeight: 500 }}>
-            Aktuelles Passwort:
-          </label>
-          <input
-            type="password"
-            name="currentPassword"
-            value={form.currentPassword}
-            onChange={handleChange}
-            style={{ width: '100%', padding: 10, border: '1px solid #ddd', borderRadius: 6, fontSize: 14 }}
-            disabled={loading}
-          />
-        </div>
-
-        <div style={{ marginBottom: 12 }}>
-          <label style={{ display: 'block', marginBottom: 4, fontSize: 14, fontWeight: 500 }}>
-            Neues Passwort:
-          </label>
-          <input
-            type="password"
-            name="newPassword"
-            value={form.newPassword}
-            onChange={handleChange}
-            style={{ width: '100%', padding: 10, border: '1px solid #ddd', borderRadius: 6, fontSize: 14 }}
-            disabled={loading}
-          />
-        </div>
-
-        <div style={{ marginBottom: 16 }}>
-          <label style={{ display: 'block', marginBottom: 4, fontSize: 14, fontWeight: 500 }}>
-            Passwort bestätigen:
-          </label>
-          <input
-            type="password"
-            name="confirmPassword"
-            value={form.confirmPassword}
-            onChange={handleChange}
-            style={{ width: '100%', padding: 10, border: '1px solid #ddd', borderRadius: 6, fontSize: 14 }}
-            disabled={loading}
-          />
-        </div>
-
-        <button
-          type="submit"
-          disabled={loading}
-          style={{
-            width: '100%',
-            padding: 12,
-            background: loading ? '#ccc' : '#1976d2',
-            color: '#fff',
-            border: 'none',
-            borderRadius: 6,
-            fontSize: 15,
-            fontWeight: 600,
-            cursor: loading ? 'not-allowed' : 'pointer'
-          }}
-        >
-          {loading ? 'Wird geändert...' : 'Passwort ändern'}
-        </button>
-      </form>
-    </div>
+    <form onSubmit={submit} className="card space-y-4">
+      <h3 className="card-title">Passwort aendern</h3>
+      {err && <div className="rounded-md bg-rose-50 px-3 py-2 text-sm text-rose-700 ring-1 ring-rose-200">{err}</div>}
+      {ok &&  <div className="rounded-md bg-emerald-50 px-3 py-2 text-sm text-emerald-700 ring-1 ring-emerald-200">{ok}</div>}
+      <div>
+        <label className="label">Aktuelles Passwort</label>
+        <input type="password" name="currentPassword" value={form.currentPassword} onChange={update} className="input" />
+      </div>
+      <div>
+        <label className="label">Neues Passwort</label>
+        <input type="password" name="newPassword" value={form.newPassword} onChange={update} className="input" />
+      </div>
+      <div>
+        <label className="label">Bestaetigen</label>
+        <input type="password" name="confirm" value={form.confirm} onChange={update} className="input" />
+      </div>
+      <button disabled={busy} className="btn-primary w-full">{busy ? 'Speichere…' : 'Aendern'}</button>
+    </form>
   );
 }