From 48b6f1a9db0d1688d29ed6050509cbfed80165d9 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Bj=C3=B6rn=20Fromme?= <fromme@dreipunktnull.com>
Date: Tue, 7 Jun 2022 15:14:35 +0200
Subject: [PATCH] Add dedicated button background class to simplify theming

---
 .../ep_theme/Configuration/RTE/Default.yaml   |   4 +-
 .../Assets/scss/components/_buttons.scss      |  28 ++-
 .../Private/Partials/City/Teaser.html         |   2 +-
 .../Private/Partials/ContactForm/Error.html   |   2 +-
 .../Private/Partials/ContactForm/Full.html    |  91 ---------
 .../Private/Partials/ContactForm/Simple.html  |  60 ------
 .../Private/Partials/ContactForm/Success.html |   2 +-
 .../Private/Partials/Disrupter/Large.html     |   2 +-
 .../Private/Partials/Disrupter/Small.html     |   2 +-
 .../Private/Partials/Disturber/Large.html     |   2 +-
 .../Private/Partials/Disturber/Small.html     |   2 +-
 .../Private/Partials/EventDisturber.html      |   2 +-
 .../Partials/Form/Form/Navigation.html        |   6 +-
 .../Private/Partials/HeaderSlider.html        |   4 +-
 .../Private/Partials/HeaderSliderSmall.html   |   2 +-
 .../Private/Partials/Hotel/Details.html       |   4 +-
 .../Private/Partials/Hotel/Teaser.html        |   2 +-
 .../Partials/Hotel/TeaserExtended.html        |  32 ----
 .../Private/Partials/Hotel/TeaserSimple.html  |  30 ---
 .../Private/Partials/Hotel/TeaserWide.html    | 173 ------------------
 .../Private/Partials/Menu/Type-3.html         |  24 ---
 .../Resources/Private/Partials/Mobilenav.html |   6 +-
 .../Private/Partials/News/List/Item.html      |   2 +-
 .../Private/Partials/Pricetable.html          |   2 +-
 .../Private/Partials/Product/Details.html     |   2 +-
 .../Partials/Product/HeaderDetail.html        |   2 +-
 .../Private/Partials/Product/Teaser.html      |   2 +-
 .../Private/Partials/Region/Details.html      |   2 +-
 .../Private/Partials/Region/Teaser.html       |   2 +-
 .../Private/Partials/Search/Main.html         |   2 +-
 .../Private/Partials/Teaser/OneColumn.html    |   2 +-
 .../Private/Partials/Teaser/TwoColumn.html    |   2 +-
 .../Templates/AjaxFilterPanel/Index.html      |   2 +-
 .../Templates/AjaxTable/Pricetable.html       |   6 +-
 .../Private/Templates/City/Detail.html        |   6 +-
 .../Private/Templates/Concept/Detail.html     |   4 +-
 .../Private/Templates/Country/Detail.html     |   6 +-
 .../Templates/FluidStyledContent/Button.html  |   2 +-
 .../FluidStyledContent/MenuSection.html       |   2 +-
 .../FluidStyledContent/MenuSectionPages.html  |   4 +-
 .../FluidStyledContent/MenuSubpages.html      |   2 +-
 .../FluidStyledContent/TeaserCountry.html     |   2 +-
 .../Private/Templates/Hotel/Detail.html       |   4 +-
 .../Private/Templates/News/News/Detail.html   |   2 +-
 .../ViewHelpers/Widget/Paginate/Index.html    |  16 +-
 .../Private/Templates/Product/Detail.html     |  28 +--
 .../Templates/Product/Teasergroup.html        |   2 +-
 .../Private/Templates/Region/Detail.html      |   4 +-
 .../Private/Templates/Searchbar/Index.html    |   8 +-
 .../Private/Templates/Team/Show.html          |   2 +-
 50 files changed, 101 insertions(+), 503 deletions(-)
 delete mode 100644 public/typo3conf/ext/ep_theme/Resources/Private/Partials/ContactForm/Full.html
 delete mode 100644 public/typo3conf/ext/ep_theme/Resources/Private/Partials/ContactForm/Simple.html
 delete mode 100644 public/typo3conf/ext/ep_theme/Resources/Private/Partials/Hotel/TeaserExtended.html
 delete mode 100644 public/typo3conf/ext/ep_theme/Resources/Private/Partials/Hotel/TeaserSimple.html
 delete mode 100644 public/typo3conf/ext/ep_theme/Resources/Private/Partials/Hotel/TeaserWide.html
 delete mode 100644 public/typo3conf/ext/ep_theme/Resources/Private/Partials/Menu/Type-3.html

diff --git a/public/typo3conf/ext/ep_theme/Configuration/RTE/Default.yaml b/public/typo3conf/ext/ep_theme/Configuration/RTE/Default.yaml
index 5c17d12e..0e2433e1 100644
--- a/public/typo3conf/ext/ep_theme/Configuration/RTE/Default.yaml
+++ b/public/typo3conf/ext/ep_theme/Configuration/RTE/Default.yaml
@@ -10,8 +10,8 @@ editor:
       - "EXT:ep_theme/Resources/Public/css/rte.css?v=2020.02-01"
 
     stylesSet:
-      - { name: "Button", element: "a", attributes: { 'class': 'button' } }
-      - { name: "Button (volle Breite)", element: "a", attributes: { 'class': 'button button--full' } }
+      - { name: "Button", element: "a", attributes: { 'class': 'button bg-button' } }
+      - { name: "Button (volle Breite)", element: "a", attributes: { 'class': 'button bg-button button--full' } }
 
     toolbarGroups:
       - { name: styles, groups: [ format, styles ] }
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 b8e9ebaa..89939a49 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,12 +2,23 @@
     @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 focus:outline-none;
+
+    &--small {
+        @apply px-2 py-1 md:px-4 text-xs sm:text-sm;
+    }
+
+    &--full {
+        @apply block w-full;
+    }
+}
+
+.bg-button {
     @apply bg-ep-primary-light text-white;
     @apply sbw:bg-sbw-secondary;
     @apply snz:bg-snz-secondary;
     @apply uch:bg-uch-secondary;
     @apply ser:bg-ser-secondary;
-    @apply hover:bg-ep-primary-dark group-hover:bg-ep-primary-dark;
+    @apply hover:bg-ep-secondary group-hover:bg-ep-secondary;
     @apply sbw:hover:bg-sbw-primary-dark sbw:group-hover:bg-sbw-primary-dark;
     @apply snz:hover:bg-snz-primary-dark snz:group-hover:bg-snz-primary-dark;
     @apply uch:hover:bg-uch-primary-dark uch:group-hover:bg-uch-primary-dark;
@@ -19,13 +30,18 @@
         @apply sbw:bg-sbw-primary;
         @apply snz:bg-snz-primary;
         @apply uch:bg-uch-primary;
-        @apply ser:bg-ser-primary;
+        @apply ser:bg-ser-secondary;
     }
 
     &--muted {
         @apply bg-gray-300 hover:bg-gray-300;
     }
 
+    &--dark {
+        @apply bg-ep-primary-dark;
+        @apply ser:bg-ser-primary;
+    }
+
     &--light {
         @apply bg-white border-2;
         @apply font-bold;
@@ -45,12 +61,4 @@
             @apply ser:bg-white ser:border-ser-secondary ser:text-ser-secondary;
         }
     }
-
-    &--small {
-        @apply px-2 py-1 md:px-4 text-xs sm:text-sm;
-    }
-
-    &--full {
-        @apply block w-full;
-    }
 }
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 d42b5a3b..80e9aedb 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
@@ -41,7 +41,7 @@
                 {city.teaser -> f:format.crop(maxCharacters: settings.teaserTextMaxChars) -> f:format.html()}
             </div>
             <button type="button"
-                    class="button w-full">
+                    class="button bg-button w-full">
                 {f:translate(key: 'tx_eptheme.label.teaserbutton.default', extensionName: 'ep_theme')}
             </button>
         </a>
diff --git a/public/typo3conf/ext/ep_theme/Resources/Private/Partials/ContactForm/Error.html b/public/typo3conf/ext/ep_theme/Resources/Private/Partials/ContactForm/Error.html
index 721ffac6..be31d827 100644
--- a/public/typo3conf/ext/ep_theme/Resources/Private/Partials/ContactForm/Error.html
+++ b/public/typo3conf/ext/ep_theme/Resources/Private/Partials/ContactForm/Error.html
@@ -8,7 +8,7 @@
         </p>
         <p>
             <button type="button"
-                    class="button button--small"
+                    class="button bg-button button--small"
                     data-action="contactform#reset">
                 Neue Anfrage
             </button>
