.gspbgrid_item + .flexbasisclear{
    display: none !important;
}

.accordionElement h3{
    position: relative;
}

.accordionElement h3 svg{
    display: none !important;
}

.accordionElement span,.accordionElement .gs_item .gs_content_inner{
    text-align: left !important;
}

.accordionElement h3 span.gs_name{
    font-weight: 700 !important;
    width: 100% !important;
    background: var(--lightGrey) !important;
    padding: 30px 30px !important;
    z-index: 10;
    transition: 0.15s all linear;
    border-radius: 20px;
}

.accordionElement h3 span.gs_name span{
    width: calc(60vw + 0px) !important;
    display: block;
}



.accordionElement h3:hover button span.gs_name{
    width: calc(100% - 60px) !important;
    background: var(--almostWhite) !important;
}

.accordionElement .gs_item{
    background: none !important;
    border: none !important;
    box-shadow: 0 4px 30px 0 rgba(0,0,0,0.07) !important;
    border-radius: 20px;
}

.accordionElement .gs_item .gs_content_inner{
    background: var(--almostWhite) !important;
    font-size: var(--headline-S) !important;
    line-height: 140% !important;
}

.accordionElement .gs_item.active{
    background: var(--almostWhite) !important;
}

.accordionElement .gs_item.active button span.gs_name{
     width: calc(100% - 60px) !important;
     background: var(--almostWhite) !important;
     border: none !important;
}

.accordionElement .gs_item.active button{
    background: var(--almostWhite) !important;
}

.accordionElement h3 button{
    z-index: 2;
    position: relative;
    transition: 0.15s all linear;
    padding: 0px !important;
    background: none !important;
    border: none !important;
}


.accordionElement button:before{
    content: "";
    position: absolute;
    left: auto;
    right: 1px;
    top: 0px;
    background: var(--secondary1);
    height: 100%;
    width: 80%;
    border-radius: 20px;
    z-index: 1;
}

.accordionElement button:after {
    content: "";
    position: absolute !important;
    top: 50%;
    right: 17px;
    transform: translateY(-50%);
    background-image: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTkiIGhlaWdodD0iMTQiIHZpZXdCb3g9IjAgMCAxOSAxNCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KICA8cGF0aCBkPSJNMTEuMjUgMUwxNy4yNSA3TDExLjI1IDEzIiBzdHJva2U9IiMwMjJFNzUiIHN0cm9rZS13aWR0aD0iMiIvPgogIDxwYXRoIGQ9Ik0xNi43NSA3SDAuNzUiIHN0cm9rZT0iIzAyMkU3NSIgc3Ryb2tlLXdpZHRoPSIyIi8+Cjwvc3ZnPg==);
    background-position: center;
    background-repeat: no-repeat;
    background-size: contain;
    width: 30px;
    height: 30px;
    z-index: 1;
}


.accordionElement.buttonBlue button:before{
    content: "";
    position: absolute;
    left: auto;
    right: 1px;
    top: 0px;
    background: var(--primary2) !important;
    height: 100%;
    width: 80%;
    border-radius: 20px;
    z-index: 1;
}

.accordionElement.buttonBlue button:after {
    content: "";
    position: absolute !important;
    top: 50%;
    right: 17px;
    transform: translateY(-50%) rotate(-90deg);
    background-image: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMzAiIGhlaWdodD0iMTciIHZpZXdCb3g9IjAgMCAzMCAxNyIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KICA8cGF0aCBkPSJNMiAyTDE1IDE0TDI4IDIiIHN0cm9rZT0iI0Y0RjRGNCIgc3Ryb2tlLXdpZHRoPSIzIi8+Cjwvc3ZnPg==);
    background-position: center;
    background-repeat: no-repeat;
    background-size: contain;
    width: 30px;
    height: 30px;
    z-index: 1;
    transition: 0.25s all linear;
}

.accordionElement.buttonBlue button:hover:after {
    transform: translateY(-50%) rotate(0deg);
}

/************** POST LOOP STYLE ACCORDION **********************/


.posts_loop_style .gspbgrid_item_link:hover + .wrapper > div{
    width: calc(100% - 60px) !important;
}

.posts_loop_style .wrapper:after {
    content: "";
    position: absolute !important;
    top: 50%;
    right: 17px;
    transform: translateY(-50%);
    background-image: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTkiIGhlaWdodD0iMTQiIHZpZXdCb3g9IjAgMCAxOSAxNCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KICA8cGF0aCBkPSJNMTEuMjUgMUwxNy4yNSA3TDExLjI1IDEzIiBzdHJva2U9IiMwMjJFNzUiIHN0cm9rZS13aWR0aD0iMiIvPgogIDxwYXRoIGQ9Ik0xNi43NSA3SDAuNzUiIHN0cm9rZT0iIzAyMkU3NSIgc3Ryb2tlLXdpZHRoPSIyIi8+Cjwvc3ZnPg==);
    background-position: center;
    background-repeat: no-repeat;
    background-size: contain;
    width: 30px;
    height: 30px;
    z-index: 1;
}


