hr-design-system-handlebars 1.50.16 → 1.50.18

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

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

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

@@ -0,0 +1,9 @@
+{{~#if (isStorybook)~}}
+    <div class="mt-6 italic text-gray-dark">coming soon: Voting-component</div>
+{{~else~}}
+    {{#if this.isMultiVote}}
+        {{> modules/teaser/voting-teaser/multiVotingTeaser _addClass="copytext__clearBox"}}
+    {{else}}
+        {{> modules/teaser/voting-teaser/singleVotingTeaser _addClass="copytext__clearBox"}}
+    {{/if}}
+{{~/if~}}

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

@@ -0,0 +1,5 @@
+{{~#if (isStorybook)~}}
+    <div class="mt-6 italic text-gray-dark">coming soon: Webform-component</div>
+{{~else~}}
+    {{> content/webform/components/webform _addClass="copytext__clearBox marginTrailer--m"}}
+{{~/if~}}     

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

@@ -0,0 +1,129 @@
+{{#each this.copytextParagraph }}
+    {{{this.structuredDataSsi}}}
+    {{#if this.isHeadline}}
+        {{> components/content/copytext/components/headline }}
+    {{/if}}
+
+    {{#unless this.isInfoBox}}
+        {{~#with this.paragraphBoxItem }}
+            {{~#if this.isImage}}
+                {{> components/content/copytext/components/image }}    
+            {{/if~}}
+            {{~#if this.isContentBox}}
+                {{~> components/article/components/contentbox/contentbox ~}}
+            {{/if~}}
+            {{~#if this.isAccordion}}
+               {{~> components/article/components/accordion/accordion ~}}
+            {{/if~}}
+            {{~#if this.isGallery}}                
+                {{> components/content/copytext/components/gallery }}                
+            {{/if~}}
+            {{~#if this.isFileDownload}}
+                {{> components/content/copytext/components/filedownload }}                
+            {{/if~}}
+            {{~#if this.isMap}}
+                {{> components/content/copytext/components/map }}    
+            {{/if~}}
+            {{~#if this.isWebForm}}
+                {{> components/content/copytext/components/webform }}
+            {{/if~}}
+            {{~#if this.isNewsletter}}
+                {{> components/content/copytext/components/newsletter }}    
+            {{/if~}}
+            {{~#if this.isAudio}}
+                {{> components/content/copytext/components/audio }}
+            {{/if~}}
+            {{~#if this.isAudioEventLivestream}}
+                {{> components/content/copytext/components/audioeventlivestream }}
+            {{/if~}}
+            {{~#if this.isPodcastEpisode}}
+                {{> components/content/copytext/components/podcastepisode }}
+            {{/if~}}
+            {{~#if this.isVideo}}
+                {{> components/content/copytext/components/video }}
+            {{/if~}}
+            {{~#if this.isLivestream}}
+                {{> components/content/copytext/components/livestream }}
+            {{/if~}}
+            {{~#if this.isTweet}}
+                {{> components/content/copytext/components/tweet }}
+            {{~/if}}
+            {{~#if this.isRadioPlaylist}}
+                {{> components/content/copytext/components/radioplaylist }}
+            {{~/if}}
+            {{~#if this.isVoting}}
+                {{> components/content/copytext/components/voting }}
+            {{/if~}}
+            {{~#if this.isExternalService}}
+                {{> components/content/copytext/components/externalservice }}
+            {{/if~}}
+            {{~#if this.isContentNav}}
+                {{#with this.toModel.contentNavigationTeaser}}
+                    {{~> components/teaser/content_nav/teaser_content_nav _isCopytext=true ~}}
+                {{/with}}
+            {{/if~}}
+        {{~/with}}
+    {{/unless}}
+
+    {{~#with this.paragraphTeaserItem }}
+        {{~#if this.isTopictag}}
+            {{#with this.toModel.genericTeaser}}
+                {{> components/content/copytext/components/posterteaser }}
+            {{/with}}
+        {{/if~}}
+        {{~#if this.isTicker}}
+            {{#with this.toModel.genericTeaser}}
+                {{> components/content/copytext/components/posterteaser }}
+            {{/with}}
+        {{/if~}}
+        {{~#if this.isLink}}
+            {{#with this.toModel.genericTeaser}}
+                {{> components/content/copytext/components/posterteaser }}
+            {{/with}}
+        {{/if~}}
+        {{~#if this.isStructureNodeDocument}}
+            {{#with this.toModel.structureNodeTeaser}}
+                {{> components/content/copytext/components/posterteaser }}
+            {{/with}}
+        {{/if~}}
+        {{~#if this.isStory}}
+            {{#with this.toModel.genericTeaser}}
+                {{> components/content/copytext/components/posterteaser }}
+            {{/with}}
+        {{/if~}}
+        {{~#if this.isProgram}}
+            {{#with this.toModel.genericTeaser}}
+                {{> components/content/copytext/components/posterteaser }}
+            {{/with}}
+        {{/if~}}
+        {{~#if this.isEvent}}
+            {{#with this.toModel.eventTeaser}}
+                {{> components/content/copytext/components/posterteaser }}
+            {{/with}}
+        {{/if~}}
+    {{~/with}}
+
+    {{#if this.isParagraph}}
+        {{> components/content/copytext/components/paragraph }}
+    {{/if}}
+
+    {{#if this.isCite}}
+        {{> components/content/copytext/components/cite }}
+    {{/if}}
+
+    {{#if this.isInfoBox}}
+        {{> components/content/copytext/components/infobox }}
+    {{/if}}
+    {{#if this.isAdditionalInfo}}
+        {{> components/content/copytext/components/additionalinfo }}
+    {{/if}}
+    {{#if this.isDownloadBox}}
+        {{> components/content/copytext/components/downloadbox }}
+    {{/if}}
+    {{#if this.isFAQ}}
+        {{> components/content/copytext/components/faq }}
+    {{/if}}
+    {{#if this.isJobposting}}
+        {{> components/content/copytext/components/jobposting }}
+    {{/if}}
+{{/each}}

package/dist/views/components/footer/page_footer.hbs

@@ -1,4 +1,5 @@
-<footer class="flex justify-center w-full text-base border-t cy-footer pb-footer-padding-bottom text-footer-text print:hidden bg-footer-bg border-footer-border js-pageFooter" role="contentinfo" itemscope="itemscope" itemtype="http://schema.org/WPFooter" >
+<footer class="relative flex justify-center w-full text-base border-t cy-footer pb-footer-padding-bottom text-footer-text print:hidden bg-footer-bg border-footer-border js-pageFooter" role="contentinfo" itemscope="itemscope" itemtype="http://schema.org/WPFooter" >
+    <div class="absolute top-feature-box-height" x-data x-intersect="$store.footerIsVisible = true" x-intersect:leave="$store.footerIsVisible = false"></div>
     <div class="flex md:container lg:px-10">
         <span class="hidden">Footer Navigation</span>
                 

package/dist/views/components/navigation/breadcrumb/breadcrumb.hbs

@@ -1,7 +1,8 @@
-<nav id="breadcrumb-nav" class="print:hidden{{~#unless this.showBreadcrumbTitleAlways}} hide-last-item-below-sm{{/unless~}}"
-        role="navigation"
-        aria-label="{{loca "breadcrumb_headline"}}"
->   <ul>
+<nav id="breadcrumb-nav" class="print:hidden px-4 md:px-5 lg:px-10 inline-block bg-white rounded-r{{~#unless this.showBreadcrumbTitleAlways}} hide-last-item-below-sm{{/unless~}}"
+     role="navigation"
+     aria-label="{{loca "breadcrumb_headline"}}"
+>
+    <ul>
         {{#with this.breadcrumbSsi}}
             {{> components/base/loadSSI _templatePath="components/navigation/breadcrumb/breadcrumb_items.ssi"}}
         {{/with}}

package/dist/views/components/top_button/top_button.hbs

@@ -0,0 +1,24 @@
+<div class="h-8" x-data="{ isVisible: false }">
+    <div class="grid h-8 grid-page z-100" :class="{ 'fixed bottom-feature-box-height left-0 w-full': !$store.footerIsVisible }">
+        <div class="flex justify-end h-8 col-full sm:col-main"
+        :class="{ 'bg-white': $store.footerIsVisible }">
+            <button
+                @scroll.window="isVisible = (window.pageYOffset > (window.innerHeight || (document.documentElement || document.body).clientHeight))"
+                @click.window="window.scrollTo({top: 0, behavior: 'smooth'})"
+                x-show="isVisible"
+                x-transition:enter="transition ease-[cubic-bezier(0.68,-0.3,0.32,1)] duration-500 transform order-first"
+                x-transition:enter-start="opacity-0 -translate-y-8"
+                x-transition:enter-end="opacity-100 translate-y-0"
+                x-transition:leave="transition ease-[cubic-bezier(0.68,-0.3,0.32,1)] duration-300 transform absolute"
+                x-transition:leave-start="opacity-100 translate-y-0"
+                x-transition:leave-end="opacity-0 translate-y-12"               
+                class="{{> components/button/utilities/button_base_classes}} {{> components/button/utilities/button_variation_classes _variant="primary"}} -mt-6 z-100 p-3 h-max mr-2 [@media(min-width:1170px)]:-mr-14"
+                >
+                {{> components/base/image/icon _icon="arrow-up"  _addClass="w-5 h-5 fill-current dark:fill-link-dark"}}            
+            </button>
+        </div>
+    </div>
+    {{! Dieses DIV ist notwendig um bei Seiten mit einem Hintergrund zu vermeiden dass unten eine Lücke entsteht bei der das hintergrundbild durchscheint}}
+    {{! TODO: Wenn Alle Seiten (auch artikel) auf grid umgestellt sind kann unter den Contentschlauch ein padding hinzugefügt werden. dann kann das hier umgebaut werden }}
+    <div class="grid h-8 grid-page" :class="{ 'hidden': $store.footerIsVisible }"><div class="flex justify-end h-8 bg-white col-full sm:col-main"></div></div>
+</div>

package/dist/views_static/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/dist/views_static/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/dist/views_static/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/dist/views_static/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/dist/views_static/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/dist/views_static/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/dist/views_static/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/dist/views_static/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/dist/views_static/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/dist/views_static/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/dist/views_static/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/dist/views_static/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/dist/views_static/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/dist/views_static/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/dist/views_static/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/dist/views_static/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/dist/views_static/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/dist/views_static/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/dist/views_static/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/dist/views_static/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/dist/views_static/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/dist/views_static/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/dist/views_static/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/dist/views_static/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>