diff --git a/public/typo3conf/ext/ep_theme/Resources/Private/Partials/ContactForm/Full.html b/public/typo3conf/ext/ep_theme/Resources/Private/Partials/ContactForm/Full.html
deleted file mode 100644
index c323a4fa..00000000
--- a/public/typo3conf/ext/ep_theme/Resources/Private/Partials/ContactForm/Full.html
+++ /dev/null
@@ -1,91 +0,0 @@
-<html data-namespace-typo3-fluid="true" lang="en"
-      xmlns="http://www.w3.org/1999/xhtml"
-      xmlns:f="http://typo3.org/ns/fluid/ViewHelpers">
-
-    <f:form id="contactform" object="{contactForm}" name="contactForm"
-            action="processForm" controller="AjaxForm" pluginName="Ajax" pageType="1803"
-            pageUid="{settings.defaultAjaxUid}"
-            data="{'contactform-target': 'form', 'action': 'contactform#submit'}">
-        <f:form.hidden property="pageUrl"/>
-        <label class="block mb-4 hidden">
-            <span class="text-gray-700">Betreff*</span>
-            <f:form.textfield class="border-gray-400 focus:border-gray-800 mt-1 w-full" property="subject"/>
-        </label>
-        <label class="block mb-4" x-bind:class="'has-validation-error' && formErrors.name">
-            <span x-bind:class="formErrors.name ? 'text-red-500' : 'text-gray-700'">Name*</span>
-            <f:form.textfield class="border-gray-400 focus:border-gray-800 ring-0 focus:ring-0 mt-1 w-full" property="name"/>
-            <div class="text-red-500 mt-2" x-show="formErrors.name" x-html="formErrors.name"></div>
-        </label>
-        <label class="block mb-4" x-bind:class="'has-validation-error' && formErrors.firstName">
-            <span x-bind:class="formErrors.firstName ? 'text-red-500' : 'text-gray-700'">Vorname*</span>
-            <f:form.textfield class="border-gray-400 focus:border-gray-800 mt-1 w-full" property="firstName"/>
-            <div class="text-red-500 mt-2" x-show="formErrors.firstName" x-html="formErrors.firstName"></div>
-        </label>
-        <label class="block mb-4" x-bind:class="'has-validation-error' && formErrors.gender">
-            <span x-bind:class="formErrors.gender ? 'text-red-500' : 'text-gray-700'">Gender*</span>
-            <f:form.select class="border-gray-400 focus:border-gray-800 mt-1 w-full" property="gender" options="{M: 'M', W: 'W', D: 'D'}"/>
-            <div class="text-red-500 mt-2" x-show="formErrors.gender" x-html="formErrors.gender"></div>
-        </label>
-        <label class="block mb-4" x-bind:class="'has-validation-error' && formErrors.company">
-            <span x-bind:class="formErrors.company ? 'text-red-500' : 'text-gray-700'">Firma/Verein*</span>
-            <f:form.textfield class="border-gray-400 focus:border-gray-800 mt-1 w-full" property="company"/>
-            <div class="text-red-500 mt-2" x-show="formErrors.company" x-html="formErrors.company"></div>
-        </label>
-        <label class="block mb-4" x-bind:class="'has-validation-error' && formErrors.email">
-            <span x-bind:class="formErrors.email ? 'text-red-500' : 'text-gray-700'">E-Mail*</span>
-            <f:form.textfield class="border-gray-400 focus:border-gray-800 mt-1 w-full" property="email"/>
-            <div class="text-red-500 mt-2" x-show="formErrors.email" x-html="formErrors.email"></div>
-        </label>
-        <label class="block mb-4" x-bind:class="'has-validation-error' && formErrors.phone">
-            <span x-bind:class="formErrors.phone ? 'text-red-500' : 'text-gray-700'">Telefon/Fax*</span>
-            <f:form.textfield class="border-gray-400 focus:border-gray-800 mt-1 w-full" property="phone"/>
-            <div class="text-red-500 mt-2" x-show="formErrors.phone" x-html="formErrors.phone"></div>
-        </label>
-        <label class="block mb-4" x-bind:class="'has-validation-error' && formErrors.period">
-            <span x-bind:class="formErrors.period ? 'text-red-500' : 'text-gray-700'">Zeitraum</span>
-            <f:form.textfield class="border-gray-400 focus:border-gray-800 mt-1 w-full" property="period" placeholder="tt.mm.jjjj - tt.mm.jjjj"/>
-            <div class="text-red-500 mt-2" x-show="formErrors.period" x-html="formErrors.period"></div>
-        </label>
-        <label class="block mb-4" x-bind:class="'has-validation-error' && formErrors.duration">
-            <span x-bind:class="formErrors.duration ? 'text-red-500' : 'text-gray-700'">Aufenthaltsdauer</span>
-            <f:form.textfield class="border-gray-400 focus:border-gray-800 mt-1 w-full" property="duration" placeholder="Tage inkl. An- & Abreisetag"/>
-            <div class="text-red-500 mt-2" x-show="formErrors.duration" x-html="formErrors.duration"></div>
-        </label>
-        <label class="block mb-4" x-bind:class="'has-validation-error' && formErrors.pax">
-            <span x-bind:class="formErrors.pax ? 'text-red-500' : 'text-gray-700'">Anzahl der Personen</span>
-            <f:form.textfield class="border-gray-400 focus:border-gray-800 mt-1 w-full" property="pax" placeholder="ab 25 Personen"/>
-            <div class="text-red-500 mt-2" x-show="formErrors.pax" x-html="formErrors.pax"></div>
-        </label>
-        <label class="block mb-4" x-bind:class="'has-validation-error' && formErrors.age">
-            <span x-bind:class="formErrors.age ? 'text-red-500' : 'text-gray-700'">Durchschnittsalter</span>
-            <f:form.textfield class="border-gray-400 focus:border-gray-800 mt-1 w-full" property="age"/>
-            <div class="text-red-500 mt-2" x-show="formErrors.age" x-html="formErrors.age"></div>
-        </label>
-        <div class="mb-4">
-            <label class="inline-flex items-center">
-                <f:form.checkbox class="border-gray-400 focus:border-gray-800 text-ep-secondary sbw:text-sbw-secondary" property="children" value="Ja"/>
-                <span class="ml-2">Kinder (ja/nein)</span>
-            </label>
-        </div>
-        <label class="block mb-4" x-bind:class="'has-validation-error' && formErrors.inquiry">
-            <span x-bind:class="formErrors.inquiry ? 'text-red-500' : 'text-gray-700'">(Zusatz-) Wünsche</span>
-            <f:form.textarea class="border-gray-400 focus:border-gray-800 mt-1 w-full"
-                             property="inquiry"
-                             placeholder="z. B. Reiseleiter, Halbpension, Bus Anreise, Programm"
-                             cols="30" rows="5"/>
-            <div class="text-red-500 mt-2" x-show="formErrors.inquiry" x-html="formErrors.inquiry"></div>
-        </label>
-        <div class="mb-4">
-            Ich habe die <f:link.typolink parameter="{settings.dataProtectionPageUid}"
-                                          title="Datenschutzerklärung"
-                                          target="_blank">Datenschutzbestimmungen</f:link.typolink> gelesen und akzeptiert.
-        </div>
-        <div class="mb-4">
-            <button type="submit"
-                    class="button button-warning">
-                Jetzt anfragen
-            </button>
-        </div>
-    </f:form>
-
-</html>
diff --git a/public/typo3conf/ext/ep_theme/Resources/Private/Partials/ContactForm/Simple.html b/public/typo3conf/ext/ep_theme/Resources/Private/Partials/ContactForm/Simple.html
deleted file mode 100644
index ab6b9995..00000000
--- a/public/typo3conf/ext/ep_theme/Resources/Private/Partials/ContactForm/Simple.html
+++ /dev/null
@@ -1,60 +0,0 @@
-<html data-namespace-typo3-fluid="true" lang="en"
-      xmlns="http://www.w3.org/1999/xhtml"
-      xmlns:f="http://typo3.org/ns/fluid/ViewHelpers">
-
-    <f:form id="contactform" object="{contactForm}" name="contactForm"
-            action="processForm" controller="AjaxForm" pluginName="Ajax" pageType="1803"
-            pageUid="{settings.defaultAjaxUid}"
-            data="{'contactform-target': 'form', 'action': 'contactform#submit'}">
-        <f:form.hidden property="pageUrl"/>
-        <label class="block mb-4 hidden">
-            <span class="text-gray-700">Betreff*</span>
-            <f:form.textfield class="border-gray-400 focus:border-gray-800 mt-1 w-full" property="subject"/>
-        </label>
-        <label class="block mb-4" x-bind:class="'has-validation-error' && formErrors.gender">
-            <span x-bind:class="formErrors.gender ? 'text-red-500' : 'text-gray-700'">Gender*</span>
-            <f:form.select class="border-gray-400 focus:border-gray-800 mt-1 w-full" property="gender" options="{M: 'M', W: 'W', D: 'D'}"/>
-            <div class="text-red-500" x-show="formErrors.gender" x-html="formErrors.gender"></div>
-        </label>
-        <label class="block mb-4" x-bind:class="'has-validation-error' && formErrors.name">
-            <span x-bind:class="formErrors.name ? 'text-red-500' : 'text-gray-700'">Name*</span>
-            <f:form.textfield class="border-gray-400 focus:border-gray-800 mt-1 w-full" property="name"/>
-            <div class="text-red-500" x-show="formErrors.name" x-html="formErrors.name"></div>
-        </label>
-        <label class="block mb-4" x-bind:class="'has-validation-error' && formErrors.firstName">
-            <span x-bind:class="formErrors.firstName ? 'text-red-500' : 'text-gray-700'">Vorname*</span>
-            <f:form.textfield class="border-gray-400 focus:border-gray-800 mt-1 w-full" property="firstName"/>
-            <div class="text-red-500" x-show="formErrors.firstName" x-html="formErrors.firstName"></div>
-        </label>
-        <label class="block mb-4" x-bind:class="'has-validation-error' && formErrors.email">
-            <span x-bind:class="formErrors.email ? 'text-red-500' : 'text-gray-700'">E-Mail*</span>
-            <f:form.textfield class="border-gray-400 focus:border-gray-800 mt-1 w-full" property="email"/>
-            <div class="text-red-500" x-show="formErrors.email" x-html="formErrors.email"></div>
-        </label>
-        <label class="block mb-4" x-bind:class="'has-validation-error' && formErrors.phone">
-            <span x-bind:class="formErrors.phone ? 'text-red-500' : 'text-gray-700'">Telefon/Fax*</span>
-            <f:form.textfield class="border-gray-400 focus:border-gray-800 mt-1 w-full" property="phone"/>
-            <div class="text-red-500" x-show="formErrors.phone" x-html="formErrors.phone"></div>
-        </label>
-        <label class="block mb-4" x-bind:class="'has-validation-error' && formErrors.inquiry">
-            <span x-bind:class="formErrors.inquiry ? 'text-red-500' : 'text-gray-700'">(Zusatz-) Wünsche</span>
-            <f:form.textarea class="border-gray-400 focus:border-gray-800 mt-1 w-full"
-                             property="inquiry"
-                             placeholder="z. B. Reiseleiter, Halbpension, Bus Anreise, Programm"
-                             cols="30" rows="5"/>
-            <div class="text-red-500" x-show="formErrors.inquiry" x-html="formErrors.inquiry"></div>
-        </label>
-        <div class="mb-4">
-            Ich habe die <f:link.typolink parameter="{settings.dataProtectionPageUid}"
-                                          title="Datenschutzerklärung"
-                                          target="_blank">Datenschutzbestimmungen</f:link.typolink> gelesen und akzeptiert.
-        </div>
-        <div class="mb-4">
-            <button type="submit"
-                    class="button button-warning">
-                Jetzt anfragen
-            </button>
-        </div>
-    </f:form>
-
-</html>
diff --git a/public/typo3conf/ext/ep_theme/Resources/Private/Partials/ContactForm/Success.html b/public/typo3conf/ext/ep_theme/Resources/Private/Partials/ContactForm/Success.html
index f74b0183..570d878a 100644
--- a/public/typo3conf/ext/ep_theme/Resources/Private/Partials/ContactForm/Success.html
+++ b/public/typo3conf/ext/ep_theme/Resources/Private/Partials/ContactForm/Success.html
@@ -9,7 +9,7 @@
         </p>
         <p>
             <button type="button"
