/*

    00 -- vars
    01 -- darkgreen
    02 -- petrol
    03 -- beige
    04 -- apricot
    05 -- events
    06 -- spacing

*/

/* [start] 00 -- vars */

    :root {
        /* alt */

        --beige: rgb(242,238,229);
        --apricot: rgb(253,170,130);
        --darkgreen: rgb(77,99,99);
        --petrol: rgb(166,191,194);
        --petrol-values: 166,191,194;
        
        --body-font-color: #213d3d;
    

    }

/* [end] 00 -- vars */

/* [start] 01 -- darkgreen */

    @media (min-width: 1201px) {
        .body--scrolled header {
            background-color: var(--darkgreen);
        }
    }
    
    .contact-cta-links a:last-child, 
    .ce_text_with_cta .cta a:last-child,
    .banner-cta a:last-child,
    .ce_textsliderwithcta .cta a:last-child,
    .no-touch .footer-right .social-links .social-btn:hover {
        background-color: var(--darkgreen);
    }
    
    .img-text-content,
    .bg-mint h2, .bg-mint p,
    .accordion-wrapper h2, .accordion-wrapper p,
    .accordion-wrapper * ,
    .ce_textsliderwithcta,
    .ce_textsliderwithcta h2, .ce_textsliderwithcta p,
    .contact-cta-content,
    .footer-text p,
    .footer-number, .footer-mail,
    .lol2 {
        color: var(--body-font-color)!important;
    }

/* [end] 01 -- darkgreen */

/* [start] 02 -- petrol */

    .ce_image_and_text,
    .ce_image_with_accordions,
    .bg-mint,
    .ce_contact_with_ilustration_and_cta,
    footer,
    .ce_text_with_animation_and_ilustration::before,
    .ce_textsliderwithcta,
    .ce_imagetbut + .ce_textsliderwithcta::before{ 
        background-color: var(--petrol);
    }
    
    .ce_banner_with_cta::after {
        background: linear-gradient(180deg, rgba(255, 255, 255, 0) 0%, rgba(var(--petrol-values), 0.27) 29.5%, rgba(var(--petrol-values), 0.48) 40.5%, rgba(var(--petrol-values), 0.8) 55%, var(--petrol) 74%);
    }

/* [end] 02 -- petrol */

/* [start] 03 -- beige */

    .ce_text_with_animation_and_ilustration {
        background-color: var(--beige);
    }

/* [end] 03 -- beige */

/* [start] 04 -- apricot */



/* [end] 04 -- apricot */


/* [start] 05 -- events */

    @media screen and (min-width: 800px) {

        .mod_eventlist .event {
            display: grid;
            grid-template-columns: 200px auto 200px;
        }

        .mod_eventlist .event .contact-cta-links {
            margin-top: 0;
        }

    }

    .mod_eventlist .event .time {
        margin-bottom: 0;
    }

    .mod_eventlist .event:not(:last-child) {
        padding-bottom: 30px;
        margin-bottom: 30px;
        border-bottom: 1px solid #0002;
    }
    
    .mod_eventlist {
        margin-bottom: 60px;
    }

/* [end] 05 -- events */

/* [start] 06 -- spacing */


    .abstand-oben-klein {
        margin-top: 30px;
    }
    .abstand-oben-mittel {
        margin-top: 60px;
    }
    .abstand-oben-gross {
        margin-top: 120px;
    }

    .abstand-unten-klein {
        margin-bottom: 30px;
    }
    .abstand-unten-mittel {
        margin-bottom: 60px;
    }
    .abstand-unten-gross {
        margin-bottom: 120px;
    }

/* [end] 06 -- spacing */