From fbe5a882c7a05c92c75425d5ecc8954183582645 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Bj=C3=B6rn=20Fromme?= <fromme@dreipunktnull.com>
Date: Tue, 16 Jun 2026 11:26:37 +0200
Subject: [PATCH] feat: render product teasers in landscape mode when less than
 3

addresses #86965w98p
---
 .../Private/Partials/City/Details.html        | 124 ++++++++++-------
 .../Private/Partials/Hotel/Details.html       | 124 ++++++++++-------
 .../Private/Partials/Region/Details.html      | 129 +++++++++++-------
 .../Private/Templates/Country/Detail.html     | 116 ++++++++++------
 .../Templates/Product/Teasergroup.html        | 119 ++++++++++------
 5 files changed, 378 insertions(+), 234 deletions(-)

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 58dd48ea..c4436214 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
@@ -23,56 +23,86 @@
             <div data-controller="teasergrid"
                  data-teasergrid-grid-class="grid-cols-2"
                  data-teasergrid-disabled-value="false">
-                <div class="flex items-center space-x-1 mb-2 sm:hidden">
-                    <button type="button"
-                            class="opacity-50"
-                            aria-label="kompakte Ansicht"
-                            data-action="teasergrid#grid"
-                            data-teasergrid-target="button">
-                        <svg class="w-5 h-5 text-ep-primary">
-                            <use href="{f:uri.image(src: 'EXT:ep_theme/Resources/Public/images/icons_sprite.svg')}#icon-teaser-grid"></use>
-                        </svg>
-                    </button>
-                    <button type="button"
-                            aria-label="vergrößerte Ansicht"
-                            data-action="teasergrid#block"
-                            data-teasergrid-target="button">
-                        <svg class="w-5 h-5 text-ep-primary">
-                            <use href="{f:uri.image(src: 'EXT:ep_theme/Resources/Public/images/icons_sprite.svg')}#icon-teaser-single"></use>
-                        </svg>
-                    </button>
-                </div>
-                <div class="grid grid-cols-2 xl:grid-cols-3 gap-4 md:gap-8"
-                     data-teasergrid-target="container">
-                    <f:for each="{teasers}" as="teaser" iteration="iteration">
-                        <f:render partial="Product/Teaser" section="Teaser" arguments="{
-                                                concept: teaser.concept,
-                                                hotel: teaser.hotel,
-                                                product: teaser.product,
-                                                country: teaser.country,
-                                                region: teaser.region,
-                                                productImage: teaser.product.images.original.0,
-                                                nights: teaser.nights,
-                                                board: teaser.board,
-                                                minPrice: teaser.minPrice,
-                                                daytrip: teaser.daytrip,
-                                                season: teaser.season,
-                                                forceHotelUid: teaser.forceHotelUid,
-                                                dateFrom: teaser.minDateStart,
-                                                dateTo: teaser.maxDateEnd,
-                                                index: iteration.index
-                                            }"/>
-                    </f:for>
-                </div>
+                <f:if condition="{teasers -> f:count()} <= 2">
+                    <f:then>
+                        <div class="grid gap-4 md:gap-8">
+                            <f:for each="{teasers}" as="teaser" iteration="iteration">
+                                <f:render partial="Product/Teaser" section="Teaser" arguments="{
+                                    landscape: 1,
+                                    concept: teaser.concept,
+                                    hotel: teaser.hotel,
+                                    product: teaser.product,
+                                    country: teaser.country,
+                                    region: teaser.region,
+                                    productImage: teaser.product.images.original.0,
+                                    nights: teaser.nights,
+                                    board: teaser.board,
+                                    minPrice: teaser.minPrice,
+                                    daytrip: teaser.daytrip,
+                                    season: teaser.season,
+                                    forceHotelUid: teaser.forceHotelUid,
+                                    dateFrom: teaser.minDateStart,
+                                    dateTo: teaser.maxDateEnd,
+                                    index: iteration.index
+                                }"/>
+                            </f:for>
+                        </div>
+                    </f:then>
+                    <f:else>
+                        <div class="flex items-center space-x-1 mb-2 sm:hidden">
+                            <button type="button"
+                                    class="opacity-50"
+                                    aria-label="kompakte Ansicht"
+                                    data-action="teasergrid#grid"
+                                    data-teasergrid-target="button">
+                                <svg class="w-5 h-5 text-ep-primary">
+                                    <use href="{f:uri.image(src: 'EXT:ep_theme/Resources/Public/images/icons_sprite.svg')}#icon-teaser-grid"></use>
+                                </svg>
+                            </button>
+                            <button type="button"
+                                    aria-label="vergrößerte Ansicht"
+                                    data-action="teasergrid#block"
+                                    data-teasergrid-target="button">
+                                <svg class="w-5 h-5 text-ep-primary">
+                                    <use href="{f:uri.image(src: 'EXT:ep_theme/Resources/Public/images/icons_sprite.svg')}#icon-teaser-single"></use>
+                                </svg>
+                            </button>
+                        </div>
+                        <div class="grid grid-cols-2 xl:grid-cols-3 gap-4 md:gap-8"
+                             data-teasergrid-target="container">
+                            <f:for each="{teasers}" as="teaser" iteration="iteration">
+                                <f:render partial="Product/Teaser" section="Teaser" arguments="{
+                                    concept: teaser.concept,
+                                    hotel: teaser.hotel,
+                                    product: teaser.product,
+                                    country: teaser.country,
+                                    region: teaser.region,
+                                    productImage: teaser.product.images.original.0,
+                                    nights: teaser.nights,
+                                    board: teaser.board,
+                                    minPrice: teaser.minPrice,
+                                    daytrip: teaser.daytrip,
+                                    season: teaser.season,
+                                    forceHotelUid: teaser.forceHotelUid,
+                                    dateFrom: teaser.minDateStart,
+                                    dateTo: teaser.maxDateEnd,
+                                    index: iteration.index
+                                }"/>
+                            </f:for>
+                        </div>
+                    </f:else>
+                </f:if>
             </div>
             <f:if condition="{settings.hideMoreLink}">
                 <f:else>