-                    class="button button--small"
+                    class="button bg-button button--small"
                     data-action="contactform#reset">
                 Neue Anfrage
             </button>
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 550f6848..cfe248c5 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
@@ -50,7 +50,7 @@
                     <div class="grid grid-cols-1 sm:grid-cols-2 gap-4 lg:gap-8">
                         <f:for each="{data.flexForm.buttons}" as="button">
                             <f:link.typolink parameter="{button.container.link}"
-                                             class="button shadow-lg">
+                                             class="button bg-button shadow-lg">
                                 {button.container.label}
                             </f:link.typolink>
                         </f:for>
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 cb5ee59a..579d6c1d 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
@@ -28,7 +28,7 @@
                     <div class="flex flex-col space-y-4 md:flex-row md:items-center md:space-y-0 md:space-x-4">
                         <f:for each="{data.flexForm.buttons}" as="button" iteration="iteration">
                             <f:if condition="{iteration.cycle} <= 3">
-                                <f:link.typolink parameter="{button.container.link}" class="button shadow-lg">
+                                <f:link.typolink parameter="{button.container.link}" class="button bg-button shadow-lg">
                                     {button.container.label}
                                 </f:link.typolink>
                             </f:if>
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 037a1cc5..88a0da98 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
@@ -51,7 +51,7 @@
                     <div class="grid grid-cols-1 sm:grid-cols-2 gap-4 lg:gap-8">
                         <f:for each="{data.flexForm.buttons}" as="button">
                             <f:link.typolink parameter="{button.container.link}"
-                                             class="button shadow-lg">
+                                             class="button bg-button shadow-lg">
                                 {button.container.label}
                             </f:link.typolink>
                         </f:for>
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 c17065af..7abf7b58 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
@@ -28,7 +28,7 @@
                     <div class="flex flex-col space-y-4 md:flex-row md:items-center md:space-y-0 md:space-x-4">
                         <f:for each="{data.flexForm.buttons}" as="button" iteration="iteration">
                             <f:if condition="{iteration.cycle} <= 3">
-                                <f:link.typolink parameter="{button.container.link}" class="button shadow-lg">
+                                <f:link.typolink parameter="{button.container.link}" class="button bg-button shadow-lg">
                                     {button.container.label}
                                 </f:link.typolink>
                             </f:if>
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 bf8778ec..dc55413b 100644
--- a/public/typo3conf/ext/ep_theme/Resources/Private/Partials/EventDisturber.html
+++ b/public/typo3conf/ext/ep_theme/Resources/Private/Partials/EventDisturber.html
@@ -21,7 +21,7 @@
                         </ul>
                     </div>
                     <div class="w-full lg:w-1/3 lg:px-4">
-                        <a class="button w-full"
+                        <a class="button bg-button w-full"
                            href="{f:uri.typolink(parameter: buttonLink)}"
                            title="{buttonLabel -> f:format.raw()}">
                             {buttonLabel -> f:format.raw()}
diff --git a/public/typo3conf/ext/ep_theme/Resources/Private/Partials/Form/Form/Navigation.html b/public/typo3conf/ext/ep_theme/Resources/Private/Partials/Form/Form/Navigation.html
index 9853c2a2..6436f012 100644
--- a/public/typo3conf/ext/ep_theme/Resources/Private/Partials/Form/Form/Navigation.html
+++ b/public/typo3conf/ext/ep_theme/Resources/Private/Partials/Form/Form/Navigation.html
@@ -3,14 +3,14 @@
     <div class="button-group" role="group">
         <f:if condition="{form.previousPage}">
             <f:form.hidden property="__currentPage" value="{form.previousPage.index}" />
-            <f:form.button type="button" onclick="document.forms['{form.formDefinition.identifier}'].submit();" class="button" formnovalidate="formnovalidate">{formvh:translateElementProperty(element: form.currentPage, renderingOptionProperty: 'previousButtonLabel')}</f:form.button>
+            <f:form.button type="button" onclick="document.forms['{form.formDefinition.identifier}'].submit();" class="button bg-button" formnovalidate="formnovalidate">{formvh:translateElementProperty(element: form.currentPage, renderingOptionProperty: 'previousButtonLabel')}</f:form.button>
         </f:if>
         <f:if condition="{form.nextPage}">
             <f:then>
-                <f:form.button property="__currentPage" value="{form.nextPage.index}" class="button">{formvh:translateElementProperty(element: form.currentPage, renderingOptionProperty: 'nextButtonLabel')}</f:form.button>
+                <f:form.button property="__currentPage" value="{form.nextPage.index}" class="button bg-button">{formvh:translateElementProperty(element: form.currentPage, renderingOptionProperty: 'nextButtonLabel')}</f:form.button>
             </f:then>
             <f:else>
-                <f:form.button property="__currentPage" value="{form.pages -> f:count()}" class="button">
+                <f:form.button property="__currentPage" value="{form.pages -> f:count()}" class="button bg-button">
                     {formvh:translateElementProperty(element: form, renderingOptionProperty: 'submitButtonLabel')}
                 </f:form.button>
             </f:else>
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 a6f4b237..220b6edb 100644
--- a/public/typo3conf/ext/ep_theme/Resources/Private/Partials/HeaderSlider.html
+++ b/public/typo3conf/ext/ep_theme/Resources/Private/Partials/HeaderSlider.html
@@ -34,12 +34,12 @@
                                         </f:if>
                                         <f:if condition="{slide.button}">
                                             <f:link.typolink parameter="{slide.page_uid}"
-                                                             class="button hidden md:inline-block">
+                                                             class="button bg-button hidden md:inline-block">
                                                 {slide.button}
                                             </f:link.typolink>
                                         </f:if>
                                         <button type="button"
-                                                class="button inline-block md:hidden"
+                                                class="button bg-button inline-block md:hidden"
                                                 data-controller="overlay-toggle"
                                                 data-overlay-toggle-id-value="mobile-search"
                                                 data-action="overlay-toggle#invokeToggle">
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 28b632ac..aa3dd08c 100644
--- a/public/typo3conf/ext/ep_theme/Resources/Private/Partials/HeaderSliderSmall.html
+++ b/public/typo3conf/ext/ep_theme/Resources/Private/Partials/HeaderSliderSmall.html
@@ -28,7 +28,7 @@
                         </span>
                         <f:if condition="{slide.button}">
                             <f:link.typolink parameter="{slide.page_uid}"
-                                             class="inline-block button">
+                                             class="button bg-button inline-block">
                                 {slide.button}
                             </f:link.typolink>
                         </f:if>
diff --git a/public/typo3conf/ext/ep_theme/Resources/Private/Partials/Hotel/Details.html b/public/typo3conf/ext/ep_theme/Resources/Private/Partials/Hotel/Details.html
index aa1e73b9..41b36f8d 100644
--- a/public/typo3conf/ext/ep_theme/Resources/Private/Partials/Hotel/Details.html
+++ b/public/typo3conf/ext/ep_theme/Resources/Private/Partials/Hotel/Details.html
@@ -17,7 +17,7 @@
         {hotel.description -> f:format.html()}
         <f:if condition="{hotel.groupsPriceConfigs}">
             <f:else>
-                <f:link.typolink class="button" parameter="{settings.groupsContactFormPageUid}" additionalParams="&ref={currentPageUid}">
+                <f:link.typolink class="button bg-button" parameter="{settings.groupsContactFormPageUid}" additionalParams="&ref={currentPageUid}">
                     <f:translate key="tx_eptheme.label.to_inquiry_form" extensionName="ep_theme"/>
                 </f:link.typolink>
             </f:else>
