hr-design-system-handlebars 1.76.0 → 1.77.0

package/CHANGELOG.md

@@ -1,3 +1,15 @@
+# v1.77.0 (Wed Jul 03 2024)
+
+#### 🚀 Enhancement
+
+- DPE-3187 - Abstand der Breadcrumb anpassen [#979](https://github.com/mumprod/hr-design-system-handlebars/pull/979) ([@vascoeduardo](https://github.com/vascoeduardo))
+
+#### Authors: 1
+
+- Vasco ([@vascoeduardo](https://github.com/vascoeduardo))
+
+---
+
 # v1.76.0 (Wed Jul 03 2024)
 
 #### 🚀 Enhancement

package/dist/assets/index.css

@@ -2662,6 +2662,10 @@ article.indexTextDS .indexTextHighlighted .link {
   padding-left: 0.375rem;
   padding-right: 0.375rem;
 }
+.px-10 {
+  padding-left: 2.5rem;
+  padding-right: 2.5rem;
+}
 .px-2 {
   padding-left: 0.5rem;
   padding-right: 0.5rem;
@@ -2690,14 +2694,6 @@ article.indexTextDS .indexTextHighlighted .link {
   padding-left: 1.5rem;
   padding-right: 1.5rem;
 }
-.px-9 {
-  padding-left: 2.25rem;
-  padding-right: 2.25rem;
-}
-.px-9\.5 {
-  padding-left: 2.375rem;
-  padding-right: 2.375rem;
-}
 .py-0 {
   padding-top: 0px;
   padding-bottom: 0px;
@@ -3381,7 +3377,7 @@ article.indexTextDS .indexTextHighlighted .link {
   border-bottom-color: var(--color-secondary-ds);
 }
 .counter-reset {
-  counter-reset: cnt1719999527390;
+  counter-reset: cnt1720016322748;
 }
 .hyphens-auto {
   -webkit-hyphens: auto;
@@ -3779,7 +3775,7 @@ article.indexTextDS .indexTextHighlighted .link {
   --tw-ring-color: rgba(255, 255, 255, 0.5);
 }
 .-ordered {
-  counter-increment: cnt1719999527390 1;
+  counter-increment: cnt1720016322748 1;
 }
 .-ordered::before {
   position: absolute;
@@ -3795,7 +3791,7 @@ article.indexTextDS .indexTextHighlighted .link {
   letter-spacing: .0125em;
   --tw-text-opacity: 1;
   color: rgba(0, 0, 0, var(--tw-text-opacity));
-  content: counter(cnt1719999527390);
+  content: counter(cnt1720016322748);
 }
 /*! ****************************/
 /*! DataPolicy stuff           */
@@ -6279,6 +6275,11 @@ ul.restrictedToTwo li:nth-of-type(1n + 2) .timelineBorder {
     padding-right: 0px;
   }
 
+  .sm\:px-10 {
+    padding-left: 2.5rem;
+    padding-right: 2.5rem;
+  }
+
   .sm\:px-11 {
     padding-left: 2.75rem;
     padding-right: 2.75rem;
@@ -6833,6 +6834,11 @@ ul.restrictedToTwo li:nth-of-type(1n + 2) .timelineBorder {
     padding-right: 0px;
   }
 
+  .md\:px-10 {
+    padding-left: 2.5rem;
+    padding-right: 2.5rem;
+  }
+
   .md\:px-4 {
     padding-left: 1rem;
     padding-right: 1rem;
@@ -6843,16 +6849,6 @@ ul.restrictedToTwo li:nth-of-type(1n + 2) .timelineBorder {
     padding-right: 1.25rem;
   }
 
-  .md\:px-9 {
-    padding-left: 2.25rem;
-    padding-right: 2.25rem;
-  }
-
-  .md\:px-9\.5 {
-    padding-left: 2.375rem;
-    padding-right: 2.375rem;
-  }
-
   .md\:py-0 {
     padding-top: 0px;
     padding-bottom: 0px;
@@ -7538,16 +7534,6 @@ ul.restrictedToTwo li:nth-of-type(1n + 2) .timelineBorder {
     padding-right: 1rem;
   }
 
-  .lg\:px-9 {
-    padding-left: 2.25rem;
-    padding-right: 2.25rem;
-  }
-
-  .lg\:px-9\.5 {
-    padding-left: 2.375rem;
-    padding-right: 2.375rem;
-  }
-
   .lg\:py-0 {
     padding-top: 0px;
     padding-bottom: 0px;

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

@@ -1,6 +1,6 @@
 <footer class="relative grid justify-center w-full text-base border-t grid-page ui-test-footer pb-footer-padding-bottom text-footer-text print:hidden bg-footer-bg border-footer-border js-pageFooter" role="contentinfo" itemscope="itemscope" itemtype="http://schema.org/WPFooter" >
     <div class="absolute top-feature-box-height" x-data x-intersect="$store.footerIsVisible = true" x-intersect:leave="$store.footerIsVisible = false"></div>
-    <div class="col-full sm:col-main md:px-9.5">
+    <div class="col-full sm:col-main md:px-10">
         <span class="hidden">Footer Navigation</span>
                 
         <div class="flex flex-wrap justify-start list-none">

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

@@ -1,6 +1,6 @@
 </div>
 <div class="grid col-full grid-page my-5 md:my-7{{inline-switch _backgroundColor '["1","2"]' '[" bg-gray-concrete"," bg-orange-bridesmaid"]'}}">
-    <section class="grid grid-cols-12 py-5 md:py-7 sm:px-9.5 col-full sm:col-main gap-x-6 gap-y-9">
+    <section class="grid grid-cols-12 py-5 md:py-7 sm:px-10 col-full sm:col-main gap-x-6 gap-y-9">
         <div class="grid content-start grid-cols-12 col-span-12 gap-x-6 gap-y-6">
             {{> @partial-block }}
         </div>

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

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

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

@@ -1 +1 @@
-grid grid-cols-12 bg-white pt-5 md:pt-7 sm:px-9.5 col-full sm:col-main gap-x-6 gap-y-10 md:gap-y-14
+grid grid-cols-12 bg-white pt-5 md:pt-7 sm:px-10 col-full sm:col-main gap-x-6 gap-y-10 md:gap-y-14

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

@@ -1,4 +1,4 @@
-<div class="grid-cols-12 px-5 lg:px-9.5 col-full sm:col-main">
+<div class="grid-cols-12 px-5 lg:px-10 col-full sm:col-main">
     {{#> components/horizontal_scroll_container/horizontal_scroll_container _viewport="xs" _bgcolor="var(--color-brandnavigation-bg)" _iconcolor="primary" }}
         <nav class="flex w-full text-xs list-none text-grey-scorpion">
                 <span id="brandNavHeading" class="hidden">Navigation der Marken des Hessischen Rundfunks</span>

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

@@ -40,7 +40,7 @@
             {{/if}}          
         {{/if}}
         
-        <div class="{{#if this.showAsFlyout}}lg:flex lg:flex-row -columnCount--{{this.columnCount}} lg:divide-x lg:divide-gray-200 {{else}} {{#if ../this.selected}} lg:grid-cols-12 lg:px-9.5 col-main  {{/if}}{{/if}}">
+        <div class="{{#if this.showAsFlyout}}lg:flex lg:flex-row -columnCount--{{this.columnCount}} lg:divide-x lg:divide-gray-200 {{else}} {{#if ../this.selected}} lg:grid-cols-12 lg:px-10 col-main  {{/if}}{{/if}}">
             {{#if this.showAsFlyout}}
                 {{#each this.columns}}
                     {{> components/site_header/navigation_flyout/navigation_flyout_column _count=../this.columnCount _navtype=../../_navigationType _parent=../../_parent _flyout=true~}}

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

@@ -1,6 +1,6 @@
 <div 
     id="sectionNav"
-    class="w-full px-0 mt-10 sb-section-navigation md:mt-0 lg:grid-cols-12 lg:px-9.5 lg:col-main " 
+    class="w-full px-0 mt-10 sb-section-navigation md:mt-0 lg:grid-cols-12 lg:px-10 lg:col-main " 
     x-effect="$el.setAttribute('aria-expanded',  $store.burgeropen || $screen('lg')); $el.setAttribute('aria-hidden', ! ($store.burgeropen || $screen('lg')))"
 >
 {{#> components/horizontal_scroll_container/horizontal_scroll_container _viewport="lg" _bgcolor="var(--color-navigation-bg)" _iconcolor="navigation-icons"}}

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

@@ -1,5 +1,5 @@
 <div id="serviceNavMainContainer" 
-    class="flex w-full h-10 md:h-12 lg:h-16 z-110 pl-5 pr-3 md:pr-0 lg:px-9.5 col-full sm:col-main">
+    class="flex w-full h-10 pl-5 pr-3 md:h-12 lg:h-16 z-110 md:pr-0 lg:px-10 col-full sm:col-main">
     <span id="serviceNavHeadline" class="hidden print:hidden">Service Navigation</span>
     <div id="serviceLogoWrapper"  
         class="flex items-center order-1 w-full bg-navigation-bg md:h-12 lg:h-16 md:w-1/2 md:max-w-1/2 lg:w-1/4 lg:max-w-1/4">

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

@@ -2,7 +2,7 @@
     x-show="tab === '{{this.groupTitle}}'"
     class="pb-10"
 >
-    <div class="grid items-start content-start grid-cols-12 px-0 sm:px-9.5 colspan-12 gap-x-6 gap-y-6">
+    <div class="grid items-start content-start grid-cols-12 px-0 sm:px-10 colspan-12 gap-x-6 gap-y-6">
         {{~> components/teaser/teaser_logic/teaser_logic ~}}
     </div>
     {{~#if this.link~}}

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

@@ -1,12 +1,12 @@
 {{#with this.teaser}}
-    <div class="grid grid-page relative">
+    <div class="relative grid grid-page">
         <article class="col-full grid grid-page relative overflow-hidden before:content-[''] before:absolute before:h-5 before:shadow-stage before:z-10 before:-top-5 before:-left-2.5 before:-right-2.5 after:content-[''] after:absolute after:bottom-0 after:col-full after:w-full after:block after:h-5 after:bg-stagePrimary lg:after:relative">
             {{#unless this.isWide}}
                 <div class="absolute w-15/12">
                     {{> components/base/image/responsive_image this.teaserImage _type="stage" _variant="default" _addClassImg="w-full blur-2xl"}}
                 </div>   
             {{/unless}}
-            <div class="col-full lg:col-main lg:px-9.5 relative">
+            <div class="relative col-full lg:col-main lg:px-10">
                 <div class="relative max-h-stage overflow-visible before:content-[''] before:block before:w-full before:pt-3/4 sm:before:pt-stage">
                     <div class="{{#if this.isWide}}lg:absolute lg:h-full lg:w-full-hd lg:left-1/2 lg:top-0 lg:-ml-240{{else}}absolute h-full w-full top-0{{/if}}">
                         {{#if this.isWide}}

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

@@ -1,6 +1,6 @@
 <footer class="relative grid justify-center w-full text-base border-t grid-page ui-test-footer pb-footer-padding-bottom text-footer-text print:hidden bg-footer-bg border-footer-border js-pageFooter" role="contentinfo" itemscope="itemscope" itemtype="http://schema.org/WPFooter" >
     <div class="absolute top-feature-box-height" x-data x-intersect="$store.footerIsVisible = true" x-intersect:leave="$store.footerIsVisible = false"></div>
-    <div class="col-full sm:col-main md:px-9.5">
+    <div class="col-full sm:col-main md:px-10">
         <span class="hidden">Footer Navigation</span>
                 
         <div class="flex flex-wrap justify-start list-none">

package/dist/views_static/components/grid/grid_group_highlight.hbs

@@ -1,6 +1,6 @@
 </div>
 <div class="grid col-full grid-page my-5 md:my-7{{inline-switch _backgroundColor '["1","2"]' '[" bg-gray-concrete"," bg-orange-bridesmaid"]'}}">
-    <section class="grid grid-cols-12 py-5 md:py-7 sm:px-9.5 col-full sm:col-main gap-x-6 gap-y-9">
+    <section class="grid grid-cols-12 py-5 md:py-7 sm:px-10 col-full sm:col-main gap-x-6 gap-y-9">
         <div class="grid content-start grid-cols-12 col-span-12 gap-x-6 gap-y-6">
             {{> @partial-block }}
         </div>

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

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

package/dist/views_static/components/grid/grid_group_wrapper_classes.hbs

@@ -1 +1 @@
-grid grid-cols-12 bg-white pt-5 md:pt-7 sm:px-9.5 col-full sm:col-main gap-x-6 gap-y-10 md:gap-y-14
+grid grid-cols-12 bg-white pt-5 md:pt-7 sm:px-10 col-full sm:col-main gap-x-6 gap-y-10 md:gap-y-14

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

@@ -1,4 +1,4 @@
-<div class="grid-cols-12 px-5 lg:px-9.5 col-full sm:col-main">
+<div class="grid-cols-12 px-5 lg:px-10 col-full sm:col-main">
     {{#> components/horizontal_scroll_container/horizontal_scroll_container _viewport="xs" _bgcolor="var(--color-brandnavigation-bg)" _iconcolor="primary" }}
         <nav class="flex w-full text-xs list-none text-grey-scorpion">
                 <span id="brandNavHeading" class="hidden">Navigation der Marken des Hessischen Rundfunks</span>

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

@@ -40,7 +40,7 @@
             {{/if}}          
         {{/if}}
         
-        <div class="{{#if this.showAsFlyout}}lg:flex lg:flex-row -columnCount--{{this.columnCount}} lg:divide-x lg:divide-gray-200 {{else}} {{#if ../this.selected}} lg:grid-cols-12 lg:px-9.5 col-main  {{/if}}{{/if}}">
+        <div class="{{#if this.showAsFlyout}}lg:flex lg:flex-row -columnCount--{{this.columnCount}} lg:divide-x lg:divide-gray-200 {{else}} {{#if ../this.selected}} lg:grid-cols-12 lg:px-10 col-main  {{/if}}{{/if}}">
             {{#if this.showAsFlyout}}
                 {{#each this.columns}}
                     {{> components/site_header/navigation_flyout/navigation_flyout_column _count=../this.columnCount _navtype=../../_navigationType _parent=../../_parent _flyout=true~}}

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

@@ -1,6 +1,6 @@
 <div 
     id="sectionNav"
-    class="w-full px-0 mt-10 sb-section-navigation md:mt-0 lg:grid-cols-12 lg:px-9.5 lg:col-main " 
+    class="w-full px-0 mt-10 sb-section-navigation md:mt-0 lg:grid-cols-12 lg:px-10 lg:col-main " 
     x-effect="$el.setAttribute('aria-expanded',  $store.burgeropen || $screen('lg')); $el.setAttribute('aria-hidden', ! ($store.burgeropen || $screen('lg')))"
 >
 {{#> components/horizontal_scroll_container/horizontal_scroll_container _viewport="lg" _bgcolor="var(--color-navigation-bg)" _iconcolor="navigation-icons"}}

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

@@ -1,5 +1,5 @@
 <div id="serviceNavMainContainer" 
-    class="flex w-full h-10 md:h-12 lg:h-16 z-110 pl-5 pr-3 md:pr-0 lg:px-9.5 col-full sm:col-main">
+    class="flex w-full h-10 pl-5 pr-3 md:h-12 lg:h-16 z-110 md:pr-0 lg:px-10 col-full sm:col-main">
     <span id="serviceNavHeadline" class="hidden print:hidden">Service Navigation</span>
     <div id="serviceLogoWrapper"  
         class="flex items-center order-1 w-full bg-navigation-bg md:h-12 lg:h-16 md:w-1/2 md:max-w-1/2 lg:w-1/4 lg:max-w-1/4">

package/dist/views_static/components/teaser/tabbox/group_tabbox.hbs

@@ -2,7 +2,7 @@
     x-show="tab === '{{this.groupTitle}}'"
     class="pb-10"
 >
-    <div class="grid items-start content-start grid-cols-12 px-0 sm:px-9.5 colspan-12 gap-x-6 gap-y-6">
+    <div class="grid items-start content-start grid-cols-12 px-0 sm:px-10 colspan-12 gap-x-6 gap-y-6">
         {{~> components/teaser/teaser_logic/teaser_logic ~}}
     </div>
     {{~#if this.link~}}

package/dist/views_static/components/teaser/teaser_stage.hbs

@@ -1,12 +1,12 @@
 {{#with this.teaser}}
-    <div class="grid grid-page relative">
+    <div class="relative grid grid-page">
         <article class="col-full grid grid-page relative overflow-hidden before:content-[''] before:absolute before:h-5 before:shadow-stage before:z-10 before:-top-5 before:-left-2.5 before:-right-2.5 after:content-[''] after:absolute after:bottom-0 after:col-full after:w-full after:block after:h-5 after:bg-stagePrimary lg:after:relative">
             {{#unless this.isWide}}
                 <div class="absolute w-15/12">
                     {{> components/base/image/responsive_image this.teaserImage _type="stage" _variant="default" _addClassImg="w-full blur-2xl"}}
                 </div>   
             {{/unless}}
-            <div class="col-full lg:col-main lg:px-9.5 relative">
+            <div class="relative col-full lg:col-main lg:px-10">
                 <div class="relative max-h-stage overflow-visible before:content-[''] before:block before:w-full before:pt-3/4 sm:before:pt-stage">
                     <div class="{{#if this.isWide}}lg:absolute lg:h-full lg:w-full-hd lg:left-1/2 lg:top-0 lg:-ml-240{{else}}absolute h-full w-full top-0{{/if}}">
                         {{#if this.isWide}}

package/package.json

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

package/src/stories/views/components/footer/page_footer.hbs

@@ -1,6 +1,6 @@
 <footer class="relative grid justify-center w-full text-base border-t grid-page ui-test-footer pb-footer-padding-bottom text-footer-text print:hidden bg-footer-bg border-footer-border js-pageFooter" role="contentinfo" itemscope="itemscope" itemtype="http://schema.org/WPFooter" >
     <div class="absolute top-feature-box-height" x-data x-intersect="$store.footerIsVisible = true" x-intersect:leave="$store.footerIsVisible = false"></div>
-    <div class="col-full sm:col-main md:px-9.5">
+    <div class="col-full sm:col-main md:px-10">
         <span class="hidden">Footer Navigation</span>
                 
         <div class="flex flex-wrap justify-start list-none">

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

@@ -1,6 +1,6 @@
 </div>
 <div class="grid col-full grid-page my-5 md:my-7{{inline-switch _backgroundColor '["1","2"]' '[" bg-gray-concrete"," bg-orange-bridesmaid"]'}}">
-    <section class="grid grid-cols-12 py-5 md:py-7 sm:px-9.5 col-full sm:col-main gap-x-6 gap-y-9">
+    <section class="grid grid-cols-12 py-5 md:py-7 sm:px-10 col-full sm:col-main gap-x-6 gap-y-9">
         <div class="grid content-start grid-cols-12 col-span-12 gap-x-6 gap-y-6">
             {{> @partial-block }}
         </div>

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

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

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

@@ -1 +1 @@
-grid grid-cols-12 bg-white pt-5 md:pt-7 sm:px-9.5 col-full sm:col-main gap-x-6 gap-y-10 md:gap-y-14
+grid grid-cols-12 bg-white pt-5 md:pt-7 sm:px-10 col-full sm:col-main gap-x-6 gap-y-10 md:gap-y-14

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

@@ -1,4 +1,4 @@
-<div class="grid-cols-12 px-5 lg:px-9.5 col-full sm:col-main">
+<div class="grid-cols-12 px-5 lg:px-10 col-full sm:col-main">
     {{#> components/horizontal_scroll_container/horizontal_scroll_container _viewport="xs" _bgcolor="var(--color-brandnavigation-bg)" _iconcolor="primary" }}
         <nav class="flex w-full text-xs list-none text-grey-scorpion">
                 <span id="brandNavHeading" class="hidden">Navigation der Marken des Hessischen Rundfunks</span>

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

@@ -40,7 +40,7 @@
             {{/if}}          
         {{/if}}
         
-        <div class="{{#if this.showAsFlyout}}lg:flex lg:flex-row -columnCount--{{this.columnCount}} lg:divide-x lg:divide-gray-200 {{else}} {{#if ../this.selected}} lg:grid-cols-12 lg:px-9.5 col-main  {{/if}}{{/if}}">
+        <div class="{{#if this.showAsFlyout}}lg:flex lg:flex-row -columnCount--{{this.columnCount}} lg:divide-x lg:divide-gray-200 {{else}} {{#if ../this.selected}} lg:grid-cols-12 lg:px-10 col-main  {{/if}}{{/if}}">
             {{#if this.showAsFlyout}}
                 {{#each this.columns}}
                     {{> components/site_header/navigation_flyout/navigation_flyout_column _count=../this.columnCount _navtype=../../_navigationType _parent=../../_parent _flyout=true~}}

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

@@ -1,6 +1,6 @@
 <div 
     id="sectionNav"
-    class="w-full px-0 mt-10 sb-section-navigation md:mt-0 lg:grid-cols-12 lg:px-9.5 lg:col-main " 
+    class="w-full px-0 mt-10 sb-section-navigation md:mt-0 lg:grid-cols-12 lg:px-10 lg:col-main " 
     x-effect="$el.setAttribute('aria-expanded',  $store.burgeropen || $screen('lg')); $el.setAttribute('aria-hidden', ! ($store.burgeropen || $screen('lg')))"
 >
 {{#> components/horizontal_scroll_container/horizontal_scroll_container _viewport="lg" _bgcolor="var(--color-navigation-bg)" _iconcolor="navigation-icons"}}

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

@@ -1,5 +1,5 @@
 <div id="serviceNavMainContainer" 
-    class="flex w-full h-10 md:h-12 lg:h-16 z-110 pl-5 pr-3 md:pr-0 lg:px-9.5 col-full sm:col-main">
+    class="flex w-full h-10 pl-5 pr-3 md:h-12 lg:h-16 z-110 md:pr-0 lg:px-10 col-full sm:col-main">
     <span id="serviceNavHeadline" class="hidden print:hidden">Service Navigation</span>
     <div id="serviceLogoWrapper"  
         class="flex items-center order-1 w-full bg-navigation-bg md:h-12 lg:h-16 md:w-1/2 md:max-w-1/2 lg:w-1/4 lg:max-w-1/4">

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

@@ -2,7 +2,7 @@
     x-show="tab === '{{this.groupTitle}}'"
     class="pb-10"
 >
-    <div class="grid items-start content-start grid-cols-12 px-0 sm:px-9.5 colspan-12 gap-x-6 gap-y-6">
+    <div class="grid items-start content-start grid-cols-12 px-0 sm:px-10 colspan-12 gap-x-6 gap-y-6">
         {{~> components/teaser/teaser_logic/teaser_logic ~}}
     </div>
     {{~#if this.link~}}

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

@@ -1,12 +1,12 @@
 {{#with this.teaser}}
-    <div class="grid grid-page relative">
+    <div class="relative grid grid-page">
         <article class="col-full grid grid-page relative overflow-hidden before:content-[''] before:absolute before:h-5 before:shadow-stage before:z-10 before:-top-5 before:-left-2.5 before:-right-2.5 after:content-[''] after:absolute after:bottom-0 after:col-full after:w-full after:block after:h-5 after:bg-stagePrimary lg:after:relative">
             {{#unless this.isWide}}
                 <div class="absolute w-15/12">
                     {{> components/base/image/responsive_image this.teaserImage _type="stage" _variant="default" _addClassImg="w-full blur-2xl"}}
                 </div>   
             {{/unless}}
-            <div class="col-full lg:col-main lg:px-9.5 relative">
+            <div class="relative col-full lg:col-main lg:px-10">
                 <div class="relative max-h-stage overflow-visible before:content-[''] before:block before:w-full before:pt-3/4 sm:before:pt-stage">
                     <div class="{{#if this.isWide}}lg:absolute lg:h-full lg:w-full-hd lg:left-1/2 lg:top-0 lg:-ml-240{{else}}absolute h-full w-full top-0{{/if}}">
                         {{#if this.isWide}}