/* ========== GENERAL ========== */
#footer {
    background-image: none;
}
#footer h6 {
    font-family: "Source Sans 3", Arial, sans-serif;
    font-weight: 400;
    letter-spacing: .25px;
    font-size: var(--font-size-l-20);
    line-height: var(--line-height-l-20);
    border-bottom: 1px solid #9BAB9A;
    padding-bottom: 4px;
    margin-bottom: 16px;
    text-transform: uppercase;
}

/* ========== TOP ========== */
.footer_top {
    background-color: #C3CDC2;
    padding-top: 64px;
    padding-bottom: 64px;
}
.footer_top > .container {
    display: grid;
    grid-template-columns: 1fr;
    align-items: start;
    gap: 40px;
}
.footer_support,
.footer_newsletter {
    background-color: #9BAB9A;
    padding: 32px 20px 20px 20px;
    border-radius: 24px;
    position: relative;
}
.footer_top_headline {
    font-weight: 400;
    font-size: var(--font-size-xxl-32);
    line-height: var(--line-height-xxl-32);
    font-family: "Playfair Display", serif;
    margin-bottom: 20px;
}
.footer_top_subheadline {
    font-size: var(--font-size-m-18);
    line-height: var(--line-height-m-18);
    font-family: "Playfair Display", serif;
    color: var(--text-text-headline);
}
/* Support */
.footer_support::before {
    content: "";
    width: 56px;
    height: 56px;
    border-radius: 56px;
    background-color: #9BAB9A;
    position: absolute;
    top: -28px;
}
.footer_support::after {
    content: url("data:image/svg+xml,%3Csvg width='40' height='40' viewBox='0 0 56 57' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cg id='hand-holding-heart-solid'%3E%3Cpath id='Vector' d='M25.375 6.20312C21.9923 6.20312 19.25 8.94537 19.25 12.3281C19.25 18.4531 29.75 23.7031 29.75 23.7031C29.75 23.7031 40.25 18.4531 40.25 12.3281C40.25 8.94537 37.5078 6.20312 34.125 6.20312C32.4083 6.20312 30.8612 6.91475 29.75 8.05225C28.6388 6.91475 27.0917 6.20312 25.375 6.20312ZM25.375 9.70312C26.082 9.70312 26.7475 9.98334 27.248 10.4961L28.1812 11.4531H31.3188L32.252 10.4961C32.7525 9.98334 33.418 9.70312 34.125 9.70312C35.5723 9.70312 36.75 10.8809 36.75 12.3281C36.75 14.5349 33.0645 17.7109 29.75 19.7041C26.4338 17.7091 22.75 14.5349 22.75 12.3281C22.75 10.8809 23.9277 9.70312 25.375 9.70312ZM33.6328 25.4155L30.7686 27.4253L35.335 33.9399L29.0322 38.3047L24.582 36.001C26.6384 34.9657 29.2961 33.6274 29.3057 33.6221L29.3262 33.6084L29.3433 33.5981C31.0275 32.6069 31.8905 30.5628 31.3291 28.6182V28.6147C30.6647 26.3153 28.2156 24.9648 25.915 25.6274H25.9116L13.4668 29.0967L5.22949 34.7568L8.54492 48.2681L17.3735 45.0791L29.8799 51.5527L50.6509 37.1733L48.6616 34.2954L29.6201 47.4785L17.6265 41.2646L11.0161 43.6538L9.20801 36.2744L14.9707 32.3096L26.8755 28.9907H26.8823C27.3668 28.8507 27.8256 29.1035 27.9658 29.5889C28.0826 29.9933 27.9 30.38 27.5728 30.5767C27.5156 30.6062 22.8772 32.9414 19.9473 34.415L16.8848 35.9531L29.2954 42.3823L40.2227 34.8149L33.6328 25.4155Z' fill='white'/%3E%3C/g%3E%3C/svg%3E");
    position: absolute;
    top: -20px;
    left: 28px;
}
.footer_support_text {
    margin-bottom: 24px;
}