@@ -69,7 +69,7 @@
                     <f:if condition="{settings.hideMoreLink}">
                         <f:else>
                             <div class="text-right mt-4">
-                                <f:link.typolink class="button"
+                                <f:link.typolink class="button bg-button"
                                                  parameter="{settings.defaultSearchPageUid}"
                                                  additionalParams="f={filterSettings -> ep:filterSettingsEncoder()}">
                                     Alle anzeigen
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 58d7bdfe..910e8726 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
@@ -42,7 +42,7 @@
                 </f:if>
             </div>
             <button type="button"
-                    class="button w-full">
+                    class="button bg-button w-full">
                 {f:translate(key: 'tx_eptheme.label.teaserbutton.default', extensionName: 'ep_theme')}
             </button>
         </a>
diff --git a/public/typo3conf/ext/ep_theme/Resources/Private/Partials/Hotel/TeaserExtended.html b/public/typo3conf/ext/ep_theme/Resources/Private/Partials/Hotel/TeaserExtended.html
deleted file mode 100644
index c1817f6c..00000000
--- a/public/typo3conf/ext/ep_theme/Resources/Private/Partials/Hotel/TeaserExtended.html
+++ /dev/null
@@ -1,32 +0,0 @@
-<html data-namespace-typo3-fluid="true" lang="en"
-      xmlns="http://www.w3.org/1999/xhtml"
-      xmlns:f="http://typo3.org/ns/fluid/ViewHelpers">
-
-    <f:section name="Teaser">
-        <f:link.typolink class="teaserbox teaserbox--hotel" parameter="{hotel.detailPage}" title="{hotel.name}">
-            <div class="teaserbox__image">
-                <img class="teaserbox__flag"
-                     src="{hotel.country.flag}"
-                     alt="{hotel.country.name}"/>
-                <f:render partial="TeaserImage" arguments="{image: hotel.images.original.0}"/>
-            </div>
-            <div class="teaserbox__main">
-                <span class="headline headline--3 headline--teaser">{hotel.name -> f:format.nl2br()}</span>
-                <f:if condition="{hotel.category}">
-                    <span class="searchresult-item__category"><strong>Kategorie</strong> {hotel.category}</span>
-                </f:if>
-                <hr>
-                {hotel.teaser -> f:format.crop(maxCharacters: settings.teaserTextMaxChars) -> f:format.html()}
-                <f:if condition="{hotel.available} != -1">
-                    <hr>
-                    <span class="teaserbox__price"><strong>{f:if(condition: '{hotel.available} > 0', then: 'ab {hotel.minPrice} €', else: 'ausgebucht')}</strong></span>
-                </f:if>
-            </div>
-            <button type="button"
-                    class="button button--full teaserbox__button">
-                {f:translate(key: 'tx_eptheme.label.teaserbutton.default', extensionName: 'ep_theme')}
-            </button>
-        </f:link.typolink>
-    </f:section>
-
-</html>
diff --git a/public/typo3conf/ext/ep_theme/Resources/Private/Partials/Hotel/TeaserSimple.html b/public/typo3conf/ext/ep_theme/Resources/Private/Partials/Hotel/TeaserSimple.html
deleted file mode 100644
index f72c3fa2..00000000
--- a/public/typo3conf/ext/ep_theme/Resources/Private/Partials/Hotel/TeaserSimple.html
+++ /dev/null
@@ -1,30 +0,0 @@
-<html data-namespace-typo3-fluid="true" lang="en"
-      xmlns="http://www.w3.org/1999/xhtml"
-      xmlns:f="http://typo3.org/ns/fluid/ViewHelpers">
-
-    <f:section name="Teaser">
-        <f:link.typolink class="teaserbox teaserbox--hotel" parameter="{hotel.detailPage}" title="{hotel.name}">
-            <div class="teaserbox__image">
-                <img class="teaserbox__flag"
-                     src="{hotel.country.flag}"
-                     alt="{hotel.country.name}"/>
-                <f:render partial="TeaserImage" arguments="{image: hotel.images.original.0}"/>
-            </div>
-            <div class="teaserbox__main">
-                <span class="headline headline--3 headline--teaser">{hotel.name -> f:format.nl2br()}</span>
-                <f:if condition="{hotel.category}">
-                    <span class="searchresult-item__category"><strong>Kategorie</strong> {hotel.category}</span>
-                </f:if>
-                <f:if condition="{hotel.available} != -1">
-                    <hr>
-                    {hotel.teaser -> f:format.crop(maxCharacters: settings.teaserTextMaxChars) -> f:format.html()}
-                </f:if>
-            </div>
-            <button type="button"
-                    class="button button--full teaserbox__button">
-                {f:translate(key: 'tx_eptheme.label.teaserbutton.default', extensionName: 'ep_theme')}
-            </button>
-        </f:link.typolink>
-    </f:section>
-
-</html>
diff --git a/public/typo3conf/ext/ep_theme/Resources/Private/Partials/Hotel/TeaserWide.html b/public/typo3conf/ext/ep_theme/Resources/Private/Partials/Hotel/TeaserWide.html
deleted file mode 100644
index 1daddec1..00000000
--- a/public/typo3conf/ext/ep_theme/Resources/Private/Partials/Hotel/TeaserWide.html
+++ /dev/null
@@ -1,173 +0,0 @@
-<html xmlns="http://www.w3.org/1999/xhtml" lang="en"
-      xmlns:f="http://typo3.org/ns/fluid/ViewHelpers"
-      xmlns:ep="http://typo3.org/ns/EP/EpTheme/ViewHelpers">
-
-    <f:layout name="Default"/>
-
-    <f:section name="Teaser">
-        <div class="teaserbox teaserbox--landscape teaserbox--searchresult searchresult-item">
-            <div class="teaserbox__image">
-                <img class="teaserbox__flag"
-                     src="{item.country.flag}"
-                     alt="{item.country.name}"/>
-                <f:link.action action="detail" controller="Product"
-                               pageUid="{detailPage}"
-                               arguments="{product: product.uid, hotel: item.hotel.uid}"
-                               additionalParams="{ref: '{f:uri.page()}'}"
-                >
-                    <f:render section="Image" arguments="{_all}"/>
-                </f:link.action>
-                <f:if condition="{product.concept.code}">
-                    <div class="concept-badge concept-badge--{product.concept.code}">{product.concept.name}</div>
-                </f:if>
-            </div>
-            <div class="teaserbox__main">
-                <div class="teaserbox__header">
-                    <p class="subline searchresult-item__headline">
-                        {product.region.name}<f:if condition="{product.concept.code} == 'evt'"><strong> | {product.name}</strong></f:if>
-                    </p>
-                    <p class="searchresult-item__subline">{item.hotel.name -> f:format.nl2br()}</p>
-                    <f:if condition="{item.hotel.category}">
-                        <span class="searchresult-item__category"><strong>Kategorie</strong> {item.hotel.category}</span>
-                    </f:if>
-                </div>
-                <f:if condition="{item.available} > 0">
-                    <f:then>
-                        <ul class="check-list searchresult-item__checklist">
-                            <f:if condition="{item.hotel.fact}">
-                                <li>{item.hotel.fact}</li>
-                            </f:if>
-                            <f:if condition="{item.product.fact}">
-                                <li>{item.product.fact}</li>
-                            </f:if>
-                            <f:if condition="{product.region.feature}">
-                                <f:then>
-                                    <li>{product.region.feature}</li>
-                                </f:then>
-                                <f:else>
-                                    <f:if condition="{item.region.fact}">
-                                        <li>{item.region.fact}</li>
-                                    </f:if>
-                                </f:else>
-                            </f:if>
-                        </ul>
-                        <ul class="check-list check-list--inverted searchresult-item__featurelist">
-                            <li>Skipass</li>
-                            <f:if condition="{item.board}">
-                                <li>{item.board}</li>
-                            </f:if>
-                            <f:if condition="{product.feature}">
-                                <li>{product.feature}</li>
-                            </f:if>
-                        </ul>
-                    </f:then>
-                    <f:else>
-                        {item.hotel.teaser -> f:format.html()}
-                    </f:else>
-                </f:if>
-            </div>
-            <div class="teaserbox__aside">
-                <f:if condition="{item.available} > 0">
-                    <f:then>
-                        <div class="teaserbox__aside__top">
-                            <span class="searchresult-item__label">{f:if(condition: '{item.dates -> f:count()} > 1', then: 'Zeitraum', else: 'Termin')}</span>
-                            <span class="searchresult-item__daterange">{ep:dateRange(dateFrom: item.minDateStart, dateTo: item.maxDateEnd, includeLabel: 0)}</span>
-                            <f:if condition="{item.dates -> f:count()} > 1">
-                                <f:link.action action="detail" controller="Product"
-                                               pageUid="{detailPage}"
-                                               arguments="{product: product.uid, hotel: item.hotel.uid}"
-                                               additionalParams="{ref: '{f:uri.page()}'}"
-                                               additionalAttributes="{rel: 'nofollow'}"
-                                >
-                                    <span class="searchresult-item__daterange">
-                                        <i class="fa fa-arrow-circle-right"></i> {item.dates -> f:count()} Termin{f:if(condition: '{item.dates -> f:count()} > 1', then: 'e')}
-                                    </span>
-                                </f:link.action>
-                            </f:if>
-                            <hr>
-                            <span class="searchresult-item__label">{ep:nightsOptions(options: item.nights)}</span>
-                        </div>
-                        <div class="teaserbox__aside__bottom">
-                            <span class="searchresult-item__price">ab {item.minPrice} €</span>
-                            <f:link.action action="detail" controller="Product"
-                                           pageUid="{detailPage}"
-                                           arguments="{product: product.uid, hotel: item.hotel.uid}"
-                                           additionalParams="{ref: '{f:uri.page()}'}"
-                                           additionalAttributes="{rel: 'nofollow'}"
-                                           class="button button--full searchresult-item__button"
-                            >
-                                Details &amp; Buchen
-                            </f:link.action>
-                        </div>
-                    </f:then>
-                    <f:else>
-                        <div class="teaserbox__aside__top">&nbsp;</div>
-                        <div class="teaserbox__aside__bottom">
-                            <span class="searchresult-item__price">ausgebucht</span>
-                            <f:link.action action="detail" controller="Product"
-                                           pageUid="{detailPage}"
-                                           arguments="{product: product.uid, hotel: item.hotel.uid}"
-                                           additionalParams="{ref: '{f:uri.page()}'}"
-                                           additionalAttributes="{rel: 'nofollow'}"
-                                           class="button button--full searchresult-item__button"
-                            >
-                                Details
-                            </f:link.action>
-                        </div>
-                    </f:else>
-                </f:if>
-            </div>
-            <button type="button"
-                    class="teaserbox-watchlist"
-                    data-controller="watchlist-toggle"
-                    data-watchlist-toggle-key-value="{item.key}"
-                    data-action="watchlist-toggle#toggle">
-                <svg class="w-5 h-5 text-ep-secondary" data-watchlist-toggle-target="icon" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4.318 6.318a4.5 4.5 0 000 6.364L12 20.364l7.682-7.682a4.5 4.5 0 00-6.364-6.364L12 7.636l-1.318-1.318a4.5 4.5 0 00-6.364 0z"></path></svg>
-            </button>
-        </div>
-    </f:section>
-
-    <f:section name="Image">
-        <f:if condition="{item.hotel.images.original}">
-            <f:then>
-                <f:alias map="{image: item.hotel.images.original.0}">
-                    <picture class="searchresult-item__image">
-                        <source media="(min-width: 1201px)" data-srcset="{f:uri.image(
-                            image: image, width: '260', height: '200c-100'
-                        )}  260w"/>
-                        <source media="(max-width: 1200px)" data-srcset="{f:uri.image(
-                            image: image, width: '280', height: '220c-100'
-                        )}  280w"/>
-                        <source media="(max-width: 768px)" data-srcset="{f:uri.image(
-                        image: image, width: '220', height: '130c-100'
-                        )}  220w"/>
-                        <img class="scale lazyload" data-src="{f:uri.image(
-                            image: image, width: '260', height: '200c-100'
-                        )}" title="{image.title}" alt="{image.alternative}">
-                    </picture>
-                </f:alias>
-            </f:then>
-            <f:else>
-                <picture class="searchresult-item__image">
-                    <source media="(min-width: 1201px)" data-srcset="{f:uri.image(
-                        src: 'EXT:ep_theme/Resources/Public/images/header-winter.jpg',
-                        width: '260', height: '200c-100'
-                    )}  260w"/>
-                    <source media="(max-width: 1200px)" data-srcset="{f:uri.image(
-                        src: 'EXT:ep_theme/Resources/Public/images/header-winter.jpg',
-                        width: '280', height: '220c-100'
-                    )}  280w"/>
-                    <source media="(max-width: 768px)" data-srcset="{f:uri.image(
-                        src: 'EXT:ep_theme/Resources/Public/images/header-winter.jpg',
-                        width: '220', height: '130c-100'
-                    )}  220w"/>
-                    <img class="scale lazyload" data-src="{f:uri.image(
-                        src: 'EXT:ep_theme/Resources/Public/images/header-winter.jpg',
-                        width: '260', height: '200c-100'
-                    )}" title="" alt="">
-                </picture>
-            </f:else>
-        </f:if>
-    </f:section>
-
-</html>
diff --git a/public/typo3conf/ext/ep_theme/Resources/Private/Partials/Menu/Type-3.html b/public/typo3conf/ext/ep_theme/Resources/Private/Partials/Menu/Type-3.html
deleted file mode 100644
index 8304246b..00000000
--- a/public/typo3conf/ext/ep_theme/Resources/Private/Partials/Menu/Type-3.html
+++ /dev/null
@@ -1,24 +0,0 @@
-<html data-namespace-typo3-fluid="true" lang="en"
-      xmlns="http://www.w3.org/1999/xhtml"
-      xmlns:ce="http://typo3.org/ns/TYPO3/CMS/FluidStyledContent/ViewHelpers"
-      xmlns:f="http://typo3.org/ns/fluid/ViewHelpers">
-
-        <ce:menu.section column="4" as="contentElements" type="header">
-            <ul class="list-unstyled">
-                <f:if condition="{contentElements}">
-                    <f:for each="{contentElements}" as="contentElement">
-                        <li>
-                            <button type="button"
-                                    class="button w-full"
-                                    data-controller="scroll-to"
-                                    data-scroll-to-target-value="c{contentElement.uid}"
-                                    data-action="scroll-to#scroll">
-                                {contentElement.header}
-                            </button>
-                        </li>
-                    </f:for>
-                </f:if>
-            </ul>
-        </ce:menu.section>
-
-</html>
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 4073a581..ac9a4927 100644
--- a/public/typo3conf/ext/ep_theme/Resources/Private/Partials/Mobilenav.html
+++ b/public/typo3conf/ext/ep_theme/Resources/Private/Partials/Mobilenav.html
@@ -50,7 +50,7 @@
                     </p>
                     <div class="grid grid-cols-3 gap-4">
                         <a href="tel:{settings.phoneNumber -> v:format.pregReplace(pattern: '/[\-\s]/', replacement: '')}"
