hr-design-system-handlebars 1.75.6 → 1.76.0

package/dist/assets/index.css

@@ -3381,7 +3381,7 @@ article.indexTextDS .indexTextHighlighted .link {
   border-bottom-color: var(--color-secondary-ds);
 }
 .counter-reset {
-  counter-reset: cnt1719939179953;
+  counter-reset: cnt1719999527390;
 }
 .hyphens-auto {
   -webkit-hyphens: auto;
@@ -3466,6 +3466,22 @@ article.indexTextDS .indexTextHighlighted .link {
             clear: both;
         }
     }
+.ar-4-1 {
+        aspect-ratio: 4 / 1;
+    }
+@supports not (aspect-ratio: 4 / 1) {
+        .ar-4-1::before {
+            float: left;
+            padding-top: calc(1 / 4 * 100%);
+            content: '';
+        }
+
+        .ar-4-1::after {
+            display: block;
+            content: '';
+            clear: both;
+        }
+    }
 .ar-1-1 {
         aspect-ratio: 1 / 1;
     }
@@ -3553,47 +3569,50 @@ article.indexTextDS .indexTextHighlighted .link {
         --narrow-max-width: calc(var(--breakpoint-md) - (var(--mobile-padding) * 2));
         --content-max-width: 940px;
         --breakout-size: calc((var(--content-max-width) - var(--narrow-max-width)) / 2);
-        
-        grid-template-columns: 
-        [full-width-start] minmax(var(--mobile-padding), var(--desktop-padding)) 
-        [content-start] minmax(0, var(--breakout-size)) 
-        [narrow-start] min(100% - (var(--mobile-padding) * 2),var(--narrow-max-width)) [narrow-end] 
-        minmax(0, var(--breakout-size)) [content-end] 
-        minmax(var(--mobile-padding), var(--desktop-padding)) [full-width-end]; 
+
+        grid-template-columns:
+            [full-width-start] minmax(var(--mobile-padding), var(--desktop-padding))
+            [content-start] minmax(0, var(--breakout-size))
+            [narrow-start] min(
+                100% - (var(--mobile-padding) * 2),
+                var(--narrow-max-width)
+            ) [narrow-end]
+            minmax(0, var(--breakout-size)) [content-end]
+            minmax(var(--mobile-padding), var(--desktop-padding)) [full-width-end];
         grid-column: main;
     }
