Implement cybernetwork background features: Add routes for serving cybernetwork CSS and JavaScript files, update base.html to include the new CSS and initialization script, and enhance style.css with smooth scrolling and background imports. This update improves the visual experience and functionality of the cybernetwork background in the application.

static/css/src/cybernetwork-bg.css

@@ -0,0 +1,125 @@
+/* Cybertechnisches Netzwerk Hintergrund-Overlay */
+.cyber-network-bg {
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  z-index: -1;
+  pointer-events: none;
+  overflow: hidden;
+}
+
+.cyber-network-bg::before {
+  content: '';
+  position: absolute;
+  width: 100%;
+  height: 100%;
+  background: linear-gradient(125deg, 
+    rgba(14, 14, 22, 0.95) 0%, 
+    rgba(30, 30, 46, 0.98) 100%);
+}
+
+.network-grid {
+  position: absolute;
+  width: 200%;
+  height: 200%;
+  top: -50%;
+  left: -50%;
+  background-size: 40px 40px;
+  background-image: 
+    linear-gradient(to right, rgba(108, 93, 211, 0.05) 1px, transparent 1px),
+    linear-gradient(to bottom, rgba(108, 93, 211, 0.05) 1px, transparent 1px);
+  transform: perspective(500px) rotateX(60deg);
+  animation: grid-move 20s linear infinite;
+}
+
+.node {
+  position: absolute;
+  width: 4px;
+  height: 4px;
+  background: rgba(76, 223, 255, 0.8);
+  border-radius: 50%;
+  box-shadow: 0 0 10px rgba(76, 223, 255, 0.6);
+  filter: blur(1px);
+}
+
+.connection {
+  position: absolute;
+  height: 1px;
+  background: linear-gradient(90deg, 
+    rgba(76, 223, 255, 0.2) 0%, 
+    rgba(108, 93, 211, 0.3) 50%, 
+    rgba(76, 223, 255, 0.2) 100%);
+  transform-origin: left center;
+  animation: pulse 4s infinite;
+}
+
+.data-packet {
+  position: absolute;
+  width: 6px;
+  height: 6px;
+  border-radius: 50%;
+  background: rgba(118, 69, 217, 0.8);
+  filter: blur(1px);
+  animation: travel var(--travel-time, 6s) linear infinite;
+}
+
+.glow-overlay {
+  position: absolute;
+  width: 100%;
+  height: 100%;
+  background: radial-gradient(
+    circle at 50% 40%, 
+    rgba(76, 223, 255, 0.03) 0%, 
+    rgba(108, 93, 211, 0.03) 45%, 
+    transparent 70%
+  );
+  opacity: 0.8;
+  animation: pulse-glow 8s infinite;
+}
+
+/* Animations */
+@keyframes grid-move {
+  0% {
+    transform: perspective(500px) rotateX(60deg) translateY(0);
+  }
+  100% {
+    transform: perspective(500px) rotateX(60deg) translateY(40px);
+  }
+}
+
+@keyframes pulse {
+  0%, 100% {
+    opacity: 0.2;
+  }
+  50% {
+    opacity: 0.4;
+  }
+}
+
+@keyframes travel {
+  0% {
+    transform: translateX(0) translateY(0);
+    opacity: 0;
+  }
+  10% {
+    opacity: 1;
+  }
+  90% {
+    opacity: 1;
+  }
+  100% {
+    transform: translateX(var(--travel-x, 100px)) translateY(var(--travel-y, 100px));
+    opacity: 0;
+  }
+}
+
+@keyframes pulse-glow {
+  0%, 100% {
+    opacity: 0.4;
+  }
+  50% {
+    opacity: 0.8;
+  }
+} 

static/css/style.css

@@ -1434,11 +1434,16 @@ html, body {
     overflow-x: hidden;
     background: linear-gradient(135deg, var(--background-start), var(--background-end));
     background-attachment: fixed;
+    scroll-behavior: smooth;
+    height: 100%;
 }
 
 /* Sticky navbar */
 .navbar.sticky-top {
     position: sticky;
     top: 0;
-    z-index: 1000;
-} 
+    z-index: 50;
+}
+
+/* Importiere das Cyber-Network CSS */
+@import url('/static/css/src/cybernetwork-bg.css');