hr-design-system-handlebars 1.33.3 → 1.34.0

package/dist/views_static/components/content_nav/content_nav.hbs

@@ -0,0 +1,26 @@
+{{#with this.contentNav}}
+    {{#if this.isListOrFlow}}
+        <nav class="w-full px-5 sm:px-0 c-content-nav {{inline-switch ../_teaserSize '["100","66","50","33","25"]' '[" teaser-size-100"," teaser-size-66"," teaser-size-50"," teaser-size-33"," teaser-size-25", ""]'}}">
+            {{> components/content_nav/content_nav_container
+                    _teaserSize=../_teaserSize
+                    _maindivclass="flex relative flex-wrap"
+            }}
+        </nav>
+    {{else}}
+        {{#decorator 'components/content_nav/content_nav_dropdown'
+                     _teaserSize=../_teaserSize
+                     _iconOpen="arrow-down"
+                     _iconClose="arrow-up"
+                     _buttonText=(defaultIfEmpty this.selectedItem.title ../../title)
+                     _hiddenNavigationLabel="Unternavigation"
+        }}
+            
+            {{> components/content_nav/content_nav_container
+                    _teaserSize=_teaserSize
+                    _maindivclass="flex flex-col w-full mt-0"
+                    _inputclass=(if this.isMixed 'mixed-input' 'dropdown-input')
+            }}
+            
+        {{/decorator}}
+    {{/if}}
+{{/with}} 

package/dist/views_static/components/content_nav/content_nav_container.hbs

@@ -0,0 +1,17 @@
+<div class="{{_maindivclass}} {{#if this.isAutosuggest}} autoSuggest js-load{{/if}} relative"
+    {{#if this.isAutosuggest}}
+     data-hr-auto-suggest='{"filterGroupsSelector":".content-nav-group", "filterElementSelector":".content-nav-item", "filterTextSelector":".js-title", "inputElementSelector":".js-autosuggest-input", "matchedClass":"block", "unmatchedClass":"hidden"}'
+    {{/if}}
+>
+    {{#if this.isAutosuggest}}
+        <div class="flex mx-0 w-full h-10 border-primary align-center{{#if _autoSuggestContainerCss}} {{_autoSuggestContainerCss}}{{/if}}">
+            <input x-ref="autosuggestInput"
+                   class="{{#if _inputclass }}{{_inputclass}}{{/if}} w-full h-10 pl-2 border-b-8 border-white bg-gray-alabaster text-gray-dark placeholder:text-gray-dark focus:outline-none js-autosuggest-input"
+                   type="text"
+                   placeholder="Eintrag filtern"/>
+        </div>
+    {{/if}}
+
+    {{> components/content_nav/content_nav_list _teaserSize=_teaserSize }}
+
+</div>

package/dist/views_static/components/content_nav/content_nav_dropdown.hbs

@@ -0,0 +1,39 @@
+<nav class="w-full px-5 sm:px-0 {{inline-switch _teaserSize '["100","66","50","33","25"]' '[" teaser-size-100"," teaser-size-66"," teaser-size-50"," teaser-size-33"," teaser-size-25", ""]'}}"
+     :class="contentNavDropdownIsOpen ? 'h-10' : ''"
+     id="dropdown--{{nextRandom}}"
+     @click.outside ="contentNavDropdownIsOpen = false; $dispatch('hr:global:resetinputAutoSuggest')"
+     role="navigation"
+     aria-labelledby="dropdown__label--{{getRandom}}">
+
+    <span id="dropdown__label--{{getRandom}}" class="hidden">{{defaultIfEmpty _hiddenNavigationLabel "Unternavigation"}}</span>
+    <button 
+         class="content-nav-dropdown_dropdown{{#if this.isDropdown}} -isDropdown{{/if}}{{#if this.isMixed}} -isMixed{{/if}} ds-link-inset relative flex w-full h-10  mb-0 overflow-hidden bg-white border md:mx-0 z-11 border-content-nav whitespace-nowrap text-content-nav fill-content-nav"
+         @click="contentNavDropdownIsOpen = !contentNavDropdownIsOpen;  $dispatch('hr:global:resetinputAutoSuggest');" 
+        
+         {{#if this.isMixed}}
+            @resize.window="if(window.innerWidth > 767){contentNavDropdownIsOpen = false}; $dispatch('hr:global:resetinputAutoSuggest')"
+         {{/if}}
+    >
+        <span class="self-center w-full px-2 pt-1 text-base leading-4 text-left">{{_buttonText}}</span>
+        <div class="flex self-center w-auto h-full border-l border-content-nav">
+            <span :class="{'hidden' : contentNavDropdownIsOpen}"
+                  class="flex self-center px-3 py-3"
+            >
+                {{~> components/base/image/icon _icon=(defaultIfEmpty _iconOpen "arrow-down") _addClass="h-4 w-4" _iconmap="icons"~}}
+            </span>
+            <span :class="{'hidden' : !contentNavDropdownIsOpen}"
+                  class="flex self-center hidden px-3 py-3"
+            >
+                {{~> components/base/image/icon _icon=(defaultIfEmpty _iconClose "arrow-up") _addClass="h-4 w-4" _iconmap="icons"~}}
+            </span>
+        </div>
+    </button>
+    <div :class="{'-isClosed' : !contentNavDropdownIsOpen,
+                '-isOpen'   :  contentNavDropdownIsOpen}"
+         aria-haspopup="true"       
+         class="content-nav-dropdown_content{{#if this.isDropdown}} -isDropdown {{/if}}{{#if this.isMixed}} -isMixed{{/if}} md:h-auto md:overflow-visible relative -isClosed"
+         >
+        {{~decorator_body~}}
+    </div>
+
+</nav>

package/dist/views_static/components/content_nav/content_nav_item.hbs

@@ -0,0 +1,26 @@
+<li x-init="" 
+    class="content-nav-item
+        {{~#if _islist}} content-nav-item-list{{/if}}
+        {{~#if _ismixed}} content-nav-item-mixed{{/if}}
+        {{~#if _isdropdown}} content-nav-item-dropdown{{/if}}
+        {{~#if _isflow}} content-nav-item-flow{{/if~}}
+        {{~#if this.isSelected}} font-bold -current{{/if~}}
+    ">
+    {{#with this}}
+        {{#> components/base/link _link=this.link _isSelected=this.isSelected _css="flex items-center pt-2.5 px-2 whitespace-nowrap overflow-hidden" _selectedCssClass="is-selected"}}
+            <span class="block text-base leading-4 grow font-copy js-title truncate">
+                {{~this.title~}}
+                {{~#if this.link.hasIcon~}}
+                    {{> components/base/image/icon _icon=this.link.iconName _addClass="ml-2 -mt-0.5 h-4 w-4 inline" _iconmap="icons"}}
+                {{~/if~}}
+            </span>
+            
+            <span>
+                {{>components/base/image/icon _icon="arrow-right" _addClass="fill-current pb-0.5 h-4 w-4 ml-2 inline" }} 
+            </span>
+        {{/components/base/link}}
+        {{#*inline "htmlProperties"}}
+            {{> components/tracking/navigation_tracking _clickLabelType="Contentnavigation" _clickLabelPrefix1=this.title}}
+        {{/inline}}
+    {{/with}}
+</li>

package/dist/views_static/components/content_nav/content_nav_list.hbs

@@ -0,0 +1,32 @@
+<ul class="flex bg-transparent flex-wrap{{#if this.isListOrFlow}} w-full gap-x-2 gap-y-2{{/if}} md:!px-0 last:border-b-0{{#if this.isDropdown }} w-full{{/if}}"
+    > 
+    
+    {{~#each this.contentNavEntries~}}
+          
+        {{~#if this.isGroup~}}
+        
+            {{#if ../isDropdown}}               
+                <li class="w-full h-auto overflow-hidden text-base list-none border-b border-gray-400 bg-highlight-1 text-content-nav md:mx-0 font-copy fill-content-nav content-nav-group">
+                    <div class="flex items-center h-10 p-2 content-nav-group-title">{{this.title}}</div>
+                    <ul class="c-content-nav-group-list !px-0 mt-0">
+                        {{~#each this.navigationGroup~}}
+                            {{> components/content_nav/content_nav_item 
+                                _teaserSize=../../_teaserSize 
+                                _isdropdown=../../isDropdown 
+                                _ismixed=../../isMixed 
+                                _islist=../../isList 
+                                _isflow=../../isFlow}}
+                        {{~/each~}}
+                    </ul>
+                </li> 
+            {{/if}}
+        {{else}}           
+            {{> components/content_nav/content_nav_item  
+                _teaserSize=../_teaserSize 
+                _isdropdown=../isDropdown 
+                _ismixed=../isMixed 
+                _islist=../isList 
+                _isflow=../isFlow}}
+        {{~/if~}}
+    {{~/each~}}
+</ul>

package/dist/views_static/components/event/artist.hbs

@@ -0,0 +1 @@
+<span class="font-bold uppercase">{{this.name}}</span>{{#with this.role}} | <span>{{this}}</span>{{/with}}

package/dist/views_static/components/event/calendar/event_calendar.hbs

@@ -0,0 +1,3 @@
+<div class="flex flex-col border-event-calendar-secondary border gap-x-4 js-load" data-hr-filterer-ds="{}"> 
+    {{> @partial-block }}
+</div>

package/dist/views_static/components/event/calendar/event_calendar_content.hbs

@@ -0,0 +1,18 @@
+<div class="js-fr-content">
+    {{#each this.months}}
+        {{#each this.days}}
+            {{#each this.instants}}
+                {{#unless this.isDateInstant}}
+                    {{> components/event/calendar/event_calendar_event_teaser _showTeaser=../this.isFirstAvailable _withConcertInfo=../../../_withConcertInfo}}
+                {{/unless}}
+            {{/each}}
+        {{/each}}
+    {{/each}}
+    {{#unless this.hasFutureEventsFromNow}}
+        <article class="p-4 js-fr-error-target">
+            <p class="">
+                {{loca "event_calendar_no_events_available"}}
+            </p>
+        </article>
+    {{/unless}}
+</div>

package/dist/views_static/components/event/calendar/event_calendar_event_teaser.hbs

@@ -0,0 +1,58 @@
+<article id="{{this.startDate.htmlDate}}" class="col-span-12 md:flex-row gap-y-3 gap-x-4 md:px-0 js-fr-target{{#unless @first}} border-t border-event-calendar-secondary{{/unless}}{{#unless _showTeaser}} hidden{{/unless}}" x-data="{ avStart: false }">
+    <div class="border-none h-full">
+        <div class="relative">
+            <div class="flex flex-col items-stretch sm:flex-row">
+                <div class="flex basis-full w-full order-2 py-1 sm:basis-7/12 sm:w-7/12 sm:order-1">
+                    <div class="flex flex-col  basis-2/12 w-2/12 align-top items-center justify-center px-4 py-3  border-dotted border-r border-event-calendar-secondary">
+                        {{#with this.startDate}}
+                            <span class='text-base font-serif'>{{this.weekdayNameShort}}</span>
+                            <span class='text-3xl font-serif font-bold'>{{this.day}}</span>
+                            <span class='text-base font-serif'>{{this.monthNameShort}}</span>
+                        {{/with}}
+                    </div>
+                    <div class="flex flex-col items-start basis-10/12 w-10/12">
+                        <div class="absolute top-0 left-0 w-full sm:static">
+                            <div class="ar-4-3 sm:ar-auto">
+                                {{#> components/teaser/components/teaser_header _css="absolute bottom-0 left-0 p-4 w-full sm:pt-3 sm:pb-2 bg-white opacity-80 sm:static sm:bg-transparent"}}
+                                    {{#> components/base/link _link=this.link _css="ds-teaser-focus hover:text-toplineColor" }} 
+                                            {{#with this.label}}
+                                                {{#> components/label/label_group}}
+                                                    {{> components/label/label _type=this.type _text=(loca this.loca) _css="mr-2"}}
+                                                    {{#if ../this.hasStatus}}
+                                                        {{> components/event/event_status _status=(loca ../this.statusDescriptionForLabelShort)}} 
+                                                    {{/if}}
+                                                {{/components/label/label_group}}
+                                            {{/with~}}
+                                            {{#> components/teaser/components/teaser_headline _css="" _headlineTag="h3"}}
+                                                {{#if this.topline}}
+                                                    {{> components/teaser/components/teaser_topline _text=this.topline}}
+                                                {{/if}}
+                                                {{> components/teaser/components/teaser_title _text=this.title _css="text-2xl"}}
+                                                {{> components/event/event_tags this.eventtags}} 
+                                            {{/components/teaser/components/teaser_headline}}
+                                    {{/components/base/link  }}
+                                {{/components/teaser/components/teaser_header}} 
+                            </div>
+                        </div>
+                        {{> components/event/event_details this}}
+                        {{#with this.ticketLink}}
+                            {{> components/event/event_ticket_button}}
+                        {{/with}}
+                    </div> 
+                </div>
+                <figure class="basis-full w-full order-1 sm:basis-5/12 sm:w-5/12 sm:order-2 ar-4-3 sm:ar-16-9">
+                    {{> components/base/image/responsive_image this.image _type="event-teaser" _variant="100" _addClass="w-full"}}
+                </figure>
+            </div>
+        </div>
+        {{#if _withConcertInfo}}
+            {{#with this.concertInfo}}
+                {{#unless this.isEmpty}}
+                <div class="flex flex-col grow-0 shrink basis-full py-7 w-full border-event-calendar-secondary border-t border-dotted">
+                    {{> components/event/concert_info}}
+                </div>
+                {{/unless}}
+            {{/with}}
+        {{/if}}
+    </div>
+</article>

package/dist/views_static/components/event/calendar/event_calendar_footer.hbs

@@ -0,0 +1,7 @@
+<footer class='bg-event-calendar-primary text-center'>
+    {{#> components/base/link _link=this.link
+        _css='block p-2 text-white text-sm font-serif hover:underline underline-offset-3'
+    }}
+        {{loca 'event_calendar_monthly_overview_link'}}
+    {{/components/base/link}}
+</footer>

package/dist/views_static/components/event/calendar/event_calendar_heading.hbs

@@ -0,0 +1,3 @@
+<{{if _headlineTag _headlineTag "h2"}} class="flex font-bold py-2 gap-x-4 items-center justify-center bg-event-calendar-primary"> 
+    <span class="text-white text-2xl leading-6 w-full text-center">{{#if this.title}}{{this.title}}{{else}}{{loca "event_calendar_title"}}{{/if}}</span>
+</{{if _headlineTag _headlineTag "h2"}}>

package/dist/views_static/components/event/calendar/event_calendar_inline.hbs

@@ -0,0 +1,3 @@
+{{#each this.inlineItems~}}
+    {{> components/event/calendar/event_calendar_event_teaser}}
+{{/each ~}}

package/dist/views_static/components/event/calendar/event_calendar_nav.hbs

@@ -0,0 +1,27 @@
+<nav class="relative border-b border-event-calendar-secondary js-load" data-hr-native-scroll-ds='{"isTeaser":"true"}'>
+    <button class="block border-0 ml-4 absolute left-0 min-w-3 min-h-3 top-1/2 js-ns-button -left" aria-hidden="true">
+        {{> components/base/image/icon _icon="arrow-left" _iconmap="icons" _addClass="w-5 h-5 fill-current" }}
+    </button>
+    <button class="block border-0 mr-4 absolute right-0 min-w-3 min-h-3 top-1/2 js-ns-button -right" aria-hidden="true">
+        {{> components/base/image/icon _icon="arrow-right" _iconmap="icons" _addClass="w-5 h-5 fill-current" }}
+    </button>
+    <div class="flex relative max-w-100vw ml-14 mr-14 overflow-hidden box-border border-teal-600">
+        <div class="flex mb-0 overflow-x-auto overflow-y-hidden whitespace-nowrap scroll-smooth js-ns-scroll -horizontal">
+            {{#each this}}
+                <div class="inline-block items-center justify-center border-event-calendar-secondary border-l js-ns-month {{#if
+                    this.isCurrentMonth}} -currentMonth{{/if}}{{#if
+                    this.hasFutureEventsFromNow}} -selected{{else}} js-fr-reload-trigger{{/if}}">
+                    <span class="block font-heading font-bold w-24 sticky left-0 px-2 py-3 ">{{this.date.monthNameShort}} {{this.date.yearShort}}</span>
+                    <ul class="flex">
+                        {{#each this.days}}
+                            <li class="inline-block h-full group cursor-pointer js-ns-item{{#if
+                                this.isStartOfWeek}} border-l border-event-calendar-secondary{{/if}}">
+                                {{> components/event/calendar/event_calendar_nav_item _contentUrl=../this.contentUrl}}
+                            </li>
+                        {{/each}}
+                    </ul>
+                </div>
+            {{/each}}
+        </div>
+    </div>
+</nav>

package/dist/views_static/components/event/calendar/event_calendar_nav_item.hbs

@@ -0,0 +1,7 @@
+<a class="js-fr-trigger js-noStateManager block h-full pt-2 pb-2.5 focus:bg-black focus:text-white focus-visible:outline-none hover:bg-black hover:text-white -active{{#if this.isFirstAvailable}} -selected js-fr-initial{{/if}}"
+     data-prop-crit='{{this.date.htmlDate}}'
+     data-prop-filterer='{"crit":"{{this.date.htmlDate}}","strat":["hobid"]}'
+     href="{{_contentUrl}}">
+     <span class="block font-serif italic text-center font-bold uppercase pb-2 px-3 text-sm">{{this.date.weekdayNameShort}}</span>
+     <span class="block font-serif text-link font-bold text-labelEventCalendarTitle italic text-2xl px-3 pt-1.6 pb-0 group-hover:text-white group-focus:text-white group-focus-within:text-white">{{this.date.day}}</span>
+</a>

package/dist/views_static/components/event/concert_info.hbs

@@ -0,0 +1,66 @@
+{{#with this.concertInfoHead}}
+    {{#unless this.isEmpty}}
+    <div class="text-center">
+        {{#with this.title}}
+            <h3 class="font-bold">{{this}}</h3>
+        {{/with}}
+        {{#with this.description}}
+            <p>{{this}}</p>
+        {{/with}}
+    </div>
+    {{/unless}}
+{{/with}}
+{{#with this.artists}}
+    {{#unless this.isEmpty}}
+    <div class="mt-4">
+            {{#with this.description}}
+            <p class="text-center ">{{this}}</p>
+            {{/with}}
+            <ul>
+                {{#each this.artistsAndGroups}}
+                    <li class="text-center{{#with this.artistGroup}} mb-5{{/with}}">
+                    {{#with this.artist}}
+                        {{> components/event/artist}}
+                    {{/with}}
+                    {{#with this.artistGroup}}
+                        {{#with this.name}}<h3>{{this}}:</h3>{{/with}}
+                                            {{#with this.artists}}
+                    <ul>
+                        {{#each this}}
+                            <li class="text-center">
+                                {{> components/event/artist}}
+                            </li>
+                        {{/each}}
+                    </ul>
+                    {{/with}}
+                    {{/with}}
+                    </li>
+                {{/each}}
+            </ul>
+        </div>
+    {{/unless}}
+{{/with}}
+{{#with this.compositions}}
+    {{#unless this.isEmpty}}
+        <div class="text-center">
+            {{#with this.description}}<p>{{this}}</p>{{/with}} 
+            <ul>
+            {{#each this.compositions}}
+                <li>
+                    {{#if this.composerAndComposition}}
+                        <span class="text-center font-bold uppercase">{{this.composer}}</span>
+                        {{#with this.name}} | <span class="text-center">{{this}}</span>{{/with}}
+                        {{else}}
+                            {{#if this.composer}}
+                                <span class="text-center">{{this.composer}}</span>
+                            {{/if}}
+                            {{#if this.name}}
+                                <span class="text-center">{{this.name}}</span>
+                            {{/if}}
+                    {{/if}}
+                </li>
+            {{/each}}
+            </ul>
+        </div>
+    {{/unless}}
+{{/with}}

package/dist/views_static/components/event/event_details.hbs

@@ -0,0 +1,20 @@
+<div class="flex flex-wrap content-center w-full h-full px-2 py-1">
+    {{#with this.startTime}}
+    <div class="flex grow shrink-1 basis-6/12 align-top p-2">
+        <div class="min-w-3 min-h-3">
+            {{> components/base/image/icon _icon="clock" _iconmap="icons" _addClass="w-5 h-5 fill-event-calendar-secondary" }}
+        </div>
+        <time class='text-base pl-4 font-sans font-bold'>{{loca "date_simple_at" this.time}}</time>
+    </div>
+    {{/with}}
+    {{#with this.venue}}
+    <div class="flex grow flex-shrink-1 basis-6/12 align-top p-2">
+        <div class="min-w-3 min-h-3">
+            {{> components/base/image/icon _icon="ortsmarke" _iconmap="icons" _addClass="w-5 h-5 fill-event-calendar-secondary" }}
+        </div>
+        <div class='flex flex-col text-base pl-4 font-sans font-bold w-full'>{{this.addressCity}}
+            <span class="font-normal">{{this.title}}</span>
+        </div>
+    </div>
+    {{/with}}
+</div>

package/dist/views_static/components/event/event_status.hbs

@@ -0,0 +1 @@
+<span class="font-bold text-event-status uppercase{{#if _css}} {{_css}}{{/if}}">{{_status}}</span>

package/dist/views_static/components/event/event_tag.hbs

@@ -0,0 +1,3 @@
+<span
+    class="block text-subline font-normal font-heading text-base sm:text-xl mt-0.5{{#if _css}} {{_css}}{{/if}}"
+>{{_title}}</span>

package/dist/views_static/components/event/event_tags.hbs

@@ -0,0 +1,11 @@
+
+{{#with this.series}}
+    {{> components/event/event_tag _css=../_css _title=this.title}}
+{{/with}}
+{{#with this.project}}
+    {{> components/event/event_tag _css=../_css _title=this.title}}
+{{/with}}
+{{#with this.externalProject}}
+    {{> components/event/event_tag _css=../_css _title=this}}
+{{/with}}
+

package/dist/views_static/components/event/event_ticket_button.hbs

@@ -0,0 +1,32 @@
+<div class="static pt-1 pb-3 pl-4 sm:absolute sm:pl-0 sm:pt-0 sm:pb-0 sm:right-4 sm:bottom-4">
+    {{#> components/button/button _id=(nextRandom) _size="lg"}}
+        {{> components/button/components/button_icon _icon="ticket" _iconmap="icons" _css="mr-2"}}
+        {{>components/button/components/button_label _label="Tickets"}}
+    {{/components/button/button}}
+    {{#> components/modal/modal _trigger=(getRandom)}}
+        {{#> components/teaser/components/teaser_headline}}
+            {{> components/teaser/components/teaser_title _text=(loca 'ticket_modal_headline') _css="text-2xl"}}
+        {{/components/teaser/components/teaser_headline}}
+        <p class="mt-2 text-base font-copy">{{loca "ticket_modal_text"}}</p>
+
+        <div class="flex flex-wrap mt-4">
+            {{#> components/button/button _size="lg" _variant="tertiary" _value="cancel" _css="mr-4 mt-4"}}
+                {{>components/button/components/button_label _label="Abbrechen" _css=""}}
+            {{/components/button/button}}
+            {{#> components/button/link_button _link=this.link _size="lg" _css="js-ticket-ok-button js-modal-close mt-4"}}
+                {{>components/button/components/button_label _label="Zum Ticketshop" _css=""}}
+            {{/components/button/link_button}}
+        </div>
+    {{/components/modal/modal}}
+    <noscript>
+        <style>
+            #{{getRandom}} {
+                display:none;
+            }
+        </style>
+            {{#> components/button/link_button _link=this.link _size="lg"}}
+                {{> components/button/components/button_icon _icon="ticket" _iconmap="icons"}}
+                {{>components/button/components/button_label _label="Tickets"}}
+            {{/components/button/link_button}}
+    </noscript>
+</div>

package/dist/views_static/components/event/instant_dates.hbs

@@ -0,0 +1,21 @@
+{{#if this.moreThenOneEvent}}
+    {{#with this.firstInstant}}
+        <span class='text-2xl font-headingSerif font-bold'>{{this.startDate.day}}</span>
+        <span class='text-sm font-headingSerif'>{{this.startDate.monthNameShort}}</span>
+    {{/with}}
+    {{#if this.moreThenTwoEvents}}
+        <span class='text-sm font-headingSerif'>|</span>
+    {{else}}
+        <span class='text-sm font-headingSerif'>+</span>
+    {{/if}}
+    {{#with this.lastInstant}}
+        <span class='text-2xl font-headingSerif font-bold'>{{this.startDate.day}}</span>
+        <span class='text-sm font-headingSerif'>{{this.startDate.monthNameShort}}</span>
+    {{/with}}
+{{else}}
+    {{#with this.firstInstant}}
+        <span class='text-sm font-headingSerif'>{{this.startDate.weekdayNameShort}}</span>
+        <span class='text-2xl font-headingSerif font-bold'>{{this.startDate.day}}</span>
+        <span class='text-sm font-headingSerif'>{{this.startDate.monthNameShort}}</span>
+    {{/with}}
+{{/if}}

package/dist/views_static/components/event/label_byline.ssi.hbs

@@ -0,0 +1,9 @@
+{{#with this.firstInstant}}
+    {{#if this.hasStatus}}
+        {{> components/event/event_status _css="ml-2" _status=(loca this.statusDescriptionForLabelShort)}} 
+    {{else}}
+        {{#> components/text/byline _css="ml-2"}}
+            {{this.startDateTime.date}}, {{this.startDateTime.time}} Uhr
+        {{/components/text/byline}}
+    {{/if}}
+{{/with}}

package/dist/views_static/components/event/stage_location.ssi.hbs

@@ -0,0 +1,9 @@
+{{#with this.location}}
+<p class="mt-4 -mb-2 text-stageText font-base">
+    {{> components/base/image/icon _icon="ortsmarke" _iconmap="icons" _addClass="inline w-5 h-5 fill-current -mt-1 mr-1.5 -ml-1" }}
+    {{#each this}}
+            {{#unless @first}}<span class="mx-2 text-stageText">|</span>{{/unless}}
+        {{this}}
+    {{/each}}
+</p>
+{{/with}}

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

@@ -0,0 +1,25 @@
+<footer class="flex justify-center w-full pb-4 text-base border-t text-footer-text print:hidden bg-footer-bg border-footer-border js-pageFooter" role="contentinfo" itemscope="itemscope" itemtype="http://schema.org/WPFooter" >
+    <div class="container flex lg:px-10">
+        <span class="hidden">Footer Navigation</span>
+                
+        <div class="flex flex-wrap justify-start list-none">
+            {{~> components/footer/page_footer_content ~}}
+
+            <div class="flex flex-col w-full pt-8 text-left md:items-end md:justify-between md:pl-4 md:pt-16 md:flex-row lg:pl-0">
+
+                {{> components/footer/page_footer_metadata 
+                    _hrDeLink=this.footerMetadata.hrDeLink
+                    _ardDeLink=this.footerMetadata.ardDeLink
+                    _dataProtectionLink=this.footerMetadata.dataProtectionLink
+                    _imprintLink=this.footerMetadata.imprintLink
+                    _iconName="extern"
+                }}
+                
+                <div class="flex justify-center w-auto px-4 lg:pr-0 md:h-12">
+                    {{> components/footer/page_footer_logo }}
+                </div>
+                
+            </div>
+        </div>
+    </div>
+</footer>

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

@@ -0,0 +1,24 @@
+<nav x-data="{dropped:false}" class="w-full md:mt-4 md:mb-8">
+    <div @click="dropped = !dropped" class="flex justify-between w-full px-2 py-2 border-b border-footer-heading md:px-0 md:ml-4 md:py-0 lg:m-0">
+        
+        <span class="flex justify-start text-base font-bold text-footer-heading "  title="{{_title}}" onclick="">{{_title}}  </span>  
+        
+        <div class="flex items-center md:hidden " :class="dropped ? 'transform rotate-180':''">
+            {{> components/base/image/icon _icon="arrow-down" _iconmap="icons" _addClass="w-3 h-2 fill-current"}}
+        </div>
+        
+    </div>
+
+    <div x-show="!$screen('lg') && !$screen('md') ? dropped : true" x-transition.opacity class="flex flex-col md:flex-row flex-nowrap">
+        {{#each _columns}} 
+            <ul class="flex flex-col text-footer-text md:pt-8 w-full md:w-1/{{../_columnSize}}">
+                {{#each this.links}}
+                    
+                        {{> components/footer/page_footer_item  _css="hover:underline" _iconName="extern" }}
+                          
+                {{/each}}
+            </ul>
+        {{/each}}
+    </div>
+    
+</nav>

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

@@ -0,0 +1,25 @@
+<div class="flex w-full md:w-1/2 md:w-max-1/2 md:first:pr-4 --first ">
+    {{~> components/footer/page_footer_column _columns=this.groups.[0].columns _columnSize=this.groups.[0].columnSize _title=this.groups.[0].title ~}} 
+</div>
+
+<div class="flex w-full md:w-1/4 md:w-max-1/4 -second ">
+    {{~> components/footer/page_footer_column _columns=this.groups.[1].columns _hasCookieSettings=true _title=this.groups.[1].title ~}} 
+</div> 
+
+<div class="flex flex-col w-full pt-4 md:w-1/4 md:w-max-1/4 md:pt-0 md:pr-4 lg:pr-0 -third">
+
+    <div class="pb-4 md:pt-[38px] md:mt-[38px] p-0 m-0 md:border-t border-footer-heading">
+        {{> components/footer/page_footer_search }}
+    </div>
+     
+    {{> components/footer/page_footer_social_media _columns=this.socialMedia.columns _title=this.socialMedia.title}}
+    
+    <div class="flex items-center justify-center pt-4 md:justify-end">
+        {{#> components/button/button _size="md" _css="text-footer-text border-footer-text " _variant="secondary" _onBackground="true" }}
+            {{> components/button/components/button_icon _icon="settings" _iconmap="icons"}}
+            {{> components/button/components/button_label _label="Einstellungen"}}
+        {{/components/button/button}}
+    </div>
+    
+</div>
+

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

@@ -0,0 +1,15 @@
+{{#if this.extern}}
+    <li class="flex items-center w-full h-8 pl-4 bg-white border-b whitespace-nowrap lg:pl-0 md:bg-transparent border-b-secondary md:border-0 md:h-6">
+        {{> components/footer/page_footer_nav_link  _css="flex hover:underline" _link=this _iconName="extern" }}
+    </li>
+{{else}}
+    {{#if this.paragraphed}}
+        <li class="flex items-center w-full h-8 pl-4 bg-white border-b whitespace-nowrap md:bg-transparent lg:pl-0 border-b-secondary md:mt-6 md:border-0 md:h-6">
+            {{> components/footer/page_footer_nav_link _site=this.site _css="hover:underline" _link=this}}
+        </li>
+    {{else}}
+        <li class="flex items-center w-full h-8 pl-4 bg-white border-b whitespace-nowrap lg:pl-0 md:bg-transparent border-b-secondary md:border-0 md:h-6 ">
+            {{> components/footer/page_footer_nav_link _link=this _site=this.site _css="flex hover:underline" }}
+        </li>
+    {{/if}}
+{{/if}}

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

@@ -0,0 +1,9 @@
+<div class="self-end inline-block float-right mt-8 w-fit md:mt-0">
+    <a href="{{resourceUrl "index.html"}}" title="{{loca "header_homepage_link_title"}}">
+        {{#if (configProperty "iconConfig.brandlogo.footer")}}
+            {{> components/base/image/icon _icon=(configProperty "iconConfig.brandlogo.footer") _iconmap="logo" _addClass="inline-block w-footer-logo md:w-footer-logo-md lg:w-footer-logo-lg h-footer-logo md:h-footer-logo-md lg:h-footer-logo-lg flex self-end invert-logo-footer"}}
+        {{else}}
+            {{> components/base/image/icon _icon="brandlogo--desk" _iconmap="logo" _addClass="inline-block bg-logo-footer rounded-logo-footer w-footer-logo md:w-footer-logo-md lg:w-footer-logo-lg h-footer-logo md:h-footer-logo-md lg:h-footer-logo-lg fill-current md:mt-2 lg:mt-1 md:flex invert-logo-footer text-footer-text"}}
+        {{/if}}
+    </a>
+</div>