hr-design-system-handlebars 1.34.2 → 1.34.4

package/CHANGELOG.md

@@ -1,3 +1,27 @@
+# v1.34.4 (Wed Jul 26 2023)
+
+#### 🐛 Bug Fix
+
+- Dpe 2272 [#690](https://github.com/mumprod/hr-design-system-handlebars/pull/690) ([@vascoeduardo](https://github.com/vascoeduardo))
+
+#### Authors: 1
+
+- Vasco ([@vascoeduardo](https://github.com/vascoeduardo))
+
+---
+
+# v1.34.3 (Wed Jul 26 2023)
+
+#### 🐛 Bug Fix
+
+- DPE-2311 Z-Index konsolidieren [#664](https://github.com/mumprod/hr-design-system-handlebars/pull/664) ([@Sunny1112358](https://github.com/Sunny1112358))
+
+#### Authors: 1
+
+- [@Sunny1112358](https://github.com/Sunny1112358)
+
+---
+
 # v1.34.2 (Wed Jul 26 2023)
 
 #### 🐛 Bug Fix

package/dist/assets/index.css

@@ -915,7 +915,7 @@ video {
 }
 /* ---------------- NAV DROPDOWN - CONTENT ------------------ */
 .content-nav-dropdown_content.-isOpen {
-  z-index: 9999;
+  z-index: 100;
   --tw-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -4px rgba(0, 0, 0, 0.1);
   --tw-shadow-colored: 0 10px 15px -3px var(--tw-shadow-color), 0 4px 6px -4px var(--tw-shadow-color);
   box-shadow: 0 0 rgba(0,0,0,0), 0 0 rgba(0,0,0,0), var(--tw-shadow);
@@ -1096,8 +1096,8 @@ video {
 .top-full {
   top: 100%;
 }
-.-z-1000 {
-  z-index: -1000;
+.-z-40 {
+  z-index: -40;
 }
 .z-10 {
   z-index: 10;
@@ -1105,20 +1105,17 @@ video {
 .z-100 {
   z-index: 100;
 }
-.z-10000 {
-  z-index: 10000;
-}
-.z-10001 {
-  z-index: 10001;
+.z-110 {
+  z-index: 110;
 }
-.z-10002 {
-  z-index: 10002;
+.z-120 {
+  z-index: 120;
 }
 .z-20 {
   z-index: 20;
 }
-.z-9999 {
-  z-index: 9999;
+.z-30 {
+  z-index: 30;
 }
 .order-1 {
   order: 1;
@@ -2736,6 +2733,10 @@ video {
   color: #006dc1;
   color: var(--color-subline);
 }
+.text-text {
+  color: #000;
+  color: var(--color-standard-text);
+}
 .text-tickerTeaserFooter {
   color: #ffffff;
   color: var(--color-ticker-teaser-footer);
@@ -2944,7 +2945,7 @@ video {
   border-bottom-color: var(--color-secondary-ds);
 }
 .counter-reset {
-  counter-reset: cnt1690365962927;
+  counter-reset: cnt1690381863847;
 }
 .hyphens-auto {
   -webkit-hyphens: auto;
@@ -3179,7 +3180,7 @@ video {
   --tw-ring-color: rgba(255, 255, 255, 0.5);
 }
 .-ordered {
-  counter-increment: cnt1690365962927 1;
+  counter-increment: cnt1690381863847 1;
 }
 .-ordered::before {
   position: absolute;
@@ -3195,7 +3196,7 @@ video {
   letter-spacing: .0125em;
   --tw-text-opacity: 1;
   color: rgba(0, 0, 0, var(--tw-text-opacity));
-  content: counter(cnt1690365962927);
+  content: counter(cnt1690381863847);
 }
 /*! ****************************/
 /*! text-shadow                */
@@ -3271,6 +3272,9 @@ video {
     --color-highlight-2: #d34600;
     --color-highlight-3: #707070;
 
+    /* Text */
+    --color-standard-text: #000;
+    --color-standard-text-dark: #F0F0F0;
     /* Navigation Hintergrund */
     --color-navigation-bg: #005293;
     --color-brandnavigation-bg: #fff; 
@@ -3346,6 +3350,7 @@ video {
     --color-subline: var(--color-topline);
     /* Link */
     --color-link: #006eb7;
+    --color-link-dark: #006eb7;
     /* Stage */
     --color-stage-text-box: 0 110 183;
     --color-stage-text: #ffffff;
@@ -3394,6 +3399,10 @@ video {
     --color-highlight-2: #d34600;
     --color-highlight-3: #005293;
 
+    /* Text */
+    --color-standard-text: #000;
+    --color-standard-text-dark: #d8e9f6;
+
     /* Logo-Container Padding */
     --logo-padding-top: 6px;
     --logo-padding-bottom: 6px;
@@ -3440,6 +3449,7 @@ video {
     --color-subline: var(--color-topline);
     /* Link */
     --color-link: #006dc1;
+    --color-link-dark: #199bff;
     /*Stage */
     --color-stage-text-box: 67 61 55;
     --color-stage-primary: #005293;
@@ -3516,6 +3526,7 @@ video {
     --color-subline: var(--color-topline);
     /* Link */
     --color-link: #a00d65;
+    --color-link-dark: #a00d65;
     /* Stage */
     --color-stage-text-box: 234 237 237;
     --color-stage-text: #000000;
@@ -3586,6 +3597,7 @@ video {
     --color-subline: var(--color-topline);
     /* Link */
     --color-link: #276b9e;
+    --color-link-dark: #276b9e;
     /* Stage */
     --color-stage-text-box: 0 55 93;
     --color-stage-primary: #00375d;
@@ -3658,6 +3670,7 @@ video {
     --color-subline: var(--color-topline);
     /* Link */
     --color-link: #006eb7;
+    --color-link-dark: #006eb7;
     /* Stage */
     --color-stage-text-box: 0 110 183;
     --color-stage-primary: #006eb7;
@@ -3724,6 +3737,7 @@ video {
     --color-subline: var(--color-topline);
     /* Link */
     --color-link: var(--color-primary-ds);
+    --color-link-dark: var(--color-primary-ds);
     /* Stage */
     --color-stage-text-box: 0 110 183;
     --color-stage-primary: var(--color-primary-ds);
@@ -3804,6 +3818,7 @@ video {
     --color-subline: var(--color-topline);
     /* Link */
     --color-link: #AB2F2D;
+    --color-link-dark: #AB2F2D;
     /* Stage */
     --color-stage-text-box: 141 39 37;
     --color-stage-primary: var(--color-primary-ds);
@@ -3884,6 +3899,7 @@ video {
     --color-subline: var(--color-topline);
     /* Link */
     --color-link: #007A7C;
+    --color-link-dark: #007A7C;
     /* Stage */
     --color-stage-text-box: 67 61 55;
     --color-stage-primary: #00646f;
@@ -3960,6 +3976,7 @@ video {
     --color-subline: var(--color-topline);
     /* Link */
     --color-link: var(--color-primary-ds);
+    --color-link-dark: var(--color-primary-ds);
     /* Stage */
     --color-stage-text-box: 0 110 183;
     --color-stage-primary: var(--color-primary-ds);
@@ -4039,6 +4056,7 @@ video {
     --color-subline: #916B00;
     /* Link */
     --color-link: #916B00;
+    --color-link-dark: #916B00;
     /* Stage */
     --color-stage-text-box: 67 61 55;
     --color-stage-primary: #e0ae00;
@@ -4119,6 +4137,7 @@ video {
     --color-subline: var(--color-topline);
     /* Link */
     --color-link: #8C033D;
+    --color-link-dark: #8C033D;
     /* Stage */
     --color-stage-text-box: 255 255 255;
     --color-stage-primary: var(--color-primary-ds);
@@ -4209,6 +4228,7 @@ video {
     --color-subline: var(--color-topline);
     /* Link */
     --color-link: var(--color-primary-ds);
+    --color-link-dark: var(--color-primary-ds);
     /* Stage */
     --color-stage-text-box: 255 255 255;
     --color-stage-primary: var(--color-primary-ds);
@@ -4296,6 +4316,7 @@ video {
     --color-subline: var(--color-topline);
     /* Link */
     --color-link: #0F6157;
+    --color-link-dark: #0F6157;
     /* Stage */
     --color-stage-text-box: 255 255 255;
     --color-stage-primary: #168378;
@@ -4375,6 +4396,7 @@ video {
     --color-subline: var(--color-topline);
     /* Link */
     --color-link: #006783;
+    --color-link-dark: #006783;
     /* Stage */
     --color-stage-text-box: 255 255 255;
     --color-stage-primary: #f2da6c;
@@ -4717,6 +4739,66 @@ video {
 .after\:col-full::after {
         grid-column: full;
     }
+@media (color-index: 48) {
+
+  .dark\:text-link-dark {
+    color: #006eb7;
+    color: var(--color-link-dark);
+  }
+
+  .dark\:text-text-dark {
+    color: #F0F0F0;
+    color: var(--color-standard-text-dark);
+  }
+}
+@media (color: 48842621) {
+
+  .dark\:text-link-dark {
+    color: #006eb7;
+    color: var(--color-link-dark);
+  }
+
+  .dark\:text-text-dark {
+    color: #F0F0F0;
+    color: var(--color-standard-text-dark);
+  }
+}
+@media (color-index: 48) {
+
+  .dark\:text-link-dark {
+    color: #006eb7;
+    color: var(--color-link-dark);
+  }
+
+  .dark\:text-text-dark {
+    color: #F0F0F0;
+    color: var(--color-standard-text-dark);
+  }
+}
+@media (color: 48842621) {
+
+  .dark\:text-link-dark {
+    color: #006eb7;
+    color: var(--color-link-dark);
+  }
+
+  .dark\:text-text-dark {
+    color: #F0F0F0;
+    color: var(--color-standard-text-dark);
+  }
+}
+@media (prefers-color-scheme: dark) {
+
+  .dark\:text-link-dark {
+    color: #006eb7;
+    color: var(--color-link-dark);
+  }
+
+  .dark\:text-text-dark {
+    color: #F0F0F0;
+    color: var(--color-standard-text-dark);
+  }
+}
 @media print {
 
   .print\:flex {
@@ -4985,8 +5067,8 @@ video {
     top: auto;
   }
 
-  .md\:z-10000 {
-    z-index: 10000;
+  .md\:z-100 {
+    z-index: 100;
   }
 
   .md\:order-2 {

package/dist/views/components/content/social_media_links/social_media_links.hbs

@@ -1,10 +1,10 @@
 {{#with this.socialMediaLinks }}
     <div class="flex">
-        <span class="mr-2 font-bold whitespace-nowrap">{{~loca "social_media_links_text"~}}</span>
+        <span class="mr-2 font-bold whitespace-nowrap text-text dark:text-text-dark">{{~loca "social_media_links_text"~}}</span>
         <ul class="inline">
             {{~#each this~}}
                 <li class="inline mr-1">
-                    {{~#> components/base/link _link=this.link _css="underline text-link" ~}}
+                    {{~#> components/base/link _link=this.link _css="underline text-link dark:text-link-dark" ~}}
                         {{~this.linkText~}}
                         {{~#if this.link.hasIcon~}}
                             {{~> components/base/image/icon _icon=this.link.iconName _iconmap="icons" _addClass="inline -mt-0.5 w-5 h-5 fill-current"~}}

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

@@ -1,5 +1,5 @@
 <div class="sb-main-navigation" x-data="mainNavigationHandler()" x-init="{{#if _useSticky}}start(){{/if}}">
-    <header class="print:hidden relative z-10001 {{#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">   
+    <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"
             @resize.window="resetNav()" 
@@ -13,16 +13,16 @@
             </div>
 
             <div id="brandNavWrapper" 
-                class="box-content relative flex items-center justify-center order-1 w-full bg-white border-b border-brandnavigation-border-color z-10001">
+                class="box-content relative flex items-center justify-center order-1 w-full bg-white border-b border-brandnavigation-border-color z-110">
                 {{> 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 border-b border-navigation-border-color bg-navigation-bg z-10002">   
+                class="relative flex justify-center order-2 w-full transition-all duration-500 ease-in-out border-b border-navigation-border-color bg-navigation-bg z-120">   
                 <div id="serviceNavMainContainer" 
-                    class="flex w-full h-10 lg:container md:h-12 lg:px-10 lg:h-16 z-10001">
+                    class="flex w-full h-10 lg:container md:h-12 lg:px-10 lg:h-16 z-110">
 
                     <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:border-navigation-border-color [border-image-source:var(--border-navigation-border-image)] [border-image-slice:1] lg:border-b-navigation-border-width lg:transition-margin-top lg:duration-500 tablet:absolute tablet:top-20 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-navigation-bg z-10000 print:hidden"
+                class="flex justify-center order-3 w-full overflow-hidden duration-500 transition-max-height lg:border-navigation-border-color [border-image-source:var(--border-navigation-border-image)] [border-image-slice:1] lg:border-b-navigation-border-width lg:transition-margin-top lg:duration-500 tablet:absolute tablet:top-20 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-navigation-bg z-100 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-10002 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-120 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" 
@@ -85,6 +85,6 @@
             />
     </div>
     <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-10000 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-100 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-10000 lg:border-b lg:border-primary 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 divide-y divide-gray-200{{/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 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-100 lg:border-b lg:border-primary lg:filter-none lg:left-0 flex justify-center
+                        {{else}} z-120 lg:left-auto lg:w-auto {{/if}}
+                    {{else}} z-120 lg:left-auto lg:w-auto divide-y divide-gray-200{{/unless}}
+                {{else}} z-120 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 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:px-4 lg:absolute{{else}} lg:fixed{{/if}}" 
 
         aria-labelledby="flyout-{{getRandom}}-1" 

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

@@ -65,7 +65,7 @@
     <button 
         aria-label='{{loca "search_input_aria_submit" }}' 
         type="submit" 
-        class="pl-3 pr-2 border-l cursor-pointer lg:search-border-desktop lg:rounded-r link-focus-inset bg-primary lg:bg-white text-primary z-10002"
+        class="pl-3 pr-2 border-l cursor-pointer lg:search-border-desktop lg:rounded-r link-focus-inset bg-primary lg:bg-white text-primary z-120"
     >
         <svg class="w-6 h-6 text-white fill-current bg-primary lg:fill-current lg:text-primary 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-b border-navigation-border-color sb-service-list transition-margin-top -z-1000 md:z-10000 md:h-12 top-[41px] bg-navigation-bg 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-b border-navigation-border-color sb-service-list transition-margin-top -z-40 md:z-100 md:h-12 top-[41px] bg-navigation-bg 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="{'text-primary fill-current': dropped,'text-navigation-icons fill-white': !dropped}" class="relative flex-row items-center justify-center hidden pt-px text-navigation-icons lg:flex z-10002">
+            <div :class="{'text-primary fill-current': dropped,'text-navigation-icons fill-white': !dropped}" class="relative flex-row items-center justify-center hidden pt-px text-navigation-icons lg:flex z-120">
                 <div class="flex" >
                     <span class="flex text-xs leading-4 whitespace-nowrap">
                         {{text}} 

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

@@ -1,5 +1,5 @@
 {{#if this.commentLink}}
-    <span class="relative whitespace-nowrap z-100">
+    <span class="relative whitespace-nowrap z-30">
         {{#> components/base/link _link=this.commentLink.link _css="hover:underline decoration-1" _isAriaHidden=true}}
             {{> components/base/image/icon _icon="kommentar" _iconmap="icons" _addClass="mr-0.5 inline w-5 h-5 text-toplineColor fill-current"}}
             <span class="sr-only">{{loca "comment_anchor_1"}}</span>

package/dist/views/components/teaser/podcast/podcast_subscribe_button.hbs

@@ -16,7 +16,7 @@
         x-on:keydown.escape.prevent.stop="close($refs.button)"
         x-on:focusin.window="! $refs.panel.contains($event.target) && close()"
         x-id="['dropdown-button']"
-        class="relative h-10 z-9999"
+        class="relative h-10 z-100"
     >
 
     {{!-- Button --}}

package/dist/views_static/components/content/social_media_links/social_media_links.hbs

@@ -1,10 +1,10 @@
 {{#with this.socialMediaLinks }}
     <div class="flex">
-        <span class="mr-2 font-bold whitespace-nowrap">{{~loca "social_media_links_text"~}}</span>
+        <span class="mr-2 font-bold whitespace-nowrap text-text dark:text-text-dark">{{~loca "social_media_links_text"~}}</span>
         <ul class="inline">
             {{~#each this~}}
                 <li class="inline mr-1">
-                    {{~#> components/base/link _link=this.link _css="underline text-link" ~}}
+                    {{~#> components/base/link _link=this.link _css="underline text-link dark:text-link-dark" ~}}
                         {{~this.linkText~}}
                         {{~#if this.link.hasIcon~}}
                             {{~> components/base/image/icon _icon=this.link.iconName _iconmap="icons" _addClass="inline -mt-0.5 w-5 h-5 fill-current"~}}

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

@@ -1,5 +1,5 @@
 <div class="sb-main-navigation" x-data="mainNavigationHandler()" x-init="{{#if _useSticky}}start(){{/if}}">
-    <header class="print:hidden relative z-10001 {{#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">   
+    <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"
             @resize.window="resetNav()" 
@@ -13,16 +13,16 @@
             </div>
 
             <div id="brandNavWrapper" 
-                class="box-content relative flex items-center justify-center order-1 w-full bg-white border-b border-brandnavigation-border-color z-10001">
+                class="box-content relative flex items-center justify-center order-1 w-full bg-white border-b border-brandnavigation-border-color z-110">
                 {{> 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 border-b border-navigation-border-color bg-navigation-bg z-10002">   
+                class="relative flex justify-center order-2 w-full transition-all duration-500 ease-in-out border-b border-navigation-border-color bg-navigation-bg z-120">   
                 <div id="serviceNavMainContainer" 
-                    class="flex w-full h-10 lg:container md:h-12 lg:px-10 lg:h-16 z-10001">
+                    class="flex w-full h-10 lg:container md:h-12 lg:px-10 lg:h-16 z-110">
 
                     <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:border-navigation-border-color [border-image-source:var(--border-navigation-border-image)] [border-image-slice:1] lg:border-b-navigation-border-width lg:transition-margin-top lg:duration-500 tablet:absolute tablet:top-20 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-navigation-bg z-10000 print:hidden"
+                class="flex justify-center order-3 w-full overflow-hidden duration-500 transition-max-height lg:border-navigation-border-color [border-image-source:var(--border-navigation-border-image)] [border-image-slice:1] lg:border-b-navigation-border-width lg:transition-margin-top lg:duration-500 tablet:absolute tablet:top-20 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-navigation-bg z-100 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-10002 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-120 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" 
@@ -85,6 +85,6 @@
             />
     </div>
     <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-10000 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-100 lg:hidden opacity-70"></div>
     </div>
 </div>

package/dist/views_static/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-10000 lg:border-b lg:border-primary 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 divide-y divide-gray-200{{/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 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-100 lg:border-b lg:border-primary lg:filter-none lg:left-0 flex justify-center
+                        {{else}} z-120 lg:left-auto lg:w-auto {{/if}}
+                    {{else}} z-120 lg:left-auto lg:w-auto divide-y divide-gray-200{{/unless}}
+                {{else}} z-120 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 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:px-4 lg:absolute{{else}} lg:fixed{{/if}}" 
 
         aria-labelledby="flyout-{{getRandom}}-1" 

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

@@ -65,7 +65,7 @@
     <button 
         aria-label='{{loca "search_input_aria_submit" }}' 
         type="submit" 
-        class="pl-3 pr-2 border-l cursor-pointer lg:search-border-desktop lg:rounded-r link-focus-inset bg-primary lg:bg-white text-primary z-10002"
+        class="pl-3 pr-2 border-l cursor-pointer lg:search-border-desktop lg:rounded-r link-focus-inset bg-primary lg:bg-white text-primary z-120"
     >
         <svg class="w-6 h-6 text-white fill-current bg-primary lg:fill-current lg:text-primary lg:bg-white" 
              xmlns="http://www.w3.org/2000/svg" 

package/dist/views_static/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-b border-navigation-border-color sb-service-list transition-margin-top -z-1000 md:z-10000 md:h-12 top-[41px] bg-navigation-bg 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-b border-navigation-border-color sb-service-list transition-margin-top -z-40 md:z-100 md:h-12 top-[41px] bg-navigation-bg 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_static/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="{'text-primary fill-current': dropped,'text-navigation-icons fill-white': !dropped}" class="relative flex-row items-center justify-center hidden pt-px text-navigation-icons lg:flex z-10002">
+            <div :class="{'text-primary fill-current': dropped,'text-navigation-icons fill-white': !dropped}" class="relative flex-row items-center justify-center hidden pt-px text-navigation-icons lg:flex z-120">
                 <div class="flex" >
                     <span class="flex text-xs leading-4 whitespace-nowrap">
                         {{text}} 

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

@@ -1,5 +1,5 @@
 {{#if this.commentLink}}
-    <span class="relative whitespace-nowrap z-100">
+    <span class="relative whitespace-nowrap z-30">
         {{#> components/base/link _link=this.commentLink.link _css="hover:underline decoration-1" _isAriaHidden=true}}
             {{> components/base/image/icon _icon="kommentar" _iconmap="icons" _addClass="mr-0.5 inline w-5 h-5 text-toplineColor fill-current"}}
             <span class="sr-only">{{loca "comment_anchor_1"}}</span>

package/dist/views_static/components/teaser/podcast/podcast_subscribe_button.hbs

@@ -16,7 +16,7 @@
         x-on:keydown.escape.prevent.stop="close($refs.button)"
         x-on:focusin.window="! $refs.panel.contains($event.target) && close()"
         x-id="['dropdown-button']"
-        class="relative h-10 z-9999"
+        class="relative h-10 z-100"
     >
 
     {{!-- 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.34.2",
+    "version": "1.34.4",
     "scripts": {
         "test": "echo \"Error: no test specified\" && exit 1",
         "storybook": "storybook dev -p 6006 public",

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

@@ -249,7 +249,7 @@
     }
     /* ---------------- NAV DROPDOWN - CONTENT ------------------ */
     .content-nav-dropdown_content.-isOpen {
-        @apply z-9999;
+        @apply z-100;
         @apply shadow-lg;
     }
 

package/src/assets/tailwind.css

@@ -14,6 +14,9 @@
     --color-highlight-2: theme('colors.orange.spicyCarrot');
     --color-highlight-3: theme('colors.gray.dark');
 
+    /* Text */
+    --color-standard-text: #000;
+    --color-standard-text-dark: #F0F0F0;
     /* Navigation Hintergrund */
     --color-navigation-bg: theme('colors.blue.congress');
     --color-brandnavigation-bg: #fff; 
@@ -89,6 +92,7 @@
     --color-subline: var(--color-topline);
     /* Link */
     --color-link: theme('colors.blue.deepCerulean');
+    --color-link-dark: theme('colors.blue.deepCerulean');
     /* Stage */
     --color-stage-text-box: 0 110 183;
     --color-stage-text: theme('colors.white.DEFAULT');
@@ -138,6 +142,10 @@
     --color-highlight-2: theme('colors.orange.spicyCarrot');
     --color-highlight-3: theme('colors.blue.congress');
 
+    /* Text */
+    --color-standard-text: #000;
+    --color-standard-text-dark: #d8e9f6;
+
     /* Logo-Container Padding */
     --logo-padding-top: 6px;
     --logo-padding-bottom: 6px;
@@ -179,11 +187,12 @@
     /* Eventkalender */
     --color-eventcalendar-primary: var(--color-primary-ds);
     /* Dachzeile */
-    --color-topline: #006dc1;
+    --color-topline: theme('colors.blue.science');
     /* Subline */
     --color-subline: var(--color-topline);
     /* Link */
     --color-link: theme('colors.blue.science');
+    --color-link-dark: #199bff;
     /*Stage */
     --color-stage-text-box: 67 61 55;
     --color-stage-primary: theme('colors.blue.congress');
@@ -262,6 +271,7 @@
     --color-subline: var(--color-topline);
     /* Link */
     --color-link: theme('colors.purple.jazzberry');
+    --color-link-dark: theme('colors.purple.jazzberry');
     /* Stage */
     --color-stage-text-box: 234 237 237;
     --color-stage-text: theme('colors.black.DEFAULT');
@@ -333,6 +343,7 @@
     --color-subline: var(--color-topline);
     /* Link */
     --color-link: theme('colors.blue.jellyBean');
+    --color-link-dark: theme('colors.blue.jellyBean');
     /* Stage */
     --color-stage-text-box: 0 55 93;
     --color-stage-primary: theme('colors.blue.astronautBlue');
@@ -406,6 +417,7 @@
     --color-subline: var(--color-topline);
     /* Link */
     --color-link: theme('colors.blue.deepCerulean');
+    --color-link-dark: theme('colors.blue.deepCerulean');
     /* Stage */
     --color-stage-text-box: 0 110 183;
     --color-stage-primary: theme('colors.blue.deepCerulean');
@@ -473,6 +485,7 @@
     --color-subline: var(--color-topline);
     /* Link */
     --color-link: var(--color-primary-ds);
+    --color-link-dark: var(--color-primary-ds);
     /* Stage */
     --color-stage-text-box: 0 110 183;
     --color-stage-primary: var(--color-primary-ds);
@@ -554,6 +567,7 @@
     --color-subline: var(--color-topline);
     /* Link */
     --color-link: theme('colors.red.wellRead');
+    --color-link-dark: theme('colors.red.wellRead');
     /* Stage */
     --color-stage-text-box: 141 39 37;
     --color-stage-primary: var(--color-primary-ds);
@@ -635,6 +649,7 @@
     --color-subline: var(--color-topline);
     /* Link */
     --color-link: theme('colors.green.teal');
+    --color-link-dark: theme('colors.green.teal');
     /* Stage */
     --color-stage-text-box: 67 61 55;
     --color-stage-primary: theme('colors.blue.blueStone');
@@ -712,6 +727,7 @@
     --color-subline: var(--color-topline);
     /* Link */
     --color-link: var(--color-primary-ds);
+    --color-link-dark: var(--color-primary-ds);
     /* Stage */
     --color-stage-text-box: 0 110 183;
     --color-stage-primary: var(--color-primary-ds);
@@ -792,6 +808,7 @@
     --color-subline: theme('colors.yellow.olive');
     /* Link */
     --color-link: theme('colors.yellow.olive');
+    --color-link-dark: theme('colors.yellow.olive');
     /* Stage */
     --color-stage-text-box: 67 61 55;
     --color-stage-primary: theme('colors.yellow.corn');
@@ -873,6 +890,7 @@
     --color-subline: var(--color-topline);
     /* Link */
     --color-link: theme('colors.red.paprika');
+    --color-link-dark: theme('colors.red.paprika');
     /* Stage */
     --color-stage-text-box: 255 255 255;
     --color-stage-primary: var(--color-primary-ds);
@@ -964,6 +982,7 @@
     --color-subline: var(--color-topline);
     /* Link */
     --color-link: var(--color-primary-ds);
+    --color-link-dark: var(--color-primary-ds);
     /* Stage */
     --color-stage-text-box: 255 255 255;
     --color-stage-primary: var(--color-primary-ds);
@@ -1052,6 +1071,7 @@
     --color-subline: var(--color-topline);
     /* Link */
     --color-link: theme('colors.green.eden');
+    --color-link-dark: theme('colors.green.eden');
     /* Stage */
     --color-stage-text-box: 255 255 255;
     --color-stage-primary: theme('colors.green.genoa');
@@ -1132,6 +1152,7 @@
     --color-subline: var(--color-topline);
     /* Link */
     --color-link: theme('colors.blue.sea');
+    --color-link-dark: theme('colors.blue.sea');
     /* Stage */
     --color-stage-text-box: 255 255 255;
     --color-stage-primary: theme('colors.yellow.goldenSand');

package/src/stories/conventions-and-datastructure.mdx

@@ -12,6 +12,7 @@ import { Meta, Canvas } from '@storybook/addon-docs'
     -   [JSON](#json)
 -   [Konventionen beim Bau von Komponenten](#konventionen-beim-bau-von-komponentenn)
     -   [Styling von Komponenten](#styling-von-komponenten)
+    -   [Ausrichtung mit z-index](#ausrichtung-mit-z-index)
     -   [Wiederverwendbarkeit und Erweiterbarkeit von Komponenten](#wiederverwendbarkeit-und-erweiterbarkeit-von-komponenten)
 
 ## Übersicht
@@ -321,7 +322,23 @@ Ansatz mit mehreren CSS Eigenschaften pro Klasse.
 Nachteil ist jedoch, dass alle CSS Logik auf diese Weise in die Templates verlagert wird und diese auf den ersten
 Blick recht unübersichtlich wirken können.
 
-#### Definition eigener CSS Klassen
+### Ausrichtung mit z-index
+
+Die Eigenschaft z-index gibt an, in welcher Reihenfolge Elemente auf dem Ausgabemedium von hinten nach vorne angeordnet werden. Das ist von Bedeutung, wenn die Elemente sich überlappen. 
+Elemente mit einem größeren z-index liegen dabei näher am Betrachter und können Elemente mit kleinerem z-index überlagern. 
+
+Das z-index-Attribut kann folgende Werte besitzen:
+
+| Range / Value        | Elements                                                                                                                                                                                                                                                                                          |
+| :------------------- | :----------------------------------------- |
+| 99                   | Toplink                                    |
+| 1 - 99               | Content                                    |
+| 100 - 199            | Navi                                       |
+| 200 - 299            | Radioplayer                                |
+| 300                  | Modal                                      |
+
+
+### Definition eigener CSS Klassen
 
 Tailwind CSS gestattet es auch sehr einfach eigene CSS Klassen zu schreiben. Sollte es für eine bestimmte CSS Eigenschaft
 noch keine eigene Utility Klasse geben, kann diese problemlos in der Datei `custom-utilities.css` definiert werden.

package/src/stories/views/components/content/social_media_links/social_media_links.hbs

@@ -1,10 +1,10 @@
 {{#with this.socialMediaLinks }}
     <div class="flex">
-        <span class="mr-2 font-bold whitespace-nowrap">{{~loca "social_media_links_text"~}}</span>
+        <span class="mr-2 font-bold whitespace-nowrap text-text dark:text-text-dark">{{~loca "social_media_links_text"~}}</span>
         <ul class="inline">
             {{~#each this~}}
                 <li class="inline mr-1">
-                    {{~#> components/base/link _link=this.link _css="underline text-link" ~}}
+                    {{~#> components/base/link _link=this.link _css="underline text-link dark:text-link-dark" ~}}
                         {{~this.linkText~}}
                         {{~#if this.link.hasIcon~}}
                             {{~> components/base/image/icon _icon=this.link.iconName _iconmap="icons" _addClass="inline -mt-0.5 w-5 h-5 fill-current"~}}

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

@@ -1,5 +1,5 @@
 <div class="sb-main-navigation" x-data="mainNavigationHandler()" x-init="{{#if _useSticky}}start(){{/if}}">
-    <header class="print:hidden relative z-10001 {{#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">   
+    <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"
             @resize.window="resetNav()" 
@@ -13,16 +13,16 @@
             </div>
 
             <div id="brandNavWrapper" 
-                class="box-content relative flex items-center justify-center order-1 w-full bg-white border-b border-brandnavigation-border-color z-10001">
+                class="box-content relative flex items-center justify-center order-1 w-full bg-white border-b border-brandnavigation-border-color z-110">
                 {{> 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 border-b border-navigation-border-color bg-navigation-bg z-10002">   
+                class="relative flex justify-center order-2 w-full transition-all duration-500 ease-in-out border-b border-navigation-border-color bg-navigation-bg z-120">   
                 <div id="serviceNavMainContainer" 
-                    class="flex w-full h-10 lg:container md:h-12 lg:px-10 lg:h-16 z-10001">
+                    class="flex w-full h-10 lg:container md:h-12 lg:px-10 lg:h-16 z-110">
 
                     <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:border-navigation-border-color [border-image-source:var(--border-navigation-border-image)] [border-image-slice:1] lg:border-b-navigation-border-width lg:transition-margin-top lg:duration-500 tablet:absolute tablet:top-20 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-navigation-bg z-10000 print:hidden"
+                class="flex justify-center order-3 w-full overflow-hidden duration-500 transition-max-height lg:border-navigation-border-color [border-image-source:var(--border-navigation-border-image)] [border-image-slice:1] lg:border-b-navigation-border-width lg:transition-margin-top lg:duration-500 tablet:absolute tablet:top-20 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-navigation-bg z-100 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-10002 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-120 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" 
@@ -85,6 +85,6 @@
             />
     </div>
     <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-10000 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-100 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-10000 lg:border-b lg:border-primary 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 divide-y divide-gray-200{{/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 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-100 lg:border-b lg:border-primary lg:filter-none lg:left-0 flex justify-center
+                        {{else}} z-120 lg:left-auto lg:w-auto {{/if}}
+                    {{else}} z-120 lg:left-auto lg:w-auto divide-y divide-gray-200{{/unless}}
+                {{else}} z-120 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 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:px-4 lg:absolute{{else}} lg:fixed{{/if}}" 
 
         aria-labelledby="flyout-{{getRandom}}-1" 

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

@@ -65,7 +65,7 @@
     <button 
         aria-label='{{loca "search_input_aria_submit" }}' 
         type="submit" 
-        class="pl-3 pr-2 border-l cursor-pointer lg:search-border-desktop lg:rounded-r link-focus-inset bg-primary lg:bg-white text-primary z-10002"
+        class="pl-3 pr-2 border-l cursor-pointer lg:search-border-desktop lg:rounded-r link-focus-inset bg-primary lg:bg-white text-primary z-120"
     >
         <svg class="w-6 h-6 text-white fill-current bg-primary lg:fill-current lg:text-primary 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-b border-navigation-border-color sb-service-list transition-margin-top -z-1000 md:z-10000 md:h-12 top-[41px] bg-navigation-bg 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-b border-navigation-border-color sb-service-list transition-margin-top -z-40 md:z-100 md:h-12 top-[41px] bg-navigation-bg 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="{'text-primary fill-current': dropped,'text-navigation-icons fill-white': !dropped}" class="relative flex-row items-center justify-center hidden pt-px text-navigation-icons lg:flex z-10002">
+            <div :class="{'text-primary fill-current': dropped,'text-navigation-icons fill-white': !dropped}" class="relative flex-row items-center justify-center hidden pt-px text-navigation-icons lg:flex z-120">
                 <div class="flex" >
                     <span class="flex text-xs leading-4 whitespace-nowrap">
                         {{text}} 

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

@@ -1,5 +1,5 @@
 {{#if this.commentLink}}
-    <span class="relative whitespace-nowrap z-100">
+    <span class="relative whitespace-nowrap z-30">
         {{#> components/base/link _link=this.commentLink.link _css="hover:underline decoration-1" _isAriaHidden=true}}
             {{> components/base/image/icon _icon="kommentar" _iconmap="icons" _addClass="mr-0.5 inline w-5 h-5 text-toplineColor fill-current"}}
             <span class="sr-only">{{loca "comment_anchor_1"}}</span>

package/src/stories/views/components/teaser/podcast/podcast_subscribe_button.hbs

@@ -16,7 +16,7 @@
         x-on:keydown.escape.prevent.stop="close($refs.button)"
         x-on:focusin.window="! $refs.panel.contains($event.target) && close()"
         x-id="['dropdown-button']"
-        class="relative h-10 z-9999"
+        class="relative h-10 z-100"
     >
 
     {{!-- Button --}}

package/tailwind.config.js

@@ -107,18 +107,8 @@ module.exports = {
                 '0': '0',
                 '50': '50',
                 '100': '100',
-                '101': '101',
-                '102': '102',
-                '103': '103',
-                '1000': '1000',
-                '1001': '1001',
-                '1002': '1002',
-                '1003': '1003',
-                '9999': '9999',
-                '10000': '10000',
-                '10001': '10001',
-                '10002': '10002',
-                '-1000': '-1000',
+                '110': '110',
+                '120': '120'
             },
             spacing: {
                 '9.5': '2.375rem',
@@ -342,7 +332,8 @@ module.exports = {
                 'highlight-2': 'var(--color-highlight-2)',
                 'highlight-3': 'var(--color-highlight-3)',
                 'top-topic-background': 'var(--color-top-topic-background)',
-
+                'text': 'var(--color-standard-text)',
+                'text-dark': 'var(--color-standard-text-dark)',
                 'navigation-bg': 'var(--color-navigation-bg)',
                 'navigation-icons': 'var(--color-navigation-icons)',
                 'navigation-text': 'var(--color-navigation-text)',
@@ -369,6 +360,7 @@ module.exports = {
                 'toplineColor': 'var(--color-topline)',
                 'subline': 'var(--color-subline)',
                 'link': 'var(--color-link)',
+                'link-dark': 'var(--color-link-dark)',
                 'stageLink': 'var(--color-stage-link)',
                 'stageTextBox': 'rgb(var(--color-stage-text-box) / <alpha-value>)',
                 'stageText': 'var(--color-stage-text)',