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.

assets/scss/style.scss

@@ -1,27 +1,24 @@
 // Color Variables
-{{ with site.Params.variables }}
+$color-primary: #fff;
-$color-primary: {{.color_primary | default "#fff"}};
+$color-secondary: #0AA8A7;
-$color-secondary: {{.color_secondary | default "#0AA8A7"}};
+$text-color: #fff;
-$text-color: {{.text_color | default "#fff"}};
+$text-dark: #222;
-$text-dark: {{.text_dark | default "#222"}};
+$text-light: #737373;
-$text-light: {{.text_light | default "#737373"}};
+$body-bg: #fff;
-$body-bg: {{.body_color | default "#fff"}};
+$border-color: #ECECEC;
-$border-color: {{.border_color | default "#ECECEC"}};
+$black: #000;
-$black: {{.black | default "#000"}};
+$white: #fff;
-$white: {{.white | default "#fff"}};
+$light: #EDF6F5;
-$light: {{.light | default "#EDF6F5"}};
-
 
 // Font Variables
-$font-size: {{.font_size | default "16px"}};
+$font-size: 16px;
-$font-scale: {{.font_scale | default "1.25"}};
+$font-scale: 1.25;
-$font-primary: '{{replace (replaceRE ":[ital,]*[ital@]*[wght@]*[0-9,;]+" "" .font_primary | default "Lato") "+" " "}}', {{.font_primary_type | default "sans-serif"}};
+$font-primary: 'Lato', sans-serif;
-$font-secondary: '{{replace (replaceRE ":[ital,]*[ital@]*[wght@]*[0-9,;]+" "" .font_secondary | default "Lato") "+" " "}}', {{.font_secondary_type | default "sans-serif"}};
+$font-secondary: 'Lato', sans-serif;
-$font-tertiary: '{{replace (replaceRE ":[ital,]*[ital@]*[wght@]*[0-9,;]+" "" .font_tertiary | default "Dosis") "+" " "}}', {{.font_tertiary_type | default "sans-serif"}};
+$font-tertiary: 'Dosis', sans-serif;
-$font-quaternary: '{{replace (replaceRE ":[ital,]*[ital@]*[wght@]*[0-9,;]+" "" .font_quaternary | default "Edu") "+" " "}}', {{.font_quaternary_type | default "sans-serif"}};
+$font-quaternary: 'Edu', sans-serif;
 
-$font-icon: '{{.font_icon | default "Font Awesome 5 Free"}}';
+$font-icon: 'Font Awesome 5 Free';
-{{ end }}
 
 $h1: 80px;
 $h1-md: 34px;

layouts/index.html

@@ -49,41 +49,56 @@ document.addEventListener('DOMContentLoaded', function () {
   const scrolldown = document.querySelector('.scrolldown');
   const header = document.getElementById('mainHeader');
   let lastScroll = window.scrollY;
-  let isScrolling = false;
+  let autoScrollDone = false;
-  let scrollTriggered = 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', () => {
+  scrolldown?.addEventListener('click', (e) => {
-    scrollTriggered = true;
+    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;
 
+    // Debounce wheel events
+    clearTimeout(wheelTimeout);
+    wheelTimeout = setTimeout(() => {
       const heroBottom = hero.getBoundingClientRect().bottom;
       const threshold = 50;
-    if (heroBottom <= window.innerHeight + threshold) {
+
-      isScrolling = true;
+      // Nur wenn wir wirklich am Ende der Hero-Section sind
-      scrollTriggered = true;
+      if (heroBottom <= window.innerHeight + threshold && heroBottom > 0) {
         scrollToTarget();
-      setTimeout(() => {
-        isScrolling = false;
-        scrollTriggered = false; // Reset scrollTriggered to prevent further jumps
-      }, 1000);
       }
+    }, 50);
   }, { passive: true });
 
   // Scroll-Verhalten (Chevron + Header + Reset)
+  let scrollTimeout;
   window.addEventListener('scroll', function () {
+    clearTimeout(scrollTimeout);
+    scrollTimeout = setTimeout(() => {
       // Chevron ausblenden
       if (window.scrollY > 100) {
         scrolldown?.classList.add('hide');
@@ -93,15 +108,26 @@ document.addEventListener('DOMContentLoaded', function () {
 
       // Header verstecken beim Runterscrollen
       const currentScroll = window.scrollY;
-    header.style.top = (currentScroll > lastScroll) ? '-100vh' : '0';
+      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>