html {
    scroll-behavior: smooth
}



#step_4 .button {
    margin-top: 5px;
    width: 200px;
    text-align: center;
    display: inline-block;
}
.btn-animated {
    animation: moveInBottom 0.5s ease-out;
    animation-fill-mode: backwards;
    animation-iteration-count: 3;

}

#step_4 .button:hover {
    border: 0px solid #95551f!important;

}
.step_tarif { font-size: 13px; }

@keyframes moveInBottom {
    0% {
        transform: scale(1,1) translate(0px, 0px);
    }

    30%{
        transform: scale(1,1) translate(0px, 10px);
    }

    75%{
        transform: scale(1,1.1) translate(0px, -5px);
    }

    100% {
        transform: scale(1,1) translate(0px, 0px);
    }
}


#sticky_basket {
    position: fixed;
    bottom: 0px;
    width: auto;
    right: 0;
    z-index: 100;
    background: #157935;
    color: #fff;
    padding: 8px;
    border-radius: 6px 6px 0 0 !important;
    font-weight: 500;
}
#sticky_basket a {
    color: #fff;
}
.badge { padding: 6px; margin: 6px;
    background: #999;
    color: #fff;
    border-radius: 6px;
    cursor: pointer;
    line-height: 40px;
}
}

.badge:hover, .badge.active {
    background: #e20074;

}

.button {
    background-color: rgba(226,0,116,1.0);
    border: 0px none;
}


.tarif-container, .accordion__summary, .step-container  {
cursor: pointer;
}

.step-container a {
    display: block;
}

.notselected, .row-number-35.dnd-section {
    display: none;
}

.row-number-35.dnd-section.selected {
    display: block;
}

.smartContainer {
    background: rgba(0, 0, 0, 0.04);
    border-radius: 10px;
    margin: 1rem 0rem;
    display: block;
    padding: 1.5rem 1rem 0rem;
    font-size: 0.9rem;
    transition: 0.3s all;
}

#zubehoer_container .smartContainer {
}

.handy_container .smartContainer {
    min-height: 520px;


}

#zubehoer_container, #wertgarantie_container {
    grid-template-columns: repeat(2, 1fr);
    grid-auto-rows: 1fr;
    grid-column-gap: 10px;
    grid-row-gap: 0px;
    display: grid;

}

#wertgarantie_container {
    grid-auto-rows: min-content;
}

.smartPreis small {
    font-size: 10px;
}

.smartContainer:hover, .smartContainer.selected {
    background: rgba(0, 0, 0, 0.0);
    box-shadow: 0px 0px 15px 0px rgba(0, 0, 0, 0.25);
}

.pricing-card, #zubehoer_container .smartContainer, #wertgarantie_container .smartContainer, .step-container {
    position: relative;
}

.pricing-card.selected {
    background-color: rgba(255,255,255,1.0)!important;
}

#hs_cos_wrapper_widget_1687951251136 {
    position: relative;
}

.smartContainer.selected::after, .pricing-card.selected::after,
.step-container.selected::after {
    background: #157935;
    border-radius: 50%;
    color: #fff;
    content: "\2713";
    display: inline-block;
    font-size: 29px;
    height: 40px;
    position: absolute;
    top: 40px;
    width: 40px;
    padding-left: 10px;
    font-family: 'Open Sans', sans-serif;
}
.step-container.selected::after {
    left: 6px;
    top: 31px;
    width: 28px;
    height: 28px;
    font-size: 20px;
    padding-left: 6px;
    content: "\2713";
    padding-top: 2px;
}

#zubehoer_container .smartContainer.selected::after,
#wertgarantie_container .smartContainer.selected::after  {
    top: -10px;
    left: 0px;
}


#wertgarantie_container #keine-wertgarantie.smartContainer.selected::after  {
  display: none;
}

#wertgarantie_container #keine-wertgarantie.smartContainer.selected  h4 {
    position: relative;
    padding-left: 20px;
}

#wertgarantie_container #keine-wertgarantie.smartContainer.selected  h4 span.product-name::before {
    background: #157935;
    border-radius: 50%;
    color: #fff;
    content: "\2713";
    display: inline-block;
    font-size: 29px;
    height: 40px;
    position: absolute;
    top: 30px;
    width: 40px;
    padding-left: 10px;
    left: -30px;
    font-family: 'Open Sans', sans-serif;
}




