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

---
 .../TypoScript/Library/Breadcrumb.typoscript  |  5 +-
 .../Private/Assets/scss/_components.scss      |  1 -
 .../Assets/scss/base/_rte-content.scss        |  2 +-
 .../Assets/scss/components/_buttons.scss      |  3 +-
 .../Assets/scss/components/_tiles.scss        | 47 ---------------
 .../Private/Partials/Disrupter/Large.html     | 10 +---
 .../Partials/Disrupter/LastChance.html        |  8 ++-
 .../Private/Partials/Disrupter/Reminder.html  | 10 ++--
 .../Private/Partials/Disrupter/Small.html     |  6 +-
 .../Private/Partials/Disturber/Large.html     | 12 ++--
 .../Partials/Disturber/LastChance.html        | 14 +++--
 .../Private/Partials/Disturber/Reminder.html  | 12 ++--
 .../Private/Partials/Disturber/Small.html     |  6 +-
 .../Private/Partials/HeaderSliderSmall.html   |  8 +--
 .../Private/Partials/Textmedia/LinkPanel.html | 59 +++++++++----------
 tailwind.config.js                            | 16 ++---
 16 files changed, 85 insertions(+), 134 deletions(-)
 delete mode 100644 public/typo3conf/ext/ep_theme/Resources/Private/Assets/scss/components/_tiles.scss

diff --git a/public/typo3conf/ext/ep_theme/Configuration/TypoScript/Library/Breadcrumb.typoscript b/public/typo3conf/ext/ep_theme/Configuration/TypoScript/Library/Breadcrumb.typoscript
index 7ee93804..145490e2 100644
--- a/public/typo3conf/ext/ep_theme/Configuration/TypoScript/Library/Breadcrumb.typoscript
+++ b/public/typo3conf/ext/ep_theme/Configuration/TypoScript/Library/Breadcrumb.typoscript
@@ -3,12 +3,11 @@ lib.breadcrumb {
     special = rootline
     special.range = 0|-1
     1 = TMENU
-    1.wrap = <div class="hidden md:flex container mb-8 text-sm text-zinc-400">|</div>
+    1.wrap = <div class="hidden md:flex container mb-8 text-sm">|</div>
     1.NO {
         stdWrap.htmlSpecialChars = 1
-        ATagParams = class="text-zinc-400"
         ATagTitle.field = nav_title // title
-        linkWrap = |<span class="text-zinc-400 px-1">/</span>|*||*| |
+        linkWrap = |<span class="px-1">/</span>|*||*| |
         doNotLinkIt = |*| 0 |*| 1
     }
 }
diff --git a/public/typo3conf/ext/ep_theme/Resources/Private/Assets/scss/_components.scss b/public/typo3conf/ext/ep_theme/Resources/Private/Assets/scss/_components.scss
index df105d6e..8f95ef24 100644
--- a/public/typo3conf/ext/ep_theme/Resources/Private/Assets/scss/_components.scss
+++ b/public/typo3conf/ext/ep_theme/Resources/Private/Assets/scss/_components.scss
@@ -10,5 +10,4 @@
     @import "components/misc";
     @import "components/searchbar";
     @import "components/teaser";
-    @import "components/tiles";
 }
