hr-design-system-handlebars 1.59.22 → 1.59.23

package/CHANGELOG.md

@@ -1,3 +1,15 @@
+# v1.59.23 (Wed Mar 06 2024)
+
+#### 🐛 Bug Fix
+
+- 💄 DPE-2938 -Mobile Ansicht Logo und Burger-Icon nicht auf Linie [#872](https://github.com/mumprod/hr-design-system-handlebars/pull/872) ([@vascoeduardo](https://github.com/vascoeduardo))
+
+#### Authors: 1
+
+- Vasco ([@vascoeduardo](https://github.com/vascoeduardo))
+
+---
+
 # v1.59.22 (Tue Mar 05 2024)
 
 #### 🐛 Bug Fix

package/dist/assets/index.css

@@ -1291,6 +1291,9 @@ article.indexTextDS .indexTextHighlighted .link {
 .-ml-1 {
   margin-left: -0.25rem;
 }
+.-ml-3 {
+  margin-left: -0.75rem;
+}
 .-mt-0 {
   margin-top: -0px;
 }
@@ -2735,12 +2738,6 @@ article.indexTextDS .indexTextHighlighted .link {
   padding-bottom: 16px;
   padding-bottom: var(--footer-padding-bottom);
 }
-.pl-0 {
-  padding-left: 0px;
-}
-.pl-0\.5 {
-  padding-left: 0.125rem;
-}
 .pl-10 {
   padding-left: 2.5rem;
 }
@@ -2756,6 +2753,9 @@ article.indexTextDS .indexTextHighlighted .link {
 .pl-4 {
   padding-left: 1rem;
 }
+.pl-5 {
+  padding-left: 1.25rem;
+}
 .pl-8 {
   padding-left: 2rem;
 }
@@ -3316,7 +3316,7 @@ article.indexTextDS .indexTextHighlighted .link {
   border-bottom-color: var(--color-secondary-ds);
 }
 .counter-reset {
-  counter-reset: cnt1709665038960;
+  counter-reset: cnt1709719785889;
 }
 .hyphens-auto {
   -webkit-hyphens: auto;
@@ -3477,8 +3477,8 @@ article.indexTextDS .indexTextHighlighted .link {
 @media (min-width: 768px) {
 
   .-currentBrand::before {
-    position: relative;
-    right: -50%;
+    position: absolute;
+    left: calc(50% - 0.5rem);
     margin-top: 1.5rem;
     height: 0px;
     width: 0px;
@@ -3537,7 +3537,7 @@ article.indexTextDS .indexTextHighlighted .link {
 .-currentSection::before {
   position: absolute;
   margin-right: 0.5rem;
-  margin-left: -1rem;
+  margin-left: -1.25rem;
   margin-bottom: 0.125rem;
   height: 0px;
   width: 0px;
@@ -3622,7 +3622,7 @@ article.indexTextDS .indexTextHighlighted .link {
   --tw-ring-color: rgba(255, 255, 255, 0.5);
 }
 .-ordered {
-  counter-increment: cnt1709665038960 1;
+  counter-increment: cnt1709719785889 1;
 }
 .-ordered::before {
   position: absolute;
@@ -3638,7 +3638,7 @@ article.indexTextDS .indexTextHighlighted .link {
   letter-spacing: .0125em;
   --tw-text-opacity: 1;
   color: rgba(0, 0, 0, var(--tw-text-opacity));
-  content: counter(cnt1709665038960);
+  content: counter(cnt1709719785889);
 }
 /*! ****************************/
 /*! DataPolicy stuff           */
@@ -6289,11 +6289,6 @@ article.indexTextDS .indexTextHighlighted .link {
     padding-right: 0px;
   }
 
-  .md\:px-1 {
-    padding-left: 0.25rem;
-    padding-right: 0.25rem;
-  }
-
   .md\:px-4 {
     padding-left: 1rem;
     padding-right: 1rem;
@@ -6738,6 +6733,10 @@ article.indexTextDS .indexTextHighlighted .link {
     display: flex;
   }
 
+  .lg\:grid {
+    display: grid;
+  }
+
   .lg\:hidden {
     display: none;
   }
@@ -6838,6 +6837,10 @@ article.indexTextDS .indexTextHighlighted .link {
     flex: 0 1 auto;
   }
 
+  .lg\:grid-cols-12 {
+    grid-template-columns: repeat(12, minmax(0, 1fr));
+  }
+
   .lg\:flex-row {
     flex-direction: row;
   }
@@ -6961,11 +6964,6 @@ article.indexTextDS .indexTextHighlighted .link {
     padding-right: 1rem;
   }
 
-  .lg\:px-6 {
-    padding-left: 1.5rem;
-    padding-right: 1.5rem;
-  }
-
   .lg\:px-9 {
     padding-left: 2.25rem;
     padding-right: 2.25rem;
@@ -7047,8 +7045,8 @@ article.indexTextDS .indexTextHighlighted .link {
     filter: none;
   }
 
-  .lg\:duration-500 {
-    transition-duration: 500ms;
+  .lg\:duration-0 {
+    transition-duration: 0ms;
   }
     .lg\:ar-100-27 {
         aspect-ratio: 100 / 27.1;
@@ -7079,6 +7077,21 @@ article.indexTextDS .indexTextHighlighted .link {
         }
     }
 
+    .lg\:grid-page {
+        grid-template-columns:
+            [full-start] minmax(0, 1fr)
+            [main-start] minmax(0, 63.75rem) [main-end]
+            minmax(0, 1fr) [full-end];
+    }
+    @media print {
+        .lg\:grid-page {
+            grid-template-columns:
+                [full-start] minmax(0, 1fr)
+                [main-start] minmax(0, 43.75rem) [main-end]
+                minmax(0, 1fr) [full-end];
+        }
+    }
+
     .lg\:col-main {
         grid-column: main;
     }
@@ -7193,6 +7206,10 @@ article.indexTextDS .indexTextHighlighted .link {
     top: 5rem;
   }
 
+  .tablet\:ml-\[calc\(50\%\+0\.75rem\)\] {
+    margin-left: calc(50% + 0.75rem);
+  }
+
   .tablet\:ml-half-screen {
     margin-left: 50vw;
   }
@@ -7205,6 +7222,10 @@ article.indexTextDS .indexTextHighlighted .link {
     width: 4.5rem;
   }
 
+  .tablet\:w-\[calc\(50\%-0\.75rem\)\] {
+    width: calc(50% - 0.75rem);
+  }
+
   .tablet\:w-half-screen {
     width: 50vw;
   }

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

@@ -135,8 +135,8 @@ export default () => ({
         } else {
             // todo vasco: checken ob das wieder rein sollte
             // hidden needs to be set here to avoid flickering of the sectionNav on viewport change, gets removed in timeout
-            // this.$refs.sectionnavigation.classList.add('hidden')
-            // this.$refs.sectionnavigation.style.maxHeight="0px"
+            this.$refs.sectionnavigation.classList.add('hidden')
+            this.$refs.sectionnavigation.style.maxHeight="0px"
         }
 
         let nowClientHeight = document.documentElement.clientHeight || document.body.clientHeight

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

@@ -1,14 +1,14 @@
-<div class="sb-brand-navigation lg:container w-full md:px-1 lg:px-6 px-3.5 h-8">
-{{#> components/horizontal_scroll_container/horizontal_scroll_container _viewport="xs" _bgcolor="var(--color-brandnavigation-bg)" _iconcolor="primary" }}
-    <nav class="flex w-full text-xs list-none text-grey-scorpion">
-            <span id="brandNavHeading" class="hidden">Navigation der Marken des Hessischen Rundfunks</span>
-            {{#with this.brandNavigationItems}}
-                <ul class="flex pl-0.5 pr-3 md:px-0 flex-nowrap lg:mr-0">
-                    {{#each this}}
-                        {{> components/site_header/brand_navigation/brand_navigation_item }}
-                    {{/each}} 
-                </ul>
-            {{/with}}      
-    </nav>
-{{/components/horizontal_scroll_container/horizontal_scroll_container}}
-</div>
+<div class="grid-cols-12 px-5 lg:px-9.5 col-full sm:col-main">
+    {{#> components/horizontal_scroll_container/horizontal_scroll_container _viewport="xs" _bgcolor="var(--color-brandnavigation-bg)" _iconcolor="primary" }}
+        <nav class="flex w-full text-xs list-none text-grey-scorpion">
+                <span id="brandNavHeading" class="hidden">Navigation der Marken des Hessischen Rundfunks</span>
+                {{#with this.brandNavigationItems}}
+                    <ul class="flex pr-3 md:px-0 flex-nowrap lg:mr-0">
+                        {{#each this}}
+                            {{> components/site_header/brand_navigation/brand_navigation_item }}
+                        {{/each}} 
+                    </ul>
+                {{/with}}      
+        </nav>
+    {{/components/horizontal_scroll_container/horizontal_scroll_container}}
+</div>

package/dist/views/components/site_header/brand_navigation/brand_navigation_item.hbs

@@ -1,3 +1,3 @@
-<li class="sb-brand-navigation-item h-8 {{#if this.selected}} h-10 md:h-8 font-bold text-brandnav-pseudo {{/if}} cursor-pointer inline-block lg:hover:underline active:font-bold active:text-primary">   
-   <a class="link-focus-inset leading-[34px] items-center flex-col px-3 {{#if this.selected }}pl-0 {{/if}}md:flex-row js-load w-max flex justify-center {{#if this.selected}} -currentBrand {{/if}}" aria-label="{{this.name}}" href="{{resourceUrl "index.html" _site=this.site}}"{{#if this.extern}} target="_blank" rel="noopener noreferrer"{{/if}} data-hr-click-tracking='{"settings": [{"type": "uxNavigation", "secondLevelId": 1, "clickLabel": "Brandnavigation::{{this.text}}-Link geklickt"}]}'>{{this.text}}</a>
+<li class="sb-brand-navigation-item h-8 {{#if @first }}-ml-3 {{/if}}{{#if this.selected}} h-10 md:h-8 font-bold text-brandnav-pseudo {{/if}}cursor-pointer inline-block lg:hover:underline active:font-bold active:text-primary">   
+   <a class="link-focus-inset leading-[34px] items-center flex-col px-3 {{#if this.selected }}relative {{/if}}md:flex-row js-load w-max flex justify-center {{#if this.selected}} -currentBrand {{/if}}" aria-label="{{this.name}}" href="{{resourceUrl "index.html" _site=this.site}}"{{#if this.extern}} target="_blank" rel="noopener noreferrer"{{/if}} data-hr-click-tracking='{"settings": [{"type": "uxNavigation", "secondLevelId": 1, "clickLabel": "Brandnavigation::{{this.text}}-Link geklickt"}]}'>{{this.text}}</a>
 </li>

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

@@ -13,44 +13,21 @@
             </div>
 
             <div id="brandNavWrapper" 
-                class="box-content relative flex items-center justify-center order-1 w-full bg-white border-b border-brandnavigation-border-color z-130">
+                class="box-content relative grid order-1 w-full h-8 bg-white border-b sb-brand-navigation grid-page border-brandnavigation-border-color z-130">
                 {{> components/site_header/brand_navigation/brand_navigation }} 
             </div>
 
             <div id="serviceNavWrapper" 
                 :class="shouldServiceNavBeHidden() ? '-mt-40' : ''"
-                
-                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">
-
-                    <span id="serviceNavHeadline" class="hidden print:hidden">Service Navigation</span>
-
-                    <div id="serviceLogoWrapper"  
-                        class="flex items-center order-1 w-full pl-4 pr-2 tablet:pl-5 bg-navigation-bg md:px-0 md:h-12 lg:h-16 md:w-1/2 md:max-w-1/2 lg:w-1/4 lg:max-w-1/4">
-                        {{> components/site_header/service_logo _useSticky=_useSticky}}
-                    </div>
-                    
-                    <div id="serviceItemsWrapper"                
-                        class="flex items-center justify-end flex-initial order-2 inline-block w-full max-w-full align-top bg-navigation-bg md:h-12 lg:h-16 lg:order-2 lg:w-3/4 lg:max-w-3/4 md:mt-0 md:w-1/2 md:max-w-1/2 md:order-2 md:border-0">
-                        {{> components/site_header/service_navigation/service_list }}
-
-                        {{> components/site_header/navigation_search/navigation_search }}
-                    
-                        <div id="burgerWrapper" 
-                            class="flex justify-end flex-none order-2 lg:order-4 md:order-4 lg:hidden"> 
-                            {{> components/site_header/burger }}    
-                        </div>
-                        
-                    </div>
-                </div>
+                class="relative grid grid-page order-2 w-full transition-[margin-top] duration-200 ease-in-out border-b border-servicenavigation-border-color bg-navigation-bg z-120">   
+                {{> components/site_header/service_navigation/service_navigation }}
             </div>
 
             <div id="sectionNavWrapper"      
                 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="lg:grid lg:grid-page justify-center order-3 w-full overflow-hidden duration-200 lg:border-navigation-border-color [border-image-source:var(--border-navigation-border-image)] [border-image-slice:1] lg:border-b-navigation-border-width lg:duration-0 tablet:absolute tablet:top-20 tablet:w-[calc(50%-0.75rem)] tablet:ml-[calc(50%+0.75rem)] max-h-0 lg:overflow-visible md:mt-0 lg:max-h-full lg:h-auto bg-navigation-bg z-100 print:hidden "
             >   
                 {{> components/site_header/section_navigation/section_navigation }}
             </div>

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

@@ -1,6 +1,6 @@
 <div 
     id="sectionNav"
-    class="w-full px-0 mt-10 sb-section-navigation md:mt-0 lg:px-10 lg:container " 
+    class="w-full px-0 mt-10 sb-section-navigation md:mt-0 lg:grid-cols-12 lg:px-9.5 lg:col-main " 
     x-effect="$el.setAttribute('aria-expanded',  $store.burgeropen || $screen('lg')); $el.setAttribute('aria-hidden', ! ($store.burgeropen || $screen('lg')))"
 >
 {{#> components/horizontal_scroll_container/horizontal_scroll_container _viewport="lg" _bgcolor="var(--color-navigation-bg)" _iconcolor="navigation-icons"}}
@@ -31,4 +31,4 @@
     </div>
 {{/components/horizontal_scroll_container/horizontal_scroll_container}}
 
-</div> 
+</div> 

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

@@ -12,7 +12,7 @@
                 @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 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" 
+                class="{{#if this.selected}}-currentSection lg:justify-center !font-bold {{/if}}link-focus-inset js-load pl-5 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" 
                 x-effect="$el.setAttribute('aria-expanded', dropped);$el.setAttribute('tabindex',  $store.burgeropen || $screen('lg') ? '0' : '-1')"
                 aria-owns="flyout-{{getRandom}}" 
                 aria-controls="flyout-{{getRandom}}" 
@@ -28,7 +28,7 @@
                         @click="preventDefault(isDesktopView(),$event); toggle(); correctFlyoutPos()"
                         @resize.window="dropped=false; correctFlyoutPos()" 
                         :class="dropped ? 'lg:underline font-bold lg:font-normal' : 'font-normal'"
-                        class="js-noStateManager {{#if this.selected}}-currentSection lg:justify-center !font-bold {{/if}}link-focus-inset js-load pl-4 pr-8 lg:pr-4 flex flex-auto justify-between lg:flex-initial h-10 lg:w-full items-center leading-4" 
+                        class="js-noStateManager {{#if this.selected}}-currentSection lg:justify-center !font-bold {{/if}}link-focus-inset js-load pl-5 pr-8 lg:pl-4 lg:pr-4 flex flex-auto justify-between lg:flex-initial h-10 lg:w-full items-center leading-4" 
                         aria-haspopup="true"  
                         x-effect="$el.setAttribute('aria-expanded', dropped);$el.setAttribute('tabindex',  $store.burgeropen || $screen('lg') ? '0' : '-1')"
                         aria-owns="flyout-{{getRandom}}" 
@@ -42,7 +42,7 @@
                         id="flyout-{{nextRandom}}-1" 
                         
                         :class="dropped ? 'font-bold' : ''"
-                        class="{{#if this.selected}}-currentSection lg:justify-center {{/if}}link-focus-inset js-load pl-4 pr-8 lg:pl-4 lg:pr-4 flex flex-auto h-10 items-center leading-4 lg:w-full lg:justify-center{{#if this.selected}} font-bold{{/if}}"
+                        class="{{#if this.selected}}-currentSection lg:justify-center {{/if}}link-focus-inset js-load pl-5 pr-8 lg:pl-4 lg:pr-4 flex flex-auto h-10 items-center leading-4 lg:w-full lg:justify-center{{#if this.selected}} font-bold{{/if}}"
                         {{#if this.labelText}} aria-label="{{this.labelText}}"{{/if}} 
                         aria-haspopup="true" 
                         x-effect="$el.setAttribute('aria-expanded', dropped || $screen('lg'));$el.setAttribute('tabindex',  $store.burgeropen || $screen('lg') ? '0' : '-1')"
@@ -57,7 +57,7 @@
                 {{!-- Gilt für START/GESELLSCHAFT/WIRTSCHAFT usw:  --}}
                 <a {{#if this.extern}}href="{{this.url}}{{else}}href="{{resourceUrl
                     this.url}}{{/if}}" 
-                    class="{{#if this.selected}}-currentSection lg:justify-center {{/if}} link-focus-inset js-load flex justify-start pl-4 pr-4 h-10 lg:justify-center items-center w-full{{#if this.selected}} font-bold{{/if}}" 
+                    class="{{#if this.selected}}-currentSection lg:justify-center {{/if}} link-focus-inset js-load flex justify-start px-5 lg:px-4 h-10 lg:justify-center items-center w-full{{#if this.selected}} font-bold{{/if}}" 
                     {{#if this.labelText}} aria-label="{{this.labelText}}"{{/if}} 
                     data-hr-click-tracking='{"settings": [{"type": "uxNavigation", "secondLevelId": 1, "clickLabel": "Rubriknavigation::{{this.text}}-Link geklickt"}]}'
                     x-effect="$el.setAttribute('tabindex',  $store.burgeropen || $screen('lg') ? '0' : '-1')"

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

@@ -1,5 +1,5 @@
 <li class="order-1 w-full lg:mr-2 lg:w-auto lg:order-2">
-    <ul class="flex flex-row flex-wrap items-center w-full p-4 text-left list-none lg:flex-nowrap bg-top-topic-background lg:p-0 lg:bg-transparent lg:h-10">
+    <ul class="flex flex-row flex-wrap items-center w-full px-5 py-4 text-left list-none lg:flex-nowrap bg-top-topic-background lg:p-0 lg:bg-transparent lg:h-10">
         {{#each this.items}}
             <li class="{{#unless @last}}mr-3 {{/unless}}">
                 {{#> components/button/top_topics_button}}

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

@@ -0,0 +1,19 @@
+<div id="serviceNavMainContainer" 
+    class="flex w-full h-10 md:h-12 lg:h-16 z-110 pl-5 pr-3 md:pr-0 lg:px-9.5 col-full sm:col-main">
+    <span id="serviceNavHeadline" class="hidden print:hidden">Service Navigation</span>
+    <div id="serviceLogoWrapper"  
+        class="flex items-center order-1 w-full bg-navigation-bg md:h-12 lg:h-16 md:w-1/2 md:max-w-1/2 lg:w-1/4 lg:max-w-1/4">
+        {{> components/site_header/service_logo _useSticky=_useSticky}}
+    </div>
+    <div id="serviceItemsWrapper"                
+        class="flex items-center justify-end flex-initial order-2 inline-block w-full max-w-full align-top bg-navigation-bg md:h-12 lg:h-16 lg:order-2 lg:w-3/4 lg:max-w-3/4 md:mt-0 md:w-1/2 md:max-w-1/2 md:order-2 md:border-0">
+        {{> components/site_header/service_navigation/service_list }}
+
+        {{> components/site_header/navigation_search/navigation_search }}
+    
+        <div id="burgerWrapper" 
+            class="flex justify-end flex-none order-2 lg:order-4 md:order-4 lg:hidden"> 
+            {{> components/site_header/burger }}    
+        </div>
+    </div>
+</div>

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

@@ -1,14 +1,14 @@
-<div class="sb-brand-navigation lg:container w-full md:px-1 lg:px-6 px-3.5 h-8">
-{{#> components/horizontal_scroll_container/horizontal_scroll_container _viewport="xs" _bgcolor="var(--color-brandnavigation-bg)" _iconcolor="primary" }}
-    <nav class="flex w-full text-xs list-none text-grey-scorpion">
-            <span id="brandNavHeading" class="hidden">Navigation der Marken des Hessischen Rundfunks</span>
-            {{#with this.brandNavigationItems}}
-                <ul class="flex pl-0.5 pr-3 md:px-0 flex-nowrap lg:mr-0">
-                    {{#each this}}
-                        {{> components/site_header/brand_navigation/brand_navigation_item }}
-                    {{/each}} 
-                </ul>
-            {{/with}}      
-    </nav>
-{{/components/horizontal_scroll_container/horizontal_scroll_container}}
-</div>
+<div class="grid-cols-12 px-5 lg:px-9.5 col-full sm:col-main">
+    {{#> components/horizontal_scroll_container/horizontal_scroll_container _viewport="xs" _bgcolor="var(--color-brandnavigation-bg)" _iconcolor="primary" }}
+        <nav class="flex w-full text-xs list-none text-grey-scorpion">
+                <span id="brandNavHeading" class="hidden">Navigation der Marken des Hessischen Rundfunks</span>
+                {{#with this.brandNavigationItems}}
+                    <ul class="flex pr-3 md:px-0 flex-nowrap lg:mr-0">
+                        {{#each this}}
+                            {{> components/site_header/brand_navigation/brand_navigation_item }}
+                        {{/each}} 
+                    </ul>
+                {{/with}}      
+        </nav>
+    {{/components/horizontal_scroll_container/horizontal_scroll_container}}
+</div>

package/dist/views_static/components/site_header/brand_navigation/brand_navigation_item.hbs

@@ -1,3 +1,3 @@
-<li class="sb-brand-navigation-item h-8 {{#if this.selected}} h-10 md:h-8 font-bold text-brandnav-pseudo {{/if}} cursor-pointer inline-block lg:hover:underline active:font-bold active:text-primary">   
-   <a class="link-focus-inset leading-[34px] items-center flex-col px-3 {{#if this.selected }}pl-0 {{/if}}md:flex-row js-load w-max flex justify-center {{#if this.selected}} -currentBrand {{/if}}" aria-label="{{this.name}}" href="{{resourceUrl "index.html" _site=this.site}}"{{#if this.extern}} target="_blank" rel="noopener noreferrer"{{/if}} data-hr-click-tracking='{"settings": [{"type": "uxNavigation", "secondLevelId": 1, "clickLabel": "Brandnavigation::{{this.text}}-Link geklickt"}]}'>{{this.text}}</a>
+<li class="sb-brand-navigation-item h-8 {{#if @first }}-ml-3 {{/if}}{{#if this.selected}} h-10 md:h-8 font-bold text-brandnav-pseudo {{/if}}cursor-pointer inline-block lg:hover:underline active:font-bold active:text-primary">   
+   <a class="link-focus-inset leading-[34px] items-center flex-col px-3 {{#if this.selected }}relative {{/if}}md:flex-row js-load w-max flex justify-center {{#if this.selected}} -currentBrand {{/if}}" aria-label="{{this.name}}" href="{{resourceUrl "index.html" _site=this.site}}"{{#if this.extern}} target="_blank" rel="noopener noreferrer"{{/if}} data-hr-click-tracking='{"settings": [{"type": "uxNavigation", "secondLevelId": 1, "clickLabel": "Brandnavigation::{{this.text}}-Link geklickt"}]}'>{{this.text}}</a>
 </li>

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

@@ -13,44 +13,21 @@
             </div>
 
             <div id="brandNavWrapper" 
-                class="box-content relative flex items-center justify-center order-1 w-full bg-white border-b border-brandnavigation-border-color z-130">
+                class="box-content relative grid order-1 w-full h-8 bg-white border-b sb-brand-navigation grid-page border-brandnavigation-border-color z-130">
                 {{> components/site_header/brand_navigation/brand_navigation }} 
             </div>
 
             <div id="serviceNavWrapper" 
                 :class="shouldServiceNavBeHidden() ? '-mt-40' : ''"
-                
-                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">
-
-                    <span id="serviceNavHeadline" class="hidden print:hidden">Service Navigation</span>
-
-                    <div id="serviceLogoWrapper"  
-                        class="flex items-center order-1 w-full pl-4 pr-2 tablet:pl-5 bg-navigation-bg md:px-0 md:h-12 lg:h-16 md:w-1/2 md:max-w-1/2 lg:w-1/4 lg:max-w-1/4">
-                        {{> components/site_header/service_logo _useSticky=_useSticky}}
-                    </div>
-                    
-                    <div id="serviceItemsWrapper"                
-                        class="flex items-center justify-end flex-initial order-2 inline-block w-full max-w-full align-top bg-navigation-bg md:h-12 lg:h-16 lg:order-2 lg:w-3/4 lg:max-w-3/4 md:mt-0 md:w-1/2 md:max-w-1/2 md:order-2 md:border-0">
-                        {{> components/site_header/service_navigation/service_list }}
-
-                        {{> components/site_header/navigation_search/navigation_search }}
-                    
-                        <div id="burgerWrapper" 
-                            class="flex justify-end flex-none order-2 lg:order-4 md:order-4 lg:hidden"> 
-                            {{> components/site_header/burger }}    
-                        </div>
-                        
-                    </div>
-                </div>
+                class="relative grid grid-page order-2 w-full transition-[margin-top] duration-200 ease-in-out border-b border-servicenavigation-border-color bg-navigation-bg z-120">   
+                {{> components/site_header/service_navigation/service_navigation }}
             </div>
 
             <div id="sectionNavWrapper"      
                 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="lg:grid lg:grid-page justify-center order-3 w-full overflow-hidden duration-200 lg:border-navigation-border-color [border-image-source:var(--border-navigation-border-image)] [border-image-slice:1] lg:border-b-navigation-border-width lg:duration-0 tablet:absolute tablet:top-20 tablet:w-[calc(50%-0.75rem)] tablet:ml-[calc(50%+0.75rem)] max-h-0 lg:overflow-visible md:mt-0 lg:max-h-full lg:h-auto bg-navigation-bg z-100 print:hidden "
             >   
                 {{> components/site_header/section_navigation/section_navigation }}
             </div>

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

@@ -1,6 +1,6 @@
 <div 
     id="sectionNav"
-    class="w-full px-0 mt-10 sb-section-navigation md:mt-0 lg:px-10 lg:container " 
+    class="w-full px-0 mt-10 sb-section-navigation md:mt-0 lg:grid-cols-12 lg:px-9.5 lg:col-main " 
     x-effect="$el.setAttribute('aria-expanded',  $store.burgeropen || $screen('lg')); $el.setAttribute('aria-hidden', ! ($store.burgeropen || $screen('lg')))"
 >
 {{#> components/horizontal_scroll_container/horizontal_scroll_container _viewport="lg" _bgcolor="var(--color-navigation-bg)" _iconcolor="navigation-icons"}}
@@ -31,4 +31,4 @@
     </div>
 {{/components/horizontal_scroll_container/horizontal_scroll_container}}
 
-</div> 
+</div> 

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

@@ -12,7 +12,7 @@
                 @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 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" 
+                class="{{#if this.selected}}-currentSection lg:justify-center !font-bold {{/if}}link-focus-inset js-load pl-5 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" 
                 x-effect="$el.setAttribute('aria-expanded', dropped);$el.setAttribute('tabindex',  $store.burgeropen || $screen('lg') ? '0' : '-1')"
                 aria-owns="flyout-{{getRandom}}" 
                 aria-controls="flyout-{{getRandom}}" 
@@ -28,7 +28,7 @@
                         @click="preventDefault(isDesktopView(),$event); toggle(); correctFlyoutPos()"
                         @resize.window="dropped=false; correctFlyoutPos()" 
                         :class="dropped ? 'lg:underline font-bold lg:font-normal' : 'font-normal'"
-                        class="js-noStateManager {{#if this.selected}}-currentSection lg:justify-center !font-bold {{/if}}link-focus-inset js-load pl-4 pr-8 lg:pr-4 flex flex-auto justify-between lg:flex-initial h-10 lg:w-full items-center leading-4" 
+                        class="js-noStateManager {{#if this.selected}}-currentSection lg:justify-center !font-bold {{/if}}link-focus-inset js-load pl-5 pr-8 lg:pl-4 lg:pr-4 flex flex-auto justify-between lg:flex-initial h-10 lg:w-full items-center leading-4" 
                         aria-haspopup="true"  
                         x-effect="$el.setAttribute('aria-expanded', dropped);$el.setAttribute('tabindex',  $store.burgeropen || $screen('lg') ? '0' : '-1')"
                         aria-owns="flyout-{{getRandom}}" 
@@ -42,7 +42,7 @@
                         id="flyout-{{nextRandom}}-1" 
                         
                         :class="dropped ? 'font-bold' : ''"
-                        class="{{#if this.selected}}-currentSection lg:justify-center {{/if}}link-focus-inset js-load pl-4 pr-8 lg:pl-4 lg:pr-4 flex flex-auto h-10 items-center leading-4 lg:w-full lg:justify-center{{#if this.selected}} font-bold{{/if}}"
+                        class="{{#if this.selected}}-currentSection lg:justify-center {{/if}}link-focus-inset js-load pl-5 pr-8 lg:pl-4 lg:pr-4 flex flex-auto h-10 items-center leading-4 lg:w-full lg:justify-center{{#if this.selected}} font-bold{{/if}}"
                         {{#if this.labelText}} aria-label="{{this.labelText}}"{{/if}} 
                         aria-haspopup="true" 
                         x-effect="$el.setAttribute('aria-expanded', dropped || $screen('lg'));$el.setAttribute('tabindex',  $store.burgeropen || $screen('lg') ? '0' : '-1')"
@@ -57,7 +57,7 @@
                 {{!-- Gilt für START/GESELLSCHAFT/WIRTSCHAFT usw:  --}}
                 <a {{#if this.extern}}href="{{this.url}}{{else}}href="{{resourceUrl
                     this.url}}{{/if}}" 
-                    class="{{#if this.selected}}-currentSection lg:justify-center {{/if}} link-focus-inset js-load flex justify-start pl-4 pr-4 h-10 lg:justify-center items-center w-full{{#if this.selected}} font-bold{{/if}}" 
+                    class="{{#if this.selected}}-currentSection lg:justify-center {{/if}} link-focus-inset js-load flex justify-start px-5 lg:px-4 h-10 lg:justify-center items-center w-full{{#if this.selected}} font-bold{{/if}}" 
                     {{#if this.labelText}} aria-label="{{this.labelText}}"{{/if}} 
                     data-hr-click-tracking='{"settings": [{"type": "uxNavigation", "secondLevelId": 1, "clickLabel": "Rubriknavigation::{{this.text}}-Link geklickt"}]}'
                     x-effect="$el.setAttribute('tabindex',  $store.burgeropen || $screen('lg') ? '0' : '-1')"

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

@@ -1,5 +1,5 @@
 <li class="order-1 w-full lg:mr-2 lg:w-auto lg:order-2">
-    <ul class="flex flex-row flex-wrap items-center w-full p-4 text-left list-none lg:flex-nowrap bg-top-topic-background lg:p-0 lg:bg-transparent lg:h-10">
+    <ul class="flex flex-row flex-wrap items-center w-full px-5 py-4 text-left list-none lg:flex-nowrap bg-top-topic-background lg:p-0 lg:bg-transparent lg:h-10">
         {{#each this.items}}
             <li class="{{#unless @last}}mr-3 {{/unless}}">
                 {{#> components/button/top_topics_button}}

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

@@ -0,0 +1,19 @@
+<div id="serviceNavMainContainer" 
+    class="flex w-full h-10 md:h-12 lg:h-16 z-110 pl-5 pr-3 md:pr-0 lg:px-9.5 col-full sm:col-main">
+    <span id="serviceNavHeadline" class="hidden print:hidden">Service Navigation</span>
+    <div id="serviceLogoWrapper"  
+        class="flex items-center order-1 w-full bg-navigation-bg md:h-12 lg:h-16 md:w-1/2 md:max-w-1/2 lg:w-1/4 lg:max-w-1/4">
+        {{> components/site_header/service_logo _useSticky=_useSticky}}
+    </div>
+    <div id="serviceItemsWrapper"                
+        class="flex items-center justify-end flex-initial order-2 inline-block w-full max-w-full align-top bg-navigation-bg md:h-12 lg:h-16 lg:order-2 lg:w-3/4 lg:max-w-3/4 md:mt-0 md:w-1/2 md:max-w-1/2 md:order-2 md:border-0">
+        {{> components/site_header/service_navigation/service_list }}
+
+        {{> components/site_header/navigation_search/navigation_search }}
+    
+        <div id="burgerWrapper" 
+            class="flex justify-end flex-none order-2 lg:order-4 md:order-4 lg:hidden"> 
+            {{> components/site_header/burger }}    
+        </div>
+    </div>
+</div>

package/package.json

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

package/src/assets/css/custom-utilities.css

@@ -203,13 +203,13 @@
     }
 
     .-currentBrand {
-        @apply before:content-[''] md:before:relative md:before:-right-1/2 md:before:w-0 md:before:h-0 md:before:border-t-0 md:before:border-r-8 md:before:border-r-transparent md:before:border-l-8 md:before:border-l-transparent md:before:border-b-8 md:before:border-brandnav-pseudo md:before:mt-6;
+        @apply before:content-[''] md:before:absolute md:before:left-[calc(50%-0.5rem)] md:before:w-0 md:before:h-0 md:before:border-t-0 md:before:border-r-8 md:before:border-r-transparent md:before:border-l-8 md:before:border-l-transparent md:before:border-b-8 md:before:border-brandnav-pseudo md:before:mt-6;
     }
     .-currentService {
         @apply before:content-[''] before:hidden lg:before:flex before:relative before:w-0 before:h-0 before:mr-4 before:mt-0 before:border-r-0 before:border-t-8 before:border-t-transparent before:border-l-8 before:border-l-white before:border-b-8 before:border-b-transparent lg:before:absolute lg:before:w-0 lg:before:h-0 lg:before:mr-0 lg:before:border-t-0 lg:before:border-r-8 lg:before:border-r-transparent lg:before:border-l-8 lg:before:border-l-transparent lg:before:border-b-8 lg:before:border-b-white lg:before:mt-12;
     }
     .-currentSection {
-        @apply relative before:absolute before:content-[''] before:w-0 before:h-0 before:mr-2 before:-ml-4 before:border-r-0 before:border-t-7 before:border-t-transparent before:border-l-8 before:border-l-white before:border-b-7 before:border-b-transparent before:mb-0.5 lg:before:absolute lg:before:mb-0  lg:before:w-0 lg:before:h-0 lg:before:mr-0 lg:before:ml-0 lg:before:border-t-0 lg:before:border-r-8 lg:before:border-r-transparent lg:before:border-l-8 lg:before:border-l-transparent lg:before:border-b-8 lg:before:border-b-navigation-border-color lg:before:mt-8;
+        @apply relative before:absolute before:content-[''] before:w-0 before:h-0 before:mr-2 before:-ml-5 before:border-r-0 before:border-t-7 before:border-t-transparent before:border-l-8 before:border-l-white before:border-b-7 before:border-b-transparent before:mb-0.5 lg:before:absolute lg:before:mb-0  lg:before:w-0 lg:before:h-0 lg:before:mr-0 lg:before:ml-0 lg:before:border-t-0 lg:before:border-r-8 lg:before:border-r-transparent lg:before:border-l-8 lg:before:border-l-transparent lg:before:border-b-8 lg:before:border-b-navigation-border-color lg:before:mt-8;
     }
     .-weather_warning {
         @apply text-red-600 !important;

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

@@ -1,14 +1,14 @@
-<div class="sb-brand-navigation lg:container w-full md:px-1 lg:px-6 px-3.5 h-8">
-{{#> components/horizontal_scroll_container/horizontal_scroll_container _viewport="xs" _bgcolor="var(--color-brandnavigation-bg)" _iconcolor="primary" }}
-    <nav class="flex w-full text-xs list-none text-grey-scorpion">
-            <span id="brandNavHeading" class="hidden">Navigation der Marken des Hessischen Rundfunks</span>
-            {{#with this.brandNavigationItems}}
-                <ul class="flex pl-0.5 pr-3 md:px-0 flex-nowrap lg:mr-0">
-                    {{#each this}}
-                        {{> components/site_header/brand_navigation/brand_navigation_item }}
-                    {{/each}} 
-                </ul>
-            {{/with}}      
-    </nav>
-{{/components/horizontal_scroll_container/horizontal_scroll_container}}
-</div>
+<div class="grid-cols-12 px-5 lg:px-9.5 col-full sm:col-main">
+    {{#> components/horizontal_scroll_container/horizontal_scroll_container _viewport="xs" _bgcolor="var(--color-brandnavigation-bg)" _iconcolor="primary" }}
+        <nav class="flex w-full text-xs list-none text-grey-scorpion">
+                <span id="brandNavHeading" class="hidden">Navigation der Marken des Hessischen Rundfunks</span>
+                {{#with this.brandNavigationItems}}
+                    <ul class="flex pr-3 md:px-0 flex-nowrap lg:mr-0">
+                        {{#each this}}
+                            {{> components/site_header/brand_navigation/brand_navigation_item }}
+                        {{/each}} 
+                    </ul>
+                {{/with}}      
+        </nav>
+    {{/components/horizontal_scroll_container/horizontal_scroll_container}}
+</div>

package/src/stories/views/components/site_header/brand_navigation/brand_navigation_item.hbs

@@ -1,3 +1,3 @@
-<li class="sb-brand-navigation-item h-8 {{#if this.selected}} h-10 md:h-8 font-bold text-brandnav-pseudo {{/if}} cursor-pointer inline-block lg:hover:underline active:font-bold active:text-primary">   
-   <a class="link-focus-inset leading-[34px] items-center flex-col px-3 {{#if this.selected }}pl-0 {{/if}}md:flex-row js-load w-max flex justify-center {{#if this.selected}} -currentBrand {{/if}}" aria-label="{{this.name}}" href="{{resourceUrl "index.html" _site=this.site}}"{{#if this.extern}} target="_blank" rel="noopener noreferrer"{{/if}} data-hr-click-tracking='{"settings": [{"type": "uxNavigation", "secondLevelId": 1, "clickLabel": "Brandnavigation::{{this.text}}-Link geklickt"}]}'>{{this.text}}</a>
+<li class="sb-brand-navigation-item h-8 {{#if @first }}-ml-3 {{/if}}{{#if this.selected}} h-10 md:h-8 font-bold text-brandnav-pseudo {{/if}}cursor-pointer inline-block lg:hover:underline active:font-bold active:text-primary">   
+   <a class="link-focus-inset leading-[34px] items-center flex-col px-3 {{#if this.selected }}relative {{/if}}md:flex-row js-load w-max flex justify-center {{#if this.selected}} -currentBrand {{/if}}" aria-label="{{this.name}}" href="{{resourceUrl "index.html" _site=this.site}}"{{#if this.extern}} target="_blank" rel="noopener noreferrer"{{/if}} data-hr-click-tracking='{"settings": [{"type": "uxNavigation", "secondLevelId": 1, "clickLabel": "Brandnavigation::{{this.text}}-Link geklickt"}]}'>{{this.text}}</a>
 </li>

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

@@ -13,44 +13,21 @@
             </div>
 
             <div id="brandNavWrapper" 
-                class="box-content relative flex items-center justify-center order-1 w-full bg-white border-b border-brandnavigation-border-color z-130">
+                class="box-content relative grid order-1 w-full h-8 bg-white border-b sb-brand-navigation grid-page border-brandnavigation-border-color z-130">
                 {{> components/site_header/brand_navigation/brand_navigation }} 
             </div>
 
             <div id="serviceNavWrapper" 
                 :class="shouldServiceNavBeHidden() ? '-mt-40' : ''"
-                
-                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">
-
-                    <span id="serviceNavHeadline" class="hidden print:hidden">Service Navigation</span>
-
-                    <div id="serviceLogoWrapper"  
-                        class="flex items-center order-1 w-full pl-4 pr-2 tablet:pl-5 bg-navigation-bg md:px-0 md:h-12 lg:h-16 md:w-1/2 md:max-w-1/2 lg:w-1/4 lg:max-w-1/4">
-                        {{> components/site_header/service_logo _useSticky=_useSticky}}
-                    </div>
-                    
-                    <div id="serviceItemsWrapper"                
-                        class="flex items-center justify-end flex-initial order-2 inline-block w-full max-w-full align-top bg-navigation-bg md:h-12 lg:h-16 lg:order-2 lg:w-3/4 lg:max-w-3/4 md:mt-0 md:w-1/2 md:max-w-1/2 md:order-2 md:border-0">
-                        {{> components/site_header/service_navigation/service_list }}
-
-                        {{> components/site_header/navigation_search/navigation_search }}
-                    
-                        <div id="burgerWrapper" 
-                            class="flex justify-end flex-none order-2 lg:order-4 md:order-4 lg:hidden"> 
-                            {{> components/site_header/burger }}    
-                        </div>
-                        
-                    </div>
-                </div>
+                class="relative grid grid-page order-2 w-full transition-[margin-top] duration-200 ease-in-out border-b border-servicenavigation-border-color bg-navigation-bg z-120">   
+                {{> components/site_header/service_navigation/service_navigation }}
             </div>
 
             <div id="sectionNavWrapper"      
                 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="lg:grid lg:grid-page justify-center order-3 w-full overflow-hidden duration-200 lg:border-navigation-border-color [border-image-source:var(--border-navigation-border-image)] [border-image-slice:1] lg:border-b-navigation-border-width lg:duration-0 tablet:absolute tablet:top-20 tablet:w-[calc(50%-0.75rem)] tablet:ml-[calc(50%+0.75rem)] max-h-0 lg:overflow-visible md:mt-0 lg:max-h-full lg:h-auto bg-navigation-bg z-100 print:hidden "
             >   
                 {{> components/site_header/section_navigation/section_navigation }}
             </div>

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

@@ -135,8 +135,8 @@ export default () => ({
         } else {
             // todo vasco: checken ob das wieder rein sollte
             // hidden needs to be set here to avoid flickering of the sectionNav on viewport change, gets removed in timeout
-            // this.$refs.sectionnavigation.classList.add('hidden')
-            // this.$refs.sectionnavigation.style.maxHeight="0px"
+            this.$refs.sectionnavigation.classList.add('hidden')
+            this.$refs.sectionnavigation.style.maxHeight="0px"
         }
 
         let nowClientHeight = document.documentElement.clientHeight || document.body.clientHeight

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

@@ -1,6 +1,6 @@
 <div 
     id="sectionNav"
-    class="w-full px-0 mt-10 sb-section-navigation md:mt-0 lg:px-10 lg:container " 
+    class="w-full px-0 mt-10 sb-section-navigation md:mt-0 lg:grid-cols-12 lg:px-9.5 lg:col-main " 
     x-effect="$el.setAttribute('aria-expanded',  $store.burgeropen || $screen('lg')); $el.setAttribute('aria-hidden', ! ($store.burgeropen || $screen('lg')))"
 >
 {{#> components/horizontal_scroll_container/horizontal_scroll_container _viewport="lg" _bgcolor="var(--color-navigation-bg)" _iconcolor="navigation-icons"}}
@@ -31,4 +31,4 @@
     </div>
 {{/components/horizontal_scroll_container/horizontal_scroll_container}}
 
-</div> 
+</div> 

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

@@ -12,7 +12,7 @@
                 @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 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" 
+                class="{{#if this.selected}}-currentSection lg:justify-center !font-bold {{/if}}link-focus-inset js-load pl-5 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" 
                 x-effect="$el.setAttribute('aria-expanded', dropped);$el.setAttribute('tabindex',  $store.burgeropen || $screen('lg') ? '0' : '-1')"
                 aria-owns="flyout-{{getRandom}}" 
                 aria-controls="flyout-{{getRandom}}" 
@@ -28,7 +28,7 @@
                         @click="preventDefault(isDesktopView(),$event); toggle(); correctFlyoutPos()"
                         @resize.window="dropped=false; correctFlyoutPos()" 
                         :class="dropped ? 'lg:underline font-bold lg:font-normal' : 'font-normal'"
-                        class="js-noStateManager {{#if this.selected}}-currentSection lg:justify-center !font-bold {{/if}}link-focus-inset js-load pl-4 pr-8 lg:pr-4 flex flex-auto justify-between lg:flex-initial h-10 lg:w-full items-center leading-4" 
+                        class="js-noStateManager {{#if this.selected}}-currentSection lg:justify-center !font-bold {{/if}}link-focus-inset js-load pl-5 pr-8 lg:pl-4 lg:pr-4 flex flex-auto justify-between lg:flex-initial h-10 lg:w-full items-center leading-4" 
                         aria-haspopup="true"  
                         x-effect="$el.setAttribute('aria-expanded', dropped);$el.setAttribute('tabindex',  $store.burgeropen || $screen('lg') ? '0' : '-1')"
                         aria-owns="flyout-{{getRandom}}" 
@@ -42,7 +42,7 @@
                         id="flyout-{{nextRandom}}-1" 
                         
                         :class="dropped ? 'font-bold' : ''"
-                        class="{{#if this.selected}}-currentSection lg:justify-center {{/if}}link-focus-inset js-load pl-4 pr-8 lg:pl-4 lg:pr-4 flex flex-auto h-10 items-center leading-4 lg:w-full lg:justify-center{{#if this.selected}} font-bold{{/if}}"
+                        class="{{#if this.selected}}-currentSection lg:justify-center {{/if}}link-focus-inset js-load pl-5 pr-8 lg:pl-4 lg:pr-4 flex flex-auto h-10 items-center leading-4 lg:w-full lg:justify-center{{#if this.selected}} font-bold{{/if}}"
                         {{#if this.labelText}} aria-label="{{this.labelText}}"{{/if}} 
                         aria-haspopup="true" 
                         x-effect="$el.setAttribute('aria-expanded', dropped || $screen('lg'));$el.setAttribute('tabindex',  $store.burgeropen || $screen('lg') ? '0' : '-1')"
@@ -57,7 +57,7 @@
                 {{!-- Gilt für START/GESELLSCHAFT/WIRTSCHAFT usw:  --}}
                 <a {{#if this.extern}}href="{{this.url}}{{else}}href="{{resourceUrl
                     this.url}}{{/if}}" 
-                    class="{{#if this.selected}}-currentSection lg:justify-center {{/if}} link-focus-inset js-load flex justify-start pl-4 pr-4 h-10 lg:justify-center items-center w-full{{#if this.selected}} font-bold{{/if}}" 
+                    class="{{#if this.selected}}-currentSection lg:justify-center {{/if}} link-focus-inset js-load flex justify-start px-5 lg:px-4 h-10 lg:justify-center items-center w-full{{#if this.selected}} font-bold{{/if}}" 
                     {{#if this.labelText}} aria-label="{{this.labelText}}"{{/if}} 
                     data-hr-click-tracking='{"settings": [{"type": "uxNavigation", "secondLevelId": 1, "clickLabel": "Rubriknavigation::{{this.text}}-Link geklickt"}]}'
                     x-effect="$el.setAttribute('tabindex',  $store.burgeropen || $screen('lg') ? '0' : '-1')"

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

@@ -1,5 +1,5 @@
 <li class="order-1 w-full lg:mr-2 lg:w-auto lg:order-2">
-    <ul class="flex flex-row flex-wrap items-center w-full p-4 text-left list-none lg:flex-nowrap bg-top-topic-background lg:p-0 lg:bg-transparent lg:h-10">
+    <ul class="flex flex-row flex-wrap items-center w-full px-5 py-4 text-left list-none lg:flex-nowrap bg-top-topic-background lg:p-0 lg:bg-transparent lg:h-10">
         {{#each this.items}}
             <li class="{{#unless @last}}mr-3 {{/unless}}">
                 {{#> components/button/top_topics_button}}

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

@@ -0,0 +1,19 @@
+<div id="serviceNavMainContainer" 
+    class="flex w-full h-10 md:h-12 lg:h-16 z-110 pl-5 pr-3 md:pr-0 lg:px-9.5 col-full sm:col-main">
+    <span id="serviceNavHeadline" class="hidden print:hidden">Service Navigation</span>
+    <div id="serviceLogoWrapper"  
+        class="flex items-center order-1 w-full bg-navigation-bg md:h-12 lg:h-16 md:w-1/2 md:max-w-1/2 lg:w-1/4 lg:max-w-1/4">
+        {{> components/site_header/service_logo _useSticky=_useSticky}}
+    </div>
+    <div id="serviceItemsWrapper"                
+        class="flex items-center justify-end flex-initial order-2 inline-block w-full max-w-full align-top bg-navigation-bg md:h-12 lg:h-16 lg:order-2 lg:w-3/4 lg:max-w-3/4 md:mt-0 md:w-1/2 md:max-w-1/2 md:order-2 md:border-0">
+        {{> components/site_header/service_navigation/service_list }}
+
+        {{> components/site_header/navigation_search/navigation_search }}
+    
+        <div id="burgerWrapper" 
+            class="flex justify-end flex-none order-2 lg:order-4 md:order-4 lg:hidden"> 
+            {{> components/site_header/burger }}    
+        </div>
+    </div>
+</div>