-.grid-article > :not(.article-breakout):not(.article-full-width):not(.sticky){
+.grid-article > :not(.article-breakout):not(.article-full-width):not(.sticky) {
         grid-column: narrow;
     }
 .article-full-width {
         grid-column: full-width;
     }
-.copytextWrapper > :not(.article-breakout):not(.article-full-width){
+.copytextWrapper > :not(.article-breakout):not(.article-full-width) {
         grid-column: narrow;
     }
 .grid-content {
         grid-template-areas:
-    "head"
-    "main "
-    "aside";
+            'head'
+            'main '
+            'aside';
         grid-template-columns: 100%;
     }
-@media only screen and (min-width: 600px){
+@media only screen and (min-width: 600px) {
         .grid-content {
             grid-template-areas:
-    "head head"
-    "main  aside";
+                'head head'
+                'main  aside';
 
             grid-template-columns: 3fr 1fr;
         }
     }
-.head{
+.head {
         grid-area: head;
     }
-.main{
+.main {
         grid-area: main;
     }
-.aside{
+.aside {
         grid-area: aside;
     }
 .col-main {
@@ -3760,7 +3779,7 @@ article.indexTextDS .indexTextHighlighted .link {
   --tw-ring-color: rgba(255, 255, 255, 0.5);
 }
 .-ordered {
-  counter-increment: cnt1719939179953 1;
+  counter-increment: cnt1719999527390 1;
 }
 .-ordered::before {
   position: absolute;
@@ -3776,19 +3795,19 @@ article.indexTextDS .indexTextHighlighted .link {
   letter-spacing: .0125em;
   --tw-text-opacity: 1;
   color: rgba(0, 0, 0, var(--tw-text-opacity));
-  content: counter(cnt1719939179953);
+  content: counter(cnt1719999527390);
 }
 /*! ****************************/
 /*! DataPolicy stuff           */
 /*! ****************************/
-.toggleSwitch-checkbox:checked+.toggleSwitch-label::after {
+.toggleSwitch-checkbox:checked + .toggleSwitch-label::after {
   left: 27px;
 }
-.toggleSwitch-checkbox:checked+.toggleSwitch-label {
+.toggleSwitch-checkbox:checked + .toggleSwitch-label {
   background-color: #2c7e13;
   background-color: var(--color-toggle-confirmation);
 }
-.toggleSwitch-checkbox:focus+.toggleSwitch-label {
+.toggleSwitch-checkbox:focus + .toggleSwitch-label {
   --tw-shadow: 0 0 0 0.25rem;
   --tw-shadow-colored: 0 0 0 0.25rem var(--tw-shadow-color);
   box-shadow: 0 0 rgba(0,0,0,0), 0 0 rgba(0,0,0,0), var(--tw-shadow);
@@ -3872,7 +3891,7 @@ article.indexTextDS .indexTextHighlighted .link {
 /*! ***********************************/
 /*! restrict number of li-elements    */
 /*! **********************************/
-ul.restrictedToTwo li:nth-of-type(1n+2) .timelineBorder {
+ul.restrictedToTwo li:nth-of-type(1n + 2) .timelineBorder {
         display: none;
     }
 .\[-T\:\+Z\] {
@@ -6366,7 +6385,6 @@ ul.restrictedToTwo li:nth-of-type(1n+2) .timelineBorder {
         }
     }
 
-
     .sm\:ar-16-9 {
         aspect-ratio: 16 / 9;
     }
@@ -6951,7 +6969,6 @@ ul.restrictedToTwo li:nth-of-type(1n+2) .timelineBorder {
     transition-property: none;
   }
 
-
     .md\:ar-16-9 {
         aspect-ratio: 16 / 9;
     }
@@ -7065,7 +7082,7 @@ ul.restrictedToTwo li:nth-of-type(1n+2) .timelineBorder {
             padding-bottom: 10px;
             padding-bottom: var(--logo-padding-bottom-md);
         }
-    ul.md\:restrictedToTwo li:nth-of-type(1n+3) {
+    ul.md\:restrictedToTwo li:nth-of-type(1n + 3) {
         display: none;
     }
 
@@ -7073,7 +7090,7 @@ ul.restrictedToTwo li:nth-of-type(1n+2) .timelineBorder {
         padding-bottom: 0;
     }
 
-    ul.md\:restrictedToTwo li:nth-of-type(1n+2) .timelineBorder {
+    ul.md\:restrictedToTwo li:nth-of-type(1n + 2) .timelineBorder {
         display: none;
     }
 

package/dist/views/components/content/content_footer/content_footer.hbs

@@ -18,7 +18,7 @@
                 Sendung:
                 {{#if this.link}}
                     {{#>components/base/link _link=this.link _css="text-link hover:underline"~}}
-                        <span>{{~ ../this.programLabel ~}}</span>{{/components/base/link~}}{{~#if this.date~}},
+                        <span>{{~ this.programLabel ~}}</span>{{/components/base/link~}}{{~#if this.date~}},
                         <span>
                                 <time datetime="{{#if this.displayWithTime}}{{this.date.htmlDateTime}}{{else}}{{this.date.date}}{{/if}}"
                                       class="{{#if _isArticle}}{{else}}{{/if}} ">

package/dist/views/components/content/copytext/components/audio.hbs

@@ -1,9 +1,5 @@
-{{~#if (isStorybook)~}}
-    <div class="mt-6 italic text-gray-dark">coming soon: Audio-component</div>
-{{~else~}}    
-    {{#if this.showFullSize.isTrue }}
-        {{> modules/media/media_figure _addClass="copytext__clearBox dontPrint" _a11yIntro-loca="story_audio_intro_sr" _a11yOutro-loca="story_audio_outro_sr" }}
-    {{else}}
-        {{> modules/media/media_figure _addClass="copytext__box dontPrint" _a11yIntro-loca="story_audio_intro_sr" _a11yOutro-loca="story_audio_outro_sr" }}
-    {{/if}}
-{{~/if~}} 
+{{#if this.showFullSize.isTrue }}
+    {{> components/content/copytext/components/media/media_figure _addClass="print:hidden clear-both article-full-width sm:article-narrow mt-12 mb-6 sm:my-14" _cssClassCaption="mx-5 sm:mx-0" _a11yIntro-loca="story_audio_intro_sr" _a11yOutro-loca="story_audio_outro_sr" }}
+{{else}}
+    {{> components/content/copytext/components/media/media_figure _addClass="print:hidden article-full-width mt-12 mb-6 sm:my-7 sm:article-narrow sm:mr-5 sm:w-1/2 w-auto flex-col float-none sm:float-left break-inside-avoid page-break-inside-avoid" _cssClassCaption="mx-5 sm:mx-0" _a11yIntro-loca="story_audio_intro_sr" _a11yOutro-loca="story_audio_outro_sr" }}
+{{/if}}

package/dist/views/components/content/copytext/components/audioeventlivestream.hbs

@@ -1,9 +1,5 @@
-{{~#if (isStorybook)~}}
-    <div class="mt-6 italic text-gray-dark">coming soon: Audioevent-Livestream-component</div>
-{{~else~}}
-    {{#if this.showFullSize.isTrue }}
-        {{> modules/media/media_figure _addClass="copytext__clearBox dontPrint" _a11yIntro-loca="story_audio_intro_sr" _a11yOutro-loca="story_audio_outro_sr" }}
-    {{else}}
-        {{> modules/media/media_figure _addClass="copytext__box dontPrint" _a11yIntro-loca="story_audio_intro_sr" _a11yOutro-loca="story_audio_outro_sr" }}
-    {{/if}}
-{{~/if~}}
+{{#if this.showFullSize.isTrue }}
+    {{> components/content/copytext/components/media/media_figure _addClass="print:hidden clear-both article-full-width sm:article-narrow mt-12 mb-6 sm:my-14" _cssClassCaption="mx-5 sm:mx-0" _a11yIntro-loca="story_audio_event_livestream_intro_sr" _a11yOutro-loca="story_audio_event_livestream_outro_sr" }}
+{{else}}
+    {{> components/content/copytext/components/media/media_figure _addClass="print:hidden article-full-width mt-12 mb-6 sm:my-7 sm:article-narrow sm:mr-5 sm:w-1/2 w-auto flex-col float-none sm:float-left break-inside-avoid page-break-inside-avoid" _cssClassCaption="mx-5 sm:mx-0" _a11yIntro-loca="story_audio_event_livestream_intro_sr" _a11yOutro-loca="story_audio_event_livestream_outro_sr" }}
+{{/if}}

package/dist/views/components/content/copytext/components/image/{figcaption.hbs → collapsible_caption.hbs}

@@ -12,17 +12,8 @@
             }"
             @resize.window="open = false; $refs.caption.scrollHeight === $refs.caption.clientHeight ? truncated = false : truncated = true">
     <div  class="dark:text-text-dark overflow-anywhere hyphens-auto"  x-ref="caption" 
-    {{#if _fullSize}} :class="!open ? 'line-clamp-2 md:line-clamp-none' : 'line-clamp-none'" {{else}} :class="!open ? 'line-clamp-2' : 'line-clamp-none'" {{/if}}>
-        {{#if this.caption}}
-            {{~#unless _hideCaption~}}
-                <span class="pr-3">
-                    {{this.caption}} 
-                </span>
-            {{~/unless~}}
-        {{/if}}
-        <span class="text-gray-scorpion dark:text-text-dark">
-            {{~loca "figures_copyright"}} {{{copyrightWithLinks}}} 
-        </span>
+    {{#if this.showFullSize.isTrue}} :class="!open ? 'line-clamp-2 md:line-clamp-none' : 'line-clamp-none'" {{else}} :class="!open ? 'line-clamp-2' : 'line-clamp-none'" {{/if}}>
+        {{> @partial-block }}
     </div>
     <template x-if="truncated">
         <button x-cloak 

package/dist/views/components/content/copytext/components/image/figure.hbs

@@ -16,6 +16,9 @@
         {{/if}}
     {{/if}}
     {{#unless _voting-option}}
-        {{~> components/content/copytext/components/image/figcaption _fullSize=this.showFullSize.isTrue _cssClassCaption=_cssClassCaption~}}
+        {{~#> components/content/copytext/components/image/collapsible_caption _cssClassCaption=_cssClassCaption~}}
+                {{~> components/content/copytext/components/image/image_caption_text}}
+                {{~> components/content/copytext/components/image/image_copyright}}
+        {{/components/content/copytext/components/image/collapsible_caption }}
     {{/unless}}
 </figure>

package/dist/views/components/content/copytext/components/image/image_caption_text.hbs

@@ -0,0 +1,3 @@
+<span class="pr-3">
+    {{this.caption}} 
+</span>

package/dist/views/components/content/copytext/components/image/image_copyright.hbs

@@ -0,0 +1,3 @@
+<span class="text-gray-scorpion dark:text-text-dark">
+    {{~loca "figures_copyright"}} {{{this.copyrightWithLinks}}} 
+</span>

package/dist/views/components/content/copytext/components/media/media_figure.hbs

@@ -1,24 +1,32 @@
-<figure class="relative ar-16-9 {{_addClass}}" x-data="{ avStart: false }">
+<figure class="relative {{_addClass}}" x-data="{ avStart: false }">
     {{~> components/base/a11y/hiddenText _locaTag=_a11yIntro-loca ~}}
     {{#unless _voting-option}}
-        <figcaption class="py-3 sm:py-4 border-t-[3px] border-gray-boulder dark:border-text-dark {{_cssClassCaption}}">
+        <div class="py-3 sm:py-4 border-t-[3px] border-gray-boulder dark:border-text-dark {{_cssClassCaption}}">
             {{#if this.label}}
                 {{#> components/label/label_group _css="dark:text-text-dark"}}
                     {{#with this.label}}
-                        {{> components/label/label _type=this.type _text=(loca this.loca) }}
-                        {{> components/label/label_byline _css="ml-2"}}
-                    {{/with}}
-                    {{> components/content/copytext/components/media/media_figure_byline this}}
+                        {{~> components/label/label _type=this.type _text=(loca this.loca) }}
+                        {{~> components/label/label_byline _css="ml-2"}}
+                    {{/with~}}
+                    {{~> components/content/copytext/components/media/media_figure_byline this}}
                 {{/components/label/label_group}}
             {{/if~}}
-            {{#with this.toModel.mediaBacklinkToStoryTeaser}}
-                {{#>components/base/link _link=this.link _css="hover:underline hover:!decoration-1 text-link dark:text-link-dark"}}
-                    {{> components/content/copytext/components/media/media_figure_headline}}
-                {{/components/base/link}}
-            {{/with}}
-        </figcaption>
+            {{#if this.isVideo}}
+                {{#with this.toModel.mediaBacklinkToStoryTeaser}}
+                    {{#>components/base/link _link=this.link _css="hover:underline hover:!decoration-1 text-link dark:text-link-dark"}}
+                        {{> components/content/copytext/components/media/media_figure_headline}}
+                    {{/components/base/link}}
+                {{/with}}
+            {{/if}}
+        </div>
     {{/unless}}
-    {{#if this.isVideo}}
+    {{#if this.isAudioOnDemand}}
+        {{~> components/mediaplayer/media_player this.toModel.audioElement _uiTestHook="ui-test-audio-ondemand-player" _isAudioView=true _addClassImg=_addClassImg ~}}
+    {{/if}}
+    {{#if this.isAudioEventLivestream}}
+        {{~> components/mediaplayer/media_player this.toModel.audioLivestreamElement _uiTestHook="ui-test-audio-livestream-player" _isAudioView=true _addClassImg=_addClassImg ~}}
+    {{/if}}
+    {{#if this.isVideoOnDemand}}
         {{~> components/mediaplayer/media_player this.toModel.videoElement _uiTestHook="ui-test-video-ondemand-player" _isUsedInTeaser=true _addClassImg=_addClassImg ~}}
         {{~> components/teaser/components/teaser_media_player this _css="flex items-center justify-center" _isLead=_isLead _isUsedInCopytext=true _mediaButtonIcon="play_button" _mediaButtonLabel="Video" _aspectRatio="ar-16-9" _noDelay=(if _isLead true false)}}
     {{/if}}
@@ -27,9 +35,27 @@
         {{~> components/teaser/components/teaser_media_player this _css="flex items-center justify-center" _isLivestream=true _isLead=_isLead _isUsedInCopytext=true _mediaButtonIcon="play_button" _mediaButtonLabel="Live" _aspectRatio="ar-16-9" _noDelay=(if _isLead true false)}}
     {{/if}}
     {{#unless _voting-option}}
-        {{#with this.teaseritem}}
-            {{~> components/content/copytext/components/image/figcaption _fullSize=../_fullSize  _cssClassCaption=../_cssClassCaption~}}
-        {{/with}}
+        {{#if this.teaseritem}}
+            {{~#> components/content/copytext/components/image/collapsible_caption this.teaseritem _cssClassCaption="mx-5 sm:mx-0"}}
+                {{#unless ../../this.isAudio-adjust_context}}
+                    {{~> components/content/copytext/components/image/image_caption_text}}
+                {{/unless}}
+                {{~> components/content/copytext/components/image/image_copyright}}
+                {{#if ../../this.isAudio-adjust_context~}}
+                    <span class="mx-1">|</span>
+                    {{#with ../../this.toModel.mediaBacklinkToStoryTeaser-adjust_context}}
+                        {{~#>components/base/link _link=this.link _css="hover:underline hover:!decoration-1 text-link dark:text-link-dark"~}}
+                            <span>
+                                {{~this.readMore~}}
+                                {{~#if this.hasIcon}}
+                                    {{~> components/base/image/icon _icon=this.iconName _iconmap="icons" _addClass="inline -mt-0.5 ml-1 w-5 h-5 fill-current"~}}
+                                {{~/if~}}
+                            </span>
+                        {{/components/base/link}}
+                    {{/with}}
+                {{/if}}
+            {{~/components/content/copytext/components/image/collapsible_caption}}
+        {{/if}}
     {{/unless}}
     {{~> components/base/a11y/hiddenText _locaTag=_a11yOutro-loca ~}}
 </figure>

package/dist/views/components/content/copytext/components/media/media_figure_byline.hbs

@@ -1,15 +1,25 @@
-<span class='text-xs text-inherit font-headingSerif{{#if _css}} {{_css}}{{/if}}'>
-    {{~#if this.isVideo}}
-        {{#if this.copyright }} <span class="mx-1">|</span>{{/if}}
-        {{~#with this.copyright}}
-            {{this}}{{#if ../this.airdateDate }} <span class="mx-1">|</span>{{/if}}
-        {{/with}}
+<span class='text-xs text-inherit font-headingSerif{{#if _css}} {{_css}}{{/if~}}'>
+    {{~#if this.showAirdate}}
         {{~#with this.airdateDate ~}}
-            {{~#if this.airdateWithoutTime ~}}
+            <span class="mx-1">|</span>
+            {{#if ../this.isAudioOnDemand}}
                 <time datetime="{{this.htmlDate}}">{{this.date}}</time>
             {{else}}
-                <time datetime="{{this.htmlDateTime}}">{{loca "date_simple_at" this.dateSeparatorTime }}</time>
-            {{~/if~}}
+                {{~#if this.airdateWithoutTime ~}}
+                    <time datetime="{{this.htmlDate}}">{{this.date}}</time>
+                {{~else~}}
+                    <time datetime="{{this.htmlDateTime}}">{{loca "date_simple_at" this.dateSeparatorTime }}</time>
+                {{~/if~}}
+                {{/if}}
         {{~/with~}}
+        {{~#if this.isVideoOnDemand}}
+            {{~#with this.copyright~}}
+                <span class="mx-1">|</span>{{this}}
+            {{/with}}
+        {{else}}
+            {{~#with this.audioAuthor~}}
+                <span class="mx-1">|</span>{{this}}
+            {{/with}}
+        {{/if}}
     {{/if}}
 </span>

package/dist/views/components/content/copytext/components/media/media_figure_headline.hbs

@@ -1,11 +1,11 @@
 <h3 class="mt-1">
-    {{> components/base/a11y/ariaLabelText _text=this.content.readMoreScreenreader }}
+    {{> components/base/a11y/ariaLabelText _text=this.readMoreScreenreader }}
     <span class="text-lg sm480:text-xl font-headingSerif dark:text-text-dark">
-        {{this.content.title}}
+        {{this.title}}
     </span>
-    {{~#if this.content.isForeignBrand}}
+    {{~#if this.isForeignBrand}}
         <span aria-hidden=true class="ml-4">
-            [{{this.content.readMore}}
+            [{{this.readMore}}
             {{~#if this.hasIcon}}
                 {{~> components/base/image/icon _icon=this.iconName _iconmap="icons" _addClass="inline -mt-0.5 ml-1 w-5 h-5 fill-current"~}}
             {{/if~}}]

package/dist/views/components/content/copytext/components/video/video.hbs

@@ -1,5 +1,5 @@
 {{#if this.showFullSize.isTrue }}
-    {{> components/content/copytext/components/media/media_figure _fullSize=true _addClass="print:hidden clear-both article-full-width sm:article-narrow my-6 sm:my-7" _cssClassCaption="mx-5 sm:mx-0" _a11yIntro-loca="story_video_intro_sr" _a11yOutro-loca="story_video_outro_sr" }}
+    {{> components/content/copytext/components/media/media_figure _fullSize=true _addClass="print:hidden clear-both article-full-width sm:article-narrow mt-12 mb-6 sm:my-14" _cssClassCaption="mx-5 sm:mx-0" _a11yIntro-loca="story_video_intro_sr" _a11yOutro-loca="story_video_outro_sr" }}
 {{else}}
-    {{> components/content/copytext/components/media/media_figure _fullSize=false _addClass="print:hidden article-full-width sm:article-narrow my-6 sm:my-7 sm:mr-5 sm:w-1/2 w-auto flex-col float-none sm:float-left break-inside-avoid page-break-inside-avoid" _cssClassCaption="mx-5 sm:mx-0" _a11yIntro-loca="story_video_intro_sr" _a11yOutro-loca="story_video_outro_sr" }}
+    {{> components/content/copytext/components/media/media_figure _fullSize=false _addClass="print:hidden article-full-width sm:article-narrow mt-12 mb-6 sm:my-7 sm:mr-5 sm:w-1/2 w-auto flex-col float-none sm:float-left break-inside-avoid page-break-inside-avoid" _cssClassCaption="mx-5 sm:mx-0" _a11yIntro-loca="story_video_intro_sr" _a11yOutro-loca="story_video_outro_sr" }}
 {{/if}} 

package/dist/views/components/content/copytext/components/videolivestream.hbs

@@ -1,5 +1,5 @@
 {{#if this.showFullSize.isTrue }}
-    {{> components/content/copytext/components/media/media_figure _fullSize=true _addClass="print:hidden clear-both article-full-width sm:article-narrow my-6 sm:my-7" _cssClassCaption="mx-5 sm:mx-0" _a11yIntro-loca="story_video_livestream_intro_sr" _a11yOutro-loca="story_video_livestream_outro_sr" }}
+    {{> components/content/copytext/components/media/media_figure _fullSize=true _addClass="print:hidden clear-both article-full-width sm:article-narrow mt-12 mb-6 sm:my-14" _cssClassCaption="mx-5 sm:mx-0" _a11yIntro-loca="story_video_livestream_intro_sr" _a11yOutro-loca="story_video_livestream_outro_sr" }}
 {{else}}
-    {{> components/content/copytext/components/media/media_figure _fullSize=false _addClass="print:hidden article-full-width sm:article-narrow my-6 sm:my-7 sm:mr-5 sm:w-1/2 w-auto flex-col float-none sm:float-left break-inside-avoid page-break-inside-avoid" _cssClassCaption="mx-5 sm:mx-0" _a11yIntro-loca="story_video_livestream_intro_sr" _a11yOutro-loca="story_video_livestream_outro_sr" }}
+    {{> components/content/copytext/components/media/media_figure _fullSize=false _addClass="print:hidden article-full-width sm:article-narrow mt-12 mb-6 sm:my-7 sm:mr-5 sm:w-1/2 w-auto flex-col float-none sm:float-left break-inside-avoid page-break-inside-avoid" _cssClassCaption="mx-5 sm:mx-0" _a11yIntro-loca="story_video_livestream_intro_sr" _a11yOutro-loca="story_video_livestream_outro_sr" }}
 {{/if}} 

package/dist/views/components/content/copytext/copytext.hbs

@@ -1,6 +1,6 @@
 <div class="contents sm:block copytextWrapper">
     {{~#with this.leadAudio }}
-        {{> modules/media/media_figure _addClass="copytext__clearBox dontPrint" _a11yIntro-loca="story_audio_intro_sr" _a11yOutro-loca="story_audio_outro_sr" }}
+        {{> components/content/copytext/components/media/media_figure _addClass="copytext__clearBox dontPrint" _a11yIntro-loca="story_audio_intro_sr" _a11yOutro-loca="story_audio_outro_sr" }}
     {{~/with}}    
     {{#each this.copytextParagraph }}
         {{~> components/content/copytext/copytext_body _isWebview=_isWebview ~}}

package/dist/views/components/content/copytext/copytext_body.hbs

@@ -27,7 +27,7 @@
         {{~#if this.isNewsletter}}
             {{> components/content/copytext/components/newsletter }}
         {{/if~}}
-        {{~#if this.isAudio}}
+        {{~#if this.isAudioOnDemand}}
             {{> components/content/copytext/components/audio }}
         {{/if~}}
         {{~#if this.isAudioEventLivestream}}
@@ -36,7 +36,7 @@
         {{~#if this.isPodcastEpisode}}
             {{> components/content/copytext/components/podcastepisode }}
         {{/if~}}
-        {{~#if this.isVideo}}
+        {{~#if this.isVideoOnDemand}}
             {{> components/content/copytext/components/video/video }}
         {{/if~}}
         {{~#if this.isLivestream}}

package/dist/views/components/label/label.hbs

@@ -2,8 +2,8 @@
     class='sb-label rounded px-1.5 pt-px inline-block tracking-wide text-white text-base leading-5.5 font-heading{{#if _css}} {{_css}}{{/if}} 
         {{inline-switch
             _type
-            '["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","kurzmeldung","location","topic","video"]'
-            '["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","bg-labelKurzmeldung","bg-labelEvent","bg-labelComment","bg-labelMedia"]'
+            '["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","kurzmeldung","location","topic","video","audio"]'
+            '["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","bg-labelKurzmeldung","bg-labelEvent","bg-labelComment","bg-labelMedia","bg-labelMedia"]'
         }}'
 >
     {{_text}}

package/dist/views/components/label/label_byline.hbs

@@ -1,17 +1,13 @@
 {{~#if _text~}}
-
-    <span class='font-bold font-heading{{#if _css}} {{_css}}{{/if}}'>{{~_text}}</span>
-
+    <span class='font-bold font-heading{{~#if _css}} {{_css}}{{/if}}'>{{~_text}}</span>
 {{~else~}}
-
-    {{#with this.byline}}
+    {{~#with this.byline~}}
         {{~#if this.bylineSsi~}}
-            {{> components/base/loadSSI this.bylineSsi _context=this.context _templatePath=this.bylineSsi}}
+            {{~> components/base/loadSSI this.bylineSsi _context=this.context _templatePath=this.bylineSsi~}}
         {{~else~}}
-            {{#> components/text/byline _css=../_css}}
-                {{this.bylineText}}
-            {{/components/text/byline}}
+            {{~#> components/text/byline _css=../_css~}}
+                {{~this.bylineText~}}
+            {{~/components/text/byline}}
         {{~/if~}}
     {{/with}}
-
 {{~/if~}}

package/dist/views/components/mediaplayer/media_player.hbs

@@ -1,2 +1,2 @@
-<div{{#if _isUsedInTeaser}} x-show="avStart" x-cloak{{/if}} id="{{this.ardPlayerConfig.playerId}}" class="{{#unless _isAudioView}}ar-16-9 {{/unless}}h-full {{~#if _addClassImg}} {{_addClassImg}}{{/if}} {{#if _isUsedInTeaser}} z-20{{/if}} js-load {{if _uiTestHook _uiTestHook 'ui-test-mediaplayer'}}" data-hr-mediaplayer-loader='{{json this.ardPlayerJsonConfig}}'>
+<div{{#if _isUsedInTeaser}} x-show="avStart" x-cloak{{/if}} id="{{this.ardPlayerConfig.playerId}}" class="{{#if _isAudioView}}ar-4-1 h-auto{{else}}ar-16-9 h-full{{/if}}{{~#if _addClassImg}} {{_addClassImg}}{{/if}} {{#if _isUsedInTeaser}} z-20{{/if}} js-load {{if _uiTestHook _uiTestHook 'ui-test-mediaplayer'}}" data-hr-mediaplayer-loader='{{json this.ardPlayerJsonConfig}}'>
 </div>

package/dist/views/components/page/story/story_article.hbs

@@ -18,7 +18,7 @@
                     _isWebview=../../../_webview-adjust_context
                     _noDelay=true}}
             {{/if}}
-            {{#if this.isVideo}}
+            {{#if this.isVideoOnDemand}}
                {{> components/content/copytext/components/media/media_figure _isLead=true _fullSize=true _addClass="print:hidden article-full-width md:article-breakout mt-12 mb-6 sm:mt-14 sm:mb-8" _cssClassCaption="mx-5 md:mx-0" _a11yIntro-loca="story_video_intro_sr" _a11yOutro-loca="story_video_outro_sr" }}
             {{/if}}
             {{#if this.isLivestream}}

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

@@ -11,7 +11,7 @@
           {{/with}}
      {{~/if~}}
      {{~#if this.isAudio ~}}
-          {{#with this.toModel.audioElement}}
+          {{#with this.toModel.audioElementForVideoView}}
                {{~> components/mediaplayer/media_player _uiTestHook="ui-test-audio-ondemand-player" _isUsedInTeaser=true _addClassImg=../../_addClassImg~}}                  
                {{#with ../../this}}
                     {{~> components/teaser/components/teaser_media_player _mediaButtonIcon="audio_button" _mediaButtonLabel="Audio" _aspectRatio=../../_aspectRatio-adjust_context _noDelay=this.dontLazyload}}
@@ -22,7 +22,7 @@
           {{/with}}
      {{~/if~}}
      {{~#if this.isPodcast ~}}
-          {{#with this.toModel.audioElement}}
+          {{#with this.toModel.audioElementForVideoView}}
                {{~> components/mediaplayer/media_player _uiTestHook="ui-test-audio-ondemand-player" _isUsedInTeaser=true _addClassImg=../../_addClassImg~}}             
                {{#with ../../this}}
                     {{~> components/teaser/components/teaser_media_player _mediaButtonIcon="audio_button" _mediaButtonLabel="Podcast" _aspectRatio=../../_aspectRatio-adjust_context _noDelay=this.dontLazyload}}
@@ -33,7 +33,7 @@
           {{/with}}
      {{~/if~}}
      {{~#if this.isAudioEventLivestream ~}}
-          {{#with this.toModel.audioLivestreamElement}}
+          {{#with this.toModel.audioLivestreamElementForVideoView}}
                {{~> components/mediaplayer/media_player _uiTestHook="ui-test-audio-livestream-player" _isUsedInTeaser=true _addClassImg=../../_addClassImg~}}             
                {{#with ../../this}}
                     {{~> components/teaser/components/teaser_media_player _mediaButtonIcon="play_button" _mediaButtonLabel="Live" _isLivestream=true _aspectRatio=../../_aspectRatio-adjust_context _noDelay=this.dontLazyload}}

package/dist/views_static/components/content/content_footer/content_footer.hbs

@@ -18,7 +18,7 @@
                 Sendung:
                 {{#if this.link}}
                     {{#>components/base/link _link=this.link _css="text-link hover:underline"~}}
-                        <span>{{~ ../this.programLabel ~}}</span>{{/components/base/link~}}{{~#if this.date~}},
+                        <span>{{~ this.programLabel ~}}</span>{{/components/base/link~}}{{~#if this.date~}},
                         <span>
                                 <time datetime="{{#if this.displayWithTime}}{{this.date.htmlDateTime}}{{else}}{{this.date.date}}{{/if}}"
                                       class="{{#if _isArticle}}{{else}}{{/if}} ">

package/dist/views_static/components/content/copytext/components/audio.hbs

@@ -1,9 +1,5 @@
-{{~#if (isStorybook)~}}
-    <div class="mt-6 italic text-gray-dark">coming soon: Audio-component</div>
-{{~else~}}    
-    {{#if this.showFullSize.isTrue }}
-        {{> modules/media/media_figure _addClass="copytext__clearBox dontPrint" _a11yIntro-loca="story_audio_intro_sr" _a11yOutro-loca="story_audio_outro_sr" }}
-    {{else}}
-        {{> modules/media/media_figure _addClass="copytext__box dontPrint" _a11yIntro-loca="story_audio_intro_sr" _a11yOutro-loca="story_audio_outro_sr" }}
-    {{/if}}
-{{~/if~}} 
+{{#if this.showFullSize.isTrue }}
+    {{> components/content/copytext/components/media/media_figure _addClass="print:hidden clear-both article-full-width sm:article-narrow mt-12 mb-6 sm:my-14" _cssClassCaption="mx-5 sm:mx-0" _a11yIntro-loca="story_audio_intro_sr" _a11yOutro-loca="story_audio_outro_sr" }}
+{{else}}
+    {{> components/content/copytext/components/media/media_figure _addClass="print:hidden article-full-width mt-12 mb-6 sm:my-7 sm:article-narrow sm:mr-5 sm:w-1/2 w-auto flex-col float-none sm:float-left break-inside-avoid page-break-inside-avoid" _cssClassCaption="mx-5 sm:mx-0" _a11yIntro-loca="story_audio_intro_sr" _a11yOutro-loca="story_audio_outro_sr" }}
+{{/if}}

package/dist/views_static/components/content/copytext/components/audioeventlivestream.hbs

@@ -1,9 +1,5 @@
-{{~#if (isStorybook)~}}
-    <div class="mt-6 italic text-gray-dark">coming soon: Audioevent-Livestream-component</div>
-{{~else~}}
-    {{#if this.showFullSize.isTrue }}
-        {{> modules/media/media_figure _addClass="copytext__clearBox dontPrint" _a11yIntro-loca="story_audio_intro_sr" _a11yOutro-loca="story_audio_outro_sr" }}
-    {{else}}
-        {{> modules/media/media_figure _addClass="copytext__box dontPrint" _a11yIntro-loca="story_audio_intro_sr" _a11yOutro-loca="story_audio_outro_sr" }}
-    {{/if}}
-{{~/if~}}
+{{#if this.showFullSize.isTrue }}
+    {{> components/content/copytext/components/media/media_figure _addClass="print:hidden clear-both article-full-width sm:article-narrow mt-12 mb-6 sm:my-14" _cssClassCaption="mx-5 sm:mx-0" _a11yIntro-loca="story_audio_event_livestream_intro_sr" _a11yOutro-loca="story_audio_event_livestream_outro_sr" }}
+{{else}}
+    {{> components/content/copytext/components/media/media_figure _addClass="print:hidden article-full-width mt-12 mb-6 sm:my-7 sm:article-narrow sm:mr-5 sm:w-1/2 w-auto flex-col float-none sm:float-left break-inside-avoid page-break-inside-avoid" _cssClassCaption="mx-5 sm:mx-0" _a11yIntro-loca="story_audio_event_livestream_intro_sr" _a11yOutro-loca="story_audio_event_livestream_outro_sr" }}
+{{/if}}

package/dist/views_static/components/content/copytext/components/image/{figcaption.hbs → collapsible_caption.hbs}

@@ -12,17 +12,8 @@
             }"
             @resize.window="open = false; $refs.caption.scrollHeight === $refs.caption.clientHeight ? truncated = false : truncated = true">
     <div  class="dark:text-text-dark overflow-anywhere hyphens-auto"  x-ref="caption" 
-    {{#if _fullSize}} :class="!open ? 'line-clamp-2 md:line-clamp-none' : 'line-clamp-none'" {{else}} :class="!open ? 'line-clamp-2' : 'line-clamp-none'" {{/if}}>
-        {{#if this.caption}}
-            {{~#unless _hideCaption~}}
-                <span class="pr-3">
-                    {{this.caption}} 
-                </span>
-            {{~/unless~}}
-        {{/if}}
-        <span class="text-gray-scorpion dark:text-text-dark">
-            {{~loca "figures_copyright"}} {{{copyrightWithLinks}}} 
-        </span>
+    {{#if this.showFullSize.isTrue}} :class="!open ? 'line-clamp-2 md:line-clamp-none' : 'line-clamp-none'" {{else}} :class="!open ? 'line-clamp-2' : 'line-clamp-none'" {{/if}}>
+        {{> @partial-block }}
     </div>
     <template x-if="truncated">
         <button x-cloak 

package/dist/views_static/components/content/copytext/components/image/figure.hbs

@@ -16,6 +16,9 @@
         {{/if}}
     {{/if}}
     {{#unless _voting-option}}
-        {{~> components/content/copytext/components/image/figcaption _fullSize=this.showFullSize.isTrue _cssClassCaption=_cssClassCaption~}}
+        {{~#> components/content/copytext/components/image/collapsible_caption _cssClassCaption=_cssClassCaption~}}
+                {{~> components/content/copytext/components/image/image_caption_text}}
+                {{~> components/content/copytext/components/image/image_copyright}}
+        {{/components/content/copytext/components/image/collapsible_caption }}
     {{/unless}}
 </figure>

package/dist/views_static/components/content/copytext/components/image/image_caption_text.hbs

@@ -0,0 +1,3 @@
+<span class="pr-3">
+    {{this.caption}} 
+</span>

package/dist/views_static/components/content/copytext/components/image/image_copyright.hbs

@@ -0,0 +1,3 @@
+<span class="text-gray-scorpion dark:text-text-dark">
+    {{~loca "figures_copyright"}} {{{this.copyrightWithLinks}}} 
+</span>