hr-design-system-handlebars 1.75.1 → 1.75.2

package/dist/assets/index.css

@@ -423,7 +423,7 @@ video {
         font-stretch: condensed;
     }
 
-.-translate-x-1\/2, .-translate-x-2\/4, .-translate-y-1\/2, .-translate-y-8, .translate-y-0, .translate-y-12, .-rotate-45, .rotate-180, .rotate-45, .scale-50, .scale-y-100, .scale-y-90, .transform, .is-loading::after, .hover\:scale-105, .active\:scale-95 {
+.-translate-x-1\/2, .-translate-x-2\/4, .-translate-y-1\/2, .translate-y-0, .translate-y-12, .translate-y-8, .-rotate-45, .rotate-180, .rotate-45, .scale-50, .scale-y-100, .scale-y-90, .transform, .is-loading::after, .hover\:scale-105, .active\:scale-95 {
   --tw-translate-x: 0;
   --tw-translate-y: 0;
   --tw-rotate: 0;
@@ -1046,9 +1046,6 @@ article.indexTextDS .indexTextHighlighted .link {
 .bottom-15 {
   bottom: 3.75rem;
 }
-.bottom-\[19px\] {
-  bottom: 19px;
-}
 .bottom-feature-box-height {
   bottom: 0;
   bottom: var(--feature-box-height);
@@ -1062,8 +1059,8 @@ article.indexTextDS .indexTextHighlighted .link {
 .left-2\/4 {
   left: 50%;
 }
-.left-5 {
-  left: 1.25rem;
+.left-8 {
+  left: 2rem;
 }
 .left-\[4px\] {
   left: 4px;
@@ -1071,8 +1068,8 @@ article.indexTextDS .indexTextHighlighted .link {
 .right-0 {
   right: 0px;
 }
-.right-\[68px\] {
-  right: 68px;
+.right-\[50px\] {
+  right: 50px;
 }
 .right-auto {
   right: auto;
@@ -1305,6 +1302,9 @@ article.indexTextDS .indexTextHighlighted .link {
 .-mt-1 {
   margin-top: -0.25rem;
 }
+.-mt-12 {
+  margin-top: -3rem;
+}
 .-mt-2 {
   margin-top: -0.5rem;
 }
@@ -1317,9 +1317,6 @@ article.indexTextDS .indexTextHighlighted .link {
 .-mt-6 {
   margin-top: -1.5rem;
 }
-.-mt-8 {
-  margin-top: -2rem;
-}
 .-mt-\[18px\] {
   margin-top: -18px;
 }
@@ -1596,6 +1593,12 @@ article.indexTextDS .indexTextHighlighted .link {
 .h-8 {
   height: 2rem;
 }
+.h-9 {
+  height: 2.25rem;
+}
+.h-9\.5 {
+  height: 2.375rem;
+}
 .h-96 {
   height: 24rem;
 }
@@ -1648,6 +1651,9 @@ article.indexTextDS .indexTextHighlighted .link {
 .min-h-\[88px\] {
   min-height: 88px;
 }
+.min-h-screen {
+  min-height: 100vh;
+}
 .w-0 {
   width: 0px;
 }
@@ -1714,6 +1720,9 @@ article.indexTextDS .indexTextHighlighted .link {
 .w-9 {
   width: 2.25rem;
 }
+.w-9\.5 {
+  width: 2.375rem;
+}
 .w-\[19px\] {
   width: 19px;
 }
@@ -1849,10 +1858,6 @@ article.indexTextDS .indexTextHighlighted .link {
   --tw-translate-y: -50%;
   transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
 }
-.-translate-y-8 {
-  --tw-translate-y: -2rem;
-  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
-}
 .translate-y-0 {
   --tw-translate-y: 0px;
   transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
@@ -1861,6 +1866,10 @@ article.indexTextDS .indexTextHighlighted .link {
   --tw-translate-y: 3rem;
   transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
 }
+.translate-y-8 {
+  --tw-translate-y: 2rem;
+  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
+}
 .-rotate-45 {
   --tw-rotate: -45deg;
   transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
@@ -2125,9 +2134,6 @@ article.indexTextDS .indexTextHighlighted .link {
 .rounded-lg {
   border-radius: 0.5rem;
 }
-.rounded-md {
-  border-radius: 0.375rem;
-}
 .rounded-xl {
   border-radius: 0.75rem;
 }
@@ -2475,6 +2481,10 @@ article.indexTextDS .indexTextHighlighted .link {
   --tw-bg-opacity: 1;
   background-color: rgba(254, 202, 202, var(--tw-bg-opacity));
 }
+.bg-slate-200 {
+  --tw-bg-opacity: 1;
+  background-color: rgba(226, 232, 240, var(--tw-bg-opacity));
+}
 .bg-slate-500 {
   --tw-bg-opacity: 1;
   background-color: rgba(100, 116, 139, var(--tw-bg-opacity));
@@ -3368,7 +3378,7 @@ article.indexTextDS .indexTextHighlighted .link {
   border-bottom-color: var(--color-secondary-ds);
 }
 .counter-reset {
-  counter-reset: cnt1719489321419;
+  counter-reset: cnt1719581775289;
 }
 .hyphens-auto {
   -webkit-hyphens: auto;
@@ -3747,7 +3757,7 @@ article.indexTextDS .indexTextHighlighted .link {
   --tw-ring-color: rgba(255, 255, 255, 0.5);
 }
 .-ordered {
-  counter-increment: cnt1719489321419 1;
+  counter-increment: cnt1719581775289 1;
 }
 .-ordered::before {
   position: absolute;
@@ -3763,7 +3773,7 @@ article.indexTextDS .indexTextHighlighted .link {
   letter-spacing: .0125em;
   --tw-text-opacity: 1;
   color: rgba(0, 0, 0, var(--tw-text-opacity));
-  content: counter(cnt1719489321419);
+  content: counter(cnt1719581775289);
 }
 /*! ****************************/
 /*! DataPolicy stuff           */

package/dist/assets/js/alpine.js

@@ -40,8 +40,9 @@ Alpine.store('navIsVisible', true)
 Alpine.store('subNavIsVisible', false)
 Alpine.store('footerIsVisible', false)
 Alpine.store('sectionNavIsVisible', false)
-Alpine.store('sharingIsVisible', true)
-Alpine.store('sharingIsOpen', false)
+Alpine.store('sharingIsVisible', false)
+Alpine.store('sharingIsOpenHorizontal', false)
+Alpine.store('sharingIsOpenMobile', false)
 Alpine.store('sharingBottomPos', {
     current: '0'
 })

package/dist/views/components/page/components/metadatabox.hbs

@@ -11,7 +11,7 @@
                 {{> components/page/components/commentinfo }}
             </div>
             {{#unless _webview}}
-                {{> components/social_sharing/social_sharing_compact _isVertical=false}}
+                {{> components/social_sharing/social_sharing_horizontal }}
             {{/unless}}
         </div>
     </div>

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

@@ -6,7 +6,7 @@
     <div 
         class="relative right-0 p-1 bg-white md:h-auto">
             <ul class="flex flex-col gap-3">  
-                {{> components/social_sharing/social_sharing_compact_icons }}
+                {{> components/social_sharing/social_sharing_icons _socialSharingType="vertical-desktop" }}
             </ul>
     </div>
 </div>

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

@@ -0,0 +1,72 @@
+{{~#with this.socialSharing ~}}
+    <div x-data="stickySharingHandler"
+        x-init="$watch('$store.sharingIsVisible', () => {$store.sharingIsOpenHorizontal = false; $store.sharingIsOpenMobile = false})"
+        class="flex self-center justify-end ml-3 grow"
+        x-intersect:leave="$store.sharingIsVisible=false"
+        x-intersect:enter="$store.sharingIsVisible=true"
+        x-on:resize.window="$store.sharingIsOpenHorizontal = false"       
+        x-on:keydown.escape.prevent.stop="close($refs.button)"
+        @click.outside="close()"
+    >
+        <div class="relative right-0 flex gap-3 bg-white md:h-auto"  >
+            <button 
+                class="{{#with ../this.trackingData}}js-load {{/with}}order-2 p-2 text-white border border-button bg-button ds-button font-heading hover:bg-button--dark hover:border-button--dark active:bg-button--dark group lg:hidden"
+                x-ref="button"
+                x-on:click="toggle()"
+                :aria-expanded="open"
+                :aria-controls="$id('dropdown-button')"
+                x-show="$store.sharingIsVisible"
+                {{#with ../this.trackingData}}
+                    data-hr-click-tracking='{"settings": [{"type":"uxAction","secondLevelId": "{{this.secondLevelId}}","clickLabel": "socialShareClick::sharingmenuopened"}]}'
+                {{/with}}
+                
+                >
+                    {{> components/base/image/icon _addClass="w-5 h-5 fill-current group-hover:fill-link--dark" _icon="sharing" _iconmap="icons" }}
+            </button>
+            <div 
+                x-ref="panel" 
+                :class="$store.sharingIsOpenHorizontal ? 'flex' : 'hidden '"              
+                :id="$id('dropdown-button')"
+                class="self-center bg-white h-8 absolute right-[50px] md:relative md:right-0 md:h-auto lg:flex"
+            >
+                <ul class="flex gap-3">  
+                    {{> components/social_sharing/social_sharing_icons _socialSharingType="metadatabox"}}
+                </ul>
+            </div>
+        </div>
+    </div>
+    <script>
+        function stickySharingHandler(){
+            return {
+            open: false,
+            sharingIsVisible: true,
+            isDesktop: true,
+            toggle() {
+                var isMobileApple = /^iP/.test(navigator.platform) || /^Mac/.test(navigator.platform) && navigator.maxTouchPoints > 4;
+                var isMobileOther= navigator.userAgent.match(/(Android)|(webOS)|(Blackberry)|(Windows Phone)/i);
+                var isMobile= isMobileApple || isMobileOther;
+                if (navigator.share && isMobile) {
+                    navigator.share({
+                        title: document.title,
+                        text: 'Schau mal was ich auf hessenschau.de gefunden habe!',
+                        url: window.location.href,
+                    })
+                    .then(() => console.log('Shared successfully'))
+                    .catch((error) => console.error('Sharing failed:', error));
+                } else {
+                    if (this.$store.sharingIsOpenHorizontal) {
+                        return this.close()
+                    }
+                    this.$refs.button.focus()
+                    this.$store.sharingIsOpenHorizontal = true
+    
+                }               
+            },
+            close(focusAfter) {
+                if (!this.$store.sharingIsOpenHorizontal) return
+                this.$store.sharingIsOpenHorizontal = false
+            }
+        }
+    }
+    </script>
+{{/with}}

package/{src/stories/views/components/social_sharing/social_sharing_compact_icons.hbs → dist/views/components/social_sharing/social_sharing_icons.hbs}

@@ -1,3 +1,44 @@
+{{~#with this.copyToClipboardLink}}
+<li x-data="copyHandler()" x-on:click="copyToClipboard" class="relative">
+    <button class="{{#with ../_trackingData}} js-load{{/with}} flex order-2 ds-button font-heading active:scale-95 w-8 h-8"
+        title="{{loca "share_copy_linktitle" }}"
+        data-url="{{this}}"
+        {{#with ../_trackingData}}
+            data-hr-click-tracking='{"settings": [{"type":"uxAction","secondLevelId": "{{this.secondLevelId}}","clickLabel": "socialShareClick::{{if ../_socialSharingType ../_socialSharingType "default" }}::copybutton"}]}'
+        {{/with}}
+    >
+        <span x-cloak class="flex items-center justify-center w-full h-full" x-show="!copySuccess">{{~> components/base/image/icon _addClass="w-full h-full fill-link hover:scale-105" _icon="copy-ds" _iconmap="icons" ~}}</span>
+        <span x-cloak class="flex items-center justify-center w-full h-full" x-show="copySuccess">{{~> components/base/image/icon _addClass="w-6 h-6 text-green-600" _icon="status-done" _iconmap="icons" ~}}</span>
+    </button>
+    <div x-cloak x-show="copySuccess" class="absolute left-8 flex flex-row items-center justify-start px-4 shadow w-auto h-8 top-0 ml-0.5 text-xs bg-white whitespace-nowrap sm480:text-sm font-headingSerif dark:text-text-dark">    
+        {{loca "share_copy_message" }}
+    </div>
+</li>
+<script>
+    function copyHandler(){
+        return  {  
+            copySuccess: false,
+            copyToClipboard(event) {
+                const clickedContainer = event.currentTarget.parentNode
+                const url = clickedContainer.querySelector ("button:first-of-type").getAttribute('data-url');
+                //TODO: maby do this with a magical helper in alpine
+                navigator.clipboard
+                .writeText(url)
+                .then(() => {
+                    console.log("successfully copied");
+                    this.copySuccess = true
+                    window.setTimeout(() => {
+                        this.copySuccess = false
+                    }, 2000)
+                })
+                .catch(() => {
+                    console.log("something went wrong with copy");
+                });
+            }
+        }
+    }
+</script>
+{{/with}}
 {{~#with this.twitterLink ~}}
 <li>
     <a class="{{if (isUserConsentNeeded this) 'js-user-consent-needed ' ''}}{{#with ../_trackingData}} js-load{{/with}} flex order-2 ds-button font-heading active:scale-95 w-8 h-8"
@@ -7,7 +48,7 @@
         rel="noopener noreferrer"
         title="{{loca "share_x_linktitle" }}"
         {{#with ../_trackingData}}
-            data-hr-click-tracking='{"settings": [{"type":"uxAction","secondLevelId": "{{this.secondLevelId}}","clickLabel": "socialShareClick::X"}]}'
+            data-hr-click-tracking='{"settings": [{"type":"uxAction","secondLevelId": "{{this.secondLevelId}}","clickLabel": "socialShareClick::{{if ../_socialSharingType ../_socialSharingType "default" }}::X"}]}'
         {{/with}}
     >
         {{~> components/base/image/icon _addClass="w-full h-full fill-link hover:scale-105 " _icon="x-ds" _iconmap="icons" ~}}
@@ -23,7 +64,7 @@
         rel="noopener noreferrer"
         title="{{loca "share_facebook_linktitle" }}"
         {{#with ../_trackingData}}
-            data-hr-click-tracking='{"settings": [{"type":"uxAction","secondLevelId": "{{this.secondLevelId}}","clickLabel": "socialShareClick::facebook"}]}'
+            data-hr-click-tracking='{"settings": [{"type":"uxAction","secondLevelId": "{{this.secondLevelId}}","clickLabel": "socialShareClick::{{if ../_socialSharingType ../_socialSharingType "default" }}::facebook"}]}'
         {{/with}}
     >
         {{~> components/base/image/icon _addClass="w-full h-full fill-link hover:scale-105" _icon="facebook-ds" _iconmap="icons" ~}}
@@ -39,7 +80,7 @@
         rel="noopener noreferrer"
         title="{{loca "share_whatsapp_linktitle" }}"
         {{#with ../_trackingData}}
-            data-hr-click-tracking='{"settings": [{"type":"uxAction","secondLevelId": "{{this.secondLevelId}}","clickLabel": "socialShareClick::whatsapp"}]}'
+            data-hr-click-tracking='{"settings": [{"type":"uxAction","secondLevelId": "{{this.secondLevelId}}","clickLabel": "socialShareClick::{{if ../_socialSharingType ../_socialSharingType "default" }}::whatsapp"}]}'
         {{/with}}
     >
         {{~> components/base/image/icon _addClass="w-full h-full fill-link hover:scale-105" _icon="whatsapp-ds" _iconmap="icons" ~}}
@@ -53,48 +94,10 @@
         href="{{this}}"
         title="{{loca "share_mail_linktitle" }}"
         {{#with ../_trackingData}}
-            data-hr-click-tracking='{"settings": [{"type":"uxAction","secondLevelId": "{{this.secondLevelId}}","clickLabel": "socialShareClick::mailto"}]}'
+            data-hr-click-tracking='{"settings": [{"type":"uxAction","secondLevelId": "{{this.secondLevelId}}","clickLabel": "socialShareClick::{{if ../_socialSharingType ../_socialSharingType "default" }}::mailto"}]}'
         {{/with}}
     >
         {{~> components/base/image/icon _addClass="w-full h-full fill-link hover:scale-105" _icon="kontakt-ds" _iconmap="icons" ~}}
     </a>
 </li>
-{{/with}}
-
-<li x-data="copyHandler()" x-on:click="copyToClipboard" class="">
-    <button class="{{#with ../_trackingData}} js-load{{/with}} flex order-2 ds-button font-heading active:scale-95 w-8 h-8"
-        title="{{loca "share_copy_linktitle" }}"
-        {{#with ../_trackingData}}
-            data-hr-click-tracking='{"settings": [{"type":"uxAction","secondLevelId": "{{this.secondLevelId}}","clickLabel": "socialShareClick::copybutton"}]}'
-        {{/with}}
-    >
-        {{~> components/base/image/icon _addClass="w-full h-full fill-link hover:scale-105" _icon="copy-ds" _iconmap="icons" ~}}
-    </button>
-    <div class="absolute flex flex-row items-center justify-start rounded pr-4 shadow hidden w-auto h-8 -mt-8 ml-0.5 text-xs bg-white whitespace-nowrap js-copyMessage sm480:text-sm font-headingSerif dark:text-text-dark">
-        {{~> components/base/image/icon _addClass="w-7 h-7 text-green-600 mr-4" _icon="status-done" _iconmap="icons" ~}}
-        {{loca "share_copy_message" }}
-    </div>
-</li>
-<script>
-    function copyHandler(){
-        return  {  
-            copyToClipboard(event) {
-                const clickedContainer = event.currentTarget.parentNode
-                const messageDiv = clickedContainer.querySelector('.js-copyMessage')
-                const el = document.createElement('textarea')
-                el.value = window.location.href
-                el.setAttribute('readonly', '')
-                el.style.position = 'absolute'
-                el.style.left = '-9999px'
-                document.body.appendChild(el)
-                el.select()
-                document.execCommand('copy')
-                document.body.removeChild(el)
-                messageDiv.classList.remove('hidden')
-                window.setTimeout(() => {
-                    messageDiv.classList.add('hidden')
-                }, 2000)
-            }
-        }
-    }
-</script>
+{{/with}}

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

@@ -0,0 +1,71 @@
+
+{{~#with this.socialSharing ~}}    
+<div x-data="stickySharingHandlerMobile"
+    class=" relative ml-5 z-100 h-9.5 w-9.5"
+    :class="$store.footerIsVisible ? '-mt-6' : '-mt-12'"  
+    x-on:resize.window="$store.sharingIsOpenMobile = false"    
+    x-on:keydown.escape.prevent.stop="close($refs.button)"
+    @click.outside="close()"
+    >
+    <div class="absolute bottom-0 flex flex-col self-center gap-3 bg-white">
+        <button 
+            class="{{#with ../this.trackingData}}js-load {{/with}}order-2 p-2 text-white border border-button bg-button ds-button font-heading hover:bg-button--dark hover:border-button--dark active:bg-button--dark group lg:hidden"
+            x-ref="button"
+            x-on:click="toggle()"
+            :aria-expanded="open"
+            :aria-controls="$id('dropdown-button')"
+            
+            {{#with ../this.trackingData}}
+                data-hr-click-tracking='{"settings": [{"type":"uxAction","secondLevelId": "{{this.secondLevelId}}","clickLabel": "socialShareClick::sharingmenuopened"}]}'
+            {{/with}}
+            
+            >
+                {{> components/base/image/icon _addClass="w-5 h-5 fill-current group-hover:fill-link--dark" _icon="sharing" _iconmap="icons" }}
+        </button>
+        <div 
+            x-ref="panel" 
+            :class="$store.sharingIsOpenMobile ? 'flex' : 'hidden '"                    
+            :id="$id('dropdown-button')"
+            class="relative right-0 self-center bg-white md:h-auto lg:hidden"
+        >
+            <ul class="flex flex-col gap-3 mt-2">  
+                {{> components/social_sharing/social_sharing_icons _socialSharingType="mobile-sticky"}}
+            </ul>
+        </div>
+    </div>
+</div>
+    <script>
+        function stickySharingHandlerMobile(){
+            return {
+            open: false,
+            sharingIsVisible: true,
+            isDesktop: true,
+            toggle() {
+                var isMobileApple = /^iP/.test(navigator.platform) || /^Mac/.test(navigator.platform) && navigator.maxTouchPoints > 4;
+                var isMobileOther= navigator.userAgent.match(/(Android)|(webOS)|(Blackberry)|(Windows Phone)/i);
+                var isMobile= isMobileApple || isMobileOther;
+                if (navigator.share && isMobile) {
+                    navigator.share({
+                        title: document.title,
+                        text: 'Schau mal was ich auf hessenschau.de gefunden habe!',
+                        url: window.location.href,
+                    })
+                    .then(() => console.log('Shared successfully'))
+                    .catch((error) => console.error('Sharing failed:', error));
+                } else {
+                    if (this.$store.sharingIsOpenMobile) {
+                        return this.close()
+                    }    
+                    this.$refs.button.focus()
+                    this.$store.sharingIsOpenMobile = true             
+                }
+                
+            },
+            close(focusAfter) {
+                if (!this.$store.sharingIsOpenMobile) return
+                this.$store.sharingIsOpenMobile = false
+            }
+        }
+        }
+    </script>
+{{/with}}

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

@@ -1,21 +1,27 @@
-<div class="h-8" x-data="{ isVisible: false }">
-    <div class="grid h-8 grid-page z-100" :class="{ 'fixed bottom-feature-box-height left-0 w-full': !$store.footerIsVisible }">
-        <div class="flex justify-end h-8 col-full sm:col-main"
-        :class="{ 'bg-white': $store.footerIsVisible }">
+<div class="" x-data="{ isVisible: false }">
+    <div class="grid grid-page z-100" :class="{ 'fixed bottom-feature-box-height left-0 w-full': !$store.footerIsVisible }">       
+        <div class="flex justify-between h-0 col-full sm:col-main"
+        :class="{ 'bg-white h-8': $store.footerIsVisible }"
+        x-show="!$store.sharingIsVisible && isVisible"
+        x-transition:enter="transition ease-[cubic-bezier(0.68,-0.3,0.32,1)] duration-500 transform order-first"
+        x-transition:enter-start="opacity-0 translate-y-8"
+        x-transition:enter-end="opacity-100 translate-y-0"
+        x-transition:leave="transition ease-[cubic-bezier(0.68,-0.3,0.32,1)] duration-300"
+        x-transition:leave-start="opacity-100 translate-y-0"
+        x-transition:leave-end="opacity-0 translate-y-12"
+        @scroll.window="isVisible = ((window.pageYOffset * 2) > (window.innerHeight || (document.documentElement || document.body).clientHeight))"
+        >
+            {{> components/social_sharing/social_sharing_mobile }}
+        
             <button
-                @scroll.window="isVisible = (window.pageYOffset > (window.innerHeight || (document.documentElement || document.body).clientHeight))"
+                
                 @click="window.scrollTo({top: 0, behavior: 'smooth'})"
-                x-show="isVisible"
-                x-transition:enter="transition ease-[cubic-bezier(0.68,-0.3,0.32,1)] duration-500 transform order-first"
-                x-transition:enter-start="opacity-0 -translate-y-8"
-                x-transition:enter-end="opacity-100 translate-y-0"
-                x-transition:leave="transition ease-[cubic-bezier(0.68,-0.3,0.32,1)] duration-300 transform absolute"
-                x-transition:leave-start="opacity-100 translate-y-0"
-                x-transition:leave-end="opacity-0 translate-y-12"               
-                class="{{> components/button/utilities/button_base_classes}} {{> components/button/utilities/button_variation_classes _variant="primary"}} -mt-6 z-100 p-2 h-max mr-5 hover:scale-105  [@media(min-width:1170px)]:-mr-14"
+                :class="$store.footerIsVisible ? '-mt-6' : '-mt-12'"        
+                class="{{> components/button/utilities/button_base_classes}} {{> components/button/utilities/button_variation_classes _variant="primary"}} ml-auto 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>
+
         </div>
     </div>
     {{! Dieses DIV ist notwendig um bei Seiten mit einem Hintergrund zu vermeiden dass unten eine Lücke entsteht bei der das hintergrundbild durchscheint}}

package/dist/views_static/components/page/components/metadatabox.hbs

@@ -11,7 +11,7 @@
                 {{> components/page/components/commentinfo }}
             </div>
             {{#unless _webview}}
-                {{> components/social_sharing/social_sharing_compact _isVertical=false}}
+                {{> components/social_sharing/social_sharing_horizontal }}
             {{/unless}}
         </div>
     </div>

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

@@ -6,7 +6,7 @@
     <div 
         class="relative right-0 p-1 bg-white md:h-auto">
             <ul class="flex flex-col gap-3">  
-                {{> components/social_sharing/social_sharing_compact_icons }}
+                {{> components/social_sharing/social_sharing_icons _socialSharingType="vertical-desktop" }}
             </ul>
     </div>
 </div>

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

@@ -0,0 +1,72 @@
+{{~#with this.socialSharing ~}}
+    <div x-data="stickySharingHandler"
+        x-init="$watch('$store.sharingIsVisible', () => {$store.sharingIsOpenHorizontal = false; $store.sharingIsOpenMobile = false})"
+        class="flex self-center justify-end ml-3 grow"
+        x-intersect:leave="$store.sharingIsVisible=false"
+        x-intersect:enter="$store.sharingIsVisible=true"
+        x-on:resize.window="$store.sharingIsOpenHorizontal = false"       
+        x-on:keydown.escape.prevent.stop="close($refs.button)"
+        @click.outside="close()"
+    >
+        <div class="relative right-0 flex gap-3 bg-white md:h-auto"  >
+            <button 
+                class="{{#with ../this.trackingData}}js-load {{/with}}order-2 p-2 text-white border border-button bg-button ds-button font-heading hover:bg-button--dark hover:border-button--dark active:bg-button--dark group lg:hidden"
+                x-ref="button"
+                x-on:click="toggle()"
+                :aria-expanded="open"
+                :aria-controls="$id('dropdown-button')"
+                x-show="$store.sharingIsVisible"
+                {{#with ../this.trackingData}}
+                    data-hr-click-tracking='{"settings": [{"type":"uxAction","secondLevelId": "{{this.secondLevelId}}","clickLabel": "socialShareClick::sharingmenuopened"}]}'
+                {{/with}}
+                
+                >
+                    {{> components/base/image/icon _addClass="w-5 h-5 fill-current group-hover:fill-link--dark" _icon="sharing" _iconmap="icons" }}
+            </button>
+            <div 
+                x-ref="panel" 
+                :class="$store.sharingIsOpenHorizontal ? 'flex' : 'hidden '"              
+                :id="$id('dropdown-button')"
+                class="self-center bg-white h-8 absolute right-[50px] md:relative md:right-0 md:h-auto lg:flex"
+            >
+                <ul class="flex gap-3">  
+                    {{> components/social_sharing/social_sharing_icons _socialSharingType="metadatabox"}}
+                </ul>
+            </div>
+        </div>
+    </div>
+    <script>
+        function stickySharingHandler(){
+            return {
+            open: false,
+            sharingIsVisible: true,
+            isDesktop: true,
+            toggle() {
+                var isMobileApple = /^iP/.test(navigator.platform) || /^Mac/.test(navigator.platform) && navigator.maxTouchPoints > 4;
+                var isMobileOther= navigator.userAgent.match(/(Android)|(webOS)|(Blackberry)|(Windows Phone)/i);
+                var isMobile= isMobileApple || isMobileOther;
+                if (navigator.share && isMobile) {
+                    navigator.share({
+                        title: document.title,
+                        text: 'Schau mal was ich auf hessenschau.de gefunden habe!',
+                        url: window.location.href,
+                    })
+                    .then(() => console.log('Shared successfully'))
+                    .catch((error) => console.error('Sharing failed:', error));
+                } else {
+                    if (this.$store.sharingIsOpenHorizontal) {
+                        return this.close()
+                    }
+                    this.$refs.button.focus()
+                    this.$store.sharingIsOpenHorizontal = true
+    
+                }               
+            },
+            close(focusAfter) {
+                if (!this.$store.sharingIsOpenHorizontal) return
+                this.$store.sharingIsOpenHorizontal = false
+            }
+        }
+    }
+    </script>
+{{/with}}