hr-design-system-handlebars 1.33.3 → 1.34.0

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

@@ -0,0 +1,90 @@
+<div class="sb-main-navigation" x-data="mainNavigationHandler()" x-init="{{#if _useSticky}}start(){{/if}}">
+    <header class="print:hidden relative z-10001 {{#if _useSticky}}{{#if this.hasOpenSubNavigation}}lg:h-header-lg-big {{else}}lg:h-header-lg-small {{/if}}{{else}}lg:h-auto {{/if}}md:h-header-md h-header-sm">   
+        <div x-data 
+            id="headerWrapper"
+            @resize.window="resetNav()" 
+            :class="shouldBrandNavBeHidden() ? '-mt-8 md:-mt-8' : ''  "
+            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 ">
+
+            
+            <div id="anchorNavWrapper" 
+                class="hidden">
+                {{> components/site_header/anchor_navigation/anchor_navigation }}
+            </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-10001">
+                {{> 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-all duration-500 ease-in-out border-b border-navigation-border-color bg-navigation-bg z-10002">   
+                <div id="serviceNavMainContainer" 
+                    class="flex w-full h-10 lg:container md:h-12 lg:px-10 lg:h-16 z-10001">
+
+                    <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/quick_search_button }}
+
+                        <div class="hidden lg:flex">
+                            {{> components/site_header/navigation_search/quick_search_form }}
+                        </div>
+                    
+                        <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>
+            </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-10000 print:hidden"
+            >   
+                {{> components/site_header/section_navigation/section_navigation }}
+            </div>
+            
+            <div x-cloak :class="shouldServiceNavBeHidden() ? 'hidden -mt-40' : ''"
+                x-effect="$el.setAttribute('id', 'flyout-' + $store.searchID.current + '-2');$el.setAttribute('aria-expanded', $store.searchFieldOpen);$el.setAttribute('aria-hidden', !$store.searchFieldOpen);$el.setAttribute('aria-labelledby', 'flyout-' + $store.searchID.current + '-1')" 
+                x-show="$store.searchFieldOpen"
+                class="sb-quick-search-flyout flex tablet:w-half-screen tablet:ml-half-screen justify-end order-4 w-full max-w-full p-2 px-5 py-3.5 bg-white drop-shadow-md md:mt-0 z-10002 lg:hidden print:hidden"
+                @search-close.window="$store.searchFieldOpen = false"
+                @click.outside="$store.searchFieldOpen = false; $dispatch('search-mobile-click-outside'); dropped = false; toggleScrolling(!$store.serviceNavIsOpensearchFieldOpen && !$store.burgeropen)"
+                x-transition:enter="transition ease-out duration-200" 
+                x-transition:enter-start="opacity-0 transform scale-y-90" 
+                x-transition:enter-end="opacity-100 transform scale-y-100" 
+                x-transition:leave="transition ease-in duration-100" 
+                x-transition:leave-start="opacity-100 transform scale-y-100" 
+                x-transition:leave-end="opacity-0 transform scale-y-90">
+
+                {{> components/site_header/navigation_search/quick_search_form }}
+
+            </div>
+            
+        </div> 
+    </header>
+    <div class="justify-center hidden w-full scale-50 brand-logo_print print:flex">
+        <img loading="lazy" 
+            alt="{{loca "header_homepage_link_title"}}" 
+            src="{{resourceUrl "assets/base/icons/rsslogo/brandlogo--rss.jpg" _brand=(if this.brand this.brand)}}" 
+            />
+    </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-10000 lg:hidden opacity-70"></div>
+    </div>
+</div>

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