/* Newsletter */
.footer_newsletter {
    background: linear-gradient(106deg, #9BAB9A 4.26%, rgba(155, 171, 154, 0.00) 96.56%), url(https://viel-unterwegs.de/wp-content/uploads/2021/10/reiseziele-reiseblog.jpg) lightgray 0 0 / cover no-repeat;
}
.footer_newsletter::before {
    content: "";
    width: 56px;
    height: 56px;
    border-radius: 56px;
    background-color: #9BAB9A;
    position: absolute;
    top: -28px;
}
.footer_newsletter::after {
    content: url('data:image/svg+xml,<svg width="36" height="34" viewBox="0 0 36 34" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M9 0.453125V3.30371L0.0117188 9.15723V33.4531H35.9883V9.15723L27 3.30078V0.453125H9ZM12 3.45312H24V14.9756L18 18.8633L12 14.9756V3.45312ZM13.5 6.45312V9.45312H22.5V6.45312H13.5ZM9 6.88086V13.0332L4.26562 9.96582L9 6.88086ZM27 6.88086L31.7344 9.96582L27 13.0332V6.88086ZM13.5 10.9531V13.9531H22.5V10.9531H13.5ZM3.01172 12.7285L18 22.4375L32.9883 12.7285V30.4531H3.01172V12.7285Z" fill="white"/></svg>');
    position: absolute;
    top: -16px;
    left: 30px;
}
.footer_newsletter_wrapper {
    max-width: 560px;
    display: flex;
    flex-direction: column;
    gap: 20px;
}
ul.footer_newsletter_list li {
    position: relative;
    line-height: 36px;
    padding-left: 52px;
}
ul.footer_newsletter_list li::before {
    content: '';
    position: absolute;
    width: 36px;
    height: 36px;
    border-radius: 50px;
    padding: 6px;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    background: #7C887B url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="28" height="28" viewBox="0 0 28 28" fill="none"><path d="M24.7461 5.49609L9.625 20.6172L3.25391 14.2461L1.99609 15.5039L8.99609 22.5039L9.625 23.1055L10.2539 22.5039L26.0039 6.75391L24.7461 5.49609Z" fill="white"/></svg>') no-repeat center center / contain;
    background-size: 24px;
}
.footer_newsletter_form form {
    display: flex;
    gap: 8px;
    flex-direction: column;
}
.newsletter-input-wrapper {
    background-color: #fff;
    border-radius: 64px;
    border: 1px solid #E1E6E1;
    padding: 16px 32px;
    display: flex;
    gap: 8px;
    align-self: stretch;
    justify-content: space-between;
}
.newsletter-input-wrapper input,
.newsletter-input-wrapper input::placeholder {
    border: none;
    font-size: var(--font-size-l-20);
    line-height: var(--line-height-l-20);
    width: 100%;
    font-family: "Source Sans 3", sans-serif;
    font-style: normal;
}
.footer_newsletter_disclaimer {
    font-size: var(--font-size-xs-14);
    line-height: var(--line-height-xs-14);
}
.footer_newsletter_list {
    display: flex;
    flex-direction: column;
    gap: 8px;
    font-size: var(--font-size-xl-24);
    line-height: var(--line-height-xl-24);
    list-style-type: none;
    margin: 0;
    padding: 0;
    font-weight: 300;
}

/* ========== MIDDLE ========== */
.footer_middle {
    background-color: #2F332E;
    color: #fff;
    padding-top: 40px;
    padding-bottom: 40px;
}
.footer_grid {
    display: grid;
    grid-template-columns: repeat(1, 1fr);
}
.footer_middle .footer_block {
    margin-bottom: 40px;
}
.footer_middle .footer_logo {
    margin-bottom: 30px;
}
.footer_middle .footer_links {
    list-style-type: none;
    margin: 0;
    padding: 0;
}
.footer_middle .footer_links li {
    margin-bottom: 4px;
}
.footer_middle .footer_links a {
    color: #fff;
    transition: color .3s, padding .3s;
    display: block;
    padding-right: 4px;
    font-family: "Source Sans 3", Arial, sans-serif;
    font-weight: 400;
    font-size: var(--font-size-l-20);
    line-height: var(--line-height-m-18);
    border-bottom: 1px solid #444;
}
.footer_middle .footer_links a:hover {
    color: #7C897B;
    padding-left: 4px;
    padding-right: 0;
}
.footer_middle .social-items:hover {
    filter: none;
    opacity: 0.5;
}

.footer_middle .footer_socialmedia {
    display: flex;
    gap: 48px;
    justify-content: center;
}

/* ========== BOTTOM ========== */
.footer_bottom {
    background-color: #F5F7F5;
    color: #2F332E;
    padding-top: 8px;
    padding-bottom: 8px;
    font-weight: 300;
    font-size: var(--font-size-l-20);
    line-height: var(--line-height-l-20);
    font-family: "Source Sans 3", Arial, sans-serif;
}
.footer_bottom > .container {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 10px;
}
.footer_bottom .footer_bottom_left,
.footer_bottom .footer_bottom_center {
    text-align: center;
}
.footer_bottom p {
    margin-bottom: 0;
}
.footer_bottom i {
    color: #9bab9a;
}
.footer_bottom_right {
    display: flex;
    gap: 16px;
    align-items: center;
    justify-content: flex-end;
}
.footer_bottom_right a {
    background: transparent;
    background: linear-gradient(180deg,rgba(255, 255, 255, 0) 45%, rgba(196, 206, 196, 1) 45%, rgba(196, 206, 196, 1) 85%, rgba(255, 255, 255, 0) 85%);
}
.footer_bottom i[class^="hb-"]:before,
.footer_bottom i[class*=" hb-"]:before {
    margin-left: 0;
}

/* ========== BACK TO TOP ========== */
#back-to-top {
    position: fixed;
    display: none;
    bottom: 50px;
    right: 50px;
    padding: 4px;
    border-radius: 50px;
    width: 38px;
    height: 38px;
    z-index: 999;
    cursor: pointer;
    background-color: #E1E6E1;
    border: none;
}
#back-to-top.show {
    display: block;
    opacity: 1;
}
#back-to-top::before {
    content: '';
    display: block;
    position: absolute;
    background-color: #2F332E;
    left: 3px;
    top: 3px;
    right: 3px;
    bottom: 3px;
    border-radius: 50px;
    z-index: -1;
}
#back-to-top::after {
    content: '';
    display: block;
    position: absolute;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    background-color: transparent;
    background-image: conic-gradient(#9BAB9A, #9BAB9A var(--p, 0%), transparent var(--p, 0%));
    z-index: -100;
    border-radius: 50px;
}


