hr-design-system-handlebars 1.50.16 → 1.50.18

package/src/assets/tailwind.css

@@ -4,7 +4,6 @@
 @import 'css/custom-components.css';
 @import 'tailwindcss/utilities';
 @import 'css/custom-utilities.css';
-
 /*! purgecss start ignore */
 :root,
 [data-theme='default'] {
@@ -136,6 +135,24 @@
     --color-ticker-teaser-headline-underline : theme('colors.white.DEFAULT');
     --color-toggle-confirmation: #2c7e13; 
     --color-toggle-default: #797979;
+
+    
+    --banner__background-color: theme('colors.white.DEFAULT');
+    --banner__background-color--with-image:theme('colors.transparent');
+    --banner-overlay_background-color: theme('colors.white.DEFAULT');
+    --banner-overlay__background-color--rgba: rgba(--banner-overlay_background-color, 0.85);
+    --banner-topline__color: theme('colors.black.DEFAULT');
+
+    --banner-specialinfo__background-color: theme('colors.white.DEFAULT');
+    --banner-specialinfo__color: theme('colors.black.DEFAULT');
+    --banner-specialinfo__background-color--invert: theme('colors.black.DEFAULT');
+    --banner-specialinfo__color--invert: theme('colors.white.DEFAULT');
+
+    --structure-nav-background: var(--color-primary-ds);
+    --structure-nav-text: theme('colors.white.DEFAULT');
+    --structure-nav-text-mobile: var(--color-primary-ds);
+
+    --feature-box-height: 0;
 }
 
 [data-theme='hessenschau'] {
@@ -382,6 +399,10 @@
     /* Font */
     --font-title: theme('fontFamily.heading');
     --font-weight-title: theme('fontWeight.bold');
+    /* Structure Navigation */
+    --structure-nav-background: theme('colors.blue.astronautBlue');
+
+    --feature-box-height: 96px;
 }
 
 [data-theme='hr-rundfunkrat'] {
@@ -464,6 +485,8 @@
     /* Font */
     --font-title: theme('fontFamily.heading');
     --font-weight-title: theme('fontWeight.bold');
+    /* Structure Navigation */
+    --structure-nav-background: theme('colors.blue.deepCerulean');
 }
 
 [data-theme='hr-werbung'] {
@@ -844,6 +867,12 @@
     /* Font */
     --font-title: theme('fontFamily.heading');
     --font-weight-title: theme('fontWeight.bold');
+    /* Structure Nav */
+    --structure-nav-background: var(--color-primary-ds);
+    --structure-nav-text: #433d37;
+    --structure-nav-text-mobile: theme('colors.yellow.olive');
+
+    --feature-box-height: 96px;
 }
 
 [data-theme='hr2'] {
@@ -922,6 +951,8 @@
     --color-ticker-teaser-timeline-score: theme('colors.pink.rose');
 
     --search-border-color-desktop:  var(--color-navigation-icons);
+    
+    --feature-box-height: 96px;
 }
 
 [data-theme='hr3'] {
@@ -1000,6 +1031,8 @@
     --font-weight-title: theme('fontWeight.bold');
 
     --search-border-color-desktop: theme('colors.gray.scorpion');
+
+    --feature-box-height: 96px;
 }
 
 [data-theme='hr4'] {
@@ -1077,6 +1110,9 @@
     --font-weight-title: theme('fontWeight.bold');
     /* Border */
     --border-radius-hr: theme('borderRadius.3xl');
+    /* Structure Navigation */
+    --structure-nav-background: theme('colors.green.genoa');
+    --feature-box-height: 96px;
 }
 
 [data-theme='you-fm'] {
@@ -1161,6 +1197,11 @@
     --font-weight-title: theme('fontWeight.bold');
 
     --search-border-color-desktop:  var(--color-navigation-icons);
+    /* Structure Navigation */
+    --structure-nav-background: theme('colors.yellow.goldenSand');
+    --structure-nav-text: theme('colors.black.DEFAULT');
+    --structure-nav-text-mobile: theme('colors.blue.lightCerulean');
+    --feature-box-height: 96px;
 }
 
 /*! purgecss end ignore */

package/src/stories/views/components/banner/banner.storybook.hbs

