hr-design-system-handlebars 0.66.0 → 0.67.0

package/.storybook/preview.js

@@ -163,7 +163,7 @@ export const parameters = {
                     { id: 'hr2', title: 'hr2.de' },
                     { id: 'hr3', title: 'hr3.de' },
                     { id: 'hr4', title: 'hr4.de' },
-                    { id: 'youfm', title: 'you-fm.de' },
+                    { id: 'you-fm', title: 'you-fm.de' },
                     { id: 'hr-inforadio', title: 'hr-info.de' },
                     { id: 'hr-fernsehen', title: 'hr-fernsehen.de' },
                     { id: 'hr-rundfunkrat', title: 'hr-rundfunkrat.de' },

package/CHANGELOG.md

@@ -1,3 +1,15 @@
+# v0.67.0 (Wed Oct 19 2022)
+
+#### 🚀 Enhancement
+
+- Bugfix/dpe 1567 [#342](https://github.com/mumprod/hr-design-system-handlebars/pull/342) ([@szuelch](https://github.com/szuelch))
+
+#### Authors: 1
+
+- [@szuelch](https://github.com/szuelch)
+
+---
+
 # v0.66.0 (Tue Oct 18 2022)
 
 #### 🚀 Enhancement

package/README.md

@@ -38,15 +38,72 @@ Mit dem Befehl
 npm run storybook
 ```
 
-kann das Designsystem lokal gestartet werden. Um immer mit den aktuellsten Assets zu arbeiten, sollte zudem
-noch in einem anderen Terminal Fenster der Befehl
+kann das Designsystem lokal gestartet werden. Damit dieses immer mit den aktuellsten Daten arbeitet, muss in einem weiteren Terminalfenster zudem das Skript `optimize-assets` mit dem Befehl
 
 ```
 npm run optimize-assets
 ```
 
-aufgerufen werden. Dieser sorgt dafür, dass den Stories immer die derzeit aktuellsten statischen Daten (Fixtures)
-bereitgestellt werden und erzeugt zudem immer optimierte Versionen unserer Icons. Das Skript läuft im Watch-Modus
-sodass änderungen an Dateien automatisch erkannt und die entsprechenden Optimierungs-Operationen neu ausgeführt werden.
+gestartet werden. Dieses Skript erzeugt für die einzelnen Features JSON-Testdaten, optimiert im SVG-Format vorliegende Icons, erzeugt eine angepasste Version von Modernizr.js und stellt alle Handelbars-Templates als JS-Exporte zur Verfügung. Es läuft im Watch-Modus,
+sodass Dateiänderungen automatisch erkannt und die entsprechenden Optimierungs-Operationen neu ausgeführt werden.
+Beim ersten Aufruf des Skripts cached es die Rohdaten der jeweiligen Assets im Verzeichnis `build/gulp/cache`. Bei allen zukünftigen Aufrufen vergleicht es die Rohdaten mit den Daten im Cache und führt die Optimierungen lediglich noch für geänderte Dateien aus. Dies verkürzt zukünftige Builds erheblich.
+
+## Einrichten eines VS-Code Makros zur komfortableren Ausführung der Skripte
+
+Die NPM-Skripte `storybook` und `optimize-assets` müssen für die korrekte Funktionsweise von Storybook immer zusammen ausgeführt werden. Zur Zeitersparnis und
+weil insbesondere der Aufruf des Skripts `optimize-assets` gerne mal vergessen wird, erlaubt es der Code Editor VS-Code zum gemeinsamen Starten der Skripte
+ein Makro zu erstellen. Damit VS-Code Makros ausführen kann, muss das Add-On [Macro-Commander](https://marketplace.visualstudio.com/items?itemName=jeff-hykin.macro-commander) installiert werden. Zur Einrichtung des eigentlichen Makros, müsssen an zwei Dateien Änderungen vorgenommen werden.
+Zunächst muss der Code des Makros in den benutzerspezifischen Einstellungen (`Strg + Shift + P` > "User Settings (JSON)") eingetragen werden.
+
+```json
+settings.json
+{
+    // Weitere benutzerspezifische Einstellungen
+    ...
+    "macros": {
+        "start_storybook_scripts": [
+            "workbench.action.terminal.killAll",
+            "workbench.action.terminal.new",
+            "workbench.action.terminal.split",
+            "workbench.action.terminal.focusPreviousPane",
+            {
+                "command": "workbench.action.terminal.sendSequence",
+                "args": { "text": "npm run storybook-only\r" }
+            },
+            "workbench.action.terminal.focusNextPane",
+            {
+                "command": "workbench.action.terminal.sendSequence",
+                "args": { "text": "npm run optimize-assets\r" }
+            }
+        ]
+    }
+}
+```
+
+Im Anschluss daran muss, um das Makro aufrufen zu können, eine Tastenkombination mit dem Makro verknüpft werden. Hierfür muss in der
+benutzerspezifischen Datei `keybindings.json` (`Strg + Shift + P` > Open Keyboard Shortcuts (JSON)) eine Tastenkombination zugeordet
+werden.
+
+```json
+[
+    {
+        "key": "ctrl+shift+9",
+        "command": "macros.start_storybook_scripts"
+    }
+]
+```
+
+Als `key` kann eine beliebige Tastenkombination festgelegt werden. Um einzusehen welche Tastenkombinationen gegegebenenfalls schon in
+Verwendung sind, empfiehlt es sich unter `Datei>Einstellungen>Tastenkombinationen` die derzeitigen Tastenzuordnungen in VS-Code einzusehen.
+Ist dem Makro eine Tastenkombination zugeordnet, kann es, wenn alles korrekt gemacht wurde, ausgeführt werden. Folgende `Kommandos` führt das
+Makro hintereinander aus:
+
+1. Beenden aller derzeit geöffneten Terminal Instanzen
+2. Öffnen eines neuen Terminal Fensters
+3. Teilen des Terminal Fensters
+4. Setze den Fokus auf das linke Terminal Fenster
+5. Setze den Befehl `npm run storybook` ab und führe ihn aus
+6. Setze den Fokus auf das rechte Terminal Fenster
+7. Setze den Befehl `npm run optimize-assets` ab und führe ihn aus
 
 Weitere Details und Grundlagen zum Gebrauch des Designsystems können direkt in dessen Dokumentation eingesehen werden.

package/build/handlebars/handlebars.js

@@ -2,6 +2,19 @@
 const handlebars = require('handlebars'),
     partials = require('./partials/handlebar-partials'),
     runtime = require('handlebars/runtime'),
+    locatagsHessenschau = require('../../src/assets/brand/hessenschau/conf/locatags.merged.json'),
+    locatagsHr = require('../../src/assets/brand/hr/conf/locatags.merged.json'),
+    locatagsHrBigband = require('../../src/assets/brand/hr-bigband/conf/locatags.merged.json'),
+    locatagsHrFernsehen = require('../../src/assets/brand/hr-fernsehen/conf/locatags.merged.json'),
+    locatagsHrInforadio = require('../../src/assets/brand/hr-inforadio/conf/locatags.merged.json'),
+    locatagsHrRundfunkrat = require('../../src/assets/brand/hr-rundfunkrat/conf/locatags.merged.json'),
+    locatagsHrSinfonieorchester = require('../../src/assets/brand/hr-sinfonieorchester/conf/locatags.merged.json'),
+    locatagsHrWerbung = require('../../src/assets/brand/hr-werbung/conf/locatags.merged.json'),
+    locatagsHr1 = require('../../src/assets/brand/hr1/conf/locatags.merged.json'),
+    locatagsHr2 = require('../../src/assets/brand/hr2/conf/locatags.merged.json'),
+    locatagsHr3 = require('../../src/assets/brand/hr3/conf/locatags.merged.json'),
+    locatagsHr4 = require('../../src/assets/brand/hr4/conf/locatags.merged.json'),
+    locatagsYouFm = require('../../src/assets/brand/you-fm/conf/locatags.merged.json'),
     fs = require('fs'),
     path = require('path'),
     options = {
@@ -10,6 +23,21 @@ const handlebars = require('handlebars'),
         partialsBaseDir: './src/stories/views',
         precompile: false,
         writeJson: true,
+        locaTags: {
+            'hessenschau': locatagsHessenschau,
+            'hr': locatagsHr,
+            'hr-bigband': locatagsHrBigband,
+            'hr-fernsehen': locatagsHrFernsehen,
+            'hr-inforadio': locatagsHrInforadio,
+            'hr-rundfunkrat': locatagsHrRundfunkrat,
+            'hr-sinfonieorchester': locatagsHrSinfonieorchester,
+            'hr-werbung': locatagsHrWerbung,
+            'hr1': locatagsHr1,
+            'hr2': locatagsHr2,
+            'hr3': locatagsHr3,
+            'hr4': locatagsHr4,
+            'you-fm': locatagsYouFm,
+        },
     }
 
 /*
@@ -35,6 +63,7 @@ for (const [key, partial] of Object.entries(partials)) {
 const register = require('./helpers/handlebar-helpers').register
 register(handlebars, {
     partialsDir: options.partialsDir,
+    locaTags: options.locaTags,
 })
 
 /**

package/build/handlebars/helpers/handlebar-helpers.js

@@ -12,6 +12,14 @@ var generateRandom = function () {
     return Math.floor(Math.random() * (max - min + 1)) + min
 }
 
+const extractBrandFromUrl = function () {
+    let url = window.location.href
+    let extractBrandFromUrlRegex = /(?<=brands\:).*?(?=\&)/g
+    let brand = url.match(extractBrandFromUrlRegex)
+    brand = null != brand ? brand[0] : 'hessenschau'
+    return brand
+}
+
 var helpers = {
     'helperOptions': null,
 
@@ -359,7 +367,8 @@ var helpers = {
         return null
     },
 
-    /*loca: function () {
+    'loca': function () {
+        let brand = extractBrandFromUrl()
         var loca = ''
 
         if (arguments.length >= 1) {
@@ -367,8 +376,8 @@ var helpers = {
 
             if (typeof loca === 'string') {
                 // Check loca-tag
-                if (typeof helpers.helperOptions.locaTags[loca] === 'string') {
-                    loca = helpers.helperOptions.locaTags[loca]
+                if (typeof helpers.helperOptions.locaTags[brand][loca] === 'string') {
+                    loca = helpers.helperOptions.locaTags[brand][loca]
 
                     // Exchange variables in loca-text
                     // - the last argument is the "context" object which can be
@@ -388,7 +397,7 @@ var helpers = {
         }
 
         return new handlebars.SafeString(loca)
-    },*/
+    },
 
     'getRandom': function () {
         return randomNumber
@@ -426,7 +435,13 @@ var helpers = {
 
         return tokenStr
     },
-    'loca': function (text, options) {
+    /*'loca': function (text, options) {
+        let url = window.location.href
+        console.log(url)
+        const regex = /(?<=brands\:).*?(?=\&)/g
+        let brand = url.match(regex)
+        brand = null != brand ? brand[0] : 'hessenschau'
+        console.log(brand)
         var loca
         var locas = {
             anchor_brandNav: 'Übersicht der Marken des HR anspringen',
@@ -458,7 +473,7 @@ var helpers = {
                 return loca
             }
         }
-    },
+    },*/
 
     /*staticSSI: function (filepath) {
         var template = grunt.file.read(helpers.helperOptions.libraryDir + '/' + filepath, {

package/build/handlebars/partials/handlebar-partials.js

@@ -3,17 +3,16 @@ module.exports['components/Button.hbs'] = '<button\n    class=\'js-load btn\n
 module.exports['components/base/link.hbs'] = '{{#with this.link}}\n    <a {{#with this.webviewUrl}}data-webviewurl="{{this}}"{{/with}} href="{{this.url}}" {{#with this.webviewUrl}}{{/with}} \n        class="sb-link{{#if ../_css}} {{../_css}}{{/if}}{{#if ../_doTracking}} js-load{{else}}{{#if ../this.content.isFileDownload}} js-loadScript{{/if}}{{/if}}{{#if ../_isSelected}} {{defaultIfEmpty ../_selectedCssClass "-current"}}{{/if}}"\n        {{#if ../_doNavigationTracking}}\n        data-hr-click-tracking=\'{"settings": [{"type":"uxAction","secondLevelId": "1","clickLabel":"{{../_clickLabelType}}{{#if ../_clickLabelPrefix1}}::{{../_clickLabelPrefix1}}{{/if}}::{{../_clickLabelPrefix2}}-Link geklickt"}]}\'\n        {{/if}}\n        {{#if ../_doTracking}}\n            {{#with this.content.trackingData}}data-hr-click-tracking=\'{"settings": [{"type":"uxAction","secondLevelId": "{{this.secondLevelId}}","clickLabel": "{{#if ../this.content.isFileDownload}}{{this.pageName}}{{else}}mediabuttonclick::{{../../_clickLabelPrefix1}}::{{../../_clickLabelPrefix2}}{{/if}}"}]}\'{{/with}}\n        {{else}}\n            {{#if ../this.content.isFileDownload}}\n                {{#with this.content.trackingData}}data-hr-click-tracking=\'{"settings": [{"type":"download","secondLevelId": "{{this.secondLevelId}}","clickLabel": "{{this.pageName}}"}]}\'{{/with}}\n            {{/if}}\n        {{/if}}\n        {{#if this.isTargetBlank}} target="_blank"  rel="noopener{{#if this.hasNoReferrerFlag}} noreferrer{{/if}}"{{/if}}\n        {{#if ../_isAriaHidden}} aria-hidden="true" tabindex="-1"{{/if}}\n    >\n{{/with}}  \n        {{~ decorator_body ~}}   \n    </a>\n'
 module.exports['components/base/loadSSI.hbs'] = '{{#if (isStorybook)}}  \n    {{> components/base/load_dynamic _templatePath=_templatePath}} \n{{else}}\n    {{{this}}}\n{{/if}}        '
 module.exports['components/base/load_dynamic.hbs'] = '{{#switch _templatePath}}\n    {{#case "components/teaser/content_nav/teaser_content_nav"}}\n        {{> components/teaser/content_nav/teaser_content_nav}}\n    {{/case}}\n    {{#case "components/site_header/service_navigation/service_navigation_item"}}\n        {{> components/site_header/service_navigation/service_navigation_item}}\n    {{/case}}\n    {{#case "components/teaser/group_teaser/group_teaser"}}\n        {{> components/teaser/group_teaser/group_teaser}}\n    {{/case}}\n    {{#case "components/teaser/tabbox/group_tabbox"}}\n        {{> components/teaser/tabbox/group_tabbox}}\n    {{/case}}\n    {{#case "components/teaser/tabbox/teaser_tabbox"}}\n        {{> components/teaser/tabbox/teaser_tabbox}}\n    {{/case}}\n    {{#case "components/teaser/cluster/teaser_cluster"}}\n        {{> components/teaser/cluster/teaser_cluster}}\n    {{/case}}\n    {{#case "components/teaser/teaser_standard"}}\n        {{> components/teaser/teaser_standard}}\n    {{/case}}\n    {{#case "components/teaser/teaser_alternative"}}\n        {{> components/teaser/teaser_alternativ}}\n    {{/case}}\n    {{#case "components/teaser/components/teaser_comments"}}\n        {{> components/teaser/components/teaser_comments}}\n    {{/case}}\n{{/switch}}'
+module.exports['components/button/button.hbs'] = '<button \n    {{~#if _aria}} aria-label="{{_aria}}"{{/if}} \n    {{~#if _isButton}} type="button"{{else}} type="submit"{{/if~}} \n    {{~#if _name}} name="{{_name}}"{{/if}} \n    {{~#if _title}} title="{{_title}}"{{/if}} \n    class="{{_addClass}}{{#if _addClass2}} {{_addClass2}}{{/if}}{{#if _webview}} -webview{{/if}}" \n    {{~#if _value}} value="{{_value}}"{{/if}} \n    {{~#if _alpineClick}} @click="{{_alpineClick}}"{{/if}} \n    {{~#if _x-show}} x-show="{{_x-show}}"{{/if}} \n>\n    {{~#if _showIcon~}}\n        {{> components/base/image/icon _icon=_icon _iconmap=_iconmap _addClass=_addIconClass _webview=_webview}}\n    {{/if~}}\n    {{~#if _label~}}\n        <span {{#if _srOnly}}class="sr-only"{{/if}}>\n            {{~_label~}}\n        </span>\n    {{/if~}}\n</button>'
+module.exports['components/button/button_pseudo.hbs'] = '{{#decorator \'components/base/link\'}}\n    <span\n        class=\'px-4 py-2.5 border\n            {{inline-switch\n                _color\n                \'["white","grey","blue"]\'\n                \'["text-white border-white","text-grey-scorpion border-grey-scorpion","text-white bg-blue-congress","text-toplineColor border-toplineColor"]\'\n            }}\n            font-heading hover:bg-white hover:text-toplineColor hover:border-toplineColor\'\n    >\n        {{_linkTitle}}\n    </span>\n{{/decorator}}'
+module.exports['components/button/button_round.hbs'] = '{{> components/button/button \n    _aria=_aria\n    _isButton=_isButton\n    _title=_title\n    _name=_name\n    _label=_label\n    _value=_value\n    _showIcon="true"\n    _icon=_icon\n    _iconmap=_iconmap\n    _addIconClass="w-10 h-10 inline"\n    _addClass="fill-white hover:text-white"\n    _addClass2=_addClass\n    _webview=_webview\n    _x-show=_x-show\n    _alpineClick=_alpineClick\n    _srOnly=_srOnly\n}}'
+module.exports['components/button/button_transparent.hbs'] = '{{> components/button/button \n    _aria=_aria\n    _isButton=_isButton\n    _title=_title\n    _name=_name\n    _label=_label\n    _value=_value\n    _showIcon="true"\n    _icon=_icon\n    _iconmap=_iconmap\n    _addIconClass=_addIconClass\n    _addClass="bg-transparent hover:bg-slate-300 text-blue-700 font-semibold py-3.5 px-3.5 "\n    _addClass2=_addClass\n    _webview=_webview\n    _x-show=_x-show\n    _alpineClick=_alpineClick\n}}'
 module.exports['components/content_nav/content_nav.hbs'] = '{{#with this.contentNav}} \n    {{#if this.isListOrFlow}}\n        <nav class="w-full c-content-nav">\n            {{> components/content_nav/content_nav_container \n                _teasersize=../_teasersize \n                _maindivclass="flex flex-wrap mt-2 md:mt-0" \n                _inputcontainerclass="flex bg-grey-light w-full h-10 mx-2 md:mx-0 border-blue-congress align-center"\n            }}    \n        </nav>\n    {{else}}  \n        {{#decorator \'components/content_nav/content_nav_dropdown\'\n                     _componentClass="c-content-nav w-full"\n                     _teasersize=../_teasersize\n                     _iconOpen="arrow-down"\n                     _iconClose="arrow-up"\n                     _buttonText=(defaultIfEmpty this.selectedItem.title ../../title)\n                     _hiddenNavigationLabel="Unternavigation"\n        }} \n            {{> components/content_nav/content_nav_container \n                _teasersize=_teasersize \n                _maindivclass="flex flex-wrap mt-0" \n                _inputcontainerclass="flex bg-grey-light w-full h-10 mx-0 border-blue-congress align-center "\n            }}\n        {{/decorator}}\n    {{/if}}\n{{/with}} '
 module.exports['components/content_nav/content_nav_container.hbs'] = '<div class="{{_maindivclass}} {{#if this.isAutosuggest}} autoSuggest js-load{{/if}}"\n    @click.outside ="$store.contentNavDropdownIsOpen = false;"\n    {{#if this.isAutosuggest}}\n        data-hr-auto-suggest=\'{"filterGroupsSelector":".c-content-nav__group", "filterElementSelector":".c-content-nav__item", "filterTextSelector":".js-title", "inputElementSelector":".js-autosuggest-input", "matchedClass":"", "unmatchedClass":"hidden"}\'\n    {{/if}}\n>\n    {{#if this.isAutosuggest}}\n        <div class="{{_inputcontainerclass}} c-content-nav__autosuggest ">\n            <input x-ref="autosuggestInput" \n                class="w-full h-8 pl-2 bg-gray-200 text-grey-dark placeholder:text-grey-dark focus:outline-none js-autosuggest-input"\n                type="text"\n                placeholder="Eintrag filtern"/>\n        </div>\n    {{/if}}\n\n    {{> components/content_nav/content_nav_list _teasersize=_teasersize }}\n    \n</div>'
 module.exports['components/content_nav/content_nav_dropdown.hbs'] = '<nav  \n    class="w-full px-2 md:px-0 {{_componentClass}} " \n    id="dropdown--{{nextRandom}}"\n    tabindex="0"\n    role="navigation"\n    aria-labelledby="dropdown__label--{{getRandom}}">\n\n    <span id="dropdown__label--{{getRandom}}" class="hidden">{{defaultIfEmpty _hiddenNavigationLabel "Unternavigation"}}</span>\n\n    <div x-show="shouldDropdownBeShown({{_teasersize}},{{this.isDropdown}},{{this.isMixed}})" \n        :class="$store.contentNavDropdownIsOpen ? \'shadow-[1px_4px_5px_0px_rgba(50,50,93,0.10)]\' : \'\'"\n        class="relative flex w-full h-10 mb-2 overflow-hidden bg-white border z-10002 border-blue-congress whitespace-nowrap text-blue-congress fill-congress"\n    >\n        <span class="self-center w-full p-2 text-base">{{_buttonText}}</span>\n        <div class="flex self-center w-auto h-full px-3 py-1 border-l border-blue-congress">\n            <span @click="$store.contentNavDropdownIsOpen = !$store.contentNavDropdownIsOpen" \n                :class="$store.contentNavDropdownIsOpen ? \'hidden\' : \'\'"  \n                class="flex self-center"\n            >\n                {{~> components/base/image/icon _icon=(defaultIfEmpty _iconOpen "arrow-down") _addClass="h-4 w-4" _iconmap="icons"~}}    \n            </span>\n            <span @click="$store.contentNavDropdownIsOpen = !$store.contentNavDropdownIsOpen; $dispatch(\'resetinput\')" \n                :class="$store.contentNavDropdownIsOpen ? \'\' : \'hidden\'" \n                class="flex self-center"\n            >\n                {{~> components/base/image/icon _icon=(defaultIfEmpty _iconClose "arrow-up") _addClass="h-4 w-4" _iconmap="icons"~}}\n            </span>\n        </div>\n    </div>    \n    <div x-show="shouldContentBeShown({{_teasersize}},{{this.isDropdown}},{{this.isMixed}})" \n        aria-haspopup="true" \n        class="p-0 m-0 z-10000 md:relative md:left-0 md:h-auto md:overflow-visible">\n       {{~decorator_body~}}\n    </div>\n    \n</nav>'
 module.exports['components/content_nav/content_nav_item.hbs'] = '<li x-init="chooseListItemStyles({{_teasersize}},{{_islist}},{{_ismixed}},{{_isdropdown}},{{_isflow}})" \nclass="h-10 md:mx-0 overflow-hidden text-base font-copy list-none border-blue-congress fill-congress text-blue-congress bg-white hover:bg-blue-congress hover:fill-white hover:text-white hover:underline {{#if this.isSelected}} font-bold -current{{/if}} c-content-nav__item">\n     {{#decorator \'components/base/link\' \n        _doNavigationTracking="true" \n        _clickLabelType="Contentnavigation" \n        _clickLabelPrefix1=this.title \n        _css="flex items-center py-2 px-2 h-10 whitespace-nowrap overflow-hidden" \n        _isSelected=this.isSelected\n        _selectedCssClass="is-selected"\n    }}\n        \n        <span class="block text-base grow font-copy js-title truncate ... ">{{this.title}}</span>\n\n        {{#if this.link.hasIcon}}\n            {{> components/base/image/icon _icon=this.link.iconName _addClass="ml-2 h-4 w-4" _iconmap="icons"}}\n        {{/if}}\n\n        <span>\n            {{>components/base/image/icon _icon="arrow-right" _addClass="h-4 w-4 ml-2" }} \n        </span>\n\n    {{/decorator}} \n</li>\n\n\n'
 module.exports['components/content_nav/content_nav_list.hbs'] = '<ul :class="( ({{this.isMixed}} && {{_teasersize}} < 50 ) || ( {{this.isMixed}} && window.innerWidth < 768 ) || {{this.isDropdown}} ) && $store.contentNavDropdownIsOpen == true ? \'!shadow-[1px_8px_9px_0px_rgba(50,50,93,0.10)] !px-0 mt-0\' : \'\'"\n    class="flex flex-wrap w-full px-2 z-10000 md:!px-0 last:border-b-0"> \n    \n    {{~#each this.contentNavEntries~}}\n          \n        {{~#if this.isGroup~}}\n        \n            {{#if ../isDropdown}}               \n                <li class="w-full h-auto overflow-hidden text-base list-none border-b border-gray-400 bg-blue-accented text-blue-congress md:mx-0 font-copy fill-congress c-content-nav__group">\n                    <div class="flex items-center h-10 p-2 c-content-nav__group-title">{{this.title}}</div>\n                    <ul class="c-content-nav__group-list !px-0 mt-0">\n                        {{~#each this.navigationGroup~}}\n                            {{> components/content_nav/content_nav_item \n                                _teasersize=../../_teasersize \n                                _isdropdown=../../isDropdown \n                                _ismixed=../../isMixed \n                                _islist=../../isList \n                                _isflow=../../isFlow}}\n                        {{~/each~}}\n                    </ul>\n                </li> \n            {{/if}}\n        {{else}}           \n            {{> components/content_nav/content_nav_item  \n                _teasersize=../_teasersize \n                _isdropdown=../isDropdown \n                _ismixed=../isMixed \n                _islist=../isList \n                _isflow=../isFlow}}\n        {{~/if~}}\n    {{~/each~}}\n</ul>\n'
 module.exports['components/event/instant_dates.hbs'] = '{{#if this.moreThenOneEvent}}\n    {{#with this.firstInstant}}\n        <span class=\'text-2xl font-headingSerif font-bold\'>{{this.startDate.day}}</span>\n        <span class=\'text-sm font-headingSerif\'>{{this.startDate.monthNameShort}}</span>\n    {{/with}}\n    {{#if this.moreThenTwoEvents}}\n        <span class=\'text-sm font-headingSerif\'>|</span>\n    {{else}}\n        <span class=\'text-sm font-headingSerif\'>+</span>\n    {{/if}}\n    {{#with this.lastInstant}}\n        <span class=\'text-2xl font-headingSerif font-bold\'>{{this.startDate.day}}</span>\n        <span class=\'text-sm font-headingSerif\'>{{this.startDate.monthNameShort}}</span>\n    {{/with}}\n{{else}}\n    {{#with this.firstInstant}}\n        <span class=\'text-sm font-headingSerif\'>{{this.startDate.weekdayNameShort}}</span>\n        <span class=\'text-2xl font-headingSerif font-bold\'>{{this.startDate.day}}</span>\n        <span class=\'text-sm font-headingSerif\'>{{this.startDate.monthNameShort}}</span>\n    {{/with}}\n{{/if}}'
-module.exports['components/button/button.hbs'] = '<button \n    {{~#if _aria}} aria-label="{{_aria}}"{{/if}} \n    {{~#if _isButton}} type="button"{{else}} type="submit"{{/if~}} \n    {{~#if _name}} name="{{_name}}"{{/if}} \n    {{~#if _title}} title="{{_title}}"{{/if}} \n    class="{{_addClass}}{{#if _addClass2}} {{_addClass2}}{{/if}}{{#if _webview}} -webview{{/if}}" \n    {{~#if _value}} value="{{_value}}"{{/if}} \n    {{~#if _alpineClick}} @click="{{_alpineClick}}"{{/if}} \n    {{~#if _x-show}} x-show="{{_x-show}}"{{/if}} \n>\n    {{~#if _showIcon~}}\n        {{> components/base/image/icon _icon=_icon _iconmap=_iconmap _addClass=_addIconClass _webview=_webview}}\n    {{/if~}}\n    {{~#if _label~}}\n        <span {{#if _srOnly}}class="sr-only"{{/if}}>\n            {{~_label~}}\n        </span>\n    {{/if~}}\n</button>'
-module.exports['components/button/button_pseudo.hbs'] = '{{#decorator \'components/base/link\'}}\n    <span\n        class=\'px-4 py-2.5 border\n            {{inline-switch\n                _color\n                \'["white","grey","blue"]\'\n                \'["text-white border-white","text-grey-scorpion border-grey-scorpion","text-white bg-blue-congress","text-toplineColor border-toplineColor"]\'\n            }}\n            font-heading hover:bg-white hover:text-toplineColor hover:border-toplineColor\'\n    >\n        {{_linkTitle}}\n    </span>\n{{/decorator}}'
-module.exports['components/button/button_round.hbs'] = '{{> components/button/button \n    _aria=_aria\n    _isButton=_isButton\n    _title=_title\n    _name=_name\n    _label=_label\n    _value=_value\n    _showIcon="true"\n    _icon=_icon\n    _iconmap=_iconmap\n    _addIconClass="w-10 h-10 inline"\n    _addClass="fill-white hover:text-white"\n    _addClass2=_addClass\n    _webview=_webview\n    _x-show=_x-show\n    _alpineClick=_alpineClick\n    _srOnly=_srOnly\n}}'
-module.exports['components/button/button_transparent.hbs'] = '{{> components/button/button \n    _aria=_aria\n    _isButton=_isButton\n    _title=_title\n    _name=_name\n    _label=_label\n    _value=_value\n    _showIcon="true"\n    _icon=_icon\n    _iconmap=_iconmap\n    _addIconClass=_addIconClass\n    _addClass="bg-transparent hover:bg-slate-300 text-blue-700 font-semibold py-3.5 px-3.5 "\n    _addClass2=_addClass\n    _webview=_webview\n    _x-show=_x-show\n    _alpineClick=_alpineClick\n}}'
-module.exports['components/label/label.hbs'] = '<span\n    class=\'sb-label rounded px-1.5 pt-px inline-block tracking-wide text-white text-base leading-5.5 font-heading\n        {{inline-switch\n            _type\n            \'["media","event","breakingnews","comment","analysis","der-tag-in-hessen","glosse","fragen-und-antworten","infografik","interaktiv","program","download","pm","liveticker","ticker","livestream","live","livechat","buliticker","social-tv","blog","podcast"]\'\n            \'["bg-labelMedia","bg-labelEvent","bg-labelBreakingnews","bg-labelComment","bg-labelComment","bg-labelComment","bg-labelComment","bg-labelComment","bg-labelInfografik","bg-labelInfografik","bg-labelProgram","bg-labelDownload","bg-labelPm","bg-labelLive","bg-labelLive","bg-labelLive","bg-labelLive","bg-labelLive","bg-labelLive","bg-labelLive","bg-labelLive","bg-labelMedia"]\'\n        }}\'\n>\n    {{_text}}\n</span>\n{{~#with this.byline~}}\n    <span class=\'ml-2 text-xs text-grey-scorpion font-headingSerif\'>\n        {{~#if this.bylineSsi~}}\n            {{{this.bylineSsi}}}\n        {{~else~}}\n            {{this.bylineText}}\n        {{~/if~}}\n    </span>\n{{~/with~}}'
 module.exports['components/grid/grid.hbs'] = '\n<div class="grid grid-page">\n  <div class="grid grid-cols-12 py-6 bg-white sm:px-8 col-full sm:col-main gap-x-6 gap-y-6">\n    {{#>components/grid/grid_group _size="100"}}\n      <h2 class="text-4xl headline--barrier col-span-full">Gruppen 100%</h2>\n      {{#>components/grid/grid_item _size="12"}}\n        <a href="#">\n          <div class="flex items-center justify-center text-5xl text-white bg-gray-500 aspect-video">\n            12/12 = 100%    \n          </div>\n        </a>\n      {{/components/grid/grid_item}}   \n    {{/components/grid/grid_group}} \n    {{#>components/grid/grid_group _backgroundColor="1"}}    \n      <h2 class="text-4xl headline--barrier col-span-full">Gruppen 100% mit blauen Hintergrung bis Rand</h2>\n      {{#>components/grid/grid_item _size="6"}}\n        <div class="flex items-center justify-center text-5xl text-white bg-gray-500 aspect-video">\n          6/12 = 50%    \n        </div>\n      {{/components/grid/grid_item}}  \n      {{#>components/grid/grid_item _size="6"}}\n        <div class="flex items-center justify-center text-5xl text-white bg-gray-500 aspect-video">\n          6/12 = 50%    \n        </div>\n      {{/components/grid/grid_item}} \n    {{/components/grid/grid_group}} \n\n    {{#>components/grid/grid_group _size="100"}}\n\n      <h2 class="text-4xl headline--barrier col-span-full">Gruppen 100%</h2>\n      {{#>components/grid/grid_item _size="6"}}\n      <div class="flex items-center justify-center text-5xl text-white bg-gray-500 aspect-video">\n        6/12 = 50%    \n      </div>\n      {{/components/grid/grid_item}}  \n      {{#>components/grid/grid_item _size="6"}}\n      <div class="flex items-center justify-center text-5xl text-white bg-gray-500 aspect-video">\n        6/12 = 50%    \n      </div>\n      {{/components/grid/grid_item}} \n\n      {{#>components/grid/grid_item _size="4"}}\n      <div class="flex items-center justify-center text-5xl text-white bg-gray-500 aspect-video">\n        4/12 = 33%    \n      </div>\n      {{/components/grid/grid_item}} \n      {{#>components/grid/grid_item _size="4"}}\n      <div class="flex items-center justify-center text-5xl text-white bg-gray-500 aspect-video">\n        4/12 = 33%    \n      </div>  \n      {{/components/grid/grid_item}} \n      {{#>components/grid/grid_item _size="4"}}\n      <div class="flex items-center justify-center text-5xl text-white bg-gray-500 aspect-video">\n        4/12 = 33%    \n      </div>   \n      {{/components/grid/grid_item}}\n    {{/components/grid/grid_group}}\n    {{#>components/grid/grid_group_tabbed }}\n        <h2 class="text-4xl headline--barrier col-span-full">Gruppen 100% Tabbed</h2>\n        {{#>components/grid/grid_item _size="3"}}\n        <div class="flex items-center justify-center text-4xl text-white bg-gray-500 aspect-video">\n          3/12 = 25%    \n        </div> \n        {{/components/grid/grid_item}}\n        \n        {{#>components/grid/grid_item _size="3"}}\n        <div class="flex items-center justify-center text-4xl text-white bg-gray-500 aspect-video">\n          3/12 = 25%    \n        </div> \n        {{/components/grid/grid_item}}\n\n        {{#>components/grid/grid_item _size="3"}}\n        <div class="flex items-center justify-center text-4xl text-white bg-gray-500 aspect-video">\n          3/12 = 25%    \n        </div>   \n        {{/components/grid/grid_item}}\n\n        {{#>components/grid/grid_item _size="3"}}\n        <div class="flex items-center justify-center text-4xl text-white bg-gray-500 aspect-video">\n          3/12 = 25%    \n        </div>    \n        {{/components/grid/grid_item}} \n      \n    {{/components/grid/grid_group_tabbed}} \n    {{#>components/grid/grid_group}} \n      <h2 class="text-4xl headline--barrier col-span-full">Gruppen 100%</h2>\n      {{#>components/grid/grid_item _size="4"}}\n      <div class="flex items-center justify-center text-5xl text-white bg-gray-500 aspect-video">\n        4/12 = 33%    \n      </div>\n      {{/components/grid/grid_item}} \n      {{#>components/grid/grid_item _size="4"}}\n      <div class="flex items-center justify-center text-5xl text-white bg-gray-500 aspect-video">\n        4/12 = 33%    \n      </div>  \n      {{/components/grid/grid_item}} \n      {{#>components/grid/grid_item _size="4"}}\n      <div class="flex items-center justify-center text-5xl text-white bg-gray-500 aspect-video">\n        4/12 = 33%    \n      </div>   \n      {{/components/grid/grid_item}}  \n    {{/components/grid/grid_group}} \n    {{#>components/grid/grid_group _size="50"}}\n      <h2 class="text-4xl headline--barrier col-span-full">Gruppen 50%</h2>\n      {{#>components/grid/grid_item _size="12"}}\n        <div class="flex items-center justify-center text-5xl text-white bg-gray-500 aspect-video">\n          6/12 = 50%    \n        </div>\n      {{/components/grid/grid_item}} \n      {{#>components/grid/grid_item _size="12"}}\n        <div class="flex items-center justify-center text-5xl text-white bg-gray-500 aspect-video">\n          6/12 = 50%    \n        </div>  \n      {{/components/grid/grid_item}} \n    {{/components/grid/grid_group}} \n    {{#>components/grid/grid_group _size="50"}}\n      <h2 class="text-4xl headline--barrier col-span-full">Gruppen 50%</h2>\n      {{#>components/grid/grid_item _size="6"}}\n        <div class="flex items-center justify-center text-5xl text-white bg-gray-500 aspect-video">\n          6/12 = 50%    \n        </div>\n      {{/components/grid/grid_item}} \n      {{#>components/grid/grid_item _size="6"}}\n        <div class="flex items-center justify-center text-5xl text-white bg-gray-500 aspect-video">\n          6/12 = 50%    \n        </div>  \n      {{/components/grid/grid_item}} \n    {{/components/grid/grid_group}} \n    {{#>components/grid/grid_group _size="66"}}\n      <h2 class="text-4xl headline--barrier col-span-full">Gruppen 66%</h2>\n      {{#>components/grid/grid_item _size="12"}}\n        <div class="flex items-center justify-center text-5xl text-white bg-gray-500 aspect-video">\n          8/12 = 66%    \n        </div>\n      {{/components/grid/grid_item}} \n      {{#>components/grid/grid_item _size="12"}}\n        <div class="flex items-center justify-center text-5xl text-white bg-gray-500 aspect-video">\n          8/12 = 66%    \n        </div>  \n      {{/components/grid/grid_item}} \n    {{/components/grid/grid_group}} \n    {{#>components/grid/grid_group _size="33"}}\n      <h2 class="text-4xl headline--barrier col-span-full">Gruppen 33%</h2>\n      {{#>components/grid/grid_item _size="12"}}\n        <div class="flex items-center justify-center text-5xl text-white bg-gray-500 aspect-video">\n          4/12 = 33%    \n        </div>\n      {{/components/grid/grid_item}} \n      {{#>components/grid/grid_item _size="12"}}\n        <div class="flex items-center justify-center text-5xl text-white bg-gray-500 aspect-video">\n          4/12 = 33%    \n        </div>  \n      {{/components/grid/grid_item}} \n    {{/components/grid/grid_group}} \n  </div>\n</div>\n'
 module.exports['components/grid/grid_group.hbs'] = '{{~#if _backgroundColor}}\n    {{#>components/grid/grid_group_highlight _backgroundColor=this.backgroundColor }}  \n        {{> @partial-block }}\n    {{/components/grid/grid_group_highlight }}\n{{else}}\n    {{#>components/grid/grid_group_standard _size=this.teaserSize }}  \n        {{> @partial-block }}\n    {{/components/grid/grid_group_standard }}\n{{/if}}'
 module.exports['components/grid/grid_group_highlight.hbs'] = '</div>\n<div class="grid col-full grid-page {{inline-switch _backgroundColor \'["1","2"]\' \'[" bg-grey-alto"," bg-orange-bridesmaid"]\'}}">\n    <section class="grid grid-cols-12 py-6 sm:px-8 col-full sm:col-main gap-x-6 gap-y-9">\n        <div class="grid content-start grid-cols-12 col-span-12 gap-x-6 gap-y-6">\n            {{> @partial-block }}\n        </div>\n    </section>\n</div>\n<div class="grid grid-cols-12 py-6 bg-white sm:px-8 col-full sm:col-main gap-x-6 gap-y-6">'
@@ -21,6 +20,7 @@ module.exports['components/grid/grid_group_standard.hbs'] = '<section class="gri
 module.exports['components/grid/grid_group_tabbed.hbs'] = '</div>\n<section class="grid grid-cols-12 px-8 py-8 mx-4 bg-blue-400 sm:mx-0 rounded-tl-3xl rounded-br-3xl col-full sm:col-main gap-x-6 gap-y-6">\n    {{> @partial-block }}\n</section>\n<div class="grid grid-cols-12 py-6 bg-white sm:px-8 col-full sm:col-main gap-x-6 gap-y-6">'
 module.exports['components/grid/grid_item.hbs'] = '<article class="col-span-12 {{inline-switch _size \'["12","8","6","4","3"]\' \'["","md:col-span-8","md:col-span-6","md:col-span-4","md:col-span-3"]\'}}" >\n    {{> @partial-block }}    \n</article>'
 module.exports['components/mediaplayer/media_player.hbs'] = '<div x-show="avStart" id="{{this.ardPlayerConfig.playerId}}" class="ar-16-9 h-auto js-load {{if _cypressHook _cypressHook \'js-media-element\'}} js-video-livestream" data-hr-mediaplayer-loader=\'{{json this.ardPlayerJsonConfig}}\'>\n    {{#unless _hideGeotag}}\n        {{~#with _geotag}}\n            <span class="js-geotag c-teaser__geotag" aria-hidden="true">{{this.[0].title~}}</span>\n        {{/with~}}\n    {{/unless}}\n</div>\n{{#if _isTeaser}}\n    <div class="relative {{_aspectRatio}}" x-show="!avStart" > \n        {{#with _teaser}}\n            {{~#if ../_isCopyText~}}\n                {{~> components/base/image/responsive_image this.teaserImage _type=(if this.teaserType this.teaserType \'story\') _variant=(if this.content.imageVariant this.content.imageVariant \'100-copytext\') _addClassImg="ar__content" _noDelay=../_noDelay ~}}                \n            {{else}}          \n                {{#decorator \'components/base/link\' _cssClasses="c-teaser__mediaLink" _isAriaHidden=true\n                        _doTracking=(if this.doTracking \'true\') _clickLabelPrefix1=this.realTeasersize\n                        _clickLabelPrefix2="mediaLink" }}                                      \n                    {{~> components/base/image/responsive_image this.teaserImage _type=(if this.teaserType this.teaserType \'story\') _variant=(if this.content.imageVariant this.content.imageVariant \'100-copytext\') _addClassImg="js-mediaplayer__area ar__content mediaPlayerLoader__mediaplayerArea" _noDelay=../_noDelay ~}}                             \n                {{/decorator }}\n            {{/if}}\n        {{/with}}\n        {{> components/button/button_round _isButton="true" _addClass=(if _isLivestream \'absolute bottom-0 right-0 my-5 mx-5 text-orange-spicyCarrot hover:fill-orange-spicyCarrot js-mediaplayer__button\' \'absolute bottom-0 right-0 my-5 mx-5 text-blue-jellyBean hover:fill-blue-jellyBean js-mediaplayer__button\') _showIcon=true _icon=_mediaButtonIcon _label=_mediaButtonLabel _srOnly="true" _alpineClick="avStart = !avStart; $dispatch(\'player_start\')"}}   \n        {{~#if this.isPodcast~}}\n            <a href="{{this.podcastDownloadUrl}}" class="absolute top-0 right-0 m-5 js-load"{{#with\n                    this.trackingData}}\n            data-hr-click-tracking=\'{"settings": [{"type": "download", "clickLabel": "{{this.pageName}}", "secondLevelId": "{{this.secondLevelId}}"}, {"type": "uxAction", "clickLabel": "medienDownload::podcast::{{_type}}", "secondLevelId": "{{this.secondLevelId}}" }]}\'{{/with}}>\n                {{> components/base/image/icon _icon=\'download-button\' _addClass="w-10 h-10"}}\n            </a>\n        {{~/if~}}\n    </div>\n{{/if}}'
+module.exports['components/label/label.hbs'] = '<span\n    class=\'sb-label rounded px-1.5 pt-px inline-block tracking-wide text-white text-base leading-5.5 font-heading\n        {{inline-switch\n            _type\n            \'["media","event","breakingnews","comment","analysis","der-tag-in-hessen","glosse","fragen-und-antworten","infografik","interaktiv","program","download","pm","liveticker","ticker","livestream","live","livechat","buliticker","social-tv","blog","podcast"]\'\n            \'["bg-labelMedia","bg-labelEvent","bg-labelBreakingnews","bg-labelComment","bg-labelComment","bg-labelComment","bg-labelComment","bg-labelComment","bg-labelInfografik","bg-labelInfografik","bg-labelProgram","bg-labelDownload","bg-labelPm","bg-labelLive","bg-labelLive","bg-labelLive","bg-labelLive","bg-labelLive","bg-labelLive","bg-labelLive","bg-labelLive","bg-labelMedia"]\'\n        }}\'\n>\n    {{_text}}\n</span>\n{{~#with this.byline~}}\n    <span class=\'ml-2 text-xs text-grey-scorpion font-headingSerif\'>\n        {{~#if this.bylineSsi~}}\n            {{{this.bylineSsi}}}\n        {{~else~}}\n            {{this.bylineText}}\n        {{~/if~}}\n    </span>\n{{~/with~}}'
 module.exports['components/page/page.hbs'] = '<!DOCTYPE html>\n<html \n    class="no-js no-js-burgerMenu preload noMicroInteraction"\n    data-theme="hessenschau" \n    lang="de"\n>\n    <head>\n\n        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>\n        <meta http-equiv="X-UA-Compatible" content="IE=Edge"/>\n        <title>hessenschau.de | Nachrichten aus Hessen</title>\n        <meta name="application-name" content="hessenschau.de" />\n        <meta name="copyright" content="Hessischer Rundfunk, Frankfurt, Germany" />\n        <meta name="author" content="hessenschau.de, Frankfurt, Germany" />\n        <meta name="publisher" content="hessenschau.de" />\n        <meta name="language" content="Deutsch" />\n\n    </head>\n\n    <body itemscope itemtype="http://schema.org/WebPage">\n        <div class="js-pageSwap">\n                      \n            {{> components/site_header/header }}          \n            \n            <main \n                onclick="void(0)" \n                role="main" \n                id="content"\n                class="flex items-center justify-center"\n            >\n                <div class="grid grid-page">\n                    <div class="grid grid-cols-12 py-6 col-full gap-x-6 gap-y-6 sm:px-8 sm:col-main">\n                        {{> components/teaser/teaser_standard }}\n                    </div>\n                    <div class="grid grid-cols-12 py-6 col-full gap-x-6 gap-y-6 sm:px-8 sm:col-main">\n                        {{> components/teaser/teaser_standard teaserSize="50"}}\n                        {{> components/teaser/teaser_standard teaserSize="50"}}\n                    </div>\n                    <div class="grid grid-cols-12 py-6 col-full gap-x-6 gap-y-6 sm:px-8 sm:col-main">\n                        {{> components/teaser/teaser_standard teaserSize="33"}}\n                        {{> components/teaser/teaser_standard teaserSize="33"}}\n                        {{> components/teaser/teaser_standard teaserSize="33"}}\n                    </div>\n                    <div class="grid grid-cols-12 py-6 col-full gap-x-6 gap-y-6 sm:px-8 sm:col-main">\n                        {{> components/teaser/teaser_standard teaserSize="50"}}\n                        {{> components/teaser/teaser_standard teaserSize="50"}}\n                    </div>               \n                    <div class="grid grid-cols-12 py-6 col-full gap-x-6 gap-y-6 sm:px-8 sm:col-main">\n                        {{> components/teaser/teaser_standard teaserSize="33"}}\n                        {{> components/teaser/teaser_standard teaserSize="33"}}\n                        {{> components/teaser/teaser_standard teaserSize="33"}}\n                    </div>\n                    <div class="grid grid-cols-12 py-6 col-full gap-x-6 gap-y-6 sm:px-8 sm:col-main">\n                        {{> components/teaser/teaser_standard teaserSize="50"}}\n                        {{> components/teaser/teaser_standard teaserSize="50"}}\n                    </div>\n                    \n                </div>\n            </main>\n\n        </div>\n    </body>\n</html>\n'
 module.exports['components/site_header/burger.hbs'] = '<div x-data="burger()" class="flex items-center justify-center h-full fill-current sb-burger">\n    <nav>\n        <button {{!-- :class="$store.burgeropen ? \'text-blue-congress\' : \'text-white\'" --}}  \n            class="relative w-10 h-10 text-white tablet:w-18 tablet:h-12 focus:outline-none bg-brand"\n            @burger-close.window="burgerClose()"\n            @click="$store.burgeropen = !$store.burgeropen" \n            @click.debounce="burgerClick()" \n            aria-owns="sectionNav" \n            aria-controls="sectionNav"\n            x-effect="$el.setAttribute(\'aria-expanded\', $store.burgeropen);$el.setAttribute(\'aria-label\', $store.burgeropen ? \'Navigation schließen\' : \'Navigation öffnen\')"\n        >\n            <span class="sr-only md:hidden">Open main menu</span>\n            <div class="absolute block w-6 transform -translate-x-1/2 -translate-y-1/2 left-1/2 top-1/2">\n                <span aria-hidden="true" class="absolute block w-full h-0.5 transition duration-500 ease-in-out transform bg-current " :class="$store.burgeropen ? \'rotate-45\' : \'-mt-2\'"></span>\n                <span aria-hidden="true" class="absolute block w-full h-0.5 transition duration-500 ease-in-out transform bg-current" :class="{\'opacity-0\': $store.burgeropen } "></span>\n                <span aria-hidden="true" class="absolute block w-full h-0.5 transition duration-500 ease-in-out transform bg-current" :class="{\'-rotate-45\': $store.burgeropen, \'mt-2\': ! $store.burgeropen }"></span>\n            </div>\n        </button>\n    </nav>\n</div>\n\n<script>\n    var burger = () => {\n        return {\n            burgerClose(){               \n                this.$store.burgeropen = false\n                this.$dispatch(\'toggle-sectionnav\', false); \n            },\n            burgerClick(){               \n                this.$store.serviceNavIsOpen = false\n                this.$dispatch(\'toggle-sectionnav\',  this.$store.burgeropen);  \n                // Todo: not doing anything! can be removed?\n                // this.percent > 50 ? this.removeYtranslate() : null;\n                this.toggleScrolling(!this.$store.burgeropen)              \n            },\n            removeYtranslate(){\n                // Todo: not doing anything! can be removed?\n                //this.$refs.serviceList.classList.remove(\'-mt-40\'); \n                //this.$refs.sectionnavigation.classList.remove(\'-mt-40\')\n            }\n        }\n    }\n</script>\n'
 module.exports['components/site_header/header.hbs'] = '<div class="sb-main-navigation" x-data="mainNavigationHandler()" x-init="init()">\n    <header class="print:hidden relative z-10001 {{#if this.hasOpenSubNavigation}}lg:h-header-lg-big{{else}}lg:h-header-lg-small{{/if}} md:h-header-md h-header-sm">   \n        <div x-data \n            id="headerWrapper"\n            @resize.window="resetNav()" \n            :class="shouldBrandNavBeHidden() ? \'-mt-10 lg:-mt-8\' : \'\'  "\n            class="fixed top-0 left-0 flex flex-wrap max-w-full transition-all duration-500 transform font-copy lg:justify-center lg:w-full ">\n            \n            <div id="anchorNavWrapper" \n                class="hidden">\n                {{> components/site_header/anchor_navigation/anchor_navigation }}\n            </div>\n\n            <div id="brandNavWrapper" \n                class="relative flex items-center justify-center order-1 w-full bg-white z-10000">\n                {{> components/site_header/brand_navigation/brand_navigation }} \n            </div>\n\n            <div id="serviceNavWrapper" \n                :class="shouldServiceNavBeHidden() ? \'-mt-40\' : \'\'"\n                \n                class="relative flex justify-center order-2 w-full transition-all duration-500 ease-in-out md:border-white lg:border-b bg-blue-congress z-10002">   \n                <div id="serviceNavMainContainer" \n                    class="flex w-full h-10 lg:container md:h-12 lg:px-10 lg:h-16 z-10001">\n\n                    <span id="serviceNavHeadline" class="hidden print:hidden">Service Navigation</span>\n\n                    <div id="serviceLogoWrapper" \n                        class="flex items-center order-1 w-full pl-4 pr-2 tablet:pl-5 lg:items-end lg:pb-3 bg-blue-congress 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">\n                        {{> components/site_header/service_logo }}\n                    </div>\n                    \n                    <div id="serviceItemsWrapper"                \n                        class="flex items-center justify-end flex-initial order-2 inline-block w-full max-w-full align-top bg-blue-congress md:h-12 lg:h-16 lg:order-2 lg:w-3/4 lg:max-w-3/4 md:mt-0 md:w-1/2 md:max-w-1/2 md:order-2 md:border-0">\n                        {{> components/site_header/service_navigation/service_list }}\n\n                        {{> components/site_header/navigation_search/quick_search_button }}\n\n                        <div class="hidden lg:flex">\n                            {{> components/site_header/navigation_search/quick_search_form }}\n                        </div>\n                    \n                        <div id="burgerWrapper" \n                            class="flex justify-end flex-none order-2 lg:order-4 md:order-4 lg:hidden"> \n                            {{> components/site_header/burger }}    \n                        </div>\n                        \n                    </div>\n                </div>\n            </div>\n\n            <div id="sectionNavWrapper"      \n                x-ref="sectionnavigation"\n                @toggle-sectionnav.window="toggleSectionNav"\n                :class="shouldSectionNavBeHidden() ? \'-mt-40 md:-mt-40 lg:-mt-40\' : \'\'"  \n                class="flex justify-center order-3 w-full overflow-hidden duration-500 transition-max-height lg:transition-margin-top lg:duration-500 tablet:absolute tablet:top-22 tablet:w-half-screen tablet:ml-half-screen max-h-0 lg:overflow-visible md:mt-0 lg:flex lg:max-h-full lg:h-auto bg-blue-congress z-10000 print:hidden"\n            >\n                {{> components/site_header/section_navigation/section_navigation }}\n            </div>\n            \n            <div x-cloak :class="shouldServiceNavBeHidden() ? \'hidden -mt-40\' : \'\'"\n                x-effect="$el.setAttribute(\'id\', \'flyout-\' + $store.searchID.current + \'-2\');$el.setAttribute(\'aria-expanded\', $store.searchFieldOpen);$el.setAttribute(\'aria-hidden\', !$store.searchFieldOpen);$el.setAttribute(\'aria-labelledby\', \'flyout-\' + $store.searchID.current + \'-1\')" \n                x-show="$store.searchFieldOpen"\n                class="sb-quick-search-flyout flex tablet:w-half-screen tablet:ml-half-screen justify-end order-4 w-full max-w-full p-2 px-5 py-3.5 bg-white drop-shadow-md md:mt-0 z-10002 lg:hidden print:hidden"\n                @search-close.window="$store.searchFieldOpen = false"\n                @click.outside="$store.searchFieldOpen = false; $dispatch(\'search-mobile-click-outside\'); dropped = false; toggleScrolling(!$store.serviceNavIsOpensearchFieldOpen && !$store.burgeropen)"\n                x-transition:enter="transition ease-out duration-200" \n                x-transition:enter-start="opacity-0 transform scale-y-90" \n                x-transition:enter-end="opacity-100 transform scale-y-100" \n                x-transition:leave="transition ease-in duration-100" \n                x-transition:leave-start="opacity-100 transform scale-y-100" \n                x-transition:leave-end="opacity-0 transform scale-y-90">\n\n                {{> components/site_header/navigation_search/quick_search_form }}\n\n            </div>\n            \n        </div> \n    </header>\n    <div class="justify-center hidden w-full scale-50 brand-logo_print print:flex">\n        <img loading="lazy" \n            alt="{{loca "header_homepage_link_title"}}" \n            src="{{resourceUrl "assets/base/icons/rsslogo/brandlogo--rss.jpg" _brand=(if this.brand this.brand)}}" \n            />\n    </div>\n    <div x-ref="myOverlay">\n        <div x-cloak x-data="overlayHandler()" @click.debounce="overlayWasClicked()" x-show="shouldOverlayBeShown()" class="fixed top-0 left-0 w-screen h-screen bg-gray-800 z-10000 lg:hidden opacity-70"></div>\n    </div>\n</div>\n'
@@ -48,8 +48,8 @@ module.exports['components/teaser/cluster/teaser_cluster.hbs'] = '<article class
 module.exports['components/teaser/cluster/teaser_cluster_byline.hbs'] = '\n<p class="mt-2.5 text-xs text-grey-scorpion font-headingSerif {{#if _ordered}} pl-8 {{/if}}">\n    {{!--Teaser-Info--}}\n    {{#with this.teaserInfo}}\n        {{#if this.showTeaserInfo~}}\n           {{~#if this.showTeaserInfoSection}}\n              <span class="uppercase">\n                 {{../this.documentSection~}}\n              </span>\n              <span class="mx-px last-of-type:hidden">|</span>\n           {{/if}}\n           {{~#if this.showTeaserInfoDate}}\n              {{~#with ../this.teaserDate}}\n                 <time datetime="{{this.htmlDateTime}}">{{this.date}}</time>\n              {{/with~}}\n              <span class="mx-px last-of-type:hidden">|</span>\n           {{else}}\n               {{~#if this.showTeaserInfoDateTime}}\n                  {{~#with ../this.teaserDate}}\n                      <time datetime="{{this.htmlDateTime}}">{{loca "date_simple_at" this.dateSeparatorTime}}</time>\n                  {{/with~}}\n                  <span class="mx-px last-of-type:hidden">|</span>\n               {{/if~}}\n           {{/if~}}\n        {{/if}}\n    {{/with}}\n\n    {{!--Profiles--}}\n    {{#if this.showProfileInfoAsByline}}\n        {{#if this.profiles}}\n           <span>{{this.profiles}}</span>\n           <span class="mx-px last-of-type:hidden">|</span>\n        {{/if}}\n    {{/if}}\n</p>'
 module.exports['components/teaser/cluster/teaser_cluster_item.hbs'] = '\n{{#decorator \'components/base/link\' _css="group" _doTracking=(if this.doTracking \'true\') _clickLabelPrefix1="clusterTeaserLink" _clickLabelPrefix2="Link" }} \n    {{> components/teaser/components/teaser_heading\n        _headlineTag="h1"\n        _label=this.label\n        _size=_size\n        _title=this.title\n        _teaserType="cluster"\n        _ordered=_ordered\n        _titleBlue=\'true\' \n        _firstItem=_firstItem}}        \n                {{/decorator}}\n{{> components/teaser/cluster/teaser_cluster_byline}}\n                \n'
 module.exports['components/teaser/cluster/teaser_cluster_list.hbs'] = '<div class="{{~#if this.showFirstImageOrGenreImage}}{{~inline-switch this.teaserSize \'["100"]\' \'[" md:flex md:flex-row"]\'}}{{~/if~}}">\n    {{~#if this.showGenreImage}}\n        <div class="px-0 pb-5 {{~inline-switch this.teaserSize \'["100"]\' \'[" md:pl-5 md:basis-1/2 lg:basis-1/3 md:ar-1-1"]\'}}">\n            {{~> components/base/image/responsive_image this.genreImage type=this.teaserType variant=this.imageVariant addClass=this.aspectRatio _addClassImg="ar__content" ~}}\n        </div>\n    {{~/if~}}\n    {{~#if this.showFirstImage}}\n        {{~#with this.firstEntry~}}\n            {{~#if this.teaserImage}}\n                <div class="px-0 pb-5 {{~inline-switch ../this.teaserSize \'["100"]\' \'[" md:pl-5 md:basis-1/2 lg:basis-1/3"]\'}}">   \n                    {{~> components/base/image/responsive_image this.teaserImage type=../this.teaserType variant=../this.imageVariant addClass=../this.aspectRatio _addClassImg="ar__content pb-4" ~}}\n                    <div class="mx-5 {{~inline-switch ../this.teaserSize \'["100"]\' \'[" md:mx-0"]\'}}">\n                        {{> components/teaser/cluster/teaser_cluster_item _size=../this.teaserSize _ordered=../this.isOrdered _firstItem=true}}\n                    </div> \n                </div>   \n            {{/if~}}\n        {{~/with~}}\n    {{/if~}}\n    {{~#with this.clusterTeaserItems}}\n        {{~#if ../this.isOrdered}}<ol class="mx-5 list-none divide-y divide-white divide-solid counter-reset border-t border-white {{~#if ../this.showGenreImage}}{{~inline-switch ../this.teaserSize \'["100"]\' \'[" md:-pt-5 md:border-none"]\'}}{{/if~}}">{{else}}<ul class="mx-5 divide-y divide-white divide-solid border-t border-white {{~#if ../this.showGenreImage}}{{~inline-switch ../this.teaserSize \'["100"]\' \'[" md:-pt-5 md:border-none"]\'}}{{/if~}}">{{/if}}\n            {{~#each this~}}\n                <li class="{{~#if ../../this.isOrdered}} -ordered {{/if}} py-5 {{#if ../../this.headlineListOverview.link}} last-of-type:pb-0{{/if~}} {{~#if ../../this.showGenreImage}}{{~inline-switch ../../this.teaserSize \'["100"]\' \'[" md:first-of-type:pt-0"]\'}}{{/if~}}">\n                    {{> components/teaser/cluster/teaser_cluster_item _size=../this.teaserSize _ordered=../../this.isOrdered }} \n                </li>\n            {{~/each}}\n        {{~#if ../this.isOrdered}}</ol>{{else}}</ul>{{/if~}}\n    {{/with~}}\n</div>'
-module.exports['components/teaser/content_nav/teaser_content_nav.hbs'] = '<div id="contentNavWrapper"\n    x-ignore\n    ax-load\n    ax-load-src="/js/content_nav_alpine.js"\n    x-data="contentNavigationHandler()"\n    class="col-span-12 flex gap-y-3 gap-x-4 js-load {{inline-switch this.teasersize \'["100","66","50","33","25"]\' \'["flex-col","md:col-span-9 md:flex-row ","md:col-span-6 md:flex-row "," md:col-span-4 md:flex-row "," md:col-span-3 md:flex-row "]\'}}"\n>\n    {{> components/content_nav/content_nav _teasersize=this.teasersize }}           \n</div>'
-module.exports['components/teaser/components/teaser_av_consumption.hbs'] = '{{#with this.teaserLead.avDocument}}\n    {{~#if this.isVideo ~}}\n        {{~> components/mediaplayer/media_player this.toModel.videoElement _cypressHook="js-video-ondemand" _mediaButtonIcon="play_button" _mediaButtonLabel="Video" _isTeaser=true _teaser=../this _aspectRatio=../_aspectRatio _teaserSize=../_teaserSize ~}}\n    {{~/if~}}\n    {{~#if this.isAudio ~}}\n         {{~> components/mediaplayer/media_player this.toModel.audioElement _cypressHook="js-audio-ondemand" _mediaButtonIcon="audio_button" _mediaButtonLabel="Audio" _isTeaser=true _teaser=../this _audioUrl=this.audioUrl _variant=this.imageVariant _noDelay=../_noDelay _aspectRatio=../_aspectRatio _isMobile1to1=../_isMobile1to1 _teaserSize=../_teaserSize~}}             \n    {{~/if~}}\n    {{~#if this.isPodcast ~}}\n         {{~> components/mediaplayer/media_player this.toModel.audioElement _cypressHook="js-audio-ondemand" _mediaButtonIcon="podcast-button" _mediaButtonLabel="Podcast" _isTeaser=true _teaser=../this _audioUrl=this.audioUrl _variant=this.imageVariant _noDelay=../_noDelay _aspectRatio=../_aspectRatio _isMobile1to1=../_isMobile1to1 _teaserSize=../_teaserSize~}}             \n    {{~/if~}}\n    {{~#if this.isAudioEventLivestream ~}}\n         {{~> components/mediaplayer/media_player this.toModel.audioLivestreamElement _cypressHook="js-video-livestream" _mediaButtonIcon="play_button" _mediaButtonLabel="Live" _isLivestream="true" _isTeaser=true _teaser=../this  _audioUrl=this.audioUrl _variant=this.imageVariant _noDelay=../_noDelay _aspectRatio=../_aspectRatio _isMobile1to1=../_isMobile1to1 _teaserSize=../_teaserSize~}}             \n    {{~/if~}}\n    {{~#if this.isLivestream ~}}\n         {{~> components/mediaplayer/media_player this.toModel.videoLivestreamElement _cypressHook="js-video-livestream" _mediaButtonIcon="play_button" _mediaButtonLabel="Live" _isLivestream="true" _isTeaser=true _teaser=../this  _audioUrl=this.audioUrl _variant=this.imageVariant _noDelay=../_noDelay _aspectRatio=../_aspectRatio _isMobile1to1=../_isMobile1to1 _teaserSize=../_teaserSize~}}             \n    {{~/if~}}\n    \n{{/with}}\n{{#if _isMobile1to1~}}  \n        {{> components/button/button_transparent _showIcon="true" _title="Mediaplayer schließen" _icon="arrow-up" _iconmap="icons"_addIconClass="w-3 h-3 fill-current" _addClass="md:hidden absolute top-full right-0" _x-show="avStart" _alpineClick="avStart = false; $dispatch(\'player_closed\')"}}\n{{~/if~}}'
+module.exports['components/teaser/components/teaser_av_consumption.hbs'] = '{{#with this.teaserLead.avDocument}}\n     {{~#if this.isVideo ~}}\n          {{#with this.toModel.videoElement}}\n               {{~> components/mediaplayer/media_player _cypressHook="js-video-ondemand" _mediaButtonIcon="play_button" _mediaButtonLabel="Video" _isTeaser=true _teaser=../../this _aspectRatio=../../_aspectRatio _teaserSize=../../_teaserSize ~}}\n               {{#if ../../_isMobile1to1~}}  \n                    {{> components/teaser/components/teaser_av_consumption_close_button _playerId=this.ardPlayerConfig.playerId }}\n               {{~/if~}}\n          {{/with}}\n     {{~/if~}}\n     {{~#if this.isAudio ~}}\n          {{#with this.toModel.audioElement}}\n               {{~> components/mediaplayer/media_player _cypressHook="js-audio-ondemand" _mediaButtonIcon="audio_button" _mediaButtonLabel="Audio" _isTeaser=true _teaser=../../this _audioUrl=../this.audioUrl _variant=../this.imageVariant _noDelay=../../_noDelay _aspectRatio=../../_aspectRatio _isMobile1to1=../../_isMobile1to1 _teaserSize=../../_teaserSize~}}                  \n               {{#if ../../_isMobile1to1~}}  \n                    {{> components/teaser/components/teaser_av_consumption_close_button _playerId=this.ardPlayerConfig.playerId }}\n               {{~/if~}}\n          {{/with}}\n     {{~/if~}}\n     {{~#if this.isPodcast ~}}\n          {{#with this.toModel.audioElement}}\n               {{~> components/mediaplayer/media_player _cypressHook="js-audio-ondemand" _mediaButtonIcon="podcast-button" _mediaButtonLabel="Podcast" _isTeaser=true _teaser=../../this _audioUrl=../this.audioUrl _variant=../this.imageVariant _noDelay=../../_noDelay _aspectRatio=../../_aspectRatio _isMobile1to1=../../_isMobile1to1 _teaserSize=../../_teaserSize~}}             \n               {{#if ../../_isMobile1to1~}}  \n                    {{> components/teaser/components/teaser_av_consumption_close_button _playerId=this.ardPlayerConfig.playerId }}\n               {{~/if~}}\n          {{/with}}\n     {{~/if~}}\n     {{~#if this.isAudioEventLivestream ~}}\n          {{#with this.toModel.audioLivestreamElement}}\n               {{~> components/mediaplayer/media_player _cypressHook="js-video-livestream" _mediaButtonIcon="play_button" _mediaButtonLabel="Live" _isLivestream="true" _isTeaser=true _teaser=../../this  _audioUrl=../this.audioUrl _variant=../this.imageVariant _noDelay=../../_noDelay _aspectRatio=../../_aspectRatio _isMobile1to1=../../_isMobile1to1 _teaserSize=../../_teaserSize~}}             \n               {{#if ../../_isMobile1to1~}}  \n                    {{> components/teaser/components/teaser_av_consumption_close_button _playerId=this.ardPlayerConfig.playerId }}\n               {{~/if~}}\n          {{/with}}\n     {{~/if~}}\n     {{~#if this.isLivestream ~}}\n          {{#with this.toModel.videoLivestreamElement}}\n               {{~> components/mediaplayer/media_player _cypressHook="js-video-livestream" _mediaButtonIcon="play_button" _mediaButtonLabel="Live" _isLivestream="true" _isTeaser=true _teaser=../../this  _audioUrl=../this.audioUrl _variant=../this.imageVariant _noDelay=../../_noDelay _aspectRatio=../../_aspectRatio _isMobile1to1=../../_isMobile1to1 _teaserSize=../../_teaserSize ~}}             \n               {{#if ../../_isMobile1to1~}}  \n                    {{> components/teaser/components/teaser_av_consumption_close_button _playerId=this.ardPlayerConfig.playerId }}\n               {{~/if~}}\n          {{/with}}\n     {{~/if~}}\n    \n{{/with}}'
+module.exports['components/teaser/components/teaser_av_consumption_close_button.hbs'] = '{{> components/button/button_transparent _showIcon="true" _title="Mediaplayer schließen" _icon="arrow-up" _iconmap="icons"_addIconClass="w-3 h-3 fill-current" _addClass="md:hidden absolute top-full right-0" _x-show="avStart" _alpineClick=(loca "close_button_alpine_click" _playerId)}}'
 module.exports['components/teaser/components/teaser_body.hbs'] = '<div class="{{~#if this.isMobile1to1}}basis-3/5 md:flex-full{{/if~}}{{#if _outerCssClasses}} {{_outerCssClasses}}{{/if}}">\n    <header class="md:px-0{{#unless this.isMobile1to1}} px-5{{/unless}}">\n        {{#decorator \'components/base/link\' _css="hover:text-toplineColor" _doTracking=(if this.doTracking \'true\') _clickLabelPrefix1=this.teaserSize _clickLabelPrefix2="headlineLink" }} \n            {{> components/teaser/components/teaser_heading \n            _fontVariant=this.headingFontVariant\n            _headlineTag=this.headlineTag \n            _label=this.label \n            _readMore=this.link.readMoreText.readMoreScreenreader \n            _size=this.teaserSize \n            _title=this.title \n            _topline=this.topline \n            _teaserType=this.teaserType\n            _isMobile1to1=this.isMobile1to1}}            \n        {{/decorator}}   \n    </header>\n    <div class="md:px-0{{#unless this.isMobile1to1}} px-5{{/unless}}">\n        {{> components/teaser/components/teaser_text _text=this.shorttext _size=this.teaserSize _cssClasses=_teaserTextCssClasses }}\n        {{> components/teaser/components/teaser_byline}} \n    </div>\n</div>'
 module.exports['components/teaser/components/teaser_byline.hbs'] = '<p class="mt-2.5 text-xs text-grey-scorpion font-headingSerif">\n     \n        {{!--Teaser-Info--}}\n        {{#with this.teaserInfo}}\n            {{#if this.showTeaserInfo~}}\n                {{~#if this.showTeaserInfoDate}}\n                    {{~#with ../this.teaserDate}}\n                        <time datetime="{{this.htmlDateTime}}">{{this.date}}</time>\n                    {{/with~}}                    \n                    <span class="mx-px last-of-type:hidden">|</span>                    \n                {{else}}\n                    {{~#if this.showTeaserInfoDateTime}}\n                        {{~#with ../this.teaserDate}}\n                            <time datetime="{{this.htmlDateTime}}">{{loca "date_simple_at" this.dateSeparatorTime}}</time>\n                        {{/with~}}                        \n                        <span class="mx-px last-of-type:hidden">|</span>                        \n                    {{/if~}}\n                {{/if~}}    \n\n                {{~#if this.showTeaserInfoSection}}\n                    <span class="uppercase">\n                        {{../this.documentSection~}}\n                    </span>                    \n                    <span class="mx-px last-of-type:hidden">|</span>                    \n                {{/if}}\n\n            {{/if}}\n        {{/with}}\n\n        {{!--Profiles--}}\n        {{#if this.profiles}}\n            <span>{{this.profiles}}</span>            \n            <span class="mx-px last-of-type:hidden">|</span>            \n        {{/if}}    \n\n    {{!--Comments--}}\n    {{#with this.commentsSsi}}\n        {{> components/base/loadSSI _templatePath=\'components/teaser/components/teaser_comments\' }}    \n    {{/with}}\n</p>\n'
 module.exports['components/teaser/components/teaser_comments.hbs'] = '{{#with this.commentLink}}\n    <span class="whitespace-nowrap">\n        {{#decorator \'components/base/link\' _css="hover:underline decoration-1" _isAriaHidden=true _doTracking=(if this.doTracking \'true\') _clickLabelPrefix1=this.teaserSize _clickLabelPrefix2="comment" }}\n            {{> components/base/image/icon _icon="kommentar" _iconmap="icons" _addClass="mr-0.5 inline w-5 h-5 text-toplineColor fill-current"}}\n            <span class="sr-only">{{loca "comment_anchor_1"}}</span>\n            <span class="text-toplineColor">{{../../this.commentNumber}}</span>\n            {{#if ../../this.hasOneComment}}\n                <span class="text-toplineColor">{{loca "comment_label_text"}}</span>\n            {{else}}\n                <span class="text-toplineColor">{{loca "comment_label_text_many"}}</span>\n            {{/if}}\n            <span class="sr-only">{{loca "comment_anchor_2"}}</span>\n        {{/decorator}}\n    </span>\n{{/with}}'
@@ -61,6 +61,7 @@ module.exports['components/teaser/components/teaser_text.hbs'] = '<span\n    cla
 module.exports['components/teaser/components/teaser_title.hbs'] = '<span class=\'block mt-0.5 group-hover:underline {{#if _titleBlue}} text-blue-congress {{/if}}{{#if _ordered}} pl-8 {{/if}} {{> components/teaser/components/teaser_title_classes _size=_size _teaserType=_teaserType _fontVariant=_fontVariant _isMobile1to1=_isMobile1to1 _firstItem=_firstItem}}\'>\n    {{~_text~}}\n</span>'
 module.exports['components/teaser/components/teaser_title_classes.hbs'] = '{{! \nThis handlebars template is responisible to render the needed classnames for Teaser headlines\nAs we use tailwind css no cascade is used to style components. As Teaser Headline Sizes dependent\non 4 parameters the logic was outsourced to this file.\n\nthe 4 parameters are:\n- teaserType\n- size\n- _isMobile1to1\n- fontVariant\n\n}}\n\n{{~#switch _teaserType~}}\n    {{~#case \'standard-ds\'~}}\n        {{~#if _isMobile1to1~}}\n            {{~inline-switch\n                _size\n                \'["hero","100","25"]\'\n                \'["text-lg md:text-4xl","text-lg md:text-4xl","text-lg","text-lg md:text-2xl"]\'\n            ~}}\n        {{~else~}}\n            {{~inline-switch\n                _size\n                \'["hero","100","25"]\'\n                \'["text-2xl md:text-4xl","text-2xl md:text-4xl","text-lg","text-2xl"]\'\n            ~}}\n        {{~/if~}}\n    {{~/case~}}\n    {{~#case \'alternative-ds\'~}}\n        {{~inline-switch\n            _size\n            \'["hero","100","50"]\'\n            \'["text-2xl md:text-3xl","text-lg md:text-3xl","text-lg md:text-2xl"]\'\n        ~}}\n    {{~/case~}}\n    {{~#case \'poster-ds\'~}}\n        {{~inline-switch _size \'["50","33"]\' \'["text-2xl md:text-4xl","text-2xl"]\'~}}\n    {{~/case~}}\n    {{~#case \'cluster\'~}}\n        {{#if _firstItem}}\n            {{~inline-switch _size \'["100"]\' \'[" text-lg md:text-2xl"," text-lg"]\'}}\n        {{else}}\n            text-lg \n        {{/if}}\n    {{~/case~}}\n{{~/switch~}}\n{{~inline-switch\n    _fontVariant\n    \'["serif", "sans-serif"]\'\n    \'[" font-headingSerif"," font-heading font-bold"," font-headingSerif"]\'\n~}}'
 module.exports['components/teaser/components/teaser_topline.hbs'] = '<span\n    class=\'pt-px block text-base\n        {{inline-switch _teaserType \'["poster-ds"]\' \'["text-white","text-toplineColor"]\'}}\n        font-heading\'\n    aria-label=\'{{_readMore}}: {{_text}}\'\n>\n    {{_text}}\n</span>'
+module.exports['components/teaser/content_nav/teaser_content_nav.hbs'] = '<div id="contentNavWrapper"\n    x-ignore\n    ax-load\n    ax-load-src="/js/content_nav_alpine.js"\n    x-data="contentNavigationHandler()"\n    class="col-span-12 flex gap-y-3 gap-x-4 js-load {{inline-switch this.teasersize \'["100","66","50","33","25"]\' \'["flex-col","md:col-span-9 md:flex-row ","md:col-span-6 md:flex-row "," md:col-span-4 md:flex-row "," md:col-span-3 md:flex-row "]\'}}"\n>\n    {{> components/content_nav/content_nav _teasersize=this.teasersize }}           \n</div>'
 module.exports['components/teaser/group_teaser/group_teaser.hbs'] = '{{#>components/grid/grid_group size=this.teaserSize _backgroundColor=this.backgroundColor }} \n        {{~#if this.hasGroupTitle}}\n            <h2 class="text-2xl md:text-4xl col-span-full py-0 font-headingSerif {{#if this.backgroundColor}} text-center{{else}} headline-barrier{{/if}}">\n                {{~#if this.hasLink}}<a class="no-underline hover:underline decoration-1 md:decoration-2 text-blue-science" href="{{this.link.url}}">{{/if~}}\n                    {{this.groupTitle}}\n                {{~#if this.hasLink}}</a>{{/if~}}\n            </h2>\n        {{/if}}  \n        {{~> components/teaser/teaser_logic/teaser_logic ~}}\n{{/components/grid/grid_group}}'
 module.exports['components/teaser/group_teaser/group_teaser_accented.hbs'] = '{{#>components/grid/grid_group size=this.teaserSize _backgroundColor=this.backgroundColor }}\n    \n        <div class="h-auto col-span-12 p-8 mx-4 rounded-tr-none rounded-bl-none bg-blue-accented rounded-3xl">\n\n        {{~#if this.hasGroupTitle}}\n            <h2 class="text-2xl md:text-4xl col-span-full py-0 font-headingSerif {{#if this.backgroundColor}} text-center{{else}} headline-barrier{{/if}}">\n                {{~#if this.hasLink}}<a class="no-underline hover:underline decoration-1 md:decoration-2 text-blue-science" href="{{this.link.url}}">{{/if~}}\n                    {{this.groupTitle}}\n                {{~#if this.hasLink}}</a>{{/if~}}\n            </h2>\n        {{/if}}\n\n        </div>\n        <div class="h-24 col-span-12 p-2 mx-4 my-0 -mt-10 rounded-tr-none rounded-bl-none md:p-4 bg-blue-accented rounded-3xl">\n    \n        {{~> components/teaser/teaser_logic/teaser_logic ~}}\n    \n        </div>\n    \n{{/components/grid/grid_group}}'
 module.exports['components/teaser/podcast/podcast.hbs'] = '<div class="grid grid-cols-12 pt-5 md:pt-5 bg-[#dce8f0] mx-0 rounded-tl-3xl rounded-br-3xl col-main gap-x-6 gap-y-6" > \n    {{> components/teaser/podcast/podcast_player _linkTitle="true" _isSinglePage=true _type="podcastEpisodePlayerTeaser" }}\n </div>'
@@ -69,7 +70,7 @@ module.exports['components/teaser/podcast/podcast_player.hbs'] = '<div class="fl
 module.exports['components/teaser/podcast/podcast_player_ui.hbs'] = '<div class="flex flex-wrap w-full">  \n    <div class="flex flex-wrap w-full js-load" \n        x-data="playaudio()"\n        ax-load\n        x-ignore\n        ax-load-src="/js/podcastPlayer.alpine.js"\n        x-init="setTime( \'{{podcastDuration}}\' )" >\n\n        <div class="flex items-center w-full flex-nowrap">\n            {{!-- Start/StopButton       --}}\n            <div class="flex">\n                {{> components/teaser/podcast/podcast_playbutton _clickFunction="playAndStop" _css="mr-4" _title=this.title _teaserSize=this.teaserSize _addClass="" }}\n            </div>\n\n            {{!-- Range Slider     --}}\n            <div class="flex w-full">\n                <input x-ref="range" id="range" x-on:input="rangeInput()" type="range" x-bind:value="currentTimePercentage" min="0" max="1000" class="flex h-1 bg-white rounded-lg appearance-none cursor-pointer grow seek_slider" >  \n            </div>\n        </div>\n        \n        {{!-- Meta Time usw. --}}\n        {{> components/teaser/podcast/podcast_timedisplay _duration=podcastDuration _currentTimeClasses="font-bold text-orange-layout" _durationClasses="text-blue-science" _containerCss="pl-16 -mt-3 flex text-xs grow font-headingSerif"}}\n\n        {{!-- AudioElement --}}\n        {{~#with this.audioUrl ~}}\n            <audio preload="metadata" class="hidden" x-ref=\'audio\'>\n            <source id="audio" src={{this}} type=\'audio/mp3\'/>\n            </audio>\n        {{/with}}\n    </div>\n</div>'
 module.exports['components/teaser/podcast/podcast_timedisplay.hbs'] = '<div x-cloak class="{{_containerCss}}">\n    <span class="{{_currentTimeClasses}}" x-text="currentTime">0:00</span>\n    <span class="{{_durationClasses}} px-0.5"> / </span>\n    <span class="{{_durationClasses}}" x-text="audioDurationFancy"> </span>\n</div>'
 module.exports['components/teaser/podcast/podcast_title.hbs'] = '{{#decorator \'components/base/link\' _css="font-headingSerif font-bold text-base mt-2.5 text-toplineColor line-clamp-4 md:line-clamp-2 ..." }} \n    <span class="block mt-0.5 group-hover:underline text-blue-science {{#if _ordered}} pl-8 {{/if}} {{~ inline-switch _teaserSize \'["100","50"]\'\'["text-base md:text-2xl","text-base md:text-lg"]\' ~}}">\n    {{~_title~}}\n    </span>\n{{/decorator}}'
-module.exports['components/teaser/teaser_logic/teaser_logic.hbs'] = '{{~#each this.logicItems}}\n    {{~#if this.isSsi~}}        \n        {{#if (isStorybook)}}  \n            {{> components/teaser/teaser_logic/teaser_logic.ssi }} \n        {{else}}\n            {{{this.ssi}}}\n        {{/if}} \n    {{~else}}\n        {{~#with this.includeModel~}}\n            {{~#if (isStorybook)~}}\n                {{~> components/base/load_dynamic _templatePath=../includePath ~}} \n            {{~else~}}\n                {{~> (lookup ../. \'includePath\')~}}\n            {{~/if~}}\n        {{~/with~}}\n    {{~/if~}}\n{{/each~}}'
-module.exports['components/teaser/teaser_logic/teaser_logic.ssi.hbs'] = '{{~#with this.logicItem~}}\n    {{~#with this.includeModel~}}\n        {{~#if (isStorybook)~}}\n            {{~> components/base/load_dynamic _templatePath=../includePath ~}}\n        {{~else~}}\n            {{~> (lookup ../. \'includePath\')~}}\n        {{~/if~}}\n    {{~/with~}}\n{{~/with~}}'
 module.exports['components/teaser/tabbox/group_tabbox.hbs'] = '<section \n    x-show="tab === \'{{this.groupTitle}}\'"\n    class="pb-10"\n>\n    {{~#if this.hasGroupTitle~}}\n        <h3 class="sr-only">\n            <a class="" href="#tgp{{this.teaserIndex}}">\n                <span class="">{{this.groupTitle}}</span>\n                <span class="">\n                    {{> components/base/image/icon _icon="arrow-down" _iconmap="icons" _addClass="w-3 h-2 fill-current"}}\n                    {{> components/base/image/icon _icon="arrow-up" _iconmap="icons" _addClass="w-3 h-2 fill-current"}}\n                </span>\n            </a>\n        </h3>\n    {{~/if~}}\n\n    <a class="w-0" name="tgp{{this.teaserIndex}}"></a>\n    <div class="grid content-start grid-cols-12 px-0 md:px-8 colspan-12 gap-x-6 gap-y-6">\n        {{~> components/teaser/teaser_logic/teaser_logic ~}}\n    </div>\n    {{~#if this.link~}}\n        <div class="flex justify-center pt-8">\n            {{~> components/button/button_pseudo _linkTitle=(loca "group_tabbed_more" this.title) ~}}\n        </div>\n    {{~/if~}}\n</section>'
-module.exports['components/teaser/tabbox/teaser_tabbox.hbs'] = '</div>\n<div \n  x-data="{ tab: \'{{this.tabbedGroup.[0].title}}\' }"\n  class="grid grid-cols-12 pt-6 md:pt-7 bg-[#dce8f0] mx-0 md:rounded-tl-3xl md:rounded-br-3xl col-main gap-x-6 gap-y-6"\n>\n  <section class="col-span-full" data-hr-group-tabbed=\'{"wandaPageId":"{{this.wandaPageId}}"}\'>\n    <div class="flex flex-wrap justify-center mb-7 mx-1.5" role="tablist">\n      {{~#each this.tabbedGroup~}}\n        <button  onclick="window.location.href=\'#tgp{{@index}}\';"\n                 :class="tab === \'{{this.title}}\' ? \'text-white bg-blue-congress border-blue-congress\' : \'bg-white text-blue-congress border-white hover:border-blue-congress\'" \n                 x-effect="$el.removeAttribute(\'onclick\')"\n                 x-on:click.prevent="tab = \'{{this.title}}\'"  \n                 class="border text-base font-heading py-px px-2 m-1.5" \n                 type="button" \n                 role="tab"\n        >\n          {{this.title}}\n        </button>\n      {{~/each~}}\n    </div>\n    {{~> components/teaser/teaser_logic/teaser_logic ~}}\n  </section>\n</div>\n<div class="grid grid-cols-12 py-6 bg-white sm:px-8 col-full sm:col-main gap-x-6 gap-y-6"> '
+module.exports['components/teaser/tabbox/teaser_tabbox.hbs'] = '</div>\n<div \n  x-data="{ tab: \'{{this.tabbedGroup.[0].title}}\' }"\n  class="grid grid-cols-12 pt-6 md:pt-7 bg-[#dce8f0] mx-0 md:rounded-tl-3xl md:rounded-br-3xl col-main gap-x-6 gap-y-6"\n>\n  <section class="col-span-full" data-hr-group-tabbed=\'{"wandaPageId":"{{this.wandaPageId}}"}\'>\n    <div class="flex flex-wrap justify-center mb-7 mx-1.5" role="tablist">\n      {{~#each this.tabbedGroup~}}\n        <button  onclick="window.location.href=\'#tgp{{@index}}\';"\n                 :class="tab === \'{{this.title}}\' ? \'text-white bg-blue-congress border-blue-congress\' : \'bg-white text-blue-congress border-white hover:border-blue-congress\'" \n                 x-effect="$el.removeAttribute(\'onclick\')"\n                 x-on:click.prevent="tab = \'{{this.title}}\'"  \n                 class="border text-base font-heading py-px px-2 m-1.5" \n                 type="button" \n                 role="tab"\n        >\n          {{this.title}}\n        </button>\n      {{~/each~}}\n    </div>\n    {{~> components/teaser/teaser_logic/teaser_logic ~}}\n  </section>\n</div>\n<div class="grid grid-cols-12 py-6 bg-white sm:px-8 col-full sm:col-main gap-x-6 gap-y-6"> '
+module.exports['components/teaser/teaser_logic/teaser_logic.hbs'] = '{{~#each this.logicItems}}\n    {{~#if this.isSsi~}}        \n        {{#if (isStorybook)}}  \n            {{> components/teaser/teaser_logic/teaser_logic.ssi }} \n        {{else}}\n            {{{this.ssi}}}\n        {{/if}} \n    {{~else}}\n        {{~#with this.includeModel~}}\n            {{~#if (isStorybook)~}}\n                {{~> components/base/load_dynamic _templatePath=../includePath ~}} \n            {{~else~}}\n                {{~> (lookup ../. \'includePath\')~}}\n            {{~/if~}}\n        {{~/with~}}\n    {{~/if~}}\n{{/each~}}'
+module.exports['components/teaser/teaser_logic/teaser_logic.ssi.hbs'] = '{{~#with this.logicItem~}}\n    {{~#with this.includeModel~}}\n        {{~#if (isStorybook)~}}\n            {{~> components/base/load_dynamic _templatePath=../includePath ~}}\n        {{~else~}}\n            {{~> (lookup ../. \'includePath\')~}}\n        {{~/if~}}\n    {{~/with~}}\n{{~/with~}}'

package/build/scripts/build.js

@@ -10,3 +10,4 @@ run(`npx copyfiles \"./src/stories/views/**/*.hbs\" dist --up=2`)
 run(`npx copyfiles \"./src/assets/vendor/**/*.{css,js}\" dist  --up=1`)
 run(`npx copyfiles \"./src/stories/views/**/*.{feature,subfeature}.js\" dist/assets/js  --up=3`)
 run(`npx copyfiles \"./src/assets/**/*.{woff,svg}\" dist --up=1`)
+run(`npx copyfiles \"./src/assets/brand/*/conf/locatags.json\" dist --up=1`)

package/config.js

@@ -12,6 +12,7 @@ module.exports = {
         },
         build: {
             modernizr: 'build/modernizr',
+            gulp: 'build/gulp',
         },
         dist: {
             components: 'src/stories/views/components',

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

@@ -0,0 +1,82 @@
+{
+    "anchor_brandNav": "Übersicht der Marken des HR anspringen",
+    "anchor_headline": "Sprungmarken",
+    "anchor_mainContent": "Inhalt anspringen",
+    "anchor_sectionNav": "Bereichsnavigation anspringen",
+    "anchor_serviceNav": "Servicenavigation anspringen",
+    "anchor_subNav": "Subnavigation des Bereichs {0} anspringen",
+    "close_button_alpine_click": "avStart = false; $dispatch('player_closed',{playerId: {0}})",
+
+    "comment_anchor_1": "zu den ",
+    "comment_anchor_2": " Kommentaren des Artikels springen",
+    "comment_label_text": "Kommentar",
+    "comment_label_text_many": "Kommentare",
+    "date_simple_at": "{0} Uhr",
+    "feature_box_anchor": "Livestream Player anspringen",
+    "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.",
+    "label_analysis": "Analyse",
+    "label_audio": "Audio",
+    "label_audio_event_livestream": "Livestream",
+    "label_blog": "Blog",
+    "label_bildungsangebot": "Bildungsangebot",
+    "label_breakingnews": "+++ Eilmeldung +++",
+    "label_der-tag-in-hessen": "Der Tag in Hessen",
+    "label_buliticker": "Bundesliga-Ticker",
+    "label_comment": "Meinung",
+    "label_download": "Download",
+    "label_fragen_und_antworten": "Fragen & Antworten",
+    "label_gallery": "Bildergalerie",
+    "label_glosse": "Glosse",
+    "label_hessen-am-morgen": "Hessen am Morgen",
+    "label_how_to": "How To",
+    "label_infografik": "Infografik",
+    "label_interaktiv": "Interaktiv",
+    "label_live": "Live",
+    "label_livechat": "Livechat",
+    "label_liveticker": "Liveticker",
+    "label_live-lounge": "Live Lounge",
+    "label_live-radio-play": "Live Hörspiel",
+    "label_podcast": "Podcast",
+    "label_pressemitteilung": "Pressemitteilung",
+    "label_program": "Sendung",
+    "label_social-tv": "Social TV",
+    "label_ticker": "Ticker",
+    "label_video": "Video",
+    "label_video_livestream": "Livestream",
+    "label_voting": "Voting",
+    "label_cinema": "Kino",
+    "label_cabaret": "Kabarett",
+    "label_concert": "Konzert",
+    "label_congress": "Kongress",
+    "label_cycling-tour": "Radtour",
+    "label_dance": "Tanz",
+    "label_discussion": "Diskussion",
+    "label_education": "Education",
+    "label_event": "Veranstaltung",
+    "label_eventtag": "Konzertreihe",
+    "label_exhibition": "Ausstellung",
+    "label_festival": "Festival",
+    "label_fashion": "Fashion",
+    "label_gala": "Gala",
+    "label_guide": "Führung",
+    "label_hear-feast": "Hörfest",
+    "label_knowledge": "Wissen",
+    "label_literature": "Literatur",
+    "label_matinee": "Matinée",
+    "label_musical": "Musical",
+    "label_musicfestival": "Music Festival",
+    "label_opera": "Oper",
+    "label_party": "Party",
+    "label_performance": "Performance",
+    "label_presentation": "Vortrag",
+    "label_publicviewing": "Public Viewing",
+    "label_reading": "Lesung",
+    "label_satire": "Satire",
+    "label_small-art": "Kleinkunst",
+    "label_sports": "Sport",
+    "label_talk": "Talk",
+    "search_input_aria_submit": "Suche starten",
+    "search_input_placeholder": "Ort oder Thema suchen"
+}

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

@@ -0,0 +1,3 @@
+{
+    "header_homepage_link_title": "Startseite hessenschau . d e"
+}

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

@@ -0,0 +1,3 @@
+{
+    "header_homepage_link_title": "Startseite hr . d e"
+}

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

@@ -0,0 +1,3 @@
+{
+    "header_homepage_link_title": "Startseite hr-bigband . d e"
+}

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

@@ -0,0 +1,3 @@
+{
+    "header_homepage_link_title": "Startseite hr-fernsehen . d e"
+}

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

@@ -0,0 +1,3 @@
+{
+    "header_homepage_link_title": "Startseite hr-inforadio . d e"
+}

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

@@ -0,0 +1,3 @@
+{
+    "header_homepage_link_title": "Startseite hr-rundfunkrat . d e"
+}

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

@@ -0,0 +1,3 @@
+{
+    "header_homepage_link_title": "Startseite hr-sinfonieorchester . d e"
+}

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

@@ -0,0 +1,3 @@
+{
+    "header_homepage_link_title": "Startseite hr-werbung . d e"
+}

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

@@ -0,0 +1,3 @@
+{
+    "header_homepage_link_title": "Startseite hr1 . d e"
+}