From dbbdcac6e81c88baf5296addd2ec5f5496db83cb Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Bj=C3=B6rn=20Fromme?= <fromme@dreipunktnull.com>
Date: Mon, 23 Jun 2025 19:45:05 +0200
Subject: [PATCH] feat: a11y improvements

---
 .../Private/Assets/scss/_iconbar.scss         |  3 +
 .../Assets/js/controllers/nav_controller.js   | 32 ++++++++
 .../Assets/scss/base/_rte-content.scss        |  6 +-
 .../Assets/scss/components/_buttons.scss      | 78 +++++++++++--------
 .../Assets/scss/components/_contact-bar.scss  |  2 +-
 .../Assets/scss/components/_forms.scss        |  4 +-
 .../Resources/Private/Partials/Badge.html     |  4 +-
 .../Private/Partials/City/Teaser.html         |  2 +-
 .../Private/Partials/ContactBar.html          | 18 ++++-
 .../Resources/Private/Partials/Footer.html    |  2 +-
 .../Private/Partials/HeaderSlider.html        |  2 +-
 .../Private/Partials/Hotel/Teaser.html        |  6 +-
 .../Resources/Private/Partials/Mainnav.html   | 15 +++-
 .../Private/Partials/Product/Teaser.html      |  6 +-
 .../Private/Partials/Region/Teaser.html       |  2 +-
 .../Private/Partials/Search/FilterPanel.html  | 36 +++++----
 .../Private/Partials/Search/Result.html       | 24 +++---
 .../Private/Partials/Teaser/OneColumn.html    |  6 +-
 .../Private/Partials/Textmedia/LinkPanel.html | 30 +++----
 .../Resources/Private/Partials/Topnav.html    |  4 +-
 .../FluidStyledContent/TeaserCountry.html     | 22 +++---
 .../Private/Templates/Region/Detail.html      |  2 +-
 .../Templates/Search/Searchresult.html        |  2 +-
 .../Private/Templates/Searchbar/Index.html    |  2 +-
 tailwind.config.js                            |  4 +-
 25 files changed, 197 insertions(+), 117 deletions(-)
 create mode 100644 public/typo3conf/ext/ep_theme/Resources/Private/Assets/js/controllers/nav_controller.js

