feat(branding): add global dynamic theme system and fix 2fa mail

shop/app/admin/einstellungen/page.tsx

@@ -8,11 +8,16 @@ import { Button } from '@/components/ui/button';
 import { Input } from '@/components/ui/input';
 import { Label } from '@/components/ui/label';
 import {
-  Download, Upload, Database, AlertTriangle, Loader2, KeyRound,
-  Server, CheckCircle2, XCircle, Eye, EyeOff, Wifi, Sliders, ShieldAlert, FileArchive
+  Download, Upload, Database, Loader2, KeyRound,
+  Server, CheckCircle2, XCircle, Eye, EyeOff, Wifi, Sliders, ShieldAlert, FileArchive,
+  Building2, MapPin, Receipt, Palette, Save
 } from 'lucide-react';
 import { createClient } from '@/lib/supabase/client';
 import { saveLicServerConfig, testLicServerConnection } from '@/lib/actions/licserver-config';
+import { getBrandingSettings, saveBrandingSettings } from '@/lib/actions/branding';
+import type { BrandingSettings } from '@/lib/constants/branding';
+import { ColorThemePicker } from '@/components/admin/ColorThemePicker';
+import { useTheme } from '@/components/ThemeProvider';
 import { useRouter } from 'next/navigation';
 
 const containerVariants = {
@@ -56,6 +61,25 @@ export default function AdminSettings() {
   const [licStatus, setLicStatus] = useState<{ ok: boolean; message: string } | null>(null);
   const [licMsg, setLicMsg] = useState('');
   const [licMsgType, setLicMsgType] = useState<'success' | 'error' | ''>('');
+
+  // Branding State
+  const [branding, setBranding] = useState<BrandingSettings>({
+    companyName: '',
+    street: '',
+    zip: '',
+    city: '',
+    billingStreet: '',
+    billingZip: '',
+    billingCity: '',
+    sameBillingAddress: true,
+    colorScheme: 'modern_blue',
+    primaryColor: '#2563eb',
+    accentColor: '#38bdf8',
+  });
+  const [brandingSaving, setBrandingSaving] = useState(false);
+  const [brandingMsg, setBrandingMsg] = useState('');
+  const [brandingMsgType, setBrandingMsgType] = useState<'success' | 'error' | ''>('');
+
   const router = useRouter();
 
   useEffect(() => {
@@ -68,10 +92,10 @@ export default function AdminSettings() {
           return;
         }
 
-        // Parallele Abfrage von User-Rolle & LicServer Settings
-        const [userRes, licRes] = await Promise.all([
+        const [userRes, licRes, brandRes] = await Promise.all([
           supabase.from('users').select('role').eq('id', user.id).single(),
-          supabase.from('settings').select('licserver_base_url, licserver_api_key').eq('id', 'licserver').maybeSingle()
+          supabase.from('settings').select('licserver_base_url, licserver_api_key').eq('id', 'licserver').maybeSingle(),
+          getBrandingSettings()
         ]);
 
         if (userRes.error || !userRes.data || userRes.data.role === 'verwaltung') {
@@ -86,6 +110,10 @@ export default function AdminSettings() {
           setLicUrl(licRes.data.licserver_base_url || '');
           setLicKey(licRes.data.licserver_api_key || '');
         }
+
+        if (brandRes) {
+          setBranding(brandRes);
+        }
       } catch (err) {
         console.error("Fehler bei checkAccess in Einstellungen:", err);
       } finally {
@@ -161,6 +189,29 @@ export default function AdminSettings() {
     }
   };
 
+  const { refreshBranding } = useTheme();
+
+  const handleSaveBranding = async () => {
+    setBrandingSaving(true);
+    setBrandingMsg('');
+    try {
+      const res = await saveBrandingSettings(branding);
+      if (res.success) {
+        await refreshBranding();
+        setBrandingMsgType('success');
+        setBrandingMsg('Firmendaten & Farbschema erfolgreich gespeichert.');
+      } else {
+        setBrandingMsgType('error');
+        setBrandingMsg(res.error || 'Fehler beim Speichern.');
+      }
+    } catch (err: any) {
+      setBrandingMsgType('error');
+      setBrandingMsg(err.message || 'Fehler beim Speichern.');
+    } finally {
+      setBrandingSaving(false);
+    }
+  };
+
   if (loading) {
     return <div className="p-8 text-white flex justify-center items-center"><Loader2 className="w-8 h-8 animate-spin text-primary" /></div>;
   }
@@ -176,7 +227,7 @@ export default function AdminSettings() {
         <div>
           <h1 className="text-3xl font-extrabold tracking-tight">Admin Einstellungen</h1>
           <p className="text-slate-400 text-xs mt-1">
-            Zentrales Bento-Dashboard für System-, Backup- und Lizenz-Konfigurationen.
+            Zentrales Dashboard für Firmendaten, Branding, Backup &amp; Lizenz-Konfigurationen.
           </p>
         </div>
       </motion.div>
@@ -203,7 +254,7 @@ export default function AdminSettings() {
         animate="visible"
         className="grid grid-cols-1 md:grid-cols-3 lg:grid-cols-4 gap-5"
       >
-        {/* Bento Item 1: System Modus & Banner (1 Spalte) */}
+        {/* Bento Item 1: System Modus & Banner */}
         <motion.div
           variants={cardVariants}
           whileHover={{ y: -3 }}
@@ -226,7 +277,7 @@ export default function AdminSettings() {
           </div>
         </motion.div>
 
-        {/* Bento Item 2: Daten Export (1 Spalte) */}
+        {/* Bento Item 2: Daten Export */}
         <motion.div
           variants={cardVariants}
           whileHover={{ y: -3 }}
@@ -239,7 +290,7 @@ export default function AdminSettings() {
             <div>
               <h3 className="font-bold text-base text-white">DB Backup</h3>
               <p className="text-xs text-slate-400 mt-1 leading-relaxed">
-                Lädt alle Produkte, Firmen, Lizenzen & Einstellungen als ZIP-Archiv herunter.
+                Lädt alle Produkte, Firmen, Lizenzen &amp; Einstellungen als ZIP-Archiv herunter.
               </p>
             </div>
           </div>
@@ -256,7 +307,7 @@ export default function AdminSettings() {
           </Button>
         </motion.div>
 
-        {/* Bento Item 3: Daten Import (2 Spalten / Span 2 auf Desktop) */}
+        {/* Bento Item 3: Daten Import */}
         <motion.div
           variants={cardVariants}
           whileHover={{ y: -3 }}
@@ -309,7 +360,214 @@ export default function AdminSettings() {
           </div>
         </motion.div>
 
-        {/* Bento Item 4: LicServer Konfiguration (Breites Bento: 4 Spalten auf Large) */}
+        {/* Bento Item 4: Firmendaten & Anschriften (4 Spalten) */}
+        <motion.div
+          variants={cardVariants}
+          whileHover={{ y: -3 }}
+          className="md:col-span-3 lg:col-span-4 p-6 rounded-2xl bg-slate-900/60 border border-slate-800 backdrop-blur-md space-y-5 hover:border-blue-500/30 transition-all duration-300 shadow-md"
+        >
+          <div className="flex flex-col sm:flex-row sm:items-center justify-between gap-3 border-b border-slate-800/80 pb-4">
+            <div className="flex items-center gap-3">
+              <div className="w-10 h-10 rounded-xl bg-blue-500/10 border border-blue-500/20 text-blue-400 flex items-center justify-center">
+                <Building2 className="w-5 h-5" />
+              </div>
+              <div>
+                <h3 className="font-bold text-lg text-white">Firmendaten &amp; Rechnungsadresse</h3>
+                <p className="text-xs text-slate-400">Verwaltung der eigenen Unternehmensanschrift für Rechnungen und Dokumente</p>
+              </div>
+            </div>
+
+            <Button
+              onClick={handleSaveBranding}
+              disabled={brandingSaving}
+              className="bg-blue-600 hover:bg-blue-500 text-white rounded-xl px-5 h-10 text-xs font-bold shrink-0"
+            >
+              {brandingSaving ? <Loader2 className="w-4 h-4 mr-2 animate-spin" /> : <Save className="w-4 h-4 mr-2" />}
+              Änderungen Speichern
+            </Button>
+          </div>
+
+          {brandingMsg && (
+            <div className={`p-3 rounded-xl text-xs font-medium border ${
+              brandingMsgType === 'success' ? 'bg-emerald-500/10 border-emerald-500/20 text-emerald-400' : 'bg-destructive/10 border-destructive/20 text-destructive'
+            }`}>
+              {brandingMsg}
+            </div>
+          )}
+
+          <div className="space-y-4">
+            <div className="grid md:grid-cols-2 gap-4">
+              <div className="space-y-1.5">
+                <Label className="text-xs font-bold text-slate-300">Firmenname *</Label>
+                <Input
+                  value={branding.companyName}
+                  onChange={(e) => setBranding({ ...branding, companyName: e.target.value })}
+                  placeholder="z. B. Meine Firma GmbH"
+                  className="bg-slate-950/80 border-slate-800 text-white text-sm"
+                />
+              </div>
+
+              <div className="space-y-1.5">
+                <Label className="text-xs font-bold text-slate-300">Logo-URL (Optional)</Label>
+                <Input
+                  value={branding.logoUrl || ''}
+                  onChange={(e) => setBranding({ ...branding, logoUrl: e.target.value })}
+                  placeholder="https://domain.de/logo.png oder /assets/logo.png"
+                  className="bg-slate-950/80 border-slate-800 text-white text-sm"
+                />
+              </div>
+            </div>
+
+            <div className="space-y-1.5">
+              <Label className="text-xs font-bold text-slate-300">Entwickler / Subline Beschriftung (Footer & Header)</Label>
+              <Input
+                value={branding.developerFooter || ''}
+                onChange={(e) => setBranding({ ...branding, developerFooter: e.target.value })}
+                placeholder="B2B Shop made by hephex"
+                className="bg-slate-950/80 border-slate-800 text-white text-sm"
+              />
+            </div>
+
+            {/* Anschrift */}
+            <div className="grid md:grid-cols-2 gap-4 pt-2 border-t border-slate-800">
+              <div className="space-y-3">
+                <span className="text-xs font-bold text-slate-300 flex items-center gap-1.5">
+                  <MapPin className="w-3.5 h-3.5 text-blue-400" /> Hauptanschrift
+                </span>
+                <div className="space-y-1.5">
+                  <Label className="text-xs text-slate-400">Straße &amp; Nr.</Label>
+                  <Input
+                    value={branding.street}
+                    onChange={(e) => setBranding({ ...branding, street: e.target.value })}
+                    placeholder="Musterstraße 12"
+                    className="bg-slate-950/80 border-slate-800 text-white text-xs"
+                  />
+                </div>
+                <div className="grid grid-cols-3 gap-2">
+                  <div>
+                    <Label className="text-xs text-slate-400">PLZ</Label>
+                    <Input
+                      value={branding.zip}
+                      onChange={(e) => setBranding({ ...branding, zip: e.target.value })}
+                      placeholder="12345"
+                      className="bg-slate-950/80 border-slate-800 text-white text-xs"
+                    />
+                  </div>
+                  <div className="col-span-2">
+                    <Label className="text-xs text-slate-400">Ort</Label>
+                    <Input
+                      value={branding.city}
+                      onChange={(e) => setBranding({ ...branding, city: e.target.value })}
+                      placeholder="Musterstadt"
+                      className="bg-slate-950/80 border-slate-800 text-white text-xs"
+                    />
+                  </div>
+                </div>
+              </div>
+
+              {/* Rechnungsadresse */}
+              <div className="space-y-3">
+                <div className="flex items-center justify-between">
+                  <span className="text-xs font-bold text-slate-300 flex items-center gap-1.5">
+                    <Receipt className="w-3.5 h-3.5 text-blue-400" /> Rechnungsadresse
+                  </span>
+                  <label className="flex items-center gap-1.5 text-xs text-slate-400 cursor-pointer">
+                    <input
+                      type="checkbox"
+                      checked={branding.sameBillingAddress}
+                      onChange={(e) => setBranding({ ...branding, sameBillingAddress: e.target.checked })}
+                      className="w-3.5 h-3.5 rounded border-slate-700 bg-slate-950 text-blue-500"
+                    />
+                    Gleiche wie Hauptanschrift
+                  </label>
+                </div>
+
+                {!branding.sameBillingAddress ? (
+                  <div className="space-y-3 p-3 rounded-xl bg-slate-950/40 border border-slate-800">
+                    <div className="space-y-1.5">
+                      <Label className="text-xs text-slate-400">Rechnungsstraße &amp; Nr.</Label>
+                      <Input
+                        value={branding.billingStreet}
+                        onChange={(e) => setBranding({ ...branding, billingStreet: e.target.value })}
+                        placeholder="Rechnungsstraße 45"
+                        className="bg-slate-950/80 border-slate-800 text-white text-xs"
+                      />
+                    </div>
+                    <div className="grid grid-cols-3 gap-2">
+                      <div>
+                        <Label className="text-xs text-slate-400">PLZ</Label>
+                        <Input
+                          value={branding.billingZip}
+                          onChange={(e) => setBranding({ ...branding, billingZip: e.target.value })}
+                          placeholder="54321"
+                          className="bg-slate-950/80 border-slate-800 text-white text-xs"
+                        />
+                      </div>
+                      <div className="col-span-2">
+                        <Label className="text-xs text-slate-400">Ort</Label>
+                        <Input
+                          value={branding.billingCity}
+                          onChange={(e) => setBranding({ ...branding, billingCity: e.target.value })}
+                          placeholder="Rechnungsstadt"
+                          className="bg-slate-950/80 border-slate-800 text-white text-xs"
+                        />
+                      </div>
+                    </div>
+                  </div>
+                ) : (
+                  <div className="p-3 rounded-xl bg-slate-950/40 border border-slate-800/60 text-xs text-slate-500 italic">
+                    Verwendet automatisch die Hauptanschrift oben.
+                  </div>
+                )}
+              </div>
+            </div>
+          </div>
+        </motion.div>
+
+        {/* Bento Item 5: Farbschema & Design-System (4 Spalten) */}
+        <motion.div
+          variants={cardVariants}
+          whileHover={{ y: -3 }}
+          className="md:col-span-3 lg:col-span-4 p-6 rounded-2xl bg-slate-900/60 border border-slate-800 backdrop-blur-md space-y-5 hover:border-violet-500/30 transition-all duration-300 shadow-md"
+        >
+          <div className="flex flex-col sm:flex-row sm:items-center justify-between gap-3 border-b border-slate-800/80 pb-4">
+            <div className="flex items-center gap-3">
+              <div className="w-10 h-10 rounded-xl bg-violet-500/10 border border-violet-500/20 text-violet-400 flex items-center justify-center">
+                <Palette className="w-5 h-5" />
+              </div>
+              <div>
+                <h3 className="font-bold text-lg text-white">Farbschema &amp; Webshop Styling</h3>
+                <p className="text-xs text-slate-400">Wählen Sie das primäre Farbschema für Buttons, Akzente und Highlights</p>
+              </div>
+            </div>
+
+            <Button
+              onClick={handleSaveBranding}
+              disabled={brandingSaving}
+              className="bg-violet-600 hover:bg-violet-500 text-white rounded-xl px-5 h-10 text-xs font-bold shrink-0"
+            >
+              {brandingSaving ? <Loader2 className="w-4 h-4 mr-2 animate-spin" /> : <Save className="w-4 h-4 mr-2" />}
+              Farben Speichern
+            </Button>
+          </div>
+
+          <ColorThemePicker
+            colorScheme={branding.colorScheme}
+            primaryColor={branding.primaryColor}
+            accentColor={branding.accentColor}
+            companyName={branding.companyName}
+            onChange={(scheme, primary, accent) =>
+              setBranding({
+                ...branding,
+                colorScheme: scheme,
+                primaryColor: primary,
+                accentColor: accent,
+              })
+            }
+          />
+        </motion.div>
+
+        {/* Bento Item 6: LicServer Konfiguration */}
         <motion.div
           variants={cardVariants}
           whileHover={{ y: -3 }}
@@ -326,7 +584,6 @@ export default function AdminSettings() {
               </div>
             </div>
 
-            {/* LicServer Status Pill */}
             {licStatus && (
               <div className={`flex items-center gap-2 px-3 py-1.5 rounded-full text-xs font-semibold border ${
                 licStatus.ok
@@ -348,7 +605,6 @@ export default function AdminSettings() {
           )}
 
           <div className="grid md:grid-cols-2 gap-4">
-            {/* Base URL */}
             <div className="space-y-1.5">
               <Label htmlFor="lic-url" className="text-xs font-bold text-slate-300 flex items-center gap-1.5">
                 <Server className="w-3.5 h-3.5 text-slate-400" /> Server URL
@@ -362,7 +618,6 @@ export default function AdminSettings() {
               />
             </div>
 
-            {/* API Key */}
             <div className="space-y-1.5">
               <Label htmlFor="lic-key" className="text-xs font-bold text-slate-300 flex items-center gap-1.5">
                 <KeyRound className="w-3.5 h-3.5 text-slate-400" /> API-Key
@@ -388,7 +643,6 @@ export default function AdminSettings() {
             </div>
           </div>
 
-          {/* Action Buttons */}
           <div className="flex items-center justify-end gap-3 pt-2">
             <Button
               id="lic-save-btn"

shop/app/globals.css

@@ -2,7 +2,6 @@
 @tailwind components;
 @tailwind utilities;
 
-
 html {
   color-scheme: dark;
 }
@@ -19,6 +18,17 @@ html {
   --oklch-text-muted: 0.70 0.01 148;
   --oklch-border: 0.31 0.012 148;
 
+  /* Dynamische Branding Variablen */
+  --primary-custom: #2563eb;
+  --accent-custom: #38bdf8;
+  --success-custom: #10b981;
+  --warning-custom: #f59e0b;
+  --destructive-custom: #ef4444;
+  --bg-glow-1: #3b82f6;
+  --bg-glow-2: #1d4ed8;
+  --gradient-from: #2563eb;
+  --gradient-to: #1e40af;
+
   /* Classic HSL Mappings */
   --background: 240 10% 3.9%;
   --foreground: 0 0% 98%;
@@ -42,6 +52,75 @@ html {
   --radius: 0.75rem;
 }
 
+/* Dynamische Brand-Farbanpassungen */
+.bg-blue-600, .bg-blue-500, .bg-violet-600, .bg-purple-600 {
+  background-color: var(--primary-custom) !important;
+}
+
+.hover\:bg-blue-500:hover, .hover\:bg-violet-500:hover {
+  background-color: var(--primary-custom) !important;
+  filter: brightness(1.1);
+}
+
+.text-blue-500, .text-blue-400, .text-blue-600, .text-violet-400, .text-sky-400 {
+  color: var(--primary-custom) !important;
+}
+
+.border-blue-500, .border-blue-600, .border-violet-500 {
+  border-color: var(--primary-custom) !important;
+}
+
+.from-blue-600, .from-blue-500, .from-violet-600 {
+  --tw-gradient-from: var(--gradient-from, var(--primary-custom)) !important;
+  --tw-gradient-to: rgb(255 255 255 / 0) !important;
+  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to) !important;
+}
+
+.to-indigo-600, .to-indigo-500, .to-sky-500, .to-sky-400, .to-violet-500 {
+  --tw-gradient-to: var(--gradient-to, var(--accent-custom)) !important;
+}
+
+/* Dynamische Signalfarben (Success, Warning, Destructive) */
+.bg-emerald-500, .bg-green-500, .bg-emerald-600, .bg-green-600 {
+  background-color: var(--success-custom) !important;
+}
+
+.text-emerald-400, .text-green-400, .text-emerald-500, .text-green-500, .text-green-600 {
+  color: var(--success-custom) !important;
+}
+
+.border-emerald-500, .border-green-500 {
+  border-color: var(--success-custom) !important;
+}
+
+.bg-amber-500, .bg-amber-600 {
+  background-color: var(--warning-custom) !important;
+}
+
+.text-amber-400, .text-amber-500, .text-amber-600 {
+  color: var(--warning-custom) !important;
+}
+
+.border-amber-500, .border-amber-600 {
+  border-color: var(--warning-custom) !important;
+}
+
+.bg-red-500, .bg-red-600, .bg-rose-500, .bg-rose-600 {
+  background-color: var(--destructive-custom) !important;
+}
+
+.text-red-500, .text-red-400, .text-rose-400, .text-rose-500 {
+  color: var(--destructive-custom) !important;
+}
+
+.border-red-500, .border-rose-500 {
+  border-color: var(--destructive-custom) !important;
+}
+
+.blur-\[120px\] {
+  background-color: var(--bg-glow-1) !important;
+}
+
 input, select, textarea, option {
   background-color: oklch(var(--oklch-surface)) !important;
   color: oklch(var(--oklch-text-main)) !important;
@@ -49,9 +128,9 @@ input, select, textarea, option {
 }
 
 input:focus, select:focus, textarea:focus {
-  border-color: oklch(var(--oklch-primary)) !important;
+  border-color: var(--primary-custom) !important;
   outline: none !important;
-  box-shadow: 0 0 0 2px oklch(var(--oklch-primary) / 0.2) !important;
+  box-shadow: 0 0 0 2px var(--primary-custom) !important;
 }
 
 option {

shop/app/layout.tsx

@@ -1,6 +1,6 @@
 import type { Metadata } from "next";
 import { Geist } from "next/font/google";
-import { ThemeProvider } from "next-themes";
+import { ThemeProvider } from "@/components/ThemeProvider";
 import { InactivityTracker } from "@/components/inactivity-tracker";
 import { HeaderWrapper } from "@/components/HeaderWrapper";
 import { Navbar } from "@/components/Navbar";