diff --git a/public/typo3conf/ext/ep_theme/Configuration/TCA/tx_eptheme_domain_model_slide.php b/public/typo3conf/ext/ep_theme/Configuration/TCA/tx_eptheme_domain_model_slide.php
index f500f2ff..feb6982d 100644
--- a/public/typo3conf/ext/ep_theme/Configuration/TCA/tx_eptheme_domain_model_slide.php
+++ b/public/typo3conf/ext/ep_theme/Configuration/TCA/tx_eptheme_domain_model_slide.php
@@ -196,15 +196,15 @@ return [
                                                     'value' => 1.79069767,
                                                 ],
                                                 'sliderProductHeader' => [
-                                                    'title' => 'Slider Produkt Header',
+                                                    'title' => 'Slider Produkt-Header',
                                                     'value' => 1.625,
                                                 ],
                                                 'sliderPageHeader' => [
-                                                    'title' => 'Slider Seiten Header',
+                                                    'title' => 'Slider Seiten-Header',
                                                     'value' => 3.805,
                                                 ],
                                                 'sliderPageHeaderHome' => [
-                                                    'title' => 'Slider Seiten Header Startseite',
+                                                    'title' => 'Slider Seiten-Header Startseite',
                                                     'value' => 2.342,
                                                 ],
                                                 'free' => [
@@ -213,6 +213,19 @@ return [
                                                 ],
                                             ],
                                         ],
+                                        'mobile' => [
+                                            'title' => 'Mobile',
+                                            'allowedAspectRatios' => [
+                                                'sliderPageHeader' => [
+                                                    'title' => 'Slider Seiten-Header',
+                                                    'value' => 1,
+                                                ],
+                                                'free' => [
+                                                    'title' => 'Frei',
+                                                    'value' => 'NaN',
+                                                ],
+                                            ],
+                                        ],
                                     ],
                                 ],
                             ],
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 f8d69be8..3366134f 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
@@ -1,23 +1,5 @@
 .herounit {
     @apply relative w-full overflow-hidden;
-    height: 400px;
-    @screen md {
-        height: 430px;
-    }
-    @screen lg {
-        @apply container-wide;
-        height: 580px;
-    }
-    &--event {
-        @apply h-auto;
-    }
-}
-
-.herounit__image {
-    height: 300px;
-    @screen md {
-        @apply h-full;
-    }
 }
 
 .herounit__badge {
@@ -48,39 +30,5 @@
             top: 75px;
             right: 20%;
         }
-
-        .herounit--event & {
-            width: 100px;
-            height: 100px;
-            top: 2px;
-            right: 8px;
-            left: auto;
-            z-index: 10;
-
-            .custom-badge__title {
-                font-size: 12px;
-            }
-            .custom-badge__subtitle {
-                font-size: 10px;
-            }
-
-            @screen md {
-                width: 200px;
-                height: 200px;
-
-                .custom-badge__title {
-                    font-size: 24px;
-                }
-                .custom-badge__subtitle {
-                    font-size: 18px;
-                }
-            }
-
-            @screen lg {
-                display: block;
-                top: 180px;
-                right: 20%;
-            }
-        }
     }
 }
diff --git a/public/typo3conf/ext/ep_theme/Resources/Private/Partials/EventHero.html b/public/typo3conf/ext/ep_theme/Resources/Private/Partials/EventHero.html
index dc22dec2..c8ffc7e1 100644
--- a/public/typo3conf/ext/ep_theme/Resources/Private/Partials/EventHero.html
+++ b/public/typo3conf/ext/ep_theme/Resources/Private/Partials/EventHero.html
@@ -3,61 +3,61 @@
       xmlns:f="http://typo3.org/ns/fluid/ViewHelpers">
 
     <div class="relative max-w-screen-2xl mx-auto">
-        <div class="absolute bottom-0 left-0 inset-x-0 py-8 sbw:bg-sbw-overlay-secondary">
-            <div class="max-w-screen-md mx-auto px-4 md:px-0 flex">
-                <div class="sbw:bg-sbw-primary hidden md:flex flex-col justify-center">
-                    <div class="text-white font-extrabold text-5xl flex-1 flex flex-col justify-around items-center text-center leading-none py-2 px-16">
-                        <span>{settings.eventDateDayFrom -> f:format.raw()}</span>
-                        <span>-</span>
-                        <span>{settings.eventDateDayTo -> f:format.raw()}</span>
+        <div class="absolute bottom-0 left-0 inset-x-0">
+            <div class="py-8 {ep:themeClasses(classes: '{sbw: \'bg-sbw-overlay-secondary\', snz: \'bg-snz-primary-50\', uch: \'bg-uch-primary-50\'}', key: settings.themekey)}">
+                <div class="max-w-screen-md mx-auto px-4 md:px-0 flex">
+                    <div class="hidden sm:flex flex-col justify-center {ep:themeClasses(classes: '{sbw: \'bg-sbw-primary\', snz: \'bg-snz-secondary\', uch: \'bg-uch-secondary\'}', key: settings.themekey)}">
+                        <div class="text-white font-extrabold text-3xl lg:text-5xl flex-1 flex flex-col justify-around items-center text-center leading-none py-2 px-8 md:px-16">
+                            <span>{settings.eventDateDayFrom -> f:format.raw()}</span>
+                            <span>-</span>
+                            <span>{settings.eventDateDayTo -> f:format.raw()}</span>
+                        </div>
+                        <div class="w-full px-4 bg-white text-center sbw:text-sbw-primary p-2 whitespace-nowrap text-xl md:text-2xl uppercase font-bold leading-tight">
+                            {settings.eventDateMonth -> f:format.raw()}
+                        </div>
                     </div>
