<div {{ attributes|raw }}>

    {% set stepNumber = { willkommen: 2, teilnehmer: 3, anschrift: 4, fertig: 5, fotoeinwilligung: 4 }[step]|default(2) %}
    {% set headKey = { willkommen: 'welcome', teilnehmer: 'children', anschrift: 'address', fertig: 'done', fotoeinwilligung: 'address' }[step]|default('welcome') %}

    <div class="mx-auto max-w-[720px] py-10 lg:py-14">

        {% include '@Contao/fragment/onboarding/_stepper.html.twig' with { current: stepNumber } only %}

        {% include '@Contao/fragment/onboarding/_page_head.html.twig' with {
            kicker: ('onboarding.head.' ~ headKey ~ '.kicker')|trans({}, 'cms'),
            title: ('onboarding.head.' ~ headKey ~ '.title')|trans({}, 'cms'),
            lede: ('onboarding.head.' ~ headKey ~ '.lede')|trans({}, 'cms'),
        } only %}

        <div class="overflow-hidden rounded-2xl border border-gray-200 bg-white shadow-lg dark:border-gray-700 dark:bg-gray-800">
            {% set template = "@Contao/components/registration_welcome/#{step}.html.twig" %}
            {% include template %}
        </div>

    </div>

</div>
