:root {

    --esther-dunkel:#30323d;
    --esther-text:#41434c;

    --esther-blau:#a6d9ec;
    --esther-tuerkis:#9ee1dc;
    --esther-rosa:#efb4cc;
    --esther-violett:#c8a9df;
    --esther-gelb:#f2e58e;
    --esther-gruen:#b6eb91;

    --esther-linie:#e4e7eb;
}


/* =========================================================
   HEADER
========================================================= */

.main-site-header {

    position:relative;

    z-index:1000;

    background:#ffffff;

    border-bottom:
        1px solid
        var(--esther-linie);

    box-shadow:
        0 3px 14px
        rgba(48,50,61,.04);
}


.main-header-inner {

    width:
        min(
            1200px,
            calc(100% - 30px)
        );

    min-height:100px;

    margin:auto;

    display:flex;

    align-items:center;

    justify-content:space-between;

    gap:30px;
}


.main-logo-link {

    display:block;

    flex:0 0 auto;
}


.main-logo {

    display:block;

    width:155px;

    max-height:90px;

    object-fit:contain;
}


/* NAV */

.main-navigation {

    display:flex;

    align-items:center;

    justify-content:flex-end;

    flex-wrap:wrap;

    gap:5px;
}


.main-navigation a {

    display:block;

    padding:
        10px 13px;

    color:
        var(--esther-dunkel);

    text-decoration:none;

    border-radius:20px;

    font-size:14px;

    transition:
        background .2s ease,
        transform .2s ease;
}


.main-navigation a:hover {

    background:
        rgba(166,217,236,.22);
}


.main-navigation a.current {

    background:
        linear-gradient(
            90deg,
            rgba(166,217,236,.50),
            rgba(158,225,220,.40),
            rgba(200,169,223,.30)
        );

    font-weight:600;
}


/* MOBILE BUTTON */

.mobile-menu-button {

    display:none;

    width:44px;

    height:44px;

    border-radius:50%;

    border:
        1px solid
        var(--esther-linie);

    background:#ffffff;

    color:
        var(--esther-dunkel);

    font-size:23px;

    cursor:pointer;
}


/* =========================================================
   FOOTER
========================================================= */

.main-site-footer {

    margin-top:70px;

    color:
        var(--esther-text);

    background:
        linear-gradient(
            120deg,
            rgba(166,217,236,.60),
            rgba(158,225,220,.48),
            rgba(242,229,142,.28),
            rgba(239,180,204,.40),
            rgba(200,169,223,.48)
        );

    border-top:
        1px solid
        var(--esther-linie);
}


.footer-wave {

    height:12px;

    background:
        linear-gradient(
            90deg,
            var(--esther-blau),
            var(--esther-tuerkis),
            var(--esther-gruen),
            var(--esther-gelb),
            var(--esther-rosa),
            var(--esther-violett)
        );
}


.main-footer-inner {

    width:
        min(
            1200px,
            calc(100% - 30px)
        );

    margin:auto;

    padding:
        45px 0 35px;

    display:grid;

    grid-template-columns:
        repeat(
            4,
            minmax(0,1fr)
        );

    gap:40px;
}


.footer-column h3 {

    margin:
        0 0 17px;

    color:
        var(--esther-dunkel);

    font-size:17px;

    font-weight:600;
}


.footer-column p {

    margin:
        0 0 11px;

    line-height:1.65;

    font-size:14px;
}


.footer-column a {

    color:
        var(--esther-text);

    text-decoration:none;
}


.footer-column a:hover {

    text-decoration:underline;
}


/* FOOTER BOTTOM */

.footer-bottom {

    width:
        min(
            1200px,
            calc(100% - 30px)
        );

    margin:auto;

    padding:
        18px 0 22px;

    display:flex;

    align-items:center;

    justify-content:space-between;

    gap:20px;

    border-top:
        1px solid
        rgba(48,50,61,.10);

    font-size:12px;
}


.footer-bottom a {

    color:
        var(--esther-text);

    text-decoration:none;
}


/* =========================================================
   MOBILE
========================================================= */

@media(max-width:850px) {

    .main-header-inner {

        min-height:85px;
    }


    .main-logo {

        width:135px;
    }


    .mobile-menu-button {

        display:block;
    }


    .main-navigation {

        position:absolute;

        top:100%;

        left:0;

        right:0;

        display:none;

        flex-direction:column;

        align-items:stretch;

        padding:15px;

        background:#ffffff;

        border-bottom:
            1px solid
            var(--esther-linie);

        box-shadow:
            0 10px 20px
            rgba(48,50,61,.08);
    }


    .main-navigation.open {

        display:flex;
    }


    .main-navigation a {

        padding:12px 15px;
    }


    .main-footer-inner {

        grid-template-columns:
            repeat(
                2,
                1fr
            );
    }
}


@media(max-width:550px) {

    .main-footer-inner {

        grid-template-columns:
            1fr;

        gap:25px;
    }


    .footer-bottom {

        flex-direction:column;

        align-items:flex-start;
    }
}