-                    <div class="w-full px-4 bg-white text-center sbw:text-sbw-primary p-2 whitespace-nowrap text-2xl uppercase font-bold leading-tight">
-                        {settings.eventDateMonth -> f:format.raw()}
+                    <div class="text-white uppercase text-3xl sm:text-5xl lg:text-7xl text-right sm:text-left font-extrabold px-4 md:px-8">
+                        {settings.eventHeroClaim -> f:format.raw()}
+                    </div>
+                    <div class="text-white text-xl lg:text-2xl font-light border-l-4 md:border-l-8 border-white pl-4">
+                        {settings.eventHeroDescription -> f:format.raw()}
                     </div>
                 </div>
-                <div class="text-white uppercase text-7xl text-right md:text-left font-extrabold pr-8 md:px-8">
-                    {settings.eventHeroClaim -> f:format.raw()}
-                </div>
-                <div class="text-white text-2xl font-light border-l-8 border-white pl-2">
-                    {settings.eventHeroDescription -> f:format.raw()}
-                </div>
+            </div>
+            <div class="sm:hidden text-white text-2xl uppercase text-center leading-none py-4 {ep:themeClasses(classes: '{sbw: \'bg-sbw-secondary\', snz: \'bg-snz-primary\', uch: \'bg-uch-primary\'}', key: settings.themekey)}">
+                {settings.eventDateDayFrom -> f:format.raw()} - {settings.eventDateDayTo -> f:format.raw()} {settings.eventDateMonth -> f:format.raw()}
+
             </div>
         </div>
         <f:alias map="{image: slide.image.0}">
             <f:if condition="{image}">
-                <f:then>
-                    <picture>
-                        <source srcset="{f:uri.image(image: image, width: '1370')}" media="(min-width: 768px)">
-                        <source srcset="{f:uri.image(image: image, height: '320')}" media="(max-width: 767px)">
-                        <img class="block w-full h-full object-cover"
-                             src="{f:uri.image(image: image, height: '320')}"
-                             alt="{image.alternative}">
-                    </picture>
-                </f:then>
-                <f:else>
-                    <img src="https://placehold.it/1370x700" alt="">
-                </f:else>
+                <picture>
+                    <source srcset="{f:uri.image(image: image, width: '1560')}" media="(min-width: 1280px)">
+                    <source srcset="{f:uri.image(image: image, width: '1280')}" media="(min-width: 768px)">
+                    <source srcset="{f:uri.image(image: image, height: '1024', cropVariant: 'mobile')}" media="(max-width: 767px)">
+                    <img class="block w-full h-full object-cover"
+                         src="{f:uri.image(image: image, height: '1024', cropVariant: 'mobile')}"
+                         alt="{image.alternative}">
+                </picture>
             </f:if>
         </f:alias>
-        <f:comment><!--
         <f:if condition="{badge}">
             <f:alias map="{badgeData: badge.0.data}">
                 <f:link.typolink parameter="{badgeData.link}">
-                    <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">
-                            <circle id="bgouter" cx="100" cy="100" r="100"/>
-                            <circle id="bginner" cx="100" cy="100" r="70"/>
+                    <div class="absolute top-0 right-0 mt-8 mr-4">
+                        <svg viewBox="0 0 200 200"
+                             class="w-40 h-40">
+                            <circle id="bgouter" cx="100" cy="100" r="100" fill="currentColor" class="{ep:themeClasses(classes: '{sbw: \'text-sbw-primary-50\', snz: \'text-snz-primary-50\', uch: \'text-uch-primary-50\'}', key: settings.themekey)}"/>
+                            <circle id="bginner" cx="100" cy="100" r="70" fill="currentColor" class="{ep:themeClasses(classes: '{sbw: \'text-sbw-primary\', snz: \'text-snz-primary\', uch: \'text-uch-primary\'}', key: settings.themekey)}"/>
                         </svg>
-                        <div class="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-1/2 left-1/2 transform -translate-xy-1/2 flex flex-col items-center justify-around">
+                            <span class="text-white uppercase font-extrabold text-center leading-tight">{badgeData.title -> f:format.raw()}</span>
+                            <span class="text-white uppercase text-center leading-tight">{badgeData.subtitle -> f:format.raw()}</span>
                         </div>
                     </div>
                 </f:link.typolink>
             </f:alias>
         </f:if>
-        --></f:comment>
         <f:comment><!--
         <f:if condition="{settings.eventAddon}">
             <f:link.typolink parameter="{settings.eventAddon.link}" class="{settings.eventAddon.class}"
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 6f2e5d42..650f4d2e 100644
--- a/public/typo3conf/ext/ep_theme/Resources/Private/Partials/HeaderSlider.html
+++ b/public/typo3conf/ext/ep_theme/Resources/Private/Partials/HeaderSlider.html
@@ -14,9 +14,9 @@
                                 <f:if condition="{image}">
                                     <div class="herounit__image">
                                         <picture class="w-full h-full">
-                                            <source srcset="{f:uri.image(image: image, width: '1370', cropVariant: 'sliderPageHeaderHome')}" media="(min-width: 768px)">
-                                            <source srcset="{f:uri.image(image: image, height: '320', cropVariant: 'sliderPageHeaderHome')}" media="(max-width: 767px)">
-                                            <f:image image="{image}" height="320" class="w-full h-full object-cover" alt="{image.alternative}"/>
+                                            <source srcset="{f:uri.image(image: image, width: '1370')}" media="(min-width: 768px)">
+                                            <source srcset="{f:uri.image(image: image, height: '640', cropVariant: 'mobile')}" media="(max-width: 767px)">
+                                            <f:image image="{image}" cropVariant="mobile" height="640" class="w-full h-auto" alt="{image.alternative}"/>
                                         </picture>
                                     </div>
                                 </f:if>