hr-design-system-handlebars 1.33.2 → 1.34.0

package/dist/views_static/components/footer/page_footer_metadata.hbs

@@ -0,0 +1,87 @@
+<div class="flex flex-col self-center text-sm md:self-end w-fit md:flex-row">
+    <div class="flex justify-center w-auto md:justify-start">
+        {{#> components/base/link _link=_hrDeLink _css="flex whitespace-nowrap hover:underline"}}
+            &copy; {{{_hrDeLink.text}}} {{{_hrDeLink.currentTime.year}}}
+                {{~#if _hrDeLink.hiddenText~}}
+                    <span class="sr-only">
+                        {{~_hrDeLink.hiddenText~}}
+                    </span>
+                {{~/if~}}
+                {{~#if _hrDeLink.isTargetBlank}}
+                    <span class="inline-flex">
+                        {{> components/base/image/icon _icon=_iconName _iconmap="icons" _addClass="ml-1 w-4 h-4 fill-footer-text"}}
+                    </span>
+                {{/if~}}
+        {{/components/base/link}}
+        {{#*inline "htmlProperties"}}
+            {{#if _hrDeLink.labelText}} aria-label="{{_hrDeLink.labelText}}"{{/if}}
+            {{#if _hrDeLinktitle}} title="{{_hrDeLink.title}}"{{/if}}
+        {{/inline}}
+    </div>
+
+    <span class="hidden px-2 md:flex ">|</span>
+
+    <div class="flex justify-center w-auto md:justify-start">
+        {{#> components/base/link _link=_ardDeLink _css="flex whitespace-nowrap hover:underline"}}
+            {{{_ardDeLink.text}}}
+                {{~#if _ardDeLink.hiddenText~}}
+                    <span class="sr-only">
+                        {{~_ardDeLink.hiddenText~}}
+                    </span>
+                {{~/if~}}
+                {{~#if _ardDeLink.isTargetBlank}}
+                    <span class="inline-flex">
+                        {{> components/base/image/icon _icon=_iconName _iconmap="icons" _addClass="ml-1 w-4 h-4 fill-footer-text"}}
+                    </span>
+                {{/if~}}
+        {{/components/base/link}}
+        {{#*inline "htmlProperties"}}
+            {{#if _ardDeLink.labelText}} aria-label="{{_ardDeLink.labelText}}"{{/if}}
+            {{#if _ardDeLink.title}} title="{{_ardDeLink.title}}"{{/if}}
+        {{/inline}}
+    </div>
+
+    <span class="hidden px-2 md:flex ">|</span>
+
+    <div class="flex justify-center w-auto md:justify-start">
+         {{#> components/base/link _link=_dataProtectionLink _css="flex whitespace-nowrap hover:underline"}}
+            {{{_dataProtectionLink.text}}}
+                {{~#if _dataProtectionLink.hiddenText~}}
+                    <span class="sr-only">
+                        {{~_dataProtectionLink.hiddenText~}}
+                    </span>
+                {{~/if~}}
+                {{~#if _dataProtectionLink.isTargetBlank}}
+                    <span class="inline-flex">
+                        {{> components/base/image/icon _icon=_iconName _iconmap="icons" _addClass="ml-1 w-4 h-4 fill-footer-text"}}
+                    </span>
+                {{/if~}}
+        {{/components/base/link}}
+        {{#*inline "htmlProperties"}}
+            {{#if _dataProtectionLink.labelText}} aria-label="{{_dataProtectionLink.labelText}}"{{/if}}
+            {{#if _dataProtectionLink.title}} title="{{_dataProtectionLink.title}}"{{/if}}
+        {{/inline}}
+    </div>
+
+    <span class="hidden px-2 md:flex ">|</span>
+
+    <div class="flex justify-center w-auto md:justify-start">
+         {{#> components/base/link _link=_imprintLink _css="flex whitespace-nowrap hover:underline"}}
+            {{{_imprintLink.text}}}
+                {{~#if _imprintLink.hiddenText~}}
+                    <span class="sr-only">
+                        {{~_imprintLink.hiddenText~}}
+                    </span>
+                {{~/if~}}
+                {{~#if _imprintLink.isTargetBlank}}
+                    <span class="inline-flex">
+                        {{> components/base/image/icon _icon=_iconName _iconmap="icons" _addClass="ml-1 w-4 h-4 fill-footer-text"}}
+                    </span>
+                {{/if~}}
+        {{/components/base/link}}
+        {{#*inline "htmlProperties"}}
+            {{#if _imprintLink.labelText}} aria-label="{{_imprintLink.labelText}}"{{/if}}
+            {{#if _imprintLink.title}} title="{{_imprintLink.title}}"{{/if}}
+        {{/inline}}
+    </div>
+</div>

package/dist/views_static/components/footer/page_footer_nav_link.hbs

@@ -0,0 +1,18 @@
+{{#> components/base/link _link=_link _css=_css}}
+    {{ _link.text}}
+    {{~#if  _link.hiddenText~}}
+        <span class="sr-only">
+            {{~ _link.hiddenText~}}
+        </span>
+    {{~/if~}}
+    {{~#if  _link.isTargetBlank}}
+        <span class="inline-flex md:mt-0.5 md:ml-1">
+            {{> components/base/image/icon _icon=_iconName _iconmap="icons" _addClass="w-4 h-4 fill-current"}}
+        </span>
+    {{/if~}}
+{{/components/base/link}}
+{{#*inline "htmlProperties"}}
+    {{#with _link}}
+        {{#if _link.labelText}} aria-label="{{_link.labelText}}"{{/if}}
+    {{/with}}
+{{/inline}}

package/dist/views_static/components/footer/page_footer_search.hbs

@@ -0,0 +1,6 @@
+<div class="relative mx-auto ">
+    <div class="flex px-8 pt-4 md:pt-0 md:px-0">
+        {{> components/site_header/navigation_search/quick_search_form }}
+    </div>
+    
+</div>

package/dist/views_static/components/footer/page_footer_social_media.hbs

@@ -0,0 +1,29 @@
+<nav class="block pb-0 mx-auto md:mx-0" aria-labelledby="c-footer_social_media_title" >
+    <span id="c-footer_social_media_title" class="hidden">{{_title}}</span>
+    {{#each _columns}}
+        <ul class="flex flex-row justify-end pb-2 pr-2 md:pr-0 md:last:pb-4">
+            {{#each this.links}}
+                {{#if this.extern}}
+                    <li class="pr-2 last:pr-0">
+                        {{#> components/base/link _link=this _css="text-footer-text" _isTargetBlank=this.isTargetBlank}}
+                            {{> components/base/image/icon _icon=this.text _iconmap="icons" _addClass="w-8 h-8 fill-current"}}
+                        {{/components/base/link}}
+                        {{#*inline "htmlProperties"}}
+                            title="{{this.title}}"
+                        {{/inline}}
+            
+                    </li>
+                {{else}}
+                    <li class="pr-2 last:pr-0">
+                        {{#> components/base/link _link=this _css="text-footer-text" _isTargetBlank=this.isTargetBlank}}
+                            {{> components/base/image/icon _icon=this.text _iconmap="icons" _addClass="w-8 h-8 fill-current"}}
+                        {{/components/base/link}}
+                        {{#*inline "htmlProperties"}}
+                            title="{{this.title}}"
+                        {{/inline}}
+                    </li>
+                {{/if}}
+            {{/each}}
+        </ul>
+    {{/each}}
+</nav>

package/dist/views_static/components/geoTag/geoTag.hbs

@@ -0,0 +1,6 @@
+<span
+    class='w-3/5 max-w-min truncate z-10 pointer-events-none absolute bottom-0 left-0{{#if _isMobile1to1}}{{inline-switch _teaserSize '["25"]' '[" hidden"," hidden md:inline-block"]'}}{{else}} inline-block{{/if}} mx-4 my-4 rounded px-1.5 pt-px tracking-wide text-black text-base leading-5.5 font-heading bg-geoTag'
+    aria-hidden="true"
+>
+    {{~_text~}}
+</span>

package/dist/views_static/components/grid/grid.hbs

@@ -0,0 +1,12 @@
+<div class="grid grid-page">
+  <div class="{{> components/grid/grid_group_wrapper_classes }}">
+    {{> components/grid/grid_group_100_item_100 }}
+    {{> components/grid/grid_group_100_item_100_with_background }}
+    {{> components/grid/grid_group_100_item_50 }}
+    {{> components/grid/grid_group_100_item_33 }}
+    {{> components/grid/grid_group_100_item_25 }}
+    {{> components/grid/grid_group_100_tabbed_50 }}
+    {{> components/grid/grid_group_100_tabbed_33 }}
+    {{> components/grid/grid_group_100_tabbed_25 }}
+  </div>
+</div>

package/dist/views_static/components/grid/grid_group.hbs

@@ -0,0 +1,11 @@
+{{~#if _backgroundColor}}
+    {{#>components/grid/grid_group_highlight _backgroundColor=this.backgroundColor }}  
+        {{> @partial-block }}
+          
+    {{/components/grid/grid_group_highlight }}
+{{else}}
+    {{#>components/grid/grid_group_standard _groupSize=this.teaserSize }}  
+        {{> @partial-block }}
+      
+    {{/components/grid/grid_group_standard }}
+{{/if}}

package/dist/views_static/components/grid/grid_group_100_item_100.hbs

@@ -0,0 +1,14 @@
+<div class="grid grid-page">
+  <div class="{{> components/grid/grid_group_wrapper_classes }}">
+{{#>components/grid/grid_group _size="100"}}
+      <h2 class="text-4xl headline--barrier col-span-full">Gruppen 100%</h2>
+      {{#>components/grid/grid_item _size="12"}}
+        <a href="#">
+          <div class="flex items-center justify-center text-5xl text-white bg-gray-500 aspect-video">
+            12/12 = 100%    
+          </div>
+        </a>
+      {{/components/grid/grid_item}}   
+{{/components/grid/grid_group}} 
+  </div>
+</div>

package/dist/views_static/components/grid/grid_group_100_item_100_with_background.hbs

@@ -0,0 +1,17 @@
+ <div class="grid grid-page">
+  <div class="{{> components/grid/grid_group_wrapper_classes }}">
+ {{#>components/grid/grid_group _backgroundColor="2" _size="100"}} 
+      <h2 class="text-4xl headline--barrier col-span-full">Gruppen 100% mit blauen Hintergrund bis Rand</h2>
+      {{#>components/grid/grid_item _size="6"}}
+        <div class="flex items-center justify-center text-5xl text-white bg-gray-500 aspect-video">
+          6/12 = 50%    
+        </div>
+      {{/components/grid/grid_item}}  
+      {{#>components/grid/grid_item _size="6"}}
+        <div class="flex items-center justify-center text-5xl text-white bg-gray-500 aspect-video">
+          6/12 = 50%    
+        </div>
+      {{/components/grid/grid_item}} 
+{{/components/grid/grid_group}} 
+  </div>
+</div>

package/dist/views_static/components/grid/grid_group_100_item_25.hbs

@@ -0,0 +1,28 @@
+{{#>components/grid/grid_group _size="100"}}
+        <h2 class="text-4xl headline--barrier col-span-full">Gruppen 100%</h2>
+        {{#>components/grid/grid_item _size="3"}}
+        <div class="flex items-center justify-center text-4xl text-white bg-gray-500 aspect-video">
+          3/12 = 25%    
+        </div> 
+        {{/components/grid/grid_item}}
+        
+        {{#>components/grid/grid_item _size="3"}}
+        <div class="flex items-center justify-center text-4xl text-white bg-gray-500 aspect-video">
+          3/12 = 25%    
+        </div> 
+        {{/components/grid/grid_item}}
+
+        {{#>components/grid/grid_item _size="3"}}
+        <div class="flex items-center justify-center text-4xl text-white bg-gray-500 aspect-video">
+          3/12 = 25%    
+        </div>   
+        {{/components/grid/grid_item}}
+
+        {{#>components/grid/grid_item _size="3"}}
+        <div class="flex items-center justify-center text-4xl text-white bg-gray-500 aspect-video">
+          3/12 = 25%    
+        </div>    
+        {{/components/grid/grid_item}} 
+{{/components/grid/grid_group}}
+  </div>
+</div>

package/dist/views_static/components/grid/grid_group_100_item_33.hbs

@@ -0,0 +1,18 @@
+
+{{#>components/grid/grid_group _size="100"}}
+      {{#>components/grid/grid_item _size="4"}}
+      <div class="flex items-center justify-center text-5xl text-white bg-gray-500 aspect-video">
+        4/12 = 33%    
+      </div>
+      {{/components/grid/grid_item}} 
+      {{#>components/grid/grid_item _size="4"}}
+      <div class="flex items-center justify-center text-5xl text-white bg-gray-500 aspect-video">
+        4/12 = 33%    
+      </div>  
+      {{/components/grid/grid_item}} 
+      {{#>components/grid/grid_item _size="4"}}
+      <div class="flex items-center justify-center text-5xl text-white bg-gray-500 aspect-video">
+        4/12 = 33%    
+      </div>   
+      {{/components/grid/grid_item}}
+{{/components/grid/grid_group}}

package/dist/views_static/components/grid/grid_group_100_item_50.hbs

@@ -0,0 +1,15 @@
+{{#>components/grid/grid_group _size="100"}}
+      <h2 class="text-4xl headline--barrier col-span-full">Gruppen 100%</h2>
+      {{#>components/grid/grid_item _size="6"}}
+      <div class="flex items-center justify-center text-5xl text-white bg-gray-500 aspect-video">
+        6/12 = 50%    
+      </div>
+      {{/components/grid/grid_item}}  
+      {{#>components/grid/grid_item _size="6"}}
+      <div class="flex items-center justify-center text-5xl text-white bg-gray-500 aspect-video">
+        6/12 = 50%    
+      </div>
+      {{/components/grid/grid_item}} 
+{{/components/grid/grid_group}}
+  </div>
+</div>

package/dist/views_static/components/grid/grid_group_100_tabbed_25.hbs

@@ -0,0 +1,30 @@
+<div class="grid grid-page">
+  <div class="{{> components/grid/grid_group_wrapper_classes }}">
+{{#>components/grid/grid_group_tabbed }}
+        <h2 class="text-4xl headline--barrier col-span-full">Gruppen 100% Tabbed</h2>
+        {{#>components/grid/grid_item _size="3"}}
+        <div class="flex items-center justify-center text-4xl text-white bg-gray-500 aspect-video">
+          3/12 = 25%    
+        </div> 
+        {{/components/grid/grid_item}}
+        
+        {{#>components/grid/grid_item _size="3"}}
+        <div class="flex items-center justify-center text-4xl text-white bg-gray-500 aspect-video">
+          3/12 = 25%    
+        </div> 
+        {{/components/grid/grid_item}}
+
+        {{#>components/grid/grid_item _size="3"}}
+        <div class="flex items-center justify-center text-4xl text-white bg-gray-500 aspect-video">
+          3/12 = 25%    
+        </div>   
+        {{/components/grid/grid_item}}
+
+        {{#>components/grid/grid_item _size="3"}}
+        <div class="flex items-center justify-center text-4xl text-white bg-gray-500 aspect-video">
+          3/12 = 25%    
+        </div>    
+        {{/components/grid/grid_item}} 
+    {{/components/grid/grid_group_tabbed}} 
+    </div>
+</div>

package/dist/views_static/components/grid/grid_group_100_tabbed_33.hbs

@@ -0,0 +1,22 @@
+<div class="grid grid-page">
+  <div class="{{> components/grid/grid_group_wrapper_classes }}">
+{{#>components/grid/grid_group_tabbed}} 
+      <h2 class="text-4xl headline--barrier col-span-full">Gruppen 100%</h2>
+      {{#>components/grid/grid_item _size="4"}}
+      <div class="flex items-center justify-center text-5xl text-white bg-gray-500 aspect-video">
+        4/12 = 33%    
+      </div>
+      {{/components/grid/grid_item}} 
+      {{#>components/grid/grid_item _size="4"}}
+      <div class="flex items-center justify-center text-5xl text-white bg-gray-500 aspect-video">
+        4/12 = 33%    
+      </div>  
+      {{/components/grid/grid_item}} 
+      {{#>components/grid/grid_item _size="4"}}
+      <div class="flex items-center justify-center text-5xl text-white bg-gray-500 aspect-video">
+        4/12 = 33%    
+      </div>   
+      {{/components/grid/grid_item}}  
+{{/components/grid/grid_group_tabbed}} 
+</div>
+</div>

package/dist/views_static/components/grid/grid_group_100_tabbed_50.hbs

@@ -0,0 +1,19 @@
+<div class="grid grid-page">
+  <div class="{{> components/grid/grid_group_wrapper_classes }}">
+{{#>components/grid/grid_group_tabbed }}
+        <h2 class="text-4xl headline--barrier col-span-full">Gruppen 50% Tabbed</h2>
+        {{#>components/grid/grid_item _size="6"}}
+        <div class="flex items-center justify-center text-4xl text-white bg-gray-500 aspect-video">
+          6/12 = 50%    
+        </div> 
+        {{/components/grid/grid_item}}
+        
+        {{#>components/grid/grid_item _size="6"}}
+        <div class="flex items-center justify-center text-4xl text-white bg-gray-500 aspect-video">
+          6/12 = 50%    
+        </div> 
+        {{/components/grid/grid_item}}
+{{/components/grid/grid_group_tabbed}} 
+</div>
+</div>
+    

package/dist/views_static/components/grid/grid_group_33_item_100.hbs

@@ -0,0 +1,17 @@
+ <div class="grid grid-page">
+  <div class="{{> components/grid/grid_group_wrapper_classes }}">
+{{#>components/grid/grid_group _size="33"}}
+      <h2 class="text-4xl headline--barrier col-span-full">Gruppen 33%</h2>
+      {{#>components/grid/grid_item _size="12"}}
+        <div class="flex items-center justify-center text-5xl text-white bg-gray-500 aspect-video">
+          4/12 = 33%    
+        </div>
+      {{/components/grid/grid_item}} 
+      {{#>components/grid/grid_item _size="12"}}
+        <div class="flex items-center justify-center text-5xl text-white bg-gray-500 aspect-video">
+          4/12 = 33%    
+        </div>  
+      {{/components/grid/grid_item}} 
+{{/components/grid/grid_group}} 
+  </div>
+</div>

package/dist/views_static/components/grid/grid_group_50_item_100.hbs

@@ -0,0 +1,15 @@
+ <div class="grid grid-page">
+  <div class="{{> components/grid/grid_group_wrapper_classes }}">
+{{#>components/grid/grid_group _size="50"}}
+      <h2 class="text-4xl headline--barrier col-span-full">Gruppen 50%</h2>
+      {{#>components/grid/grid_item _size="6"}}
+        <div class="flex items-center justify-center text-5xl text-white bg-gray-500 aspect-video">
+          6/12 = 50%    
+        </div>
+      {{/components/grid/grid_item}} 
+      {{#>components/grid/grid_item _size="6"}}
+        <div class="flex items-center justify-center text-5xl text-white bg-gray-500 aspect-video">
+          6/12 = 50%    
+        </div>  
+      {{/components/grid/grid_item}} 
+{{/components/grid/grid_group}} 

package/dist/views_static/components/grid/grid_group_66_item_100.hbs

@@ -0,0 +1,15 @@
+  <div class="grid grid-page">
+  <div class="{{> components/grid/grid_group_wrapper_classes }}">
+ {{#>components/grid/grid_group _size="66"}}
+      <h2 class="text-4xl headline--barrier col-span-full">Gruppen 66%</h2>
+      {{#>components/grid/grid_item _size="12"}}
+        <div class="flex items-center justify-center text-5xl text-white bg-gray-500 aspect-video">
+          8/12 = 66%    
+        </div>
+      {{/components/grid/grid_item}} 
+      {{#>components/grid/grid_item _size="12"}}
+        <div class="flex items-center justify-center text-5xl text-white bg-gray-500 aspect-video">
+          8/12 = 66%    
+        </div>  
+      {{/components/grid/grid_item}} 
+    {{/components/grid/grid_group}} 

package/dist/views_static/components/grid/grid_group_highlight.hbs

@@ -0,0 +1,9 @@
+</div>
+<div class="grid col-full grid-page my-6{{inline-switch _backgroundColor '["1","2"]' '[" bg-gray-concrete"," bg-orange-bridesmaid"]'}}">
+    <section class="grid grid-cols-12 py-6 sm:px-9.5 col-full sm:col-main gap-x-6 gap-y-9">
+        <div class="grid content-start grid-cols-12 col-span-12 gap-x-6 gap-y-6">
+            {{> @partial-block }}
+        </div>
+    </section>
+</div>
+<div class="{{> components/grid/grid_group_wrapper_classes }}">

package/dist/views_static/components/grid/grid_group_standard.hbs

@@ -0,0 +1,3 @@
+<section class="grid grid-cols-12 items-start bg-white content-start gap-x-6 gap-y-5 col-span-12 {{inline-switch _groupSize '["100","66","50","33","25"]' '["","md:col-span-8","md:col-span-6","md:col-span-4","md:col-span-3"]'}}">
+    {{> @partial-block }}
+</section>

package/dist/views_static/components/grid/grid_group_tabbed.hbs

@@ -0,0 +1,5 @@
+</div>
+<section class="grid grid-cols-12 px-9.5 py-8 mx-4 mt-6 bg-blue-400 sm:mx-0 rounded-tl-hr rounded-br-hr col-full sm:col-main gap-x-6 gap-y-6">
+    {{> @partial-block }}
+</section>
+<div class="{{> components/grid/grid_group_wrapper_classes }}">

package/dist/views_static/components/grid/grid_group_wrapper_classes.hbs

@@ -0,0 +1 @@
+grid grid-cols-12 bg-white pt-6 sm:px-9.5 col-full sm:col-main gap-x-6 gap-y-10 md:gap-y-14

package/dist/views_static/components/grid/grid_item.hbs

@@ -0,0 +1,3 @@
+<article class="col-span-12 {{inline-switch _size '["12","8","6","4","3"]' '["","md:col-span-8","md:col-span-6","md:col-span-4","md:col-span-3"]'}}" >
+    {{> @partial-block }}    
+</article>

package/dist/views_static/components/horizontal_scroll_container/horizontal_scroll_container.hbs

@@ -0,0 +1,22 @@
+<div x-data="slider()"
+    x-init="checkIfScrollable($refs.scrollContainer_{{getRandom}})"
+    @resize.window="checkIfScrollable($refs.scrollContainer_{{getRandom}})"
+    class="relative w-full"
+    ax-load 
+    x-ignore
+    ax-load-src={{resourceUrl "assets/js/vendor/horizontal_scroll_container.alpine.js" }}
+    >
+    <template x-if="isScrollable && $screen('{{_viewport}}')">
+        <div>
+            <button style="background-image: linear-gradient(90deg, {{_bgcolor}} 50%, transparent);" class="absolute left-0 z-10 flex items-center justify-start w-10 h-full text-{{_iconcolor}} disabled:hidden" @click="prev($refs.scrollContainer_{{getRandom}})" :disabled="!arrowLeftDisplay" tabindex="-1" aria-hidden="true" >
+                {{> components/base/image/icon _icon="arrow-left"  _iconmap="icons" _addClass="w-3.5 h-3.5 fill-current" }}
+            </button> 
+            <button style="background-image: linear-gradient(270deg, {{_bgcolor}} 50%, transparent);" class="bg-gradient-to-l from-[{{_bgcolor}}] absolute right-0 z-10 flex items-center justify-end w-10 h-full text-{{_iconcolor}} disabled:hidden group" @click="next($refs.scrollContainer_{{getRandom}})" :disabled="!arrowRightDisplay" tabindex="-1" aria-hidden="true">
+                {{> components/base/image/icon _icon="arrow-right" _iconmap="icons" _addClass="w-3.5 h-3.5 fill-current" }}
+            </button>
+        </div>
+    </template>
+    <div x-ref="scrollContainer_{{getRandom}}" @scroll="updateIndex($event.target)" class="w-full overflow-hidden overflow-x-scroll transition-all duration-300 ease-in-out cursor-default hide-scroll-bar align-center">
+        {{> @partial-block }} 
+    </div> 
+</div>

package/dist/views_static/components/horizontal_scroll_container/horizontal_scroll_container_example.hbs

@@ -0,0 +1,9 @@
+<div class="w-full h-auto mb-10">
+{{#> components/horizontal_scroll_container/horizontal_scroll_container _viewport="xs" _onDarkBackground="true" _bgcolor="var(--color-navigation-bg)" _iconcolor="navigation-icons"}}
+    
+    <div class="flex h-auto p-4 pr-10 text-lg leading-6 text-white w-[1600px] bg-primary">
+        <p class="whitespace-nowrap ">Guten Tag. Dieses Div kann mittels click auf die Pfeiltasten verschoben werden kann. Die Pfeile werden dynamisch angezeigt/ausgeblendet sobald der Rand des Inhalts erreicht ist.  </p>
+    </div> 
+
+{{/components/horizontal_scroll_container/horizontal_scroll_container}}
+</div>

package/dist/views_static/components/label/label.hbs

@@ -0,0 +1,11 @@
+<span
+    class='sb-label rounded px-1.5 pt-px inline-block tracking-wide text-white text-base leading-5.5 font-heading{{#if _css}} {{_css}}{{/if}} 
+        {{inline-switch
+            _type
+            '["media","event","breakingnews","comment","analysis","der-tag-in-hessen","glosse","fragen-und-antworten","infografik","interaktiv","program","download","pm","liveticker","ticker","livestream","live","livechat","buliticker","social-tv","blog","podcast","kurzmeldung","location","topic"]'
+            '["bg-labelMedia","bg-labelEvent","bg-labelBreakingnews","bg-labelComment","bg-labelComment","bg-labelComment","bg-labelComment","bg-labelComment","bg-labelInfografik","bg-labelInfografik","bg-labelProgram","bg-labelDownload","bg-labelPm","bg-labelLive","bg-labelLive","bg-labelLive","bg-labelLive","bg-labelLive","bg-labelLive","bg-labelLive","bg-labelLive","bg-labelMedia","bg-labelKurzmeldung","bg-labelEvent","bg-labelComment"]'
+        }}'
+>
+    {{_text}}
+
+</span>

package/dist/views_static/components/label/label_byline.hbs

@@ -0,0 +1,17 @@
+{{~#if _text~}}
+
+    <span class='font-bold font-heading{{#if _css}} {{_css}}{{/if}}'>{{~_text}}</span>
+
+{{~else~}}
+
+    {{#with this.byline}}
+        {{~#if this.bylineSsi~}}
+            {{> components/base/loadSSI this.bylineSsi _context=this.context _templatePath=this.bylineSsi}}
+        {{~else~}}
+            {{#> components/text/byline _css=../_css}}
+                {{this.bylineText}}
+            {{/components/text/byline}}
+        {{~/if~}}
+    {{/with}}
+
+{{~/if~}}

package/dist/views_static/components/label/label_group.hbs

@@ -0,0 +1,3 @@
+<div class="leading-5.5 text-byline{{#if _css}} {{_css}}{{/if}}">
+    {{> @partial-block }}
+</div>

package/dist/views_static/components/label/label_old.hbs

@@ -0,0 +1,20 @@
+<span
+    class='sb-label rounded px-1.5 pt-px inline-block tracking-wide text-white text-base leading-5.5 font-heading
+        {{inline-switch
+            _type
+            '["media","event","breakingnews","comment","analysis","der-tag-in-hessen","glosse","fragen-und-antworten","infografik","interaktiv","program","download","pm","liveticker","ticker","livestream","live","livechat","buliticker","social-tv","blog","podcast","kurzmeldung","location","topic"]'
+            '["bg-labelMedia","bg-labelEvent","bg-labelBreakingnews","bg-labelComment","bg-labelComment","bg-labelComment","bg-labelComment","bg-labelComment","bg-labelInfografik","bg-labelInfografik","bg-labelProgram","bg-labelDownload","bg-labelPm","bg-labelLive","bg-labelLive","bg-labelLive","bg-labelLive","bg-labelLive","bg-labelLive","bg-labelLive","bg-labelLive","bg-labelMedia","bg-labelKurzmeldung","bg-labelEvent","bg-labelComment"]'
+        }}'
+>
+    {{_text}}
+
+</span>
+{{~#with this.byline~}}
+    <span class='ml-2 text-xs font-headingSerif {{#if ../_bylineCss}}{{../_bylineCss}}{{else}}text-gray-scorpion{{/if}}'>
+        {{~#if this.bylineSsi~}}
+            {{> components/base/loadSSI _context=this.context _templatePath=this.bylineSsi}}
+        {{~else~}}
+            {{this.bylineText}}
+        {{~/if~}}
+    </span>
+{{~/with~}}

package/dist/views_static/components/mediaplayer/media_player.hbs

@@ -0,0 +1,20 @@
+<div x-show="avStart" x-cloak id="{{this.ardPlayerConfig.playerId}}" class="ar-16-9 h-full {{~#if _addClassImg}} {{_addClassImg}}{{/if}} {{#if _isTeaser}} z-20{{/if}} js-load {{if _cypressHook _cypressHook 'js-media-element'}} js-video-livestream cy-mediaplayer" data-hr-mediaplayer-loader='{{json this.ardPlayerJsonConfig}}'>
+</div>
+{{#if _isTeaser}}
+    <div class="relative {{_aspectRatio}}" x-show="!avStart" >
+        {{#unless _hideGeotag}}
+            {{~#with _geotag}}
+                {{> components/geoTag/geoTag _text=this.[0].title _teaserSize=../_teaserSize _isMobile1to1=../_isMobile1to1}}
+            {{/with~}}
+        {{/unless}}
+        {{#with _teaser}}
+            {{#if this.isTickerTeaser}}<a href="{{this.link.url}}" aria-label="Zum Ticker" tabindex="-1">{{/if}}
+                {{~> components/base/image/responsive_image this.teaserImage _type=(if this.teaserType this.teaserType 'story') _variant=(if this.content.imageVariant this.content.imageVariant '100-copytext') _addClassImg=(appendToDefault _addClassImg "ar__content") _noDelay=this.dontLazyload ~}}                             
+            {{#if this.isTickerTeaser}}</a>{{/if}}
+        {{/with}}
+
+        {{#with this}}
+            {{> components/mediaplayer/mediaplayer_button _isLivestream=_isLivestream _icon=_mediaButtonIcon _label=_mediaButtonLabel _teaserSize=_teaserSize _teaserType=_teaserType _isMobile1to1=_isMobile1to1}}   
+        {{/with}} 
+    </div>
+{{/if}}

package/dist/views_static/components/mediaplayer/mediaplayer_button.hbs

@@ -0,0 +1,10 @@
+{{#with this}}
+    {{#> components/button/button _variant="tertiary" _type="button" _css=_css _alpineClick="avStart = !avStart; $dispatch('player_start')"}}
+        {{#with this}}
+            {{> components/base/image/icon _addClass=(appendToDefault (if _isLivestream "text-orange-spicyCarrot group-hover:fill-orange-spicyCarrot" "text-media-button group-hover:fill-media-button") "w-10 h-10  fill-white group-hover:text-white inline") _icon=_icon}}
+            {{#*inline "css"}}{{/inline}}
+        {{/with}}
+        {{>components/button/components/button_label _css="sr-only" _label=_label}}
+    {{/components/button/button}}
+    {{#*inline "css"}}js-mediaplayer__button cy-mediaplayer-trigger group rounded-full {{> components/button/utilities/button_on_image_classes _teaserSize=_teaserSize _teaserType=_teaserType _isMobile1to1=_isMobile1to1}}{{/inline}}
+{{/with}}

package/dist/views_static/components/modal/modal.hbs

@@ -0,0 +1,7 @@
+<div class="js-load" data-hr-modal='{"modalTriggerId":"{{defaultIfEmpty _trigger ""}}", "trackingInformations": "{{this.link.cmsDocument.trackingInformations.ticketLink}}","dialogPolyfillBaseUrl":"{{resourceUrl (configProperty 'dialogPolyfill.baseUrl')}}"}'>
+    <dialog class='js-modal p-0 backdrop:bg-gray-scorpion/90 shadow-md {{defaultIfEmpty _css "sm:max-w-xl"}}'>
+        <form method="dialog" class="js-dialog-content p-4">
+            {{> @partial-block }}
+        </form>
+    </dialog>
+</div>

package/dist/views_static/components/multimedia/livestream/label_byline.ssi.hbs

@@ -0,0 +1,19 @@
+{{#with this.labelInfo}}
+    {{#> components/text/byline _css="ml-2"}}
+        {{~#if this.isPlaysNow ~}} {{loca "livestream_plays"}} {{/if~}}
+        {{~#if this.isHasPlayed ~}} {{loca "livestream_has_played"}} {{/if~}}
+        {{~#if this.isWillPlay ~}}
+            {{~#with ../../airdateDate ~}}
+                {{~#if ../../airdateWithoutTime ~}}
+                    <time datetime="{{this.htmlDateTime}}">
+                        {{loca "livestream_will_play" this.date}}
+                    </time>
+                {{else}}
+                    <time datetime="{{this.htmlDate}}">
+                        {{loca "livestream_will_play_with_time" this.date this.time}}
+                    </time>
+                {{~/if~}}
+            {{~/with~}}
+        {{/if~}}
+    {{/components/text/byline}}
+{{/with}}

package/dist/views_static/components/navigation/breadcrumb/breadcrumb.hbs

@@ -0,0 +1,14 @@
+<nav id="breadcrumb-nav" class="print:hidden{{~#unless this.showBreadcrumbTitleAlways}} hide-last-item-below-sm{{/unless~}}"
+        role="navigation"
+        aria-label="{{loca "breadcrumb_headline"}}"
+>   <ul>
+        {{#with this.breadcrumbSsi}}
+            {{> components/base/loadSSI _templatePath="components/navigation/breadcrumb/breadcrumb_items.ssi"}}
+        {{/with}}
+        <li class="inline">
+            <h1 class="inline{{#unless this.showBreadcrumbTitleAlways}} sr-only sm:not-sr-only{{/unless}}">
+                <a href="{{_currentPageUrl}}" class="{{> components/navigation/breadcrumb/utils/breadcrumb_link_classes}}">{{~_currentPageTitle~}}</a>
+            </h1>
+        </li>
+    </ul>
+</nav>

package/dist/views_static/components/navigation/breadcrumb/breadcrumb_items.ssi.hbs

@@ -0,0 +1,8 @@
+{{~#each this.breadcrumb}}
+    <li class="inline">
+        <a href="{{this.url}}" class="{{> components/navigation/breadcrumb/utils/breadcrumb_link_classes}}">
+            <span>{{this.title}}</span>
+        </a>
+        <span class="ds-icon-container inline-block">{{~> components/base/image/icon _icon="arrow-right" _addClass="mx-2 w-2 h-2 text-inherit fill-link" _iconmap="icons"~}}</span>
+    </li>
+{{/each~}}

package/dist/views_static/components/navigation/breadcrumb/utils/breadcrumb_link_classes.hbs

@@ -0,0 +1 @@
+ds-link py-2 text-link font-copy text-xs hover:underline