-                           class="button button--primary flex items-center space-x-2"
+                           class="button bg-button flex items-center space-x-2"
                            title="Anrufen"
                            rel="nofollow">
                             {ep:icon(icon: 'phone', class: 'w-6 h-6 text-white')}
@@ -59,7 +59,7 @@
                             </span>
                         </a>
                         <a href="https://api.whatsapp.com/send?phone={settings.whatsAppNumberLink}"
-                           class="button button--primary  flex items-center space-x-2"
+                           class="button bg-button flex items-center space-x-2"
                            title="WhatsApp"
                            rel="nofollow"
                            target="_blank">
@@ -70,7 +70,7 @@
                         </a>
                         <f:if condition="{settings.faqPageUid}">
                             <a href="{f:uri.typolink(parameter: settings.faqPageUid)}"
-                               class="button button--primary  flex items-center space-x-2"
+                               class="button bg-button flex items-center space-x-2"
                                title="FAQ">
                                 {ep:icon(icon: 'faq', class: 'w-6 h-6 text-white')}
                                 <span class="hidden sm:block">
diff --git a/public/typo3conf/ext/ep_theme/Resources/Private/Partials/News/List/Item.html b/public/typo3conf/ext/ep_theme/Resources/Private/Partials/News/List/Item.html
index e48b41b9..f1ee3a76 100644
--- a/public/typo3conf/ext/ep_theme/Resources/Private/Partials/News/List/Item.html
+++ b/public/typo3conf/ext/ep_theme/Resources/Private/Partials/News/List/Item.html
@@ -59,7 +59,7 @@
                         </f:if>
                     </div>
                 </n:removeMediaTags>
-                <n:link newsItem="{newsItem}" settings="{settings}" class="button button--default button--small" title="{newsItem.title}">
+                <n:link newsItem="{newsItem}" settings="{settings}" class="button bg-button button--small" title="{newsItem.title}">
                     <f:translate key="more-link"/>
                 </n:link>
             </div>
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 a5f2fb8c..3761e0e3 100644
--- a/public/typo3conf/ext/ep_theme/Resources/Private/Partials/Pricetable.html
+++ b/public/typo3conf/ext/ep_theme/Resources/Private/Partials/Pricetable.html
@@ -90,7 +90,7 @@
                                 <td class="hidden lg:table-cell px-2 py-1 border border-gray-200">
                                     <f:if condition="{row.available}">
                                         <f:then>
-                                            <a class="button button--small w-full"
+                                            <a class="button bg-button button--small w-full"
                                                href="{row.bookingUrl}"
                                                title="{row.roomName} buchen"
                                                target="_blank">
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 571844b1..48da8470 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
@@ -7,7 +7,7 @@
     </div>
     <f:if condition="{product.calendarHotel} && {hotel.groupsPriceConfigs}">
         <button type="button"
-                class="button w-full"
+                class="button bg-button w-full"
                 data-controller="lightbox"
                 data-lightbox-height-value="85vh"
                 data-lightbox-url-value="{f:uri.action(action: 'index', controller: 'GroupsPrice', arguments: '{hotel: hotel}', pageUid: settings.groupsPricePopupPageUid)}"
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 7d428117..a7de5faa 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
@@ -51,7 +51,7 @@
                             </f:if>
                         </div>
                         <f:if condition="{referringUrl}">
-                            <a href="{referringUrl}" class="button button--small mt-8">
+                            <a href="{referringUrl}" class="button bg-button button--small mt-8">
                                 {ep:icon(icon: 'chevron-left', class: 'w-4 h-4 text-white')}
                                 <span>{backlinkLabel}</span>
                             </a>
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 d24f133b..56d970f7 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
@@ -93,7 +93,7 @@
                 </f:if>
             </ul>
             <div class="pt-8">