-                    <f:link.typolink class="button bg-button ml-4"
-                                     parameter="{settings.defaultSearchPageUid}"
-                                     additionalParams="f={filterSettings -> ep:filterSettingsEncoder()}"
-                                     additionalAttributes="{rel: 'nofollow'}">
-                        Alle anzeigen
-                    </f:link.typolink>
+                    <div class="text-right mt-4">
+                        <f:link.typolink class="button bg-button"
+                                         parameter="{settings.defaultSearchPageUid}"
+                                         additionalParams="f={filterSettings -> ep:filterSettingsEncoder()}"
+                                         additionalAttributes="{rel: 'nofollow'}">
+                            Alle anzeigen
+                        </f:link.typolink>
+                    </div>
                 </f:else>
             </f:if>
         </div>
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 ae71363f..767b2020 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
@@ -36,55 +36,81 @@
                  data-controller="teasergrid"
                  data-teasergrid-grid-class="grid-cols-2"
                  data-teasergrid-disabled-value="false">
-                <f:if condition="{teasers}">
-                    <div class="flex items-center space-x-1 mb-2 sm:hidden">
-                        <button type="button"
-                                class="opacity-50"
-                                aria-label="kompakte Ansicht"
-                                data-action="teasergrid#grid"
-                                data-teasergrid-target="button">
-                            {ep:icon(icon: 'teaser-grid', class: 'w-5 h-5 text-ep-primary')}
-                        </button>
-                        <button type="button"
-                                aria-label="vergrößerte Ansicht"
-                                data-action="teasergrid#block"
-                                data-teasergrid-target="button">
-                            {ep:icon(icon: 'teaser-single', class: 'w-5 h-5 text-ep-primary')}
-                        </button>
-                    </div>
-                    <div class="grid grid-cols-2 xl:grid-cols-3 gap-4 md:gap-8"
-                         data-teasergrid-target="container">
-                        <f:for each="{teasers}" as="teaser" iteration="iteration">
-                            <f:render partial="Product/Teaser" section="Teaser" arguments="{
-                                concept: teaser.concept,
-                                hotel: teaser.hotel,
-                                product: teaser.product,
-                                country: teaser.country,
-                                region: teaser.region,
-                                productImage: teaser.product.images.original.0,
-                                nights: teaser.nights,
-                                board: teaser.board,
-                                minPrice: teaser.minPrice,
-                                daytrip: teaser.daytrip,
-                                season: teaser.season,
-                                forceHotelUid: teaser.forceHotelUid,
-                                dateFrom: teaser.minDateStart,
-                                dateTo: teaser.maxDateEnd,
-                                index: iteration.index
-                            }"/>
-                        </f:for>
-                    </div>
-                    <f:if condition="{settings.hideMoreLink}">
-                        <f:else>
-                            <div class="text-right mt-4">
-                                <f:link.typolink class="button bg-button"
-                                                 parameter="{settings.defaultSearchPageUid}"
-                                                 additionalParams="f={filterSettings -> ep:filterSettingsEncoder()}">
-                                    Alle anzeigen
-                                </f:link.typolink>
-                            </div>
-                        </f:else>
-                    </f:if>
+                <f:if condition="{teasers -> f:count() <= 2}">
+                    <f:then>
+                        <div class="grid gap-4 md:gap-8">
+                            <f:for each="{teasers}" as="teaser" iteration="iteration">
+                                <f:render partial="Product/Teaser" section="Teaser" arguments="{
+                                    landscape: 1,
+                                    concept: teaser.concept,
+                                    hotel: teaser.hotel,
+                                    product: teaser.product,
+                                    country: teaser.country,
+                                    region: teaser.region,
+                                    productImage: teaser.product.images.original.0,
+                                    nights: teaser.nights,
+                                    board: teaser.board,
+                                    minPrice: teaser.minPrice,
+                                    daytrip: teaser.daytrip,
+                                    season: teaser.season,
+                                    forceHotelUid: teaser.forceHotelUid,
+                                    dateFrom: teaser.minDateStart,
+                                    dateTo: teaser.maxDateEnd,
+                                    index: iteration.index
+                                }"/>
+                            </f:for>
+                        </div>
+                    </f:then>
+                    <f:else>
+                        <div class="flex items-center space-x-1 mb-2 sm:hidden">
+                            <button type="button"
+                                    class="opacity-50"
+                                    aria-label="kompakte Ansicht"
+                                    data-action="teasergrid#grid"
+                                    data-teasergrid-target="button">
+                                {ep:icon(icon: 'teaser-grid', class: 'w-5 h-5 text-ep-primary')}
+                            </button>
+                            <button type="button"
+                                    aria-label="vergrößerte Ansicht"
+                                    data-action="teasergrid#block"
+                                    data-teasergrid-target="button">
+                                {ep:icon(icon: 'teaser-single', class: 'w-5 h-5 text-ep-primary')}
+                            </button>
+                        </div>
+                        <div class="grid grid-cols-2 xl:grid-cols-3 gap-4 md:gap-8"
+                             data-teasergrid-target="container">
+                            <f:for each="{teasers}" as="teaser" iteration="iteration">
+                                <f:render partial="Product/Teaser" section="Teaser" arguments="{
+                                    concept: teaser.concept,
+                                    hotel: teaser.hotel,
+                                    product: teaser.product,
+                                    country: teaser.country,
+                                    region: teaser.region,
+                                    productImage: teaser.product.images.original.0,
+                                    nights: teaser.nights,
+                                    board: teaser.board,
+                                    minPrice: teaser.minPrice,
+                                    daytrip: teaser.daytrip,
+                                    season: teaser.season,
+                                    forceHotelUid: teaser.forceHotelUid,
+                                    dateFrom: teaser.minDateStart,
+                                    dateTo: teaser.maxDateEnd,
+                                    index: iteration.index
+                                }"/>
+                            </f:for>
+                        </div>
+                    </f:else>
+                </f:if>
+                <f:if condition="{settings.hideMoreLink}">
+                    <f:else>
+                        <div class="text-right mt-4">
+                            <f:link.typolink class="button bg-button"
+                                             parameter="{settings.defaultSearchPageUid}"
+                                             additionalParams="f={filterSettings -> ep:filterSettingsEncoder()}">
+                                Alle anzeigen
+                            </f:link.typolink>
+                        </div>
+                    </f:else>
                 </f:if>
             </div>
         </f:then>
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 3c7e6d97..922470d1 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
@@ -53,60 +53,87 @@
         <f:if condition="{teasers}">
             <f:then>
                 <a id="teasers" class="anchor"></a>
