dont use red and blue for the colores, of player highlights. only one color is enough

components/footer.js

@@ -31,18 +31,16 @@ class CustomFooter extends HTMLElement {
                     .footer-grid {
                         grid-template-columns: repeat(3, 1fr);
                 }
-                
                 .footer-section h4 {
                     font-size: 1.125rem;
                     font-weight: 600;
                     margin-bottom: 1rem;
-                    background: linear-gradient(135deg, #0ea5e9 0%, #d946ef 100%);
+                    background: linear-gradient(135deg, #0ea5e9 0%, #0284c7 100%);
                     -webkit-background-clip: text;
                     -webkit-text-fill-color: transparent;
                     background-clip: text;
                 }
-                
-                .footer-links {
+.footer-links {
                     display: flex;
                     flex-direction: column;
                     gap: 0.5rem;
@@ -80,12 +78,11 @@ class CustomFooter extends HTMLElement {
                     color: rgba(255, 255, 255, 0.6);
                     transition: all 0.3s ease;
                 }
-.social-link:hover {
-                    background: linear-gradient(135deg, #0ea5e9 0%, #d946ef 100%);
+                .social-link:hover {
+                    background: linear-gradient(135deg, #0ea5e9 0%, #0284c7 100%);
                     color: white;
                 }
-                
-                .copyright {
+.copyright {
                     color: rgba(255, 255, 255, 0.5);
                     font-size: 0.875rem;
                 }

components/navigation.js

@@ -35,17 +35,15 @@ class CustomNavigation extends HTMLElement {
                     gap: 0.75rem;
                     text-decoration: none;
                 }
-                
                 .logo-text {
                     font-size: 1.5rem;
                     font-weight: 800;
-                    background: linear-gradient(135deg, #0ea5e9 0%, #d946ef 100%);
+                    background: linear-gradient(135deg, #0ea5e9 0%, #0284c7 100%);
                     -webkit-background-clip: text;
                     -webkit-text-fill-color: transparent;
                     background-clip: text;
                 }
-                
-                .nav-actions {
+.nav-actions {
                     display: flex;
                     align-items: center;
                     gap: 1rem;
@@ -74,7 +72,6 @@ class CustomNavigation extends HTMLElement {
                     position: relative;
                     cursor: pointer;
                 }
-                
                 .theme-toggle::before {
                     content: '';
                     position: absolute;
@@ -82,12 +79,11 @@ class CustomNavigation extends HTMLElement {
                     left: 1px;
                     width: 16px;
                     height: 16px;
-                    background: linear-gradient(135deg, #0ea5e9 0%, #d946ef 100%);
+                    background: linear-gradient(135deg, #0ea5e9 0%, #0284c7 100%);
                     border-radius: 9999px;
                     transition: transform 0.3s ease;
                 }
-                
-                :host-context(.dark) .theme-toggle::before {
+:host-context(.dark) .theme-toggle::before {
                     transform: translateX(18px);
                 }
 @media (max-width: 768px) {

index.html

@@ -87,8 +87,8 @@
             <p class="text-lg text-gray-300 max-w-2xl mx-auto mb-8">
                 A curated archive of transcendent fLau & blauschig DJ sets. Dive into sonic journeys that defined nights of pure musical euphoria.
             </p>
-            <a href="main.html" class="inline-flex items-center gap-2 bg-gradient-to-r from-primary-600 to-secondary-600 hover:from-primary-700 hover:to-secondary-700 text-white font-medium px-4 py-2 rounded-full transition-all duration-300 hover:scale-105 hover:shadow-2xl hover:shadow-primary-500/30 text-sm">
-                <i data-feather="home" class="w-4 h-4"></i>
+            <a href="main.html" class="inline-flex items-center gap-2 bg-gradient-to-r from-primary-600 to-primary-700 hover:from-primary-700 hover:to-primary-800 text-white font-medium px-4 py-2 rounded-full transition-all duration-300 hover:scale-105 hover:shadow-2xl hover:shadow-primary-500/30 text-sm">
+<i data-feather="home" class="w-4 h-4"></i>
                 Return to Main Hub
             </a>
 </header>
@@ -102,8 +102,8 @@
                     <div class="flex items-center justify-between mb-6">
                         <h2 class="text-2xl font-bold flex items-center gap-3">
                             <i data-feather="play-circle" class="text-primary-400"></i>
-                            <span class="bg-gradient-to-r from-primary-300 to-secondary-300 bg-clip-text text-transparent">Now Playing</span>
-                        </h2>
+                        <span class="bg-gradient-to-r from-primary-300 to-primary-400 bg-clip-text text-transparent">Now Playing</span>
+</h2>
                         <div class="flex items-center gap-2">
                             <div class="w-3 h-3 rounded-full bg-primary-500 animate-pulse"></div>
                             <span class="text-sm font-medium text-primary-300">LIVE</span>
@@ -135,9 +135,9 @@
                     <div class="space-y-6">
                         <!-- Progress Bar -->
                         <div class="space-y-2">
-                            <div class="h-2 bg-gray-800 rounded-full overflow-hidden">
-                                <div class="h-full w-1/3 bg-gradient-to-r from-primary-500 to-secondary-500 rounded-full relative">
-                                    <div class="absolute -right-2 top-1/2 -translate-y-1/2 w-4 h-4 bg-white rounded-full shadow-lg"></div>
+                    <div class="h-2 bg-gray-800 rounded-full overflow-hidden">
+                        <div class="h-full w-1/3 bg-gradient-to-r from-primary-500 to-primary-600 rounded-full relative">
+<div class="absolute -right-2 top-1/2 -translate-y-1/2 w-4 h-4 bg-white rounded-full shadow-lg"></div>
                                 </div>
                             </div>
                             <div class="flex justify-between text-sm text-gray-400">
@@ -153,8 +153,8 @@
                         <button class="control-btn text-gray-400 hover:text-primary-400">
                             <i data-feather="skip-back"></i>
                         </button>
-                        <button class="control-btn bg-gradient-to-r from-primary-600 to-secondary-600 text-white p-3 rounded-full hover:shadow-2xl hover:shadow-primary-500/50 hover:scale-105 transition-all duration-300 shadow-lg">
-                            <i data-feather="play" class="w-5 h-5"></i>
+                        <button class="control-btn bg-gradient-to-r from-primary-600 to-primary-700 text-white p-3 rounded-full hover:shadow-2xl hover:shadow-primary-500/50 hover:scale-105 transition-all duration-300 shadow-lg">
+<i data-feather="play" class="w-5 h-5"></i>
                         </button>
                         <button class="control-btn text-gray-400 hover:text-primary-400">
                             <i data-feather="skip-forward"></i>
@@ -168,8 +168,8 @@
                             <div class="flex items-center gap-3">
                                 <i data-feather="volume-2" class="text-primary-400 w-4 h-4"></i>
                                 <div class="w-24 h-2 bg-gray-800 rounded-full overflow-hidden">
-                                <div class="h-full w-3/4 bg-gradient-to-r from-primary-400 to-secondary-400 rounded-full"></div>
-                            </div>
+                                <div class="h-full w-3/4 bg-gradient-to-r from-primary-400 to-primary-600 rounded-full"></div>
+</div>
                             <div class="flex items-center gap-2">
                                 <button class="player-control-btn text-gray-400 hover:text-primary-400">
                                     <i data-feather="heart" class="w-4 h-4"></i>
@@ -192,8 +192,8 @@
                 <section class="bg-gradient-to-br from-gray-800/50 to-black/50 backdrop-blur-xl rounded-3xl p-8 border border-gray-700/50">
                     <h2 class="text-2xl font-bold mb-6 flex items-center gap-3">
                         <i data-feather="music" class="text-primary-400"></i>
-                        <span class="bg-gradient-to-r from-primary-300 to-white bg-clip-text text-transparent">The Vault</span>
-                    </h2>
+                        <span class="bg-gradient-to-r from-primary-300 to-primary-400 bg-clip-text text-transparent">The Vault</span>
+</h2>
                     <p class="text-gray-400 mb-6">
                         Select a sonic journey from the archive below. Each set is a timestamped memory of pure vibration.
                     </p>

script.js

@@ -285,8 +285,8 @@ function updateVolume(volume) {
 function showNotification(message) {
     // Create notification element
     const notification = document.createElement('div');
-    notification.className = 'fixed bottom-4 right-4 bg-gradient-to-r from-primary-800 to-secondary-800 text-white px-6 py-3 rounded-xl shadow-2xl transform transition-all duration-300';
-    notification.style.zIndex = '1000';
+    notification.className = 'fixed bottom-4 right-4 bg-gradient-to-r from-primary-800 to-primary-900 text-white px-6 py-3 rounded-xl shadow-2xl transform transition-all duration-300';
+notification.style.zIndex = '1000';
     notification.innerHTML = `
         <div class="flex items-center gap-3">
             <i data-feather="bell" class="w-5 h-5"></i>
@@ -403,15 +403,14 @@ function initializeMandelbrotBackground() {
                     zx2 = tmp;
                     i++;
                 }
-
-                if(i < 20) {
-                    const hue = (i * 15 + time * 30) % 360;
-                    const textPosition = Math.floor((x + y + time * 100) / density) % chars.length;
-                    const char = chars[textPosition];
-                    ctx.fillStyle = `hsla(${hue}, 100%, 70%, ${i/20 * 0.8})`;
-                    ctx.fillText(char, x, y);
-                }
-            }
+        if(i < 20) {
+            const hue = 200 + (i * 5 + time * 20) % 40; // Blue range only
+            const textPosition = Math.floor((x + y + time * 100) / density) % chars.length;
+            const char = chars[textPosition];
+            ctx.fillStyle = `hsla(${hue}, 100%, 70%, ${i/20 * 0.8})`;
+            ctx.fillText(char, x, y);
+        }
+}
         }
 
         if(zoom > 30) { // EXTREM LANG: 15x länger als Original

style.css

@@ -24,14 +24,13 @@ body {
     background: rgba(15, 23, 42, 0.5);
     border-radius: 5px;
 }
-
 ::-webkit-scrollbar-thumb {
-    background: linear-gradient(to bottom, #0ea5e9, #d946ef);
+    background: linear-gradient(to bottom, #0ea5e9, #0284c7);
     border-radius: 5px;
 }
 
 ::-webkit-scrollbar-thumb:hover {
-    background: linear-gradient(to bottom, #0284c7, #c026d3);
+    background: linear-gradient(to bottom, #0284c7, #0369a1);
 }
 /* Player Control Button Styles */
 .control-btn {
@@ -67,7 +66,7 @@ body {
 }
 .filter-btn:hover,
 .filter-btn.active {
-    background: linear-gradient(135deg, rgba(14, 165, 233, 0.2), rgba(217, 70, 239, 0.2));
+    background: linear-gradient(135deg, rgba(14, 165, 233, 0.2), rgba(14, 165, 233, 0.3));
     border-color: rgba(14, 165, 233, 0.4);
     color: white;
     box-shadow: 0 5px 15px rgba(14, 165, 233, 0.2);
@@ -83,7 +82,6 @@ body {
     border-color: rgba(14, 165, 233, 0.3);
     transform: translateX(4px);
 }
-
 /* Audio Wave Animation */
 .audio-wave {
     display: flex;
@@ -95,11 +93,10 @@ body {
 
 .audio-wave-bar {
     width: 4px;
-    background: linear-gradient(to top, #0ea5e9, #d946ef);
+    background: linear-gradient(to top, #0ea5e9, #0284c7);
     border-radius: 2px;
     animation: wave 1.2s ease-in-out infinite;
 }
-
 .audio-wave-bar:nth-child(2) { animation-delay: 0.1s; }
 .audio-wave-bar:nth-child(3) { animation-delay: 0.2s; }
 .audio-wave-bar:nth-child(4) { animation-delay: 0.3s; }
@@ -124,7 +121,6 @@ body {
 .glow-secondary {
     box-shadow: 0 0 30px rgba(217, 70, 239, 0.3);
 }
-
 /* Gradient Border */
 .gradient-border {
     position: relative;
@@ -138,12 +134,11 @@ body {
     left: -2px;
     right: -2px;
     bottom: -2px;
-    background: linear-gradient(45deg, #0ea5e9, #d946ef, #0ea5e9);
+    background: linear-gradient(45deg, #0ea5e9, #0284c7, #0ea5e9);
     border-radius: 18px;
     z-index: -1;
     opacity: 0.5;
 }
-
 /* Loading Animation */
 .loading-pulse {
     animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;