From f4bf95267d6f66788e4836934098489ae4c8c40b Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Bjo=CC=88rn=20Fromme?= <fromme@dreipunktnull.com>
Date: Wed, 22 Dec 2021 10:34:15 +0100
Subject: [PATCH] Improve filterpanel and searchresult layout

---
 .../js/controllers/search_controller.js       |   1 +
 .../Resources/Private/Partials/Icons.html     |   4 +-
 .../Private/Partials/Search/FilterPanel.html  | 109 ++++++++----------
 .../Private/Partials/Search/Main.html         |   5 +-
 .../Private/Partials/Search/Result.html       |   8 +-
 .../Private/Templates/Searchbar/Index.html    |   2 +-
 tailwind.config.js                            |   1 +
 7 files changed, 59 insertions(+), 71 deletions(-)

diff --git a/public/typo3conf/ext/ep_theme/Resources/Private/Assets/js/controllers/search_controller.js b/public/typo3conf/ext/ep_theme/Resources/Private/Assets/js/controllers/search_controller.js
index 095db01a..54846291 100644
--- a/public/typo3conf/ext/ep_theme/Resources/Private/Assets/js/controllers/search_controller.js
+++ b/public/typo3conf/ext/ep_theme/Resources/Private/Assets/js/controllers/search_controller.js
@@ -40,6 +40,7 @@ export default class extends Controller {
             .then(this.parseHTML)
             .then(html => {
                 this.resultsContainerTarget.innerHTML = html
+                window.scroll({ top: 0, left: 0, behavior: 'smooth' })
             })
             .finally(() => {
                 this.loadingValue = false
diff --git a/public/typo3conf/ext/ep_theme/Resources/Private/Partials/Icons.html b/public/typo3conf/ext/ep_theme/Resources/Private/Partials/Icons.html
index 49540a2a..7e1cac24 100644
--- a/public/typo3conf/ext/ep_theme/Resources/Private/Partials/Icons.html
+++ b/public/typo3conf/ext/ep_theme/Resources/Private/Partials/Icons.html
@@ -32,15 +32,13 @@
     <symbol id="icon-ski" fill="currentColor" stroke="none" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><!-- Font Awesome Pro 5.15.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) --><path d="M432 96c26.5 0 48-21.5 48-48S458.5 0 432 0s-48 21.5-48 48 21.5 48 48 48zm-312-4.4l-11.5 22.5c14.4 7.3 31.1 4.9 42.8-4.8L284 175.5l61.1-24.4 14.1 42.3c3.4 10.1 10.5 18.3 20.1 23.1l58.1 29c11.9 6 26.3 1.1 32.2-10.7 5.9-11.9 1.1-26.3-10.8-32.2L403.6 175l-18.1-54.4c-4.9-14.6-15.6-26.6-29.6-33.1-14-6.5-30.1-6.9-44.3-1.2l-74.5 29.8-72.2-35.8c.3-14.5-7.2-28.5-20.9-35.6l-11.1 21.7h-.3l-34.4-7c-1.8-.4-3.7.2-5 1.7-1.9 2.2-1.7 5.5.5 7.4L120 91.6zM505 452c-9.4-9.4-24.6-9.3-33.9 0-12.1 12.1-30.7 15.3-45.1 8.7l-143-73.9 49.7-74.6c10.6-15.8 8.5-37.1-5-50.5l-57.2-57.2-76.9-38.1c-1.6 16.6 3.8 33 15.7 44.9l79.8 79.8-49.1 73.6-205-106c-11.9-6.1-26.3-1.5-32.3 10.3-6.1 11.8-1.5 26.3 10.3 32.3l391.9 202.5c11.9 5.5 24.5 8.1 37.1 8.1 23.2 0 46.1-9 63-26 9.3-9.3 9.3-24.5 0-33.9z"/></symbol>
     <symbol id="icon-mountain" fill="currentColor" stroke="none" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 640 512"><!-- Font Awesome Pro 5.15.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) --><path d="M634.92 462.7l-288-448C341.03 5.54 330.89 0 320 0s-21.03 5.54-26.92 14.7l-288 448a32.001 32.001 0 0 0-1.17 32.64A32.004 32.004 0 0 0 32 512h576c11.71 0 22.48-6.39 28.09-16.67a31.983 31.983 0 0 0-1.17-32.63zM61.31 464l131.77-204.98L256 321.94 329.94 248h109.9L578.7 464H61.31zM320 61.59L408.98 200h-98.92L256 254.06l-36.36-36.36L320 61.59z"/></symbol>
     <symbol id="icon-lift" fill="currentColor" stroke="none" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><!-- Font Awesome Pro 5.15.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) --><path d="M112 128c26.5 0 48-21.5 48-48s-21.5-48-48-48-48 21.5-48 48 21.5 48 48 48zM256 0h-32v216l32-8V0zm-64.4 381.4c12.6-4.2 19.4-17.8 15.2-30.4-4.2-12.6-17.7-19.5-30.4-15.2L158 342c-19 6.4-40-2.5-48.7-20.7l-63.6-133c-5.7-11.9-20-17-32-11.3-12 5.7-17 20-11.3 32L66 342c15 31.2 46.4 50 79.5 50 12.6 0 17-.9 46.1-10.6zM488 288c-13.2 0-24 10.8-24 24 0 13.9-8.8 26.5-21.8 31.3L312 391.5V256c0-15.8-15-27-29.8-23.3l-93.5 23.4-39.7-85.5c-7.4-16-26.3-23.1-42.5-15.6-12.6 5.8-24.1 24.2-15.7 42.5l47.3 100.6c4.8 10.5 16.5 16.1 27.6 13.2l98.2-24.5v122.5l-152.3 56.3c-12.4 4.6-18.8 18.4-14.2 30.8 3.6 9.7 12.8 15.7 22.5 15.7 2.8 0 5.6-.5 8.3-1.5l330.5-122.1c31.8-11.8 53.2-42.5 53.2-76.4.1-13.3-10.7-24.1-23.9-24.1z"/></symbol>
+    <symbol id="icon-concept" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M20 7l-8-4-8 4m16 0l-8 4m8-4v10l-8 4m0-10L4 7m8 4v10M4 7v10l8 4"></path></symbol>
     <symbol id="icon-spinner" fill="currentColor" stroke="none" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 128 128">
         <g>
             <path d="M109.25 55.5h-36l12-12a29.54 29.54 0 0 0-49.53 12H18.75A46.04 46.04 0 0 1 96.9 31.84l12.35-12.34v36zm-90.5 17h36l-12 12a29.54 29.54 0 0 0 49.53-12h16.97A46.04 46.04 0 0 1 31.1 96.16L18.74 108.5v-36z"></path>
             <animateTransform attributeName="transform" type="rotate" from="0 64 64" to="360 64 64" dur="960ms" repeatCount="indefinite"></animateTransform>
         </g>
     </symbol>
-    <symbol id="icon-mountainbike" fill="currentColor" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 640 512"><path d="M400 96a48 48 0 1 0-48-48 48 48 0 0 0 48 48zm224 256h-5.2a110.19 110.19 0 0 0-8.65-20.89l3.67-3.67a16 16 0 0 0 0-22.63l-22.63-22.63a16 16 0 0 0-22.63 0l-3.66 3.67a110.72 110.72 0 0 0-20.9-8.65V272a16 16 0 0 0-16-16h-32a16 16 0 0 0-16 16v5.2a110.19 110.19 0 0 0-20.89 8.65l-3.67-3.67a16 16 0 0 0-22.63 0l-22.62 22.63a16 16 0 0 0 0 22.63l3.67 3.67A110.45 110.45 0 0 0 405.2 352H400a16 16 0 0 0-16 16v32a16 16 0 0 0 16 16h5.2a110.19 110.19 0 0 0 8.65 20.89l-3.67 3.67a16 16 0 0 0 0 22.63l22.62 22.63a16 16 0 0 0 22.63 0l3.67-3.67a110.94 110.94 0 0 0 20.9 8.65v5.2a16 16 0 0 0 16 16h32a16 16 0 0 0 16-16v-5.2a110.56 110.56 0 0 0 20.9-8.65l3.67 3.67a16 16 0 0 0 22.62 0l22.63-22.63a16 16 0 0 0 0-22.63l-3.67-3.67A110.45 110.45 0 0 0 618.8 416h5.2a16 16 0 0 0 16-16v-32a16 16 0 0 0-16-16zm-112 96a64 64 0 1 1 64-64 64 64 0 0 1-64 64zm-272-96h-5.2a110.19 110.19 0 0 0-8.65-20.89l3.67-3.67a16 16 0 0 0 0-22.63l-22.63-22.63a16 16 0 0 0-22.63 0l-3.66 3.67a110.72 110.72 0 0 0-20.9-8.65V272a16 16 0 0 0-16-16h-32a16 16 0 0 0-16 16v5.2a110.19 110.19 0 0 0-20.89 8.65l-3.67-3.67a16 16 0 0 0-22.63 0l-22.63 22.63a16 16 0 0 0 0 22.63l3.67 3.67A110.45 110.45 0 0 0 21.2 352H16a16 16 0 0 0-16 16v32a16 16 0 0 0 16 16h5.2a110.19 110.19 0 0 0 8.65 20.89l-3.67 3.67a16 16 0 0 0 0 22.63l22.62 22.63a16 16 0 0 0 22.63 0l3.67-3.67A110.94 110.94 0 0 0 96 490.8v5.2a16 16 0 0 0 16 16h32a16 16 0 0 0 16-16v-5.2a110.56 110.56 0 0 0 20.9-8.65l3.67 3.67a16 16 0 0 0 22.62 0l22.63-22.63a16 16 0 0 0 0-22.63l-3.67-3.67A110.45 110.45 0 0 0 234.8 416h5.2a16 16 0 0 0 16-16v-32a16 16 0 0 0-16-16zm-112 96a64 64 0 1 1 64-64 64 64 0 0 1-64 64zm273-237.27a24 24 0 0 0 15 5.27h64a24 24 0 0 0 0-48h-55.59L351 109.27a24 24 0 0 0-30.62.51l-112 96a24 24 0 0 0 2.31 38.22L296 300.84V416a24 24 0 0 0 48 0V288a24 24 0 0 0-10.69-20l-43.23-28.82 70.73-60.63zM159.19 172a35.53 35.53 0 0 0 49.45 3.77l87.3-74.45c16.82-14.24 14.56-37 3.27-49.84C270 18.45 219 13.88 185.93 42L132.2 87.91a34.9 34.9 0 0 0-3.26 49.85zm57.88-93.5c9.92-8.42 24-9.35 35.65-3.43l-65.64 56-13.54-15.31z"/></symbol>
-    <symbol id="icon-hotel" fill="currentColor" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 576 512"><path d="M560 48c8.84 0 16-7.16 16-16V16c0-8.84-7.16-16-16-16H16C7.16 0 0 7.16 0 16v16c0 8.84 7.16 16 16 16h15.98v416H16c-8.84 0-16 7.16-16 16v16c0 8.84 7.16 16 16 16h544c8.84 0 16-7.16 16-16v-16c0-8.84-7.16-16-16-16h-16V48h16zm-64 416H320v-80h64c0-53.02-42.98-96-96-96s-96 42.98-96 96h64v80H79.98V48H496v416zM268.8 160h38.4c6.4 0 12.8-6.4 12.8-12.8v-38.4c0-6.4-6.4-12.8-12.8-12.8h-38.4c-6.4 0-12.8 6.4-12.8 12.8v38.4c0 6.4 6.4 12.8 12.8 12.8zm0 96h38.4c6.4 0 12.8-6.4 12.8-12.8v-38.4c0-6.4-6.4-12.8-12.8-12.8h-38.4c-6.4 0-12.8 6.4-12.8 12.8v38.4c0 6.4 6.4 12.8 12.8 12.8zm128 0h38.4c6.4 0 12.8-6.4 12.8-12.8v-38.4c0-6.4-6.4-12.8-12.8-12.8h-38.4c-6.4 0-12.8 6.4-12.8 12.8v38.4c0 6.4 6.4 12.8 12.8 12.8zm0-96h38.4c6.4 0 12.8-6.4 12.8-12.8v-38.4c0-6.4-6.4-12.8-12.8-12.8h-38.4c-6.4 0-12.8 6.4-12.8 12.8v38.4c0 6.4 6.4 12.8 12.8 12.8zm-256 96h38.4c6.4 0 12.8-6.4 12.8-12.8v-38.4c0-6.4-6.4-12.8-12.8-12.8h-38.4c-6.4 0-12.8 6.4-12.8 12.8v38.4c0 6.4 6.4 12.8 12.8 12.8zm0-96h38.4c6.4 0 12.8-6.4 12.8-12.8v-38.4c0-6.4-6.4-12.8-12.8-12.8h-38.4c-6.4 0-12.8 6.4-12.8 12.8v38.4c0 6.4 6.4 12.8 12.8 12.8z"/></symbol>
-    <symbol id="icon-sportclub" fill="currentColor" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 576 512"><path d="M560 48c8.84 0 16-7.16 16-16V16c0-8.84-7.16-16-16-16H16C7.16 0 0 7.16 0 16v16c0 8.84 7.16 16 16 16h15.98v416H16c-8.84 0-16 7.16-16 16v16c0 8.84 7.16 16 16 16h544c8.84 0 16-7.16 16-16v-16c0-8.84-7.16-16-16-16h-16V48h16zm-64 416H320v-80h64c0-53.02-42.98-96-96-96s-96 42.98-96 96h64v80H79.98V48H496v416zM268.8 160h38.4c6.4 0 12.8-6.4 12.8-12.8v-38.4c0-6.4-6.4-12.8-12.8-12.8h-38.4c-6.4 0-12.8 6.4-12.8 12.8v38.4c0 6.4 6.4 12.8 12.8 12.8zm0 96h38.4c6.4 0 12.8-6.4 12.8-12.8v-38.4c0-6.4-6.4-12.8-12.8-12.8h-38.4c-6.4 0-12.8 6.4-12.8 12.8v38.4c0 6.4 6.4 12.8 12.8 12.8zm128 0h38.4c6.4 0 12.8-6.4 12.8-12.8v-38.4c0-6.4-6.4-12.8-12.8-12.8h-38.4c-6.4 0-12.8 6.4-12.8 12.8v38.4c0 6.4 6.4 12.8 12.8 12.8zm0-96h38.4c6.4 0 12.8-6.4 12.8-12.8v-38.4c0-6.4-6.4-12.8-12.8-12.8h-38.4c-6.4 0-12.8 6.4-12.8 12.8v38.4c0 6.4 6.4 12.8 12.8 12.8zm-256 96h38.4c6.4 0 12.8-6.4 12.8-12.8v-38.4c0-6.4-6.4-12.8-12.8-12.8h-38.4c-6.4 0-12.8 6.4-12.8 12.8v38.4c0 6.4 6.4 12.8 12.8 12.8zm0-96h38.4c6.4 0 12.8-6.4 12.8-12.8v-38.4c0-6.4-6.4-12.8-12.8-12.8h-38.4c-6.4 0-12.8 6.4-12.8 12.8v38.4c0 6.4 6.4 12.8 12.8 12.8z"/></symbol>
     <symbol id="icon-teaser-grid" fill="currentColor" stroke="none" viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
         <rect x="0" y="0" width="45" height="45"></rect>
         <rect x="55" y="0" width="45" height="45"></rect>
diff --git a/public/typo3conf/ext/ep_theme/Resources/Private/Partials/Search/FilterPanel.html b/public/typo3conf/ext/ep_theme/Resources/Private/Partials/Search/FilterPanel.html
index 30a36c7d..4c704ae9 100644
--- a/public/typo3conf/ext/ep_theme/Resources/Private/Partials/Search/FilterPanel.html
+++ b/public/typo3conf/ext/ep_theme/Resources/Private/Partials/Search/FilterPanel.html
@@ -3,13 +3,16 @@
       xmlns:ep="http://typo3.org/ns/EP/EpTheme/ViewHelpers"
       xmlns:f="http://typo3.org/ns/fluid/ViewHelpers">
 
-    <div class="mb-4 p-4 bg-ep-primary-light text-white"
+    <div class="mb-4"
          data-controller="collapse"
          data-collapse-collapsed-value="{f:if(condition: '{filterSettings.dateFrom} || {filterSettings.dateTo}', then: 'false', else: 'true')}">
         <button type="button"
                 data-action="click->collapse#toggle"
-                class="flex items-center justify-between w-full">
-            <span class="uppercase font-bold">
+                class="flex items-center justify-between w-full bg-brand-gradient p-4">
+            <svg class="w-6 h-6 text-white mr-2">
+                <use href="#icon-calendar"></use>
+            </svg>
+            <span class="flex-1 uppercase font-bold text-white text-left">
                 Reisezeitraum
             </span>
             <svg class="w-6 h-6 text-white transform"
@@ -22,74 +25,58 @@
                            data="{'search-target': 'dateFrom', 'mobile-search-target': 'dateFrom'}"/>
             <f:form.hidden property="dateTo"
                            data="{'search-target': 'dateTo', 'mobile-search-target': 'dateTo'}"/>
-
-            <div data-controller="collapse datepicker"
+            <div class="bg-brand-gradient p-4"
+                 data-controller="datepicker"
                  data-datepicker-date-from-value="{filterSettings.dateFrom}"
                  data-datepicker-date-to-value="{filterSettings.dateTo}"
-                 data-datepicker-min-date-value="{f:format.date(date: 'now', format: 'Y-m-d')}"
-                 data-action="collapse:click:outside->collapse#close searchbar:input@window->collapse#close"
-                 data-collapse-collapsed-value="true">
+                 data-datepicker-min-date-value="{f:format.date(date: 'now', format: 'Y-m-d')}">
                 <div class="relative">
-                    <input type="text"
-                           data-action="click->collapse#toggle"
-                           class="w-full px-0 bg-transparent border-0 ring-0 focus:ring-0 text-white uppercase cursor-pointer placeholder-white"
-                           placeholder="Zeitraum"
-                           value="{ep:dateRange(dateFrom: filterSettings.dateFrom, dateTo: filterSettings.dateTo, includeLabel: 0)}"/>
-                    <svg class="w-6 h-6 text-white absolute right-0 top-0 mt-2 cursor-pointer"
-                         data-action="click->collapse#toggle">
-                        <use href="#icon-calendar"></use>
-                    </svg>
-                    <div class="hidden absolute z-20 top-100 mt-2 left-0 min-w-full bg-white p-4 shadow-md rounded"
-                         data-collapse-target="container">
-                        <div class="flex flex-col md:flex-row md:justify-between divide-y md:divide-x divide-gray-200">
+                    <div class="text-white uppercase text-xl">
+                        {ep:dateRange(dateFrom: filterSettings.dateFrom, dateTo: filterSettings.dateTo, includeLabel: 0)}
+                    </div>
+                    <div class="mt-2  rounded">
+                        <div class="flex flex-col">
                             <div class="pb-2 md:pb-0 md:pr-2">
                                 <input type="hidden"
                                        data-datepicker-target="field">
                             </div>
-                            <div class="flex-1 flex flex-col justify-between pt-2 md:pt-0 md:pl-2">
-                                <f:if condition="{settings.datePickerPresets}">
-                                    <div class="grid grid-cols-2 gap-2 pb-4 md:pb-0 md:flex md:flex-col md:space-y-4">
-                                        <f:for each="{settings.datePickerPresets}" as="preset">
-                                            <button type="button"
-                                                    class="button button--small button--light w-full"
-                                                    data-preset='{preset -> f:format.json() -> f:format.raw()}'
-                                                    data-action="datepicker#selectPreset">
-                                                <span>
-                                                    {preset.label}
-                                                </span>
-                                            </button>
-                                        </f:for>
-                                    </div>
-                                </f:if>
-                                <div class="grid grid-cols-2 gap-2 md:flex md:flex-col md:space-y-4">
+                            <f:if condition="{settings.datePickerPresets}">
+                                <div class="flex flex-col divide-y divide-overlay-white mt-2">
+                                <f:for each="{settings.datePickerPresets}" as="preset">
                                     <button type="button"
-                                            class="button button--small button--light w-full"
-                                            data-action="collapse#close">
-                                        schließen
-                                    </button>
-                                    <button type="button"
-                                            class="button button--small button--light w-full"
-                                            data-action="datepicker#reset">
-                                        zurücksetzen
+                                            class="flex items-center justify-between w-full text-white py-2"
+                                            data-preset='{preset -> f:format.json() -> f:format.raw()}'
+                                            data-action="datepicker#selectPreset">
+                                        <span class="uppercase font-bold">{preset.label}</span>
+                                        <svg class="w-6 h-6 transform">
+                                            <use href="#icon-arrow-right"></use>
+                                        </svg>
                                     </button>
+                                </f:for>
                                 </div>
-                            </div>
+                            </f:if>
+                            <button type="button"
+                                    class="text-white text-left text-sm mt-2"
+                                    data-action="datepicker#reset">
+                                zurücksetzen
+                            </button>
                         </div>
                     </div>
                 </div>
             </div>
-
-
         </div>
     </div>
 
-    <div class="mb-4 p-4 bg-ep-primary-light text-white"
+    <div class="mb-4"
          data-controller="collapse"
          data-collapse-collapsed-value="{f:if(condition: '{filterSettings.conceptUids}', then: 'false', else: 'true')}">
         <button type="button"
                 data-action="click->collapse#toggle"
-                class="flex items-center justify-between w-full">
-            <span class="uppercase font-bold">
+                class="flex items-center justify-between w-full bg-brand-gradient p-4">
+            <svg class="w-6 h-6 text-white mr-2">
+                <use href="#icon-concept"></use>
+            </svg>
+            <span class="flex-1 uppercase font-bold text-white text-left">
                 Reisekonzepte
             </span>
             <svg class="w-6 h-6 text-white transform"
@@ -98,16 +85,16 @@
             </svg>
         </button>
         <div data-collapse-target="container"
-             class="pt-2">
+             class="p-4 border-t border-overlay-white bg-brand-gradient">
             <ul class="mb-0 p-0 space-y-2">
                 <f:for each="{filterOptions.concepts}" as="concept">
                     <li>
-                        <label>
+                        <label class="flex items-center">
                             <f:form.checkbox class="mr-2 rounded-full w-5 h-5 border-white ring-0 bg-transparent focus:ring-0 focus:border-none text-ep-primary"
                                              property="conceptUids"
                                              data="{action: '{stimulusController}#filter'}"
                                              value="{concept.uid}"/>
-                            <span class="inline-block py-1 px-2 bg-concept-{concept.code} text-white">
+                            <span class="block w-full py-1 px-2 bg-concept-{concept.code} text-white rounded">
                                 {concept.name}
                             </span>
                         </label>
@@ -117,7 +104,7 @@
         </div>
     </div>
 
-    <div class="px-4 divide-y">
+    <div class="px-4 divide-y py-2 px-4 bg-white">
 
         <div class="py-2"
              data-controller="collapse"
@@ -134,7 +121,7 @@
                 </svg>
             </button>
             <div data-collapse-target="container">
-                <ul class="mb-0 p-0 pt-2">
+                <ul class="mb-0 p-0 pt-4">
                     <f:for each="{filterOptions.destinations}" as="destination">
                         <li class="relative border-b last:border-0 mb-2">
                             <label class="flex items-start">
@@ -150,7 +137,7 @@
                                 </svg>
                             </label>
                             <f:if condition="{destination.regions}">
-                                <ul class="py-2 space-y-1">
+                                <ul class="py-2 space-y-2">
                                     <f:for each="{destination.regions}" as="region">
                                         <li>
                                             <label class="flex items-start">
@@ -187,7 +174,7 @@
                 </svg>
             </button>
             <div data-collapse-target="container">
-                <ul class="mb-0 p-0 pt-2 space-y-1">
+                <ul class="mb-0 p-0 pt-4 space-y-2">
                     <f:for each="{filterOptions.priceRanges}" as="range">
                         <li>
                             <label class="flex items-start">
@@ -249,7 +236,7 @@
                 </svg>
             </button>
             <div data-collapse-target="container">
-                <ul class="mb-0 p-0 pt-2 space-y-1">
+                <ul class="mb-0 p-0 pt-4 space-y-2">
                     <f:for each="{filterOptions.hotelTypes}" as="type">
                         <li>
                             <label class="flex items-start">
@@ -282,7 +269,7 @@
                 </svg>
             </button>
             <div data-collapse-target="container">
-                <ul class="mb-0 p-0 pt-2 space-y-1">
+                <ul class="mb-0 p-0 pt-4 space-y-2">
                     <f:for each="{filterOptions.boardTypes}" as="type">
                         <f:if condition="{type.label}">
                             <li>
@@ -325,7 +312,7 @@
                 </svg>
             </button>
             <div data-collapse-target="container">
-                <ul class="mb-0 p-0 p-0 pt-2 space-y-1">
+                <ul class="mb-0 p-0 p-0 pt-4 space-y-2">
                     <f:for each="{filterOptions.roomTypes}" as="type">
                         <li>
                             <label class="flex items-start">
@@ -359,7 +346,7 @@
                     </svg>
                 </button>
                 <div data-collapse-target="container">
-                    <ul class="mb-0 p-0 pt-2 space-y-1">
+                    <ul class="mb-0 p-0 pt-4 space-y-2">
                         <li>
                             <label class="flex items-start">
                                 <f:form.checkbox class="w-5 h-5 border-ep-primary-light ring-0 bg-transparent focus:ring-0 focus:border-none text-ep-primary"
diff --git a/public/typo3conf/ext/ep_theme/Resources/Private/Partials/Search/Main.html b/public/typo3conf/ext/ep_theme/Resources/Private/Partials/Search/Main.html
index 7eb4adc6..e1aff20f 100644
--- a/public/typo3conf/ext/ep_theme/Resources/Private/Partials/Search/Main.html
+++ b/public/typo3conf/ext/ep_theme/Resources/Private/Partials/Search/Main.html
@@ -4,7 +4,7 @@
 
     <div class="grid grid-cols-3 gap-8">
         <div class="col-span-3 lg:col-span-1 relative">
-            <div class="hidden lg:block bg-white p-4">
+            <div class="hidden lg:block">
                 <h3 class="headline headline--underlined mb-4">
                     Filter
                 </h3>
@@ -24,6 +24,9 @@
             </div>
         </div>
         <div class="col-span-3 lg:col-span-2 relative">
+            <h3 class="headline headline--underlined mb-4">
+                Suchergebnis
+            </h3>
             <f:render partial="Search/Result" arguments="{_all}"/>
         </div>
         <f:render partial="Search/MobileSearch" arguments="{_all}"/>
diff --git a/public/typo3conf/ext/ep_theme/Resources/Private/Partials/Search/Result.html b/public/typo3conf/ext/ep_theme/Resources/Private/Partials/Search/Result.html
index 13ffacd6..1c9bc4f3 100644
--- a/public/typo3conf/ext/ep_theme/Resources/Private/Partials/Search/Result.html
+++ b/public/typo3conf/ext/ep_theme/Resources/Private/Partials/Search/Result.html
@@ -2,7 +2,7 @@
       xmlns="http://www.w3.org/1999/xhtml"
       xmlns:f="http://typo3.org/ns/fluid/ViewHelpers">
 
-    <div class="bg-ep-primary-light text-white p-4 mb-4">
+    <div class="text-white p-4 mb-4 {f:if(condition: '{meta.organic} && {meta.total} > 0', then: 'bg-green-600', else: 'bg-red-600')}">
         Deine Suche
         <f:if condition="{meta.organic}">
             <f:then>
@@ -24,12 +24,11 @@
     </f:if>
     <f:for each="{searchResult}" as="section">
         <div id="concept-{section.concept.uid}">
-            <h2 class="headline headline--secondary headline--underlined">
+            <h4 class="headline headline--tertiary headline--underlined">
                 {section.concept.name}
-            </h2>
+            </h4>
             <div class="flex flex-col space-y-4 md:space-y-8 mb-8">
                 <f:for each="{section.items}" as="item">
-
                     <f:render partial="Product/Teaser" section="Teaser" arguments="{
                                 concept: section.concept,
                                 hotel: item.hotel,
@@ -48,7 +47,6 @@
                                 landscape: 1,
                                 referringPageUri: referringPageUri
                             }"/>
