section.m17_accordion {
    position: relative;
    z-index: 2;
}

/* transition */
section.m17_accordion .m17_akkordeon_item_head_icon_container,
section.m17_accordion .m17_akkordeon_item_content,
section.m17_accordion .m17_akkordeon_item_head {
    -webkit-transition: background-color 0.4s;
    -moz-transition: background-color 0.4s;
    -ms-transition: background-color 0.4s;
    -o-transition: background-color 0.4s;
    transition: background-color 0.4s;
}
/* *** */

/* item */
section.m17_accordion .m17_akkordeon_item {
    margin-bottom: 20px;
    border: 1px solid #333333;
}

section.m17_accordion .m17_akkordeon_item:last-child {
    margin-bottom: 0;
}
/* *** */

section.m17_accordion .m17_akkordeon_item_head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 26px 21px 26px 38px;
    background-color: #131313;
    cursor: pointer;
}

/* beschriftung */
section.m17_accordion .m17_akkordeon_item_head_beschriftung * {
    font-size: 1rem;
    font-weight: 400;
    -webkit-transition: color 0.4s;
    -moz-transition: color 0.4s;
    -ms-transition: color 0.4s;
    -o-transition: color 0.4s;
    transition: color 0.4s;
}
/* ** */

/* icon */
section.m17_accordion .m17_akkordeon_item_head_icon_container {
    width: 30px;
    height: 30px;
    border: 1px solid #fff;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: #fff;
    transition: all .4s;
}

section.m17_accordion .m17_akkordeon_item_head_icon_container svg {
    width: 10px;
    fill: #000;
    -webkit-transform:rotate(0deg);
    -moz-transform:rotate(0deg);
    -ms-transform:rotate(0deg);
    -o-transform:rotate(0deg);
    transform:rotate(0deg);
    -webkit-transition: all 0.4s;
    -moz-transition: all 0.4s;
    -ms-transition: all 0.4s;
    -o-transition: all 0.4s;
    transition: all 0.4s;
}
/* *** */

/* content */
section.m17_accordion .m17_akkordeon_item_content {
    display: none;
    overflow: hidden;
    padding: 0 21px 0 38px;
    background-color: #131313;
}

section.m17_accordion .m17_akkordeon_item_content_main {
    padding-bottom: 26px;
}

section.m17_accordion .m17_titel {
    text-align: center;
}

section.m17_accordion .m17_titel_container {
    margin-bottom: 44px;
}
/* *** */

section.m17_accordion .m17_akkordeon_item_head_beschriftung {
    max-width: calc(100% - 30px - 20px);
}

/* active & hover */
section.m17_accordion .m17_akkordeon_item_head:hover .m17_akkordeon_item_head_beschriftung *,
section.m17_accordion .m17_akkordeon_item.active .m17_akkordeon_item_head_beschriftung * {  
    color: #fff;
}

section.m17_accordion .m17_akkordeon_item_head:hover .m17_akkordeon_item_head_icon_container,
section.m17_accordion .m17_akkordeon_item.active .m17_akkordeon_item_head_icon_container {
    background-color: transparent;
}

section.m17_accordion .m17_akkordeon_item.active .m17_akkordeon_item_head,
section.m17_accordion .m17_akkordeon_item.active .m17_akkordeon_item_content {
    background-color: #131313;
}

section.m17_accordion .m17_akkordeon_item_head:hover .m17_akkordeon_item_head_icon_container svg,
section.m17_accordion .m17_akkordeon_item.active .m17_akkordeon_item_head_icon_container svg {
    -webkit-transform: rotate(-180deg);
    -moz-transform: rotate(-180deg);
    -ms-transform: rotate(-180deg);
    -o-transform: rotate(-180deg);
    transform: rotate(-180deg);
    fill: #fff;
}
/* *** */

@media screen and (max-width: 420px) {
    section.m17_accordion .m17_akkordeon_item_head {
        padding: 16px 11px 16px 18px;
    }
    
    section.m17_accordion .m17_akkordeon_item_content {
        padding: 0 11px 0 18px;
    }
    
    section.m17_accordion .m17_akkordeon_item_content_main {
        padding-bottom: 22px;
        padding-top: 12px;
    }
}