-                <div class="bg-ep-primary-light ser:bg-ser-secondary text-white font-bold px-4 py-1 group-hover:bg-ep-secondary ser:group-hover:bg-ser-primary transition-colors">
+                <div class="bg-button text-white font-bold px-4 py-1 group-hover:bg-button 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/Details.html b/public/typo3conf/ext/ep_theme/Resources/Private/Partials/Region/Details.html
index 18449eb0..b213580e 100644
--- a/public/typo3conf/ext/ep_theme/Resources/Private/Partials/Region/Details.html
+++ b/public/typo3conf/ext/ep_theme/Resources/Private/Partials/Region/Details.html
@@ -96,7 +96,7 @@
                         <f:if condition="{settings.hideMoreLink}">
                             <f:else>
                                 <div class="text-right mt-4">
-                                    <f:link.typolink class="button"
+                                    <f:link.typolink class="button bg-button"
                                                      parameter="{settings.defaultSearchPageUid}"
                                                      additionalParams="f={filterSettings -> ep:filterSettingsEncoder()}">
                                         Alle anzeigen
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 83f3e7ef..3df65537 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
@@ -21,7 +21,7 @@
                 {region.teaser -> f:format.crop(maxCharacters: settings.teaserTextMaxChars) -> f:format.html()}
             </div>
             <button type="button"
-                    class="button w-full">
+                    class="button bg-button w-full">
                 {f:translate(key: 'tx_eptheme.label.teaserbutton.default', extensionName: 'ep_theme')}
             </button>
         </a>
diff --git a/public/typo3conf/ext/ep_theme/Resources/Private/Partials/Search/Main.html b/public/typo3conf/ext/ep_theme/Resources/Private/Partials/Search/Main.html
index e1aff20f..01ce3c3e 100644
--- a/public/typo3conf/ext/ep_theme/Resources/Private/Partials/Search/Main.html
+++ b/public/typo3conf/ext/ep_theme/Resources/Private/Partials/Search/Main.html
@@ -16,7 +16,7 @@
                 </f:form>
                 <div class="mt-4">
                     <button type="button"
-                            class="button button--secondary w-full"
+                            class="button bg-button bg-button--secondary w-full"
                             data-action="search#reset">
                         Filter zurücksetzen
                     </button>
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 dfa021dc..55ca112b 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
@@ -25,7 +25,7 @@
                 </div>
             </div>
             <button type="button"
-                    class="button w-full">
+                    class="button bg-button w-full">
                 {data.button -> v:or(alternative: 'Details')}
             </button>
         </a>
diff --git a/public/typo3conf/ext/ep_theme/Resources/Private/Partials/Teaser/TwoColumn.html b/public/typo3conf/ext/ep_theme/Resources/Private/Partials/Teaser/TwoColumn.html
index c5eafe44..bcfc90a7 100644
--- a/public/typo3conf/ext/ep_theme/Resources/Private/Partials/Teaser/TwoColumn.html
+++ b/public/typo3conf/ext/ep_theme/Resources/Private/Partials/Teaser/TwoColumn.html
@@ -16,7 +16,7 @@
                 {data.bodytext -> f:format.html()}
             </div>
             <button type="button"
-                    class="button button--full">
+                    class="button bg-button button--full">
                 {data.button -> v:or(alternative: 'Details')}
             </button>
         </a>
diff --git a/public/typo3conf/ext/ep_theme/Resources/Private/Templates/AjaxFilterPanel/Index.html b/public/typo3conf/ext/ep_theme/Resources/Private/Templates/AjaxFilterPanel/Index.html
index 229395ad..9aad6b6b 100644
--- a/public/typo3conf/ext/ep_theme/Resources/Private/Templates/AjaxFilterPanel/Index.html
+++ b/public/typo3conf/ext/ep_theme/Resources/Private/Templates/AjaxFilterPanel/Index.html
@@ -22,7 +22,7 @@
         </f:if>
         <div class="mt-4">
             <button type="button"
-                    class="button button--secondary w-full"
+                    class="button bg-button bg-button--secondary w-full"
                     data-action="mobile-search#reset">
                 Filter zurücksetzen
             </button>
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 c835c054..d6588c8d 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
@@ -111,14 +111,14 @@
                             <f:if condition="{row.isHideBookingButton}">
                                 <f:then>
                                     <f:link.typolink parameter="{settings.travelAlertPageUid}"
-                                                     class="button button--small">
+                                                     class="button bg-button button--small">
                                         Reisen-Alert
                                     </f:link.typolink>
                                 </f:then>
                                 <f:else>
                                     <f:if condition="{row.available}">
                                         <f:then>
-                                            <a class="button button--small w-full"
+                                            <a class="button bg-button button--small w-full"
                                                href="{row.bookingUrl}"
                                                title="{row.roomName}, {hotel.name},  {dateRange} buchen"
                                                target="_blank">
@@ -132,7 +132,7 @@
                                             </a>
                                         </f:then>
                                         <f:else>
-                                            <span class="button button--small button--muted block cursor-not-allowed font-bold normal-case whitespace-nowrap"
+                                            <span class="button bg-button bg-button--muted button--small block cursor-not-allowed font-bold normal-case whitespace-nowrap"
                                                   data-cooltipz-dir="top"
                                                   aria-label="Leider ausgebucht"
                                                   role="tooltip"
diff --git a/public/typo3conf/ext/ep_theme/Resources/Private/Templates/City/Detail.html b/public/typo3conf/ext/ep_theme/Resources/Private/Templates/City/Detail.html
index 01def8b7..c522f5d9 100644
--- a/public/typo3conf/ext/ep_theme/Resources/Private/Templates/City/Detail.html
+++ b/public/typo3conf/ext/ep_theme/Resources/Private/Templates/City/Detail.html
@@ -14,7 +14,7 @@
             <f:if condition="{teasers}">
                 <div class="mb-8 lg:hidden">
                     <button type="button"
-                            class="button w-full mb-8"
+                            class="button bg-button w-full mb-8"
                             data-controller="scroll-to"
                             data-scroll-to-target-value="teasers"
                             data-action="scroll-to#scroll">
@@ -75,7 +75,7 @@
                         </div>
                         <f:if condition="{settings.hideMoreLink}">
                             <f:else>
-                                <f:link.typolink class="button"
+                                <f:link.typolink class="button bg-button"
                                                  parameter="{settings.defaultSearchPageUid}"
                                                  additionalParams="f={filterSettings -> ep:filterSettingsEncoder()}"
                                                  additionalAttributes="{rel: 'nofollow'}">
@@ -89,7 +89,7 @@
                     <f:if condition="{teasers}">
                         <p class="hidden lg:block">
                             <button type="button"
-                                    class="button w-full mb-8"
+                                    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/Concept/Detail.html b/public/typo3conf/ext/ep_theme/Resources/Private/Templates/Concept/Detail.html
index 541188cc..cca24c21 100644
--- a/public/typo3conf/ext/ep_theme/Resources/Private/Templates/Concept/Detail.html
+++ b/public/typo3conf/ext/ep_theme/Resources/Private/Templates/Concept/Detail.html
@@ -65,7 +65,7 @@
                             <f:if condition="{settings.hideMoreLink}">
                                 <f:else>
                                     <div class="text-right mt-4">
-                                        <f:link.typolink class="button"
+                                        <f:link.typolink class="button bg-button"
                                                          parameter="{settings.defaultSearchPageUid}"
                                                          additionalParams="f={filterSettings -> ep:filterSettingsEncoder()}">
                                             Alle anzeigen
@@ -88,7 +88,7 @@
                                 <f:else>
                                     <li>
                                         <f:link.typolink parameter="{page.uid}"
-                                                         class="button button--light{f:if(condition: '{data.pid} == {page.uid}', then: ' button--active')} w-full">
+                                                         class="button bg-button {f:if(condition: '{data.pid} == {page.uid}', then: 'bg-button--active', else: 'bg-button--light')} w-full">
                                             {page.title}
                                         </f:link.typolink>
                                     </li>
diff --git a/public/typo3conf/ext/ep_theme/Resources/Private/Templates/Country/Detail.html b/public/typo3conf/ext/ep_theme/Resources/Private/Templates/Country/Detail.html
index 16227230..47cd5988 100644
--- a/public/typo3conf/ext/ep_theme/Resources/Private/Templates/Country/Detail.html
+++ b/public/typo3conf/ext/ep_theme/Resources/Private/Templates/Country/Detail.html
@@ -14,7 +14,7 @@
             <f:if condition="{v:content.get(column: 1) -> f:count()} > 0">
                 <div class="mb-8 lg:hidden">
                     <button type="button"
-                            class="button w-full mb-8"
+                            class="button bg-button w-full mb-8"
                             data-controller="scroll-to"
                             data-scroll-to-target-value="teasers"
                             data-action="scroll-to#scroll">
@@ -76,7 +76,7 @@
                             <f:if condition="{settings.hideMoreLink}">
                                 <f:else>
                                     <div class="text-right mt-4">
-                                        <f:link.typolink class="button"
+                                        <f:link.typolink class="button bg-button"
                                                          parameter="{settings.defaultSearchPageUid}"
                                                          additionalParams="f={filterSettings -> ep:filterSettingsEncoder()}">
                                             Alle anzeigen
@@ -99,7 +99,7 @@
                     <f:if condition="{v:content.get(column: 1) -> f:count()} > 0">
                         <p class="hidden lg:block">
                             <button type="button"
