diff --git a/package-lock.json b/package-lock.json
index f7851422..b3b537a2 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -53,7 +53,6 @@
         "smoothscroll-polyfill": "^0.4.4",
         "tailwindcss": "^3.1.8",
         "tailwindcss-alt": "^3.0.0",
-        "tinycolor2": "^1.4.2",
         "vue-custom-element": "^3.3.0",
         "vue-loader": "^15.9.8",
         "vue-template-compiler": "^2.6.14"
@@ -7917,15 +7916,6 @@
       "integrity": "sha512-eHY7nBftgThBqOyHGVN+l8gF0BucP09fMo0oO/Lb0w1OF80dJv+lDVpXG60WMQvkcxAkNybKsrEIE3ZtKGmPrA==",
       "dev": true
     },
-    "node_modules/tinycolor2": {
-      "version": "1.4.2",
-      "resolved": "https://registry.npmjs.org/tinycolor2/-/tinycolor2-1.4.2.tgz",
-      "integrity": "sha512-vJhccZPs965sV/L2sU4oRQVAos0pQXwsvTLkWYdqJ+a8Q5kPFzJTuOFwy7UniPli44NKQGAglksjvOcpo95aZA==",
-      "dev": true,
-      "engines": {
-        "node": "*"
-      }
-    },
     "node_modules/tmp": {
       "version": "0.2.1",
       "resolved": "https://registry.npmjs.org/tmp/-/tmp-0.2.1.tgz",
@@ -14534,12 +14524,6 @@
       "integrity": "sha512-eHY7nBftgThBqOyHGVN+l8gF0BucP09fMo0oO/Lb0w1OF80dJv+lDVpXG60WMQvkcxAkNybKsrEIE3ZtKGmPrA==",
       "dev": true
     },
-    "tinycolor2": {
-      "version": "1.4.2",
-      "resolved": "https://registry.npmjs.org/tinycolor2/-/tinycolor2-1.4.2.tgz",
-      "integrity": "sha512-vJhccZPs965sV/L2sU4oRQVAos0pQXwsvTLkWYdqJ+a8Q5kPFzJTuOFwy7UniPli44NKQGAglksjvOcpo95aZA==",
-      "dev": true
-    },
     "tmp": {
       "version": "0.2.1",
       "resolved": "https://registry.npmjs.org/tmp/-/tmp-0.2.1.tgz",
diff --git a/package.json b/package.json
index 6e274b26..d930dc7a 100644
--- a/package.json
+++ b/package.json
@@ -56,7 +56,6 @@
     "smoothscroll-polyfill": "^0.4.4",
     "tailwindcss": "^3.1.8",
     "tailwindcss-alt": "^3.0.0",
-    "tinycolor2": "^1.4.2",
     "vue-custom-element": "^3.3.0",
     "vue-loader": "^15.9.8",
     "vue-template-compiler": "^2.6.14"
diff --git a/public/typo3conf/ext/ep_theme/Resources/Private/Assets/js/components/GroupsPriceCalculator.vue b/public/typo3conf/ext/ep_theme/Resources/Private/Assets/js/components/GroupsPriceCalculator.vue
index 8f5c7af2..11bafa72 100644
--- a/public/typo3conf/ext/ep_theme/Resources/Private/Assets/js/components/GroupsPriceCalculator.vue
+++ b/public/typo3conf/ext/ep_theme/Resources/Private/Assets/js/components/GroupsPriceCalculator.vue
@@ -210,7 +210,7 @@
         <div class="py-8 text-xl text-center font-bold" v-show="submitted">
             Vielen Dank für Ihre Anfrage. Wir werden diese schnellstmöglich bearbeiten.
         </div>
-        <div class="fixed top-0 left-0 inset-0 bg-overlay-white flex items-center justify-center" v-show="processing">
+        <div class="fixed top-0 left-0 inset-0 bg-white/85 flex items-center justify-center" v-show="processing">
             <img :src="loaderUri" alt="Loading...">
         </div>
     </div>
diff --git a/public/typo3conf/ext/ep_theme/Resources/Private/Assets/js/myep/App.vue b/public/typo3conf/ext/ep_theme/Resources/Private/Assets/js/myep/App.vue
index e2a001c4..bdf3f0cf 100644
--- a/public/typo3conf/ext/ep_theme/Resources/Private/Assets/js/myep/App.vue
+++ b/public/typo3conf/ext/ep_theme/Resources/Private/Assets/js/myep/App.vue
@@ -21,7 +21,7 @@
         <div class="p-4 mb-8 text-white" :class="{'bg-emerald-600': alert.success, 'bg-red-600': !alert.success}" v-if="alert.message" v-html="alert.message"></div>
         <div class="relative">
             <router-view @loaded="scrollTop()"></router-view>
-            <div class="absolute top-0 left-0 inset-0 bg-overlay-white" v-show="loading">
+            <div class="absolute top-0 left-0 inset-0 bg-white/85" v-show="loading">
                 <div class="absolute top-1/2 left-1/2 transform -translate-xy-1/2 flex items-center space-x-2 h-8">
                     <img :src="config.loaderUrl" alt="" class="block w-4 h-4">
                     <span v-text="statusMessage"></span>
diff --git a/public/typo3conf/ext/ep_theme/Resources/Private/Assets/scss/base/_rte-content.scss b/public/typo3conf/ext/ep_theme/Resources/Private/Assets/scss/base/_rte-content.scss
index 0d460060..ea9f4176 100644
--- a/public/typo3conf/ext/ep_theme/Resources/Private/Assets/scss/base/_rte-content.scss
+++ b/public/typo3conf/ext/ep_theme/Resources/Private/Assets/scss/base/_rte-content.scss
@@ -64,7 +64,7 @@ tbody {
 }
 
 th {
-    @apply border-r border-overlay-white-50 px-2 py-1 md:p-2 text-left text-sm md:text-base;
+    @apply border-r border-white/50 px-2 py-1 md:p-2 text-left text-sm md:text-base;
 }
 
 td {
diff --git a/public/typo3conf/ext/ep_theme/Resources/Private/Assets/scss/components/_tiles.scss b/public/typo3conf/ext/ep_theme/Resources/Private/Assets/scss/components/_tiles.scss
index f2ce7dda..6424e150 100644
--- a/public/typo3conf/ext/ep_theme/Resources/Private/Assets/scss/components/_tiles.scss
+++ b/public/typo3conf/ext/ep_theme/Resources/Private/Assets/scss/components/_tiles.scss
@@ -37,7 +37,7 @@
     }
 
     &:hover:after {
-        @apply sbw:bg-sbw-overlay-secondary uch:bg-uch-overlay-secondary;
+        @apply sbw:bg-sbw-overlay/55 uch:bg-uch-overlay/55;
     }
 }
 
diff --git a/public/typo3conf/ext/ep_theme/Resources/Private/Assets/scss/components/_topnav.scss b/public/typo3conf/ext/ep_theme/Resources/Private/Assets/scss/components/_topnav.scss
index 1496ce71..24b357d3 100644
--- a/public/typo3conf/ext/ep_theme/Resources/Private/Assets/scss/components/_topnav.scss
+++ b/public/typo3conf/ext/ep_theme/Resources/Private/Assets/scss/components/_topnav.scss
@@ -7,6 +7,6 @@
 }
 
 .topnav__item {
-    @apply flex items-center justify-center w-16 h-8 text-white hover:text-white focus:text-white hover:bg-ep-secondary border-l border-r border-overlay-white-50;
+    @apply flex items-center justify-center w-16 h-8 text-white hover:text-white focus:text-white hover:bg-ep-secondary border-l border-r border-white/50;
     @apply ser:hover:bg-ser-secondary;
 }