#selected_zubehoer a {
    text-overflow: ellipsis;
    max-width: 100%;
    width: 220px;
    white-space: nowrap;
    overflow: hidden;
}

.pricing-card.selected::after {
    background: #fff;
    color: #157935;
    top: 20px;
    left: 10px;
}

.smartItem .image img {
    max-width: 100%;
    height: auto;
}

.smartItem input[type="radio"] {
    opacity: 0.01;
    z-index: 100;
}

.smartItem .image img {
    max-width: 100%;
    height: auto;
}

.smartPreis {
    float: left;
    text-transform: uppercase;
    font-size: 48px;
    font-weight: 900;
    font-family: 'Roboto Slab', serif;
    display: block;
    color: #666666;
    padding: 1rem 0 0 0rem;
}

.steuer {
    font-size: 0.7rem;
    line-height: 1rem;
}

.infoContainer {
    margin-top: -1rem;
    min-height: 345px !important;
}

.infoContainer h4 {
    font-size: 23px !important;
    min-height: 65px;
}

.newsItem h4, .modal h4 {
    font-size: 1rem;
    margin-bottom: 0.9rem;
    color: #36240d;
    font-family: 'Roboto Slab', serif;
}

.green {
    color: #157935;
}

#keine-wertgarantie {
    border: 0px;
    box-shadow: none;
    border-radius: unset;
    background: transparent;
    grid-column: 1 / -1;
    text-align: center;
    height: 100px;
    display: flex;
    justify-content: center;
    align-items: center;
}

/* wertgarantie gebraucht ausblenden */
#1309179843 {
    display: none!important;
}

.smartItem label {
    position: relative;
    display: block;
    padding: 10px 20px;
    color: #fff;
    text-transform: uppercase;
    max-width: 200px;
    margin-top: 28px;
    background: #e20074;
    transition: 0.3s all;
    border-radius: 0.25rem;
    float: right;
    cursor: pointer;
}

.btn-wahl, .btn-send {
    position: relative;
    display: block;
    padding: 15px;
    color: #fff;
    text-transform: uppercase;
    max-width: 200px;
    margin-top: 1rem;
    background: #E20074;
    transition: 0.3s all;
    float: right;
}

.btn-close a, .btn-wahl a {
    color: #fff;
    text-decoration: none !important;
}

.handy_wahl {
    font-weight: normal
}

.clearfix::after {
    content: "";
    display: table;
    clear: both;
}

.acc-title {
    font-size: 50px !important;
    color: #E20074 !important;
}

.accordion__summary, .accordion__summary::before {
    font-size: 50px !important;
    color: #E20074 !important;
    text-align: center !important;
}

.accordion__summary::marker {
    background: transparent;
    color: transparent;

}


.col-xs-4 {
    position: relative;
    min-height: 1px;
    padding-right: 15px;
    padding-left: 15px;
    float: left;
    width: 33.33333%;
}

.col-xs-8 {
    position: relative;
    min-height: 1px;
    padding-right: 15px;
    padding-left: 15px;
    float: left;
    width: 66.66667%;
}

.col-xs-12 {
    position: relative;
    min-height: 1px;
    padding-right: 15px;
    padding-left: 15px;
    float: left;
    width: 100%;
}




@media (min-width: 768px) {
    .col-md-6 {
        position: relative;
        min-height: 1px;
        padding-right: 15px;
        padding-left: 15px;
        float: left;
        width: 50%;
    }
}


/*=============== MODAL ===============*/
.container {
    margin-left: 1rem;
    margin-right: 1rem;
}

.modal {
    height: 100vh;
    display: grid;
    place-items: center;
}

.modal__button {
    display: inline-block;
    background-color: var(--first-color);
    color: #FFF;
    padding: 1rem 1.25rem;
    border-radius: .5rem;
    transition: .3s;
}

.modal__button:hover {
    background-color: var(--first-color-alt);
}