diff --git a/public/typo3conf/ext/ep_theme/Resources/Private/Assets/scss/base/_rte-content.scss b/public/typo3conf/ext/ep_theme/Resources/Private/Assets/scss/base/_rte-content.scss
index ca624e8d..35521ede 100644
--- a/public/typo3conf/ext/ep_theme/Resources/Private/Assets/scss/base/_rte-content.scss
+++ b/public/typo3conf/ext/ep_theme/Resources/Private/Assets/scss/base/_rte-content.scss
@@ -22,7 +22,7 @@ p {
 }
 
 a:not(.button):not(.rte-button):not(.rte-button--full) {
-    @apply text-ep-primary-dark sbw:text-sbw-primary-dark;
+    @apply underline text-ep-primary-dark sbw:text-sbw-primary-dark;
 
     .bg-brand-gradient & {
         @apply text-white underline;
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 36452c87..e7e20744 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
@@ -1,7 +1,7 @@
 .button {
     @apply inline-flex items-center justify-center space-x-2 px-4 py-2 md:px-8 cursor-pointer;
     @apply uppercase leading-none text-center;
-    @apply transition-colors outline-none focus:outline-none;
+    @apply transition-colors outline-none;
 
     &--small {
         @apply px-2 py-1 md:px-4 text-xs sm:text-sm;
@@ -20,6 +20,7 @@
     @apply uch:bg-uch-secondary;
     @apply ser:bg-ser-secondary;
     @apply hover:bg-ep-secondary;
+    @apply hover:text-gray-900;
     @apply sbw:hover:bg-sbw-primary-dark;
     @apply snz:hover:bg-snz-primary-dark;
     @apply suz:hover:bg-suz-primary-dark;
diff --git a/public/typo3conf/ext/ep_theme/Resources/Private/Assets/scss/components/_tiles.scss b/public/typo3conf/ext/ep_theme/Resources/Private/Assets/scss/components/_tiles.scss
deleted file mode 100644
index 6424e150..00000000
--- a/public/typo3conf/ext/ep_theme/Resources/Private/Assets/scss/components/_tiles.scss
+++ /dev/null
@@ -1,47 +0,0 @@
-.tiles {
-    @apply container lg:max-w-screen-2xl;
-}
-
-.tiles__grid {
-    @apply grid grid-cols-1 lg:grid-cols-12 lg:grid-rows-3 lg:grid-flow-col gap-4 lg:gap-1;
-    @apply lg:h-128;
-    @apply bg-white;
-}
-
-.tiles__tile {
-    @apply bg-cover bg-center h-32 lg:h-auto;
-}
-
-.tiles__link {
-    @apply relative w-full h-full flex items-center justify-center;
-    @apply leading-none text-white hover:text-white text-2xl font-bold uppercase text-shadow break-normal;
-
-    &:before {
-        @apply block absolute top-0 left-0 inset-0 w-full h-full z-20;
-        @apply border-0 border-white;
-        @apply transition-all;
-        content: "";
-    }
-
-    &:hover:before {
-        @apply mt-4 ml-4;
-        @apply border-2;
-        width: calc(100% - theme('spacing.8'));
-        height: calc(100% - theme('spacing.8'));
-    }
-
-    &:after {
-        @apply block absolute top-0 left-0 inset-0 w-full h-full z-10;
-        @apply transition-all;
-        content:"";
-    }
-
-    &:hover:after {
-        @apply sbw:bg-sbw-overlay/55 uch:bg-uch-overlay/55;
-    }
-}
-
-.tiles__label {
-    @apply block relative z-20;
-    @apply text-center;
-}
diff --git a/public/typo3conf/ext/ep_theme/Resources/Private/Partials/Disrupter/Large.html b/public/typo3conf/ext/ep_theme/Resources/Private/Partials/Disrupter/Large.html
index 98eabcf1..aed2eb21 100644
--- a/public/typo3conf/ext/ep_theme/Resources/Private/Partials/Disrupter/Large.html
+++ b/public/typo3conf/ext/ep_theme/Resources/Private/Partials/Disrupter/Large.html
@@ -9,7 +9,7 @@
                       section="Top1"
                       arguments="{classes: 'hidden md:block -translate-y-2 {f:if(condition: \'{data.tx_eptheme_background} == 1 || {data.tx_eptheme_background} == 3\', then: \'text-ep-primary-bg\', else: \'text-white\')}'}"/>
         </f:if>
-        <div class="relative container grid grid-cols-2 gap-8 py-4" data-rte-content>
+        <div class="relative container grid grid-cols-2 gap-8 py-4">
             <div class="col-span-2 md:col-span-1">
                 <div class="relative max-w-md mx-auto mb-8">
                     <f:if condition="{image}">
@@ -36,12 +36,8 @@
                 </div>
             </div>
             <div class="col-span-2 md:col-span-1">
-            <span class="headline--secondary font-light text-white">
-                {data.subheadline}
-            </span>
-                <span class="headline--secondary uppercase font-light text-white mb-4">
-                {data.headline}
-            </span>
+                <span class="headline--secondary font-light text-white">{data.subheadline}</span>
+                <span class="headline--secondary uppercase font-light text-white mb-4">{data.headline}</span>
                 <div class="text-white" data-rte-content>
                     {data.bodytext -> f:format.html()}
                 </div>
diff --git a/public/typo3conf/ext/ep_theme/Resources/Private/Partials/Disrupter/LastChance.html b/public/typo3conf/ext/ep_theme/Resources/Private/Partials/Disrupter/LastChance.html
index 769f4193..a76eb08a 100644
--- a/public/typo3conf/ext/ep_theme/Resources/Private/Partials/Disrupter/LastChance.html
+++ b/public/typo3conf/ext/ep_theme/Resources/Private/Partials/Disrupter/LastChance.html
@@ -8,8 +8,12 @@
                   section="Top1"
                   arguments="{classes: 'hidden md:block -translate-y-2 {f:if(condition: \'{data.tx_eptheme_background} == 1 || {data.tx_eptheme_background} == 3\', then: \'text-ep-primary-bg\', else: \'text-white\')}'}"/>
         <div class="max-w-screen-lg mx-auto" data-rte-content>
-            <div>{data.headline}</div>
-            <div>{data.text -> f:format.html()}</div>
+            <div>
+                {data.headline}
+            </div>
+            <div>
+                {data.text -> f:format.html()}
+            </div>
             <div>
                 {data.flexForm.buttons -> v:iterator.first() -> v:variable.set(name: 'button')}
                 <a href="{f:uri.typolink(parameter: button.container.link)}" class="btn btn-info">
diff --git a/public/typo3conf/ext/ep_theme/Resources/Private/Partials/Disrupter/Reminder.html b/public/typo3conf/ext/ep_theme/Resources/Private/Partials/Disrupter/Reminder.html
index cb391533..20f8a8a4 100644
--- a/public/typo3conf/ext/ep_theme/Resources/Private/Partials/Disrupter/Reminder.html
+++ b/public/typo3conf/ext/ep_theme/Resources/Private/Partials/Disrupter/Reminder.html
@@ -4,8 +4,10 @@
       xmlns:f="http://typo3.org/ns/fluid/ViewHelpers">
 
     <f:alias map="{button: data.flexForm.buttons.0}">
-        <div class="container-fluid ep-disturber-reminder" data-rte-content>
-            <div>{data.headline}</div>
+        <div class="container-fluid ep-disturber-reminder">
+            <div data-rte-content>
+                {data.headline}
+            </div>
             <div class="col-md-6">
                 <a href="{f:uri.typolink(parameter: button.container.link)}" title="{button.container.label -> f:format.raw()}">
                     <f:if condition="{image}">
@@ -17,8 +19,8 @@
                     </f:if>
                 </a>
             </div>
-            <div class="col-md-6 ">
-                <div>{data.text -> f:format.html()}</div>
+            <div class="col-md-6" data-rte-content>
+                {data.text -> f:format.html()}
             </div>
             <a href="{f:uri.typolink(parameter: button.container.link)}" class="btn btn-info">
                 {button.container.label -> f:format.raw()}
diff --git a/public/typo3conf/ext/ep_theme/Resources/Private/Partials/Disrupter/Small.html b/public/typo3conf/ext/ep_theme/Resources/Private/Partials/Disrupter/Small.html
index 5e7d5371..f6302e07 100644
--- a/public/typo3conf/ext/ep_theme/Resources/Private/Partials/Disrupter/Small.html
+++ b/public/typo3conf/ext/ep_theme/Resources/Private/Partials/Disrupter/Small.html
@@ -7,7 +7,7 @@
         <f:render partial="Disrupter/Outlines"
                   section="Top1"
                   arguments="{classes: 'hidden md:block -translate-y-2 {f:if(condition: \'{background} == 1 || {background} == 3\', then: \'text-ep-primary-bg\', else: \'text-white\')}'}"/>
-        <div class="max-w-screen-lg mx-auto py-4" data-rte-content>
+        <div class="max-w-screen-lg mx-auto py-4">
             <div class="md:flex md:items-start py-4">
                 <div class="px-16 pb-4 md:px-4 md:pb-0 md:w-1/6">
                     <f:if condition="{image}">
@@ -20,9 +20,7 @@
                     </f:if>
                 </div>
                 <div class="px-16 md:px-4 md:w-5/6 md:pl-8 text-center text-white md:text-left" data-rte-content>
-                <span class="headline--3 text-white uppercase">
-                    {data.headline}
-                </span>
+                    <span class="headline--3 text-white uppercase">{data.headline}</span>
                     {data.text -> f:format.html()}
                     <div class="flex flex-col space-y-4 md:flex-row md:items-center md:space-y-0 md:space-x-4">
                         <f:for each="{data.flexForm.buttons}" as="button" iteration="iteration">
diff --git a/public/typo3conf/ext/ep_theme/Resources/Private/Partials/Disturber/Large.html b/public/typo3conf/ext/ep_theme/Resources/Private/Partials/Disturber/Large.html
index 012e8a02..f2ce4681 100644
--- a/public/typo3conf/ext/ep_theme/Resources/Private/Partials/Disturber/Large.html
+++ b/public/typo3conf/ext/ep_theme/Resources/Private/Partials/Disturber/Large.html
@@ -10,7 +10,7 @@
                       section="Top1"
                       arguments="{classes: 'hidden md:block -translate-y-2 {f:if(condition: \'{background} == 1 || {background} == 3\', then: \'text-ep-primary-bg\', else: \'text-white\')}'}"/>
         </f:if>
-        <div class="relative container grid grid-cols-2 gap-8 py-8" data-rte-content>
+        <div class="relative container grid grid-cols-2 gap-8 py-8">
             <div class="col-span-2 md:col-span-1">
                 <div class="relative max-w-md mx-auto mb-8">
                     <f:if condition="{teaserImage}">
@@ -36,13 +36,9 @@
                     </a>
                 </div>
             </div>
-            <div class="col-span-2 md:col-span-1">
-            <span class="headline--secondary font-light text-white">
-                {data.subheader}
-            </span>
-                <span class="headline--secondary uppercase font-light text-white mb-4">
-                {data.header}
-            </span>
+            <div class="col-span-2 md:col-span-1" data-rte-content>
+                <span class="headline--secondary font-light text-white">{data.subheader}</span>
+                <span class="headline--secondary uppercase font-light text-white mb-4">{data.header}</span>
                 <div class="text-white" data-rte-content>
                     {data.bodytext -> f:format.html()}
                 </div>
diff --git a/public/typo3conf/ext/ep_theme/Resources/Private/Partials/Disturber/LastChance.html b/public/typo3conf/ext/ep_theme/Resources/Private/Partials/Disturber/LastChance.html
index d3b4cb3c..4cce0653 100644
--- a/public/typo3conf/ext/ep_theme/Resources/Private/Partials/Disturber/LastChance.html
+++ b/public/typo3conf/ext/ep_theme/Resources/Private/Partials/Disturber/LastChance.html
@@ -3,12 +3,18 @@
       xmlns:v="http://typo3.org/ns/FluidTYPO3/Vhs/ViewHelpers"
       xmlns:f="http://typo3.org/ns/fluid/ViewHelpers">
 
-    <div class="container-fluid ep-disturber-last-chance" data-rte-content>
-        <div>{data.header}</div>
-        <div>{data.bodytext -> f:format.html()}</div>
+    <div class="container-fluid ep-disturber-last-chance">
+        <div data-rte-content>
+            {data.header}
+        </div>
+        <div data-rte-content>
+            {data.bodytext -> f:format.html()}
+        </div>
         <div>
             {data.flexForm.buttons -> v:iterator.first() -> v:variable.set(name: 'button')}
-            <a href="{f:uri.typolink(parameter: button.container.link)}" class="btn btn-info">{button.container.label -> f:format.raw()}</a>
+            <a href="{f:uri.typolink(parameter: button.container.link)}" class="btn btn-info">
+                {button.container.label -> f:format.raw()}
+            </a>
         </div>
     </div>
 
diff --git a/public/typo3conf/ext/ep_theme/Resources/Private/Partials/Disturber/Reminder.html b/public/typo3conf/ext/ep_theme/Resources/Private/Partials/Disturber/Reminder.html
index 7cad0d86..9bdc5b85 100644
--- a/public/typo3conf/ext/ep_theme/Resources/Private/Partials/Disturber/Reminder.html
+++ b/public/typo3conf/ext/ep_theme/Resources/Private/Partials/Disturber/Reminder.html
@@ -4,8 +4,10 @@
       xmlns:f="http://typo3.org/ns/fluid/ViewHelpers">
 
     <f:alias map="{button: data.flexForm.buttons.0}">
-        <div class="container-fluid ep-disturber-reminder" data-rte-content>
-            <div>{data.header}</div>
+        <div class="container-fluid ep-disturber-reminder">
+            <div data-rte-content>
+                {data.header}
+            </div>
             <div class="col-md-6">
                 <a href="{f:uri.typolink(parameter: button.container.link)}" title="{button.container.label -> f:format.raw()}">
                     <f:if condition="{teaserImage}">
@@ -17,8 +19,10 @@
                     </f:if>
                 </a>
             </div>
-            <div class="col-md-6 ">
-                <div>{data.bodytext -> f:format.html()}</div>
+            <div class="col-md-6" data-rte-content>
+                <div>
+                    {data.bodytext -> f:format.html()}
+                </div>
             </div>
             <a href="{f:uri.typolink(parameter: button.container.link)}" class="btn btn-info">
                 {button.container.label -> f:format.raw()}
diff --git a/public/typo3conf/ext/ep_theme/Resources/Private/Partials/Disturber/Small.html b/public/typo3conf/ext/ep_theme/Resources/Private/Partials/Disturber/Small.html
index 6c95c9bf..51ec58e6 100644
--- a/public/typo3conf/ext/ep_theme/Resources/Private/Partials/Disturber/Small.html
+++ b/public/typo3conf/ext/ep_theme/Resources/Private/Partials/Disturber/Small.html
@@ -7,7 +7,7 @@
         <f:render partial="Disrupter/Outlines"
                   section="Top1"
                   arguments="{classes: 'hidden md:block -translate-y-2 {f:if(condition: \'{data.tx_eptheme_background} == 1 || {data.tx_eptheme_background} == 3\', then: \'text-ep-primary-bg\', else: \'text-white\')}'}"/>
-        <div class="max-w-screen-lg mx-auto" data-rte-content>
+        <div class="max-w-screen-lg mx-auto">
             <div class="md:flex md:items-start py-4">
                 <div class="px-16 pb-4 md:px-4 md:pb-0 md:w-1/6">
                     <f:if condition="{teaserImage}">
@@ -20,9 +20,7 @@
                     </f:if>
                 </div>
                 <div class="px-16 md:px-4 md:w-5/6 md:pl-8 text-center text-white md:text-left" data-rte-content>
-                    <span class="headline--3 text-white uppercase">
-                        {data.header}
-                    </span>
+                    <span class="headline--3 text-white uppercase">{data.header}</span>
                     {data.bodytext -> f:format.html()}
                     <div class="flex flex-col space-y-4 md:flex-row md:items-center md:space-y-0 md:space-x-4">
                         <f:for each="{data.flexForm.buttons}" as="button" iteration="iteration">
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 203f4402..a1b96f33 100644
--- a/public/typo3conf/ext/ep_theme/Resources/Private/Partials/HeaderSliderSmall.html
+++ b/public/typo3conf/ext/ep_theme/Resources/Private/Partials/HeaderSliderSmall.html
@@ -20,12 +20,12 @@
             <div class="absolute bottom-0 left-0 inset-x-0 px-8 md:bottom-1/2 md:translate-y-1/2">
                 <div class="lg:container">
                     <div class="p-4 bg-ep-primary-dark/80 sbw:bg-sbw-primary/80 snz:bg-snz-primary/80 suz:bg-suz-primary/80 uch:bg-uch-primary/80 ser:bg-ser-primary/80 mb-4 md:p-8 md:max-w-2xl">
-                        <span class="block text-xl md:text-2xl text-white uppercase">
+                        <div class="text-xl md:text-2xl text-white uppercase">
                             {slide.headline}
-                        </span>
-                        <span class="block text-2xl md:text-3xl lg:text-4xl text-white uppercase">
+                        </div>
+                        <div class="text-2xl md:text-3xl lg:text-4xl text-white uppercase">
                             {slide.subline}
-                        </span>
+                        </div>
                         <f:if condition="{slide.button}">
                             <f:link.typolink parameter="{slide.page_uid}"
                                              class="button bg-button inline-block">
diff --git a/public/typo3conf/ext/ep_theme/Resources/Private/Partials/Textmedia/LinkPanel.html b/public/typo3conf/ext/ep_theme/Resources/Private/Partials/Textmedia/LinkPanel.html
index dd21aba5..bbf3d855 100644
--- a/public/typo3conf/ext/ep_theme/Resources/Private/Partials/Textmedia/LinkPanel.html
+++ b/public/typo3conf/ext/ep_theme/Resources/Private/Partials/Textmedia/LinkPanel.html
@@ -5,61 +5,56 @@
       xmlns:v="http://typo3.org/ns/FluidTYPO3/Vhs/ViewHelpers">
 
 	<f:section name="Content">
-		<div class="tiles">
-            <div class="tiles__grid">
+		<div class="container lg:max-w-screen-2xl">
+            <div class="grid grid-cols-1 lg:grid-cols-12 lg:grid-rows-3 lg:grid-flow-col gap-4 lg:gap-1 lg:h-128 bg-white">
                 <f:if condition="{images.0}">
-                    <div class="tiles__tile lg:col-span-2 lg:row-span-1"
-                         style="background-image:url('{f:uri.image(image: images.0)}');">
-                        <f:link.typolink parameter="{images.0.link}"
-                                         class="tiles__link">
-                            <span class="tiles__label">
+                    <div class="relative h-32 lg:h-auto lg:col-span-2 lg:row-span-1">
+                        <f:link.typolink parameter="{images.0.link}" class="absolute inset-0 z-20 flex items-center justify-center">
+                            <div class="inline-block px-4 py-2 text-center leading-none text-white hover:text-white text-2xl font-bold uppercase break-normal sbw:bg-sbw-secondary/90 uch:bg-uch-secondary/90 snz:bg-snz-secondary/90">
                                 {images.0.title -> f:format.raw()}
-                            </span>
+                            </div>
                         </f:link.typolink>
+                        <f:image image="{images.0}" alt="{images.0.alternative}" class="w-full h-full object-cover" />
                     </div>
                 </f:if>
                 <f:if condition="{images.1}">
-                    <div class="tiles__tile lg:col-span-2 lg:row-span-1"
-                         style="background-image:url('{f:uri.image(image: images.1)}');">
-                        <f:link.typolink parameter="{images.1.link}"
-                                         class="tiles__link">
-                            <span class="tiles__label">
+                    <div class="relative h-32 lg:h-auto lg:col-span-2 lg:row-span-1">
+                        <f:link.typolink parameter="{images.1.link}" class="absolute inset-0 z-20 flex items-center justify-center">
+                            <div class="inline-block px-4 py-2 text-center leading-none text-white hover:text-white text-2xl font-bold uppercase break-normal sbw:bg-sbw-secondary/90 uch:bg-uch-secondary/90 snz:bg-snz-secondary/90">
                                 {images.1.title -> f:format.raw()}
-                            </span>
+                            </div>
                         </f:link.typolink>
+                        <f:image image="{images.1}" alt="{images.1.alternative}" class="w-full h-full object-cover" />
                     </div>
                 </f:if>
                 <f:if condition="{images.4}">
-                    <div class="tiles__tile lg:col-span-12 lg:row-span-1"
-                         style="background-image:url('{f:uri.image(image: images.4)}');">
-                        <f:link.typolink parameter="{images.4.link}"
-                                         class="tiles__link">
-                            <span class="tiles__label">
+                    <div class="relative h-32 lg:h-auto lg:col-span-12 lg:row-span-1">
+                        <f:link.typolink parameter="{images.4.link}" class="absolute inset-0 z-20 flex items-center justify-center">
+                            <div class="inline-block px-4 py-2 text-center leading-none text-white hover:text-white text-2xl font-bold uppercase break-normal sbw:bg-sbw-secondary/90 uch:bg-uch-secondary/90 snz:bg-snz-secondary/90">
                                 {images.4.title -> f:format.raw()}
-                            </span>
+                            </div>
                         </f:link.typolink>
+                        <f:image image="{images.4}" alt="{images.4.alternative}" class="w-full h-full object-cover" />
                     </div>
                 </f:if>
                 <f:if condition="{images.2}">
-                    <div class="tiles__tile lg:col-span-4 lg:row-span-2"
-                         style="background-image:url('{f:uri.image(image: images.2)}');">
-                        <f:link.typolink parameter="{images.2.link}"
-                                         class="tiles__link">
-                            <span class="tiles__label">
+                    <div class="relative h-32 lg:h-auto lg:col-span-4 lg:row-span-2">
+                        <f:link.typolink parameter="{images.2.link}" class="absolute inset-0 z-20 flex items-center justify-center">
+                            <div class="inline-block px-4 py-2 text-center leading-none text-white hover:text-white text-2xl font-bold uppercase break-normal sbw:bg-sbw-secondary/90 uch:bg-uch-secondary/90 snz:bg-snz-secondary/90">
                                 {images.2.title -> f:format.raw()}
-                            </span>
+                            </div>
                         </f:link.typolink>
+                        <f:image image="{images.2}" alt="{images.2.alternative}" class="w-full h-full object-cover" />
                     </div>
                 </f:if>
                 <f:if condition="{images.3}">
-                    <div class="tiles__tile lg:col-span-6 lg:row-span-2"
-                         style="background-image:url('{f:uri.image(image: images.3)}');">
-                        <f:link.typolink parameter="{images.3.link}"
-                                         class="tiles__link">
-                            <span class="tiles__label">
+                    <div class="relative h-32 lg:h-auto lg:col-span-6 lg:row-span-2">
+                        <f:link.typolink parameter="{images.3.link}" class="absolute inset-0 z-20 w-full h-full flex items-center justify-center">
+                            <div class="inline-block px-4 py-2 text-center leading-none text-white hover:text-white text-2xl font-bold uppercase break-normal sbw:bg-sbw-secondary/90 uch:bg-uch-secondary/90 snz:bg-snz-secondary/90">
                                 {images.3.title -> f:format.raw()}
-                            </span>
+                            </div>
                         </f:link.typolink>
+                        <f:image image="{images.3}" alt="{images.3.alternative}" class="w-full h-full object-cover" />
                     </div>
                 </f:if>
             </div>
diff --git a/tailwind.config.js b/tailwind.config.js
index 91c01d77..21bbb812 100644
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -71,15 +71,15 @@ module.exports = {
                     primary: '#3d8ccb',
                     secondary: '#f9c700',
                     'primary-bg': '#ebf3fa',
-                    'primary-light': '#0080ff',
+                    'primary-light': '#0070E0',
                     'primary-medium': '#165883',
                     'primary-dark': '#18527b',
                     pink: '#fa1a8c',
                 },
                 sbw: {
-                    primary: '#f0bc44',
-                    secondary: '#ee525a',
-                    'primary-dark': '#c7a20c',
+                    primary: '#B3820F',
+                    secondary: '#E91C26',
+                    'primary-dark': '#8D7207',
                     overlay: '#c20000',
                 },
                 snz: {
@@ -88,14 +88,14 @@ module.exports = {
                     'primary-dark': '#82c3c6',
                 },
                 uch: {
-                    primary: '#a6c62c',
+                    primary: '#677A1A',
                     secondary: '#19a3dc',
-                    'primary-dark': '#a6c62c',
-                    overlay: '#a6c62c',
+                    'primary-dark': '#677A1A',
+                    overlay: '#677A1A',
                 },
                 ser: {
                     primary: '#006fb6',
-                    secondary: '#e85243',
+                    secondary: '#DE2C1B',
                     'primary-light': '#04A4CC',
                 },
                 suz: {