npm - hr-design-system-handlebars - Versions diffs - 0.79.0 → 0.80.0 - Mend

hr-design-system-handlebars 0.79.0 → 0.80.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (31) hide show

package/CHANGELOG.md CHANGED Viewed

@@ -1,3 +1,15 @@
+# v0.80.0 (Fri Nov 11 2022)
+#### 🚀 Enhancement
+- Feature/dpe 1774: External Link Teaser [#380](https://github.com/mumprod/hr-design-system-handlebars/pull/380) ([@mariokinzel](https://github.com/mariokinzel))
+#### Authors: 1
+- [@mariokinzel](https://github.com/mariokinzel)
+---
 # v0.79.0 (Thu Nov 10 2022)
 #### 🚀 Enhancement

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

@@ -21,6 +21,8 @@ module.exports['components/grid/grid_group_standard.hbs'] = '<section class="gri
 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/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'
@@ -30,23 +32,25 @@ module.exports['components/teaser/teaser_poster.hbs'] = '<article class="mx-5 md
 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_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/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/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/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}}'
 module.exports['components/base/image/responsive_image.hbs'] = '{{!--\n\n`_type`\n`_variant`\n`_alttext`       Alternativ-Text des Bildes.<br>\n`_addClass`      Möglichkeit zur Angabe einer zusätzlichen CSS-Klasse. `image` ist Standard.<br>\n`_addClassImg`\n`_noDelay`       Bilder ohne verzögerung anzeigen, also direkt ins dom schreiben\n`_errorHandler`  JavaScript-Code, der ausgeführt wird, wenn das Bild nicht geladen werden kann. Wird z.B. für Fehlerhandling für EDP-Images genutzt.<br>\n\'_disableNoScript\' don\'t add no script fallback\n\n--}}\n{{#withParam this.responsiveImage _type _variant }}\n    {{#if this.asPicture}}\n        <picture class="{{~#if ../_addClass}} {{../_addClass}}{{/if}}">\n            {{#unless _disableNoScript}}\n                <noscript>\n                    <img class="{{~#if ../_addClassImg}} {{../_addClassImg}}{{/if}}" src="{{this.fallback}}" alt="{{#if ../_alttext}}{{../_alttext}}{{else}}{{../this.alttext}}{{/if}}">\n                </noscript>\n            {{/unless}}\n            {{#with this.sources}}\n                {{#each this}}\n                    <source{{#with this.media}} media="{{this}}"{{/with}}\n                           {{#with this.sizes}} sizes="{{this}}"{{/with}}\n                           {{#with this.srcset}} srcset="{{this}}"{{/with}}>\n                {{/each}}\n            {{/with}}\n                <img class="{{~#if ../_addClassImg}} {{../_addClassImg}}{{/if}}" loading="{{#if ../_noDelay}}auto{{else}}lazy{{/if}}" src="data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw==" alt="{{#if ../_alttext}}{{../_alttext}}{{else}}{{../this.alttext}}{{/if}}" {{~#if ../_errorHandler }} onerror="this.onerror=null; {{../_errorHandler}}"{{/if}}>\n        </picture>\n    {{/if}}\n\n    {{#if this.asImage}}\n        {{#with this.sources.[0]}}\n            {{~#with ../../_addClass }}<div class="{{this}}">{{/with}}\n            {{#unless ../../_disableNoScript}}\n                <noscript>\n                    <img class="{{~#if ../../_addClassImg}} {{../../_addClassImg}}{{/if}}" src="{{../this.fallback}}" alt="{{#if ../../_alttext}}{{../../_alttext}}{{else}}{{../../this.alttext}}{{/if}}">\n                </noscript>\n            {{/unless}}\n            <img {{#with this.sizes}}sizes="{{this}}" {{/with~}}\n                    loading="{{#if ../../_noDelay}}auto{{else}}lazy{{/if}}"\n                 {{#with this.srcset}} {{#if ../../../_noDelay}}srcset{{else}}data-srcset{{/if}}="{{this}}"{{/with}}\n                src="data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw=="\n                alt="{{#if ../../_alttext}}{{../../_alttext}}{{else}}{{../../this.alttext}}{{/if}}" class="{{~#with ../../_addClassImg }} {{this}}{{/with}}" {{~#if ../../_errorHandler}} onerror="this.onerror=null; {{../../_errorHandler}}" {{~/if}}>\n            {{~#with ../../_addClass }}</div>{{/with}}\n        {{/with}}\n\n    {{/if}}\n{{/withParam}}'
 module.exports['components/site_header/anchor_navigation/anchor_navigation.hbs'] = '<nav id="sprungmarken" aria-labelledby="anchorNavHeadline">\n    <span id="anchorNavHeadline" class="hidden">{{loca "anchor_headline"}}</span>\n    <ul>\n        <li><a href="#brandNavWrapper" class="hidden">{{loca "anchor_brandNav"}}</a></li>\n        <li><a href="#serviceNavWrapper" class="hidden">{{loca "anchor_serviceNav"}}</a></li>\n        <li><a href="#sectionNavWrapper" class="hidden">{{loca "anchor_sectionNav"}}</a></li>\n        {{{this.featureBoxAnchorSSI}}}\n        <li><a href="#content" class="hidden">{{loca "anchor_mainContent"}}</a></li>\n    </ul>\n</nav>'
 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/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/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/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>'
@@ -56,14 +60,10 @@ module.exports['components/teaser/components/teaser_heading.hbs'] = '{{#with _la
 module.exports['components/teaser/components/teaser_image.hbs'] = '{{#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{{#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 }}\n{{/if}}'
