feat: various a11y fixes

This commit is contained in:
Björn Fromme
2025-05-14 14:37:40 +02:00
parent d9e1c79714
commit 69204656ae
47 changed files with 230 additions and 217 deletions
@@ -38,7 +38,6 @@ plugin.tx_eptheme {
defaultDetailPageUid = {$plugin.tx_epproducts.settings.defaultDetailPageUid}
coronaUpdatesPageUid = {$plugin.tx_eptheme.settings.coronaUpdatesPageUid}
logoImage = {$plugin.tx_eptheme.settings.logoImage}
defaultTitle < sitetitle
forceActiveTopnavUid = {$plugin.tx_eptheme.settings.forceActiveTopnavUid}
eventDateDayFrom = {$plugin.tx_eptheme.settings.eventDateDayFrom}
eventDateDayTo = {$plugin.tx_eptheme.settings.eventDateDayTo}
@@ -25,7 +25,7 @@ h4,
}
.subline {
@apply block text-xs md:text-sm font-normal leading-6 opacity-60;
@apply block text-sm md:text-base font-normal leading-6;
}
// Lists
@@ -3,14 +3,20 @@
xmlns:f="http://typo3.org/ns/fluid/ViewHelpers">
<f:render partial="Mainnav" section="Main" arguments="{_all}"/>
<f:render partial="HeaderSlider" arguments="{_all}"/>
<f:if condition="{data.tx_eptheme_hide_searchbar} || {settings.hideSearchbar}">
<f:else>
<f:cObject typoscriptObjectPath="lib.searchBar"/>
</f:else>
</f:if>
<f:render section="Content"/>
<f:render partial="Footer" arguments="{_all}"/>
<header>
<f:render partial="HeaderSlider" arguments="{_all}"/>
</header>
<main>
<f:if condition="{data.tx_eptheme_hide_searchbar} || {settings.hideSearchbar}">
<f:else>
<f:cObject typoscriptObjectPath="lib.searchBar"/>
</f:else>
</f:if>
<f:render section="Content"/>
</main>
<footer>
<f:render partial="Footer" arguments="{_all}"/>
</footer>
<f:render partial="ContactBar" arguments="{_all}"/>
<f:render partial="Topnav" arguments="{_all}"/>
<f:render partial="Mobilenav" section="Main" arguments="{_all}"/>
@@ -3,10 +3,16 @@
xmlns:f="http://typo3.org/ns/fluid/ViewHelpers">
<f:render partial="Mainnav" section="Main" arguments="{_all}"/>
<f:render partial="EventHero" arguments="{_all}"/>
<f:render partial="EventDisturber" arguments="{headline: settings.eventDisturberHeadline, listItems: settings.eventDisturberListitems, buttonLabel: settings.eventDisturberButtonLabel, buttonLink: settings.eventDisturberButtonLink}"/>
<f:render section="Content"/>
<f:render partial="Footer" arguments="{_all}"/>
<header>
<f:render partial="EventHero" arguments="{_all}"/>
<f:render partial="EventDisturber" arguments="{headline: settings.eventDisturberHeadline, listItems: settings.eventDisturberListitems, buttonLabel: settings.eventDisturberButtonLabel, buttonLink: settings.eventDisturberButtonLink}"/>
</header>
<main>
<f:render section="Content"/>
</main>
<footer>
<f:render partial="Footer" arguments="{_all}"/>
</footer>
<f:render partial="ContactBar" arguments="{_all}"/>
<f:render partial="Topnav" arguments="{_all}"/>
<f:render partial="Mobilenav" section="Main" arguments="{_all}"/>
@@ -3,16 +3,22 @@
xmlns:f="http://typo3.org/ns/fluid/ViewHelpers">
<f:render partial="Mainnav" section="Main" arguments="{_all}"/>
<f:render partial="HeaderSliderSmall" arguments="{_all}"/>
<f:if condition="{data.tx_eptheme_hide_searchbar} || {settings.hideSearchbar}">
<f:else>
<f:cObject typoscriptObjectPath="lib.searchBar"/>
</f:else>
</f:if>
<f:cObject typoscriptObjectPath="lib.breadcrumb"/>
<f:render section="Content"/>
<f:render section="Teasers"/>
<f:render partial="Footer" arguments="{_all}"/>
<header>
<f:render partial="HeaderSliderSmall" arguments="{_all}"/>
<f:if condition="{data.tx_eptheme_hide_searchbar} || {settings.hideSearchbar}">
<f:else>
<f:cObject typoscriptObjectPath="lib.searchBar"/>
</f:else>
</f:if>
</header>
<main>
<f:cObject typoscriptObjectPath="lib.breadcrumb"/>
<f:render section="Content"/>
<f:render section="Teasers"/>
</main>
<footer>
<f:render partial="Footer" arguments="{_all}"/>
</footer>
<f:render partial="ContactBar" arguments="{_all}"/>
<f:render partial="Topnav" arguments="{_all}"/>
<f:render partial="Mobilenav" section="Main" arguments="{_all}"/>
@@ -3,24 +3,30 @@
xmlns:f="http://typo3.org/ns/fluid/ViewHelpers">
<f:render partial="Mainnav" section="Main" arguments="{_all}"/>
<f:render partial="HeaderSliderSmall" arguments="{_all}"/>
<f:if condition="{data.tx_eptheme_hide_searchbar}">
<f:else>
<f:cObject typoscriptObjectPath="lib.searchBar"/>
</f:else>
</f:if>
<f:cObject typoscriptObjectPath="lib.breadcrumb"/>
<f:render section="Header" optional="true"/>
<div class="container grid grid-cols-3 gap-8">
<div class="col-span-3 lg:col-span-1 order-last lg:order-none">
<f:render section="Sidebar"/>
<header>
<f:render partial="HeaderSliderSmall" arguments="{_all}"/>
<f:if condition="{data.tx_eptheme_hide_searchbar}">
<f:else>
<f:cObject typoscriptObjectPath="lib.searchBar"/>
</f:else>
</f:if>
</header>
<main>
<f:cObject typoscriptObjectPath="lib.breadcrumb"/>
<f:render section="Header" optional="true"/>
<div class="container grid grid-cols-3 gap-8">
<div class="col-span-3 lg:col-span-1 order-last lg:order-none">
<f:render section="Sidebar"/>
</div>
<div class="col-span-3 lg:col-span-2">
<f:render section="Content"/>
</div>
</div>
<div class="col-span-3 lg:col-span-2">
<f:render section="Content"/>
</div>
</div>
<f:render section="Teasers"/>
<f:render partial="Footer" arguments="{_all}"/>
<f:render section="Teasers"/>
</main>
<footer>
<f:render partial="Footer" arguments="{_all}"/>
</footer>
<f:render partial="ContactBar" arguments="{_all}"/>
<f:render partial="Topnav" arguments="{_all}"/>
<f:render partial="Mobilenav" section="Main" arguments="{_all}"/>
@@ -3,19 +3,25 @@
xmlns:f="http://typo3.org/ns/fluid/ViewHelpers">
<f:render partial="Mainnav" section="Main" arguments="{_all}"/>
<f:render partial="HeaderSliderSmall" arguments="{_all}"/>
<f:cObject typoscriptObjectPath="lib.breadcrumb"/>
<f:render section="Header" optional="true"/>
<div class="container grid grid-cols-3 gap-8">
<div class="col-span-3 lg:col-span-1 order-last lg:order-none">
<f:render section="Sidebar"/>
<header>
<f:render partial="HeaderSliderSmall" arguments="{_all}"/>
</header>
<main>
<f:cObject typoscriptObjectPath="lib.breadcrumb"/>
<f:render section="Header" optional="true"/>
<div class="container grid grid-cols-3 gap-8">
<div class="col-span-3 lg:col-span-1 order-last lg:order-none">
<f:render section="Sidebar"/>
</div>
<div class="col-span-3 lg:col-span-2">
<f:render section="Content"/>
</div>
</div>
<div class="col-span-3 lg:col-span-2">
<f:render section="Content"/>
</div>
</div>
<f:render section="Teasers"/>
<f:render partial="Footer" arguments="{_all}"/>
<f:render section="Teasers"/>
</main>
<footer>
<f:render partial="Footer" arguments="{_all}"/>
</footer>
<f:render partial="ContactBar" arguments="{_all}"/>
<f:render partial="Topnav" arguments="{_all}"/>
<f:render partial="Mobilenav" section="Main" arguments="{_all}"/>
@@ -3,24 +3,30 @@
xmlns:f="http://typo3.org/ns/fluid/ViewHelpers">
<f:render partial="Mainnav" section="Main" arguments="{_all}"/>
<f:render partial="HeaderSliderSmall" arguments="{_all}"/>
<f:if condition="{data.tx_eptheme_hide_searchbar}">
<f:else>
<f:cObject typoscriptObjectPath="lib.searchBar"/>
</f:else>
</f:if>
<f:cObject typoscriptObjectPath="lib.breadcrumb"/>
<f:render section="Header" optional="true"/>
<div class="container grid grid-cols-3 gap-8">
<div class="col-span-3 lg:col-span-2">
<f:render section="Content"/>
<header>
<f:render partial="HeaderSliderSmall" arguments="{_all}"/>
<f:if condition="{data.tx_eptheme_hide_searchbar}">
<f:else>
<f:cObject typoscriptObjectPath="lib.searchBar"/>
</f:else>
</f:if>
</header>
<main>
<f:cObject typoscriptObjectPath="lib.breadcrumb"/>
<f:render section="Header" optional="true"/>
<div class="container grid grid-cols-3 gap-8">
<div class="col-span-3 lg:col-span-2">
<f:render section="Content"/>
</div>
<div class="col-span-3 lg:col-span-1">
<f:render section="Sidebar"/>
</div>
</div>
<div class="col-span-3 lg:col-span-1">
<f:render section="Sidebar"/>
</div>
</div>
<f:render section="Teasers"/>
<f:render partial="Footer" arguments="{_all}"/>
<f:render section="Teasers"/>
</main>
<footer>
<f:render partial="Footer" arguments="{_all}"/>
</footer>
<f:render partial="ContactBar" arguments="{_all}"/>
<f:render partial="Topnav" arguments="{_all}"/>
<f:render partial="Mobilenav" section="Main" arguments="{_all}"/>
@@ -3,19 +3,25 @@
xmlns:f="http://typo3.org/ns/fluid/ViewHelpers">
<f:render partial="Mainnav" section="Main" arguments="{_all}"/>
<f:render partial="HeaderSliderSmall" arguments="{_all}"/>
<f:cObject typoscriptObjectPath="lib.breadcrumb"/>
<f:render section="Header" optional="true"/>
<div class="container grid grid-cols-3 gap-8">
<div class="col-span-3 lg:col-span-2">
<f:render section="Content"/>
<header>
<f:render partial="HeaderSliderSmall" arguments="{_all}"/>
<f:cObject typoscriptObjectPath="lib.breadcrumb"/>
</header>
<main>
<f:render section="Header" optional="true"/>
<div class="container grid grid-cols-3 gap-8">
<div class="col-span-3 lg:col-span-2">
<f:render section="Content"/>
</div>
<div class="col-span-3 lg:col-span-1">
<f:render section="Sidebar"/>
</div>
</div>
<div class="col-span-3 lg:col-span-1">
<f:render section="Sidebar"/>
</div>
</div>
<f:render section="Teasers"/>
<f:render partial="Footer" arguments="{_all}"/>
<f:render section="Teasers"/>
</main>
<footer>
<f:render partial="Footer" arguments="{_all}"/>
</footer>
<f:render partial="ContactBar" arguments="{_all}"/>
<f:render partial="Topnav" arguments="{_all}"/>
<f:render partial="Mobilenav" section="Main" arguments="{_all}"/>
@@ -3,13 +3,13 @@
xmlns:ep="http://typo3.org/ns/EP/EpTheme/ViewHelpers"
xmlns:f="http://typo3.org/ns/fluid/ViewHelpers">
<div class="container bg-white flex items-center justify-between">
<header class="container bg-white flex items-center justify-between">
<f:link.typolink parameter="{f:if(condition: settings.logoLink, then: settings.logoLink, else: settings.defaultHomeUid)}"
class="block lg:pb-4"
title="{settings.defaultTitle}">
<f:image src="{settings.logoImage}"
title="zur Startseite">
<f:image src="Logo"
class="block w-auto {ep:themeClasses(classes: '{ep: \'h-10 lg:h-12\', sbw: \'h-14 lg:h-24\', snz: \'h-14 lg:h-24\', suz: \'h-14 lg:h-24\', uch: \'h-12 lg:h-20\', ser: \'h-10 lg:h-12\'}', key: settings.themekey)}"
alt="{settings.defaultTitle}"/>
alt="Logo"/>
</f:link.typolink>
<f:link.typolink parameter="{settings.myEpPageUid}"
title="My E&P"
@@ -17,8 +17,12 @@
<div class="text-xl lg:text-2xl font-light leading-none">Login</div>
<div class="text-lg lg:text-xl font-medium leading-none">My E&P</div>
</f:link.typolink>
</div>
<f:render section="Content"/>
<f:render partial="Footer" arguments="{_all}"/>
</header>
<main>
<f:render section="Content"/>
</main>
<footer>
<f:render partial="Footer" arguments="{_all}"/>
</footer>
<f:render partial="Config" arguments="{_all}" />
</html>
@@ -4,7 +4,7 @@
xmlns:f="http://typo3.org/ns/fluid/ViewHelpers">
<f:section name="Teaser">
<a href="{f:uri.typolink(parameter: city.detailPage)}" class="flex flex-col" title="{city.name}">
<a href="{f:uri.typolink(parameter: city.detailPage)}" class="flex flex-col">
<div class="relative">
{ep:icon(icon: 'flag-{city.country.code -> f:format.case(mode: \'lower\')}', class: 'w-8 h-6 absolute top-0 left-0')}
<f:alias map="{teaserImage: city.teaserImage, defaultImage: city.images.0}">
@@ -5,7 +5,7 @@
<f:section name="Teaser">
<f:if condition="{concept}">
<a href="{f:uri.typolink(parameter: concept.detailPage)}" title="{concept.name}" class="flex flex-col">
<a href="{f:uri.typolink(parameter: concept.detailPage)}" class="flex flex-col">
<div class="relative">
<f:alias map="{teaserImage: concept.teaserImage, defaultImage: concept.headerImage}">
<f:if condition="{teaserImage}">
@@ -6,7 +6,6 @@
<div class="contact-bar">
<a href="{f:uri.typolink(parameter: settings.watchlistPageUid)}"
class="contact-bar__item"
title="Merkliste"
data-controller="watchlist-label"
data-action="watchlist-toggle:toggle@window->watchlist-label#update"
rel="nofollow">
@@ -17,7 +16,6 @@
</a>
<a href="tel:{settings.phoneNumberLink}"
class="contact-bar__item"
title="Telefonische Beratung"
rel="nofollow">
{ep:icon(icon: 'phone', class: 'contact-bar__icon')}
<div class="hidden md:block">
@@ -25,8 +23,7 @@
</div>
</a>
<f:link.email email="{settings.contactFormToEmail}"
class="contact-bar__item"
title="E-Mail">
class="contact-bar__item">
{ep:icon(icon: 'email', class: 'contact-bar__icon')}
<div class="contact-bar__label">
{settings.contactFormToEmail}
@@ -35,7 +32,6 @@
<f:if condition="{settings.whatsApp}">
<a href="{settings.whatsAppNumberLink}"
class="contact-bar__item"
title="Whatsapp"
target="_blank"
rel="nofollow">
{ep:icon(icon: 'whatsapp', class: 'contact-bar__icon')}
@@ -83,7 +79,7 @@
</a>
</f:if>
<f:if condition="{settings.englishPageUid}">
<f:link.typolink parameter="{settings.englishPageUid}" title="English" class="contact-bar__item">
<f:link.typolink parameter="{settings.englishPageUid}" class="contact-bar__item">
{ep:icon(icon: 'flag-gb', class: 'contact-bar__icon')}
<div class="contact-bar__label">
English
@@ -91,7 +87,7 @@
</f:link.typolink>
</f:if>
<f:if condition="{settings.germanPageUid}">
<f:link.typolink parameter="{settings.germanPageUid}" title="English" class="contact-bar__item">
<f:link.typolink parameter="{settings.germanPageUid}" class="contact-bar__item">
{ep:icon(icon: 'flag-de', class: 'contact-bar__icon')}
<div class="contact-bar__label">
Deutsch
@@ -18,8 +18,7 @@
class="block w-full h-auto rounded-full"
width="400"
height="400c"
alt="{image.alternative}"
title="{image.title}" />
alt="{image.alternative}" />
</f:if>
<a href="tel:{settings.phoneNumber -> v:format.pregReplace(pattern: '/[\-\s]/', replacement: '')}"
rel="nofollow"
@@ -12,7 +12,9 @@
<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" title="{button.container.label -> f:format.raw()}">{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>
<f:render partial="Disrupter/Outlines"
@@ -13,16 +13,16 @@
loaderimg="EXT:ep_theme/Resources/Public/images/lazy.png"
class="block w-full h-auto rounded-full"
width="400"
alt="{image.alternative}"
title="{image.title}" />
alt="{image.alternative}" />
</f:if>
</a>
</div>
<div class="col-md-6 ">
<div>{data.text -> f:format.html()}</div>
</div>
<a href="{f:uri.typolink(parameter: button.container.link)}" class="btn btn-info"
title="{button.container.label -> f:format.raw()}">{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>
</f:alias>
@@ -16,8 +16,7 @@
class="block w-full h-auto rounded-full"
width="400"
height="400c"
alt="{image.alternative}"
title="{image.title}" />
alt="{image.alternative}" />
</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>
@@ -19,8 +19,7 @@
class="block w-full h-auto rounded-full"
width="400"
height="400c"
alt="{teaserImage.alternative}"
title="{teaserImage.title}" />
alt="{teaserImage.alternative}" />
</f:if>
<a href="tel:{settings.phoneNumber -> v:format.pregReplace(pattern: '/[\-\s]/', replacement: '')}"
rel="nofollow"
@@ -13,16 +13,16 @@
loaderimg="EXT:ep_theme/Resources/Public/images/lazy.png"
class="block w-full h-auto rounded-full"
width="400"
alt="{teaserImage.alternative}"
title="{teaserImage.title}" />
alt="{teaserImage.alternative}" />
</f:if>
</a>
</div>
<div class="col-md-6 ">
<div>{data.bodytext -> f:format.html()}</div>
</div>
<a href="{f:uri.typolink(parameter: button.container.link)}" class="btn btn-info"
title="{button.container.label -> f:format.raw()}">{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>
</f:alias>
@@ -16,8 +16,7 @@
class="block w-full h-auto rounded-full"
width="400"
height="400c"
alt="{teaserImage.alternative}"
title="{teaserImage.title}" />
alt="{teaserImage.alternative}" />
</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>
@@ -22,8 +22,7 @@
</div>
<div class="w-full lg:w-1/3 lg:px-4">
<a class="button bg-button w-full"
href="{f:uri.typolink(parameter: buttonLink)}"
title="{buttonLabel -> f:format.raw()}">
href="{f:uri.typolink(parameter: buttonLink)}">
{buttonLabel -> f:format.raw()}
</a>
</div>
@@ -14,6 +14,7 @@
<f:if condition="{filter}">
<div class="mb-4 pr-2 w-80 border-b border-r border-white flex items-center justify-between">
<input type="text"
aria-label="Suchbegriff"
data-action="faq#filter"
class="bg-transparent border-0 uppercase ring-0 focus:ring-0 placeholder-white text-white"
placeholder="Suchbegriff">
@@ -44,8 +45,8 @@
<f:if condition="{settings.infoPageUid}">
<div class="flex items-center justify-end space-x-2 text-sm text-white">
{ep:icon(icon: 'info-circle', class: 'w-4 h-4')}
<a href="{f:uri.typolink(parameter: settings.infoPageUid)}">
Weitere Reiseinfos findet ihr <span class="underline">hier</span>
<a href="{f:uri.typolink(parameter: settings.infoPageUid)}" class="underline">
Weitere Reiseinfos findet ihr hier
</a>
</div>
</f:if>
@@ -20,7 +20,6 @@
<f:for each="{menuheader.children}" as="submenuitem">
<li>
<f:link.typolink parameter="{submenuitem.link}"
title="{submenuitem.linktext}"
class="inline-block py-2 text-lg leading-none text-white">
{submenuitem.title}
</f:link.typolink>
@@ -48,7 +47,6 @@
</span>
<a class="text-white whitespace-nowrap"
href="tel:{settings.phoneNumberLink}"
title="Service Telefon anrufen"
rel="nofollow">
{settings.phoneNumber}
</a>
@@ -73,7 +71,6 @@
</span>
<a class="text-white whitespace-nowrap"
href="{settings.whatsAppNumberLink}"
title="WhatsApp"
target="_blank"
rel="nofollow">
{settings.whatsApp}
@@ -100,22 +97,19 @@
<ul class="p-0 m-0">
<li>
<f:link.typolink parameter="{settings.legalNoticePageUid}"
class="text-white"
title="Impressum">
class="text-white">
Impressum
</f:link.typolink>
</li>
<li>
<f:link.typolink parameter="{settings.termsAndConditionsPageUid}"
class="text-white"
title="AGB">
class="text-white">
AGB
</f:link.typolink>
</li>
<li>
<f:link.typolink parameter="{settings.dataProtectionPageUid}"
class="text-white"
title="Datenschutz">
class="text-white">
Datenschutz
</f:link.typolink>
</li>
@@ -160,8 +154,7 @@
<ep:lazyLoadImage src="EXT:ep_theme/Resources/Public/images/pow_de.png"
loaderimg="EXT:ep_theme/Resources/Public/images/lazy.png"
class="block w-full h-auto"
alt="Protect our Winters"
title="Protect our Winters" />
alt="Protect our Winters" />
</a>
<a class="block bg-white p-2 w-24 md:w-16 xl:w-24 rounded"
href="https://www.unglobalcompact.org/"
@@ -172,8 +165,7 @@
loaderimg="EXT:ep_theme/Resources/Public/images/lazy.png"
class="block w-full h-auto"
width="100"
alt="Global Compact"
title="Global Compact" />
alt="Global Compact" />
</a>
</div>
</div>
@@ -44,17 +44,16 @@
<f:if condition="{slide.skipass} || {badge}">
<div class="herounit__badge-wrapper">
<f:if condition="{slide.skipass}">
<f:link.typolink parameter="{settings.skipassPageUid}" title="Skipass inklusive">
<f:link.typolink parameter="{settings.skipassPageUid}">
<div class="herounit__badge herounit__badge--skipass">
<p class="uppercase text-4xl font-bold leading-7 mb-2">Ski-<br>Pass</p>
<p class="uppercase">inklusive</p>
<div class="uppercase text-4xl font-bold leading-7 mb-2">Ski-<br>Pass</div>
<div class="uppercase">inklusive</div>
</div>
</f:link.typolink>
</f:if>
<f:if condition="{badge}">
<f:alias map="{badgeData: badge.0.data}">
<f:link.typolink parameter="{badgeData.link}"
title="{badgeData.title}">
<f:link.typolink parameter="{badgeData.link}">
<div class="herounit__badge herounit__badge--custom">
<svg viewBox="0 0 200 200"
xmlns="http://www.w3.org/2000/svg"
@@ -38,7 +38,7 @@
<f:if condition="{slide.skipass} || {badge}">
<div class="herounit__badge-wrapper">
<f:if condition="{settings.showSkipassBadge}">
<f:link.typolink parameter="{settings.skipassPageUid}" title="Skipass inklusive">
<f:link.typolink parameter="{settings.skipassPageUid}">
<div class="herounit__badge herounit__badge--skipass">
<p class="uppercase text-4xl font-bold leading-7 mb-2">Ski-<br>Pass</p>
<p class="uppercase">inklusive</p>
@@ -47,8 +47,7 @@
</f:if>
<f:if condition="{badge}">
<f:alias map="{badgeData: badge.0.data}">
<f:link.typolink parameter="{badgeData.link}"
title="{badgeData.title}">
<f:link.typolink parameter="{badgeData.link}">
<div class="hidden md:block absolute top-0 right-0 mt-12 mr-8 w-40 rotate-6">
<svg viewBox="0 0 200 200"
xmlns="http://www.w3.org/2000/svg"
@@ -4,7 +4,7 @@
xmlns:f="http://typo3.org/ns/fluid/ViewHelpers">
<f:section name="Teaser">
<a href="{f:uri.typolink(parameter: hotel.detailPage)}" title="{hotel.name}" class="flex flex-col">
<a href="{f:uri.typolink(parameter: hotel.detailPage)}" class="flex flex-col">
<div class="relative">
{ep:icon(icon: 'flag-{hotel.country.code -> f:format.case(mode: \'lower\')}', class: 'w-8 h-6 absolute top-0 left-0')}
<f:if condition="{hotel.images.original.0}">
@@ -13,14 +13,14 @@
</div>
<f:alias map="{image: images.0}">
<a href="{f:uri.image(image: image, cropVariant: 'zoom', maxWidth: '2560')}"
title="{image.title}"
data-action="lightbox#open">
<ep:lazyLoadImage image="{image}"
loaderimg="EXT:ep_theme/Resources/Public/images/lazy.png"
class="block w-full h-auto"
width="770"
height="430c+100"
alt="{image.alternative}"
title="{image.title}" />
alt="{image.alternative}"/>
</a>
</f:alias>
<f:if condition="{thumbnails}">
@@ -33,14 +33,14 @@
data-lightbox-target="thumb"
data-lightbox-index="{iteration.cycle}"
data-lightbox-caption="{image.originalResource.description}"
title="{image.title}"
class="block">
<ep:lazyLoadImage image="{image}"
loaderimg="EXT:ep_theme/Resources/Public/images/lazy.png"
class="block w-full h-auto"
width="150"
height="85c+100"
alt="{image.alternative}"
title="{image.title}" />
alt="{image.alternative}"/>
</a>
</f:if>
</f:for>
@@ -53,8 +53,9 @@
<a href="{f:uri.image(image: image, cropVariant: 'zoom', maxWidth: '2560')}"
data-lightbox-target="thumb"
data-lightbox-index="{iteration.cycle}"
data-lightbox-caption="{image.originalResource.description}"
title="{image.originalResource.title}">{iteration.index}</a>
data-lightbox-caption="{image.originalResource.description}">
{iteration.index}
</a>
</f:if>
</f:for>
</div>
@@ -14,8 +14,7 @@
class="block w-full h-auto"
width="770"
height="430c+100"
alt="{journey.image.alternative}"
title="{journey.image.title}" />
alt="{journey.image.alternative}" />
</f:if>
<f:if condition="{journey.byBus}">
<h3>
@@ -8,10 +8,10 @@
<div class="flex items-center hover-hover:lg:items-end justify-between px-4 py-2 lg:px-0 lg:pt-4 lg:pb-0">
<f:link.typolink parameter="{f:if(condition: settings.logoLink, then: settings.logoLink, else: settings.defaultHomeUid)}"
class="block lg:pb-4"
title="{settings.defaultTitle}">
title="zur Startseite">
<f:image src="{settings.logoImage}"
class="block w-auto {ep:themeClasses(classes: '{ep: \'h-10 lg:h-12\', sbw: \'h-14 lg:h-24\', snz: \'h-14 lg:h-24\', suz: \'h-14 lg:h-24\', uch: \'h-12 lg:h-20\', ser: \'h-10 lg:h-12\'}', key: settings.themekey)}"
alt="{settings.defaultTitle}"/>
alt="Logo"/>
</f:link.typolink>
<div class="hidden hover-hover:lg:block">
<f:render section="FirstLevel" arguments="{_all}"/>
@@ -50,8 +50,8 @@
<f:if condition="{topitem.children}">
<f:then>
<a href="{f:uri.typolink(parameter: topitem.data.uid)}"
class="text-zinc-800 uppercase lg:text-lg font-bold flex items-center"
title="{topitem.title}">
role="menuitem"
class="text-zinc-800 uppercase lg:text-lg font-bold flex items-center">
<span>{topitem.title}</span>
{ep:icon(icon: 'chevron-down', class: 'ml-1 w-4 h-4 group-hover:rotate-180')}
</a>
@@ -59,8 +59,8 @@
</f:then>
<f:else>
<a href="{topitem.link}"{f:if(condition: '{topitem.doktype} == 3', then: ' target="_blank"')}
class="block text-zinc-800 uppercase lg:text-lg font-bold"
title="{topitem.title}">
role="menuitem"
class="block text-zinc-800 uppercase lg:text-lg font-bold">
{topitem.title}
</a>
</f:else>
@@ -80,7 +80,7 @@
</button>
</f:then>
<f:else>
<f:link.typolink parameter="{settings.defaultSearchPageUid}">
<f:link.typolink parameter="{settings.defaultSearchPageUid}" title="zur Suche">
{ep:icon(icon: 'search', class: 'w-6 h-6')}
</f:link.typolink>
</f:else>
@@ -100,7 +100,7 @@
<li>
<f:if condition="{subitem.doktype} == 3">
<f:then>
<a href="{subitem.link}" target="_blank" title="{subitem.title}">
<a href="{subitem.link}" target="_blank">
<f:if condition="{subitem.data.tx_eptheme_context_country_code}">
{ep:icon(icon: 'flag-{subitem.data.tx_eptheme_context_country_code -> f:format.case(mode: \'lower\')}', class: 'w-8 h-6')}
</f:if>
@@ -111,8 +111,7 @@
</f:then>
<f:else>
<a href="{f:uri.typolink(parameter: subitem.data.uid)}"
class="flex items-center space-x-2 underlined"
title="{subitem.title}">
class="flex items-center space-x-2 underlined">
<f:if condition="{subitem.data.tx_eptheme_context_country_code}">
{ep:icon(icon: 'flag-{subitem.data.tx_eptheme_context_country_code -> f:format.case(mode: \'lower\')}', class: 'w-8 h-6')}
</f:if>
@@ -137,8 +136,7 @@
<li>
<a href="{subsubitem.link}"
class="text-zinc-800 text-lg"
target="_blank"
title="{subsubitem.title}">
target="_blank">
{subsubitem.title}
</a>
</li>
@@ -146,8 +144,7 @@
<f:else>
<li>
<a href="{f:uri.typolink(parameter: subsubitem.data.uid)}"
class="text-zinc-800 text-lg"
title="{subsubitem.title}">
class="text-zinc-800 text-lg">
{subsubitem.title}
</a>
</li>
@@ -13,8 +13,8 @@
<div class="fixed top-0 left-0 z-100 inset-x-0 px-4 py-2 hover-none:lg:py-4 flex justify-between bg-white shadow-md">
<f:link.typolink parameter="{f:if(condition: settings.logoLink, then: settings.logoLink, else: settings.defaultHomeUid)}"
class="block hover-hover:lg:pb-4"
title="{settings.defaultTitle}">
<f:image class="block h-10 lg:h-12 w-auto" src="{settings.logoImage}" alt="{settings.defaultTitle}"/>
title="zur Startseite">
<f:image class="block h-10 lg:h-12 w-auto" src="{settings.logoImage}" alt="Logo"/>
</f:link.typolink>
<div class="flex hover-hover:lg:hidden items-center space-x-4">
<f:if condition="{data.tx_eptheme_hide_searchbar}">
@@ -53,7 +53,6 @@
<div class="grid grid-cols-4 gap-x-2">
<a href="tel:{settings.phoneNumber -> v:format.pregReplace(pattern: '/[\-\s]/', replacement: '')}"
class="button bg-button flex items-center space-x-2"
title="Anrufen"
rel="nofollow">
{ep:icon(icon: 'phone', class: 'w-6 h-6 text-white')}
<span class="hidden sm:block">
@@ -62,7 +61,6 @@
</a>
<a href="https://api.whatsapp.com/send?phone={settings.whatsAppNumberLink}"
class="button bg-button flex items-center space-x-2"
title="WhatsApp"
rel="nofollow"
target="_blank">
{ep:icon(icon: 'whatsapp', class: 'w-6 h-6 text-white')}
@@ -72,8 +70,7 @@
</a>
<f:if condition="{settings.faqPageUid}">
<a href="{f:uri.typolink(parameter: settings.faqPageUid)}"
class="button bg-button flex items-center space-x-2"
title="FAQ">
class="button bg-button flex items-center space-x-2">
{ep:icon(icon: 'faq', class: 'w-6 h-6 text-white')}
<span class="hidden sm:block">
FAQ
@@ -82,8 +79,7 @@
</f:if>
<f:if condition="{settings.myEpPageUid}">
<f:link.typolink parameter="{settings.myEpPageUid}"
class="button bg-button flex items-center space-x-2"
title="My E&P">
class="button bg-button flex items-center space-x-2">
{ep:icon(icon: 'user', class: 'w-6 h-6 text-white')}
<span class="hidden sm:block">
My E&amp;P
@@ -105,8 +101,7 @@
data-collapse-collapsed-value="{f:if(condition: navitem.active, then: 'false', else: 'true')}">
<div class="flex items-center justify-between px-4 py-2 text-white {f:if(condition: navitem.data.tx_eptheme_navitemclass, then: navitem.data.tx_eptheme_navitemclass, else: 'bg-ep-primary')}">
<a href="{navitem.link}"
class="uppercase text-xl flex-1"
title="{navitem.title}">
class="uppercase text-xl flex-1">
{navitem.title}
</a>
<button type="button"
@@ -124,8 +119,7 @@
<f:else>
<li>
<a href="{navitem.link}"
class="block px-4 py-2 text-white uppercase text-xl {f:if(condition: navitem.data.tx_eptheme_navitemclass, then: navitem.data.tx_eptheme_navitemclass, else: 'bg-ep-primary')}"
title="{navitem.title}">
class="block px-4 py-2 text-white uppercase text-xl {f:if(condition: navitem.data.tx_eptheme_navitemclass, then: navitem.data.tx_eptheme_navitemclass, else: 'bg-ep-primary')}">
{navitem.title}
</a>
</li>
@@ -145,8 +139,7 @@
data-collapse-collapsed-value="{f:if(condition: subitem.active, then: 'false', else: 'true')}">
<div class="flex items-center justify-between">
<a href="{subitem.link}"
class="flex-1"
title="{subitem.title}">
class="flex-1">
{subitem.title}
</a>
<button type="button"
@@ -163,9 +156,7 @@
</f:then>
<f:else>
<li class="py-2">
<a href="{subitem.link}"
class=""
title="{subitem.title}">
<a href="{subitem.link}">
{subitem.title}
</a>
</li>
@@ -6,10 +6,10 @@
<f:if condition="{images}">
<f:if condition="{images -> f:count()} == 1">
<f:then>
<f:link.typolink parameter="{images.0.originalResource.link}">
<f:link.typolink parameter="{images.0.originalResource.link}" title="{images.0.title}">
<img src="{f:uri.image(image: images.0, width: '770', height: '430c+100')}"
class="block w-full h-auto mb-4"
alt="{images.0.alternative}" title="{images.0.title}">
alt="{images.0.alternative}">
</f:link.typolink>
</f:then>
<f:else>
@@ -21,10 +21,10 @@
<f:for each="{images}" as="image" iteration="iteration">
<li class="splide__slide">
<f:link.typolink parameter="{image.originalResource.link}"
class="relative bg-cover bg-center">
class="relative bg-cover bg-center" title="{image.title}">
<img src="{f:uri.image(image: image, width: '770', height: '430c+100')}"
class="block w-full h-auto"
alt="{image.alternative}" title="{image.title}">
alt="{image.alternative}">
</f:link.typolink>
</li>
</f:for>
@@ -34,9 +34,9 @@
<div class="hidden md:grid md:grid-cols-5 md:gap-2 md:pt-4 md:pb-8">
<f:for each="{images}" as="image" iteration="iteration">
<f:if condition="{iteration.cycle} <= 5">
<a href="#" class="block" data-slide="{iteration.index}">
<a href="#" class="block" data-slide="{iteration.index}" title="{image.title}">
<img src="{f:uri.image(image: image, width: '150', height: '85c+100')}"
class="block w-full h-auto" alt="{image.alternative}" title="{image.title}">
class="block w-full h-auto" alt="{image.alternative}">
</a>
</f:if>
</f:for>
@@ -31,7 +31,7 @@
</n:link>
<div class="md:flex-1">
<h3 class="blog-entry__headline">
<n:link newsItem="{newsItem}" settings="{settings}" title="{newsItem.title}">
<n:link newsItem="{newsItem}" settings="{settings}">
{newsItem.title}
</n:link>
</h3>
@@ -5,7 +5,7 @@
<li><strong>Wir informieren dich,</strong> wenn deine Reise buchbar ist - Trage dich in unsere
<f:link.typolink parameter="{settings.travelAlertPageUid}">Reisealert-Liste</f:link.typolink> ein!</li>
<li>Du kannst diese aber ggf. auch <strong>vorreservieren</strong>, oder wir helfen dir, eine andere Unterkunft
zu finden. Ruf uns an unter <a href="tel:{settings.phoneNumber -> v:format.pregReplace(pattern: '/[\-\s]/', replacement: '')}" title="Service Telefon anrufen" rel="nofollow">{settings.phoneNumber}</a>
zu finden. Ruf uns an unter <a href="tel:{settings.phoneNumber -> v:format.pregReplace(pattern: '/[\-\s]/', replacement: '')}" rel="nofollow">{settings.phoneNumber}</a>
oder schreibe an <f:link.email email="[email protected]"/>.</li>
</ul>
</div>
@@ -20,7 +20,7 @@
hx-target="body"
hx-swap="beforeend"
</f:if>
title="{region.name} {product.name} Details und Buchen">
>
<f:if condition="{productImage}">
<f:then>
<ep:lazyLoadImage image="{productImage}"
@@ -84,7 +84,6 @@
hx-target="body"
hx-swap="beforeend"
</f:if>
title="{region.name} {product.name} Details und Buchen"
class="flex-1 flex flex-col space-y-1 px-2 py-4 md:p-4">
<div class="product-teaser__label-name">
{product.name}
@@ -1,7 +1,6 @@
<f:if condition="{product.ratingVotesCount} > 0">
<a href="{f:uri.typolink(parameter: targetPageUid)}"
class="block bg-zinc-50 p-4 mb-4"
title="Reisebewertungen">
class="block bg-zinc-50 p-4 mb-4">
<p class="font-bold mb-1">
{label}
</p>
@@ -10,7 +10,6 @@
<f:link.typolink parameter="{region.awardLink}" title="{region.name}">
<f:image image="{region.awardImage}"
alt="{region.awardImage.alternative}"
title="{region.awardImage.title}"
maxWidth="165"
class="block max-w-full mx-auto"
/>
@@ -21,8 +21,7 @@
loaderimg="EXT:ep_theme/Resources/Public/images/lazy.png"
class="block w-full h-auto"
width="330"
alt="{regionMap.alternative}"
title="{regionMap.title}"/>
alt="{regionMap.alternative}"/>
</a>
</f:for>
</div>
@@ -10,8 +10,8 @@
<div class="fixed top-0 left-0 z-100 inset-x-0 px-4 py-2 hover-none:lg:py-4 flex justify-between bg-white shadow-md">
<a href="{f:uri.typolink(parameter: settings.defaultHomeUid)}"
class="block hover-hover:lg:pb-4"
title="{settings.defaultTitle}">
<f:image class="block h-10 lg:h-12 w-auto" src="{settings.logoImage}" alt="{settings.defaultTitle}"/>
title="zur Startseite">
<f:image class="block h-10 lg:h-12 w-auto" src="{settings.logoImage}" alt="Logo"/>
</a>
<button type="button"
aria-label="Suche schließen"
@@ -33,7 +33,7 @@
<f:if condition="{settings.showSkipassBadge} || {badge}">
<div class="herounit__badge-wrapper">
<f:if condition="{settings.showSkipassBadge}">
<f:link.typolink parameter="{settings.skipassPageUid}" title="Skipass inklusive">
<f:link.typolink parameter="{settings.skipassPageUid}">
<div class="herounit__badge herounit__badge--skipass">
<p class="uppercase text-4xl font-bold leading-7 mb-2">Ski-<br>Pass</p>
<p class="uppercase">inklusive</p>
@@ -42,8 +42,7 @@
</f:if>
<f:if condition="{badge}">
<f:alias map="{badgeData: badge.0.data}">
<f:link.typolink parameter="{badgeData.link}"
title="{badgeData.title}">
<f:link.typolink parameter="{badgeData.link}">
<div class="herounit__badge herounit__badge--custom">
<svg viewBox="0 0 200 200"
xmlns="http://www.w3.org/2000/svg"
@@ -26,8 +26,7 @@
class="block w-full h-auto"
width="500"
height="250c-100"
alt="{image.alternative}"
title="{image.title}" />
alt="{image.alternative}" />
</picture>
</f:then>
<f:else>
@@ -13,7 +13,7 @@
<source media="(max-width: 768px)" data-srcset="{f:uri.image(
image: image, width: '320', height: '140c-100'
)} 320w"/>
<img class="scale lazyload" title="{image.title}" alt="{image.alternative}"
<img class="scale lazyload" alt="{image.alternative}"
src="{f:uri.image(src: 'EXT:ep_theme/Resources/Public/images/lazy.png', width: '260', height: '160')}"
data-src="{f:uri.image(image: image, width: '260', height: '160c-100')}"
>
@@ -6,12 +6,10 @@
<f:render partial="Header/Header" arguments="{header: data.header, subheader: data.subheader, layout: data.header_layout, link: data.header_link, default: settings.defaultHeaderType}" />
{data.bodytext -> f:format.html()}
<f:if condition="{files}">
<f:link.typolink parameter="{files.0.link}">
<f:link.typolink parameter="{files.0.link}" title="{files.0.originalResource.title}">
<img class="img-responsive lazyload"
data-src="{f:uri.image(image: files.0, maxWidth: '770')}"
alt="{files.0.originalResource.alternative}"
title="{files.0.originalResource.title}"
>
alt="{files.0.originalResource.alternative}">
</f:link.typolink>
</f:if>
</f:section>
@@ -30,8 +30,7 @@
class="block w-full h-auto"
width="400c"
height="400"
alt="{image.alternative}"
title="{image.title}" />
alt="{image.alternative}" />
</f:link.typolink>
</div>
</f:section>
@@ -12,10 +12,10 @@
<f:if condition="{settings.mainSitePid}">
<f:link.typolink parameter="{settings.mainSitePid}"
class="topnav__item"
title="{settings.defaultTitle}">
title="zur Startseite">
<f:image src="EXT:ep_theme/Resources/Public/images/logo.svg"
class="h-5 w-auto"
alt="{settings.defaultTitle}"/>
alt="Logo"/>
</f:link.typolink>
</f:if>
<f:link.typolink parameter="{settings.defaultHomeUid}" class="topnav__item" title="E&amp;P">
@@ -26,8 +26,7 @@
<div class="flex-1 flex items-center">
<f:for each="{topnav}" as="menuitem">
<a class="topnav__item flex-grow{f:if(condition: menuitem.data.tx_eptheme_navitemclass, then: ' {menuitem.data.tx_eptheme_navitemclass}')}{f:if(condition: '{menuitem.active} || {menuitem.data.uid} == {settings.forceActiveTopnavUid}', then: ' bg-ep-secondary')}"
href="{menuitem.link}"{f:if(condition: '{menuitem.data.doktype} == 3', then: ' target="_blank"')}
title="{menuitem.title}">
href="{menuitem.link}"{f:if(condition: '{menuitem.data.doktype} == 3', then: ' target="_blank"')}>
{menuitem.title}
</a>
</f:for>
@@ -33,6 +33,7 @@
<button type="button"
class="opacity-50"
data-action="teasergrid#grid"
aria-label="kompakte Ansicht"
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>
@@ -40,6 +41,7 @@
</button>
<button type="button"
data-action="teasergrid#block"
aria-label="vergrößerte Ansicht"
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>
@@ -10,6 +10,7 @@
style="background-image: url({f:uri.image(src: 'EXT:ep_theme/Resources/Public/images/lazy.png')})">
<iframe class="absolute top-0 left-0 w-full h-full"
width="640" height="360" allowfullscreen
title="eingebettetes Video"
data-src="{ep:uri.video(value: data.header_link, layout: data.layout)}"
data-cookiefirst-category="advertising"></iframe>
<div class="cookiefirst-disabled-resource">
@@ -46,6 +46,7 @@
data-action="click->collapse#toggle"
class="w-full bg-transparent border-0 ring-0 focus:ring-0 text-white uppercase px-2 py-1 cursor-pointer placeholder-white"
placeholder="Zeitraum"
aria-label="Zeitraum"
value="{ep:dateRange(dateFrom: searchParams.dateFrom, dateTo: searchParams.dateTo, includeLabel: 0)}"
data-searchbar-target="dateRangeLabel"/>
<svg class="w-6 h-6 text-white absolute right-0 top-0 mr-2 mt-1 cursor-pointer"
@@ -57,6 +58,7 @@
<div class="flex justify-between divide-x divide-zinc-200">
<div class="pr-2">
<input type="hidden"
aria-label="Zeitraum"
data-datepicker-target="field">
</div>
<div class="flex-1 flex flex-col justify-between pl-2">
@@ -100,6 +102,7 @@
<input type="text"
data-action="click->collapse#toggle"
data-searchbar-target="paxLabel"
aria-label="Personenzahl"
value="{searchParams.pax}"
class="w-full bg-transparent border-0 ring-0 focus:ring-0 text-white uppercase px-2 py-1 cursor-pointer"/>
<svg class="w-6 h-6 text-white absolute right-0 top-0 mr-2 mt-1 cursor-pointer"
@@ -139,6 +142,7 @@
<input type="text"
data-action="click->collapse#toggle"
data-searchbar-target="destinationLabel"
aria-label="Reiseziel/Konzept"
class="w-full bg-transparent border-0 ring-0 focus:ring-0 text-white uppercase px-2 py-1 cursor-pointer placeholder-white"
placeholder="Reiseziel/Konzept"/>
<svg
@@ -161,9 +165,7 @@
<svg class="block w-8 h-6">
<use href="{f:uri.image(src: 'EXT:ep_theme/Resources/Public/images/icons_sprite.svg')}#icon-flag-{destination.country.code -> f:format.case(mode: 'lower')}"></use>
</svg>
<span>
{destination.country.label}
</span>
<span>{destination.country.label}</span>
</button>
</div>
<div class="col-span-3 flex flex-col items-start space-y-1">
@@ -212,6 +214,7 @@
data-collapse-collapsed-value="true">
<div class="relative border-r border-b border-white/50">
<input type="text"
aria-label="Preis"
data-action="click->collapse#toggle"
data-searchbar-target="priceRangeLabel"
class="w-full bg-transparent border-0 ring-0 focus:ring-0 text-white uppercase px-2 py-1 cursor-pointer placeholder-white"
@@ -251,7 +254,7 @@
</div>
<button type="submit"
class="hidden reduced:block reduced:ml-4">
class="hidden reduced:block reduced:ml-4" title="Suchen">
<svg class="w-8 h-8 text-white bg-badge-gradient">
<use href="{f:uri.image(src: 'EXT:ep_theme/Resources/Public/images/icons_sprite.svg')}#icon-chevron-right"></use>
</svg>