.accordions > h3 { margin-bottom:var(--gutter);}
.accordions > div {
    padding: 16px;


    border: 1px solid currentColor;
    /*background: #FFF;*/

    border-radius: var(--radius);
    transition: background-color 0.2s ease;
}

/*.accordions > div:not(:last-child) {*/
.accordions > div{
    margin-bottom: var(--gutter);
}
.accordions  {
    margin-top: var(--gutter); border-top: 1px solid transparent;
    margin-bottom: var(--gutter_big);
}
.accordions:first-child {
    margin-top: 0 !important;
}
.accordions > div.hover {
    background-color: rgba(63, 95, 222, 0.10);
    background-color: var(--green-lightest);
    background-color: white;
}

.accordions > div > header {
    position: relative;

    /*align-items: center;*/
    align-items: flex-start;

    display: flex;
    flex-wrap: wrap;
}

.accordions > div > header > button {
    outline: none;
    border: none;
    background: none;
    cursor: pointer;
    width: 100%;
    height: 100%;
    position: absolute;
    left: 0;
    top: 0;
}

/*.accordions > div > header button:focus-visible {
    box-shadow: 0 0 0 3px white, 0 0 0 5px var(--orange);
    border-radius: 8px;
}*/

.accordions > div > header h3 {
    margin: 0;

    font-size: 22px;
    font-style: normal;
    font-weight: 700;
    line-height: 130%;
    flex: 1;
    padding-top: 3px;
    padding-bottom: 3px;
}

.accordions > div > header p {
    margin: 0.75em 0;
    width: 100%;
}


.accordions > div > header .pseudo_button::after {
    content: "Show";
    color: currentColor;
    display: flex; align-items: center;
    border: 1px solid black;
  /*  background: #FFF;*/
    border-radius: 16px;
    font-family: var(--headingfont);
    font-size: 19px;
    font-weight: 400;
    line-height: 1;
    padding: 8px 8px 8px 36px;
    background-size: 20px 20px;
    background-position: 8px 50%;
    background-repeat: no-repeat;

    background-image: url('data:image/svg+xml;utf8,<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 20 20" style="enable-background:new 0 0 20 20;" xml:space="preserve"><polygon fill="black" points="10,13.1 5.9,9.1 7,8 10,11 13,8 14.1,9.1"/><path fill="black" d="M10,20C4.5,20,0,15.5,0,10C0,4.5,4.5,0,10,0c5.5,0,10,4.5,10,10C20,15.5,15.5,20,10,20z M10,1c-5,0-9,4-9,9 c0,5,4,9,9,9c5,0,9-4,9-9C19,5,15,1,10,1z"/></svg>');


}


.accordions > div > header:has(:focus-visible) .pseudo_button::after  {
    box-shadow: 0 0 0 3px var(--blue);

}
.accordions > div.open > header .pseudo_button::after {
    content: "Hide";
    background-image: url('data:image/svg+xml;utf8,<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 20 20" style="enable-background:new 0 0 20 20;" xml:space="preserve"><polygon fill="black" points="13,12 10,9 7,12 5.9,10.9 10,6.9 14.1,10.9 		"/><path fill="black" d="M10,20C4.5,20,0,15.5,0,10C0,4.5,4.5,0,10,0s10,4.5,10,10C20,15.5,15.5,20,10,20z M10,1c-5,0-9,4-9,9s4,9,9,9 s9-4,9-9S15,1,10,1z"/></svg>');
}


.accordions > div > header:has(:focus-visible) .pseudo_button::after  ,
.accordions > div.hover > header .pseudo_button::after {
    background-color: rgba(63, 95, 222, 0.10);
    background-color: var(--green-lightest);
    background-color: white;
    background-image: url('data:image/svg+xml;utf8,<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 20 20" style="enable-background:new 0 0 20 20;" xml:space="preserve"><path fill="black" d="M10,20C4.5,20,0,15.5,0,10S4.5,0,10,0s10,4.5,10,10S15.5,20,10,20z"/><polygon fill="%23FFFFFF" points="10,13.1 5.9,9.1 7,8 10,11 13,8 14.1,9.1  "/></svg>');

}

.accordions > div.open > header:has(:focus-visible) .pseudo_button::after ,
.accordions > div.open.hover > header .pseudo_button::after {
    background-color: rgba(63, 95, 222, 0.10);
    background-color: var(--green-lightest);
    background-color: white;
    background-image: url('data:image/svg+xml;utf8,<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 20 20" style="enable-background:new 0 0 20 20;" xml:space="preserve"><path fill="black" d="M10,20C4.5,20,0,15.5,0,10C0,4.5,4.5,0,10,0s10,4.5,10,10C20,15.5,15.5,20,10,20z"/><polygon fill="%23FFFFFF" points="13,12 10,9 7,12 5.9,10.9 10,6.9 14.1,10.9 		"/></svg>');
}

.accordions > div > div {
    visibility: hidden;
    max-height: 0;
    transition: max-height 0.333s ease-out;
    overflow: hidden
}

.accordions:not(.stepbystep) > div > div::before {
    display: block;
    height: 24px;
    content: "";
}

.accordions > div.open > div {
    max-height: 500em;visibility: visible;
    transition: max-height 0.5s ease-in;
}

@media all and (max-width: 1199px) {


}
@media all and (max-width: 899px) {
    .accordions > div > header {
        display: block;
    }
    button.showall,
        /*.accordions > div > header::after {*/
    .accordions > div > header .pseudo_button::after {
        font-size: 17px; display: inline-flex;
    }

    .accordions > div > header h3 {
        font-size: 18px; margin-bottom: 0.5em;
    }
    .accordions > div > header h3+p { margin-top: 0}
}




@media all and (max-width: 899px) {



}