diff --git a/public/typo3conf/ext/ep_theme/Resources/Private/Partials/Badge.html b/public/typo3conf/ext/ep_theme/Resources/Private/Partials/Badge.html
index 2fcb80e6..42b312ce 100644
--- a/public/typo3conf/ext/ep_theme/Resources/Private/Partials/Badge.html
+++ b/public/typo3conf/ext/ep_theme/Resources/Private/Partials/Badge.html
@@ -10,7 +10,7 @@
                  xmlns="http://www.w3.org/2000/svg"
                  preserveAspectRatio="xMinYMin meet"
                  class="w-full h-full">
-                <circle fill="currentColor" class="text-ep-primary-50" cx="100" cy="100" r="100"/>
+                <circle fill="currentColor" class="text-ep-primary/50" cx="100" cy="100" r="100"/>
                 <circle fill="currentColor" class="text-ep-primary" cx="100" cy="100" r="70"/>
             </svg>
             <div class="absolute top-0 left-0 inset-0 flex flex-col items-center justify-center p-8">
diff --git a/public/typo3conf/ext/ep_theme/Resources/Private/Partials/Concept/Teaser.html b/public/typo3conf/ext/ep_theme/Resources/Private/Partials/Concept/Teaser.html
index 52febfd4..27cd1bfa 100644
--- a/public/typo3conf/ext/ep_theme/Resources/Private/Partials/Concept/Teaser.html
+++ b/public/typo3conf/ext/ep_theme/Resources/Private/Partials/Concept/Teaser.html
@@ -33,7 +33,7 @@
                         </f:else>
                     </f:if>
                 </f:alias>
-                <div class="absolute top-0 left-0 inset-0 bg-concept-{concept.code}-overlay">
+                <div class="absolute top-0 left-0 inset-0 bg-concept-{concept.code}/70">
                     <div class="flex h-full w-full p-4 items-end headline--3 text-white">
                         {concept.name}
                     </div>
diff --git a/public/typo3conf/ext/ep_theme/Resources/Private/Partials/Disrupter/Large.html b/public/typo3conf/ext/ep_theme/Resources/Private/Partials/Disrupter/Large.html
index 74cad9bb..f592b760 100644
--- a/public/typo3conf/ext/ep_theme/Resources/Private/Partials/Disrupter/Large.html
+++ b/public/typo3conf/ext/ep_theme/Resources/Private/Partials/Disrupter/Large.html
@@ -3,7 +3,7 @@
       xmlns:ep="http://typo3.org/ns/EP/EpTheme/ViewHelpers"
       xmlns:f="http://typo3.org/ns/fluid/ViewHelpers">
 
-    <div class="{ep:themeClasses(classes: '{ep: \'bg-ep-primary-dark\', sbw: \'bg-sbw-primary-80\', snz: \'bg-snz-primary-80\', uch: \'bg-uch-primary-80\'}', key: settings.themekey)} my-2">
+    <div class="{ep:themeClasses(classes: '{ep: \'bg-ep-primary-dark\', sbw: \'bg-sbw-primary/80\', snz: \'bg-snz-primary/80\', uch: \'bg-uch-primary/80\'}', key: settings.themekey)} my-2">
         <f:if condition="{settings.themeKey} == 'ep'">
             <f:render partial="Disrupter/Outlines"
                       section="Top1"
diff --git a/public/typo3conf/ext/ep_theme/Resources/Private/Partials/Disrupter/Small.html b/public/typo3conf/ext/ep_theme/Resources/Private/Partials/Disrupter/Small.html
index 53e7d39e..01ec8e70 100644
--- a/public/typo3conf/ext/ep_theme/Resources/Private/Partials/Disrupter/Small.html
+++ b/public/typo3conf/ext/ep_theme/Resources/Private/Partials/Disrupter/Small.html
@@ -3,7 +3,7 @@
       xmlns:ep="http://typo3.org/ns/EP/EpTheme/ViewHelpers"
       xmlns:f="http://typo3.org/ns/fluid/ViewHelpers">
 
-    <div class="{ep:themeClasses(classes: '{ep: \'bg-ep-primary-dark\', sbw: \'bg-sbw-primary-80\', snz: \'bg-snz-primary-80\', uch: \'bg-uch-primary-80\'}', key: settings.themekey)} my-2">
+    <div class="{ep:themeClasses(classes: '{ep: \'bg-ep-primary-dark\', sbw: \'bg-sbw-primary/80\', snz: \'bg-snz-primary/80\', uch: \'bg-uch-primary/80\'}', key: settings.themekey)} my-2">
         <f:render partial="Disrupter/Outlines"
                   section="Top1"
                   arguments="{classes: 'hidden md:block -translate-y-2 {f:if(condition: \'{background} == 1 || {background} == 3\', then: \'text-ep-primary-bg\', else: \'text-white\')}'}"/>
diff --git a/public/typo3conf/ext/ep_theme/Resources/Private/Partials/Disturber/Large.html b/public/typo3conf/ext/ep_theme/Resources/Private/Partials/Disturber/Large.html
index 73db184a..ca681349 100644
--- a/public/typo3conf/ext/ep_theme/Resources/Private/Partials/Disturber/Large.html
+++ b/public/typo3conf/ext/ep_theme/Resources/Private/Partials/Disturber/Large.html
@@ -4,7 +4,7 @@
       xmlns:ep="http://typo3.org/ns/EP/EpTheme/ViewHelpers"
       xmlns:f="http://typo3.org/ns/fluid/ViewHelpers">
 
-    <div class="{ep:themeClasses(classes: '{ep: \'bg-ep-primary-dark\', sbw: \'bg-sbw-primary-80\', snz: \'bg-snz-primary-80\', uch: \'bg-uch-primary-80\'}', key: settings.themekey)} my-2">
+    <div class="{ep:themeClasses(classes: '{ep: \'bg-ep-primary-dark\', sbw: \'bg-sbw-primary/80\', snz: \'bg-snz-primary/80\', uch: \'bg-uch-primary/80\'}', key: settings.themekey)} my-2">
         <f:if condition="{settings.themeKey} == 'ep'">
             <f:render partial="Disrupter/Outlines"
                       section="Top1"
diff --git a/public/typo3conf/ext/ep_theme/Resources/Private/Partials/Disturber/Small.html b/public/typo3conf/ext/ep_theme/Resources/Private/Partials/Disturber/Small.html
index feb1387e..e02caaf1 100644
--- a/public/typo3conf/ext/ep_theme/Resources/Private/Partials/Disturber/Small.html
+++ b/public/typo3conf/ext/ep_theme/Resources/Private/Partials/Disturber/Small.html
@@ -3,7 +3,7 @@
       xmlns:ep="http://typo3.org/ns/EP/EpTheme/ViewHelpers"
       xmlns:f="http://typo3.org/ns/fluid/ViewHelpers">
 
-    <div class="{ep:themeClasses(classes: '{ep: \'bg-ep-primary-dark\', sbw: \'bg-sbw-primary-80\', snz: \'bg-snz-primary-80\', uch: \'bg-uch-primary-80\'}', key: settings.themekey)} my-2">
+    <div class="{ep:themeClasses(classes: '{ep: \'bg-ep-primary-dark\', sbw: \'bg-sbw-primary/80\', snz: \'bg-snz-primary/80\', uch: \'bg-uch-primary/80\'}', key: settings.themekey)} my-2">
         <f:render partial="Disrupter/Outlines"
                   section="Top1"
                   arguments="{classes: 'hidden md:block -translate-y-2 {f:if(condition: \'{data.tx_eptheme_background} == 1 || {data.tx_eptheme_background} == 3\', then: \'text-ep-primary-bg\', else: \'text-white\')}'}"/>
