hr-design-system-handlebars 1.50.20 → 1.50.22

package/CHANGELOG.md

@@ -1,3 +1,27 @@
+# v1.50.22 (Wed Nov 29 2023)
+
+#### 🐛 Bug Fix
+
+- include poster-teaser in copytext [#770](https://github.com/mumprod/hr-design-system-handlebars/pull/770) ([@hanswurstsalat](https://github.com/hanswurstsalat))
+
+#### Authors: 1
+
+- Geraldo ([@hanswurstsalat](https://github.com/hanswurstsalat))
+
+---
+
+# v1.50.21 (Wed Nov 29 2023)
+
+#### 🐛 Bug Fix
+
+- adds darkmode to podcast shorttext and appendixes [#769](https://github.com/mumprod/hr-design-system-handlebars/pull/769) ([@StefanVesper](https://github.com/StefanVesper))
+
+#### Authors: 1
+
+- SonicSoulSurfer ([@StefanVesper](https://github.com/StefanVesper))
+
+---
+
 # v1.50.20 (Wed Nov 29 2023)
 
 #### 🐛 Bug Fix

package/dist/assets/index.css

@@ -1258,6 +1258,10 @@ article.indexText ul {
   margin-top: 1.5rem;
   margin-bottom: 1.5rem;
 }
+.my-7 {
+  margin-top: 1.75rem;
+  margin-bottom: 1.75rem;
+}
 .\!mt-4 {
   margin-top: 1rem !important;
 }
@@ -3191,7 +3195,7 @@ article.indexText ul {
   border-bottom-color: var(--color-secondary-ds);
 }
 .counter-reset {
-  counter-reset: cnt1701258018255;
+  counter-reset: cnt1701275297727;
 }
 .hyphens-auto {
   -webkit-hyphens: auto;
@@ -3222,7 +3226,7 @@ article.indexText ul {
             content: '';
         }
 
-        .ar-16-19::after {
+        .ar-16-9::after {
             display: block;
             content: '';
             clear: both;
@@ -3452,7 +3456,7 @@ article.indexText ul {
   --tw-ring-color: rgba(255, 255, 255, 0.5);
 }
 .-ordered {
-  counter-increment: cnt1701258018255 1;
+  counter-increment: cnt1701275297727 1;
 }
 .-ordered::before {
   position: absolute;
@@ -3468,7 +3472,7 @@ article.indexText ul {
   letter-spacing: .0125em;
   --tw-text-opacity: 1;
   color: rgba(0, 0, 0, var(--tw-text-opacity));
-  content: counter(cnt1701258018255);
+  content: counter(cnt1701275297727);
 }
 /*! ****************************/
 /*! DataPolicy stuff           */
@@ -5201,6 +5205,10 @@ article.indexText ul {
     margin-bottom: 1.25rem;
   }
 
+  .sm480\:mb-3 {
+    margin-bottom: 0.75rem;
+  }
+
   .sm480\:ml-8 {
     margin-left: 2rem;
   }
@@ -5241,6 +5249,63 @@ article.indexText ul {
     font-size: 1.25rem;
     line-height: 1.6875rem;
   }
+    .sm480\:ar-16-9 {
+        aspect-ratio: 16 / 9;
+    }
+
+    @supports not (aspect-ratio: 16 / 9) {
+        .sm480\:ar-16-9::before {
+            float: left;
+            padding-top: 56.25%;
+            content: '';
+        }
+
+        .sm480\:ar-16-9::after {
+            display: block;
+            content: '';
+            clear: both;
+        }
+        .sm480\:ar-16-9::before {
+            float: left;
+            padding-top: 56.25%;
+            content: '';
+        }
+
+        .sm480\:ar-16-9::after {
+            display: block;
+            content: '';
+            clear: both;
+        }
+    }
+
+    .sm480\:ar-16-7 {
+        aspect-ratio: 16 / 7;
+    }
+
+    @supports not (aspect-ratio: 16 / 7) {
+        .sm480\:ar-16-7::before {
+            float: left;
+            padding-top: 43.75%;
+            content: '';
+        }
+
+        .sm480\:ar-16-7::after {
+            display: block;
+            content: '';
+            clear: both;
+        }
+        .sm480\:ar-16-7::before {
+            float: left;
+            padding-top: 43.75%;
+            content: '';
+        }
+
+        .sm480\:ar-16-7::after {
+            display: block;
+            content: '';
+            clear: both;
+        }
+    }
     .sm480\:ar-16-7 {
         aspect-ratio: 16 / 7;
     }
@@ -5317,6 +5382,10 @@ article.indexText ul {
     margin-right: 2rem;
   }
 
+  .sm\:mb-7 {
+    margin-bottom: 1.75rem;
+  }
+
   .sm\:ml-8 {
     margin-left: 2rem;
   }
@@ -5467,7 +5536,18 @@ article.indexText ul {
             content: '';
         }
 
-         {
+        .sm\:ar-16-9::after {
+            display: block;
+            content: '';
+            clear: both;
+        }
+        .sm\:ar-16-9::before {
+            float: left;
+            padding-top: 56.25%;
+            content: '';
+        }
+
+        .sm\:ar-16-9::after {
             display: block;
             content: '';
             clear: both;
@@ -5588,6 +5668,11 @@ article.indexText ul {
     margin-right: 1.25rem;
   }
 
+  .md\:mx-auto {
+    margin-left: auto;
+    margin-right: auto;
+  }
+
   .md\:-mt-40 {
     margin-top: -10rem;
   }
@@ -5604,6 +5689,10 @@ article.indexText ul {
     margin-bottom: 4rem;
   }
 
+  .md\:mb-3 {
+    margin-bottom: 0.75rem;
+  }
+
   .md\:mb-8 {
     margin-bottom: 2rem;
   }
@@ -5616,6 +5705,10 @@ article.indexText ul {
     margin-left: 1rem;
   }
 
+  .md\:mr-5 {
+    margin-right: 1.25rem;
+  }
+
   .md\:mt-0 {
     margin-top: 0px;
   }
@@ -5703,6 +5796,10 @@ article.indexText ul {
     width: 3rem;
   }
 
+  .md\:w-2\/3 {
+    width: 66.666667%;
+  }
+
   .md\:w-22 {
     width: 5.5rem;
   }
@@ -6006,7 +6103,18 @@ article.indexText ul {
             content: '';
         }
 
-         {
+        .md\:ar-16-9::after {
+            display: block;
+            content: '';
+            clear: both;
+        }
+        .md\:ar-16-9::before {
+            float: left;
+            padding-top: 56.25%;
+            content: '';
+        }
+
+        .md\:ar-16-9::after {
             display: block;
             content: '';
             clear: both;

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

@@ -1,5 +1,7 @@
 {{~#if (isStorybook)~}}
-    <div class="mt-6 italic text-gray-dark">coming soon: Posterteaser-component</div>
+    <div class="{{#if this.showFullSize.isTrue }}clear-both w-full mt-12 {{#unless this.showStretched.isTrue }}md:w-2/3 md:mx-auto{{/unless}}{{else}}w-full md:w-1/2 float-left my-7 mr-0 md:mr-5{{/if}}">
+        {{> components/teaser/teaser_poster _isCopytext=true }} 
+    </div>    
 {{~else~}}
     {{> modules/teaser/poster-teaser/posterTeaser-story}}
 {{~/if~}} 

package/dist/views/components/geoTag/geoTag_list.hbs

@@ -1,10 +1,10 @@
 <div class="flex flex-wrap">
     <nav class="block" role="navigation" aria-label="{{loca "geotag_related_content_headline"}}">
-        <span class="text-sm uppercase font-headingSerif w-fit sm:w-full">{{loca "geotag_related_content_headline"}}</span><!--
+        <span class="text-sm uppercase font-headingSerif w-fit sm:w-full dark:text-standard-text-dark">{{loca "geotag_related_content_headline"}}</span><!--
         -->
         <ul class="flex flex-wrap gap-x-4 w-fit sm:w-full sm:pt-2 ">
             {{~#each this~}}
-                <li class="w-fit sm:w-full text-primary">
+                <li class="w-fit sm:w-full text-primary dark:text-standard-text-dark">
                     <a class="block hover:underline gap-x-1" href="{{this.url}}">
                         {{~> components/base/image/icon _icon="ortsmarke" _addClass="inline w-5 h-5 mr-2 fill-current"~}}
 

package/dist/views/components/podcast/components/podcast_player_shorttext.hbs

@@ -1,7 +1,7 @@
 {{#unless _isSinglePage}}
   {{#unless this.hideShortText}}
       {{~#with this.shorttext}}
-          <div class="col-span-12 text-sm md:text-base font-copy">
+          <div class="col-span-12 text-sm md:text-base font-copy dark:text-podcast-text-dark">
               <span class="c-teaser__shorttext"> {{this}} </span>
           </div>
       {{/with~}}

package/dist/views/components/podcast/components/podcast_playlist_shorttext.hbs

@@ -3,7 +3,7 @@
     {{#unless this.hideShortText}}
     {{~#with this.shorttext}}
         <div class="hidden pb-6 text-sm md:flex md:text-base font-copy dark:text-podcast-text-dark">
-        <span class="c-teaser__shorttext"> {{this}} </span>
+        <span class=""> {{this}} </span>
         </div>
     {{/with~}}
     {{/unless}}

package/dist/views/components/program_supplier/program_supplier.hbs

@@ -1,5 +1,5 @@
 <div class="flex flex-wrap">
-    <span class="text-sm uppercase font-headingSerif w-fit sm:w-full">{{loca 'epg_program_supplier' }}</span>
+    <span class="text-sm uppercase font-headingSerif w-fit sm:w-full dark:text-standard-text-dark">{{loca 'epg_program_supplier' }}</span>
     
     <div class='flex flex-wrap pt-2 w-fit sm:w-full gap-x-6 sm:gap-x-2 gap-y-2'>
         {{#if this.link}}
@@ -13,7 +13,7 @@
                         />
                     {{/with}}
                 {{else}}
-                    <span class='text-base font-bold text-primary hover:underline'>
+                    <span class='text-base font-bold text-primary hover:underline dark:text-standard-text-dark'>
                         {{this.title}}
                     </span>
                 {{/if}}
@@ -28,7 +28,7 @@
                     />
                 {{/with}}
             {{else}}
-                <span class='text-base font-bold text-primary hover:underline'>
+                <span class='text-base font-bold text-primary hover:underline dark:text-standard-text-dark'>
                     {{this.title}}
                 </span>
             {{/if}}

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

@@ -1,3 +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}}'>
+<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 _isCopytext=_isCopytext}}{{#if _css}} {{_css}}{{/if}}'>
     {{~_text~}}
 </span>

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

@@ -10,7 +10,6 @@ the 4 parameters are:
 - fontVariant
 
 }}
-
 {{~#switch _teaserType~}}
     {{~#case 'standard'~}}
         {{~#if _isMobile1to1~}}
@@ -79,7 +78,11 @@ the 4 parameters are:
         ~}}
     {{~/case~}}
     {{~#case 'poster'~}}
-        {{~inline-switch _size '["50","33"]' '["text-2xl md:text-4xl","text-2xl"]'~}}
+        {{#if _isCopytext~}}
+            {{~#if this.showFullSize.isTrue~}}text-2xl md:text-4xl{{else}}text-2xl{{~/if~}}
+        {{else}}
+            {{~inline-switch _size '["50","33"]' '["text-2xl md:text-4xl","text-2xl"]'~}}
+        {{/if}}    
     {{~/case~}}
     {{~#case 'cluster'~}}
         {{#if _firstItem}}

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

@@ -1,5 +1,5 @@
-<article class="mx-5 sm:mx-0 relative col-span-12 flex gap-y-5 gap-x-4 {{inline-switch this.teaserSize '["33","50"]' '["md:col-span-4 flex-col","md:col-span-6 flex-col","flex-col"]'}} ">
-    <figure class="ar-1-1" aria-hidden="true">
+<article class="{{#if _isCopytext~}}mx-0{{else}}mx-5 sm:mx-0{{/if}} relative col-span-12 flex gap-y-5 gap-x-4 {{inline-switch this.teaserSize '["33","50"]' '["md:col-span-4 flex-col","md:col-span-6 flex-col","flex-col"]'}} ">
+    <figure class="{{#if _isCopytext~}}{{#if this.showFullSize.isTrue }}{{#if this.showStretched.isTrue }}ar-1-1 sm480:ar-16-7{{else}}ar-1-1{{/if}}{{else}}ar-1-1 sm480:ar-16-9{{/if}}{{else}}ar-1-1{{/if}}" aria-hidden="true">
         {{~> components/base/image/responsive_image this.teaserImage _type=this.teaserType _variant=this.content.imageVariant _noDelay=../_noDelay _addClassImg="ar__content rounded-tl-hr rounded-br-hr" ~}}
     </figure> 
     <div class="absolute flex flex-col justify-center w-full h-full bg-gradient-to-t from-black rounded-tl-hr rounded-br-hr">
@@ -15,7 +15,7 @@
                     {{#if this.topline}}
                         {{> components/teaser/components/teaser_topline _css="!text-white" _text=this.topline}}
                     {{/if}}
-                    {{> components/teaser/components/teaser_title _css="whitespace-pre-wrap" _text=this.title _size=this.realTeaserSize _teaserType=this.teaserType}}
+                    {{> components/teaser/components/teaser_title _css="whitespace-pre-wrap" _text=this.title _size=this.realTeaserSize _teaserType=this.teaserType _isCopytext=_isCopytext}}
                     {{#if this.extendedTitle}}
                         {{> components/teaser/components/teaser_subline _text=this.extendedTitle}}
                     {{/if}}
@@ -23,9 +23,21 @@
             {{/components/teaser/components/teaser_header}}
         {{/components/base/link}}
         <span class="absolute flex items-end justify-center w-full h-full ds-cta">
-            {{#> components/button/link_button _link=this.link _size="lg" _css=(inline-switch this.realTeaserSize '["33","50"]' '["z-20 mb-7","z-20 mb-7 md:mb-16"]') _variant="secondary" _isAriaHidden=true _onBackground=true}}
-                {{> components/button/components/button_label _css="" _label=this.link.readMoreText.readMoreLong}}
-            {{/components/button/link_button}}
+            {{#if _isCopytext~}}
+                {{#if this.showFullSize.isTrue~}}
+                    {{#> components/button/link_button _link=this.link _size="lg" _css=(inline-switch this.showStretched.isTrue '[false,true]' '["z-20 mb-7 md:mb-16","z-20 mb-7 sm480:mb-3 sm:mb-7","z-20 mb-7 md:mb-16"]') _variant="secondary" _isAriaHidden=true _onBackground=true}}
+                        {{> components/button/components/button_label _css="" _label=this.link.readMoreText.readMoreLong}}
+                    {{/components/button/link_button}}
+                {{else}}
+                    {{#> components/button/link_button _link=this.link _size="lg" _css="z-20 mb-7 md:mb-3" _variant="secondary" _isAriaHidden=true _onBackground=true}}
+                        {{> components/button/components/button_label _css="" _label=this.link.readMoreText.readMoreLong}}
+                    {{/components/button/link_button}}
+                {{/if}}    
+            {{else}}
+                {{#> components/button/link_button _link=this.link _size="lg" _css=(inline-switch this.realTeaserSize '["33","50"]' '["z-20 mb-7","z-20 mb-7 md:mb-16"]') _variant="secondary" _isAriaHidden=true _onBackground=true}}
+                    {{> components/button/components/button_label _css="" _label=this.link.readMoreText.readMoreLong}}
+                {{/components/button/link_button}}
+            {{/if}}
         </span>
     </div>
 </article>

package/dist/views/components/topictag/topictag_list.hbs

@@ -1,10 +1,10 @@
 <div class="flex flex-wrap">
     <nav class="block" role="navigation" aria-label="{{loca "topictag_related_content_headline"}}">
-        <span class="text-sm uppercase font-headingSerif w-fit sm:w-full">{{loca "topictag_related_content_headline"}}</span><!--
+        <span class="text-sm uppercase font-headingSerif dark:text-standard-text-dark w-fit sm:w-full">{{loca "topictag_related_content_headline"}}</span><!--
         -->
         <ul class="flex flex-wrap sm:block gap-x-4 w-fit sm:w-full sm:pt-2 ">
             {{~#each this~}}
-                <li class="w-fit sm:w-full text-primary">
+                <li class="w-fit sm:w-full text-primary dark:text-standard-text-dark">
                     <a class="block line-clamp-1 hover:underline gap-x-1" href="{{this.url}}">
                         {{~> components/base/image/icon _icon="taglabel" _addClass="inline w-4 h-4 mr-2 fill-current"~}}
 

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

@@ -1,5 +1,7 @@
 {{~#if (isStorybook)~}}
-    <div class="mt-6 italic text-gray-dark">coming soon: Posterteaser-component</div>
+    <div class="{{#if this.showFullSize.isTrue }}clear-both w-full mt-12 {{#unless this.showStretched.isTrue }}md:w-2/3 md:mx-auto{{/unless}}{{else}}w-full md:w-1/2 float-left my-7 mr-0 md:mr-5{{/if}}">
+        {{> components/teaser/teaser_poster _isCopytext=true }} 
+    </div>    
 {{~else~}}
     {{> modules/teaser/poster-teaser/posterTeaser-story}}
 {{~/if~}} 

package/dist/views_static/components/geoTag/geoTag_list.hbs

@@ -1,10 +1,10 @@
 <div class="flex flex-wrap">
     <nav class="block" role="navigation" aria-label="{{loca "geotag_related_content_headline"}}">
-        <span class="text-sm uppercase font-headingSerif w-fit sm:w-full">{{loca "geotag_related_content_headline"}}</span><!--
+        <span class="text-sm uppercase font-headingSerif w-fit sm:w-full dark:text-standard-text-dark">{{loca "geotag_related_content_headline"}}</span><!--
         -->
         <ul class="flex flex-wrap gap-x-4 w-fit sm:w-full sm:pt-2 ">
             {{~#each this~}}
-                <li class="w-fit sm:w-full text-primary">
+                <li class="w-fit sm:w-full text-primary dark:text-standard-text-dark">
                     <a class="block hover:underline gap-x-1" href="{{this.url}}">
                         {{~> components/base/image/icon _icon="ortsmarke" _addClass="inline w-5 h-5 mr-2 fill-current"~}}
 

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

@@ -1,7 +1,7 @@
 {{#unless _isSinglePage}}
   {{#unless this.hideShortText}}
       {{~#with this.shorttext}}
-          <div class="col-span-12 text-sm md:text-base font-copy">
+          <div class="col-span-12 text-sm md:text-base font-copy dark:text-podcast-text-dark">
               <span class="c-teaser__shorttext"> {{this}} </span>
           </div>
       {{/with~}}

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

@@ -3,7 +3,7 @@
     {{#unless this.hideShortText}}
     {{~#with this.shorttext}}
         <div class="hidden pb-6 text-sm md:flex md:text-base font-copy dark:text-podcast-text-dark">
-        <span class="c-teaser__shorttext"> {{this}} </span>
+        <span class=""> {{this}} </span>
         </div>
     {{/with~}}
     {{/unless}}

package/dist/views_static/components/program_supplier/program_supplier.hbs

@@ -1,5 +1,5 @@
 <div class="flex flex-wrap">
-    <span class="text-sm uppercase font-headingSerif w-fit sm:w-full">{{loca 'epg_program_supplier' }}</span>
+    <span class="text-sm uppercase font-headingSerif w-fit sm:w-full dark:text-standard-text-dark">{{loca 'epg_program_supplier' }}</span>
     
     <div class='flex flex-wrap pt-2 w-fit sm:w-full gap-x-6 sm:gap-x-2 gap-y-2'>
         {{#if this.link}}
@@ -13,7 +13,7 @@
                         />
                     {{/with}}
                 {{else}}
-                    <span class='text-base font-bold text-primary hover:underline'>
+                    <span class='text-base font-bold text-primary hover:underline dark:text-standard-text-dark'>
                         {{this.title}}
                     </span>
                 {{/if}}
@@ -28,7 +28,7 @@
                     />
                 {{/with}}
             {{else}}
-                <span class='text-base font-bold text-primary hover:underline'>
+                <span class='text-base font-bold text-primary hover:underline dark:text-standard-text-dark'>
                     {{this.title}}
                 </span>
             {{/if}}

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

@@ -1,3 +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}}'>
+<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 _isCopytext=_isCopytext}}{{#if _css}} {{_css}}{{/if}}'>
     {{~_text~}}
 </span>

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

@@ -10,7 +10,6 @@ the 4 parameters are:
 - fontVariant
 
 }}
-
 {{~#switch _teaserType~}}
     {{~#case 'standard'~}}
         {{~#if _isMobile1to1~}}
@@ -79,7 +78,11 @@ the 4 parameters are:
         ~}}
     {{~/case~}}
     {{~#case 'poster'~}}
-        {{~inline-switch _size '["50","33"]' '["text-2xl md:text-4xl","text-2xl"]'~}}
+        {{#if _isCopytext~}}
+            {{~#if this.showFullSize.isTrue~}}text-2xl md:text-4xl{{else}}text-2xl{{~/if~}}
+        {{else}}
+            {{~inline-switch _size '["50","33"]' '["text-2xl md:text-4xl","text-2xl"]'~}}
+        {{/if}}    
     {{~/case~}}
     {{~#case 'cluster'~}}
         {{#if _firstItem}}

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

@@ -1,5 +1,5 @@
-<article class="mx-5 sm:mx-0 relative col-span-12 flex gap-y-5 gap-x-4 {{inline-switch this.teaserSize '["33","50"]' '["md:col-span-4 flex-col","md:col-span-6 flex-col","flex-col"]'}} ">
-    <figure class="ar-1-1" aria-hidden="true">
+<article class="{{#if _isCopytext~}}mx-0{{else}}mx-5 sm:mx-0{{/if}} relative col-span-12 flex gap-y-5 gap-x-4 {{inline-switch this.teaserSize '["33","50"]' '["md:col-span-4 flex-col","md:col-span-6 flex-col","flex-col"]'}} ">
+    <figure class="{{#if _isCopytext~}}{{#if this.showFullSize.isTrue }}{{#if this.showStretched.isTrue }}ar-1-1 sm480:ar-16-7{{else}}ar-1-1{{/if}}{{else}}ar-1-1 sm480:ar-16-9{{/if}}{{else}}ar-1-1{{/if}}" aria-hidden="true">
         {{~> components/base/image/responsive_image this.teaserImage _type=this.teaserType _variant=this.content.imageVariant _noDelay=../_noDelay _addClassImg="ar__content rounded-tl-hr rounded-br-hr" ~}}
     </figure> 
     <div class="absolute flex flex-col justify-center w-full h-full bg-gradient-to-t from-black rounded-tl-hr rounded-br-hr">
@@ -15,7 +15,7 @@
                     {{#if this.topline}}
                         {{> components/teaser/components/teaser_topline _css="!text-white" _text=this.topline}}
                     {{/if}}
-                    {{> components/teaser/components/teaser_title _css="whitespace-pre-wrap" _text=this.title _size=this.realTeaserSize _teaserType=this.teaserType}}
+                    {{> components/teaser/components/teaser_title _css="whitespace-pre-wrap" _text=this.title _size=this.realTeaserSize _teaserType=this.teaserType _isCopytext=_isCopytext}}
                     {{#if this.extendedTitle}}
                         {{> components/teaser/components/teaser_subline _text=this.extendedTitle}}
                     {{/if}}
@@ -23,9 +23,21 @@
             {{/components/teaser/components/teaser_header}}
         {{/components/base/link}}
         <span class="absolute flex items-end justify-center w-full h-full ds-cta">
-            {{#> components/button/link_button _link=this.link _size="lg" _css=(inline-switch this.realTeaserSize '["33","50"]' '["z-20 mb-7","z-20 mb-7 md:mb-16"]') _variant="secondary" _isAriaHidden=true _onBackground=true}}
-                {{> components/button/components/button_label _css="" _label=this.link.readMoreText.readMoreLong}}
-            {{/components/button/link_button}}
+            {{#if _isCopytext~}}
+                {{#if this.showFullSize.isTrue~}}
+                    {{#> components/button/link_button _link=this.link _size="lg" _css=(inline-switch this.showStretched.isTrue '[false,true]' '["z-20 mb-7 md:mb-16","z-20 mb-7 sm480:mb-3 sm:mb-7","z-20 mb-7 md:mb-16"]') _variant="secondary" _isAriaHidden=true _onBackground=true}}
+                        {{> components/button/components/button_label _css="" _label=this.link.readMoreText.readMoreLong}}
+                    {{/components/button/link_button}}
+                {{else}}
+                    {{#> components/button/link_button _link=this.link _size="lg" _css="z-20 mb-7 md:mb-3" _variant="secondary" _isAriaHidden=true _onBackground=true}}
+                        {{> components/button/components/button_label _css="" _label=this.link.readMoreText.readMoreLong}}
+                    {{/components/button/link_button}}
+                {{/if}}    
+            {{else}}
+                {{#> components/button/link_button _link=this.link _size="lg" _css=(inline-switch this.realTeaserSize '["33","50"]' '["z-20 mb-7","z-20 mb-7 md:mb-16"]') _variant="secondary" _isAriaHidden=true _onBackground=true}}
+                    {{> components/button/components/button_label _css="" _label=this.link.readMoreText.readMoreLong}}
+                {{/components/button/link_button}}
+            {{/if}}
         </span>
     </div>
 </article>

package/dist/views_static/components/topictag/topictag_list.hbs

@@ -1,10 +1,10 @@
 <div class="flex flex-wrap">
     <nav class="block" role="navigation" aria-label="{{loca "topictag_related_content_headline"}}">
-        <span class="text-sm uppercase font-headingSerif w-fit sm:w-full">{{loca "topictag_related_content_headline"}}</span><!--
+        <span class="text-sm uppercase font-headingSerif dark:text-standard-text-dark w-fit sm:w-full">{{loca "topictag_related_content_headline"}}</span><!--
         -->
         <ul class="flex flex-wrap sm:block gap-x-4 w-fit sm:w-full sm:pt-2 ">
             {{~#each this~}}
-                <li class="w-fit sm:w-full text-primary">
+                <li class="w-fit sm:w-full text-primary dark:text-standard-text-dark">
                     <a class="block line-clamp-1 hover:underline gap-x-1" href="{{this.url}}">
                         {{~> components/base/image/icon _icon="taglabel" _addClass="inline w-4 h-4 mr-2 fill-current"~}}
 

package/package.json

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

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

@@ -17,7 +17,25 @@
             content: '';
         }
 
-        .ar-16-19::after {
+        .ar-16-9::after {
+            display: block;
+            content: '';
+            clear: both;
+        }
+    }
+
+    .ar-16-7 {
+        aspect-ratio: 16 / 7;
+    }
+
+    @supports not (aspect-ratio: 16 / 7) {
+        .ar-16-7::before {
+            float: left;
+            padding-top: 43.75%;
+            content: '';
+        }
+
+        .ar-16-7::after {
             display: block;
             content: '';
             clear: both;

package/src/assets/fixtures/content/copytext/copytext.inc.json

@@ -24,7 +24,7 @@
                             "text": "<li>In der rund 1.200 Einwohner großen Gemeinde Waldbrunn</li><li>rund 13 Kilometer vom rheinland-pfälzischen Westerburg entfernt</li>"
                         }
                     ]   
-                }                  
+                }
             },
             {
                 "structuredDataSsi": "<!--#include virtual='structuredDataSsiPath' -->",
@@ -96,5 +96,233 @@
                 "text": "Dies ist ein Jobposting"
             }
         ]
-    }
+    },
+    "copytext_posterteaser": {
+        "copytextParagraph": [
+            {
+                "structuredDataSsi": "<!--#include virtual='structuredDataSsiPath' -->",
+                "isHeadline": true,
+                "text": "Speichermedien sowie Waffen und Munition sichergestellt"
+            },
+            {
+                "structuredDataSsi": "<!--#include virtual='structuredDataSsiPath' -->",
+                "isParagraph": true,
+                "text": {
+                    "split": [
+                        {
+                            "isText": true,
+                            "text": "In der rund 1.200 Einwohner großen Gemeinde Waldbrunn, rund 13 Kilometer vom rheinland-pfälzischen Westerburg entfernt, engagiert sich der 18-Jährige nach hr-Informationen bei der Freiwilligen Feuerwehr. Der Ortsvorsteher aus Waldbrunn beschrieb den Terrorverdächtigen als zurückhaltend, höflich und hilfsbereit."
+                        }
+                    ]   
+                }
+            },
+            {
+                "structuredDataSsi": "<!--#include virtual='structuredDataSsiPath' -->",
+                "isParagraph": true,    
+                "paragraphTeaserItem": {
+                    "isStory": true,
+                    "toModel": {
+                        "genericTeaser": {                            
+                            "@->jsoninclude": "teaser/teasers.inc.json",
+                            "@->contentpath": "teaser.logicItem.includeModel",
+                            "@->extends": {
+                                "showFullSize": {
+                                    "isTrue": true
+                                }
+                            },
+                            "@->overrides": [
+                                {
+                                    "@->contentpath": "teaserType",
+                                    "@->value": "poster"
+                                },
+                                {
+                                    "@->contentpath": "teaserSize",
+                                    "@->value": "50"
+                                },
+                                {
+                                    "@->contentpath": "realTeaserSize",
+                                    "@->value": "50"
+                                },
+                                {
+                                    "@->contentpath": "link.readMoreText.readMoreLong",
+                                    "@->value": "Zum Artikel"
+                                },
+                                {
+                                    "@->contentpath": "teaserImage",
+                                    "@->value": {
+                                        "@->jsoninclude": "teaser/teaser_images.inc.json",
+                                        "@->contentpath": "teaser_poster_50",
+                                        "@->replaceToken": [
+                                            {
+                                                "@->token": "image",
+                                                "@->value": "rueckkehr-nach-abschiebung-102"
+                                            }
+                                        ]
+                                    }
+                                }
+                            ]                            
+                        }
+                    }
+                }
+            },
+            {
+                "structuredDataSsi": "<!--#include virtual='structuredDataSsiPath' -->",
+                "isParagraph": true,
+                "text": {
+                    "split": [
+                        {
+                            "isText": true,
+                            "text": "Nach der Festnahme in der vergangenen Woche hätten bereits Gespräche mit Mitschülerinnen und Mitschülern des 18 Jahre alten Oberstufenschülers stattgefunden. Auch die Eltern seien in Kenntnis gesetzt worden, sagte der Schulleiter."
+                        },
+                        {
+                            "isText": true,
+                            "text": "Nach Informationen der Rhein-Zeitung soll es im Frühjahr 2022 einen Zwischenfall an der Schule gegeben haben. Der heute 18-Jährige soll demnach einen Mitschüler beschimpft und nach einer verbalen Auseinandersetzung mit einer Flasche geschlagen haben."
+                        }
+                    ]   
+                }
+            },
+            {
+                "structuredDataSsi": "<!--#include virtual='structuredDataSsiPath' -->",
+                "isParagraph": true,                
+                "paragraphTeaserItem": {
+                    "isStory": true,
+                    "toModel": {
+                        "genericTeaser": {
+                            "@->jsoninclude": "teaser/teasers.inc.json",
+                            "@->contentpath": "teaser.logicItem.includeModel",
+                            "@->extends": {
+                                "showFullSize": {
+                                    "isTrue": false
+                                }
+                            },
+                            "@->overrides": [
+                                {
+                                    "@->contentpath": "teaserType",
+                                    "@->value": "poster"
+                                },
+                                {
+                                    "@->contentpath": "teaserSize",
+                                    "@->value": "50"
+                                },
+                                {
+                                    "@->contentpath": "realTeaserSize",
+                                    "@->value": "50"
+                                },
+                                {
+                                    "@->contentpath": "link.readMoreText.readMoreLong",
+                                    "@->value": "Zum Artikel"
+                                },
+                                {
+                                    "@->contentpath": "teaserImage",
+                                    "@->value": {
+                                        "@->jsoninclude": "teaser/teaser_images.inc.json",
+                                        "@->contentpath": "teaser_poster_small",
+                                        "@->replaceToken": [
+                                            {
+                                                "@->token": "image",
+                                                "@->value": "rueckkehr-nach-abschiebung-102"
+                                            }
+                                        ]
+                                    }
+                                }
+                            ]                            
+                        }
+                    }
+                }
+            },
+            {
+                "structuredDataSsi": "<!--#include virtual='structuredDataSsiPath' -->",
+                "isParagraph": true,
+                "text": {
+                    "split": [
+                        {
+                            "isText": true,
+                            "text": "Der Mitschüler erlitt dem Bericht zufolge eine Schienbeinprellung und eine kleine Schnittwunde. Die Eltern hätten daraufhin Anzeige erstattet – eine hr-Anfrage an die zuständige Polizei blieb bislang unbeantwortet. Der Mitschüler erlitt dem Bericht zufolge eine Schienbeinprellung und eine kleine Schnittwunde. Die Eltern hätten daraufhin Anzeige erstattet – eine hr-Anfrage an die zuständige Polizei blieb bislang unbeantwortet. Der Mitschüler erlitt dem Bericht zufolge eine Schienbeinprellung und eine kleine Schnittwunde. Die Eltern hätten daraufhin Anzeige erstattet – eine hr-Anfrage an die zuständige Polizei blieb bislang unbeantwortet."
+                        }
+                    ]   
+                }                  
+            },
+            {
+                "structuredDataSsi": "<!--#include virtual='structuredDataSsiPath' -->",
+                "isHeadline": true,
+                "text": "Medienbericht: Flaschenangriff auf Mitschüler"
+            },
+            {
+                "structuredDataSsi": "<!--#include virtual='structuredDataSsiPath' -->",
+                "isParagraph": true,
+                "text": {
+                    "split": [
+                        {
+                            "isText": true,
+                            "text": "Der Mitschüler erlitt dem Bericht zufolge eine Schienbeinprellung und eine kleine Schnittwunde. Die Eltern hätten daraufhin Anzeige erstattet – eine hr-Anfrage an die zuständige Polizei blieb bislang unbeantwortet. Der Mitschüler erlitt dem Bericht zufolge eine Schienbeinprellung und eine kleine Schnittwunde."
+                        }
+                    ]   
+                }                  
+            },
+            {
+                "structuredDataSsi": "<!--#include virtual='structuredDataSsiPath' -->",
+                "isParagraph": true,                
+                "paragraphTeaserItem": {
+                    "isStory": true,
+                    "toModel": {
+                        "genericTeaser": {
+                            "@->jsoninclude": "teaser/teasers.inc.json",
+                            "@->contentpath": "teaser.logicItem.includeModel",
+                            "@->extends": {
+                                "showFullSize": {
+                                    "isTrue": true
+                                },
+                                "showStretched": {
+                                    "isTrue": true
+                                }
+                            },
+                            "@->overrides": [
+                                {
+                                    "@->contentpath": "teaserType",
+                                    "@->value": "poster"
+                                },
+                                {
+                                    "@->contentpath": "teaserSize",
+                                    "@->value": "50"
+                                },
+                                {
+                                    "@->contentpath": "realTeaserSize",
+                                    "@->value": "50"
+                                },
+                                {
+                                    "@->contentpath": "link.readMoreText.readMoreLong",
+                                    "@->value": "Zum Artikel"
+                                },
+                                {
+                                    "@->contentpath": "teaserImage",
+                                    "@->value": {
+                                        "@->jsoninclude": "teaser/teaser_images.inc.json",
+                                        "@->contentpath": "teaser_poster_wide",
+                                        "@->replaceToken": [
+                                            {
+                                                "@->token": "image",
+                                                "@->value": "rueckkehr-nach-abschiebung-102"
+                                            }
+                                        ]
+                                    }
+                                }
+                            ]                            
+                        }
+                    }
+                }
+            },
+            {
+                "structuredDataSsi": "<!--#include virtual='structuredDataSsiPath' -->",
+                "isParagraph": true,
+                "text": {
+                    "split": [
+                        {
+                            "isText": true,
+                            "text": "Die Eltern hätten daraufhin Anzeige erstattet – eine hr-Anfrage an die zuständige Polizei blieb bislang unbeantwortet. Der Mitschüler erlitt dem Bericht zufolge eine Schienbeinprellung und eine kleine Schnittwunde. Die Eltern hätten daraufhin Anzeige erstattet – eine hr-Anfrage an die zuständige Polizei blieb bislang unbeantwortet."
+                        }
+                    ]   
+                }                  
+            }
+        ]
+    }    
 }    

package/src/assets/fixtures/content/copytext/copytext_posterteaser.json

@@ -0,0 +1,4 @@
+{
+    "@->jsoninclude": "content/copytext/copytext.inc.json",
+    "@->contentpath": "copytext_posterteaser"
+}

package/src/assets/fixtures/teaser/teaser_images.inc.json

@@ -233,6 +233,46 @@
             ]
         }
     },
+    "teaser_poster_small": {
+        "copyrightWithLinks": "",
+        "responsiveImage": {
+            "asPicture": true,
+            "asImage": false,
+            "fallback": "images/{#image}_v-16to9__medium.jpg",
+            "sources": [
+                {
+                    "media": "all and (min-width: 480px)",
+                    "sizes": "(min-width: 700px) 660px, 100vw",
+                    "srcset": "images/{#image}_v-16to9__small.jpg 320w, images/{#image}_v-16to9__medium.jpg 480w, images/{#image}_v-16to9.jpg 992w, images/{#image}_v-16to9__retina.jpg 1920w"
+                },
+                {
+                    "media": "all and (max-width: 479px)",
+                    "sizes": "100vw",
+                    "srcset": "images/{#image}_v-1to1__small.jpg 320w, images/{#image}_v-1to1__medium.jpg 480w, images/{#image}_v-1to1__medium__extended.jpg 640w, images/{#image}_v-1to1.jpg 960w, images/{#image}_v-1to1__retina.jpg 1920w"
+                }
+            ]
+        }
+    },
+    "teaser_poster_wide": {
+        "copyrightWithLinks": "",
+        "responsiveImage": {
+            "asPicture": true,
+            "asImage": false,
+            "fallback": "images/{#image}_v-16to7__medium.jpg",
+            "sources": [
+                {
+                    "media": "all and (min-width: 480px)",
+                    "sizes": "(min-width: 700px) 660px, 100vw",
+                    "srcset": "images/{#image}_v-16to7__small.jpg 320w, images/{#image}_v-16to7__medium.jpg 480w, images/{#image}_v-16to7.jpg 992w, images/{#image}_v-16to7__retina.jpg 1920w"
+                },
+                {
+                    "media": "all and (max-width: 479px)",
+                    "sizes": "100vw",
+                    "srcset": "images/{#image}_v-1to1__small.jpg 320w, images/{#image}_v-1to1__medium.jpg 480w, images/{#image}_v-1to1__medium__extended.jpg 640w, images/{#image}_v-1to1.jpg 960w, images/{#image}_v-1to1__retina.jpg 1920w"
+                }
+            ]
+        }
+    },
     "teaser_poster_33": {
         "copyrightWithLinks": "",
         "responsiveImage": {

package/src/stories/views/components/content/copytext/components/posterteaser.hbs

@@ -1,5 +1,7 @@
 {{~#if (isStorybook)~}}
-    <div class="mt-6 italic text-gray-dark">coming soon: Posterteaser-component</div>
+    <div class="{{#if this.showFullSize.isTrue }}clear-both w-full mt-12 {{#unless this.showStretched.isTrue }}md:w-2/3 md:mx-auto{{/unless}}{{else}}w-full md:w-1/2 float-left my-7 mr-0 md:mr-5{{/if}}">
+        {{> components/teaser/teaser_poster _isCopytext=true }} 
+    </div>    
 {{~else~}}
     {{> modules/teaser/poster-teaser/posterTeaser-story}}
 {{~/if~}} 

package/src/stories/views/components/content/copytext/copytext.stories.js

@@ -1,5 +1,6 @@
 import copytext from './copytext.hbs'
 import copytext_json from './fixtures/copytext.json'
+import copytext_posterteaser_json from './fixtures/copytext_posterteaser.json'
 
 const Template = ({ ...args }) => {
     return copytext({ ...args })
@@ -13,4 +14,10 @@ export const Default = {
     render: Template.bind({}),
     name: 'default',
     args: copytext_json,
+}
+
+export const WithPosterteaser = {
+    render: Template.bind({}),
+    name: 'Posterteaser',
+    args: copytext_posterteaser_json,
 }

package/src/stories/views/components/content/copytext/fixtures/copytext_posterteaser.json

@@ -0,0 +1 @@
+{"copytextParagraph":[{"structuredDataSsi":"<!--#include virtual='structuredDataSsiPath' -->","isHeadline":true,"text":"Speichermedien sowie Waffen und Munition sichergestellt"},{"structuredDataSsi":"<!--#include virtual='structuredDataSsiPath' -->","isParagraph":true,"text":{"split":[{"isText":true,"text":"In der rund 1.200 Einwohner großen Gemeinde Waldbrunn, rund 13 Kilometer vom rheinland-pfälzischen Westerburg entfernt, engagiert sich der 18-Jährige nach hr-Informationen bei der Freiwilligen Feuerwehr. Der Ortsvorsteher aus Waldbrunn beschrieb den Terrorverdächtigen als zurückhaltend, höflich und hilfsbereit."}]}},{"structuredDataSsi":"<!--#include virtual='structuredDataSsiPath' -->","isParagraph":true,"paragraphTeaserItem":{"isStory":true,"toModel":{"genericTeaser":{"byline":"Byline","title":"Abgeschobene Geschwister aus Syrien zurück in Wolfhagen","topline":"Überglücklich, aber ohne Mama","headingFontVariant":"serif","extendedTitle":"","teaserType":"poster","teaserSize":"50","realTeaserSize":"50","isMobile1to1":false,"teaserDate":{"htmlDateTime":"2022-04-17T19:30+0200","htmlDate":"20.02.1983","date":"17.04.22","dateSeparatorTime":"17.04.22, 19:30"},"hasByline":true,"teaserInfo":{"showTeaserInfo":true,"showTeaserInfoSection":true,"showTeaserInfoChannel":false,"showTeaserInfoAll":false,"showTeaserInfoDate":false,"showTeaserInfoDateTime":true,"showTeaserInfoProgramRef":false},"teaserImage":{"copyrightWithLinks":"","responsiveImage":{"asPicture":false,"asImage":true,"fallback":"images/rueckkehr-nach-abschiebung-102_v-1to1__medium.jpg","sources":[{"sizes":"(min-width: 768px) 460px, (min-width: 640px) calc(100vw - 8.5rem), calc(100vw - 2.5rem)","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"}]}},"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.","hideBylineAndShorttext":false,"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":"Zum Artikel"}},"showFullSize":{"isTrue":true}}}}},{"structuredDataSsi":"<!--#include virtual='structuredDataSsiPath' -->","isParagraph":true,"text":{"split":[{"isText":true,"text":"Nach der Festnahme in der vergangenen Woche hätten bereits Gespräche mit Mitschülerinnen und Mitschülern des 18 Jahre alten Oberstufenschülers stattgefunden. Auch die Eltern seien in Kenntnis gesetzt worden, sagte der Schulleiter."},{"isText":true,"text":"Nach Informationen der Rhein-Zeitung soll es im Frühjahr 2022 einen Zwischenfall an der Schule gegeben haben. Der heute 18-Jährige soll demnach einen Mitschüler beschimpft und nach einer verbalen Auseinandersetzung mit einer Flasche geschlagen haben."}]}},{"structuredDataSsi":"<!--#include virtual='structuredDataSsiPath' -->","isParagraph":true,"paragraphTeaserItem":{"isStory":true,"toModel":{"genericTeaser":{"byline":"Byline","title":"Abgeschobene Geschwister aus Syrien zurück in Wolfhagen","topline":"Überglücklich, aber ohne Mama","headingFontVariant":"serif","extendedTitle":"","teaserType":"poster","teaserSize":"50","realTeaserSize":"50","isMobile1to1":false,"teaserDate":{"htmlDateTime":"2022-04-17T19:30+0200","htmlDate":"20.02.1983","date":"17.04.22","dateSeparatorTime":"17.04.22, 19:30"},"hasByline":true,"teaserInfo":{"showTeaserInfo":true,"showTeaserInfoSection":true,"showTeaserInfoChannel":false,"showTeaserInfoAll":false,"showTeaserInfoDate":false,"showTeaserInfoDateTime":true,"showTeaserInfoProgramRef":false},"teaserImage":{"copyrightWithLinks":"","responsiveImage":{"asPicture":true,"asImage":false,"fallback":"images/rueckkehr-nach-abschiebung-102_v-16to9__medium.jpg","sources":[{"media":"all and (min-width: 480px)","sizes":"(min-width: 700px) 660px, 100vw","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.jpg 992w, images/rueckkehr-nach-abschiebung-102_v-16to9__retina.jpg 1920w"},{"media":"all and (max-width: 479px)","sizes":"100vw","srcset":"images/rueckkehr-nach-abschiebung-102_v-1to1__small.jpg 320w, images/rueckkehr-nach-abschiebung-102_v-1to1__medium.jpg 480w, images/rueckkehr-nach-abschiebung-102_v-1to1__medium__extended.jpg 640w, images/rueckkehr-nach-abschiebung-102_v-1to1.jpg 960w, images/rueckkehr-nach-abschiebung-102_v-1to1__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,"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.","hideBylineAndShorttext":false,"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":"Zum Artikel"}},"showFullSize":{"isTrue":false}}}}},{"structuredDataSsi":"<!--#include virtual='structuredDataSsiPath' -->","isParagraph":true,"text":{"split":[{"isText":true,"text":"Der Mitschüler erlitt dem Bericht zufolge eine Schienbeinprellung und eine kleine Schnittwunde. Die Eltern hätten daraufhin Anzeige erstattet – eine hr-Anfrage an die zuständige Polizei blieb bislang unbeantwortet. Der Mitschüler erlitt dem Bericht zufolge eine Schienbeinprellung und eine kleine Schnittwunde. Die Eltern hätten daraufhin Anzeige erstattet – eine hr-Anfrage an die zuständige Polizei blieb bislang unbeantwortet. Der Mitschüler erlitt dem Bericht zufolge eine Schienbeinprellung und eine kleine Schnittwunde. Die Eltern hätten daraufhin Anzeige erstattet – eine hr-Anfrage an die zuständige Polizei blieb bislang unbeantwortet."}]}},{"structuredDataSsi":"<!--#include virtual='structuredDataSsiPath' -->","isHeadline":true,"text":"Medienbericht: Flaschenangriff auf Mitschüler"},{"structuredDataSsi":"<!--#include virtual='structuredDataSsiPath' -->","isParagraph":true,"text":{"split":[{"isText":true,"text":"Der Mitschüler erlitt dem Bericht zufolge eine Schienbeinprellung und eine kleine Schnittwunde. Die Eltern hätten daraufhin Anzeige erstattet – eine hr-Anfrage an die zuständige Polizei blieb bislang unbeantwortet. Der Mitschüler erlitt dem Bericht zufolge eine Schienbeinprellung und eine kleine Schnittwunde."}]}},{"structuredDataSsi":"<!--#include virtual='structuredDataSsiPath' -->","isParagraph":true,"paragraphTeaserItem":{"isStory":true,"toModel":{"genericTeaser":{"byline":"Byline","title":"Abgeschobene Geschwister aus Syrien zurück in Wolfhagen","topline":"Überglücklich, aber ohne Mama","headingFontVariant":"serif","extendedTitle":"","teaserType":"poster","teaserSize":"50","realTeaserSize":"50","isMobile1to1":false,"teaserDate":{"htmlDateTime":"2022-04-17T19:30+0200","htmlDate":"20.02.1983","date":"17.04.22","dateSeparatorTime":"17.04.22, 19:30"},"hasByline":true,"teaserInfo":{"showTeaserInfo":true,"showTeaserInfoSection":true,"showTeaserInfoChannel":false,"showTeaserInfoAll":false,"showTeaserInfoDate":false,"showTeaserInfoDateTime":true,"showTeaserInfoProgramRef":false},"teaserImage":{"copyrightWithLinks":"","responsiveImage":{"asPicture":true,"asImage":false,"fallback":"images/rueckkehr-nach-abschiebung-102_v-16to7__medium.jpg","sources":[{"media":"all and (min-width: 480px)","sizes":"(min-width: 700px) 660px, 100vw","srcset":"images/rueckkehr-nach-abschiebung-102_v-16to7__small.jpg 320w, images/rueckkehr-nach-abschiebung-102_v-16to7__medium.jpg 480w, images/rueckkehr-nach-abschiebung-102_v-16to7.jpg 992w, images/rueckkehr-nach-abschiebung-102_v-16to7__retina.jpg 1920w"},{"media":"all and (max-width: 479px)","sizes":"100vw","srcset":"images/rueckkehr-nach-abschiebung-102_v-1to1__small.jpg 320w, images/rueckkehr-nach-abschiebung-102_v-1to1__medium.jpg 480w, images/rueckkehr-nach-abschiebung-102_v-1to1__medium__extended.jpg 640w, images/rueckkehr-nach-abschiebung-102_v-1to1.jpg 960w, images/rueckkehr-nach-abschiebung-102_v-1to1__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,"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.","hideBylineAndShorttext":false,"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":"Zum Artikel"}},"showFullSize":{"isTrue":true},"showStretched":{"isTrue":true}}}}},{"structuredDataSsi":"<!--#include virtual='structuredDataSsiPath' -->","isParagraph":true,"text":{"split":[{"isText":true,"text":"Die Eltern hätten daraufhin Anzeige erstattet – eine hr-Anfrage an die zuständige Polizei blieb bislang unbeantwortet. Der Mitschüler erlitt dem Bericht zufolge eine Schienbeinprellung und eine kleine Schnittwunde. Die Eltern hätten daraufhin Anzeige erstattet – eine hr-Anfrage an die zuständige Polizei blieb bislang unbeantwortet."}]}}]}

package/src/stories/views/components/geoTag/geoTag_list.hbs

@@ -1,10 +1,10 @@
 <div class="flex flex-wrap">
     <nav class="block" role="navigation" aria-label="{{loca "geotag_related_content_headline"}}">
-        <span class="text-sm uppercase font-headingSerif w-fit sm:w-full">{{loca "geotag_related_content_headline"}}</span><!--
+        <span class="text-sm uppercase font-headingSerif w-fit sm:w-full dark:text-standard-text-dark">{{loca "geotag_related_content_headline"}}</span><!--
         -->
         <ul class="flex flex-wrap gap-x-4 w-fit sm:w-full sm:pt-2 ">
             {{~#each this~}}
-                <li class="w-fit sm:w-full text-primary">
+                <li class="w-fit sm:w-full text-primary dark:text-standard-text-dark">
                     <a class="block hover:underline gap-x-1" href="{{this.url}}">
                         {{~> components/base/image/icon _icon="ortsmarke" _addClass="inline w-5 h-5 mr-2 fill-current"~}}
 

package/src/stories/views/components/podcast/components/podcast_player_shorttext.hbs

@@ -1,7 +1,7 @@
 {{#unless _isSinglePage}}
   {{#unless this.hideShortText}}
       {{~#with this.shorttext}}
-          <div class="col-span-12 text-sm md:text-base font-copy">
+          <div class="col-span-12 text-sm md:text-base font-copy dark:text-podcast-text-dark">
               <span class="c-teaser__shorttext"> {{this}} </span>
           </div>
       {{/with~}}

package/src/stories/views/components/podcast/components/podcast_playlist_shorttext.hbs

@@ -3,7 +3,7 @@
     {{#unless this.hideShortText}}
     {{~#with this.shorttext}}
         <div class="hidden pb-6 text-sm md:flex md:text-base font-copy dark:text-podcast-text-dark">
-        <span class="c-teaser__shorttext"> {{this}} </span>
+        <span class=""> {{this}} </span>
         </div>
     {{/with~}}
     {{/unless}}

package/src/stories/views/components/program_supplier/program_supplier.hbs

@@ -1,5 +1,5 @@
 <div class="flex flex-wrap">
-    <span class="text-sm uppercase font-headingSerif w-fit sm:w-full">{{loca 'epg_program_supplier' }}</span>
+    <span class="text-sm uppercase font-headingSerif w-fit sm:w-full dark:text-standard-text-dark">{{loca 'epg_program_supplier' }}</span>
     
     <div class='flex flex-wrap pt-2 w-fit sm:w-full gap-x-6 sm:gap-x-2 gap-y-2'>
         {{#if this.link}}
@@ -13,7 +13,7 @@
                         />
                     {{/with}}
                 {{else}}
-                    <span class='text-base font-bold text-primary hover:underline'>
+                    <span class='text-base font-bold text-primary hover:underline dark:text-standard-text-dark'>
                         {{this.title}}
                     </span>
                 {{/if}}
@@ -28,7 +28,7 @@
                     />
                 {{/with}}
             {{else}}
-                <span class='text-base font-bold text-primary hover:underline'>
+                <span class='text-base font-bold text-primary hover:underline dark:text-standard-text-dark'>
                     {{this.title}}
                 </span>
             {{/if}}

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

@@ -1,3 +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}}'>
+<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 _isCopytext=_isCopytext}}{{#if _css}} {{_css}}{{/if}}'>
     {{~_text~}}
 </span>

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

@@ -10,7 +10,6 @@ the 4 parameters are:
 - fontVariant
 
 }}
-
 {{~#switch _teaserType~}}
     {{~#case 'standard'~}}
         {{~#if _isMobile1to1~}}
@@ -79,7 +78,11 @@ the 4 parameters are:
         ~}}
     {{~/case~}}
     {{~#case 'poster'~}}
-        {{~inline-switch _size '["50","33"]' '["text-2xl md:text-4xl","text-2xl"]'~}}
+        {{#if _isCopytext~}}
+            {{~#if this.showFullSize.isTrue~}}text-2xl md:text-4xl{{else}}text-2xl{{~/if~}}
+        {{else}}
+            {{~inline-switch _size '["50","33"]' '["text-2xl md:text-4xl","text-2xl"]'~}}
+        {{/if}}    
     {{~/case~}}
     {{~#case 'cluster'~}}
         {{#if _firstItem}}

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

@@ -1,5 +1,5 @@
-<article class="mx-5 sm:mx-0 relative col-span-12 flex gap-y-5 gap-x-4 {{inline-switch this.teaserSize '["33","50"]' '["md:col-span-4 flex-col","md:col-span-6 flex-col","flex-col"]'}} ">
-    <figure class="ar-1-1" aria-hidden="true">
+<article class="{{#if _isCopytext~}}mx-0{{else}}mx-5 sm:mx-0{{/if}} relative col-span-12 flex gap-y-5 gap-x-4 {{inline-switch this.teaserSize '["33","50"]' '["md:col-span-4 flex-col","md:col-span-6 flex-col","flex-col"]'}} ">
+    <figure class="{{#if _isCopytext~}}{{#if this.showFullSize.isTrue }}{{#if this.showStretched.isTrue }}ar-1-1 sm480:ar-16-7{{else}}ar-1-1{{/if}}{{else}}ar-1-1 sm480:ar-16-9{{/if}}{{else}}ar-1-1{{/if}}" aria-hidden="true">
         {{~> components/base/image/responsive_image this.teaserImage _type=this.teaserType _variant=this.content.imageVariant _noDelay=../_noDelay _addClassImg="ar__content rounded-tl-hr rounded-br-hr" ~}}
     </figure> 
     <div class="absolute flex flex-col justify-center w-full h-full bg-gradient-to-t from-black rounded-tl-hr rounded-br-hr">
@@ -15,7 +15,7 @@
                     {{#if this.topline}}
                         {{> components/teaser/components/teaser_topline _css="!text-white" _text=this.topline}}
                     {{/if}}
-                    {{> components/teaser/components/teaser_title _css="whitespace-pre-wrap" _text=this.title _size=this.realTeaserSize _teaserType=this.teaserType}}
+                    {{> components/teaser/components/teaser_title _css="whitespace-pre-wrap" _text=this.title _size=this.realTeaserSize _teaserType=this.teaserType _isCopytext=_isCopytext}}
                     {{#if this.extendedTitle}}
                         {{> components/teaser/components/teaser_subline _text=this.extendedTitle}}
                     {{/if}}
@@ -23,9 +23,21 @@
             {{/components/teaser/components/teaser_header}}
         {{/components/base/link}}
         <span class="absolute flex items-end justify-center w-full h-full ds-cta">
-            {{#> components/button/link_button _link=this.link _size="lg" _css=(inline-switch this.realTeaserSize '["33","50"]' '["z-20 mb-7","z-20 mb-7 md:mb-16"]') _variant="secondary" _isAriaHidden=true _onBackground=true}}
-                {{> components/button/components/button_label _css="" _label=this.link.readMoreText.readMoreLong}}
-            {{/components/button/link_button}}
+            {{#if _isCopytext~}}
+                {{#if this.showFullSize.isTrue~}}
+                    {{#> components/button/link_button _link=this.link _size="lg" _css=(inline-switch this.showStretched.isTrue '[false,true]' '["z-20 mb-7 md:mb-16","z-20 mb-7 sm480:mb-3 sm:mb-7","z-20 mb-7 md:mb-16"]') _variant="secondary" _isAriaHidden=true _onBackground=true}}
+                        {{> components/button/components/button_label _css="" _label=this.link.readMoreText.readMoreLong}}
+                    {{/components/button/link_button}}
+                {{else}}
+                    {{#> components/button/link_button _link=this.link _size="lg" _css="z-20 mb-7 md:mb-3" _variant="secondary" _isAriaHidden=true _onBackground=true}}
+                        {{> components/button/components/button_label _css="" _label=this.link.readMoreText.readMoreLong}}
+                    {{/components/button/link_button}}
+                {{/if}}    
+            {{else}}
+                {{#> components/button/link_button _link=this.link _size="lg" _css=(inline-switch this.realTeaserSize '["33","50"]' '["z-20 mb-7","z-20 mb-7 md:mb-16"]') _variant="secondary" _isAriaHidden=true _onBackground=true}}
+                    {{> components/button/components/button_label _css="" _label=this.link.readMoreText.readMoreLong}}
+                {{/components/button/link_button}}
+            {{/if}}
         </span>
     </div>
 </article>

package/src/stories/views/components/topictag/topictag_list.hbs

@@ -1,10 +1,10 @@
 <div class="flex flex-wrap">
     <nav class="block" role="navigation" aria-label="{{loca "topictag_related_content_headline"}}">
-        <span class="text-sm uppercase font-headingSerif w-fit sm:w-full">{{loca "topictag_related_content_headline"}}</span><!--
+        <span class="text-sm uppercase font-headingSerif dark:text-standard-text-dark w-fit sm:w-full">{{loca "topictag_related_content_headline"}}</span><!--
         -->
         <ul class="flex flex-wrap sm:block gap-x-4 w-fit sm:w-full sm:pt-2 ">
             {{~#each this~}}
-                <li class="w-fit sm:w-full text-primary">
+                <li class="w-fit sm:w-full text-primary dark:text-standard-text-dark">
                     <a class="block line-clamp-1 hover:underline gap-x-1" href="{{this.url}}">
                         {{~> components/base/image/icon _icon="taglabel" _addClass="inline w-4 h-4 mr-2 fill-current"~}}