hr-design-system-handlebars 1.59.12 → 1.59.14

package/CHANGELOG.md

@@ -1,3 +1,28 @@
+# v1.59.14 (Wed Feb 28 2024)
+
+#### 🐛 Bug Fix
+
+- DPE-2808 Offline-Seite kommt aus Storybook [#863](https://github.com/mumprod/hr-design-system-handlebars/pull/863) ([@Sunny1112358](https://github.com/Sunny1112358) [@vascoeduardo](https://github.com/vascoeduardo))
+
+#### Authors: 2
+
+- [@Sunny1112358](https://github.com/Sunny1112358)
+- Vasco ([@vascoeduardo](https://github.com/vascoeduardo))
+
+---
+
+# v1.59.13 (Wed Feb 28 2024)
+
+#### ⚠️ Pushed to `main`
+
+- 🐛 DPE-2928 ([@vascoeduardo](https://github.com/vascoeduardo))
+
+#### Authors: 1
+
+- Vasco ([@vascoeduardo](https://github.com/vascoeduardo))
+
+---
+
 # v1.59.12 (Tue Feb 27 2024)
 
 #### 🐛 Bug Fix

package/dist/assets/brand/hessenschau/conf/locatags.merged.json

@@ -45,6 +45,7 @@
 	"group_tabbed_more": "weitere Meldungen aus {0}",
 	"homepage_metatitle": "Nachrichten aus Hessen",
 	"javascript_disabled": "Keine Videowiedergabe möglich. Bitte aktivieren Sie Javascript oder deaktivieren Sie Tools, die die Scriptausführung im Browser unterbinden.",
+	"offline_page_info_text": "Keine Verbindung zum Server möglich. Bitte versuchen Sie es zu einem späteren Zeitpunkt erneut.",
 	"label_analysis": "Analyse",
 	"label_audio": "Audio",
 	"label_audio_event_livestream": "Livestream",

package/dist/assets/brand/hr/conf/locatags.merged.json

@@ -45,6 +45,7 @@
 	"group_tabbed_more": "weitere Meldungen aus {0}",
 	"homepage_metatitle": "Nachrichten aus Hessen",
 	"javascript_disabled": "Keine Videowiedergabe möglich. Bitte aktivieren Sie Javascript oder deaktivieren Sie Tools, die die Scriptausführung im Browser unterbinden.",
+	"offline_page_info_text": "Keine Verbindung zum Server möglich. Bitte versuchen Sie es zu einem späteren Zeitpunkt erneut.",
 	"label_analysis": "Analyse",
 	"label_audio": "Audio",
 	"label_audio_event_livestream": "Livestream",

package/dist/assets/brand/hr-bigband/conf/locatags.merged.json

@@ -45,6 +45,7 @@
 	"group_tabbed_more": "weitere Meldungen aus {0}",
 	"homepage_metatitle": "Nachrichten aus Hessen",
 	"javascript_disabled": "Keine Videowiedergabe möglich. Bitte aktivieren Sie Javascript oder deaktivieren Sie Tools, die die Scriptausführung im Browser unterbinden.",
+	"offline_page_info_text": "Keine Verbindung zum Server möglich. Bitte versuchen Sie es zu einem späteren Zeitpunkt erneut.",
 	"label_analysis": "Analyse",
 	"label_audio": "Audio",
 	"label_audio_event_livestream": "Livestream",

package/dist/assets/brand/hr-fernsehen/conf/locatags.merged.json

@@ -45,6 +45,7 @@
 	"group_tabbed_more": "weitere Meldungen aus {0}",
 	"homepage_metatitle": "Nachrichten aus Hessen",
 	"javascript_disabled": "Keine Videowiedergabe möglich. Bitte aktivieren Sie Javascript oder deaktivieren Sie Tools, die die Scriptausführung im Browser unterbinden.",
+	"offline_page_info_text": "Keine Verbindung zum Server möglich. Bitte versuchen Sie es zu einem späteren Zeitpunkt erneut.",
 	"label_analysis": "Analyse",
 	"label_audio": "Audio",
 	"label_audio_event_livestream": "Livestream",

package/dist/assets/brand/hr-inforadio/conf/locatags.merged.json

@@ -45,6 +45,7 @@
 	"group_tabbed_more": "weitere Meldungen aus {0}",
 	"homepage_metatitle": "Nachrichten aus Hessen",
 	"javascript_disabled": "Keine Videowiedergabe möglich. Bitte aktivieren Sie Javascript oder deaktivieren Sie Tools, die die Scriptausführung im Browser unterbinden.",
+	"offline_page_info_text": "Keine Verbindung zum Server möglich. Bitte versuchen Sie es zu einem späteren Zeitpunkt erneut.",
 	"label_analysis": "Analyse",
 	"label_audio": "Audio",
 	"label_audio_event_livestream": "Livestream",

package/dist/assets/brand/hr-rundfunkrat/conf/locatags.merged.json

@@ -45,6 +45,7 @@
 	"group_tabbed_more": "weitere Meldungen aus {0}",
 	"homepage_metatitle": "Nachrichten aus Hessen",
 	"javascript_disabled": "Keine Videowiedergabe möglich. Bitte aktivieren Sie Javascript oder deaktivieren Sie Tools, die die Scriptausführung im Browser unterbinden.",
+	"offline_page_info_text": "Keine Verbindung zum Server möglich. Bitte versuchen Sie es zu einem späteren Zeitpunkt erneut.",
 	"label_analysis": "Analyse",
 	"label_audio": "Audio",
 	"label_audio_event_livestream": "Livestream",

package/dist/assets/brand/hr-sinfonieorchester/conf/locatags.merged.json

@@ -45,6 +45,7 @@
 	"group_tabbed_more": "weitere Meldungen aus {0}",
 	"homepage_metatitle": "Nachrichten aus Hessen",
 	"javascript_disabled": "Keine Videowiedergabe möglich. Bitte aktivieren Sie Javascript oder deaktivieren Sie Tools, die die Scriptausführung im Browser unterbinden.",
+	"offline_page_info_text": "Keine Verbindung zum Server möglich. Bitte versuchen Sie es zu einem späteren Zeitpunkt erneut.",
 	"label_analysis": "Analyse",
 	"label_audio": "Audio",
 	"label_audio_event_livestream": "Livestream",

package/dist/assets/brand/hr-werbung/conf/locatags.merged.json

@@ -45,6 +45,7 @@
 	"group_tabbed_more": "weitere Meldungen aus {0}",
 	"homepage_metatitle": "Nachrichten aus Hessen",
 	"javascript_disabled": "Keine Videowiedergabe möglich. Bitte aktivieren Sie Javascript oder deaktivieren Sie Tools, die die Scriptausführung im Browser unterbinden.",
+	"offline_page_info_text": "Keine Verbindung zum Server möglich. Bitte versuchen Sie es zu einem späteren Zeitpunkt erneut.",
 	"label_analysis": "Analyse",
 	"label_audio": "Audio",
 	"label_audio_event_livestream": "Livestream",

package/dist/assets/brand/hr1/conf/locatags.merged.json

@@ -45,6 +45,7 @@
 	"group_tabbed_more": "weitere Meldungen aus {0}",
 	"homepage_metatitle": "Nachrichten aus Hessen",
 	"javascript_disabled": "Keine Videowiedergabe möglich. Bitte aktivieren Sie Javascript oder deaktivieren Sie Tools, die die Scriptausführung im Browser unterbinden.",
+	"offline_page_info_text": "Keine Verbindung zum Server möglich. Bitte versuchen Sie es zu einem späteren Zeitpunkt erneut.",
 	"label_analysis": "Analyse",
 	"label_audio": "Audio",
 	"label_audio_event_livestream": "Livestream",

package/dist/assets/brand/hr2/conf/locatags.merged.json

@@ -45,6 +45,7 @@
 	"group_tabbed_more": "weitere Meldungen aus {0}",
 	"homepage_metatitle": "Nachrichten aus Hessen",
 	"javascript_disabled": "Keine Videowiedergabe möglich. Bitte aktivieren Sie Javascript oder deaktivieren Sie Tools, die die Scriptausführung im Browser unterbinden.",
+	"offline_page_info_text": "Keine Verbindung zum Server möglich. Bitte versuchen Sie es zu einem späteren Zeitpunkt erneut.",
 	"label_analysis": "Analyse",
 	"label_audio": "Audio",
 	"label_audio_event_livestream": "Livestream",

package/dist/assets/brand/hr3/conf/locatags.merged.json

@@ -45,6 +45,7 @@
 	"group_tabbed_more": "weitere Meldungen aus {0}",
 	"homepage_metatitle": "Nachrichten aus Hessen",
 	"javascript_disabled": "Keine Videowiedergabe möglich. Bitte aktivieren Sie Javascript oder deaktivieren Sie Tools, die die Scriptausführung im Browser unterbinden.",
+	"offline_page_info_text": "Keine Verbindung zum Server möglich. Bitte versuchen Sie es zu einem späteren Zeitpunkt erneut.",
 	"label_analysis": "Analyse",
 	"label_audio": "Audio",
 	"label_audio_event_livestream": "Livestream",

package/dist/assets/brand/hr4/conf/locatags.merged.json

@@ -45,6 +45,7 @@
 	"group_tabbed_more": "weitere Meldungen aus {0}",
 	"homepage_metatitle": "Nachrichten aus Hessen",
 	"javascript_disabled": "Keine Videowiedergabe möglich. Bitte aktivieren Sie Javascript oder deaktivieren Sie Tools, die die Scriptausführung im Browser unterbinden.",
+	"offline_page_info_text": "Keine Verbindung zum Server möglich. Bitte versuchen Sie es zu einem späteren Zeitpunkt erneut.",
 	"label_analysis": "Analyse",
 	"label_audio": "Audio",
 	"label_audio_event_livestream": "Livestream",

package/dist/assets/brand/you-fm/conf/locatags.merged.json

@@ -45,6 +45,7 @@
 	"group_tabbed_more": "weitere Meldungen aus {0}",
 	"homepage_metatitle": "Nachrichten aus Hessen",
 	"javascript_disabled": "Keine Videowiedergabe möglich. Bitte aktivieren Sie Javascript oder deaktivieren Sie Tools, die die Scriptausführung im Browser unterbinden.",
+	"offline_page_info_text": "Keine Verbindung zum Server möglich. Bitte versuchen Sie es zu einem späteren Zeitpunkt erneut.",
 	"label_analysis": "Analyse",
 	"label_audio": "Audio",
 	"label_audio_event_livestream": "Livestream",

package/dist/assets/index.css

@@ -1421,6 +1421,9 @@ article.indexText ul {
 .mt-7\.5 {
   margin-top: 1.875rem;
 }
+.mt-9 {
+  margin-top: 2.25rem;
+}
 .mt-\[1px\] {
   margin-top: 1px;
 }
@@ -1520,6 +1523,9 @@ article.indexText ul {
 .h-5 {
   height: 1.25rem;
 }
+.h-52 {
+  height: 13rem;
+}
 .h-6 {
   height: 1.5rem;
 }
@@ -3275,7 +3281,7 @@ article.indexText ul {
   border-bottom-color: var(--color-secondary-ds);
 }
 .counter-reset {
-  counter-reset: cnt1709060823021;
+  counter-reset: cnt1709117666930;
 }
 .hyphens-auto {
   -webkit-hyphens: auto;
@@ -3318,7 +3324,7 @@ article.indexText ul {
 @supports not (aspect-ratio: 16 / 9) {
         .ar-16-9::before {
             float: left;
-            padding-top: 56.25%;
+            padding-top: calc(9 / 16 * 100%);
             content: '';
         }
 
@@ -3334,7 +3340,7 @@ article.indexText ul {
 @supports not (aspect-ratio: 4 / 3) {
         .ar-4-3::before {
             float: left;
-            padding-top: calc(4 / 3 * 100%);
+            padding-top: calc(3 / 4 * 100%);
             content: '';
         }
 
@@ -3360,23 +3366,6 @@ article.indexText ul {
             clear: both;
         }
     }
-.ar-auto {
-        aspect-ratio: auto;
-    }
-@supports not (aspect-ratio: auto) {
-        .ar-auto::before {
-            float: none;
-            float: initial;
-            padding-top: 0;
-            content: '';
-        }
-
-        .ar-auto::after {
-            display: inline;
-            content: '';
-            clear: none;
-        }
-    }
 /*! ********************************/
 /*! Aspect Ratio with fallback end */
 /*! ********************************/
@@ -3598,7 +3587,7 @@ article.indexText ul {
   --tw-ring-color: rgba(255, 255, 255, 0.5);
 }
 .-ordered {
-  counter-increment: cnt1709060823021 1;
+  counter-increment: cnt1709117666930 1;
 }
 .-ordered::before {
   position: absolute;
@@ -3614,7 +3603,7 @@ article.indexText ul {
   letter-spacing: .0125em;
   --tw-text-opacity: 1;
   color: rgba(0, 0, 0, var(--tw-text-opacity));
-  content: counter(cnt1709060823021);
+  content: counter(cnt1709117666930);
 }
 /*! ****************************/
 /*! DataPolicy stuff           */
@@ -5399,36 +5388,6 @@ article.indexText ul {
             clear: both;
         }
     }
-    .print\:ar-auto {
-        aspect-ratio: auto;
-    }
-
-    @supports not (aspect-ratio: auto) {
-        .print\:ar-auto::before {
-            float: none;
-            float: initial;
-            padding-top: 0;
-            content: '';
-        }
-
-        .print\:ar-auto::after {
-            display: inline;
-            content: '';
-            clear: none;
-        }
-        .print\:ar-auto::before {
-            float: none;
-            float: initial;
-            padding-top: 0;
-            content: '';
-        }
-
-        .print\:ar-auto::after {
-            display: inline;
-            content: '';
-            clear: none;
-        }
-    }
 }
 @media (min-width: 360px) {
 
@@ -5578,35 +5537,7 @@ article.indexText ul {
     @supports not (aspect-ratio: 16 / 7) {
         .sm480\:ar-16-7::before {
             float: left;
-            padding-top: 43.75%;
-            content: '';
-        }
-
-        .sm480\:ar-16-7::after {
-            display: block;
-            content: '';
-            clear: both;
-        }
-        .sm480\:ar-16-7::before {
-            float: left;
-            padding-top: 43.75%;
-            content: '';
-        }
-
-        .sm480\:ar-16-7::after {
-            display: block;
-            content: '';
-            clear: both;
-        }
-    }
-    .sm480\:ar-16-7 {
-        aspect-ratio: 16 / 7;
-    }
-
-    @supports not (aspect-ratio: 16 / 7) {
-        .sm480\:ar-16-7::before {
-            float: left;
-            padding-top: calc(16 / 7 * 100%);
+            padding-top: calc(7 / 16 * 100%);
             content: '';
         }
 
@@ -5617,7 +5548,7 @@ article.indexText ul {
         }
         .sm480\:ar-16-7::before {
             float: left;
-            padding-top: calc(16 / 7 * 100%);
+            padding-top: calc(7 / 16 * 100%);
             content: '';
         }
 
@@ -5659,36 +5590,6 @@ article.indexText ul {
             clear: both;
         }
     }
-    .print\:sm480\:ar-auto {
-        aspect-ratio: auto;
-    }
-
-    @supports not (aspect-ratio: auto) {
-        .print\:sm480\:ar-auto::before {
-            float: none;
-            float: initial;
-            padding-top: 0;
-            content: '';
-        }
-
-        .print\:sm480\:ar-auto::after {
-            display: inline;
-            content: '';
-            clear: none;
-        }
-        .print\:sm480\:ar-auto::before {
-            float: none;
-            float: initial;
-            padding-top: 0;
-            content: '';
-        }
-
-        .print\:sm480\:ar-auto::after {
-            display: inline;
-            content: '';
-            clear: none;
-        }
-    }
   }
 }
 @media (min-width: 640px) {
@@ -5974,7 +5875,7 @@ article.indexText ul {
     @supports not (aspect-ratio: 16 / 9) {
         .sm\:ar-16-9::before {
             float: left;
-            padding-top: 56.25%;
+            padding-top: calc(9 / 16 * 100%);
             content: '';
         }
 
@@ -5985,7 +5886,7 @@ article.indexText ul {
         }
         .sm\:ar-16-9::before {
             float: left;
-            padding-top: 56.25%;
+            padding-top: calc(9 / 16 * 100%);
             content: '';
         }
 
@@ -5995,36 +5896,6 @@ article.indexText ul {
             clear: both;
         }
     }
-    .sm\:ar-auto {
-        aspect-ratio: auto;
-    }
-
-    @supports not (aspect-ratio: auto) {
-        .sm\:ar-auto::before {
-            float: none;
-            float: initial;
-            padding-top: 0;
-            content: '';
-        }
-
-        .sm\:ar-auto::after {
-            display: inline;
-            content: '';
-            clear: none;
-        }
-        .sm\:ar-auto::before {
-            float: none;
-            float: initial;
-            padding-top: 0;
-            content: '';
-        }
-
-        .sm\:ar-auto::after {
-            display: inline;
-            content: '';
-            clear: none;
-        }
-    }
 
     .sm\:col-main {
         grid-column: main;
@@ -6551,7 +6422,7 @@ article.indexText ul {
     @supports not (aspect-ratio: 16 / 9) {
         .md\:ar-16-9::before {
             float: left;
-            padding-top: 56.25%;
+            padding-top: calc(9 / 16 * 100%);
             content: '';
         }
 
@@ -6562,7 +6433,7 @@ article.indexText ul {
         }
         .md\:ar-16-9::before {
             float: left;
-            padding-top: 56.25%;
+            padding-top: calc(9 / 16 * 100%);
             content: '';
         }
 
@@ -6608,7 +6479,7 @@ article.indexText ul {
     @supports not (aspect-ratio: 100 / 27.1) {
         .md\:ar-100-27::before {
             float: left;
-            padding-top: calc(100 / 27.1 * 100%);
+            padding-top: calc(27.1 / 100 * 100%);
             content: '';
         }
 
@@ -6619,7 +6490,7 @@ article.indexText ul {
         }
         .md\:ar-100-27::before {
             float: left;
-            padding-top: calc(100 / 27.1 * 100%);
+            padding-top: calc(27.1 / 100 * 100%);
             content: '';
         }
 
@@ -6701,36 +6572,6 @@ article.indexText ul {
             clear: both;
         }
     }
-    .print\:md\:ar-auto {
-        aspect-ratio: auto;
-    }
-
-    @supports not (aspect-ratio: auto) {
-        .print\:md\:ar-auto::before {
-            float: none;
-            float: initial;
-            padding-top: 0;
-            content: '';
-        }
-
-        .print\:md\:ar-auto::after {
-            display: inline;
-            content: '';
-            clear: none;
-        }
-        .print\:md\:ar-auto::before {
-            float: none;
-            float: initial;
-            padding-top: 0;
-            content: '';
-        }
-
-        .print\:md\:ar-auto::after {
-            display: inline;
-            content: '';
-            clear: none;
-        }
-    }
   }
 }
 @media (min-width: 1024px) {
@@ -7205,7 +7046,7 @@ article.indexText ul {
     @supports not (aspect-ratio: 100 / 27.1) {
         .lg\:ar-100-27::before {
             float: left;
-            padding-top: calc(100 / 27.1 * 100%);
+            padding-top: calc(27.1 / 100 * 100%);
             content: '';
         }
 
@@ -7216,7 +7057,7 @@ article.indexText ul {
         }
         .lg\:ar-100-27::before {
             float: left;
-            padding-top: calc(100 / 27.1 * 100%);
+            padding-top: calc(27.1 / 100 * 100%);
             content: '';
         }
 
@@ -7321,36 +7162,6 @@ article.indexText ul {
             clear: both;
         }
     }
-    .print\:lg\:ar-auto {
-        aspect-ratio: auto;
-    }
-
-    @supports not (aspect-ratio: auto) {
-        .print\:lg\:ar-auto::before {
-            float: none;
-            float: initial;
-            padding-top: 0;
-            content: '';
-        }
-
-        .print\:lg\:ar-auto::after {
-            display: inline;
-            content: '';
-            clear: none;
-        }
-        .print\:lg\:ar-auto::before {
-            float: none;
-            float: initial;
-            padding-top: 0;
-            content: '';
-        }
-
-        .print\:lg\:ar-auto::after {
-            display: inline;
-            content: '';
-            clear: none;
-        }
-    }
   }
 }
 @media (min-width: 768px) and (max-width: 1023px) {

package/dist/views/components/page/index/page_offline.hbs

@@ -0,0 +1,58 @@
+<!DOCTYPE html>
+<html 
+    class="no-js no-js-burgerMenu preload noMicroInteraction"
+    data-theme="hessenschau" 
+    lang="de"
+>
+    <head>
+
+        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
+        <meta http-equiv="X-UA-Compatible" content="IE=Edge"/>
+        <title>hessenschau.de | Nachrichten aus Hessen</title>
+        <meta name="application-name" content="hessenschau.de" />
+        <meta name="copyright" content="Hessischer Rundfunk, Frankfurt, Germany" />
+        <meta name="author" content="hessenschau.de, Frankfurt, Germany" />
+        <meta name="publisher" content="hessenschau.de" />
+        <meta name="language" content="Deutsch" />
+
+    </head>
+
+    <body itemscope itemtype="http://schema.org/WebPage">
+        <div class="js-pageSwap">
+                      
+            {{> components/site_header/offline_header }}          
+            
+            <main 
+                onclick="void(0)" 
+                role="main" 
+                id="content"
+                class="flex items-center justify-center"
+            >
+                <div class="grid grid-page flex items-center flex-wrap justify-center">
+                    <div class="{{> components/grid/grid_group_wrapper_classes }}">
+                        <section class="grid items-center justify-center grid-cols-12 col-span-12 bg-white gap-x-6 gap-y-6">
+                            <div class="items-start relative col-span-12 flex gap-y-3 gap-x-4 flex-col">
+                                <div>
+                                    <div class="flex justify-center flex-wrap text-center">
+                                        {{> components/base/image/icon _icon="hilfe" _addClass="size-full h-52" _iconmap="404"~}}
+                                        </div>
+                                        <h3 class="text-lg sm480:text-2xl font-headingSerif dark:text-text-dark flex justify-center flex-wrap text-center mt-9">
+                                             {{loca "offline_page_info_text"}}
+                                        </h3>
+                                        <div class="flex justify-center flex-wrap text-center mt-9" >
+                                        {{#> components/button/button _size="lg" _title="Weitere Episoden laden" _type="button" _css="js-load-remaining-items-button" }}
+                                        {{> components/button/components/button_label _label="Erneut versuchen"}}
+                                        {{#*inline "htmlProperties"}}
+                                            onClick="window.location.reload();"
+                                        {{/inline}} 
+                                        {{/components/button/button}}
+                                    </div>
+                                </div>
+                            </div>
+                        </section>
+                    </div>
+                </div>
+            </main>
+        </div>
+    </body>
+</html>

package/dist/views/components/site_header/offline_header.hbs

@@ -0,0 +1,33 @@
+<div class="sb-main-navigation" x-data="mainNavigationHandler()" x-init="{{#if _useSticky}}start(){{/if}}">
+    <header class="print:hidden relative z-110 {{#if _useSticky}}{{#if this.hasOpenSubNavigation}}lg:h-header-lg-big {{else}}lg:h-header-lg-small {{/if}}{{else}}lg:h-auto {{/if}}md:h-header-md h-header-sm">   
+        <div x-data 
+            id="headerWrapper"
+            @resize.window="resetNav()" 
+            :class="shouldBrandNavBeHidden() ? '-mt-[33px] md:-mt-[33px]' : ''  "
+            class="{{#if _useSticky }}fixed top-0 left-0{{/if}} flex flex-wrap max-w-full transition-all duration-500 transform font-copy lg:justify-center lg:w-full ">
+
+            <div id="serviceNavWrapper" 
+                :class="shouldServiceNavBeHidden() ? '-mt-40' : ''"
+                
+                class="relative flex justify-center order-2 w-full transition-[margin-top] duration-250 ease-in-out border-b border-servicenavigation-border-color bg-navigation-bg z-120">   
+                <div id="serviceNavMainContainer" 
+                    class="flex w-full h-10 lg:container md:h-12 lg:px-10 lg:h-16 z-110">
+
+                    <span id="serviceNavHeadline" class="hidden print:hidden">Service Navigation</span>
+
+                    <div id="serviceLogoWrapper"  
+                        class="flex items-center order-1 w-full pl-4 pr-2 tablet:pl-5 bg-navigation-bg md:px-0 md:h-12 lg:h-16 md:w-1/2 md:max-w-1/2 lg:w-1/4 lg:max-w-1/4">
+                        {{> components/site_header/service_logo _useSticky=_useSticky}}
+                    </div>
+                    
+                </div>
+            </div>            
+        </div> 
+    </header>
+    <div class="justify-center hidden w-full scale-50 brand-logo_print print:flex">
+        <img loading="lazy" 
+            alt="{{loca "header_homepage_link_title"}}" 
+            src="{{resourceUrl "assets/base/icons/rsslogo/brandlogo--rss.jpg" _brand=(if this.brand this.brand)}}" 
+            />
+    </div>
+</div>

package/dist/views_static/components/page/index/page_offline.hbs

@@ -0,0 +1,58 @@
+<!DOCTYPE html>
+<html 
+    class="no-js no-js-burgerMenu preload noMicroInteraction"
+    data-theme="hessenschau" 
+    lang="de"
+>
+    <head>
+
+        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
+        <meta http-equiv="X-UA-Compatible" content="IE=Edge"/>
+        <title>hessenschau.de | Nachrichten aus Hessen</title>
+        <meta name="application-name" content="hessenschau.de" />
+        <meta name="copyright" content="Hessischer Rundfunk, Frankfurt, Germany" />
+        <meta name="author" content="hessenschau.de, Frankfurt, Germany" />
+        <meta name="publisher" content="hessenschau.de" />
+        <meta name="language" content="Deutsch" />
+
+    </head>
+
+    <body itemscope itemtype="http://schema.org/WebPage">
+        <div class="js-pageSwap">
+                      
+            {{> components/site_header/offline_header }}          
+            
+            <main 
+                onclick="void(0)" 
+                role="main" 
+                id="content"
+                class="flex items-center justify-center"
+            >
+                <div class="grid grid-page flex items-center flex-wrap justify-center">
+                    <div class="{{> components/grid/grid_group_wrapper_classes }}">
+                        <section class="grid items-center justify-center grid-cols-12 col-span-12 bg-white gap-x-6 gap-y-6">
+                            <div class="items-start relative col-span-12 flex gap-y-3 gap-x-4 flex-col">
+                                <div>
+                                    <div class="flex justify-center flex-wrap text-center">
+                                        {{> components/base/image/icon _icon="hilfe" _addClass="size-full h-52" _iconmap="404"~}}
+                                        </div>
+                                        <h3 class="text-lg sm480:text-2xl font-headingSerif dark:text-text-dark flex justify-center flex-wrap text-center mt-9">
+                                             {{loca "offline_page_info_text"}}
+                                        </h3>
+                                        <div class="flex justify-center flex-wrap text-center mt-9" >
+                                        {{#> components/button/button _size="lg" _title="Weitere Episoden laden" _type="button" _css="js-load-remaining-items-button" }}
+                                        {{> components/button/components/button_label _label="Erneut versuchen"}}
+                                        {{#*inline "htmlProperties"}}
+                                            onClick="window.location.reload();"
+                                        {{/inline}} 
+                                        {{/components/button/button}}
+                                    </div>
+                                </div>
+                            </div>
+                        </section>
+                    </div>
+                </div>
+            </main>
+        </div>
+    </body>
+</html>

package/dist/views_static/components/site_header/offline_header.hbs

@@ -0,0 +1,33 @@
+<div class="sb-main-navigation" x-data="mainNavigationHandler()" x-init="{{#if _useSticky}}start(){{/if}}">
+    <header class="print:hidden relative z-110 {{#if _useSticky}}{{#if this.hasOpenSubNavigation}}lg:h-header-lg-big {{else}}lg:h-header-lg-small {{/if}}{{else}}lg:h-auto {{/if}}md:h-header-md h-header-sm">   
+        <div x-data 
+            id="headerWrapper"
+            @resize.window="resetNav()" 
+            :class="shouldBrandNavBeHidden() ? '-mt-[33px] md:-mt-[33px]' : ''  "
+            class="{{#if _useSticky }}fixed top-0 left-0{{/if}} flex flex-wrap max-w-full transition-all duration-500 transform font-copy lg:justify-center lg:w-full ">
+
+            <div id="serviceNavWrapper" 
+                :class="shouldServiceNavBeHidden() ? '-mt-40' : ''"
+                
+                class="relative flex justify-center order-2 w-full transition-[margin-top] duration-250 ease-in-out border-b border-servicenavigation-border-color bg-navigation-bg z-120">   
+                <div id="serviceNavMainContainer" 
+                    class="flex w-full h-10 lg:container md:h-12 lg:px-10 lg:h-16 z-110">
+
+                    <span id="serviceNavHeadline" class="hidden print:hidden">Service Navigation</span>
+
+                    <div id="serviceLogoWrapper"  
+                        class="flex items-center order-1 w-full pl-4 pr-2 tablet:pl-5 bg-navigation-bg md:px-0 md:h-12 lg:h-16 md:w-1/2 md:max-w-1/2 lg:w-1/4 lg:max-w-1/4">
+                        {{> components/site_header/service_logo _useSticky=_useSticky}}
+                    </div>
+                    
+                </div>
+            </div>            
+        </div> 
+    </header>
+    <div class="justify-center hidden w-full scale-50 brand-logo_print print:flex">
+        <img loading="lazy" 
+            alt="{{loca "header_homepage_link_title"}}" 
+            src="{{resourceUrl "assets/base/icons/rsslogo/brandlogo--rss.jpg" _brand=(if this.brand this.brand)}}" 
+            />
+    </div>
+</div>

package/package.json

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

package/src/assets/brand/_default/conf/locatags.json

@@ -45,6 +45,7 @@
     "group_tabbed_more": "weitere Meldungen aus {0}",
     "homepage_metatitle": "Nachrichten aus Hessen",
     "javascript_disabled": "Keine Videowiedergabe möglich. Bitte aktivieren Sie Javascript oder deaktivieren Sie Tools, die die Scriptausführung im Browser unterbinden.",
+    "offline_page_info_text": "Keine Verbindung zum Server möglich. Bitte versuchen Sie es zu einem späteren Zeitpunkt erneut.",
     "label_analysis": "Analyse",
     "label_audio": "Audio",
     "label_audio_event_livestream": "Livestream",

package/src/assets/brand/hessenschau/conf/locatags.merged.json

@@ -45,6 +45,7 @@
 	"group_tabbed_more": "weitere Meldungen aus {0}",
 	"homepage_metatitle": "Nachrichten aus Hessen",
 	"javascript_disabled": "Keine Videowiedergabe möglich. Bitte aktivieren Sie Javascript oder deaktivieren Sie Tools, die die Scriptausführung im Browser unterbinden.",
+	"offline_page_info_text": "Keine Verbindung zum Server möglich. Bitte versuchen Sie es zu einem späteren Zeitpunkt erneut.",
 	"label_analysis": "Analyse",
 	"label_audio": "Audio",
 	"label_audio_event_livestream": "Livestream",

package/src/assets/brand/hr/conf/locatags.merged.json

@@ -45,6 +45,7 @@
 	"group_tabbed_more": "weitere Meldungen aus {0}",
 	"homepage_metatitle": "Nachrichten aus Hessen",
 	"javascript_disabled": "Keine Videowiedergabe möglich. Bitte aktivieren Sie Javascript oder deaktivieren Sie Tools, die die Scriptausführung im Browser unterbinden.",
+	"offline_page_info_text": "Keine Verbindung zum Server möglich. Bitte versuchen Sie es zu einem späteren Zeitpunkt erneut.",
 	"label_analysis": "Analyse",
 	"label_audio": "Audio",
 	"label_audio_event_livestream": "Livestream",

package/src/assets/brand/hr-bigband/conf/locatags.merged.json

@@ -45,6 +45,7 @@
 	"group_tabbed_more": "weitere Meldungen aus {0}",
 	"homepage_metatitle": "Nachrichten aus Hessen",
 	"javascript_disabled": "Keine Videowiedergabe möglich. Bitte aktivieren Sie Javascript oder deaktivieren Sie Tools, die die Scriptausführung im Browser unterbinden.",
+	"offline_page_info_text": "Keine Verbindung zum Server möglich. Bitte versuchen Sie es zu einem späteren Zeitpunkt erneut.",
 	"label_analysis": "Analyse",
 	"label_audio": "Audio",
 	"label_audio_event_livestream": "Livestream",

package/src/assets/brand/hr-fernsehen/conf/locatags.merged.json

@@ -45,6 +45,7 @@
 	"group_tabbed_more": "weitere Meldungen aus {0}",
 	"homepage_metatitle": "Nachrichten aus Hessen",
 	"javascript_disabled": "Keine Videowiedergabe möglich. Bitte aktivieren Sie Javascript oder deaktivieren Sie Tools, die die Scriptausführung im Browser unterbinden.",
+	"offline_page_info_text": "Keine Verbindung zum Server möglich. Bitte versuchen Sie es zu einem späteren Zeitpunkt erneut.",
 	"label_analysis": "Analyse",
 	"label_audio": "Audio",
 	"label_audio_event_livestream": "Livestream",

package/src/assets/brand/hr-inforadio/conf/locatags.merged.json

@@ -45,6 +45,7 @@
 	"group_tabbed_more": "weitere Meldungen aus {0}",
 	"homepage_metatitle": "Nachrichten aus Hessen",
 	"javascript_disabled": "Keine Videowiedergabe möglich. Bitte aktivieren Sie Javascript oder deaktivieren Sie Tools, die die Scriptausführung im Browser unterbinden.",
+	"offline_page_info_text": "Keine Verbindung zum Server möglich. Bitte versuchen Sie es zu einem späteren Zeitpunkt erneut.",
 	"label_analysis": "Analyse",
 	"label_audio": "Audio",
 	"label_audio_event_livestream": "Livestream",

package/src/assets/brand/hr-rundfunkrat/conf/locatags.merged.json

@@ -45,6 +45,7 @@
 	"group_tabbed_more": "weitere Meldungen aus {0}",
 	"homepage_metatitle": "Nachrichten aus Hessen",
 	"javascript_disabled": "Keine Videowiedergabe möglich. Bitte aktivieren Sie Javascript oder deaktivieren Sie Tools, die die Scriptausführung im Browser unterbinden.",
+	"offline_page_info_text": "Keine Verbindung zum Server möglich. Bitte versuchen Sie es zu einem späteren Zeitpunkt erneut.",
 	"label_analysis": "Analyse",
 	"label_audio": "Audio",
 	"label_audio_event_livestream": "Livestream",

package/src/assets/brand/hr-sinfonieorchester/conf/locatags.merged.json

@@ -45,6 +45,7 @@
 	"group_tabbed_more": "weitere Meldungen aus {0}",
 	"homepage_metatitle": "Nachrichten aus Hessen",
 	"javascript_disabled": "Keine Videowiedergabe möglich. Bitte aktivieren Sie Javascript oder deaktivieren Sie Tools, die die Scriptausführung im Browser unterbinden.",
+	"offline_page_info_text": "Keine Verbindung zum Server möglich. Bitte versuchen Sie es zu einem späteren Zeitpunkt erneut.",
 	"label_analysis": "Analyse",
 	"label_audio": "Audio",
 	"label_audio_event_livestream": "Livestream",

package/src/assets/brand/hr-werbung/conf/locatags.merged.json

@@ -45,6 +45,7 @@
 	"group_tabbed_more": "weitere Meldungen aus {0}",
 	"homepage_metatitle": "Nachrichten aus Hessen",
 	"javascript_disabled": "Keine Videowiedergabe möglich. Bitte aktivieren Sie Javascript oder deaktivieren Sie Tools, die die Scriptausführung im Browser unterbinden.",
+	"offline_page_info_text": "Keine Verbindung zum Server möglich. Bitte versuchen Sie es zu einem späteren Zeitpunkt erneut.",
 	"label_analysis": "Analyse",
 	"label_audio": "Audio",
 	"label_audio_event_livestream": "Livestream",

package/src/assets/brand/hr1/conf/locatags.merged.json

@@ -45,6 +45,7 @@
 	"group_tabbed_more": "weitere Meldungen aus {0}",
 	"homepage_metatitle": "Nachrichten aus Hessen",
 	"javascript_disabled": "Keine Videowiedergabe möglich. Bitte aktivieren Sie Javascript oder deaktivieren Sie Tools, die die Scriptausführung im Browser unterbinden.",
+	"offline_page_info_text": "Keine Verbindung zum Server möglich. Bitte versuchen Sie es zu einem späteren Zeitpunkt erneut.",
 	"label_analysis": "Analyse",
 	"label_audio": "Audio",
 	"label_audio_event_livestream": "Livestream",

package/src/assets/brand/hr2/conf/locatags.merged.json

@@ -45,6 +45,7 @@
 	"group_tabbed_more": "weitere Meldungen aus {0}",
 	"homepage_metatitle": "Nachrichten aus Hessen",
 	"javascript_disabled": "Keine Videowiedergabe möglich. Bitte aktivieren Sie Javascript oder deaktivieren Sie Tools, die die Scriptausführung im Browser unterbinden.",
+	"offline_page_info_text": "Keine Verbindung zum Server möglich. Bitte versuchen Sie es zu einem späteren Zeitpunkt erneut.",
 	"label_analysis": "Analyse",
 	"label_audio": "Audio",
 	"label_audio_event_livestream": "Livestream",

package/src/assets/brand/hr3/conf/locatags.merged.json

@@ -45,6 +45,7 @@
 	"group_tabbed_more": "weitere Meldungen aus {0}",
 	"homepage_metatitle": "Nachrichten aus Hessen",
 	"javascript_disabled": "Keine Videowiedergabe möglich. Bitte aktivieren Sie Javascript oder deaktivieren Sie Tools, die die Scriptausführung im Browser unterbinden.",
+	"offline_page_info_text": "Keine Verbindung zum Server möglich. Bitte versuchen Sie es zu einem späteren Zeitpunkt erneut.",
 	"label_analysis": "Analyse",
 	"label_audio": "Audio",
 	"label_audio_event_livestream": "Livestream",

package/src/assets/brand/hr4/conf/locatags.merged.json

@@ -45,6 +45,7 @@
 	"group_tabbed_more": "weitere Meldungen aus {0}",
 	"homepage_metatitle": "Nachrichten aus Hessen",
 	"javascript_disabled": "Keine Videowiedergabe möglich. Bitte aktivieren Sie Javascript oder deaktivieren Sie Tools, die die Scriptausführung im Browser unterbinden.",
+	"offline_page_info_text": "Keine Verbindung zum Server möglich. Bitte versuchen Sie es zu einem späteren Zeitpunkt erneut.",
 	"label_analysis": "Analyse",
 	"label_audio": "Audio",
 	"label_audio_event_livestream": "Livestream",

package/src/assets/brand/you-fm/conf/locatags.merged.json

@@ -45,6 +45,7 @@
 	"group_tabbed_more": "weitere Meldungen aus {0}",
 	"homepage_metatitle": "Nachrichten aus Hessen",
 	"javascript_disabled": "Keine Videowiedergabe möglich. Bitte aktivieren Sie Javascript oder deaktivieren Sie Tools, die die Scriptausführung im Browser unterbinden.",
+	"offline_page_info_text": "Keine Verbindung zum Server möglich. Bitte versuchen Sie es zu einem späteren Zeitpunkt erneut.",
 	"label_analysis": "Analyse",
 	"label_audio": "Audio",
 	"label_audio_event_livestream": "Livestream",

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

@@ -32,7 +32,7 @@
     @supports not (aspect-ratio: 16 / 9) {
         .ar-16-9::before {
             float: left;
-            padding-top: 56.25%;
+            padding-top: calc(9 / 16 * 100%);
             content: '';
         }
 
@@ -50,7 +50,7 @@
     @supports not (aspect-ratio: 16 / 7) {
         .ar-16-7::before {
             float: left;
-            padding-top: 43.75%;
+            padding-top: calc(7 / 16 * 100%);
             content: '';
         }
 
@@ -68,7 +68,7 @@
     @supports not (aspect-ratio: 4 / 3) {
         .ar-4-3::before {
             float: left;
-            padding-top: calc(4 / 3 * 100%);
+            padding-top: calc(3 / 4 * 100%);
             content: '';
         }
 
@@ -96,23 +96,6 @@
             clear: both;
         }
     }
-    .ar-16-7 {
-        aspect-ratio: 16 / 7;
-    }
-
-    @supports not (aspect-ratio: 16 / 7) {
-        .ar-16-7::before {
-            float: left;
-            padding-top: calc(16 / 7 * 100%);
-            content: '';
-        }
-
-        .ar-16-7::after {
-            display: block;
-            content: '';
-            clear: both;
-        }
-    }
     .ar-100-27 {
         aspect-ratio: 100 / 27.1;
     }
@@ -120,7 +103,7 @@
     @supports not (aspect-ratio: 100 / 27.1) {
         .ar-100-27::before {
             float: left;
-            padding-top: calc(100 / 27.1 * 100%);
+            padding-top: calc(27.1 / 100 * 100%);
             content: '';
         }
 
@@ -130,23 +113,6 @@
             clear: both;
         }
     }
-    .ar-auto {
-        aspect-ratio: auto;
-    }
-
-    @supports not (aspect-ratio: auto) {
-        .ar-auto::before {
-            float: initial;
-            padding-top: 0;
-            content: '';
-        }
-
-        .ar-auto::after {
-            display: inline;
-            content: '';
-            clear: none;
-        }
-    }
 
     /*! ********************************/
     /*! Aspect Ratio with fallback end */

package/src/stories/views/components/page/index/page_offline.hbs

@@ -0,0 +1,58 @@
+<!DOCTYPE html>
+<html 
+    class="no-js no-js-burgerMenu preload noMicroInteraction"
+    data-theme="hessenschau" 
+    lang="de"
+>
+    <head>
+
+        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
+        <meta http-equiv="X-UA-Compatible" content="IE=Edge"/>
+        <title>hessenschau.de | Nachrichten aus Hessen</title>
+        <meta name="application-name" content="hessenschau.de" />
+        <meta name="copyright" content="Hessischer Rundfunk, Frankfurt, Germany" />
+        <meta name="author" content="hessenschau.de, Frankfurt, Germany" />
+        <meta name="publisher" content="hessenschau.de" />
+        <meta name="language" content="Deutsch" />
+
+    </head>
+
+    <body itemscope itemtype="http://schema.org/WebPage">
+        <div class="js-pageSwap">
+                      
+            {{> components/site_header/offline_header }}          
+            
+            <main 
+                onclick="void(0)" 
+                role="main" 
+                id="content"
+                class="flex items-center justify-center"
+            >
+                <div class="grid grid-page flex items-center flex-wrap justify-center">
+                    <div class="{{> components/grid/grid_group_wrapper_classes }}">
+                        <section class="grid items-center justify-center grid-cols-12 col-span-12 bg-white gap-x-6 gap-y-6">
+                            <div class="items-start relative col-span-12 flex gap-y-3 gap-x-4 flex-col">
+                                <div>
+                                    <div class="flex justify-center flex-wrap text-center">
+                                        {{> components/base/image/icon _icon="hilfe" _addClass="size-full h-52" _iconmap="404"~}}
+                                        </div>
+                                        <h3 class="text-lg sm480:text-2xl font-headingSerif dark:text-text-dark flex justify-center flex-wrap text-center mt-9">
+                                             {{loca "offline_page_info_text"}}
+                                        </h3>
+                                        <div class="flex justify-center flex-wrap text-center mt-9" >
+                                        {{#> components/button/button _size="lg" _title="Weitere Episoden laden" _type="button" _css="js-load-remaining-items-button" }}
+                                        {{> components/button/components/button_label _label="Erneut versuchen"}}
+                                        {{#*inline "htmlProperties"}}
+                                            onClick="window.location.reload();"
+                                        {{/inline}} 
+                                        {{/components/button/button}}
+                                    </div>
+                                </div>
+                            </div>
+                        </section>
+                    </div>
+                </div>
+            </main>
+        </div>
+    </body>
+</html>

package/src/stories/views/components/page/index/page_offline.stories.js

@@ -0,0 +1,32 @@
+import page from './page_offline.hbs'
+
+const Template = (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 page({ brand, ...args })
+}
+
+export default {
+    title: 'Seiten/Offline',
+    argTypes: {},
+
+    parameters: {
+        chromatic: {
+            viewports: [360, 768, 1024],
+        },
+
+        layout: 'fullscreen',
+
+        docs: {
+            inlineStories: false,
+            iframeHeight: 400,
+        },
+    },
+}
+
+export const Default = {
+    render: Template.bind({}),
+    name: 'Offline Page',
+    args: {},
+}

package/src/stories/views/components/site_header/offline_header.hbs

@@ -0,0 +1,33 @@
+<div class="sb-main-navigation" x-data="mainNavigationHandler()" x-init="{{#if _useSticky}}start(){{/if}}">
+    <header class="print:hidden relative z-110 {{#if _useSticky}}{{#if this.hasOpenSubNavigation}}lg:h-header-lg-big {{else}}lg:h-header-lg-small {{/if}}{{else}}lg:h-auto {{/if}}md:h-header-md h-header-sm">   
+        <div x-data 
+            id="headerWrapper"
+            @resize.window="resetNav()" 
+            :class="shouldBrandNavBeHidden() ? '-mt-[33px] md:-mt-[33px]' : ''  "
+            class="{{#if _useSticky }}fixed top-0 left-0{{/if}} flex flex-wrap max-w-full transition-all duration-500 transform font-copy lg:justify-center lg:w-full ">
+
+            <div id="serviceNavWrapper" 
+                :class="shouldServiceNavBeHidden() ? '-mt-40' : ''"
+                
+                class="relative flex justify-center order-2 w-full transition-[margin-top] duration-250 ease-in-out border-b border-servicenavigation-border-color bg-navigation-bg z-120">   
+                <div id="serviceNavMainContainer" 
+                    class="flex w-full h-10 lg:container md:h-12 lg:px-10 lg:h-16 z-110">
+
+                    <span id="serviceNavHeadline" class="hidden print:hidden">Service Navigation</span>
+
+                    <div id="serviceLogoWrapper"  
+                        class="flex items-center order-1 w-full pl-4 pr-2 tablet:pl-5 bg-navigation-bg md:px-0 md:h-12 lg:h-16 md:w-1/2 md:max-w-1/2 lg:w-1/4 lg:max-w-1/4">
+                        {{> components/site_header/service_logo _useSticky=_useSticky}}
+                    </div>
+                    
+                </div>
+            </div>            
+        </div> 
+    </header>
+    <div class="justify-center hidden w-full scale-50 brand-logo_print print:flex">
+        <img loading="lazy" 
+            alt="{{loca "header_homepage_link_title"}}" 
+            src="{{resourceUrl "assets/base/icons/rsslogo/brandlogo--rss.jpg" _brand=(if this.brand this.brand)}}" 
+            />
+    </div>
+</div>