section.m17_accordion {
background: url(//www.mediameans.de/wp-content/themes/BLUEtheWEB-child/img/services_optionen_background.png) no-repeat;
background-size: cover;
padding: 153px 0;
}
section.m17_accordion .m17_titel_container {
max-width: 600px;
margin-bottom: 58px;
}
section.m17_accordion .m17_titel_container h3 {
line-height: 1.2;
text-transform: uppercase;
} section.m17_accordion .m17_accordion_item {
position: relative; }
section.m17_accordion .m17_accordion_item:before,
section.m17_accordion .m17_accordion_item:after {
content: '';
position: absolute;
left: 0;
width: 100%;
height: 2px;
background: #9ea7b5;
transition: background .4s;
}
section.m17_accordion .m17_accordion_item:before {
top: -2px;
}
section.m17_accordion .m17_accordion_item:after {
bottom: 0;
}
section.m17_accordion .m17_accordion_item.active:before,
section.m17_accordion .m17_accordion_item.active:after {
background: #848c9a;
z-index: 2;
}
section.m17_accordion .m17_accordion_item_head {
position: relative;
display: flex;
padding: 40px 0 30px;
cursor: pointer;
}
section.m17_accordion .m17_accordion_item_head_col {
width: 50%;
}
section.m17_accordion .m17_accordion_item_head_beschriftung {
display: flex;
gap: 30px;
transition: opacity .4s;
}
section.m17_accordion .m17_accordion_item_head_beschriftung * {
font-family: Nexa-Heavy, sans-serif;
opacity: .5;
transition: opacity .4s;
}
section.m17_accordion .m17_accordion_item.active .m17_accordion_item_head_beschriftung * {
opacity: 1;
}
section.m17_accordion .m17_accordion_item_head_beschriftung span {
margin-top: 2px;
}
section.m17_accordion .m17_accordion_item_head_beschriftung p {
font-size: 1.5625rem;
}
section.m17_accordion .m17_accordion_item_content {
padding-left: 15px;
}
section.m17_accordion .m17_accordion_item_content_main {
opacity: 0;
max-width: 400px;
height: 0;
transition: opacity .4s;
overflow: hidden;
}
section.m17_accordion .m17_accordion_item_head_icon_container {
position: absolute;
top: 55px;
right: 0;
width: 58px;
min-width: 58px;
height: 58px;
border-radius: 50%;
border: 1px solid rgba(130, 139, 153, .5);
transition: border-color .4s;
transform: translateY(-50%);
}
section.m17_accordion .m17_accordion_item.active .m17_accordion_item_head_icon_container {
border: 1px solid rgba(130, 139, 153, 1);
}
section.m17_accordion .m17_accordion_item_head_icon_container:before,
section.m17_accordion .m17_accordion_item_head_icon_container:after {
content: '';
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
background: #96a4a9;
transition: background .4s, opacity .4s;
}
section.m17_accordion .m17_accordion_item_head_icon_container:before {
width: 10px;
height: 4px;
}
section.m17_accordion .m17_accordion_item.active .m17_accordion_item_head_icon_container:before {
background: #374052;
}
section.m17_accordion .m17_accordion_item_head_icon_container:after {
width: 4px;
height: 10px;
}
section.m17_accordion .m17_accordion_item.active .m17_accordion_item_head_icon_container:after {
opacity: 0;
}
@media all and (max-width: 1399px) {
section.m17_accordion .m17_accordion_item_head {
display: block;
}
section.m17_accordion .m17_accordion_item_head_col {
width: 100%;
}
section.m17_accordion .m17_accordion_item_content {
padding-left: 0;
}
section.m17_accordion .m17_accordion_item_content_main p {
padding-top: 20px;
}
}
@media all and (max-width: 1199px) {
section.m17_accordion {
padding: 75px 0;
}
}
@media all and (max-width: 575px) {
section.m17_accordion {
padding: 60px 0;
}
section.m17_accordion .m17_accordion_item_head_beschriftung {
padding-right: 75px;
}
section.m17_accordion .m17_accordion_item_head_beschriftung p {
font-size: 1.3rem;
}
section.m17_accordion .m17_accordion_item_head_icon_container {
top: 50px;
}
}
@media all and (max-width: 475px) {
section.m17_accordion .m17_titel_container h3 {
font-size: 2rem;
-webkit-hyphens: auto;
-moz-hyphens: auto;
-ms-hyphens: auto;
-o-hyphens: auto;
hyphens: auto;
word-break: break-word;
}
section.m17_accordion .m17_accordion_item_head_beschriftung {
gap: 15px;
}
}
@media all and (max-width: 375px) {
section.m17_accordion .m17_accordion_item_head_beschriftung p {
-webkit-hyphens: auto;
-moz-hyphens: auto;
-ms-hyphens: auto;
-o-hyphens: auto;
hyphens: auto;
word-break: break-word;
}
}