Refactor SCSS and JavaScript for improved styling and scrolling behavior

- Updated SCSS variables to use static values instead of dynamic site parameters for colors and fonts.
- Changed various color values in the SCSS to enhance the overall design consistency.
- Improved JavaScript scroll functionality to prevent conflicts during auto-scrolling and manual scrolling.
- Added debounce functionality to wheel event listener for smoother scrolling experience.
- Enhanced header visibility behavior during scrolling.
- Reset auto-scroll state when returning to the hero section.

layouts/index.html

@@ -49,59 +49,85 @@ document.addEventListener('DOMContentLoaded', function () {
   const scrolldown = document.querySelector('.scrolldown');
   const header = document.getElementById('mainHeader');
   let lastScroll = window.scrollY;
-  let isScrolling = false;
-  let scrollTriggered = false;
+  let autoScrollDone = false;
+  let isAutoScrolling = false;
   const offset = 120;
 
   function scrollToTarget() {
-    if (!targetSection) return;
+    if (!targetSection || isAutoScrolling) return;
+    
+    isAutoScrolling = true;
     const y = targetSection.getBoundingClientRect().top + window.pageYOffset - offset;
+    
     window.scrollTo({ top: y, behavior: 'smooth' });
+    
+    // Warte bis Scroll-Animation fertig ist
+    setTimeout(() => {
+      isAutoScrolling = false;
+      autoScrollDone = true;
+    }, 1000);
   }
 
   // Klick auf Chevron → scrollen
-  scrolldown?.addEventListener('click', () => {
-    scrollTriggered = true;
+  scrolldown?.addEventListener('click', (e) => {
+    e.preventDefault();
+    e.stopPropagation();
     scrollToTarget();
   });
 
   // Scrollrad nach unten → am Ende von Hero → scrollen
+  let wheelTimeout;
   window.addEventListener('wheel', function (e) {
-    if (isScrolling || e.deltaY <= 0 || scrollTriggered || !hero || !targetSection) return;
+    // Verhindere Auto-Scroll während manueller Scroll oder wenn bereits ausgeführt
+    if (autoScrollDone || isAutoScrolling || e.deltaY <= 0 || !hero || !targetSection) return;
 
-    const heroBottom = hero.getBoundingClientRect().bottom;
-    const threshold = 50;
-    if (heroBottom <= window.innerHeight + threshold) {
-      isScrolling = true;
-      scrollTriggered = true;
-      scrollToTarget();
-      setTimeout(() => {
-        isScrolling = false;
-        scrollTriggered = false; // Reset scrollTriggered to prevent further jumps
-      }, 1000);
-    }
+    // Debounce wheel events
+    clearTimeout(wheelTimeout);
+    wheelTimeout = setTimeout(() => {
+      const heroBottom = hero.getBoundingClientRect().bottom;
+      const threshold = 50;
+
+      // Nur wenn wir wirklich am Ende der Hero-Section sind
+      if (heroBottom <= window.innerHeight + threshold && heroBottom > 0) {
+        scrollToTarget();
+      }
+    }, 50);
   }, { passive: true });
 
   // Scroll-Verhalten (Chevron + Header + Reset)
+  let scrollTimeout;
   window.addEventListener('scroll', function () {
-    // Chevron ausblenden
-    if (window.scrollY > 100) {
-      scrolldown?.classList.add('hide');
-    } else {
-      scrolldown?.classList.remove('hide');
-    }
+    clearTimeout(scrollTimeout);
+    scrollTimeout = setTimeout(() => {
+      // Chevron ausblenden
+      if (window.scrollY > 100) {
+        scrolldown?.classList.add('hide');
+      } else {
+        scrolldown?.classList.remove('hide');
+      }
 
-    // Header verstecken beim Runterscrollen
-    const currentScroll = window.scrollY;
-    header.style.top = (currentScroll > lastScroll) ? '-100vh' : '0';
-    if (currentScroll === 0) header.style.top = '0';
-    lastScroll = currentScroll;
+      // Header verstecken beim Runterscrollen
+      const currentScroll = window.scrollY;
+      if (!isAutoScrolling) {
+        header.style.top = (currentScroll > lastScroll && currentScroll > 100) ? '-100vh' : '0';
+        if (currentScroll === 0) header.style.top = '0';
+        lastScroll = currentScroll;
+      }
 
-    // ✅ Reset der Scroll-Aktion, wenn man wieder im Hero ist
-    const heroTop = hero.getBoundingClientRect().top;
-    if (heroTop >= 0) {
-      scrollTriggered = false;
-    }
+      // Reset der Auto-Scroll-Sperre nur wenn wir wieder komplett im Hero sind
+      const heroTop = hero.getBoundingClientRect().top;
+      const heroBottom = hero.getBoundingClientRect().bottom;
+      
+      // Nur resetten wenn Hero-Section vollständig sichtbar ist
+      if (heroTop >= -10 && heroBottom > window.innerHeight * 0.8) {
+        autoScrollDone = false;
+      }
+    }, 10);
+  });
+
+  // Reset beim Seitenwechsel oder Refresh
+  window.addEventListener('beforeunload', () => {
+    window.scrollTo(0, 0);
   });
 });
 </script>