@@ -0,0 +1,55 @@
+{{#with this.subNavigation}}
+    <div {{#unless ../this.selected}}x-cloak{{/unless}}
+        x-data="flyoutHandler" 
+        x-ref="{{getRandom}}"
+        id="flyout-{{getRandom}}" 
+        @resize.window.debounce=" dropped = false; setFlyoutAnimationStyle();"
+        {{#if this.showAsFlyout}} x-show="dropped"  {{else}} {{#if ../this.selected}} x-show="$screen('lg') ? true : dropped" {{else}} x-show="dropped" {{/if}} {{/if}}
+        {{#if ../_isSectionNav}} x-init="sectionNavFlyoutWatcher()"  :class ="shouldFlyoutBeHidden() ? 'hidden' : ''" {{/if}}  
+        
+        class="sb-navigation-flyout bg-white md:filter md:drop-shadow-md 
+                {{~#if ../_isSectionNav}} relative md:top-auto md:left-auto lg:mt-10 w-full transition-all duration-500 ease-in-out
+                    {{#unless this.showAsFlyout}}
+                        {{#if ../this.selected}}
+                            isSelectedAndOpen  lg:ml-0 z-10000 lg:border-b lg:border-primary lg:filter-none lg:left-0 flex justify-center
+                        {{else}} z-10002 lg:left-auto lg:w-auto {{/if}}
+                    {{else}} z-10002 lg:left-auto lg:w-auto divide-y divide-gray-200{{/unless}}
+                {{else}} z-10002 lg:rounded-b absolute w-full top-10 left-0 md:w-80 lg:w-92 md:top-12 lg:px-4 md:mt-0 md:left-0 lg:top-15 lg:left-0 divide-y divide-gray-200 tablet:w-half-screen tablet:ml-half-screen tablet:right-0 tablet:left-auto {{/if}}
+                {{~#if this.showAsFlyout}} lg:rounded-b lg:px-4 lg:absolute{{else}} lg:fixed{{/if}}" 
+
+        aria-labelledby="flyout-{{getRandom}}-1" 
+        {{#if this.showAsFlyout}}
+            x-effect="$el.setAttribute('aria-expanded', dropped); $el.setAttribute('aria-hidden', !dropped)"
+        {{else}}
+            {{#if ../this.selected}} 
+                x-effect="$el.setAttribute('aria-expanded', $screen('lg') || dropped); $el.setAttribute('aria-hidden', !($screen('lg') || dropped))"
+            {{else}}  
+                x-effect="$el.setAttribute('aria-expanded', dropped); $el.setAttribute('aria-hidden', !dropped)"
+            {{/if}} 
+        {{/if}}    
+    >
+        {{#if this.showAsFlyout ~}}
+            {{#if ../this.flyoutStartLinkText}}
+                <div class="w-full">
+                    <div class="{{~#if ../_isSectionNav}}hidden lg:flex{{else}}flex{{/if}} pt-4 pb-2 pl-4 text-base font-bold bg-white lg:pl-0 md:pt-4 lg:pt-1 lg:pb-0 justify-left text-primary ">              
+                        <a href="{{resourceUrl ../this.url}}" class="-isHeaderLink lg:leading-10 link-focus-inset js-load" data-hr-click-tracking='{"settings": [{"type": "uxAction", "secondLevelId": "1", "clickLabel": "{{../_navigationType}}::{{../_parent}}::{{../this.flyoutStartLinkText}}-Link geklickt"}]}' >
+                            {{../this.flyoutStartLinkText}}
+                        </a>      
+                    </div>          
+                </div>
+            {{/if}}          
+        {{/if}}
+        
+        <div class="{{#if this.showAsFlyout}}lg:flex lg:flex-row -columnCount--{{this.columnCount}} lg:divide-x lg:divide-gray-200 {{else}} {{#if ../this.selected}} w-full lg:px-10 lg:container {{/if}}{{/if}}">
+            {{#if this.showAsFlyout}}
+                {{#each this.columns}}
+                    {{> components/site_header/navigation_flyout/navigation_flyout_column _count=../this.columnCount _navtype=../../_navigationType _parent=../../_parent _flyout=true~}}
+                {{/each}}
+            {{else}}
+                {{#with this.items}}
+                    {{> components/site_header/navigation_flyout/navigation_flyout_column _selected=../../this.selected _navtype=../../_navigationType _parent=../../_parent _flyout=false ~}}
+                {{/with}}
+            {{/if}}
+        </div>
+</div>
+{{/with}}

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

@@ -0,0 +1,7 @@
+<ul class="{{inline-switch _count '["1","2"]' '["md:w-1/1", "md:w-1/1 lg:w-1/2"]'}} lg:only:odd:pr-0 lg:even:pl-4 lg:odd:pr-4{{#if _selected}} lg:container lg:flex lg:h-9 {{/if}} ">
+    {{~#each this ~}} 
+        {{~#if this.title~}}
+            {{> components/site_header/navigation_flyout/navigation_flyout_item _parentselected=../_selected _fromNav=../_navtype _flyout=../_flyout _parent=../_parent ~}}
+        {{~/if~}}       
+    {{~/each~}}
+</ul>

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

@@ -0,0 +1,12 @@
+<li :class="dropped ? 'h-auto' : 'h-10'"  
+    class="lg:border-0 sb-navigation-flyout-item pl-4 {{#if _flyout}}lg:px-0 {{else}}lg:px-2 lg:first-of-type:pl-0 {{/if}}{{#if _parentselected}}lg:whitespace-nowrap{{/if}} flex h-auto text-base leading-6 border-b border-gray-200 first:border-t md:first:border-t-0 last:border-b last:border-navigation-border-color lg:last:border-0 text-primary justify-start hover:underline">
+    {{#with this}}
+        {{#> components/base/link _link=this.link _css=(inline-switch _fromNav '["RubrikNavigation","ServiceNavigation","SubNavInRubrikNav"]' '["link-focus-inset py-2 w-full","link-focus py-2 md:pl-0 lg:pl-0 lg:pr-0 break-words w-full","link-focus py-2 md:pl-0 lg:pl-0 lg:pr-0 break-words w-full"]') }}
+            {{this.text}}      
+            {{~#if this.link.hasIcon}}{{> components/base/image/icon _icon=this.link.iconName _addClass="w-4 h-4 fill-current ml-2 inline-flex" _iconmap="icons" }} {{/if}}
+        {{/components/base/link}} 
+        {{#*inline "htmlProperties"}}
+            {{> components/tracking/navigation_tracking _clickLabelType=_fromNav _clickLabelPrefix1=_parent clickLabelPrefix2=this.link.content.text}}
+        {{/inline}}
+    {{/with}} 
+</li>

package/dist/views_static/components/site_header/navigation_search/quick_search_button.hbs

@@ -0,0 +1,31 @@
+<div 
+    x-cloak class="flex items-center h-8 sb-quick-search-button md:h-full md:border-r md:border-l border-navigation-border-color lg:border-none" 
+    :class="$store.searchFieldOpen == true ? 'bg-white mt-2 rounded-t md:mt-0 md:rounded-none' : 'bg-navigation-bg'"
+>
+    <button  
+        @click="$store.searchFieldOpen = ! $store.searchFieldOpen; dropped = false; $store.serviceNavIsOpen = false; toggleScrolling(!$store.searchFieldOpen)"
+        @click.debounce.100ms="$dispatch('burger-close'); $dispatch('search-mobile-click'); $dispatch('close-servicemenu');"
+        class="h-full cursor-pointer text-navigation-text md:px-4 lg:hidden"
+        x-effect="$el.setAttribute('id', 'flyout-' + $store.searchID.current + '-1');$el.setAttribute('aria-owns', 'flyout-' + $store.searchID.current + '-2');$el.setAttribute('aria-controls', 'flyout-' + $store.searchID.current + '-2');$el.setAttribute('aria-expanded', $store.searchFieldOpen == true);$el.setAttribute('aria-label', $store.searchFieldOpen == true ? 'Suche schließen' : 'Suche öffnen')"
+    >
+        <svg 
+            x-show="$store.searchFieldOpen == false"
+            class="h-5 fill-current text-navigation-text w-9" 
+            xmlns="http://www.w3.org/2000/svg" 
+            viewBox="0 0 20 20"
+            role="presentation" 
+            x-effect="$el.setAttribute('aria-hidden', $store.searchFieldOpen == true)"
+        >
+            <path d="M12.9 14.32a8 8 0 1 1 1.41-1.41l5.35 5.33-1.42 1.42-5.33-5.34zM8 14A6 6 0 1 0 8 2a6 6 0 0 0 0 12z"></path>
+        </svg>
+        <svg 
+            x-show="$store.searchFieldOpen == true"
+            class="h-6 fill-current w-9 text-primary" 
+            xmlns="http://www.w3.org/2000/svg" 
+            viewBox="0 0 20 20"
+            x-effect="$el.setAttribute('aria-hidden', $store.searchFieldOpen == false)"
+        >
+            <path d="M15.898,4.045c-0.271-0.272-0.713-0.272-0.986,0l-4.71,4.711L5.493,4.045c-0.272-0.272-0.714-0.272-0.986,0s-0.272,0.714,0,0.986l4.709,4.711l-4.71,4.711c-0.272,0.271-0.272,0.713,0,0.986c0.136,0.136,0.314,0.203,0.492,0.203c0.179,0,0.357-0.067,0.493-0.203l4.711-4.711l4.71,4.711c0.137,0.136,0.314,0.203,0.494,0.203c0.178,0,0.355-0.067,0.492-0.203c0.273-0.273,0.273-0.715,0-0.986l-4.711-4.711l4.711-4.711C16.172,4.759,16.172,4.317,15.898,4.045z"></path>
+        </svg>
+    </button>
+</div>

package/dist/views_static/components/site_header/navigation_search/quick_search_form.hbs

@@ -0,0 +1,134 @@
+<form 
+    x-data="searchSuggest()"
+    role="search" 
+    action="{{resourceUrl "suche/index.nocache"}}" 
+    method="get" 
+    class="relative flex w-full border rounded lg:search-border-desktop search-border-mobile sb-quick-search-form md:justify-end"
+>
+    <div 
+        class="flex w-full lg:h-10" 
+        id="search-content"
+        @click.away="active=false; cursorIndex=-1"
+        @keydown.arrow-down="moveDownList()"
+        @keydown.arrow-up="moveUpList()"
+    >   
+        <label for="searchInput--{{nextRandom}}" class="hidden">suchfeld</label>
+        <input 
+            @input.debounce="getSuggestionsForInput();cursorIndex=-1"
+            @click="active=true" 
+            name="query" 
+            x-model="query"
+            placeholder='{{loca "search_input_placeholder" }}' 
+            class="w-full px-2 py-2 text-base leading-4 placeholder-opacity-100 rounded-l shadow-inner appearance-none lg:top-10 placeholder-text-xs placeholder-secondary text-secondary focus:outline-none"
+            type="text"
+            id="searchInput--{{getRandom}}"
+            autocomplete="off"
+            role="combobox" 
+            aria-haspopup="listbox" 
+            aria-autocomplete="list" 
+            x-effect="$el.setAttribute('aria-expanded', (query.length > 1 && active && suggestions.length > 0))"
+            aria-owns="suggestionlist--{{getRandom}}"
+            aria-controls="suggestionlist--{{getRandom}}"
+        > 
+        <div 
+            class="absolute left-0 w-auto min-w-full z-100 top-8 lg:top-10" 
+            x-show="query.length > 1 && active && suggestions.length"
+            x-cloak
+            x-transition:leave="transition ease-in duration-100"
+            x-transition:leave-start="opacity-100"
+            x-transition:leave-end="opacity-0"
+        >
+            <ul 
+                role="listbox" 
+                id="suggestionlist--{{getRandom}}" 
+                aria-label="Suche öffnen"
+                x-effect="$el.setAttribute('aria-expanded', query.length > 1 && active && suggestions.length > 0);$el.setAttribute('aria-hidden', !(query.length > 1 && active && suggestions.length > 0))"
+                class=" w-full mt-1 lg:mt-0.5 bg-white border rounded divide-y shadow-xl top-100"
+                x-ref="list"
+            >
+                
+                <template x-for="(suggestion, index) in suggestions" :key="index">
+                    <li class="first-of-type:border-none">
+                        <a  
+                            x-bind:active="false"
+                            x-bind:href="'{{resourceUrl "suche/index.nocache"}}?query=' + suggestion"
+                            x-bind:class="{'py-1.5 px-2 link-focus-inset text-base flex w-full text-secondary rounded hover:bg-primary hover:text-white': true, 'bg-primary text-white':index==cursorIndex }"
+                        >
+                            <span x-text="suggestion"></span>
+                        </a>
+                    </li>
+                </template>
+                
+            </ul>
+        </div>  
+    </div>
+    <button 
+        aria-label='{{loca "search_input_aria_submit" }}' 
+        type="submit" 
+        class="pl-3 pr-2 border-l cursor-pointer lg:search-border-desktop lg:rounded-r link-focus-inset bg-primary lg:bg-white text-primary z-10002"
+    >
+        <svg class="w-6 h-6 text-white fill-current bg-primary lg:fill-current lg:text-primary lg:bg-white" 
+             xmlns="http://www.w3.org/2000/svg" 
+             viewBox="0 0 20 20"
+             aria-hidden="true"
+        >
+            <path d="M12.9 14.32a8 8 0 1 1 1.41-1.41l5.35 5.33-1.42 1.42-5.33-5.34zM8 14A6 6 0 1 0 8 2a6 6 0 0 0 0 12z"></path>
+        </svg>
+    </button>
+</form>
+
+<script type="text/javascript">
+
+    function searchSuggest() {
+
+        return {
+            active:true,
+            cursorIndex: -1,
+            query: "",
+            suggestions: [],
+
+            getSuggestionsForInput() {
+
+                suggestionDataUrl = '{{resourceUrl "suche/index~suggest.jsp"}}' + '?suggestions=' + this.query;
+
+                fetch(suggestionDataUrl)
+
+                    .then((res) =>{  return res.text()})
+
+                    .then((data) => {
+                        data = JSON.parse(data.replace(/&quot;/g, '"'))
+                        data.solrSuggestions = this.filterStartwith(data.solrSuggestions, this.query)
+                        this.suggestions= this.filterSortbylength(data.solrSuggestions)
+                    });
+
+            },
+
+            filterStartwith(data, query) {
+               return data.filter(Suggestion => Suggestion.toLowerCase().startsWith(query.toLowerCase().trim()))
+            },
+
+            filterSortbylength(data) {
+               return data.sort((a, b) => a.length - b.length)
+            },
+
+            moveDownList() {
+                    if (this.suggestions.length > 0 && this.cursorIndex < this.suggestions.length - 1) 
+                    {
+                        this.cursorIndex++;
+                        this.query = this.suggestions[this.cursorIndex];
+                    }
+            },
+
+            moveUpList() {
+                    if (this.suggestions.length > 0 && this.cursorIndex > 0) 
+                    {
+                        this.cursorIndex--;
+                        this.query = this.suggestions[this.cursorIndex];
+                    }
+            },
+
+        };
+
+    }
+
+</script>

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

@@ -0,0 +1,30 @@
+<div 
+    id="sectionNav"
+    class="w-full px-0 mt-10 sb-section-navigation md:mt-0 lg:px-10 lg:container " 
+    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"}}
+    <div class="flex w-full">
+        <span id="sectionNavHeadline" class="hidden">Bereichsnavigation</span>
+
+        {{#with this.sectionNavigationSSILinks}}
+            <ul class="flex flex-col items-center w-full text-left list-none text-navigation-icons lg:flex-row lg:h-auto lg:mt-1">
+                {{#each this}}   
+                    {{#if (isStorybook)}}  
+                        {{> components/site_header/section_navigation/section_navigation_item }}   
+                    {{else}}
+                        {{{this}}}
+                    {{/if}}
+                    {{#if @first}}
+                        {{#with ../../this.topTopicsNavigation }}                               
+                            {{> components/site_header/section_navigation/section_navigation_top_topics }}                             
+                        {{/with}}
+                    {{/if}}
+                {{/each}} 
+            </ul>
+        {{/with}}
+
+    </div>
+{{/components/horizontal_scroll_container/horizontal_scroll_container}}
+
+</div> 

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

@@ -0,0 +1,127 @@
+{{#each this.navigationItems}}
+    <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">  
+        
+        {{#if this.isCluster ~}}
+            {{!-- Gilt z.B. für REGIONEN:  --}}        
+            <button id="button-{{nextRandom}}-1" 
+                @click.debounce.100ms="toggle(); 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" 
+                x-effect="$el.setAttribute('aria-expanded', dropped);$el.setAttribute('tabindex',  $store.burgeropen || $screen('lg') ? '0' : '-1')"
+                aria-owns="flyout-{{getRandom}}" 
+                aria-controls="flyout-{{getRandom}}" 
+                data-hr-click-tracking='{"settings": [{"type": "uxAction", "secondLevelId": "1", "clickLabel": "Rubriknavigation::{{this.text}}-Toggle-Link geklickt"}]}'>
+
+        {{~else ~}}
+
+            {{#if this.subNavigation}}
+                {{#if this.subNavigation.showAsFlyout}}
+                    {{!-- Gilt z.B. für "SHOWS" bei HR3 --}} 
+                    <a href="{{resourceUrl this.url}}"
+                        id="button-{{getRandom}}-1" 
+                        @click="preventDefault(isDesktopView(),$event); toggle(); correctFlyoutPos()"
+                        @resize.window="dropped=false; correctFlyoutPos()" 
+                        :class="dropped ? 'lg:underline 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 pr-8 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 ? '0' : '-1')"
+                        aria-owns="flyout-{{getRandom}}" 
+                        aria-controls="flyout-{{getRandom}}" 
+                        aria-labelledby="flyout-{{getRandom}}-1" 
+                        data-hr-click-tracking='{"settings": [{"type": "uxAction", "secondLevelId": "1", "clickLabel": "Rubriknavigation::{{this.text}}-Toggle-Link geklickt"}]}'
+                    >                
+                {{else}}
+                    {{!-- Gilt z.B. für POLITIK:  --}}
+                    <a href="{{resourceUrl this.url}}" 
+                        id="flyout-{{nextRandom}}-1" 
+                        
+                        :class="dropped ? 'font-bold' : ''"
+                        class="{{#if this.selected}}-currentSection lg:justify-center {{/if}}link-focus-inset-white 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}}"
+                        {{#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')"
+                        aria-owns="flyout-{{getRandom}}"
+                        aria-controls="flyout-{{getRandom}}"
+                        data-hr-click-tracking='{"settings": [{"type": "uxNavigation", "secondLevelId": "1", "clickLabel": "Rubriknavigation::{{this.text}}-Link geklickt"}]}'
+                    >            
+                {{/if}}   
+
+            {{~else ~}}
+
+                {{!-- Gilt für START/GESELLSCHAFT/WIRTSCHAFT usw:  --}}
+                <a href="{{resourceUrl this.url}}" 
+                    class="{{#if this.selected}}-currentSection lg:justify-center {{/if}} link-focus-inset-white js-load flex justify-start pl-4 pr-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')"
+                >
+
+            {{~/if}}
+
+        {{~/if }}
+
+
+        {{#if this.subNavigation}}
+
+            {{~this.text~}}
+            
+            {{#if this.subNavigation.showAsFlyout ~}}
+                    <div class="items-center justify-center{{#if this.isCluster}} flex{{else}} hidden{{~/if}} w-10 h-10 leading-4 lg:w-auto lg:border-0 lg:pl-1 lg:flex">
+                        <div class="flex items-center justify-center" :class="dropped ? 'transform rotate-180':''">
+                            {{> components/base/image/icon _icon="arrow-down" _iconmap="icons" _addClass="w-3 h-2 fill-current"}}
+                        </div>
+                    </div>
+               
+            {{/if}}
+
+        {{else}}
+            {{~this.text~}}      
+            {{~#if this.hiddenText~}}
+                <span class="sr-only">{{~this.hiddenText~}}</span>
+            {{~/if~}} 
+        {{~/if}}
+
+
+        {{#if this.isCluster}}
+
+            </button>
+
+        {{else}}
+
+            </a>
+
+            {{#if this.subNavigation}}
+                
+                    <button 
+                        @click.debounce.100ms="toggle()" 
+                        id="button-{{getRandom}}-1" 
+                        class="flex items-center justify-center w-10 h-10 leading-4 border-l border-white js-load lg:hidden" 
+                        aria-haspopup="true"  
+                        x-effect="$el.setAttribute('aria-expanded', dropped);$el.setAttribute('tabindex',  $store.burgeropen ? '0' : '-1')"
+                        aria-owns="flyout-{{getRandom}}" 
+                        aria-controls="flyout-{{getRandom}}" 
+                        aria-labelledby="flyout-{{getRandom}}-1" 
+                        data-hr-click-tracking='{"settings": [{"type": "uxAction", "secondLevelId": "1", "clickLabel": "Rubriknavigation::{{this.text}}-Toggle-Link geklickt"}]}'>
+
+                        <span class="hidden">{{~this.text~}}</span>
+                        
+                        <div class="flex items-center justify-center lg:ml-2 lg:relative lg:right-0" :class="dropped ? 'transform rotate-180 ':''">
+                            {{> components/base/image/icon _icon="arrow-down" _iconmap="icons" _addClass="w-4 h-2 fill-current"}}
+                        </div>
+                    </button>
+                
+            {{/if}}
+
+        {{/if}}
+        {{#if this.isCluster}}
+            {{> components/site_header/navigation_flyout/navigation_flyout _isSectionNav=true _navigationType="RubrikNavigation" _parent=this.text }}
+        {{else}}
+            {{> components/site_header/navigation_flyout/navigation_flyout _isSectionNav=true _navigationType="SubNavInRubrikNav" _parent=this.text }}
+        {{/if}}
+    </li>
+{{/each}}

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

@@ -0,0 +1,12 @@
+<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">
+        {{#each this.items}}
+            <li class="{{#unless @last}}mr-3 {{/unless}}">
+                {{#> components/button/top_topics_button}}
+                    <div class="sr-only">{{loca "label_top_thema"}}</div>  
+                    {{> components/button/components/button_label _label=this.text _css="!leading-none"}}
+                {{/components/button/top_topics_button}}
+            </li>
+        {{/each}} 
+    </ul>
+</li>

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

@@ -0,0 +1,29 @@
+<a class="relative flex items-center w-auto h-full text-white fill-current sb-service-logo link-focus-white print:hidden" 
+    href={{resourceUrl "index.html"}} 
+    title="{{loca "header_homepage_link_title"}}">
+
+        <div x-cloak 
+            {{#if _useSticky}}
+                class="absolute 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]" 
+                :class="`${percent}` < 50 ? 'opacity-0' : 'opacity-100'"
+            {{else}}
+                class="relative flex h-10 brand-logo-size md:hidden"
+            {{/if}}     
+        >   
+            <img src="{{resourceUrl "assets/base/icons/logo/brandlogo--mobile.min.svg" _brand=(defaultIfEmpty this.brand "hessenschau")}}" 
+                class="w-auto h-full logo-compact" alt="{{loca "meta_application_name"}}">
+        </div>      
+        
+        <div 
+            {{#if _useSticky}}
+                class="w-auto 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]"
+                :class="`${percent}` < 50 ? 'delay-1000 opacity-100' : 'delay-200 opacity-0 hidden'"
+            {{else}}    
+                class="md:flex hidden justify-start w-auto brand-logo-size md:brand-logo-size-md lg:brand-logo-size-lg h-12 lg:h-[3.875rem]"
+            {{/if}}
+        >
+            <img src="{{resourceUrl "assets/base/icons/logo/brandlogo--desk.min.svg" _brand=(defaultIfEmpty this.brand "hessenschau")}}" 
+                class="w-auto h-full logo-desk" alt="{{loca "meta_application_name"}}">     
+        </div>
+          
+</a>

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

@@ -0,0 +1,15 @@
+<div 
+    id="serviceList"
+    @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-1000 md:z-10000 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">
+            {{#each this}}        
+                {{> components/base/loadSSI _templatePath='components/site_header/service_navigation/service_navigation_item' }}               
+            {{/each}} 
+        </ul>
+    {{/with}}
+</div>

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

@@ -0,0 +1,59 @@
+{{#each this.navigationItems}}
+    <li class="sb-service-navigation-item -{{this.id}} flex flex-col h-10 lg:h-15 md:h-full w-full tablet:first:border-l border-r last:border-r-0 lg:border-r-0 text-navigation-icons border-navigation-border-color" >
+        {{#if this.subNavigation}} 
+            <button 
+                id="{{nextRandom}}" 
+                @click.debounce.100ms="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')"
+                data-hr-click-tracking='{"settings": [{"type": "uxNavigation", "secondLevelId": "1", "clickLabel": "Servicenavigation::{{this.text}}-Link geklickt"}]}'
+            >
+              
+        {{else}}
+
+            {{#if this.extern}}
+                <a href="{{this.url}}" target="_blank" x-init="dropped = false" class="flex flex-col items-center justify-center h-full px-4 lg:justify-start lg:px-3 lg:pt-1 lg:rounded-t link-focus-inset-white js-load" id="flyout-{{nextRandom}}-1" data-hr-click-tracking='{"settings": [{"type": "uxNavigation", "secondLevelId": "1", "clickLabel": "Servicenavigation::{{this.text}}-Link geklickt"}]}'>
+            {{else}}
+                <a href="{{resourceUrl this.url}}" x-init="dropped = false" class="flex flex-col items-center justify-center h-full px-4 lg:justify-start lg:px-3 lg:pt-1 lg:rounded-t link-focus-inset-white js-load" id="flyout-{{nextRandom}}-1" data-hr-click-tracking='{"settings": [{"type": "uxNavigation", "secondLevelId": "1", "clickLabel": "Servicenavigation::{{this.text}}-Link geklickt"}]}'>
+            {{/if}}
+
+        {{/if}}
+
+            <div class="w-7 md:w-8 h-7 md:h-8" >
+                {{> components/base/image/icon _icon=this.icon _iconmap="icons" _addClass="w-full h-full fill-current"}}
+                <span class="sr-only lg:hidden">{{this.text}}</span>
+            </div>
+
+            <div :class="{'text-primary fill-current': dropped,'text-navigation-icons fill-white': !dropped}" class="relative flex-row items-center justify-center hidden pt-px text-navigation-icons lg:flex z-10002">
+                <div class="flex" >
+                    <span class="flex text-xs leading-4 whitespace-nowrap">
+                        {{text}} 
+                    </span>
+                    {{#if this.subNavigation}} 
+                        <div class="flex lg:pl-1">
+                            <div class="flex items-center justify-center" :class="dropped ? 'transform rotate-180':'' ">
+                                {{> components/base/image/icon _icon="arrow-down" _iconmap="icons" _addClass="w-3 h-2 fill-current"}}
+                            </div>
+                        </div>
+                    {{/if}}   
+                </div>
+            </div>  
+        {{#if this.subNavigation}}       
+            {{> components/site_header/navigation_flyout/navigation_flyout _isSectionNav=false  _navigationType="ServiceNavigation" _parent=this.text }}
+            </button>
+        {{else}}       
+            </a>
+        {{/if}}   
+    </li>
+{{/each}}