feat(admin): restructure settings into subpages and hub overview

shop/app/admin/einstellungen/branding/page.tsx

@@ -0,0 +1,124 @@
+'use client';
+
+import { useState, useEffect } from 'react';
+import { Button } from '@/components/ui/button';
+import { Loader2, Palette, Save } from 'lucide-react';
+import { createClient } from '@/lib/supabase/client';
+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';
+
+export default function BrandingPage() {
+  const [loading, setLoading] = useState(true);
+  const [branding, setBranding] = useState<BrandingSettings>({
+    companyName: '',
+    street: '',
+    zip: '',
+    city: '',
+    billingStreet: '',
+    billingZip: '',
+    billingCity: '',
+    sameBillingAddress: true,
+    colorScheme: 'modern_blue',
+    primaryColor: '#2563eb',
+    accentColor: '#38bdf8',
+  });
+  const [saving, setSaving] = useState(false);
+  const [msg, setMsg] = useState('');
+  const [msgType, setMsgType] = useState<'success' | 'error' | ''>('');
+  const { refreshBranding } = useTheme();
+  const router = useRouter();
+
+  useEffect(() => {
+    async function loadData() {
+      try {
+        const supabase = createClient();
+        const { data: { user } } = await supabase.auth.getUser();
+        if (!user) {
+          router.push('/auth/login');
+          return;
+        }
+        const brandRes = await getBrandingSettings();
+        if (brandRes) setBranding(brandRes);
+      } catch (e) {
+        console.error(e);
+      } finally {
+        setLoading(false);
+      }
+    }
+    loadData();
+  }, [router]);
+
+  const handleSave = async () => {
+    setSaving(true);
+    setMsg('');
+    try {
+      const res = await saveBrandingSettings(branding);
+      if (res.success) {
+        await refreshBranding();
+        setMsgType('success');
+        setMsg('Farbschema erfolgreich gespeichert.');
+      } else {
+        setMsgType('error');
+        setMsg(res.error || 'Fehler beim Speichern.');
+      }
+    } catch (err: any) {
+      setMsgType('error');
+      setMsg(err.message || 'Fehler beim Speichern.');
+    } finally {
+      setSaving(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>;
+  }
+
+  return (
+    <div className="p-6 max-w-5xl mx-auto space-y-6">
+      <div className="flex items-center justify-between">
+        <div>
+          <h1 className="text-3xl font-extrabold tracking-tight text-white flex items-center gap-3">
+            <Palette className="w-8 h-8 text-violet-400" />
+            Branding & Design
+          </h1>
+          <p className="text-slate-400 text-xs mt-1">
+            Wählen Sie das primäre Farbschema und Akzente für den gesamten Webshop.
+          </p>
+        </div>
+
+        <Button onClick={handleSave} disabled={saving} className="bg-violet-600 hover:bg-violet-500 text-white rounded-xl px-5 h-10 text-xs font-bold">
+          {saving ? <Loader2 className="w-4 h-4 mr-2 animate-spin" /> : <Save className="w-4 h-4 mr-2" />}
+          Farben Speichern
+        </Button>
+      </div>
+
+      {msg && (
+        <div className={`p-3.5 rounded-xl text-xs font-medium border ${
+          msgType === 'success' ? 'bg-emerald-500/10 border-emerald-500/20 text-emerald-400' : 'bg-destructive/10 border-destructive/20 text-destructive'
+        }`}>
+          {msg}
+        </div>
+      )}
+
+      <div className="p-6 rounded-2xl bg-slate-900/60 border border-slate-800 space-y-5">
+        <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,
+            })
+          }
+        />
+      </div>
+    </div>
+  );
+}

shop/app/admin/einstellungen/firmendaten/page.tsx