.posts_loop_style .wrapper:before{
    content: "";
    position: absolute;
    left: auto;
    right: 1px;
    top: 0px;
    background: var(--secondary1) !important;
    height: 100%;
    width: 80%;
    border-radius: 20px;
    z-index: 1;
}

.posts_loop_style .wrapper > div{
    background: var(--lightGrey) !important;
    padding: 30px 30px !important;
    z-index: 10;
    width: 100% !important;
    transition: 0.15s all linear;
    border-radius: 20px;
    z-index: 10;
    position: relative;
    box-shadow: 0 4px 30px 0 rgba(0,0,0,0.07) !important;
}

.posts_loop_style .titlePost{
    margin-top: 0px !important;
    margin-bottom: 20px !important;
    display: block !important;
}

.posts_loop_style .gspbgrid_item_link{
    z-index: 100 !important;
}

.posts_loop_style .beitragLink{
    background: var(--secondary1) !important;
    border-radius: 10px;
    padding: 10px 30px;
}

.posts_loop_style .gspbgrid_item_link:hover + .wrapper a.beitragLink{
    background: var(--primary1) !important;
}


/************ DOWNLOAD ACCORDION STYLE ***************/
.download_accordion_style{
    position: relative;
}

.download_accordion_style .linkWrap{
    position: absolute;
    top: 0px;
    left: 0px;
    z-index: 10;
    width: 100%;
    height: 100%;
}

.download_accordion_style:hover a.mainLink{
    width: calc(100% - 60px) !important;
    position: relative;
    
}

.download_accordion_style a.mainLink:before{
    content: "";
    width: 60px;
    height: 90px;
    background: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNDciIGhlaWdodD0iNTkiIHZpZXdCb3g9IjAgMCA0NyA1OSIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KICA8cGF0aCBkPSJNMjYuNSA2LjVWMTcuN0MyNi41IDE4LjQ0MjYgMjYuODE2MSAxOS4xNTQ4IDI3LjM3ODcgMTkuNjc5OUMyNy45NDEzIDIwLjIwNSAyOC43MDQ0IDIwLjUgMjkuNSAyMC41SDQxLjUiIHN0cm9rZT0iIzAyMkU3NSIgc3Ryb2tlLXdpZHRoPSI1IiBzdHJva2UtbGluZWNhcD0ic3F1YXJlIiBzdHJva2UtbGluZWpvaW49InJvdW5kIi8+CiAgPHBhdGggZD0iTTM4LjUgNTYuNUg4LjVDNi45MDg3IDU2LjUgNS4zODI1OCA1NS44Njc5IDQuMjU3MzYgNTQuNzQyNkMzLjEzMjE0IDUzLjYxNzQgMi41IDUyLjA5MTMgMi41IDUwLjVWOC41QzIuNSA2LjkwODcgMy4xMzIxNCA1LjM4MjU4IDQuMjU3MzYgNC4yNTczNkM1LjM4MjU4IDMuMTMyMTQgNi45MDg3IDIuNSA4LjUgMi41SDI5LjVMNDQuNSAxNy41VjUwLjVDNDQuNSA1Mi4wOTEzIDQzLjg2NzkgNTMuNjE3NCA0Mi43NDI2IDU0Ljc0MjZDNDEuNjE3NCA1NS44Njc5IDQwLjA5MTMgNTYuNSAzOC41IDU2LjVaIiBzdHJva2U9IiMwMjJFNzUiIHN0cm9rZS13aWR0aD0iNSIgc3Ryb2tlLWxpbmVjYXA9InNxdWFyZSIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCIvPgogIDxwYXRoIGQ9Ik0xNC41IDIwLjVIMTcuNSIgc3Ryb2tlPSIjMDIyRTc1IiBzdHJva2Utd2lkdGg9IjUiIHN0cm9rZS1saW5lY2FwPSJzcXVhcmUiIHN0cm9rZS1saW5lam9pbj0icm91bmQiLz4KICA8cGF0aCBkPSJNMTQuNSAzMi41SDMyLjUiIHN0cm9rZT0iIzAyMkU3NSIgc3Ryb2tlLXdpZHRoPSI1IiBzdHJva2UtbGluZWNhcD0ic3F1YXJlIiBzdHJva2UtbGluZWpvaW49InJvdW5kIi8+CiAgPHBhdGggZD0iTTE0LjUgNDQuNUgzMi41IiBzdHJva2U9IiMwMjJFNzUiIHN0cm9rZS13aWR0aD0iNSIgc3Ryb2tlLWxpbmVjYXA9InNxdWFyZSIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCIvPgo8L3N2Zz4=");
    background-size: contain !important;
    background-position: center !important;
    background-repeat: no-repeat !important;
    position: absolute;
    left: 30px;
    top: 50%;
    transform: translateY(-50%);
}

.download_accordion_style a.mainLink b{
    background: var(--secondary1) !important;
    border-radius: 10px;
    padding: 10px 30px;
    position: absolute;
    right: 30px;
    top: 50%;
    transform: translateY(-50%);
    font-weight: 500 !important;
    transition: 0.15s all linear;
}

