/*Farbauswahl von Instagram*/

#skelett1 .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;;}
#skelett1 .img-skelett {width: 100%; height: 206px; background-color: #efefef;}

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

#skelett1 .card-skelett:after {animation: skelett-wave1 1200ms alternate .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-wave1 {0% {transform: translate(-100%)} to {transform: translate(100%)}}

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

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

/*Ohne Effekt*/

#skelett1OhneEffekt .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;;}
#skelett1OhneEffekt .img-skelett {width: 100%; height: 206px; background-color: #efefef;}

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


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

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