diff --git a/public/typo3conf/ext/ep_theme/Resources/Private/Partials/EventDisturber.html b/public/typo3conf/ext/ep_theme/Resources/Private/Partials/EventDisturber.html
index dc55413b..8a4a29c4 100644
--- a/public/typo3conf/ext/ep_theme/Resources/Private/Partials/EventDisturber.html
+++ b/public/typo3conf/ext/ep_theme/Resources/Private/Partials/EventDisturber.html
@@ -5,7 +5,7 @@
 
     <div class="container lg:max-w-screen-2xl my-8">
         <div class="bg-pattern">
-            <div class="pt-8 lg:py-8 {ep:themeClasses(classes: '{sbw: \'bg-sbw-primary-80\', snz: \'bg-snz-primary-80\', uch: \'bg-uch-primary-80\'}', key: settings.themekey)}">
+            <div class="pt-8 lg:py-8 {ep:themeClasses(classes: '{sbw: \'bg-sbw-primary/80\', snz: \'bg-snz-primary/80\', uch: \'bg-uch-primary/80\'}', key: settings.themekey)}">
                 <div class="flex flex-col space-y-4 lg:space-y-0 lg:flex-row items-center">
                     <div class="w-full lg:w-1/3 font-black uppercase text-white text-4xl lg:text-3xl text-center">
                         {headline -> f:format.raw()}
diff --git a/public/typo3conf/ext/ep_theme/Resources/Private/Partials/EventHero.html b/public/typo3conf/ext/ep_theme/Resources/Private/Partials/EventHero.html
index fc777c06..08325b91 100644
--- a/public/typo3conf/ext/ep_theme/Resources/Private/Partials/EventHero.html
+++ b/public/typo3conf/ext/ep_theme/Resources/Private/Partials/EventHero.html
@@ -4,7 +4,7 @@
 
     <div class="relative max-w-screen-2xl mx-auto">
         <div class="absolute bottom-0 left-0 inset-x-0">
-            <div class="py-8 {ep:themeClasses(classes: '{sbw: \'bg-sbw-overlay-secondary\', snz: \'bg-snz-primary-50\', uch: \'bg-uch-primary-50\'}', key: settings.themekey)}">
+            <div class="py-8 {ep:themeClasses(classes: '{sbw: \'bg-sbw-overlay/55\', snz: \'bg-snz-primary/50\', uch: \'bg-uch-primary/50\'}', key: settings.themekey)}">
                 <div class="max-w-screen-md mx-auto px-4 md:px-0 flex">
                     <div class="hidden sm:flex flex-col justify-center {ep:themeClasses(classes: '{sbw: \'bg-sbw-primary\', snz: \'bg-snz-secondary\', uch: \'bg-uch-secondary\'}', key: settings.themekey)}">
                         <div class="text-white font-extrabold text-3xl lg:text-5xl flex-1 flex flex-col justify-around items-center text-center leading-none py-2 px-8 md:px-16">
@@ -49,7 +49,7 @@
                     <div class="absolute top-0 right-0 mt-8 mr-4">
                         <svg viewBox="0 0 200 200"
                              class="w-40 h-40">
-                            <circle id="bgouter" cx="100" cy="100" r="100" fill="currentColor" class="{ep:themeClasses(classes: '{sbw: \'text-sbw-primary-50\', snz: \'text-snz-primary-50\', uch: \'text-uch-primary-50\'}', key: settings.themekey)}"/>
+                            <circle id="bgouter" cx="100" cy="100" r="100" fill="currentColor" class="{ep:themeClasses(classes: '{sbw: \'text-sbw-primary/50\', snz: \'text-snz-primary/50\', uch: \'text-uch-primary/50\'}', key: settings.themekey)}"/>
                             <circle id="bginner" cx="100" cy="100" r="70" fill="currentColor" class="{ep:themeClasses(classes: '{sbw: \'text-sbw-primary\', snz: \'text-snz-primary\', uch: \'text-uch-primary\'}', key: settings.themekey)}"/>
                         </svg>
                         <div class="absolute top-1/2 left-1/2 -translate-xy-1/2 flex flex-col items-center justify-around">
diff --git a/public/typo3conf/ext/ep_theme/Resources/Private/Partials/Faq.html b/public/typo3conf/ext/ep_theme/Resources/Private/Partials/Faq.html
index c0971f3a..118ee95a 100644
--- a/public/typo3conf/ext/ep_theme/Resources/Private/Partials/Faq.html
+++ b/public/typo3conf/ext/ep_theme/Resources/Private/Partials/Faq.html
@@ -5,7 +5,7 @@
 
     <f:if condition="{faqs}">
         <div class="bg-winter my-2">
-            <div class="bg-ep-primary-80 sbw:bg-sbw-primary-80 uch:bg-uch-primary-80">
+            <div class="bg-ep-primary/80 sbw:bg-sbw-primary/80 uch:bg-uch-primary/80">
                 <f:render partial="Disrupter/Outlines" section="Top2" arguments="{classes: 'hidden md:block text-white'}"/>
                 <div class="container"
                      data-controller="faq">
diff --git a/public/typo3conf/ext/ep_theme/Resources/Private/Partials/Footer.html b/public/typo3conf/ext/ep_theme/Resources/Private/Partials/Footer.html
index ac2213f7..e46cc3ef 100644
--- a/public/typo3conf/ext/ep_theme/Resources/Private/Partials/Footer.html
+++ b/public/typo3conf/ext/ep_theme/Resources/Private/Partials/Footer.html
@@ -3,7 +3,7 @@
       xmlns:ep="http://typo3.org/ns/EP/EpTheme/ViewHelpers"
       xmlns:f="http://typo3.org/ns/fluid/ViewHelpers">
 
-    <div class="bg-ep-primary-dark sbw:bg-sbw-primary-80 uch:bg-uch-primary-80 ser:bg-ser-primary mt-8">
+    <div class="bg-ep-primary-dark sbw:bg-sbw-primary/80 uch:bg-uch-primary/80 ser:bg-ser-primary mt-8">
         <f:if condition="{settings.themekey} == 'ep'">
             <f:render partial="Disrupter/Outlines" section="Top1" arguments="{classes: '-translate-y-2 text-white'}"/>
         </f:if>
@@ -164,7 +164,7 @@
     <button type="button"
             data-controller="scroll-top"
             data-action="scroll-top#scroll"
-            class="hidden fixed bottom-0 right-0 mb-16 md:mb-8 mr-4 md:mr-8 z-10 h-10 w-10 flex items-center justify-center rounded bg-ep-secondary-80 ser:bg-ser-secondary">
+            class="hidden fixed bottom-0 right-0 mb-16 md:mb-8 mr-4 md:mr-8 z-10 h-10 w-10 flex items-center justify-center rounded bg-ep-secondary/80 ser:bg-ser-secondary">
         {ep:icon(icon: 'chevron-up', class: 'w-8 h-8 text-white')}
     </button>
 
diff --git a/public/typo3conf/ext/ep_theme/Resources/Private/Partials/HeaderSlider.html b/public/typo3conf/ext/ep_theme/Resources/Private/Partials/HeaderSlider.html
index 1665bdc6..13c4f668 100644
--- a/public/typo3conf/ext/ep_theme/Resources/Private/Partials/HeaderSlider.html
+++ b/public/typo3conf/ext/ep_theme/Resources/Private/Partials/HeaderSlider.html
@@ -23,7 +23,7 @@
                             </f:alias>
                             <div class="absolute left-0 bottom-0 inset-x-0 px-4 py-8 w-full md:bottom-1/2 md:translate-y-1/2">
                                 <div class="lg:container px-0">
-                                    <div class="p-4 bg-ep-primary-dark-80 sbw:bg-sbw-primary-80 snz:bg-snz-primary-80 uch:bg-uch-primary-80 ser:bg-ser-primary-80 mb-4 md:p-8 md:max-w-2xl">
+                                    <div class="p-4 bg-ep-primary-dark/80 sbw:bg-sbw-primary/80 snz:bg-snz-primary/80 uch:bg-uch-primary/80 ser:bg-ser-primary/80 mb-4 md:p-8 md:max-w-2xl">
                                         <span class="block text-2xl md:text-4xl lg:text-5xl max-w-sm md:max-w-none font-black text-white uppercase mb-4 md:mb-8">
                                             {slide.headline}
                                         </span>