.modal__container {
    align-items: flex-end;
    background-color: #157935;
    display: grid;
    height: 100%;
    left: 0;
    opacity: 0;
    overflow: hidden;
    position: fixed;
    top: 25vh;
    transition: all .3s;
    visibility: hidden;
    width: 50vw;
    z-index: var(--z-modal);
    height: 50vh;
    left: 25vw;

    /*=== Effect 3 ===*/
    /* perspective: 1000px; */
}

.modal__content {
    position: relative;
    background-color: var(--container-color);
    text-align: center;
    padding: 3rem 2rem 2rem;
    border-radius: 1rem 1rem 0 0;
    transition: all .3s;

    /*=== Effect 1 ===*/
    transform: translateY(10%);

    /*=== Effect 2 ===*/
    /* transform: scale(.5) translateY(10%); */

    /*=== Effect 3 ===*/
    /* transform: rotateX(65deg) scale(.75) translateY(10%);
    transform-origin: 50% 100%; */
}

.modal__img {
    width: 150px;
    margin-bottom: .75rem;
}

.modal__close {
    display: inline-flex;
    background-color: var(--first-color);
    border-radius: .25rem;
    color: #FFF;
    font-size: 1.5rem;
    position: absolute;
    top: 2rem;
    right: 2rem;
    cursor: pointer;
}

.modal__title {
    font-size: 26px;
    color: #fff;
    font-weight: 500;
}

.modal__description {
    margin-bottom: 1.5rem;
}

.modal__button-width {
    width: 90%;
}

.modal__button-link {
    display: block;
    margin: 1rem auto 0;
    background-color: #e20074;
    color: #fff;
    font-weight: 500;
}

/* Show modal */
.show-modal {
    visibility: visible;
    opacity: 1;
    z-index: 100;
}

.modal__description {
    color: #fff;
    font-size: 24px;
}

.show-modal .modal__content {
    /*=== Effect 1 ===*/
   /* transform: translateY(0); */

    /*=== Effect 2 ===*/
    transform: scale(1) translateY(0);

    /*=== Effect 3 ===*/
    /* transform: rotateX(0) scale(1) translateY(0); */
}

#hs_cos_wrapper_module_16879506073993 .pricing-card__list, #hs_cos_wrapper_widget_1687950046813 .pricing-card__list {
    display: none;

}

.pricing-card__subheading h5 {
        cursor: pointer;
    position: relative;
    margin-top: 82px;

}

.pricing-card__subheading h5::before {
    color: #fff;
    content: "\002B";
    border-radius: 50%;
    display: inline-block;
    font-size: 24px;
    line-height: 30px;
    height: 30px;
    background-color: #157935;
    position: absolute;
    /* top: 40px; */
    width: 30px;
    left: -8px;
}

.pricing-card__subheading h5.active::before {
    color: #fff;
    content: "\2212";
    border-radius: 50%;
    display: inline-block;
    font-size: 24px;
    line-height: 30px;
    height: 30px;
    background-color: #157935;
    position: absolute;
    /* top: 40px; */
    width: 30px;
    left: -8px;
}

#hs_cos_wrapper_module_16879506073993 .pricing-card__list.active,  #hs_cos_wrapper_widget_1687950046813 .pricing-card__list.active  {
    display: block;
    cursor: pointer;
}

/*=============== BREAKPOINTS ===============*/
/* For small devices */
@media screen and (min-width: 576px) {
    .modal__content {
        margin: auto;
        width: 380px;
        border-radius: 1.25rem;
    }

    .modal__img {
        width: 170px;
    }

    .zubehoer_wahl {
        margin-top: 30px;
    }


}

@media (max-width: 576px) {
    #zubehoer_container, #wertgarantie_container {
        grid-template-columns: repeat(1, 1fr);
        grid-auto-rows: 1fr;
        grid-column-gap: 10px;
        grid-row-gap: 0px;

    }
}

@media (max-width: 767px) {
    #step_1 {
        margin-left: 10px;
    }

    .steps-wrapper {
        overflow-x: scroll;
        scroll-behavior: smooth;
    }
    .step-container {
        min-width: 250px
    }
}


.e-hidden, #angebot.e-hidden {
    display: none!important;
}