.download_accordion_style a.mainLink{
    background: var(--lightGrey) !important;
    padding: 30px 30px !important;
    z-index: 10;
    width: 100% !important;
    transition: 0.15s all linear;
    border-radius: 20px;
    z-index: 10;
    position: relative;
    padding-left: 120px !important;
    padding-right: 200px !important;
    box-shadow: 0 4px 30px 0 rgba(0,0,0,0.07) !important;
}

.download_accordion_style:after {
    content: "";
    position: absolute !important;
    top: 50%;
    right: 17px;
    transform: translateY(-50%);
    background-image: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNDciIGhlaWdodD0iNTIiIHZpZXdCb3g9IjAgMCA0NyA1MiIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KICA8cGF0aCBkPSJNMi41IDM5LjA0MDhWNDQuMjIyNkMyLjUgNDUuNTk2OSAzLjA0NTk0IDQ2LjkxNDkgNC4wMTc3MiA0Ny44ODY3QzQuOTg5NSA0OC44NTg1IDYuMzA3NTEgNDkuNDA0NCA3LjY4MTgxIDQ5LjQwNDRIMzguNzcyN0M0MC4xNDcgNDkuNDA0NCA0MS40NjUgNDguODU4NSA0Mi40MzY4IDQ3Ljg4NjdDNDMuNDA4NiA0Ni45MTQ5IDQzLjk1NDUgNDUuNTk2OSA0My45NTQ1IDQ0LjIyMjZWMzkuMDQwOCIgc3Ryb2tlPSIjMDIyRTc1IiBzdHJva2Utd2lkdGg9IjUiIHN0cm9rZS1saW5lY2FwPSJzcXVhcmUiIHN0cm9rZS1saW5lam9pbj0icm91bmQiLz4KICA8cGF0aCBkPSJNMTAuMjcyNiAyMy40OTU1TDIzLjIyNzIgMzYuNDVMMzYuMTgxNyAyMy40OTU1IiBzdHJva2U9IiMwMjJFNzUiIHN0cm9rZS13aWR0aD0iNSIgc3Ryb2tlLWxpbmVjYXA9InNxdWFyZSIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCIvPgogIDxwYXRoIGQ9Ik0yMy4yMjcyIDIuNVYzMy41OTA5IiBzdHJva2U9IiMwMjJFNzUiIHN0cm9rZS13aWR0aD0iNSIgc3Ryb2tlLWxpbmVjYXA9InNxdWFyZSIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCIvPgo8L3N2Zz4=");
    background-position: center;
    background-repeat: no-repeat;
    background-size: contain;
    width: 30px;
    height: 30px;
    z-index: 1;
}


.download_accordion_style:before{
    content: "";
    position: absolute;
    left: auto;
    right: 0px;
    top: 0px;
    background: var(--secondary1) !important;
    height: 100%;
    width: 80%;
    border-radius: 20px;
    z-index: 1;
}



.download_accordion_style a.mainLink span{
    display: block !important;
    opacity: 0.5;
    font-weight: 500;
}

.download_accordion_style a.mainLink:hover{
    color: var(--primary2) !important;
}

.download_accordion_style a.mainLink:hover b{
    background: var(--primary1) !important;
}

.posts_loop_style .gspbgrid_item_link:hover + .wrapper > div{
    width: calc(100% - 0px) !important;
}

@media (min-width: 768px){
    .accordionElement h3 span.gs_name span{
        width: calc(60vw + 2px) !important;
        display: block;
    }
}

@media (max-width: 767px){
    .download_accordion_style a.mainLink{
        padding-right: 30px !important;
    }

    .download_accordion_style a.mainLink b{
        position: relative;
        transform: none !important;
        left: 0px !important;
        top: 0px !important;
        display: table !important;
        margin-top: 10px !important;
    }
    
}


@media (min-width: 1000px){
    .posts_loop_style .titlePost h2{
        width: calc(60vw + 20px) !important;
    }

    .posts_loop_style .gspbgrid_item_link:hover + .wrapper > div{
        width: calc(100% - 60px) !important;
    }
}



@media (min-width: 1200px){
    .accordionElement h3:hover button span.gs_name{
        width: calc(100% - 90px) !important;
    }

    .posts_loop_style .gspbgrid_item_link:hover + .wrapper > div{
        width: calc(100% - 90px) !important;
    }
    
    .accordionElement .gs_item.active button span.gs_name{
        width: calc(100% - 90px) !important;
    }

    .download_accordion_style:hover a.mainLink{
        width: calc(100% - 90px) !important;
    }
    
    .accordionElement.buttonBlue .gs_item.active button:after{
        transform: translateY(-50%) rotate(0deg) !important;
    }
    
    .accordionElement button:after,.posts_loop_style .wrapper:after,.download_accordion_style:after {
        right: 29px;
        width: 40px;
        height: 40px;
    }
    
    .accordionElement.buttonBlue button:after {
        right: 33px !important;
    } 
   
}

@media (min-width: 1700px){
    .posts_loop_style .titlePost h2{
        width: calc(70vw + 20px) !important;
    }

    .accordionElement h3 span.gs_name span{
        width: calc(70vw + 20px) !important;
    }

}