@@ -60,7 +60,7 @@
                                                          xmlns="http://www.w3.org/2000/svg"
                                                          preserveAspectRatio="xMinYMin meet"
                                                          class="w-full h-full">
-                                                        <circle fill="currentColor" class="text-ep-primary-50" cx="100" cy="100" r="100"/>
+                                                        <circle fill="currentColor" class="text-ep-primary/50" cx="100" cy="100" r="100"/>
                                                         <circle fill="currentColor" class="text-ep-primary" cx="100" cy="100" r="70"/>
                                                     </svg>
                                                     <div class="absolute top-0 left-0 inset-0 flex flex-col items-center justify-center p-8">
diff --git a/public/typo3conf/ext/ep_theme/Resources/Private/Partials/HeaderSliderSmall.html b/public/typo3conf/ext/ep_theme/Resources/Private/Partials/HeaderSliderSmall.html
index 373cb971..cc6df7e4 100644
--- a/public/typo3conf/ext/ep_theme/Resources/Private/Partials/HeaderSliderSmall.html
+++ b/public/typo3conf/ext/ep_theme/Resources/Private/Partials/HeaderSliderSmall.html
@@ -19,7 +19,7 @@
             </f:alias>
             <div class="absolute bottom-0 left-0 inset-x-0 px-8 md:bottom-1/2 md:translate-y-1/2">
                 <div class="lg:container">
-                    <div class="p-4 bg-ep-primary-dark-80 sbw:bg-sbw-primary-80 snz:bg-snz-primary-80 uch:bg-uch-primary-80 ser:bg-ser-primary-80 mb-4 md:p-8 md:max-w-2xl">
+                    <div class="p-4 bg-ep-primary-dark/80 sbw:bg-sbw-primary/80 snz:bg-snz-primary/80 uch:bg-uch-primary/80 ser:bg-ser-primary/80 mb-4 md:p-8 md:max-w-2xl">
                         <span class="block text-xl md:text-2xl text-white uppercase">
                             {slide.headline}
                         </span>
@@ -54,7 +54,7 @@
                                          xmlns="http://www.w3.org/2000/svg"
                                          preserveAspectRatio="xMinYMin meet"
                                          class="w-full h-full">
-                                        <circle fill="currentColor" class="text-ep-primary-50" cx="100" cy="100" r="100"/>
+                                        <circle fill="currentColor" class="text-ep-primary/50" cx="100" cy="100" r="100"/>
                                         <circle fill="currentColor" class="text-ep-primary" cx="100" cy="100" r="70"/>
                                     </svg>
                                     <div class="absolute top-0 left-0 inset-0 flex flex-col items-center justify-center p-8">
@@ -70,7 +70,7 @@
                 </div>
             </f:if>
             <f:if condition="{slide.image.0.description}">
-                <div class="absolute bottom-0 right-0 bg-overlay-white font-sm text-zinc-700">
+                <div class="absolute bottom-0 right-0 bg-white/85 font-sm text-zinc-700">
                     {slide.image.0.description -> f:format.htmlspecialchars()}
                 </div>
             </f:if>
diff --git a/public/typo3conf/ext/ep_theme/Resources/Private/Partials/Mobilenav.html b/public/typo3conf/ext/ep_theme/Resources/Private/Partials/Mobilenav.html
index 3fa4671e..49c536b2 100644
--- a/public/typo3conf/ext/ep_theme/Resources/Private/Partials/Mobilenav.html
+++ b/public/typo3conf/ext/ep_theme/Resources/Private/Partials/Mobilenav.html
@@ -123,7 +123,7 @@
     </f:section>
 
     <f:section name="Subnav">
-        <ul class="text-white uppercase{f:if(condition: '{level} == 2', then: ' pl-4 divide-y divide-overlay-white-50')}{f:if(condition: '{level} == 3', then: ' pl-6')}{f:if(condition: '{level} > 3', then: ' ml-4 divide-y divide-overlay-white-50')}">
+        <ul class="text-white uppercase{f:if(condition: '{level} == 2', then: ' pl-4 divide-y divide-white/50')}{f:if(condition: '{level} == 3', then: ' pl-6')}{f:if(condition: '{level} > 3', then: ' ml-4 divide-y divide-white/50')}">
             <f:for each="{children}" as="subitem">
                 <f:if condition="{subitem.children}">
                     <f:then>
diff --git a/public/typo3conf/ext/ep_theme/Resources/Private/Partials/Pricetable.html b/public/typo3conf/ext/ep_theme/Resources/Private/Partials/Pricetable.html
index 7659723e..8dc26c6a 100644
--- a/public/typo3conf/ext/ep_theme/Resources/Private/Partials/Pricetable.html
+++ b/public/typo3conf/ext/ep_theme/Resources/Private/Partials/Pricetable.html
@@ -114,7 +114,7 @@
     <div class="hidden fixed inset-0 w-full h-full z-50"
          data-controller="modal"
          data-action="pricetable:options-modal:open@window->modal#open">
-        <div class="absolute inset-0 w-full h-full bg-overlay-black z-25"
+        <div class="absolute inset-0 w-full h-full bg-black/85 z-25"
              data-action="click->modal#close"></div>
         <div class="absolute top-1/2 left-1/2 -translate-xy-1/2 w-full max-w-xl px-4">
             <div class="shadow flex items-center justify-between p-4 bg-ep-primary-light text-white rounded-t">
diff --git a/public/typo3conf/ext/ep_theme/Resources/Private/Partials/Product/Details.html b/public/typo3conf/ext/ep_theme/Resources/Private/Partials/Product/Details.html
index 5dd8e769..1f097af4 100644
--- a/public/typo3conf/ext/ep_theme/Resources/Private/Partials/Product/Details.html
+++ b/public/typo3conf/ext/ep_theme/Resources/Private/Partials/Product/Details.html
@@ -33,7 +33,7 @@
                          xmlns="http://www.w3.org/2000/svg"
                          preserveAspectRatio="xMinYMin meet"
                          class="w-full h-full">
-                        <circle fill="currentColor" class="text-ep-primary-50" cx="100" cy="100" r="100"/>
+                        <circle fill="currentColor" class="text-ep-primary/50" cx="100" cy="100" r="100"/>
                         <circle fill="currentColor" class="text-ep-primary" cx="100" cy="100" r="70"/>
                     </svg>
                     <div class="absolute top-0 left-0 inset-0 flex flex-col items-center justify-center p-8">
diff --git a/public/typo3conf/ext/ep_theme/Resources/Private/Partials/Product/HeaderDetail.html b/public/typo3conf/ext/ep_theme/Resources/Private/Partials/Product/HeaderDetail.html
index a4326b6b..014affb6 100644
--- a/public/typo3conf/ext/ep_theme/Resources/Private/Partials/Product/HeaderDetail.html
+++ b/public/typo3conf/ext/ep_theme/Resources/Private/Partials/Product/HeaderDetail.html
@@ -23,7 +23,7 @@
             </picture>
             <div class="absolute bottom-0 left-0 inset-x-0 px-8 md:bottom-1/2 md:translate-y-1/2">
                 <div class="lg:container">
-                    <div class="p-4 bg-ep-primary-dark-80 sbw:bg-sbw-primary-80 ser:bg-ser-primary-80 mb-4 md:p-8 md:max-w-2xl">
+                    <div class="p-4 bg-ep-primary-dark/80 sbw:bg-sbw-primary/80 ser:bg-ser-primary/80 mb-4 md:p-8 md:max-w-2xl">
                         <span class="block text-xl md:text-2xl font-bold text-white uppercase">
                             {product.name}{f:if(condition: product.subline, then: ' {product.subline}')}
                         </span>
