<footer class="c-site-footer {f:if(condition: '{altMetaMenu}', then: ' c-site-footer--elevated')}">
    <div class="c-site-footer__container">
        <div class="c-site-footer__grid">
            <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>
                <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>
                    <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>

            <f:if condition="{neos:rendering.inBackend()}">
                <f:then>
                    <div class="c-site-footer__column">
                        <p class="c-site-footer__heading">
                            {footerTitleButtons}
                        </p>
                        {footer.buttons -> f:format.raw()}
                    </div>
                </f:then>
                <f:else>
                    <div class="c-site-footer__column">
                        <f:if condition="{footer.hasButtons}">
                            <p class="c-site-footer__heading">
                                {footerTitleButtons}
                            </p>
                            {footer.buttons -> f:format.raw()}
                        </f:if>
                    </div>
                </f:else>
            </f:if>

            <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="{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>
    <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>