-                                    class="button w-full mb-8"
+                                    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/FluidStyledContent/Button.html b/public/typo3conf/ext/ep_theme/Resources/Private/Templates/FluidStyledContent/Button.html
index 10b22f6a..70d20835 100644
--- a/public/typo3conf/ext/ep_theme/Resources/Private/Templates/FluidStyledContent/Button.html
+++ b/public/typo3conf/ext/ep_theme/Resources/Private/Templates/FluidStyledContent/Button.html
@@ -7,7 +7,7 @@
 
     <f:section name="Main">
         <ep:container data="{data}">
-            <f:link.typolink class="button" parameter="{data.header_link}" additionalParams="&ref={referrerPid}">
+            <f:link.typolink class="button bg-button" parameter="{data.header_link}" additionalParams="&ref={referrerPid}">
                 {data.header}
             </f:link.typolink>
         </ep:container>
diff --git a/public/typo3conf/ext/ep_theme/Resources/Private/Templates/FluidStyledContent/MenuSection.html b/public/typo3conf/ext/ep_theme/Resources/Private/Templates/FluidStyledContent/MenuSection.html
index 1a52f6d9..a032b664 100644
--- a/public/typo3conf/ext/ep_theme/Resources/Private/Templates/FluidStyledContent/MenuSection.html
+++ b/public/typo3conf/ext/ep_theme/Resources/Private/Templates/FluidStyledContent/MenuSection.html
@@ -15,7 +15,7 @@
                                 <f:for each="{page.content}" as="element">
                                     <f:if condition="{element.data.header}">
                                         <button type="button"
-                                                class="button"
+                                                class="button bg-button"
                                                 data-controller="scroll-to"
                                                 data-scroll-to-target-value="c{element.data.uid}"
                                                 data-action="scroll-to#scroll">
diff --git a/public/typo3conf/ext/ep_theme/Resources/Private/Templates/FluidStyledContent/MenuSectionPages.html b/public/typo3conf/ext/ep_theme/Resources/Private/Templates/FluidStyledContent/MenuSectionPages.html
index 75bebd7c..ca807062 100644
--- a/public/typo3conf/ext/ep_theme/Resources/Private/Templates/FluidStyledContent/MenuSectionPages.html
+++ b/public/typo3conf/ext/ep_theme/Resources/Private/Templates/FluidStyledContent/MenuSectionPages.html
@@ -11,14 +11,14 @@
             <ep:container data="{data}">
                 <div class="flex flex-col space-y-2 max-w-screen-sm">
                     <f:for each="{menu}" as="page">
-                        <a href="{page.link}"{f:if(condition: page.target, then: ' target="{page.target}"')} title="{page.title}" class="button">
+                        <a href="{page.link}"{f:if(condition: page.target, then: ' target="{page.target}"')} title="{page.title}" class="button bg-button">
                             {page.title}
                         </a>
                         <f:if condition="{page.content}">
                             <ul>
                                 <f:for each="{page.content}" as="element">
                                     <li>
-                                        <a href="{page.link}#c{element.data.uid}"{f:if(condition: page.target, then: ' target="{page.target}"')} title="{element.data.header}" class="button">
+                                        <a href="{page.link}#c{element.data.uid}"{f:if(condition: page.target, then: ' target="{page.target}"')} title="{element.data.header}" class="button bg-button">
                                             {element.data.header}
                                         </a>
                                     </li>
diff --git a/public/typo3conf/ext/ep_theme/Resources/Private/Templates/FluidStyledContent/MenuSubpages.html b/public/typo3conf/ext/ep_theme/Resources/Private/Templates/FluidStyledContent/MenuSubpages.html
index 46d3bd23..eaa4848d 100644
--- a/public/typo3conf/ext/ep_theme/Resources/Private/Templates/FluidStyledContent/MenuSubpages.html
+++ b/public/typo3conf/ext/ep_theme/Resources/Private/Templates/FluidStyledContent/MenuSubpages.html
@@ -8,7 +8,7 @@
             <div class="flex flex-col space-y-2 mb-8">
                 <f:for each="{menu}" as="page">
                     <f:link.typolink parameter="{page.data.uid}"
-                                     class="button button--light w-full{f:if(condition: '{page.active}', then: ' button--active')}">
+                                     class="button w-full bg-button {f:if(condition: '{page.active}', then: 'bg-button--active', else: 'bg-button--light')}">
                         {page.data.title}
                     </f:link.typolink>
                 </f:for>
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 3e80528f..388a8d23 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
@@ -27,7 +27,7 @@
                 {country.teaser -> f:format.crop(maxCharacters: settings.teaserTextMaxChars) -> f:format.html()}
             </div>
             <button type="button"
-                    class="button w-full">
+                    class="button bg-button w-full">
                 {data.button -> v:or(alternative: 'Details')}
             </button>
         </a>
diff --git a/public/typo3conf/ext/ep_theme/Resources/Private/Templates/Hotel/Detail.html b/public/typo3conf/ext/ep_theme/Resources/Private/Templates/Hotel/Detail.html
index b67b342b..1b42adf8 100644
--- a/public/typo3conf/ext/ep_theme/Resources/Private/Templates/Hotel/Detail.html
+++ b/public/typo3conf/ext/ep_theme/Resources/Private/Templates/Hotel/Detail.html
@@ -13,7 +13,7 @@
             <f:if condition="{v:content.get(column: 1) -> f:count()} > 0">
                 <div class="mb-8 lg:hidden">
                     <button type="button"
-                            class="button w-full mb-8"
+                            class="button bg-button w-full mb-8"
                             data-controller="scroll-to"
                             data-scroll-to-target-value="teasers"
                             data-action="scroll-to#scroll">
@@ -32,7 +32,7 @@
                     <f:if condition="{v:content.get(column: 1) -> f:count()} > 0">
                         <p class="hidden lg:block">
                             <button type="button"
-                                    class="button w-full mb-8"
+                                    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/News/News/Detail.html b/public/typo3conf/ext/ep_theme/Resources/Private/Templates/News/News/Detail.html
index bd72a691..d98cc654 100644
--- a/public/typo3conf/ext/ep_theme/Resources/Private/Templates/News/News/Detail.html
+++ b/public/typo3conf/ext/ep_theme/Resources/Private/Templates/News/News/Detail.html
@@ -84,7 +84,7 @@
                     </ul>
                 </f:if>
                 <f:if condition="{settings.backPid}">
-                    <f:link.typolink parameter="{settings.backPid}" class="button button--default button--small">
+                    <f:link.typolink parameter="{settings.backPid}" class="button bg-button button--small">
                         <f:translate key="back-link" />
                     </f:link.typolink>
                 </f:if>
diff --git a/public/typo3conf/ext/ep_theme/Resources/Private/Templates/News/ViewHelpers/Widget/Paginate/Index.html b/public/typo3conf/ext/ep_theme/Resources/Private/Templates/News/ViewHelpers/Widget/Paginate/Index.html
index 0bce8471..34a0f6f1 100644
--- a/public/typo3conf/ext/ep_theme/Resources/Private/Templates/News/ViewHelpers/Widget/Paginate/Index.html
+++ b/public/typo3conf/ext/ep_theme/Resources/Private/Templates/News/ViewHelpers/Widget/Paginate/Index.html
@@ -28,17 +28,17 @@
                         <li>
                             <f:if condition="{pagination.previousPage} > 1">
                                 <f:then>
-                                    <f:widget.link arguments="{currentPage: pagination.previousPage}" class="button button--small">&laquo;</f:widget.link>
+                                    <f:widget.link arguments="{currentPage: pagination.previousPage}" class="button bg-button button--small">&laquo;</f:widget.link>
                                 </f:then>
                                 <f:else>
-                                    <f:widget.link class="button button--small">&laquo;</f:widget.link>
+                                    <f:widget.link class="button bg-button button--small">&laquo;</f:widget.link>
                                 </f:else>
                             </f:if>
                         </li>
                     </f:if>
                     <f:if condition="{pagination.displayRangeStart} > 1">
                         <li class="first">
-                            <f:widget.link class="button button--small">1</f:widget.link>
+                            <f:widget.link class="button bg-button button--small">1</f:widget.link>
                         </li>
                     </f:if>
                     <f:if condition="{pagination.hasLessPages}">
@@ -47,16 +47,16 @@
                     <f:for each="{pagination.pages}" as="page">
                         <f:if condition="{page.isCurrent}">
                             <f:then>
-                                <li class="active"><span class="button button--active button--small">{page.number}</span></li>
+                                <li class="active"><span class="button bg-button bg-button--active button--small">{page.number}</span></li>
                             </f:then>
                             <f:else>
                                 <li>
                                     <f:if condition="{page.number} > 1">
                                         <f:then>
-                                            <f:widget.link arguments="{currentPage: page.number}" class="button button--small">{page.number}</f:widget.link>
+                                            <f:widget.link arguments="{currentPage: page.number}" class="button bg-button button--small">{page.number}</f:widget.link>
                                         </f:then>
                                         <f:else>
-                                            <f:widget.link class="button button--secondary button--small">{page.number}</f:widget.link>
+                                            <f:widget.link class="button bg-button bg-button--secondary button--small">{page.number}</f:widget.link>
                                         </f:else>
                                     </f:if>
                                 </li>
@@ -68,12 +68,12 @@
                     </f:if>
                     <f:if condition="{pagination.displayRangeEnd} < {pagination.numberOfPages}">
                         <li class="last">
