diff --git a/public/typo3conf/ext/ep_theme/Classes/ViewHelpers/Calendar/ContingentViewHelper.php b/public/typo3conf/ext/ep_theme/Classes/ViewHelpers/Calendar/ContingentViewHelper.php
index fb2d94cf..ee39f33e 100644
--- a/public/typo3conf/ext/ep_theme/Classes/ViewHelpers/Calendar/ContingentViewHelper.php
+++ b/public/typo3conf/ext/ep_theme/Classes/ViewHelpers/Calendar/ContingentViewHelper.php
@@ -134,18 +134,18 @@ class ContingentViewHelper extends AbstractViewHelper
     {
         $classes = [ 'block p-1 leading-none text-sm text-white' ];
         if ($levelFrom === static::LEVEL_RED) {
-            $class = 'full';
+            $class = 'availability-none';
         } elseif ($levelFrom === static::LEVEL_YELLOW) {
-            $class = 'partial';
+            $class = 'availability-partial';
         } else {
-            $class = 'free';
+            $class = 'availability-full';
         }
         if ($levelTo === static::LEVEL_RED) {
-            $class .= '-to-full';
+            $class .= '-to-none';
         } elseif ($levelTo === static::LEVEL_YELLOW) {
             $class .= '-to-partial';
         } elseif ($levelTo !== null) {
-            $class .= '-to-free';
+            $class .= '-to-full';
         }
         $classes[] = $class;
         return $classes;
diff --git a/public/typo3conf/ext/ep_theme/Configuration/TypoScript/Extensions/PxaSocialFeed.typoscript b/public/typo3conf/ext/ep_theme/Configuration/TypoScript/Extensions/PxaSocialFeed.typoscript
deleted file mode 100644
index 0edc942e..00000000
--- a/public/typo3conf/ext/ep_theme/Configuration/TypoScript/Extensions/PxaSocialFeed.typoscript
+++ /dev/null
@@ -1,29 +0,0 @@
-@import "EXT:pxa_social_feed/Configuration/TypoScript/setup.txt"
-
-plugin.tx_pxasocialfeed {
-    view {
-        layoutRootPaths.100 = EXT:ep_theme/Resources/Private/Layouts/SocialMedia/
-        templateRootPaths.100 = EXT:ep_theme/Resources/Private/Templates/SocialMedia/
-        partialRootPaths.100 = EXT:ep_theme/Resources/Private/Partials/SocialMedia/
-    }
-    settings.defaultAjaxUid = {$plugin.tx_eptheme.settings.defaultAjaxUid}
-}
-
-page.includeCSS {
-    pxa_social_feed_1 >
-}
-
-page.includeJSFooter {
-    pxa_social_feed_1 >
-    pxa_social_feed_2 >
-    pxa_social_feed_3 >
-    pxa_social_feed_4 >
-    pxa_social_feed_5 >
-}
-
-page.includeJSFooterlibs {
-    pxa_social_feed_1 >
-    pxa_social_feed_2 >
-    pxa_social_feed_3 >
-    pxa_social_feed_4 >
-}
diff --git a/public/typo3conf/ext/ep_theme/Configuration/TypoScript/constants.typoscript b/public/typo3conf/ext/ep_theme/Configuration/TypoScript/constants.typoscript
index f9ecedfb..d1372342 100644
--- a/public/typo3conf/ext/ep_theme/Configuration/TypoScript/constants.typoscript
+++ b/public/typo3conf/ext/ep_theme/Configuration/TypoScript/constants.typoscript
@@ -181,9 +181,8 @@ plugin.tx_eptheme {
 	}
 }
 
-@import "EXT:fluid_styled_content/Configuration/TypoScript/constants.typoscript"
-@import "EXT:ep_products/Configuration/TypoScript/constants.typoscript"
-@import "EXT:gridelements/Configuration/TypoScript/constants.typoscript"
-@import "EXT:pxa_social_feed/Configuration/TypoScript/constants.txt"
-@import "EXT:seo/Configuration/TypoScript/XmlSitemap/constants.typoscript"
-@import "EXT:typo3_encore/Configuration/TypoScript/constants.typoscript"
+@import 'EXT:fluid_styled_content/Configuration/TypoScript/constants.typoscript'
+@import 'EXT:ep_products/Configuration/TypoScript/constants.typoscript'
+@import 'EXT:gridelements/Configuration/TypoScript/constants.typoscript'
+@import 'EXT:seo/Configuration/TypoScript/XmlSitemap/constants.typoscript'
+@import 'EXT:typo3_encore/Configuration/TypoScript/constants.typoscript'
diff --git a/public/typo3conf/ext/ep_theme/Configuration/TypoScript/setup.typoscript b/public/typo3conf/ext/ep_theme/Configuration/TypoScript/setup.typoscript
index f9dfd682..557730d7 100644
--- a/public/typo3conf/ext/ep_theme/Configuration/TypoScript/setup.typoscript
+++ b/public/typo3conf/ext/ep_theme/Configuration/TypoScript/setup.typoscript
@@ -1,30 +1,6 @@
-@import "EXT:ep_theme/Configuration/TypoScript/Extensions/FluidStyledContent.typoscript"
-@import "EXT:ep_theme/Configuration/TypoScript/Extensions/Form.typoscript"
-@import "EXT:ep_theme/Configuration/TypoScript/Extensions/News.typoscript"
-@import "EXT:ep_theme/Configuration/TypoScript/Extensions/Typo3Encore.typoscript"
-@import "EXT:ep_theme/Configuration/TypoScript/Extensions/GridElements.typoscript"
-@import "EXT:ep_theme/Configuration/TypoScript/Extensions/EpProducts.typoscript"
-@import "EXT:ep_theme/Configuration/TypoScript/Extensions/PxaSocialFeed.typoscript"
-@import "EXT:ep_theme/Configuration/TypoScript/Extensions/Seo.typoscript"
-
-@import "EXT:ep_theme/Configuration/TypoScript/Library/SearchBar.typoscript"
-@import "EXT:ep_theme/Configuration/TypoScript/Library/SearchBox.typoscript"
-@import "EXT:ep_theme/Configuration/TypoScript/Library/Sitemap.typoscript"
-@import "EXT:ep_theme/Configuration/TypoScript/Library/DynamicContent.typoscript"
-@import "EXT:ep_theme/Configuration/TypoScript/Library/ParseFunc.typoscript"
-
-@import "EXT:ep_theme/Configuration/TypoScript/ContentElements/calendar.typoscript"
-@import "EXT:ep_theme/Configuration/TypoScript/ContentElements/contact.typoscript"
-@import "EXT:ep_theme/Configuration/TypoScript/ContentElements/disturber.typoscript"
-@import "EXT:ep_theme/Configuration/TypoScript/ContentElements/disrupter.typoscript"
-@import "EXT:ep_theme/Configuration/TypoScript/ContentElements/event_pricetable.typoscript"
-@import "EXT:ep_theme/Configuration/TypoScript/ContentElements/gmap.typoscript"
-@import "EXT:ep_theme/Configuration/TypoScript/ContentElements/lineup.typoscript"
-@import "EXT:ep_theme/Configuration/TypoScript/ContentElements/list.typoscript"
-@import "EXT:ep_theme/Configuration/TypoScript/ContentElements/nlform.typoscript"
-@import "EXT:ep_theme/Configuration/TypoScript/ContentElements/teaser.typoscript"
-@import "EXT:ep_theme/Configuration/TypoScript/ContentElements/ytvideo.typoscript"
-@import "EXT:ep_theme/Configuration/TypoScript/ContentElements/button.typoscript"
+@import 'EXT:ep_theme/Configuration/TypoScript/Extensions/*'
+@import 'EXT:ep_theme/Configuration/TypoScript/Library/*'
+@import 'EXT:ep_theme/Configuration/TypoScript/ContentElements/*'
 
 plugin.tx_eptheme {
     settings < lib.contentElement.settings
@@ -115,9 +91,7 @@ plugin.tx_eptheme {
 tt_content.stdWrap.innerWrap >
 lib.stdheader.3.headerClass >
 
-@import "EXT:ep_theme/Configuration/TypoScript/Page/Main.typoscript"
-@import "EXT:ep_theme/Configuration/TypoScript/Page/Ajax.typoscript"
-@import "EXT:ep_theme/Configuration/TypoScript/Page/Export.typoscript"
+@import 'EXT:ep_theme/Configuration/TypoScript/Page/*'
 
 config {
     compressJs = 0
diff --git a/public/typo3conf/ext/ep_theme/Resources/Private/Assets/scss/components/_badges.scss b/public/typo3conf/ext/ep_theme/Resources/Private/Assets/scss/components/_badges.scss
index c9096012..7804b76d 100644
--- a/public/typo3conf/ext/ep_theme/Resources/Private/Assets/scss/components/_badges.scss
+++ b/public/typo3conf/ext/ep_theme/Resources/Private/Assets/scss/components/_badges.scss
@@ -1,110 +1,47 @@
 .concept-badge {
-    width: 100%;
-    height: 34px;
-    color: white;
-    padding: 0 10px;
-    margin: 0;
-    line-height: 34px;
-    font-size: 16px;
-    text-transform: uppercase;
-    background-color: theme('colors.concept.default');
+    @apply w-full h-8 text-white px-4 leading-none uppercase bg-concept-default;
 
     &--bdg {
-        background-color: theme('colors.concept.bdg');
+        @apply bg-concept-bdg;
     }
 
     &--skr {
-        background-color: theme('colors.concept.skr');
+        @apply bg-concept-skr;
     }
 
     &--evt {
-        background-color: theme('colors.concept.evt');
+        @apply bg-concept-evt;
     }
 
     &--fam {
-        background-color: theme('colors.concept.fam');
+        @apply bg-concept-fam;
     }
 
     &--grp {
-        background-color: theme('colors.concept.grp');
+        @apply bg-concept-grp;
     }
 
     &--prg {
-        background-color: theme('colors.concept.prg');
+        @apply bg-concept-prg;
     }
 
     &--ind {
-        background-color: theme('colors.concept.ind');
+        @apply bg-concept-ind;
     }
 
     &--wkd {
-        background-color: theme('colors.concept.wkd');
+        @apply bg-concept-wkd;
     }
 
     &--spz {
-        background-color: theme('colors.concept.spz');
+        @apply bg-concept-spz;
     }
 
     &--epe {
-        background-color: theme('colors.concept.epe');
+        @apply bg-concept-epe;
     }
 
     &--sfl {
-        background-color: theme('colors.concept.sfl');
+        @apply bg-concept-sfl;
     }
 }
-
-.custom-badge {
-    position: relative;
-}
-
-.custom-badge__background {
-    width: 100%;
-    height: 100%;
-    position: absolute;
-    top: 0;
-    left: 0;
-
-    #bgouter {
-        fill: theme('colors.ep.primary-50');
-    }
-
-    #bginner {
-        fill: theme('colors.ep.primary');
-    }
-}
-
-.custom-badge__content {
-    position: absolute;
-    width: 60%;
-    height: 60%;
-    top: 50%;
-    left: 50%;
-    transform: translate(-50%, -50%);
-    z-index: 10;
-    text-align: center;
-    color: white;
-    display: flex;
-    flex-flow: column;
-    justify-content: center;
-}
-
-.custom-badge__title {
-    display: block;
-    text-transform: uppercase;
-    font-weight: 700;
-    font-size: 2vw;
-    line-height: 1;
-    padding-bottom: 4px;
-
-    @screen md {
-        font-size: 24px;
-    }
-}
-
-.custom-badge__subtitle {
-    display: block;
-    text-transform: uppercase;
-    font-size: 18px;
-    line-height: 1;
-}
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 2aeccb14..8c0fa64c 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,15 +2,15 @@
     @apply inline-flex items-center justify-center px-4 py-2 md:px-8;
     @apply uppercase leading-none;
     @apply transition-colors outline-none focus:outline-none;
-    @apply bg-ep-secondary text-white;
+    @apply bg-ep-secondary border-2 border-ep-secondary text-white;
 
     &--active,
     &--secondary {
-        @apply bg-ep-primary;
+        @apply bg-ep-primary border-ep-primary;
     }
 
     &:hover {
-        @apply bg-ep-primary-dark;
+        @apply bg-ep-primary-dark border-ep-primary-dark;
     }
 
     &--light {
@@ -24,6 +24,6 @@
     }
 
     &--small {
-        @apply px-2 py-1 md:px-4 text-sm;
+        @apply px-2 py-1 md:px-4 text-xs border;
     }
 }