@@ -0,0 +1,126 @@
+<div class="flex flex-col py-6 bg-slate-500">
+    <div class="grid grid-page">
+        <h1 class="text-3xl font-title col-full sm:col-main">Maximalausprägung mit Struktur Navigation</h1>
+    </div>
+    {{#> components/banner/header/breadcrumb_wrapper _hasContentNav=true  }}
+        {{> components/navigation/breadcrumb/breadcrumb }}
+    {{/components/banner/header/breadcrumb_wrapper }} 
+
+    {{#> components/banner/header/banner_wrapper _hasImage=true _hideOnMobile=false}}
+        {{#> components/banner/header/banner_overlay _hasBackground=true}}
+            {{#> components/banner/header/special_info _invert="true"}}
+                Montag bis Freitag von 5 bis 11.00 Uhr
+            {{/components/banner/header/special_info }}
+            {{#> components/banner/header/title_background _hasBackground=true}}
+                {{#> components/banner/header/topline }}
+                    Diese Sendung bringt euch gut in den Tag
+                {{/components/banner/header/topline }}
+                {{#> components/banner/header/headline ~}}
+                    Die hr3 Morningshow
+                    {{~#> components/banner/header/additional_info ~}}
+                        AdditionalInfo
+                    {{~/components/banner/header/additional_info ~}}
+                {{/components/banner/header/headline }}
+                {{#> components/banner/header/byline }}
+                        Aktualisiert am 03.11.23 um 12:33 Uhr
+                {{/components/banner/header/byline }}
+            {{/components/banner/header/title_background }}
+        {{/components/banner/header/banner_overlay }}
+        {{~> components/banner/header/banner_image _hideOnMobile=true }}   
+    {{/components/banner/header/banner_wrapper }}   
+    {{~#with this.structureNav}}
+        {{> components/banner/structure_nav/structure_nav}}
+    {{/with}}       
+</div>
+<div class="flex flex-col py-6 bg-orange-500">
+    <div class="grid grid-page">
+        <h1 class="text-3xl font-title col-full sm:col-main">Maximalausprägung ohne Struktur Navigation</h1>
+    </div>
+    {{#> components/banner/header/breadcrumb_wrapper _hasContentNav=false }}
+        {{> components/navigation/breadcrumb/breadcrumb }}
+    {{/components/banner/header/breadcrumb_wrapper }} 
+
+    {{#> components/banner/header/banner_wrapper _hasImage=true _hideOnMobile=false}}
+        {{#> components/banner/header/banner_overlay _hasBackground=true}}
+            {{#> components/banner/header/special_info _invert="true"}}
+                Montag bis Freitag von 5 bis 11.00 Uhr
+            {{/components/banner/header/special_info }}
+            {{#> components/banner/header/title_background _hasBackground=true}}
+                {{#> components/banner/header/topline }}
+                    Diese Sendung bringt euch gut in den Tag
+                {{/components/banner/header/topline }}
+                {{#> components/banner/header/headline ~}}
+                    Die hr3 Morningshow
+                    {{~#> components/banner/header/additional_info ~}}
+                        AdditionalInfo
+                    {{~/components/banner/header/additional_info ~}}
+                {{/components/banner/header/headline }}
+                {{#> components/banner/header/byline }}
+                        Aktualisiert am 03.11.23 um 12:33 Uhr
+                {{/components/banner/header/byline }}
+            {{/components/banner/header/title_background }}
+        {{/components/banner/header/banner_overlay }}
+        
+        {{~> components/banner/header/banner_image }}
+    {{/components/banner/header/banner_wrapper }}         
+</div>
+<div class="flex flex-col py-6 bg-green-800">
+    <div class="grid grid-page">
+        <h1 class="text-3xl font-title col-full sm:col-main">Maximalausprägung Mobil kein Bild</h1>
+    </div>
+    {{#> components/banner/header/breadcrumb_wrapper _hasContentNav=false}}
+        {{> components/navigation/breadcrumb/breadcrumb }}
+    {{/components/banner/header/breadcrumb_wrapper }} 
+
+    {{#> components/banner/header/banner_wrapper _hasImage=true _hideOnMobile=true}}
+        {{#> components/banner/header/banner_overlay _hasBackground=true _hideOnMobile=true}}
+            {{#> components/banner/header/title_background _hasBackground=true}}
+                {{#> components/banner/header/topline }}
+                    Diese Sendung bringt euch gut in den Tag
+                {{/components/banner/header/topline }}
+                {{#> components/banner/header/headline ~}}
+                    Die hr3 Morningshow
+                    {{~#> components/banner/header/additional_info ~}}
+                        AdditionalInfo
+                    {{~/components/banner/header/additional_info ~}}
+                {{/components/banner/header/headline }}
+                {{#> components/banner/header/byline }}
+                        Aktualisiert am 03.11.23 um 12:33 Uhr
+                {{/components/banner/header/byline }}
+            {{/components/banner/header/title_background }}
+        {{/components/banner/header/banner_overlay }}
+        {{~> components/banner/header/banner_image _hideOnMobile=true }}
+        
+    {{/components/banner/header/banner_wrapper }}         
+</div>
+<div class="flex flex-col py-6 bg-white dark:bg-black ">
+    <div class="grid grid-page">
+        <h1 class="text-3xl font-title col-full sm:col-main">Maximalausprägung kein Bild</h1>
+    </div>
+    {{#> components/banner/header/breadcrumb_wrapper _hasContentNav=false }}
+        {{> components/navigation/breadcrumb/breadcrumb }}
+    {{/components/banner/header/breadcrumb_wrapper }} 
+    {{#> components/banner/header/banner_wrapper _hasImage=false _hideOnMobile=false}}
+        {{#> components/banner/header/banner_overlay _hasBackground=false}}
+            {{#> components/banner/header/special_info _invert="true"}}
+                Montag bis Freitag von 5 bis 11.00 Uhr
+            {{/components/banner/header/special_info }}
+            {{#> components/banner/header/title_background _hasBackground=false}}
+                {{#> components/banner/header/topline }}
+                    Diese Sendung bringt euch gut in den Tag
+                {{/components/banner/header/topline }}
+                {{#> components/banner/header/headline ~}}
+                    Die hr3 Morningshow
+                    {{~#> components/banner/header/additional_info ~}}
+                        AdditionalInfo
+                    {{~/components/banner/header/additional_info ~}}
+                {{/components/banner/header/headline }}
+                {{#> components/banner/header/byline }}
+                        Aktualisiert am 03.11.23 um 12:33 Uhr
+                {{/components/banner/header/byline }}
+            {{/components/banner/header/title_background }}
+        {{/components/banner/header/banner_overlay }} 
+    {{/components/banner/header/banner_wrapper }}          
+</div>
+{{> components/top_button/top_button }}
+{{> components/footer/page_footer }}

package/src/stories/views/components/banner/copyright/tooltip.hbs

@@ -0,0 +1,17 @@
+<div class="absolute top-0 right-0 z-50 p-1 {{#if _hideOnMobile}}hidden lg:flex{{/if}}">
+  <figcaption class="relative flex flex-row group"> 
+    <div class="absolute items-center h-6 px-2 py-1 m-1 text-xs font-medium rounded opacity-0 pointer-events-none w-max font-headingSerif bg-white/60 dark:bg-black/60 dark:text-text-dark text-text group-hover:opacity-100 group-hover:static">
+        {{#if _captionText}}
+            <span class="block mr-1">{{_captionText}}</span>
+        {{/if}}
+        {{#if _copyrightText}}
+            <footer class="block">
+                <small class="text-xs">{{~loca "banner_image_copyright"}} {{_copyrightText}}</small>
+            </footer>   
+        {{/if}}
+    </div>
+    <button aria-hidden="true" class="inline-flex items-center justify-center w-6 h-6 m-1 leading-7 rounded text-text font-heading bg-white/80 dark:bg-black/60 dark:text-text-dark">
+        {{> components/base/image/icon _icon="copyright" _addClass="w-4 h-4 fill-text dark:fill-text-dark"}}                
+    </button>
+  </figcaption>
+</div>

package/src/stories/views/components/banner/fixtures/banner.json

@@ -0,0 +1 @@
+{"bannerImage":{"alttext":"Lorem ipsum","copyrightWithLinks":"","responsiveImage":{"asPicture":true,"asImage":false,"fallback":"images/rueckkehr-nach-abschiebung-102_v-16to7.jpg","sources":[{"media":"all and (min-width: 800px)","sizes":"(min-width: 1022px) 1022px, 100vw","srcset":"images/rueckkehr-nach-abschiebung-102_v-100to27__small.jpg 250w, images/rueckkehr-nach-abschiebung-102_v-100to27__medium.jpg 660w, images/rueckkehr-nach-abschiebung-102_v-100to27.jpg 1000w, images/rueckkehr-nach-abschiebung-102_v-100to27__retina.jpg 1920w"},{"media":"all and (max-width: 479px)","sizes":"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__medium__extended.jpg 640w, images/rueckkehr-nach-abschiebung-102_v-16to9.jpg 960w"},{"media":"all and (max-width: 799px)","sizes":"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"}]}},"structureNav":{"contentNav":{"title":"Die hr3 Morningshow","contentNavEntries":[{"content":{"title":"Arbeitsmarkt","link":{"url":"/teaser1","webviewUrl":"/teaser1#webview","isTargetBlank":true,"hasIcon":true,"iconName":"extern"}}},{"content":{"title":"Banken","link":{"url":"/teaser1","webviewUrl":"/teaser1#webview","isTargetBlank":true,"hasIcon":true,"iconName":"extern"}}},{"content":{"title":"Energie"},"link":{"url":"/teaser1","webviewUrl":"/teaser1#webview","isTargetBlank":true,"hasIcon":true,"iconName":"extern"}}]}},"breadcrumbSsi":{"breadcrumb":[{"url":"item-1","title":"Start"},{"url":"shows","title":"Shows"}]}}

package/src/stories/views/components/banner/fixtures/structureNav.json

@@ -0,0 +1 @@
+{"contentNav":{"title":"Die hr3 Morningshow","contentNavEntries":[{"content":{"title":"Arbeitsmarkt","link":{"url":"/teaser1","webviewUrl":"/teaser1#webview","isTargetBlank":true,"hasIcon":true,"iconName":"extern"}}},{"content":{"title":"Banken","link":{"url":"/teaser1","webviewUrl":"/teaser1#webview","isTargetBlank":true,"hasIcon":true,"iconName":"extern"}}},{"content":{"title":"Energie"},"link":{"url":"/teaser1","webviewUrl":"/teaser1#webview","isTargetBlank":true,"hasIcon":true,"iconName":"extern"}}]}}

package/src/stories/views/components/banner/header/additional_info.hbs

@@ -0,0 +1 @@
+<span class="block mt-2 text-lg font-normal sm480:text-xl md:ml-3 font-heading md:inline">{{> @partial-block }}</span>

package/src/stories/views/components/banner/header/banner_image.hbs

@@ -0,0 +1,13 @@
+{{#with this.bannerImage}}
+    {{#if ../bannerLink}}
+        <a href="{{../bannerLink}}">
+    {{/if}}
+    {{#unless ../_hideOnMobile }}
+        {{~> components/base/image/responsive_image _type="banner" _variant="default" _addClass="" _noDelay="true" _title=(loca "banner_image_copyright" (strip this.copyrightWithLinks html)) ~}}
+    {{else}}
+        {{~> components/base/image/responsive_image _type="banner" _variant="mobileHidden" _addClass="hidden lg:block" _noDelay="true" _title=(loca "banner_image_copyright" (strip this.copyrightWithLinks html)) ~}}
+    {{/unless}}
+    {{#if ../bannerLink}}
+        </a>
+    {{/if}}
+{{/with}}

package/src/stories/views/components/banner/header/banner_overlay.hbs

@@ -0,0 +1,3 @@
+{{#if _hasBackground}}<div class="{{#if _hideOnMobile}}lg:absolute lg:bottom-0 lg:left-0 lg:right-0 lg:z-50{{else}}absolute bottom-0 left-0 right-0 z-50 print:absolute{{/if}}">{{/if}}
+    {{> @partial-block }}
+{{#if _hasBackground}}</div>{{/if}}

package/src/stories/views/components/banner/header/banner_wrapper.hbs

@@ -0,0 +1,7 @@
+<div class="grid grid-page w-full order-2{{#if _hasImage}} overflow-hidden -image{{else}} -text{{/if}}{{~#if _hideOnMobile}} -hideOnMobile{{/if}}">
+    <div role="banner" class="grid col-full sm:col-main relative{{#unless _hasImage}} mx-4 md:mx-5 lg:mx-10 border-b border-gray-boulder pb-4{{/unless}}">
+        <div class="relative {{#if _hasImage}}-hasImage{{~#if _hideOnMobile}} aspect-auto bg-white dark:bg-black{{else}} ar-16-9 sm480:ar-16-7 md:ar-100-27{{/if}}{{/if}}">
+            {{> @partial-block }}
+        </div>
+    </div>
+</div>

package/src/stories/views/components/banner/header/breadcrumb_wrapper.hbs

@@ -0,0 +1,6 @@
+<div class="grid grid-page {{#if _hasContentNav }}order-4{{else}}order-1 py-2 [&:has(+.-image)]:order-4 lg:[&:has(+.-image.-hideOnMobile)]:order-1 [&:has(+.-image.-hideOnMobile)]:order-1 lg:[&:has(+.-image)]:py-0 lg:[&:has(+.-image)]:-mb-9 lg:[&:has(+.-image)]:order-1 lg:[&:has(+.-image)]:pt-3 z-10 bg-white lg:bg-transparent{{/if}}">
+    <div class="col-full sm:col-main{{#if _hasContentNav }} bg-white py-2{{else}}{{/if}}">
+        {{> @partial-block }}
+    </div>
+</div>
+{{!--  --}}

package/src/stories/views/components/banner/header/byline.hbs

@@ -0,0 +1 @@
+<p class="block mt-3 text-xs sm480:text-sm font-headingSerif text-byline dark:text-text-dark ">{{> @partial-block }}</p>

package/src/stories/views/components/banner/header/headline.hbs

@@ -0,0 +1,3 @@
+<span class="block mt-2 text-3xl sm480:text-4xl font-title text-text dark:text-text-dark">
+    {{> @partial-block }}   
+</span>

package/src/stories/views/components/banner/header/special_info.hbs

@@ -0,0 +1,3 @@
+<span class="px-5 md:px-5 lg:px-10 py-1.5 text-sm rounded-tr-lg inline-block leading-5 font-headingSerif {{inline-switch _invert '["true","false"]' '["text-structure-nav-text bg-structure-nav","text-primary bg-white","text-primary bg-white"]'}}">
+    {{> @partial-block }}
+</span>

package/src/stories/views/components/banner/header/title_background.hbs

@@ -0,0 +1,3 @@
+{{#if _hasBackground}}<div class="inline-block w-full px-4 pb-3 bg-white/60 dark:bg-black/60 md:px-5 lg:px-10">{{/if}}
+    {{> @partial-block }}
+{{#if _hasBackground}}</div>{{/if}}

package/src/stories/views/components/banner/header/topline.hbs

@@ -0,0 +1 @@
+<span class="font-title text-lg sm480:text-xl block mt-3.5 text-text dark:text-text-dark">{{> @partial-block }}</span>

package/src/stories/views/components/banner/header.stories.js

@@ -0,0 +1,36 @@
+import header from './banner.storybook.hbs'
+import bannerData from './fixtures/banner.json'
+
+const TemplateHeader = (args, { globals: { theme } }) => {
+    // You can either use a function to create DOM elements or use a plain html string!
+    // return `<div>${label}</div>`;
+    let brand = undefined !== theme ? theme : 'hessenschau'       
+    return header({ brand, ...args })
+}
+
+export default {
+    title: 'Komponenten/Banner',
+    argTypes: {},
+
+    parameters: {
+        chromatic: {
+            viewports: [360, 768, 1024],
+        },
+        layout: 'fullscreen',
+        docs: {
+            inlineStories: false,
+            iframeHeight: 400,
+        },
+    },
+}
+
+export const Seitenfooter = {
+    render: TemplateHeader.bind({}),
+    name: 'BannerHeader',
+    args: {
+        ...bannerData,
+        _currentPageUrl: '#currentPage',
+        _currentPageTitle:  'Der hr3 Nachmittag'
+    }
+  
+}

package/src/stories/views/components/banner/structure_nav/structureNav.stories.js

@@ -0,0 +1,32 @@
+import structureNav from './structure_nav.hbs'
+import structureNavData from '../fixtures/structureNav.json'
+
+const TemplateStructureNav = (args, { globals: { theme } }) => {
+    // You can either use a function to create DOM elements or use a plain html string!
+    // return `<div>${label}</div>`;
+    let brand = undefined !== theme ? theme : 'hessenschau'       
+    return structureNav({ brand, ...args })
+}
+
+export default {
+    title: 'Komponenten/Banner/StructureNav',
+    argTypes: {},
+
+    parameters: {
+        chromatic: {
+            viewports: [360, 768, 1024],
+        },
+        layout: 'fullscreen',
+        docs: {
+            inlineStories: false,
+            iframeHeight: 400,
+        },
+    },
+}
+
+export const Seitenfooter = {
+    render: TemplateStructureNav.bind({}),
+    name: 'StructureNav',
+    args: structureNavData
+  
+}

package/src/stories/views/components/banner/structure_nav/structure_nav.hbs

@@ -0,0 +1,34 @@
+{{#with this.contentNav}}
+    <div class="grid order-3 grid-page">       
+        <nav class="md:px-5 lg:px-10 col-full sm:col-main bg-structure-nav"
+            x-data="{ isOpen: false}">
+            <div class="relative flex flex-wrap items-center mx-auto" @click.outside="isOpen = false"> 
+                {{#> components/button/button _size="lg" _variant="tertiary" _disableButtonPress=true _alpineClick="isOpen = !isOpen" _css="md:hidden mr-2" _onBackground=true}}
+                    <span class="hidden" :class="{ 'hidden': isOpen }">
+                        {{> components/button/components/button_icon _icon="burger--weiss" _iconmap="icons" _css="fill-structure-nav-text" }}
+                    </span> 
+                    <span class="hidden" :class="{ 'hidden': !isOpen }">
+                        {{> components/button/components/button_icon _icon="close" _iconmap="icons" _css="fill-structure-nav-text" }}
+                    </span>
+                {{/components/button/button}}
+                <span class="md:hidden text-structure-nav-text">{{this.title}}</span>
+                <div class="absolute z-10 w-full top-9 md:static md:block md:w-auto" id="navbar-default" 
+                    :class="isOpen ? '' : 'hidden'"
+                    >
+                    <ul class="flex flex-col font-medium bg-white md:bg-transparent md:flex-row md:space-x-3 rtl:space-x-reverse"> 
+                        {{~#each this.contentNavEntries~}}
+                            <li class="border-b border-structure-nav md:border-b-0">
+                                {{#> "components/base/link" _link=this.link _css="block w-full px-3 py-2 text-base font-bold break-words text-structure-nav-text-mobile md:text-structure-nav-text hover:underline"}}
+                                    {{this.content.title}}
+                                {{/components/base/link}}
+                                {{#*inline "css"~}}
+                                    {{#if @first }}md:pl-0{{/if}}
+                                {{~/inline}}
+                            </li>
+                        {{~/each~}}
+                    </ul>
+                </div>
+            </div>
+        </nav> 
+    </div>
+{{/with}}

package/src/stories/views/components/base/image/responsive_image.hbs

@@ -10,7 +10,6 @@
 '_disableNoScript' don't add no script fallback
 
 --}}
-
 {{#withParam this.responsiveImage _type _variant }}
     {{#if this.asPicture}}
         <picture class="{{~#if ../_addClass}} {{../_addClass}}{{/if}}">
@@ -26,7 +25,7 @@
                            {{#with this.srcset}} srcset="{{this}}"{{/with}}>
                 {{/each}}
             {{/with}}
-                <img class="w-full{{~#if ../_addClassImg}} {{../_addClassImg}}{{/if}}" loading="{{#if ../_noDelay}}auto{{else}}lazy{{/if}}" src="data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw==" alt="{{#if ../_alttext}}{{../_alttext}}{{else}}{{../this.alttext}}{{/if}}" {{~#if ../_errorHandler }} onerror="this.onerror=null; {{../_errorHandler}}"{{/if}}>
+                <img class="w-full{{~#if ../_addClassImg}} {{../_addClassImg}}{{/if}}" loading="{{#if ../_noDelay}}auto{{else}}lazy{{/if}}" src="data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw==" alt="{{#if ../_alttext}}{{../_alttext}}{{else}}{{../this.alttext}}{{/if}}" {{~#if ../_title}} title="{{../_title}}"{{~/if}} {{~#if ../_errorHandler }} onerror="this.onerror=null; {{../_errorHandler}}"{{/if}}>
         </picture>
     {{/if}}
 
@@ -42,9 +41,11 @@
                     loading="{{#if ../../_noDelay}}auto{{else}}lazy{{/if}}"
                  {{#with this.srcset}} {{#if ../../../_noDelay}}srcset{{else}}data-srcset{{/if}}="{{this}}"{{/with}}
                 src="data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw=="
-                alt="{{#if ../../_alttext}}{{../../_alttext}}{{else}}{{../../this.alttext}}{{/if}}" class="w-full{{~#with ../../_addClassImg }} {{this}}{{/with}}" {{~#if ../../_errorHandler}} onerror="this.onerror=null; {{../../_errorHandler}}" {{~/if}}>
+                alt="{{#if ../../_alttext}}{{../../_alttext}}{{else}}{{../../this.alttext}}{{/if}}"
+                class="w-full{{~#with ../../_addClassImg }} {{this}}{{/with}}"
+                {{~#if ../../_title}} title="{{../../_title}}"{{~/if}}
+                {{~#if ../../_errorHandler}} onerror="this.onerror=null; {{../../_errorHandler}}" {{~/if}}>
             {{~#with ../../_addClass }}</div>{{/with}}
         {{/with}}
-
     {{/if}}
 {{/withParam}}

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

@@ -0,0 +1,5 @@
+{{~#if (isStorybook)~}}
+    <div class="mt-6 italic text-gray-dark">coming soon: Additional-info-component</div>
+{{~else~}}
+    {{~> modules/story/paragraphs/additional-info ~}}
+{{~/if~}} 

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

@@ -0,0 +1,9 @@
+{{~#if (isStorybook)~}}
+    <div class="mt-6 italic text-gray-dark">coming soon: Audio-component</div>
+{{~else~}}    
+    {{#if this.showFullSize.isTrue }}
+        {{> modules/media/media_figure _addClass="copytext__clearBox dontPrint" _a11yIntro-loca="story_audio_intro_sr" _a11yOutro-loca="story_audio_outro_sr" }}
+    {{else}}
+        {{> modules/media/media_figure _addClass="copytext__box dontPrint" _a11yIntro-loca="story_audio_intro_sr" _a11yOutro-loca="story_audio_outro_sr" }}
+    {{/if}}
+{{~/if~}} 

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

@@ -0,0 +1,9 @@
+{{~#if (isStorybook)~}}
+    <div class="mt-6 italic text-gray-dark">coming soon: Audioevent-Livestream-component</div>
+{{~else~}}
+    {{#if this.showFullSize.isTrue }}
+        {{> modules/media/media_figure _addClass="copytext__clearBox dontPrint" _a11yIntro-loca="story_audio_intro_sr" _a11yOutro-loca="story_audio_outro_sr" }}
+    {{else}}
+        {{> modules/media/media_figure _addClass="copytext__box dontPrint" _a11yIntro-loca="story_audio_intro_sr" _a11yOutro-loca="story_audio_outro_sr" }}
+    {{/if}}
+{{~/if~}}

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

@@ -0,0 +1,20 @@
+{{~#if (isStorybook)~}}
+    <div class="mt-6 italic text-gray-dark">coming soon: Cite-component</div>
+{{~else~}}
+    <div class="{{#if this.paragraphProperties.[0].showFullSize }}copytext__clearBox {{else}}copytext__box{{/if}}">
+        {{~> base/a11y/hiddenText _locaTag="story_cite_intro_sr" ~}}
+        <blockquote class="cite copytext__cite">
+            <cite class="cite__text">„{{{this.text}}}“</cite>
+            {{#with this.paragraphProperties}}
+                {{#with this.[0]}}
+                    {{#with this.citeAuthor}}
+                        <span class="cite__author">
+                            {{~> base/a11y/hiddenText _locaTag="story_cite_author_sr" ~}}
+                            {{this}}</span>
+                    {{/with}}
+                {{/with}}
+            {{/with}}
+        </blockquote>
+        {{~> base/a11y/hiddenText _locaTag="story_cite_outro_sr" ~}}
+    </div>
+{{~/if~}} 

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

@@ -0,0 +1,5 @@
+{{~#if (isStorybook)~}}
+    <div class="mt-6 italic text-gray-dark">coming soon: Downloadbox-component</div>
+{{~else~}}
+    {{~> modules/story/paragraphs/downloadbox ~}}
+{{~/if~}} 

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

@@ -0,0 +1,61 @@
+{{~#if (isStorybook)~}}
+    <div class="mt-6 italic text-gray-dark">coming soon: External-service-component</div>
+{{~else~}}
+    {{#with this.toModel.externalService}}
+        {{#if this.externalServiceConfig.makeConfigurable}}
+            {{~> modules/externalService/externalService~}}
+        {{else}}
+            {{#if this.externalServiceConfig.embedAsIFrame}}
+                {{#if this.fixedHeight}}
+                    {{#if this.serviceUrl}}
+                        <div class="copytext__externalService">
+                            {{~> base/a11y/hiddenText _locaTag="story_externalservice_intro_sr" ~}}
+                            <div class="copytext__scrollWrapper -fixedHeight"
+                                    style="height:{{this.fixedHeight}}px;">
+                                <iframe frameborder="0" width="100%" height="100%"
+                                        src="{{{this.serviceUrl}}}" webkitallowfullscreen mozallowfullscreen
+                                        allowfullscreen scrolling='no'></iframe>
+                            </div>
+                            {{~> base/a11y/hiddenText _locaTag="story_externalservice_outro_sr" ~}}
+                            {{#with this.externalServiceCaption}}
+                                <div class="copytext__captionLine">
+                                    <span class="figcaption">{{this}}</span>
+                                </div>
+                            {{/with}}
+                        </div>
+                    {{/if}}
+                {{else}}
+                    {{#if this.serviceUrl}}
+                        <div class="copytext__externalService">
+                            {{~> base/a11y/hiddenText _locaTag="story_externalservice_intro_sr" ~}}
+                            <div class="copytext__scrollWrapper">
+                                <div class="ar--{{defaultIfEmpty this.aspectRatio "auto"}}">
+                                    <iframe frameborder="0" class="ar__content" width="100%" height="100%"
+                                            src="{{{this.serviceUrl}}}" webkitallowfullscreen
+                                            mozallowfullscreen allowfullscreen></iframe>
+                                </div>
+                            </div>
+                            {{#with this.externalServiceCaption}}
+                                <div class="copytext__captionLine">
+                                    <span class="figcaption">{{this}}</span>
+                                </div>
+                            {{/with}}
+                            {{~> base/a11y/hiddenText _locaTag="story_externalservice_outro_sr" ~}}
+                        </div>
+                    {{/if}}
+                {{/if}}
+            {{else}}
+                <div class="copytext__externalService">
+                    <div class="c-externalService__{{this.externalServiceConfig.externalServiceId}} js-load"
+                            data-hr-external-service='{"id":"{{this.externalServiceConfig.externalServiceId}}","embedCode":"{{this.serviceUrl}}", "embedType": "{{this.externalServiceConfig.externalServiceEmbedType}}", "dataPolicyCheck": false, "iFrameConfig":{}}'>
+                    </div>
+                    {{#with this.externalServiceCaption}}
+                        <div class="copytext__captionLine js-externalservice__caption">
+                            <span class="figcaption">{{this}}</span>
+                        </div>
+                    {{/with}}
+                </div>
+            {{/if}}
+        {{/if}}
+    {{/with}}
+{{~/if~}}

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

@@ -0,0 +1,5 @@
+{{~#if (isStorybook)~}}
+    <div class="mt-6 italic text-gray-dark">coming soon: FAQ-component</div>
+{{~else~}}
+    {{~> modules/story/paragraphs/faq ~}}
+{{~/if~}}

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

@@ -0,0 +1,5 @@
+{{~#if (isStorybook)~}}
+    <div class="mt-6 italic text-gray-dark">coming soon: File-download-component</div>
+{{~else~}}
+    {{> modules/media/media_figure _addClass="copytext__box" _a11yIntro-loca="story_download_intro_sr" _a11yOutro-loca="story_download_outro_sr" }}
+{{~/if~}}     

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

@@ -0,0 +1,7 @@
+{{~#if (isStorybook)~}}
+    <div class="mt-6 italic text-gray-dark">coming soon: Gallery-component</div>
+{{~else~}}
+    {{#with this.toModel.galleryPage}}
+        {{> modules/media/media_figure _addClass="copytext__clearBox dontPrint" _a11yIntro-loca="story_gallery_intro_sr" _a11yOutro-loca="story_gallery_outro_sr" }}
+    {{/with}}
+{{~/if~}}    

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

@@ -0,0 +1 @@
+<h2 class="clear-both text-lg sm480:text-2xl font-headingSerif mt-11 dark:text-text-dark">{{{this.text}}}</h2>