@@ -75,7 +75,7 @@
                 </div>
             </f:if>
             <f:if condition="{slide.image.0.description}">
-                <div class="absolute bottom-0 right-0 bg-overlay-white font-sm text-zinc-700">
+                <div class="absolute bottom-0 right-0 bg-white/85 font-sm text-zinc-700">
                     {slide.image.0.description -> f:format.htmlspecialchars()}
                 </div>
             </f:if>
diff --git a/public/typo3conf/ext/ep_theme/Resources/Private/Partials/Product/Teaser.html b/public/typo3conf/ext/ep_theme/Resources/Private/Partials/Product/Teaser.html
index 4e60740a..db87624c 100644
--- a/public/typo3conf/ext/ep_theme/Resources/Private/Partials/Product/Teaser.html
+++ b/public/typo3conf/ext/ep_theme/Resources/Private/Partials/Product/Teaser.html
@@ -32,7 +32,7 @@
                     </f:else>
                 </f:if>
             </a>
-            <div class="absolute top-0 left-0 z-10 inset-x-0 p-2 flex justify-between items-center {f:if(condition: concept, then: 'bg-concept-{concept.code}-overlay', else: 'bg-ep-primary-80')}">
+            <div class="absolute top-0 left-0 z-10 inset-x-0 p-2 flex justify-between items-center {f:if(condition: concept, then: 'bg-concept-{concept.code}/70', else: 'bg-ep-primary/80')}">
                 <div class="flex items-center space-x-2">
                     <f:if condition="{country.code}">
                         {ep:icon(class: 'product-teaser__flag', icon: 'flag-{country.code -> f:format.case(mode: \'lower\')}')}
@@ -53,7 +53,7 @@
                 </button>
             </div>
             <f:if condition="{concept.code} == 'evt'">
-                <div class="absolute bottom-0 left-0 inset-x-0 flex justify-between text-white {f:if(condition: landscape, else: 'text-sm')} bg-concept-evt-overlay px-2 py-1">
+                <div class="absolute bottom-0 left-0 inset-x-0 flex justify-between text-white {f:if(condition: landscape, else: 'text-sm')} bg-concept-evt/70 px-2 py-1">
                     <span>{hotel.name}</span>
                     <span class="uppercase">{hotel.category}</span>
                 </div>
diff --git a/public/typo3conf/ext/ep_theme/Resources/Private/Partials/Search/FilterPanel.html b/public/typo3conf/ext/ep_theme/Resources/Private/Partials/Search/FilterPanel.html
index 81f4b52f..56c42ee3 100644
--- a/public/typo3conf/ext/ep_theme/Resources/Private/Partials/Search/FilterPanel.html
+++ b/public/typo3conf/ext/ep_theme/Resources/Private/Partials/Search/FilterPanel.html
@@ -35,7 +35,7 @@
                             {ep:icon(icon: 'calendar', class: 'w-6 h-6 text-white absolute top-0 right-0 translate-y-1/2 mr-2')}
                         </div>
                         <f:if condition="{settings.datePickerPresets}">
-                            <div class="flex flex-col divide-y divide-overlay-white mt-2">
+                            <div class="flex flex-col divide-y divide-white/85 mt-2">
                             <f:for each="{settings.datePickerPresets}" as="preset">
                                 <button type="button"
                                         class="flex items-center justify-between w-full text-white py-2"
@@ -71,7 +71,7 @@
             {ep:icon(icon: 'arrow-right', class: 'w-6 h-6 text-white', data: '{collapse-target: \'icon\'}')}
         </button>
         <div data-collapse-target="container"
-             class="p-4 border-t border-overlay-white bg-brand-gradient">
+             class="p-4 border-t border-white/85 bg-brand-gradient">
             <ul class="mb-0 p-0 space-y-2">
                 <f:for each="{filterOptions.concepts}" as="concept">
                     <li>
diff --git a/public/typo3conf/ext/ep_theme/Resources/Private/Partials/SubpageHeader.html b/public/typo3conf/ext/ep_theme/Resources/Private/Partials/SubpageHeader.html
index 7f926fe6..6c9617ab 100644
--- a/public/typo3conf/ext/ep_theme/Resources/Private/Partials/SubpageHeader.html
+++ b/public/typo3conf/ext/ep_theme/Resources/Private/Partials/SubpageHeader.html
@@ -17,7 +17,7 @@
         </f:alias>
         <div class="absolute bottom-0 left-0 inset-x-0 px-8 md:bottom-1/2 md:translate-y-1/2">
             <div class="lg:container px-0">
-                <div class="bg-ep-primary-80 sbw:bg-sbw-primary-80 snz:bg-snz-primary-80 uch:bg-uch-primary-80 py-4 lg:py-8 px-4 mb-8 md:max-w-1/2 p-16">
+                <div class="bg-ep-primary/80 sbw:bg-sbw-primary/80 snz:bg-snz-primary/80 uch:bg-uch-primary/80 py-4 lg:py-8 px-4 mb-8 md:max-w-1/2 p-16">
                     <span class="block text-xl md:text-2xl font-light text-white uppercase">
                         {topline}
                     </span>
@@ -49,7 +49,7 @@
                                      xmlns="http://www.w3.org/2000/svg"
                                      preserveAspectRatio="xMinYMin meet"
                                      class="w-full h-full">
-                                    <circle fill="currentColor" class="text-ep-primary-50" cx="100" cy="100" r="100"/>
+                                    <circle fill="currentColor" class="text-ep-primary/50" cx="100" cy="100" r="100"/>
                                     <circle fill="currentColor" class="text-ep-primary" cx="100" cy="100" r="70"/>
                                 </svg>
                                 <div class="absolute top-0 left-0 inset-0 flex flex-col items-center justify-center p-8">
diff --git a/public/typo3conf/ext/ep_theme/Resources/Private/Partials/Topnav.html b/public/typo3conf/ext/ep_theme/Resources/Private/Partials/Topnav.html
index 75203ec3..786d0012 100644
--- a/public/typo3conf/ext/ep_theme/Resources/Private/Partials/Topnav.html
+++ b/public/typo3conf/ext/ep_theme/Resources/Private/Partials/Topnav.html
@@ -12,7 +12,7 @@
                             {ep:icon(icon: 'home', class: 'w-5 h-5')}
                         </f:link.typolink>
                         <f:if condition="{settings.topNavPid}">
-                            <div class="flex-1 flex items-center divide-x divide-overlay-white-50">
+                            <div class="flex-1 flex items-center divide-x divide-white/85">
                                 <f:for each="{topnav}" as="menuitem">
                                     <a class="topnav__item flex-grow{f:if(condition: menuitem.data.tx_eptheme_navitemclass, then: ' {menuitem.data.tx_eptheme_navitemclass}')}{f:if(condition: '{menuitem.active} or {menuitem.data.uid} == {settings.forceActiveTopnavUid}', then: ' bg-ep-secondary')}"
                                        href="{menuitem.link}"{f:if(condition: '{menuitem.data.doktype} == 3', then: ' target="_blank"')}
diff --git a/public/typo3conf/ext/ep_theme/Resources/Private/Templates/AjaxTable/Datestable.html b/public/typo3conf/ext/ep_theme/Resources/Private/Templates/AjaxTable/Datestable.html
index 3f84dae7..3826f430 100644
--- a/public/typo3conf/ext/ep_theme/Resources/Private/Templates/AjaxTable/Datestable.html
+++ b/public/typo3conf/ext/ep_theme/Resources/Private/Templates/AjaxTable/Datestable.html
@@ -26,16 +26,16 @@
                 <table class="w-full mb-4 bg-zinc-200">
                     <thead>
                         <tr>
