hr-design-system-handlebars 1.102.2 → 1.102.4

package/CHANGELOG.md

@@ -1,3 +1,28 @@
+# v1.102.4 (Fri Sep 27 2024)
+
+#### 🐛 Bug Fix
+
+- DPE-3306-b: add checkbox group [#1079](https://github.com/mumprod/hr-design-system-handlebars/pull/1079) (saad.elbaciri@hr.de [@selbaciri](https://github.com/selbaciri))
+
+#### Authors: 2
+
+- Saad El Baciri ([@selbaciri](https://github.com/selbaciri))
+- selbaciri (saad.elbaciri@hr.de)
+
+---
+
+# v1.102.3 (Tue Sep 24 2024)
+
+#### 🐛 Bug Fix
+
+- modify Posterteaser [#1077](https://github.com/mumprod/hr-design-system-handlebars/pull/1077) ([@hanswurstsalat](https://github.com/hanswurstsalat))
+
+#### Authors: 1
+
+- Geraldo ([@hanswurstsalat](https://github.com/hanswurstsalat))
+
+---
+
 # v1.102.2 (Tue Sep 24 2024)
 
 #### 🐛 Bug Fix

package/dist/assets/index.css

@@ -1393,9 +1393,6 @@ article.indexTextDS .indexTextHighlighted .link {
 .-mt-6 {
   margin-top: -1.5rem;
 }
-.-mt-8 {
-  margin-top: -2rem;
-}
 .-mt-\[33px\] {
   margin-top: -33px;
 }
@@ -2115,6 +2112,9 @@ article.indexTextDS .indexTextHighlighted .link {
 .gap-y-3 {
   row-gap: 0.75rem;
 }
+.gap-y-4 {
+  row-gap: 1rem;
+}
 .gap-y-5 {
   row-gap: 1.25rem;
 }
@@ -2655,6 +2655,9 @@ article.indexTextDS .indexTextHighlighted .link {
   --tw-gradient-to: rgba(255, 255, 255, 0) var(--tw-gradient-to-position);
   --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
 }
+.to-80\% {
+  --tw-gradient-to-position: 80%;
+}
 .fill-\[\#006dc1\] {
   fill: #006dc1;
 }
@@ -2853,6 +2856,9 @@ article.indexTextDS .indexTextHighlighted .link {
 .pb-10 {
   padding-bottom: 2.5rem;
 }
+.pb-16 {
+  padding-bottom: 4rem;
+}
 .pb-2 {
   padding-bottom: 0.5rem;
 }
@@ -2877,6 +2883,9 @@ article.indexTextDS .indexTextHighlighted .link {
 .pb-9 {
   padding-bottom: 2.25rem;
 }
+.pb-\[70px\] {
+  padding-bottom: 70px;
+}
 .pb-footer-padding-bottom {
   padding-bottom: 16px;
   padding-bottom: var(--footer-padding-bottom);
@@ -3486,7 +3495,7 @@ article.indexTextDS .indexTextHighlighted .link {
   border-bottom-color: var(--color-secondary-ds);
 }
 .counter-reset {
-  counter-reset: cnt1727186810627;
+  counter-reset: cnt1727451245610;
 }
 .hyphens-auto {
   -webkit-hyphens: auto;
@@ -3894,7 +3903,7 @@ article.indexTextDS .indexTextHighlighted .link {
   --tw-ring-color: rgba(255, 255, 255, 0.5);
 }
 .-ordered {
-  counter-increment: cnt1727186810627 1;
+  counter-increment: cnt1727451245610 1;
 }
 .-ordered::before {
   position: absolute;
@@ -3910,7 +3919,7 @@ article.indexTextDS .indexTextHighlighted .link {
   letter-spacing: .0125em;
   --tw-text-opacity: 1;
   color: rgba(0, 0, 0, var(--tw-text-opacity));
-  content: counter(cnt1727186810627);
+  content: counter(cnt1727451245610);
 }
 /*! ****************************/
 /*! DataPolicy stuff           */
@@ -6346,6 +6355,14 @@ input[type="checkbox"]:checked::after {
     width: 2rem;
   }
 
+  .sm480\:pb-24 {
+    padding-bottom: 6rem;
+  }
+
+  .sm480\:pb-\[86px\] {
+    padding-bottom: 86px;
+  }
+
   .sm480\:align-top {
     vertical-align: top;
   }
@@ -6539,10 +6556,18 @@ input[type="checkbox"]:checked::after {
     margin-bottom: 3.5rem;
   }
 
+  .sm\:mb-3 {
+    margin-bottom: 0.75rem;
+  }
+
   .sm\:mb-5 {
     margin-bottom: 1.25rem;
   }
 
+  .sm\:mb-7 {
+    margin-bottom: 1.75rem;
+  }
+
   .sm\:mb-8 {
     margin-bottom: 2rem;
   }
@@ -6734,10 +6759,22 @@ input[type="checkbox"]:checked::after {
     padding-bottom: 0px;
   }
 
+  .sm\:pb-16 {
+    padding-bottom: 4rem;
+  }
+
   .sm\:pb-2 {
     padding-bottom: 0.5rem;
   }
 
+  .sm\:pb-24 {
+    padding-bottom: 6rem;
+  }
+
+  .sm\:pb-\[86px\] {
+    padding-bottom: 86px;
+  }
+
   .sm\:pl-0 {
     padding-left: 0px;
   }
@@ -6949,6 +6986,10 @@ input[type="checkbox"]:checked::after {
     margin-bottom: 0px;
   }
 
+  .md\:mb-12 {
+    margin-bottom: 3rem;
+  }
+
   .md\:mb-16 {
     margin-bottom: 4rem;
   }
@@ -7143,17 +7184,27 @@ input[type="checkbox"]:checked::after {
     justify-content: space-between;
   }
 
+  .md\:gap-x-3 {
+    -moz-column-gap: 0.75rem;
+         column-gap: 0.75rem;
+  }
+
   .md\:gap-x-6 {
     -moz-column-gap: 1.5rem;
          column-gap: 1.5rem;
   }
 
+  .md\:gap-x-7 {
+    -moz-column-gap: 1.75rem;
+         column-gap: 1.75rem;
+  }
+
   .md\:gap-y-14 {
     row-gap: 3.5rem;
   }
 
-  .md\:gap-y-4 {
-    row-gap: 1rem;
+  .md\:gap-y-5 {
+    row-gap: 1.25rem;
   }
 
   .md\:space-x-3 > :not([hidden]) ~ :not([hidden]) {
@@ -7277,6 +7328,22 @@ input[type="checkbox"]:checked::after {
     padding-bottom: 1.75rem;
   }
 
+  .md\:pb-16 {
+    padding-bottom: 4rem;
+  }
+
+  .md\:pb-24 {
+    padding-bottom: 6rem;
+  }
+
+  .md\:pb-32 {
+    padding-bottom: 8rem;
+  }
+
+  .md\:pb-\[70px\] {
+    padding-bottom: 70px;
+  }
+
   .md\:pl-0 {
     padding-left: 0px;
   }
@@ -7348,6 +7415,10 @@ input[type="checkbox"]:checked::after {
     line-height: 1.6875rem;
   }
 
+  .md\:leading-10 {
+    line-height: 2.5rem;
+  }
+
   .md\:leading-4 {
     line-height: 1rem;
   }

package/dist/views/components/forms/choice.hbs

@@ -1,11 +1,9 @@
-<div class="relative flex flex-col w-full mb-6 gap-y-3 md:gap-y-4" 
+<div class="relative flex flex-col w-full {{#unless _inGroup}} mb-6 md:mb-12{{/unless}} gap-y-4 md:gap-y-5" 
    ax-load
    x-data="inputHandler('input{{nextRandom}}','{{_errorMandatory}}','{{_type}}')"
    x-ignore
 >
-
-<div class="flex flex-row items-center w-full gap-x-4">
-
+<div class="flex flex-row items-center w-full gap-x-2 md:gap-x-3">
   <input class="relative self-start flex-shrink-0 w-6 h-6 bg-white border appearance-none cursor-pointer border-blue-science-hex checked:bg-blue-congress-hex checked:border-transparent"
       :class="{' border-blue-science-hex': hideError(),'border-red-700': hideDescription() }"
       @change="validateInput"
@@ -47,32 +45,22 @@
          {{/if}}
       {{/if~}}
    >
-      
   <label for="input{{getRandom}}" class="items-center justify-center text-xs text-black md:text-sm font-headingSerif ">
       {{#if _hasBody}}
-        {{decorator_body}}{{#if _required}}*{{/if}}
+        {{decorator_body}}{{#unless _inGroup}}{{#if _required}}*{{/if}}{{/unless}}
       {{else}}
         {{#if _locaKey}}
-            {{loca _locaKey}}{{#if _required}}*{{/if}}
+            {{loca _locaKey}}{{#unless _inGroup}}{{#if _required}}*{{/if}}{{/unless}}
         {{else}}
             {{#if _label}}
-                {{{_label}}}{{#if _required}}*{{/if}}
+                {{{_label}}}{{#unless _inGroup}}{{#if _required}}*{{/if}}{{/unless}}
             {{/if}}
         {{/if}}
       {{/if}}
    </label>
-   
-   {{#if _required}}
-      <div class="flex items-center self-start justify-center">
-         <div class="hidden w-5 h-5 font-bold" :class="{'hidden': hideError() }">
-            {{> components/base/image/icon _icon="info2" _addClass="w-5 h-5 fill-red-700"}}
-         </div>
-      </div>
-   {{/if}}
-
-</div>
-
-   <div class="flex items-end justify-between h-5 font-heading">     
+</div>  
+   {{#unless _inGroup}}
+   <div class="font-heading">     
       {{#if _description}}  
          <div class="text-xs text-gray-500" {{#if _required}}:class="{'hidden': hideDescription() }"{{/if}}>{{_description}}</div>
       {{/if}}
@@ -80,18 +68,5 @@
          <div class="hidden text-xs text-red-700" :class="{'hidden': hideError()}" x-text="errorMessage"></div>
       {{/if}}
    </div>
-
-   <div class="hidden" >
-      <b>DEBUGG</b>
-      <div>isChecked:<span x-text="isChecked" class="font-bold" :class="isChecked ? 'text-green-800' : 'text-red-700'"></span></div>
-      <div>isFocused:<span x-text="isFocused" class="font-bold" :class="isFocused ? 'text-green-800' : 'text-red-700'"></span></div>
-      <div>wasFocused:<span x-text="wasFocused" class="font-bold" :class="wasFocused ? 'text-green-800' : 'text-red-700'"></span></div>
-      <div>valid:<span x-text="valid" class="font-bold" :class="valid ? 'text-green-800' : 'text-red-700'"></span></div>
-      <div>hideDescription:<span x-text="hideDescription()" class="font-bold" :class="hideDescription() ? 'text-green-800' : 'text-red-700'"></span></div>   
-      <div>hideError:<span x-text="hideError()" class="font-bold" :class="hideError() ? 'text-green-800' : 'text-red-700'"></span></div>
-      <div>errorMessage:<span x-text="errorMessage" class="font-bold" ></span></div>    
-   </div> 
-   
-
-   
+   {{/unless}}
 </div>

package/dist/views/components/forms/choiceGroup.hbs

@@ -0,0 +1,41 @@
+<fieldset>
+<div class="relative flex flex-col w-full mb-6 md:mb-12 gap-y-4 md:gap-y-5">
+    <legend class="text-lg font-bold text-black md:text-xl font-heading">
+        {{#if _hasBody}}
+            {{decorator_body}}{{#if _required}}*{{/if}}
+        {{else}}
+            {{#if _locaKey}}
+                {{loca _locaKey}}{{#if _required}}*{{/if}}
+            {{else}}
+                {{#if _label}}
+                    {{{_label}}}{{#if _required}}*{{/if}}
+                {{/if}}
+            {{/if}}
+        {{/if}}
+    </legend>
+    <div class="flex flex-row flex-wrap gap-x-6 md:gap-x-7 gap-y-5" >
+        {{#each _items}}   
+            <div class=" c-form__option">
+                {{> components/forms/choice
+                        _type=../_type
+                        _name=../_name
+                        _value=this.value
+                        _inGroup=true
+                        _label=this.label
+                        _selected=this.selected
+                        _title=this.title
+                        _multipleChoice=../_multipleChoice
+                }}
+            </div>  
+        {{/each}}
+    </div>
+    <div class="font-heading">     
+      {{#if _description}}  
+         <div class="text-xs text-gray-500" {{#if _required}}:class="{'hidden': hideDescription() }"{{/if}}>{{_description}}</div>
+      {{/if}}
+      {{#if _required}}
+         <div class="hidden text-xs text-red-700" :class="{'hidden': hideError()}" x-text="errorMessage"></div>
+      {{/if}}
+   </div>
+</div>
+</fieldset>

package/dist/views/components/forms/fields.hbs

@@ -56,7 +56,7 @@
                 }}
             {{else if this.type.isChoice}}
                 {{#if this.isGrouped }}
-                    {{~> modules/forms/choiceGroup
+                    {{~> components/forms/choiceGroup
                         _type=this.type.asString
                         _name=this.name
                         _label=this.label
@@ -65,6 +65,7 @@
                         _required=this.isRequired
                         _multipleChoice=../_multipleChoice
                         _addClass=../_addClass
+                        _errorMandatory="Bitte füllen Sie dieses Pflichtfeld aus"
 
                     }}
                 {{else}}

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

@@ -14,9 +14,9 @@
             {{~> components/base/image/responsive_image this.teaserImage _type=this.teaserType _variant=this.content.imageVariant _noDelay=../_noDelay _addClassImg="rounded-tl-hr rounded-br-hr" ~}}
         {{/if}}
     </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">
+    <div class="absolute flex flex-col justify-end w-full h-full {{#if _isCopytext~}}{{#if this.showFullSize.isTrue~}}{{inline-switch this.showStretched.isTrue '["false","true"]' '["pb-[70px] sm480:pb-24 md:pb-32","pb-[70px] sm480:pb-[86px] sm:pb-16 md:pb-[70px]","pb-[70px] sm480:pb-24 md:pb-32"]'}}{{else}}pb-[70px] sm480:pb-24 sm:pb-[86px] md:pb-24{{/if}}{{else}}{{inline-switch this.realTeaserSize '["33","50"]' '["pb-16 sm:pb-24 md:pb-16","pb-16 sm:pb-24 md:pb-24"]'}}{{/if}} bg-gradient-to-t to-80% from-black rounded-tl-hr rounded-br-hr">
         {{#>components/base/link _link=this.link _css="ds-teaser-focus flex items-center flex-col before:rounded-tl-hr before:rounded-br-hr hover:text-toplineColor"}} 
-            <div class="-mt-8 line-clamp-4 xs:line-clamp-5 md:line-clamp-4 {{#if ../this.showStretched.isTrue}}lg:line-clamp-4{{else}}lg:line-clamp-5{{/if}}">
+            <div class="line-clamp-4 xs:line-clamp-5 md:line-clamp-4 {{#if ../this.showStretched.isTrue}}lg:line-clamp-4{{else}}lg:line-clamp-5{{/if}}">
             {{#> components/teaser/components/teaser_header _css="text-center"}}
                 {{#with this.label}}
                     {{#> components/label/label_group}}
@@ -24,11 +24,15 @@
                         <span class="text-white">{{> components/label/label_byline _css="ml-2" _text=../../../this.tickerTopic}}</span>
                     {{/components/label/label_group}}
                 {{/with~}}
-                 {{#> components/teaser/components/teaser_headline _headlineTag=(if ../../_isCopytext-adjust_context "h3" "h2") _css="text-shadow text-center text-white mb-4 mx-2 md:mb-8 xs:mx-6 sm:mx-8 md:mx-5 lg:mx-8"}}
+                 {{#> components/teaser/components/teaser_headline _headlineTag=(if ../../_isCopytext-adjust_context "h3" "h2") _css="text-shadow text-center text-white mx-2 xs:mx-6 sm:mx-8 md:mx-5 lg:mx-8"}}
                     {{#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="poster" _isCopytext=../../_isCopytext-adjust_context}}
+                    {{#if ../../_isCopytext-adjust_context}}
+                        {{> components/teaser/components/teaser_title _css=(if this.showFullSize.isTrue "md:leading-10 whitespace-pre-wrap" "whitespace-pre-wrap") _text=this.title _size=this.realTeaserSize _teaserType="poster" _isCopytext=../../_isCopytext-adjust_context}}
+                    {{else}}
+                        {{> components/teaser/components/teaser_title _css=(inline-switch this.realTeaserSize '["33","50"]' '["whitespace-pre-wrap","md:leading-10 whitespace-pre-wrap"]') _text=this.title _size=this.realTeaserSize _teaserType="poster" _isCopytext=../../_isCopytext-adjust_context}}
+                    {{/if}}
                     {{#if this.extendedTitle}}
                         {{> components/teaser/components/teaser_subline _text=this.extendedTitle}}
                     {{/if}}
@@ -36,10 +40,11 @@
             {{/components/teaser/components/teaser_header}}
             </div>
         {{/components/base/link}}
+    </div>
         <span class="absolute flex items-end justify-center w-full h-full ds-cta">
             {{#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-4 sm480:mb-7 md:mb-16 hover:bg-white","z-20 mb-4 sm480:mb-7 md:mb-3 hover:bg-white","z-20 mb-4 sm480:mb-7 md:mb-16 hover:bg-white"]') _variant="secondary" _isAriaHidden=true _onBackground=true}}
+                    {{#> components/button/link_button _link=this.link _size="lg" _css=(inline-switch this.showStretched.isTrue '["false","true"]' '["z-20 mb-4 sm480:mb-7 md:mb-16 hover:bg-white","z-20 mb-4 sm480:mb-7 sm:mb-3 hover:bg-white","z-20 mb-4 sm480:mb-7 md:mb-16 hover:bg-white"]') _variant="secondary" _isAriaHidden=true _onBackground=true}}
                         {{> components/button/components/button_label _css="" _label=this.link.readMoreText.readMoreLong}}
                     {{/components/button/link_button}}
                 {{else}}
@@ -48,10 +53,10 @@
                     {{/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 hover:bg-white","z-20 mb-7 md:mb-16 hover:bg-white"]') _variant="secondary" _isAriaHidden=true _onBackground=true}}
+                {{#> components/button/link_button _link=this.link _size="lg" _css=(inline-switch this.realTeaserSize '["33","50"]' '["z-20 mb-3 sm:mb-7 md:mb-3 hover:bg-white","z-20 mb-3 sm:mb-7 hover:bg-white"]') _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/forms/choice.hbs

@@ -1,11 +1,9 @@
-<div class="relative flex flex-col w-full mb-6 gap-y-3 md:gap-y-4" 
+<div class="relative flex flex-col w-full {{#unless _inGroup}} mb-6 md:mb-12{{/unless}} gap-y-4 md:gap-y-5" 
    ax-load
    x-data="inputHandler('input{{nextRandom}}','{{_errorMandatory}}','{{_type}}')"
    x-ignore
 >
-
-<div class="flex flex-row items-center w-full gap-x-4">
-
+<div class="flex flex-row items-center w-full gap-x-2 md:gap-x-3">
   <input class="relative self-start flex-shrink-0 w-6 h-6 bg-white border appearance-none cursor-pointer border-blue-science-hex checked:bg-blue-congress-hex checked:border-transparent"
       :class="{' border-blue-science-hex': hideError(),'border-red-700': hideDescription() }"
       @change="validateInput"
@@ -47,32 +45,22 @@
          {{/if}}
       {{/if~}}
    >
-      
   <label for="input{{getRandom}}" class="items-center justify-center text-xs text-black md:text-sm font-headingSerif ">
       {{#if _hasBody}}
-        {{decorator_body}}{{#if _required}}*{{/if}}
+        {{decorator_body}}{{#unless _inGroup}}{{#if _required}}*{{/if}}{{/unless}}
       {{else}}
         {{#if _locaKey}}
-            {{loca _locaKey}}{{#if _required}}*{{/if}}
+            {{loca _locaKey}}{{#unless _inGroup}}{{#if _required}}*{{/if}}{{/unless}}
         {{else}}
             {{#if _label}}
-                {{{_label}}}{{#if _required}}*{{/if}}
+                {{{_label}}}{{#unless _inGroup}}{{#if _required}}*{{/if}}{{/unless}}
             {{/if}}
         {{/if}}
       {{/if}}
    </label>
-   
-   {{#if _required}}
-      <div class="flex items-center self-start justify-center">
-         <div class="hidden w-5 h-5 font-bold" :class="{'hidden': hideError() }">
-            {{> components/base/image/icon _icon="info2" _addClass="w-5 h-5 fill-red-700"}}
-         </div>
-      </div>
-   {{/if}}
-
-</div>
-
-   <div class="flex items-end justify-between h-5 font-heading">     
+</div>  
+   {{#unless _inGroup}}
+   <div class="font-heading">     
       {{#if _description}}  
          <div class="text-xs text-gray-500" {{#if _required}}:class="{'hidden': hideDescription() }"{{/if}}>{{_description}}</div>
       {{/if}}
@@ -80,18 +68,5 @@
          <div class="hidden text-xs text-red-700" :class="{'hidden': hideError()}" x-text="errorMessage"></div>
       {{/if}}
    </div>
-
-   <div class="hidden" >
-      <b>DEBUGG</b>
-      <div>isChecked:<span x-text="isChecked" class="font-bold" :class="isChecked ? 'text-green-800' : 'text-red-700'"></span></div>
-      <div>isFocused:<span x-text="isFocused" class="font-bold" :class="isFocused ? 'text-green-800' : 'text-red-700'"></span></div>
-      <div>wasFocused:<span x-text="wasFocused" class="font-bold" :class="wasFocused ? 'text-green-800' : 'text-red-700'"></span></div>
-      <div>valid:<span x-text="valid" class="font-bold" :class="valid ? 'text-green-800' : 'text-red-700'"></span></div>
-      <div>hideDescription:<span x-text="hideDescription()" class="font-bold" :class="hideDescription() ? 'text-green-800' : 'text-red-700'"></span></div>   
-      <div>hideError:<span x-text="hideError()" class="font-bold" :class="hideError() ? 'text-green-800' : 'text-red-700'"></span></div>
-      <div>errorMessage:<span x-text="errorMessage" class="font-bold" ></span></div>    
-   </div> 
-   
-
-   
+   {{/unless}}
 </div>

package/dist/views_static/components/forms/choiceGroup.hbs

@@ -0,0 +1,41 @@
+<fieldset>
+<div class="relative flex flex-col w-full mb-6 md:mb-12 gap-y-4 md:gap-y-5">
+    <legend class="text-lg font-bold text-black md:text-xl font-heading">
+        {{#if _hasBody}}
+            {{decorator_body}}{{#if _required}}*{{/if}}
+        {{else}}
+            {{#if _locaKey}}
+                {{loca _locaKey}}{{#if _required}}*{{/if}}
+            {{else}}
+                {{#if _label}}
+                    {{{_label}}}{{#if _required}}*{{/if}}
+                {{/if}}
+            {{/if}}
+        {{/if}}
+    </legend>
+    <div class="flex flex-row flex-wrap gap-x-6 md:gap-x-7 gap-y-5" >
+        {{#each _items}}   
+            <div class=" c-form__option">
+                {{> components/forms/choice
+                        _type=../_type
+                        _name=../_name
+                        _value=this.value
+                        _inGroup=true
+                        _label=this.label
+                        _selected=this.selected
+                        _title=this.title
+                        _multipleChoice=../_multipleChoice
+                }}
+            </div>  
+        {{/each}}
+    </div>
+    <div class="font-heading">     
+      {{#if _description}}  
+         <div class="text-xs text-gray-500" {{#if _required}}:class="{'hidden': hideDescription() }"{{/if}}>{{_description}}</div>
+      {{/if}}
+      {{#if _required}}
+         <div class="hidden text-xs text-red-700" :class="{'hidden': hideError()}" x-text="errorMessage"></div>
+      {{/if}}
+   </div>
+</div>
+</fieldset>

package/dist/views_static/components/forms/fields.hbs

@@ -56,7 +56,7 @@
                 }}
             {{else if this.type.isChoice}}
                 {{#if this.isGrouped }}
-                    {{~> modules/forms/choiceGroup
+                    {{~> components/forms/choiceGroup
                         _type=this.type.asString
                         _name=this.name
                         _label=this.label
@@ -65,6 +65,7 @@
                         _required=this.isRequired
                         _multipleChoice=../_multipleChoice
                         _addClass=../_addClass
+                        _errorMandatory="Bitte füllen Sie dieses Pflichtfeld aus"
 
                     }}
                 {{else}}

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

@@ -14,9 +14,9 @@
             {{~> components/base/image/responsive_image this.teaserImage _type=this.teaserType _variant=this.content.imageVariant _noDelay=../_noDelay _addClassImg="rounded-tl-hr rounded-br-hr" ~}}
         {{/if}}
     </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">
+    <div class="absolute flex flex-col justify-end w-full h-full {{#if _isCopytext~}}{{#if this.showFullSize.isTrue~}}{{inline-switch this.showStretched.isTrue '["false","true"]' '["pb-[70px] sm480:pb-24 md:pb-32","pb-[70px] sm480:pb-[86px] sm:pb-16 md:pb-[70px]","pb-[70px] sm480:pb-24 md:pb-32"]'}}{{else}}pb-[70px] sm480:pb-24 sm:pb-[86px] md:pb-24{{/if}}{{else}}{{inline-switch this.realTeaserSize '["33","50"]' '["pb-16 sm:pb-24 md:pb-16","pb-16 sm:pb-24 md:pb-24"]'}}{{/if}} bg-gradient-to-t to-80% from-black rounded-tl-hr rounded-br-hr">
         {{#>components/base/link _link=this.link _css="ds-teaser-focus flex items-center flex-col before:rounded-tl-hr before:rounded-br-hr hover:text-toplineColor"}} 
-            <div class="-mt-8 line-clamp-4 xs:line-clamp-5 md:line-clamp-4 {{#if ../this.showStretched.isTrue}}lg:line-clamp-4{{else}}lg:line-clamp-5{{/if}}">
+            <div class="line-clamp-4 xs:line-clamp-5 md:line-clamp-4 {{#if ../this.showStretched.isTrue}}lg:line-clamp-4{{else}}lg:line-clamp-5{{/if}}">
             {{#> components/teaser/components/teaser_header _css="text-center"}}
                 {{#with this.label}}
                     {{#> components/label/label_group}}
@@ -24,11 +24,15 @@
                         <span class="text-white">{{> components/label/label_byline _css="ml-2" _text=../../../this.tickerTopic}}</span>
                     {{/components/label/label_group}}
                 {{/with~}}
-                 {{#> components/teaser/components/teaser_headline _headlineTag=(if _isCopytext "h3" "h2") _css="text-shadow text-center text-white mb-4 mx-2 md:mb-8 xs:mx-6 sm:mx-8 md:mx-5 lg:mx-8"}}
+                 {{#> components/teaser/components/teaser_headline _headlineTag=(if _isCopytext "h3" "h2") _css="text-shadow text-center text-white mx-2 xs:mx-6 sm:mx-8 md:mx-5 lg:mx-8"}}
                     {{#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="poster" _isCopytext=_isCopytext}}
+                    {{#if _isCopytext}}
+                        {{> components/teaser/components/teaser_title _css=(if this.showFullSize.isTrue "md:leading-10 whitespace-pre-wrap" "whitespace-pre-wrap") _text=this.title _size=this.realTeaserSize _teaserType="poster" _isCopytext=_isCopytext}}
+                    {{else}}
+                        {{> components/teaser/components/teaser_title _css=(inline-switch this.realTeaserSize '["33","50"]' '["whitespace-pre-wrap","md:leading-10 whitespace-pre-wrap"]') _text=this.title _size=this.realTeaserSize _teaserType="poster" _isCopytext=_isCopytext}}
+                    {{/if}}
                     {{#if this.extendedTitle}}
                         {{> components/teaser/components/teaser_subline _text=this.extendedTitle}}
                     {{/if}}
@@ -36,10 +40,11 @@
             {{/components/teaser/components/teaser_header}}
             </div>
         {{/components/base/link}}
+    </div>
         <span class="absolute flex items-end justify-center w-full h-full ds-cta">
             {{#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-4 sm480:mb-7 md:mb-16 hover:bg-white","z-20 mb-4 sm480:mb-7 md:mb-3 hover:bg-white","z-20 mb-4 sm480:mb-7 md:mb-16 hover:bg-white"]') _variant="secondary" _isAriaHidden=true _onBackground=true}}
+                    {{#> components/button/link_button _link=this.link _size="lg" _css=(inline-switch this.showStretched.isTrue '["false","true"]' '["z-20 mb-4 sm480:mb-7 md:mb-16 hover:bg-white","z-20 mb-4 sm480:mb-7 sm:mb-3 hover:bg-white","z-20 mb-4 sm480:mb-7 md:mb-16 hover:bg-white"]') _variant="secondary" _isAriaHidden=true _onBackground=true}}
                         {{> components/button/components/button_label _css="" _label=this.link.readMoreText.readMoreLong}}
                     {{/components/button/link_button}}
                 {{else}}
@@ -48,10 +53,10 @@
                     {{/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 hover:bg-white","z-20 mb-7 md:mb-16 hover:bg-white"]') _variant="secondary" _isAriaHidden=true _onBackground=true}}
+                {{#> components/button/link_button _link=this.link _size="lg" _css=(inline-switch this.realTeaserSize '["33","50"]' '["z-20 mb-3 sm:mb-7 md:mb-3 hover:bg-white","z-20 mb-3 sm:mb-7 hover:bg-white"]') _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/package.json

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

package/src/assets/fixtures/forms/form_checkbox_grouped.json

@@ -0,0 +1,8 @@
+{
+    "fields":[
+                {
+                  "@->jsoninclude": "forms/form_fields.inc.json",
+                  "@->contentpath": "checkbox-group"
+                }
+             ]
+ }

package/src/assets/fixtures/forms/form_fields.inc.json

@@ -91,14 +91,67 @@
         "label":"Ich bin damit einverstanden.",
         "isMeta":false,
         "description":"Das ist der Beschreibungstext von Checkbox",
-        "isRequired":true,
+        "isRequired":true
+    },
+    "checkbox-group":
+    {
+        "isGrouped":true,
+        "type":{
+            "isChoice":true,
+            "asString":"checkbox"
+        },
+        "name":"interessen",
+        "label":"Wählen Sie Ihre Interessen:",
+        "isMeta":false,
+        "description":"Bitte kreuzen Sie alle Interessen an, die auf Sie zutreffen. Ihre Auswahl hilft uns, Ihnen relevante Inhalte anzubieten.",
+        "isRequired":false,
         "options":[
             {
-                "value":"value0",
+                "value":"sport",
+                "label":"sport",
+                "title":"sport",
+                "isSelected":false
+            },
+            {
+                "value":"musik",
+                "label":"musik",
+                "title":"musik",
+                "isSelected":false
+            },
+            {
+                "value":"lesen",
+                "label":"lesen",
+                "title":"lesen",
+                "isSelected":false
+            },
+            {
+                "value":"reisen",
+                "label":"reisen",
+                "title":"reisen",
+                "isSelected":false
+            },
+            {
+                "value":"kochen",
+                "label":"kochen",
+                "title":"kochen",
+                "isSelected":false
+            },
+            {
+                "value":"filme",
+                "label":"filme",
+                "title":"filme",
+                "isSelected":false
+            },
+            {
+                "value":"tanzen",
+                "label":"tanzen",
+                "title":"tanzen",
                 "isSelected":false
             },
             {
-                "value":"value1",
+                "value":"fotografie",
+                "label":"fotografie",
+                "title":"fotografie",
                 "isSelected":false
             }
         ]

package/src/stories/views/components/forms/choice.hbs

@@ -1,11 +1,9 @@
-<div class="relative flex flex-col w-full mb-6 gap-y-3 md:gap-y-4" 
+<div class="relative flex flex-col w-full {{#unless _inGroup}} mb-6 md:mb-12{{/unless}} gap-y-4 md:gap-y-5" 
    ax-load
    x-data="inputHandler('input{{nextRandom}}','{{_errorMandatory}}','{{_type}}')"
    x-ignore
 >
-
-<div class="flex flex-row items-center w-full gap-x-4">
-
+<div class="flex flex-row items-center w-full gap-x-2 md:gap-x-3">
   <input class="relative self-start flex-shrink-0 w-6 h-6 bg-white border appearance-none cursor-pointer border-blue-science-hex checked:bg-blue-congress-hex checked:border-transparent"
       :class="{' border-blue-science-hex': hideError(),'border-red-700': hideDescription() }"
       @change="validateInput"
@@ -47,32 +45,22 @@
          {{/if}}
       {{/if~}}
    >
-      
   <label for="input{{getRandom}}" class="items-center justify-center text-xs text-black md:text-sm font-headingSerif ">
       {{#if _hasBody}}
-        {{decorator_body}}{{#if _required}}*{{/if}}
+        {{decorator_body}}{{#unless _inGroup}}{{#if _required}}*{{/if}}{{/unless}}
       {{else}}
         {{#if _locaKey}}
-            {{loca _locaKey}}{{#if _required}}*{{/if}}
+            {{loca _locaKey}}{{#unless _inGroup}}{{#if _required}}*{{/if}}{{/unless}}
         {{else}}
             {{#if _label}}
-                {{{_label}}}{{#if _required}}*{{/if}}
+                {{{_label}}}{{#unless _inGroup}}{{#if _required}}*{{/if}}{{/unless}}
             {{/if}}
         {{/if}}
       {{/if}}
    </label>
-   
-   {{#if _required}}
-      <div class="flex items-center self-start justify-center">
-         <div class="hidden w-5 h-5 font-bold" :class="{'hidden': hideError() }">
-            {{> components/base/image/icon _icon="info2" _addClass="w-5 h-5 fill-red-700"}}
-         </div>
-      </div>
-   {{/if}}
-
-</div>
-
-   <div class="flex items-end justify-between h-5 font-heading">     
+</div>  
+   {{#unless _inGroup}}
+   <div class="font-heading">     
       {{#if _description}}  
          <div class="text-xs text-gray-500" {{#if _required}}:class="{'hidden': hideDescription() }"{{/if}}>{{_description}}</div>
       {{/if}}
@@ -80,18 +68,5 @@
          <div class="hidden text-xs text-red-700" :class="{'hidden': hideError()}" x-text="errorMessage"></div>
       {{/if}}
    </div>
-
-   <div class="hidden" >
-      <b>DEBUGG</b>
-      <div>isChecked:<span x-text="isChecked" class="font-bold" :class="isChecked ? 'text-green-800' : 'text-red-700'"></span></div>
-      <div>isFocused:<span x-text="isFocused" class="font-bold" :class="isFocused ? 'text-green-800' : 'text-red-700'"></span></div>
-      <div>wasFocused:<span x-text="wasFocused" class="font-bold" :class="wasFocused ? 'text-green-800' : 'text-red-700'"></span></div>
-      <div>valid:<span x-text="valid" class="font-bold" :class="valid ? 'text-green-800' : 'text-red-700'"></span></div>
-      <div>hideDescription:<span x-text="hideDescription()" class="font-bold" :class="hideDescription() ? 'text-green-800' : 'text-red-700'"></span></div>   
-      <div>hideError:<span x-text="hideError()" class="font-bold" :class="hideError() ? 'text-green-800' : 'text-red-700'"></span></div>
-      <div>errorMessage:<span x-text="errorMessage" class="font-bold" ></span></div>    
-   </div> 
-   
-
-   
+   {{/unless}}
 </div>

package/src/stories/views/components/forms/choiceGroup.hbs

@@ -0,0 +1,41 @@
+<fieldset>
+<div class="relative flex flex-col w-full mb-6 md:mb-12 gap-y-4 md:gap-y-5">
+    <legend class="text-lg font-bold text-black md:text-xl font-heading">
+        {{#if _hasBody}}
+            {{decorator_body}}{{#if _required}}*{{/if}}
+        {{else}}
+            {{#if _locaKey}}
+                {{loca _locaKey}}{{#if _required}}*{{/if}}
+            {{else}}
+                {{#if _label}}
+                    {{{_label}}}{{#if _required}}*{{/if}}
+                {{/if}}
+            {{/if}}
+        {{/if}}
+    </legend>
+    <div class="flex flex-row flex-wrap gap-x-6 md:gap-x-7 gap-y-5" >
+        {{#each _items}}   
+            <div class=" c-form__option">
+                {{> components/forms/choice
+                        _type=../_type
+                        _name=../_name
+                        _value=this.value
+                        _inGroup=true
+                        _label=this.label
+                        _selected=this.selected
+                        _title=this.title
+                        _multipleChoice=../_multipleChoice
+                }}
+            </div>  
+        {{/each}}
+    </div>
+    <div class="font-heading">     
+      {{#if _description}}  
+         <div class="text-xs text-gray-500" {{#if _required}}:class="{'hidden': hideDescription() }"{{/if}}>{{_description}}</div>
+      {{/if}}
+      {{#if _required}}
+         <div class="hidden text-xs text-red-700" :class="{'hidden': hideError()}" x-text="errorMessage"></div>
+      {{/if}}
+   </div>
+</div>
+</fieldset>

package/src/stories/views/components/forms/fields.hbs

@@ -56,7 +56,7 @@
                 }}
             {{else if this.type.isChoice}}
                 {{#if this.isGrouped }}
-                    {{~> modules/forms/choiceGroup
+                    {{~> components/forms/choiceGroup
                         _type=this.type.asString
                         _name=this.name
                         _label=this.label
@@ -65,6 +65,7 @@
                         _required=this.isRequired
                         _multipleChoice=../_multipleChoice
                         _addClass=../_addClass
+                        _errorMandatory="Bitte füllen Sie dieses Pflichtfeld aus"
 
                     }}
                 {{else}}

package/src/stories/views/components/forms/fixtures/form_checkbox.json

@@ -1 +1 @@
-{"fields":[{"isGrouped":false,"type":{"isChoice":true,"asString":"checkbox"},"name":"checkbox","label":"Ich bin damit einverstanden.","isMeta":false,"description":"Das ist der Beschreibungstext von Checkbox","isRequired":true,"options":[{"value":"value0","isSelected":false},{"value":"value1","isSelected":false}]},{"isGrouped":false,"type":{"isChoice":true,"asString":"checkbox"},"name":"checkbox","label":"Ich bin damit einverstanden, dass der hr die von mir im vorstehenden Formular angegebenen personenbezogenen Daten für den Zweck der Kontaktaufnahme mit Upload verarbeitet. Eine Weitergabe an Dritte findet nicht statt, es sei denn, es wird ausdrücklich darauf hingewiesen. Unsere Datenschutzerklärung mit sämtlichen Informationen gemäß Art 13 DSGVO zur Datenverarbeitung durch den hr und zu Ihren Rechten können Sie unter Datenschutzerklärung einsehen. Den Datenschutzbeauftragten des hr erreichen Sie unter datenschutz@hr.de.","isMeta":false,"description":"Das ist der Beschreibungstext von Checkbox","isRequired":true,"options":[{"value":"value0","isSelected":false},{"value":"value1","isSelected":false}]}]}
+{"fields":[{"isGrouped":false,"type":{"isChoice":true,"asString":"checkbox"},"name":"checkbox","label":"Ich bin damit einverstanden.","isMeta":false,"description":"Das ist der Beschreibungstext von Checkbox","isRequired":true},{"isGrouped":false,"type":{"isChoice":true,"asString":"checkbox"},"name":"checkbox","label":"Ich bin damit einverstanden, dass der hr die von mir im vorstehenden Formular angegebenen personenbezogenen Daten für den Zweck der Kontaktaufnahme mit Upload verarbeitet. Eine Weitergabe an Dritte findet nicht statt, es sei denn, es wird ausdrücklich darauf hingewiesen. Unsere Datenschutzerklärung mit sämtlichen Informationen gemäß Art 13 DSGVO zur Datenverarbeitung durch den hr und zu Ihren Rechten können Sie unter Datenschutzerklärung einsehen. Den Datenschutzbeauftragten des hr erreichen Sie unter datenschutz@hr.de.","isMeta":false,"description":"Das ist der Beschreibungstext von Checkbox","isRequired":true}]}

package/src/stories/views/components/forms/fixtures/form_checkbox_grouped.json

@@ -0,0 +1 @@
+{"fields":[{"isGrouped":true,"type":{"isChoice":true,"asString":"checkbox"},"name":"interessen","label":"Wählen Sie Ihre Interessen:","isMeta":false,"description":"Bitte kreuzen Sie alle Interessen an, die auf Sie zutreffen. Ihre Auswahl hilft uns, Ihnen relevante Inhalte anzubieten.","isRequired":false,"options":[{"value":"sport","label":"sport","title":"sport","isSelected":false},{"value":"musik","label":"musik","title":"musik","isSelected":false},{"value":"lesen","label":"lesen","title":"lesen","isSelected":false},{"value":"reisen","label":"reisen","title":"reisen","isSelected":false},{"value":"kochen","label":"kochen","title":"kochen","isSelected":false},{"value":"filme","label":"filme","title":"filme","isSelected":false},{"value":"tanzen","label":"tanzen","title":"tanzen","isSelected":false},{"value":"fotografie","label":"fotografie","title":"fotografie","isSelected":false}]}]}

package/src/stories/views/components/forms/form_checkbox_grouped.stories.js

@@ -0,0 +1,34 @@
+
+import checkboxGroupJson from './fixtures/form_checkbox_grouped.json'
+
+const handlebars = require('hrHandlebars')
+
+
+export default {
+    title: 'Komponenten/Formulare',
+    decorators: [
+        (Story) => {
+            return `<div class="grid grid-page">
+                        <div class="grid bg-white grid-article">
+                            ${Story()}
+                        </div>
+                    </div>`
+        },
+    ],
+}
+const Template = (args) => {
+    let hbsTemplate = handlebars.compile(`
+    {{#>components/forms/backgroundBox  }}  
+            <form class="relative flex flex-col justify-center overflow-hidden group" id="form--{{nextRandom}}" action="{{this.url}}" method="post" enctype="{{if this.isMultipart 'multipart/form-data' 'application/x-www-form-urlencoded'}}" accept-charset="utf-8" >     
+                {{> components/forms/fields }}
+            </form>
+    {{/components/forms/backgroundBox }}
+  `)
+    return hbsTemplate({ ...args })
+}
+
+export const Checkbox_gruppe = {
+    render: Template.bind({}),
+    name: 'Checkbox Gruppe',
+    args: checkboxGroupJson,
+}

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

@@ -14,9 +14,9 @@
             {{~> components/base/image/responsive_image this.teaserImage _type=this.teaserType _variant=this.content.imageVariant _noDelay=../_noDelay _addClassImg="rounded-tl-hr rounded-br-hr" ~}}
         {{/if}}
     </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">
+    <div class="absolute flex flex-col justify-end w-full h-full {{#if _isCopytext~}}{{#if this.showFullSize.isTrue~}}{{inline-switch this.showStretched.isTrue '["false","true"]' '["pb-[70px] sm480:pb-24 md:pb-32","pb-[70px] sm480:pb-[86px] sm:pb-16 md:pb-[70px]","pb-[70px] sm480:pb-24 md:pb-32"]'}}{{else}}pb-[70px] sm480:pb-24 sm:pb-[86px] md:pb-24{{/if}}{{else}}{{inline-switch this.realTeaserSize '["33","50"]' '["pb-16 sm:pb-24 md:pb-16","pb-16 sm:pb-24 md:pb-24"]'}}{{/if}} bg-gradient-to-t to-80% from-black rounded-tl-hr rounded-br-hr">
         {{#>components/base/link _link=this.link _css="ds-teaser-focus flex items-center flex-col before:rounded-tl-hr before:rounded-br-hr hover:text-toplineColor"}} 
-            <div class="-mt-8 line-clamp-4 xs:line-clamp-5 md:line-clamp-4 {{#if ../this.showStretched.isTrue}}lg:line-clamp-4{{else}}lg:line-clamp-5{{/if}}">
+            <div class="line-clamp-4 xs:line-clamp-5 md:line-clamp-4 {{#if ../this.showStretched.isTrue}}lg:line-clamp-4{{else}}lg:line-clamp-5{{/if}}">
             {{#> components/teaser/components/teaser_header _css="text-center"}}
                 {{#with this.label}}
                     {{#> components/label/label_group}}
@@ -24,11 +24,15 @@
                         <span class="text-white">{{> components/label/label_byline _css="ml-2" _text=../../../this.tickerTopic}}</span>
                     {{/components/label/label_group}}
                 {{/with~}}
-                 {{#> components/teaser/components/teaser_headline _headlineTag=(if _isCopytext-adjust_context "h3" "h2") _css="text-shadow text-center text-white mb-4 mx-2 md:mb-8 xs:mx-6 sm:mx-8 md:mx-5 lg:mx-8"}}
+                 {{#> components/teaser/components/teaser_headline _headlineTag=(if _isCopytext-adjust_context "h3" "h2") _css="text-shadow text-center text-white mx-2 xs:mx-6 sm:mx-8 md:mx-5 lg:mx-8"}}
                     {{#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="poster" _isCopytext=_isCopytext-adjust_context}}
+                    {{#if _isCopytext-adjust_context}}
+                        {{> components/teaser/components/teaser_title _css=(if this.showFullSize.isTrue "md:leading-10 whitespace-pre-wrap" "whitespace-pre-wrap") _text=this.title _size=this.realTeaserSize _teaserType="poster" _isCopytext=_isCopytext-adjust_context}}
+                    {{else}}
+                        {{> components/teaser/components/teaser_title _css=(inline-switch this.realTeaserSize '["33","50"]' '["whitespace-pre-wrap","md:leading-10 whitespace-pre-wrap"]') _text=this.title _size=this.realTeaserSize _teaserType="poster" _isCopytext=_isCopytext-adjust_context}}
+                    {{/if}}
                     {{#if this.extendedTitle}}
                         {{> components/teaser/components/teaser_subline _text=this.extendedTitle}}
                     {{/if}}
@@ -36,10 +40,11 @@
             {{/components/teaser/components/teaser_header}}
             </div>
         {{/components/base/link}}
+    </div>
         <span class="absolute flex items-end justify-center w-full h-full ds-cta">
             {{#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-4 sm480:mb-7 md:mb-16 hover:bg-white","z-20 mb-4 sm480:mb-7 md:mb-3 hover:bg-white","z-20 mb-4 sm480:mb-7 md:mb-16 hover:bg-white"]') _variant="secondary" _isAriaHidden=true _onBackground=true}}
+                    {{#> components/button/link_button _link=this.link _size="lg" _css=(inline-switch this.showStretched.isTrue '["false","true"]' '["z-20 mb-4 sm480:mb-7 md:mb-16 hover:bg-white","z-20 mb-4 sm480:mb-7 sm:mb-3 hover:bg-white","z-20 mb-4 sm480:mb-7 md:mb-16 hover:bg-white"]') _variant="secondary" _isAriaHidden=true _onBackground=true}}
                         {{> components/button/components/button_label _css="" _label=this.link.readMoreText.readMoreLong}}
                     {{/components/button/link_button}}
                 {{else}}
@@ -48,10 +53,10 @@
                     {{/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 hover:bg-white","z-20 mb-7 md:mb-16 hover:bg-white"]') _variant="secondary" _isAriaHidden=true _onBackground=true}}
+                {{#> components/button/link_button _link=this.link _size="lg" _css=(inline-switch this.realTeaserSize '["33","50"]' '["z-20 mb-3 sm:mb-7 md:mb-3 hover:bg-white","z-20 mb-3 sm:mb-7 hover:bg-white"]') _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>