hr-design-system-handlebars 1.33.3 → 1.34.0

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

@@ -0,0 +1,27 @@
+{{#if this.isValid}}
+    <article class="cy-teaser-cluster{{if this.isOrdered '--ordered'}} mx-5 sm:mx-0 col-span-12 grid bg-highlight-1 rounded-tl-hr rounded-br-hr{{~inline-switch this.teaserSize '["25","33","50"]' '[" md:col-span-3"," md:col-span-4"," md:col-span-6",""]'}} ">
+        <div class="">
+                <h2 class="flex items-center px-5 py-5 text-clusterTeaserHeadline">
+                    {{#if this.teaserLogo}}
+                        <span>
+                            {{> components/base/image/icon _icon=this.teaserLogo _iconmap="cluster-teaser" _addClass=(inline-switch this.teaserLogo '["hessenschau_de","tagesschau_de","sportschau"]' '["fill-blue-congress w-10 md:w-12 h-10 md:h-12","fill-blue-midnight w-40 lg:w-52 h-8 md:h-12","fill-blue-deepSeaDream w-40 lg:w-52 h-8 md:h-12"]')}}
+                        </span>
+                    {{/if}}
+                    {{#if this.title}}
+                        <span class="overflow-anywhere hyphens-auto text-2xl border-clusterTeaserHeadline font-titleCluster {{#if this.teaserLogo}} pl-3 ml-3 border-l-2 border-solid {{/if}}{{#if this.hideTitle}} sr-only{{/if}}">{{this.title}}</span>
+                    {{/if}}
+                </h2>
+                {{> components/teaser/cluster/teaser_cluster_list _ordered=this.isOrdered}} 
+        </div>
+        {{~#with this.overviewLink}}
+            {{~#if this.link~}}
+                <div class="flex mx-5 pb-9 pt-6 min-w-0 {{~inline-switch ../this.realTeaserSize '["100"]' '[" justify-center md:justify-end"," justify-center"]'}}">
+                    {{~#> components/button/link_button _link=this.link _variant="secondary" _size="lg" _css="overflow-hidden"}}
+                        {{>components/button/components/button_label _label=this.title _css="flex-1 truncate"}}
+                        {{> components/button/components/button_icon _icon="arrow-right" _iconmap="icons" _css=""}}
+                    {{/components/button/link_button}}
+                </div>
+            {{~/if~}}
+        {{/with~}}
+    </article>
+{{/if}}

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

@@ -0,0 +1,33 @@
+
+{{#with this.teaserInfo}}
+    {{!--Teaser-Info--}}
+        {{#if this.showTeaserInfo~}}
+         <p class="mt-1 text-xs text-gray-scorpion font-headingSerif {{#if ../_ordered}} pl-8 {{/if}}">
+            {{~#if this.showTeaserInfoSection}}
+               <span>
+                  {{../this.documentSection~}}
+               </span>
+               <span class="mx-px last-of-type:hidden">|</span>
+            {{/if}}
+            {{~#if this.showTeaserInfoChannel}}
+                  <span>
+                     {{../this.podcastChannel.title}}
+                  </span>
+                  <span class="mx-px last-of-type:hidden">|</span>
+               {{/if}}
+            {{~#if this.showTeaserInfoDate}}
+               {{~#with ../this.teaserDate}}
+                  <time datetime="{{this.htmlDateTime}}">{{this.date}}</time>
+               {{/with~}}
+               <span class="mx-px last-of-type:hidden">|</span>
+            {{else}}
+                  {{~#if this.showTeaserInfoDateTime}}
+                     {{~#with ../this.teaserDate}}
+                        <time datetime="{{this.htmlDateTime}}">{{loca "date_simple_at" this.dateSeparatorTime}}</time>
+                     {{/with~}}
+                     <span class="mx-px last-of-type:hidden">|</span>
+                  {{/if~}}
+            {{/if~}}
+            </p>
+        {{/if}}
+{{/with}}

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

@@ -0,0 +1,12 @@
+{{#>components/base/link _link=this.link _css=(appendToDefault (if _firstItem "ds-teaser-focus") "block group") }} 
+    {{#if this.label}}
+        {{#> components/label/label_group _css=(if _ordered "pl-8")}}
+            {{> components/label/label _type=this.label.type _text=(loca this.label.loca) _css=""}}
+            {{> components/label/label_byline _css="ml-2"}}
+        {{/components/label/label_group}}
+    {{/if~}}
+    {{#> components/teaser/components/teaser_headline _css="" _headlineTag="h3"}}
+        {{> components/teaser/components/teaser_title _css=(appendToDefault (if _ordered " pl-8") "group-hover:underline text-clusterTeaserLink") _text=this.title _size=_size _teaserType="cluster" _firstItem=_firstItem}}
+    {{/components/teaser/components/teaser_headline}}    
+{{/components/base/link}}
+{{> components/teaser/cluster/teaser_cluster_byline _ordered=_ordered}}

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

@@ -0,0 +1,32 @@
+<div class="flex flex-col {{~#if this.showFirstImageOrGenreImage}}{{~inline-switch this.realTeaserSize '["100"]' '[" md:flex-row md:gap-x-6"]'}}{{~/if~}}">
+    {{~#if this.showGenreImage}}
+        <div class="pb-5{{~inline-switch this.realTeaserSize '["100"]' '[" md:basis-1/2-gap-6 lg:basis-1/3-gap-6 md:ar-1-1 md:pl-5"]'}}">
+            {{~> components/base/image/responsive_image this.genreImage _type=this.teaserType _variant=this.imageVariant _addClass=this.aspectRatio ~}}
+        </div>
+    {{~/if~}}
+    {{~#if this.showFirstImage}}
+        {{~#with this.firstEntry~}}
+            {{~#if this.teaserImage}}
+                <div class="pb-3 relative{{~inline-switch ../this.realTeaserSize '["100"]' '[" md:basis-1/2-gap-6 lg:basis-1/3-gap-6 md:pl-5"]'}}">   
+                    {{~> components/base/image/responsive_image this.teaserImage _type=../this.teaserType _variant=../this.imageVariant _addClass=../this.aspectRatio ~}}
+                    <div class="mx-5 mt-3{{~inline-switch ../this.realTeaserSize '["100"]' '[" md:mx-0"]'}}">
+                        {{> components/teaser/cluster/teaser_cluster_item _size=../this.realTeaserSize _ordered=../this.isOrdered _firstItem=true}}
+                    </div> 
+                </div>   
+            {{/if~}}
+        {{~/with~}}
+    {{/if~}}
+    {{~#with this.clusterTeaserItems}}
+        {{~#if ../this.isOrdered}}
+            <ol class="cy-teaser-cluster__list mx-5 list-none divide-y divide-white divide-solid counter-reset border-t border-white{{~#if ../this.showFirstImageOrGenreImage}}{{~inline-switch ../this.realTeaserSize '["100"]' '[" md:-pt-5 md:mx-0 md:pr-5 md:border-none md:basis-1/2-gap-6 lg:basis-2/3-gap-6"]'}}{{/if~}}">
+        {{else}}
+            <ul class="cy-teaser-cluster__list mx-5 divide-y divide-white divide-solid border-t border-white {{~#if ../this.showFirstImageOrGenreImage}}{{~inline-switch ../this.realTeaserSize '["100"]' '[" md:-pt-5 md:mx-0 md:pr-5 md:border-none md:basis-1/2-gap-6 lg:basis-2/3-gap-6"]'}}{{/if~}}">
+        {{/if}}
+            {{~#each this~}}
+                <li class="cy-teaser-cluster__item {{#if ../../this.isOrdered}}-ordered{{/if}} py-3{{#unless ../../this.overviewLink.link}} last-of-type:pb-3{{/unless~}}{{~#if ../../this.showFirstImageOrGenreImage}}{{~inline-switch ../../this.realTeaserSize '["100"]' '[" md:first-of-type:pt-0"]'}}{{/if~}}">
+                    {{> components/teaser/cluster/teaser_cluster_item _size=../this.realTeaserSize _ordered=../../this.isOrdered }} 
+                </li>
+            {{~/each}}
+        {{~#if ../this.isOrdered}}</ol>{{else}}</ul>{{/if~}}
+    {{/with~}}
+</div>

package/dist/views_static/components/teaser/components/teaser_av_consumption.hbs

@@ -0,0 +1,43 @@
+{{#with this.teaserLead.avDocument}}
+     {{~#if this.isVideo ~}}
+          {{#with this.toModel.videoElement}}
+               {{~> components/mediaplayer/media_player _cypressHook="js-video-ondemand" _mediaButtonIcon="play_button" _mediaButtonLabel="Video" _isTeaser=true _teaser=../../this _aspectRatio=../../_aspectRatio _teaserSize=../../_teaserSize _isMobile1to1=../../_isMobile1to1 _geotag=../../this.geotag _hideGeotag=../../this.hideGeotag _teaserType=../../_teaserType _addClassImg=../../_addClassImg~}}
+               {{#if ../../_isMobile1to1~}}  
+                    {{> components/teaser/components/teaser_av_consumption_close_button _playerId=this.ardPlayerConfig.playerId }}
+               {{~/if~}}
+          {{/with}}
+     {{~/if~}}
+     {{~#if this.isAudio ~}}
+          {{#with this.toModel.audioElement}}
+               {{~> components/mediaplayer/media_player _cypressHook="js-audio-ondemand" _mediaButtonIcon="audio_button" _mediaButtonLabel="Audio" _isTeaser=true _teaser=../../this _audioUrl=../this.audioUrl _variant=../this.imageVariant _noDelay=../../_noDelay _aspectRatio=../../_aspectRatio _isMobile1to1=../../_isMobile1to1 _teaserSize=../../_teaserSize _geotag=../../this.geotag _hideGeotag=../../this.hideGeotag _teaserType=../../_teaserType _addClassImg=../../_addClassImg~}}                  
+               {{#if ../../_isMobile1to1~}}  
+                    {{> components/teaser/components/teaser_av_consumption_close_button _playerId=this.ardPlayerConfig.playerId }}
+               {{~/if~}}
+          {{/with}}
+     {{~/if~}}
+     {{~#if this.isPodcast ~}}
+          {{#with this.toModel.audioElement}}
+               {{~> components/mediaplayer/media_player _cypressHook="js-audio-ondemand" _mediaButtonIcon="audio_button" _mediaButtonLabel="Podcast" _isTeaser=true _teaser=../../this _audioUrl=../this.audioUrl _variant=../this.imageVariant _noDelay=../../_noDelay _aspectRatio=../../_aspectRatio _isMobile1to1=../../_isMobile1to1 _teaserSize=../../_teaserSize _geotag=../../this.geotag _hideGeotag=../../this.hideGeotag _teaserType=../../_teaserType _addClassImg=../../_addClassImg~}}             
+               {{#if ../../_isMobile1to1~}}  
+                    {{> components/teaser/components/teaser_av_consumption_close_button _playerId=this.ardPlayerConfig.playerId }}
+               {{~/if~}}
+          {{/with}}
+     {{~/if~}}
+     {{~#if this.isAudioEventLivestream ~}}
+          {{#with this.toModel.audioLivestreamElement}}
+               {{~> components/mediaplayer/media_player _cypressHook="js-video-livestream" _mediaButtonIcon="play_button" _mediaButtonLabel="Live" _isLivestream="true" _isTeaser=true _teaser=../../this  _audioUrl=../this.audioUrl _variant=../this.imageVariant _noDelay=../../_noDelay _aspectRatio=../../_aspectRatio _isMobile1to1=../../_isMobile1to1 _teaserSize=../../_teaserSize _geotag=../../this.geotag _hideGeotag=../../this.hideGeotag _teaserType=../../_teaserType _addClassImg=../../_addClassImg~}}             
+               {{#if ../../_isMobile1to1~}}  
+                    {{> components/teaser/components/teaser_av_consumption_close_button _playerId=this.ardPlayerConfig.playerId }}
+               {{~/if~}}
+          {{/with}}
+     {{~/if~}}
+     {{~#if this.isLivestream ~}}
+          {{#with this.toModel.videoLivestreamElement}}
+               {{~> components/mediaplayer/media_player _cypressHook="js-video-livestream" _mediaButtonIcon="play_button" _mediaButtonLabel="Live" _isLivestream="true" _isTeaser=true _teaser=../../this  _audioUrl=../this.audioUrl _variant=../this.imageVariant _noDelay=../../_noDelay _aspectRatio=../../_aspectRatio _isMobile1to1=../../_isMobile1to1 _teaserSize=../../_teaserSize _geotag=../../this.geotag _hideGeotag=../../this.hideGeotag _teaserType=../../_teaserType _addClassImg=../../_addClassImg~}}             
+               {{#if ../../_isMobile1to1~}}  
+                    {{> components/teaser/components/teaser_av_consumption_close_button _playerId=this.ardPlayerConfig.playerId }}
+               {{~/if~}}
+          {{/with}}
+     {{~/if~}}
+    
+{{/with}}

package/dist/views_static/components/teaser/components/teaser_av_consumption_close_button.hbs

@@ -0,0 +1,6 @@
+{{#with this}}
+    {{#> components/button/button _css="absolute top-full right-0 py-3.5 px-3.5 text-blue-700 font-semibold z-20 md:hidden hover:bg-slate-300" _title="Mediaplayer schließen" _variant="tertiary" _x-show="avStart" _alpineClick=(loca "close_button_alpine_click" _playerId)}}
+        {{> components/base/image/icon _icon="arrow-up"  _addClass="w-3 h-3 fill-current"}}
+    {{/components/button/button}} 
+    {{#*inline "css"}}{{/inline}}
+{{/with}}

package/dist/views_static/components/teaser/components/teaser_body.hbs

@@ -0,0 +1,40 @@
+<div class="{{#if _outerCssClasses}} {{_outerCssClasses}}{{/if}}" 
+{{~#if this.isMobile1to1}}:class="{'basis-full w-full md:pr-0 pr-10':avStart,'basis-3/5 w-3/5':!avStart}"{{/if}}>
+
+    
+    {{#with this}}
+        {{#> components/teaser/components/teaser_header _css=(if this.isMobile1to1 "" "px-5 sm:px-0")}}
+                {{#> components/base/link _link=this.link _css="cy-teaser-link ds-teaser-focus hover:text-toplineColor" }} 
+                    {{#with this.label}}
+                        {{#> components/label/label_group}}
+                            {{> components/label/label _type=this.type _css="" _text=(loca this.loca)}}
+                            {{> components/label/label_byline _css="ml-2" _text=../../../this.tickerTopic}}
+                        {{/components/label/label_group}}
+                    {{/with~}}
+                    {{#> components/teaser/components/teaser_headline _headlineTag=this.headlineTag _css="overflow-anywhere hyphens-auto"}}
+                        {{#if this.topline}}
+                            {{> components/teaser/components/teaser_topline _css="" _text=this.topline}}
+                        {{/if}}
+                        {{> components/teaser/components/teaser_title _css="" _text=this.title _size=this.realTeaserSize _teaserType=this.teaserType _isMobile1to1=this.isMobile1to1}}
+                        {{#if this.extendedTitle}}
+                            {{> components/teaser/components/teaser_subline _text=this.extendedTitle}}
+                        {{/if}}
+                    {{/components/teaser/components/teaser_headline}}
+                {{/components/base/link}} 
+        {{/components/teaser/components/teaser_header}}
+        {{#*inline "htmlProperties"}}
+            {{#if this.isFileDownload}}
+                {{> components/tracking/download_tracking}}
+            {{/if}}
+        {{/inline}}
+    {{/with}}
+
+    {{#unless this.hideBylineAndShorttext}}
+        <div class="sm:px-0{{#unless this.isMobile1to1}} px-5{{/unless}}">
+            {{#if this.shorttext}}
+                {{> components/teaser/components/teaser_text _text=this.shorttext _size=this.teaserSize}}
+            {{/if}}
+            {{> components/teaser/components/teaser_byline}} 
+        </div>
+    {{/unless}}
+</div>

package/dist/views_static/components/teaser/components/teaser_byline.hbs

@@ -0,0 +1,46 @@
+{{#if this.hasByline}}
+    <p class="mt-2 text-xs text-gray-scorpion font-headingSerif empty:hidden overflow-anywhere hyphens-auto">
+        {{!--Teaser-Info--}}
+        {{~#with this.teaserInfo~}}
+            {{~#if this.showTeaserInfo~}}
+                {{~#if this.showTeaserInfoDate~}}
+                    {{~#with ../this.teaserDate~}}
+                        <time datetime="{{this.htmlDateTime}}">{{this.date}}</time><span class="mx-1 last-of-type:hidden">|</span>
+                    {{~/with~}}
+                {{~/if~}}
+                {{~#if this.showTeaserInfoDateTime~}}
+                    {{~#with ../this.teaserDate~}}
+                        <time datetime="{{this.htmlDateTime}}">{{loca "date_simple_at" this.dateSeparatorTime}}</time><span class="mx-1 last-of-type:hidden">|</span>
+                    {{~/with~}}
+                {{~/if~}}
+                {{~#if this.showTeaserInfoSection~}}
+                    <span>
+                        {{~../this.documentSection~}}
+                    </span> <span class="mx-1 last-of-type:hidden">|</span>
+                {{~/if~}}
+                {{~#if this.showTeaserInfoChannel~}}
+                    {{../this.podcastChannel.title}}<span class="mx-1 last-of-type:hidden">|</span>
+                {{~/if~}}
+                {{~#if this.showTeaserInfoProgramRef~}}
+                    {{~#with ../this~}}
+                        {{> components/teaser/components/teaser_byline_airdate}}
+                    {{~/with~}}<span class="mx-1 last-of-type:hidden">|</span>
+                {{~/if~}}
+            {{~/if~}}
+        {{~/with~}}
+        {{!--File download--}}
+        {{~#if this.isFileDownload~}}
+            {{~#with this.teaserImage~}}
+                {{loca "gallery_image_copyright" this.copyrightWithLinks}}
+            {{~/with~}}
+        {{~/if~}}
+        {{!--Profiles--}}
+        {{~#if this.profiles~}}
+            <span>{{this.profiles}}</span> <span class="mx-1 last-of-type:hidden">|</span>
+        {{~/if~}}
+        {{!--Comments--}}
+        {{~#with this.commentsSsi~}}
+            {{> components/base/loadSSI _templatePath='components/teaser/components/teaser_comments' }}
+        {{~/with~}}
+    </p>
+{{/if}}

package/dist/views_static/components/teaser/components/teaser_byline_airdate.hbs

@@ -0,0 +1,34 @@
+{{#with ../this}}
+    {{~#if this.isAudio}}
+        {{~#with this.audioAuthor}}
+            {{this}}{{#if ../this.airdateDate }}<span class="mx-1">|</span>{{/if}}
+        {{/with}}
+        {{~#with this.airdateDate ~}}
+            <time datetime="{{this.htmlDate}}">{{this.date}}</time>
+        {{~/with~}}
+    {{/if}}
+
+    {{~#if this.isPodcastEpisode}}
+        {{~#with this.audioAuthor}}
+            {{this}}{{#if ../this.airdateDate }}<span class="mx-1">|</span>{{/if}}
+        {{/with}}
+        {{~#with this.airdateDate ~}}
+            <time datetime="{{this.htmlDate}}">{{this.date}}</time>
+        {{~/with~}}
+    {{/if}}
+
+    {{~#if this.isVideo}}
+        {{~#with this.copyright}}
+            {{this}}{{#if ../this.airdateDate }} <span class="mx-1">|</span>{{/if}}
+        {{/with}}
+
+        {{~#with this.airdateDate ~}}
+            {{~#if ../this.airdateWithoutTime ~}}
+                <time datetime="{{this.htmlDate}}">{{this.date}}</time>
+            {{else}}
+                <time datetime="{{this.htmlDateTime}}">{{loca "date_simple_at"
+                                                                this.dateSeparatorTime }}</time>
+            {{~/if~}}
+        {{~/with~}}
+    {{/if}}
+{{/with}}

package/dist/views_static/components/teaser/components/teaser_comments.hbs

@@ -0,0 +1,15 @@
+{{#if this.commentLink}}
+    <span class="relative whitespace-nowrap z-100">
+        {{#> components/base/link _link=this.commentLink.link _css="hover:underline decoration-1" _isAriaHidden=true}}
+            {{> components/base/image/icon _icon="kommentar" _iconmap="icons" _addClass="mr-0.5 inline w-5 h-5 text-toplineColor fill-current"}}
+            <span class="sr-only">{{loca "comment_anchor_1"}}</span>
+            <span class="text-toplineColor">{{this.commentNumber}}</span>
+            {{#if this.hasOneComment}}
+                <span class="text-toplineColor">{{loca "comment_label_text"}}</span>
+            {{else}}
+                <span class="text-toplineColor">{{loca "comment_label_text_many"}}</span>
+            {{/if}}
+            <span class="sr-only">{{loca "comment_anchor_2"}}</span>
+        {{/components/base/link}}
+    </span>
+{{/if}}

package/dist/views_static/components/teaser/components/teaser_header.hbs

@@ -0,0 +1,3 @@
+<header{{#if _css}} class="{{_css}}"{{/if}}>
+    {{> @partial-block }}
+</header>

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

@@ -0,0 +1,17 @@
+{{#with _label}}
+    <div class="leading-5.5{{#if ../_ordered}} pl-8 {{/if}}">
+        {{> components/label/label_old _type=this.type _text=(loca this.loca) _bylineCss=../_labelCss}}
+    </div>
+{{/with~}}
+
+<{{~ _headlineTag ~}}{{#if _headlineCss}} class="{{_headlineCss}}"{{/if}}>
+    {{~#block "headlineStart"}}{{/block~}}
+    {{#if _topline}}
+        {{> components/teaser/components/teaser_topline _css=(if _toplineCss _toplineCss "") _text=_topline _readMore=_readMore _teaserType=_teaserType}}
+    {{/if}}
+    {{> components/teaser/components/teaser_title_old _css=(if _titleCss _titleCss "") _text=_title _fontVariant=_fontVariant _size=_size _teaserType=_teaserType _isMobile1to1=_isMobile1to1 _firstItem=_firstItem _ordered=_ordered}}
+    {{#if _extendedTitle}}
+        <span class="block text-subline font-normal font-heading text-base sm:text-lg mt-1 sm:mt-1.5 leading-6">{{_extendedTitle}}</span>
+    {{/if}}
+    {{~#block "headlineEnd"}}{{/block~}}
+</{{~ _headlineTag ~}}>

package/dist/views_static/components/teaser/components/teaser_headline.hbs

@@ -0,0 +1,3 @@
+<{{~ defaultIfEmpty _headlineTag "h2"~}}{{#if _css}} class="{{_css}}"{{/if}}>
+    {{> @partial-block }}
+</{{~ defaultIfEmpty _headlineTag "h2" ~}}>

package/dist/views_static/components/teaser/components/teaser_image.hbs

@@ -0,0 +1,28 @@
+<div class="relative {{_aspectRatio}}">
+    {{#unless this.hideGeotag}}
+            {{~#with this.geotag}}
+                {{> components/geoTag/geoTag _text=this.[0].title _teaserSize=../_teaserSize _isMobile1to1=../_isMobile1to1 }}
+            {{/with~}}  
+    {{/unless}}
+    {{~> components/base/image/responsive_image this.teaserImage _type=this.teaserType _variant=this.imageVariant _noDelay=this.dontLazyload _addClassImg=_addClassImg ~}}
+    {{#if this.isProgram}}
+        {{#if this.showMediatheksLink}}
+            {{#with this}}
+                {{> components/base/image/icon _icon="play_button" _addClass="text-media-button fill-white hover:fill-media-button w-10 h-10 inline"}}
+                {{#*inline "css"~}}
+                    {{~> components/button/utilities/button_on_image_classes _teaserSize=this.teaserSize _teaserType=this.teaserType _isMobile1to1=_isMobile1to1}}
+                {{/inline}}
+            {{/with}}
+        {{/if}}
+    {{/if}}
+
+    {{#if this.isEvent}}
+        {{#unless this.displayTeaserBodyAsImageOverlay}}
+            {{#decorator 'components/teaser/components/teaser_image_overlay' _cssClasses="top-0 h-full"}}
+                <div class="flex flex-col items-center justify-center p-4">
+                    {{> components/event/instant_dates}}
+                </div>
+            {{/decorator}}
+        {{/unless}}
+    {{/if}}
+</div>

package/dist/views_static/components/teaser/components/teaser_image_overlay.hbs

@@ -0,0 +1,3 @@
+<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}}">
+    {{~ decorator_body ~}}  
+</div>

package/dist/views_static/components/teaser/components/teaser_lead.hbs

@@ -0,0 +1,7 @@
+{{~#if this.allowAVConsumption ~}}
+    {{> components/teaser/components/teaser_av_consumption _aspectRatio=_aspectRatio _isMobile1to1=_isMobile1to1 _teaserSize=_teaserSize _teaserType=_teaserType _addClassImg=_addClassImg}}
+{{else}}
+    {{#if this.isTickerTeaser}}<a href="{{this.link.url}}" aria-label="Zum Ticker" tabindex="-1">{{/if}}
+        {{> components/teaser/components/teaser_image _isMobile1to1=_isMobile1to1 _teaserSize=_teaserSize _addClassImg=_addClassImg _aspectRatio=_aspectRatio}}
+    {{#if this.isTickerTeaser}}</a>{{/if}}
+{{/if}}

package/dist/views_static/components/teaser/components/teaser_subline.hbs

@@ -0,0 +1,3 @@
+<span
+    class='block text-subline font-normal font-heading text-base sm:text-lg mt-1 sm:mt-1.5 leading-6'
+>{{_text}}</span>

package/dist/views_static/components/teaser/components/teaser_text.hbs

@@ -0,0 +1,12 @@
+<div class="mt-2 text-base font-copy">
+    <span class='flex space-around {{inline-switch _size '["25"]' '["hidden ","hidden md:inline "]'~}}'>
+        {{~_text~}}
+    </span>
+    {{#if this.isExtOrBrandLink}}
+        {{#>components/base/link _link=this.link _css="relative inline text-link z-20 ds-focus"}}
+            <span class="hover:underline decoration-1 font-copy">{{this.link.readMoreText.readMore}}{{~#if this.link.hasIcon}}{{> components/base/image/icon _icon=this.link.iconName _iconmap="icons" _addClass="inline -mt-0.5 w-5 h-5 fill-current ml-1"}}{{/if~}}</span>
+        {{/components/base/link}}
+        {{#*inline "htmlProperties"~}}
+        {{~/inline}}
+    {{/if}}
+</div>

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

@@ -0,0 +1,3 @@
+<span class='cy-teaser-title block mt-0.5 font-title font-bold {{> components/teaser/components/teaser_title_classes _size=_size _teaserType=_teaserType _isMobile1to1=_isMobile1to1 _firstItem=_firstItem}}{{#if _css}} {{_css}}{{/if}}'>
+    {{~_text~}}
+</span>

package/dist/views_static/components/teaser/components/teaser_title_classes.hbs

@@ -0,0 +1,111 @@
+{{! 
+This handlebars template is responisible to render the needed classnames for Teaser headlines
+As we use tailwind css no cascade is used to style components. As Teaser Headline Sizes dependent
+on 4 parameters the logic was outsourced to this file.
+
+the 4 parameters are:
+- teaserType
+- size
+- _isMobile1to1
+- fontVariant
+
+}}
+
+{{~#switch _teaserType~}}
+    {{~#case 'standard'~}}
+        {{~#if _isMobile1to1~}}
+            {{~inline-switch
+                _size
+                '["hero","100","25"]'
+                '["text-lg md:text-4xl","text-lg md:text-4xl","text-lg","text-lg md:text-2xl"]'
+            ~}}
+        {{~else~}}
+            {{~inline-switch
+                _size
+                '["hero","100","25"]'
+                '["text-2xl md:text-4xl","text-2xl md:text-4xl","text-lg","text-2xl"]'
+            ~}}
+        {{~/if~}}
+    {{~/case~}}
+    {{~#case 'event'~}}
+        {{~#if _isMobile1to1~}}
+            {{~inline-switch
+                _size
+                '["hero","100","25"]'
+                '["text-lg md:text-4xl","text-lg md:text-4xl","text-lg","text-lg md:text-2xl"]'
+            ~}}
+        {{~else~}}
+            {{~inline-switch
+                _size
+                '["hero","100","25"]'
+                '["text-2xl md:text-4xl","text-2xl md:text-4xl","text-lg","text-2xl"]'
+            ~}}
+        {{~/if~}}
+    {{~/case~}}
+    {{~#case 'tabbox-standard'~}}
+        {{~#if _isMobile1to1~}}
+            {{~inline-switch
+                _size
+                '["hero","100","25"]'
+                '["text-lg md:text-4xl","text-lg md:text-4xl","text-lg","text-lg md:text-2xl"]'
+            ~}}
+        {{~else~}}
+            {{~inline-switch
+                _size
+                '["hero","100","25"]'
+                '["text-2xl md:text-4xl","text-2xl md:text-4xl","text-lg","text-2xl"]'
+            ~}}
+        {{~/if~}}
+    {{~/case~}}
+    {{~#case 'alternative'~}}
+        {{~inline-switch
+            _size
+            '["hero","100","50"]'
+            '["text-2xl md:text-3xl","text-lg md:text-3xl","text-lg md:text-2xl"]'
+        ~}}
+    {{~/case~}}
+    {{~#case 'event-alternative'~}}
+        {{~inline-switch
+            _size
+            '["hero","100","50"]'
+            '["text-2xl md:text-3xl","text-lg md:text-3xl","text-lg md:text-2xl"]'
+        ~}}
+    {{~/case~}}
+    {{~#case 'tabbox-alternative'~}}
+        {{~inline-switch
+            _size
+            '["hero","100","50"]'
+            '["text-2xl md:text-3xl","text-lg md:text-3xl","text-lg md:text-2xl"]'
+        ~}}
+    {{~/case~}}
+    {{~#case 'poster'~}}
+        {{~inline-switch _size '["50","33"]' '["text-2xl md:text-4xl","text-2xl"]'~}}
+    {{~/case~}}
+    {{~#case 'cluster'~}}
+        {{#if _firstItem}}
+            {{~inline-switch _size '["100"]' '[" text-sm md:text-2xl"," text-sm"]'}}
+        {{else}}
+            text-sm
+        {{/if}}
+    {{~/case~}}
+    {{~#case 'stage'~}}
+        {{~inline-switch _size '["100"]' '[" text-2xl md:text-4xl"," text-2xl"]'}}
+    {{~/case~}}
+    {{~#case 'calendar'~}}
+       text-2xl
+    {{~/case~}}
+    {{~#case 'ticker-standard'~}}
+        {{~inline-switch
+            _size
+            '["hero","100","25"]'
+            '["text-2xl md:text-4xl","text-2xl md:text-4xl","text-2xl md:text-lg","text-2xl"]'
+        ~}}
+    {{~/case~}}
+    {{~#case 'ticker-alternative'~}}
+        {{~inline-switch
+            _size
+            '["hero","100","50"]'
+            '["text-2xl md:text-4xl","text-2xl md:text-2xl","text-lg md:text-2xl"]'
+        ~}}
+    {{~/case~}}
+{{~/switch~}}

package/dist/views_static/components/teaser/components/teaser_title_old.hbs

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

package/dist/views_static/components/teaser/components/teaser_topline.hbs

@@ -0,0 +1 @@
+<span class='pt-px block text-base text-toplineColor{{#if _css}} {{_css}}{{/if}} font-heading'>{{_text}}</span>

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

@@ -0,0 +1,6 @@
+<div id="{{nextRandom}}"
+    x-data="{ contentNavDropdownIsOpen: false}"
+    class="js-contentNavWrapper col-span-full 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 "]'}}"
+>
+    {{> components/content_nav/content_nav _teaserSize=this.realTeaserSize }}           
+</div>

package/dist/views_static/components/teaser/group_teaser/group_teaser.hbs

@@ -0,0 +1,14 @@
+{{#if this.hasGroupItems}}
+    {{#>components/grid/grid_group _backgroundColor=this.backgroundColor }} 
+            {{~#if this.hasGroupTitle}}
+                <{{if this.headlineTag this.headlineTag "h2"}} class="text-2xl {{#unless this.isRelatedContent}} md:text-4xl{{else}} justifyLine{{/unless}} col-span-full py-0 font-title {{#if this.backgroundColor}} text-center{{else}} headline-barrier{{/if}}">
+                    {{~#if this.hasLink}}<a class="no-underline hover:underline decoration-1 md:decoration-2 text-link" href="{{this.link.url}}">{{/if~}}
+                        {{this.groupTitle}}
+                    {{~#if this.hasLink}}</a>{{/if~}}
+                </{{if this.headlineTag this.headlineTag "h2"}}>
+            {{/if}}  
+            <div class="grid items-start content-start grid-cols-12 col-span-12 gap-x-6 gap-y-10 md:gap-y-14">
+                {{~> components/teaser/teaser_logic/teaser_logic ~}}
+            </div>
+    {{/components/grid/grid_group}}
+{{/if}}

package/dist/views_static/components/teaser/group_teaser/group_teaser_accented.hbs

@@ -0,0 +1,14 @@
+{{#if this.hasGroupItems}}
+    {{#>components/grid/grid_group size=this.teaserSize }}
+        <div class="grid items-start content-start h-auto grid-cols-12 col-span-12 py-5 mx-5 group-accented sm:p-5 sm:mx-0 rounded-tl-hr rounded-br-hr bg-highlight-1 gap-x-6 gap-y-5">
+            {{~#if this.hasGroupTitle}}
+                <h2 class="text-2xl md:text-4xl px-5 sm:px-0 col-span-full pt-0 pb-4 font-title {{#if this.backgroundColor}} text-center{{else}} headline-barrier{{/if}}">
+                    {{~#if this.hasLink}}<a class="no-underline hover:underline decoration-1 md:decoration-2 text-blue-science" href="{{this.link.url}}">{{/if~}}
+                    {{this.groupTitle}}
+                    {{~#if this.hasLink}}</a>{{/if~}}
+                </h2>
+            {{/if}}
+            {{~> components/teaser/teaser_logic/teaser_logic ~}}
+        </div>
+    {{/components/grid/grid_group}}
+{{/if}}

package/dist/views_static/components/teaser/podcast/podcast-playlist.hbs

@@ -0,0 +1,4 @@
+<div class="grid gap-y-6 relative gap-x-4 flex-col pt-5 mx-5 sm:mx-0 md:pt-5 bg-highlight-1 rounded-tl-hr rounded-br-hr col-span-12{{inline-switch this.teaserSize '["50"]' '[" md:col-span-6",""]'}}" >
+    {{> components/teaser/podcast/podcast_playlist_player _linkTitle="true" _isSinglePage=false _type="podcastPlaylistPlayerTeaser" }}
+</div>
+

package/dist/views_static/components/teaser/podcast/podcast.hbs

@@ -0,0 +1,3 @@
+<div class="relative grid flex-col col-span-12 mx-5 sm:mx-0 gap-y-6 gap-x-4 bg-highlight-1 rounded-tl-hr rounded-br-hr{{inline-switch this.teaserSize '["50"]' '[" md:col-span-6",""]'}}" > 
+    {{> components/teaser/podcast/podcast_player _linkTitle="true" _isSinglePage=true _type="podcastEpisodePlayerTeaser" }}
+</div>

package/dist/views_static/components/teaser/podcast/podcast_downloadbutton.hbs

@@ -0,0 +1,9 @@
+<a href="{{_url}}"
+    class="h-6 ds-link rounded-lg {{#if _addClass}}{{_addClass}}{{/if}}{{#with this.trackingData}} js-load{{/with}}"
+    {{#with this.trackingData}}
+        data-hr-click-tracking='{"settings": [{"type": "download", "clickLabel": "{{this.pageName}}", "secondLevelId": "{{this.secondLevelId}}"}, {"type": "uxAction", "clickLabel": "medienDownload::podcast::{{../_type}}", "secondLevelId": "{{this.secondLevelId}}" }]}'
+    {{/with}} 
+    aria-label="Podcast herunterladen"
+    download>
+    {{> components/base/image/icon _icon='download-neu' _addClass=_iconClass }}
+</a>

package/dist/views_static/components/teaser/podcast/podcast_item_title.hbs

@@ -0,0 +1,9 @@
+{{#>components/base/link _link=this.link
+    _css='w-full ds-link font-heading text-base text-podcast-text line-clamp-4'
+}}
+    <span
+        class='block hover:underline text-podcast-text text-base'
+    >
+        {{~_title~}}
+    </span>
+{{/components/base/link}}

package/dist/views_static/components/teaser/podcast/podcast_playbutton.hbs

@@ -0,0 +1,14 @@
+<button id="button{{_id}}" 
+    x-on:keydown.space.prevent.stop="{{_alpineClick}}" 
+    x-on:click.stop="{{_alpineClick}}" 
+    type="button" 
+    class="flex justify-start cursor-pointer group ds-button-round  {{_css}}"
+    aria-label="Podcast starten"
+    >           
+    <div class="text-white rounded-full js-playbutton bg-podcast ring-white ring js-load" data-hr-click-tracking='{"settings": [{"type": "uxAction", "clickLabel": "podcastPlayer:play"}]}'>
+        {{> components/base/image/icon _icon="play-wide" _iconmap="icons" _addClass="inline w-12 h-12 fill-current"}}
+    </div>
+    <div class="hidden bg-white rounded-full js-pausebutton ring-podcast ring text-podcast-text js-load" data-hr-click-tracking='{"settings": [{"type": "uxAction", "clickLabel": "podcastPlayer:pause"}]}'>
+        {{> components/base/image/icon _icon="pause" _iconmap="icons" _addClass="inline py-2 w-12 h-12 fill-current"}}
+    </div>  
+</button>