-                            <th class="border-r border-overlay-white-50 px-2 py-1 md:p-2 text-left text-sm md:text-base">
+                            <th class="border-r border-white/50 px-2 py-1 md:p-2 text-left text-sm md:text-base">
                                 Termin
                             </th>
-                            <th class="border-r border-overlay-white-50 px-2 py-1 md:p-2 text-sm md:text-base">
+                            <th class="border-r border-white/50 px-2 py-1 md:p-2 text-sm md:text-base">
                                 Nächte
                             </th>
-                            <th class="border-r border-overlay-white-50 px-2 py-1 md:p-2 text-sm md:text-base">
+                            <th class="border-r border-white/50 px-2 py-1 md:p-2 text-sm md:text-base">
                                 inklusive
                             </th>
-                            <th class="border-r border-overlay-white-50 px-2 py-1 md:p-2 text-sm md:text-base">
+                            <th class="border-r border-white/50 px-2 py-1 md:p-2 text-sm md:text-base">
                                 ab
                             </th>
                             <th></th>
@@ -220,7 +220,7 @@
         <div class="hidden fixed inset-0 w-full h-full z-50"
              data-controller="modal"
              data-action="pricetable:services-modal:open@window->modal#open">
-            <div class="absolute inset-0 w-full h-full bg-overlay-black z-25"
+            <div class="absolute inset-0 w-full h-full bg-black/85 z-25"
                  data-action="click->modal#close"></div>
             <div class="absolute top-1/2 left-1/2 transform -translate-xy-1/2 w-full max-w-xl px-4">
                 <div class="shadow flex items-center justify-between p-4 bg-ep-primary-light ser:bg-ser-primary text-white rounded-t">
diff --git a/public/typo3conf/ext/ep_theme/Resources/Private/Templates/AjaxTable/DaytripRooms.html b/public/typo3conf/ext/ep_theme/Resources/Private/Templates/AjaxTable/DaytripRooms.html
index f9ec1ea8..7e7be93c 100644
--- a/public/typo3conf/ext/ep_theme/Resources/Private/Templates/AjaxTable/DaytripRooms.html
+++ b/public/typo3conf/ext/ep_theme/Resources/Private/Templates/AjaxTable/DaytripRooms.html
@@ -21,16 +21,16 @@
         <table class="w-full mb-4 bg-zinc-200 text-sm xl:text-base">
             <thead>
             <tr>
-                <th class="border-r border-overlay-white-50 px-2 py-1 md:p-2 text-left text-sm md:text-base">
+                <th class="border-r border-white/50 px-2 py-1 md:p-2 text-left text-sm md:text-base">
                     Zimmerart
                 </th>
-                <th class="border-r border-overlay-white-50 px-2 py-1 md:p-2 text-left text-sm md:text-base">
+                <th class="border-r border-white/50 px-2 py-1 md:p-2 text-left text-sm md:text-base">
                     Preis
                 </th>
-                <th class="border-r border-overlay-white-50 px-2 py-1 md:p-2 text-left text-sm md:text-base">
+                <th class="border-r border-white/50 px-2 py-1 md:p-2 text-left text-sm md:text-base">
                     inkl.
                 </th>
-                <th class="border-r border-overlay-white-50 px-2 py-1 md:p-2 text-left text-sm md:text-base">
+                <th class="border-r border-white/50 px-2 py-1 md:p-2 text-left text-sm md:text-base">
                 </th>
             </tr>
             </thead>
@@ -79,7 +79,7 @@
         <div class="hidden fixed inset-0 w-full h-full z-50"
              data-controller="modal"
              data-action="daytrip:services-modal:open@window->modal#open">
-            <div class="absolute inset-0 w-full h-full bg-overlay-black z-25 flex items-center justify-center"
+            <div class="absolute inset-0 w-full h-full bg-black/85 z-25 flex items-center justify-center"
                  data-action="click->modal#close"></div>
             <div class="absolute top-1/2 left-1/2 transform -translate-xy-1/2 bg-white shadow w-full max-w-xl rounded">
                 <div class="shadow flex items-center justify-between p-4 bg-ep-primary-light text-white rounded-t">
diff --git a/public/typo3conf/ext/ep_theme/Resources/Private/Templates/AjaxTable/Pricetable.html b/public/typo3conf/ext/ep_theme/Resources/Private/Templates/AjaxTable/Pricetable.html
index 113f151b..bfe3989e 100644
--- a/public/typo3conf/ext/ep_theme/Resources/Private/Templates/AjaxTable/Pricetable.html
+++ b/public/typo3conf/ext/ep_theme/Resources/Private/Templates/AjaxTable/Pricetable.html
@@ -23,10 +23,10 @@
             <table class="w-full mb-4 bg-zinc-200">
                 <thead>
                     <tr>
-                        <th class="border-r border-overlay-white-50 px-2 py-1 md:p-2 text-left text-sm md:text-base">
+                        <th class="border-r border-white/50 px-2 py-1 md:p-2 text-left text-sm md:text-base">
                             Zimmertyp {dateRange}
                         </th>
-                        <th class="border-r border-overlay-white-50 px-2 py-1 md:p-2 text-sm md:text-base">
+                        <th class="border-r border-white/50 px-2 py-1 md:p-2 text-sm md:text-base">
                             <span class="lg:hidden">
                                 inkl.
                             </span>
@@ -34,7 +34,7 @@
                                 inklusive
                             </span>
                         </th>
-                        <th class="border-r border-overlay-white-50 px-2 py-1 md:p-2 text-sm md:text-base">
+                        <th class="border-r border-white/50 px-2 py-1 md:p-2 text-sm md:text-base">
                             optional
                         </th>
                         <th class="px-2 py-1 md:p-2 text-sm md:text-base">
@@ -223,7 +223,7 @@
                                  xmlns="http://www.w3.org/2000/svg"
                                  preserveAspectRatio="xMinYMin meet"
                                  class="w-full h-full">
-                                <circle fill="currentColor" class="text-ep-pink-50" cx="100" cy="100" r="100"/>
+                                <circle fill="currentColor" class="text-ep-pink/50" cx="100" cy="100" r="100"/>
                                 <circle fill="currentColor" class="text-ep-pink" cx="100" cy="100" r="70"/>
                             </svg>
                             <div class="absolute top-0 left-0 inset-0 flex flex-col items-center justify-center p-8">
@@ -239,7 +239,7 @@
         <div class="hidden fixed inset-0 w-full h-full z-50"
              data-controller="modal"
              data-action="pricetable:options-modal:open@window->modal#open">
-            <div class="absolute inset-0 w-full h-full bg-overlay-black z-25"
+            <div class="absolute inset-0 w-full h-full bg-black/85 z-25"
                  data-action="click->modal#close"></div>
             <div class="absolute top-1/2 left-1/2 transform -translate-xy-1/2 w-full max-w-xl px-4">
                 <div class="shadow flex items-center justify-between p-4 bg-ep-primary-light text-white rounded-t">
diff --git a/public/typo3conf/ext/ep_theme/Resources/Private/Templates/FluidStyledContent/Calendar.html b/public/typo3conf/ext/ep_theme/Resources/Private/Templates/FluidStyledContent/Calendar.html
index 07401784..2bc5286a 100644
--- a/public/typo3conf/ext/ep_theme/Resources/Private/Templates/FluidStyledContent/Calendar.html
+++ b/public/typo3conf/ext/ep_theme/Resources/Private/Templates/FluidStyledContent/Calendar.html
@@ -17,7 +17,7 @@
                 </select>
                 <div class="mt-4"
                      data-calendar-target="container"></div>
-                <div class="absolute top-0 left-0 inset-0 w-full h-full bg-overlay-white"
+                <div class="absolute top-0 left-0 inset-0 w-full h-full bg-white/85"
                      data-calendar-target="loadingIndicator">
                     <svg class="w-6 h-6 text-zinc-800 absolute top-1/2 left-1/2 transform -translate-xy-1/2">
                         <use href="{f:uri.image(src: 'EXT:ep_theme/Resources/Public/images/icons_sprite.svg')}#icon-spinner"></use>