diff --git a/public/typo3conf/ext/ep_theme/Resources/Private/Assets/scss/components/_calendar.scss b/public/typo3conf/ext/ep_theme/Resources/Private/Assets/scss/components/_calendar.scss
index faac2b26..99f22e42 100644
--- a/public/typo3conf/ext/ep_theme/Resources/Private/Assets/scss/components/_calendar.scss
+++ b/public/typo3conf/ext/ep_theme/Resources/Private/Assets/scss/components/_calendar.scss
@@ -1,44 +1,35 @@
-.label-success,
-.free {
+.availability-full {
     @apply bg-green-500;
 }
 
-.label-warning,
-.partial {
+.availability-partial {
     @apply bg-yellow-300;
 }
 
-.label-danger,
-.full {
+.availability-none {
     @apply bg-red-500;
 }
 
-.label-success-danger,
-.free-to-full {
-    background: linear-gradient(to bottom right, theme('colors.green.500') 50%, theme('colors.red.500') 50%);
+.availability-full-to-none {
+    @apply bg-gradient-to-br from-green-500 to-red-500;
 }
 
-.label-success-warning,
-.free-to-partial {
-    background: linear-gradient(to bottom right, theme('colors.green.500') 50%, theme('colors.yellow.300') 50%);
+.availability-full-to-partial {
+    @apply bg-gradient-to-br from-green-500 to-yellow-300;
 }
 
-.label-danger-success,
-.full-to-free {
-    background: linear-gradient(to bottom right, theme('colors.red.500') 50%, theme('colors.green.500') 50%);
+.availability-none-to-full {
+    @apply bg-gradient-to-br from-red-500 to-green-500;
 }
 
-.label-warning-success,
-.partial-to-free {
-    background: linear-gradient(to bottom right, theme('colors.yellow.300') 50%, theme('colors.green.500') 50%);
+.availability-partial-to-full {
+    @apply bg-gradient-to-br from-yellow-300 to-green-500;
 }
 
-.label-danger-warning,
-.full-to-partial {
-    background: linear-gradient(to bottom right, theme('colors.red.500') 50%, theme('colors.yellow.300') 50%);
+.availability-none-to-partial {
+    @apply bg-gradient-to-br from-red-500 to-yellow-300;
 }
 
-.label-warning-danger,
-.partial-to-full {
-    background: linear-gradient(to bottom right, theme('colors.yellow.300') 50%, theme('colors.red.500') 50%);
+.availability-partial-to-none {
+    @apply bg-gradient-to-br from-yellow-300 to-red-500;
 }
diff --git a/public/typo3conf/ext/ep_theme/Resources/Private/Assets/scss/components/_contact-bar.scss b/public/typo3conf/ext/ep_theme/Resources/Private/Assets/scss/components/_contact-bar.scss
index 95e77ea1..f2f7824a 100644
--- a/public/typo3conf/ext/ep_theme/Resources/Private/Assets/scss/components/_contact-bar.scss
+++ b/public/typo3conf/ext/ep_theme/Resources/Private/Assets/scss/components/_contact-bar.scss
@@ -1,5 +1,5 @@
 .contact-bar {
-    @apply fixed z-100 bottom-0 left-0 w-full flex justify-between divide-x divide-white;
+    @apply fixed z-100 bottom-0 left-0 w-full flex justify-between;
 
     @screen md {
         @apply bottom-auto left-auto top-1/2 right-0 w-auto flex-col divide-x-0 space-y-1;
@@ -8,10 +8,10 @@
 }
 
 .contact-bar__item {
-    @apply flex-1 text-white py-2 bg-ep-primary;
+    @apply flex-1 text-white py-2 bg-ep-primary border-r border-white last:border-0;
 
     @screen md {
-        @apply flex flex-none items-start transition-transform duration-300 ease-in-out p-1 shadow-md focus:text-white;
+        @apply flex flex-none items-start transition-transform duration-300 ease-in-out p-1 shadow-md focus:text-white border-0;
         &:hover {
             @apply text-white;
             transform: translateX(calc(-100% + theme('spacing.8')));
diff --git a/public/typo3conf/ext/ep_theme/Resources/Private/Assets/scss/components/_forms.scss b/public/typo3conf/ext/ep_theme/Resources/Private/Assets/scss/components/_forms.scss
deleted file mode 100644
index e69de29b..00000000
diff --git a/public/typo3conf/ext/ep_theme/Resources/Private/Assets/scss/components/_header.scss b/public/typo3conf/ext/ep_theme/Resources/Private/Assets/scss/components/_header.scss
deleted file mode 100644
index e879f6f0..00000000
--- a/public/typo3conf/ext/ep_theme/Resources/Private/Assets/scss/components/_header.scss
+++ /dev/null
@@ -1,82 +0,0 @@
-.header-caption {
-    padding: 16px 10px;
-    background-color: theme('colors.ep.primary-80');
-    margin-bottom: 8px;
-    @screen md {
-        max-width: 55%;
-        padding: 30px;
-    }
-}
-
-.header-caption__headline {
-    display: block;
-    font-size: 24px;
-    line-height: 28px;
-    font-weight: 900;
-    color: #fff;
-    text-transform: uppercase;
-    max-width: 60%;
-
-    @screen md {
-        font-size: 40px;
-        line-height: 40px;
-        min-height: 100px;
-        margin-bottom: 10px;
-        max-width: none;
-    }
-    @screen lg {
-        font-size: 50px;
-        line-height: 50px;
-    }
-}
-
-.header-caption__subline {
-    display: none;
-    @screen md {
-        display: block;
-    }
-    font-size: 16px;
-    line-height: 22px;
-    min-height: 70px;
-    overflow-y: hidden;
-    font-weight: 300;
-    color: #fff;
-    padding-bottom: 20px;
-}
-
-.header-caption__text {
-    font-size: 18px;
-    text-transform: uppercase;
-    line-height: 22px;
-    margin-bottom: 10px;
-    color: white;
-    @screen md {
-        font-size: 28px;
-    }
-
-    span {
-        font-size: 16px;
-        font-weight: 300;
-        letter-spacing: 2px;
-        line-height: 50px;
-
-        @screen md {
-            font-size: 20px;
-        }
-    }
-}
-
-.header-caption__button {
-    display: none;
-    @screen md {
-        display: inline-block;
-    }
-}
-
-.header__button {
-    display: block;
-    width: 100%;
-    @screen md {
-        display: none;
-    }
-}
diff --git a/public/typo3conf/ext/ep_theme/Resources/Private/Assets/scss/components/_herounit.scss b/public/typo3conf/ext/ep_theme/Resources/Private/Assets/scss/components/_herounit.scss
index 575f8bed..8aec6fad 100644
--- a/public/typo3conf/ext/ep_theme/Resources/Private/Assets/scss/components/_herounit.scss
+++ b/public/typo3conf/ext/ep_theme/Resources/Private/Assets/scss/components/_herounit.scss
@@ -20,19 +20,6 @@
     }
 }
 
-.herounit__main {
-    @apply absolute left-0 bottom-0 inset-x-0 p-8 w-full;
-    @screen md {
-        @apply bottom-1/2 transform translate-y-1/2;
-    }
-}
-
-.herounit__inner {
-    @screen lg {
-        @apply container px-0;
-    }
-}
-
 .herounit__badge {
     @apply absolute;
 
diff --git a/public/typo3conf/ext/ep_theme/Resources/Private/Assets/scss/components/_slider.scss b/public/typo3conf/ext/ep_theme/Resources/Private/Assets/scss/components/_slider.scss
index 93e80932..ff3ed3db 100644
--- a/public/typo3conf/ext/ep_theme/Resources/Private/Assets/scss/components/_slider.scss
+++ b/public/typo3conf/ext/ep_theme/Resources/Private/Assets/scss/components/_slider.scss
@@ -1,170 +1,43 @@
 @import "~@splidejs/splide/dist/css/splide-core.min.css";
 
-.slider {
-    position: relative;
-    margin-bottom: 20px;
-    padding: 0;
-
-    &--header {
-        margin-bottom: 0;
-    }
-
-    &--teasers {
-        margin-bottom: 0;
-    }
-}
-
-.slider__item {
-    position: relative;
-    background-size: cover;
-    background-position: left center;
-
-    &--product {
-        height: 240px;
-        @screen md {
-            height: 400px;
-        }
-        @screen lg {
-            height: 320px;
-        }
-        @screen xl {
-            height: 360px;
-        }
-    }
-}
-
-.slider__zoom-icon {
-    position: absolute;
-    top: 16px;
-    right: 16px;
-    z-index: 10;
-    color: white;
-    font-size: 24px;
-    @screen md {
-        font-size: 32px;
-    }
-}
-
-.slider__image {
-    max-width: 100%;
-    height: auto;
-}
-
-.slider__thumbs {
-    padding: 20px 0;
-    display: flex;
-    flex-wrap: nowrap;
-    justify-content: flex-start;
-    align-items: center;
-}
-
-.slider__thumb {
-    display: block;
-    width: 20%;
-    padding: 0 1%;
-
-    &:first-child {
-        padding-left: 0;
-    }
-
-    &:last-child {
-        padding-right: 0;
-    }
-}
-
 .slider-pagination {
     @apply absolute bottom-0 left-1/2 transform -translate-x-1/2 md:mb-4;
     @apply list-none p-0;
     @apply flex items-center space-x-2;
-
-    &--header {
-        bottom: 10px;
-        @screen lg {
-            bottom: 90px;
-        }
-    }
 }
 
 .slider-pagination__dot {
-    @apply hide-text;
-    display: block;
-    width: 10px;
-    height: 10px;
-    border-radius: 5px;
-    background-color: white;
-    border: none;
-    box-shadow: 0 0 2px theme('colors.gray.200');
-    padding: 0;
-    @screen md {
-        width: 14px;
-        height: 14px;
-        border-radius: 7px;
-    }
-    &:focus {
-        outline: none;
-    }
+    @apply hide-text block w-3 h-3 xl:w-4 xl:h-4 rounded-full bg-white shadow-md focus:outline-none;
 
     &.is-active {
-        background-color: theme('colors.ep.secondary');
+        @apply bg-ep-secondary;
     }
 }
 
 .slider-pagination__arrow {
-    border: none;
-    background: transparent;
-    position: absolute;
-    z-index: 10;
-    color: theme('colors.ep.secondary');
+    @apply absolute z-10 text-ep-secondary bg-transparent focus:outline-none;
 
     .slider--teasers & {
-        background-color: theme('colors.ep.secondary');
-        color: white;
-        border-radius: 4px;
-        padding: 4px 2px 0 2px;
-    }
-
-    &:focus {
-        outline: none;
+        @apply bg-ep-secondary text-white rounded p-1;
     }
 
     &[disabled] {
-        opacity: 0.1;
+        @apply opacity-25;
     }
 
     &--prev {
-        left: 5%;
-        top: 50%;
-        transform: translateY(-50%);
+        @apply left-0 top-1/2 transform -translate-y-1/2 ml-4;
 
         .slider--teasers & {
-            left: -28px;
+            @apply -ml-8;
         }
     }
 
     &--next {
-        right: 5%;
-        top: 50%;
-        transform: translateY(-50%);
+        @apply right-0 top-1/2 transform -translate-y-1/2 mr-4;
 
         .slider--teasers & {
-            right: -28px;
+            @apply -mr-8;
         }
     }
 }
-
-.slider-pagination__zone {
-    position: absolute;
-    top: 0;
-    z-index: 10;
-    height: 100%;
-    width: 10%;
-    display: block;
-
-    &--prev {
-        left: 0;
-    }
-
-    &--next {
-        right: 0;
-    }
-}
diff --git a/public/typo3conf/ext/ep_theme/Resources/Private/Assets/scss/components/_teaserbox.scss b/public/typo3conf/ext/ep_theme/Resources/Private/Assets/scss/components/_teaserbox.scss
index 5eb7da62..200afe3e 100644
--- a/public/typo3conf/ext/ep_theme/Resources/Private/Assets/scss/components/_teaserbox.scss
+++ b/public/typo3conf/ext/ep_theme/Resources/Private/Assets/scss/components/_teaserbox.scss
@@ -25,14 +25,6 @@
         color: theme('colors.gray.800');
     }
 
-    //.slick-slide &--default {
-    //  margin: 20px 0 30px;
-    //
-    //  @include mq($from: desktop) {
-    //    margin: 30px 0;
-    //  }
-    //}
-
     &--concept {
         margin-top: 10px;
         transition: all .5s ease-in-out;
diff --git a/public/typo3conf/ext/ep_theme/Resources/Private/Assets/scss/main.scss b/public/typo3conf/ext/ep_theme/Resources/Private/Assets/scss/main.scss
index 3ac9be6d..e9a6e86a 100644
--- a/public/typo3conf/ext/ep_theme/Resources/Private/Assets/scss/main.scss
+++ b/public/typo3conf/ext/ep_theme/Resources/Private/Assets/scss/main.scss
@@ -17,7 +17,6 @@
 
     // LEGACY FROM HERE
     @import "components/badges";
-    @import "components/header";
     @import "components/product";
     @import "components/searchresult";
     @import "components/slider";
@@ -34,7 +33,6 @@
     @import "components/map";
     @import "components/lightbox";
     @import "components/datepicker";
-    @import "components/forms";
     @import "components/contact-bar";
     @import "components/misc";
     @import "components/tiles";
@@ -76,7 +74,6 @@
         font: 0/0 a;
         color: transparent;
         text-shadow: none;
-        background-color: transparent;
         border: 0;
     }
 }
diff --git a/public/typo3conf/ext/ep_theme/Resources/Private/Layouts/Page/SubpageSidebarRight.html b/public/typo3conf/ext/ep_theme/Resources/Private/Layouts/Page/SubpageSidebarRight.html
index e3015395..9a99802f 100644
--- a/public/typo3conf/ext/ep_theme/Resources/Private/Layouts/Page/SubpageSidebarRight.html
+++ b/public/typo3conf/ext/ep_theme/Resources/Private/Layouts/Page/SubpageSidebarRight.html
@@ -4,7 +4,7 @@
 
     <f:render partial="GoogleTagManager" arguments="{googleTagManagerId: settings.googleTagManagerId}"/>
     <f:render partial="FacebookPixelCode"/>
-    <div class="lg:mt-8">
+    <div class="lg:mt-32">
         <f:if condition="{data.tx_eptheme_hide_searchbar}">
             <f:else>
                 <f:cObject typoscriptObjectPath="lib.searchBarFixed"/>
diff --git a/public/typo3conf/ext/ep_theme/Resources/Private/Partials/Badge.html b/public/typo3conf/ext/ep_theme/Resources/Private/Partials/Badge.html
index 14c24f2c..c605c41c 100644
--- a/public/typo3conf/ext/ep_theme/Resources/Private/Partials/Badge.html
+++ b/public/typo3conf/ext/ep_theme/Resources/Private/Partials/Badge.html
@@ -1,17 +1,29 @@
-<f:if condition="{badge}">
-    <f:alias map="{badgeData: badge.0.data}">
-        <f:link.typolink parameter="{badgeData.link}" title="{badgeData.title}">
-            <div class="herounit__badge herounit__badge--custom custom-badge">
-                <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
-                     preserveAspectRatio="xMinYMin meet" viewBox="0 0 200 200" class="custom-badge__background">
-                    <circle id="bgouter" cx="100" cy="100" r="100"/>
-                    <circle id="bginner" cx="100" cy="100" r="70"/>
-                </svg>
-                <div class="custom-badge__content">
-                    <span class="custom-badge__title">{badgeData.title -> f:format.raw()}</span>
-                    <span class="custom-badge__subtitle">{badgeData.subtitle -> f:format.raw()}</span>
-                </div>
+<html data-namespace-typo3-fluid="true" lang="en"
+      xmlns="http://www.w3.org/1999/xhtml"
+      xmlns:f="http://typo3.org/ns/fluid/ViewHelpers">
+
+    <f:if condition="{badge}">
+        <f:link.typolink parameter="{badge.link}"
+                         title="{badge.title}"
+                         class="hidden md:block absolute bottom-0 right-0 -mb-8 -mr-8 w-40 transform rotate-6">
+            <svg viewBox="0 0 200 200"
+                 xmlns="http://www.w3.org/2000/svg"
+                 preserveAspectRatio="xMinYMin meet"
+                 class="w-full h-full">
+                <circle fill="currentColor" class="text-ep-primary-50" cx="100" cy="100" r="100"/>
+                <circle fill="currentColor" class="text-ep-primary" cx="100" cy="100" r="70"/>
+            </svg>
+            <div class="absolute top-0 left-0 inset-0 flex flex-col items-center justify-center p-8">
+                <span class="block text-center text-white uppercase font-bold leading-none text-xl">
+                    {badge.title -> f:format.raw()}
+                </span>
+                <f:if condition="{badge.subtitle}">
+                    <span class="block text-center text-white uppercase font-bold leading-none">
+                        {badge.subtitle -> f:format.raw()}
+                    </span>
+                </f:if>
             </div>
         </f:link.typolink>
-    </f:alias>
-</f:if>
+    </f:if>
+
+</html>
diff --git a/public/typo3conf/ext/ep_theme/Resources/Private/Partials/City/Details.html b/public/typo3conf/ext/ep_theme/Resources/Private/Partials/City/Details.html
index 6700b4be..2943889b 100644
--- a/public/typo3conf/ext/ep_theme/Resources/Private/Partials/City/Details.html
+++ b/public/typo3conf/ext/ep_theme/Resources/Private/Partials/City/Details.html
@@ -14,7 +14,7 @@
     {city.description -> f:format.html()}
 </div>
 <f:if condition="{city.images -> f:count()} > 0">
-    <f:render partial="ContentSlider" arguments="{images: city.images, id: 'city-{city.uid}', thumbnails: 1}"/>
+    <f:render partial="ImageGallery" arguments="{images: city.images, id: 'city-{city.uid}', thumbnails: 1}"/>
 </f:if>
 <f:if condition="{city.party}">
     <f:if condition="{bars}">
diff --git a/public/typo3conf/ext/ep_theme/Resources/Private/Partials/ContentSlider.html b/public/typo3conf/ext/ep_theme/Resources/Private/Partials/ContentSlider.html
deleted file mode 100644
index 0227e114..00000000
--- a/public/typo3conf/ext/ep_theme/Resources/Private/Partials/ContentSlider.html
+++ /dev/null
@@ -1,64 +0,0 @@
-{namespace v=FluidTYPO3\Vhs\ViewHelpers}
-<f:comment>
-    This content element was implemented as a slider initially and has been turned into a lightbox gallery.
-    ToDo: Adjust naming accordingly
-</f:comment>
-<div class="slider">
-    <div class="slider__zoom-icon">
-        <i class="fa fa-search-plus"></i> {images -> f:count()}
-    </div>
-    <div class="slider__items">
-        <f:alias map="{image: images.0}">
-            <a href="javascript:;" data-glightbox="gallery-{id}">
-                <f:image image="{image}" width="770" height="430c+100" class="slider__image"
-                         alt="{image.alternative}" title="{image.title}"/>
-            </a>
-        </f:alias>
-    </div>
-    <f:if condition="{thumbnails}">
-        <f:if condition="{images -> f:count()} > 1">
-            <div class="slider__thumbs hidden-sm hidden-xs">
-                <f:for each="{images}" as="image" iteration="iteration">
-                    <f:if condition="{iteration.cycle} <= 5">
-                        <a href="{f:uri.image(image: image, cropVariant: 'zoom', maxWidth: '2560')}"
-                           data-glightbox data-gallery="gallery-{id}" data-caption="{image.originalResource.description}" class="slider__thumb">
-                            <f:image image="{image}" width="150" height="85c+100" class="img-responsive"
-                                     alt="{image.originalResource.alternative}" title="{image.originalResource.title}"/>
-                        </a>
-                    </f:if>
-                </f:for>
-            </div>
-        </f:if>
-    </f:if>
-    <div class="slider__zoom" style="display: none">
-        <f:if condition="{thumbnails}">
-            <f:then>
-                <f:if condition="{images -> f:count()} == 1">
-                    <f:then>
-                        <f:alias map="{image: images.0}">
-                            <a href="{f:uri.image(image: image, cropVariant: 'zoom', maxWidth: '2560')}"
-                               data-glightbox data-gallery="gallery-{id}" data-caption="{image.originalResource.description}"
-                               title="{image.title}">1</a>
-                        </f:alias>
-                    </f:then>
-                    <f:else>
-                        <f:for each="{images}" as="image" iteration="iteration">
-                            <f:if condition="{iteration.cycle} > 5">
-                                <a href="{f:uri.image(image: image, cropVariant: 'zoom', maxWidth: '2560')}"
-                                   data-glightbox data-gallery="gallery-{id}" data-caption="{image.originalResource.description}"
-                                   title="{image.originalResource.title}">{iteration.index}</a>
-                            </f:if>
-                        </f:for>
-                    </f:else>
-                </f:if>
-            </f:then>
-            <f:else>
-                <f:for each="{images}" as="image">
-                    <a href="{f:uri.image(image: image, cropVariant: 'zoom', maxWidth: '2560')}"
-                       data-glightbox data-gallery="gallery-{id}" data-caption="{image.originalResource.description}"
-                       title="{image.originalResource.title}">{iteration.index}</a>
-                </f:for>
-            </f:else>
-        </f:if>
-    </div>
-</div>
diff --git a/public/typo3conf/ext/ep_theme/Resources/Private/Partials/Footer.html b/public/typo3conf/ext/ep_theme/Resources/Private/Partials/Footer.html
index 3b47693c..756913a0 100644
--- a/public/typo3conf/ext/ep_theme/Resources/Private/Partials/Footer.html
+++ b/public/typo3conf/ext/ep_theme/Resources/Private/Partials/Footer.html
@@ -95,7 +95,7 @@
             </div>
         </div>
     </div>
-    <div class="bg-ep-primary-dark py-4 text-sm lg:text-base text-white">
+    <div class="bg-ep-primary-dark pt-4 pb-16 md:py-4 text-sm lg:text-base text-white">
         <div class="container">
             <div class="grid grid-cols-1 md:grid-cols-12 gap-4">
                 <div class="md:col-span-4 text-center md:text-left">
@@ -133,7 +133,7 @@
                         </li>
                     </ul>
                 </div>
-                <div class="md:col-span-3 text-center md:text-left">
+                <div class="md:col-span-4 text-center md:text-left">
                     <div class="inline-flex md:flex items-start space-x-2">
                         <a href="{settings.facebookUrl}"
                            title="E&amp;P bei Facebook"
@@ -161,14 +161,14 @@
                         </a>
                     </div>
                 </div>
-                <div class="md:col-span-2">
-                    <a class="block"
+                <div class="md:col-span-1">
+                    <a class="block bg-white p-2 w-24 mx-auto rounded"
                        href="https://www.unglobalcompact.org/"
                        target="_blank"
                        title="Global Compact">
-                        <img class="mx-auto lazyload"
-                             data-src="{f:uri.image(src: 'EXT:ep_theme/Resources/Public/images/global_compact.png', height: '48')}"
-                             alt="Global Compact" width="40" height="48"/>
+                        <img class="w-full h-auto lazyload"
+                             data-src="{f:uri.image(src: 'EXT:ep_theme/Resources/Public/images/global_compact.png')}"
+                             alt="Global Compact"/>
                     </a>
                 </div>
             </div>
@@ -177,7 +177,7 @@
     <button x-data="scrollTop"
             x-bind="trigger"
             x-cloak
-            class="fixed bottom-0 right-0 mb-8 mr-8 z-10 h-10 w-10 flex items-center justify-center rounded bg-ep-secondary-80">
+            class="fixed bottom-0 right-0 mb-16 md:mb-8 mr-4 md:mr-8 z-10 h-10 w-10 flex items-center justify-center rounded bg-ep-secondary-80">
         <svg class="w-8 h-8 text-white">
             <use href="#icon-chevron-up"></use>
         </svg>
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 43091fcd..03c4e1e2 100644
--- a/public/typo3conf/ext/ep_theme/Resources/Private/Partials/HeaderSlider.html
+++ b/public/typo3conf/ext/ep_theme/Resources/Private/Partials/HeaderSlider.html
@@ -3,7 +3,7 @@
       xmlns:f="http://typo3.org/ns/fluid/ViewHelpers">
 
     <div class="lg:-mt-8">
-        <div class="splide slider slider--header" data-slider="header">
+        <div class="splide" data-slider="header">
             <div class="splide__track">
                 <ul class="splide__list">
                     <f:for each="{slides}" as="slide" iteration="iteration">
@@ -20,15 +20,27 @@
                                         </div>
                                     </f:if>
                                 </f:alias>
-                                <div class="herounit__main">
-                                    <div class="herounit__inner">
-                                        <div class="header-caption">
-                                            <span class="header-caption__headline">{slide.headline}</span>
-                                            <span class="header-caption__subline">{slide.subline}</span>
+                                <div class="absolute left-0 bottom-0 inset-x-0 px-4 py-8 w-full md:bottom-1/2 md:transform md:translate-y-1/2">
+                                    <div class="lg:container px-0">
+                                        <div class="p-4 bg-ep-primary-80 mb-4 md:p-8 md:max-w-2xl">
+                                            <span class="block text-2xl md:text-4xl lg:text-5xl max-w-sm md:max-w-none font-black text-white uppercase mb-8">
+                                                {slide.headline}
+                                            </span>
+                                            <span class="hidden md:block md:text-lg font-light text-white mb-8">
+                                                {slide.subline}
+                                            </span>
                                             <f:if condition="{slide.button}">
-                                                <f:link.typolink parameter="{slide.page_uid}" class="button header-caption__button">{slide.button}</f:link.typolink>
+                                                <f:link.typolink parameter="{slide.page_uid}"
+                                                                 class="hidden md:inline-block button">
+                                                    {slide.button}
+                                                </f:link.typolink>
                                             </f:if>
                                         </div>
+                                        <f:if condition="{slide.button}">
+                                            <f:link.typolink parameter="{slide.page_uid}" class="button w-full justify-start md:hidden">
+                                                {slide.button}
+                                            </f:link.typolink>
+                                        </f:if>
                                     </div>
                                 </div>
                                 <f:if condition="{slide.skipass}">
@@ -39,19 +51,25 @@
                                 </f:if>
                                 <f:if condition="{badge}">
                                     <f:alias map="{badgeData: badge.0.data}">
-                                        <f:link.typolink parameter="{badgeData.link}" title="{badgeData.title}">
-                                            <div class="herounit__badge herounit__badge--custom custom-badge">
-                                                <svg xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="xMinYMin meet"
-                                                     viewBox="0 0 200 200" class="custom-badge__background">
-                                                    <g>
-                                                        <circle id="bgouter" cx="100" cy="100" r="100"></circle>
-                                                        <circle id="bginner" cx="100" cy="100" r="70"></circle>
-                                                    </g>
-                                                </svg>
-                                                <div class="custom-badge__content">
-                                                    <span class="custom-badge__title">{badgeData.title -> f:format.raw()}</span>
-                                                    <span class="custom-badge__subtitle">{badgeData.subtitle -> f:format.raw()}</span>
-                                                </div>
+                                        <f:link.typolink parameter="{badgeData.link}"
+                                                         title="{badgeData.title}"
+                                                         class="hidden md:block absolute top-0 right-0 mt-12 mr-8 w-40 transform rotate-6">
+                                            <svg viewBox="0 0 200 200"
+                                                 xmlns="http://www.w3.org/2000/svg"
+                                                 preserveAspectRatio="xMinYMin meet"
+                                                 class="w-full h-full">
+                                                <circle fill="currentColor" class="text-ep-primary-50" cx="100" cy="100" r="100"/>
+                                                <circle fill="currentColor" class="text-ep-primary" cx="100" cy="100" r="70"/>
+                                            </svg>
+                                            <div class="absolute top-0 left-0 inset-0 flex flex-col items-center justify-center p-8">
+                                                <span class="block text-center text-white uppercase font-bold leading-none text-xl">
+                                                    {badgeData.title -> f:format.raw()}
+                                                </span>
+                                                <f:if condition="{badgeData.subtitle}">
+                                                    <span class="block text-center text-white uppercase font-bold leading-none">
+                                                        {badgeData.subtitle -> f:format.raw()}
+                                                    </span>
+                                                </f:if>
                                             </div>
                                         </f:link.typolink>
                                     </f:alias>
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 63d5b1af..e80efd41 100644
--- a/public/typo3conf/ext/ep_theme/Resources/Private/Partials/HeaderSliderSmall.html
+++ b/public/typo3conf/ext/ep_theme/Resources/Private/Partials/HeaderSliderSmall.html
@@ -17,18 +17,24 @@
             </f:alias>
             <div class="absolute bottom-0 left-0 inset-x-0 px-8 md:bottom-1/2 md:transform md:translate-y-1/2">
                 <div class="lg:container">
-                    <div class="bg-ep-primary-80 py-4 lg:py-8 px-4 mb-8 md:max-w-1/2 p-16">
-                        <div class="header-caption__inner header-caption__inner--small">
-                            <div class="header-caption__text">
-                                <span>{slide.headline}</span><br>{slide.subline}
-                            </div>
-                            <f:if condition="{slide.button}">
-                                <f:link.typolink parameter="{slide.page_uid}" class="button header-caption__button">{slide.button}</f:link.typolink>
-                            </f:if>
-                        </div>
+                    <div class="p-4 bg-ep-primary-80 mb-4 md:p-8 md:max-w-2xl">
+                        <span class="block text-xl md:text-2xl font-light text-white uppercase">
+                            {slide.headline}
+                        </span>
+                        <span class="block text-2xl md:text-3xl lg:text-4xl text-white uppercase">
+                            {slide.subline}
+                        </span>
+                        <f:if condition="{slide.button}">
+                            <f:link.typolink parameter="{slide.page_uid}"
+                                             class="hidden md:inline-block button">
+                                {slide.button}
+                            </f:link.typolink>
+                        </f:if>
                     </div>
                     <f:if condition="{slide.button}">
-                        <f:link.typolink parameter="{slide.page_uid}" class="button header__button">{slide.button}</f:link.typolink>
+                        <f:link.typolink parameter="{slide.page_uid}" class="button w-full justify-start md:hidden">
+                            {slide.button}
+                        </f:link.typolink>
                     </f:if>
                 </div>
             </div>
@@ -40,19 +46,25 @@
             </f:if>
             <f:if condition="{badge}">
                 <f:alias map="{badgeData: badge.0.data}">
-                    <f:link.typolink parameter="{badgeData.link}" title="{badgeData.title}">
-                        <div class="pagehead__badge pagehead__badge--custom custom-badge">
-                            <svg xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="xMinYMin meet"
-                                 viewBox="0 0 200 200" class="custom-badge__background">
-                                <g>
-                                    <circle id="bgouter" cx="100" cy="100" r="100"></circle>
-                                    <circle id="bginner" cx="100" cy="100" r="70"></circle>
-                                </g>
-                            </svg>
-                            <div class="custom-badge__content">
-                                <span class="custom-badge__title">{badgeData.title -> f:format.raw()}</span>
-                                <span class="custom-badge__subtitle">{badgeData.subtitle -> f:format.raw()}</span>
-                            </div>
+                    <f:link.typolink parameter="{badgeData.link}"
+                                     title="{badgeData.title}"
+                                     class="hidden md:block absolute top-0 right-0 mt-12 mr-8 w-40 transform rotate-6">
+                        <svg viewBox="0 0 200 200"
+                             xmlns="http://www.w3.org/2000/svg"
+                             preserveAspectRatio="xMinYMin meet"
+                             class="w-full h-full">
+                            <circle fill="currentColor" class="text-ep-primary-50" cx="100" cy="100" r="100"/>
+                            <circle fill="currentColor" class="text-ep-primary" cx="100" cy="100" r="70"/>
+                        </svg>
+                        <div class="absolute top-0 left-0 inset-0 flex flex-col items-center justify-center p-8">
+                            <span class="block text-center text-white uppercase font-bold leading-none text-xl">
+                                {badgeData.title -> f:format.raw()}
+                            </span>
+                            <f:if condition="{badgeData.subtitle}">
+                                <span class="block text-center text-white uppercase font-bold leading-none">
+                                    {badgeData.subtitle -> f:format.raw()}
+                                </span>
+                            </f:if>
                         </div>
                     </f:link.typolink>
                 </f:alias>
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 73e3e814..6ea6850a 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
@@ -48,7 +48,7 @@
     </f:else>
 </f:if>
 <f:if condition="{hotel.images -> f:count()} > 0">
-    <f:render partial="ContentSlider" arguments="{images: hotel.images, id: 'hotel-{hotel.uid}', thumbnails: 1}"/>
+    <f:render partial="ImageGallery" arguments="{images: hotel.images, id: 'hotel-{hotel.uid}', thumbnails: 1}"/>
 </f:if>
 <f:if condition="{bars}">
     <f:then>
diff --git a/public/typo3conf/ext/ep_theme/Resources/Private/Partials/ImageGallery.html b/public/typo3conf/ext/ep_theme/Resources/Private/Partials/ImageGallery.html
new file mode 100644
index 00000000..22845706
--- /dev/null
+++ b/public/typo3conf/ext/ep_theme/Resources/Private/Partials/ImageGallery.html
@@ -0,0 +1,72 @@
+<html data-namespace-typo3-fluid="true" lang="en"
+      xmlns="http://www.w3.org/1999/xhtml"
+      xmlns:f="http://typo3.org/ns/fluid/ViewHelpers">
+
+    <div class="relative mb-8">
+        <div class="absolute top-0 right-0 mt-4 mr-4 flex space-x-2 text-white">
+            <svg class="w-8 h-8 md:w-10 h-10">
+                <use href="#icon-search"></use>
+            </svg>
+            <span class="text-4xl">
+                {images -> f:count()}
+            </span>
+        </div>
+        <f:alias map="{image: images.0}">
+            <a href="{f:uri.image(image: image, cropVariant: 'zoom', maxWidth: '2560')}" data-glightbox="gallery-{id}">
+                <img data-src="{f:uri.image(image: image, width: '770', height: '430x+100')}"
+                     class="block w-full h-auto lazyload"
+                     alt="{image.alternative}"
+                     title="{image.title}">
+            </a>
+        </f:alias>
+        <f:if condition="{thumbnails}">
+            <f:if condition="{images -> f:count()} > 1">
+                <div class="hidden md:grid md:grid-cols-5 md:gap-2 md:pt-4 md:pb-8">
+                    <f:for each="{images}" as="image" iteration="iteration">
+                        <f:if condition="{iteration.cycle} <= 5">
+                            <a href="{f:uri.image(image: image, cropVariant: 'zoom', maxWidth: '2560')}"
+                               data-glightbox data-gallery="gallery-{id}"
+                               data-caption="{image.originalResource.description}"
+                               class="block">
+                                <f:image image="{image}" width="150" height="85c+100" class="block w-full h-auto"
+                                         alt="{image.originalResource.alternative}" title="{image.originalResource.title}"/>
+                            </a>
+                        </f:if>
+                    </f:for>
+                </div>
+            </f:if>
+        </f:if>
+        <div class="hidden">
+            <f:if condition="{thumbnails}">
+                <f:then>
+                    <f:if condition="{images -> f:count()} == 1">
+                        <f:then>
+                            <f:alias map="{image: images.0}">
+                                <a href="{f:uri.image(image: image, cropVariant: 'zoom', maxWidth: '2560')}"
+                                   data-glightbox data-gallery="gallery-{id}" data-caption="{image.originalResource.description}"
+                                   title="{image.title}">1</a>
+                            </f:alias>
+                        </f:then>
+                        <f:else>
+                            <f:for each="{images}" as="image" iteration="iteration">
+                                <f:if condition="{iteration.cycle} > 5">
+                                    <a href="{f:uri.image(image: image, cropVariant: 'zoom', maxWidth: '2560')}"
+                                       data-glightbox data-gallery="gallery-{id}" data-caption="{image.originalResource.description}"
+                                       title="{image.originalResource.title}">{iteration.index}</a>
+                                </f:if>
+                            </f:for>
+                        </f:else>
+                    </f:if>
+                </f:then>
+                <f:else>
+                    <f:for each="{images}" as="image">
+                        <a href="{f:uri.image(image: image, cropVariant: 'zoom', maxWidth: '2560')}"
+                           data-glightbox data-gallery="gallery-{id}" data-caption="{image.originalResource.description}"
+                           title="{image.originalResource.title}">{iteration.index}</a>
+                    </f:for>
+                </f:else>
+            </f:if>
+        </div>
+    </div>
+
+</html>
diff --git a/public/typo3conf/ext/ep_theme/Resources/Private/Partials/News/Detail/MediaContainer.html b/public/typo3conf/ext/ep_theme/Resources/Private/Partials/News/Detail/MediaContainer.html
index 0b04b97b..34095d04 100644
--- a/public/typo3conf/ext/ep_theme/Resources/Private/Partials/News/Detail/MediaContainer.html
+++ b/public/typo3conf/ext/ep_theme/Resources/Private/Partials/News/Detail/MediaContainer.html
@@ -4,26 +4,28 @@
 
     <f:alias map="{images: '{media -> v:iterator.filter(propertyName: \'showinpreview\', filter: 0)}'}">
         <f:if condition="{images}">
-            <div data-slider="content" class="splide slider slider--content">
-                <div id="carousel-{id}" class="splide__track slider__items">
+            <div data-slider="content" class="splide">
+                <div id="carousel-{id}" class="splide__track">
                     <ul class="splide__list">
                         <f:for each="{images}" as="image" iteration="iteration">
                             <li class="splide__slide">
-                                <f:link.typolink parameter="{image.originalResource.link}" class="slider__item">
+                                <f:link.typolink parameter="{image.originalResource.link}"
+                                                 class="relative bg-cover bg-center">
                                     <img src="{f:uri.image(image: image, width: '770', height: '430c+100')}"
-                                         class="slider__image" alt="{image.alternative}" title="{image.title}">
+                                         class="block w-full h-auto"
+                                         alt="{image.alternative}" title="{image.title}">
                                 </f:link.typolink>
                             </li>
                         </f:for>
                     </ul>
                 </div>
                 <f:if condition="{images -> f:count()} > 1">
-                    <div class="slider__thumbs hidden-sm hidden-xs">
+                    <div class="hidden md:grid md:grid-cols-5 md:gap-2 md:pt-4 md:pb-8">
                         <f:for each="{images}" as="image" iteration="iteration">
                             <f:if condition="{iteration.cycle} <= 5">
-                                <a href="#" class="slider__thumb" data-slide="{iteration.index}">
+                                <a href="#" class="block" data-slide="{iteration.index}">
                                     <img src="{f:uri.image(image: image, width: '150', height: '85c+100')}"
-                                         class="img-responsive" alt="{image.alternative}" title="{image.title}">
+                                         class="block w-full h-auto" alt="{image.alternative}" title="{image.title}">
                                 </a>
                             </f:if>
                         </f:for>
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 513aacb5..5d94839b 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
@@ -1,107 +1,108 @@
-{namespace v=FluidTYPO3\Vhs\ViewHelpers}
-{namespace ep=EP\EpTheme\ViewHelpers}
-<div class="bg-cover bg-center bg-header-season-{product.region.season} mb-8">
-    <div class="md:container">
-        <div class="md:flex md:flex-row-reverse md:items-stretch">
-            <div class="md:w-5/12 md:py-4 splide" data-slider="content">
-                <div class="splide__track">
-                    <ul class="splide__list">
-                        <f:for each="{product.images}" as="image" iteration="iteration">
-                            <li class="splide__slide h-64 md:h-auto">
-                                <picture class="w-full h-full">
-                                    <source srcset="{f:uri.image(image: image, width: '585')}" media="(min-width: 768px)">
-                                    <source srcset="{f:uri.image(image: image, width: '400')}" media="(max-width: 767px)">
-                                    <img class="block w-full h-full object-cover"
-                                         src="{f:uri.image(image: image, width: '400')}"
-                                         alt="{image.alternative}">
-                                </picture>
-                            </li>
-                        </f:for>
-                    </ul>
-                </div>
-                <div class="splide__arrows absolute z-10 top-1/2 left-0 transform -translate-y-1/2 w-full flex justify-between md:hidden">
-                    <button class="splide__arrow splide__arrow--prev">
-                        <svg class="w-10 h-10 text-ep-secondary pointer-events-none">
-                            <use href="#icon-chevron-left"></use>
-                        </svg>
-                    </button>
-                    <button class="splide__arrow splide__arrow--next">
-                        <svg class="w-10 h-10 text-ep-secondary pointer-events-none">
-                            <use href="#icon-chevron-right"></use>
-                        </svg>
-                    </button>
-                </div>
-            </div>
-            <div class="hidden md:block md:w-2/12 relative">
-                <f:if condition="{settings.showSkipassBadge} && {product.skipassIncluded}">
-                    <f:link.typolink parameter="{settings.skipassPageUid}"
-                                     title="Skipass inklusive">
-                        <f:image src="EXT:ep_theme/Resources/Public/images/badge_skipass.png"
-                                 class="block w-20 xl:w-auto h-auto mx-auto"
-                                 alt="Skipass inklusive" />
-                    </f:link.typolink>
-                </f:if>
-                <f:if condition="{product.badge}">
-                    <f:link.typolink parameter="{product.badge.link}"
-                                     title="{product.badge.title}"
-                                     class="absolute top-0 left-0">
-                        <div class="custom-badge">
-                            <svg xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="xMinYMin meet"
-                                 viewBox="0 0 200 200" class="custom-badge__background">
-                                <g>
-                                    <circle id="bgouter" cx="100" cy="100" r="100"></circle>
-                                    <circle id="bginner" cx="100" cy="100" r="70"></circle>
-                                </g>
-                            </svg>
-                            <div class="custom-badge__content">
-                                <span class="custom-badge__title">{product.badge.title -> f:format.raw()}</span>
-                                <span class="custom-badge__subtitle">{product.badge.subtitle -> f:format.raw()}</span>
-                            </div>
-                        </div>
-                    </f:link.typolink>
-                </f:if>
-            </div>
-            <div class="px-4 md:px-0 md:w-5/12 md:self-center">
-                <div class="relative z-10 max-w-md mx-auto shadow-md -mt-16 md:mt-0 mx-0">
-                    <div class="bg-concept-{product.concept.code} text-white text-xl px-4 py-2 leading-none">
-                        {product.concept.name}
+<html data-namespace-typo3-fluid="true" lang="en"
+      xmlns="http://www.w3.org/1999/xhtml"
+      xmlns:f="http://typo3.org/ns/fluid/ViewHelpers"
+      xmlns:ep="http://typo3.org/ns/EP/EpTheme/ViewHelpers">
+
+    <div class="bg-cover bg-center bg-header-season-{product.region.season} mb-8">
+        <div class="md:container">
+            <div class="md:flex md:flex-row-reverse md:items-stretch">
+                <div class="md:w-5/12 md:py-4 splide" data-slider="content">
+                    <div class="splide__track">
+                        <ul class="splide__list">
+                            <f:for each="{product.images}" as="image" iteration="iteration">
+                                <li class="splide__slide h-64 md:h-auto">
+                                    <picture class="w-full h-full">
+                                        <source srcset="{f:uri.image(image: image, width: '585')}" media="(min-width: 768px)">
+                                        <source srcset="{f:uri.image(image: image, width: '400')}" media="(max-width: 767px)">
+                                        <img class="block w-full h-full object-cover"
+                                             src="{f:uri.image(image: image, width: '400')}"
+                                             alt="{image.alternative}">
+                                    </picture>
+                                </li>
+                            </f:for>
+                        </ul>
                     </div>
-                    <div class="bg-white p-4">
-                        <span class="headline--3">
-                            {product.name}{f:if(condition: product.subline, then: ' {product.subline}')}
-                        </span>
-                        <span class="block">
-                            {product.region.name}
-                        </span>
-                        <div class="flex space-x-4 mt-4">
-                            <svg class="w-8 h-6 md:w-10 md:h-8">
-                                <use href="#icon-flag-{product.country.code -> f:format.case(mode: 'lower')}"></use>
+                    <div class="splide__arrows absolute z-10 top-1/2 left-0 transform -translate-y-1/2 w-full flex justify-between md:hidden">
+                        <button class="splide__arrow splide__arrow--prev">
+                            <svg class="w-10 h-10 text-ep-secondary pointer-events-none">
+                                <use href="#icon-chevron-left"></use>
                             </svg>
-                            <f:if condition="{hotel}">
+                        </button>
+                        <button class="splide__arrow splide__arrow--next">
+                            <svg class="w-10 h-10 text-ep-secondary pointer-events-none">
+                                <use href="#icon-chevron-right"></use>
+                            </svg>
+                        </button>
+                    </div>
+                </div>
+                <div class="hidden md:flex md:flex-col md:justify-between md:items-center md:w-2/12 md:px-8">
+                    <f:if condition="{settings.showSkipassBadge} && {product.skipassIncluded}">
+                        <f:link.typolink parameter="{settings.skipassPageUid}"
+                                         title="Skipass inklusive">
+                            <f:if condition="{product.badge}">
                                 <f:then>
-                                    <a href="{ep:gmapsUrl(hotel: hotel)}" target="_blank" class="block bg-ep-primary-light px-2 py-1">
-                                        <svg class="w-4 h-4 md:w-6 md:h-6 text-white">
-                                            <use href="#icon-location-marker"></use>
-                                        </svg>
-                                    </a>
+                                    <f:image src="EXT:ep_theme/Resources/Public/images/badge_skipass.png"
+                                             class="block w-20 h-auto mx-auto"
+                                             alt="Skipass inklusive" />
                                 </f:then>
                                 <f:else>
-                                    <a href="{ep:gmapsUrl(region: product.region)}" target="_blank" class="">
-                                        <svg class="w-6 h-6">
-                                            <use href="#icon-location-marker"></use>
-                                        </svg>
-                                    </a>
+                                    <f:image src="EXT:ep_theme/Resources/Public/images/badge_skipass.png"
+                                             class="block w-20 xl:w-auto h-auto mx-auto"
+                                             alt="Skipass inklusive" />
                                 </f:else>
                             </f:if>
-                        </div>
-                    </div>
+                        </f:link.typolink>
+                    </f:if>
                 </div>
-                <f:if condition="{referringUrl}">
-                    <div class="ep-backlink">
-                        <a href="{referringUrl}" class="button button--small">{backlinkLabel}</a>
+                <div class="px-4 md:px-0 md:w-5/12 md:self-center py-4">
+                    <div class="relative z-10 max-w-md shadow-md -mt-16 md:mt-0">
+                        <div class="bg-concept-{product.concept.code} text-white text-xl px-4 py-2 leading-none">
+                            {product.concept.name}
+                        </div>
+                        <div class="bg-white p-4">
+                            <span class="headline--3">
+                                {product.name}{f:if(condition: product.subline, then: ' {product.subline}')}
+                            </span>
+                            <span class="block">
+                                {product.region.name}
+                            </span>
+                            <div class="flex space-x-4 mt-4">
+                                <svg class="w-8 h-6 md:w-10 md:h-8">
+                                    <use href="#icon-flag-{product.country.code -> f:format.case(mode: 'lower')}"></use>
+                                </svg>
+                                <f:if condition="{hotel}">
+                                    <f:then>
+                                        <a href="{ep:gmapsUrl(hotel: hotel)}" target="_blank" class="block bg-ep-primary-light px-2 py-1">
+                                            <svg class="w-4 h-4 md:w-6 md:h-6 text-white">
+                                                <use href="#icon-location-marker"></use>
+                                            </svg>
+                                        </a>
+                                    </f:then>
+                                    <f:else>
+                                        <a href="{ep:gmapsUrl(region: product.region)}" target="_blank" class="">
+                                            <svg class="w-6 h-6">
+                                                <use href="#icon-location-marker"></use>
+                                            </svg>
+                                        </a>
+                                    </f:else>
+                                </f:if>
+                            </div>
+                        </div>
+                        <f:render partial="Badge" arguments="{badge: product.badge}"/>
                     </div>
-                </f:if>
+                    <f:if condition="{referringUrl}">
+                        <a href="{referringUrl}" class="button button--small mt-8">
+                            <svg class="w-4 h-4 text-white">
+                                <use href="#icon-chevron-left"></use>
+                            </svg>
+                            <span>
+                                {backlinkLabel}
+                            </span>
+                        </a>
+                    </f:if>
+                </div>
             </div>
         </div>
     </div>
-</div>
+
+</html>
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 d4eb724b..c98261f7 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
@@ -47,7 +47,7 @@
     <f:if condition="{region.skiAreaExtended}">{region.skiAreaExtended -> f:format.html()}</f:if>
 </div>
 <f:if condition="{region.images -> f:count()} > 0">
-    <f:render partial="ContentSlider" arguments="{images: region.images, id: 'region-{region.uid}', thumbnails: 1}"/>
+    <f:render partial="ImageGallery" arguments="{images: region.images, id: 'region-{region.uid}', thumbnails: 1}"/>
 </f:if>
 <f:if condition="{bars}">
     <f:then>
diff --git a/public/typo3conf/ext/ep_theme/Resources/Private/Partials/SubpageHeader.html b/public/typo3conf/ext/ep_theme/Resources/Private/Partials/SubpageHeader.html
index e6c0b47f..20a506a0 100644
--- a/public/typo3conf/ext/ep_theme/Resources/Private/Partials/SubpageHeader.html
+++ b/public/typo3conf/ext/ep_theme/Resources/Private/Partials/SubpageHeader.html
@@ -1,45 +1,63 @@
-{namespace v=FluidTYPO3\Vhs\ViewHelpers}
-{images -> v:iterator.first() -> v:variable.set(name: 'headerImage')}
-<div class="pagehead">
-    <f:if condition="{headerImage.uid}">
-        <picture class="w-full h-full">
-            <source srcset="{f:uri.image(image: headerImage, width: '1360c', height: '360')}" media="(min-width: 768px)">
-            <source srcset="{f:uri.image(image: headerImage, width: '640c', height: '320')}" media="(max-width: 767px)">
-            <f:image image="{headerImage}" width="640" class="w-full h-full object-cover" alt="{image.alternative}"/>
-        </picture>
-    </f:if>
-    <div class="pagehead__main">
-        <div class="pagehead__inner">
-            <div class="header-caption">
-                <div class="header-caption__inner header-caption__inner--small">
-                    <div class="header-caption__text"><span>{topline}</span><br>{headline}</div>
+<html data-namespace-typo3-fluid="true" lang="en"
+      xmlns="http://www.w3.org/1999/xhtml"
+      xmlns:f="http://typo3.org/ns/fluid/ViewHelpers">
+
+    <div class="relative max-w-screen-2xl mx-auto h-80 lg:h-96 mb-8 lg:-mt-8">
+        <f:alias map="{headerImage: images.0}">
+            <f:if condition="{headerImage}">
+                <picture>
+                    <source srcset="{f:uri.image(image: headerImage, width: '1370c', height: '360')}" media="(min-width: 768px)">
+                    <source srcset="{f:uri.image(image: headerImage, width: '640c', height: '320')}" media="(max-width: 767px)">
+                    <img class="block w-full h-full object-cover"
+                         src="{f:uri.image(image: headerImage, height: '640')}"
+                         alt="{headerImage.alternative}">
+                </picture>
+            </f:if>
+        </f:alias>
+        <div class="absolute bottom-0 left-0 inset-x-0 px-8 md:bottom-1/2 md:transform md:translate-y-1/2">
+            <div class="lg:container px-0">
+                <div class="bg-ep-primary-80 py-4 lg:py-8 px-4 mb-8 md:max-w-1/2 p-16">
+                    <span class="block text-xl md:text-2xl font-light text-white uppercase">
+                        {topline}
+                    </span>
+                    <span class="block text-2xl md:text-3xl lg:text-4xl text-white uppercase">
+                        {headline}
+                    </span>
                 </div>
             </div>
         </div>
-    </div>
-    <f:if condition="{settings.showSkipassBadge}">
-        <f:image src="EXT:ep_theme/Resources/Public/images/badge_skipass.png" alt="Skipass inklusive" class="pagehead__badge pagehead__badge--skipass" />
-    </f:if>
-    <f:if condition="{headerImage.originaldescription}">
-        <div class="pagehead__picturecredit">{headerImage.description -> f:format.htmlspecialchars()}</div>
-    </f:if>
-    <f:if condition="{badge}">
-        <f:alias map="{badgeData: badge.0.data}">
-            <f:link.typolink parameter="{badgeData.link}" title="{badgeData.title}">
-                <div class="pagehead__badge pagehead__badge--custom custom-badge">
-                    <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
-                         preserveAspectRatio="xMinYMin meet" viewBox="0 0 200 200" class="custom-badge__background">
-                        <g>
-                            <circle id="bgouter" cx="100" cy="100" r="100"/>
-                            <circle id="bginner" cx="100" cy="100" r="70"/>
-                        </g>
+        <f:if condition="{settings.showSkipassBadge}">
+            <f:image src="EXT:ep_theme/Resources/Public/images/badge_skipass.png"
+                     alt="Skipass inklusive"
+                     class="absolute top-0 lg:top-8 right-8 lg:right-28 w-20 lg:w-auto" />
+        </f:if>
+        <f:if condition="{headerImage.originaldescription}">
+            <div class="pagehead__picturecredit">{headerImage.description -> f:format.htmlspecialchars()}</div>
+        </f:if>
+        <f:if condition="{badge}">
+            <f:alias map="{badgeData: badge.0.data}">
+                <f:link.typolink parameter="{badgeData.link}" title="{badgeData.title}"
+                                 class="hidden md:block absolute top-0 right-0 mt-12 mr-8 w-40 transform rotate-6">
+                    <svg viewBox="0 0 200 200"
+                         xmlns="http://www.w3.org/2000/svg"
+                         preserveAspectRatio="xMinYMin meet"
+                         class="w-full h-full">
+                        <circle fill="currentColor" class="text-ep-primary-50" cx="100" cy="100" r="100"/>
+                        <circle fill="currentColor" class="text-ep-primary" cx="100" cy="100" r="70"/>
                     </svg>
-                    <div class="custom-badge__content">
-                        <span class="custom-badge__title">{badgeData.title -> f:format.raw()}</span>
-                        <span class="custom-badge__subtitle">{badgeData.subtitle -> f:format.raw()}</span>
+                    <div class="absolute top-0 left-0 inset-0 flex flex-col items-center justify-center p-8">
+                        <span class="block text-center text-white uppercase font-bold leading-none text-xl">
+                            {badgeData.title -> f:format.raw()}
+                        </span>
+                        <f:if condition="{badgeData.subtitle}">
+                            <span class="block text-center text-white uppercase font-bold leading-none">
+                                {badgeData.subtitle -> f:format.raw()}
+                            </span>
+                        </f:if>
                     </div>
-                </div>
-            </f:link.typolink>
-        </f:alias>
-    </f:if>
-</div>
+                </f:link.typolink>
+            </f:alias>
+        </f:if>
+    </div>
+
+</html>
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 a7875da2..bf696f0e 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
@@ -13,7 +13,7 @@
                 <div class="mb-8 lg:hidden">
                     <a href="#teasers"
                        x-data="scrollTo('teasers')"
-                       class="button button--full">
+                       class="button w-full mb-8">
                         Direkt zu den Angeboten
                     </a>
                 </div>
@@ -28,7 +28,7 @@
                         <p class="hidden lg:block">
                             <a href="#teasers"
                                x-data="scrollTo('teasers')"
-                               class="button button--full">
+                               class="button w-full mb-8">
                                 Direkt zu den Angeboten
                             </a>
                         </p>
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 6c864df1..128bf882 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
@@ -13,7 +13,7 @@
                 <div class="mb-8 lg:hidden">
                     <a href="#teasers"
                        x-data="scrollTo('teasers')"
-                       class="button button--full">
+                       class="button w-full mb-8">
                         Direkt zu den Angeboten
                     </a>
                 </div>
@@ -52,7 +52,7 @@
                         <p class="hidden lg:block">
                             <a href="#teasers"
                                x-data="scrollTo('teasers')"
-                               class="button button--full">
+                               class="button w-full mb-8">
                                 Direkt zu den Angeboten
                             </a>
                         </p>
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 fee18a00..d5a60328 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
@@ -13,7 +13,7 @@
                 <div class="mb-8 lg:hidden">
                     <a href="#teasers"
                        x-data="scrollTo('teasers')"
-                       class="button button--full">
+                       class="button w-full mb-8">
                         Direkt zu den Angeboten
                     </a>
                 </div>
@@ -47,7 +47,7 @@
                     </f:if>
                     <f:if condition="{country.descriptionExtended}">{country.descriptionExtended -> f:format.html()}</f:if>
                     <f:if condition="{country.images -> f:count()} > 0">
-                        <f:render partial="ContentSlider" arguments="{images: country.images, id: 'country-{country.uid}'}"/>
+                        <f:render partial="ImageGallery" arguments="{images: country.images, id: 'country-{country.uid}'}"/>
                     </f:if>
                 </div>
                 <div class="col-span-3 lg:col-span-1">
@@ -55,7 +55,7 @@
                         <p class="hidden lg:block">
                             <a href="#teasers"
                                x-data="scrollTo('teasers')"
-                               class="button button--full">
+                               class="button w-full mb-8">
                                 Direkt zu den Angeboten
                             </a>
                         </p>
diff --git a/public/typo3conf/ext/ep_theme/Resources/Private/Templates/FluidStyledContent/Textmedia.html b/public/typo3conf/ext/ep_theme/Resources/Private/Templates/FluidStyledContent/Textmedia.html
index bd2b1b85..fd8f2943 100644
--- a/public/typo3conf/ext/ep_theme/Resources/Private/Templates/FluidStyledContent/Textmedia.html
+++ b/public/typo3conf/ext/ep_theme/Resources/Private/Templates/FluidStyledContent/Textmedia.html
@@ -8,10 +8,10 @@
     <f:section name="Main">
         <f:switch expression="{data.layout}">
             <f:case value="2">
-                <f:render partial="ContentSlider" arguments="{images: files, thumbnails: 1, id: data.uid}"/>
+                <f:render partial="ImageGallery" arguments="{images: files, thumbnails: 1, id: data.uid}"/>
             </f:case>
             <f:case value="4">
-                <f:render partial="ContentSlider" arguments="{images: files, thumbnails: 0, id: data.uid}"/>
+                <f:render partial="ImageGallery" arguments="{images: files, thumbnails: 0, id: data.uid}"/>
             </f:case>
             <f:case value="3">
                 <f:render partial="Textmedia/LinkPanel" section="Content" arguments="{images: files}"/>
diff --git a/public/typo3conf/ext/ep_theme/Resources/Private/Templates/FluidStyledContent/Textpic.html b/public/typo3conf/ext/ep_theme/Resources/Private/Templates/FluidStyledContent/Textpic.html
index bf493188..62c42111 100644
--- a/public/typo3conf/ext/ep_theme/Resources/Private/Templates/FluidStyledContent/Textpic.html
+++ b/public/typo3conf/ext/ep_theme/Resources/Private/Templates/FluidStyledContent/Textpic.html
@@ -8,10 +8,10 @@
 <f:section name="Main">
     <f:switch expression="{data.layout}">
         <f:case value="2">
-            <f:render partial="ContentSlider" arguments="{images: files, thumbnails: 1, id: data.uid}"/>
+            <f:render partial="ImageGallery" arguments="{images: files, thumbnails: 1, id: data.uid}"/>
         </f:case>
         <f:case value="4">
-            <f:render partial="ContentSlider" arguments="{images: files, thumbnails: 0, id: data.uid}"/>
+            <f:render partial="ImageGallery" arguments="{images: files, thumbnails: 0, id: data.uid}"/>
         </f:case>
         <f:case value="3">
             <f:render partial="Textmedia/LinkPanel" section="Content" arguments="{images: files}"/>
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 b9df5ae7..60cda40b 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
@@ -12,7 +12,7 @@
                 <div class="mb-8 lg:hidden">
                     <a href="#teasers"
                        x-data="scrollTo('teasers')"
-                       class="button button--full">
+                       class="button w-full mb-8">
                         Direkt zu den Angeboten
                     </a>
                 </div>
@@ -27,7 +27,7 @@
                         <p class="hidden lg:block">
                             <a href="#teasers"
                                x-data="scrollTo('teasers')"
-                               class="button button--full">
+                               class="button w-full mb-8">
                                 Direkt zu den Angeboten
                             </a>
                         </p>
diff --git a/public/typo3conf/ext/ep_theme/Resources/Private/Templates/Hotel/DetailEvent.html b/public/typo3conf/ext/ep_theme/Resources/Private/Templates/Hotel/DetailEvent.html
index 9483750a..16561978 100644
--- a/public/typo3conf/ext/ep_theme/Resources/Private/Templates/Hotel/DetailEvent.html
+++ b/public/typo3conf/ext/ep_theme/Resources/Private/Templates/Hotel/DetailEvent.html
@@ -8,7 +8,7 @@
         <f:render partial="Header/Header" arguments="{layout: 8, subheader: hotel.name, header: hotel.headline}"/>
         <div class="grid grid-cols-2 gap-8">
             <div class="col-span-2 md:col-span-1">
-                <f:render partial="ContentSlider" arguments="{id: hotel.uid, images: hotel.images, thumbnails: 0}"/>
+                <f:render partial="ImageGallery" arguments="{id: hotel.uid, images: hotel.images, thumbnails: 0}"/>
             </div>
             <div class="col-span-2 md:col-span-1">
                 {hotel.description -> f:format.html()}
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 171ccabc..281631ad 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
@@ -225,20 +225,20 @@
                 <table class="min-w-full border-collapse">
                     <thead>
                         <tr>
-                            <th class="p-1">
+                            <th class="p-1 text-left">
                                 Termin
                             </th>
-                            <th class="p-1">
+                            <th class="p-1 text-left">
                               <span data-microtip-position="bottom" aria-label="Nächte" role="tooltip">
                                 <svg class="w-4 h-4">
                                     <use href="#icon-bed"></use>
                                 </svg>
                               </span>
                             </th>
-                            <th class="p-1 whitespace-nowrap">
+                            <th class="p-1 text-left whitespace-nowrap">
                                 Preis ab
                             </th>
-                            <th class="p-1">
+                            <th class="p-1 text-left">
                                 inkl.
                             </th>
                             <th class="hidden lg:table-cell"></th>
@@ -249,14 +249,14 @@
                         <tr class="even:bg-gray-200" x-bind:class="{ 'hidden': index > 4 && !showAll }">
                             <td class="px-2 py-1">
                                 <template x-if="bookable && row.available && !row.isHideBookingButton">
-                                    <a class="dates-table__date" href="#"
+                                    <a class="text-ep-primary-light" href="#"
                                        x-on:click.prevent="loadPrices(row.dateUid)"
                                        x-text="row.dateStart + ' - ' + row.dateEnd"></a>
-                                    <div class="hidden-md hidden-lg dates-table__links">
+                                    <div class="md:hidden">
                                         <button x-on:click.prevent="loadPrices(row.dateUid)" class="button button--small">
                                             Details
                                         </button>
-                                        <a x-bind:href="row.bookingUrl" target="_blank" class="button button--small button--action">
+                                        <a x-bind:href="row.bookingUrl" target="_blank" class="button button--small bg-green-500 border-green-500">
                                             Buchen
                                         </a>
                                     </div>
@@ -297,16 +297,21 @@
                                 </div>
                             </td>
                             <td class="px-2 py-1 hidden sm:table-cell">
-                                <button x-show="row.available || row.isHideBookingButton" class="button button--small" x-on:click.prevent="loadPrices(row.dateUid)">
+                                <button x-show="row.available || row.isHideBookingButton" class="button button--small"
+                                        x-on:click.prevent="loadPrices(row.dateUid)">
                                     Details
                                 </button>
-                                <a x-show="row.available && !row.isHideBookingButton" x-bind:href="row.bookingUrl" target="_blank" class="button button--small button--action">
+                                <a x-show="row.available && !row.isHideBookingButton" x-bind:href="row.bookingUrl"
+                                   target="_blank"
+                                   class="button button--small bg-green-500 border-green-500">
                                     Buchen
                                 </a>
-                                <a x-show="row.isHideBookingButton" x-bind:href="uris.travelAlertUrl" class="button button--small button--mute">
+                                <a x-show="row.isHideBookingButton" x-bind:href="uris.travelAlertUrl"
+                                   class="button button--small bg-gray-300">
                                     Reisen-Alert
                                 </a>
-                                <span x-show="!row.available && !row.isHideBookingButton" class="label label-default">
+                                <span x-show="!row.available && !row.isHideBookingButton"
+                                      class="inline-block px-2 mx-1 text-xs text-gray-500">
                                     ausgebucht
                                 </span>
                             </td>
@@ -338,7 +343,16 @@
                 </div>
             </template>
             <template x-for="row in datesRows">
-                <div x-bind:id="'services-' + row.dateUid" x-show="$store.show.modal === $el.id" x-transition x-cloak class="fixed inset-0 w-full h-full z-50">
+                <div x-bind:id="'services-' + row.dateUid"
+                     x-show="$store.show.modal === $el.id"
+                     x-transition:enter="transition duration-200 ease-in-out"
+                     x-transition:enter-start="opacity-0"
+                     x-transition:enter-end="opacity-100"
+                     x-transition:leave="transition duration-200 ease-in-out"
+                     x-transition:leave-start="opacity-100"
+                     x-transition:leave-end="opacity-0"
+                     x-cloak
+                     class="fixed inset-0 w-full h-full z-50">
                     <div class="absolute inset-0 w-full h-full bg-overlay-black" x-on:click="$store.show.modal = null"></div>
                     <div class="absolute top-1/2 left-1/2 transform -translate-xy-1/2 bg-white p-8 shadow w-full max-w-3xl rounded">
                         <div class="flex justify-between border-b border-gray-200 pb-2 mb-4">
@@ -377,13 +391,13 @@
             <table class="min-w-full border-collapse">
                 <thead>
                     <tr>
-                        <th>
+                        <th class="text-left">
                             Zimmertyp
                         </th>
-                        <th>
+                        <th class="text-left">
                             Preis
                         </th>
-                        <th>
+                        <th class="text-left">
                             inkl.
                         </th>
                         <th></th>
@@ -405,7 +419,7 @@
                             </a>
                             <div class="lg:hidden"
                                  x-show="!row.roomAvailable">
-                                <span class="label label-default">
+                                <span class="inline-block px-2 mx-1 text-xs text-gray-500">
                                     ausgebucht
                                 </span>
                             </div>
@@ -442,11 +456,20 @@
                             </button>
                         </td>
                         <td class="hidden lg:table-cell px-2 py-1">
-                            <a class="button button--small button--action" x-show="row.roomAvailable && !row.isHideBookingButton"
-                               x-bind:href="row.bookingUrl" target="_blank">Buchen</a>
-                            <a class="button button--small button--mute" x-show="row.isHideBookingButton"
-                               x-bind:href="uris.travelAlertUrl">Reisen-Alert</a>
-                            <span x-show="!row.roomAvailable && !row.isHideBookingButton" class="label label-default">ausgebucht</span>
+                            <a class="button button--small button--action"
+                               x-show="row.roomAvailable && !row.isHideBookingButton"
+                               x-bind:href="row.bookingUrl" target="_blank">
+                                Buchen
+                            </a>
+                            <a class="button button--small button--mute"
+                               x-show="row.isHideBookingButton"
+                               x-bind:href="uris.travelAlertUrl">
+                                Reisen-Alert
+                            </a>
+                            <span x-show="!row.roomAvailable && !row.isHideBookingButton"
+                                  class="inline-block px-2 mx-1 text-xs text-gray-500">
+                                ausgebucht
+                            </span>
                         </td>
                     </tr>
                 </template>
@@ -454,10 +477,19 @@
             </table>
         </div>
         <template x-for="row in pricesRows">
-            <div x-bind:id="'optional-services-' + row.roomUid" x-show="$store.show.modal === $el.id" x-transition x-cloak class="fixed inset-0 w-full h-full z-50">
+            <div x-bind:id="'optional-services-' + row.roomUid"
+                 x-show="$store.show.modal === $el.id"
+                 x-transition:enter="transition duration-200 ease-in-out"
+                 x-transition:enter-start="opacity-0"
+                 x-transition:enter-end="opacity-100"
+                 x-transition:leave="transition duration-200 ease-in-out"
+                 x-transition:leave-start="opacity-100"
+                 x-transition:leave-end="opacity-0"
+                 x-cloak
+                 class="fixed inset-0 w-full h-full z-50">
                 <div class="absolute inset-0 w-full h-full bg-overlay-black z-25 flex items-center justify-center" x-on:click="$store.show.modal = null"></div>
                 <div class="absolute top-1/2 left-1/2 transform -translate-xy-1/2 bg-white p-8 shadow w-full max-w-3xl h-128 overflow-y-scroll rounded">
-                    <div class="flex justify-between border-b border-gray-200 pb-2 mb-4">
+                    <div class="flex justify-between pb-2 mb-4">
                         <span class="text-2xl font-bold">
                             Optionale Zusatzleistungen
                         </span>
@@ -466,10 +498,10 @@
                         </button>
                     </div>
                     <template x-for="section in row.roomOptionalServices">
-                        <div class="pb-2 border-t border-gray-200 first:border-0">
-                            <div class="font-bold text-xl" x-text="section.label"></div>
+                        <div class="py-2 -mx-1">
+                            <div class="font-bold text-xl px-1" x-text="section.label"></div>
                             <template x-for="optionalService in section.services">
-                                <dl class="flex items-start justify-between mb-0">
+                                <dl class="flex items-start justify-between p-1 hover:bg-gray-200">
                                     <dt class="font-normal" x-text="optionalService.label + ':'"></dt>
                                     <dd class="whitespace-nowrap" x-text="optionalService.price + ' €'"></dd>
                                 </dl>
@@ -480,11 +512,13 @@
             </div>
         </template>
         <template x-if="!singleDate">
-            <p>
-                <button class="button button--small" x-on:click.prevent="tableMode = 'dates'">
-                    <i class="fa fa-undo"></i> zurück zur Terminübersicht
-                </button>
-            </p>
+            <button class="button button--small mb-4"
+                    x-on:click.prevent="tableMode = 'dates'">
+                <svg class="w-4 h-4 text-white">
+                    <use href="#icon-chevron-left"></use>
+                </svg>
+                <span>zurück zur Terminübersicht</span>
+            </button>
         </template>
         <div class="headerbar">
             Inklusivleistungen
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 33d04694..36c52d4c 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
@@ -13,7 +13,7 @@
                 <div class="mb-8 lg:hidden">
                     <a href="#teasers"
                        x-data="scrollTo('teasers')"
-                       class="button button--full">
+                       class="button w-full mb-8">
                         Direkt zu den Angeboten
                     </a>
                 </div>
@@ -28,7 +28,7 @@
                         <p class="hidden lg:block">
                             <a href="#teasers"
                                x-data="scrollTo('teasers')"
-                               class="button button--full">
+                               class="button w-full mb-8">
                                 Direkt zu den Angeboten
                             </a>
                         </p>