/*Farbauswahl von https://csshint.com/wp-content/uploads/2022/01/Css-Skeleton-Loader-Animation.jpg*/

#skelett4 .card-skelett {box-shadow: 0 3px 3px -2px rgba(0,0,0,.1),0 3px 4px 0 rgba(0,0,0,.10),0 1px 8px 0 rgba(0,0,0,.10)!important; display: flex; border-radius: 6px; position: relative; overflow: hidden;;}
#skelett4 .img-skelett {width: 100%; height: 206px; background-color: #e6e6e6;}

#skelett4 .titel-skelett {width: 71%; background-color: #e6e6e6; height: 24px; margin-top: 10px; margin-bottom: 18px; transition: 1s all; border-radius: 5px;}
#skelett4 .art-skelett {background-color: #e6e6e6; height: 24px; margin-bottom: 15px; width: 60%; transition: 1s all; border-radius: 5px;}
#skelett4 .ausstatung-skelett {width: 80%; height: 24px; background-color: #e6e6e6; margin-bottom: 15px; transition: 1s all; border-radius: 5px;}
#skelett4 .preis-skelett {width: 50%; background-color: #e6e6e6; height: 24px; margin-bottom: 4px; transition: 1s all; border-radius: 5px;}
#skelett4 .zeitraum-skelett {width: 65%; height: 24px; margin-top: 8px; background-color: #e6e6e6; transition: 1s all; border-radius: 5px;}
#skelett4 .button-details-skelett {width: 128px; height: 41px; position: absolute; bottom: 16px; right: 16px; background-color: #e6e6e6; border-radius: 5px; transition: 1s all;}
#skelett4 .button-merk-skelett {width: 36px; height: 38px; position: absolute; top: 16px; right: 16px; background-color: #e6e6e6; border-radius: 5px; transition: 1s all;}

#skelett4 .card-skelett:after {animation: skelett-wave4 1200ms linear .5s infinite; background:  linear-gradient(90deg,rgba(255,255,255,0),rgba(255,255,255,.5),rgba(255,255,255,0)); content: ""; position: absolute; top: 0; right: 0; bottom: 0; left: 0; z-index: 0;}

@keyframes skelett-wave4 {0% {transform: translate(-100%); transform: scale(1.3)} to {transform: translate(100%); transform: scale(3.1)}}

@media (max-width: 767px) {
    #skelett4 .card-skelett {flex-direction: column;}
    #skelett4 .button-merk-skelett {top: 150px;}
    #skelett4 .button-details-skelett {display: flex; float: right; margin-top: 16px; position: initial;}
}

@media (max-width: 500px) {
    #skelett4 .button-details-skelett {width: 100%; transition: 1s all;}
    #skelett4 .titel-skelett {width: 100%; height: 28px; transition: 1s all;}
    #skelett4 .ausstatung-skelett {width: 90%; transition: 1s all;}
    #skelett4 .zeitraum-skelett {width: 80%;}
}

/*Ohne Effekt*/

#skelett4OhneEffekt .card-skelett {box-shadow: 0 3px 3px -2px rgba(0,0,0,.1),0 3px 4px 0 rgba(0,0,0,.10),0 1px 8px 0 rgba(0,0,0,.10)!important; display: flex; border-radius: 6px; position: relative; overflow: hidden;;}
#skelett4OhneEffekt .img-skelett {width: 100%; height: 206px; background-color: #e6e6e6;}

#skelett4OhneEffekt .titel-skelett {width: 71%; background-color: #e6e6e6; height: 24px; margin-top: 10px; margin-bottom: 18px; transition: 1s all; border-radius: 5px;}
#skelett4OhneEffekt .art-skelett {background-color: #e6e6e6; height: 24px; margin-bottom: 15px; width: 60%; transition: 1s all; border-radius: 5px;}
#skelett4OhneEffekt .ausstatung-skelett {width: 80%; height: 24px; background-color: #e6e6e6; margin-bottom: 15px; transition: 1s all; border-radius: 5px;}
#skelett4OhneEffekt .preis-skelett {width: 50%; background-color: #e6e6e6; height: 24px; margin-bottom: 4px; transition: 1s all; border-radius: 5px;}
#skelett4OhneEffekt .zeitraum-skelett {width: 65%; height: 24px; margin-top: 8px; background-color: #e6e6e6; transition: 1s all; border-radius: 5px;}
#skelett4OhneEffekt .button-details-skelett {width: 128px; height: 41px; position: absolute; bottom: 16px; right: 16px; background-color: #e6e6e6; border-radius: 5px; transition: 1s all;}
#skelett4OhneEffekt .button-merk-skelett {width: 36px; height: 38px; position: absolute; top: 16px; right: 16px; background-color: #e6e6e6; border-radius: 5px; transition: 1s all;}


@media (max-width: 767px) {
    #skelett4OhneEffekt .card-skelett {flex-direction: column;}
    #skelett4OhneEffekt .button-merk-skelett {top: 150px;}
    #skelett4OhneEffekt .button-details-skelett {display: flex; float: right; margin-top: 16px; position: initial;}
}

@media (max-width: 500px) {
    #skelett4OhneEffekt .button-details-skelett {width: 100%; transition: 1s all;}
    #skelett4OhneEffekt .titel-skelett {width: 100%; height: 28px; transition: 1s all;}
    #skelett4OhneEffekt .ausstatung-skelett {width: 90%; transition: 1s all;}
    #skelett4OhneEffekt .zeitraum-skelett {width: 80%;}
}