diff --git a/static/css/neural-network-background.css b/static/css/neural-network-background.css index 990d5d6..9e76e9f 100644 --- a/static/css/neural-network-background.css +++ b/static/css/neural-network-background.css @@ -131,12 +131,10 @@ body:not(.dark) footer { .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 */ @@ -146,72 +144,9 @@ body:not(.dark) .neural-network-container { 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; - } } \ No newline at end of file