-                            <f:widget.link arguments="{currentPage: pagination.numberOfPages}" class="button button--small">{pagination.numberOfPages}</f:widget.link>
+                            <f:widget.link arguments="{currentPage: pagination.numberOfPages}" class="button bg-button button--small">{pagination.numberOfPages}</f:widget.link>
                         </li>
                     </f:if>
                     <f:if condition="{pagination.nextPage}">
                         <li class="last next">
-                            <f:widget.link arguments="{currentPage: pagination.nextPage}" class="button button--small">&raquo;</f:widget.link>
+                            <f:widget.link arguments="{currentPage: pagination.nextPage}" class="button bg-button button--small">&raquo;</f:widget.link>
                         </li>
                     </f:if>
                 </ul>
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 65bd6934..ed76f69a 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
@@ -25,8 +25,8 @@
                           arguments="{layout: 8, subheader: '{product.region.name} / {product.name}', header: product.headline}"/>
                 <div class="flex flex-col lg:flex-row-reverse lg:items-start"
                      data-controller="tabs"
-                     data-tabs-button-class="bg-ep-primary-dark"
-                     data-tabs-button-active-class="bg-ep-secondary"
+                     data-tabs-button-class="bg-button--dark"
+                     data-tabs-button-active-class="bg-button--active"
                      data-tabs-scroll-value="true">
                     <div class="w-full lg:w-1/3">
                         <div class="lg:pl-4">
@@ -45,14 +45,14 @@
                                                 data-action="tabs#select"
                                                 data-tabs-target="button"
                                                 data-tab="hotel"
-                                                class="py-2 uppercase bg-ep-primary-dark">
+                                                class="py-2 uppercase bg-button bg-button--dark">
                                             Unterkunft
                                         </button>
                                         <button type="button"
                                                 data-action="tabs#select"
                                                 data-tabs-target="button"
                                                 data-tab="dates"
-                                                class="col-span-2 py-2 uppercase bg-ep-primary-dark">
+                                                class="col-span-2 py-2 uppercase bg-button bg-button--dark">
                                             Termine/Preise
                                         </button>
                                     </f:then>
@@ -61,14 +61,14 @@
                                                 data-action="tabs#select"
                                                 data-tabs-target="button"
                                                 data-tab="dates"
-                                                class="col-span-2 py-2 uppercase bg-ep-primary-dark">
+                                                class="col-span-2 py-2 uppercase bg-button bg-button--dark">
                                             Termine/Preise
                                         </button>
                                         <button type="button"
                                                 data-action="tabs#select"
                                                 data-tabs-target="button"
                                                 data-tab="hotel"
-                                                class="py-2 uppercase bg-ep-primary-dark">
+                                                class="py-2 uppercase bg-button bg-button--dark">
                                             Unterkunft
                                         </button>
                                     </f:else>
@@ -77,14 +77,14 @@
                                         data-action="tabs#select"
                                         data-tabs-target="button"
                                         data-tab="region"
-                                        class="py-2 uppercase bg-ep-primary-dark">
+                                        class="py-2 uppercase bg-button bg-button--dark">
                                     Gebiet
                                 </button>
                                 <button type="button"
                                         data-action="tabs#select"
                                         data-tabs-target="button"
                                         data-tab="city"
-                                        class="py-2 uppercase bg-ep-primary-dark">
+                                        class="py-2 uppercase bg-button bg-button--dark">
                                     Ort
                                 </button>
                                 <f:if condition="{product.journey}">
@@ -92,7 +92,7 @@
                                             data-action="tabs#select"
                                             data-tabs-target="button"
                                             data-tab="journey"
-                                            class="py-2 uppercase bg-ep-primary-dark">
+                                            class="py-2 uppercase bg-button bg-button--dark">
                                         Anreise
                                     </button>
                                 </f:if>
@@ -152,7 +152,7 @@
                 <f:else>
                     <div class="mb-4 hidden"
                          data-product-details-target="loadingIndicator">
-                        <div class="flex items-center space-x-4 bg-ep-secondary text-white text-lg p-4 rounded">
+                        <div class="flex items-center space-x-4 bg-button--secondary 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>
@@ -297,7 +297,7 @@
         <f:if condition="{product.calendarHotel}">
             <f:if condition="{hotel.groupsPriceConfigs}">
                 <button type="button"
-                        class="button w-full"
+                        class="button bg-button w-full"
                         data-controller="lightbox"
                         data-lightbox-url-value="{f:uri.action(action: 'index', controller: 'GroupsPrice', arguments: '{hotel: hotel}', pageUid: settings.groupsPricePopupPageUid)}"
                         data-lightbox-height-value="85vh"
@@ -328,7 +328,7 @@
     </f:section>
 
     <f:section name="SidebarButtons">
-        <div class="grid grid-cols-2 gap-px mb-4">
+        <div class=" mb-4{f:if(condition: product.faqs, then: ' grid grid-cols-2 gap-px')}">
             <f:comment><!--
             <a href="{f:uri.typolink(parameter: settings.coronaUpdatesPageUid)}"
                class="block px-4 py-2 bg-red-500 text-white flex items-center space-x-2 col-span-2 md:col-span-3"
@@ -341,7 +341,7 @@
             --></f:comment>
             <f:if condition="{product.faqs}">
                 <button type="button"
-                        class="bg-ep-primary-dark text-white py-2"
+                        class="w-full bg-button bg-button--dark text-white py-2"
                         data-controller="scroll-to"
                         data-scroll-to-target-value="faq"
                         data-action="scroll-to#scroll"
@@ -353,7 +353,7 @@
                 </button>
             </f:if>
             <button type="button"
-                    class="bg-ep-primary-dark text-white py-2"
+                    class="w-full bg-button bg-button--dark text-white py-2"
                     data-controller="watchlist-toggle"
                     data-watchlist-toggle-key-value="{hotel.uid}:{product.uid}"
                     data-watchlist-toggle-target="ariaLabel"
diff --git a/public/typo3conf/ext/ep_theme/Resources/Private/Templates/Product/Teasergroup.html b/public/typo3conf/ext/ep_theme/Resources/Private/Templates/Product/Teasergroup.html
index b2d4a594..d8f0844b 100644
--- a/public/typo3conf/ext/ep_theme/Resources/Private/Templates/Product/Teasergroup.html
+++ b/public/typo3conf/ext/ep_theme/Resources/Private/Templates/Product/Teasergroup.html
@@ -55,7 +55,7 @@
                     <f:if condition="{settings.hideMoreLink}">
                         <f:else>
                             <div class="text-right mt-4">
-                                <f:link.typolink class="button"
+                                <f:link.typolink class="button bg-button"
                                                  parameter="{settings.defaultSearchPageUid}"
                                                  additionalParams="f={filterSettings -> ep:filterSettingsEncoder()}">
                                     Alle anzeigen
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 a2e2e00d..aad5efa7 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
@@ -14,7 +14,7 @@
             <f:if condition="{teasers}">
                 <div class="mb-8 lg:hidden">
                     <button type="button"
-                            class="button w-full mb-8"
+                            class="button bg-button w-full mb-8"
                             data-controller="scroll-to"
                             data-scroll-to-target-value="teasers"
                             data-action="scroll-to#scroll">
@@ -32,7 +32,7 @@
                     <f:if condition="{teasers}">
                         <p class="hidden lg:block">
                             <button type="button"
-                                    class="button w-full mb-8"
+                                    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/Searchbar/Index.html b/public/typo3conf/ext/ep_theme/Resources/Private/Templates/Searchbar/Index.html
index cb34bb7f..3bf21e02 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
@@ -64,7 +64,7 @@
                                                         <div class="flex flex-col space-y-4">
                                                             <f:for each="{settings.datePickerPresets}" as="preset">
                                                                 <button type="button"
-                                                                        class="button button--small button--light w-full"
+                                                                        class="button bg-button bg-button--light button--small w-full"
                                                                         data-preset='{preset -> f:format.json() -> f:format.raw()}'
                                                                         data-action="datepicker#selectPreset">
                                                                         <span>
@@ -76,12 +76,12 @@
                                                     </f:if>
                                                     <div class="flex flex-col space-y-4">
                                                         <button type="button"
-                                                                class="button button--small button--light w-full"
+                                                                class="button bg-button bg-button--light button--small w-full"
                                                                 data-action="collapse#close">
                                                             schließen
                                                         </button>
                                                         <button type="button"
-                                                                class="button button--small button--light w-full"
+                                                                class="button bg-button bg-button--light button--small w-full"
                                                                 data-action="datepicker#reset">
                                                             zurücksetzen
                                                         </button>
@@ -198,7 +198,7 @@
                                                 </div>
                                             </div>
                                             <button type="button"
-                                                    class="button button--small"
+                                                    class="button bg-button button--small"
                                                     data-action="searchbar#resetDestination">
                                                 zurücksetzen
                                             </button>
diff --git a/public/typo3conf/ext/ep_theme/Resources/Private/Templates/Team/Show.html b/public/typo3conf/ext/ep_theme/Resources/Private/Templates/Team/Show.html
index 04d5c04d..80fc84e0 100644
--- a/public/typo3conf/ext/ep_theme/Resources/Private/Templates/Team/Show.html
+++ b/public/typo3conf/ext/ep_theme/Resources/Private/Templates/Team/Show.html
@@ -46,7 +46,7 @@
                         action: 'list',
                         extensionName: 'epproducts',
                         pluginName: 'teammembers'
-                    )}" class="button button-danger">
+                    )}" class="button bg-button">
                         zurück
                     </a>
                 </div>