{namespace ep=EP\EpEvents\ViewHelpers}
<f:link.page pageUid="{offer.detailPage}" class="searchresult-item {ep:sectionCssClass(sectionValue: offer.configuratorType)}"
             additionalParams="{search: search.query}" title="Beispielangebot {offer.name} {offer.location.name}">
    <div class="card card--no-form searchresult-item__card">
        <div class="card__inner">
            <f:if condition="{offer.imageTeaser}">
                <f:then>
                    <picture>
                        <f:if condition="{offer.imageTeaserMobile}">
                            <source media="(max-width: 512px)"
                                    srcset="{f:uri.image(src: offer.imageTeaserMobile.uid, treatIdAsReference: 1, maxWidth: '500', crop: offer.imageTeaserMobile.crop)} 500w"/>
                        </f:if>
                        <img class="card__image scale" src="{f:uri.image(src: offer.imageTeaser.uid, treatIdAsReference: 1, crop: offer.imageTeaser.crop, maxWidth: '500')}" alt="{offer.imageTeaser.alternative}">
                    </picture>
                </f:then>
                <f:else>
                    <img class="card__image scale" src="https://placehold.it/370x300" alt="Platzhalter">
                </f:else>
            </f:if>
            <div class="card__caption">
                <span class="card__subtitle">{offer.name -> ep:softHyphen()}</span>
                <span class="card__title">{offer.location.name -> ep:softHyphen()}</span>
            </div>
        </div>
    </div>
    <div class="searchresult-item__text">
        <h2 class="searchresult-item__title"><span>Beispielangebot</span> {offer.name -> ep:softHyphen()} {offer.location.name -> ep:softHyphen()}</h2>
        <h3 class="searchresult-item__subtitle">{offer.headline}</h3>
        {offer.header -> f:format.html()}
        <span class="button button--transparent">» Mehr erfahren</span>
    </div>
</f:link.page>