🎨 style: update UI and database schema for improved user experience

static/css/neural-network-background.css

@@ -103,4 +103,115 @@ body.dark footer {
 body:not(.dark) footer {
   background-color: rgba(249, 250, 251, 0.92) !important;
   border-top: 1px solid rgba(220, 220, 220, 0.8) !important;
+}
+
+/* Neural Network Background für Dark & Light Mode */
+.neural-network-container {
+    position: fixed;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    z-index: -1;
+    pointer-events: none;
+    overflow: hidden;
+    opacity: 0.8;
+    transition: opacity 0.5s ease;
+}
+
+.neural-network-bg {
+    width: 100%;
+    height: 100%;
+}
+
+/* Dark Mode Netzwerk-Hintergrund */
+.dark .neural-network-container {
+    opacity: 0.5;
+}
+
+.dark .neural-network-bg .node {
+    fill: rgba(139, 92, 246, 0.4);
+    transition: fill 0.3s ease;
+}
+
+.dark .neural-network-bg .link {
+    stroke: rgba(139, 92, 246, 0.15);
+    transition: stroke 0.3s ease;
+}
+
+/* Light Mode Netzwerk-Hintergrund */
+body:not(.dark) .neural-network-container {
+    opacity: 0.25;
+}
+
+body:not(.dark) .neural-network-bg .node {
+    fill: rgba(124, 58, 237, 0.35);
+    filter: drop-shadow(0 0 3px rgba(124, 58, 237, 0.2));
+    transition: all 0.3s ease;
+}
+
+body:not(.dark) .neural-network-bg .node:hover {
+    fill: rgba(124, 58, 237, 0.5);
+    filter: drop-shadow(0 0 5px rgba(124, 58, 237, 0.3));
+}
+
+body:not(.dark) .neural-network-bg .link {
+    stroke: rgba(124, 58, 237, 0.15);
+    stroke-width: 1.25;
+    filter: drop-shadow(0 0 1px rgba(124, 58, 237, 0.1));
+    transition: all 0.3s ease;
+}
+
+body:not(.dark) .neural-network-bg .link:hover {
+    stroke: rgba(124, 58, 237, 0.3);
+    stroke-width: 1.5;
+}
+
+/* Animationen für das Netzwerk */
+@keyframes pulse {
+    0% { opacity: 0.7; }
+    50% { opacity: 1; }
+    100% { opacity: 0.7; }
+}
+
+@keyframes float {
+    0% { transform: translateY(0); }
+    50% { transform: translateY(-5px); }
+    100% { transform: translateY(0); }
+}
+
+.neural-network-bg .node {
+    animation: pulse 3s infinite ease-in-out;
+}
+
+.neural-network-bg .link {
+    animation: pulse 4s infinite ease-in-out;
+}
+
+/* Speziell für den Light Mode leicht pulsierende Knoten */
+body:not(.dark) .neural-network-bg .node {
+    animation: pulse 4s infinite ease-in-out, float 6s infinite ease-in-out;
+    animation-delay: calc(var(--node-index, 0) * 0.2s);
+}
+
+/* Responsives Verhalten */
+@media (max-width: 768px) {
+    .neural-network-container {
+        opacity: 0.2; /* Auf mobilen Geräten etwas dezenter */
+    }
+    
+    body:not(.dark) .neural-network-bg .link {
+        stroke-width: 1;
+    }
+}
+
+/* Hover-Effekte für Desktop-Geräte */
+@media (min-width: 1024px) {
+    body:not(.dark) .neural-network-container:hover {
+        opacity: 0.35;
+    }
+    
+    .dark .neural-network-container:hover {
+        opacity: 0.6;
+    }
 }