-                <div class="bg-zinc-50 p-4 mb-4"
+                <div class="even:bg-zinc-50 even:p-4 mb-4"
                      data-controller="teasergrid"
                      data-teasergrid-grid-class="grid-cols-2"
                      data-teasergrid-disabled-value="false">
-                    <f:if condition="{teasers}">
-                        <div class="flex items-center space-x-1 mb-2 sm:hidden">
-                            <button type="button"
-                                    class="opacity-50"
-                                    aria-label="kompakte Ansicht"
-                                    data-action="teasergrid#grid"
-                                    data-teasergrid-target="button">
-                                {ep:icon(icon: 'teaser-grid', class: 'w-5 h-5 text-ep-primary')}
-                            </button>
-                            <button type="button"
-                                    aria-label="vergrößerte Ansicht"
-                                    data-action="teasergrid#block"
-                                    data-teasergrid-target="button">
-                                {ep:icon(icon: 'teaser-single', class: 'w-5 h-5 text-ep-primary')}
-                            </button>
-                        </div>
-                        <div class="grid grid-cols-2 xl:grid-cols-3 gap-4 md:gap-8"
-                             data-teasergrid-target="container">
-                            <f:for each="{teasers}" as="teaser" iteration="iteration">
-                                <f:render partial="Product/Teaser" section="Teaser" arguments="{
-                                    concept: teaser.concept,
-                                    hotel: teaser.hotel,
-                                    product: teaser.product,
-                                    country: teaser.country,
-                                    region: teaser.region,
-                                    productImage: teaser.product.images.original.0,
-                                    nights: teaser.nights,
-                                    board: teaser.board,
-                                    minPrice: teaser.minPrice,
-                                    daytrip: teaser.daytrip,
-                                    season: teaser.season,
-                                    forceHotelUid: teaser.forceHotelUid,
-                                    dateFrom: teaser.minDateStart,
-                                    dateTo: teaser.maxDateEnd,
-                                    index: iteration.index,
-                                    skiPassIncluded: teaser.skiPassIncluded
-                                }"/>
-                            </f:for>
-                        </div>
-                        <f:if condition="{settings.hideMoreLink}">
-                            <f:else>
-                                <div class="text-right mt-4">
-                                    <f:link.typolink class="button bg-button"
-                                                     parameter="{settings.defaultSearchPageUid}"
-                                                     additionalParams="f={filterSettings -> ep:filterSettingsEncoder()}">
-                                        Alle anzeigen
-                                    </f:link.typolink>
-                                </div>
-                            </f:else>
-                        </f:if>
+                    <f:if condition="{teasers -> f:count()} <= 2">
+                        <f:then>
+                            <div class="grid gap-4 md:gap-8">
+                                <f:for each="{teasers}" as="teaser" iteration="iteration">
+                                    <f:render partial="Product/Teaser" section="Teaser" arguments="{
+                                        landscape: 1,
+                                        concept: teaser.concept,
+                                        hotel: teaser.hotel,
+                                        product: teaser.product,
+                                        country: teaser.country,
+                                        region: teaser.region,
+                                        productImage: teaser.product.images.original.0,
+                                        nights: teaser.nights,
+                                        board: teaser.board,
+                                        minPrice: teaser.minPrice,
+                                        daytrip: teaser.daytrip,
+                                        season: teaser.season,
+                                        forceHotelUid: teaser.forceHotelUid,
+                                        dateFrom: teaser.minDateStart,
+                                        dateTo: teaser.maxDateEnd,
+                                        index: iteration.index,
+                                        skiPassIncluded: teaser.skiPassIncluded
+                                    }"/>
+                                </f:for>
+                            </div>
+                        </f:then>
+                        <f:else>
+                            <div class="flex items-center space-x-1 mb-2 sm:hidden">
+                                <button type="button"
+                                        class="opacity-50"
+                                        aria-label="kompakte Ansicht"
+                                        data-action="teasergrid#grid"
+                                        data-teasergrid-target="button">
+                                    {ep:icon(icon: 'teaser-grid', class: 'w-5 h-5 text-ep-primary')}
+                                </button>
+                                <button type="button"
+                                        aria-label="vergrößerte Ansicht"
+                                        data-action="teasergrid#block"
+                                        data-teasergrid-target="button">
+                                    {ep:icon(icon: 'teaser-single', class: 'w-5 h-5 text-ep-primary')}
+                                </button>
+                            </div>
+                            <div class="grid grid-cols-2 xl:grid-cols-3 gap-4 md:gap-8"
+                                 data-teasergrid-target="container">
+                                <f:for each="{teasers}" as="teaser" iteration="iteration">
+                                    <f:render partial="Product/Teaser" section="Teaser" arguments="{
+                                        concept: teaser.concept,
+                                        hotel: teaser.hotel,
+                                        product: teaser.product,
+                                        country: teaser.country,
+                                        region: teaser.region,
+                                        productImage: teaser.product.images.original.0,
+                                        nights: teaser.nights,
+                                        board: teaser.board,
+                                        minPrice: teaser.minPrice,
+                                        daytrip: teaser.daytrip,
+                                        season: teaser.season,
+                                        forceHotelUid: teaser.forceHotelUid,
+                                        dateFrom: teaser.minDateStart,
+                                        dateTo: teaser.maxDateEnd,
+                                        index: iteration.index,
+                                        skiPassIncluded: teaser.skiPassIncluded
+                                    }"/>
+                                </f:for>
+                            </div>
+                        </f:else>
+                    </f:if>
+                    <f:if condition="{settings.hideMoreLink}">
+                        <f:else>
+                            <div class="text-right mt-4">
+                                <f:link.typolink class="button bg-button"
+                                                 parameter="{settings.defaultSearchPageUid}"
+                                                 additionalParams="f={filterSettings -> ep:filterSettingsEncoder()}">
+                                    Alle anzeigen
+                                </f:link.typolink>
+                            </div>
+                        </f:else>
                     </f:if>
                 </div>
             </f:then>
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 d95e2fe8..8af84e61 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
@@ -34,49 +34,79 @@
                              data-controller="teasergrid"
                              data-teasergrid-grid-class="grid-cols-2"
                              data-teasergrid-disabled-value="false">
