hr-design-system-handlebars 0.81.0 → 0.82.1

package/CHANGELOG.md

@@ -1,3 +1,27 @@
+# v0.82.1 (Tue Nov 15 2022)
+
+#### 🐛 Bug Fix
+
+- BUGFIX: Removes css classes from delivery. [#383](https://github.com/mumprod/hr-design-system-handlebars/pull/383) ([@szuelch](https://github.com/szuelch))
+
+#### Authors: 1
+
+- [@szuelch](https://github.com/szuelch)
+
+---
+
+# v0.82.0 (Tue Nov 15 2022)
+
+#### 🚀 Enhancement
+
+- Feature/dpe 1674 [#382](https://github.com/mumprod/hr-design-system-handlebars/pull/382) ([@szuelch](https://github.com/szuelch))
+
+#### Authors: 1
+
+- [@szuelch](https://github.com/szuelch)
+
+---
+
 # v0.81.0 (Mon Nov 14 2022)
 
 #### 🚀 Enhancement

package/build/handlebars/partials/handlebar-partials.js

@@ -13,23 +13,23 @@ module.exports['components/content_nav/content_nav_dropdown.hbs'] = '<nav x-cloa
 module.exports['components/content_nav/content_nav_item.hbs'] = '<li x-init="chooseListItemStyles({{_teasersize}},{{_islist}},{{_ismixed}},{{_isdropdown}},{{_isflow}})" \nclass="h-10 md:mx-0 overflow-hidden text-base font-copy list-none border-blue-congress fill-congress text-blue-congress bg-white hover:bg-blue-congress hover:fill-white hover:text-white hover:underline {{#if this.isSelected}} font-bold -current{{/if}} c-content-nav__item">\n     {{#decorator \'components/base/link\' \n        _doNavigationTracking="true" \n        _clickLabelType="Contentnavigation" \n        _clickLabelPrefix1=this.title \n        _css="flex items-center py-2 px-2 h-10 whitespace-nowrap overflow-hidden" \n        _isSelected=this.isSelected\n        _selectedCssClass="is-selected"\n    }}\n        \n        <span class="block text-base grow font-copy js-title truncate ... ">{{this.title}}</span>\n\n        {{#if this.link.hasIcon}}\n            {{> components/base/image/icon _icon=this.link.iconName _addClass="ml-2 h-4 w-4" _iconmap="icons"}}\n        {{/if}}\n\n        <span>\n            {{>components/base/image/icon _icon="arrow-right" _addClass="h-4 w-4 ml-2" }} \n        </span>\n\n    {{/decorator}} \n</li>\n\n\n'
 module.exports['components/content_nav/content_nav_list.hbs'] = '<ul class=" flex bg-white flex-wrap {{#if this.isListOrFlow}} w-full gap-x-2 gap-y-2  {{else}} {{/if}} z-1003 md:!px-0 last:border-b-0 {{#if this.isDropdown }} w-full {{/if}}"\n    :class="( ({{this.isMixed}} && {{_teasersize}} < 50 ) || ( {{this.isMixed}} && window.innerWidth < 768 ) || {{this.isDropdown}} ) && contentNavDropdownIsOpen == true ? \'!shadow-[1px_8px_9px_0px_rgba(50,50,93,0.10)] mt-0 w-full \' : \'\'"\n    > \n    \n    {{~#each this.contentNavEntries~}}\n          \n        {{~#if this.isGroup~}}\n        \n            {{#if ../isDropdown}}               \n                <li class="w-full h-auto overflow-hidden text-base list-none border-b border-gray-400 bg-blue-accented text-blue-congress md:mx-0 font-copy fill-congress c-content-nav__group">\n                    <div class="flex items-center h-10 p-2 c-content-nav__group-title">{{this.title}}</div>\n                    <ul class="c-content-nav__group-list !px-0 mt-0">\n                        {{~#each this.navigationGroup~}}\n                            {{> components/content_nav/content_nav_item \n                                _teasersize=../../_teasersize \n                                _isdropdown=../../isDropdown \n                                _ismixed=../../isMixed \n                                _islist=../../isList \n                                _isflow=../../isFlow}}\n                        {{~/each~}}\n                    </ul>\n                </li> \n            {{/if}}\n        {{else}}           \n            {{> components/content_nav/content_nav_item  \n                _teasersize=../_teasersize \n                _isdropdown=../isDropdown \n                _ismixed=../isMixed \n                _islist=../isList \n                _isflow=../isFlow}}\n        {{~/if~}}\n    {{~/each~}}\n</ul>\n'
 module.exports['components/event/instant_dates.hbs'] = '{{#if this.moreThenOneEvent}}\n    {{#with this.firstInstant}}\n        <span class=\'text-2xl font-headingSerif font-bold\'>{{this.startDate.day}}</span>\n        <span class=\'text-sm font-headingSerif\'>{{this.startDate.monthNameShort}}</span>\n    {{/with}}\n    {{#if this.moreThenTwoEvents}}\n        <span class=\'text-sm font-headingSerif\'>|</span>\n    {{else}}\n        <span class=\'text-sm font-headingSerif\'>+</span>\n    {{/if}}\n    {{#with this.lastInstant}}\n        <span class=\'text-2xl font-headingSerif font-bold\'>{{this.startDate.day}}</span>\n        <span class=\'text-sm font-headingSerif\'>{{this.startDate.monthNameShort}}</span>\n    {{/with}}\n{{else}}\n    {{#with this.firstInstant}}\n        <span class=\'text-sm font-headingSerif\'>{{this.startDate.weekdayNameShort}}</span>\n        <span class=\'text-2xl font-headingSerif font-bold\'>{{this.startDate.day}}</span>\n        <span class=\'text-sm font-headingSerif\'>{{this.startDate.monthNameShort}}</span>\n    {{/with}}\n{{/if}}'
-module.exports['components/event/stage_location.ssi.hbs'] = '{{#with this.location}}\n<p class="flex items-center	mt-4 -mb2 text-stageText font-base">\n    {{> components/base/image/icon _icon="ortsmarke" _iconmap="icons" _addClass="w-5 h-5 fill-current mr-1.5 -ml-1" }}\n    {{#each this}}\n            {{#unless @first}}<span class="mx-3 text-stageText">|</span>{{/unless}}\n        {{this}}\n    {{/each}}\n</p>\n{{/with}}'
+module.exports['components/event/stage_location.ssi.hbs'] = '{{#with this.location}}\n<p class="mt-4 -mb-2 text-stageText font-base">\n    {{> components/base/image/icon _icon="ortsmarke" _iconmap="icons" _addClass="inline w-5 h-5 fill-current -mt-1 mr-1.5 -ml-1" }}\n    {{#each this}}\n            {{#unless @first}}<span class="mx-2 text-stageText">|</span>{{/unless}}\n        {{this}}\n    {{/each}}\n</p>\n{{/with}}'
+module.exports['components/label/label.hbs'] = '<span\n    class=\'sb-label rounded px-1.5 pt-px inline-block tracking-wide text-white text-base leading-5.5 font-heading\n        {{inline-switch\n            _type\n            \'["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"]\'\n            \'["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"]\'\n        }}\'\n>\n    {{_text}}\n\n</span>\n{{~#with this.byline~}}\n    <span class=\'ml-2 text-xs font-headingSerif {{#if ../_css}}{{../_css}}{{else}}text-grey-scorpion{{/if}}\'>\n        {{~#if this.bylineSsi~}}\n            {{{this.bylineSsi}}}\n        {{~else~}}\n            {{this.bylineText}}\n        {{~/if~}}\n    </span>\n{{~/with~}}'
 module.exports['components/grid/grid.hbs'] = '\n<div class="grid grid-page">\n  <div class="grid grid-cols-12 py-6 bg-white sm:px-8 col-full sm:col-main gap-x-6 gap-y-6">\n    {{#>components/grid/grid_group _size="100"}}\n      <h2 class="text-4xl headline--barrier col-span-full">Gruppen 100%</h2>\n      {{#>components/grid/grid_item _size="12"}}\n        <a href="#">\n          <div class="flex items-center justify-center text-5xl text-white bg-gray-500 aspect-video">\n            12/12 = 100%    \n          </div>\n        </a>\n      {{/components/grid/grid_item}}   \n    {{/components/grid/grid_group}} \n    {{#>components/grid/grid_group _backgroundColor="1"}}    \n      <h2 class="text-4xl headline--barrier col-span-full">Gruppen 100% mit blauen Hintergrung bis Rand</h2>\n      {{#>components/grid/grid_item _size="6"}}\n        <div class="flex items-center justify-center text-5xl text-white bg-gray-500 aspect-video">\n          6/12 = 50%    \n        </div>\n      {{/components/grid/grid_item}}  \n      {{#>components/grid/grid_item _size="6"}}\n        <div class="flex items-center justify-center text-5xl text-white bg-gray-500 aspect-video">\n          6/12 = 50%    \n        </div>\n      {{/components/grid/grid_item}} \n    {{/components/grid/grid_group}} \n\n    {{#>components/grid/grid_group _size="100"}}\n\n      <h2 class="text-4xl headline--barrier col-span-full">Gruppen 100%</h2>\n      {{#>components/grid/grid_item _size="6"}}\n      <div class="flex items-center justify-center text-5xl text-white bg-gray-500 aspect-video">\n        6/12 = 50%    \n      </div>\n      {{/components/grid/grid_item}}  \n      {{#>components/grid/grid_item _size="6"}}\n      <div class="flex items-center justify-center text-5xl text-white bg-gray-500 aspect-video">\n        6/12 = 50%    \n      </div>\n      {{/components/grid/grid_item}} \n\n      {{#>components/grid/grid_item _size="4"}}\n      <div class="flex items-center justify-center text-5xl text-white bg-gray-500 aspect-video">\n        4/12 = 33%    \n      </div>\n      {{/components/grid/grid_item}} \n      {{#>components/grid/grid_item _size="4"}}\n      <div class="flex items-center justify-center text-5xl text-white bg-gray-500 aspect-video">\n        4/12 = 33%    \n      </div>  \n      {{/components/grid/grid_item}} \n      {{#>components/grid/grid_item _size="4"}}\n      <div class="flex items-center justify-center text-5xl text-white bg-gray-500 aspect-video">\n        4/12 = 33%    \n      </div>   \n      {{/components/grid/grid_item}}\n    {{/components/grid/grid_group}}\n    {{#>components/grid/grid_group_tabbed }}\n        <h2 class="text-4xl headline--barrier col-span-full">Gruppen 100% Tabbed</h2>\n        {{#>components/grid/grid_item _size="3"}}\n        <div class="flex items-center justify-center text-4xl text-white bg-gray-500 aspect-video">\n          3/12 = 25%    \n        </div> \n        {{/components/grid/grid_item}}\n        \n        {{#>components/grid/grid_item _size="3"}}\n        <div class="flex items-center justify-center text-4xl text-white bg-gray-500 aspect-video">\n          3/12 = 25%    \n        </div> \n        {{/components/grid/grid_item}}\n\n        {{#>components/grid/grid_item _size="3"}}\n        <div class="flex items-center justify-center text-4xl text-white bg-gray-500 aspect-video">\n          3/12 = 25%    \n        </div>   \n        {{/components/grid/grid_item}}\n\n        {{#>components/grid/grid_item _size="3"}}\n        <div class="flex items-center justify-center text-4xl text-white bg-gray-500 aspect-video">\n          3/12 = 25%    \n        </div>    \n        {{/components/grid/grid_item}} \n      \n    {{/components/grid/grid_group_tabbed}} \n    {{#>components/grid/grid_group}} \n      <h2 class="text-4xl headline--barrier col-span-full">Gruppen 100%</h2>\n      {{#>components/grid/grid_item _size="4"}}\n      <div class="flex items-center justify-center text-5xl text-white bg-gray-500 aspect-video">\n        4/12 = 33%    \n      </div>\n      {{/components/grid/grid_item}} \n      {{#>components/grid/grid_item _size="4"}}\n      <div class="flex items-center justify-center text-5xl text-white bg-gray-500 aspect-video">\n        4/12 = 33%    \n      </div>  \n      {{/components/grid/grid_item}} \n      {{#>components/grid/grid_item _size="4"}}\n      <div class="flex items-center justify-center text-5xl text-white bg-gray-500 aspect-video">\n        4/12 = 33%    \n      </div>   \n      {{/components/grid/grid_item}}  \n    {{/components/grid/grid_group}} \n    {{#>components/grid/grid_group _size="50"}}\n      <h2 class="text-4xl headline--barrier col-span-full">Gruppen 50%</h2>\n      {{#>components/grid/grid_item _size="12"}}\n        <div class="flex items-center justify-center text-5xl text-white bg-gray-500 aspect-video">\n          6/12 = 50%    \n        </div>\n      {{/components/grid/grid_item}} \n      {{#>components/grid/grid_item _size="12"}}\n        <div class="flex items-center justify-center text-5xl text-white bg-gray-500 aspect-video">\n          6/12 = 50%    \n        </div>  \n      {{/components/grid/grid_item}} \n    {{/components/grid/grid_group}} \n    {{#>components/grid/grid_group _size="50"}}\n      <h2 class="text-4xl headline--barrier col-span-full">Gruppen 50%</h2>\n      {{#>components/grid/grid_item _size="6"}}\n        <div class="flex items-center justify-center text-5xl text-white bg-gray-500 aspect-video">\n          6/12 = 50%    \n        </div>\n      {{/components/grid/grid_item}} \n      {{#>components/grid/grid_item _size="6"}}\n        <div class="flex items-center justify-center text-5xl text-white bg-gray-500 aspect-video">\n          6/12 = 50%    \n        </div>  \n      {{/components/grid/grid_item}} \n    {{/components/grid/grid_group}} \n    {{#>components/grid/grid_group _size="66"}}\n      <h2 class="text-4xl headline--barrier col-span-full">Gruppen 66%</h2>\n      {{#>components/grid/grid_item _size="12"}}\n        <div class="flex items-center justify-center text-5xl text-white bg-gray-500 aspect-video">\n          8/12 = 66%    \n        </div>\n      {{/components/grid/grid_item}} \n      {{#>components/grid/grid_item _size="12"}}\n        <div class="flex items-center justify-center text-5xl text-white bg-gray-500 aspect-video">\n          8/12 = 66%    \n        </div>  \n      {{/components/grid/grid_item}} \n    {{/components/grid/grid_group}} \n    {{#>components/grid/grid_group _size="33"}}\n      <h2 class="text-4xl headline--barrier col-span-full">Gruppen 33%</h2>\n      {{#>components/grid/grid_item _size="12"}}\n        <div class="flex items-center justify-center text-5xl text-white bg-gray-500 aspect-video">\n          4/12 = 33%    \n        </div>\n      {{/components/grid/grid_item}} \n      {{#>components/grid/grid_item _size="12"}}\n        <div class="flex items-center justify-center text-5xl text-white bg-gray-500 aspect-video">\n          4/12 = 33%    \n        </div>  \n      {{/components/grid/grid_item}} \n    {{/components/grid/grid_group}} \n  </div>\n</div>\n'
 module.exports['components/grid/grid_group.hbs'] = '{{~#if _backgroundColor}}\n    {{#>components/grid/grid_group_highlight _backgroundColor=this.backgroundColor }}  \n        {{> @partial-block }}\n    {{/components/grid/grid_group_highlight }}\n{{else}}\n    {{#>components/grid/grid_group_standard _size=this.teaserSize }}  \n        {{> @partial-block }}\n    {{/components/grid/grid_group_standard }}\n{{/if}}'
 module.exports['components/grid/grid_group_highlight.hbs'] = '</div>\n<div class="grid col-full grid-page {{inline-switch _backgroundColor \'["1","2"]\' \'[" bg-grey-alto"," bg-orange-bridesmaid"]\'}}">\n    <section class="grid grid-cols-12 py-6 sm:px-8 col-full sm:col-main gap-x-6 gap-y-9">\n        <div class="grid content-start grid-cols-12 col-span-12 gap-x-6 gap-y-6">\n            {{> @partial-block }}\n        </div>\n    </section>\n</div>\n<div class="grid grid-cols-12 py-6 bg-white sm:px-8 col-full sm:col-main gap-x-6 gap-y-6">'
 module.exports['components/grid/grid_group_standard.hbs'] = '<section class="grid grid-cols-12 items-start bg-white content-start gap-x-6 gap-y-6 col-span-12 {{inline-switch _size \'["100","66","50","33","25"]\' \'["","md:col-span-8","md:col-span-6","md:col-span-4","md:col-span-3"]\'}}">\n    {{> @partial-block }}\n</section>'
 module.exports['components/grid/grid_group_tabbed.hbs'] = '</div>\n<section class="grid grid-cols-12 px-8 py-8 mx-4 bg-blue-400 sm:mx-0 rounded-tl-3xl rounded-br-3xl col-full sm:col-main gap-x-6 gap-y-6">\n    {{> @partial-block }}\n</section>\n<div class="grid grid-cols-12 py-6 bg-white sm:px-8 col-full sm:col-main gap-x-6 gap-y-6">'
 module.exports['components/grid/grid_item.hbs'] = '<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"]\'}}" >\n    {{> @partial-block }}    \n</article>'
-module.exports['components/mediaplayer/media_player.hbs'] = '<div x-show="avStart" id="{{this.ardPlayerConfig.playerId}}" class="ar-16-9 h-auto js-load {{if _cypressHook _cypressHook \'js-media-element\'}} js-video-livestream" data-hr-mediaplayer-loader=\'{{json this.ardPlayerJsonConfig}}\'>\n    {{#unless _hideGeotag}}\n        {{~#with _geotag}}\n            <span class="js-geotag c-teaser__geotag" aria-hidden="true">{{this.[0].title~}}</span>\n        {{/with~}}\n    {{/unless}}\n</div>\n{{#if _isTeaser}}\n    <div class="relative {{_aspectRatio}}" x-show="!avStart" > \n        {{#with _teaser}}\n            {{~#if ../_isCopyText~}}\n                {{~> 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="ar__content" _noDelay=../_noDelay ~}}                \n            {{else}}          \n                {{#decorator \'components/base/link\' _cssClasses="c-teaser__mediaLink" _isAriaHidden=true\n                        _doTracking=(if this.doTracking \'true\') _clickLabelPrefix1=this.realTeasersize\n                        _clickLabelPrefix2="mediaLink" }}                                      \n                    {{~> 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="ar__content" _noDelay=../_noDelay ~}}                             \n                {{/decorator }}\n            {{/if}}\n        {{/with}}\n        {{> components/button/button_round \n        _isButton="true" \n        _addClass=\'absolute bottom-0 right-0 fill-white hover:text-white js-mediaplayer__button\'\n        _buttonColor=(if _isLivestream \' text-orange-spicyCarrot hover:fill-orange-spicyCarrot\' \' text-blue-jellyBean hover:fill-blue-jellyBean\')\n        _buttonSpace=(inline-switch _teaserSize \'["25","33"]\' \'[" my-2 mx-2"," my-5 mx-5 md:my-3 md:mx-3"," my-5 mx-5"]\')\n        _showIcon=true \n        _icon=_mediaButtonIcon \n        _label=_mediaButtonLabel \n        _srOnly="true" \n        _alpineClick="avStart = !avStart; $dispatch(\'player_start\')"\n        }}    \n        {{~#if this.isPodcast~}}\n            <a href="{{this.podcastDownloadUrl}}" class="absolute top-0 right-0 m-5 js-load"{{#with\n                    this.trackingData}}\n            data-hr-click-tracking=\'{"settings": [{"type": "download", "clickLabel": "{{this.pageName}}", "secondLevelId": "{{this.secondLevelId}}"}, {"type": "uxAction", "clickLabel": "medienDownload::podcast::{{_type}}", "secondLevelId": "{{this.secondLevelId}}" }]}\'{{/with}}>\n                {{> components/base/image/icon _icon=\'download-button\' _addClass="w-10 h-10"}}\n            </a>\n        {{~/if~}}\n    </div>\n{{/if}}'
-module.exports['components/label/label.hbs'] = '<span\n    class=\'sb-label rounded px-1.5 pt-px inline-block tracking-wide text-white text-base leading-5.5 font-heading\n        {{inline-switch\n            _type\n            \'["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"]\'\n            \'["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"]\'\n        }}\'\n>\n    {{_text}}\n\n</span>\n{{~#with this.byline~}}\n    <span class=\'ml-2 text-xs font-headingSerif {{#if ../_css}}{{../_css}}{{else}}text-grey-scorpion{{/if}}\'>\n        {{~#if this.bylineSsi~}}\n            {{{this.bylineSsi}}}\n        {{~else~}}\n            {{this.bylineText}}\n        {{~/if~}}\n    </span>\n{{~/with~}}'
 module.exports['components/page/page.hbs'] = '<!DOCTYPE html>\n<html \n    class="no-js no-js-burgerMenu preload noMicroInteraction"\n    data-theme="hessenschau" \n    lang="de"\n>\n    <head>\n\n        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>\n        <meta http-equiv="X-UA-Compatible" content="IE=Edge"/>\n        <title>hessenschau.de | Nachrichten aus Hessen</title>\n        <meta name="application-name" content="hessenschau.de" />\n        <meta name="copyright" content="Hessischer Rundfunk, Frankfurt, Germany" />\n        <meta name="author" content="hessenschau.de, Frankfurt, Germany" />\n        <meta name="publisher" content="hessenschau.de" />\n        <meta name="language" content="Deutsch" />\n\n    </head>\n\n    <body itemscope itemtype="http://schema.org/WebPage">\n        <div class="js-pageSwap">\n                      \n            {{> components/site_header/header }}          \n            \n            <main \n                onclick="void(0)" \n                role="main" \n                id="content"\n                class="flex items-center justify-center"\n            >\n                <div class="grid grid-page">\n                    <div class="grid grid-cols-12 py-6 bg-white sm:px-8 col-full sm:col-main gap-x-6 gap-y-6">\n                    <section class="grid items-start content-start grid-cols-12 col-span-12 bg-white gap-x-6 gap-y-6 ">\n                        {{> components/teaser/teaser_standard }}\n                    </section>\n                    <section class="grid items-start content-start grid-cols-12 col-span-12 bg-white gap-x-6 gap-y-6 ">\n                        {{> components/teaser/content_nav/teaser_content_nav teasersize="100"}}\n                    </section>\n                    <section class="grid items-start content-start grid-cols-12 col-span-12 bg-white gap-x-6 gap-y-6 ">\n                        {{> components/teaser/content_nav/teaser_content_nav teasersize="50"}}\n                        {{> components/teaser/content_nav/teaser_content_nav teasersize="50"}}\n                    </section>\n                    <section class="grid items-start content-start grid-cols-12 col-span-12 bg-white gap-x-6 gap-y-6 ">\n                        {{> components/teaser/teaser_standard teaserSize="50"}}\n                        {{> components/teaser/teaser_standard teaserSize="50"}}\n                    </section>\n                    <section class="grid items-start content-start grid-cols-12 col-span-12 bg-white gap-x-6 gap-y-6 ">\n                        {{> components/teaser/teaser_standard teaserSize="33"}}\n                        {{> components/teaser/teaser_standard teaserSize="33"}}\n                        {{> components/teaser/teaser_standard teaserSize="33"}}\n                    </section>\n                    <div class="grid items-start content-start grid-cols-12 col-span-12 bg-white gap-x-6 gap-y-6 ">\n                        {{> components/teaser/teaser_standard teaserSize="50"}}\n                        {{> components/teaser/teaser_standard teaserSize="50"}}\n                    </div>               \n                    <div class="grid items-start content-start grid-cols-12 col-span-12 bg-white gap-x-6 gap-y-6 ">\n                        {{> components/teaser/teaser_standard teaserSize="33"}}\n                        {{> components/teaser/teaser_standard teaserSize="33"}}\n                        {{> components/teaser/teaser_standard teaserSize="33"}}\n                    </div>\n                    <div class="grid items-start content-start grid-cols-12 col-span-12 bg-white gap-x-6 gap-y-6 ">\n                        {{> components/teaser/teaser_standard teaserSize="50"}}\n                        {{> components/teaser/teaser_standard teaserSize="50"}}\n                    </div>\n                    </div>\n                </div>\n            </main>\n\n        </div>\n    </body>\n</html>\n'
+module.exports['components/mediaplayer/media_player.hbs'] = '<div x-show="avStart" id="{{this.ardPlayerConfig.playerId}}" class="ar-16-9 h-auto js-load {{if _cypressHook _cypressHook \'js-media-element\'}} js-video-livestream" data-hr-mediaplayer-loader=\'{{json this.ardPlayerJsonConfig}}\'>\n    {{#unless _hideGeotag}}\n        {{~#with _geotag}}\n            <span class="js-geotag c-teaser__geotag" aria-hidden="true">{{this.[0].title~}}</span>\n        {{/with~}}\n    {{/unless}}\n</div>\n{{#if _isTeaser}}\n    <div class="relative {{_aspectRatio}}" x-show="!avStart" > \n        {{#with _teaser}}\n            {{~#if ../_isCopyText~}}\n                {{~> 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="ar__content" _noDelay=../_noDelay ~}}                \n            {{else}}          \n                {{#decorator \'components/base/link\' _cssClasses="c-teaser__mediaLink" _isAriaHidden=true\n                        _doTracking=(if this.doTracking \'true\') _clickLabelPrefix1=this.realTeasersize\n                        _clickLabelPrefix2="mediaLink" }}                                      \n                    {{~> 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="ar__content" _noDelay=../_noDelay ~}}                             \n                {{/decorator }}\n            {{/if}}\n        {{/with}}\n        {{> components/button/button_round \n        _isButton="true" \n        _addClass=\'absolute bottom-0 right-0 fill-white hover:text-white js-mediaplayer__button\'\n        _buttonColor=(if _isLivestream \' text-orange-spicyCarrot hover:fill-orange-spicyCarrot\' \' text-blue-jellyBean hover:fill-blue-jellyBean\')\n        _buttonSpace=(inline-switch _teaserSize \'["25","33"]\' \'[" my-2 mx-2"," my-5 mx-5 md:my-3 md:mx-3"," my-5 mx-5"]\')\n        _showIcon=true \n        _icon=_mediaButtonIcon \n        _label=_mediaButtonLabel \n        _srOnly="true" \n        _alpineClick="avStart = !avStart; $dispatch(\'player_start\')"\n        }}    \n        {{~#if this.isPodcast~}}\n            <a href="{{this.podcastDownloadUrl}}" class="absolute top-0 right-0 m-5 js-load"{{#with\n                    this.trackingData}}\n            data-hr-click-tracking=\'{"settings": [{"type": "download", "clickLabel": "{{this.pageName}}", "secondLevelId": "{{this.secondLevelId}}"}, {"type": "uxAction", "clickLabel": "medienDownload::podcast::{{_type}}", "secondLevelId": "{{this.secondLevelId}}" }]}\'{{/with}}>\n                {{> components/base/image/icon _icon=\'download-button\' _addClass="w-10 h-10"}}\n            </a>\n        {{~/if~}}\n    </div>\n{{/if}}'
 module.exports['components/site_header/burger.hbs'] = '<div x-data="burger()" class="flex items-center justify-center h-full fill-current sb-burger">\n    <nav>\n        <button {{!-- :class="$store.burgeropen ? \'text-blue-congress\' : \'text-white\'" --}}  \n            class="relative w-10 h-10 text-white tablet:w-18 tablet:h-12 focus:outline-none bg-brand"\n            @burger-close.window="burgerClose()"\n            @click="$store.burgeropen = !$store.burgeropen" \n            @click.debounce="burgerClick()" \n            aria-owns="sectionNav" \n            aria-controls="sectionNav"\n            x-effect="$el.setAttribute(\'aria-expanded\', $store.burgeropen);$el.setAttribute(\'aria-label\', $store.burgeropen ? \'Navigation schließen\' : \'Navigation öffnen\')"\n        >\n            <span class="sr-only md:hidden">Open main menu</span>\n            <div class="absolute block w-6 transform -translate-x-1/2 -translate-y-1/2 left-1/2 top-1/2">\n                <span aria-hidden="true" class="absolute block w-full h-0.5 transition duration-500 ease-in-out transform bg-current " :class="$store.burgeropen ? \'rotate-45\' : \'-mt-2\'"></span>\n                <span aria-hidden="true" class="absolute block w-full h-0.5 transition duration-500 ease-in-out transform bg-current" :class="{\'opacity-0\': $store.burgeropen } "></span>\n                <span aria-hidden="true" class="absolute block w-full h-0.5 transition duration-500 ease-in-out transform bg-current" :class="{\'-rotate-45\': $store.burgeropen, \'mt-2\': ! $store.burgeropen }"></span>\n            </div>\n        </button>\n    </nav>\n</div>\n\n<script>\n    var burger = () => {\n        return {\n            burgerClose(){               \n                this.$store.burgeropen = false\n                this.$dispatch(\'toggle-sectionnav\', false); \n            },\n            burgerClick(){               \n                this.$store.serviceNavIsOpen = false\n                this.$dispatch(\'toggle-sectionnav\',  this.$store.burgeropen);  \n                // Todo: not doing anything! can be removed?\n                // this.percent > 50 ? this.removeYtranslate() : null;\n                this.toggleScrolling(!this.$store.burgeropen)              \n            },\n            removeYtranslate(){\n                // Todo: not doing anything! can be removed?\n                //this.$refs.serviceList.classList.remove(\'-mt-40\'); \n                //this.$refs.sectionnavigation.classList.remove(\'-mt-40\')\n            }\n        }\n    }\n</script>\n'
 module.exports['components/site_header/header.hbs'] = '<div class="sb-main-navigation" x-data="mainNavigationHandler()" x-init="init()">\n    <header class="print:hidden relative z-10001 {{#if this.hasOpenSubNavigation}}lg:h-header-lg-big{{else}}lg:h-header-lg-small{{/if}} md:h-header-md h-header-sm">   \n        <div x-data \n            id="headerWrapper"\n            @resize.window="resetNav()" \n            :class="shouldBrandNavBeHidden() ? \'-mt-10 lg:-mt-8\' : \'\'  "\n            class="fixed top-0 left-0 flex flex-wrap max-w-full transition-all duration-500 transform font-copy lg:justify-center lg:w-full ">\n            \n            <div id="anchorNavWrapper" \n                class="hidden">\n                {{> components/site_header/anchor_navigation/anchor_navigation }}\n            </div>\n\n            <div id="brandNavWrapper" \n                class="relative flex items-center justify-center order-1 w-full bg-white z-10000">\n                {{> components/site_header/brand_navigation/brand_navigation }} \n            </div>\n\n            <div id="serviceNavWrapper" \n                :class="shouldServiceNavBeHidden() ? \'-mt-40\' : \'\'"\n                \n                class="relative flex justify-center order-2 w-full transition-all duration-500 ease-in-out md:border-white lg:border-b bg-blue-congress z-10002">   \n                <div id="serviceNavMainContainer" \n                    class="flex w-full h-10 lg:container md:h-12 lg:px-10 lg:h-16 z-10001">\n\n                    <span id="serviceNavHeadline" class="hidden print:hidden">Service Navigation</span>\n\n                    <div id="serviceLogoWrapper" \n                        class="flex items-center order-1 w-full pl-4 pr-2 tablet:pl-5 lg:items-end lg:pb-3 bg-blue-congress 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">\n                        {{> components/site_header/service_logo }}\n                    </div>\n                    \n                    <div id="serviceItemsWrapper"                \n                        class="flex items-center justify-end flex-initial order-2 inline-block w-full max-w-full align-top bg-blue-congress 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">\n                        {{> components/site_header/service_navigation/service_list }}\n\n                        {{> components/site_header/navigation_search/quick_search_button }}\n\n                        <div class="hidden lg:flex">\n                            {{> components/site_header/navigation_search/quick_search_form }}\n                        </div>\n                    \n                        <div id="burgerWrapper" \n                            class="flex justify-end flex-none order-2 lg:order-4 md:order-4 lg:hidden"> \n                            {{> components/site_header/burger }}    \n                        </div>\n                        \n                    </div>\n                </div>\n            </div>\n\n            <div id="sectionNavWrapper"      \n                x-ref="sectionnavigation"\n                @toggle-sectionnav.window="toggleSectionNav"\n                :class="shouldSectionNavBeHidden() ? \'-mt-40 md:-mt-40 lg:-mt-40\' : \'\'"  \n                class="flex justify-center order-3 w-full overflow-hidden duration-500 transition-max-height lg:transition-margin-top lg:duration-500 tablet:absolute tablet:top-22 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-blue-congress z-10000 print:hidden"\n            >\n                {{> components/site_header/section_navigation/section_navigation }}\n            </div>\n            \n            <div x-cloak :class="shouldServiceNavBeHidden() ? \'hidden -mt-40\' : \'\'"\n                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\')" \n                x-show="$store.searchFieldOpen"\n                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"\n                @search-close.window="$store.searchFieldOpen = false"\n                @click.outside="$store.searchFieldOpen = false; $dispatch(\'search-mobile-click-outside\'); dropped = false; toggleScrolling(!$store.serviceNavIsOpensearchFieldOpen && !$store.burgeropen)"\n                x-transition:enter="transition ease-out duration-200" \n                x-transition:enter-start="opacity-0 transform scale-y-90" \n                x-transition:enter-end="opacity-100 transform scale-y-100" \n                x-transition:leave="transition ease-in duration-100" \n                x-transition:leave-start="opacity-100 transform scale-y-100" \n                x-transition:leave-end="opacity-0 transform scale-y-90">\n\n                {{> components/site_header/navigation_search/quick_search_form }}\n\n            </div>\n            \n        </div> \n    </header>\n    <div class="justify-center hidden w-full scale-50 brand-logo_print print:flex">\n        <img loading="lazy" \n            alt="{{loca "header_homepage_link_title"}}" \n            src="{{resourceUrl "assets/base/icons/rsslogo/brandlogo--rss.jpg" _brand=(if this.brand this.brand)}}" \n            />\n    </div>\n    <div x-ref="myOverlay">\n        <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>\n    </div>\n</div>\n'
 module.exports['components/site_header/service_logo.hbs'] = '<a class="relative flex items-center text-white fill-current sb-service-logo lg:items-end link-focus-white print:hidden" \n    href="https://www.hessenschau.de/index.html" \n    title="Startseite hessenschau . d e">\n    <span x-cloak class="absolute transition-opacity duration-500 ease-in-out" :class="`${percent}` < 50 ? \'opacity-0\' : \'delay-200 opacity-100\'" >\n        {{> components/base/image/icon _icon="brandlogo--compact-40x40px" _iconmap="logo" _addClass="logo-compact w-7 h-7 lg:w-10 lg:h-10 items-center "}}\n    </span>\n    <span class="transition-opacity duration-500 ease-in-out" :class="`${percent}` < 50 ? \'opacity-100\' : \'opacity-0\'">\n        {{> components/base/image/icon _icon="brandlogo--desk" _iconmap="logo" _addClass="logo-desk flex items-center fill-white w-40 h-5 md:h-7 md:w-40 lg:h-8 lg:w-52"}}\n    </span> \n</a>\n'
 module.exports['components/teaser/teaser_alternativ.hbs'] = '<article class="col-span-12 flex md:flex-row gap-y-3 gap-x-4 md:px-0{{#unless this.isEvent}}{{~inline-switch this.teaserSize \'["hero","100","50"]\' \'[" flex-col"," px-5 md:flex-row"," md:col-span-6 px-5 md:flex-row"]\'~}}{{else}} items-start flex-col{{/unless}}"\n    x-data="{ avStart: false }"\n    {{#if this.isMobile1to1}}\n            :class="avStart ? \'flex-col\' : \'flex-row\'"\n    {{/if}} \n    >\n    <figure class="relative {{~inline-switch this.teaserSize \'["hero","100","50"]\' \'[" basis-2/3 ar-16-9"," ar-1-1 md:ar-16-9 basis-2/5 md:basis-1/3"," ar-1-1 md:ar-16-9 basis-2/5 md:basis-1/2"]\'~}}">\n        {{> components/teaser/components/teaser_lead _isMobile1to1=this.isMobile1to1 _teaserSize=this.teaserSize _aspectRatio=(inline-switch this.teaserSize \'["hero"]\' \'["ar-16-9","ar-1-1 md:ar-16-9"]\') }} \n    </figure>\n    {{> components/teaser/components/teaser_body _outerCssClasses=(inline-switch this.teaserSize \'["hero","100","50"]\' \'["basis-1/3"," basis-3/5 md:basis-2/3"," basis-3/5 md:basis-1/2"]\') }}\n</article>'
 module.exports['components/teaser/teaser_indextext.hbs'] = '<article class="mx-5 md:mx-0 p-8 md:p-10 relative col-span-12 flex flex-col gap-x-4 \n    {{~inline-switch this.teaserSize \'["50"]\' \'[" md:col-span-6",""]\'}}\n    {{~inline-switch this.teaserType \'["accented-ds","boxed-ds","highlighted-ds"]\' \'[" bg-blue-accented"," bg-white border border-blue-congress"," bg-orange-spicyCarrot"," bg-blue-accented"]\'}} "\n>\n    <h3 class="text-2xl md:text-4xl font-headingSerif {{~inline-switch this.teaserType \'["highlighted-ds"]\' \'[" text-white",""]\'}}">\n        {{this.title}}\n    </h3>\n    <p class="mt-6 text-sm md:text-base font-copy {{~inline-switch this.teaserType \'["highlighted-ds"]\' \'[" text-white",""]\'}}">\n        {{{this.shorttext}}}\n    </p>\n</article>\n'
 module.exports['components/teaser/teaser_poster.hbs'] = '<article class="mx-5 md:mx-0 relative col-span-12 flex gap-y-5 gap-x-4 {{inline-switch this.teaserSize \'["33","50"]\' \'["md:col-span-4 flex-col","md:col-span-6 flex-col","flex-col"]\'}} ">\n    <figure class="ar-1-1" aria-hidden="true">\n        {{~> components/base/image/responsive_image this.teaserImage _type=this.teaserType _variant=this.content.imageVariant _noDelay=../_noDelay _addClassImg="ar__content rounded-tl-3xl rounded-br-3xl" ~}}\n    </figure> \n    <div class="absolute flex justify-center w-full h-full bg-gradient-to-t from-black rounded-tl-3xl rounded-br-3xl" aria-hidden="true">\n        <div class="self-center block mx-8 text-center text-white">\n            {{> components/teaser/components/teaser_heading _headlineTag="h2" _label=this.label _readMore=this.link.readMoreText.readMoreScreenreader _size=this.teaserSize _title=this.title _topline=this.topline _teaserType=this.teaserType _font=(inline-switch isSerifHeading \'[true, false]\' \'["font-headingSerif","font-heading font-bold"]\') }}   \n        </div>\n    </div>\n    {{#decorator \'components/base/link\' _css="absolute flex w-full h-full justify-center" _isAriaHidden=true _doTracking=(if this.doTracking \'true\') _clickLabelPrefix1=this.teaserSize _clickLabelPrefix2="mediaLink" }}\n        <div class="self-end px-4 py-2.5 {{inline-switch this.teaserSize \'["33","50"]\' \'["mb-7","mb-7 md:mb-16"]\'}} text-white border border-white font-heading hover:bg-white hover:text-toplineColor hover:border-toplineColor">{{this.link.readMoreText.readMoreLong}}</div>\n    {{/decorator}} \n    <span class="sr-only">{{this.link.readMoreText.readMoreLong}}: {{this.title}}</span> \n</article>'
-module.exports['components/teaser/teaser_stage.hbs'] = '{{#with this.teaser}}\n    <div class="grid grid-page">\n        <article class="col-full relative after:content-[\'\'] after:block after:h-5 after:bg-stagePrimary">\n            <div class="relative overflow-hidden">\n            {{#unless this.isWide}}\n                <div class="absolute w-15/12">\n                    {{> components/base/image/responsive_image this.teaserImage _type="stage" _variant="default" _addClassImg="w-full blur-2xl"}}\n                </div>   \n                <div class="grid grid-page relative">\n            {{/unless}}\n            {{#if this.isWide}}\n                {{> components/base/image/responsive_image this.teaserImage _type="stage" _variant="wide" _addClass="w-full"}}\n            {{else}}\n                {{> components/base/image/responsive_image this.teaserImage _type="stage" _variant="default" _addClass="col-full lg:col-main lg:px-8"}}\n            {{/if}}\n            <div class="absolute left-2/4 right-auto bottom-10 flex max-w-main-col w-full px-5 sm:px-11.5 lg:px-13 mx-auto -translate-x-2/4 bottom-0{{inline-switch this.stageTextPosition \'["right50"]\' \'[" justify-end"," justify-start"]\'}}">\n                <div class="p-3 rounded-2xl bg-stageTextBox opacity-85{{inline-switch this.stageTextPosition \'["left100"]\' \'[" w-full"," w-full sm:w-2/4"]\'}} ">\n                {{#decorator \'components/base/link\'}}\n                    {{> components/teaser/components/teaser_heading _css="text-stageText" _title=this.title _label=this.label _topline=this.topline _headlineTag="h2" _size="100" _teaserType="stage" _fontVariant="sans-serif"}}\n                    {{#if this.showProfileInfoAsByline}}\n                        <p class="text-stageText font-headingSerif block my-3">{{this.profiles}}</p>\n                    {{/if}}\n                    {{#if this.showShorttext}}\n                    <p class="hidden sm:block text-stageText">{{this.shorttext}}</p>\n                        {{#if this.link.hasIcon}}\n                        <span class="flex items-end space-around hover:underline decoration-1 text-stageLink">[{{this.link.readMoreText.readMore}}\n                            {{> components/base/image/icon _icon=this.link.iconName _iconmap="icons" _addClass="w-5 h-5 fill-current ml-1" }}]\n                        </span>\n                        {{/if}}\n                    {{/if}}\n                    {{#with this.eventtags}}\n                        {{#with this.series}}\n                            <span class="block font-heading text-stageText text-2xl font-normal leading-6 tracking-wide mt-2.5 -mb-1">{{this.title}}</span>\n                        {{/with}}\n                        {{#with this.project}}\n                            <span class="block font-heading text-stageText text-2xl font-normal leading-6 tracking-wide mt-2.5 -mb-1">{{this.title}}</span>\n                        {{/with}}\n                        {{#with this.externalProject}}\n                            <span class="block font-heading text-stageText text-2xl font-normal leading-6 tracking-wide mt-2.5 -mb-1">{{this.title}}</span>\n                        {{/with}}\n                    {{/with}}\n                    {{#with this.location}}\n                        {{> components/base/loadSSI this.stageLocationSsi _templatePath=\'components/event/stage_location.ssi\' }} \n                    {{/with}}\n                    {{#if this.link.hasIcon}}\n                        <span class="flex items-end space-around mt-2 hover:underline text-stageLink {{if this.showShorttext \'hidden\'}}">[{{this.link.readMoreText.readMore}}\n                            {{> components/base/image/icon _icon=this.link.iconName _iconmap="icons" _addClass="w-5 h-5 fill-current ml-1" }}]\n                        </span>\n                    {{/if}}\n                    {{/decorator}}\n                </div>\n            </div>\n\n            {{#unless this.isWide}}\n            </div>\n            {{/unless}}\n            </div>\n        </article>\n    </div>\n{{/with}}'
+module.exports['components/teaser/teaser_stage.hbs'] = '{{#with this.teaser}}\n    <div class="grid grid-page">\n        <article class="col-full grid grid-page relative overflow-hidden  after:content-[\'\'] after:absolute after:bottom-0 after:col-full after:w-full after:block after:h-5 after:bg-stagePrimary lg:after:relative">\n            {{#unless this.isWide}}\n                <div class="absolute w-15/12">\n                    {{> components/base/image/responsive_image this.teaserImage _type="stage" _variant="default" _addClassImg="w-full blur-2xl"}}\n                </div>   \n            {{/unless}}\n            <div class="col-full lg:col-main lg:px-8 relative">\n                <div class="relative max-h-stage overflow-visible before:content-[\'\'] before:block before:w-full before:pt-3/4 sm:before:pt-stage">\n                    <div class="{{#if this.isWide}}lg:absolute lg:h-full lg:w-full-hd lg:left-1/2 lg:top-0 lg:-ml-240{{else}}absolute h-full w-full top-0{{/if}}">\n                        {{#if this.isWide}}\n                            {{> components/base/image/responsive_image this.teaserImage _type="stage" _variant="wide" _addClass="w-full block" _addClassImg="w-full absolute inset-0"}}\n                        {{else}}\n                            {{> components/base/image/responsive_image this.teaserImage _type="stage" _variant="default"}}\n                        {{/if}}\n                    </div>\n                    {{> components/teaser/stage/stage_text}}\n                </div>\n            </div>\n\n        </article>\n    </div>\n{{/with}}\n'
 module.exports['components/teaser/teaser_standard.hbs'] = '<article class="relative col-span-12 flex {{if this.displayTeaserBodyAsImageOverlay \'\' \'gap-y-3\'}} gap-x-4 \n{{~inline-switch this.teaserSize \'["25","33","50"]\' \'[" md:col-span-3"," md:col-span-4"," md:col-span-6",""]\'}}\n{{~#if this.isMobile1to1}} js-is1to1 px-5 md:px-0 md:flex-col{{else}} flex-col{{/if~}} \n "\n    x-data="{ avStart: false }"\n    {{#if this.isMobile1to1}}\n            :class="avStart ? \'flex-col\' : \'flex-row\'"\n    {{/if}}   \n    >\n    <figure class="relative \n    {{~#if this.isMobile1to1}} basis-2/5 md:flex-full ar-1-1 md:ar-16-9{{else}} ar-16-9{{/if~}}">    \n        {{> components/teaser/components/teaser_lead _isMobile1to1=this.isMobile1to1 _teaserSize=this.teaserSize _aspectRatio=(inline-switch this.teaserSize \'["25"]\' \'["ar-1-1 md:ar-16-9", "ar-16-9"]\') }}     \n    </figure>\n    {{#if this.displayTeaserBodyAsImageOverlay}}\n        {{#decorator \'components/teaser/components/teaser_image_overlay\' _noOverlayInMobileViewports=true _cssClasses=" relative md:absolute w-full bottom-0"}}\n            <div class="flex flex-col items-center justify-center p-4 border-dashed border-r border-gray-400">\n                {{> components/event/instant_dates}}\n            </div>\n            {{> components/teaser/components/teaser_body _outerCssClasses=(if this.isMobile1to1 \'py-4 md:px-4 basis-3/5 md:flex-full\' \'py-4 md:px-4\')}}\n        {{/decorator}}\n    {{else}}\n        {{> components/teaser/components/teaser_body _outerCssClasses=(if this.isMobile1to1 \'basis-3/5 md:flex-full\')}}\n    {{/if}}\n</article>'
 module.exports['components/teaser/teaser_standard_event.hbs'] = '<article class="col-span-12 flex gap-y-3 gap-x-4 \n    {{~inline-switch this.teaserSize \'["25","33","50"]\' \'[" md:col-span-3"," md:col-span-4"," md:col-span-6",""]\'}}\n    {{~#if this.isMobile1to1}} js-is1to1 px-5 md:px-0 md:flex-col{{else}} flex-col{{/if~}} \n     "\n    x-data="{ avStart: false }"\n    {{#if this.isMobile1to1}}\n            :class="avStart ? \'flex-col\' : \'flex-row\'"\n    {{/if}}   \n    >\n   \n    {{#if this.isEvent}}\n    {{! ---- To handle two events ----}}\n        {{#if this.moreThenOneEvent}}\n            <article class="mx-5 md:mx-0 relative col-span-12 flex gap-y-4 gap-x-4 {{inline-switch teaserSize \'["33","50"]\' \'["md:col-span-4 flex-col","md:col-span-6 flex-col","flex-col"]\'}} ">\n                <figure class="relative \n                    {{~#if this.isMobile1to1}} basis-2/5 md:flex-full ar-1-1 md:ar-16-9{{else}} ar-16-9{{/if~}}">    \n                    {{> components/teaser/components/teaser_lead _isMobile1to1=this.isMobile1to1 _teaserSize=this.teaserSize _aspectRatio=(inline-switch this.teaserSize \'["25"]\' \'["ar-1-1 md:ar-16-9", "ar-16-9"]\') }}     \n                </figure>\n                <div class="absolute flex justify-center w-16 h-full bg-gradient-to-t from-white\n                    {{inline-switch teaserSize \'["100"]\' \'["bottom-0 w-full h-2/5 bg-neutral-200 opacity-80"]\'}}" \n                    aria-hidden="true">\n                    <div class="self-center block mx-4 text-center text-black">\n                        <span class="text-xl font-headingSerif font-bold">{{ this.firstInstant.startDate.day}}</span>\n                        <span class="text-xl font-headingSerif">{{this.lastInstant.startDate.monthNameShort}}</span>\n                        +<br>\n                        <span class="text-xl font-headingSerif font-bold">{{this.lastInstant.startDate.day}}</span>\n                        <span class="text-xl font-headingSerif">{{this.lastInstant.startDate.monthNameShort}} </span>\n                    </div>\n                    <div class="{{~#if this.isMobile1to1}}basis-3/5 md:flex-full{{/if~}}\n                        {{inline-switch teaserSize \'["100"]\' \'["border-l-2 border-dotted pt-5 pl-4 border-slate-600"]\'}}\n                        {{inline-switch teaserSize \'["50","33"]\' \'[" hidden"," hidden"]\'}}">\n                            <header class="md:px-0{{#unless this.isMobile1to1}} px-5{{/unless}}">\n                                {{#decorator \'components/base/link\' css="hover:text-toplineColor" }} \n                                {{> components/teaser/components/teaser_heading \n                                fontVariant=this.headingFontVariant\n                                headlineTag=this.headlineTag \n                                label=this.label \n                                readMore=this.link.readMoreText.readMoreScreenreader \n                                size=this.teaserSize \n                                title=this.title \n                                topline=this.topline \n                                teaserType=this.teaserType\n                                _isMobile1to1=this.isMobile1to1}}            \n                                {{/decorator}}   \n                            </header>\n                            <section class="md:px-0{{#unless this.isMobile1to1}} px-5{{/unless}}">\n                                {{> components/teaser/components/teaser_text text=this.shorttext size=this.teaserSize }}\n                            </section>\n                        </div>\n                    </div>\n            </article>\n            {{else if this.moreThenTwoEvents}}\n                {{! ---- To handle more than two events ----}}\n                <article class="mx-5 md:mx-0 relative col-span-12 flex gap-y-4 gap-x-4 {{inline-switch teaserSize \'["33","50"]\' \'["md:col-span-4 flex-col","md:col-span-6 flex-col","flex-col"]\'}} ">\n                <figure class="relative \n                    {{~#if this.isMobile1to1}} basis-2/5 md:flex-full ar-1-1 md:ar-16-9{{else}} ar-16-9{{/if~}}">    \n                    {{> components/teaser/components/teaser_lead _isMobile1to1=this.isMobile1to1 _teaserSize=this.teaserSize _aspectRatio=(inline-switch this.teaserSize \'["25"]\' \'["ar-1-1 md:ar-16-9", "ar-16-9"]\') }}     \n                </figure>\n                <div class="absolute flex justify-center w-16 h-full bg-gradient-to-t from-white" aria-hidden="true">\n                    <div class="self-center block mx-4 text-center text-black">\n                        <span class="text-xl font-headingSerif font-bold">{{ this.firstInstant.startDate.day }}   </span>\n                        <span class="text-xl font-headingSerif">{{this.lastInstant.startDate.monthNameShort  }} </span>\n                        |<br>\n                        <span class="text-xl font-headingSerif font-bold">{{this.lastInstant.startDate.day }}   </span>\n                        <span class="text-xl font-headingSerif">{{this.lastInstant.startDate.monthNameShort  }} </span>\n                    </div>\n                </div>\n                </article>\n            {{else}}\n                {{! ---- To handle a single event ----}}\n                <article class="mx-5 md:mx-0 relative col-span-12 flex gap-y-4 gap-x-4 {{inline-switch teaserSize \'["33","50"]\' \'["md:col-span-4 flex-col","md:col-span-6 flex-col","flex-col"]\'}} ">\n                    <figure class="relative \n                        {{~#if this.isMobile1to1}} basis-2/5 md:flex-full ar-1-1 md:ar-16-9{{else}} ar-16-9{{/if~}}">    \n                        {{> components/teaser/components/teaser_lead _isMobile1to1=this.isMobile1to1 _teaserSize=this.teaserSize _aspectRatio=(inline-switch this.teaserSize \'["25"]\' \'["ar-1-1 md:ar-16-9", "ar-16-9"]\') }}     \n                    </figure>\n                    <div class="absolute flex justify-center w-16 h-full bg-gradient-to-t from-white\n                    {{inline-switch teaserSize \'["100"]\' \'["bottom-0 w-full h-2/5 bg-neutral-200 opacity-80"]\'}}" \n                    aria-hidden="true">\n                        <div class="self-center block mx-4 text-center text-black">\n                            <span class="text-xl font-headingSerif">{{this.lastInstant.startDate.weekdayNameShort  }} </span>\n                            <span class="text-xl font-headingSerif">{{this.lastInstant.startDate.day  }} </span>\n                            <span class="text-xl font-headingSerif">{{this.lastInstant.startDate.monthNameShort  }} </span>\n                        </div>\n                        <div class=" {{~#if this.isMobile1to1}}basis-3/5 md:flex-full{{/if~}}\n                        {{inline-switch teaserSize \'["100"]\' \'["border-l-2 border-dotted pt-5 pl-4 border-slate-600"]\'}}\n                        {{inline-switch teaserSize \'["50","33"]\' \'[" hidden"," hidden"]\'}}">\n                            <header class="md:px-0{{#unless this.isMobile1to1}} px-5{{/unless}}">\n                                {{#decorator \'components/base/link\' _css="hover:text-toplineColor" }} \n                                {{> components/teaser/components/teaser_heading \n                                fontVariant=this.headingFontVariant\n                                headlineTag=this.headlineTag \n                                label=this.label \n                                readMore=this.link.readMoreText.readMoreScreenreader \n                                size=this.teaserSize \n                                title=this.title \n                                topline=this.topline \n                                teaserType=this.teaserType\n                                _isMobile1to1=this.isMobile1to1}}            \n                                {{/decorator}}   \n                            </header>\n                            <section class="md:px-0{{#unless this.isMobile1to1}} px-5{{/unless}}">\n                                {{> components/teaser/components/teaser_text text=this.shorttext size=this.teaserSize }}\n                            </section>\n                        </div>\n                    </div>\n                </article>\n        {{/if}}\n    {{else}}\n        <figure class="relative \n            {{~#if this.isMobile1to1}} basis-2/5 md:flex-full ar-1-1 md:ar-16-9{{else}} ar-16-9{{/if~}}">    \n            {{> components/teaser/components/teaser_lead _isMobile1to1=this.isMobile1to1 _teaserSize=this.teaserSize _aspectRatio=(inline-switch this.teaserSize \'["25"]\' \'["ar-1-1 md:ar-16-9", "ar-16-9"]\') }}     \n        </figure>\n    {{/if}} \n        <div class="{{~#if this.isMobile1to1}}basis-3/5 md:flex-full{{/if~}}{{inline-switch teaserSize \'["100"]\' \'[" hidden"]\'}}">\n            <header class="md:px-0{{#unless this.isMobile1to1}} px-5{{/unless}}">\n                {{#decorator \'components/base/link\' _css="hover:text-toplineColor" }} \n                {{> components/teaser/components/teaser_heading \n                fontVariant=this.headingFontVariant\n                headlineTag=this.headlineTag \n                label=this.label \n                readMore=this.link.readMoreText.readMoreScreenreader \n                size=this.teaserSize \n                title=this.title \n                topline=this.topline \n                teaserType=this.teaserType\n                _isMobile1to1=this.isMobile1to1}}            \n                {{/decorator}}   \n            </header>\n            <section class="md:px-0{{#unless this.isMobile1to1}} px-5{{/unless}}">\n                {{> components/teaser/components/teaser_text text=this.shorttext size=this.teaserSize }}\n            </section>\n        </div>\n</article>'
 module.exports['components/base/image/icon.hbs'] = '{{!--@\nFügt ein SVG-basiertes Icon ein.\nDas Icon wird aus einer SVG-SpriteMap bezogen.\n\n```hbs\n{{> base/image/icon\n    _icon="..."\n    _addClass="..."\n    _areHidden=[false|true*]\n    _iconTitle=""\n    _iconDesc=""\n    _iconmap=\n\n    }}\n```\n\n`_icon`         Name des Icons, das dargestellt werden soll. Entspricht der ID in der SVG-SpriteMap.\n                Diese ergibt sich durch den Dateinamen des ursprünglichen SVG-Icons.\n                *!!! Ohne Angabe eines Icon-Namens wird kein Markup erzeugt !!!*<br>\n`_addClass`     Möglichkeit zur Angabe einer zusätzlichen CSS-Klasse. `icon` ist Standard.<br>\n`_ariaHidden`   default true\n`_iconTitle`    Title Element für SVG inklusive Aria Verknüpfung\n`_iconDesc`     Description für SVG inklusive Aria Verknüpfung. Ohne iconTitle wird iconDesc nicht ausgespielt\n`_iconmap`      Benennt das Unterverzeichnis, unter dem nach der SVG-SpriteMap gesucht wird.\n                Die SVG-SpriteMap hat immer den Namen "svgmap.min.svg".\n                Default ist `icons` (entspricht dem Standard-Icon-Set)<br>\n`_overlayIcon`  Erlaubt die Angabe eines zweiten Icon-Names, der über das erste gelegt wird.\n                Es wird davon ausgegangen, das das Overlay sich in der gleichen SVG-SpriteMap befindet.<br>\n\nBeispielaufruf:\n```hbs\n{{> base/image/icon _icon="arrow-up"}}\n```\n\nTODOs zu einem späteren Zeitpunkt:\n\nErklärung / Hinweise / Best Practices für "Accessible SVG":\n- http://www.sitepoint.com/tips-accessible-svg/\n- http://www.paciellogroup.com/blog/2013/12/using-aria-enhance-svg-accessibility/\n\n--}}\n{{#if _icon}}\n<svg class="sb-icon {{~#if _addClass }} {{_addClass}}{{/if}} {{#if _webview}} -webview{{/if}}" role="presentation" aria-hidden="{{defaultIfEmpty _ariaHidden true}}"\n{{# if brand}} data-brand="{{brand}}"{{/if}}\n        {{~#if _iconTitle }} {{changeRandom~}}\n            aria-labelledby="iconTitle--{{getRandom}}"\n            {{~#if _iconDesc }} aria-describedby="iconDesc--{{getRandom}}"{{~/if~}}\n        {{~/if~}}>\n\n    {{~#if _iconTitle ~}}\n        <title id="iconTitle--{{getRandom}}">{{_iconTitle}}</title>\n        {{~#if _iconDesc ~}}\n            <description id="iconDesc--{{getRandom}}">{{_iconDesc}}</description>\n        {{~/if~}}\n    {{~/if~}}\n\n    {{~#if _iconText ~}}\n        <g>\n            <svg>\n    {{~/if~}}\n\n        <use xlink:href="{{resourceUrl (replaceTokens "assets/base/icons/{0}/svgmap.min.svg" (defaultIfEmpty _iconmap "icons") ) _brand=(if this.brand this.brand)}}#{{_icon}}"></use>\n        {{#if _overlayIcon }}\n            <use xlink:href="{{resourceUrl (replaceTokens "assets/base/icons/{0}/svgmap.min.svg" (defaultIfEmpty _iconmap "icons") ) _brand=(if this.brand this.brand)}}#{{_overlayIcon}}"></use>\n        {{/if}}\n    {{~#if _iconText ~}}\n            </svg>\n        </g>\n        <text dy="0.35em" y="50%" x="50%">{{_iconText}}</text>\n    {{~/if~}}\n</svg>\n{{~/if}}'
@@ -38,19 +38,19 @@ module.exports['components/site_header/anchor_navigation/anchor_navigation.hbs']
 module.exports['components/site_header/anchor_navigation/featurebox_anchor.hbs'] = '{{#with this.featureBox}}\n<li><a href="#featureBox" class="hidden">{{loca "feature_box_anchor"}}</a></li>\n{{/with}}'
 module.exports['components/site_header/brand_navigation/brand_navigation.hbs'] = '<div x-data="slider()"\n        x-init="checkIfScrollable($refs.container)"\n        @resize.window="checkIfScrollable($refs.container)"\n        class="sb-brand-navigation lg:container w-full md:px-5 lg:px-10 px-3.5 h-10 lg:h-8">\n\n    <div class="flex justify-center text-xs list-none text-grey-scorpion ">\n\n        <template x-if="isScrollable">\n            <div>\n                <button class="absolute left-0 w-12 h-full pt-1 arrow-left-background disabled:hidden" @click="prev($refs.container)" :disabled="!arrowLeftDisplay" aria-label="nach links scrollen">\n                    {{> components/base/image/icon _icon="arrow-left" _iconmap="icons"  _addClass="pb-1 mr-4 inline-block w-3.5 h-3.5 text-blue-congress fill-current"}}\n                </button>\n                <button class="absolute right-0 w-12 h-full pt-1 group arrow-right-background disabled:hidden" @click="next($refs.container)" :disabled="!arrowRightDisplay" aria-label="nach rechts scrollen">\n                    {{> components/base/image/icon _icon="arrow-right" _iconmap="icons"  _addClass="pb-1 ml-4 inline-block w-3.5 h-3.5 text-blue-congress fill-current "}}\n                </button>\n            </div>\n        </template>\n\n        <nav x-ref="container" @scroll="updateIndex($event.target)" class="w-full overflow-hidden overflow-x-scroll leading-10 transition-all duration-300 ease-in-out cursor-pointer hide-scroll-bar max-h-10 align-center">\n            <span id="brandNavHeading" class="hidden">Navigation der Marken des Hessischen Rundfunks</span>\n            {{#with this.brandNavigationItems}}\n                <ul class="flex pl-0.5 pr-3 md:px-0 flex-nowrap lg:mr-0">\n                    {{#each this}}\n                        {{> components/site_header/brand_navigation/brand_navigation_item }}\n                    {{/each}} \n                </ul>\n            {{/with}}\n        </nav>\n\n    </div>\n    \n</div>\n\n<script type="text/javascript">\n\nfunction slider() {\n\n  return {\n      \n    isScrollable:false,\n    arrowLeftDisplay:false,\n    arrowRightDisplay:true,\n\n    arrowsDisplay(e) {\n        e.scrollLeft > 1 ? this.arrowLeftDisplay=true : this.arrowLeftDisplay=false;\n        e.scrollLeft + e.offsetWidth == e.scrollWidth ? this.arrowRightDisplay=false : this.arrowRightDisplay=true;\n    },\n\n    prev(e) {\n      e.scrollLeft -= 200;\n    },\n\n    next(e) {\n     e.scrollLeft += 200;\n    },\n\n    updateIndex(e) {\n        this.arrowsDisplay(e);\n    },\n    \n    checkIfScrollable(e){\n        e.scrollWidth > e.clientWidth ? this.isScrollable=true : this.isScrollable=false;\n        this.arrowsDisplay(e);\n    }\n  };\n}\n\n</script>'
 module.exports['components/site_header/brand_navigation/brand_navigation_item.hbs'] = '<li class="sb-brand-navigation-item{{#if this.selected}} h-10 lg:h-8 font-bold text-blue-congress {{/if}} cursor-pointer inline-block lg:hover:underline active:font-bold active:text-blue-science">   \n   <a class="link-focus-inset leading-10 lg:leading-8 flex-col px-3 {{#if @first }}pl-0 {{/if}}lg:flex-row js-load w-max flex justify-center {{#if this.selected}} -currentBrand {{/if}}" aria-label="{{this.name}}" href="{{resourceUrl "index.html" _site=this.site}}"{{#if this.extern}} target="_blank" rel="noopener noreferrer"{{/if}} data-hr-click-tracking=\'{"settings": [{"type": "uxAction", "secondLevelId": "1", "clickLabel": "Brandnavigation::{{this.text}}-Link geklickt"}]}\'>{{this.text}}</a>\n</li>'
+module.exports['components/site_header/navigation_search/quick_search_button.hbs'] = '<div \n    x-cloak class="sb-quick-search-button flex items-center h-8 md:h-full md:border-r md:border-l md:border-white lg:border-none" \n    :class="$store.searchFieldOpen == true ? \'bg-white mt-2 rounded-t md:mt-0 md:rounded-none\' : \'bg-blue-congress\'"\n>\n    <button  \n        @click="$store.searchFieldOpen = ! $store.searchFieldOpen; dropped = false; $store.serviceNavIsOpen = false; toggleScrolling(!$store.searchFieldOpen)"\n        @click.debounce.100ms="$dispatch(\'burger-close\'); $dispatch(\'search-mobile-click\'); $dispatch(\'close-servicemenu\');"\n        class="h-full text-white cursor-pointer md:px-4 lg:hidden"\n        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\')"\n    >\n        <svg \n            x-show="$store.searchFieldOpen == false"\n            class="h-5 text-white fill-current w-9" \n            xmlns="http://www.w3.org/2000/svg" \n            viewBox="0 0 20 20"\n            role="presentation" \n            x-effect="$el.setAttribute(\'aria-hidden\', $store.searchFieldOpen == true)"\n        >\n            <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>\n        </svg>\n        <svg \n            x-show="$store.searchFieldOpen == true"\n            class="h-6 fill-current w-9 text-blue-congress" \n            xmlns="http://www.w3.org/2000/svg" \n            viewBox="0 0 20 20"\n            x-effect="$el.setAttribute(\'aria-hidden\', $store.searchFieldOpen == false)"\n        >\n            <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>\n        </svg>\n    </button>\n</div>'
+module.exports['components/site_header/navigation_search/quick_search_form.hbs'] = '<form \n    x-data="searchSuggest()"\n    role="search" \n    action="{{resourceUrl "suche/index.nocache"}}" \n    method="get" \n    class="flex w-full sb-quick-search-form md:justify-end lg:h-10"\n>\n    <div \n        class="relative w-full lg:rounded-l" \n        id="search-content"\n        @click.away="active=false; cursorIndex=-1"\n        @keydown.arrow-down="moveDownList()"\n        @keydown.arrow-up="moveUpList()"\n    >   \n        <label for="searchInput--{{nextRandom}}" class="hidden">suchfeld</label>\n        <input \n            @input.debounce="getSuggestionsForInput();cursorIndex=-1"\n            @click="active=true" \n            name="query" \n            x-model="query"\n            placeholder=\'{{loca "search_input_placeholder" }}\' \n            class="w-full px-2 py-2 text-base leading-4 placeholder-opacity-100 border rounded-l rounded-r-none shadow-inner appearance-none lg:border-0 lg:border-none border-blue-congress lg:h-10 placeholder-text-xs placeholder-blue-congress text-blue-congress focus:outline-none"\n            type="text"\n            id="searchInput--{{getRandom}}"\n            autocomplete="off"\n            role="combobox" \n            aria-haspopup="listbox" \n            aria-autocomplete="list" \n            x-effect="$el.setAttribute(\'aria-expanded\', (query.length > 1 && active && suggestions.length > 0))"\n            aria-owns="suggestionlist--{{getRandom}}"\n            aria-controls="suggestionlist--{{getRandom}}"\n        > \n        <div \n            class="relative" \n            x-show="query.length > 1 && active && suggestions.length"\n            x-cloak\n            x-transition:leave="transition ease-in duration-100"\n            x-transition:leave-start="opacity-100"\n            x-transition:leave-end="opacity-0"\n        >\n            <ul \n                role="listbox" \n                id="suggestionlist--{{getRandom}}" \n                aria-label="Suche öffnen"\n                x-effect="$el.setAttribute(\'aria-expanded\', query.length > 1 && active && suggestions.length > 0);$el.setAttribute(\'aria-hidden\', !(query.length > 1 && active && suggestions.length > 0))"\n                class="absolute w-full mt-0.5 bg-white border rounded divide-y shadow-xl top-100"\n                x-ref="list"\n            >\n                \n                <template x-for="(suggestion, index) in suggestions" :key="index">\n                    <li class="first-of-type:border-none">\n                        <a  \n                            x-bind:active="false"\n                            x-bind:href="\'{{resourceUrl "suche/index.nocache"}}?query=\' + suggestion"\n                            x-bind:class="{\'py-1.5 px-2 link-focus-inset text-base flex w-full rounded hover:bg-blue-congress hover:text-white\': true, \'bg-blue-congress text-white\':index==cursorIndex }"\n                        >\n                            <span x-text="suggestion"></span>\n                        </a>\n                    </li>\n                </template>\n                \n            </ul>\n        </div>  \n    </div>\n    <button \n        aria-label=\'{{loca "search_input_aria_submit" }}\' \n        type="submit" \n        class="pl-3 pr-2 rounded-r cursor-pointer link-focus-inset bg-blue-congress lg:bg-white text-blue-congress z-10002"\n    >\n        <svg class="w-6 h-6 text-white fill-current bg-blue-congress lg:fill-current lg:text-blue-congress lg:bg-white" \n             xmlns="http://www.w3.org/2000/svg" \n             viewBox="0 0 20 20"\n             aria-hidden="true"\n        >\n            <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>\n        </svg>\n    </button>\n</form>\n\n<script type="text/javascript">\n\n    function searchSuggest() {\n\n        return {\n            active:true,\n            cursorIndex: -1,\n            query: "",\n            suggestions: [],\n\n            getSuggestionsForInput() {\n\n                suggestionDataUrl = \'{{resourceUrl "suche/index~suggest.jsp"}}\' + \'?suggestions=\' + this.query;\n\n                fetch(suggestionDataUrl)\n\n                    .then((res) =>{  return res.text()})\n\n                    .then((data) => {\n                        data = JSON.parse(data.replace(/&quot;/g, \'"\'))\n                        data.solrSuggestions = this.filterStartwith(data.solrSuggestions, this.query)\n                        this.suggestions= this.filterSortbylength(data.solrSuggestions)\n                    });\n\n            },\n\n            filterStartwith(data, query) {\n               return data.filter(Suggestion => Suggestion.toLowerCase().startsWith(query.toLowerCase().trim()))\n            },\n\n            filterSortbylength(data) {\n               return data.sort((a, b) => a.length - b.length)\n            },\n\n            moveDownList() {\n                    if (this.suggestions.length > 0 && this.cursorIndex < this.suggestions.length - 1) \n                    {\n                        this.cursorIndex++;\n                        this.query = this.suggestions[this.cursorIndex];\n                    }\n            },\n\n            moveUpList() {\n                    if (this.suggestions.length > 0 && this.cursorIndex > 0) \n                    {\n                        this.cursorIndex--;\n                        this.query = this.suggestions[this.cursorIndex];\n                    }\n            },\n\n        };\n\n    }\n\n</script>'
 module.exports['components/site_header/navigation_flyout/navigation_flyout.hbs'] = '{{#with this.subNavigation}}\n    <div {{#unless ../this.selected}}x-cloak{{/unless}}\n        x-data="flyoutHandler" \n        x-ref="{{getRandom}}"\n        id="flyout-{{getRandom}}" \n        @resize.window.debounce="setFlyoutAnimationStyle();"\n        {{#if this.showAsFlyout}} x-show="dropped"  {{else}} {{#if ../this.selected}} x-show="$screen(\'lg\') ? true : dropped" {{else}} x-show="dropped" {{/if}} {{/if}}\n        {{#if ../_isSectionNav}} x-init="sectionNavFlyoutWatcher()"  :class ="shouldFlyoutBeHidden() ? \'hidden\' : \'\'" {{/if}}  \n        \n        class="sb-navigation-flyout bg-white md:filter md:drop-shadow-md lg:absolute  \n                {{#if ../_isSectionNav}} relative md:top-auto md:left-auto lg:mt-10 w-full transition-all duration-500 ease-in-out\n                    {{#unless this.showAsFlyout}}\n                        {{#if ../this.selected}}\n                            isSelectedAndOpen  lg:ml-0 z-10000 lg:border-b lg:border-blue-congress lg:filter-none lg:left-0 flex justify-center\n                        {{else}} z-10002 lg:left-auto lg:w-auto {{/if}}\n                    {{else}} z-10002 lg:left-auto lg:w-auto {{/unless}}\n                {{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 lg:pl-6 divide-y divide-gray-200 tablet:w-half-screen tablet:ml-half-screen tablet:right-0 tablet:left-auto {{/if}}\n                {{#if this.showAsFlyout}} lg:rounded-b lg:pl-4{{/if}}" \n\n        aria-labelledby="flyout-{{getRandom}}-1" \n        {{#if this.showAsFlyout}}\n            x-effect="$el.setAttribute(\'aria-expanded\', dropped); $el.setAttribute(\'aria-hidden\', !dropped)"\n        {{else}}\n            {{#if ../this.selected}} \n                x-effect="$el.setAttribute(\'aria-expanded\', $screen(\'lg\') || dropped); $el.setAttribute(\'aria-hidden\', !($screen(\'lg\') || dropped))"\n            {{else}}  \n                x-effect="$el.setAttribute(\'aria-expanded\', dropped); $el.setAttribute(\'aria-hidden\', !dropped)"\n            {{/if}} \n        {{/if}}    \n    >\n        {{#unless ../this.isCluster ~}}\n            {{#unless ../_isSectionNav}}\n                <div class="w-full">\n                    <div class="flex 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-blue-congress ">              \n                        <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"}]}\' >\n                            {{../this.flyoutStartLinkText}}\n                        </a>      \n                    </div>          \n                </div>\n            {{/unless}}\n        {{/unless}}\n        \n        <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}}">\n            {{#if this.showAsFlyout}}\n                {{#each this.columns}}\n                    {{> components/site_header/navigation_flyout/navigation_flyout_column count=../this.columnCount navtype=../../_navigationType _parent=../../_parent _flyout=true~}}\n                {{/each}}\n            {{else}}\n                {{#with this.items}}\n                    {{> components/site_header/navigation_flyout/navigation_flyout_column selected=../../this.selected navtype=../../_navigationType _parent=../../_parent _flyout=false ~}}\n                {{/with}}\n            {{/if}}\n        </div>\n</div>\n{{/with}}'
 module.exports['components/site_header/navigation_flyout/navigation_flyout_column.hbs'] = '<ul class="{{inline-switch count \'["1","2"]\' \'["md:w-1/1", "md:w-1/1 lg:w-1/2"]\'}} {{inline-switch navtype \'["ServiceNavigation","RubrikNavigation"]\' \'["border-b border-gray-200 md:border-0","border-0"]\'}} lg:even:pl-4 lg:odd:pr-4 {{#if selected}} lg:container lg:flex lg:h-9 {{/if}} ">\n    {{~#each this ~}} \n        {{~#if this.title~}}\n            {{> components/site_header/navigation_flyout/navigation_flyout_item _parentselected=../selected _fromNav=../navtype _flyout=../_flyout _parent=../_parent ~}}\n        {{~/if~}}       \n    {{~/each~}}\n    \n</ul>'
 module.exports['components/site_header/navigation_flyout/navigation_flyout_item.hbs'] = '<li :class="dropped ? \'h-auto\' : \'h-10\'"  \n    class="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 lg:last:border-0 lg:border-0 text-blue-congress justify-start hover:underline">\n    {{#decorator \'components/base/link\' _css=(inline-switch _fromNav \'["RubrikNavigation","ServiceNavigation"]\' \'["link-focus-inset py-2 w-full","link-focus py-2 md:pl-0 lg:pl-0 lg:pr-0 break-words w-full"]\') _doNavigationTracking="true" _clickLabelType=_fromNav _clickLabelPrefix1=_parent clickLabelPrefix2=this.link.content.text }}\n        {{this.text}}      \n        {{~#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}}\n    {{/decorator}}  \n</li>'
 module.exports['components/site_header/section_navigation/section_navigation.hbs'] = '<div \n    id="sectionNav"\n    class="w-full px-0 mt-10 sb-section-navigation md:mt-0 lg:px-10 lg:container bg-blue-congress" \n    x-effect="$el.setAttribute(\'aria-expanded\',  $store.burgeropen || $screen(\'lg\')); $el.setAttribute(\'aria-hidden\', ! ($store.burgeropen || $screen(\'lg\')))"\n>\n    <div class="flex content-start mb-0">\n        <div class="flex w-full">\n            <span id="sectionNavHeadline" class="hidden">Bereichsnavigation</span>\n            {{#with this.sectionNavigationSSILinks}}\n                <ul class="flex flex-col items-center w-full text-left text-white list-none lg:flex-row lg:h-auto lg:mt-1">\n                    {{#each this}}   \n                        {{#if (isStorybook)}}  \n                            {{> components/site_header/section_navigation/section_navigation_item }}   \n                        {{else}}\n                            {{{this}}}\n                        {{/if}}\n                    {{/each}} \n                </ul>\n            {{/with}}\n        </div>\n    </div>\n</div> '
 module.exports['components/site_header/section_navigation/section_navigation_item.hbs'] = '{{#each this.navigationItems}}\n    <li x-data="dropdown"\n        @click.outside="dropped = false" \n        @close-servicemenu.window="dropped = false" \n        :class="dropped ? \'border-b-0 lg:bg-white lg:text-blue-congress h-auto\' : \'h-10 lg:hover:underline\'" \n        class="flex flex-wrap justify-start w-full text-white list-none border-b border-white sb-section-navigation-item first:lg:-ml-4 md:pl-0 lg:first:pl-0 first:border-t lg:first:border-t-0 first:font-normal last:border-b-0 lg:border-0 lg:w-auto bg-blue-congress lg:rounded-t">   \n        {{#if this.isCluster ~}}\n{{!-- Gilt z.B. für REGIONEN:  --}}        \n            <button id="button-{{nextRandom}}-1" \n                @click.debounce.100ms="toggle()" \n                :class="dropped ? \'first:font-bold lg:first:font-normal lg:underline\' : \'first:font-normal\'"\n                class="{{#if this.selected}}-currentSection lg:justify-center {{/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 {{#if this.selected}} font-bold{{/if}}" \n                x-effect="$el.setAttribute(\'aria-expanded\', dropped);$el.setAttribute(\'tabindex\',  $store.burgeropen || $screen(\'lg\') ? \'0\' : \'-1\')"\n                aria-owns="flyout-{{getRandom}}" \n                aria-controls="flyout-{{getRandom}}" \n                data-hr-click-tracking=\'{"settings": [{"type": "uxAction", "secondLevelId": "1", "clickLabel": "Rubriknavigation::{{this.text}}-Toggle-Link geklickt"}]}\'>\n\n        {{~else ~}}\n\n            {{#if this.subNavigation}}\n{{!-- Gilt z.B. für POLITIK:  --}}\n                <a href="{{resourceUrl this.url}}" \n                    id="flyout-{{nextRandom}}-1"\n                    \n                    :class="dropped ? \'font-bold\' : \'\'"\n                    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}}"\n                    {{#if this.labelText}} aria-label="{{this.labelText}}"{{/if}} \n                    aria-haspopup="true" \n                    x-effect="$el.setAttribute(\'aria-expanded\', dropped || $screen(\'lg\'));$el.setAttribute(\'tabindex\',  $store.burgeropen || $screen(\'lg\') ? \'0\' : \'-1\')"\n                    aria-owns="flyout-{{getRandom}}"\n                    aria-controls="flyout-{{getRandom}}"\n                    data-hr-click-tracking=\'{"settings": [{"type": "uxAction", "secondLevelId": "1", "clickLabel": "Rubriknavigation::{{this.text}}-Link geklickt"}]}\'>           \n            {{~else ~}} \n{{!-- Gilt für START/GESELLSCHAFT/WIRTSCHAFT usw:  --}}\n                <a href="{{resourceUrl this.url}}" \n                    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}}" \n                    {{#if this.labelText}} aria-label="{{this.labelText}}"{{/if}} \n                    data-hr-click-tracking=\'{"settings": [{"type": "uxAction", "secondLevelId": "1", "clickLabel": "Rubriknavigation::{{this.text}}-Link geklickt"}]}\'\n                    x-effect="$el.setAttribute(\'tabindex\',  $store.burgeropen || $screen(\'lg\') ? \'0\' : \'-1\')"\n                >\n            {{~/if}}\n\n        {{~/if }}\n\n        {{#if this.subNavigation}}\n\n            {{~this.text~}}\n            \n            {{#if this.subNavigation.showAsFlyout ~}}\n                \n                    <div class="flex items-center justify-center w-10 h-10 leading-4 lg:w-auto lg:border-0 lg:pl-1">\n                        <div class="flex items-center justify-center" :class="dropped ? \'transform rotate-180\':\'\'">\n                            {{> components/base/image/icon _icon="arrow-down" _iconmap="icons" _addClass="w-3 h-2 fill-current"}}\n                        </div>\n                    </div>\n               \n            {{/if}}\n\n        {{else}}\n\n            {{~this.text~}}\n\n        {{~/if}}\n\n        {{#if this.isCluster}}\n\n            </button>\n\n        {{else}}\n\n            </a>\n\n            {{#if this.subNavigation}}\n\n                <button \n                    @click.debounce.100ms="toggle()" \n                    id="button-{{getRandom}}-1" \n                    class="flex items-center justify-center w-10 h-10 leading-4 border-l border-white js-load lg:hidden" \n                    aria-haspopup="true"  \n                    x-effect="$el.setAttribute(\'aria-expanded\', dropped);$el.setAttribute(\'tabindex\',  $store.burgeropen ? \'0\' : \'-1\')"\n                    aria-owns="flyout-{{getRandom}}" \n                    aria-controls="flyout-{{getRandom}}" \n                    aria-labelledby="flyout-{{getRandom}}-1" \n                    data-hr-click-tracking=\'{"settings": [{"type": "uxAction", "secondLevelId": "1", "clickLabel": "Rubriknavigation::{{this.text}}-Toggle-Link geklickt"}]}\'>\n\n                    <span class="hidden">{{~this.text~}}</span>\n                    \n                    <div class="flex items-center justify-center lg:ml-2 lg:relative lg:right-0" :class="dropped ? \'transform rotate-180 \':\'\'">\n                        {{> components/base/image/icon _icon="arrow-down" _iconmap="icons" _addClass="w-4 h-2 fill-current"}}\n                    </div>\n                </button>\n\n            {{/if}}\n\n        {{/if}}\n        \n        {{> components/site_header/navigation_flyout/navigation_flyout _isSectionNav=true _navigationType="RubrikNavigation" _parent=this.text }}\n\n    </li>\n{{/each}}'
+module.exports['components/site_header/service_navigation/service_list.hbs'] = '<div \n    id="serviceList"\n    @click.outside="$store.serviceNavIsOpen = false; toggleScrolling(!$store.searchFieldOpen && !$store.burgeropen)"\n    x-ref="serviceList"\n    :class="shouldServiceIconsBeHidden() ? \'-mt-40\' : \'\'"\n    class="absolute left-0 flex justify-center flex-initial w-full h-10 max-w-full align-top duration-500 ease-in-out border-t border-white sb-service-list transition-margin-top -z-1000 md:z-10000 md:h-12 top-10 bg-blue-congress 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 "\n>\n    {{#with this.serviceNavigationSSILinks}}\n        <ul class="flex justify-around w-full h-full -itemCount-{{ count }} lg:w-auto lg:justify-end lg:pt-1">\n            {{#each this}}        \n                {{> components/base/loadSSI _templatePath=\'components/site_header/service_navigation/service_navigation_item\' }}               \n            {{/each}} \n        </ul>\n    {{/with}}\n</div>'
+module.exports['components/site_header/service_navigation/service_navigation_item.hbs'] = '{{#each this.navigationItems}}\n    <li class="sb-service-navigation-item {{inline-switch this.id \'["weather","warnung","traffic","video-podcast"]\' \'["-weather", "-warnung", "-traffic", "-video-podcast"]\' }} 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-white" >\n        {{#if this.subNavigation}} \n            <button \n                id="{{nextRandom}}" \n                @click.debounce.100ms="toggleServiceNav()" \n                @click.outside="dropped = false;"\n                @close-servicemenu.window="dropped = false; $store.serviceNavIsOpen = false"\n\n                x-data="dropdown"\n                id="{{getRandom}}"\n                \n                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 link-focus-inset-white {{#if this.selected}}-currentService{{/if}}"\n\n                :class="dropped ? \'bg-white fill-current text-blue-congress lg:border-0 lg:underline\' : \'\'" \n\n                aria-owns="flyout-{{getRandom}}" \n                aria-controls="flyout-{{getRandom}}"\n                x-effect="$el.setAttribute(\'aria-expanded\', dropped);$el.setAttribute(\'aria-label\', dropped ? \'{{this.text}}-Menü schließen\' : \'{{this.text}}-Menü öffnen\')"\n                data-hr-click-tracking=\'{"settings": [{"type": "uxAction", "secondLevelId": "1", "clickLabel": "Servicenavigation::{{this.text}}-Link geklickt"}]}\'\n            >\n              \n        {{else}}\n\n            {{#if this.extern}}\n                <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:rounded-t link-focus-inset-white js-load" id="flyout-{{nextRandom}}-1" data-hr-click-tracking=\'{"settings": [{"type": "uxAction", "secondLevelId": "1", "clickLabel": "Servicenavigation::{{this.text}}-Link geklickt"}]}\'>\n            {{else}}\n                <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": "uxAction", "secondLevelId": "1", "clickLabel": "Servicenavigation::{{this.text}}-Link geklickt"}]}\'>\n            {{/if}}\n\n        {{/if}}\n\n            <div class="w-7 md:w-8 h-7 md:h-8" >\n                {{> components/base/image/icon _icon=this.icon _iconmap="icons" _addClass="w-full h-full"}}\n                <span class="sr-only lg:hidden">{{this.text}}</span>\n            </div>\n\n            <div :class="dropped ? \'text-blue-congress fill-current\' : \'text-white fill-white\'" class="relative flex-row items-center justify-center hidden pt-px text-white lg:flex z-10002">\n                <div class="flex" >\n                    <span class="flex text-xs leading-4 whitespace-nowrap">\n                        {{text}} \n                    </span>\n                    {{#if this.subNavigation}} \n                        <div class="flex lg:pl-1">\n                            <div class="flex items-center justify-center" :class="dropped ? \'transform rotate-180\':\'\' ">\n                                {{> components/base/image/icon _icon="arrow-down" _iconmap="icons" _addClass="w-3 h-2 fill-current"}}\n                            </div>\n                        </div>\n                    {{/if}}   \n                </div>\n            </div>  \n        {{#if this.subNavigation}}       \n            {{> components/site_header/navigation_flyout/navigation_flyout _isSectionNav=false  _navigationType="ServiceNavigation" _parent=this.text }}\n            </button>\n        {{else}}       \n            </a>\n        {{/if}}   \n    </li>\n{{/each}}'
 module.exports['components/teaser/cluster/teaser_cluster.hbs'] = '<article class="mx-5 md:mx-0  col-span-12 grid bg-[#dce8f0] rounded-tl-3xl rounded-br-3xl {{~inline-switch this.teaserSize \'["25","33","50"]\' \'[" md:col-span-3"," md:col-span-4"," md:col-span-6",""]\'}} ">\n    <div class="">\n            <h2 class="flex items-center px-5 py-6 font-bold font-headingSerif text-blue-congress">\n                {{#if this.teaserLogo}}\n                    <span>\n                        {{> components/base/image/icon _icon=this.teaserLogo _iconmap="logo" _addClass=(inline-switch this.teaserLogo \'["hessenschau_de"]\' \'["fill-[#005293] w-10 md:w-12 h-10 md:h-12","fill-[#005293] w-40 lg:w-52 h-8 md:h-12"]\')}}\n                    </span>\n                {{/if}}\n                {{#if this.title}}\n                    <span class="text-lg md:text-2xl border-blue-congress {{#if this.teaserLogo}} pl-3 ml-3 border-l-2 border-solid {{/if}}">{{this.title}}</span>\n                {{/if}}\n            </h2>\n            {{> components/teaser/cluster/teaser_cluster_list _ordered=this.isOrdered}} \n    </div>\n    {{~#with this.headlineListOverview}}\n        {{~#if this.link~}}\n            <div class="flex mx-5 py-11 {{~inline-switch ../this.teaserSize \'["100"]\' \'[" justify-center md:justify-end"," justify-center"]\'}}">\n                {{~> components/button/button_pseudo  _color="blue" _linkTitle=this.title~}}\n            </div>\n        {{~/if~}}\n    {{/with~}}\n</article>\n\n'
 module.exports['components/teaser/cluster/teaser_cluster_byline.hbs'] = '\n<p class="mt-2.5 text-xs text-grey-scorpion font-headingSerif {{#if _ordered}} pl-8 {{/if}}">\n    {{!--Teaser-Info--}}\n    {{#with this.teaserInfo}}\n        {{#if this.showTeaserInfo~}}\n           {{~#if this.showTeaserInfoSection}}\n              <span class="uppercase">\n                 {{../this.documentSection~}}\n              </span>\n              <span class="mx-px last-of-type:hidden">|</span>\n           {{/if}}\n           {{~#if this.showTeaserInfoDate}}\n              {{~#with ../this.teaserDate}}\n                 <time datetime="{{this.htmlDateTime}}">{{this.date}}</time>\n              {{/with~}}\n              <span class="mx-px last-of-type:hidden">|</span>\n           {{else}}\n               {{~#if this.showTeaserInfoDateTime}}\n                  {{~#with ../this.teaserDate}}\n                      <time datetime="{{this.htmlDateTime}}">{{loca "date_simple_at" this.dateSeparatorTime}}</time>\n                  {{/with~}}\n                  <span class="mx-px last-of-type:hidden">|</span>\n               {{/if~}}\n           {{/if~}}\n        {{/if}}\n    {{/with}}\n\n    {{!--Profiles--}}\n    {{#if this.showProfileInfoAsByline}}\n        {{#if this.profiles}}\n           <span>{{this.profiles}}</span>\n           <span class="mx-px last-of-type:hidden">|</span>\n        {{/if}}\n    {{/if}}\n</p>'
 module.exports['components/teaser/cluster/teaser_cluster_item.hbs'] = '\n{{#decorator \'components/base/link\' _css="group" _doTracking=(if this.doTracking \'true\') _clickLabelPrefix1="clusterTeaserLink" _clickLabelPrefix2="Link" }} \n    {{> components/teaser/components/teaser_heading\n        _headlineTag="h1"\n        _label=this.label\n        _size=_size\n        _title=this.title\n        _teaserType="cluster"\n        _ordered=_ordered\n        _titleBlue=\'true\' \n        _firstItem=_firstItem}}        \n                {{/decorator}}\n{{> components/teaser/cluster/teaser_cluster_byline}}\n                \n'
 module.exports['components/teaser/cluster/teaser_cluster_list.hbs'] = '<div class="{{~#if this.showFirstImageOrGenreImage}}{{~inline-switch this.teaserSize \'["100"]\' \'[" md:flex md:flex-row"]\'}}{{~/if~}}">\n    {{~#if this.showGenreImage}}\n        <div class="px-0 pb-5 {{~inline-switch this.teaserSize \'["100"]\' \'[" md:pl-5 md:basis-1/2 lg:basis-1/3 md:ar-1-1"]\'}}">\n            {{~> components/base/image/responsive_image this.genreImage type=this.teaserType variant=this.imageVariant addClass=this.aspectRatio _addClassImg="ar__content" ~}}\n        </div>\n    {{~/if~}}\n    {{~#if this.showFirstImage}}\n        {{~#with this.firstEntry~}}\n            {{~#if this.teaserImage}}\n                <div class="px-0 pb-5 {{~inline-switch ../this.teaserSize \'["100"]\' \'[" md:pl-5 md:basis-1/2 lg:basis-1/3"]\'}}">   \n                    {{~> components/base/image/responsive_image this.teaserImage type=../this.teaserType variant=../this.imageVariant addClass=../this.aspectRatio _addClassImg="ar__content pb-4" ~}}\n                    <div class="mx-5 {{~inline-switch ../this.teaserSize \'["100"]\' \'[" md:mx-0"]\'}}">\n                        {{> components/teaser/cluster/teaser_cluster_item _size=../this.teaserSize _ordered=../this.isOrdered _firstItem=true}}\n                    </div> \n                </div>   \n            {{/if~}}\n        {{~/with~}}\n    {{/if~}}\n    {{~#with this.clusterTeaserItems}}\n        {{~#if ../this.isOrdered}}<ol class="mx-5 list-none divide-y divide-white divide-solid counter-reset border-t border-white {{~#if ../this.showGenreImage}}{{~inline-switch ../this.teaserSize \'["100"]\' \'[" md:-pt-5 md:border-none"]\'}}{{/if~}}">{{else}}<ul class="mx-5 divide-y divide-white divide-solid border-t border-white {{~#if ../this.showGenreImage}}{{~inline-switch ../this.teaserSize \'["100"]\' \'[" md:-pt-5 md:border-none"]\'}}{{/if~}}">{{/if}}\n            {{~#each this~}}\n                <li class="{{~#if ../../this.isOrdered}} -ordered {{/if}} py-5 {{#if ../../this.headlineListOverview.link}} last-of-type:pb-0{{/if~}} {{~#if ../../this.showGenreImage}}{{~inline-switch ../../this.teaserSize \'["100"]\' \'[" md:first-of-type:pt-0"]\'}}{{/if~}}">\n                    {{> components/teaser/cluster/teaser_cluster_item _size=../this.teaserSize _ordered=../../this.isOrdered }} \n                </li>\n            {{~/each}}\n        {{~#if ../this.isOrdered}}</ol>{{else}}</ul>{{/if~}}\n    {{/with~}}\n</div>'
-module.exports['components/site_header/navigation_search/quick_search_button.hbs'] = '<div \n    x-cloak class="sb-quick-search-button flex items-center h-8 md:h-full md:border-r md:border-l md:border-white lg:border-none" \n    :class="$store.searchFieldOpen == true ? \'bg-white mt-2 rounded-t md:mt-0 md:rounded-none\' : \'bg-blue-congress\'"\n>\n    <button  \n        @click="$store.searchFieldOpen = ! $store.searchFieldOpen; dropped = false; $store.serviceNavIsOpen = false; toggleScrolling(!$store.searchFieldOpen)"\n        @click.debounce.100ms="$dispatch(\'burger-close\'); $dispatch(\'search-mobile-click\'); $dispatch(\'close-servicemenu\');"\n        class="h-full text-white cursor-pointer md:px-4 lg:hidden"\n        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\')"\n    >\n        <svg \n            x-show="$store.searchFieldOpen == false"\n            class="h-5 text-white fill-current w-9" \n            xmlns="http://www.w3.org/2000/svg" \n            viewBox="0 0 20 20"\n            role="presentation" \n            x-effect="$el.setAttribute(\'aria-hidden\', $store.searchFieldOpen == true)"\n        >\n            <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>\n        </svg>\n        <svg \n            x-show="$store.searchFieldOpen == true"\n            class="h-6 fill-current w-9 text-blue-congress" \n            xmlns="http://www.w3.org/2000/svg" \n            viewBox="0 0 20 20"\n            x-effect="$el.setAttribute(\'aria-hidden\', $store.searchFieldOpen == false)"\n        >\n            <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>\n        </svg>\n    </button>\n</div>'
-module.exports['components/site_header/navigation_search/quick_search_form.hbs'] = '<form \n    x-data="searchSuggest()"\n    role="search" \n    action="{{resourceUrl "suche/index.nocache"}}" \n    method="get" \n    class="flex w-full sb-quick-search-form md:justify-end lg:h-10"\n>\n    <div \n        class="relative w-full lg:rounded-l" \n        id="search-content"\n        @click.away="active=false; cursorIndex=-1"\n        @keydown.arrow-down="moveDownList()"\n        @keydown.arrow-up="moveUpList()"\n    >   \n        <label for="searchInput--{{nextRandom}}" class="hidden">suchfeld</label>\n        <input \n            @input.debounce="getSuggestionsForInput();cursorIndex=-1"\n            @click="active=true" \n            name="query" \n            x-model="query"\n            placeholder=\'{{loca "search_input_placeholder" }}\' \n            class="w-full px-2 py-2 text-base leading-4 placeholder-opacity-100 border rounded-l rounded-r-none shadow-inner appearance-none lg:border-0 lg:border-none border-blue-congress lg:h-10 placeholder-text-xs placeholder-blue-congress text-blue-congress focus:outline-none"\n            type="text"\n            id="searchInput--{{getRandom}}"\n            autocomplete="off"\n            role="combobox" \n            aria-haspopup="listbox" \n            aria-autocomplete="list" \n            x-effect="$el.setAttribute(\'aria-expanded\', (query.length > 1 && active && suggestions.length > 0))"\n            aria-owns="suggestionlist--{{getRandom}}"\n            aria-controls="suggestionlist--{{getRandom}}"\n        > \n        <div \n            class="relative" \n            x-show="query.length > 1 && active && suggestions.length"\n            x-cloak\n            x-transition:leave="transition ease-in duration-100"\n            x-transition:leave-start="opacity-100"\n            x-transition:leave-end="opacity-0"\n        >\n            <ul \n                role="listbox" \n                id="suggestionlist--{{getRandom}}" \n                aria-label="Suche öffnen"\n                x-effect="$el.setAttribute(\'aria-expanded\', query.length > 1 && active && suggestions.length > 0);$el.setAttribute(\'aria-hidden\', !(query.length > 1 && active && suggestions.length > 0))"\n                class="absolute w-full mt-0.5 bg-white border rounded divide-y shadow-xl top-100"\n                x-ref="list"\n            >\n                \n                <template x-for="(suggestion, index) in suggestions" :key="index">\n                    <li class="first-of-type:border-none">\n                        <a  \n                            x-bind:active="false"\n                            x-bind:href="\'{{resourceUrl "suche/index.nocache"}}?query=\' + suggestion"\n                            x-bind:class="{\'py-1.5 px-2 link-focus-inset text-base flex w-full rounded hover:bg-blue-congress hover:text-white\': true, \'bg-blue-congress text-white\':index==cursorIndex }"\n                        >\n                            <span x-text="suggestion"></span>\n                        </a>\n                    </li>\n                </template>\n                \n            </ul>\n        </div>  \n    </div>\n    <button \n        aria-label=\'{{loca "search_input_aria_submit" }}\' \n        type="submit" \n        class="pl-3 pr-2 rounded-r cursor-pointer link-focus-inset bg-blue-congress lg:bg-white text-blue-congress z-10002"\n    >\n        <svg class="w-6 h-6 text-white fill-current bg-blue-congress lg:fill-current lg:text-blue-congress lg:bg-white" \n             xmlns="http://www.w3.org/2000/svg" \n             viewBox="0 0 20 20"\n             aria-hidden="true"\n        >\n            <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>\n        </svg>\n    </button>\n</form>\n\n<script type="text/javascript">\n\n    function searchSuggest() {\n\n        return {\n            active:true,\n            cursorIndex: -1,\n            query: "",\n            suggestions: [],\n\n            getSuggestionsForInput() {\n\n                suggestionDataUrl = \'{{resourceUrl "suche/index~suggest.jsp"}}\' + \'?suggestions=\' + this.query;\n\n                fetch(suggestionDataUrl)\n\n                    .then((res) =>{  return res.text()})\n\n                    .then((data) => {\n                        data = JSON.parse(data.replace(/&quot;/g, \'"\'))\n                        data.solrSuggestions = this.filterStartwith(data.solrSuggestions, this.query)\n                        this.suggestions= this.filterSortbylength(data.solrSuggestions)\n                    });\n\n            },\n\n            filterStartwith(data, query) {\n               return data.filter(Suggestion => Suggestion.toLowerCase().startsWith(query.toLowerCase().trim()))\n            },\n\n            filterSortbylength(data) {\n               return data.sort((a, b) => a.length - b.length)\n            },\n\n            moveDownList() {\n                    if (this.suggestions.length > 0 && this.cursorIndex < this.suggestions.length - 1) \n                    {\n                        this.cursorIndex++;\n                        this.query = this.suggestions[this.cursorIndex];\n                    }\n            },\n\n            moveUpList() {\n                    if (this.suggestions.length > 0 && this.cursorIndex > 0) \n                    {\n                        this.cursorIndex--;\n                        this.query = this.suggestions[this.cursorIndex];\n                    }\n            },\n\n        };\n\n    }\n\n</script>'
-module.exports['components/site_header/service_navigation/service_list.hbs'] = '<div \n    id="serviceList"\n    @click.outside="$store.serviceNavIsOpen = false; toggleScrolling(!$store.searchFieldOpen && !$store.burgeropen)"\n    x-ref="serviceList"\n    :class="shouldServiceIconsBeHidden() ? \'-mt-40\' : \'\'"\n    class="absolute left-0 flex justify-center flex-initial w-full h-10 max-w-full align-top duration-500 ease-in-out border-t border-white sb-service-list transition-margin-top -z-1000 md:z-10000 md:h-12 top-10 bg-blue-congress 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 "\n>\n    {{#with this.serviceNavigationSSILinks}}\n        <ul class="flex justify-around w-full h-full -itemCount-{{ count }} lg:w-auto lg:justify-end lg:pt-1">\n            {{#each this}}        \n                {{> components/base/loadSSI _templatePath=\'components/site_header/service_navigation/service_navigation_item\' }}               \n            {{/each}} \n        </ul>\n    {{/with}}\n</div>'
-module.exports['components/site_header/service_navigation/service_navigation_item.hbs'] = '{{#each this.navigationItems}}\n    <li class="sb-service-navigation-item {{inline-switch this.id \'["weather","warnung","traffic","video-podcast"]\' \'["-weather", "-warnung", "-traffic", "-video-podcast"]\' }} 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-white" >\n        {{#if this.subNavigation}} \n            <button \n                id="{{nextRandom}}" \n                @click.debounce.100ms="toggleServiceNav()" \n                @click.outside="dropped = false;"\n                @close-servicemenu.window="dropped = false; $store.serviceNavIsOpen = false"\n\n                x-data="dropdown"\n                id="{{getRandom}}"\n                \n                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 link-focus-inset-white {{#if this.selected}}-currentService{{/if}}"\n\n                :class="dropped ? \'bg-white fill-current text-blue-congress lg:border-0 lg:underline\' : \'\'" \n\n                aria-owns="flyout-{{getRandom}}" \n                aria-controls="flyout-{{getRandom}}"\n                x-effect="$el.setAttribute(\'aria-expanded\', dropped);$el.setAttribute(\'aria-label\', dropped ? \'{{this.text}}-Menü schließen\' : \'{{this.text}}-Menü öffnen\')"\n                data-hr-click-tracking=\'{"settings": [{"type": "uxAction", "secondLevelId": "1", "clickLabel": "Servicenavigation::{{this.text}}-Link geklickt"}]}\'\n            >\n              \n        {{else}}\n\n            {{#if this.extern}}\n                <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:rounded-t link-focus-inset-white js-load" id="flyout-{{nextRandom}}-1" data-hr-click-tracking=\'{"settings": [{"type": "uxAction", "secondLevelId": "1", "clickLabel": "Servicenavigation::{{this.text}}-Link geklickt"}]}\'>\n            {{else}}\n                <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": "uxAction", "secondLevelId": "1", "clickLabel": "Servicenavigation::{{this.text}}-Link geklickt"}]}\'>\n            {{/if}}\n\n        {{/if}}\n\n            <div class="w-7 md:w-8 h-7 md:h-8" >\n                {{> components/base/image/icon _icon=this.icon _iconmap="icons" _addClass="w-full h-full"}}\n                <span class="sr-only lg:hidden">{{this.text}}</span>\n            </div>\n\n            <div :class="dropped ? \'text-blue-congress fill-current\' : \'text-white fill-white\'" class="relative flex-row items-center justify-center hidden pt-px text-white lg:flex z-10002">\n                <div class="flex" >\n                    <span class="flex text-xs leading-4 whitespace-nowrap">\n                        {{text}} \n                    </span>\n                    {{#if this.subNavigation}} \n                        <div class="flex lg:pl-1">\n                            <div class="flex items-center justify-center" :class="dropped ? \'transform rotate-180\':\'\' ">\n                                {{> components/base/image/icon _icon="arrow-down" _iconmap="icons" _addClass="w-3 h-2 fill-current"}}\n                            </div>\n                        </div>\n                    {{/if}}   \n                </div>\n            </div>  \n        {{#if this.subNavigation}}       \n            {{> components/site_header/navigation_flyout/navigation_flyout _isSectionNav=false  _navigationType="ServiceNavigation" _parent=this.text }}\n            </button>\n        {{else}}       \n            </a>\n        {{/if}}   \n    </li>\n{{/each}}'
 module.exports['components/teaser/components/teaser_av_consumption.hbs'] = '{{#with this.teaserLead.avDocument}}\n     {{~#if this.isVideo ~}}\n          {{#with this.toModel.videoElement}}\n               {{~> components/mediaplayer/media_player _cypressHook="js-video-ondemand" _mediaButtonIcon="play_button" _mediaButtonLabel="Video" _isTeaser=true _teaser=../../this _aspectRatio=../../_aspectRatio _teaserSize=../../_teaserSize ~}}\n               {{#if ../../_isMobile1to1~}}  \n                    {{> components/teaser/components/teaser_av_consumption_close_button _playerId=this.ardPlayerConfig.playerId }}\n               {{~/if~}}\n          {{/with}}\n     {{~/if~}}\n     {{~#if this.isAudio ~}}\n          {{#with this.toModel.audioElement}}\n               {{~> components/mediaplayer/media_player _cypressHook="js-audio-ondemand" _mediaButtonIcon="audio_button" _mediaButtonLabel="Audio" _isTeaser=true _teaser=../../this _audioUrl=../this.audioUrl _variant=../this.imageVariant _noDelay=../../_noDelay _aspectRatio=../../_aspectRatio _isMobile1to1=../../_isMobile1to1 _teaserSize=../../_teaserSize~}}                  \n               {{#if ../../_isMobile1to1~}}  \n                    {{> components/teaser/components/teaser_av_consumption_close_button _playerId=this.ardPlayerConfig.playerId }}\n               {{~/if~}}\n          {{/with}}\n     {{~/if~}}\n     {{~#if this.isPodcast ~}}\n          {{#with this.toModel.audioElement}}\n               {{~> components/mediaplayer/media_player _cypressHook="js-audio-ondemand" _mediaButtonIcon="podcast-button" _mediaButtonLabel="Podcast" _isTeaser=true _teaser=../../this _audioUrl=../this.audioUrl _variant=../this.imageVariant _noDelay=../../_noDelay _aspectRatio=../../_aspectRatio _isMobile1to1=../../_isMobile1to1 _teaserSize=../../_teaserSize~}}             \n               {{#if ../../_isMobile1to1~}}  \n                    {{> components/teaser/components/teaser_av_consumption_close_button _playerId=this.ardPlayerConfig.playerId }}\n               {{~/if~}}\n          {{/with}}\n     {{~/if~}}\n     {{~#if this.isAudioEventLivestream ~}}\n          {{#with this.toModel.audioLivestreamElement}}\n               {{~> components/mediaplayer/media_player _cypressHook="js-video-livestream" _mediaButtonIcon="play_button" _mediaButtonLabel="Live" _isLivestream="true" _isTeaser=true _teaser=../../this  _audioUrl=../this.audioUrl _variant=../this.imageVariant _noDelay=../../_noDelay _aspectRatio=../../_aspectRatio _isMobile1to1=../../_isMobile1to1 _teaserSize=../../_teaserSize~}}             \n               {{#if ../../_isMobile1to1~}}  \n                    {{> components/teaser/components/teaser_av_consumption_close_button _playerId=this.ardPlayerConfig.playerId }}\n               {{~/if~}}\n          {{/with}}\n     {{~/if~}}\n     {{~#if this.isLivestream ~}}\n          {{#with this.toModel.videoLivestreamElement}}\n               {{~> components/mediaplayer/media_player _cypressHook="js-video-livestream" _mediaButtonIcon="play_button" _mediaButtonLabel="Live" _isLivestream="true" _isTeaser=true _teaser=../../this  _audioUrl=../this.audioUrl _variant=../this.imageVariant _noDelay=../../_noDelay _aspectRatio=../../_aspectRatio _isMobile1to1=../../_isMobile1to1 _teaserSize=../../_teaserSize ~}}             \n               {{#if ../../_isMobile1to1~}}  \n                    {{> components/teaser/components/teaser_av_consumption_close_button _playerId=this.ardPlayerConfig.playerId }}\n               {{~/if~}}\n          {{/with}}\n     {{~/if~}}\n    \n{{/with}}'
 module.exports['components/teaser/components/teaser_av_consumption_close_button.hbs'] = '{{> components/button/button_transparent _showIcon="true" _title="Mediaplayer schließen" _icon="arrow-up" _iconmap="icons"_addIconClass="w-3 h-3 fill-current" _addClass="md:hidden absolute top-full right-0" _x-show="avStart" _alpineClick=(loca "close_button_alpine_click" _playerId)}}'
 module.exports['components/teaser/components/teaser_body.hbs'] = '<div class="{{~#if this.isMobile1to1}}basis-3/5 md:flex-full{{/if~}}{{#if _outerCssClasses}} {{_outerCssClasses}}{{/if}}">\n    <header class="md:px-0{{#unless this.isMobile1to1}} px-5{{/unless}}">\n        {{#decorator \'components/base/link\' _css="hover:text-toplineColor" _doTracking=(if this.doTracking \'true\') _clickLabelPrefix1=this.teaserSize _clickLabelPrefix2="headlineLink" }} \n            {{> components/teaser/components/teaser_heading \n            _fontVariant=this.headingFontVariant\n            _headlineTag=this.headlineTag \n            _label=this.label \n            _readMore=this.link.readMoreText.readMoreScreenreader \n            _size=this.teaserSize \n            _title=this.title \n            _topline=this.topline \n            _teaserType=this.teaserType\n            _isMobile1to1=this.isMobile1to1}}            \n        {{/decorator}}   \n    </header>\n    <div class="md:px-0{{#unless this.isMobile1to1}} px-5{{/unless}}">\n        {{> components/teaser/components/teaser_text _text=this.shorttext _size=this.teaserSize}}\n        {{> components/teaser/components/teaser_byline}} \n    </div>\n</div>'
@@ -65,6 +65,8 @@ module.exports['components/teaser/components/teaser_title.hbs'] = '<span class=\
 module.exports['components/teaser/components/teaser_title_classes.hbs'] = '{{! \nThis handlebars template is responisible to render the needed classnames for Teaser headlines\nAs we use tailwind css no cascade is used to style components. As Teaser Headline Sizes dependent\non 4 parameters the logic was outsourced to this file.\n\nthe 4 parameters are:\n- teaserType\n- size\n- _isMobile1to1\n- fontVariant\n\n}}\n\n{{~#switch _teaserType~}}\n    {{~#case \'standard-ds\'~}}\n        {{~#if _isMobile1to1~}}\n            {{~inline-switch\n                _size\n                \'["hero","100","25"]\'\n                \'["text-lg md:text-4xl","text-lg md:text-4xl","text-lg","text-lg md:text-2xl"]\'\n            ~}}\n        {{~else~}}\n            {{~inline-switch\n                _size\n                \'["hero","100","25"]\'\n                \'["text-2xl md:text-4xl","text-2xl md:text-4xl","text-lg","text-2xl"]\'\n            ~}}\n        {{~/if~}}\n    {{~/case~}}\n    {{~#case \'tabbox-standard-ds\'~}}\n        {{~#if _isMobile1to1~}}\n            {{~inline-switch\n                _size\n                \'["hero","100","25"]\'\n                \'["text-lg md:text-4xl","text-lg md:text-4xl","text-lg","text-lg md:text-2xl"]\'\n            ~}}\n        {{~else~}}\n            {{~inline-switch\n                _size\n                \'["hero","100","25"]\'\n                \'["text-2xl md:text-4xl","text-2xl md:text-4xl","text-lg","text-2xl"]\'\n            ~}}\n        {{~/if~}}\n    {{~/case~}}\n    {{~#case \'alternative-ds\'~}}\n        {{~inline-switch\n            _size\n            \'["hero","100","50"]\'\n            \'["text-2xl md:text-3xl","text-lg md:text-3xl","text-lg md:text-2xl"]\'\n        ~}}\n    {{~/case~}}\n    {{~#case \'tabbox-alternative-ds\'~}}\n        {{~inline-switch\n            _size\n            \'["hero","100","50"]\'\n            \'["text-2xl md:text-3xl","text-lg md:text-3xl","text-lg md:text-2xl"]\'\n        ~}}\n    {{~/case~}}\n    {{~#case \'poster-ds\'~}}\n        {{~inline-switch _size \'["50","33"]\' \'["text-2xl md:text-4xl","text-2xl"]\'~}}\n    {{~/case~}}\n    {{~#case \'cluster\'~}}\n        {{#if _firstItem}}\n            {{~inline-switch _size \'["100"]\' \'[" text-lg md:text-2xl"," text-lg"]\'}}\n        {{else}}\n            text-lg\n        {{/if}}\n    {{~/case~}}\n    {{~#case \'stage\'~}}\n        {{~inline-switch _size \'["100"]\' \'[" text-2xl md:text-4xl"," text-2xl"]\'}}\n    {{~/case~}}\n{{~/switch~}}\n{{~inline-switch\n    _fontVariant\n    \'["serif", "sans-serif"]\'\n    \'[" font-headingSerif"," font-heading font-bold"," font-headingSerif"]\'\n~}}'
 module.exports['components/teaser/components/teaser_topline.hbs'] = '<span\n    class=\'pt-px block text-base\n        {{inline-switch _teaserType \'["poster-ds"]\' \'["text-white","text-toplineColor"]\'}}{{#if _css}} {{_css}}{{/if}}\n        font-heading\'\n    aria-label=\'{{_readMore}}: {{_text}}\'\n>\n    {{_text}}\n</span>'
 module.exports['components/teaser/content_nav/teaser_content_nav.hbs'] = '<div id="{{nextRandom}}"\n    x-ignore\n    ax-load\n    ax-load-src={{resourceUrl "assets/js/vendor/content_nav.alpine.js"}}\n    x-data="contentNavigationHandler()"\n    class="js-contentNavWrapper col-span-12 flex gap-y-3 gap-x-4 js-load {{inline-switch this.teasersize \'["100","66","50","33","25"]\' \'["flex-col","md:col-span-9 md:flex-row ","md:col-span-6 md:flex-row "," md:col-span-4 md:flex-row "," md:col-span-3 md:flex-row "]\'}}"\n>\n    {{> components/content_nav/content_nav _teasersize=this.teasersize }}           \n</div>'
+module.exports['components/teaser/group_teaser/group_teaser.hbs'] = '{{#>components/grid/grid_group size=this.teaserSize _backgroundColor=this.backgroundColor }} \n        {{~#if this.hasGroupTitle}}\n            <h2 class="text-2xl md:text-4xl col-span-full py-0 font-headingSerif {{#if this.backgroundColor}} text-center{{else}} headline-barrier{{/if}}">\n                {{~#if this.hasLink}}<a class="no-underline hover:underline decoration-1 md:decoration-2 text-blue-science" href="{{this.link.url}}">{{/if~}}\n                    {{this.groupTitle}}\n                {{~#if this.hasLink}}</a>{{/if~}}\n            </h2>\n        {{/if}}  \n        {{~> components/teaser/teaser_logic/teaser_logic ~}}\n{{/components/grid/grid_group}}'
+module.exports['components/teaser/group_teaser/group_teaser_accented.hbs'] = '{{#>components/grid/grid_group size=this.teaserSize _backgroundColor=this.backgroundColor }}\n    \n        <div class="h-auto col-span-12 p-8 mx-4 rounded-tr-none rounded-bl-none bg-blue-accented rounded-3xl">\n\n        {{~#if this.hasGroupTitle}}\n            <h2 class="text-2xl md:text-4xl col-span-full py-0 font-headingSerif {{#if this.backgroundColor}} text-center{{else}} headline-barrier{{/if}}">\n                {{~#if this.hasLink}}<a class="no-underline hover:underline decoration-1 md:decoration-2 text-blue-science" href="{{this.link.url}}">{{/if~}}\n                    {{this.groupTitle}}\n                {{~#if this.hasLink}}</a>{{/if~}}\n            </h2>\n        {{/if}}\n\n        </div>\n        <div class="h-24 col-span-12 p-2 mx-4 my-0 -mt-10 rounded-tr-none rounded-bl-none md:p-4 bg-blue-accented rounded-3xl">\n    \n        {{~> components/teaser/teaser_logic/teaser_logic ~}}\n    \n        </div>\n    \n{{/components/grid/grid_group}}'
 module.exports['components/teaser/podcast/podcast-playlist.hbs'] = '<div class="grid grid-cols-12 pt-5 md:pt-5 bg-[#dce8f0] mx-0 rounded-tl-3xl rounded-br-3xl col-main gap-x-6 gap-y-6" >\n    {{> components/teaser/podcast/podcast_playlist_player _linkTitle="true" _isSinglePage=false _type="podcastPlaylistPlayerTeaser" }}\n </div>'
 module.exports['components/teaser/podcast/podcast.hbs'] = '<div class="grid grid-cols-12 pt-5 md:pt-5 bg-[#dce8f0] mx-0 rounded-tl-3xl rounded-br-3xl col-main gap-x-6 gap-y-6" > \n    {{> components/teaser/podcast/podcast_player _linkTitle="true" _isSinglePage=true _type="podcastEpisodePlayerTeaser" }}\n </div>'
 module.exports['components/teaser/podcast/podcast_downloadbutton.hbs'] = '<button class="flex {{#if _addClass}} {{_addClass}} {{/if}}">\n    <a href="{{_url}}" class="h-6 button js-load" {{#with this.trackingData}} data-hr-click-tracking=\'{"settings": [{"type": "download", "clickLabel": "{{this.pageName}}", "secondLevelId": "{{this.secondLevelId}}"}, {"type": "uxAction", "clickLabel": "medienDownload::podcast::{{../_type}}", "secondLevelId": "{{this.secondLevelId}}" }]}\'{{/with}}>\n        {{> components/base/image/icon _icon=\'download-neu\' _addClass=_iconClass }}\n    </a>\n</button>'
@@ -75,8 +77,7 @@ module.exports['components/teaser/podcast/podcast_player_ui.hbs'] = '<div class=
 module.exports['components/teaser/podcast/podcast_playlist_player.hbs'] = '<div class="flex col-span-12 pb-5 border-b border-white" >\n  <div class="flex flex-col grow">\n  {{!-- First Row --}}\n    <div class="flex flex-row px-5 md:pl-5 {{#if ../_ordered}} pl-8 {{/if}} ">\n\n      <div class="flex flex-col pr-5 grow">\n\n        <div class="flex max-h-6">\n          {{!-- Label / Airdate --}}\n          {{#with label}}             \n            <span class=\'sb-label mr-2 rounded px-1.5 pt-px inline-block tracking-wide text-white text-base leading-5.5 font-heading bg-labelMedia\'>\n              {{ loca this.loca }}\n            </span> \n          {{/with}}\n        </div>\n\n        {{!-- Überschrift: --}}\n        <div class="flex pb-5 pr-2 md:pr-5">          \n          {{> components/teaser/podcast/podcast_title _title=this.title _teaserSize=this.teaserSize _addClass="" }}  \n        </div>\n\n        {{!-- Shorttext --}}\n        {{#unless _isSinglePage}}\n          {{#unless this.hideShortText}}\n              {{~#with this.shorttext}}\n                  <div class="hidden pb-6 text-sm md:flex md:text-base font-copy">\n                      <span class="c-teaser__shorttext"> {{this}} </span>\n                  </div>\n              {{/with~}}\n          {{/unless}}\n        {{/unless}}\n\n      </div>\n\n      {{!-- Podcast Image      --}}\n      <div class="flex flex-col ">\n        <div class="w-24 md:w-42">\n          {{> components/base/image/responsive_image this.teaseritem \n            _type=this.teaserType\n            _variant="default"\n            _addClass="overflow-hidden"\n            _noDelay=this.dontLazyload \n            _addClassImg="w-full h-24 md:h-42 block"\n          }}\n        </div>\n      </div>\n\n    </div>\n  \n    <div class="flex flex-row px-5 md:pr-0">\n\n      {{!-- Abo-Dropdown    --}}\n      {{#with this.podcastChannel}}        \n        <div class="flex">\n          {{!-- Container  --}}\n          <div x-cloak x-data="{\n              open: false,\n              toggle() {\n                  if (this.open) {\n                      return this.close()\n                  }\n                  this.$refs.button.focus()\n                  this.open = true\n              },\n              close(focusAfter) {\n                  if (! this.open) return\n                  this.open = false\n                  focusAfter && focusAfter.focus()\n              }}"\n                x-on:keydown.escape.prevent.stop="close($refs.button)"\n                x-on:focusin.window="! $refs.panel.contains($event.target) && close()"\n                x-id="[\'dropdown-button\']"\n                class="relative"\n          >\n\n            {{!-- Button --}}\n            <button\n              x-ref="button"\n              x-on:click="toggle()"\n              :aria-expanded="open"\n              :aria-controls="$id(\'dropdown-button\')"\n              type="button"\n              class="flex items-center gap-1.5 px-2 py-2 text-white shadow font-heading bg-orange-layout">Abonnieren\n              <div x-show="open">\n                {{> components/base/image/icon _icon=\'arrow-up\' _addClass="flex self-center w-3 h-3 fill-white" }}\n              </div>\n              <div x-show="!open">\n                {{> components/base/image/icon _icon=\'arrow-down\' _addClass="flex self-center mt-0.5 w-3 h-3 fill-white" }}\n              </div>\n            </button>\n\n            {{!-- Flyout --}}\n            <div\n              x-ref="panel"\n              x-show="open"\n              x-transition.origin.top.left\n              x-on:click.outside="close($refs.button)"\n              :id="$id(\'dropdown-button\')"\n              style="display: none;"\n              class="absolute left-0 flex flex-col w-full px-2 text-sm text-white shadow-md font-heading shadow-insetfromtop grow bg-orange-layout"\n            >\n              {{#with this.podcastHoster}}\n                <ul>\n                  {{#each this}}\n                    <li class="border-b last:border-0"> \n                      <a class="flex items-center w-full gap-2 py-2 text-left hover:underline disabled:text-gray-500"\n                        title="{{this.podcastHosterName}}" \n                        target="_blank"\n                        rel="noopener noreferrer"\n                        href="{{this.podcastHosterUrl}}">{{this.podcastHosterName}}</a>\n                    </li>\n                  {{/each}}\n                </ul>\n              {{/with}}\n               \n            </div>\n          </div>\n        </div>\n      {{/with}}\n\n    </div>\n    \n  </div>  \n</div>\n\n{{!-- Player UI --}}\n<div class="flex flex-col col-span-12 gap-5 px-5" \n  x-data="playaudio()"\n  x-init="listenToGlobalStop()"\n  ax-load\n  x-ignore\n  ax-load-src="/vendor/js/podcast_player.alpine.js">\n    {{#with this.playlistItems}}\n      {{#each this}}\n        <div class="flex pb-5 border-b border-white" >\n          {{> components/teaser/podcast/podcast_player_ui \n          _isPlaylistPlayer=true\n          _podcastDuration=podcastDuration\n          _title=title\n          _id=(nextRandom)\n          }} \n        </div>\n      {{/each}}\n    {{/with}}   \n</div>\n\n  \n</div>\n    \n\n<style>\n.seek_slider::-webkit-slider-thumb{\n  -webkit-appearance: none;\n  -moz-appearance: none;\n  appearance: none;\n  width: 16px;\n  height: 16px;\n  background: #F07800;\n  border: 2px solid white;\n  cursor: pointer;\n  border-radius: 50%;\n}\n.seek_slider::-moz-range-thumb{\n   -webkit-appearance: none;\n  -moz-appearance: none;\n  appearance: none;\n  width: 12px;\n  height: 12px;\n  background: #F07800;\n  border: 2px solid white;\n  cursor: pointer;\n  border-radius: 50%;\n}\n</style>'
 module.exports['components/teaser/podcast/podcast_timedisplay.hbs'] = '<div id="timedisplay{{_id}}" class="{{_containerCss}}">\n    <span class="{{_currentTimeClasses}} " id="currentTime"  >00:00</span>\n    <span class="{{_durationClasses}} px-0.5"> / </span>\n    <span class="{{_durationClasses}}" id="audioDurationFancy"> </span>\n</div>'
 module.exports['components/teaser/podcast/podcast_title.hbs'] = '{{#decorator \'components/base/link\' _css="font-headingSerif font-bold text-base mt-2.5 text-toplineColor line-clamp-4 md:line-clamp-2 ..." }} \n    <span class="block mt-0.5 group-hover:underline text-blue-science {{#if _ordered}} pl-8 {{/if}} {{~ inline-switch _teaserSize \'["100","50"]\'\'["text-base md:text-2xl","text-base md:text-lg"]\' ~}}">\n    {{~_title~}}\n    </span>\n{{/decorator}}'
-module.exports['components/teaser/group_teaser/group_teaser.hbs'] = '{{#>components/grid/grid_group size=this.teaserSize _backgroundColor=this.backgroundColor }} \n        {{~#if this.hasGroupTitle}}\n            <h2 class="text-2xl md:text-4xl col-span-full py-0 font-headingSerif {{#if this.backgroundColor}} text-center{{else}} headline-barrier{{/if}}">\n                {{~#if this.hasLink}}<a class="no-underline hover:underline decoration-1 md:decoration-2 text-blue-science" href="{{this.link.url}}">{{/if~}}\n                    {{this.groupTitle}}\n                {{~#if this.hasLink}}</a>{{/if~}}\n            </h2>\n        {{/if}}  \n        {{~> components/teaser/teaser_logic/teaser_logic ~}}\n{{/components/grid/grid_group}}'
-module.exports['components/teaser/group_teaser/group_teaser_accented.hbs'] = '{{#>components/grid/grid_group size=this.teaserSize _backgroundColor=this.backgroundColor }}\n    \n        <div class="h-auto col-span-12 p-8 mx-4 rounded-tr-none rounded-bl-none bg-blue-accented rounded-3xl">\n\n        {{~#if this.hasGroupTitle}}\n            <h2 class="text-2xl md:text-4xl col-span-full py-0 font-headingSerif {{#if this.backgroundColor}} text-center{{else}} headline-barrier{{/if}}">\n                {{~#if this.hasLink}}<a class="no-underline hover:underline decoration-1 md:decoration-2 text-blue-science" href="{{this.link.url}}">{{/if~}}\n                    {{this.groupTitle}}\n                {{~#if this.hasLink}}</a>{{/if~}}\n            </h2>\n        {{/if}}\n\n        </div>\n        <div class="h-24 col-span-12 p-2 mx-4 my-0 -mt-10 rounded-tr-none rounded-bl-none md:p-4 bg-blue-accented rounded-3xl">\n    \n        {{~> components/teaser/teaser_logic/teaser_logic ~}}\n    \n        </div>\n    \n{{/components/grid/grid_group}}'
+module.exports['components/teaser/stage/stage_text.hbs'] = '<div class="absolute left-2/4 right-auto bottom-15 lg:bottom-10 flex w-full px-5 sm:px-11.5 -translate-x-2/4 {{inline-switch this.stageTextPosition \'["right50"]\' \'[" justify-end"," justify-start"]\'}}">\n    <div class="p-4 rounded-2xl bg-stageTextBox opacity-85{{inline-switch this.stageTextPosition \'["left100"]\' \'[" w-full"," max-w-xs sm:w-fit md:max-w-2/4"]\'}} ">\n    {{#decorator \'components/base/link\'}}\n        {{> components/teaser/components/teaser_heading _css="text-stageText" _title=this.title _label=this.label _topline=this.topline _headlineTag="h2" _size="100" _teaserType="stage" _fontVariant="sans-serif"}}\n        {{#if this.showProfileInfoAsByline}}\n            <p class="text-stageText font-headingSerif block my-3">{{this.profiles}}</p>\n        {{/if}}\n        {{#if this.showShorttext}}\n        <p class="hidden sm:block text-stageText">{{this.shorttext}}</p>\n            {{#if this.link.hasIcon}}\n            <span class="flex items-end space-around hover:underline decoration-1 text-stageLink">[{{this.link.readMoreText.readMore}}\n                {{> components/base/image/icon _icon=this.link.iconName _iconmap="icons" _addClass="w-5 h-5 fill-current ml-1" }}]\n            </span>\n            {{/if}}\n        {{/if}}\n        {{#with this.eventtags}}\n            {{#with this.series}}\n                <span class="hidden font-heading text-stageText text-2xl font-normal leading-6 tracking-wide mt-2.5 -mb-1 sm:block">{{this.title}}</span>\n            {{/with}}\n            {{#with this.project}}\n                <span class="hidden font-heading text-stageText text-2xl font-normal leading-6 tracking-wide mt-2.5 -mb-1 sm:block">{{this.title}}</span>\n            {{/with}}\n            {{#with this.externalProject}}\n                <span class="hidden font-heading text-stageText text-2xl font-normal leading-6 tracking-wide mt-2.5 -mb-1 sm:block">{{this.title}}</span>\n            {{/with}}\n        {{/with}}\n        {{#with this.location}}\n            {{> components/base/loadSSI this.stageLocationSsi _templatePath=\'components/event/stage_location.ssi\' }} \n        {{/with}}\n        {{#if this.link.hasIcon}}\n            <span class="block mt-4 hover:underline text-stageLink {{if this.showShorttext \'hidden\'}}">[{{this.link.readMoreText.readMore}}\n                {{> components/base/image/icon _icon=this.link.iconName _iconmap="icons" _addClass="inline w-5 h-5 fill-current ml-1" }}]\n            </span>\n        {{/if}}\n        {{/decorator}}\n    </div>\n</div>'
 module.exports['components/teaser/tabbox/group_tabbox.hbs'] = '<section \n    x-show="tab === \'{{this.groupTitle}}\'"\n    class="pb-10"\n>\n    {{~#if this.hasGroupTitle~}}\n        <h3 class="sr-only">\n            <a class="" href="#tgp{{this.teaserIndex}}">\n                <span class="">{{this.groupTitle}}</span>\n                <span class="">\n                    {{> components/base/image/icon _icon="arrow-down" _iconmap="icons" _addClass="w-3 h-2 fill-current"}}\n                    {{> components/base/image/icon _icon="arrow-up" _iconmap="icons" _addClass="w-3 h-2 fill-current"}}\n                </span>\n            </a>\n        </h3>\n    {{~/if~}}\n\n    <a class="w-0" name="tgp{{this.teaserIndex}}"></a>\n    <div class="grid content-start grid-cols-12 px-0 md:px-8 colspan-12 gap-x-6 gap-y-6">\n        {{~> components/teaser/teaser_logic/teaser_logic ~}}\n    </div>\n    {{~#if this.link~}}\n        <div class="flex justify-center pt-8">\n            {{~> components/button/button_pseudo _linkTitle=(loca "group_tabbed_more" this.title) ~}}\n        </div>\n    {{~/if~}}\n</section>'
 module.exports['components/teaser/tabbox/teaser_tabbox.hbs'] = '</div>\n<div \n  x-data="{ tab: \'{{this.tabbedGroup.[0].title}}\' }"\n  class="grid grid-cols-12 pt-6 mx-0 col-full md:pt-7 bg-blue-accented md:rounded-tl-3xl md:rounded-br-3xl md:col-main gap-x-6 gap-y-6"\n>\n  <section class="col-span-full" data-hr-group-tabbed=\'{"wandaPageId":"{{this.wandaPageId}}"}\'>\n    <div class="flex flex-wrap justify-center mb-7 mx-1.5" role="tablist">\n      {{~#each this.tabbedGroup~}}\n        <button  onclick="window.location.href=\'#tgp{{@index}}\';"\n                 :class="tab === \'{{this.title}}\' ? \'text-white bg-blue-congress border-blue-congress\' : \'bg-white text-toplineColor border-white hover:border-toplineColor\'" \n                 x-effect="$el.removeAttribute(\'onclick\')"\n                 x-on:click.prevent="tab = \'{{this.title}}\'"  \n                 class="border text-base font-heading py-px px-2 m-1.5" \n                 type="button" \n                 role="tab"\n        >\n          {{this.title}}\n        </button>\n      {{~/each~}}\n    </div>\n    {{~> components/teaser/teaser_logic/teaser_logic ~}}\n  </section>\n</div>\n<div class="grid grid-cols-12 py-6 bg-white sm:px-8 col-full sm:col-main gap-x-6 gap-y-6">'
 module.exports['components/teaser/teaser_logic/teaser_logic.hbs'] = '{{~#each this.logicItems}}\n    {{~#if this.isSsi~}}        \n        {{#if (isStorybook)}}  \n            {{> components/teaser/teaser_logic/teaser_logic.ssi }} \n        {{else}}\n            {{{this.ssi}}}\n        {{/if}} \n    {{~else}}\n        {{~#with this.includeModel~}}\n            {{~#if (isStorybook)~}}\n                {{~> components/base/load_dynamic _templatePath=../includePath ~}} \n            {{~else~}}\n                {{~> (lookup ../. \'includePath\')~}}\n            {{~/if~}}\n        {{~/with~}}\n    {{~/if~}}\n{{/each~}}'

package/dist/assets/index.css

@@ -621,6 +621,12 @@ video {
   position: -webkit-sticky;
   position: sticky;
 }
+.inset-0 {
+  top: 0px;
+  right: 0px;
+  bottom: 0px;
+  left: 0px;
+}
 .bottom-0 {
   bottom: 0px;
 }
@@ -639,20 +645,20 @@ video {
 .left-0 {
   left: 0px;
 }
+.top-10 {
+  top: 2.5rem;
+}
+.top-full {
+  top: 100%;
+}
 .left-2\/4 {
   left: 50%;
 }
 .right-auto {
   right: auto;
 }
-.bottom-10 {
-  bottom: 2.5rem;
-}
-.top-10 {
-  top: 2.5rem;
-}
-.top-full {
-  top: 100%;
+.bottom-15 {
+  bottom: 3.75rem;
 }
 .z-1002 {
   z-index: 1002;
@@ -721,10 +727,6 @@ video {
   margin-left: 0px;
   margin-right: 0px;
 }
-.mx-3 {
-  margin-left: 0.75rem;
-  margin-right: 0.75rem;
-}
 .mx-4 {
   margin-left: 1rem;
   margin-right: 1rem;
@@ -745,14 +747,6 @@ video {
   margin-left: 2rem;
   margin-right: 2rem;
 }
-.mx-auto {
-  margin-left: auto;
-  margin-right: auto;
-}
-.my-3 {
-  margin-top: 0.75rem;
-  margin-bottom: 0.75rem;
-}
 .mx-px {
   margin-left: 1px;
   margin-right: 1px;
@@ -765,6 +759,10 @@ video {
   margin-top: 1rem;
   margin-bottom: 1rem;
 }
+.my-3 {
+  margin-top: 0.75rem;
+  margin-bottom: 0.75rem;
+}
 .mx-1\.5 {
   margin-left: 0.375rem;
   margin-right: 0.375rem;
@@ -797,6 +795,12 @@ video {
 .mt-4 {
   margin-top: 1rem;
 }
+.-mb-2 {
+  margin-bottom: -0.5rem;
+}
+.-mt-1 {
+  margin-top: -0.25rem;
+}
 .mr-1\.5 {
   margin-right: 0.375rem;
 }
@@ -818,15 +822,6 @@ video {
 .mb-7 {
   margin-bottom: 1.75rem;
 }
-.ml-1 {
-  margin-left: 0.25rem;
-}
-.mt-2\.5 {
-  margin-top: 0.625rem;
-}
-.-mb-1 {
-  margin-bottom: -0.25rem;
-}
 .mr-4 {
   margin-right: 1rem;
 }
@@ -842,6 +837,9 @@ video {
 .ml-3 {
   margin-left: 0.75rem;
 }
+.mt-2\.5 {
+  margin-top: 0.625rem;
+}
 .mr-0\.5 {
   margin-right: 0.125rem;
 }
@@ -851,6 +849,9 @@ video {
 .mt-3 {
   margin-top: 0.75rem;
 }
+.ml-1 {
+  margin-left: 0.25rem;
+}
 .-mt-0\.5 {
   margin-top: -0.125rem;
 }
@@ -860,6 +861,9 @@ video {
 .-mt-3 {
   margin-top: -0.75rem;
 }
+.-mb-1 {
+  margin-bottom: -0.25rem;
+}
 .\!mb-0 {
   margin-bottom: 0px !important;
 }
@@ -966,6 +970,9 @@ video {
 .max-h-0 {
   max-height: 0px;
 }
+.max-h-stage {
+  max-height: 34.3125rem;
+}
 .max-h-10 {
   max-height: 2.5rem;
 }
@@ -1044,12 +1051,12 @@ video {
 .max-w-full {
   max-width: 100%;
 }
-.max-w-main-col {
-  max-width: 63rem;
-}
 .max-w-3\/4 {
   max-width: 75%;
 }
+.max-w-xs {
+  max-width: 20rem;
+}
 .flex-initial {
   -webkit-box-flex: 0;
       -ms-flex: 0 1 auto;
@@ -1292,6 +1299,9 @@ video {
 .overflow-hidden {
   overflow: hidden;
 }
+.overflow-visible {
+  overflow: visible;
+}
 .overflow-x-scroll {
   overflow-x: scroll;
 }
@@ -1312,9 +1322,6 @@ video {
 .rounded {
   border-radius: 0.25rem;
 }
-.rounded-2xl {
-  border-radius: 1rem;
-}
 .rounded-3xl {
   border-radius: 1.5rem;
 }
@@ -1324,6 +1331,9 @@ video {
 .rounded-lg {
   border-radius: 0.5rem;
 }
+.rounded-2xl {
+  border-radius: 1rem;
+}
 .rounded-t-xl {
   border-top-left-radius: 0.75rem;
   border-top-right-radius: 0.75rem;
@@ -1528,10 +1538,6 @@ video {
   --tw-bg-opacity: 1;
   background-color: rgba(211, 70, 0, var(--tw-bg-opacity));
 }
-.bg-stageTextBox {
-  background-color: #006eb7;
-  background-color: var(--color-stage-text-box);
-}
 .bg-neutral-200 {
   --tw-bg-opacity: 1;
   background-color: rgba(229, 229, 229, var(--tw-bg-opacity));
@@ -1548,6 +1554,10 @@ video {
   --tw-bg-opacity: 1;
   background-color: rgba(240, 120, 0, var(--tw-bg-opacity));
 }
+.bg-stageTextBox {
+  background-color: #006eb7;
+  background-color: var(--color-stage-text-box);
+}
 .bg-gradient-to-r {
   background-image: -webkit-gradient(linear, left top, right top, from(var(--tw-gradient-stops)));
   background-image: linear-gradient(to right, var(--tw-gradient-stops));
@@ -1601,9 +1611,6 @@ video {
 .p-8 {
   padding: 2rem;
 }
-.p-3 {
-  padding: 0.75rem;
-}
 .p-5 {
   padding: 1.25rem;
 }
@@ -1932,10 +1939,6 @@ video {
   --tw-text-opacity: 1;
   color: rgba(39, 107, 158, var(--tw-text-opacity));
 }
-.text-stageLink {
-  color: #006eb7;
-  color: var(--color-stage-link);
-}
 .text-black {
   --tw-text-opacity: 1;
   color: rgba(0, 0, 0, var(--tw-text-opacity));
@@ -1952,6 +1955,10 @@ video {
   --tw-text-opacity: 1;
   color: rgba(240, 120, 0, var(--tw-text-opacity));
 }
+.text-stageLink {
+  color: #006eb7;
+  color: var(--color-stage-link);
+}
 .text-opacity-50 {
   --tw-text-opacity: 0.5;
 }
@@ -2018,12 +2025,12 @@ video {
 .opacity-70 {
   opacity: 0.7;
 }
-.opacity-85 {
-  opacity: .85;
-}
 .opacity-80 {
   opacity: 0.8;
 }
+.opacity-85 {
+  opacity: .85;
+}
 .shadow-\[1px_4px_5px_0px_rgba\(50\2c 50\2c 93\2c 0\.10\)\] {
   --tw-shadow: 1px 4px 5px 0px rgba(50,50,93,0.10);
   --tw-shadow-colored: 1px 4px 5px 0px var(--tw-shadow-color);
@@ -2201,7 +2208,7 @@ video {
           transition-timing-function: cubic-bezier(0.4, 0, 1, 1);
 }
 .counter-reset {
-  counter-reset: cnt1668429353724;
+  counter-reset: cnt1668515577530;
 }
 .line-clamp-4 {
   overflow: hidden;
@@ -2274,9 +2281,9 @@ video {
 }
 .grid-page {
         grid-template-columns:
-            [full-start] minmax(1rem, 1fr)
+            [full-start] minmax(0, 1fr)
             [main-start] minmax(0, 63rem) [main-end]
-            minmax(1rem, 1fr) [full-end];
+            minmax(0, 1fr) [full-end];
     }
 .col-main {
         grid-column: main;
@@ -2590,7 +2597,7 @@ video {
   --tw-ring-color: rgba(255, 255, 255, 0.5);
 }
 .-ordered {
-  counter-increment: cnt1668429353724 1;
+  counter-increment: cnt1668515577530 1;
 }
 .-ordered::before {
   position: absolute;
@@ -2606,7 +2613,7 @@ video {
   letter-spacing: .0125em;
   --tw-text-opacity: 1;
   color: rgba(0, 0, 0, var(--tw-text-opacity));
-  content: counter(cnt1668429353724);
+  content: counter(cnt1668515577530);
 }
 .\[-T\:\+Z\] {
   --t: +Z;
@@ -3172,12 +3179,34 @@ video {
   -webkit-text-decoration-line: underline;
           text-decoration-line: underline;
 }
+.before\:block::before {
+  display: block;
+}
+.before\:w-full::before {
+  width: 100%;
+}
+.before\:pt-3\/4::before {
+  padding-top: 75%;
+}
+.before\:content-\[\'\'\]::before {
+  --tw-content: '';
+  content: var(--tw-content);
+}
+.after\:absolute::after {
+  position: absolute;
+}
+.after\:bottom-0::after {
+  bottom: 0px;
+}
 .after\:block::after {
   display: block;
 }
 .after\:h-5::after {
   height: 1.25rem;
 }
+.after\:w-full::after {
+  width: 100%;
+}
 .after\:bg-stagePrimary::after {
   background-color: #006eb7;
   background-color: var(--color-stage-primary);
@@ -3186,6 +3215,9 @@ video {
   --tw-content: '';
   content: var(--tw-content);
 }
+.after\:col-full::after {
+        grid-column: full;
+    }
 @media print {
 
   .print\:flex {
@@ -3209,8 +3241,10 @@ video {
     display: block;
   }
 
-  .sm\:w-2\/4 {
-    width: 50%;
+  .sm\:w-fit {
+    width: -webkit-fit-content;
+    width: -moz-fit-content;
+    width: fit-content;
   }
 
   .sm\:px-8 {
@@ -3231,6 +3265,10 @@ video {
     .sm\:col-main {
         grid-column: main;
     }
+
+    .sm\:before\:pt-stage::before {
+    padding-top: 56%;
+  }
 }
 @media (min-width: 768px) {
 
@@ -3439,6 +3477,10 @@ video {
     max-width: 50%;
   }
 
+  .md\:max-w-2\/4 {
+    max-width: 50%;
+  }
+
   .md\:flex-auto {
     -webkit-box-flex: 1;
         -ms-flex: 1 1 auto;
@@ -3785,6 +3827,14 @@ video {
     position: relative;
   }
 
+  .lg\:left-1\/2 {
+    left: 50%;
+  }
+
+  .lg\:top-0 {
+    top: 0px;
+  }
+
   .lg\:left-0 {
     left: 0px;
   }
@@ -3801,6 +3851,10 @@ video {
     right: 0px;
   }
 
+  .lg\:bottom-10 {
+    bottom: 2.5rem;
+  }
+
   .lg\:order-2 {
     -webkit-box-ordinal-group: 3;
         -ms-flex-order: 2;
@@ -3821,6 +3875,10 @@ video {
     margin-top: -10rem;
   }
 
+  .lg\:-ml-240 {
+    margin-left: -60rem;
+  }
+
   .lg\:mr-0 {
     margin-right: 0px;
   }
@@ -3875,6 +3933,10 @@ video {
     height: 2rem;
   }
 
+  .lg\:h-full {
+    height: 100%;
+  }
+
   .lg\:h-9 {
     height: 2.25rem;
   }
@@ -3903,6 +3965,10 @@ video {
     width: 13rem;
   }
 
+  .lg\:w-full-hd {
+    width: 120rem;
+  }
+
   .lg\:w-auto {
     width: auto;
   }
@@ -4039,11 +4105,6 @@ video {
     padding-right: 2rem;
   }
 
-  .lg\:px-13 {
-    padding-left: 3.25rem;
-    padding-right: 3.25rem;
-  }
-
   .lg\:px-4 {
     padding-left: 1rem;
     padding-right: 1rem;
@@ -4181,6 +4242,10 @@ video {
     -webkit-text-decoration-line: underline;
             text-decoration-line: underline;
   }
+
+    .lg\:after\:relative::after {
+    position: relative;
+  }
 }
 @media (min-width: 768px) and (max-width: 1023px) {
 

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

@@ -1,8 +1,8 @@
 {{#with this.location}}
-<p class="flex items-center	mt-4 -mb2 text-stageText font-base">
-    {{> components/base/image/icon _icon="ortsmarke" _iconmap="icons" _addClass="w-5 h-5 fill-current mr-1.5 -ml-1" }}
+<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-3 text-stageText">|</span>{{/unless}}
+            {{#unless @first}}<span class="mx-2 text-stageText">|</span>{{/unless}}
         {{this}}
     {{/each}}
 </p>

package/dist/views/components/teaser/stage/stage_text.hbs

@@ -0,0 +1,37 @@
+<div class="absolute left-2/4 right-auto bottom-15 lg:bottom-10 flex w-full px-5 sm:px-11.5 -translate-x-2/4 {{inline-switch this.stageTextPosition '["right50"]' '[" justify-end"," justify-start"]'}}">
+    <div class="p-4 rounded-2xl bg-stageTextBox opacity-85{{inline-switch this.stageTextPosition '["left100"]' '[" w-full"," max-w-xs sm:w-fit md:max-w-2/4"]'}} ">
+    {{#decorator 'components/base/link'}}
+        {{> components/teaser/components/teaser_heading _css="text-stageText" _title=this.title _label=this.label _topline=this.topline _headlineTag="h2" _size="100" _teaserType="stage" _fontVariant="sans-serif"}}
+        {{#if this.showProfileInfoAsByline}}
+            <p class="text-stageText font-headingSerif block my-3">{{this.profiles}}</p>
+        {{/if}}
+        {{#if this.showShorttext}}
+        <p class="hidden sm:block text-stageText">{{this.shorttext}}</p>
+            {{#if this.link.hasIcon}}
+            <span class="flex items-end space-around hover:underline decoration-1 text-stageLink">[{{this.link.readMoreText.readMore}}
+                {{> components/base/image/icon _icon=this.link.iconName _iconmap="icons" _addClass="w-5 h-5 fill-current ml-1" }}]
+            </span>
+            {{/if}}
+        {{/if}}
+        {{#with this.eventtags}}
+            {{#with this.series}}
+                <span class="hidden font-heading text-stageText text-2xl font-normal leading-6 tracking-wide mt-2.5 -mb-1 sm:block">{{this.title}}</span>
+            {{/with}}
+            {{#with this.project}}
+                <span class="hidden font-heading text-stageText text-2xl font-normal leading-6 tracking-wide mt-2.5 -mb-1 sm:block">{{this.title}}</span>
+            {{/with}}
+            {{#with this.externalProject}}
+                <span class="hidden font-heading text-stageText text-2xl font-normal leading-6 tracking-wide mt-2.5 -mb-1 sm:block">{{this.title}}</span>
+            {{/with}}
+        {{/with}}
+        {{#with this.location}}
+            {{> components/base/loadSSI this.stageLocationSsi _templatePath='components/event/stage_location.ssi' }} 
+        {{/with}}
+        {{#if this.link.hasIcon}}
+            <span class="block mt-4 hover:underline text-stageLink {{if this.showShorttext 'hidden'}}">[{{this.link.readMoreText.readMore}}
+                {{> components/base/image/icon _icon=this.link.iconName _iconmap="icons" _addClass="inline w-5 h-5 fill-current ml-1" }}]
+            </span>
+        {{/if}}
+        {{/decorator}}
+    </div>
+</div>

package/dist/views/components/teaser/teaser_stage.hbs

@@ -1,60 +1,24 @@
 {{#with this.teaser}}
     <div class="grid grid-page">
-        <article class="col-full relative after:content-[''] after:block after:h-5 after:bg-stagePrimary">
-            <div class="relative overflow-hidden">
+        <article class="col-full grid grid-page relative overflow-hidden  after:content-[''] after:absolute after:bottom-0 after:col-full after:w-full after:block after:h-5 after:bg-stagePrimary lg:after:relative">
             {{#unless this.isWide}}
                 <div class="absolute w-15/12">
                     {{> components/base/image/responsive_image this.teaserImage _type="stage" _variant="default" _addClassImg="w-full blur-2xl"}}
                 </div>   
-                <div class="grid grid-page relative">
             {{/unless}}
-            {{#if this.isWide}}
-                {{> components/base/image/responsive_image this.teaserImage _type="stage" _variant="wide" _addClass="w-full"}}
-            {{else}}
-                {{> components/base/image/responsive_image this.teaserImage _type="stage" _variant="default" _addClass="col-full lg:col-main lg:px-8"}}
-            {{/if}}
-            <div class="absolute left-2/4 right-auto bottom-10 flex max-w-main-col w-full px-5 sm:px-11.5 lg:px-13 mx-auto -translate-x-2/4 bottom-0{{inline-switch this.stageTextPosition '["right50"]' '[" justify-end"," justify-start"]'}}">
-                <div class="p-3 rounded-2xl bg-stageTextBox opacity-85{{inline-switch this.stageTextPosition '["left100"]' '[" w-full"," w-full sm:w-2/4"]'}} ">
-                {{#decorator 'components/base/link'}}
-                    {{> components/teaser/components/teaser_heading _css="text-stageText" _title=this.title _label=this.label _topline=this.topline _headlineTag="h2" _size="100" _teaserType="stage" _fontVariant="sans-serif"}}
-                    {{#if this.showProfileInfoAsByline}}
-                        <p class="text-stageText font-headingSerif block my-3">{{this.profiles}}</p>
-                    {{/if}}
-                    {{#if this.showShorttext}}
-                    <p class="hidden sm:block text-stageText">{{this.shorttext}}</p>
-                        {{#if this.link.hasIcon}}
-                        <span class="flex items-end space-around hover:underline decoration-1 text-stageLink">[{{this.link.readMoreText.readMore}}
-                            {{> components/base/image/icon _icon=this.link.iconName _iconmap="icons" _addClass="w-5 h-5 fill-current ml-1" }}]
-                        </span>
+            <div class="col-full lg:col-main lg:px-8 relative">
+                <div class="relative max-h-stage overflow-visible before:content-[''] before:block before:w-full before:pt-3/4 sm:before:pt-stage">
+                    <div class="{{#if this.isWide}}lg:absolute lg:h-full lg:w-full-hd lg:left-1/2 lg:top-0 lg:-ml-240{{else}}absolute h-full w-full top-0{{/if}}">
+                        {{#if this.isWide}}
+                            {{> components/base/image/responsive_image this.teaserImage _type="stage" _variant="wide" _addClass="w-full block" _addClassImg="w-full absolute inset-0"}}
+                        {{else}}
+                            {{> components/base/image/responsive_image this.teaserImage _type="stage" _variant="default"}}
                         {{/if}}
-                    {{/if}}
-                    {{#with this.eventtags}}
-                        {{#with this.series}}
-                            <span class="block font-heading text-stageText text-2xl font-normal leading-6 tracking-wide mt-2.5 -mb-1">{{this.title}}</span>
-                        {{/with}}
-                        {{#with this.project}}
-                            <span class="block font-heading text-stageText text-2xl font-normal leading-6 tracking-wide mt-2.5 -mb-1">{{this.title}}</span>
-                        {{/with}}
-                        {{#with this.externalProject}}
-                            <span class="block font-heading text-stageText text-2xl font-normal leading-6 tracking-wide mt-2.5 -mb-1">{{this.title}}</span>
-                        {{/with}}
-                    {{/with}}
-                    {{#with this.location}}
-                        {{> components/base/loadSSI this.stageLocationSsi _templatePath='components/event/stage_location.ssi' }} 
-                    {{/with}}
-                    {{#if this.link.hasIcon}}
-                        <span class="flex items-end space-around mt-2 hover:underline text-stageLink {{if this.showShorttext 'hidden'}}">[{{this.link.readMoreText.readMore}}
-                            {{> components/base/image/icon _icon=this.link.iconName _iconmap="icons" _addClass="w-5 h-5 fill-current ml-1" }}]
-                        </span>
-                    {{/if}}
-                    {{/decorator}}
+                    </div>
+                    {{> components/teaser/stage/stage_text}}
                 </div>
             </div>
 
-            {{#unless this.isWide}}
-            </div>
-            {{/unless}}
-            </div>
         </article>
     </div>
-{{/with}}
+{{/with}}

package/package.json

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

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

@@ -54,9 +54,9 @@
 
     .grid-page {
         grid-template-columns:
-            [full-start] minmax(1rem, 1fr)
+            [full-start] minmax(0, 1fr)
             [main-start] minmax(0, 63rem) [main-end]
-            minmax(1rem, 1fr) [full-end];
+            minmax(0, 1fr) [full-end];
     }
 
     .col-main {

package/src/stories/views/components/event/stage_location.ssi.hbs

@@ -1,8 +1,8 @@
 {{#with this.location}}
-<p class="flex items-center	mt-4 -mb2 text-stageText font-base">
-    {{> components/base/image/icon _icon="ortsmarke" _iconmap="icons" _addClass="w-5 h-5 fill-current mr-1.5 -ml-1" }}
+<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-3 text-stageText">|</span>{{/unless}}
+            {{#unless @first}}<span class="mx-2 text-stageText">|</span>{{/unless}}
         {{this}}
     {{/each}}
 </p>

package/src/stories/views/components/teaser/stage/stage_text.hbs

@@ -0,0 +1,37 @@
+<div class="absolute left-2/4 right-auto bottom-15 lg:bottom-10 flex w-full px-5 sm:px-11.5 -translate-x-2/4 {{inline-switch this.stageTextPosition '["right50"]' '[" justify-end"," justify-start"]'}}">
+    <div class="p-4 rounded-2xl bg-stageTextBox opacity-85{{inline-switch this.stageTextPosition '["left100"]' '[" w-full"," max-w-xs sm:w-fit md:max-w-2/4"]'}} ">
+    {{#decorator 'components/base/link'}}
+        {{> components/teaser/components/teaser_heading _css="text-stageText" _title=this.title _label=this.label _topline=this.topline _headlineTag="h2" _size="100" _teaserType="stage" _fontVariant="sans-serif"}}
+        {{#if this.showProfileInfoAsByline}}
+            <p class="text-stageText font-headingSerif block my-3">{{this.profiles}}</p>
+        {{/if}}
+        {{#if this.showShorttext}}
+        <p class="hidden sm:block text-stageText">{{this.shorttext}}</p>
+            {{#if this.link.hasIcon}}
+            <span class="flex items-end space-around hover:underline decoration-1 text-stageLink">[{{this.link.readMoreText.readMore}}
+                {{> components/base/image/icon _icon=this.link.iconName _iconmap="icons" _addClass="w-5 h-5 fill-current ml-1" }}]
+            </span>
+            {{/if}}
+        {{/if}}
+        {{#with this.eventtags}}
+            {{#with this.series}}
+                <span class="hidden font-heading text-stageText text-2xl font-normal leading-6 tracking-wide mt-2.5 -mb-1 sm:block">{{this.title}}</span>
+            {{/with}}
+            {{#with this.project}}
+                <span class="hidden font-heading text-stageText text-2xl font-normal leading-6 tracking-wide mt-2.5 -mb-1 sm:block">{{this.title}}</span>
+            {{/with}}
+            {{#with this.externalProject}}
+                <span class="hidden font-heading text-stageText text-2xl font-normal leading-6 tracking-wide mt-2.5 -mb-1 sm:block">{{this.title}}</span>
+            {{/with}}
+        {{/with}}
+        {{#with this.location}}
+            {{> components/base/loadSSI this.stageLocationSsi _templatePath='components/event/stage_location.ssi' }} 
+        {{/with}}
+        {{#if this.link.hasIcon}}
+            <span class="block mt-4 hover:underline text-stageLink {{if this.showShorttext 'hidden'}}">[{{this.link.readMoreText.readMore}}
+                {{> components/base/image/icon _icon=this.link.iconName _iconmap="icons" _addClass="inline w-5 h-5 fill-current ml-1" }}]
+            </span>
+        {{/if}}
+        {{/decorator}}
+    </div>
+</div>

package/src/stories/views/components/teaser/teaser_stage.hbs

@@ -1,60 +1,24 @@
 {{#with this.teaser}}
     <div class="grid grid-page">
-        <article class="col-full relative after:content-[''] after:block after:h-5 after:bg-stagePrimary">
-            <div class="relative overflow-hidden">
+        <article class="col-full grid grid-page relative overflow-hidden  after:content-[''] after:absolute after:bottom-0 after:col-full after:w-full after:block after:h-5 after:bg-stagePrimary lg:after:relative">
             {{#unless this.isWide}}
                 <div class="absolute w-15/12">
                     {{> components/base/image/responsive_image this.teaserImage _type="stage" _variant="default" _addClassImg="w-full blur-2xl"}}
                 </div>   
-                <div class="grid grid-page relative">
             {{/unless}}
-            {{#if this.isWide}}
-                {{> components/base/image/responsive_image this.teaserImage _type="stage" _variant="wide" _addClass="w-full"}}
-            {{else}}
-                {{> components/base/image/responsive_image this.teaserImage _type="stage" _variant="default" _addClass="col-full lg:col-main lg:px-8"}}
-            {{/if}}
-            <div class="absolute left-2/4 right-auto bottom-10 flex max-w-main-col w-full px-5 sm:px-11.5 lg:px-13 mx-auto -translate-x-2/4 bottom-0{{inline-switch this.stageTextPosition '["right50"]' '[" justify-end"," justify-start"]'}}">
-                <div class="p-3 rounded-2xl bg-stageTextBox opacity-85{{inline-switch this.stageTextPosition '["left100"]' '[" w-full"," w-full sm:w-2/4"]'}} ">
-                {{#decorator 'components/base/link'}}
-                    {{> components/teaser/components/teaser_heading _css="text-stageText" _title=this.title _label=this.label _topline=this.topline _headlineTag="h2" _size="100" _teaserType="stage" _fontVariant="sans-serif"}}
-                    {{#if this.showProfileInfoAsByline}}
-                        <p class="text-stageText font-headingSerif block my-3">{{this.profiles}}</p>
-                    {{/if}}
-                    {{#if this.showShorttext}}
-                    <p class="hidden sm:block text-stageText">{{this.shorttext}}</p>
-                        {{#if this.link.hasIcon}}
-                        <span class="flex items-end space-around hover:underline decoration-1 text-stageLink">[{{this.link.readMoreText.readMore}}
-                            {{> components/base/image/icon _icon=this.link.iconName _iconmap="icons" _addClass="w-5 h-5 fill-current ml-1" }}]
-                        </span>
+            <div class="col-full lg:col-main lg:px-8 relative">
+                <div class="relative max-h-stage overflow-visible before:content-[''] before:block before:w-full before:pt-3/4 sm:before:pt-stage">
+                    <div class="{{#if this.isWide}}lg:absolute lg:h-full lg:w-full-hd lg:left-1/2 lg:top-0 lg:-ml-240{{else}}absolute h-full w-full top-0{{/if}}">
+                        {{#if this.isWide}}
+                            {{> components/base/image/responsive_image this.teaserImage _type="stage" _variant="wide" _addClass="w-full block" _addClassImg="w-full absolute inset-0"}}
+                        {{else}}
+                            {{> components/base/image/responsive_image this.teaserImage _type="stage" _variant="default"}}
                         {{/if}}
-                    {{/if}}
-                    {{#with this.eventtags}}
-                        {{#with this.series}}
-                            <span class="block font-heading text-stageText text-2xl font-normal leading-6 tracking-wide mt-2.5 -mb-1">{{this.title}}</span>
-                        {{/with}}
-                        {{#with this.project}}
-                            <span class="block font-heading text-stageText text-2xl font-normal leading-6 tracking-wide mt-2.5 -mb-1">{{this.title}}</span>
-                        {{/with}}
-                        {{#with this.externalProject}}
-                            <span class="block font-heading text-stageText text-2xl font-normal leading-6 tracking-wide mt-2.5 -mb-1">{{this.title}}</span>
-                        {{/with}}
-                    {{/with}}
-                    {{#with this.location}}
-                        {{> components/base/loadSSI this.stageLocationSsi _templatePath='components/event/stage_location.ssi' }} 
-                    {{/with}}
-                    {{#if this.link.hasIcon}}
-                        <span class="flex items-end space-around mt-2 hover:underline text-stageLink {{if this.showShorttext 'hidden'}}">[{{this.link.readMoreText.readMore}}
-                            {{> components/base/image/icon _icon=this.link.iconName _iconmap="icons" _addClass="w-5 h-5 fill-current ml-1" }}]
-                        </span>
-                    {{/if}}
-                    {{/decorator}}
+                    </div>
+                    {{> components/teaser/stage/stage_text}}
                 </div>
             </div>
 
-            {{#unless this.isWide}}
-            </div>
-            {{/unless}}
-            </div>
         </article>
     </div>
-{{/with}}
+{{/with}}

package/tailwind.config.js

@@ -85,10 +85,11 @@ module.exports = {
                 2000: '2000ms',
             },
             padding: {
-                1.5: '0.375rem',
-                2.5: '0.625rem',
-                11.5: '2.875rem',
-                13: '3.25rem',
+                '1.5': '0.375rem',
+                '2.5': '0.625rem',
+                '11.5': '2.875rem',
+                '13': '3.25rem',
+                '3/4': '75%',
             },
             right: {
                 80: '80%',
@@ -100,20 +101,22 @@ module.exports = {
                 '101': '101',
                 '102': '102',
                 '103': '103',
-                '1000' : '1000',
-                '1001' : '1001',
-                '1002' : '1002',
-                '1003' : '1003',
-                '9999' : '9999',
+                '1000': '1000',
+                '1001': '1001',
+                '1002': '1002',
+                '1003': '1003',
+                '9999': '9999',
                 '10000': '10000',
                 '10001': '10001',
                 '10002': '10002',
                 '-1000': '-1000',
             },
             spacing: {
-                22: '5.5rem',
-                135: '33.75rem',
-                stage: '33.0625rem',
+                '22': '5.5rem',
+                '135': '33.75rem',
+                'stage': '56%',
+
+                'full-hd': '120rem',
             },
             width: {
                 '18': '4.5rem',
@@ -137,9 +140,13 @@ module.exports = {
                 'header-md': '5.5625rem',
                 'header-sm': '7.5625rem',
             },
+            maxHeight: {
+                stage: '34.3125rem',
+            },
             maxWidth: {
                 '1/4': '25%',
                 '1/3': '33.33333333%',
+                '2/4': '50%',
                 '1/2': '50%',
                 '2/3': '66.66666666%',
                 '3/4': '75%',
@@ -149,6 +156,7 @@ module.exports = {
             margin: {
                 '13': '3.125rem',
                 '30': '7.5rem',
+                '240': '60rem',
                 'half-screen': '50vw',
             },
             inset: {