-module.exports['components/teaser/components/teaser_text.hbs'] = '<span class=\'{{inline-switch _size \'["25"]\' \'["hidden ","hidden md:block "]\'~}}\n    text-base mt-3 font-copy\'>\n    {{~_text~}}\n</span>'
+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_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/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/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}}'
@@ -77,7 +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/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            {{~> (lookup ../. \'includePath\')~}}\n        {{~/if~}}\n    {{~/with~}}\n{{~/with~}}'
 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/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            {{~> (lookup ../. \'includePath\')~}}\n        {{~/if~}}\n    {{~/with~}}\n{{~/with~}}'

package/dist/assets/index.css CHANGED Viewed

@@ -1940,6 +1940,10 @@ video {
   --tw-text-opacity: 1;
   color: rgba(0, 0, 0, var(--tw-text-opacity));
 }
+.text-link {
+  color: #006eb7;
+  color: var(--color-link);
+}
 .text-blue-science {
   --tw-text-opacity: 1;
   color: rgba(0, 109, 193, var(--tw-text-opacity));
@@ -2197,7 +2201,7 @@ video {
           transition-timing-function: cubic-bezier(0.4, 0, 1, 1);
 }
 .counter-reset {
-  counter-reset: cnt1668085324947;
+  counter-reset: cnt1668158282851;
 }
 .line-clamp-4 {
   overflow: hidden;
@@ -2586,7 +2590,7 @@ video {
   --tw-ring-color: rgba(255, 255, 255, 0.5);
 }
 .-ordered {
-  counter-increment: cnt1668085324947 1;
+  counter-increment: cnt1668158282851 1;
 }
 .-ordered::before {
   position: absolute;
@@ -2602,7 +2606,7 @@ video {
   letter-spacing: .0125em;
   --tw-text-opacity: 1;
   color: rgba(0, 0, 0, var(--tw-text-opacity));
-  content: counter(cnt1668085324947);
+  content: counter(cnt1668158282851);
 }
 .\[-T\:\+Z\] {
   --t: +Z;
@@ -3126,6 +3130,10 @@ video {
   --tw-text-opacity: 1;
   color: rgba(255, 255, 255, var(--tw-text-opacity));
 }
+.hover\:text-link:hover {
+  color: #006eb7;
+  color: var(--color-link);
+}
 .hover\:text-blue-congress:hover {
   --tw-text-opacity: 1;
   color: rgba(0, 82, 147, var(--tw-text-opacity));

package/dist/views/components/teaser/components/teaser_text.hbs CHANGED Viewed

@@ -1,4 +1,9 @@
-<span class='{{inline-switch _size '["25"]' '["hidden ","hidden md:block "]'~}}
+<span class='flex space-around {{inline-switch _size '["25"]' '["hidden ","hidden md:block "]'~}}
     text-base mt-3 font-copy'>
     {{~_text~}}
-</span>
+</span>
+    {{#if this.isExtOrBrandLink}}
+        {{#decorator 'components/base/link' _css="inline-flex flex-end text-link hover:text-link" _doTracking=(if this.doTracking 'true') _clickLabelPrefix1=this.realTeasersize _clickLabelPrefix2="moreLink"}}
+            <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>
+        {{/decorator}}
+    {{/if}}

package/package.json CHANGED Viewed

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

package/src/assets/fixtures/teaser/teaser_alternative_100_serif_link.json ADDED Viewed

@@ -0,0 +1,35 @@
+{
+    "@->jsoninclude": "teaser/teasers.inc.json",
+    "@->contentpath": "teaser_link",
+    "@->overrides": [
+        {
+            "@->contentpath": "logicItem.includePath",
+            "@->value": "components/teaser/teaser_alternative"
+        },
+        {
+            "@->contentpath": "logicItem.includeModel.teaserSize",
+            "@->value": "100"
+        },
+        {
+            "@->contentpath": "logicItem.includeModel.teaserType",
+            "@->value": "alternative-ds"
+        },
+        {
+            "@->contentpath": "logicItem.includeModel.isMobile1to1",
+            "@->value": "true"
+        },
+        {
+            "@->contentpath": "logicItem.includeModel.teaserImage",
+            "@->value": {
+                "@->jsoninclude": "teaser/teaser_images.inc.json",
+                "@->contentpath": "teaser_alternative_100",
+                "@->replaceToken": [
+                    {
+                        "@->token": "image",
+                        "@->value": "sonniger-herbst-100"
+                    }
+                ]
+            }
+        }
+    ]
+}

package/src/assets/fixtures/teaser/teaser_alternative_50_serif_link.json ADDED Viewed

@@ -0,0 +1,35 @@
+{
+    "@->jsoninclude": "teaser/teasers.inc.json",
+    "@->contentpath": "teaser_link",
+    "@->overrides": [
+        {
+            "@->contentpath": "logicItem.includePath",
+            "@->value": "components/teaser/teaser_alternative"
+        },
+        {
+            "@->contentpath": "logicItem.includeModel.teaserSize",
+            "@->value": "50"
+        },
+        {
+            "@->contentpath": "logicItem.includeModel.teaserType",
+            "@->value": "alternative-ds"
+        },
+        {
+            "@->contentpath": "logicItem.includeModel.isMobile1to1",
+            "@->value": "true"
+        },
+        {
+            "@->contentpath": "logicItem.includeModel.teaserImage",
+            "@->value": {
+                "@->jsoninclude": "teaser/teaser_images.inc.json",
+                "@->contentpath": "teaser_alternative_50",
+                "@->replaceToken": [
+                    {
+                        "@->token": "image",
+                        "@->value": "rueckkehr-nach-abschiebung-102"
+                    }
+                ]
+            }
+        }
+    ]
+}

package/src/assets/fixtures/teaser/teaser_alternative_hero_serif_link.json ADDED Viewed

@@ -0,0 +1,14 @@
+{
+    "@->jsoninclude": "teaser/teasers.inc.json",
+    "@->contentpath": "teaser_link",
+    "@->overrides": [
+        {
+            "@->contentpath": "logicItem.includePath",
+            "@->value": "components/teaser/teaser_alternative"
+        },
+        {
+            "@->contentpath": "logicItem.includeModel.teaserType",
+            "@->value": "alternative-ds"
+        }
+    ]
+}

package/src/assets/fixtures/teaser/teaser_standard_100_serif_link.json ADDED Viewed

@@ -0,0 +1,10 @@
+{
+    "@->jsoninclude": "teaser/teasers.inc.json",
+    "@->contentpath": "teaser_link",
+    "@->overrides": [
+        {
+            "@->contentpath": "logicItem.includeModel.teaserSize",
+            "@->value": "100"
+        }
+    ]
+}

package/src/assets/fixtures/teaser/teaser_standard_25_serif_link.json ADDED Viewed

@@ -0,0 +1,10 @@
+{
+    "@->jsoninclude": "teaser/teasers.inc.json",
+    "@->contentpath": "teaser_link",
+    "@->overrides": [
+        {
+            "@->contentpath": "logicItem.includeModel.teaserSize",
+            "@->value": "25"
+        }
+    ]
+}

package/src/assets/fixtures/teaser/teaser_standard_33_serif_link.json ADDED Viewed

@@ -0,0 +1,10 @@
+{
+    "@->jsoninclude": "teaser/teasers.inc.json",
+    "@->contentpath": "teaser_link",
+    "@->overrides": [
+        {
+            "@->contentpath": "logicItem.includeModel.teaserSize",
+            "@->value": "33"
+        }
+    ]
+}

package/src/assets/fixtures/teaser/teaser_standard_50_serif_link.json ADDED Viewed

@@ -0,0 +1,10 @@
+{
+    "@->jsoninclude": "teaser/teasers.inc.json",
+    "@->contentpath": "teaser_link",
+    "@->overrides": [
+        {
+            "@->contentpath": "logicItem.includeModel.teaserSize",
+            "@->value": "50"
+        }
+    ]
+}

package/src/assets/fixtures/teaser/teaser_standard_hero_serif_link.json ADDED Viewed

@@ -0,0 +1,4 @@
+{
+    "@->jsoninclude": "teaser/teasers.inc.json",
+    "@->contentpath": "teaser_link"
+}

package/src/assets/fixtures/teaser/teasers.inc.json CHANGED Viewed

@@ -1288,6 +1288,83 @@
             }
         }
     },
+    "teaser_link": {
+        "isSsi": true,
+        "logicItem": {
+            "includePath": "components/teaser/teaser_standard",
+            "includeModel": {
+                "title": "Mercedes-Luxusautos in Millionenhöhe gestohlen",
+                "topline": "Spektakuläre Diebstähle in Südhessen",
+                "headingFontVariant": "serif",
+                "extendedTitle": "",
+                "teaserType": "standard-ds",
+                "teaserSize": "hero",
+                "isMobile1to1": false,
+                "teaserImage": {
+                    "@->jsoninclude": "teaser/teaser_images.inc.json",
+                    "@->contentpath": "teaser_standard",
+                    "@->replaceToken": [
+                        {
+                            "@->token": "image",
+                            "@->value": "mercedes-suv-g-100"
+                        }
+                    ]
+                },
+                "displayTeaserBodyAsImageOverlay": false,
+                "hasMediaButtons": false,
+                "dontLazyload": true,
+                "isStandardTeaser": true,
+                "isHeroTeaser": false,
+                "isMediaTeaser": false,
+                "isGuide": false,
+                "isProgram": false,
+                "isEvent": false,
+                "isTicker": false,
+                "isAudio": false,
+                "isVideo": false,
+                "isPodcast": false,
+                "isPodcastEpisode": false,
+                "isExtOrBrandLink": true,
+                "isAuthor": false,
+                "hasStatus": false,
+                "hasTeaserItem": true,
+                "allowAVConsumption": false,
+                "displayEpgInfos": false,
+                "aspectRatio": "ar--teaserTop",
+                "hideGeotag": false,
+                "hideEditableByline": true,
+                "doTracking": true,
+                "trackingForArdMediatheksLink": false,
+                "showMediatheksLink": false,
+                "showAirdate": false,
+                "showProfileInfoAsByline": false,
+                "obsolet_brandOfTeaser": "hessenschau",
+                "documentSection": "Panorama",
+                "headlineTag": "h1",
+                "icon": "",
+                "imageVariant": "topteaser",
+                "shorttext": "Die besten Themen in der Tagesschau App",
+                "sophoraId": "textlink-256446",
+                "profiles": "",
+                "teaserLead": {
+                    "avDocument": "",
+                    "image": ""
+                },
+                "link": {
+                    "url": "/teaser1",
+                    "webviewUrl": "/teaser1#webview",
+                    "isTargetBlank": true,
+                    "hasIcon": true,
+                    "iconName": "extern",
+                    "readMoreText": {
+                        "readMoreScreenreader": "Zur Tagesschau Website",
+                        "readMore": "Zur Tagesschau Website",
+                        "readMoreLong": "Zur Tagesschau Website"
+                    }
+                }
+            }
+        }
+    },
     "teaserContentNav": {
         "realTeasersize": "100",
         "teasersize": "100",

package/src/stories/views/components/teaser/components/teaser_text.hbs CHANGED Viewed

@@ -1,4 +1,9 @@
-<span class='{{inline-switch _size '["25"]' '["hidden ","hidden md:block "]'~}}
+<span class='flex space-around {{inline-switch _size '["25"]' '["hidden ","hidden md:block "]'~}}
     text-base mt-3 font-copy'>
     {{~_text~}}
-</span>
+</span>
+    {{#if this.isExtOrBrandLink}}
+        {{#decorator 'components/base/link' _css="inline-flex flex-end text-link hover:text-link" _doTracking=(if this.doTracking 'true') _clickLabelPrefix1=this.realTeasersize _clickLabelPrefix2="moreLink"}}
+            <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>
+        {{/decorator}}
+    {{/if}}

package/src/stories/views/components/teaser/fixtures/teaser_alternative_100_serif_link.json ADDED Viewed

@@ -0,0 +1 @@

+ {"isSsi":true,"logicItem":{"includePath":"components/teaser/teaser_alternative","includeModel":{"title":"Mercedes-Luxusautos in Millionenhöhe gestohlen","topline":"Spektakuläre Diebstähle in Südhessen","headingFontVariant":"serif","extendedTitle":"","teaserType":"alternative-ds","teaserSize":"100","isMobile1to1":"true","teaserImage":{"alttext":"Lorem ipsum","copyrightWithLinks":"","responsiveImage":{"asPicture":true,"asImage":false,"fallback":"images/sonniger-herbst-100_v-16to9__medium.jpg","sources":[{"media":"all and (max-width: 47.938em)","sizes":"40vw","srcset":"images/sonniger-herbst-100_v-1to1__small.jpg 380w, images/sonniger-herbst-100_v-1to1__medium.jpg 480w, images/sonniger-herbst-100_v-1to1.jpg 720w, images/sonniger-herbst-100_v-1to1__large.jpg 960w"},{"media":"all and (min-width: 48em) ","sizes":"33vw","srcset":"images/sonniger-herbst-100_v-16to9__small.jpg 320w, images/sonniger-herbst-100_v-16to9__medium.jpg 480w, images/sonniger-herbst-100_v-16to9__medium__extended.jpg 640w, images/sonniger-herbst-100_v-16to9.jpg 960w"}]}},"displayTeaserBodyAsImageOverlay":false,"hasMediaButtons":false,"dontLazyload":true,"isStandardTeaser":true,"isHeroTeaser":false,"isMediaTeaser":false,"isGuide":false,"isProgram":false,"isEvent":false,"isTicker":false,"isAudio":false,"isVideo":false,"isPodcast":false,"isPodcastEpisode":false,"isExtOrBrandLink":true,"isAuthor":false,"hasStatus":false,"hasTeaserItem":true,"allowAVConsumption":false,"displayEpgInfos":false,"aspectRatio":"ar--teaserTop","hideGeotag":false,"hideEditableByline":true,"doTracking":true,"trackingForArdMediatheksLink":false,"showMediatheksLink":false,"showAirdate":false,"showProfileInfoAsByline":false,"obsolet_brandOfTeaser":"hessenschau","documentSection":"Panorama","headlineTag":"h1","icon":"","imageVariant":"topteaser","shorttext":"Die besten Themen in der Tagesschau App","sophoraId":"textlink-256446","profiles":"","teaserLead":{"avDocument":"","image":""},"link":{"url":"/teaser1","webviewUrl":"/teaser1#webview","isTargetBlank":true,"hasIcon":true,"iconName":"extern","readMoreText":{"readMoreScreenreader":"Zur Tagesschau Website","readMore":"Zur Tagesschau Website","readMoreLong":"Zur Tagesschau Website"}}}}}

package/src/stories/views/components/teaser/fixtures/teaser_alternative_100_serif_video copy.json ADDED Viewed

@@ -0,0 +1 @@

+ {"isSsi":true,"logicItem":{"includePath":"components/teaser/teaser_alternative","includeModel":{"byline":"Byline","title":"23 Grad - Oktober verabschiedet sich \"sehr außergewöhnlich\"","topline":"T-Shirt statt Winterjacke","headingFontVariant":"serif","extendedTitle":"","teaserType":"alternative-ds","teaserSize":"100","isMobile1to1":"true","teaserDate":{"htmlDateTime":"2022-10-23T16:04+0200","htmlDate":"23.10.2022","date":"23.10.22","dateSeparatorTime":"23.10.22, 16:04"},"teaserInfo":{"showTeaserInfo":true,"showTeaserInfoSection":true,"showTeaserInfoChannel":true,"showTeaserInfoAll":true,"showTeaserInfoDate":false,"showTeaserInfoDateTime":true,"showTeaserInfoProgramRef":true},"teaserImage":{"alttext":"Lorem ipsum","copyrightWithLinks":"","responsiveImage":{"asPicture":true,"asImage":false,"fallback":"images/sonniger-herbst-100_v-16to9__medium.jpg","sources":[{"media":"all and (max-width: 47.938em)","sizes":"40vw","srcset":"images/sonniger-herbst-100_v-1to1__small.jpg 380w, images/sonniger-herbst-100_v-1to1__medium.jpg 480w, images/sonniger-herbst-100_v-1to1.jpg 720w, images/sonniger-herbst-100_v-1to1__large.jpg 960w"},{"media":"all and (min-width: 48em) ","sizes":"33vw","srcset":"images/sonniger-herbst-100_v-16to9__small.jpg 320w, images/sonniger-herbst-100_v-16to9__medium.jpg 480w, images/sonniger-herbst-100_v-16to9__medium__extended.jpg 640w, images/sonniger-herbst-100_v-16to9.jpg 960w"}]}},"displayTeaserBodyAsImageOverlay":false,"hasMediaButtons":false,"dontLazyload":true,"isStandardTeaser":true,"isHeroTeaser":false,"isMediaTeaser":true,"isGuide":false,"isProgram":false,"isEvent":false,"isTicker":false,"isAudio":false,"isVideo":true,"isPodcast":false,"isPodcastEpisode":false,"isExtOrBrandLink":false,"isAuthor":false,"copyright":"Copyright Text","audioAuthor":"Audio Author","hasStatus":false,"hasTeaserItem":true,"allowAVConsumption":true,"aspectRatio":"ar--teaserTop","hideGeotag":false,"hideEditableByline":true,"doTracking":true,"trackingForArdMediatheksLink":false,"showMediatheksLink":false,"showAirdate":false,"showProfileInfoAsByline":false,"obsolet_brandOfTeaser":"hessenschau","documentSection":"Gesellschaft","headlineTag":"h1","icon":"ortsmarke","imageVariant":"topteaser","shorttext":"Dicke Winterjacken können weiterhin auf ihren Einsatz warten: Die kommenden Tage bleiben für den späten Oktober außergewöhnlich mild. Selbst Meteorologen sind gleich aus mehreren Gründen überrascht.","sophoraId":"warmes-oktoberende-100","profiles":"Von Alf Haubitz und Alice Merton","teaserLead":{"avDocument":{"isVideo":true,"toModel":{"videoElement":{"ardPlayerConfig":{"playerConfig":{"generic":{"isAutoplay":true,"imageTemplateConfig":{"size":[{"minWidth":0,"value":"480/270"},{"minWidth":480,"value":"640/360"},{"minWidth":640,"value":"960/540"},{"minWidth":960,"value":"1920/1080"}]}},"web":{"baseUrl":"./vendor/ardplayer/","isForcedAutoplay":true,"isForcedVideoView":true},"pluginData":{"trackingAti@all":{"isEnabled":false},"trackingAgf@all":{"isEnabled":false}}},"mediaCollection":{"streams":[{"kind":"main","videoLanguageCode":"de","media":[{"url":"https://hr-vh.akamaihd.net/i/video/as/hessenschau/2022_03/hrLogo_220317201045_L422955_,480x270-50p-700kbit,512x288-25p-500kbit,640x360-50p-1200kbit,960x540-50p-1600kbit,1280x720-50p-3200kbit,1920x1080-50p-5000kbit,.mp4.csmil/master.m3u8","mimeType":"application/vnd.apple.mpegurl","isAdaptiveQualitySelectable":true,"audios":[{"kind":"standard","languageCode":"de"}]}]}],"subTitles":[{"kind":"normal","languageCode":"de","sources":[{"kind":"webvtt","url":"https://hr-a.akamaihd.net/video/as/hessenschau/2022_03/hrLogo_220317201045_L422955_512x288-25p-500kbit.vtt"}]}],"meta":{"durationSeconds":1644,"images":[{"kind":"preview","url":"https://picsum.photos/id/101/{size}"}],"title":"Auszubildende dringend gesucht | hessenschau vom 17.03.2022","synopsis":"Erstaufnahme der Geflüchteten in Gießen / Bund-Länder-Treffen zu Geflüchteten aus der Ukraine / Zu wenig Lebensmittelkontrollen / Mehr Ausbildungsplätze als Bewerber / Dokumentation über Sinti und Roma / Nachwuchs im Frankfurter Zoo / Eintracht vor dem Europa League-Spiel"},"pluginData":{},"geoBlocked":false},"playerId":"8423","type":"videoOndemand","cssUrl":"./vendor/ardplayer/ardplayer-hr-6.3.4.4fc164e9.css","jsUrl":"./vendor/ardplayer/ardplayer-hr-6.3.4.8ea4ea3d.js","isAutoplay":true,"teaserSize":"100"},"ardPlayerJsonConfig":{"playerConfig":{"generic":{"isAutoplay":true,"imageTemplateConfig":{"size":[{"minWidth":0,"value":"480/270"},{"minWidth":480,"value":"640/360"},{"minWidth":640,"value":"960/540"},{"minWidth":960,"value":"1920/1080"}]}},"web":{"baseUrl":"./vendor/ardplayer/","isForcedAutoplay":true,"isForcedVideoView":true},"pluginData":{"trackingAti@all":{"isEnabled":false},"trackingAgf@all":{"isEnabled":false}}},"mediaCollection":{"streams":[{"kind":"main","videoLanguageCode":"de","media":[{"url":"https://hr-vh.akamaihd.net/i/video/as/hessenschau/2022_03/hrLogo_220317201045_L422955_,480x270-50p-700kbit,512x288-25p-500kbit,640x360-50p-1200kbit,960x540-50p-1600kbit,1280x720-50p-3200kbit,1920x1080-50p-5000kbit,.mp4.csmil/master.m3u8","mimeType":"application/vnd.apple.mpegurl","isAdaptiveQualitySelectable":true,"audios":[{"kind":"standard","languageCode":"de"}]}]}],"subTitles":[{"kind":"normal","languageCode":"de","sources":[{"kind":"webvtt","url":"https://hr-a.akamaihd.net/video/as/hessenschau/2022_03/hrLogo_220317201045_L422955_512x288-25p-500kbit.vtt"}]}],"meta":{"durationSeconds":1644,"images":[{"kind":"preview","url":"https://picsum.photos/id/101/{size}"}],"title":"Auszubildende dringend gesucht | hessenschau vom 17.03.2022","synopsis":"Erstaufnahme der Geflüchteten in Gießen / Bund-Länder-Treffen zu Geflüchteten aus der Ukraine / Zu wenig Lebensmittelkontrollen / Mehr Ausbildungsplätze als Bewerber / Dokumentation über Sinti und Roma / Nachwuchs im Frankfurter Zoo / Eintracht vor dem Europa League-Spiel"},"pluginData":{},"geoBlocked":false},"playerId":"8423","type":"videoOndemand","cssUrl":"./vendor/ardplayer/ardplayer-hr-6.3.4.4fc164e9.css","jsUrl":"./vendor/ardplayer/ardplayer-hr-6.3.4.8ea4ea3d.js","isAutoplay":true,"teaserSize":"100"}}}},"image":""},"geotag":[{"title":"Wolfhagen"}],"link":{"url":"/teaser1","webviewUrl":"/teaser1#webview","isTargetBlank":false,"hasIcon":false,"iconName":"iconName","readMoreText":{"readMoreScreenreader":"Zum Artikel","readMore":"mehr","readMoreLong":"read More Long"}}}}}

package/src/stories/views/components/teaser/fixtures/teaser_alternative_50_serif copy.json ADDED Viewed

@@ -0,0 +1 @@

+ {"isSsi":true,"logicItem":{"includePath":"components/teaser/teaser_alternative","includeModel":{"byline":"Byline","title":"Abgeschobene Geschwister aus Syrien zurück in Wolfhagen","topline":"Überglücklich, aber ohne Mama","headingFontVariant":"serif","extendedTitle":"","teaserType":"alternative-ds","teaserSize":"50","isMobile1to1":"true","teaserDate":{"htmlDateTime":"2022-04-17T19:30+0200","htmlDate":"20.02.1983","date":"17.04.22","dateSeparatorTime":"17.04.22, 19:30"},"teaserInfo":{"showTeaserInfo":true,"showTeaserInfoSection":true,"showTeaserInfoChannel":true,"showTeaserInfoAll":true,"showTeaserInfoDate":false,"showTeaserInfoDateTime":true,"showTeaserInfoProgramRef":true},"teaserImage":{"alttext":"Lorem ipsum","copyrightWithLinks":"","responsiveImage":{"asPicture":true,"asImage":false,"fallback":"images/rueckkehr-nach-abschiebung-102_v-16to9__medium.jpg","sources":[{"media":"all and (max-width: 47.938em)","sizes":"300px","srcset":"images/rueckkehr-nach-abschiebung-102_v-1to1__small.jpg 380w, images/rueckkehr-nach-abschiebung-102_v-1to1__medium.jpg 480w, images/rueckkehr-nach-abschiebung-102_v-1to1.jpg 720w, images/rueckkehr-nach-abschiebung-102_v-1to1__large.jpg 960w"},{"media":"all and (min-width: 48em) ","sizes":"240px","srcset":"images/rueckkehr-nach-abschiebung-102_v-16to9__small.jpg 320w, images/rueckkehr-nach-abschiebung-102_v-16to9__medium.jpg 480w, images/rueckkehr-nach-abschiebung-102_v-16to9__medium__extended.jpg 640w, images/rueckkehr-nach-abschiebung-102_v-16to9.jpg 960w"}]}},"displayTeaserBodyAsImageOverlay":false,"hasMediaButtons":false,"dontLazyload":true,"isStandardTeaser":true,"isHeroTeaser":true,"isMediaTeaser":false,"isGuide":false,"isProgram":false,"isEvent":false,"isTicker":false,"isAudio":false,"isVideo":false,"isPodcast":false,"isPodcastEpisode":false,"isExtOrBrandLink":false,"isAuthor":false,"copyright":"Copyright Text","audioAuthor":"Audio Author","hasStatus":false,"hasTeaserItem":true,"moreThenOneEvent":false,"moreThenTwoEvents":false,"firstInstant":{"startDate":{"monthNameShort":"APR","weekdayNameShort":"Do","day":"9"}},"lastInstant":{"startDate":{"monthNameShort":"APR","weekdayNameShort":"Fr","day":"10"}},"allowAVConsumption":false,"displayEpgInfos":false,"aspectRatio":"ar--teaserTop","hideGeotag":false,"hideEditableByline":true,"doTracking":true,"trackingForArdMediatheksLink":false,"showMediatheksLink":false,"showAirdate":false,"showProfileInfoAsByline":false,"obsolet_brandOfTeaser":"hessenschau","documentSection":"Gesellschaft","headlineTag":"h1","icon":"ortsmarke","imageVariant":"topteaser","shorttext":"Vor einem Jahr wurde die syrische Familie Kheder aus Wolfhagen abgeschoben. Die Gemeinde setzte alle Hebel in Bewegung, um Mutter, Tochter und Sohn zurückzuholen. Im Fall der Kinder hat das nun zu einem Happy End geführt. Doch ihre Mutter fehlt.","sophoraId":"rueckkehr-nach-abschiebung-wolfhagen--100","profiles":"Von Alf Haubitz und Alice Merton","teaserLead":{"avDocument":"","image":""},"geotag":[{"title":"Wolfhagen"}],"link":{"url":"/teaser1","webviewUrl":"/teaser1#webview","isTargetBlank":false,"hasIcon":false,"iconName":"iconName","readMoreText":{"readMoreScreenreader":"Zum Artikel","readMore":"mehr","readMoreLong":"read More Long"}}}}}

package/src/stories/views/components/teaser/fixtures/teaser_alternative_50_serif_link.json ADDED Viewed

@@ -0,0 +1 @@

+ {"isSsi":true,"logicItem":{"includePath":"components/teaser/teaser_alternative","includeModel":{"title":"Mercedes-Luxusautos in Millionenhöhe gestohlen","topline":"Spektakuläre Diebstähle in Südhessen","headingFontVariant":"serif","extendedTitle":"","teaserType":"alternative-ds","teaserSize":"50","isMobile1to1":"true","teaserImage":{"alttext":"Lorem ipsum","copyrightWithLinks":"","responsiveImage":{"asPicture":true,"asImage":false,"fallback":"images/rueckkehr-nach-abschiebung-102_v-16to9__medium.jpg","sources":[{"media":"all and (max-width: 47.938em)","sizes":"300px","srcset":"images/rueckkehr-nach-abschiebung-102_v-1to1__small.jpg 380w, images/rueckkehr-nach-abschiebung-102_v-1to1__medium.jpg 480w, images/rueckkehr-nach-abschiebung-102_v-1to1.jpg 720w, images/rueckkehr-nach-abschiebung-102_v-1to1__large.jpg 960w"},{"media":"all and (min-width: 48em) ","sizes":"240px","srcset":"images/rueckkehr-nach-abschiebung-102_v-16to9__small.jpg 320w, images/rueckkehr-nach-abschiebung-102_v-16to9__medium.jpg 480w, images/rueckkehr-nach-abschiebung-102_v-16to9__medium__extended.jpg 640w, images/rueckkehr-nach-abschiebung-102_v-16to9.jpg 960w"}]}},"displayTeaserBodyAsImageOverlay":false,"hasMediaButtons":false,"dontLazyload":true,"isStandardTeaser":true,"isHeroTeaser":false,"isMediaTeaser":false,"isGuide":false,"isProgram":false,"isEvent":false,"isTicker":false,"isAudio":false,"isVideo":false,"isPodcast":false,"isPodcastEpisode":false,"isExtOrBrandLink":true,"isAuthor":false,"hasStatus":false,"hasTeaserItem":true,"allowAVConsumption":false,"displayEpgInfos":false,"aspectRatio":"ar--teaserTop","hideGeotag":false,"hideEditableByline":true,"doTracking":true,"trackingForArdMediatheksLink":false,"showMediatheksLink":false,"showAirdate":false,"showProfileInfoAsByline":false,"obsolet_brandOfTeaser":"hessenschau","documentSection":"Panorama","headlineTag":"h1","icon":"","imageVariant":"topteaser","shorttext":"Die besten Themen in der Tagesschau App","sophoraId":"textlink-256446","profiles":"","teaserLead":{"avDocument":"","image":""},"link":{"url":"/teaser1","webviewUrl":"/teaser1#webview","isTargetBlank":true,"hasIcon":true,"iconName":"extern","readMoreText":{"readMoreScreenreader":"Zur Tagesschau Website","readMore":"Zur Tagesschau Website","readMoreLong":"Zur Tagesschau Website"}}}}}

package/src/stories/views/components/teaser/fixtures/teaser_alternative_hero_serif_link.json ADDED Viewed

@@ -0,0 +1 @@

+ {"isSsi":true,"logicItem":{"includePath":"components/teaser/teaser_alternative","includeModel":{"title":"Mercedes-Luxusautos in Millionenhöhe gestohlen","topline":"Spektakuläre Diebstähle in Südhessen","headingFontVariant":"serif","extendedTitle":"","teaserType":"alternative-ds","teaserSize":"hero","isMobile1to1":false,"teaserImage":{"alttext":"Lorem ipsum","copyrightWithLinks":"Vorname Nachname","responsiveImage":{"asPicture":false,"asImage":true,"fallback":"images/mercedes-suv-g-100_v-16to9__medium.jpg","sources":[{"sizes":"(min-width: 1024px) 960px, (min-width: 640px) calc(100vw - 4rem), 100vw","srcset":"images/mercedes-suv-g-100_v-16to9__small.jpg 320w, images/mercedes-suv-g-100_v-16to9__medium.jpg 480w, images/mercedes-suv-g-100_v-16to9__medium__extended.jpg 640w, images/mercedes-suv-g-100_v-16to9.jpg 960w, images/mercedes-suv-g-100_v-16to9__retina.jpg 1920w"}]}},"displayTeaserBodyAsImageOverlay":false,"hasMediaButtons":false,"dontLazyload":true,"isStandardTeaser":true,"isHeroTeaser":false,"isMediaTeaser":false,"isGuide":false,"isProgram":false,"isEvent":false,"isTicker":false,"isAudio":false,"isVideo":false,"isPodcast":false,"isPodcastEpisode":false,"isExtOrBrandLink":true,"isAuthor":false,"hasStatus":false,"hasTeaserItem":true,"allowAVConsumption":false,"displayEpgInfos":false,"aspectRatio":"ar--teaserTop","hideGeotag":false,"hideEditableByline":true,"doTracking":true,"trackingForArdMediatheksLink":false,"showMediatheksLink":false,"showAirdate":false,"showProfileInfoAsByline":false,"obsolet_brandOfTeaser":"hessenschau","documentSection":"Panorama","headlineTag":"h1","icon":"","imageVariant":"topteaser","shorttext":"Die besten Themen in der Tagesschau App","sophoraId":"textlink-256446","profiles":"","teaserLead":{"avDocument":"","image":""},"link":{"url":"/teaser1","webviewUrl":"/teaser1#webview","isTargetBlank":true,"hasIcon":true,"iconName":"extern","readMoreText":{"readMoreScreenreader":"Zur Tagesschau Website","readMore":"Zur Tagesschau Website","readMoreLong":"Zur Tagesschau Website"}}}}}

package/src/stories/views/components/teaser/fixtures/teaser_standard_100_serif_download copy.json ADDED Viewed

@@ -0,0 +1 @@

+ {"isSsi":true,"logicItem":{"includePath":"components/teaser/teaser_standard","includeModel":{"byline":"Byline","title":"Download","topline":"","headingFontVariant":"serif","extendedTitle":"","teaserType":"standard-ds","teaserSize":"100","isMobile1to1":false,"teaserDate":{"htmlDateTime":"2022-04-17T19:30+0200","htmlDate":"20.02.1983","date":"17.04.22","dateSeparatorTime":"17.04.22, 19:30"},"teaserInfo":{"showTeaserInfo":true,"showTeaserInfoSection":true,"showTeaserInfoChannel":true,"showTeaserInfoAll":true,"showTeaserInfoDate":false,"showTeaserInfoDateTime":false,"showTeaserInfoProgramRef":true},"teaserImage":{"alttext":"Lorem ipsum","copyrightWithLinks":"","responsiveImage":{"asPicture":false,"asImage":true,"fallback":"images/jugendfeuerwehr-102_v-16to9__medium.jpg","sources":[{"sizes":"(min-width: 1024px) 960px, (min-width: 640px) calc(100vw - 4rem), 100vw","srcset":"images/jugendfeuerwehr-102_v-16to9__small.jpg 320w, images/jugendfeuerwehr-102_v-16to9__medium.jpg 480w, images/jugendfeuerwehr-102_v-16to9__medium__extended.jpg 640w, images/jugendfeuerwehr-102_v-16to9.jpg 960w, images/jugendfeuerwehr-102_v-16to9__retina.jpg 1920w"}]}},"displayTeaserBodyAsImageOverlay":false,"hasMediaButtons":false,"dontLazyload":true,"isStandardTeaser":true,"isHeroTeaser":true,"isMediaTeaser":false,"isGuide":false,"isProgram":false,"isEvent":false,"isTicker":false,"isAudio":false,"isVideo":false,"isPodcastEpisode":false,"isExtOrBrandLink":false,"isAuthor":false,"copyright":"Copyright Text","audioAuthor":"Audio Author","hasStatus":false,"hasTeaserItem":true,"allowAVConsumption":false,"displayEpgInfos":false,"aspectRatio":"ar--teaserTop","hideGeotag":false,"hideEditableByline":true,"doTracking":true,"trackingForArdMediatheksLink":false,"showMediatheksLink":false,"showAirdate":false,"showProfileInfoAsByline":false,"obsolet_brandOfTeaser":"hessenschau","documentSection":"","headlineTag":"h1","icon":"ortsmarke","imageVariant":"topteaser","shorttext":"","sophoraId":"rueckkehr-nach-abschiebung-wolfhagen--100","profiles":"","teaserLead":{"avDocument":"","image":""},"geotag":[{"title":"Wolfhagen"}],"link":{"url":"/teaser1","webviewUrl":"/teaser1#webview","isTargetBlank":false,"hasIcon":false,"iconName":"iconName","readMoreText":{"readMoreScreenreader":"Zum Artikel","readMore":"mehr","readMoreLong":"read More Long"}},"label":{"type":"download","loca":"label_download","byline":{"bylineSsi":"ZIP - 3mb","bylineText":"BylineText"}}}}}

package/src/stories/views/components/teaser/fixtures/teaser_standard_100_serif_link copy.json ADDED Viewed

@@ -0,0 +1 @@

+ {"isSsi":true,"logicItem":{"includePath":"components/teaser/teaser_standard","includeModel":{"title":"Mercedes-Luxusautos in Millionenhöhe gestohlen","topline":"Spektakuläre Diebstähle in Südhessen","headingFontVariant":"serif","extendedTitle":"","teaserType":"standard-ds","teaserSize":"100","isMobile1to1":false,"teaserImage":{"alttext":"Lorem ipsum","copyrightWithLinks":"","responsiveImage":{"asPicture":false,"asImage":true,"fallback":"images/mercedes-suv-g-100_v-16to9__medium.jpg","sources":[{"sizes":"(min-width: 1024px) 960px, (min-width: 640px) calc(100vw - 4rem), 100vw","srcset":"images/mercedes-suv-g-100_v-16to9__small.jpg 320w, images/mercedes-suv-g-100_v-16to9__medium.jpg 480w, images/mercedes-suv-g-100_v-16to9__medium__extended.jpg 640w, images/mercedes-suv-g-100_v-16to9.jpg 960w, images/mercedes-suv-g-100_v-16to9__retina.jpg 1920w"}]}},"displayTeaserBodyAsImageOverlay":false,"hasMediaButtons":false,"dontLazyload":true,"isStandardTeaser":true,"isHeroTeaser":false,"isMediaTeaser":false,"isGuide":false,"isProgram":false,"isEvent":false,"isTicker":false,"isAudio":false,"isVideo":false,"isPodcast":false,"isPodcastEpisode":false,"isExtOrBrandLink":true,"isAuthor":false,"hasStatus":false,"hasTeaserItem":true,"allowAVConsumption":false,"displayEpgInfos":false,"aspectRatio":"ar--teaserTop","hideGeotag":false,"hideEditableByline":true,"doTracking":true,"trackingForArdMediatheksLink":false,"showMediatheksLink":false,"showAirdate":false,"showProfileInfoAsByline":false,"obsolet_brandOfTeaser":"hessenschau","documentSection":"Panorama","headlineTag":"h1","icon":"","imageVariant":"topteaser","shorttext":"Die besten Themen in der Tagesschau App","sophoraId":"textlink-256446","profiles":"","teaserLead":{"avDocument":"","image":""},"link":{"url":"/teaser1","webviewUrl":"/teaser1#webview","isTargetBlank":true,"hasIcon":true,"iconName":"extern","readMoreText":{"readMoreScreenreader":"Zur Tagesschau Website","readMore":"Zur Tagesschau Website","readMoreLong":"Zur Tagesschau Website"}}}}}

package/src/stories/views/components/teaser/fixtures/teaser_standard_100_serif_link.json ADDED Viewed

@@ -0,0 +1 @@

+ {"isSsi":true,"logicItem":{"includePath":"components/teaser/teaser_standard","includeModel":{"title":"Mercedes-Luxusautos in Millionenhöhe gestohlen","topline":"Spektakuläre Diebstähle in Südhessen","headingFontVariant":"serif","extendedTitle":"","teaserType":"standard-ds","teaserSize":"100","isMobile1to1":false,"teaserImage":{"alttext":"Lorem ipsum","copyrightWithLinks":"Vorname Nachname","responsiveImage":{"asPicture":false,"asImage":true,"fallback":"images/mercedes-suv-g-100_v-16to9__medium.jpg","sources":[{"sizes":"(min-width: 1024px) 960px, (min-width: 640px) calc(100vw - 4rem), 100vw","srcset":"images/mercedes-suv-g-100_v-16to9__small.jpg 320w, images/mercedes-suv-g-100_v-16to9__medium.jpg 480w, images/mercedes-suv-g-100_v-16to9__medium__extended.jpg 640w, images/mercedes-suv-g-100_v-16to9.jpg 960w, images/mercedes-suv-g-100_v-16to9__retina.jpg 1920w"}]}},"displayTeaserBodyAsImageOverlay":false,"hasMediaButtons":false,"dontLazyload":true,"isStandardTeaser":true,"isHeroTeaser":false,"isMediaTeaser":false,"isGuide":false,"isProgram":false,"isEvent":false,"isTicker":false,"isAudio":false,"isVideo":false,"isPodcast":false,"isPodcastEpisode":false,"isExtOrBrandLink":true,"isAuthor":false,"hasStatus":false,"hasTeaserItem":true,"allowAVConsumption":false,"displayEpgInfos":false,"aspectRatio":"ar--teaserTop","hideGeotag":false,"hideEditableByline":true,"doTracking":true,"trackingForArdMediatheksLink":false,"showMediatheksLink":false,"showAirdate":false,"showProfileInfoAsByline":false,"obsolet_brandOfTeaser":"hessenschau","documentSection":"Panorama","headlineTag":"h1","icon":"","imageVariant":"topteaser","shorttext":"Die besten Themen in der Tagesschau App","sophoraId":"textlink-256446","profiles":"","teaserLead":{"avDocument":"","image":""},"link":{"url":"/teaser1","webviewUrl":"/teaser1#webview","isTargetBlank":true,"hasIcon":true,"iconName":"extern","readMoreText":{"readMoreScreenreader":"Zur Tagesschau Website","readMore":"Zur Tagesschau Website","readMoreLong":"Zur Tagesschau Website"}}}}}

package/src/stories/views/components/teaser/fixtures/teaser_standard_25_serif_link.json ADDED Viewed

@@ -0,0 +1 @@

+ {"isSsi":true,"logicItem":{"includePath":"components/teaser/teaser_standard","includeModel":{"title":"Mercedes-Luxusautos in Millionenhöhe gestohlen","topline":"Spektakuläre Diebstähle in Südhessen","headingFontVariant":"serif","extendedTitle":"","teaserType":"standard-ds","teaserSize":"25","isMobile1to1":false,"teaserImage":{"alttext":"Lorem ipsum","copyrightWithLinks":"Vorname Nachname","responsiveImage":{"asPicture":false,"asImage":true,"fallback":"images/mercedes-suv-g-100_v-16to9__medium.jpg","sources":[{"sizes":"(min-width: 1024px) 960px, (min-width: 640px) calc(100vw - 4rem), 100vw","srcset":"images/mercedes-suv-g-100_v-16to9__small.jpg 320w, images/mercedes-suv-g-100_v-16to9__medium.jpg 480w, images/mercedes-suv-g-100_v-16to9__medium__extended.jpg 640w, images/mercedes-suv-g-100_v-16to9.jpg 960w, images/mercedes-suv-g-100_v-16to9__retina.jpg 1920w"}]}},"displayTeaserBodyAsImageOverlay":false,"hasMediaButtons":false,"dontLazyload":true,"isStandardTeaser":true,"isHeroTeaser":false,"isMediaTeaser":false,"isGuide":false,"isProgram":false,"isEvent":false,"isTicker":false,"isAudio":false,"isVideo":false,"isPodcast":false,"isPodcastEpisode":false,"isExtOrBrandLink":true,"isAuthor":false,"hasStatus":false,"hasTeaserItem":true,"allowAVConsumption":false,"displayEpgInfos":false,"aspectRatio":"ar--teaserTop","hideGeotag":false,"hideEditableByline":true,"doTracking":true,"trackingForArdMediatheksLink":false,"showMediatheksLink":false,"showAirdate":false,"showProfileInfoAsByline":false,"obsolet_brandOfTeaser":"hessenschau","documentSection":"Panorama","headlineTag":"h1","icon":"","imageVariant":"topteaser","shorttext":"Die besten Themen in der Tagesschau App","sophoraId":"textlink-256446","profiles":"","teaserLead":{"avDocument":"","image":""},"link":{"url":"/teaser1","webviewUrl":"/teaser1#webview","isTargetBlank":true,"hasIcon":true,"iconName":"extern","readMoreText":{"readMoreScreenreader":"Zur Tagesschau Website","readMore":"Zur Tagesschau Website","readMoreLong":"Zur Tagesschau Website"}}}}}

package/src/stories/views/components/teaser/fixtures/teaser_standard_33_serif_link copy.json ADDED Viewed

@@ -0,0 +1 @@

+ {"isSsi":true,"logicItem":{"includePath":"components/teaser/teaser_standard","includeModel":{"title":"Mercedes-Luxusautos in Millionenhöhe gestohlen","topline":"Spektakuläre Diebstähle in Südhessen","headingFontVariant":"serif","extendedTitle":"","teaserType":"standard-ds","teaserSize":"33","isMobile1to1":false,"teaserImage":{"alttext":"Lorem ipsum","copyrightWithLinks":"","responsiveImage":{"asPicture":false,"asImage":true,"fallback":"images/mercedes-suv-g-100_v-16to9__medium.jpg","sources":[{"sizes":"(min-width: 1024px) 960px, (min-width: 640px) calc(100vw - 4rem), 100vw","srcset":"images/mercedes-suv-g-100_v-16to9__small.jpg 320w, images/mercedes-suv-g-100_v-16to9__medium.jpg 480w, images/mercedes-suv-g-100_v-16to9__medium__extended.jpg 640w, images/mercedes-suv-g-100_v-16to9.jpg 960w, images/mercedes-suv-g-100_v-16to9__retina.jpg 1920w"}]}},"displayTeaserBodyAsImageOverlay":false,"hasMediaButtons":false,"dontLazyload":true,"isStandardTeaser":true,"isHeroTeaser":false,"isMediaTeaser":false,"isGuide":false,"isProgram":false,"isEvent":false,"isTicker":false,"isAudio":false,"isVideo":false,"isPodcast":false,"isPodcastEpisode":false,"isExtOrBrandLink":true,"isAuthor":false,"hasStatus":false,"hasTeaserItem":true,"allowAVConsumption":false,"displayEpgInfos":false,"aspectRatio":"ar--teaserTop","hideGeotag":false,"hideEditableByline":true,"doTracking":true,"trackingForArdMediatheksLink":false,"showMediatheksLink":false,"showAirdate":false,"showProfileInfoAsByline":false,"obsolet_brandOfTeaser":"hessenschau","documentSection":"Panorama","headlineTag":"h1","icon":"","imageVariant":"topteaser","shorttext":"Die besten Themen in der Tagesschau App","sophoraId":"textlink-256446","profiles":"","teaserLead":{"avDocument":"","image":""},"link":{"url":"/teaser1","webviewUrl":"/teaser1#webview","isTargetBlank":true,"hasIcon":true,"iconName":"extern","readMoreText":{"readMoreScreenreader":"Zur Tagesschau Website","readMore":"Zur Tagesschau Website","readMoreLong":"Zur Tagesschau Website"}}}}}

package/src/stories/views/components/teaser/fixtures/teaser_standard_33_serif_link.json ADDED Viewed

@@ -0,0 +1 @@

+ {"isSsi":true,"logicItem":{"includePath":"components/teaser/teaser_standard","includeModel":{"title":"Mercedes-Luxusautos in Millionenhöhe gestohlen","topline":"Spektakuläre Diebstähle in Südhessen","headingFontVariant":"serif","extendedTitle":"","teaserType":"standard-ds","teaserSize":"33","isMobile1to1":false,"teaserImage":{"alttext":"Lorem ipsum","copyrightWithLinks":"Vorname Nachname","responsiveImage":{"asPicture":false,"asImage":true,"fallback":"images/mercedes-suv-g-100_v-16to9__medium.jpg","sources":[{"sizes":"(min-width: 1024px) 960px, (min-width: 640px) calc(100vw - 4rem), 100vw","srcset":"images/mercedes-suv-g-100_v-16to9__small.jpg 320w, images/mercedes-suv-g-100_v-16to9__medium.jpg 480w, images/mercedes-suv-g-100_v-16to9__medium__extended.jpg 640w, images/mercedes-suv-g-100_v-16to9.jpg 960w, images/mercedes-suv-g-100_v-16to9__retina.jpg 1920w"}]}},"displayTeaserBodyAsImageOverlay":false,"hasMediaButtons":false,"dontLazyload":true,"isStandardTeaser":true,"isHeroTeaser":false,"isMediaTeaser":false,"isGuide":false,"isProgram":false,"isEvent":false,"isTicker":false,"isAudio":false,"isVideo":false,"isPodcast":false,"isPodcastEpisode":false,"isExtOrBrandLink":true,"isAuthor":false,"hasStatus":false,"hasTeaserItem":true,"allowAVConsumption":false,"displayEpgInfos":false,"aspectRatio":"ar--teaserTop","hideGeotag":false,"hideEditableByline":true,"doTracking":true,"trackingForArdMediatheksLink":false,"showMediatheksLink":false,"showAirdate":false,"showProfileInfoAsByline":false,"obsolet_brandOfTeaser":"hessenschau","documentSection":"Panorama","headlineTag":"h1","icon":"","imageVariant":"topteaser","shorttext":"Die besten Themen in der Tagesschau App","sophoraId":"textlink-256446","profiles":"","teaserLead":{"avDocument":"","image":""},"link":{"url":"/teaser1","webviewUrl":"/teaser1#webview","isTargetBlank":true,"hasIcon":true,"iconName":"extern","readMoreText":{"readMoreScreenreader":"Zur Tagesschau Website","readMore":"Zur Tagesschau Website","readMoreLong":"Zur Tagesschau Website"}}}}}

package/src/stories/views/components/teaser/fixtures/teaser_standard_50_serif_link copy.json ADDED Viewed

@@ -0,0 +1 @@

+ {"isSsi":true,"logicItem":{"includePath":"components/teaser/teaser_standard","includeModel":{"title":"Mercedes-Luxusautos in Millionenhöhe gestohlen","topline":"Spektakuläre Diebstähle in Südhessen","headingFontVariant":"serif","extendedTitle":"","teaserType":"standard-ds","teaserSize":"50","isMobile1to1":false,"teaserImage":{"alttext":"Lorem ipsum","copyrightWithLinks":"","responsiveImage":{"asPicture":false,"asImage":true,"fallback":"images/mercedes-suv-g-100_v-16to9__medium.jpg","sources":[{"sizes":"(min-width: 1024px) 960px, (min-width: 640px) calc(100vw - 4rem), 100vw","srcset":"images/mercedes-suv-g-100_v-16to9__small.jpg 320w, images/mercedes-suv-g-100_v-16to9__medium.jpg 480w, images/mercedes-suv-g-100_v-16to9__medium__extended.jpg 640w, images/mercedes-suv-g-100_v-16to9.jpg 960w, images/mercedes-suv-g-100_v-16to9__retina.jpg 1920w"}]}},"displayTeaserBodyAsImageOverlay":false,"hasMediaButtons":false,"dontLazyload":true,"isStandardTeaser":true,"isHeroTeaser":false,"isMediaTeaser":false,"isGuide":false,"isProgram":false,"isEvent":false,"isTicker":false,"isAudio":false,"isVideo":false,"isPodcast":false,"isPodcastEpisode":false,"isExtOrBrandLink":true,"isAuthor":false,"hasStatus":false,"hasTeaserItem":true,"allowAVConsumption":false,"displayEpgInfos":false,"aspectRatio":"ar--teaserTop","hideGeotag":false,"hideEditableByline":true,"doTracking":true,"trackingForArdMediatheksLink":false,"showMediatheksLink":false,"showAirdate":false,"showProfileInfoAsByline":false,"obsolet_brandOfTeaser":"hessenschau","documentSection":"Panorama","headlineTag":"h1","icon":"","imageVariant":"topteaser","shorttext":"Die besten Themen in der Tagesschau App","sophoraId":"textlink-256446","profiles":"","teaserLead":{"avDocument":"","image":""},"link":{"url":"/teaser1","webviewUrl":"/teaser1#webview","isTargetBlank":true,"hasIcon":true,"iconName":"extern","readMoreText":{"readMoreScreenreader":"Zur Tagesschau Website","readMore":"Zur Tagesschau Website","readMoreLong":"Zur Tagesschau Website"}}}}}

package/src/stories/views/components/teaser/fixtures/teaser_standard_50_serif_link.json ADDED Viewed

@@ -0,0 +1 @@

+ {"isSsi":true,"logicItem":{"includePath":"components/teaser/teaser_standard","includeModel":{"title":"Mercedes-Luxusautos in Millionenhöhe gestohlen","topline":"Spektakuläre Diebstähle in Südhessen","headingFontVariant":"serif","extendedTitle":"","teaserType":"standard-ds","teaserSize":"50","isMobile1to1":false,"teaserImage":{"alttext":"Lorem ipsum","copyrightWithLinks":"Vorname Nachname","responsiveImage":{"asPicture":false,"asImage":true,"fallback":"images/mercedes-suv-g-100_v-16to9__medium.jpg","sources":[{"sizes":"(min-width: 1024px) 960px, (min-width: 640px) calc(100vw - 4rem), 100vw","srcset":"images/mercedes-suv-g-100_v-16to9__small.jpg 320w, images/mercedes-suv-g-100_v-16to9__medium.jpg 480w, images/mercedes-suv-g-100_v-16to9__medium__extended.jpg 640w, images/mercedes-suv-g-100_v-16to9.jpg 960w, images/mercedes-suv-g-100_v-16to9__retina.jpg 1920w"}]}},"displayTeaserBodyAsImageOverlay":false,"hasMediaButtons":false,"dontLazyload":true,"isStandardTeaser":true,"isHeroTeaser":false,"isMediaTeaser":false,"isGuide":false,"isProgram":false,"isEvent":false,"isTicker":false,"isAudio":false,"isVideo":false,"isPodcast":false,"isPodcastEpisode":false,"isExtOrBrandLink":true,"isAuthor":false,"hasStatus":false,"hasTeaserItem":true,"allowAVConsumption":false,"displayEpgInfos":false,"aspectRatio":"ar--teaserTop","hideGeotag":false,"hideEditableByline":true,"doTracking":true,"trackingForArdMediatheksLink":false,"showMediatheksLink":false,"showAirdate":false,"showProfileInfoAsByline":false,"obsolet_brandOfTeaser":"hessenschau","documentSection":"Panorama","headlineTag":"h1","icon":"","imageVariant":"topteaser","shorttext":"Die besten Themen in der Tagesschau App","sophoraId":"textlink-256446","profiles":"","teaserLead":{"avDocument":"","image":""},"link":{"url":"/teaser1","webviewUrl":"/teaser1#webview","isTargetBlank":true,"hasIcon":true,"iconName":"extern","readMoreText":{"readMoreScreenreader":"Zur Tagesschau Website","readMore":"Zur Tagesschau Website","readMoreLong":"Zur Tagesschau Website"}}}}}

package/src/stories/views/components/teaser/fixtures/teaser_standard_hero_serif_link.json ADDED Viewed

@@ -0,0 +1 @@

+ {"isSsi":true,"logicItem":{"includePath":"components/teaser/teaser_standard","includeModel":{"title":"Mercedes-Luxusautos in Millionenhöhe gestohlen","topline":"Spektakuläre Diebstähle in Südhessen","headingFontVariant":"serif","extendedTitle":"","teaserType":"standard-ds","teaserSize":"hero","isMobile1to1":false,"teaserImage":{"alttext":"Lorem ipsum","copyrightWithLinks":"Vorname Nachname","responsiveImage":{"asPicture":false,"asImage":true,"fallback":"images/mercedes-suv-g-100_v-16to9__medium.jpg","sources":[{"sizes":"(min-width: 1024px) 960px, (min-width: 640px) calc(100vw - 4rem), 100vw","srcset":"images/mercedes-suv-g-100_v-16to9__small.jpg 320w, images/mercedes-suv-g-100_v-16to9__medium.jpg 480w, images/mercedes-suv-g-100_v-16to9__medium__extended.jpg 640w, images/mercedes-suv-g-100_v-16to9.jpg 960w, images/mercedes-suv-g-100_v-16to9__retina.jpg 1920w"}]}},"displayTeaserBodyAsImageOverlay":false,"hasMediaButtons":false,"dontLazyload":true,"isStandardTeaser":true,"isHeroTeaser":false,"isMediaTeaser":false,"isGuide":false,"isProgram":false,"isEvent":false,"isTicker":false,"isAudio":false,"isVideo":false,"isPodcast":false,"isPodcastEpisode":false,"isExtOrBrandLink":true,"isAuthor":false,"hasStatus":false,"hasTeaserItem":true,"allowAVConsumption":false,"displayEpgInfos":false,"aspectRatio":"ar--teaserTop","hideGeotag":false,"hideEditableByline":true,"doTracking":true,"trackingForArdMediatheksLink":false,"showMediatheksLink":false,"showAirdate":false,"showProfileInfoAsByline":false,"obsolet_brandOfTeaser":"hessenschau","documentSection":"Panorama","headlineTag":"h1","icon":"","imageVariant":"topteaser","shorttext":"Die besten Themen in der Tagesschau App","sophoraId":"textlink-256446","profiles":"","teaserLead":{"avDocument":"","image":""},"link":{"url":"/teaser1","webviewUrl":"/teaser1#webview","isTargetBlank":true,"hasIcon":true,"iconName":"extern","readMoreText":{"readMoreScreenreader":"Zur Tagesschau Website","readMore":"Zur Tagesschau Website","readMoreLong":"Zur Tagesschau Website"}}}}}

package/src/stories/views/components/teaser/teaser_alternativ.stories.mdx CHANGED Viewed

@@ -6,8 +6,11 @@ import teaser from './teaser_alternativ.hbs'
 import heroTeaser from './fixtures/teaser_alternative_hero_serif.json'
 import heroTeaserWithLabel from './fixtures/teaser_alternative_hero_serif_label.json'
 import heroTeaserWithComments from './fixtures/teaser_alternative_hero_serif_comments.json'
+import heroTeaserLink from './fixtures/teaser_alternative_hero_serif_link.json'
+import teaser100Link from './fixtures/teaser_alternative_100_serif_link.json'
 import teaser100 from './fixtures/teaser_alternative_100_serif.json'
 import teaser50 from './fixtures/teaser_alternative_50_serif.json'
+import teaser50Link from './fixtures/teaser_alternative_50_serif_link.json'
 import teaser50Download from './fixtures/teaser_alternative_50_serif_download.json'
 <Meta
@@ -117,13 +120,24 @@ Die Alternativ-Teaser-Komponente wird in handlebars wie folgt eingebaut:
     <Story name="Alternativ Hero mit Label" args={heroTeaserWithLabel.logicItem.includeModel}>
         {Template.bind({})}
     </Story>
+    <Story name="Alternativ Hero mit externen Link Dokument" args={heroTeaserLink.logicItem.includeModel}>
+        {Template.bind({})}
+    </Story>
     <b>Alternativ 100%</b>
     <Story name="Alternativ 100" args={teaser100.logicItem.includeModel}>
         {Template.bind({})}
     </Story>
+    <b>Alternativ 100% mit externem Link</b>
+    <Story name="Alternativ 100 mit externem Link" args={teaser100Link.logicItem.includeModel}>
+        {Template.bind({})}
+    </Story>
     <b>Alternativ 50%</b>
     <Story name="Alternativ 50" args={teaser50.logicItem.includeModel}>
         {Template.bind({})}
+    </Story>
+        <b>Alternativ 50% mit externem Link</b>
+    <Story name="Alternativ 50 mit externem Link" args={teaser50Link.logicItem.includeModel}>
+        {Template.bind({})}
     </Story>
     <Story name="Alternativ 50 mit Download" args={teaser50Download.logicItem.includeModel}>
         {Template.bind({})}

package/src/stories/views/components/teaser/teaser_standard.stories.mdx CHANGED Viewed

@@ -2,12 +2,17 @@ import { ArgsTable, Meta, Story, Canvas, Preview } from '@storybook/addon-docs'
 import teaser from './teaser_standard.hbs'
 import teaserHeroSerifWithLabel from './fixtures/teaser_standard_hero_serif_label.json'
 import teaserHeroSerifWithComments from './fixtures/teaser_standard_hero_serif_comments.json'
+import teaserHeroLink from './fixtures/teaser_standard_hero_serif_link.json'
 import teaserHeroSerif from './fixtures/teaser_standard_hero_serif.json'
 import teaser100Serif from './fixtures/teaser_standard_100_serif.json'
 import teaser50Serif from './fixtures/teaser_standard_50_serif.json'
 import teaser33Serif from './fixtures/teaser_standard_33_serif.json'
 import teaser25Serif from './fixtures/teaser_standard_25_serif.json'
 import teaser100Download from './fixtures/teaser_standard_100_serif_download.json'
+import teaser100Link from './fixtures/teaser_standard_100_serif_link.json'
+import teaser50Link from './fixtures/teaser_standard_50_serif_link.json'
+import teaser33Link from './fixtures/teaser_standard_33_serif_link.json'
+import teaser25Link from './fixtures/teaser_standard_25_serif_link.json'
 <Meta
     title="Komponenten/Teaser/Standard"
@@ -100,18 +105,33 @@ Die Standard-Teaser-Komponente wird in handlebars wie folgt eingebaut:
     >
         {Template.bind({})}
     </Story>
+    <Story name="Standard Hero mit externem Link" args={teaserHeroLink.logicItem.includeModel}>
+        {Template.bind({})}
+    </Story>
     <Story name="Standard 100" args={teaser100Serif.logicItem.includeModel}>
         {Template.bind({})}
     </Story>
+    <Story name="Standard 100 mit externem Link" args={teaser100Link.logicItem.includeModel}>
+        {Template.bind({})}
+    </Story>
     <Story name="Standard 50" args={teaser50Serif.logicItem.includeModel}>
         {Template.bind({})}
+    </Story>
+        <Story name="Standard 50 mit externem Link" args={teaser50Link.logicItem.includeModel}>
+        {Template.bind({})}
     </Story>
     <Story name="Standard 33" args={teaser33Serif.logicItem.includeModel}>
         {Template.bind({})}
     </Story>
+    <Story name="Standard 33 mit externem Link" args={teaser33Link.logicItem.includeModel}>
+        {Template.bind({})}
+    </Story>
     <Story name="Standard 25" args={teaser25Serif.logicItem.includeModel}>
         {Template.bind({})}
     </Story>
+    <Story name="Standard 25 mit externem Link" args={teaser25Link.logicItem.includeModel}>
+        {Template.bind({})}
+    </Story>
     <Story name="Standard 100 Mit Download" args={teaser100Download.logicItem.includeModel}>
         {Template.bind({})}
     </Story>