.site-footer {
    background: var(--color-bg-content);
}

.footer {
    position: relative;
    overflow: hidden;

    width: 100%;
    min-height: 280px;

    /* oben transparent → Grau von .site-footer sichtbar
       unten 100px Weiß */
    background: linear-gradient(
        to bottom,
        transparent 0,
        transparent calc(100% - 100px),
        #fff calc(100% - 100px),
        #fff 100%
    );
}

.footer__inner {
    position: relative;

    width: 100%;
    min-height: 280px;

    background: transparent;
}

.page-id-31/*Startseite*/ .footer__inner,
.page-id-307/*Startseite EN*/ .footer__inner{
    background: #FFFFFF;
}

/* ==========================================================================
   FOOTER – DEKORATIVE FLÄCHEN
   ========================================================================== */


/* Rosa Halbkreis links */

.footer::before {
    content: "";
    position: absolute;
    z-index: 2;

    width: 690px;
    height: 1380px;

    left: -500px;
    top: 25px;

    background: var(--color-pink-light);
    border-radius: 690px 0 0 690px;

    pointer-events: none;
}


/* Grauer Viertelkreis links */

.footer::after {
    content: "";
    position: absolute;
    z-index: 1;

    width: 530px;
    height: 530px;

    left: 80px;
    top: 140px;

    background: var(--color-grey-footer);
    border-radius: 0 530px 0 0;

    pointer-events: none;
}


/* Hellgrauer Viertelkreis rechts */

.footer__inner::before {
    content: "";
    position: absolute;
    z-index: 0;

    width: 530px;
    height: 530px;

    right: -40px;
    top: 0;

    background: var(--color-grey-footer-light);

    border-radius: 530px 0 0 0;

    pointer-events: none;
}


/* ==========================================================================
   FOOTER – SOCIAL
   ========================================================================== */

.footer__social {
    position: absolute;
    left: 40px;
    bottom: 40px;
    z-index: 5;

    display: flex;
    align-items: center;
    gap: 20px;
}

.footer__social-link {
    display: block;

    width: 40px;
    height: 40px;

    background-color: var(--color-text);

    transition: background-color 0.25s ease;
}

.footer__social-link--linkedin {
    -webkit-mask: url("../img/icon__linkedin.svg") center / contain no-repeat;
    mask: url("../img/icon__linkedin.svg") center / contain no-repeat;
}

.footer__social-link--instagram {
    -webkit-mask: url("../img/icon__instagram.svg") center / contain no-repeat;
    mask: url("../img/icon__instagram.svg") center / contain no-repeat;
}

.footer__social-link:hover {
    background-color: var(--color-red);
}


/* ==========================================================================
   FOOTER – COPYRIGHT
   ========================================================================== */

.footer__copyright {
    position: absolute;
    left: 50%;
    bottom: 40px;
    z-index: 5;

    transform: translateX(-50%);

    font-size: 14px;
    line-height: 1.3;
    white-space: nowrap;
}


/* ==========================================================================
   FOOTER – NAVIGATION
   ========================================================================== */

.footer__nav {
    position: absolute;
    right: 40px;
    bottom: 40px;
    z-index: 5;

    display: flex;
    align-items: center;
    gap: 25px;
}

.footer__nav a {
    color: var(--color-text);
    text-decoration: none;

    font-size: 16px;
    font-weight: 400;
}

.footer__nav a:hover {
    color: var(--color-red);
}




/* ==========================================================================
   FOOTER RESPONSIVE
   ========================================================================== */
@media (max-width: 774px) {

.page-id-31 .site-footer,
    .page-id-31 .footer{
        background: #fff;
    }

}


@media (max-width: 768px) {

    .footer {
        min-height: 245px;
    }
    


    .footer__inner {
        min-height: 140px;

        display: flex;
        flex-direction: column;
        align-items: flex-start;

        padding: 40px;
        margin-top: 61px;
    }

    .footer__social,
    .footer__nav,
    .footer__copyright {
        position: static;
        transform: none;
    }

    .footer__social {
        order: 1;
        margin-bottom: 30px;
    }

    .footer__nav {
        order: 2;
        display: flex;
        gap: 25px;
        margin-bottom: 30px;
    }

    .footer__copyright {
        order: 3;
        margin-top: 0;
        font-size: 14px;
    }

    /* Rechten hellgrauen Kreis mobil ausblenden */
    .footer__inner::before {
        display: none;
    }
    
    .footer__inner {
    padding-bottom: 30px!important;
}
    .footer::before {
    left: -422px;
}
    
.page-id-31 .site-footer {
        background: #fff!important;
    }
}