<html xmlns:f="http://typo3.org/ns/TYPO3/CMS/Fluid/ViewHelpers"
      xmlns:v="http://typo3.org/ns/FluidTYPO3/Vhs/ViewHelpers" data-namespace-typo3-fluid="true">
<f:if condition="{images.0}">
    <f:then>
        <v:variable.set name="heroBg" value="{images.0.uid}"/>
    </f:then>
    <f:else>
        <f:alias map="{img: '{v:page.resources.fal() -> v:iterator.first()}'}">
            <v:variable.set name="heroBg" value="{img.uid}"/>
        </f:alias>
    </f:else>
</f:if>
<div class="hero hero-content{f:if(condition: heroBg, then: ' has-background')} {f:if(condition: data.tx_amdsbear_herosize, then: ' is-{data.tx_amdsbear_herosize}', else: 'is-normal')} text-bg-primary position-relative d-flex align-items-center overflow-hidden">
    <div class="container hero-text text-white position-relative z-1" style="--bs-gutter-x:4vw">
        <f:if condition="{data.header}">
            <div class="hero-header fs-1 fs-sm-2 lh-sm fw-bold">
                <f:format.raw>{data.header}</f:format.raw>
            </div>
        </f:if>
        <f:if condition="{data.subheader}">
            <div class="hero-subheader fs-1 lh-sm fw-light">
                <f:format.raw>{data.subheader}</f:format.raw>
            </div>
        </f:if>
        <f:if condition="{data.bodytext}">
            <div class="hero-lead">{data.bodytext -> f:format.html(parseFuncTSPath: 'lib.parseFunc')}</div>
        </f:if>
    </div>
    <f:if condition="{heroBg}">
        <div class="hero-bg hero-{data.uid} position-absolute w-100 h-100">
            <sms:image src="{heroBg}"
                       treatIdAsReference="true"
                       class="object-fit-cover h-100 w-100 position-absolute"
                       width="1920"
                       breakpoints="{
                       0: {'cropVariant': 'desktop', 'media': '(min-width: 1400px)', 'srcset': '1440, 1600, 1920, 2560, 3840', 'sizes':'100vw'},
                       1: {'cropVariant': 'tablet', 'media': '(min-width: 992px)','srcset': '1024, 1280, 1920, 2048, 2360, 2560', 'sizes':'100vw'},
                       2: {'cropVariant': 'mobile', 'srcset': '400, 600, 800, 1000, 1200, 1400, 1600', 'sizes':'100vw'}
                    }"/>

        </div>
    </f:if>
    <f:if condition="{data.accessibility_bypass}">
        <div class="scrolldownindicator d-none d-lg-block position-absolute start-50 translate-middle">
            <a href="#skip" class="sr-only sr-only-focusable text-decoration-none">
                <f:if condition="{data.accessibility_bypass_text}">
                    <f:then>
                        <span>{data.accessibility_bypass_text}</span>
                    </f:then>
                    <f:else>
                        <span>Bitte scrollen</span>
                    </f:else>
                </f:if>
            </a>
        </div>
    </f:if>
</div>