diff --git a/public/typo3conf/ext/ep_events/Resources/Private/Assets/scss/_iconbar.scss b/public/typo3conf/ext/ep_events/Resources/Private/Assets/scss/_iconbar.scss
index 99ba3656..85c51543 100644
--- a/public/typo3conf/ext/ep_events/Resources/Private/Assets/scss/_iconbar.scss
+++ b/public/typo3conf/ext/ep_events/Resources/Private/Assets/scss/_iconbar.scss
@@ -1,3 +1,6 @@
+.iconbar {
+    @apply hidden lg:block fixed z-100 top-[30vh] right-0 overflow-hidden;
+}
 .iconbar {
     display: none;
     @include mq($from: desktop) {
diff --git a/public/typo3conf/ext/ep_theme/Resources/Private/Assets/js/controllers/nav_controller.js b/public/typo3conf/ext/ep_theme/Resources/Private/Assets/js/controllers/nav_controller.js
new file mode 100644
index 00000000..fc2e5171
--- /dev/null
+++ b/public/typo3conf/ext/ep_theme/Resources/Private/Assets/js/controllers/nav_controller.js
@@ -0,0 +1,32 @@
+import { Controller } from '@hotwired/stimulus'
+import { useClickOutside } from 'stimulus-use'
+
+export default class extends Controller {
+
+    static classes = ['hidden']
+    static targets = ['button', 'subnav']
+    static values = { expanded: Boolean }
+
+    connect() {
+        useClickOutside(this)
+    }
+
+    toggle(e) {
+        e.preventDefault()
+        this.expandedValue = !this.expandedValue
+    }
+
+    clickOutside(e) {
+        this.expandedValue = false
+    }
+
+    expandedValueChanged(expanded) {
+        this.buttonTarget.setAttribute('aria-expanded', expanded)
+        this.subnavTarget.setAttribute('aria-hidden', !expanded)
+        if (true === expanded) {
+            this.subnavTarget.classList.remove(...this.hiddenClasses)
+        } else {
+            this.subnavTarget.classList.add(...this.hiddenClasses)
+        }
+    }
+}
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 35521ede..d220390b 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
@@ -32,7 +32,7 @@ a:not(.button):not(.rte-button):not(.rte-button--full) {
 a.rte-button {
     @apply inline-flex items-center justify-center px-4 py-2 md:px-8;
     @apply uppercase leading-none text-center;
-    @apply transition-colors outline-none focus:outline-none;
+    @apply transition-colors outline-none;
     @apply bg-ep-primary-light text-white;
     @apply sbw:bg-sbw-secondary;
     @apply snz:bg-snz-secondary;
@@ -45,6 +45,10 @@ a.rte-button {
     @apply suz:hover:bg-suz-primary-dark suz:group-hover:bg-suz-primary-dark;
     @apply uch:hover:bg-uch-primary-dark uch:group-hover:bg-uch-primary-dark;
     @apply ser:hover:bg-ser-primary ser:group-hover:bg-ser-primary;
+    @apply focus:outline focus:outline-2 focus:outline-offset-2;
+    @apply focus:outline-ep-primary-dark sbw:focus:outline-sbw-secondary uch:focus:outline-uch-secondary;
+    @apply suz:focus:outline-suz-secondary ser:focus:outline-ser-secondary snz:focus:outline-snz-secondary;
+
 }
 
 a.rte-button--full {
diff --git a/public/typo3conf/ext/ep_theme/Resources/Private/Assets/scss/components/_buttons.scss b/public/typo3conf/ext/ep_theme/Resources/Private/Assets/scss/components/_buttons.scss
index 6640c231..b64c6aa1 100644
--- a/public/typo3conf/ext/ep_theme/Resources/Private/Assets/scss/components/_buttons.scss
+++ b/public/typo3conf/ext/ep_theme/Resources/Private/Assets/scss/components/_buttons.scss
@@ -2,6 +2,9 @@
     @apply inline-flex items-center justify-center space-x-2 px-4 py-2 md:px-8 cursor-pointer;
     @apply uppercase leading-none text-center;
     @apply transition-colors outline-none;
+    @apply focus:outline focus:outline-2 focus:outline-offset-2;
+    @apply focus:outline-ep-primary-dark sbw:focus:outline-sbw-secondary uch:focus:outline-uch-secondary;
+    @apply suz:focus:outline-suz-secondary ser:focus:outline-ser-secondary snz:focus:outline-snz-secondary;
 
     &--small {
         @apply px-2 py-1 md:px-4 text-xs sm:text-sm;
@@ -12,6 +15,28 @@
     }
 }
 
+.teaser-button {
+    @apply w-full;
+    @apply bg-ep-primary-dark text-white;
+    @apply sbw:bg-sbw-secondary;
+    @apply snz:bg-snz-secondary;
+    @apply suz:bg-suz-secondary;
+    @apply uch:bg-uch-secondary;
+    @apply ser:bg-ser-secondary;
+    @apply hover:bg-badge-gradient hover:text-white;
+    @apply peer-hover:bg-badge-gradient peer-hover:text-white;
+    @apply sbw:hover:bg-none sbw:hover:bg-sbw-primary-dark;
+    @apply snz:hover:bg-none  snz:hover:bg-snz-primary-dark;
+    @apply suz:hover:bg-none suz:hover:bg-suz-primary-dark;
+    @apply uch:hover:bg-none uch:hover:bg-uch-primary-dark;
+    @apply ser:hover:bg-none ser:hover:bg-ser-primary;
+    @apply sbw:peer-hover:bg-none sbw:peer-hover:bg-sbw-primary-dark;
+    @apply snz:peer-hover:bg-none snz:peer-hover:bg-snz-primary-dark;
+    @apply suz:peer-hover:bg-none suz:peer-hover:bg-suz-primary-dark;
+    @apply uch:peer-hover:bg-none uch:peer-hover:bg-uch-primary-dark;
+    @apply ser:peer-hover:bg-none ser:peer-hover:bg-ser-primary;
+}
+
 .bg-button {
     @apply bg-ep-primary-dark text-white;
     @apply sbw:bg-sbw-secondary;
@@ -19,41 +44,27 @@
     @apply suz:bg-suz-secondary;
     @apply uch:bg-uch-secondary;
     @apply ser:bg-ser-secondary;
-    @apply hover:bg-ep-secondary;
-    @apply hover:text-gray-900;
-    @apply sbw:hover:bg-sbw-primary-dark;
-    @apply snz:hover:bg-snz-primary-dark;
-    @apply suz:hover:bg-suz-primary-dark;
-    @apply uch:hover:bg-uch-primary-dark;
-    @apply ser:hover:bg-ser-primary;
-    @apply peer-hover:bg-ep-secondary;
-    @apply peer-hover:text-gray-900;
-    @apply sbw:peer-hover:bg-sbw-primary-dark;
-    @apply snz:peer-hover:bg-snz-primary-dark;
-    @apply suz:peer-hover:bg-suz-primary-dark;
-    @apply uch:peer-hover:bg-uch-primary-dark;
-    @apply ser:peer-hover:bg-ser-primary;
+    @apply hover:bg-badge-gradient hover:text-white;
+    @apply sbw:hover:bg-none sbw:hover:bg-sbw-primary-dark;
+    @apply snz:hover:bg-none snz:hover:bg-snz-primary-dark;
+    @apply suz:hover:bg-none suz:hover:bg-suz-primary-dark;
+    @apply uch:hover:bg-none uch:hover:bg-uch-primary-dark;
+    @apply ser:hover:bg-none ser:hover:bg-ser-primary;
 
     &--active,
     &--secondary {
-        @apply bg-ep-secondary text-gray-900;
-        @apply sbw:bg-sbw-primary;
-        @apply snz:bg-snz-primary;
-        @apply suz:bg-suz-primary;
-        @apply uch:bg-uch-primary;
-        @apply ser:bg-ser-secondary;
-        @apply hover:bg-ep-primary-dark hover:text-white;
-        @apply sbw:hover:bg-sbw-primary-dark;
-        @apply snz:hover:bg-snz-primary-dark;
-        @apply suz:hover:bg-suz-primary-dark;
-        @apply uch:hover:bg-uch-primary-dark;
-        @apply ser:hover:bg-ser-primary;
-        @apply peer-hover:bg-ep-primary-dark peer-hover:text-white;
-        @apply sbw:peer-hover:bg-sbw-primary-dark;
-        @apply snz:peer-hover:bg-snz-primary-dark;
-        @apply suz:peer-hover:bg-suz-primary-dark;
-        @apply uch:peer-hover:bg-uch-primary-dark;
-        @apply ser:peer-hover:bg-ser-primary;
+        @apply bg-badge-gradient text-white;
+        @apply sbw:bg-none sbw:bg-sbw-secondary;
+        @apply snz:bg-none snz:bg-snz-secondary;
+        @apply suz:bg-none suz:bg-suz-secondary;
+        @apply uch:bg-none uch:bg-uch-secondary;
+        @apply ser:bg-none ser:bg-ser-secondary;
+        @apply hover:bg-none hover:bg-ep-pink hover:text-white;
+        @apply sbw:hover:bg-none sbw:hover:bg-sbw-primary-dark;
+        @apply snz:hover:bg-none snz:hover:bg-snz-primary-dark;
+        @apply suz:hover:bg-none suz:hover:bg-suz-primary-dark;
+        @apply uch:hover:bg-none uch:hover:bg-uch-primary-dark;
+        @apply ser:hover:bg-none ser:hover:bg-ser-primary;
     }
 
     &--muted {
@@ -78,8 +89,7 @@
 
         &:hover,
         &.button--active {
-            @apply bg-white;
-            @apply border-ep-secondary text-ep-secondary;
+            @apply bg-none bg-ep-pink border-ep-pink;
             @apply sbw:bg-white sbw:border-sbw-secondary sbw:text-sbw-secondary;
             @apply snz:bg-white snz:border-snz-secondary snz:text-snz-secondary;
             @apply suz:bg-white suz:border-suz-secondary suz:text-suz-secondary;
diff --git a/public/typo3conf/ext/ep_theme/Resources/Private/Assets/scss/components/_contact-bar.scss b/public/typo3conf/ext/ep_theme/Resources/Private/Assets/scss/components/_contact-bar.scss
index 9a24e298..57f9e24a 100644
--- a/public/typo3conf/ext/ep_theme/Resources/Private/Assets/scss/components/_contact-bar.scss
+++ b/public/typo3conf/ext/ep_theme/Resources/Private/Assets/scss/components/_contact-bar.scss
@@ -9,7 +9,7 @@
 
 .contact-bar__item {
     @apply flex-1 text-white py-2 bg-ep-primary-dark border-r border-white last:border-0;
-    @apply ser:bg-ser-primary sbw:bg-sbw-primary snz:bg-snz-primary suz:bg-suz-primary uch:bg-uch-primary;
+    @apply ser:bg-ser-primary sbw:bg-sbw-secondary snz:bg-snz-primary suz:bg-suz-primary uch:bg-uch-primary;
 
     @screen md {
         @apply flex flex-none items-start transition-transform duration-300 ease-in-out p-1 shadow-md focus:text-white border-0;
diff --git a/public/typo3conf/ext/ep_theme/Resources/Private/Assets/scss/components/_forms.scss b/public/typo3conf/ext/ep_theme/Resources/Private/Assets/scss/components/_forms.scss
index 5dd18e70..793df8c3 100644
--- a/public/typo3conf/ext/ep_theme/Resources/Private/Assets/scss/components/_forms.scss
+++ b/public/typo3conf/ext/ep_theme/Resources/Private/Assets/scss/components/_forms.scss
@@ -1,5 +1,6 @@
 .form-field {
-    @apply border-zinc-400 focus:border-zinc-800 ring-0 focus:ring-0 mt-1 block w-full;
+    @apply border-zinc-400 focus:border-zinc-800 ring-0 block w-full mt-1;
+    @apply focus:ring-0 focus:outline focus:outline-2 focus:outline-offset-2 focus:outline-zinc-800;
 
     &--has-error {
         @apply border-red-500;
@@ -9,6 +10,7 @@
 .form-checkbox,
 .form-radio {
     @apply border-zinc-400 focus:border-zinc-800 ring-0 focus:ring-0 text-ep-secondary sbw:text-sbw-secondary uch:text-uch-secondary h-4 w-4;
+    @apply focus:outline focus:outline-2 focus:outline-offset-2 focus:outline-zinc-800;
 
     &--has-error {
         @apply border-red-500;
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 7a8b871b..73bf15e6 100644
--- a/public/typo3conf/ext/ep_theme/Resources/Private/Partials/Badge.html
+++ b/public/typo3conf/ext/ep_theme/Resources/Private/Partials/Badge.html
@@ -14,11 +14,11 @@
                 <circle fill="currentColor" class="text-ep-primary-dark" 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">
-                <span class="block text-center text-white uppercase font-bold leading-none text-xl">
+                <span class="block text-center text-white bg-ep-primary-dark uppercase font-bold leading-none text-xl">
                     {badge.title -> f:format.raw()}
                 </span>
                 <f:if condition="{badge.subtitle}">
-                    <span class="block text-center text-white uppercase font-bold leading-none">
+                    <span class="block text-center text-white bg-ep-primary-dark uppercase font-bold leading-none">
                         {badge.subtitle -> f:format.raw()}
                     </span>
                 </f:if>
diff --git a/public/typo3conf/ext/ep_theme/Resources/Private/Partials/City/Teaser.html b/public/typo3conf/ext/ep_theme/Resources/Private/Partials/City/Teaser.html
index e993f9eb..36c1aa2d 100644
--- a/public/typo3conf/ext/ep_theme/Resources/Private/Partials/City/Teaser.html
+++ b/public/typo3conf/ext/ep_theme/Resources/Private/Partials/City/Teaser.html
@@ -42,7 +42,7 @@
                 <div class="flex-1 px-2 text-zinc-800" data-rte-content>
                     {city.teaser -> f:format.crop(maxCharacters: settings.teaserTextMaxChars) -> f:format.html()}
                 </div>
-                <div class="button bg-button w-full">
+                <div class="button teaser-button">
                     {f:translate(key: 'tx_eptheme.label.teaserbutton.default', extensionName: 'ep_theme')}
                 </div>
             </div>
diff --git a/public/typo3conf/ext/ep_theme/Resources/Private/Partials/ContactBar.html b/public/typo3conf/ext/ep_theme/Resources/Private/Partials/ContactBar.html
index 2a6d11bf..7976c6ad 100644
--- a/public/typo3conf/ext/ep_theme/Resources/Private/Partials/ContactBar.html
+++ b/public/typo3conf/ext/ep_theme/Resources/Private/Partials/ContactBar.html
@@ -5,6 +5,7 @@
 
     <div class="contact-bar">
         <a href="{f:uri.typolink(parameter: settings.watchlistPageUid)}"
+           tabindex="0"
            class="contact-bar__item"
            data-controller="watchlist-label"
            data-action="watchlist-toggle:toggle@window->watchlist-label#update"
@@ -15,6 +16,7 @@
             </div>
         </a>
         <a href="tel:{settings.phoneNumberLink}"
+           tabindex="0"
            class="contact-bar__item"
            rel="nofollow">
             {ep:icon(icon: 'phone', class: 'contact-bar__icon')}
@@ -23,7 +25,8 @@
             </div>
         </a>
         <f:link.email email="{settings.contactFormToEmail}"
-                      class="contact-bar__item">
+                      class="contact-bar__item"
+                      additionalAttributes="{tabindex: 0}">
             {ep:icon(icon: 'email', class: 'contact-bar__icon')}
             <div class="contact-bar__label">
                 {settings.contactFormToEmail}
@@ -31,6 +34,7 @@
         </f:link.email>
         <f:if condition="{settings.whatsApp}">
             <a href="{settings.whatsAppNumberLink}"
+               tabindex="0"
                class="contact-bar__item"
                target="_blank"
                rel="nofollow">
@@ -41,6 +45,7 @@
             </a>
         </f:if>
         <a href="{settings.facebookUrl}"
+           tabindex="0"
            class="contact-bar__item"
            target="_blank"
            rel="nofollow">
@@ -50,6 +55,7 @@
             </div>
         </a>
         <a href="{settings.instagramUrl}"
+           tabindex="0"
            class="contact-bar__item"
            target="_blank"
            rel="nofollow">
@@ -59,6 +65,7 @@
             </div>
         </a>
         <a href="{settings.youtubeUrl}"
+           tabindex="0"
            class="contact-bar__item"
            target="_blank"
            rel="nofollow">
@@ -69,6 +76,7 @@
         </a>
         <f:if condition="{settings.tiktokUrl}">
             <a href="{settings.tiktokUrl}"
+               tabindex="0"
                class="contact-bar__item"
                target="_blank"
                rel="nofollow">
@@ -79,7 +87,9 @@
             </a>
         </f:if>
         <f:if condition="{settings.englishPageUid}">
-            <f:link.typolink parameter="{settings.englishPageUid}" class="contact-bar__item">
+            <f:link.typolink parameter="{settings.englishPageUid}"
+                             class="contact-bar__item"
+                             additionalAttributes="{tabindex: 0}">
                 {ep:icon(icon: 'flag-gb', class: 'contact-bar__icon')}
                 <div class="contact-bar__label">
                     English
@@ -87,7 +97,9 @@
             </f:link.typolink>
         </f:if>
         <f:if condition="{settings.germanPageUid}">
-            <f:link.typolink parameter="{settings.germanPageUid}" class="contact-bar__item">
+            <f:link.typolink parameter="{settings.germanPageUid}"
+                             class="contact-bar__item"
+                             additionalAttributes="{tabindex: 0}">
                 {ep:icon(icon: 'flag-de', class: 'contact-bar__icon')}
                 <div class="contact-bar__label">
                     Deutsch
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 383d7ab0..ec91f1aa 100644
--- a/public/typo3conf/ext/ep_theme/Resources/Private/Partials/Footer.html
+++ b/public/typo3conf/ext/ep_theme/Resources/Private/Partials/Footer.html
@@ -179,7 +179,7 @@
             data-action="scroll-top#scroll"
             data-scroll-top-hidden-class="hidden"
             data-scroll-top-visible-class="flex"
-            class="hidden fixed bottom-0 right-0 mb-16 md:mb-8 mr-4 md:mr-8 z-10 h-10 w-10 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 items-center justify-center rounded bg-ep-pink/80 sbw:bg-sbw-secondary/80 snz:bg-snz-secondary/80 uch:bg-uch-secondary/80 ser:bg-ser-secondary/80">
         {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 15da6624..5097109d 100644
--- a/public/typo3conf/ext/ep_theme/Resources/Private/Partials/HeaderSlider.html
+++ b/public/typo3conf/ext/ep_theme/Resources/Private/Partials/HeaderSlider.html
@@ -35,7 +35,7 @@
                                         <f:if condition="{slide.button}">
                                             <f:link.typolink parameter="{slide.page_uid}"
                                                              additionalAttributes="{'tabindex': '-1'}"
-                                                             class="button bg-button--secondary inline-block">
+                                                             class="button bg-badge-gradient hover:bg-none hover:bg-ep-pink text-white inline-block">
                                                 {slide.button}
                                             </f:link.typolink>
                                         </f:if>
diff --git a/public/typo3conf/ext/ep_theme/Resources/Private/Partials/Hotel/Teaser.html b/public/typo3conf/ext/ep_theme/Resources/Private/Partials/Hotel/Teaser.html
index b218ac06..c93c788d 100644
--- a/public/typo3conf/ext/ep_theme/Resources/Private/Partials/Hotel/Teaser.html
+++ b/public/typo3conf/ext/ep_theme/Resources/Private/Partials/Hotel/Teaser.html
@@ -31,9 +31,9 @@
                     <span class="absolute inset-0"></span>
                 </a>
                 <f:if condition="{hotel.category}">
-                    <span class="searchresult-item__category">
+                    <div class="px-2">
                         <strong>Kategorie</strong> {hotel.category}
-                    </span>
+                    </div>
                 </f:if>
                 <div class="flex-1 px-2 text-zinc-800" data-rte-content>
                     {hotel.teaser -> f:format.crop(maxCharacters: settings.teaserTextMaxChars) -> f:format.html()}
@@ -43,7 +43,7 @@
                         </span>
                     </f:if>
                 </div>
-                <div class="button bg-button w-full">
+                <div class="button teaser-button">
                     {f:translate(key: 'tx_eptheme.label.teaserbutton.default', extensionName: 'ep_theme')}
                 </div>
             </div>
diff --git a/public/typo3conf/ext/ep_theme/Resources/Private/Partials/Mainnav.html b/public/typo3conf/ext/ep_theme/Resources/Private/Partials/Mainnav.html
index 1713a69c..fb3808c8 100644
--- a/public/typo3conf/ext/ep_theme/Resources/Private/Partials/Mainnav.html
+++ b/public/typo3conf/ext/ep_theme/Resources/Private/Partials/Mainnav.html
@@ -44,13 +44,19 @@
 
     <f:section name="FirstLevel">
         <nav role="navigation" aria-label="Hauptnavigation">
-            <ul class="m-0 p-0 list-none flex items-center justify-end space-x-4" role="menubar">
+            <ul class="m-0 p-0 list-none flex items-center justify-end space-x-4" 
+                role="menubar" >
                 <f:for each="{mainnav}" as="topitem">
-                    <li class="group pb-4" role="none">
+                    <li class="group pb-4" role="none" data-controller="nav" data-nav-hidden-class="invisible opacity-0">
                         <f:if condition="{topitem.children}">
                             <f:then>
                                 <a href="{f:uri.typolink(parameter: topitem.data.uid)}"
                                    role="menuitem"
+                                   id="mainnav-{topitem.data.uid}"
+                                   aria-haspopup="true"
+                                   aria-expanded="false" 
+                                   data-nav-target="button" 
+                                   data-action="keydown.space->nav#toggle"                                                                      
                                    class="text-zinc-800 uppercase lg:text-lg font-bold flex items-center">
                                     <span>{topitem.title}</span>
                                     {ep:icon(icon: 'chevron-down', class: 'ml-1 w-4 h-4 group-hover:rotate-180')}
@@ -93,7 +99,10 @@
     </f:section>
 
     <f:section name="SecondLevel">
-        <div class="absolute top-100 left-0 inset-x-0 pt-4 invisible opacity-0 group-hover:visible group-hover:opacity-100 transition-opacity duration-300 ease-in-out">
+        <div class="absolute top-100 left-0 inset-x-0 pt-4 invisible opacity-0 group-hover:visible group-hover:opacity-100 transition-opacity duration-300 ease-in-out" 
+            aria-hidden="true" 
+            aria-labelledby="mainnav-{topitem.data.uid}" 
+            data-nav-target="subnav">
             <div class="bg-white grid grid-cols-3 lg:grid-cols-4 gap-8 p-4 shadow-lg rounded">
                 <f:for each="{topitem.children}" as="subitem">
                     <ul class="m-0 p-0 list-none" role="menu">
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 49b18d99..7c721c97 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
@@ -13,7 +13,7 @@
     </f:section>
 
     <f:section name="TeaserImage">
-        <div class="{f:if(condition: landscape, then: ' sm:w-2/5')}">
+        <div class="relative{f:if(condition: landscape, then: ' sm:w-2/5')}">
             <f:if condition="{productImage}">
                 <f:then>
                     <ep:lazyLoadImage image="{productImage}"
@@ -88,10 +88,10 @@
             <div class="product-teaser__label-included">
                 {ep:nightsOptions(options: nights, daytrip: daytrip)}{f:if(condition: including, then: ' inkl.')}
             </div>
-            <ul class="product-teaser__list-included flex-1 list-none m-0 text-zinc-800 divide-y divide-zinc-400">
+            <ul class="product-teaser__list-included flex-1 list-none m-0 text-zinc-800 divide-y divide-zinc-400 pb-8">
                 {including -> f:format.raw()}
             </ul>
-            <div class="mt-8 bg-ep-primary-dark text-white font-bold px-4 py-1 peer-hover:bg-ep-secondary peer-hover:text-gray-900 transition-colors">
+            <div class="bg-ep-primary-dark text-white font-bold px-4 py-1 peer-hover:bg-badge-gradient peer-hover:text-white transition-colors">
                 <div class="lg:inline-block">
                     ab <span class="product-teaser__price mx-1">{minPrice} €</span>
                 </div>
diff --git a/public/typo3conf/ext/ep_theme/Resources/Private/Partials/Region/Teaser.html b/public/typo3conf/ext/ep_theme/Resources/Private/Partials/Region/Teaser.html
index e76982f9..98115da6 100644
--- a/public/typo3conf/ext/ep_theme/Resources/Private/Partials/Region/Teaser.html
+++ b/public/typo3conf/ext/ep_theme/Resources/Private/Partials/Region/Teaser.html
@@ -42,7 +42,7 @@
                 <div class="flex-1 px-2 text-zinc-800" data-rte-content>
                     {region.teaser -> f:format.crop(maxCharacters: settings.teaserTextMaxChars) -> f:format.html()}
                 </div>
-                <div class="button bg-button w-full">
+                <div class="button teaser-button">
                     {f:translate(key: 'tx_eptheme.label.teaserbutton.default', extensionName: 'ep_theme')}
                 </div>
             </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 56c42ee3..c09465a3 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
@@ -30,6 +30,7 @@
                     <div class="flex flex-col">
                         <div class="relative pb-2 md:pb-0">
                             <input type="text"
+                                aria-label="Reisezeitraum"
                                    class="border-px border-white text-white text-xl p-2 w-full bg-transparent focus:border-white focus:ring-0"
                                    data-datepicker-target="field">
                             {ep:icon(icon: 'calendar', class: 'w-6 h-6 text-white absolute top-0 right-0 translate-y-1/2 mr-2')}
@@ -75,14 +76,13 @@
             <ul class="mb-0 p-0 space-y-2">
                 <f:for each="{filterOptions.concepts}" as="concept">
                     <li>
-                        <label class="flex items-center">
+                        <label class="flex items-center" for="form-concept-{concept.uid}">
                             <f:form.checkbox class="mr-2 rounded-full w-5 h-5 border-white ring-0 bg-transparent focus:ring-0 focus:border-none text-ep-primary"
+                                             id="form-concept-{concept.uid}"
                                              property="conceptUids"
                                              data="{action: '{stimulusController}#filter'}"
                                              value="{concept.uid}"/>
-                            <span class="block w-full py-1 px-2 bg-concept-{concept.code} text-white rounded">
-                                {concept.name}
-                            </span>
+                            <span class="block w-full py-1 px-2 bg-concept-{concept.code} text-white text-lg rounded">{concept.name}</span>
                         </label>
                     </li>
                 </f:for>
@@ -99,7 +99,7 @@
         </div>
     </f:if>
 
-    <div class="px-4 divide-y py-2 px-4 hover-hover:lg:bg-white">
+    <div class="divide-y py-2 px-4 hover-hover:lg:bg-white">
 
         <div class="py-2"
              data-controller="collapse"
@@ -219,17 +219,19 @@
             <div data-collapse-target="container">
                 <ul class="mb-0 p-0 pt-4 space-y-2">
                     <f:for each="{filterOptions.hotelTypes}" as="type">
-                        <li>
-                            <label class="flex items-start">
-                                <f:form.checkbox class="w-5 h-5 border-ep-primary-light ring-0 bg-transparent focus:ring-0 focus:border-none text-ep-primary"
-                                                 property="hotelTypes"
-                                                 data="{action: '{stimulusController}#filter'}"
-                                                 value="{type}"/>
-                                <span class="leading-none pl-2">
-                                    {hotelTypes.{type}}
-                                </span>
-                            </label>
-                        </li>
+                        <f:if condition="{hotelTypes.{type}}">
+                            <li>
+                                <label class="flex items-start">
+                                    <f:form.checkbox class="w-5 h-5 border-ep-primary-light ring-0 bg-transparent focus:ring-0 focus:border-none text-ep-primary"
+                                                    property="hotelTypes"
+                                                    data="{action: '{stimulusController}#filter'}"
+                                                    value="{type}"/>
+                                    <span class="leading-none pl-2">
+                                        {hotelTypes.{type}}
+                                    </span>
+                                </label>
+                            </li>
+                        </f:if>
                     </f:for>
                 </ul>
             </div>
@@ -287,7 +289,7 @@
                 {ep:icon(icon: 'arrow-right', class: 'w-6 h-6 hover-none:text-white', data: '{collapse-target: \'icon\'}')}
             </button>
             <div data-collapse-target="container">
-                <ul class="mb-0 p-0 p-0 pt-4 space-y-2">
+                <ul class="mb-0 p-0 pt-4 space-y-2">
                     <f:for each="{filterOptions.roomTypes}" as="type">
                         <li>
                             <label class="flex items-start">
diff --git a/public/typo3conf/ext/ep_theme/Resources/Private/Partials/Search/Result.html b/public/typo3conf/ext/ep_theme/Resources/Private/Partials/Search/Result.html
index 45486cff..aede3bd4 100644
--- a/public/typo3conf/ext/ep_theme/Resources/Private/Partials/Search/Result.html
+++ b/public/typo3conf/ext/ep_theme/Resources/Private/Partials/Search/Result.html
@@ -3,16 +3,18 @@
       xmlns:f="http://typo3.org/ns/fluid/ViewHelpers"
       xmlns:ep="http://typo3.org/ns/EP/EpTheme/ViewHelpers">
 
-    <div class="flex items-center space-x-4 text-white text-lg p-4 mb-4 {f:if(condition: '{meta.organic} && {meta.total} > 0', then: 'bg-emerald-600', else: 'bg-red-600')}">
-        <f:if condition="{meta.organic} && {meta.total} > 0">
-            <f:then>
-                {ep:icon(icon: 'emoji-happy', class: 'w-6 h-6')}
-            </f:then>
-            <f:else>
-                {ep:icon(icon: 'emoji-sad', class: 'w-6 h-6')}
-            </f:else>
-        </f:if>
-        <span class="flex-1">
+    <div class="flex mb-4 border-2 rounded-sm {f:if(condition: '{meta.organic} && {meta.total} > 0', then: 'border-emerald-600', else: 'border-red-600')}">
+        <div class="flex flex-col items-center justify-center px-2 {f:if(condition: '{meta.organic} && {meta.total} > 0', then: 'bg-emerald-600', else: 'bg-red-600')}">
+            <f:if condition="{meta.organic} && {meta.total} > 0">
+                <f:then>
+                    {ep:icon(icon: 'emoji-happy', class: 'w-6 h-6 text-white')}
+                </f:then>
+                <f:else>
+                    {ep:icon(icon: 'emoji-sad', class: 'w-6 h-6 text-white')}
+                </f:else>
+            </f:if>
+        </div>
+        <div class="flex-1 px-4 py-2 bg-white text-lg">
             Deine Suche
             <f:if condition="{meta.organic}">
                 <f:then>
@@ -28,7 +30,7 @@
                     ergab leider keine genauen Treffer. Bitte benutze die Filter.
                 </f:else>
             </f:if>
-        </span>
+        </div>
     </div>
     <button type="button"
             class="lg:hidden mb-4 text-white bg-badge-gradient uppercase py-2 w-full"
diff --git a/public/typo3conf/ext/ep_theme/Resources/Private/Partials/Teaser/OneColumn.html b/public/typo3conf/ext/ep_theme/Resources/Private/Partials/Teaser/OneColumn.html
index 5c8e237b..b0e39bf4 100644
--- a/public/typo3conf/ext/ep_theme/Resources/Private/Partials/Teaser/OneColumn.html
+++ b/public/typo3conf/ext/ep_theme/Resources/Private/Partials/Teaser/OneColumn.html
@@ -17,14 +17,14 @@
                                     alt="{teaserImage.alternative}" />
             </div>
             <div class="flex-1 flex flex-col pt-4 bg-white border border-t-0 border-zinc-200">
-                <a href="{f:uri.typolink(parameter: data.header_link)}" class="px-2 peer headline--3 mb-4 no-underline">
+                <a href="{f:uri.typolink(parameter: data.header_link)}" class="px-2 peer headline--3 mb-2 no-underline">
                     {data.header -> f:format.nl2br()}{f:if(condition: data.subheader, then: '<br>{data.subheader}')}
                     <span class="absolute inset-0"></span>
                 </a>
-                <div class="flex-1 px-2 text-zinc-800" data-rte-content>
+                <div class="flex-1 px-2 pb-6 text-zinc-800" data-rte-content>
                     {data.bodytext -> f:format.html()}
                 </div>
-                <div class="button bg-button w-full">
+                <div class="button teaser-button">
                     {data.button -> v:or(alternative: 'Details')}
                 </div>
             </div>
diff --git a/public/typo3conf/ext/ep_theme/Resources/Private/Partials/Textmedia/LinkPanel.html b/public/typo3conf/ext/ep_theme/Resources/Private/Partials/Textmedia/LinkPanel.html
index bbf3d855..75dbbc0d 100644
--- a/public/typo3conf/ext/ep_theme/Resources/Private/Partials/Textmedia/LinkPanel.html
+++ b/public/typo3conf/ext/ep_theme/Resources/Private/Partials/Textmedia/LinkPanel.html
@@ -8,53 +8,53 @@
 		<div class="container lg:max-w-screen-2xl">
             <div class="grid grid-cols-1 lg:grid-cols-12 lg:grid-rows-3 lg:grid-flow-col gap-4 lg:gap-1 lg:h-128 bg-white">
                 <f:if condition="{images.0}">
-                    <div class="relative h-32 lg:h-auto lg:col-span-2 lg:row-span-1">
-                        <f:link.typolink parameter="{images.0.link}" class="absolute inset-0 z-20 flex items-center justify-center">
+                    <div class="relative h-32 lg:h-auto lg:col-span-2 lg:row-span-1 overflow-hidden">
+                        <f:link.typolink parameter="{images.0.link}" class="absolute inset-0 z-20 flex items-center justify-center peer">
                             <div class="inline-block px-4 py-2 text-center leading-none text-white hover:text-white text-2xl font-bold uppercase break-normal sbw:bg-sbw-secondary/90 uch:bg-uch-secondary/90 snz:bg-snz-secondary/90">
                                 {images.0.title -> f:format.raw()}
                             </div>
                         </f:link.typolink>
-                        <f:image image="{images.0}" alt="{images.0.alternative}" class="w-full h-full object-cover" />
+                        <f:image image="{images.0}" alt="{images.0.alternative}" class="w-full h-full object-cover transition-transform duration-300 peer-hover:scale-110" />
                     </div>
                 </f:if>
                 <f:if condition="{images.1}">
-                    <div class="relative h-32 lg:h-auto lg:col-span-2 lg:row-span-1">
-                        <f:link.typolink parameter="{images.1.link}" class="absolute inset-0 z-20 flex items-center justify-center">
+                    <div class="relative h-32 lg:h-auto lg:col-span-2 lg:row-span-1 overflow-hidden">
+                        <f:link.typolink parameter="{images.1.link}" class="absolute inset-0 z-20 flex items-center justify-center peer">
                             <div class="inline-block px-4 py-2 text-center leading-none text-white hover:text-white text-2xl font-bold uppercase break-normal sbw:bg-sbw-secondary/90 uch:bg-uch-secondary/90 snz:bg-snz-secondary/90">
                                 {images.1.title -> f:format.raw()}
                             </div>
                         </f:link.typolink>
-                        <f:image image="{images.1}" alt="{images.1.alternative}" class="w-full h-full object-cover" />
+                        <f:image image="{images.1}" alt="{images.1.alternative}" class="w-full h-full object-cover transition-transform duration-300 peer-hover:scale-110" />
                     </div>
                 </f:if>
                 <f:if condition="{images.4}">
-                    <div class="relative h-32 lg:h-auto lg:col-span-12 lg:row-span-1">
-                        <f:link.typolink parameter="{images.4.link}" class="absolute inset-0 z-20 flex items-center justify-center">
+                    <div class="relative h-32 lg:h-auto lg:col-span-12 lg:row-span-1 overflow-hidden">
+                        <f:link.typolink parameter="{images.4.link}" class="absolute inset-0 z-20 flex items-center justify-center peer">
                             <div class="inline-block px-4 py-2 text-center leading-none text-white hover:text-white text-2xl font-bold uppercase break-normal sbw:bg-sbw-secondary/90 uch:bg-uch-secondary/90 snz:bg-snz-secondary/90">
                                 {images.4.title -> f:format.raw()}
                             </div>
                         </f:link.typolink>
-                        <f:image image="{images.4}" alt="{images.4.alternative}" class="w-full h-full object-cover" />
+                        <f:image image="{images.4}" alt="{images.4.alternative}" class="w-full h-full object-cover transition-transform duration-300 peer-hover:scale-110" />
                     </div>
                 </f:if>
                 <f:if condition="{images.2}">
-                    <div class="relative h-32 lg:h-auto lg:col-span-4 lg:row-span-2">
-                        <f:link.typolink parameter="{images.2.link}" class="absolute inset-0 z-20 flex items-center justify-center">
+                    <div class="relative h-32 lg:h-auto lg:col-span-4 lg:row-span-2 overflow-hidden">
+                        <f:link.typolink parameter="{images.2.link}" class="absolute inset-0 z-20 flex items-center justify-center peer">
                             <div class="inline-block px-4 py-2 text-center leading-none text-white hover:text-white text-2xl font-bold uppercase break-normal sbw:bg-sbw-secondary/90 uch:bg-uch-secondary/90 snz:bg-snz-secondary/90">
                                 {images.2.title -> f:format.raw()}
                             </div>
                         </f:link.typolink>
-                        <f:image image="{images.2}" alt="{images.2.alternative}" class="w-full h-full object-cover" />
+                        <f:image image="{images.2}" alt="{images.2.alternative}" class="w-full h-full object-cover transition-transform duration-300 peer-hover:scale-110" />
                     </div>
                 </f:if>
                 <f:if condition="{images.3}">
-                    <div class="relative h-32 lg:h-auto lg:col-span-6 lg:row-span-2">
-                        <f:link.typolink parameter="{images.3.link}" class="absolute inset-0 z-20 w-full h-full flex items-center justify-center">
+                    <div class="relative h-32 lg:h-auto lg:col-span-6 lg:row-span-2 overflow-hidden">
+                        <f:link.typolink parameter="{images.3.link}" class="absolute inset-0 z-20 w-full h-full flex items-center justify-center peer">
                             <div class="inline-block px-4 py-2 text-center leading-none text-white hover:text-white text-2xl font-bold uppercase break-normal sbw:bg-sbw-secondary/90 uch:bg-uch-secondary/90 snz:bg-snz-secondary/90">
                                 {images.3.title -> f:format.raw()}
                             </div>
                         </f:link.typolink>
-                        <f:image image="{images.3}" alt="{images.3.alternative}" class="w-full h-full object-cover" />
+                        <f:image image="{images.3}" alt="{images.3.alternative}" class="w-full h-full object-cover transition-transform duration-300 peer-hover:scale-110" />
                     </div>
                 </f:if>
             </div>
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 456a4272..0bc1dfbe 100644
--- a/public/typo3conf/ext/ep_theme/Resources/Private/Partials/Topnav.html
+++ b/public/typo3conf/ext/ep_theme/Resources/Private/Partials/Topnav.html
@@ -3,10 +3,10 @@
       xmlns:ep="http://typo3.org/ns/EP/EpTheme/ViewHelpers"
       xmlns:f="http://typo3.org/ns/fluid/ViewHelpers">
 
-    <a href="#main-content" class="fixed left-0 top-0 bg-ep-primary-dark text-white py-1 px-4 z-50 transform focus:translate-y-12 transition">
+    <a href="#main-content" class="hidden lg:block fixed left-0 top-0 bg-ep-primary-dark text-white py-1 px-4 z-50 transform focus:translate-y-12 transition">
         zum Inhalt springen
     </a>
-
+    
     <f:if condition="{settings.hideAreaNavigation}">
         <f:else>
             <div class="topnav">
diff --git a/public/typo3conf/ext/ep_theme/Resources/Private/Templates/FluidStyledContent/TeaserCountry.html b/public/typo3conf/ext/ep_theme/Resources/Private/Templates/FluidStyledContent/TeaserCountry.html
index 5141b0aa..3801c498 100644
--- a/public/typo3conf/ext/ep_theme/Resources/Private/Templates/FluidStyledContent/TeaserCountry.html
+++ b/public/typo3conf/ext/ep_theme/Resources/Private/Templates/FluidStyledContent/TeaserCountry.html
@@ -6,7 +6,7 @@
     <f:layout name="Bare"/>
 
     <f:section name="Main">
-        <a href="{f:uri.typolink(parameter: country.detailPage)}" class="flex flex-col group">
+        <div class="relative flex flex-col">
             <div class="relative">
                 <svg class="w-8 h-6 absolute top-0 left-0">
                     <use href="{f:uri.image(src: 'EXT:ep_theme/Resources/Public/images/icons_sprite.svg')}#icon-flag-{country.code -> f:format.case(mode: 'lower')}"></use>
@@ -20,17 +20,19 @@
                                       alt="{country.name}" />
                 </f:if>
             </div>
-            <div class="flex-1 py-4 px-2 bg-white border-l border-r border-zinc-200" data-rte-content>
-                <span class="headline--3 mb-4">
+            <div class="flex-1 flex flex-col pt-4 bg-white border border-t-0 border-zinc-200">
+                <a href="{f:uri.typolink(parameter: country.detailPage)}" class="px-2 peer headline--3 mb-4 no-underline">
                     {country.name}
-                </span>
-                {country.teaser -> f:format.crop(maxCharacters: settings.teaserTextMaxChars) -> f:format.html()}
+                    <span class="absolute inset-0"></span>
+                </a>
+                <div class="flex-1 px-2 text-zinc-800" data-rte-content>
+                    {country.teaser -> f:format.crop(maxCharacters: settings.teaserTextMaxChars) -> f:format.html()}
+                </div>
+                <div class="button teaser-button w-full">
+                    {data.button -> v:or(alternative: 'Details')}
+                </div>
             </div>
-            <button type="button"
-                    class="button bg-button w-full">
-                {data.button -> v:or(alternative: 'Details')}
-            </button>
-        </a>
+        </div>
     </f:section>
 
 </html>
diff --git a/public/typo3conf/ext/ep_theme/Resources/Private/Templates/Region/Detail.html b/public/typo3conf/ext/ep_theme/Resources/Private/Templates/Region/Detail.html
index ebb1591a..7adc6705 100644
--- a/public/typo3conf/ext/ep_theme/Resources/Private/Templates/Region/Detail.html
+++ b/public/typo3conf/ext/ep_theme/Resources/Private/Templates/Region/Detail.html
@@ -32,7 +32,7 @@
                     <f:if condition="{teasers}">
                         <p class="hidden lg:block">
                             <button type="button"
-                                    class="button bg-button w-full mb-8 ml-4"
+                                    class="button bg-button w-full mb-8"
                                     data-controller="scroll-to"
                                     data-scroll-to-target-value="teasers"
                                     data-action="scroll-to#scroll">
diff --git a/public/typo3conf/ext/ep_theme/Resources/Private/Templates/Search/Searchresult.html b/public/typo3conf/ext/ep_theme/Resources/Private/Templates/Search/Searchresult.html
index 71616824..c5c760d5 100644
--- a/public/typo3conf/ext/ep_theme/Resources/Private/Templates/Search/Searchresult.html
+++ b/public/typo3conf/ext/ep_theme/Resources/Private/Templates/Search/Searchresult.html
@@ -15,7 +15,7 @@
                 </div>
                 <div class="fixed top-0 left-0 z-20 w-screen h-screen hidden"
                      data-search-target="loadingIndicator">
-                    <div class="absolute top-1/2 left-1/2 transform -translate-xy-1/2 flex items-center space-x-4 bg-ep-secondary text-white text-lg p-4 rounded">
+                    <div class="absolute top-1/2 left-1/2 transform -translate-xy-1/2 flex items-center space-x-4 bg-badge-gradient text-white text-lg p-4 rounded">
                         <svg class="w-6 h-6">
                             <use href="{f:uri.image(src: 'EXT:ep_theme/Resources/Public/images/icons_sprite.svg')}#icon-spinner"></use>
                         </svg>
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 009e9915..4316de2a 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
@@ -266,7 +266,7 @@
                                 Detailsuche
                             </button>
                             <button type="submit"
-                                    class="w-1/3 text-white bg-badge-gradient uppercase py-2">
+                                    class="w-1/3 text-white bg-badge-gradient hover:bg-none hover:bg-ep-pink transition-colors uppercase py-2">
                                 Alle Reisen anzeigen
                             </button>
                         </div>
diff --git a/tailwind.config.js b/tailwind.config.js
index 21bbb812..b2d0b20d 100644
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -15,6 +15,7 @@ module.exports = {
         'pt-8', 'pt-16', 'pb-8', 'pb-16',
         'bg-red-600',
         'bg-header-season-w', 'bg-header-season-s',
+        'bg-concept-ok', 'bg-concept-ok/70',
         'bg-concept-bdg', 'bg-concept-bdg/70',
         'bg-concept-skr', 'bg-concept-skr/70',
         'bg-concept-evt', 'bg-concept-evt/70',
@@ -66,6 +67,7 @@ module.exports = {
                     epe: '#436a8a',
                     sfl: '#4E4E51',
                     ser: '#e85243',
+                    ok: '#0173A5',
                 },
                 ep: {
                     primary: '#3d8ccb',
@@ -109,7 +111,7 @@ module.exports = {
                 '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%)',
+                'badge-gradient': 'linear-gradient(120deg, #960167 0%, #9e036a 40%, #fa1a8c 100%)',
                 'brand-gradient': 'linear-gradient(to top right, #009fff, #165883, #18527b)',
             },
             height: {