diff --git a/public/typo3conf/ext/ep_theme/Resources/Private/Templates/FluidStyledContent/DealOfTheWeek.html b/public/typo3conf/ext/ep_theme/Resources/Private/Templates/FluidStyledContent/DealOfTheWeek.html
index 3b99b6ae..58dd7b26 100644
--- a/public/typo3conf/ext/ep_theme/Resources/Private/Templates/FluidStyledContent/DealOfTheWeek.html
+++ b/public/typo3conf/ext/ep_theme/Resources/Private/Templates/FluidStyledContent/DealOfTheWeek.html
@@ -6,7 +6,7 @@
 
     <f:section name="Main">
         <div class="bg-winter my-2">
-            <div class="bg-ep-primary-80">
+            <div class="bg-ep-primary/80">
                 <f:render partial="Disrupter/Outlines"
                           section="Top1"
                           arguments="{classes: 'hidden md:block transform -translate-y-2 {f:if(condition: \'{data.tx_eptheme_background} == 1 || {data.tx_eptheme_background} == 3\', then: \'text-ep-primary-bg\', else: \'text-white\')}'}"/>
diff --git a/public/typo3conf/ext/ep_theme/Resources/Private/Templates/Product/Detail.html b/public/typo3conf/ext/ep_theme/Resources/Private/Templates/Product/Detail.html
index 69fbc0a1..8ed93e7e 100644
--- a/public/typo3conf/ext/ep_theme/Resources/Private/Templates/Product/Detail.html
+++ b/public/typo3conf/ext/ep_theme/Resources/Private/Templates/Product/Detail.html
@@ -317,7 +317,7 @@
                     </select>
                     <div class="mt-4"
                          data-calendar-target="container"></div>
-                    <div class="absolute top-0 left-0 inset-0 w-full h-full bg-overlay-white"
+                    <div class="absolute top-0 left-0 inset-0 w-full h-full bg-white/85"
                          data-calendar-target="loadingIndicator">
                         <f:image class="absolute top-1/2 left-1/2 -translate-xy-1/2" src="EXT:ep_theme/Resources/Public/images/ajax-loader-white.gif" alt="Loading"/>
                     </div>
diff --git a/public/typo3conf/ext/ep_theme/Resources/Private/Templates/Searchbar/Index.html b/public/typo3conf/ext/ep_theme/Resources/Private/Templates/Searchbar/Index.html
index 47f99ae4..fb32d170 100644
--- a/public/typo3conf/ext/ep_theme/Resources/Private/Templates/Searchbar/Index.html
+++ b/public/typo3conf/ext/ep_theme/Resources/Private/Templates/Searchbar/Index.html
@@ -41,7 +41,7 @@
                                      data-datepicker-min-date-value="{f:format.date(date: 'now', format: 'Y-m-d')}"
                                      data-action="collapse:click:outside->collapse#close searchbar:input@window->collapse#close"
                                      data-collapse-collapsed-value="true">
-                                    <div class="relative border-b border-r border-overlay-white-50 mr-8">
+                                    <div class="relative border-b border-r border-white/50 mr-8">
                                         <input type="text"
                                                data-action="click->collapse#toggle"
                                                class="w-full bg-transparent border-0 ring-0 focus:ring-0 text-white uppercase px-2 py-1 cursor-pointer placeholder-white"
@@ -96,7 +96,7 @@
                                      data-controller="collapse"
                                      data-action="collapse:click:outside->collapse#close searchbar:input@window->collapse#close"
                                      data-collapse-collapsed-value="true">
-                                    <div class="relative border-b border-r border-overlay-white-50 mr-8">
+                                    <div class="relative border-b border-r border-white/50 mr-8">
                                         <input type="text"
                                                data-action="click->collapse#toggle"
                                                data-searchbar-target="paxLabel"
@@ -135,7 +135,7 @@
                                      data-controller="collapse"
                                      data-action="collapse:click:outside->collapse#close searchbar:input@window->collapse#close"
                                      data-collapse-collapsed-value="true">
-                                    <div class="relative border-b border-r border-overlay-white-50 mr-8">
+                                    <div class="relative border-b border-r border-white/50 mr-8">
                                         <input type="text"
                                                data-action="click->collapse#toggle"
                                                data-searchbar-target="destinationLabel"
@@ -210,7 +210,7 @@
                                      data-controller="collapse"
                                      data-action="collapse:click:outside->collapse#close searchbar:input@window->collapse#close"
                                      data-collapse-collapsed-value="true">
-                                    <div class="relative border-r border-b border-overlay-white-50">
+                                    <div class="relative border-r border-b border-white/50">
                                         <input type="text"
                                                data-action="click->collapse#toggle"
                                                data-searchbar-target="priceRangeLabel"
diff --git a/public/typo3conf/ext/ep_theme/Resources/Private/Templates/Snowreport/List.html b/public/typo3conf/ext/ep_theme/Resources/Private/Templates/Snowreport/List.html
index a1c420af..bc2fad3f 100644
--- a/public/typo3conf/ext/ep_theme/Resources/Private/Templates/Snowreport/List.html
+++ b/public/typo3conf/ext/ep_theme/Resources/Private/Templates/Snowreport/List.html
@@ -11,22 +11,22 @@
             <table class="w-full mb-4 bg-zinc-200">
                 <thead>
                 <tr>
-                    <th class="border-r border-overlay-white-50 px-2 py-1 md:p-2 text-sm md:text-base">
+                    <th class="border-r border-white/50 px-2 py-1 md:p-2 text-sm md:text-base">
                         Gebiet
                     </th>
-                    <th class="border-r border-overlay-white-50 px-2 py-1 md:p-2 text-sm md:text-base">
+                    <th class="border-r border-white/50 px-2 py-1 md:p-2 text-sm md:text-base">
                         Berg/Tal
                     </th>
-                    <th class="border-r border-overlay-white-50 px-2 py-1 md:p-2 text-sm md:text-base">
+                    <th class="border-r border-white/50 px-2 py-1 md:p-2 text-sm md:text-base">
                         Qualität
                     </th>
-                    <th class="border-r border-overlay-white-50 px-2 py-1 md:p-2 text-sm md:text-base">
+                    <th class="border-r border-white/50 px-2 py-1 md:p-2 text-sm md:text-base">
                         Geöffnete Lifte
                     </th>
-                    <th class="border-r border-overlay-white-50 px-2 py-1 md:p-2 text-sm md:text-base">
+                    <th class="border-r border-white/50 px-2 py-1 md:p-2 text-sm md:text-base">
                         Letzter Schneefall
                     </th>
-                    <th class="border-r border-overlay-white-50 px-2 py-1 md:p-2 text-sm md:text-base">
+                    <th class="border-r border-white/50 px-2 py-1 md:p-2 text-sm md:text-base">
                         Letzte Akt.
                     </th>
                 </tr>
diff --git a/public/typo3conf/ext/ep_theme/Resources/Private/Templates/Watchlist/List.html b/public/typo3conf/ext/ep_theme/Resources/Private/Templates/Watchlist/List.html
index d4c832a7..ccb69c5d 100644
--- a/public/typo3conf/ext/ep_theme/Resources/Private/Templates/Watchlist/List.html
+++ b/public/typo3conf/ext/ep_theme/Resources/Private/Templates/Watchlist/List.html
@@ -10,7 +10,7 @@
                  data-controller="watchlist"
                  data-watchlist-uri-value="{ep:uri.ajax(action: 'list', controller: 'AjaxWatchlist', pageUid: '{settings.defaultAjaxUid}')}">
                 <div data-watchlist-target="container"></div>
