<script lang="ts">
</script>

<div class="footer">
    <button class="upper-part">
        <div class="upper"><img src="/media/arrow-right.svg" alt="arrow" /> nächstes Thema</div>
        <div class="lower">Ihre&nbsp;Bedürfnisse</div>
    </button>
    <div class="lower-part">
        <div class="links">
            <button>Datenschutz</button>
            <button>Impressum</button>
        </div>
        <div class="contact">
            <button>0711 644 700-0</button>
            <button>info@fontis.de</button>
        </div>
    </div>
</div>

<style lang="less">
    @import "../assets/css/main.less";
    .footer {
        margin-top: 80px;
        display: flex;
        flex-direction: column;
        align-items: flex-end;
        background-color: @bg-color-secondary;
        color: @font-color-secondary;
        .upper-part {
            padding: 10px 40px;
            display: flex;
            flex-direction: column;
            width: fit-content;
            .upper {
                color: @font-color-secondary;
                font-size: 12px;
                display: flex;
                gap: 10px;
                @media @tablet {
                    font-size: 14px;
                }
            }
            .lower {
                color: @font-color-secondary;
                font-size: 22px;
                @media @tablet {
                    font-size: 24px;
                }
            }
        }

        .lower-part {
            padding: 40px 40px;
            width: 100%;
            display: flex;
            flex-direction: column;
            .links,
            .contact {
                display: flex;
                justify-content: space-between;
                padding: 10px 0px;
            }
            button {
                color: @font-color-secondary;
            }
            @media @tablet {
                padding: 80px 40px;
                flex-direction: row;
                justify-content: space-between;
                .links,
                .contact {
                    display: flex;
                    justify-content: flex-start;
                    gap: 40px;
                    padding: 0px;
                }
            }
        }
    }
</style>
