hr-design-system-handlebars 1.63.4 → 1.63.6

package/dist/assets/index.css

@@ -1088,15 +1088,15 @@ article.indexTextDS .indexTextHighlighted .link {
 .top-0\.5 {
   top: 0.125rem;
 }
-.top-1 {
-  top: 0.25rem;
-}
 .top-1\/2 {
   top: 50%;
 }
 .top-10 {
   top: 2.5rem;
 }
+.top-40 {
+  top: 10rem;
+}
 .top-8 {
   top: 2rem;
 }
@@ -1446,12 +1446,18 @@ article.indexTextDS .indexTextHighlighted .link {
 .mt-4\.5 {
   margin-top: 1.125rem;
 }
+.mt-40 {
+  margin-top: 10rem;
+}
 .mt-5 {
   margin-top: 1.25rem;
 }
 .mt-6 {
   margin-top: 1.5rem;
 }
+.mt-60 {
+  margin-top: 15rem;
+}
 .mt-7 {
   margin-top: 1.75rem;
 }
@@ -2527,9 +2533,6 @@ article.indexTextDS .indexTextHighlighted .link {
 .fill-blue-midnight {
   fill: #023770;
 }
-.fill-button {
-  fill: var(--color-button);
-}
 .fill-content-nav {
   fill: #005293;
   fill: var(--color-content-nav);
@@ -2579,9 +2582,6 @@ article.indexTextDS .indexTextHighlighted .link {
 .p-2 {
   padding: 0.5rem;
 }
-.p-3 {
-  padding: 0.75rem;
-}
 .p-4 {
   padding: 1rem;
 }
@@ -3321,7 +3321,7 @@ article.indexTextDS .indexTextHighlighted .link {
   border-bottom-color: var(--color-secondary-ds);
 }
 .counter-reset {
-  counter-reset: cnt1712587592313;
+  counter-reset: cnt1712841771262;
 }
 .hyphens-auto {
   -webkit-hyphens: auto;
@@ -3542,6 +3542,12 @@ article.indexTextDS .indexTextHighlighted .link {
 .col-full {
         grid-column: full;
     }
+.hideGridGroupIfEmpty[\:not-has\(section\)] {
+        display: none;
+    }
+.hideGridGroupIfEmpty:not(.hideGridGroupIfEmpty:has(section)) {
+        display: none;
+    }
 .-currentBrand::before {
   --tw-content: '';
   content: var(--tw-content);
@@ -3694,7 +3700,7 @@ article.indexTextDS .indexTextHighlighted .link {
   --tw-ring-color: rgba(255, 255, 255, 0.5);
 }
 .-ordered {
-  counter-increment: cnt1712587592313 1;
+  counter-increment: cnt1712841771262 1;
 }
 .-ordered::before {
   position: absolute;
@@ -3710,7 +3716,7 @@ article.indexTextDS .indexTextHighlighted .link {
   letter-spacing: .0125em;
   --tw-text-opacity: 1;
   color: rgba(0, 0, 0, var(--tw-text-opacity));
-  content: counter(cnt1712587592313);
+  content: counter(cnt1712841771262);
 }
 /*! ****************************/
 /*! DataPolicy stuff           */
@@ -5166,22 +5172,6 @@ article.indexTextDS .indexTextHighlighted .link {
   --tw-bg-opacity: 1;
   background-color: rgba(203, 213, 225, var(--tw-bg-opacity));
 }
-.hover\:fill-\[\#0f1419\]:hover {
-  fill: #0f1419;
-}
-.hover\:fill-\[\#3b5999\]:hover {
-  fill: #3b5999;
-}
-.hover\:fill-\[\#4dc247\]:hover {
-  fill: #4dc247;
-}
-.hover\:fill-black:hover {
-  fill: #000000;
-}
-.hover\:fill-link-dark:hover {
-  fill: #006eb7;
-  fill: var(--color-link-dark);
-}
 .hover\:fill-media-button:hover {
   fill: #276b9e;
   fill: var(--color-media-button);
@@ -5275,9 +5265,6 @@ article.indexTextDS .indexTextHighlighted .link {
 .group:hover .group-hover\:static {
   position: static;
 }
-.group:hover .group-hover\:fill-button--dark {
-  fill: var(--color-button--dark);
-}
 .group:hover .group-hover\:fill-media-button {
   fill: #276b9e;
   fill: var(--color-media-button);
@@ -6061,6 +6048,11 @@ article.indexTextDS .indexTextHighlighted .link {
     margin-right: 1.25rem;
   }
 
+  .md\:my-7 {
+    margin-top: 1.75rem;
+    margin-bottom: 1.75rem;
+  }
+
   .md\:-mt-40 {
     margin-top: -10rem;
   }
@@ -6081,6 +6073,10 @@ article.indexTextDS .indexTextHighlighted .link {
     margin-bottom: 1.25rem;
   }
 
+  .md\:mb-7 {
+    margin-bottom: 1.75rem;
+  }
+
   .md\:mb-8 {
     margin-bottom: 2rem;
   }
@@ -6381,6 +6377,11 @@ article.indexTextDS .indexTextHighlighted .link {
     padding-bottom: 0px;
   }
 
+  .md\:py-7 {
+    padding-top: 1.75rem;
+    padding-bottom: 1.75rem;
+  }
+
   .md\:pl-0 {
     padding-left: 0px;
   }
@@ -7315,20 +7316,20 @@ article.indexTextDS .indexTextHighlighted .link {
 }
 @media (min-width: 1040px) {
 
-  .socialShareDesktop\:bottom-auto {
-    bottom: auto;
+  .socialShareDesktop\:-left-2 {
+    left: -0.5rem;
   }
 
-  .socialShareDesktop\:left-1 {
-    left: 0.25rem;
+  .socialShareDesktop\:bottom-auto {
+    bottom: auto;
   }
 
   .socialShareDesktop\:top-0 {
     top: 0px;
   }
 
-  .socialShareDesktop\:top-5 {
-    top: 1.25rem;
+  .socialShareDesktop\:top-32 {
+    top: 8rem;
   }
 }
 .\[\&\:has\(\+\.-hideOnMobile\)\]\:order-1[\:has\(\%2B.-hideOnMobile\)] {

package/dist/assets/js/alpine.js

@@ -39,6 +39,9 @@ Alpine.store('serviceID', {
 Alpine.store('navIsVisible', true)
 Alpine.store('subNavIsVisible', false)
 Alpine.store('footerIsVisible', false)
+Alpine.store('globalPercent', {
+    current: '0'
+})
 
 // Initialization of data handlers
 Alpine.data('mainNavigationHandler', mainNavigationHandler)

package/dist/assets/js/components/site_header/mainNavigationHandler.alpine.js

@@ -34,6 +34,7 @@ export default () => ({
             let winScroll = document.body.scrollTop || document.documentElement.scrollTop
             winScroll > lastScrollTop ? (this.scrollingDown = true) : (this.scrollingDown = false)
             this.percent = Math.round((winScroll / height) * 100)
+            this.$store.globalPercent.current = this.percent
             lastScrollTop = winScroll
             this.$store.navIsVisible = !this.isNavHidden()
             this.$store.subNavIsVisible = !this.isSubNavHidden()

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

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

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

@@ -2,4 +2,4 @@
 <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">
     {{> @partial-block }}
 </section>
-<div class="{{> components/grid/grid_group_wrapper_classes }}">
+<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-6 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-9.5 col-full sm:col-main gap-x-6 gap-y-10 md:gap-y-14

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

@@ -0,0 +1,36 @@
+<!DOCTYPE html>
+<html 
+    class="no-js no-js-burgerMenu preload noMicroInteraction"
+    data-theme="hessenschau" 
+    lang="de"
+>
+    <head>
+
+        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
+        <meta http-equiv="X-UA-Compatible" content="IE=Edge"/>
+        <title>hessenschau.de | Nachrichten aus Hessen</title>
+        <meta name="application-name" content="hessenschau.de" />
+        <meta name="copyright" content="Hessischer Rundfunk, Frankfurt, Germany" />
+        <meta name="author" content="hessenschau.de, Frankfurt, Germany" />
+        <meta name="publisher" content="hessenschau.de" />
+        <meta name="language" content="Deutsch" />
+
+    </head>
+
+    <body itemscope itemtype="http://schema.org/WebPage">
+    {{> components/site_header/header }}
+        <div class="js-pageSwap">
+            <main 
+                onclick="void(0)" 
+                role="main" 
+                id="content"
+                class="flex flex-col items-center justify-center"
+            >
+           
+            {{> components/page/story/story_article }} 
+            {{> components/top_button/top_button }}
+            </main>
+
+        </div>
+    </body>
+</html>

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

@@ -2,6 +2,7 @@
     <header class="print:hidden relative z-110 {{#if _useSticky}}{{#if this.hasOpenSubNavigation}}lg:h-header-lg-big {{else}}lg:h-header-lg-small {{/if}}{{else}}lg:h-auto {{/if}}md:h-header-md h-header-sm">   
         <div x-data 
             id="headerWrapper"
+            x-ref="headerWrapper"
             @resize.window="resetNav()" 
             :class="shouldBrandNavBeHidden() ? '-mt-[33px] md:-mt-[33px]' : ''  "
             class="{{#if _useSticky }}fixed top-0 left-0{{/if}} flex flex-wrap max-w-full transition-all duration-500 transform font-copy lg:justify-center lg:w-full ">

package/dist/views/components/social_sharing/social_sharing_compact.hbs

@@ -40,28 +40,30 @@
     x-on:focusin.window="! $refs.panel.contains($event.target) && close()"
     x-id="['dropdown-button']"
     class="flex self-center justify-end grow "
-    x-intersect:leave="sharingIsVisible = false"
-    x-intersect:enter="sharingIsVisible = true"
+    x-intersect:leave.margin.-160px.0px.0px.0px="sharingIsVisible = false"
+    x-intersect:enter.margin.-160px.0px.0px.0px="sharingIsVisible = true"
+    
 >
-    <div class="fixed left-1 top-1">
+   {{!-- <div class="fixed left-1 top-40">
         sharingIsVisible:<span x-text="sharingIsVisible" ></span><br>
         open:<span x-text="open" ></span><br>
-        isDesktop:<span x-text="isDesktop" ></span>
-    </div>
+        isDesktop:<span x-text="isDesktop" ></span><br>
+        PercentScrolled:<span x-text="$store.globalPercent.current"></span>
+    </div> --}}
+
     <div :class="{ 'grid grid-page z-100 fixed bottom-feature-box-height socialShareDesktop:bottom-auto socialShareDesktop:top-0 left-0 w-full': !sharingIsVisible }">
         <div class="" :class="{ 'flex justify-start col-full sm:col-main relative': !sharingIsVisible }">
-            <div class="flex gap-3" :class="{ 'bottom-5 socialShareDesktop:top-5 left-5 socialShareDesktop:left-1 flex-col absolute bg-white': !sharingIsVisible }">
+            <div class="flex gap-3" :class="{ 'bg-white w-10 bottom-5 socialShareDesktop:top-32 left-5 shadow-xl socialShareDesktop:-left-2 flex-col absolute': !sharingIsVisible }">
                 <button 
-                    class="order-2 w-8 h-8 ds-button font-heading active:scale-95 hover:scale-105 group"
+                    class="order-2 h-10 p-2 text-white border bg-button ds-button font-heading hover:bg-button--dark hover:border-button--dark active:bg-button--dark group"
                     x-show="!isDesktop"
                     x-ref="button"
                     x-on:click="toggle()"
                     :aria-expanded="open"
                     :aria-controls="$id('dropdown-button')">
-                    {{> components/base/image/icon _addClass="w-full h-full fill-button group-hover:fill-button--dark" _icon="teilen-button" _iconmap="icons" }}
+                    {{> components/base/image/icon _addClass="w-5 h-5 fill-current group-hover:fill-link--dark" _icon="sharing" _iconmap="icons" }}
                 </button> 
 
-
                 <!-- Panel -->
                 <div
                     x-ref="panel"
@@ -69,7 +71,8 @@
                     x-transition.origin.right
                     x-on:click.outside="close($refs.button)"
                     :id="$id('dropdown-button')"
-                    class="bg-white"
+                    class="p-1 bg-white"
+                    :class="sharingIsVisible ? 'h-8' : 'w-8'}"
                 >
                     <ul class="flex gap-3"  :class="{ 'flex-col': ! sharingIsVisible }">
                         

package/dist/views/components/social_sharing/social_sharing_compact_icons.hbs

@@ -9,7 +9,7 @@
             data-hr-click-tracking='{"settings": [{"type":"uxAction","secondLevelId": "{{this.secondLevelId}}","clickLabel": "socialShareClick::X"}]}'
         {{/with}}
     >
-        {{~> components/base/image/icon _addClass="w-full h-full fill-link hover:fill-[#0f1419] " _icon="x-ds" _iconmap="icons" ~}}
+        {{~> components/base/image/icon _addClass="w-full h-full fill-link hover:scale-105 " _icon="x-ds" _iconmap="icons" ~}}
     </a>
 </li>
 <li class="">
@@ -23,7 +23,7 @@
             data-hr-click-tracking='{"settings": [{"type":"uxAction","secondLevelId": "{{this.secondLevelId}}","clickLabel": "socialShareClick::facebook"}]}'
         {{/with}}
     >
-        {{~> components/base/image/icon _addClass="w-full h-full fill-link hover:fill-[#3b5999] " _icon="facebook-ds" _iconmap="icons" ~}}
+        {{~> components/base/image/icon _addClass="w-full h-full fill-link hover:scale-105" _icon="facebook-ds" _iconmap="icons" ~}}
     </a>
 </li>
 <li class="">
@@ -37,7 +37,7 @@
             data-hr-click-tracking='{"settings": [{"type":"uxAction","secondLevelId": "{{this.secondLevelId}}","clickLabel": "socialShareClick::whatsapp"}]}'
         {{/with}}
     >
-        {{~> components/base/image/icon _addClass="w-full h-full fill-link hover:fill-[#4dc247] " _icon="whatsapp-ds" _iconmap="icons" ~}}
+        {{~> components/base/image/icon _addClass="w-full h-full fill-link hover:scale-105" _icon="whatsapp-ds" _iconmap="icons" ~}}
     </a>
 </li>
 <li class="">
@@ -49,7 +49,7 @@
             data-hr-click-tracking='{"settings": [{"type":"uxAction","secondLevelId": "{{this.secondLevelId}}","clickLabel": "socialShareClick::mailto"}]}'
         {{/with}}
     >
-        {{~> components/base/image/icon _addClass="w-full h-full fill-link hover:fill-black " _icon="kontakt-ds" _iconmap="icons" ~}}
+        {{~> components/base/image/icon _addClass="w-full h-full fill-link hover:scale-105" _icon="kontakt-ds" _iconmap="icons" ~}}
     </a>
 </li>
 <li class="">
@@ -61,6 +61,6 @@
             data-hr-click-tracking='{"settings": [{"type":"uxAction","secondLevelId": "{{this.secondLevelId}}","clickLabel": "socialShareClick::printbutton"}]}'
         {{/with}}
     >
-        {{~> components/base/image/icon _addClass="w-full h-full fill-link hover:fill-link-dark " _icon="copy-ds" _iconmap="icons" ~}}
+        {{~> components/base/image/icon _addClass="w-full h-full fill-link hover:scale-105" _icon="copy-ds" _iconmap="icons" ~}}
     </a>
 </li>

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

@@ -1,7 +1,7 @@
 </div>
 <div 
   x-data="{ tab: '{{this.tabbedGroup.[0].title}}', test:true }"
-  class="grid grid-cols-12 pt-6 mx-0 mb-8 mt-14 col-full md:pt-7 bg-highlight-1 md:rounded-tl-hr md:rounded-br-hr md:col-main gap-x-6 gap-y-6"
+  class="grid grid-cols-12 pt-6 mx-0 mb-5 md:mb-7 mt-14 col-full md:pt-7 bg-highlight-1 md:rounded-tl-hr md:rounded-br-hr md:col-main gap-x-6 gap-y-6"
 >
   <section class="px-0 col-span-full sm:px-8 md:px-0">
     <div class="flex flex-wrap justify-center mx-5 gap-y-3 mb-7 gap-x-2" role="tablist">
@@ -19,4 +19,4 @@
     {{~> components/teaser/teaser_logic/teaser_logic ~}}
   </section>
 </div>
-<div class="{{> components/grid/grid_group_wrapper_classes }}"> 
+<div class="{{> components/grid/grid_group_wrapper_classes }} hideGridGroupIfEmpty"> 

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

@@ -12,7 +12,7 @@
                 x-transition:leave="transition ease-[cubic-bezier(0.68,-0.3,0.32,1)] duration-300 transform absolute"
                 x-transition:leave-start="opacity-100 translate-y-0"
                 x-transition:leave-end="opacity-0 translate-y-12"               
-                class="{{> components/button/utilities/button_base_classes}} {{> components/button/utilities/button_variation_classes _variant="primary"}} -mt-6 z-100 p-3 h-max mr-5 [@media(min-width:1170px)]:-mr-14"
+                class="{{> components/button/utilities/button_base_classes}} {{> components/button/utilities/button_variation_classes _variant="primary"}} -mt-6 z-100 p-2 h-max mr-5 hover:scale-105  [@media(min-width:1170px)]:-mr-14"
                 >
                 {{> components/base/image/icon _icon="arrow-up"  _addClass="w-5 h-5 fill-current dark:fill-link-dark"}}            
             </button>

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

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

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

@@ -2,4 +2,4 @@
 <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">
     {{> @partial-block }}
 </section>
-<div class="{{> components/grid/grid_group_wrapper_classes }}">
+<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-6 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-9.5 col-full sm:col-main gap-x-6 gap-y-10 md:gap-y-14

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

@@ -0,0 +1,36 @@
+<!DOCTYPE html>
+<html 
+    class="no-js no-js-burgerMenu preload noMicroInteraction"
+    data-theme="hessenschau" 
+    lang="de"
+>
+    <head>
+
+        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
+        <meta http-equiv="X-UA-Compatible" content="IE=Edge"/>
+        <title>hessenschau.de | Nachrichten aus Hessen</title>
+        <meta name="application-name" content="hessenschau.de" />
+        <meta name="copyright" content="Hessischer Rundfunk, Frankfurt, Germany" />
+        <meta name="author" content="hessenschau.de, Frankfurt, Germany" />
+        <meta name="publisher" content="hessenschau.de" />
+        <meta name="language" content="Deutsch" />
+
+    </head>
+
+    <body itemscope itemtype="http://schema.org/WebPage">
+    {{> components/site_header/header }}
+        <div class="js-pageSwap">
+            <main 
+                onclick="void(0)" 
+                role="main" 
+                id="content"
+                class="flex flex-col items-center justify-center"
+            >
+           
+            {{> components/page/story/story_article }} 
+            {{> components/top_button/top_button }}
+            </main>
+
+        </div>
+    </body>
+</html>

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

@@ -2,6 +2,7 @@
     <header class="print:hidden relative z-110 {{#if _useSticky}}{{#if this.hasOpenSubNavigation}}lg:h-header-lg-big {{else}}lg:h-header-lg-small {{/if}}{{else}}lg:h-auto {{/if}}md:h-header-md h-header-sm">   
         <div x-data 
             id="headerWrapper"
+            x-ref="headerWrapper"
             @resize.window="resetNav()" 
             :class="shouldBrandNavBeHidden() ? '-mt-[33px] md:-mt-[33px]' : ''  "
             class="{{#if _useSticky }}fixed top-0 left-0{{/if}} flex flex-wrap max-w-full transition-all duration-500 transform font-copy lg:justify-center lg:w-full ">

package/dist/views_static/components/social_sharing/social_sharing_compact.hbs

@@ -40,28 +40,30 @@
     x-on:focusin.window="! $refs.panel.contains($event.target) && close()"
     x-id="['dropdown-button']"
     class="flex self-center justify-end grow "
-    x-intersect:leave="sharingIsVisible = false"
-    x-intersect:enter="sharingIsVisible = true"
+    x-intersect:leave.margin.-160px.0px.0px.0px="sharingIsVisible = false"
+    x-intersect:enter.margin.-160px.0px.0px.0px="sharingIsVisible = true"
+    
 >
-    <div class="fixed left-1 top-1">
+   {{!-- <div class="fixed left-1 top-40">
         sharingIsVisible:<span x-text="sharingIsVisible" ></span><br>
         open:<span x-text="open" ></span><br>
-        isDesktop:<span x-text="isDesktop" ></span>
-    </div>
+        isDesktop:<span x-text="isDesktop" ></span><br>
+        PercentScrolled:<span x-text="$store.globalPercent.current"></span>
+    </div> --}}
+
     <div :class="{ 'grid grid-page z-100 fixed bottom-feature-box-height socialShareDesktop:bottom-auto socialShareDesktop:top-0 left-0 w-full': !sharingIsVisible }">
         <div class="" :class="{ 'flex justify-start col-full sm:col-main relative': !sharingIsVisible }">
-            <div class="flex gap-3" :class="{ 'bottom-5 socialShareDesktop:top-5 left-5 socialShareDesktop:left-1 flex-col absolute bg-white': !sharingIsVisible }">
+            <div class="flex gap-3" :class="{ 'bg-white w-10 bottom-5 socialShareDesktop:top-32 left-5 shadow-xl socialShareDesktop:-left-2 flex-col absolute': !sharingIsVisible }">
                 <button 
-                    class="order-2 w-8 h-8 ds-button font-heading active:scale-95 hover:scale-105 group"
+                    class="order-2 h-10 p-2 text-white border bg-button ds-button font-heading hover:bg-button--dark hover:border-button--dark active:bg-button--dark group"
                     x-show="!isDesktop"
                     x-ref="button"
                     x-on:click="toggle()"
                     :aria-expanded="open"
                     :aria-controls="$id('dropdown-button')">
-                    {{> components/base/image/icon _addClass="w-full h-full fill-button group-hover:fill-button--dark" _icon="teilen-button" _iconmap="icons" }}
+                    {{> components/base/image/icon _addClass="w-5 h-5 fill-current group-hover:fill-link--dark" _icon="sharing" _iconmap="icons" }}
                 </button> 
 
-
                 <!-- Panel -->
                 <div
                     x-ref="panel"
@@ -69,7 +71,8 @@
                     x-transition.origin.right
                     x-on:click.outside="close($refs.button)"
                     :id="$id('dropdown-button')"
-                    class="bg-white"
+                    class="p-1 bg-white"
+                    :class="sharingIsVisible ? 'h-8' : 'w-8'}"
                 >
                     <ul class="flex gap-3"  :class="{ 'flex-col': ! sharingIsVisible }">
                         

package/dist/views_static/components/social_sharing/social_sharing_compact_icons.hbs

@@ -9,7 +9,7 @@
             data-hr-click-tracking='{"settings": [{"type":"uxAction","secondLevelId": "{{this.secondLevelId}}","clickLabel": "socialShareClick::X"}]}'
         {{/with}}
     >
-        {{~> components/base/image/icon _addClass="w-full h-full fill-link hover:fill-[#0f1419] " _icon="x-ds" _iconmap="icons" ~}}
+        {{~> components/base/image/icon _addClass="w-full h-full fill-link hover:scale-105 " _icon="x-ds" _iconmap="icons" ~}}
     </a>
 </li>
 <li class="">
@@ -23,7 +23,7 @@
             data-hr-click-tracking='{"settings": [{"type":"uxAction","secondLevelId": "{{this.secondLevelId}}","clickLabel": "socialShareClick::facebook"}]}'
         {{/with}}
     >
-        {{~> components/base/image/icon _addClass="w-full h-full fill-link hover:fill-[#3b5999] " _icon="facebook-ds" _iconmap="icons" ~}}
+        {{~> components/base/image/icon _addClass="w-full h-full fill-link hover:scale-105" _icon="facebook-ds" _iconmap="icons" ~}}
     </a>
 </li>
 <li class="">
@@ -37,7 +37,7 @@
             data-hr-click-tracking='{"settings": [{"type":"uxAction","secondLevelId": "{{this.secondLevelId}}","clickLabel": "socialShareClick::whatsapp"}]}'
         {{/with}}
     >
-        {{~> components/base/image/icon _addClass="w-full h-full fill-link hover:fill-[#4dc247] " _icon="whatsapp-ds" _iconmap="icons" ~}}
+        {{~> components/base/image/icon _addClass="w-full h-full fill-link hover:scale-105" _icon="whatsapp-ds" _iconmap="icons" ~}}
     </a>
 </li>
 <li class="">
@@ -49,7 +49,7 @@
             data-hr-click-tracking='{"settings": [{"type":"uxAction","secondLevelId": "{{this.secondLevelId}}","clickLabel": "socialShareClick::mailto"}]}'
         {{/with}}
     >
-        {{~> components/base/image/icon _addClass="w-full h-full fill-link hover:fill-black " _icon="kontakt-ds" _iconmap="icons" ~}}
+        {{~> components/base/image/icon _addClass="w-full h-full fill-link hover:scale-105" _icon="kontakt-ds" _iconmap="icons" ~}}
     </a>
 </li>
 <li class="">
@@ -61,6 +61,6 @@
             data-hr-click-tracking='{"settings": [{"type":"uxAction","secondLevelId": "{{this.secondLevelId}}","clickLabel": "socialShareClick::printbutton"}]}'
         {{/with}}
     >
-        {{~> components/base/image/icon _addClass="w-full h-full fill-link hover:fill-link-dark " _icon="copy-ds" _iconmap="icons" ~}}
+        {{~> components/base/image/icon _addClass="w-full h-full fill-link hover:scale-105" _icon="copy-ds" _iconmap="icons" ~}}
     </a>
 </li>

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

@@ -1,7 +1,7 @@
 </div>
 <div 
   x-data="{ tab: '{{this.tabbedGroup.[0].title}}', test:true }"
-  class="grid grid-cols-12 pt-6 mx-0 mb-8 mt-14 col-full md:pt-7 bg-highlight-1 md:rounded-tl-hr md:rounded-br-hr md:col-main gap-x-6 gap-y-6"
+  class="grid grid-cols-12 pt-6 mx-0 mb-5 md:mb-7 mt-14 col-full md:pt-7 bg-highlight-1 md:rounded-tl-hr md:rounded-br-hr md:col-main gap-x-6 gap-y-6"
 >
   <section class="px-0 col-span-full sm:px-8 md:px-0">
     <div class="flex flex-wrap justify-center mx-5 gap-y-3 mb-7 gap-x-2" role="tablist">
@@ -19,4 +19,4 @@
     {{~> components/teaser/teaser_logic/teaser_logic ~}}
   </section>
 </div>
-<div class="{{> components/grid/grid_group_wrapper_classes }}"> 
+<div class="{{> components/grid/grid_group_wrapper_classes }} hideGridGroupIfEmpty"> 

package/dist/views_static/components/top_button/top_button.hbs

@@ -12,7 +12,7 @@
                 x-transition:leave="transition ease-[cubic-bezier(0.68,-0.3,0.32,1)] duration-300 transform absolute"
                 x-transition:leave-start="opacity-100 translate-y-0"
                 x-transition:leave-end="opacity-0 translate-y-12"               
-                class="{{> components/button/utilities/button_base_classes}} {{> components/button/utilities/button_variation_classes _variant="primary"}} -mt-6 z-100 p-3 h-max mr-5 [@media(min-width:1170px)]:-mr-14"
+                class="{{> components/button/utilities/button_base_classes}} {{> components/button/utilities/button_variation_classes _variant="primary"}} -mt-6 z-100 p-2 h-max mr-5 hover:scale-105  [@media(min-width:1170px)]:-mr-14"
                 >
                 {{> components/base/image/icon _icon="arrow-up"  _addClass="w-5 h-5 fill-current dark:fill-link-dark"}}            
             </button>

package/package.json

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

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

@@ -240,7 +240,9 @@
     .col-full {
         grid-column: full;
     }
-
+    .hideGridGroupIfEmpty:not(.hideGridGroupIfEmpty:has(section)) {
+        display: none;
+    }
     .-currentBrand {
         @apply before:content-[''] md:before:absolute md:before:left-[calc(50%-0.5rem)] md:before:w-0 md:before:h-0 md:before:border-t-0 md:before:border-r-8 md:before:border-r-transparent md:before:border-l-8 md:before:border-l-transparent md:before:border-b-8 md:before:border-brandnav-pseudo md:before:mt-6;
     }

package/src/assets/icons/icons/svgmap/sharing.svg

@@ -0,0 +1,11 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 28.1.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<svg version="1.1" id="Ebene_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 48 48" style="enable-background:new 0 0 48 48;" xml:space="preserve">
+<path d="M43.9,36.8c0,3.6-3.1,6.6-6.7,6.4c-3.8-0.3-6.4-3.5-6-7.2c0-0.2-0.2-0.6-0.4-0.7c-4-2-8-4-12-6c-0.5-0.3-0.7,0-1,0.3
+	c-2.2,2.2-4.8,3-7.8,2.2C6.9,30.9,5,29,4.3,26c-0.9-3.5,0.7-7.1,3.8-8.9c3.1-1.8,7.1-1.2,9.5,1.4c0.6,0.6,0.9,0.6,1.6,0.2
+	c3.8-1.9,7.6-3.8,11.5-5.7c0.5-0.2,0.6-0.4,0.5-1c-0.5-3.5,2-6.6,5.5-7.2c3.4-0.5,6.7,1.9,7.2,5.2c0.6,3.6-1.7,6.9-5.2,7.5
+	c-2.1,0.4-4-0.1-5.5-1.6c-0.4-0.4-0.7-0.4-1.2-0.2c-3.9,2-7.7,3.9-11.6,5.8c-0.6,0.3-0.7,0.6-0.6,1.2c0.1,0.9,0,1.8,0,2.8
+	c0,0.3,0.2,0.6,0.3,0.7c4,2,8.1,4.1,12.1,6.1c0.2,0.1,0.7-0.1,0.9-0.2c3.6-3.3,9.4-1.6,10.5,3.2C43.8,35.9,43.8,36.4,43.9,36.8
+	L43.9,36.8z"/>
+</svg>