<footer class="c-site-footer c-site-footer--divided {f:if(condition: '{altMetaMenu}', then: ' c-site-footer--elevated')}">
    <div class="c-site-footer__container">
        <f:if condition="{neos:rendering.inBackend()}">
            <f:then>
                <div class="c-site-footer__column c-site-footer__button-column">
                    {footer.buttons -> f:format.raw()}
                </div>
            </f:then>
            <f:else>
                <div class="c-site-footer__column c-site-footer__button-column">
                    <f:if condition="{footer.hasButtons}">
                        {footer.buttons -> f:format.raw()}
                    </f:if>
                </div>
            </f:else>
        </f:if>

        <div class="c-site-footer__grid-wrapper">
            <div class="c-site-footer__grid c-site-footer__grid--left">
                <div class="c-site-footer__column">
                    <f:if condition="{footerLogo}">
                        <f:then>
                            <noscript>
                                <img
                                    src="{neos.media:uri.image(image: footerLogo)}"
                                    class="c-site-footer__logo"
                                    width="150c"
                                    alt="{pageTitle}">
                            </noscript>

                            <img
                                data-src="{neos.media:uri.image(image: footerLogo)}"
                                class="c-site-footer__logo lazyload"
                                width="150c"
                                alt="{pageTitle}">
                        </f:then>
                        <f:else>
                            <p class="c-site-footer__heading">
                                {footerTitleCompany}
                            </p>
                        </f:else>
                    </f:if>
                    <div class="c-site-footer__contact-wrapper">
                        <p class="c-site-footer__contact">
                            <strong>{companyName}</strong><br>
                            <f:if condition="{companyNameSecondRow}">
                                <strong>{companyNameSecondRow}</strong><br>
                            </f:if>
                            {companyAddress}
                            <f:if condition="{companyAddressSecondRow}">
                                <br>{companyAddressSecondRow}
                            </f:if>
                        </p>
                        <p class="c-site-footer__contact">
                            <f:if condition="{companyPhone}">
                                <a href="tel:{companyPhone}" class="c-site-footer__link"><f:translate id="word.phone" package="Newland.CityTheme" source="Main"/> {companyPhone}</a><br>
                            </f:if>
                            <a href="mailto:{companyMail}" class="c-site-footer__link">{companyMail}</a>
                        </p>
                    </div>
                </div>

                <div class="c-site-footer__column">
                    <p class="c-site-footer__heading">
                        {footerTitleLinks}
                    </p>
                    <div class="c-site-footer__social-wrapper">
                        <ul class="c-site-footer__social">
                            <f:if condition="{facebookLink}">
                                <li class="c-site-footer__social-element">
                                    <a href="{facebookLink}" class="c-site-footer__link" target="_blank" title="Facebook">
                                        <svg class="c-icon c-site-footer__social-icon">
                                            <use xlink:href="#icon-facebook"></use>
                                        </svg>
                                    </a>
                                </li>
                            </f:if>
                            <f:if condition="{instagramLink}">
                                <li class="c-site-footer__social-element">
                                    <a href="{instagramLink}" class="c-site-footer__link" target="_blank" title="Instagram">
                                        <svg class="c-icon c-site-footer__social-icon">
                                            <use xlink:href="#icon-instagram"></use>
                                        </svg>
                                    </a>
                                </li>
                            </f:if>
                            <f:if condition="{twitterLink}">
                                <li class="c-site-footer__social-element">
                                    <a href="{twitterLink}" class="c-site-footer__link" target="_blank" title="Twitter">
                                        <svg class="c-icon c-site-footer__social-icon">
                                            <use xlink:href="#icon-twitter"></use>
                                        </svg>
                                    </a>
                                </li>
                            </f:if>
                            <f:if condition="{youtubeLink}">
                                <li class="c-site-footer__social-element">
                                    <a href="{youtubeLink}" class="c-site-footer__link" target="_blank" title="YouTube">
                                        <svg class="c-icon c-site-footer__social-icon">
                                            <use xlink:href="#icon-youtube"></use>
                                        </svg>
                                    </a>
                                </li>
                            </f:if>
                            <f:if condition="{tiktokLink}">
                                <li class="c-site-footer__social-element">
                                    <a href="{tiktokLink}" class="c-site-footer__link" target="_blank" title="TikTok">
                                        <svg class="c-icon c-site-footer__social-icon">
                                            <use xlink:href="#icon-tiktok"></use>
                                        </svg>
                                    </a>
                                </li>
                            </f:if>
                            <f:if condition="{pinterestLink}">
                                <li class="c-site-footer__social-element">
                                    <a href="{pinterestLink}" class="c-site-footer__link" target="_blank" title="Pinterest">
                                        <svg class="c-icon c-site-footer__social-icon">
                                            <use xlink:href="#icon-pinterest"></use>
                                        </svg>
                                    </a>
                                </li>
                            </f:if>
                            <f:if condition="{xingLink}">
                                <li class="c-site-footer__social-element">
                                    <a href="{xingLink}" class="c-site-footer__link" target="_blank" title="Xing">
                                        <svg class="c-icon c-site-footer__social-icon">
                                            <use xlink:href="#icon-xing"></use>
                                        </svg>
                                    </a>
                                </li>
                            </f:if>
                            <f:if condition="{linkedInLink}">
                                <li class="c-site-footer__social-element">
                                    <a href="{linkedInLink}" class="c-site-footer__link" target="_blank" title="LinkedIn">
                                        <svg class="c-icon c-site-footer__social-icon">
                                            <use xlink:href="#icon-linkedin"></use>
                                        </svg>
                                    </a>
                                </li>
                            </f:if>
                            <f:if condition="{komootLink}">
                                <li class="c-site-footer__social-element">
                                    <a href="{komootLink}" class="c-site-footer__link" target="_blank" title="Komoot">
                                        <svg class="c-icon c-site-footer__social-icon">
                                            <use xlink:href="#icon-komoot"></use>
                                        </svg>
                                    </a>
                                </li>
                            </f:if>
                            <f:if condition="{podcastLink}">
                                <li class="c-site-footer__social-element">
                                    <a href="{podcastLink}" class="c-site-footer__link" target="_blank" title="Podcast">
                                        <svg class="c-icon c-site-footer__social-icon">
                                            <use xlink:href="#icon-microphone"></use>
                                        </svg>
                                    </a>
                                </li>
                            </f:if>
                        </ul>
                    </div>
                </div>
            </div>

            <div class="c-site-footer__grid c-site-footer__grid--right">
                <div class="c-site-footer__column">
                    <f:if condition="{additionalFooterLogo}">
                        <f:then>
                            <noscript>
                                <img
                                    src="{neos.media:uri.image(image: additionalFooterLogo)}"
                                    class="c-site-footer__logo"
                                    width="150c"
                                    alt="{pageTitle}">
                            </noscript>

                            <img
                                data-src="{neos.media:uri.image(image: additionalFooterLogo)}"
                                class="c-site-footer__logo lazyload"
                                width="150c"
                                alt="{pageTitle}">
                        </f:then>
                        <f:else>
                            <p class="c-site-footer__heading">
                                {additionalFooterTitleCompany}
                            </p>
                        </f:else>
                    </f:if>
                    <div class="c-site-footer__contact-wrapper">
                        <p class="c-site-footer__contact">
                            <strong>{additionalCompanyName}</strong><br>
                            <f:if condition="{additionalCompanyNameSecondRow}">
                                <strong>{additionalCompanyNameSecondRow}</strong><br>
                            </f:if>
                            {additionalCompanyAddress}
                            <f:if condition="{additionalCompanyAddressSecondRow}">
                                <br>{additionalCompanyAddressSecondRow}
                            </f:if>
                        </p>
                        <p class="c-site-footer__contact">
                            <f:if condition="{additionalCompanyPhone}">
                                <a href="tel:{additionalCompanyPhone}" class="c-site-footer__link"><f:translate id="word.phone" package="Newland.CityTheme" source="Main"/> {additionalCompanyPhone}</a><br>
                            </f:if>
                            <a href="mailto:{additionalCompanyMail}" class="c-site-footer__link">{additionalCompanyMail}</a>
                        </p>
                    </div>
                </div>

                <div class="c-site-footer__column">
                    <p class="c-site-footer__heading">
                        {additionalFooterTitleLinks}
                    </p>
                    <div class="c-site-footer__social-wrapper">
                        <ul class="c-site-footer__social">
                            <f:if condition="{additionalFacebookLink}">
                                <li class="c-site-footer__social-element">
                                    <a href="{additionalFacebookLink}" class="c-site-footer__link" target="_blank" title="Facebook">
                                        <svg class="c-icon c-site-footer__social-icon">
                                            <use xlink:href="#icon-facebook"></use>
                                        </svg>
                                    </a>
                                </li>
                            </f:if>
                            <f:if condition="{additionalInstagramLink}">
                                <li class="c-site-footer__social-element">
                                    <a href="{additionalInstagramLink}" class="c-site-footer__link" target="_blank" title="Instagram">
                                        <svg class="c-icon c-site-footer__social-icon">
                                            <use xlink:href="#icon-instagram"></use>
                                        </svg>
                                    </a>
                                </li>
                            </f:if>
                            <f:if condition="{additionalTwitterLink}">
                                <li class="c-site-footer__social-element">
                                    <a href="{additionalTwitterLink}" class="c-site-footer__link" target="_blank" title="Twitter">
                                        <svg class="c-icon c-site-footer__social-icon">
                                            <use xlink:href="#icon-twitter"></use>
                                        </svg>
                                    </a>
                                </li>
                            </f:if>
                            <f:if condition="{additionalYoutubeLink}">
                                <li class="c-site-footer__social-element">
                                    <a href="{additionalYoutubeLink}" class="c-site-footer__link" target="_blank" title="YouTube">
                                        <svg class="c-icon c-site-footer__social-icon">
                                            <use xlink:href="#icon-youtube"></use>
                                        </svg>
                                    </a>
                                </li>
                            </f:if>
                            <f:if condition="{additionalTiktokLink}">
                                <li class="c-site-footer__social-element">
                                    <a href="{additionalTiktokLink}" class="c-site-footer__link" target="_blank" title="TikTok">
                                        <svg class="c-icon c-site-footer__social-icon">
                                            <use xlink:href="#icon-tiktok"></use>
                                        </svg>
                                    </a>
                                </li>
                            </f:if>
                            <f:if condition="{additionalPinterestLink}">
                                <li class="c-site-footer__social-element">
                                    <a href="{additionalPinterestLink}" class="c-site-footer__link" target="_blank" title="Pinterest">
                                        <svg class="c-icon c-site-footer__social-icon">
                                            <use xlink:href="#icon-pinterest"></use>
                                        </svg>
                                    </a>
                                </li>
                            </f:if>
                            <f:if condition="{additionalXingLink}">
                                <li class="c-site-footer__social-element">
                                    <a href="{additionalXingLink}" class="c-site-footer__link" target="_blank" title="Xing">
                                        <svg class="c-icon c-site-footer__social-icon">
                                            <use xlink:href="#icon-xing"></use>
                                        </svg>
                                    </a>
                                </li>
                            </f:if>
                            <f:if condition="{additionalLinkedInLink}">
                                <li class="c-site-footer__social-element">
                                    <a href="{additionalLinkedInLink}" class="c-site-footer__link" target="_blank" title="LinkedIn">
                                        <svg class="c-icon c-site-footer__social-icon">
                                            <use xlink:href="#icon-linkedin"></use>
                                        </svg>
                                    </a>
                                </li>
                            </f:if>
                            <f:if condition="{additionalKomootLink}">
                                <li class="c-site-footer__social-element">
                                    <a href="{additionalKomootLink}" class="c-site-footer__link" target="_blank" title="Komoot">
                                        <svg class="c-icon c-site-footer__social-icon">
                                            <use xlink:href="#icon-komoot"></use>
                                        </svg>
                                    </a>
                                </li>
                            </f:if>
                            <f:if condition="{additionalPodcastLink}">
                                <li class="c-site-footer__social-element">
                                    <a href="{additionalPodcastLink}" class="c-site-footer__link" target="_blank" title="Podcast">
                                        <svg class="c-icon c-site-footer__social-icon">
                                            <use xlink:href="#icon-microphone"></use>
                                        </svg>
                                    </a>
                                </li>
                            </f:if>
                        </ul>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="c-site-footer__bottom-wrapper {subFooterBackgroundColor}">
        <div class="c-site-footer__bottom">
            {parts.footerNavigation -> f:format.raw()}

            <div class="c-site-footer__partners">
                {footer.logos -> f:format.raw()}
            </div>
        </div>
    </div>
</footer>
