/*
=Accordion 
============================================= */
/*
=style the accordion */
.accordion {
    color: transparent;
    max-height: 0;
    overflow-y: hidden; 
    padding-right: 10px; 
    transition: 0.5s ease-in-out;
}
.accordion-header {
    position: relative;
}

.accordion-header p span.ach {
    font: normal 700 19px/1.2 "Manrope", sans-serif; 
    color: rgba(33 44 30/ 0.4);
    padding-bottom: 6px;
}
/*
=transition the accordion's text color + max height */
.chv_checkbox:checked ~ .accordion {
    color: rgb(33 44 30);
    max-height: 1500px;
}

/*
=transition the span element's text color from transparent to red */
.chv_checkbox:checked ~ .accordion {
    color: rgb(33 44 30);
}

/*
=ensure a smooth transition of the span element's text color */
.accordion span.red {
    transition: 0.5s ease-in-out;
}

/*
=Checkbox
============================================= */
.chv_checkbox {
    
    position: absolute;
    top: 0; left: 0;
    width: 100%; height: 100%;
    opacity: 0;
    cursor: pointer;
    z-index: 5;
}

/*
=Chevron + Rotate Wrappers
============================================= */
/*
=style the chevron wrapper */
.chv_wrapper {
   
    width: 35px; height: 35px;
    position: absolute;
    top: 0; right: 0; 
    padding: 5px;
    transform: translate(8.5px, -7px);
}

/*
=style the rotate wrapper */
.chv_rotate-wrapper { 
    height: 100%;
    display: flex;
    align-items: center;
    transition: 0.5s ease-in-out;
}

/*
=rotate the rotate wrapper 180° when the checkbox is checked */
.chv_checkbox:checked + .chv_wrapper .chv_rotate-wrapper {
    transform: rotate(180deg);
}

/*
=Chevron Lines
============================================= */
/*
=style the chevron lines */
.chv_rotate-wrapper::before,
.chv_rotate-wrapper::after {
    content:"";
    background-color: rgb(33 44 30);
    width: 50%; height: 1.5px;
}

/*
=rotate the left chevron line 45° clockwise + fine-tune its alignment */
.chv_rotate-wrapper::before {
    transform: rotate(45deg) translate(1.7px, -1.7px);
}
/*
=rotate the right chevron line 45° anticlockwise + fine-tune its alignment */

.chv_rotate-wrapper::after {
    transform: rotate(-45deg) translate(-1.7px, -1.7px);
}

/* ========================================== */

/* TYPE */

.accordion ul li, .teaser-text ul li{
    color: rgb(33 44 30);
    list-style: none;
    margin-bottom: 11px;
}

.accordion img {
    max-width: 250px;
    float: left;
    height: auto;
    margin: 0 25px 15px 0;
}

.accordion p {
    margin: 0;
}