@@ -0,0 +1,232 @@
+'use client';
+
+import { useState, useEffect } from 'react';
+import { motion } from 'framer-motion';
+import { Button } from '@/components/ui/button';
+import { Input } from '@/components/ui/input';
+import { Label } from '@/components/ui/label';
+import { Loader2, Building2, MapPin, Receipt, Save } from 'lucide-react';
+import { createClient } from '@/lib/supabase/client';
+import { getBrandingSettings, saveBrandingSettings } from '@/lib/actions/branding';
+import type { BrandingSettings } from '@/lib/constants/branding';
+import { useRouter } from 'next/navigation';
+
+export default function FirmendatenPage() {
+  const [loading, setLoading] = useState(true);
+  const [branding, setBranding] = useState<BrandingSettings>({
+    companyName: '',
+    street: '',
+    zip: '',
+    city: '',
+    billingStreet: '',
+    billingZip: '',
+    billingCity: '',
+    sameBillingAddress: true,
+    colorScheme: 'modern_blue',
+    primaryColor: '#2563eb',
+    accentColor: '#38bdf8',
+  });
+  const [saving, setSaving] = useState(false);
+  const [msg, setMsg] = useState('');
+  const [msgType, setMsgType] = useState<'success' | 'error' | ''>('');
+  const router = useRouter();
+
+  useEffect(() => {
+    async function loadData() {
+      try {
+        const supabase = createClient();
+        const { data: { user } } = await supabase.auth.getUser();
+        if (!user) {
+          router.push('/auth/login');
+          return;
+        }
+        const brandRes = await getBrandingSettings();
+        if (brandRes) setBranding(brandRes);
+      } catch (e) {
+        console.error(e);
+      } finally {
+        setLoading(false);
+      }
+    }
+    loadData();
+  }, [router]);
+
+  const handleSave = async () => {
+    setSaving(true);
+    setMsg('');
+    try {
+      const res = await saveBrandingSettings(branding);
+      if (res.success) {
+        setMsgType('success');
+        setMsg('Firmendaten erfolgreich gespeichert.');
+      } else {
+        setMsgType('error');
+        setMsg(res.error || 'Fehler beim Speichern.');
+      }
+    } catch (err: any) {
+      setMsgType('error');
+      setMsg(err.message || 'Fehler beim Speichern.');
+    } finally {
+      setSaving(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>;
+  }
+
+  return (
+    <div className="p-6 max-w-5xl mx-auto space-y-6">
+      <div>
+        <h1 className="text-3xl font-extrabold tracking-tight text-white flex items-center gap-3">
+          <Building2 className="w-8 h-8 text-blue-400" />
+          Firmendaten & Anschrift
+        </h1>
+        <p className="text-slate-400 text-xs mt-1">
+          Verwaltung der eigenen Unternehmensanschrift für Rechnungen, Dokumente und Footereinträge.
+        </p>
+      </div>
+
+      {msg && (
+        <div className={`p-3.5 rounded-xl text-xs font-medium border ${
+          msgType === 'success' ? 'bg-emerald-500/10 border-emerald-500/20 text-emerald-400' : 'bg-destructive/10 border-destructive/20 text-destructive'
+        }`}>
+          {msg}
+        </div>
+      )}
+
+      <div className="p-6 rounded-2xl bg-slate-900/60 border border-slate-800 space-y-5">
+        <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>
+
+        <div className="grid md:grid-cols-2 gap-4 pt-3 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>
+
+          <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 className="flex justify-end pt-4 border-t border-slate-800">
+          <Button onClick={handleSave} disabled={saving} className="bg-blue-600 hover:bg-blue-500 text-white rounded-xl px-6 h-10 text-xs font-bold">
+            {saving ? <Loader2 className="w-4 h-4 mr-2 animate-spin" /> : <Save className="w-4 h-4 mr-2" />}
+            Speichern
+          </Button>
+        </div>
+      </div>
+    </div>
+  );
+}

shop/app/admin/einstellungen/licserver/page.tsx

@@ -0,0 +1,162 @@
+'use client';
+
+import { useState, useEffect } from 'react';
+import { Button } from '@/components/ui/button';
+import { Input } from '@/components/ui/input';
+import { Label } from '@/components/ui/label';
+import { Loader2, KeyRound, Server, CheckCircle2, XCircle, Eye, EyeOff, Wifi } from 'lucide-react';
+import { saveLicServerConfig, testLicServerConnection } from '@/lib/actions/licserver-config';
+import { createClient } from '@/lib/supabase/client';
+import { useRouter } from 'next/navigation';
+
+export default function LicServerPage() {
+  const [loading, setLoading] = useState(true);
+  const [licUrl, setLicUrl] = useState('');
+  const [licKey, setLicKey] = useState('');
+  const [showKey, setShowKey] = useState(false);
+  const [licSaving, setLicSaving] = useState(false);
+  const [licTesting, setLicTesting] = useState(false);
+  const [licStatus, setLicStatus] = useState<{ ok: boolean; message: string } | null>(null);
+  const [licMsg, setLicMsg] = useState('');
+  const [licMsgType, setLicMsgType] = useState<'success' | 'error' | ''>('');
+  const router = useRouter();
+
+  useEffect(() => {
+    async function loadData() {
+      try {
+        const supabase = createClient();
+        const { data: { user } } = await supabase.auth.getUser();
+        if (!user) {
+          router.push('/auth/login');
+          return;
+        }
+        const { data } = await supabase.from('settings').select('licserver_base_url, licserver_api_key').eq('id', 'licserver').maybeSingle();
+        if (data) {
+          setLicUrl(data.licserver_base_url || '');
+          setLicKey(data.licserver_api_key || '');
+        }
+      } catch (e) {
+        console.error(e);
+      } finally {
+        setLoading(false);
+      }
+    }
+    loadData();
+  }, [router]);
+
+  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>;
+  }
+
+  return (
+    <div className="p-6 max-w-5xl mx-auto space-y-6">
+      <div className="flex items-center justify-between">
+        <div>
+          <h1 className="text-3xl font-extrabold tracking-tight text-white flex items-center gap-3">
+            <KeyRound className="w-8 h-8 text-violet-400" />
+            CASPOS LicServer
+          </h1>
+          <p className="text-slate-400 text-xs mt-1">
+            REST API-Anbindung für die automatisierte Lizenzierung und Schlüsselgenerierung.
+          </p>
+        </div>
+
+        {licStatus && (
+          <div className={`flex items-center gap-2 px-3 py-1.5 rounded-full text-xs font-semibold border ${
+            licStatus.ok
+              ? 'bg-emerald-500/10 border-emerald-500/20 text-emerald-400'
+              : 'bg-amber-500/10 border-amber-500/20 text-amber-400'
+          }`}>
+            {licStatus.ok ? <CheckCircle2 className="w-3.5 h-3.5" /> : <XCircle className="w-3.5 h-3.5" />}
+            {licStatus.message}
+          </div>
+        )}
+      </div>
+
+      {licMsg && (
+        <div className={`p-3.5 rounded-xl text-xs font-medium border ${
+          licMsgType === 'success' ? 'bg-emerald-500/10 border-emerald-500/20 text-emerald-400' : 'bg-destructive/10 border-destructive/20 text-destructive'
+        }`}>
+          {licMsg}
+        </div>
+      )}
+
+      <div className="p-6 rounded-2xl bg-slate-900/60 border border-slate-800 space-y-5">
+        <div className="grid md:grid-cols-2 gap-4">
+          <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
+            </Label>
+            <Input
+              id="lic-url"
+              value={licUrl}
+              onChange={e => setLicUrl(e.target.value)}
+              placeholder="http://192.168.178.174:9980"
+              className="text-sm font-mono bg-slate-950/80 border-slate-800 text-white rounded-xl"
+            />
+          </div>
+
+          <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
+            </Label>
+            <div className="relative">
+              <Input
+                id="lic-key"
+                type={showKey ? 'text' : 'password'}
+                value={licKey}
+                onChange={e => setLicKey(e.target.value)}
+                placeholder="Ihr X-Api-Key"
+                className="text-sm font-mono pr-10 bg-slate-950/80 border-slate-800 text-white rounded-xl"
+              />
+              <button
+                type="button"
+                onClick={() => setShowKey(v => !v)}
+                className="absolute right-3 top-1/2 -translate-y-1/2 text-slate-400 hover:text-white transition-colors"
+                aria-label={showKey ? 'Key verbergen' : 'Key anzeigen'}
+              >
+                {showKey ? <EyeOff className="w-4 h-4" /> : <Eye className="w-4 h-4" />}
+              </button>
+            </div>
+          </div>
+        </div>
+
+        <div className="flex items-center justify-end gap-3 pt-4 border-t border-slate-800">
+          <Button
+            disabled={licSaving || licTesting}
+            onClick={async () => {
+              setLicSaving(true);
+              setLicMsg('');
+              setLicStatus(null);
+              const res = await saveLicServerConfig(licUrl, licKey);
+              setLicMsgType(res.success ? 'success' : 'error');
+              setLicMsg(res.success ? 'Konfiguration gespeichert.' : (res.error || 'Fehler beim Speichern'));
+              setLicSaving(false);
+            }}
+            className="bg-violet-600 hover:bg-violet-500 text-white rounded-xl px-5 h-10 text-xs font-bold"
+          >
+            {licSaving ? <Loader2 className="w-4 h-4 mr-2 animate-spin" /> : <KeyRound className="w-4 h-4 mr-2" />}
+            Speichern
+          </Button>
+
+          <Button
+            variant="outline"
+            disabled={licSaving || licTesting}
+            onClick={async () => {
+              setLicTesting(true);
+              setLicStatus(null);
+              await saveLicServerConfig(licUrl, licKey);
+              const result = await testLicServerConnection();
+              setLicStatus(result);
+              setLicTesting(false);
+            }}
+            className="border-slate-700 text-slate-300 hover:text-white rounded-xl px-5 h-10 text-xs font-bold"
+          >
+            {licTesting ? <Loader2 className="w-4 h-4 mr-2 animate-spin" /> : <Wifi className="w-4 h-4 mr-2" />}
+            Verbindung testen
+          </Button>
+        </div>
+      </div>
+    </div>
+  );
+}

shop/app/admin/einstellungen/page.tsx

@@ -1,85 +1,57 @@
-/* Admin Settings with Bento Grid Layout & Motion Animations */
 'use client';
 
-import { useState, useEffect } from 'react';
+import { useEffect, useState } from 'react';
+import Link from 'next/link';
 import { motion } from 'framer-motion';
-import { Switch } from '@/components/ui/switch';
+import { Building2, Palette, KeyRound, Mail, Sliders, ArrowRight, Loader2 } from 'lucide-react';
-import { Button } from '@/components/ui/button';
-import { Input } from '@/components/ui/input';
-import { Label } from '@/components/ui/label';
-import {
-  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 = {
+const menuItems = [
-  hidden: { opacity: 0 },
+  {
-  visible: {
+    title: 'Firmendaten & Anschrift',
-    opacity: 1,
+    description: 'Verwaltung der eigenen Firmenanschrift, Rechnungsadresse und Sublines für Dokumente.',
-    transition: {
+    href: '/admin/einstellungen/firmendaten',
-      staggerChildren: 0.1
+    icon: Building2,
-    }
+    color: 'text-blue-400',
-  }
+    bgColor: 'bg-blue-500/10 border-blue-500/20',
-};
+  },
+  {
+    title: 'Branding & Farbschema',
+    description: 'Anpassung von Farbschemata (Primary / Accent), Buttons und Themes für den Webshop.',
+    href: '/admin/einstellungen/branding',
+    icon: Palette,
+    color: 'text-violet-400',
+    bgColor: 'bg-violet-500/10 border-violet-500/20',
+  },
+  {
+    title: 'CASPOS LicServer',
+    description: 'REST API Konfiguration für den Lizenzserver & automatisierte Schlüsselgenerierung.',
+    href: '/admin/einstellungen/licserver',
+    icon: KeyRound,
+    color: 'text-amber-400',
+    bgColor: 'bg-amber-500/10 border-amber-500/20',
+  },
+  {
+    title: 'SMTP E-Mail Server',
+    description: 'Serverdaten & Authentifizierung für Bestellbestätigungen und Benachrichtigungen.',
+    href: '/admin/settings',
+    icon: Mail,
+    color: 'text-sky-400',
+    bgColor: 'bg-sky-500/10 border-sky-500/20',
+  },
+  {
+    title: 'System & Backup',
+    description: 'Demo-Banner Steuerung sowie ZIP-Export und Wiederherstellung der Datenbank.',
+    href: '/admin/einstellungen/system',
+    icon: Sliders,
+    color: 'text-emerald-400',
+    bgColor: 'bg-emerald-500/10 border-emerald-500/20',
+  },
+];
 
-const cardVariants = {
+export default function AdminSettingsOverview() {
-  hidden: { opacity: 0, y: 20 },
-  visible: {
-    opacity: 1,
-    y: 0,
-    transition: {
-      type: 'spring' as const,
-      stiffness: 80,
-      damping: 15
-    }
-  }
-};
-
-export default function AdminSettings() {
-  const [demoActive, setDemoActive] = useState(true);
-  const [exporting, setExporting] = useState(false);
-  const [importing, setImporting] = useState(false);
-  const [statusMsg, setStatusMsg] = useState('');
-  const [statusType, setStatusType] = useState<'success' | 'error' | 'info' | ''>('');
-  const [selectedFile, setSelectedFile] = useState<File | null>(null);
   const [loading, setLoading] = useState(true);
-
-  // LicServer Config State
-  const [licUrl, setLicUrl] = useState('');
-  const [licKey, setLicKey] = useState('');
-  const [showKey, setShowKey] = useState(false);
-  const [licSaving, setLicSaving] = useState(false);
-  const [licTesting, setLicTesting] = useState(false);
-  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(() => {
@@ -91,31 +63,13 @@ export default function AdminSettings() {
           router.push('/auth/login');
           return;
         }
-
+        const { data } = await supabase.from('users').select('role').eq('id', user.id).single();
-        const [userRes, licRes, brandRes] = await Promise.all([
+        if (!data || data.role === 'verwaltung') {
-          supabase.from('users').select('role').eq('id', user.id).single(),
-          supabase.from('settings').select('licserver_base_url, licserver_api_key').eq('id', 'licserver').maybeSingle(),
-          getBrandingSettings()
-        ]);
-
-        if (userRes.error || !userRes.data || userRes.data.role === 'verwaltung') {
           router.push('/admin');
           return;
         }
-
-        const state = localStorage.getItem('demo_banner_disabled') !== 'true';
-        setDemoActive(state);
-
-        if (licRes.data) {
-          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);
+        console.error(err);
       } finally {
         setLoading(false);
       }
@@ -123,565 +77,51 @@ export default function AdminSettings() {
     checkAccess();
   }, [router]);
 
-  const toggleDemo = (checked: boolean) => {
-    setDemoActive(checked);
-    localStorage.setItem('demo_banner_disabled', (!checked).toString());
-    window.dispatchEvent(new Event('storage_demo_changed'));
-  };
-
-  const handleExport = async () => {
-    setExporting(true);
-    setStatusMsg('Export läuft...');
-    setStatusType('info');
-    try {
-      const res = await fetch('/api/admin/db-backup');
-      if (!res.ok) throw new Error('Export fehlgeschlagen');
-
-      const blob = await res.blob();
-      const url = window.URL.createObjectURL(blob);
-      const a = document.createElement('a');
-      a.href = url;
-      a.download = `webshop_backup_${new Date().toISOString().split('T')[0]}.zip`;
-      document.body.appendChild(a);
-      a.click();
-      a.remove();
-      window.URL.revokeObjectURL(url);
-      setStatusMsg('Export erfolgreich abgeschlossen.');
-      setStatusType('success');
-    } catch (err: any) {
-      console.error(err);
-      setStatusMsg(`Fehler beim Export: ${err.message}`);
-      setStatusType('error');
-    } finally {
-      setExporting(false);
-    }
-  };
-
-  const handleImport = async () => {
-    if (!selectedFile) return;
-    if (!confirm('ACHTUNG: Dies löscht und überschreibt alle aktuellen Datenbankinhalte in dieser Instanz. Möchten Sie wirklich fortfahren?')) {
-      return;
-    }
-    setImporting(true);
-    setStatusMsg('Import läuft...');
-    setStatusType('info');
-    try {
-      const formData = new FormData();
-      formData.append('file', selectedFile);
-
-      const res = await fetch('/api/admin/db-backup', {
-        method: 'POST',
-        body: formData,
-      });
-
-      const data = await res.json();
-      if (!res.ok) throw new Error(data.error || 'Import fehlgeschlagen');
-
-      setStatusMsg('Datenbank erfolgreich importiert!');
-      setStatusType('success');
-      setSelectedFile(null);
-    } catch (err: any) {
-      console.error(err);
-      setStatusMsg(`Fehler beim Import: ${err.message}`);
-      setStatusType('error');
-    } finally {
-      setImporting(false);
-    }
-  };
-
-  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>;
   }
 
   return (
-    <div className="p-6 max-w-7xl mx-auto text-slate-900 dark:text-white space-y-6">
+    <div className="p-6 max-w-6xl mx-auto space-y-6">
-      {/* Header */}
+      <motion.div initial={{ opacity: 0, y: -10 }} animate={{ opacity: 1, y: 0 }}>
-      <motion.div
+        <h1 className="text-3xl font-extrabold tracking-tight text-white">Systemeinstellungen</h1>
-        initial={{ opacity: 0, y: -10 }}
+        <p className="text-slate-400 text-xs mt-1">
-        animate={{ opacity: 1, y: 0 }}
+          Wählen Sie eine Kategorie aus, um Konfigurationen, Server-Anbindungen oder Branding anzupassen.
-        className="flex items-center justify-between"
+        </p>
-      >
-        <div>
-          <h1 className="text-3xl font-extrabold tracking-tight">Admin Einstellungen</h1>
-          <p className="text-slate-400 text-xs mt-1">
-            Zentrales Dashboard für Firmendaten, Branding, Backup &amp; Lizenz-Konfigurationen.
-          </p>
-        </div>
       </motion.div>
 
-      {/* Dynamic Status Notification */}
+      <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-5">
-      {statusMsg && (
+        {menuItems.map((item, idx) => {
-        <motion.div
+          const Icon = item.icon;
-          initial={{ opacity: 0, height: 0 }}
+          return (
-          animate={{ opacity: 1, height: 'auto' }}
+            <Link key={idx} href={item.href}>
-          className={`p-3 rounded-xl text-sm border ${
+              <motion.div
-            statusType === 'success' ? 'bg-emerald-500/10 border-emerald-500/20 text-emerald-400' :
+                whileHover={{ y: -4, scale: 1.01 }}
-            statusType === 'error' ? 'bg-destructive/10 border-destructive/20 text-destructive' :
+                className="p-6 rounded-2xl bg-slate-900/60 border border-slate-800 backdrop-blur-md h-full flex flex-col justify-between space-y-4 hover:border-slate-700 transition-all shadow-md group cursor-pointer"
-            'bg-sky-500/10 border-sky-500/20 text-sky-400'
+              >
-          }`}
+                <div className="space-y-3">
-        >
+                  <div className={`w-12 h-12 rounded-xl border flex items-center justify-center ${item.bgColor}`}>
-          {statusMsg}
+                    <Icon className={`w-6 h-6 ${item.color}`} />
-        </motion.div>
+                  </div>
-      )}
-
-      {/* Bento Grid Container */}
-      <motion.div
-        variants={containerVariants}
-        initial="hidden"
-        animate="visible"
-        className="grid grid-cols-1 md:grid-cols-3 lg:grid-cols-4 gap-5"
-      >
-        {/* Bento Item 1: System Modus & Banner */}
-        <motion.div
-          variants={cardVariants}
-          whileHover={{ y: -3 }}
-          className="p-5 rounded-2xl bg-slate-900/60 border border-slate-800 backdrop-blur-md flex flex-col justify-between space-y-4 hover:border-sky-500/30 transition-all duration-300 shadow-md"
-        >
-          <div className="space-y-3">
-            <div className="w-10 h-10 rounded-xl bg-sky-500/10 border border-sky-500/20 text-sky-400 flex items-center justify-center">
-              <Sliders className="w-5 h-5" />
-            </div>
-            <div>
-              <h3 className="font-bold text-base text-white">System Banner</h3>
-              <p className="text-xs text-slate-400 mt-1 leading-relaxed">
-                Gelbe Demo-Warnmeldungen im gesamten Shop aktivieren oder stummschalten.
-              </p>
-            </div>
-          </div>
-          <div className="flex items-center justify-between pt-3 border-t border-slate-800/80">
-            <span className="text-xs font-semibold text-slate-300">Banner aktiv</span>
-            <Switch checked={demoActive} onCheckedChange={toggleDemo} />
-          </div>
-        </motion.div>
-
-        {/* Bento Item 2: Daten Export */}
-        <motion.div
-          variants={cardVariants}
-          whileHover={{ y: -3 }}
-          className="p-5 rounded-2xl bg-slate-900/60 border border-slate-800 backdrop-blur-md flex flex-col justify-between space-y-4 hover:border-blue-500/30 transition-all duration-300 shadow-md"
-        >
-          <div className="space-y-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">
-              <Download className="w-5 h-5" />
-            </div>
-            <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 &amp; Einstellungen als ZIP-Archiv herunter.
-              </p>
-            </div>
-          </div>
-          <Button
-            onClick={handleExport}
-            disabled={exporting || importing}
-            className="w-full bg-blue-600 hover:bg-blue-500 text-white rounded-xl h-10 text-xs font-bold"
-          >
-            {exporting ? (
-              <><Loader2 className="w-4 h-4 mr-2 animate-spin" /> Export läuft...</>
-            ) : (
-              <><Download className="w-4 h-4 mr-2" /> ZIP Export</>
-            )}
-          </Button>
-        </motion.div>
-
-        {/* Bento Item 3: Daten Import */}
-        <motion.div
-          variants={cardVariants}
-          whileHover={{ y: -3 }}
-          className="md:col-span-1 lg:col-span-2 p-5 rounded-2xl bg-slate-900/60 border border-slate-800 backdrop-blur-md flex flex-col justify-between space-y-4 hover:border-amber-500/30 transition-all duration-300 shadow-md"
-        >
-          <div className="space-y-3">
-            <div className="flex items-center justify-between">
-              <div className="w-10 h-10 rounded-xl bg-amber-500/10 border border-amber-500/20 text-amber-400 flex items-center justify-center">
-                <Upload className="w-5 h-5" />
-              </div>
-              <span className="text-[10px] font-bold uppercase tracking-wider text-amber-400 bg-amber-500/10 px-2.5 py-1 rounded-full border border-amber-500/20 flex items-center gap-1">
-                <ShieldAlert className="w-3 h-3" /> Überschreibt DB
-              </span>
-            </div>
-            <div>
-              <h3 className="font-bold text-base text-white">Daten Wiederherstellung</h3>
-              <p className="text-xs text-slate-400 mt-1 leading-relaxed">
-                Spielen Sie eine gesicherte ZIP-Sicherungsdatei ein. Warnung: Überschreibt aktuelle Datenbankinhalte.
-              </p>
-            </div>
-          </div>
-
-          <div className="grid sm:grid-cols-2 gap-3 pt-2">
-            <div className="relative border border-dashed border-slate-700/80 rounded-xl p-3 hover:bg-slate-800/50 transition cursor-pointer flex items-center justify-center text-center">
-              <input
-                type="file"
-                accept=".zip"
-                onChange={(e) => setSelectedFile(e.target.files?.[0] || null)}
-                disabled={exporting || importing}
-                className="absolute inset-0 w-full h-full opacity-0 cursor-pointer disabled:cursor-not-allowed"
-              />
-              <span className="text-xs font-medium text-slate-300 truncate px-2 flex items-center gap-1.5">
-                <FileArchive className="w-4 h-4 text-amber-400 shrink-0" />
-                {selectedFile ? selectedFile.name : 'ZIP-Datei auswählen'}
-              </span>
-            </div>
-
-            <Button
-              onClick={handleImport}
-              disabled={!selectedFile || exporting || importing}
-              variant="outline"
-              className="w-full border-amber-500/30 text-amber-300 hover:bg-amber-500/10 rounded-xl h-10 text-xs font-bold"
-            >
-              {importing ? (
-                <><Loader2 className="w-4 h-4 mr-2 animate-spin" /> Importiert...</>
-              ) : (
-                <><Upload className="w-4 h-4 mr-2" /> ZIP Einspielen</>
-              )}
-            </Button>
-          </div>
-        </motion.div>
-
-        {/* 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>
+                    <h3 className="font-bold text-lg text-white group-hover:text-primary transition-colors">
-                    <Input
+                      {item.title}
-                      value={branding.zip}
+                    </h3>
-                      onChange={(e) => setBranding({ ...branding, zip: e.target.value })}
+                    <p className="text-xs text-slate-400 mt-1 leading-relaxed">
-                      placeholder="12345"
+                      {item.description}
-                      className="bg-slate-950/80 border-slate-800 text-white text-xs"
+                    </p>
-                    />
-                  </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="flex items-center text-xs font-bold text-slate-300 group-hover:text-primary pt-3 border-t border-slate-800/80 gap-1.5 transition-colors">
-              <div className="space-y-3">
+                  <span>Einstellungen öffnen</span>
-                <div className="flex items-center justify-between">
+                  <ArrowRight className="w-4 h-4 transition-transform group-hover:translate-x-1" />
-                  <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>
-
+              </motion.div>
-                {!branding.sameBillingAddress ? (
+            </Link>
-                  <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>
+      </div>
-                      <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 }}
-          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">
-                <KeyRound className="w-5 h-5" />
-              </div>
-              <div>
-                <h3 className="font-bold text-lg text-white">CASPOS Lizenzserver (LicServer)</h3>
-                <p className="text-xs text-slate-400">REST API-Anbindung für automatisierte Lizenzierung</p>
-              </div>
-            </div>
-
-            {licStatus && (
-              <div className={`flex items-center gap-2 px-3 py-1.5 rounded-full text-xs font-semibold border ${
-                licStatus.ok
-                  ? 'bg-emerald-500/10 border-emerald-500/20 text-emerald-400'
-                  : 'bg-amber-500/10 border-amber-500/20 text-amber-400'
-              }`}>
-                {licStatus.ok ? <CheckCircle2 className="w-3.5 h-3.5" /> : <XCircle className="w-3.5 h-3.5" />}
-                {licStatus.message}
-              </div>
-            )}
-          </div>
-
-          {licMsg && (
-            <div className={`p-3 rounded-xl text-xs font-medium border ${
-              licMsgType === 'success' ? 'bg-emerald-500/10 border-emerald-500/20 text-emerald-400' : 'bg-destructive/10 border-destructive/20 text-destructive'
-            }`}>
-              {licMsg}
-            </div>
-          )}
-
-          <div className="grid md:grid-cols-2 gap-4">
-            <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
-              </Label>
-              <Input
-                id="lic-url"
-                value={licUrl}
-                onChange={e => setLicUrl(e.target.value)}
-                placeholder="http://192.168.178.174:9980"
-                className="text-sm font-mono bg-slate-950/80 border-slate-800 text-white rounded-xl"
-              />
-            </div>
-
-            <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
-              </Label>
-              <div className="relative">
-                <Input
-                  id="lic-key"
-                  type={showKey ? 'text' : 'password'}
-                  value={licKey}
-                  onChange={e => setLicKey(e.target.value)}
-                  placeholder="Ihr X-Api-Key"
-                  className="text-sm font-mono pr-10 bg-slate-950/80 border-slate-800 text-white rounded-xl"
-                />
-                <button
-                  type="button"
-                  onClick={() => setShowKey(v => !v)}
-                  className="absolute right-3 top-1/2 -translate-y-1/2 text-slate-400 hover:text-white transition-colors"
-                  aria-label={showKey ? 'Key verbergen' : 'Key anzeigen'}
-                >
-                  {showKey ? <EyeOff className="w-4 h-4" /> : <Eye className="w-4 h-4" />}
-                </button>
-              </div>
-            </div>
-          </div>
-
-          <div className="flex items-center justify-end gap-3 pt-2">
-            <Button
-              id="lic-save-btn"
-              disabled={licSaving || licTesting}
-              onClick={async () => {
-                setLicSaving(true);
-                setLicMsg('');
-                setLicStatus(null);
-                const res = await saveLicServerConfig(licUrl, licKey);
-                setLicMsgType(res.success ? 'success' : 'error');
-                setLicMsg(res.success ? 'Konfiguration gespeichert.' : (res.error || 'Fehler beim Speichern'));
-                setLicSaving(false);
-              }}
-              className="bg-violet-600 hover:bg-violet-500 text-white rounded-xl px-5 h-10 text-xs font-bold"
-            >
-              {licSaving ? <Loader2 className="w-4 h-4 mr-2 animate-spin" /> : <KeyRound className="w-4 h-4 mr-2" />}
-              Speichern
-            </Button>
-
-            <Button
-              id="lic-test-btn"
-              variant="outline"
-              disabled={licSaving || licTesting}
-              onClick={async () => {
-                setLicTesting(true);
-                setLicStatus(null);
-                await saveLicServerConfig(licUrl, licKey);
-                const result = await testLicServerConnection();
-                setLicStatus(result);
-                setLicTesting(false);
-              }}
-              className="border-slate-700 text-slate-300 hover:text-white rounded-xl px-5 h-10 text-xs font-bold"
-            >
-              {licTesting ? <Loader2 className="w-4 h-4 mr-2 animate-spin" /> : <Wifi className="w-4 h-4 mr-2" />}
-              Verbindung testen
-            </Button>
-          </div>
-        </motion.div>
-      </motion.div>
     </div>
   );
 }

shop/app/admin/einstellungen/system/page.tsx

@@ -0,0 +1,226 @@
+'use client';
+
+import { useState, useEffect } from 'react';
+import { Button } from '@/components/ui/button';
+import { Switch } from '@/components/ui/switch';
+import { Download, Upload, Loader2, Sliders, ShieldAlert, FileArchive } from 'lucide-react';
+import { createClient } from '@/lib/supabase/client';
+import { useRouter } from 'next/navigation';
+
+export default function SystemPage() {
+  const [loading, setLoading] = useState(true);
+  const [demoActive, setDemoActive] = useState(true);
+  const [exporting, setExporting] = useState(false);
+  const [importing, setImporting] = useState(false);
+  const [statusMsg, setStatusMsg] = useState('');
+  const [statusType, setStatusType] = useState<'success' | 'error' | 'info' | ''>('');
+  const [selectedFile, setSelectedFile] = useState<File | null>(null);
+  const router = useRouter();
+
+  useEffect(() => {
+    async function loadData() {
+      try {
+        const supabase = createClient();
+        const { data: { user } } = await supabase.auth.getUser();
+        if (!user) {
+          router.push('/auth/login');
+          return;
+        }
+        const state = localStorage.getItem('demo_banner_disabled') !== 'true';
+        setDemoActive(state);
+      } catch (e) {
+        console.error(e);
+      } finally {
+        setLoading(false);
+      }
+    }
+    loadData();
+  }, [router]);
+
+  const toggleDemo = (checked: boolean) => {
+    setDemoActive(checked);
+    localStorage.setItem('demo_banner_disabled', (!checked).toString());
+    window.dispatchEvent(new Event('storage_demo_changed'));
+  };
+
+  const handleExport = async () => {
+    setExporting(true);
+    setStatusMsg('Export läuft...');
+    setStatusType('info');
+    try {
+      const res = await fetch('/api/admin/db-backup');
+      if (!res.ok) throw new Error('Export fehlgeschlagen');
+
+      const blob = await res.blob();
+      const url = window.URL.createObjectURL(blob);
+      const a = document.createElement('a');
+      a.href = url;
+      a.download = `webshop_backup_${new Date().toISOString().split('T')[0]}.zip`;
+      document.body.appendChild(a);
+      a.click();
+      a.remove();
+      window.URL.revokeObjectURL(url);
+      setStatusMsg('Export erfolgreich abgeschlossen.');
+      setStatusType('success');
+    } catch (err: any) {
+      console.error(err);
+      setStatusMsg(`Fehler beim Export: ${err.message}`);
+      setStatusType('error');
+    } finally {
+      setExporting(false);
+    }
+  };
+
+  const handleImport = async () => {
+    if (!selectedFile) return;
+    if (!confirm('ACHTUNG: Dies löscht und überschreibt alle aktuellen Datenbankinhalte in dieser Instanz. Möchten Sie wirklich fortfahren?')) {
+      return;
+    }
+    setImporting(true);
+    setStatusMsg('Import läuft...');
+    setStatusType('info');
+    try {
+      const formData = new FormData();
+      formData.append('file', selectedFile);
+
+      const res = await fetch('/api/admin/db-backup', {
+        method: 'POST',
+        body: formData,
+      });
+
+      const data = await res.json();
+      if (!res.ok) throw new Error(data.error || 'Import fehlgeschlagen');
+
+      setStatusMsg('Datenbank erfolgreich importiert!');
+      setStatusType('success');
+      setSelectedFile(null);
+    } catch (err: any) {
+      console.error(err);
+      setStatusMsg(`Fehler beim Import: ${err.message}`);
+      setStatusType('error');
+    } finally {
+      setImporting(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>;
+  }
+
+  return (
+    <div className="p-6 max-w-5xl mx-auto space-y-6">
+      <div>
+        <h1 className="text-3xl font-extrabold tracking-tight text-white flex items-center gap-3">
+          <Sliders className="w-8 h-8 text-amber-400" />
+          System & Backup
+        </h1>
+        <p className="text-slate-400 text-xs mt-1">
+          Verwaltung von System-Bannern, Datenbank-Sicherungen und Wiederherstellungen.
+        </p>
+      </div>
+
+      {statusMsg && (
+        <div className={`p-3.5 rounded-xl text-xs font-medium border ${
+          statusType === 'success' ? 'bg-emerald-500/10 border-emerald-500/20 text-emerald-400' :
+          statusType === 'error' ? 'bg-destructive/10 border-destructive/20 text-destructive' :
+          'bg-sky-500/10 border-sky-500/20 text-sky-400'
+        }`}>
+          {statusMsg}
+        </div>
+      )}
+
+      <div className="grid grid-cols-1 md:grid-cols-2 gap-5">
+        <div className="p-5 rounded-2xl bg-slate-900/60 border border-slate-800 flex flex-col justify-between space-y-4">
+          <div className="space-y-3">
+            <div className="w-10 h-10 rounded-xl bg-sky-500/10 border border-sky-500/20 text-sky-400 flex items-center justify-center">
+              <Sliders className="w-5 h-5" />
+            </div>
+            <div>
+              <h3 className="font-bold text-base text-white">System Banner</h3>
+              <p className="text-xs text-slate-400 mt-1 leading-relaxed">
+                Gelbe Demo-Warnmeldungen im gesamten Shop aktivieren oder stummschalten.
+              </p>
+            </div>
+          </div>
+          <div className="flex items-center justify-between pt-3 border-t border-slate-800/80">
+            <span className="text-xs font-semibold text-slate-300">Banner aktiv</span>
+            <Switch checked={demoActive} onCheckedChange={toggleDemo} />
+          </div>
+        </div>
+
+        <div className="p-5 rounded-2xl bg-slate-900/60 border border-slate-800 flex flex-col justify-between space-y-4">
+          <div className="space-y-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">
+              <Download className="w-5 h-5" />
+            </div>
+            <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 &amp; Einstellungen als ZIP-Archiv herunter.
+              </p>
+            </div>
+          </div>
+          <Button
+            onClick={handleExport}
+            disabled={exporting || importing}
+            className="w-full bg-blue-600 hover:bg-blue-500 text-white rounded-xl h-10 text-xs font-bold"
+          >
+            {exporting ? (
+              <><Loader2 className="w-4 h-4 mr-2 animate-spin" /> Export läuft...</>
+            ) : (
+              <><Download className="w-4 h-4 mr-2" /> ZIP Export</>
+            )}
+          </Button>
+        </div>
+
+        <div className="md:col-span-2 p-5 rounded-2xl bg-slate-900/60 border border-slate-800 space-y-4">
+          <div className="space-y-3">
+            <div className="flex items-center justify-between">
+              <div className="w-10 h-10 rounded-xl bg-amber-500/10 border border-amber-500/20 text-amber-400 flex items-center justify-center">
+                <Upload className="w-5 h-5" />
+              </div>
+              <span className="text-[10px] font-bold uppercase tracking-wider text-amber-400 bg-amber-500/10 px-2.5 py-1 rounded-full border border-amber-500/20 flex items-center gap-1">
+                <ShieldAlert className="w-3 h-3" /> Überschreibt DB
+              </span>
+            </div>
+            <div>
+              <h3 className="font-bold text-base text-white">Daten Wiederherstellung</h3>
+              <p className="text-xs text-slate-400 mt-1 leading-relaxed">
+                Spielen Sie eine gesicherte ZIP-Sicherungsdatei ein. Warnung: Überschreibt aktuelle Datenbankinhalte.
+              </p>
+            </div>
+          </div>
+
+          <div className="grid sm:grid-cols-2 gap-3 pt-2">
+            <div className="relative border border-dashed border-slate-700/80 rounded-xl p-3 hover:bg-slate-800/50 transition cursor-pointer flex items-center justify-center text-center">
+              <input
+                type="file"
+                accept=".zip"
+                onChange={(e) => setSelectedFile(e.target.files?.[0] || null)}
+                disabled={exporting || importing}
+                className="absolute inset-0 w-full h-full opacity-0 cursor-pointer disabled:cursor-not-allowed"
+              />
+              <span className="text-xs font-medium text-slate-300 truncate px-2 flex items-center gap-1.5">
+                <FileArchive className="w-4 h-4 text-amber-400 shrink-0" />
+                {selectedFile ? selectedFile.name : 'ZIP-Datei auswählen'}
+              </span>
+            </div>
+
+            <Button
+              onClick={handleImport}
+              disabled={!selectedFile || exporting || importing}
+              variant="outline"
+              className="w-full border-amber-500/30 text-amber-300 hover:bg-amber-500/10 rounded-xl h-10 text-xs font-bold"
+            >
+              {importing ? (
+                <><Loader2 className="w-4 h-4 mr-2 animate-spin" /> Importiert...</>
+              ) : (
+                <><Upload className="w-4 h-4 mr-2" /> ZIP Einspielen</>
+              )}
+            </Button>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}

shop/app/admin/layout.tsx

@@ -77,17 +77,25 @@ export default async function AdminLayout({
               <div className="pt-2 pb-1 px-3">
                 <span className="text-[10px] font-semibold uppercase tracking-wider text-slate-500 dark:text-slate-600">Einstellungen</span>
               </div>
-              <AdminNavLink href="/admin/einstellungen">
+              <AdminNavLink href="/admin/einstellungen/firmendaten">
-                <Settings className="w-5 h-5" />
+                <Building2 className="w-5 h-5" />
-                Allgemein
+                Firmendaten
+              </AdminNavLink>
+              <AdminNavLink href="/admin/einstellungen/branding">
+                <Sparkles className="w-5 h-5 text-violet-400" />
+                Branding & Design
+              </AdminNavLink>
+              <AdminNavLink href="/admin/einstellungen/licserver">
+                <Wrench className="w-5 h-5 text-amber-400" />
+                LicServer
               </AdminNavLink>
               <AdminNavLink href="/admin/settings">
-                <Wrench className="w-5 h-5" />
+                <Settings className="w-5 h-5 text-sky-400" />
-                SMTP
+                SMTP Server
               </AdminNavLink>
-              <AdminNavLink href="/admin/tools">
+              <AdminNavLink href="/admin/einstellungen/system">
-                <Database className="w-5 h-5" />
+                <Database className="w-5 h-5 text-emerald-400" />
-                DB-Tools
+                System & Backup
               </AdminNavLink>
             </>
           )}