-
                 </f:for>
             </div>
         </div>
diff --git a/public/typo3conf/ext/ep_theme/Resources/Private/Templates/Searchbar/Index.html b/public/typo3conf/ext/ep_theme/Resources/Private/Templates/Searchbar/Index.html
index 14e398f1..b8ea4c15 100644
--- a/public/typo3conf/ext/ep_theme/Resources/Private/Templates/Searchbar/Index.html
+++ b/public/typo3conf/ext/ep_theme/Resources/Private/Templates/Searchbar/Index.html
@@ -29,7 +29,7 @@
                     </f:else>
                 </f:if>
                     data-searchbar-target="container">
-                    <div class="bg-gradient-to-tr from-ep-primary-light via-ep-primary-medium to-ep-primary-dark">
+                    <div class="bg-brand-gradient">
                         <div class="reduced:max-w-screen-xl reduced:mx-auto reduced:px-4 flex flex-col reduced:flex-row reduced:items-center">
                             <div class="flex items-start justify-between reduced:flex-1 pt-8 px-8 reduced:px-0 reduced:py-4">
 
diff --git a/tailwind.config.js b/tailwind.config.js
index 23493490..09a917e0 100644
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -118,6 +118,7 @@ module.exports = {
             },
             backgroundImage: {
                 'badge-gradient': 'linear-gradient(120deg, rgba(150,1,103,1) 0%, rgba(158,3,106,1) 40%, rgba(250,26,140,1) 100%)',
+                'brand-gradient': 'linear-gradient(to top right, #009fff, #165883, #18527b)',
             },
             height: {
                 '128': '32rem',