/* ========== Media Queries ========== */
@media (min-width: 640px) {

}
@media (min-width: 768px) {
    .footer_middle {
        padding-top: 80px;
        padding-bottom: 80px;
    }
    .footer_grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 32px;
    }
    .footer_support,
    .footer_newsletter {
        padding: 48px 40px 40px 40px;
    }
    .footer_support::before,
    .footer_newsletter::before {
        width: 72px;
        height: 68px;
        border-radius: 100px;
        top: -26px;
        left: 24px;
    }
    .footer_support::after {
        content: url("data:image/svg+xml,%3Csvg width='48' height='48' viewBox='0 0 56 57' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cg id='hand-holding-heart-solid'%3E%3Cpath id='Vector' d='M25.375 6.20312C21.9923 6.20312 19.25 8.94537 19.25 12.3281C19.25 18.4531 29.75 23.7031 29.75 23.7031C29.75 23.7031 40.25 18.4531 40.25 12.3281C40.25 8.94537 37.5078 6.20312 34.125 6.20312C32.4083 6.20312 30.8612 6.91475 29.75 8.05225C28.6388 6.91475 27.0917 6.20312 25.375 6.20312ZM25.375 9.70312C26.082 9.70312 26.7475 9.98334 27.248 10.4961L28.1812 11.4531H31.3188L32.252 10.4961C32.7525 9.98334 33.418 9.70312 34.125 9.70312C35.5723 9.70312 36.75 10.8809 36.75 12.3281C36.75 14.5349 33.0645 17.7109 29.75 19.7041C26.4338 17.7091 22.75 14.5349 22.75 12.3281C22.75 10.8809 23.9277 9.70312 25.375 9.70312ZM33.6328 25.4155L30.7686 27.4253L35.335 33.9399L29.0322 38.3047L24.582 36.001C26.6384 34.9657 29.2961 33.6274 29.3057 33.6221L29.3262 33.6084L29.3433 33.5981C31.0275 32.6069 31.8905 30.5628 31.3291 28.6182V28.6147C30.6647 26.3153 28.2156 24.9648 25.915 25.6274H25.9116L13.4668 29.0967L5.22949 34.7568L8.54492 48.2681L17.3735 45.0791L29.8799 51.5527L50.6509 37.1733L48.6616 34.2954L29.6201 47.4785L17.6265 41.2646L11.0161 43.6538L9.20801 36.2744L14.9707 32.3096L26.8755 28.9907H26.8823C27.3668 28.8507 27.8256 29.1035 27.9658 29.5889C28.0826 29.9933 27.9 30.38 27.5728 30.5767C27.5156 30.6062 22.8772 32.9414 19.9473 34.415L16.8848 35.9531L29.2954 42.3823L40.2227 34.8149L33.6328 25.4155Z' fill='white'/%3E%3C/g%3E%3C/svg%3E");
        top: -20px;
        left: 36px;
    }
    .footer_newsletter::after {
        content: url('data:image/svg+xml,<svg width="36" height="34" viewBox="0 0 36 34" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M9 0.453125V3.30371L0.0117188 9.15723V33.4531H35.9883V9.15723L27 3.30078V0.453125H9ZM12 3.45312H24V14.9756L18 18.8633L12 14.9756V3.45312ZM13.5 6.45312V9.45312H22.5V6.45312H13.5ZM9 6.88086V13.0332L4.26562 9.96582L9 6.88086ZM27 6.88086L31.7344 9.96582L27 13.0332V6.88086ZM13.5 10.9531V13.9531H22.5V10.9531H13.5ZM3.01172 12.7285L18 22.4375L32.9883 12.7285V30.4531H3.01172V12.7285Z" fill="white"/></svg>');
        top: -16px;
        left: 42px;
    }
    .footer_newsletter_wrapper {
        gap: 24px;
    }

}
@media (min-width: 1024px) {
    .footer_bottom > .container {
        flex-direction: row;
    }
    .footer_top > .container {
        grid-template-columns: repeat(2, 1fr);
    }
    .footer_middle .footer_links a {
        border-bottom: none;
    }
}
@media (min-width: 1280px) {
    .footer_grid {
        grid-template-columns: repeat(4, 1fr);
        gap: 64px;
    }
    .footer_top > .container {
        grid-template-columns: 2fr 1fr;
    }
}
@media (min-width: 1536px) {

}