-                <div class="absolute top-0 left-0 inset-0 bg-overlay-white hidden"
+                <div class="absolute top-0 left-0 inset-0 bg-white/85 hidden"
                      data-watchlist-target="loadingIndicator">
                     <svg class="w-6 h-6 text-ep-primary-light absolute top-1/2 left-1/2 transform -translate-xy-1/2">
                         <use href="{f:uri.image(src: 'EXT:ep_theme/Resources/Public/images/icons_sprite.svg')}#icon-spinner"></use>
diff --git a/tailwind.config.js b/tailwind.config.js
index 38470776..6238e0c2 100644
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -1,6 +1,5 @@
 const postcss = require('postcss')
 const plugin = require('tailwindcss/plugin')
-const tinycolor = require('tinycolor2')
 
 module.exports = {
     content: [
@@ -17,18 +16,18 @@ module.exports = {
         'bg-red-600',
         'bg-header-season-w',
         'bg-header-season-s',
-        'bg-concept-bdg', 'bg-concept-bdg-overlay',
-        'bg-concept-skr', 'bg-concept-skr-overlay',
-        'bg-concept-evt', 'bg-concept-evt-overlay',
-        'bg-concept-fam', 'bg-concept-fam-overlay',
-        'bg-concept-grp', 'bg-concept-grp-overlay',
-        'bg-concept-prg', 'bg-concept-prg-overlay',
-        'bg-concept-ind', 'bg-concept-ind-overlay',
-        'bg-concept-wkd', 'bg-concept-wkd-overlay',
-        'bg-concept-kt',  'bg-concept-kt-overlay',
-        'bg-concept-spz', 'bg-concept-spz-overlay',
-        'bg-concept-epe', 'bg-concept-epe-overlay',
-        'bg-concept-sfl', 'bg-concept-sfl-overlay',
+        'bg-concept-bdg', 'bg-concept-bdg/70',
+        'bg-concept-skr', 'bg-concept-skr/70',
+        'bg-concept-evt', 'bg-concept-evt/70',
+        'bg-concept-fam', 'bg-concept-fam/70',
+        'bg-concept-grp', 'bg-concept-grp/70',
+        'bg-concept-prg', 'bg-concept-prg/70',
+        'bg-concept-ind', 'bg-concept-ind/70',
+        'bg-concept-wkd', 'bg-concept-wkd/70',
+        'bg-concept-kt',  'bg-concept-kt/70',
+        'bg-concept-spz', 'bg-concept-spz/70',
+        'bg-concept-epe', 'bg-concept-epe/70',
+        'bg-concept-sfl', 'bg-concept-sfl/70',
         'flatpickr-input', 'flatpickr-calendar', 'flatpickr-day', 'flatpickr-day.selected',
         'availability-full-to-none', 'availability-full-to-partial', 'availability-none-to-full',
         'availability-partial-to-full', 'availability-none-to-partial', 'availability-partial-to-none',
@@ -52,34 +51,20 @@ module.exports = {
                 'xs': '.8rem',
             },
             colors: {
-                overlay: {
-                    black: tinycolor('#000000').setAlpha(0.85).toRgbString(),
-                    white: tinycolor('#ffffff').setAlpha(0.85).toRgbString(),
-                    'white-50': tinycolor('#ffffff').setAlpha(0.5).toRgbString(),
-                },
                 concept: {
                     default: '#0173A5',
                     bdg: '#0173A5',
                     skr: '#0173A5',
-                    'skr-overlay': tinycolor('#0173A5').setAlpha(0.70).toRgbString(),
                     evt: '#BA034F',
-                    'evt-overlay': tinycolor('#BA034F').setAlpha(0.70).toRgbString(),
                     fam: '#7ca7d5',
-                    'fam-overlay': tinycolor('#7ca7d5').setAlpha(0.70).toRgbString(),
                     grp: '#576D02',
-                    'grp-overlay': tinycolor('#576D02').setAlpha(0.70).toRgbString(),
                     prg: '#0173A5',
-                    'prg-overlay': tinycolor('#0173A5').setAlpha(0.70).toRgbString(),
                     ind: '#1684DD',
-                    'ind-overlay': tinycolor('#1684DD').setAlpha(0.70).toRgbString(),
                     wkd: '#96BB05',
-                    'wkd-overlay': tinycolor('#96BB05').setAlpha(0.70).toRgbString(),
                     kt: '#576D02',
-                    'kt-overlay': tinycolor('#576D02').setAlpha(0.70).toRgbString(),
                     spz: '#436a8a',
                     epe: '#436a8a',
                     sfl: '#4E4E51',
-                    'sfl-overlay': tinycolor('#4E4E51').setAlpha(0.70).toRgbString(),
                 },
                 ep: {
                     primary: '#3d8ccb',
@@ -88,48 +73,35 @@ module.exports = {
                     'primary-light': '#009fff',
                     'primary-medium': '#165883',
                     'primary-dark': '#18527b',
-                    'primary-10': tinycolor('#3d8ccb').setAlpha(0.1).toRgbString(),
-                    'primary-50': tinycolor('#3d8ccb').setAlpha(0.5).toRgbString(),
-                    'primary-80': tinycolor('#3d8ccb').setAlpha(0.8).toRgbString(),
-                    'primary-dark-80': tinycolor('#18527b').setAlpha(0.8).toRgbString(),
-                    'secondary-10': tinycolor('#f0bc44').setAlpha(0.1).toRgbString(),
-                    'secondary-80': tinycolor('#f0bc44').setAlpha(0.8).toRgbString(),
                     pink: '#fa1a8c',
-                    'pink-50': tinycolor('#fa1a8c').setAlpha(0.5).toRgbString(),
                 },
                 sbw: {
                     primary: '#f0bc44',
                     secondary: '#ee525a',
                     'primary-dark': '#c7a20c',
-                    'primary-10': tinycolor('#f0bc44').setAlpha(0.1).toRgbString(),
-                    'primary-50': tinycolor('#f0bc44').setAlpha(0.5).toRgbString(),
-                    'primary-80': tinycolor('#f0bc44').setAlpha(0.8).toRgbString(),
-                    'overlay-secondary': tinycolor('#c20000').setAlpha(0.55).toRgbString(),
+                    'overlay': '#c20000',
                 },
                 snz: {
                     primary: '#82c3c6',
                     secondary: '#f9c33d',
                     'primary-dark': '#82c3c6',
-                    'primary-10': tinycolor('#82C3C6').setAlpha(0.1).toRgbString(),
-                    'primary-50': tinycolor('#82C3C6').setAlpha(0.5).toRgbString(),
-                    'primary-80': tinycolor('#82C3C6').setAlpha(0.8).toRgbString(),
                 },
                 uch: {
                     primary: '#a6c62c',
                     secondary: '#19a3dc',
                     'primary-dark': '#a6c62c',
-                    'primary-10': tinycolor('#a6c62c').setAlpha(0.1).toRgbString(),
-                    'primary-50': tinycolor('#a6c62c').setAlpha(0.5).toRgbString(),
-                    'primary-80': tinycolor('#a6c62c').setAlpha(0.8).toRgbString(),
-                    'overlay-secondary': tinycolor('#a6c62c').setAlpha(0.55).toRgbString(),
+                    'overlay': '#a6c62c',
                 },
                 ser: {
                     primary: '#006fb6',
                     secondary: '#e85243',
                     'primary-light': '#04A4CC',
-                    'primary-80': tinycolor('#006fb6').setAlpha(0.8).toRgbString(),
                 },
             },
+            opacity: {
+                '55': 0.5,
+                '85': 0.85,
+            },
             backgroundImage: {
                 'badge-gradient': 'linear-gradient(120deg, rgba(150,1,103,1) 0%, rgba(158,3,106,1) 40%, rgba(250,26,140,1) 100%)',
                 'brand-gradient': 'linear-gradient(to top right, #009fff, #165883, #18527b)',