hr-design-system-handlebars 0.82.3 → 0.83.1

package/CHANGELOG.md

@@ -1,3 +1,27 @@
+# v0.83.1 (Thu Nov 17 2022)
+
+#### 🐛 Bug Fix
+
+- Feature/dpe 1677 [#387](https://github.com/mumprod/hr-design-system-handlebars/pull/387) ([@szuelch](https://github.com/szuelch))
+
+#### Authors: 1
+
+- [@szuelch](https://github.com/szuelch)
+
+---
+
+# v0.83.0 (Thu Nov 17 2022)
+
+#### 🚀 Enhancement
+
+- FEATURE: Renames headlineListOverview property [#386](https://github.com/mumprod/hr-design-system-handlebars/pull/386) ([@szuelch](https://github.com/szuelch))
+
+#### Authors: 1
+
+- [@szuelch](https://github.com/szuelch)
+
+---
+
 # v0.82.3 (Tue Nov 15 2022)
 
 #### 🐛 Bug Fix

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

@@ -48,26 +48,29 @@ module.exports['components/site_header/section_navigation/section_navigation.hbs
 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/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 uppercase{{#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.overviewLink}}\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{{#with this.teaserInfo}}\n<p class="mt-2.5 text-xs text-grey-scorpion font-headingSerif">\n    {{!--Teaser-Info--}}\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</p>\n{{/with}}'
+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        _titleCss=\'text-clusterTeaserTitle\'\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="w-full" ~}}\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="pb-4 w-full" ~}}\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.overviewLink.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/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 _isMobile1to1=../../_isMobile1to1 _geotag=../../this.geotag _hideGeotag=../../this.hideGeotag~}}\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 _geotag=../../this.geotag _hideGeotag=../../this.hideGeotag~}}                  \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 _geotag=../../this.geotag _hideGeotag=../../this.hideGeotag~}}             \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 _geotag=../../this.geotag _hideGeotag=../../this.hideGeotag~}}             \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 _geotag=../../this.geotag _hideGeotag=../../this.hideGeotag~}}             \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>'
 module.exports['components/teaser/components/teaser_byline.hbs'] = '<p class="mt-2.5 text-xs text-grey-scorpion font-headingSerif">\n     \n        {{!--Teaser-Info--}}\n        {{#with this.teaserInfo}}\n            {{#if this.showTeaserInfo~}}\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\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\n            {{/if}}\n        {{/with}}\n\n        {{#if this.isFileDownload}}\n            {{#with this.teaserImage}}\n                {{loca "gallery_image_copyright" this.copyrightWithLinks}}\n            {{/with}}\n        {{/if}}\n\n        {{!--Profiles--}}\n        {{#if this.profiles}}\n            <span>{{this.profiles}}</span>            \n            <span class="mx-px last-of-type:hidden">|</span>            \n        {{/if}}    \n\n    {{!--Comments--}}\n    {{#with this.commentsSsi}}\n        {{> components/base/loadSSI _templatePath=\'components/teaser/components/teaser_comments\' }}    \n    {{/with}}\n</p>\n'
 module.exports['components/teaser/components/teaser_comments.hbs'] = '{{#with this.commentLink}}\n    <span class="whitespace-nowrap">\n        {{#decorator \'components/base/link\' _css="hover:underline decoration-1" _isAriaHidden=true _doTracking=(if this.doTracking \'true\') _clickLabelPrefix1=this.teaserSize _clickLabelPrefix2="comment" }}\n            {{> components/base/image/icon _icon="kommentar" _iconmap="icons" _addClass="mr-0.5 inline w-5 h-5 text-toplineColor fill-current"}}\n            <span class="sr-only">{{loca "comment_anchor_1"}}</span>\n            <span class="text-toplineColor">{{../../this.commentNumber}}</span>\n            {{#if ../../this.hasOneComment}}\n                <span class="text-toplineColor">{{loca "comment_label_text"}}</span>\n            {{else}}\n                <span class="text-toplineColor">{{loca "comment_label_text_many"}}</span>\n            {{/if}}\n            <span class="sr-only">{{loca "comment_anchor_2"}}</span>\n        {{/decorator}}\n    </span>\n{{/with}}'
-module.exports['components/teaser/components/teaser_heading.hbs'] = '{{#with _label}}\n    <div class="leading-5.5{{#if ../_ordered}} pl-8 {{/if}}">\n        {{> components/label/label _type=this.type _text=(loca this.loca) _css=../_css}}\n    </div>\n{{/with~}}\n\n<{{~ _headlineTag ~}}>\n    {{#if _topline}}\n        {{> components/teaser/components/teaser_topline _css=_css _text=_topline _readMore=_readMore _teaserType=_teaserType}}\n    {{/if}}\n    {{> components/teaser/components/teaser_title _css=_css _text=_title _fontVariant=_fontVariant _size=_size _teaserType=_teaserType _isMobile1to1=_isMobile1to1 _firstItem=_firstItem}}\n</{{~ _headlineTag ~}}>\n'
+module.exports['components/teaser/components/teaser_heading.hbs'] = '{{#with _label}}\n    <div class="leading-5.5{{#if ../_ordered}} pl-8 {{/if}}">\n        {{> components/label/label _type=this.type _text=(loca this.loca) _css=../_labelCss}}\n    </div>\n{{/with~}}\n\n<{{~ _headlineTag ~}}>\n    {{#if _topline}}\n        {{> components/teaser/components/teaser_topline _css=_toplineCss _text=_topline _readMore=_readMore _teaserType=_teaserType}}\n    {{/if}}\n    {{> components/teaser/components/teaser_title _css=_titleCss _text=_title _fontVariant=_fontVariant _size=_size _teaserType=_teaserType _isMobile1to1=_isMobile1to1 _firstItem=_firstItem _ordered=_ordered}}\n</{{~ _headlineTag ~}}>\n'
 module.exports['components/teaser/components/teaser_image.hbs'] = '<div class="relative">\n{{#unless this.hideGeotag}}\n    {{#unless _isMobile1to1}}\n        {{~#with this.geotag}}\n            {{> components/geoTag/geoTag _text=this.[0].title _teaserSize=../_teaserSize }}\n        {{/with~}}\n    {{/unless}}\n{{/unless}}\n{{#decorator \'components/base/link\' _isAriaHidden=true _doTracking=(if this.doTracking \'true\') _clickLabelPrefix1=this.teaserSize _clickLabelPrefix2="mediaLink" }}\n    {{~> components/base/image/responsive_image this.teaserImage _type=this.teaserType _variant=this.imageVariant _noDelay=../this.dontLazyload _addClassImg="" ~}}\n{{/decorator}}\n</div> \n{{#if this.isEvent}}\n    {{#unless this.displayTeaserBodyAsImageOverlay}}\n        {{#decorator \'components/teaser/components/teaser_image_overlay\' _cssClasses="top-0 h-full"}}\n            <div class="flex flex-col items-center justify-center p-4">\n                {{> components/event/instant_dates}}\n            </div>\n        {{/decorator}}\n    {{/unless}}\n{{/if}}'
 module.exports['components/teaser/components/teaser_image_overlay.hbs'] = '<div class="{{#unless _noOverlayInMobileViewports}}absolute bg-gradient-to-t from-white bg-neutral-200 opacity-80{{else}}relative border-x border-b border-gray-400 md:border-0 md:absolute md:from-white md:bg-neutral-200 md:opacity-80{{/unless}} flex justify-center{{#if _cssClasses}} {{_cssClasses}}{{/if}}" aria-hidden="true">\n    {{~ decorator_body ~}}  \n</div>'
 module.exports['components/teaser/components/teaser_lead.hbs'] = '{{~#if this.allowAVConsumption ~}}\n    {{> components/teaser/components/teaser_av_consumption _aspectRatio=_aspectRatio _isMobile1to1=_isMobile1to1 _teaserSize=_teaserSize }}\n{{else}}    \n    {{> components/teaser/components/teaser_image _isMobile1to1=_isMobile1to1}}\n{{/if}}'
 module.exports['components/teaser/components/teaser_text.hbs'] = '<span class=\'flex space-around {{inline-switch _size \'["25"]\' \'["hidden ","hidden md:block "]\'~}}\n    text-base mt-3 font-copy\'>\n    {{~_text~}}\n</span>\n    {{#if this.isExtOrBrandLink}}\n        {{#decorator \'components/base/link\' _css="inline-flex flex-end text-link hover:text-link" _doTracking=(if this.doTracking \'true\') _clickLabelPrefix1=this.realTeasersize _clickLabelPrefix2="moreLink"}}\n            <span class="inline-flex flex-wrap items-end hover:underline decoration-1">[{{this.link.readMoreText.readMore}}{{~#if this.link.hasIcon}}{{> components/base/image/icon _icon=this.link.iconName _iconmap="icons" _addClass="w-5 h-5 fill-current ml-1"}}{{/if~}}]</span>\n        {{/decorator}} \n    {{/if}}\n'
-module.exports['components/teaser/components/teaser_title.hbs'] = '<span class=\'block mt-0.5 group-hover:underline {{#if _css}}{{_css}}{{/if}}{{#if _titleBlue}} text-blue-congress {{/if}}{{#if _ordered}} pl-8 {{/if}} {{> components/teaser/components/teaser_title_classes _size=_size _teaserType=_teaserType _fontVariant=_fontVariant _isMobile1to1=_isMobile1to1 _firstItem=_firstItem}}\'>\n    {{~_text~}}\n</span>'
+module.exports['components/teaser/components/teaser_title.hbs'] = '<span class=\'block mt-0.5 group-hover:underline{{#if _css}} {{_css}}{{/if}}{{#if _ordered}} pl-8 {{/if}} {{> components/teaser/components/teaser_title_classes _size=_size _teaserType=_teaserType _fontVariant=_fontVariant _isMobile1to1=_isMobile1to1 _firstItem=_firstItem}}\'>\n    {{~_text~}}\n</span>'
 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/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/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/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 _titleCss="text-stageText" _toplineCss="text-stageText" _labelCss="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/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>'
@@ -78,8 +81,5 @@ 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/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~}}'
 module.exports['components/teaser/teaser_logic/teaser_logic.ssi.hbs'] = '{{~#with this.logicItem~}}\n    {{~#with this.includeModel~}}\n        {{~#if (isStorybook)~}}\n            {{~> components/base/load_dynamic _templatePath=../includePath ~}}\n        {{~else~}}\n            {{~#with this.cacheKey~}}\n                {{~addCacheEntry this ~}}\n            {{~/with~}}\n            {{~> (lookup ../. \'includePath\')~}}\n        {{~/if~}}\n    {{~/with~}}\n{{~/with~}}'

package/dist/assets/index.css

@@ -1765,15 +1765,15 @@ video {
 .pr-4 {
   padding-right: 1rem;
 }
-.pl-8 {
-  padding-left: 2rem;
-}
 .pb-5 {
   padding-bottom: 1.25rem;
 }
 .pb-4 {
   padding-bottom: 1rem;
 }
+.pl-8 {
+  padding-left: 2rem;
+}
 .pt-1\.5 {
   padding-top: 0.375rem;
 }
@@ -1953,6 +1953,10 @@ video {
   --tw-text-opacity: 1;
   color: rgba(39, 107, 158, var(--tw-text-opacity));
 }
+.text-clusterTeaserTitle {
+  color: #005293;
+  color: var(--color-cluster-teaser-title,#000);
+}
 .text-link {
   color: #006eb7;
   color: var(--color-link);
@@ -2218,7 +2222,7 @@ video {
           transition-timing-function: cubic-bezier(0.4, 0, 1, 1);
 }
 .counter-reset {
-  counter-reset: cnt1668552184852;
+  counter-reset: cnt1668692721764;
 }
 .line-clamp-4 {
   overflow: hidden;
@@ -2607,7 +2611,7 @@ video {
   --tw-ring-color: rgba(255, 255, 255, 0.5);
 }
 .-ordered {
-  counter-increment: cnt1668552184852 1;
+  counter-increment: cnt1668692721764 1;
 }
 .-ordered::before {
   position: absolute;
@@ -2623,7 +2627,7 @@ video {
   letter-spacing: .0125em;
   --tw-text-opacity: 1;
   color: rgba(0, 0, 0, var(--tw-text-opacity));
-  content: counter(cnt1668552184852);
+  content: counter(cnt1668692721764);
 }
 .\[-T\:\+Z\] {
   --t: +Z;
@@ -2654,15 +2658,17 @@ video {
     --color-label-pm: #006eb7;
     /* Dachzeile */
     --color-topline: #006dc1;
-    /* Link */ 
+    /* Link */
     --color-link: #006eb7;
-    /* Stage */ 
+    /* Stage */
     --color-stage-text-box: #006eb7;
     --color-stage-text: #ffffff;
     --color-stage-primary: #006eb7;
     --color-stage-link: var('--color-link');
     /* geoTag */
     --color-geoTag: #E5F2F3;
+    /* Cluster-Teaser */
+    --color-cluster-teaser-title: #005293;
 }
 [data-theme='hessenschau'] {
     --color-primary: #005293;
@@ -2688,7 +2694,7 @@ video {
     --color-label-pm: #006eb7;
     /* Dachzeile */
     --color-topline: #006dc1;
-    /* Link */ 
+    /* Link */
     --color-link: #006dc1;
     /*Stage */
     --color-stage-text-box: #433d37;
@@ -2696,6 +2702,8 @@ video {
     --color-stage-link: #ffffff;
     /* geoTag */
     --color-geoTag: #E5F2F3;
+    /* Cluster-Teaser */
+    --color-cluster-teaser-title: #005293;
 }
 [data-theme='hr-fernsehen'] {
     --color-primary: #c20016;
@@ -2717,9 +2725,9 @@ video {
     --color-label-event: #000000;
     /* Dachzeile */
     --color-topline: #c20016;
-    /* Link */ 
+    /* Link */
     --color-link: #a00d65;
-    /* Stage */ 
+    /* Stage */
     --color-stage-text-box: #eaeded;
     --color-stage-text: #000000;
     --color-stage-primary: #6d0041;
@@ -2745,9 +2753,9 @@ video {
     --color-label-event: #000000;
     /* Dachzeile */
     --color-topline: #c20016;
-    /* Link */ 
+    /* Link */
     --color-link: #276b9e;
-    /* Stage */ 
+    /* Stage */
     --color-stage-text-box: #00375d;
     --color-stage-primary: #00375d;
     --color-stage-link: #ffffff;
@@ -2824,7 +2832,7 @@ video {
     --color-topline: #c20016;
     /* Link */
     --color-link: rgba(171,47,45,1);
-    /* Stage */ 
+    /* Stage */
     --color-stage-text-box: #8d2725;
     --color-stage-primary: #8d2725;
     --color-stage-link: #ffffff;
@@ -2851,11 +2859,10 @@ video {
     --color-topline: #c20016;
     /* Link */
     --color-link: rgba(0,122,124,1);
-    /* Stage */ 
+    /* Stage */
     --color-stage-text-box: #433d37;
     --color-stage-primary: #00646f;
     --color-stage-link: #ffffff;
-;
 }
 [data-theme='hr'] {
     --color-primary: #c20016;
@@ -2881,8 +2888,8 @@ video {
     --color-topline: #c20016;
     /* Link */
     --color-link: #006eb7;
-    /* Stage */ 
-    --color-stage-link: #ffffff; 
+    /* Stage */
+    --color-stage-link: #ffffff;
 }
 [data-theme='hr1'] {
     --color-primary: #e0ae00;
@@ -2904,7 +2911,7 @@ video {
     --color-label-event: #000000;
     /* Dachzeile */
     --color-topline: #c20016;
-    /* Link */ 
+    /* Link */
     --color-link: rgba(145,107,0,1);
     /* Stage */
     --color-stage-text-box: #433d37;
@@ -2931,7 +2938,7 @@ video {
     --color-label-event: #000000;
     /* Dachzeile */
     --color-topline: #c20016;
-    /* Link */ 
+    /* Link */
     --color-link: rgba(140,3,61,1);
     /* Stage */
     --color-stage-text-box: #ffffff;
@@ -2959,13 +2966,15 @@ video {
     --color-label-event: #000000;
     /* Dachzeile */
     --color-topline: #c20016;
-    /* Link */ 
+    /* Link */
     --color-link: #c20016;
     /* Stage */
     --color-stage-text-box: #ffffff;
     --color-stage-primary: #c20016;
     --color-stage-text: #c20016;
     --color-stage-link: var(--color-link);
+    /* Cluster-Teaser */
+    --color-cluster-teaser-title: #c20016;
 }
 [data-theme='hr4'] {
     --color-primary: #c20016;
@@ -2987,7 +2996,7 @@ video {
     --color-label-event: #000000;
     /* Dachzeile */
     --color-topline: #c20016;
-    /* Link */ 
+    /* Link */
     --color-link: rgba(15,97,87,1);
     /* Stage */
     --color-stage-text-box: #ffffff;
@@ -3015,7 +3024,7 @@ video {
     --color-label-event: #000000;
     /* Dachzeile */
     --color-topline: #c20016;
-    /* Link */ 
+    /* Link */
     --color-link: rgba(0,126,161,1);
     /* Stage */
     --color-stage-text-box: #ffffff;

package/dist/views/components/teaser/cluster/teaser_cluster.hbs

@@ -7,12 +7,12 @@
                     </span>
                 {{/if}}
                 {{#if this.title}}
-                    <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>
+                    <span class="text-lg md:text-2xl border-blue-congress uppercase{{#if this.teaserLogo}} pl-3 ml-3 border-l-2 border-solid {{/if}}">{{this.title}}</span>
                 {{/if}}
             </h2>
             {{> components/teaser/cluster/teaser_cluster_list _ordered=this.isOrdered}} 
     </div>
-    {{~#with this.headlineListOverview}}
+    {{~#with this.overviewLink}}
         {{~#if this.link~}}
             <div class="flex mx-5 py-11 {{~inline-switch ../this.teaserSize '["100"]' '[" justify-center md:justify-end"," justify-center"]'}}">
                 {{~> components/button/button_pseudo  _color="blue" _linkTitle=this.title~}}

package/dist/views/components/teaser/cluster/teaser_cluster_byline.hbs

@@ -1,7 +1,7 @@
 
-<p class="mt-2.5 text-xs text-grey-scorpion font-headingSerif {{#if _ordered}} pl-8 {{/if}}">
+{{#with this.teaserInfo}}
+<p class="mt-2.5 text-xs text-grey-scorpion font-headingSerif">
     {{!--Teaser-Info--}}
-    {{#with this.teaserInfo}}
         {{#if this.showTeaserInfo~}}
            {{~#if this.showTeaserInfoSection}}
               <span class="uppercase">
@@ -23,13 +23,5 @@
                {{/if~}}
            {{/if~}}
         {{/if}}
-    {{/with}}
-
-    {{!--Profiles--}}
-    {{#if this.showProfileInfoAsByline}}
-        {{#if this.profiles}}
-           <span>{{this.profiles}}</span>
-           <span class="mx-px last-of-type:hidden">|</span>
-        {{/if}}
-    {{/if}}
-</p>
+</p>
+{{/with}}

package/dist/views/components/teaser/cluster/teaser_cluster_item.hbs

@@ -7,7 +7,7 @@
         _title=this.title
         _teaserType="cluster"
         _ordered=_ordered
-        _titleBlue='true' 
+        _titleCss='text-clusterTeaserTitle'
         _firstItem=_firstItem}}        
                 {{/decorator}}
 {{> components/teaser/cluster/teaser_cluster_byline}}

package/dist/views/components/teaser/cluster/teaser_cluster_list.hbs

@@ -1,14 +1,14 @@
 <div class="{{~#if this.showFirstImageOrGenreImage}}{{~inline-switch this.teaserSize '["100"]' '[" md:flex md:flex-row"]'}}{{~/if~}}">
     {{~#if this.showGenreImage}}
         <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"]'}}">
-            {{~> components/base/image/responsive_image this.genreImage type=this.teaserType variant=this.imageVariant addClass=this.aspectRatio _addClassImg="ar__content" ~}}
+            {{~> components/base/image/responsive_image this.genreImage _type=this.teaserType _variant=this.imageVariant _addClass=this.aspectRatio _addClassImg="w-full" ~}}
         </div>
     {{~/if~}}
     {{~#if this.showFirstImage}}
         {{~#with this.firstEntry~}}
             {{~#if this.teaserImage}}
                 <div class="px-0 pb-5 {{~inline-switch ../this.teaserSize '["100"]' '[" md:pl-5 md:basis-1/2 lg:basis-1/3"]'}}">   
-                    {{~> components/base/image/responsive_image this.teaserImage type=../this.teaserType variant=../this.imageVariant addClass=../this.aspectRatio _addClassImg="ar__content pb-4" ~}}
+                    {{~> components/base/image/responsive_image this.teaserImage _type=../this.teaserType _variant=../this.imageVariant _addClass=../this.aspectRatio _addClassImg="pb-4 w-full" ~}}
                     <div class="mx-5 {{~inline-switch ../this.teaserSize '["100"]' '[" md:mx-0"]'}}">
                         {{> components/teaser/cluster/teaser_cluster_item _size=../this.teaserSize _ordered=../this.isOrdered _firstItem=true}}
                     </div> 
@@ -19,7 +19,7 @@
     {{~#with this.clusterTeaserItems}}
         {{~#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}}
             {{~#each this~}}
-                <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~}}">
+                <li class="{{~#if ../../this.isOrdered}} -ordered {{/if}} py-5 {{#if ../../this.overviewLink.link}} last-of-type:pb-0{{/if~}} {{~#if ../../this.showGenreImage}}{{~inline-switch ../../this.teaserSize '["100"]' '[" md:first-of-type:pt-0"]'}}{{/if~}}">
                     {{> components/teaser/cluster/teaser_cluster_item _size=../this.teaserSize _ordered=../../this.isOrdered }} 
                 </li>
             {{~/each}}

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

@@ -1,12 +1,12 @@
 {{#with _label}}
     <div class="leading-5.5{{#if ../_ordered}} pl-8 {{/if}}">
-        {{> components/label/label _type=this.type _text=(loca this.loca) _css=../_css}}
+        {{> components/label/label _type=this.type _text=(loca this.loca) _css=../_labelCss}}
     </div>
 {{/with~}}
 
 <{{~ _headlineTag ~}}>
     {{#if _topline}}
-        {{> components/teaser/components/teaser_topline _css=_css _text=_topline _readMore=_readMore _teaserType=_teaserType}}
+        {{> components/teaser/components/teaser_topline _css=_toplineCss _text=_topline _readMore=_readMore _teaserType=_teaserType}}
     {{/if}}
-    {{> components/teaser/components/teaser_title _css=_css _text=_title _fontVariant=_fontVariant _size=_size _teaserType=_teaserType _isMobile1to1=_isMobile1to1 _firstItem=_firstItem}}
+    {{> components/teaser/components/teaser_title _css=_titleCss _text=_title _fontVariant=_fontVariant _size=_size _teaserType=_teaserType _isMobile1to1=_isMobile1to1 _firstItem=_firstItem _ordered=_ordered}}
 </{{~ _headlineTag ~}}>

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

@@ -1,3 +1,3 @@
-<span class='block mt-0.5 group-hover:underline {{#if _css}}{{_css}}{{/if}}{{#if _titleBlue}} text-blue-congress {{/if}}{{#if _ordered}} pl-8 {{/if}} {{> components/teaser/components/teaser_title_classes _size=_size _teaserType=_teaserType _fontVariant=_fontVariant _isMobile1to1=_isMobile1to1 _firstItem=_firstItem}}'>
+<span class='block mt-0.5 group-hover:underline{{#if _css}} {{_css}}{{/if}}{{#if _ordered}} pl-8 {{/if}} {{> components/teaser/components/teaser_title_classes _size=_size _teaserType=_teaserType _fontVariant=_fontVariant _isMobile1to1=_isMobile1to1 _firstItem=_firstItem}}'>
     {{~_text~}}
 </span>

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

@@ -1,7 +1,7 @@
 <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"}}
+        {{> components/teaser/components/teaser_heading _titleCss="text-stageText" _toplineCss="text-stageText" _labelCss="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}}

package/package.json

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

package/src/assets/fixtures/teaser/cluster_teaser_extern_100.json

@@ -10,7 +10,7 @@
             "@->value": "tagesschau_de"
         },
         {
-            "@->contentpath": "headlineListOverview.link",
+            "@->contentpath": "overviewLink.link",
             "@->value": ""
         }
     ]

package/src/assets/fixtures/teaser/cluster_teaser_extern_33.json

@@ -10,7 +10,7 @@
             "@->value": "tagesschau_de"
         },
         {
-            "@->contentpath": "headlineListOverview.link",
+            "@->contentpath": "overviewLink.link",
             "@->value": ""
         }
     ]

package/src/assets/fixtures/teaser/cluster_teaser_extern_50.json

@@ -10,7 +10,7 @@
             "@->value": "sportschau"
         },
         {
-            "@->contentpath": "headlineListOverview.link",
+            "@->contentpath": "overviewLink.link",
             "@->value": ""
         }
     ]

package/src/assets/fixtures/teaser/cluster_teaser_ordered_100.json

@@ -22,7 +22,7 @@
             "@->value": "true"
         },
         {
-            "@->contentpath": "headlineListOverview.link",
+            "@->contentpath": "overviewLink.link",
             "@->value": ""
         }
     ]

package/src/assets/fixtures/teaser/cluster_teaser_ordered_33.json

@@ -22,7 +22,7 @@
             "@->value": "true"
         },
         {
-            "@->contentpath": "headlineListOverview.link",
+            "@->contentpath": "overviewLink.link",
             "@->value": ""
         }
     ]

package/src/assets/fixtures/teaser/cluster_teaser_ordered_50.json

@@ -22,7 +22,7 @@
             "@->value": "true"
         },
         {
-            "@->contentpath": "headlineListOverview.link",
+            "@->contentpath": "overviewLink.link",
             "@->value": ""
         }
     ]