hr-design-system-handlebars 1.50.36 → 1.50.38

package/CHANGELOG.md

@@ -1,3 +1,27 @@
+# v1.50.38 (Wed Dec 06 2023)
+
+#### 🐛 Bug Fix
+
+- Dpe 2174 navigation refactoring [#782](https://github.com/mumprod/hr-design-system-handlebars/pull/782) ([@StefanVesper](https://github.com/StefanVesper))
+
+#### Authors: 1
+
+- SonicSoulSurfer ([@StefanVesper](https://github.com/StefanVesper))
+
+---
+
+# v1.50.37 (Wed Dec 06 2023)
+
+#### 🐛 Bug Fix
+
+- DPE-2694 [#781](https://github.com/mumprod/hr-design-system-handlebars/pull/781) ([@vascoeduardo](https://github.com/vascoeduardo))
+
+#### Authors: 1
+
+- Vasco ([@vascoeduardo](https://github.com/vascoeduardo))
+
+---
+
 # v1.50.36 (Tue Dec 05 2023)
 
 #### 🐛 Bug Fix

package/dist/assets/index.css

@@ -1163,6 +1163,9 @@ article.indexText ul {
 .order-4 {
   order: 4;
 }
+.order-5 {
+  order: 5;
+}
 .order-first {
   order: -9999;
 }
@@ -1295,8 +1298,8 @@ article.indexText ul {
 .-mt-6 {
   margin-top: -1.5rem;
 }
-.-mt-8 {
-  margin-top: -2rem;
+.-mt-\[33px\] {
+  margin-top: -33px;
 }
 .-mt-px {
   margin-top: -1px;
@@ -1502,6 +1505,9 @@ article.indexText ul {
 .h-12 {
   height: 3rem;
 }
+.h-16 {
+  height: 4rem;
+}
 .h-2 {
   height: 0.5rem;
 }
@@ -3144,18 +3150,18 @@ article.indexText ul {
   transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
   transition-duration: 150ms;
 }
-.transition-all {
-  transition-property: all;
+.transition-\[margin-top\] {
+  transition-property: margin-top;
   transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
   transition-duration: 150ms;
 }
-.transition-margin-top {
-  transition-property: margin-top;
+.transition-\[max-height\] {
+  transition-property: max-height;
   transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
   transition-duration: 150ms;
 }
-.transition-max-height {
-  transition-property: max-height;
+.transition-all {
+  transition-property: all;
   transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
   transition-duration: 150ms;
 }
@@ -3164,15 +3170,12 @@ article.indexText ul {
   transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
   transition-duration: 150ms;
 }
-.delay-1000 {
-  transition-delay: 1000ms;
-}
-.delay-200 {
-  transition-delay: 200ms;
-}
 .duration-100 {
   transition-duration: 100ms;
 }
+.duration-1000 {
+  transition-duration: 1000ms;
+}
 .duration-200 {
   transition-duration: 200ms;
 }
@@ -3202,7 +3205,7 @@ article.indexText ul {
   border-bottom-color: var(--color-secondary-ds);
 }
 .counter-reset {
-  counter-reset: cnt1701791350665;
+  counter-reset: cnt1701876979005;
 }
 .hyphens-auto {
   -webkit-hyphens: auto;
@@ -3463,7 +3466,7 @@ article.indexText ul {
   --tw-ring-color: rgba(255, 255, 255, 0.5);
 }
 .-ordered {
-  counter-increment: cnt1701791350665 1;
+  counter-increment: cnt1701876979005 1;
 }
 .-ordered::before {
   position: absolute;
@@ -3479,7 +3482,7 @@ article.indexText ul {
   letter-spacing: .0125em;
   --tw-text-opacity: 1;
   color: rgba(0, 0, 0, var(--tw-text-opacity));
-  content: counter(cnt1701791350665);
+  content: counter(cnt1701876979005);
 }
 /*! ****************************/
 /*! DataPolicy stuff           */
@@ -5700,8 +5703,8 @@ article.indexText ul {
     margin-top: -10rem;
   }
 
-  .md\:-mt-8 {
-    margin-top: -2rem;
+  .md\:-mt-\[33px\] {
+    margin-top: -33px;
   }
 
   .md\:mb-0 {
@@ -6129,6 +6132,10 @@ article.indexText ul {
   .md\:filter {
     filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
   }
+
+  .md\:transition-none {
+    transition-property: none;
+  }
     .md\:ar-16-9 {
         aspect-ratio: 16 / 9;
     }
@@ -6714,12 +6721,6 @@ article.indexText ul {
     filter: none;
   }
 
-  .lg\:transition-margin-top {
-    transition-property: margin-top;
-    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
-    transition-duration: 150ms;
-  }
-
   .lg\:duration-500 {
     transition-duration: 500ms;
   }

package/dist/assets/js/components/site_header/flyoutHandler.alpine.js

@@ -12,7 +12,7 @@ export default () => ({
             let a = this.$refs.sectionnavigation.scrollHeight + this.$el.scrollHeight
             let brandNavHeight = this.percent > 0 ? 40 : 0
             if (window.innerWidth < 1024) {
-                if (value == true) {
+                if (value == true) { console.log("true")
                     if (a < window.innerHeight - this.$refs.sectionnavigation.offsetTop) {
                         this.$refs.sectionnavigation.style.maxHeight = a + 'px'
                         this.$refs.sectionnavigation.style.overflowY = 'hidden'
@@ -24,11 +24,13 @@ export default () => ({
                             'px'
                         this.$refs.sectionnavigation.style.overflowY = 'scroll'
                     }
-                } else {
+                } else { 
                     if (a < window.innerHeight - this.$refs.sectionnavigation.offsetTop) {
-                        this.$refs.sectionnavigation.style.overflowY = 'hidden'
+                        this.$refs.sectionnavigation.style.overflowY = 'hidden' 
+                       
                     } else {
                         this.$refs.sectionnavigation.style.overflowY = 'scroll'
+                        console.log("close is true")
                     }
                 }
             }

package/dist/assets/js/components/site_header/mainNavigationHandler.alpine.js

@@ -41,10 +41,10 @@ export default () => ({
             //console.log('Scroll initiated by ' + (window.userScroll == true ? "user" : "browser"));
         }
         // Listeners
-        window.addEventListener('mousedown', mouseDownHandler, false)
-        window.addEventListener('wheel', mouseEvent, false)
-        window.addEventListener('touchmove', mouseEvent, false)
-        window.addEventListener('scroll', this.debounce(scrollHandler, 50), { passive: true })
+        window.addEventListener('mousedown', mouseDownHandler,false)
+        window.addEventListener('wheel', mouseEvent, {passive: true})
+        window.addEventListener('touchmove', mouseEvent, {passive: true})
+        window.addEventListener('scroll', scrollHandler, { passive: true })
     },
     //Holds the percentage of scrolled viewport
     percent: 0,

package/dist/views/components/banner/banner.storybook.hbs

@@ -119,5 +119,8 @@
                 {{/components/banner/header/byline }}
             {{/components/banner/header/title_background }}
         {{/components/banner/header/banner_overlay }} 
-    {{/components/banner/header/banner_wrapper }}          
-</div>
+    {{/components/banner/header/banner_wrapper }}
+    <div class="z-10 grid order-5 grid-page">
+        <div class="h-16 py-2 bg-white col-full sm:col-main">
+    </div>
+</div>           

package/dist/views/components/banner/header/banner_wrapper.hbs

@@ -1,6 +1,6 @@
 <div class="grid grid-page w-full order-2{{#if _hasBannerImage}} overflow-hidden -image{{else}} -text{{/if}}{{~#if _hideOnMobile}} -hideOnMobile{{/if}}">
-    <div role="banner" class="grid col-full sm:col-main relative{{#unless _hasBannerImage}} px-4 md:px-5 lg:px-10 border-b border-gray-boulder pb-4 bg-white dark:bg-black{{/unless}}">
-        <div class="relative {{#if _hasBannerImage}}-hasImage{{~#if _hideOnMobile}} aspect-auto bg-white dark:bg-black{{else}} ar-16-9 sm480:ar-16-7 md:ar-100-27{{/if}}{{/if}}">
+    <div role="banner" class="grid col-full sm:col-main relative{{#unless _hasBannerImage}} px-4 md:px-5 lg:px-10 bg-white dark:bg-black{{/unless}}">
+        <div class="relative {{#if _hasBannerImage}}-hasImage{{~#if _hideOnMobile}} aspect-auto bg-white dark:bg-black{{else}} ar-16-9 sm480:ar-16-7 md:ar-100-27{{/if}}{{else}}pb-4 border-b border-gray-boulder{{/if}}">
             {{> @partial-block }}
         </div>
     </div>

package/dist/views/components/site_header/burger.hbs

@@ -4,17 +4,17 @@
             class="relative w-10 h-10 text-navigation-text tablet:w-18 tablet:h-12 focus:outline-none bg-brand"
             @burger-close.window="burgerClose()"
             @click="$store.burgeropen = !$store.burgeropen" 
-            @click.debounce="burgerClick()" 
+            @click.nextTick="burgerClick()" 
             aria-owns="sectionNav" 
             aria-controls="sectionNav"
             x-effect="$el.setAttribute('aria-expanded', $store.burgeropen);$el.setAttribute('aria-label', $store.burgeropen ? 'Navigation schließen' : 'Navigation öffnen')"
         >
             <span class="sr-only md:hidden">Open main menu</span>
             <div class="absolute block w-6 -mt-px transform -translate-x-1/2 -translate-y-1/2 left-1/2 top-1/2">
-                <span aria-hidden="true" class="absolute block w-full h-0.5 transition duration-500 ease-in-out transform bg-current " :class="$store.burgeropen ? 'rotate-45' : '-mt-2'"></span>
-                <span aria-hidden="true" class="absolute block w-full h-0.5 transition duration-500 ease-in-out transform bg-current" :class="{'opacity-0': $store.burgeropen } "></span>
-                <span aria-hidden="true" class="absolute block w-full h-0.5 transition duration-500 ease-in-out transform bg-current" :class="{'-rotate-45': $store.burgeropen, 'mt-2': ! $store.burgeropen }"></span>
-            </div>
+                <span aria-hidden="true" class="absolute block w-full h-0.5 transition duration-250 ease-in-out transform bg-current " :class="$store.burgeropen ? 'rotate-45' : '-mt-2'"></span>
+                <span aria-hidden="true" class="absolute block w-full h-0.5 transition duration-250 ease-in-out transform bg-current" :class="{'opacity-0': $store.burgeropen } "></span>
+                <span aria-hidden="true" class="absolute block w-full h-0.5 transition duration-250 ease-in-out transform bg-current" :class="{'-rotate-45': $store.burgeropen, 'mt-2': ! $store.burgeropen }"></span>
+            </div> 
         </button>
     </nav>
 </div>

package/dist/views/components/site_header/header.hbs

@@ -3,7 +3,7 @@
         <div x-data 
             id="headerWrapper"
             @resize.window="resetNav()" 
-            :class="shouldBrandNavBeHidden() ? '-mt-8 md:-mt-8' : ''  "
+            :class="shouldBrandNavBeHidden() ? '-mt-[33px] md:-mt-[33px]' : ''  "
             class="{{#if _useSticky }}fixed top-0 left-0{{/if}} flex flex-wrap max-w-full transition-all duration-500 transform font-copy lg:justify-center lg:w-full ">
 
             
@@ -20,7 +20,7 @@
             <div id="serviceNavWrapper" 
                 :class="shouldServiceNavBeHidden() ? '-mt-40' : ''"
                 
-                class="relative flex justify-center order-2 w-full transition-all duration-500 ease-in-out border-b border-servicenavigation-border-color bg-navigation-bg z-120">   
+                class="relative flex justify-center order-2 w-full transition-[margin-top] duration-250 ease-in-out border-b border-servicenavigation-border-color bg-navigation-bg z-120">   
                 <div id="serviceNavMainContainer" 
                     class="flex w-full h-10 lg:container md:h-12 lg:px-10 lg:h-16 z-110">
 
@@ -54,7 +54,7 @@
                 x-ref="sectionnavigation"
                 @toggle-sectionnav.window="toggleSectionNav"
                 :class="shouldSectionNavBeHidden() ? '-mt-40 md:-mt-40 lg:-mt-40' : ''"  
-                class="flex justify-center order-3 w-full overflow-hidden duration-500 transition-max-height lg:border-navigation-border-color [border-image-source:var(--border-navigation-border-image)] [border-image-slice:1] lg:border-b-navigation-border-width lg:transition-margin-top lg:duration-500 tablet:absolute tablet:top-20 tablet:w-half-screen tablet:ml-half-screen max-h-0 lg:overflow-visible md:mt-0 lg:flex lg:max-h-full lg:h-auto bg-navigation-bg z-100 print:hidden"
+                class="flex justify-center order-3 w-full overflow-hidden duration-500 transition-{max-height} lg:border-navigation-border-color [border-image-source:var(--border-navigation-border-image)] [border-image-slice:1] lg:border-b-navigation-border-width lg:transition-{margin-top} lg:duration-500 tablet:absolute tablet:top-20 tablet:w-half-screen tablet:ml-half-screen max-h-0 lg:overflow-visible md:mt-0 lg:flex lg:max-h-full lg:h-auto bg-navigation-bg z-100 print:hidden"
             >   
                 {{> components/site_header/section_navigation/section_navigation }}
             </div>
@@ -85,6 +85,7 @@
             />
     </div>
     <div x-ref="myOverlay">
-        <div x-cloak x-data="overlayHandler()" @click.debounce="overlayWasClicked()" x-show="shouldOverlayBeShown()" class="fixed top-0 left-0 w-screen h-screen bg-gray-800 z-100 lg:hidden opacity-70"></div>
+        <div x-cloak x-data="overlayHandler()" @click.debounce="overlayWasClicked()" x-show="shouldOverlayBeShown()" 
+            class="fixed top-0 left-0 w-screen h-screen bg-gray-800 z-100 lg:hidden opacity-70"></div>
     </div>
 </div>

package/dist/views/components/site_header/navigation_flyout/navigation_flyout.hbs

@@ -1,5 +1,5 @@
 {{#with this.subNavigation}}
-    <div {{#unless ../this.selected}}x-cloak{{/unless}}
+    <div {{#unless ../this.selected}}x-cloak{{/unless}} 
         x-data="flyoutHandler" 
         x-ref="{{getRandom}}"
         id="flyout-{{getRandom}}" 

package/dist/views/components/site_header/section_navigation/section_navigation_item.hbs

@@ -2,13 +2,14 @@
     <li x-data="dropdown"
         @click.outside="dropped = false" 
         @close-servicemenu.window="dropped = false" 
-        :class="dropped ? 'border-b-0 lg:bg-white lg:text-primary h-auto' : 'h-10 lg:hover:underline'" 
-        class="flex flex-wrap justify-start order-2 w-full list-none border-b border-navigation-border-color text-navigation-text sb-section-navigation-item first:lg:-ml-4 md:pl-0 lg:last:pr-8 lg:first:pl-0 first:font-normal last:border-b-0 lg:border-0 lg:w-auto bg-navigation-bg lg:rounded-t">  
+        :class="dropped ? 'border-b-0 lg:bg-white lg:text-primary ' : ' lg:hover:underline'" 
+        class="flex flex-wrap justify-start order-2 w-full list-none transition-[max-height] md:transition-none duration-1000 ease-out border-b border-navigation-border-color text-navigation-text sb-section-navigation-item first:lg:-ml-4 md:pl-0 lg:last:pr-8 lg:first:pl-0 first:font-normal last:border-b-0 lg:border-0 lg:w-auto bg-navigation-bg lg:rounded-t">  
         
         {{#if this.isCluster ~}}
             {{!-- Gilt z.B. für REGIONEN:  --}}        
             <button id="button-{{nextRandom}}-1" 
-                @click.debounce.100ms="toggle(); correctFlyoutPos()" 
+                @click="toggle()" 
+                @click.nextTick="correctFlyoutPos()"
                 @resize.window="dropped=false; correctFlyoutPos()"
                 :class="dropped ? 'lg:underline lg:text-primary font-bold lg:font-normal' : 'font-normal'"
                 class="{{#if this.selected}}-currentSection lg:justify-center !font-bold {{/if}}link-focus-inset-white js-load pl-4 lg:pl-4 lg:pr-4 flex flex-auto w-full justify-between lg:flex-initial h-10 lg:w-full items-center leading-4" 

package/dist/views/components/site_header/service_logo.hbs

@@ -4,7 +4,7 @@
 
         <div x-cloak 
             {{#if _useSticky}}
-                class="absolute {{#if _isFooter}}h-10 lg:h-12 {{else}}brand-logo-size md:brand-logo-size-md lg:brand-logo-size-lg flex transition-opacity duration-500 ease-in-out h-10 lg:h-[3.875rem] w-12 lg:w-[3.875rem]{{/if}}" 
+                class="absolute {{#if _isFooter}}h-10 lg:h-12 {{else}}brand-logo-size md:brand-logo-size-md lg:brand-logo-size-lg flex transition-opacity duration-250 ease-in h-10 lg:h-[3.875rem] w-12 lg:w-[3.875rem]{{/if}}" 
                 :class="`${percent}` < 50 ? 'opacity-0' : 'opacity-100'"
             {{else}}
                 class="relative flex h-10 {{#unless _isFooter}}brand-logo-size {{/unless}} md:hidden"
@@ -16,8 +16,8 @@
         
         <div 
             {{#if _useSticky}}
-                class="w-auto {{#if _isFooter}}h-10 lg:h-12 {{else}}brand-logo-size md:brand-logo-size-md lg:brand-logo-size-lg transition-opacity duration-500 ease-in-out h-12 lg:h-[3.875rem]{{/if}}"
-                :class="`${percent}` < 50 ? 'delay-1000 opacity-100' : 'delay-200 opacity-0 hidden'"
+                class="w-auto {{#if _isFooter}}h-10 lg:h-12 {{else}}brand-logo-size md:brand-logo-size-md lg:brand-logo-size-lg transition-opacity duration-250 ease-in-out h-12 lg:h-[3.875rem]{{/if}}"
+                :class="`${percent}` < 50 ? ' opacity-100' : 'opacity-0 '"
             {{else}}    
                 class="md:flex hidden justify-start w-auto {{#if _isFooter}}h-10 lg:h-12 {{else}}brand-logo-size md:brand-logo-size-md lg:brand-logo-size-lg h-12 lg:h-[3.875rem]{{/if}} "
             {{/if}}
@@ -26,4 +26,7 @@
                 class="w-auto h-full logo-desk" alt="{{loca "meta_application_name"}}">     
         </div>
           
-</a>
+</a>
+<script>
+    percent = 0
+</script>

package/dist/views/components/site_header/service_navigation/service_list.hbs

@@ -3,7 +3,7 @@
     @click.outside="$store.serviceNavIsOpen = false; toggleScrolling(!$store.searchFieldOpen && !$store.burgeropen)"
     x-ref="serviceList"
     :class="shouldServiceIconsBeHidden() ? '-mt-40' : ''"
-    class="absolute left-0 flex justify-center flex-initial w-full h-10 max-w-full align-top duration-500 ease-in-out border-b border-navigation-border-color sb-service-list transition-margin-top -z-40 md:z-100 md:h-12 top-[41px] bg-navigation-bg md:border-0 md:top-auto md:w-auto md:left-auto md:static md:justify-end md:flex md:flex-auto lg:h-16 lg:pl-0 lg:pr-4 lg:w-3/4 "
+    class="absolute left-0 flex justify-center flex-initial w-full h-10 max-w-full align-top duration-500 ease-in-out border-b border-navigation-border-color sb-service-list transition-[margin-top] -z-40 md:z-100 md:h-12 top-[41px] bg-navigation-bg md:border-0 md:top-auto md:w-auto md:left-auto md:static md:justify-end md:flex md:flex-auto lg:h-16 lg:pl-0 lg:pr-4 lg:w-3/4 "
 >
     {{#with this.serviceNavigationSSILinks}}
         <ul class="flex justify-around w-full h-full -itemCount-{{ count }} lg:w-auto lg:justify-end lg:pt-1">

package/dist/views/components/site_header/service_navigation/service_navigation_item.hbs

@@ -3,17 +3,14 @@
         {{#if this.subNavigation}} 
             <button 
                 id="{{nextRandom}}" 
-                @click.debounce.100ms="toggleServiceNav()" 
+                @click="toggleServiceNav()" 
                 @click.outside="dropped = false;"
                 @close-servicemenu.window="dropped = false; $store.serviceNavIsOpen = false"
-
                 x-data="dropdown"
                 id="{{getRandom}}"
-                
                 class="js-load flex flex-col items-center justify-center h-full px-4 text-left lg:justify-start lg:px-3 lg:pt-1 lg:hover:underline lg:relative lg:rounded-t lg:border-0 lg:left-0 text-navigation-icons link-focus-inset-white {{#if this.selected}}-currentService{{/if}}"
 
                 :class="dropped ? 'bg-white fill-current text-primary lg:border-0 lg:underline' : ''" 
-
                 aria-owns="flyout-{{getRandom}}" 
                 aria-controls="flyout-{{getRandom}}"
                 x-effect="$el.setAttribute('aria-expanded', dropped);$el.setAttribute('aria-label', dropped ? '{{this.text}}-Menü schließen' : '{{this.text}}-Menü öffnen')"

package/dist/views_static/components/banner/banner.storybook.hbs

@@ -119,5 +119,8 @@
                 {{/components/banner/header/byline }}
             {{/components/banner/header/title_background }}
         {{/components/banner/header/banner_overlay }} 
-    {{/components/banner/header/banner_wrapper }}          
-</div>
+    {{/components/banner/header/banner_wrapper }}
+    <div class="z-10 grid order-5 grid-page">
+        <div class="h-16 py-2 bg-white col-full sm:col-main">
+    </div>
+</div>           

package/dist/views_static/components/banner/header/banner_wrapper.hbs

@@ -1,6 +1,6 @@
 <div class="grid grid-page w-full order-2{{#if _hasBannerImage}} overflow-hidden -image{{else}} -text{{/if}}{{~#if _hideOnMobile}} -hideOnMobile{{/if}}">
-    <div role="banner" class="grid col-full sm:col-main relative{{#unless _hasBannerImage}} px-4 md:px-5 lg:px-10 border-b border-gray-boulder pb-4 bg-white dark:bg-black{{/unless}}">
-        <div class="relative {{#if _hasBannerImage}}-hasImage{{~#if _hideOnMobile}} aspect-auto bg-white dark:bg-black{{else}} ar-16-9 sm480:ar-16-7 md:ar-100-27{{/if}}{{/if}}">
+    <div role="banner" class="grid col-full sm:col-main relative{{#unless _hasBannerImage}} px-4 md:px-5 lg:px-10 bg-white dark:bg-black{{/unless}}">
+        <div class="relative {{#if _hasBannerImage}}-hasImage{{~#if _hideOnMobile}} aspect-auto bg-white dark:bg-black{{else}} ar-16-9 sm480:ar-16-7 md:ar-100-27{{/if}}{{else}}pb-4 border-b border-gray-boulder{{/if}}">
             {{> @partial-block }}
         </div>
     </div>

package/dist/views_static/components/site_header/burger.hbs

@@ -4,17 +4,17 @@
             class="relative w-10 h-10 text-navigation-text tablet:w-18 tablet:h-12 focus:outline-none bg-brand"
             @burger-close.window="burgerClose()"
             @click="$store.burgeropen = !$store.burgeropen" 
-            @click.debounce="burgerClick()" 
+            @click.nextTick="burgerClick()" 
             aria-owns="sectionNav" 
             aria-controls="sectionNav"
             x-effect="$el.setAttribute('aria-expanded', $store.burgeropen);$el.setAttribute('aria-label', $store.burgeropen ? 'Navigation schließen' : 'Navigation öffnen')"
         >
             <span class="sr-only md:hidden">Open main menu</span>
             <div class="absolute block w-6 -mt-px transform -translate-x-1/2 -translate-y-1/2 left-1/2 top-1/2">
-                <span aria-hidden="true" class="absolute block w-full h-0.5 transition duration-500 ease-in-out transform bg-current " :class="$store.burgeropen ? 'rotate-45' : '-mt-2'"></span>
-                <span aria-hidden="true" class="absolute block w-full h-0.5 transition duration-500 ease-in-out transform bg-current" :class="{'opacity-0': $store.burgeropen } "></span>
-                <span aria-hidden="true" class="absolute block w-full h-0.5 transition duration-500 ease-in-out transform bg-current" :class="{'-rotate-45': $store.burgeropen, 'mt-2': ! $store.burgeropen }"></span>
-            </div>
+                <span aria-hidden="true" class="absolute block w-full h-0.5 transition duration-250 ease-in-out transform bg-current " :class="$store.burgeropen ? 'rotate-45' : '-mt-2'"></span>
+                <span aria-hidden="true" class="absolute block w-full h-0.5 transition duration-250 ease-in-out transform bg-current" :class="{'opacity-0': $store.burgeropen } "></span>
+                <span aria-hidden="true" class="absolute block w-full h-0.5 transition duration-250 ease-in-out transform bg-current" :class="{'-rotate-45': $store.burgeropen, 'mt-2': ! $store.burgeropen }"></span>
+            </div> 
         </button>
     </nav>
 </div>

package/dist/views_static/components/site_header/header.hbs

@@ -3,7 +3,7 @@
         <div x-data 
             id="headerWrapper"
             @resize.window="resetNav()" 
-            :class="shouldBrandNavBeHidden() ? '-mt-8 md:-mt-8' : ''  "
+            :class="shouldBrandNavBeHidden() ? '-mt-[33px] md:-mt-[33px]' : ''  "
             class="{{#if _useSticky }}fixed top-0 left-0{{/if}} flex flex-wrap max-w-full transition-all duration-500 transform font-copy lg:justify-center lg:w-full ">
 
             
@@ -20,7 +20,7 @@
             <div id="serviceNavWrapper" 
                 :class="shouldServiceNavBeHidden() ? '-mt-40' : ''"
                 
-                class="relative flex justify-center order-2 w-full transition-all duration-500 ease-in-out border-b border-servicenavigation-border-color bg-navigation-bg z-120">   
+                class="relative flex justify-center order-2 w-full transition-[margin-top] duration-250 ease-in-out border-b border-servicenavigation-border-color bg-navigation-bg z-120">   
                 <div id="serviceNavMainContainer" 
                     class="flex w-full h-10 lg:container md:h-12 lg:px-10 lg:h-16 z-110">
 
@@ -54,7 +54,7 @@
                 x-ref="sectionnavigation"
                 @toggle-sectionnav.window="toggleSectionNav"
                 :class="shouldSectionNavBeHidden() ? '-mt-40 md:-mt-40 lg:-mt-40' : ''"  
-                class="flex justify-center order-3 w-full overflow-hidden duration-500 transition-max-height lg:border-navigation-border-color [border-image-source:var(--border-navigation-border-image)] [border-image-slice:1] lg:border-b-navigation-border-width lg:transition-margin-top lg:duration-500 tablet:absolute tablet:top-20 tablet:w-half-screen tablet:ml-half-screen max-h-0 lg:overflow-visible md:mt-0 lg:flex lg:max-h-full lg:h-auto bg-navigation-bg z-100 print:hidden"
+                class="flex justify-center order-3 w-full overflow-hidden duration-500 transition-{max-height} lg:border-navigation-border-color [border-image-source:var(--border-navigation-border-image)] [border-image-slice:1] lg:border-b-navigation-border-width lg:transition-{margin-top} lg:duration-500 tablet:absolute tablet:top-20 tablet:w-half-screen tablet:ml-half-screen max-h-0 lg:overflow-visible md:mt-0 lg:flex lg:max-h-full lg:h-auto bg-navigation-bg z-100 print:hidden"
             >   
                 {{> components/site_header/section_navigation/section_navigation }}
             </div>
@@ -85,6 +85,7 @@
             />
     </div>
     <div x-ref="myOverlay">
-        <div x-cloak x-data="overlayHandler()" @click.debounce="overlayWasClicked()" x-show="shouldOverlayBeShown()" class="fixed top-0 left-0 w-screen h-screen bg-gray-800 z-100 lg:hidden opacity-70"></div>
+        <div x-cloak x-data="overlayHandler()" @click.debounce="overlayWasClicked()" x-show="shouldOverlayBeShown()" 
+            class="fixed top-0 left-0 w-screen h-screen bg-gray-800 z-100 lg:hidden opacity-70"></div>
     </div>
 </div>

package/dist/views_static/components/site_header/navigation_flyout/navigation_flyout.hbs

@@ -1,5 +1,5 @@
 {{#with this.subNavigation}}
-    <div {{#unless ../this.selected}}x-cloak{{/unless}}
+    <div {{#unless ../this.selected}}x-cloak{{/unless}} 
         x-data="flyoutHandler" 
         x-ref="{{getRandom}}"
         id="flyout-{{getRandom}}" 

package/dist/views_static/components/site_header/section_navigation/section_navigation_item.hbs

@@ -2,13 +2,14 @@
     <li x-data="dropdown"
         @click.outside="dropped = false" 
         @close-servicemenu.window="dropped = false" 
-        :class="dropped ? 'border-b-0 lg:bg-white lg:text-primary h-auto' : 'h-10 lg:hover:underline'" 
-        class="flex flex-wrap justify-start order-2 w-full list-none border-b border-navigation-border-color text-navigation-text sb-section-navigation-item first:lg:-ml-4 md:pl-0 lg:last:pr-8 lg:first:pl-0 first:font-normal last:border-b-0 lg:border-0 lg:w-auto bg-navigation-bg lg:rounded-t">  
+        :class="dropped ? 'border-b-0 lg:bg-white lg:text-primary ' : ' lg:hover:underline'" 
+        class="flex flex-wrap justify-start order-2 w-full list-none transition-[max-height] md:transition-none duration-1000 ease-out border-b border-navigation-border-color text-navigation-text sb-section-navigation-item first:lg:-ml-4 md:pl-0 lg:last:pr-8 lg:first:pl-0 first:font-normal last:border-b-0 lg:border-0 lg:w-auto bg-navigation-bg lg:rounded-t">  
         
         {{#if this.isCluster ~}}
             {{!-- Gilt z.B. für REGIONEN:  --}}        
             <button id="button-{{nextRandom}}-1" 
-                @click.debounce.100ms="toggle(); correctFlyoutPos()" 
+                @click="toggle()" 
+                @click.nextTick="correctFlyoutPos()"
                 @resize.window="dropped=false; correctFlyoutPos()"
                 :class="dropped ? 'lg:underline lg:text-primary font-bold lg:font-normal' : 'font-normal'"
                 class="{{#if this.selected}}-currentSection lg:justify-center !font-bold {{/if}}link-focus-inset-white js-load pl-4 lg:pl-4 lg:pr-4 flex flex-auto w-full justify-between lg:flex-initial h-10 lg:w-full items-center leading-4" 

package/dist/views_static/components/site_header/service_logo.hbs

@@ -4,7 +4,7 @@
 
         <div x-cloak 
             {{#if _useSticky}}
-                class="absolute {{#if _isFooter}}h-10 lg:h-12 {{else}}brand-logo-size md:brand-logo-size-md lg:brand-logo-size-lg flex transition-opacity duration-500 ease-in-out h-10 lg:h-[3.875rem] w-12 lg:w-[3.875rem]{{/if}}" 
+                class="absolute {{#if _isFooter}}h-10 lg:h-12 {{else}}brand-logo-size md:brand-logo-size-md lg:brand-logo-size-lg flex transition-opacity duration-250 ease-in h-10 lg:h-[3.875rem] w-12 lg:w-[3.875rem]{{/if}}" 
                 :class="`${percent}` < 50 ? 'opacity-0' : 'opacity-100'"
             {{else}}
                 class="relative flex h-10 {{#unless _isFooter}}brand-logo-size {{/unless}} md:hidden"
@@ -16,8 +16,8 @@
         
         <div 
             {{#if _useSticky}}
-                class="w-auto {{#if _isFooter}}h-10 lg:h-12 {{else}}brand-logo-size md:brand-logo-size-md lg:brand-logo-size-lg transition-opacity duration-500 ease-in-out h-12 lg:h-[3.875rem]{{/if}}"
-                :class="`${percent}` < 50 ? 'delay-1000 opacity-100' : 'delay-200 opacity-0 hidden'"
+                class="w-auto {{#if _isFooter}}h-10 lg:h-12 {{else}}brand-logo-size md:brand-logo-size-md lg:brand-logo-size-lg transition-opacity duration-250 ease-in-out h-12 lg:h-[3.875rem]{{/if}}"
+                :class="`${percent}` < 50 ? ' opacity-100' : 'opacity-0 '"
             {{else}}    
                 class="md:flex hidden justify-start w-auto {{#if _isFooter}}h-10 lg:h-12 {{else}}brand-logo-size md:brand-logo-size-md lg:brand-logo-size-lg h-12 lg:h-[3.875rem]{{/if}} "
             {{/if}}
@@ -26,4 +26,7 @@
                 class="w-auto h-full logo-desk" alt="{{loca "meta_application_name"}}">     
         </div>
           
-</a>
+</a>
+<script>
+    percent = 0
+</script>

package/dist/views_static/components/site_header/service_navigation/service_list.hbs

@@ -3,7 +3,7 @@
     @click.outside="$store.serviceNavIsOpen = false; toggleScrolling(!$store.searchFieldOpen && !$store.burgeropen)"
     x-ref="serviceList"
     :class="shouldServiceIconsBeHidden() ? '-mt-40' : ''"
-    class="absolute left-0 flex justify-center flex-initial w-full h-10 max-w-full align-top duration-500 ease-in-out border-b border-navigation-border-color sb-service-list transition-margin-top -z-40 md:z-100 md:h-12 top-[41px] bg-navigation-bg md:border-0 md:top-auto md:w-auto md:left-auto md:static md:justify-end md:flex md:flex-auto lg:h-16 lg:pl-0 lg:pr-4 lg:w-3/4 "
+    class="absolute left-0 flex justify-center flex-initial w-full h-10 max-w-full align-top duration-500 ease-in-out border-b border-navigation-border-color sb-service-list transition-[margin-top] -z-40 md:z-100 md:h-12 top-[41px] bg-navigation-bg md:border-0 md:top-auto md:w-auto md:left-auto md:static md:justify-end md:flex md:flex-auto lg:h-16 lg:pl-0 lg:pr-4 lg:w-3/4 "
 >
     {{#with this.serviceNavigationSSILinks}}
         <ul class="flex justify-around w-full h-full -itemCount-{{ count }} lg:w-auto lg:justify-end lg:pt-1">

package/dist/views_static/components/site_header/service_navigation/service_navigation_item.hbs

@@ -3,17 +3,14 @@
         {{#if this.subNavigation}} 
             <button 
                 id="{{nextRandom}}" 
-                @click.debounce.100ms="toggleServiceNav()" 
+                @click="toggleServiceNav()" 
                 @click.outside="dropped = false;"
                 @close-servicemenu.window="dropped = false; $store.serviceNavIsOpen = false"
-
                 x-data="dropdown"
                 id="{{getRandom}}"
-                
                 class="js-load flex flex-col items-center justify-center h-full px-4 text-left lg:justify-start lg:px-3 lg:pt-1 lg:hover:underline lg:relative lg:rounded-t lg:border-0 lg:left-0 text-navigation-icons link-focus-inset-white {{#if this.selected}}-currentService{{/if}}"
 
                 :class="dropped ? 'bg-white fill-current text-primary lg:border-0 lg:underline' : ''" 
-
                 aria-owns="flyout-{{getRandom}}" 
                 aria-controls="flyout-{{getRandom}}"
                 x-effect="$el.setAttribute('aria-expanded', dropped);$el.setAttribute('aria-label', dropped ? '{{this.text}}-Menü schließen' : '{{this.text}}-Menü öffnen')"

package/package.json

@@ -6,7 +6,7 @@
     "license": "MIT",
     "main": "dist/index.js",
     "repository": "https://github.com/szuelch/hr-design-system-handlebars",
-    "version": "1.50.36",
+    "version": "1.50.38",
     "scripts": {
         "test": "echo \"Error: no test specified\" && exit 1",
         "storybook": "storybook dev -p 6006 public",

package/src/stories/views/components/banner/banner.storybook.hbs

@@ -119,5 +119,8 @@
                 {{/components/banner/header/byline }}
             {{/components/banner/header/title_background }}
         {{/components/banner/header/banner_overlay }} 
-    {{/components/banner/header/banner_wrapper }}          
-</div>
+    {{/components/banner/header/banner_wrapper }}
+    <div class="z-10 grid order-5 grid-page">
+        <div class="h-16 py-2 bg-white col-full sm:col-main">
+    </div>
+</div>           

package/src/stories/views/components/banner/header/banner_wrapper.hbs

@@ -1,6 +1,6 @@
 <div class="grid grid-page w-full order-2{{#if _hasBannerImage}} overflow-hidden -image{{else}} -text{{/if}}{{~#if _hideOnMobile}} -hideOnMobile{{/if}}">
-    <div role="banner" class="grid col-full sm:col-main relative{{#unless _hasBannerImage}} px-4 md:px-5 lg:px-10 border-b border-gray-boulder pb-4 bg-white dark:bg-black{{/unless}}">
-        <div class="relative {{#if _hasBannerImage}}-hasImage{{~#if _hideOnMobile}} aspect-auto bg-white dark:bg-black{{else}} ar-16-9 sm480:ar-16-7 md:ar-100-27{{/if}}{{/if}}">
+    <div role="banner" class="grid col-full sm:col-main relative{{#unless _hasBannerImage}} px-4 md:px-5 lg:px-10 bg-white dark:bg-black{{/unless}}">
+        <div class="relative {{#if _hasBannerImage}}-hasImage{{~#if _hideOnMobile}} aspect-auto bg-white dark:bg-black{{else}} ar-16-9 sm480:ar-16-7 md:ar-100-27{{/if}}{{else}}pb-4 border-b border-gray-boulder{{/if}}">
             {{> @partial-block }}
         </div>
     </div>

package/src/stories/views/components/site_header/burger.hbs

@@ -4,17 +4,17 @@
             class="relative w-10 h-10 text-navigation-text tablet:w-18 tablet:h-12 focus:outline-none bg-brand"
             @burger-close.window="burgerClose()"
             @click="$store.burgeropen = !$store.burgeropen" 
-            @click.debounce="burgerClick()" 
+            @click.nextTick="burgerClick()" 
             aria-owns="sectionNav" 
             aria-controls="sectionNav"
             x-effect="$el.setAttribute('aria-expanded', $store.burgeropen);$el.setAttribute('aria-label', $store.burgeropen ? 'Navigation schließen' : 'Navigation öffnen')"
         >
             <span class="sr-only md:hidden">Open main menu</span>
             <div class="absolute block w-6 -mt-px transform -translate-x-1/2 -translate-y-1/2 left-1/2 top-1/2">
-                <span aria-hidden="true" class="absolute block w-full h-0.5 transition duration-500 ease-in-out transform bg-current " :class="$store.burgeropen ? 'rotate-45' : '-mt-2'"></span>
-                <span aria-hidden="true" class="absolute block w-full h-0.5 transition duration-500 ease-in-out transform bg-current" :class="{'opacity-0': $store.burgeropen } "></span>
-                <span aria-hidden="true" class="absolute block w-full h-0.5 transition duration-500 ease-in-out transform bg-current" :class="{'-rotate-45': $store.burgeropen, 'mt-2': ! $store.burgeropen }"></span>
-            </div>
+                <span aria-hidden="true" class="absolute block w-full h-0.5 transition duration-250 ease-in-out transform bg-current " :class="$store.burgeropen ? 'rotate-45' : '-mt-2'"></span>
+                <span aria-hidden="true" class="absolute block w-full h-0.5 transition duration-250 ease-in-out transform bg-current" :class="{'opacity-0': $store.burgeropen } "></span>
+                <span aria-hidden="true" class="absolute block w-full h-0.5 transition duration-250 ease-in-out transform bg-current" :class="{'-rotate-45': $store.burgeropen, 'mt-2': ! $store.burgeropen }"></span>
+            </div> 
         </button>
     </nav>
 </div>

package/src/stories/views/components/site_header/flyoutHandler.alpine.js

@@ -12,7 +12,7 @@ export default () => ({
             let a = this.$refs.sectionnavigation.scrollHeight + this.$el.scrollHeight
             let brandNavHeight = this.percent > 0 ? 40 : 0
             if (window.innerWidth < 1024) {
-                if (value == true) {
+                if (value == true) { console.log("true")
                     if (a < window.innerHeight - this.$refs.sectionnavigation.offsetTop) {
                         this.$refs.sectionnavigation.style.maxHeight = a + 'px'
                         this.$refs.sectionnavigation.style.overflowY = 'hidden'
@@ -24,11 +24,13 @@ export default () => ({
                             'px'
                         this.$refs.sectionnavigation.style.overflowY = 'scroll'
                     }
-                } else {
+                } else { 
                     if (a < window.innerHeight - this.$refs.sectionnavigation.offsetTop) {
-                        this.$refs.sectionnavigation.style.overflowY = 'hidden'
+                        this.$refs.sectionnavigation.style.overflowY = 'hidden' 
+                       
                     } else {
                         this.$refs.sectionnavigation.style.overflowY = 'scroll'
+                        console.log("close is true")
                     }
                 }
             }

package/src/stories/views/components/site_header/header.hbs

@@ -3,7 +3,7 @@
         <div x-data 
             id="headerWrapper"
             @resize.window="resetNav()" 
-            :class="shouldBrandNavBeHidden() ? '-mt-8 md:-mt-8' : ''  "
+            :class="shouldBrandNavBeHidden() ? '-mt-[33px] md:-mt-[33px]' : ''  "
             class="{{#if _useSticky }}fixed top-0 left-0{{/if}} flex flex-wrap max-w-full transition-all duration-500 transform font-copy lg:justify-center lg:w-full ">
 
             
@@ -20,7 +20,7 @@
             <div id="serviceNavWrapper" 
                 :class="shouldServiceNavBeHidden() ? '-mt-40' : ''"
                 
-                class="relative flex justify-center order-2 w-full transition-all duration-500 ease-in-out border-b border-servicenavigation-border-color bg-navigation-bg z-120">   
+                class="relative flex justify-center order-2 w-full transition-[margin-top] duration-250 ease-in-out border-b border-servicenavigation-border-color bg-navigation-bg z-120">   
                 <div id="serviceNavMainContainer" 
                     class="flex w-full h-10 lg:container md:h-12 lg:px-10 lg:h-16 z-110">
 
@@ -54,7 +54,7 @@
                 x-ref="sectionnavigation"
                 @toggle-sectionnav.window="toggleSectionNav"
                 :class="shouldSectionNavBeHidden() ? '-mt-40 md:-mt-40 lg:-mt-40' : ''"  
-                class="flex justify-center order-3 w-full overflow-hidden duration-500 transition-max-height lg:border-navigation-border-color [border-image-source:var(--border-navigation-border-image)] [border-image-slice:1] lg:border-b-navigation-border-width lg:transition-margin-top lg:duration-500 tablet:absolute tablet:top-20 tablet:w-half-screen tablet:ml-half-screen max-h-0 lg:overflow-visible md:mt-0 lg:flex lg:max-h-full lg:h-auto bg-navigation-bg z-100 print:hidden"
+                class="flex justify-center order-3 w-full overflow-hidden duration-500 transition-{max-height} lg:border-navigation-border-color [border-image-source:var(--border-navigation-border-image)] [border-image-slice:1] lg:border-b-navigation-border-width lg:transition-{margin-top} lg:duration-500 tablet:absolute tablet:top-20 tablet:w-half-screen tablet:ml-half-screen max-h-0 lg:overflow-visible md:mt-0 lg:flex lg:max-h-full lg:h-auto bg-navigation-bg z-100 print:hidden"
             >   
                 {{> components/site_header/section_navigation/section_navigation }}
             </div>
@@ -85,6 +85,7 @@
             />
     </div>
     <div x-ref="myOverlay">
-        <div x-cloak x-data="overlayHandler()" @click.debounce="overlayWasClicked()" x-show="shouldOverlayBeShown()" class="fixed top-0 left-0 w-screen h-screen bg-gray-800 z-100 lg:hidden opacity-70"></div>
+        <div x-cloak x-data="overlayHandler()" @click.debounce="overlayWasClicked()" x-show="shouldOverlayBeShown()" 
+            class="fixed top-0 left-0 w-screen h-screen bg-gray-800 z-100 lg:hidden opacity-70"></div>
     </div>
 </div>

package/src/stories/views/components/site_header/mainNavigationHandler.alpine.js

@@ -41,10 +41,10 @@ export default () => ({
             //console.log('Scroll initiated by ' + (window.userScroll == true ? "user" : "browser"));
         }
         // Listeners
-        window.addEventListener('mousedown', mouseDownHandler, false)
-        window.addEventListener('wheel', mouseEvent, false)
-        window.addEventListener('touchmove', mouseEvent, false)
-        window.addEventListener('scroll', this.debounce(scrollHandler, 50), { passive: true })
+        window.addEventListener('mousedown', mouseDownHandler,false)
+        window.addEventListener('wheel', mouseEvent, {passive: true})
+        window.addEventListener('touchmove', mouseEvent, {passive: true})
+        window.addEventListener('scroll', scrollHandler, { passive: true })
     },
     //Holds the percentage of scrolled viewport
     percent: 0,

package/src/stories/views/components/site_header/navigation_flyout/navigation_flyout.hbs

@@ -1,5 +1,5 @@
 {{#with this.subNavigation}}
-    <div {{#unless ../this.selected}}x-cloak{{/unless}}
+    <div {{#unless ../this.selected}}x-cloak{{/unless}} 
         x-data="flyoutHandler" 
         x-ref="{{getRandom}}"
         id="flyout-{{getRandom}}" 

package/src/stories/views/components/site_header/section_navigation/section_navigation_item.hbs

@@ -2,13 +2,14 @@
     <li x-data="dropdown"
         @click.outside="dropped = false" 
         @close-servicemenu.window="dropped = false" 
-        :class="dropped ? 'border-b-0 lg:bg-white lg:text-primary h-auto' : 'h-10 lg:hover:underline'" 
-        class="flex flex-wrap justify-start order-2 w-full list-none border-b border-navigation-border-color text-navigation-text sb-section-navigation-item first:lg:-ml-4 md:pl-0 lg:last:pr-8 lg:first:pl-0 first:font-normal last:border-b-0 lg:border-0 lg:w-auto bg-navigation-bg lg:rounded-t">  
+        :class="dropped ? 'border-b-0 lg:bg-white lg:text-primary ' : ' lg:hover:underline'" 
+        class="flex flex-wrap justify-start order-2 w-full list-none transition-[max-height] md:transition-none duration-1000 ease-out border-b border-navigation-border-color text-navigation-text sb-section-navigation-item first:lg:-ml-4 md:pl-0 lg:last:pr-8 lg:first:pl-0 first:font-normal last:border-b-0 lg:border-0 lg:w-auto bg-navigation-bg lg:rounded-t">  
         
         {{#if this.isCluster ~}}
             {{!-- Gilt z.B. für REGIONEN:  --}}        
             <button id="button-{{nextRandom}}-1" 
-                @click.debounce.100ms="toggle(); correctFlyoutPos()" 
+                @click="toggle()" 
+                @click.nextTick="correctFlyoutPos()"
                 @resize.window="dropped=false; correctFlyoutPos()"
                 :class="dropped ? 'lg:underline lg:text-primary font-bold lg:font-normal' : 'font-normal'"
                 class="{{#if this.selected}}-currentSection lg:justify-center !font-bold {{/if}}link-focus-inset-white js-load pl-4 lg:pl-4 lg:pr-4 flex flex-auto w-full justify-between lg:flex-initial h-10 lg:w-full items-center leading-4" 

package/src/stories/views/components/site_header/service_logo.hbs

@@ -4,7 +4,7 @@
 
         <div x-cloak 
             {{#if _useSticky}}
-                class="absolute {{#if _isFooter}}h-10 lg:h-12 {{else}}brand-logo-size md:brand-logo-size-md lg:brand-logo-size-lg flex transition-opacity duration-500 ease-in-out h-10 lg:h-[3.875rem] w-12 lg:w-[3.875rem]{{/if}}" 
+                class="absolute {{#if _isFooter}}h-10 lg:h-12 {{else}}brand-logo-size md:brand-logo-size-md lg:brand-logo-size-lg flex transition-opacity duration-250 ease-in h-10 lg:h-[3.875rem] w-12 lg:w-[3.875rem]{{/if}}" 
                 :class="`${percent}` < 50 ? 'opacity-0' : 'opacity-100'"
             {{else}}
                 class="relative flex h-10 {{#unless _isFooter}}brand-logo-size {{/unless}} md:hidden"
@@ -16,8 +16,8 @@
         
         <div 
             {{#if _useSticky}}
-                class="w-auto {{#if _isFooter}}h-10 lg:h-12 {{else}}brand-logo-size md:brand-logo-size-md lg:brand-logo-size-lg transition-opacity duration-500 ease-in-out h-12 lg:h-[3.875rem]{{/if}}"
-                :class="`${percent}` < 50 ? 'delay-1000 opacity-100' : 'delay-200 opacity-0 hidden'"
+                class="w-auto {{#if _isFooter}}h-10 lg:h-12 {{else}}brand-logo-size md:brand-logo-size-md lg:brand-logo-size-lg transition-opacity duration-250 ease-in-out h-12 lg:h-[3.875rem]{{/if}}"
+                :class="`${percent}` < 50 ? ' opacity-100' : 'opacity-0 '"
             {{else}}    
                 class="md:flex hidden justify-start w-auto {{#if _isFooter}}h-10 lg:h-12 {{else}}brand-logo-size md:brand-logo-size-md lg:brand-logo-size-lg h-12 lg:h-[3.875rem]{{/if}} "
             {{/if}}
@@ -26,4 +26,7 @@
                 class="w-auto h-full logo-desk" alt="{{loca "meta_application_name"}}">     
         </div>
           
-</a>
+</a>
+<script>
+    percent = 0
+</script>

package/src/stories/views/components/site_header/service_navigation/service_list.hbs

@@ -3,7 +3,7 @@
     @click.outside="$store.serviceNavIsOpen = false; toggleScrolling(!$store.searchFieldOpen && !$store.burgeropen)"
     x-ref="serviceList"
     :class="shouldServiceIconsBeHidden() ? '-mt-40' : ''"
-    class="absolute left-0 flex justify-center flex-initial w-full h-10 max-w-full align-top duration-500 ease-in-out border-b border-navigation-border-color sb-service-list transition-margin-top -z-40 md:z-100 md:h-12 top-[41px] bg-navigation-bg md:border-0 md:top-auto md:w-auto md:left-auto md:static md:justify-end md:flex md:flex-auto lg:h-16 lg:pl-0 lg:pr-4 lg:w-3/4 "
+    class="absolute left-0 flex justify-center flex-initial w-full h-10 max-w-full align-top duration-500 ease-in-out border-b border-navigation-border-color sb-service-list transition-[margin-top] -z-40 md:z-100 md:h-12 top-[41px] bg-navigation-bg md:border-0 md:top-auto md:w-auto md:left-auto md:static md:justify-end md:flex md:flex-auto lg:h-16 lg:pl-0 lg:pr-4 lg:w-3/4 "
 >
     {{#with this.serviceNavigationSSILinks}}
         <ul class="flex justify-around w-full h-full -itemCount-{{ count }} lg:w-auto lg:justify-end lg:pt-1">

package/src/stories/views/components/site_header/service_navigation/service_navigation_item.hbs

@@ -3,17 +3,14 @@
         {{#if this.subNavigation}} 
             <button 
                 id="{{nextRandom}}" 
-                @click.debounce.100ms="toggleServiceNav()" 
+                @click="toggleServiceNav()" 
                 @click.outside="dropped = false;"
                 @close-servicemenu.window="dropped = false; $store.serviceNavIsOpen = false"
-
                 x-data="dropdown"
                 id="{{getRandom}}"
-                
                 class="js-load flex flex-col items-center justify-center h-full px-4 text-left lg:justify-start lg:px-3 lg:pt-1 lg:hover:underline lg:relative lg:rounded-t lg:border-0 lg:left-0 text-navigation-icons link-focus-inset-white {{#if this.selected}}-currentService{{/if}}"
 
                 :class="dropped ? 'bg-white fill-current text-primary lg:border-0 lg:underline' : ''" 
-
                 aria-owns="flyout-{{getRandom}}" 
                 aria-controls="flyout-{{getRandom}}"
                 x-effect="$el.setAttribute('aria-expanded', dropped);$el.setAttribute('aria-label', dropped ? '{{this.text}}-Menü schließen' : '{{this.text}}-Menü öffnen')"