-                            <div class="flex items-center space-x-1 mb-2 sm:hidden">
-                                <button type="button"
-                                        class="opacity-50"
-                                        aria-label="kompakte Ansicht"
-                                        data-action="teasergrid#grid"
-                                        data-teasergrid-target="button">
-                                    <svg class="w-12 h-12 text-ep-primary">
-                                        <use href="{f:uri.image(src: 'EXT:ep_theme/Resources/Public/images/icons_sprite.svg')}#icon-teaser-grid"></use>
-                                    </svg>
-                                </button>
-                                <button type="button"
-                                        aria-label="vergrößerte Ansicht"
-                                        data-action="teasergrid#block"
-                                        data-teasergrid-target="button">
-                                    <svg class="w-12 h-12 text-ep-primary">
-                                        <use href="{f:uri.image(src: 'EXT:ep_theme/Resources/Public/images/icons_sprite.svg')}#icon-teaser-single"></use>
-                                    </svg>
-                                </button>
-                            </div>
-                            <div class="grid grid-cols-2 xl:grid-cols-3 gap-4 md:gap-8"
-                                 data-teasergrid-target="container">
-                                <f:for each="{teasers}" as="teaser" iteration="iteration">
-                                    <f:render partial="Product/Teaser" section="Teaser" arguments="{
-                                    concept: teaser.concept,
-                                    hotel: teaser.hotel,
-                                    product: teaser.product,
-                                    country: teaser.country,
-                                    region: teaser.region,
-                                    productImage: teaser.product.images.original.0,
-                                    nights: teaser.nights,
-                                    board: teaser.board,
-                                    minPrice: teaser.minPrice,
-                                    daytrip: teaser.daytrip,
-                                    season: teaser.season,
-                                    forceHotelUid: teaser.forceHotelUid,
-                                    dateFrom: dateFrom,
-                                    dateTo: dateTo,
-                                    index: iteration.index,
-                                    globalConceptCode: settings.globalConceptCode,
-                                    skiPassIncluded: teaser.skiPassIncluded
-                                }"/>
-                                </f:for>
-                            </div>
+                            <f:if condition="{teasers -> f:count()} <= 2">
+                                <f:then>
+                                    <div class="grid gap-4 md:gap-8">
+                                        <f:for each="{teasers}" as="teaser" iteration="iteration">
+                                            <f:render partial="Product/Teaser" section="Teaser" arguments="{
+                                                landscape: 1,
+                                                concept: teaser.concept,
+                                                hotel: teaser.hotel,
+                                                product: teaser.product,
+                                                country: teaser.country,
+                                                region: teaser.region,
+                                                productImage: teaser.product.images.original.0,
+                                                nights: teaser.nights,
+                                                board: teaser.board,
+                                                minPrice: teaser.minPrice,
+                                                daytrip: teaser.daytrip,
+                                                season: teaser.season,
+                                                forceHotelUid: teaser.forceHotelUid,
+                                                dateFrom: dateFrom,
+                                                dateTo: dateTo,
+                                                index: iteration.index,
+                                                globalConceptCode: settings.globalConceptCode,
+                                                skiPassIncluded: teaser.skiPassIncluded
+                                            }"/>
+                                        </f:for>
+                                    </div>
+                                </f:then>
+                                <f:else>
+                                    <div class="flex items-center space-x-1 mb-2 sm:hidden">
+                                        <button type="button"
+                                                class="opacity-50"
+                                                aria-label="kompakte Ansicht"
+                                                data-action="teasergrid#grid"
+                                                data-teasergrid-target="button">
+                                            <svg class="w-12 h-12 text-ep-primary">
+                                                <use href="{f:uri.image(src: 'EXT:ep_theme/Resources/Public/images/icons_sprite.svg')}#icon-teaser-grid"></use>
+                                            </svg>
+                                        </button>
+                                        <button type="button"
+                                                aria-label="vergrößerte Ansicht"
+                                                data-action="teasergrid#block"
+                                                data-teasergrid-target="button">
+                                            <svg class="w-12 h-12 text-ep-primary">
+                                                <use href="{f:uri.image(src: 'EXT:ep_theme/Resources/Public/images/icons_sprite.svg')}#icon-teaser-single"></use>
+                                            </svg>
+                                        </button>
+                                    </div>
+                                    <div class="grid grid-cols-2 xl:grid-cols-3 gap-4 md:gap-8"
+                                         data-teasergrid-target="container">
+                                        <f:for each="{teasers}" as="teaser" iteration="iteration">
+                                            <f:render partial="Product/Teaser" section="Teaser" arguments="{
+                                                concept: teaser.concept,
+                                                hotel: teaser.hotel,
+                                                product: teaser.product,
+                                                country: teaser.country,
+                                                region: teaser.region,
+                                                productImage: teaser.product.images.original.0,
+                                                nights: teaser.nights,
+                                                board: teaser.board,
+                                                minPrice: teaser.minPrice,
+                                                daytrip: teaser.daytrip,
+                                                season: teaser.season,
+                                                forceHotelUid: teaser.forceHotelUid,
+                                                dateFrom: dateFrom,
+                                                dateTo: dateTo,
+                                                index: iteration.index,
+                                                globalConceptCode: settings.globalConceptCode,
+                                                skiPassIncluded: teaser.skiPassIncluded
+                                            }"/>
+                                        </f:for>
+                                    </div>
+                                </f:else>
+                            </f:if>
                             <f:if condition="{settings.hideMoreLink}">
                                 <f:else>
                                     <div class="text-right mt-4">
