hr-design-system-handlebars 0.121.1 → 0.121.3

package/CHANGELOG.md

@@ -1,3 +1,27 @@
+# v0.121.3 (Fri Jan 20 2023)
+
+#### 🐛 Bug Fix
+
+- Dpe 2007 2 [#495](https://github.com/mumprod/hr-design-system-handlebars/pull/495) ([@StefanVesper](https://github.com/StefanVesper))
+
+#### Authors: 1
+
+- SonicSoulSurfer ([@StefanVesper](https://github.com/StefanVesper))
+
+---
+
+# v0.121.2 (Fri Jan 20 2023)
+
+#### 🐛 Bug Fix
+
+- DPE-1936 Ecken der Boxen anpasssen [#494](https://github.com/mumprod/hr-design-system-handlebars/pull/494) ([@Sunny1112358](https://github.com/Sunny1112358))
+
+#### Authors: 1
+
+- [@Sunny1112358](https://github.com/Sunny1112358)
+
+---
+
 # v0.121.1 (Fri Jan 20 2023)
 
 #### 🐛 Bug Fix

package/dist/assets/index.css

@@ -672,7 +672,7 @@ video {
   box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), 0 0 rgba(0,0,0,0);
   box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 rgba(0,0,0,0));
   --tw-ring-inset: inset;
-  --tw-ring-color: currentColor;
+  --tw-ring-color: var(--color-focus-state);
 }
 .ds-link-inset:focus:not(:focus-visible) {
   --tw-shadow: 0 0 rgba(0,0,0,0);
@@ -1037,6 +1037,9 @@ video {
 .-z-1000 {
   z-index: -1000;
 }
+.z-9999 {
+  z-index: 9999;
+}
 .order-1 {
   order: 1;
 }
@@ -1644,11 +1647,13 @@ video {
   border-top-right-radius: 0.25rem;
   border-bottom-right-radius: 0.25rem;
 }
-.rounded-tl-3xl {
-  border-top-left-radius: 1.5rem;
+.rounded-tl-hr {
+  border-top-left-radius: 0px;
+  border-top-left-radius: var(--border-radius-hr);
 }
-.rounded-br-3xl {
-  border-bottom-right-radius: 1.5rem;
+.rounded-br-hr {
+  border-bottom-right-radius: 0px;
+  border-bottom-right-radius: var(--border-radius-hr);
 }
 .rounded-tr-none {
   border-top-right-radius: 0px;
@@ -2481,7 +2486,7 @@ video {
   transition-timing-function: cubic-bezier(0.4, 0, 1, 1);
 }
 .counter-reset {
-  counter-reset: cnt1674224061312;
+  counter-reset: cnt1674233895565;
 }
 .line-clamp-4 {
   overflow: hidden;
@@ -2699,7 +2704,7 @@ video {
   --tw-ring-color: rgba(255, 255, 255, 0.5);
 }
 .-ordered {
-  counter-increment: cnt1674224061312 1;
+  counter-increment: cnt1674233895565 1;
 }
 .-ordered::before {
   position: absolute;
@@ -2715,7 +2720,7 @@ video {
   letter-spacing: .0125em;
   --tw-text-opacity: 1;
   color: rgba(0, 0, 0, var(--tw-text-opacity));
-  content: counter(cnt1674224061312);
+  content: counter(cnt1674233895565);
 }
 /*! ****************************/
 /*! text-shadow                */
@@ -2789,6 +2794,8 @@ video {
     --font-weight-title: 700;
     --font-titleCluster: RobotoSlab, ui-serif, Georgia, Cambria, "Times New Roman", Times, serif;
     --font-weight-titleCluster: 700;
+    /* Border Radius */
+    --border-radius-hr: 0px; ;
 }
 [data-theme='hessenschau'] {
     --color-primary: #005293;
@@ -2849,6 +2856,8 @@ video {
     --font-weight-title: 400;
     --font-titleCluster: RobotoSlab, ui-serif, Georgia, Cambria, "Times New Roman", Times, serif;
     --font-weight-titleCluster: 700;
+     /* Border */
+    --border-radius-hr: 1.5rem; 
 }
 [data-theme='hr-fernsehen'] {
     --color-primary: #a00d65;
@@ -3420,6 +3429,8 @@ video {
     /* Font */
     --font-title: RobotoCond, ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell, Noto Sans, sans-serif, BlinkMacSystemFont, "Segoe UI", "Helvetica Neue", Arial, "Noto Sans", sans-serif;
     --font-weight-title: 700;
+    /* Border */
+    --border-radius-hr: 1.5rem; 
 }
 [data-theme='you-fm'] {
     --color-primary: #c20016;
@@ -3639,11 +3650,13 @@ video {
 .before\:rounded-2xl::before {
   border-radius: 1rem;
 }
-.before\:rounded-tl-3xl::before {
-  border-top-left-radius: 1.5rem;
+.before\:rounded-tl-hr::before {
+  border-top-left-radius: 0px;
+  border-top-left-radius: var(--border-radius-hr);
 }
-.before\:rounded-br-3xl::before {
-  border-bottom-right-radius: 1.5rem;
+.before\:rounded-br-hr::before {
+  border-bottom-right-radius: 0px;
+  border-bottom-right-radius: var(--border-radius-hr);
 }
 .before\:pt-3\/4::before {
   padding-top: 75%;
@@ -4017,12 +4030,14 @@ video {
     border-radius: 0px;
   }
 
-  .md\:rounded-tl-3xl {
-    border-top-left-radius: 1.5rem;
+  .md\:rounded-tl-hr {
+    border-top-left-radius: 0px;
+    border-top-left-radius: var(--border-radius-hr);
   }
 
-  .md\:rounded-br-3xl {
-    border-bottom-right-radius: 1.5rem;
+  .md\:rounded-br-hr {
+    border-bottom-right-radius: 0px;
+    border-bottom-right-radius: var(--border-radius-hr);
   }
 
   .md\:border-0 {
@@ -4170,13 +4185,6 @@ video {
     -webkit-box-orient: vertical;
     -webkit-line-clamp: 4;
   }
-
-  .md\:line-clamp-2 {
-    overflow: hidden;
-    display: -webkit-box;
-    -webkit-box-orient: vertical;
-    -webkit-line-clamp: 2;
-  }
     .md\:ar-16-9 {
         aspect-ratio: 16 / 9;
     }
@@ -4652,6 +4660,13 @@ video {
     -webkit-line-clamp: 5;
   }
 
+  .lg\:line-clamp-2 {
+    overflow: hidden;
+    display: -webkit-box;
+    -webkit-box-orient: vertical;
+    -webkit-line-clamp: 2;
+  }
+
     .lg\:col-main {
         grid-column: main;
     }

package/dist/views/components/content_nav/content_nav_container.hbs

@@ -6,7 +6,7 @@
     {{#if this.isAutosuggest}}
         <div class="flex mx-0 w-full h-10 border-blue-congress align-center{{#if _autoSuggestContainerCss}} {{_autoSuggestContainerCss}}{{/if}}">
             <input x-ref="autosuggestInput"
-                   class="w-full h-10 pl-2 bg-gray-200 border-b-8 border-white text-grey-dark placeholder:text-grey-dark focus:outline-none js-autosuggest-input"
+                   class="w-full h-10 pl-2 bg-gray-200 border-b-8 border-white ds-link-inset text-grey-dark placeholder:text-grey-dark focus:outline-none js-autosuggest-input"
                    type="text"
                    placeholder="Eintrag filtern"/>
         </div>

package/dist/views/components/grid/grid_group_tabbed.hbs

@@ -1,5 +1,5 @@
 </div>
-<section class="grid grid-cols-12 px-8 py-8 mx-4 mt-6 bg-blue-400 sm:mx-0 rounded-tl-3xl rounded-br-3xl col-full sm:col-main gap-x-6 gap-y-6">
+<section class="grid grid-cols-12 px-8 py-8 mx-4 mt-6 bg-blue-400 sm:mx-0 rounded-tl-hr rounded-br-hr col-full sm:col-main gap-x-6 gap-y-6">
     {{> @partial-block }}
 </section>
 <div class="{{> components/grid/grid_group_wrapper_classes }}">

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

@@ -1,4 +1,4 @@
-<article class="mx-5 sm:mx-0 col-span-12 grid bg-highlight-1 rounded-tl-3xl rounded-br-3xl {{~inline-switch this.teaserSize '["25","33","50"]' '[" md:col-span-3"," md:col-span-4"," md:col-span-6",""]'}} ">
+<article class="mx-5 md:mx-0  col-span-12 grid bg-highlight-1 rounded-tl-hr rounded-br-hr {{~inline-switch this.teaserSize '["25","33","50"]' '[" md:col-span-3"," md:col-span-4"," md:col-span-6",""]'}} ">
     <div class="">
             <h2 class="flex items-center px-5 py-5 text-clusterTeaserHeadline">
                 {{#if this.teaserLogo}}

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

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

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

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

package/dist/views/components/teaser/podcast/podcast_playlist_player.hbs

@@ -18,21 +18,15 @@
           {{> components/teaser/podcast/podcast_title _title=this.title _teaserSize=this.teaserSize _addClass="" }}
         </div>
 
-        {{!-- Shorttext --}}
-        {{#unless _isSinglePage}}
-          {{#unless this.hideShortText}}
-            {{~#with this.shorttext}}
-              <div class="hidden pb-6 text-sm md:flex md:text-base font-copy">
-                <span class="c-teaser__shorttext"> {{this}} </span>
-              </div>
-            {{/with~}}
-          {{/unless}}
-        {{/unless}}
-
+        {{#switch this.teaserSize }}
+          {{#case 100}}
+            {{> components/teaser/podcast/podcast_playlist_shorttext}}
+          {{/case}}
+        {{/switch}}
       </div>
 
       {{!-- Podcast Image --}}
-      <div class="flex flex-col ">
+      <div class="flex flex-col pb-5">
         <div class="w-24 md:w-32 lg:w-42">
           {{> components/base/image/responsive_image this.teaseritem
             _type="podcastEpisodePlayer"
@@ -43,8 +37,16 @@
           }}
         </div>
       </div>
-
     </div>
+
+    {{#switch this.teaserSize }}
+      {{#case 50}}
+        <div class="flex flex-row w-full px-5 md:pl-5">
+          {{> components/teaser/podcast/podcast_playlist_shorttext}}
+        </div>
+      {{/case}}
+    {{/switch}}
+    
     {{!-- Abo-Dropdown --}}
     <div class="flex flex-row px-5 md:pr-0"> 
       {{> components/teaser/podcast/podcast_subscribe_button}}

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

@@ -0,0 +1,10 @@
+{{!-- Shorttext --}}
+{{#unless _isSinglePage}}
+    {{#unless this.hideShortText}}
+    {{~#with this.shorttext}}
+        <div class="hidden pb-6 text-sm md:flex md:text-base font-copy">
+        <span class="c-teaser__shorttext"> {{this}} </span>
+        </div>
+    {{/with~}}
+    {{/unless}}
+{{/unless}}

package/dist/views/components/teaser/podcast/podcast_subscribe_button.hbs

@@ -16,7 +16,7 @@
         x-on:keydown.escape.prevent.stop="close($refs.button)"
         x-on:focusin.window="! $refs.panel.contains($event.target) && close()"
         x-id="['dropdown-button']"
-        class="relative z-10 h-10"
+        class="relative h-10 z-9999"
     >
 
     {{!-- Button --}}
@@ -44,13 +44,13 @@
         x-on:click.outside="close($refs.button)"
         :id="$id('dropdown-button')"
         style="display: none;"
-        class="left-0 w-full px-2 text-sm text-white font-heading grow bg-podcast-highlight"
+        class="left-0 w-full text-sm text-white font-heading grow bg-podcast-highlight"
     >
         {{~#with this.podcastHoster~}}
         <ul>
             {{~#each this~}}
                 <li class="{{#unless @last}}border-b{{/unless}}"> 
-                    <a class="flex py-2 text-left ds-link whitespace-nowrap hover:underline disabled:text-gray-500"
+                    <a class="flex px-2 py-2 text-left ds-link whitespace-nowrap hover:underline disabled:text-gray-500"
                     title="{{this.podcastHosterName}}" 
                     target="_blank"
                     rel="noopener noreferrer"

package/dist/views/components/teaser/podcast/podcast_title.hbs

@@ -1,4 +1,4 @@
-{{#decorator 'components/base/link' _css="group ds-link font-title text-base mt-2.5 text-podcast-text line-clamp-4 md:line-clamp-2 ..." }} 
+{{#decorator 'components/base/link' _css="group ds-link font-title text-base mt-2.5 text-podcast-text line-clamp-4 lg:line-clamp-2 ..." }} 
     <span class="block mt-0.5 group-hover:underline {{#if _ordered}} pl-8 {{/if}} {{~ inline-switch _teaserSize '["hero","100","50"]''["text-base md:text-2xl","text-base md:text-2xl","text-base md:text-lg"]' ~}}">
         {{~_title~}}
     </span>

package/dist/views/components/teaser/tabbox/teaser_tabbox.hbs

@@ -2,7 +2,7 @@
 <div 
   x-cloak 
   x-data="{ tab: '{{this.tabbedGroup.[0].title}}' }"
-  class="grid grid-cols-12 pt-6 mx-0 mb-8 mt-14 col-full md:pt-7 bg-highlight-1 md:rounded-tl-3xl md:rounded-br-3xl md:col-main gap-x-6 gap-y-6"
+  class="grid grid-cols-12 pt-6 mx-0 mb-8 mt-14 col-full md:pt-7 bg-highlight-1 md:rounded-tl-hr md:rounded-br-hr md:col-main gap-x-6 gap-y-6"
 >
   <section class="px-0 col-span-full sm:px-8 md:px-0" data-hr-group-tabbed='{"wandaPageId":"{{this.wandaPageId}}"}'>
     <div class="flex flex-wrap justify-center mb-7 mx-1.5" role="tablist">

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

@@ -1,9 +1,9 @@
 <article class="mx-5 sm:mx-0 relative col-span-12 flex gap-y-5 gap-x-4 {{inline-switch this.realTeaserSize '["33","50"]' '["md:col-span-4 flex-col","md:col-span-6 flex-col","flex-col"]'}} ">
     <figure class="ar-1-1" aria-hidden="true">
-        {{~> components/base/image/responsive_image this.teaserImage _type=this.teaserType _variant=this.content.imageVariant _noDelay=../_noDelay _addClassImg="ar__content rounded-tl-3xl rounded-br-3xl" ~}}
+        {{~> 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-3xl rounded-br-3xl" aria-hidden="true">
-        {{#decorator 'components/base/link' _css="ds-teaser-focus flex items-center flex-col before:rounded-tl-3xl before:rounded-br-3xl hover:text-toplineColor"}} 
+    <div class="absolute flex flex-col justify-center w-full h-full bg-gradient-to-t from-black rounded-tl-hr rounded-br-hr" aria-hidden="true">
+        {{#decorator 'components/base/link' _css="ds-teaser-focus flex items-center flex-col before:rounded-tl-hr before:rounded-br-hr hover:text-toplineColor"}} 
             {{> components/teaser/components/teaser_heading 
             _headlineTag="h2" 
             _headlineCss="text-shadow text-center text-white mb-4 mx-4 md:mb-8 xs:mx-6 sm:mx-8 md:mx-5 lg:mx-8 line-clamp-4 xs:line-clamp-6 md:line-clamp-4 lg:line-clamp-5" 

package/package.json

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

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

@@ -106,7 +106,7 @@
     }
 
     .ds-link-inset  {
-        @apply block focus:ring-inset focus:ring-4 focus:outline-none focus:ring-current ;    
+        @apply block focus:ring-inset focus:ring-4 focus:outline-none focus:ring-focus-state ;    
     }
 
     .ds-link-inset:focus:not(:focus-visible) {

package/src/assets/tailwind.css

@@ -67,6 +67,8 @@
     --font-weight-title: theme('fontWeight.bold');
     --font-titleCluster: theme('fontFamily.headingSerif');
     --font-weight-titleCluster: theme('fontWeight.bold');
+    /* Border Radius */
+    --border-radius-hr: theme('borderRadius.none'); ;
 }
 
 [data-theme='hessenschau'] {
@@ -128,6 +130,8 @@
     --font-weight-title: theme('fontWeight.normal');
     --font-titleCluster: theme('fontFamily.headingSerif');
     --font-weight-titleCluster: theme('fontWeight.bold');
+     /* Border */
+    --border-radius-hr: theme('borderRadius.3xl'); 
 }
 
 [data-theme='hr-fernsehen'] {
@@ -710,6 +714,8 @@
     /* Font */
     --font-title: theme('fontFamily.heading');
     --font-weight-title: theme('fontWeight.bold');
+    /* Border */
+    --border-radius-hr: theme('borderRadius.3xl'); 
 }
 
 [data-theme='you-fm'] {

package/src/stories/views/components/content_nav/content_nav_container.hbs

@@ -6,7 +6,7 @@
     {{#if this.isAutosuggest}}
         <div class="flex mx-0 w-full h-10 border-blue-congress align-center{{#if _autoSuggestContainerCss}} {{_autoSuggestContainerCss}}{{/if}}">
             <input x-ref="autosuggestInput"
-                   class="w-full h-10 pl-2 bg-gray-200 border-b-8 border-white text-grey-dark placeholder:text-grey-dark focus:outline-none js-autosuggest-input"
+                   class="w-full h-10 pl-2 bg-gray-200 border-b-8 border-white ds-link-inset text-grey-dark placeholder:text-grey-dark focus:outline-none js-autosuggest-input"
                    type="text"
                    placeholder="Eintrag filtern"/>
         </div>

package/src/stories/views/components/grid/grid_group_tabbed.hbs

@@ -1,5 +1,5 @@
 </div>
-<section class="grid grid-cols-12 px-8 py-8 mx-4 mt-6 bg-blue-400 sm:mx-0 rounded-tl-3xl rounded-br-3xl col-full sm:col-main gap-x-6 gap-y-6">
+<section class="grid grid-cols-12 px-8 py-8 mx-4 mt-6 bg-blue-400 sm:mx-0 rounded-tl-hr rounded-br-hr col-full sm:col-main gap-x-6 gap-y-6">
     {{> @partial-block }}
 </section>
 <div class="{{> components/grid/grid_group_wrapper_classes }}">

package/src/stories/views/components/teaser/cluster/teaser_cluster.hbs

@@ -1,4 +1,4 @@
-<article class="mx-5 sm:mx-0 col-span-12 grid bg-highlight-1 rounded-tl-3xl rounded-br-3xl {{~inline-switch this.teaserSize '["25","33","50"]' '[" md:col-span-3"," md:col-span-4"," md:col-span-6",""]'}} ">
+<article class="mx-5 md:mx-0  col-span-12 grid bg-highlight-1 rounded-tl-hr rounded-br-hr {{~inline-switch this.teaserSize '["25","33","50"]' '[" md:col-span-3"," md:col-span-4"," md:col-span-6",""]'}} ">
     <div class="">
             <h2 class="flex items-center px-5 py-5 text-clusterTeaserHeadline">
                 {{#if this.teaserLogo}}

package/src/stories/views/components/teaser/podcast/podcast-playlist.hbs

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

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

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

package/src/stories/views/components/teaser/podcast/podcast_playlist_player.hbs

@@ -18,21 +18,15 @@
           {{> components/teaser/podcast/podcast_title _title=this.title _teaserSize=this.teaserSize _addClass="" }}
         </div>
 
-        {{!-- Shorttext --}}
-        {{#unless _isSinglePage}}
-          {{#unless this.hideShortText}}
-            {{~#with this.shorttext}}
-              <div class="hidden pb-6 text-sm md:flex md:text-base font-copy">
-                <span class="c-teaser__shorttext"> {{this}} </span>
-              </div>
-            {{/with~}}
-          {{/unless}}
-        {{/unless}}
-
+        {{#switch this.teaserSize }}
+          {{#case 100}}
+            {{> components/teaser/podcast/podcast_playlist_shorttext}}
+          {{/case}}
+        {{/switch}}
       </div>
 
       {{!-- Podcast Image --}}
-      <div class="flex flex-col ">
+      <div class="flex flex-col pb-5">
         <div class="w-24 md:w-32 lg:w-42">
           {{> components/base/image/responsive_image this.teaseritem
             _type="podcastEpisodePlayer"
@@ -43,8 +37,16 @@
           }}
         </div>
       </div>
-
     </div>
+
+    {{#switch this.teaserSize }}
+      {{#case 50}}
+        <div class="flex flex-row w-full px-5 md:pl-5">
+          {{> components/teaser/podcast/podcast_playlist_shorttext}}
+        </div>
+      {{/case}}
+    {{/switch}}
+    
     {{!-- Abo-Dropdown --}}
     <div class="flex flex-row px-5 md:pr-0"> 
       {{> components/teaser/podcast/podcast_subscribe_button}}

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

@@ -0,0 +1,10 @@
+{{!-- Shorttext --}}
+{{#unless _isSinglePage}}
+    {{#unless this.hideShortText}}
+    {{~#with this.shorttext}}
+        <div class="hidden pb-6 text-sm md:flex md:text-base font-copy">
+        <span class="c-teaser__shorttext"> {{this}} </span>
+        </div>
+    {{/with~}}
+    {{/unless}}
+{{/unless}}

package/src/stories/views/components/teaser/podcast/podcast_subscribe_button.hbs

@@ -16,7 +16,7 @@
         x-on:keydown.escape.prevent.stop="close($refs.button)"
         x-on:focusin.window="! $refs.panel.contains($event.target) && close()"
         x-id="['dropdown-button']"
-        class="relative z-10 h-10"
+        class="relative h-10 z-9999"
     >
 
     {{!-- Button --}}
@@ -44,13 +44,13 @@
         x-on:click.outside="close($refs.button)"
         :id="$id('dropdown-button')"
         style="display: none;"
-        class="left-0 w-full px-2 text-sm text-white font-heading grow bg-podcast-highlight"
+        class="left-0 w-full text-sm text-white font-heading grow bg-podcast-highlight"
     >
         {{~#with this.podcastHoster~}}
         <ul>
             {{~#each this~}}
                 <li class="{{#unless @last}}border-b{{/unless}}"> 
-                    <a class="flex py-2 text-left ds-link whitespace-nowrap hover:underline disabled:text-gray-500"
+                    <a class="flex px-2 py-2 text-left ds-link whitespace-nowrap hover:underline disabled:text-gray-500"
                     title="{{this.podcastHosterName}}" 
                     target="_blank"
                     rel="noopener noreferrer"

package/src/stories/views/components/teaser/podcast/podcast_title.hbs

@@ -1,4 +1,4 @@
-{{#decorator 'components/base/link' _css="group ds-link font-title text-base mt-2.5 text-podcast-text line-clamp-4 md:line-clamp-2 ..." }} 
+{{#decorator 'components/base/link' _css="group ds-link font-title text-base mt-2.5 text-podcast-text line-clamp-4 lg:line-clamp-2 ..." }} 
     <span class="block mt-0.5 group-hover:underline {{#if _ordered}} pl-8 {{/if}} {{~ inline-switch _teaserSize '["hero","100","50"]''["text-base md:text-2xl","text-base md:text-2xl","text-base md:text-lg"]' ~}}">
         {{~_title~}}
     </span>

package/src/stories/views/components/teaser/tabbox/teaser_tabbox.hbs

@@ -2,7 +2,7 @@
 <div 
   x-cloak 
   x-data="{ tab: '{{this.tabbedGroup.[0].title}}' }"
-  class="grid grid-cols-12 pt-6 mx-0 mb-8 mt-14 col-full md:pt-7 bg-highlight-1 md:rounded-tl-3xl md:rounded-br-3xl md:col-main gap-x-6 gap-y-6"
+  class="grid grid-cols-12 pt-6 mx-0 mb-8 mt-14 col-full md:pt-7 bg-highlight-1 md:rounded-tl-hr md:rounded-br-hr md:col-main gap-x-6 gap-y-6"
 >
   <section class="px-0 col-span-full sm:px-8 md:px-0" data-hr-group-tabbed='{"wandaPageId":"{{this.wandaPageId}}"}'>
     <div class="flex flex-wrap justify-center mb-7 mx-1.5" role="tablist">

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

@@ -1,9 +1,9 @@
 <article class="mx-5 sm:mx-0 relative col-span-12 flex gap-y-5 gap-x-4 {{inline-switch this.realTeaserSize '["33","50"]' '["md:col-span-4 flex-col","md:col-span-6 flex-col","flex-col"]'}} ">
     <figure class="ar-1-1" aria-hidden="true">
-        {{~> components/base/image/responsive_image this.teaserImage _type=this.teaserType _variant=this.content.imageVariant _noDelay=../_noDelay _addClassImg="ar__content rounded-tl-3xl rounded-br-3xl" ~}}
+        {{~> 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-3xl rounded-br-3xl" aria-hidden="true">
-        {{#decorator 'components/base/link' _css="ds-teaser-focus flex items-center flex-col before:rounded-tl-3xl before:rounded-br-3xl hover:text-toplineColor"}} 
+    <div class="absolute flex flex-col justify-center w-full h-full bg-gradient-to-t from-black rounded-tl-hr rounded-br-hr" aria-hidden="true">
+        {{#decorator 'components/base/link' _css="ds-teaser-focus flex items-center flex-col before:rounded-tl-hr before:rounded-br-hr hover:text-toplineColor"}} 
             {{> components/teaser/components/teaser_heading 
             _headlineTag="h2" 
             _headlineCss="text-shadow text-center text-white mb-4 mx-4 md:mb-8 xs:mx-6 sm:mx-8 md:mx-5 lg:mx-8 line-clamp-4 xs:line-clamp-6 md:line-clamp-4 lg:line-clamp-5" 

package/tailwind.config.js

@@ -38,6 +38,9 @@ module.exports = {
         },
 
         extend: {
+            borderRadius: {
+                hr: 'var(--border-radius-hr)',
+            },
             fontSize: {
                 'xs': ['0.75rem', '1.063rem'],
                 'sm': ['0.875rem', '1.188rem'],