fix(navbar): fix profile dropdown hover gap

.agents/agents.md

@@ -0,0 +1,18 @@
+# Antigravity Agent Configuration (Project Rocky)
+
+## Agent: Rocky_Manager
+- **Role**: Hauptkoordinator des Rocky-Projekts.
+- **Responsibility**: Verteilt Aufgaben an Spezialisten basierend auf den Skill-Anforderungen.
+
+## Agent: Dokumenten_Spezialist
+- **Role**: Verantwortlich für Exporte und Berichte.
+- **Assigned_Skills**: [".agents/skills/pdf_skill.md"]
+
+## Agent: Kommunikations_Spezialist
+- **Role**: Verantwortlich für Benachrichtigungen und Kundenkontakt.
+- **Assigned_Skills**: [".agents/skills/email_skill.md"]
+
+## Agent: Compliance_Supervisor
+- **Role**: Prüft den geschriebenen Code auf Datenschutzfehler.
+- **Assigned_Skills**: [".agents/skills/dsgvo_skill.md"]
+- **Rule**: "Blockiere jeden Git-Commit, wenn der Code gegen die DSGVO-Vorgaben verstößt."

.agents/skills/dsgvo_skill.md

@@ -0,0 +1,6 @@
+# Skill: DSGVO & Datenschutz-Compliance (Rocky-Projekt)
+
+## Regeln für Aufgaben:
+1. **Daten-Minimierung**: Spezialisten dürfen personenbezogene Daten (wie E-Mail-Adressen oder Klarnamen) niemals in Log-Dateien oder im Git-Verlauf speichern.
+2. **Verschlüsselung**: Daten im Rocky-Projekt müssen "at rest" und "in transit" (mindestens TLS 1.3) verschlüsselt werden.
+3. **Anonymisierung**: Für Testzwecke im Terminal-Subagent dürfen nur synthetische Dummy-Daten verwendet werden. Keine echten Kundendaten nutzen!

.agents/skills/email_skill.md

@@ -0,0 +1,6 @@
+# Skill: E-Mail-Kommunikation (Rocky-Projekt)
+
+## Regeln für Aufgaben:
+1. **Tonalität**: Professionell, höflich und im Corporate Design des Rocky-Projekts.
+2. **Sicherheit**: Sende niemals Passwörter, Token oder unverschlüsselte API-Keys per E-Mail.
+3. **Fallbacks**: Wenn ein E-Mail-Versand fehlschlägt, schreibe den Fehler sofort in die lokale Log-Datei `rocky_mail_errors.log` und benachrichtige den Manager-Agenten.

.agents/skills/pdf_skill.md

@@ -0,0 +1,6 @@
+# Skill: PDF-Verarbeitung & Generierung (Rocky-Projekt)
+
+## Regeln für Aufgaben:
+1. **Formatierung**: Nutze ausschließlich barrierefreie PDF/A-Formate für Rechnungen und Berichte im Rocky-Projekt.
+2. **Metadaten**: Jedes generierte PDF muss automatisch den Projektnamen `Rocky` und einen eindeutigen Zeitstempel im Datei-Header enthalten.
+3. **Validierung**: Vor dem Speichern muss der Agent prüfen, ob alle Textfelder innerhalb der Seitenränder liegen (kein Textumbruch-Fehler).

shop/app/globals.css

@@ -151,11 +151,33 @@ html {
   border-color: color-mix(in srgb, var(--destructive-custom) 35%, transparent) !important;
 }
 
-/* Background Glowing Orbs */
+/* Background Glowing Orbs & Dynamic Surfaces */
 .blur-\[120px\] {
   background-color: var(--bg-glow-1) !important;
 }
 