diff --git a/public/typo3conf/ext/ep_theme/Resources/Private/Templates/Product/Teasergroup.html b/public/typo3conf/ext/ep_theme/Resources/Private/Templates/Product/Teasergroup.html
index 0520911d..eb6c4b58 100644
--- a/public/typo3conf/ext/ep_theme/Resources/Private/Templates/Product/Teasergroup.html
+++ b/public/typo3conf/ext/ep_theme/Resources/Private/Templates/Product/Teasergroup.html
@@ -14,50 +14,81 @@
                           arguments="{header: data.header, subheader: data.subheader, layout: data.header_layout, link: data.header_link, default: settings.defaultHeaderType}" />
                 <f:if condition="{teasers}">
                     <f:then>
-                        <div class="flex items-center space-x-1 mb-2 sm:hidden">
-                            <button type="button"
-                                    class="opacity-50"
-                                    aria-label="kompakte Ansicht"
-                                    data-action="teasergrid#grid"
-                                    data-teasergrid-target="button">
-                                <svg class="w-12 h-12 text-ep-primary">
-                                    <use href="{f:uri.image(src: 'EXT:ep_theme/Resources/Public/images/icons_sprite.svg')}#icon-teaser-grid"></use>
-                                </svg>
-                            </button>
-                            <button type="button"
-                                    aria-label="vergrößerte Ansicht"
-                                    data-action="teasergrid#block"
-                                    data-teasergrid-target="button">
-                                <svg class="w-12 h-12 text-ep-primary">
-                                    <use href="{f:uri.image(src: 'EXT:ep_theme/Resources/Public/images/icons_sprite.svg')}#icon-teaser-single"></use>
-                                </svg>
-                            </button>
-                        </div>
-                        <div class="grid grid-cols-2 lg:grid-cols-3 gap-4 md:gap-8"
-                             data-teasergrid-target="container">
-                            <f:for each="{teasers}" as="teaser" iteration="iteration">
-                                <f:render partial="Product/Teaser" section="Teaser" arguments="{
-                                concept: teaser.concept,
-                                hotel: teaser.hotel,
-                                product: teaser.product,
-                                country: teaser.country,
-                                region: teaser.region,
-                                productImage: teaser.product.images.original.0,
-                                nights: teaser.nights,
-                                board: teaser.board,
-                                minPrice: teaser.minPrice,
-                                daytrip: teaser.daytrip,
-                                season: teaser.season,
-                                forceHotelUid: teaser.forceHotelUid,
-                                dateFrom: dateFrom,
-                                dateTo: dateTo,
-                                new: teaser.new,
-                                index: iteration.index,
-                                globalConceptCode: settings.globalConceptCode,
-                                skiPassIncluded: teaser.skiPassIncluded
-                            }"/>
-                            </f:for>
-                        </div>
+                        <f:if condition="{teasers -> f:count()} <= 2">
+                            <f:then>
+                                <f:for each="{teasers}" as="teaser" iteration="iteration">
+                                    <div class="grid gap-y-4 md:gap-y-8">
+                                        <f:render partial="Product/Teaser" section="Teaser" arguments="{
+                                            landscape: 1,
+                                            concept: teaser.concept,
+                                            hotel: teaser.hotel,
+                                            product: teaser.product,
+                                            country: teaser.country,
+                                            region: teaser.region,
+                                            productImage: teaser.product.images.original.0,
+                                            nights: teaser.nights,
+                                            board: teaser.board,
+                                            minPrice: teaser.minPrice,
+                                            daytrip: teaser.daytrip,
+                                            season: teaser.season,
+                                            forceHotelUid: teaser.forceHotelUid,
+                                            dateFrom: dateFrom,
+                                            dateTo: dateTo,
+                                            new: teaser.new,
+                                            index: iteration.index,
+                                            globalConceptCode: settings.globalConceptCode,
+                                            skiPassIncluded: teaser.skiPassIncluded
+                                        }"/>
+                                    </div>
+                                </f:for>
+                            </f:then>
+                            <f:else>
+                                <div class="flex items-center space-x-1 mb-2 sm:hidden">
+                                    <button type="button"
+                                            class="opacity-50"
+                                            aria-label="kompakte Ansicht"
+                                            data-action="teasergrid#grid"
+                                            data-teasergrid-target="button">
+                                        <svg class="w-12 h-12 text-ep-primary">
+                                            <use href="{f:uri.image(src: 'EXT:ep_theme/Resources/Public/images/icons_sprite.svg')}#icon-teaser-grid"></use>
+                                        </svg>
+                                    </button>
+                                    <button type="button"
+                                            aria-label="vergrößerte Ansicht"
+                                            data-action="teasergrid#block"
+                                            data-teasergrid-target="button">
+                                        <svg class="w-12 h-12 text-ep-primary">
+                                            <use href="{f:uri.image(src: 'EXT:ep_theme/Resources/Public/images/icons_sprite.svg')}#icon-teaser-single"></use>
+                                        </svg>
+                                    </button>
+                                </div>
+                                <div class="grid grid-cols-2 lg:grid-cols-3 gap-4 md:gap-8"
+                                     data-teasergrid-target="container">
+                                    <f:for each="{teasers}" as="teaser" iteration="iteration">
+                                        <f:render partial="Product/Teaser" section="Teaser" arguments="{
+                                            concept: teaser.concept,
+                                            hotel: teaser.hotel,
+                                            product: teaser.product,
+                                            country: teaser.country,
+                                            region: teaser.region,
+                                            productImage: teaser.product.images.original.0,
+                                            nights: teaser.nights,
+                                            board: teaser.board,
+                                            minPrice: teaser.minPrice,
+                                            daytrip: teaser.daytrip,
+                                            season: teaser.season,
+                                            forceHotelUid: teaser.forceHotelUid,
+                                            dateFrom: dateFrom,
+                                            dateTo: dateTo,
+                                            new: teaser.new,
+                                            index: iteration.index,
+                                            globalConceptCode: settings.globalConceptCode,
+                                            skiPassIncluded: teaser.skiPassIncluded
+                                        }"/>
+                                    </f:for>
+                                </div>
+                            </f:else>
+                        </f:if>
                         <f:if condition="{settings.hideMoreLink}">
                             <f:else>
                                 <div class="text-right mt-4">