/* Styling Footer upper */

.usp-container {
    display: grid;
    justify-content: center;
    justify-items: center;
    grid-row-gap: 3rem;
    padding: 4rem 1rem;

    .usp-element {
        text-align: center;
        display: flex;
        flex-direction: column;
        align-items: center;
        max-width: 250px;

        .usp-headline {
            margin: 0 0 13px 0;
        }

        .usp-text {
            font-size: 13px;
            color: #999;
        }
    }
}

.newsletter-container {
    display: grid;
    grid-row-gap: 2rem;
    padding: 2rem 2rem 4rem 2rem;

    .newsletter-element-headline {
        padding: 0 1rem;

        .title2 {
            margin: 0;
        }
    }

    .newsletter-form {
        display: grid;
        gap: 1rem;

        .wpcf7-email {
            width: 100%;
            height: 48px;
            color: var(--gn-text-color);
            font-size: 14px;
            box-shadow: none;
            margin: 0;

            &::placeholder {
                color: var(--gn-link-color);
            }
        }

        .newsletter-submit-button {
            width: 100%;
            line-height: 48px;
            padding: 0;
            border-radius: 0;
            border: 1px solid #000;
            background-color: transparent;
            text-transform: none;
            text-align: center;
            font-weight: 400;
            cursor: pointer;

            &:hover {
                background-color: #000;
                color: #fff;
            }

            .button {
                all: unset;
            }

            .wpcf7-spinner {
                display: none;
            }
        }
    }

    .newsletter-privacy {
        font-size: 10px;
        color: #999;
        padding: 1.5rem 0 0 0;
    }
}



/* Styling Footer black (Hauptbereich)*/
.footer-black {
    padding: 1rem;
    font-size: 14px;

    .dark, .dark p, .dark td, .dark a {color: #fff;}

    .col {
        padding: unset;
    }

    .col-inner {
        padding: 0 1rem 1rem 1rem;

        .ux-menu-title {
            text-transform: none;
            font-size: 14px;
            padding: 20px 0;
        }

        .ux-menu-link__link {
            min-height: 2rem;

            &:hover { color: var(--gn-text-hover-color);}

        }
    }

    .kundenservice {

        .mail {text-decoration: none;}

        a {
            text-decoration: underline;
            &:hover { color: var(--gn-text-hover-color);}
         }
    }

    .payment-icon-wrapper {
        height: 36px;
        width: 90px;
        font-size: 10px;
        background: #fff;
        color: #000;
        line-height: 36px;
        text-align: center;
        font-weight: 700;
        border-radius: 5px;
        margin: 5px 10px 5px 0px;
        float: left;

        img {
            height: 14px;
            margin: 11px auto;
        }
    }

    .column--content ul {
        float: left;
        width: 100%;
        padding-top: 7px;
        padding-bottom: 21px;
        list-style: none;

        li {margin: 0 !important}
    }

    .social-media-icons {
        width: 100%;
        display: flex;
        padding: 20px;
        justify-content: center;

        a {
            max-width: 20px;
            margin: 0 .75rem;
            transition: opacity 0.1s ease;

            &:hover {
                opacity: 0.8;
            }
        }
    }
}

/*GN Logo im unteren Footer*/
.payment-icons {
    img {
        max-width: 230px;
        margin: 0 auto 1rem auto;
    }
}

/* Styling absolute Footer (ganz unten) */
.absolute-footer {
    padding: 3rem 0rem;
    font-size: var(--gn-text-font-size-small);
    
    &.dark {color: #fff;}
}

@media only screen and (min-width: 550px) {
/*************** Tablet Viewport / Desktop Breakpoint ***************/
    
    .usp-container {
        grid-template-columns: 1fr 1fr 1fr;
        grid-column-gap: 3rem;
        padding: 6rem 2rem 6rem 2rem;    
        max-width: 1100px;
        margin: 0 auto;
    }

    
}



@media only screen and (min-width: 850px) {
/*************** Tablet Landscape Breakpoint ***************/
    
    .newsletter-container {
        max-width: 1000px;
        margin: 0 auto;
        grid-template-columns: 1fr 4fr;
        grid-column-gap: 4rem;
        padding: 2rem 2rem 6rem 2rem;

        .newsletter-form {
            grid-template-columns: 4fr auto;
            gap: 0rem 4rem;  

            .newsletter-submit-button {
                width: 150px;
            }
        }
    }

    /* Styling Footer black (Hauptbereich)*/
    .footer-black {

        .social-media-icons {
            padding: 50px 20px 20px 20px;
        }
    }

}



@media only screen and (min-width: 1110px) {
/*************** Desktop Breakpoint ***************/

    .usp-container {
            padding: 11rem 2rem 9rem 2rem;
    }

    .newsletter-container {
        grid-template-columns: 1fr 2fr;
    }

    /* Styling Footer black (Hauptbereich)*/
    .footer-black {
        padding: 1rem 6rem;
    }



}