+.bg-\[\#020617\] {
+  background-color: oklch(var(--oklch-background)) !important;
+}
+
+/* Dynamische Buttons & Badges über globale CSS Variablen */
+.btn-primary-theme, .bg-primary-theme {
+  background-color: var(--button-bg, var(--primary-custom)) !important;
+  color: #ffffff !important;
+}
+
+.text-highlight-theme {
+  color: var(--text-highlight, var(--accent-custom)) !important;
+}
+
+.border-glow-theme {
+  border-color: var(--card-border-glow, color-mix(in srgb, var(--accent-custom) 35%, transparent)) !important;
+}
+
+.ring-theme {
+  --tw-ring-color: var(--ring-color, var(--primary-custom)) !important;
+}
+
 input, select, textarea, option {
   background-color: oklch(var(--oklch-surface)) !important;
   color: oklch(var(--oklch-text-main)) !important;

shop/components/NavbarClient.tsx

@@ -159,7 +159,7 @@ export function NavbarClient({ user, role = "partner" }: NavbarClientProps) {
                 <span className="max-w-[120px] truncate">{currentUser.email}</span>
               </Button>
               {open && (
-                <div className="absolute right-0 mt-2 w-48 rounded-xl border p-2 shadow-xl z-50 bg-white text-slate-900 border-slate-200 dark:bg-slate-950 dark:text-white dark:border-white/10">
+                <div className="absolute right-0 mt-2 w-48 rounded-xl border p-2 shadow-xl z-50 bg-white text-slate-900 border-slate-200 dark:bg-slate-950 dark:text-white dark:border-white/10 before:absolute before:-top-3 before:left-0 before:w-full before:h-3">
                   <div className="px-3 py-1.5 text-[11px] truncate border-b text-slate-400 border-slate-100 dark:border-white/5 mb-1">
                     {currentUser.email}
                   </div>

shop/components/admin/ColorThemePicker.tsx

@@ -58,16 +58,16 @@ export function ColorThemePicker({
             const isSelected = colorScheme === preset.id
 
             const tokenSwatches = [
-              preset.primary,
+              { name: 'Primary', color: preset.primary, desc: 'Helle/edle Hauptfarbe für Navigation/Texte' },
-              preset.accent,
+              { name: 'Accent', color: preset.accent, desc: 'Scharfe Highlight-Farbe für Badges/Meldungen' },
-              preset.bgGlow1,
+              { name: 'bgGlow1', color: preset.bgGlow1, desc: 'Atmosphärischer Lichtnebel von oben' },
-              preset.bgGlow2,
+              { name: 'bgGlow2', color: preset.bgGlow2, desc: 'Subtiles Gegenlicht von unten' },
-              preset.gradientFrom,
+              { name: 'gradientFrom', color: preset.gradientFrom, desc: 'Startfarbe für Core-Verläufe' },
-              preset.gradientTo,
+              { name: 'gradientTo', color: preset.gradientTo, desc: 'Endfarbe für Core-Verläufe' },
-              preset.textHighlight,
+              { name: 'textHighlight', color: preset.textHighlight, desc: 'Soft-Pastell Text-Empfehlung' },
-              preset.buttonBg,
+              { name: 'buttonBg', color: preset.buttonBg, desc: 'Satte Basisfarbe Hauptbuttons' },
-              preset.ringColor,
+              { name: 'ringColor', color: preset.ringColor, desc: 'Präzise Fokus-Rand-Farbe' },
-              preset.cardBorder,
+              { name: 'cardBorder', color: preset.cardBorder, desc: 'Subtiler Rahmen-Ton Karten' },
             ]
 
             return (
@@ -99,12 +99,12 @@ export function ColorThemePicker({
                 {/* 10 Color Token Swatches Bar */}
                 <div className="space-y-1 pt-1 border-t border-slate-800/60">
                   <div className="flex items-center gap-1 justify-between">
-                    {tokenSwatches.map((color, i) => (
+                    {tokenSwatches.map((item, i) => (
                       <span
                         key={i}
-                        className="w-3 h-3 rounded-full border border-white/10 shadow-sm shrink-0"
+                        className="w-3 h-3 rounded-full border border-white/10 shadow-sm shrink-0 transition-transform hover:scale-125"
-                        style={{ backgroundColor: color }}
+                        style={{ backgroundColor: item.color }}
-                        title={`Token ${i + 1}: ${color}`}
+                        title={`${item.name}: ${item.desc} (${item.color})`}
                       />
                     ))}
                   </div>
@@ -199,11 +199,11 @@ export function ColorThemePicker({
           {/* Animated Background Orbs Preview */}
           <div
             className="absolute -top-10 -left-10 w-40 h-40 rounded-full opacity-30 blur-2xl pointer-events-none transition-all duration-500"
-            style={{ backgroundColor: activePreset.bgGlow1 || primaryColor }}
+            style={{ backgroundColor: 'var(--bg-glow-1, ' + (activePreset.bgGlow1 || primaryColor) + ')' }}
           />
           <div
             className="absolute -bottom-10 -right-10 w-40 h-40 rounded-full opacity-30 blur-2xl pointer-events-none transition-all duration-500"
-            style={{ backgroundColor: activePreset.bgGlow2 || accentColor }}
+            style={{ backgroundColor: 'var(--bg-glow-2, ' + (activePreset.bgGlow2 || accentColor) + ')' }}
           />
 
           {/* Header Preview */}
@@ -211,7 +211,7 @@ export function ColorThemePicker({
             <div className="flex items-center gap-2">
               <div
                 className="w-6 h-6 rounded-md flex items-center justify-center text-white text-xs font-bold shadow-md"
-                style={{ backgroundColor: primaryColor }}
+                style={{ backgroundColor: 'var(--primary-custom, ' + primaryColor + ')' }}
               >
                 <Building2 className="w-3.5 h-3.5" />
               </div>
@@ -221,7 +221,7 @@ export function ColorThemePicker({
             </div>
             <span
               className="text-[10px] font-semibold px-2 py-0.5 rounded-full text-slate-950 font-bold"
-              style={{ backgroundColor: accentColor }}
+              style={{ backgroundColor: 'var(--accent-custom, ' + accentColor + ')' }}
             >
               Aktiv
             </span>
@@ -233,7 +233,7 @@ export function ColorThemePicker({
               type="button"
               className="px-4 py-2 rounded-lg text-xs font-bold text-white shadow-md flex items-center gap-1.5 transition-all"
               style={{
-                background: `linear-gradient(135deg, ${primaryColor} 0%, ${activePreset.gradientTo || primaryColor} 100%)`,
+                background: `linear-gradient(135deg, var(--gradient-from, ${primaryColor}) 0%, var(--gradient-to, ${activePreset.gradientTo || primaryColor}) 100%)`,
               }}
             >
               <ShoppingCart className="w-3.5 h-3.5" />
@@ -243,7 +243,7 @@ export function ColorThemePicker({
             <button
               type="button"
               className="px-3.5 py-2 rounded-lg text-xs font-semibold bg-slate-800/90 text-slate-200 border"
-              style={{ borderColor: accentColor }}
+              style={{ borderColor: 'var(--accent-custom, ' + accentColor + ')' }}
             >
               Details anzeigen
             </button>
@@ -251,9 +251,9 @@ export function ColorThemePicker({
             <span
               className="text-[10px] font-bold px-2.5 py-1 rounded-full border flex items-center gap-1"
               style={{
-                borderColor: `${accentColor}40`,
+                borderColor: 'var(--card-border-glow, ' + accentColor + '40)',
-                backgroundColor: `${accentColor}15`,
+                backgroundColor: 'color-mix(in srgb, var(--accent-custom, ' + accentColor + ') 15%, transparent)',
-                color: activePreset.textHighlight || accentColor,
+                color: 'var(--text-highlight, ' + (activePreset.textHighlight || accentColor) + ')',
               }}
             >
               <Tag className="w-3 h-3" />