hr-design-system-handlebars 0.47.18 → 0.47.19

package/.storybook/main.js

@@ -20,7 +20,6 @@ module.exports = {
                 },
             },
         },
-        '@whitespace/storybook-addon-html',
         '@storybook/addon-a11y',
         'storybook-conditional-toolbar-selector',
     ],

package/CHANGELOG.md

@@ -1,3 +1,17 @@
+# v0.47.19 (Wed Jun 29 2022)
+
+#### 🐛 Bug Fix
+
+- changes z-indexes to 10000 and above [#254](https://github.com/mumprod/hr-design-system-handlebars/pull/254) ([@StefanVesper](https://github.com/StefanVesper))
+- Feature/dpe 1651 [#253](https://github.com/mumprod/hr-design-system-handlebars/pull/253) ([@szuelch](https://github.com/szuelch))
+
+#### Authors: 2
+
+- [@szuelch](https://github.com/szuelch)
+- SonicSoulSurfer ([@StefanVesper](https://github.com/StefanVesper))
+
+---
+
 # v0.47.18 (Tue Jun 28 2022)
 
 #### 🐛 Bug Fix

package/dist/assets/index.css

@@ -346,7 +346,7 @@
 
 /*! purgecss end ignore */
 
-/*! tailwindcss v3.0.23 | MIT License | https://tailwindcss.com */
+/*! tailwindcss v3.1.4 | MIT License | https://tailwindcss.com */
 
 /*
 1. Prevent padding and border from affecting element width. (https://github.com/mozdevs/cssremedy/issues/4)
@@ -513,6 +513,7 @@ select,
 textarea {
   font-family: inherit; /* 1 */
   font-size: 100%; /* 1 */
+  font-weight: inherit; /* 1 */
   line-height: inherit; /* 1 */
   color: inherit; /* 1 */
   margin: 0; /* 2 */
@@ -732,14 +733,6 @@ video {
   height: auto;
 }
 
-/*
-Ensure the default browser behavior of the `hidden` attribute.
-*/
-
-[hidden] {
-  display: none;
-}
-
 @font-face {
         font-family: 'DIN';
         font-display: auto;
@@ -874,56 +867,18 @@ Ensure the default browser behavior of the `hidden` attribute.
 
 @media (min-width: 1024px) {
     .-currentBrand::before {
-        content: var(--tw-content);
         position: absolute;
-    }
-    .-currentBrand::before {
-        content: var(--tw-content);
         margin-top: 1.5rem;
-    }
-    .-currentBrand::before {
-        content: var(--tw-content);
         height: 0px;
-    }
-    .-currentBrand::before {
-        content: var(--tw-content);
         width: 0px;
-    }
-    .-currentBrand::before {
-        content: var(--tw-content);
         border-top-width: 0px;
-    }
-    .-currentBrand::before {
-        content: var(--tw-content);
         border-right-width: 8px;
-    }
-    .-currentBrand::before {
-        content: var(--tw-content);
         border-left-width: 8px;
-    }
-    .-currentBrand::before {
-        content: var(--tw-content);
         border-bottom-width: 8px;
-    }
-    .-currentBrand::before {
-        content: var(--tw-content);
-        --tw-border-opacity: 1;
         border-color: rgba(0, 82, 147, var(--tw-border-opacity));
-    }
-    .-currentBrand::before {
-        content: var(--tw-content);
-        border-right-color: transparent;
-    }
-    .-currentBrand::before {
-        content: var(--tw-content);
         --tw-border-opacity: 1;
         border-left-color: rgba(255, 255, 255, var(--tw-border-opacity));
-    }
-    .-currentBrand::before {
-        content: var(--tw-content);
         border-right-color: transparent;
-    }
-    .-currentBrand::before {
         content: var(--tw-content);
         border-left-color: #fff;
     }
@@ -950,69 +905,22 @@ Ensure the default browser behavior of the `hidden` attribute.
 
 @media (min-width: 1024px) {
     .-currentService::before {
-        content: var(--tw-content);
         position: absolute;
-    }
-    .-currentService::before {
-        content: var(--tw-content);
         margin-right: 0px;
-    }
-    .-currentService::before {
-        content: var(--tw-content);
         margin-top: 3rem;
-    }
-    .-currentService::before {
-        content: var(--tw-content);
         display: -webkit-box;
         display: -ms-flexbox;
         display: flex;
-    }
-    .-currentService::before {
-        content: var(--tw-content);
         height: 0px;
-    }
-    .-currentService::before {
-        content: var(--tw-content);
         width: 0px;
-    }
-    .-currentService::before {
-        content: var(--tw-content);
         border-top-width: 0px;
-    }
-    .-currentService::before {
-        content: var(--tw-content);
         border-right-width: 8px;
-    }
-    .-currentService::before {
-        content: var(--tw-content);
         border-left-width: 8px;
-    }
-    .-currentService::before {
-        content: var(--tw-content);
         border-bottom-width: 8px;
-    }
-    .-currentService::before {
-        content: var(--tw-content);
-        border-right-color: transparent;
-    }
-    .-currentService::before {
-        content: var(--tw-content);
-        border-left-color: transparent;
-    }
-    .-currentService::before {
-        content: var(--tw-content);
         --tw-border-opacity: 1;
         border-bottom-color: rgba(255, 255, 255, var(--tw-border-opacity));
-    }
-    .-currentService::before {
-        content: var(--tw-content);
         border-right-color: transparent;
-    }
-    .-currentService::before {
-        content: var(--tw-content);
         border-left-color: transparent;
-    }
-    .-currentService::before {
         content: var(--tw-content);
         border-bottom-color: #fff;
     }
@@ -1038,71 +946,21 @@ Ensure the default browser behavior of the `hidden` attribute.
 
 @media (min-width: 1024px) {
     .-currentSection::before {
-        content: var(--tw-content);
         position: absolute;
-    }
-    .-currentSection::before {
-        content: var(--tw-content);
         margin-bottom: 0px;
-    }
-    .-currentSection::before {
-        content: var(--tw-content);
         margin-right: 0px;
-    }
-    .-currentSection::before {
-        content: var(--tw-content);
         margin-left: 0px;
-    }
-    .-currentSection::before {
-        content: var(--tw-content);
         margin-top: 2rem;
-    }
-    .-currentSection::before {
-        content: var(--tw-content);
         height: 0px;
-    }
-    .-currentSection::before {
-        content: var(--tw-content);
         width: 0px;
-    }
-    .-currentSection::before {
-        content: var(--tw-content);
         border-top-width: 0px;
-    }
-    .-currentSection::before {
-        content: var(--tw-content);
         border-right-width: 8px;
-    }
-    .-currentSection::before {
-        content: var(--tw-content);
         border-left-width: 8px;
-    }
-    .-currentSection::before {
-        content: var(--tw-content);
         border-bottom-width: 8px;
-    }
-    .-currentSection::before {
-        content: var(--tw-content);
-        border-right-color: transparent;
-    }
-    .-currentSection::before {
-        content: var(--tw-content);
-        border-left-color: transparent;
-    }
-    .-currentSection::before {
-        content: var(--tw-content);
         --tw-border-opacity: 1;
         border-bottom-color: rgba(255, 255, 255, var(--tw-border-opacity));
-    }
-    .-currentSection::before {
-        content: var(--tw-content);
         border-right-color: transparent;
-    }
-    .-currentSection::before {
-        content: var(--tw-content);
         border-left-color: transparent;
-    }
-    .-currentSection::before {
         content: var(--tw-content);
         border-bottom-color: #fff;
     }
@@ -1111,10 +969,15 @@ Ensure the default browser behavior of the `hidden` attribute.
 .-warnung {
     --tw-text-opacity: 1 !important;
     color: rgba(220, 38, 38, var(--tw-text-opacity)) !important;
+}
+
+.-warnung {
     fill: #000000;
 }
 
-.-video-podcast, .-weather, .-traffic {
+.-video-podcast, 
+    .-weather, 
+    .-traffic {
     fill: #ffffff;
 }
 
@@ -1502,14 +1365,14 @@ Ensure the default browser behavior of the `hidden` attribute.
 .top-10 {
     top: 2.5rem;
 }
-.z-101 {
-    z-index: 101;
+.z-10000 {
+    z-index: 10000;
 }
-.z-102 {
-    z-index: 102;
+.z-10002 {
+    z-index: 10002;
 }
-.z-100 {
-    z-index: 100;
+.z-10001 {
+    z-index: 10001;
 }
 .-z-1000 {
     z-index: -1000;
@@ -1823,6 +1686,9 @@ Ensure the default browser behavior of the `hidden` attribute.
 .cursor-pointer {
     cursor: pointer;
 }
+.resize {
+    resize: both;
+}
 .list-none {
     list-style-type: none;
 }
@@ -2120,11 +1986,13 @@ Ensure the default browser behavior of the `hidden` attribute.
 }
 .from-purple-50 {
     --tw-gradient-from: #faf5ff;
-    --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to, rgba(250, 245, 255, 0));
+    --tw-gradient-to: rgba(250, 245, 255, 0);
+    --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
 }
 .from-black {
     --tw-gradient-from: #000000;
-    --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to, rgba(0, 0, 0, 0));
+    --tw-gradient-to: rgba(0, 0, 0, 0);
+    --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
 }
 .to-purple-100 {
     --tw-gradient-to: #f3e8ff;
@@ -2669,7 +2537,7 @@ Ensure the default browser behavior of the `hidden` attribute.
             content: '';
         }
 
-        .ar-16-19::after {
+         {
             display: block;
             content: '';
             clear: both;
@@ -2696,8 +2564,8 @@ Ensure the default browser behavior of the `hidden` attribute.
         left: 0px;
     }
 
-    .md\:z-101 {
-        z-index: 101;
+    .md\:z-10000 {
+        z-index: 10000;
     }
 
     .md\:order-2 {

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

@@ -1,6 +1,6 @@
 <div class="sb-main-navigation" x-data="mainNavigationHandler()" x-init="init()">
 
-    <header class="relative z-101 {{#if this.hasOpenSubNavigation}}lg:h-header-lg-big{{else}}lg:h-header-lg-small{{/if}} md:h-header-md h-header-sm">   
+    <header class="relative z-10000 {{#if this.hasOpenSubNavigation}}lg:h-header-lg-big{{else}}lg:h-header-lg-small{{/if}} md:h-header-md h-header-sm">   
         <div x-data 
             id="headerWrapper"
             @resize.window="resetNav()" 
@@ -13,16 +13,16 @@
             </div>
 
             <div id="brandNavWrapper" 
-                class="relative flex items-center justify-center order-1 w-full bg-white z-101 print:hidden">
+                class="relative flex items-center justify-center order-1 w-full bg-white z-10000 print:hidden">
                 {{> components/site_header/brand_navigation/brand_navigation }} 
             </div>
 
             <div id="serviceNavWrapper" 
                 :class="shouldServiceNavBeHidden() ? '-mt-40' : ''"
                 
-                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-102">   
+                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">   
                 <div id="serviceNavMainContainer" 
-                    class="flex w-full h-10 lg:container md:h-12 lg:px-10 lg:h-16 z-101">
+                    class="flex w-full h-10 lg:container md:h-12 lg:px-10 lg:h-16 z-10001">
 
                     <span id="serviceNavHeadline" class="hidden print:hidden">Service Navigation</span>
 
@@ -54,7 +54,7 @@
                 x-ref="sectionnavigation"
                 @toggle-sectionnav.window="toggleSectionNav"
                 :class="shouldSectionNavBeHidden() ? '-mt-40 md:-mt-40 lg:-mt-40' : ''"  
-                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-100 print:hidden"
+                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"
             >
                 {{> components/site_header/section_navigation/section_navigation }}
             </div>
@@ -62,7 +62,7 @@
             <div x-cloak :class="shouldServiceNavBeHidden() ? 'hidden -mt-40' : ''"
                 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')" 
                 x-show="$store.searchFieldOpen"
-                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-102 lg:hidden print:hidden"
+                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"
                 @search-close.window="$store.searchFieldOpen = false"
                 @click.outside="$store.searchFieldOpen = false; $dispatch('search-mobile-click-outside'); dropped = false; toggleScrolling(!$store.serviceNavIsOpensearchFieldOpen && !$store.burgeropen)"
                 x-transition:enter="transition ease-out duration-200" 
@@ -80,6 +80,6 @@
     
     </header>
     <div x-ref="myOverlay">
-        <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-100 lg:hidden opacity-70"></div>
+        <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>
     </div>
 </div>

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

@@ -11,10 +11,10 @@
                 {{#if ../_isSectionNav}} relative md:top-auto md:left-auto lg:mt-10 w-full transition-all duration-500 ease-in-out
                     {{#unless this.showAsFlyout}}
                         {{#if ../this.selected}}
-                            isSelectedAndOpen  lg:ml-0 z-101 lg:border-b lg:border-blue-congress lg:filter-none lg:left-0 flex justify-center
-                        {{else}} z-102 lg:left-auto lg:w-auto {{/if}}
-                    {{else}} z-102 lg:left-auto lg:w-auto {{/unless}}
-                {{else}} z-102 lg:rounded-b absolute w-full top-10 left-0 md:w-80 lg:w-92 md:top-12 lg:px-4 md:mt-0 md:left-0 lg:top-15 lg:left-0 lg:pl-6 divide-y divide-gray-200 tablet:w-half-screen tablet:ml-half-screen tablet:right-0 tablet:left-auto {{/if}}
+                            isSelectedAndOpen  lg:ml-0 z-10000 lg:border-b lg:border-blue-congress lg:filter-none lg:left-0 flex justify-center
+                        {{else}} z-10002 lg:left-auto lg:w-auto {{/if}}
+                    {{else}} z-10002 lg:left-auto lg:w-auto {{/unless}}
+                {{else}} z-10002 lg:rounded-b absolute w-full top-10 left-0 md:w-80 lg:w-92 md:top-12 lg:px-4 md:mt-0 md:left-0 lg:top-15 lg:left-0 lg:pl-6 divide-y divide-gray-200 tablet:w-half-screen tablet:ml-half-screen tablet:right-0 tablet:left-auto {{/if}}
                 {{#if this.showAsFlyout}} lg:rounded-b lg:pl-4{{/if}}" 
 
         aria-labelledby="flyout-{{getRandom}}-1" 

package/dist/views/components/site_header/navigation_search/quick_search_form.hbs

@@ -3,7 +3,7 @@
     role="search" 
     action="{{resourceUrl "suche/index.nocache"}}" 
     method="get" 
-    class="sb-quick-search-form flex w-full md:justify-end lg:h-10"
+    class="flex w-full sb-quick-search-form md:justify-end lg:h-10"
 >
     <div 
         class="relative w-full lg:rounded-l" 
@@ -65,7 +65,7 @@
     <button 
         aria-label='{{loca "search_input_aria_submit" }}' 
         type="submit" 
-        class="pl-3 pr-2 rounded-r cursor-pointer link-focus-inset bg-blue-congress lg:bg-white text-blue-congress z-102"
+        class="pl-3 pr-2 rounded-r cursor-pointer link-focus-inset bg-blue-congress lg:bg-white text-blue-congress z-10002"
     >
         <svg class="w-6 h-6 text-white fill-current bg-blue-congress lg:fill-current lg:text-blue-congress lg:bg-white" 
              xmlns="http://www.w3.org/2000/svg" 

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

@@ -3,7 +3,7 @@
     @click.outside="$store.serviceNavIsOpen = false; toggleScrolling(!$store.searchFieldOpen && !$store.burgeropen)"
     x-ref="serviceList"
     :class="shouldServiceIconsBeHidden() ? '-mt-40' : ''"
-    class="absolute left-0 flex justify-center flex-initial w-full h-10 max-w-full align-top duration-500 ease-in-out border-t border-white sb-service-list transition-margin-top -z-1000 md:z-101 md:h-12 top-10 bg-blue-congress md:border-0 md:top-auto md:w-auto md:left-auto md:static md:justify-end md:flex md:flex-auto lg:h-16 lg:pl-0 lg:pr-4 lg:w-3/4 "
+    class="absolute left-0 flex justify-center flex-initial w-full h-10 max-w-full align-top duration-500 ease-in-out border-t border-white sb-service-list transition-margin-top -z-1000 md:z-10000 md:h-12 top-10 bg-blue-congress md:border-0 md:top-auto md:w-auto md:left-auto md:static md:justify-end md:flex md:flex-auto lg:h-16 lg:pl-0 lg:pr-4 lg:w-3/4 "
 >
     {{#with this.serviceNavigationSSILinks}}
         <ul class="flex justify-around w-full h-full -itemCount-{{ count }} lg:w-auto lg:justify-end lg:pt-1">

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

@@ -35,7 +35,7 @@
                 <span class="sr-only lg:hidden">{{this.text}}</span>
             </div>
 
-            <div :class="dropped ? 'text-blue-congress fill-current' : 'text-white fill-white'" class="relative flex-row items-center justify-center hidden pt-px text-white lg:flex z-200">
+            <div :class="dropped ? 'text-blue-congress fill-current' : 'text-white fill-white'" class="relative flex-row items-center justify-center hidden pt-px text-white lg:flex z-10002">
                 <div class="flex" >
                     <span class="flex text-xs leading-4 whitespace-nowrap">
                         {{text}} 

package/package.json

@@ -6,7 +6,7 @@
     "license": "MIT",
     "main": "dist/index.js",
     "repository": "https://github.com/szuelch/hr-design-system-handlebars",
-    "version": "0.47.18",
+    "version": "0.47.19",
     "scripts": {
         "test": "echo \"Error: no test specified\" && exit 1",
         "storybook": "start-storybook -p 6006 public",
@@ -34,15 +34,14 @@
     "devDependencies": {
         "@babel/cli": "^7.13.16",
         "@babel/core": "^7.12.10",
-        "@storybook/addon-a11y": "^6.4.19",
-        "@storybook/addon-actions": "^6.4.19",
-        "@storybook/addon-essentials": "^6.4.19",
-        "@storybook/addon-links": "^6.4.19",
+        "@storybook/addon-a11y": "^6.5.9",
+        "@storybook/addon-actions": "^6.5.9",
+        "@storybook/addon-essentials": "^6.5.9",
+        "@storybook/addon-links": "^6.5.9",
         "@storybook/addon-postcss": "^2.0.0",
-        "@storybook/addons": "^6.4.19",
-        "@storybook/html": "^6.4.19",
-        "@storybook/theming": "^6.4.19",
-        "@whitespace/storybook-addon-html": "^5.0.0",
+        "@storybook/addons": "^6.5.9",
+        "@storybook/html": "^6.5.9",
+        "@storybook/theming": "^6.5.9",
         "auto": "^10.26.0",
         "autoprefixer": "^10.4.2",
         "babel-loader": "^8.2.2",
@@ -69,6 +68,7 @@
         "postcss-preset-env": "^7.3.1",
         "prettier": "^2.2.1",
         "rimraf": "^3.0.2",
+        "storybook": "^6.5.9",
         "storybook-conditional-toolbar-selector": "^1.0.3",
         "tailwindcss": "^3.0.23",
         "tailwindcss-important": "^1.0.0",

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

@@ -1,6 +1,6 @@
 <div class="sb-main-navigation" x-data="mainNavigationHandler()" x-init="init()">
 
-    <header class="relative z-101 {{#if this.hasOpenSubNavigation}}lg:h-header-lg-big{{else}}lg:h-header-lg-small{{/if}} md:h-header-md h-header-sm">   
+    <header class="relative z-10000 {{#if this.hasOpenSubNavigation}}lg:h-header-lg-big{{else}}lg:h-header-lg-small{{/if}} md:h-header-md h-header-sm">   
         <div x-data 
             id="headerWrapper"
             @resize.window="resetNav()" 
@@ -13,16 +13,16 @@
             </div>
 
             <div id="brandNavWrapper" 
-                class="relative flex items-center justify-center order-1 w-full bg-white z-101 print:hidden">
+                class="relative flex items-center justify-center order-1 w-full bg-white z-10000 print:hidden">
                 {{> components/site_header/brand_navigation/brand_navigation }} 
             </div>
 
             <div id="serviceNavWrapper" 
                 :class="shouldServiceNavBeHidden() ? '-mt-40' : ''"
                 
-                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-102">   
+                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">   
                 <div id="serviceNavMainContainer" 
-                    class="flex w-full h-10 lg:container md:h-12 lg:px-10 lg:h-16 z-101">
+                    class="flex w-full h-10 lg:container md:h-12 lg:px-10 lg:h-16 z-10001">
 
                     <span id="serviceNavHeadline" class="hidden print:hidden">Service Navigation</span>
 
@@ -54,7 +54,7 @@
                 x-ref="sectionnavigation"
                 @toggle-sectionnav.window="toggleSectionNav"
                 :class="shouldSectionNavBeHidden() ? '-mt-40 md:-mt-40 lg:-mt-40' : ''"  
-                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-100 print:hidden"
+                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"
             >
                 {{> components/site_header/section_navigation/section_navigation }}
             </div>
@@ -62,7 +62,7 @@
             <div x-cloak :class="shouldServiceNavBeHidden() ? 'hidden -mt-40' : ''"
                 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')" 
                 x-show="$store.searchFieldOpen"
-                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-102 lg:hidden print:hidden"
+                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"
                 @search-close.window="$store.searchFieldOpen = false"
                 @click.outside="$store.searchFieldOpen = false; $dispatch('search-mobile-click-outside'); dropped = false; toggleScrolling(!$store.serviceNavIsOpensearchFieldOpen && !$store.burgeropen)"
                 x-transition:enter="transition ease-out duration-200" 
@@ -80,6 +80,6 @@
     
     </header>
     <div x-ref="myOverlay">
-        <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-100 lg:hidden opacity-70"></div>
+        <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>
     </div>
 </div>

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

@@ -11,10 +11,10 @@
                 {{#if ../_isSectionNav}} relative md:top-auto md:left-auto lg:mt-10 w-full transition-all duration-500 ease-in-out
                     {{#unless this.showAsFlyout}}
                         {{#if ../this.selected}}
-                            isSelectedAndOpen  lg:ml-0 z-101 lg:border-b lg:border-blue-congress lg:filter-none lg:left-0 flex justify-center
-                        {{else}} z-102 lg:left-auto lg:w-auto {{/if}}
-                    {{else}} z-102 lg:left-auto lg:w-auto {{/unless}}
-                {{else}} z-102 lg:rounded-b absolute w-full top-10 left-0 md:w-80 lg:w-92 md:top-12 lg:px-4 md:mt-0 md:left-0 lg:top-15 lg:left-0 lg:pl-6 divide-y divide-gray-200 tablet:w-half-screen tablet:ml-half-screen tablet:right-0 tablet:left-auto {{/if}}
+                            isSelectedAndOpen  lg:ml-0 z-10000 lg:border-b lg:border-blue-congress lg:filter-none lg:left-0 flex justify-center
+                        {{else}} z-10002 lg:left-auto lg:w-auto {{/if}}
+                    {{else}} z-10002 lg:left-auto lg:w-auto {{/unless}}
+                {{else}} z-10002 lg:rounded-b absolute w-full top-10 left-0 md:w-80 lg:w-92 md:top-12 lg:px-4 md:mt-0 md:left-0 lg:top-15 lg:left-0 lg:pl-6 divide-y divide-gray-200 tablet:w-half-screen tablet:ml-half-screen tablet:right-0 tablet:left-auto {{/if}}
                 {{#if this.showAsFlyout}} lg:rounded-b lg:pl-4{{/if}}" 
 
         aria-labelledby="flyout-{{getRandom}}-1" 

package/src/stories/views/components/site_header/navigation_search/quick_search_form.hbs

@@ -3,7 +3,7 @@
     role="search" 
     action="{{resourceUrl "suche/index.nocache"}}" 
     method="get" 
-    class="sb-quick-search-form flex w-full md:justify-end lg:h-10"
+    class="flex w-full sb-quick-search-form md:justify-end lg:h-10"
 >
     <div 
         class="relative w-full lg:rounded-l" 
@@ -65,7 +65,7 @@
     <button 
         aria-label='{{loca "search_input_aria_submit" }}' 
         type="submit" 
-        class="pl-3 pr-2 rounded-r cursor-pointer link-focus-inset bg-blue-congress lg:bg-white text-blue-congress z-102"
+        class="pl-3 pr-2 rounded-r cursor-pointer link-focus-inset bg-blue-congress lg:bg-white text-blue-congress z-10002"
     >
         <svg class="w-6 h-6 text-white fill-current bg-blue-congress lg:fill-current lg:text-blue-congress lg:bg-white" 
              xmlns="http://www.w3.org/2000/svg" 

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

@@ -3,7 +3,7 @@
     @click.outside="$store.serviceNavIsOpen = false; toggleScrolling(!$store.searchFieldOpen && !$store.burgeropen)"
     x-ref="serviceList"
     :class="shouldServiceIconsBeHidden() ? '-mt-40' : ''"
-    class="absolute left-0 flex justify-center flex-initial w-full h-10 max-w-full align-top duration-500 ease-in-out border-t border-white sb-service-list transition-margin-top -z-1000 md:z-101 md:h-12 top-10 bg-blue-congress md:border-0 md:top-auto md:w-auto md:left-auto md:static md:justify-end md:flex md:flex-auto lg:h-16 lg:pl-0 lg:pr-4 lg:w-3/4 "
+    class="absolute left-0 flex justify-center flex-initial w-full h-10 max-w-full align-top duration-500 ease-in-out border-t border-white sb-service-list transition-margin-top -z-1000 md:z-10000 md:h-12 top-10 bg-blue-congress md:border-0 md:top-auto md:w-auto md:left-auto md:static md:justify-end md:flex md:flex-auto lg:h-16 lg:pl-0 lg:pr-4 lg:w-3/4 "
 >
     {{#with this.serviceNavigationSSILinks}}
         <ul class="flex justify-around w-full h-full -itemCount-{{ count }} lg:w-auto lg:justify-end lg:pt-1">

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

@@ -35,7 +35,7 @@
                 <span class="sr-only lg:hidden">{{this.text}}</span>
             </div>
 
-            <div :class="dropped ? 'text-blue-congress fill-current' : 'text-white fill-white'" class="relative flex-row items-center justify-center hidden pt-px text-white lg:flex z-200">
+            <div :class="dropped ? 'text-blue-congress fill-current' : 'text-white fill-white'" class="relative flex-row items-center justify-center hidden pt-px text-white lg:flex z-10002">
                 <div class="flex" >
                     <span class="flex text-xs leading-4 whitespace-nowrap">
                         {{text}} 

package/tailwind.config.js

@@ -87,6 +87,9 @@ module.exports = {
                 '101': '101',
                 '102': '102',
                 '103': '103',
+                '10000': '10000',
+                '10001': '10001',
+                '10002': '10002',
                 '-1000': '-1000',
             },
             spacing: {