/*Farbauswahl von Adidas*/

body {background-color: #f7f5f4;}
#temp02 .card-skelett {width: 100%; background-color: white; position: relative; display: flex;}
#temp02 .overflow-hidden {overflow: hidden;}
#temp02 .img-skelett {width: 100%; height: 240px; background-color: #ebeff1; transition: 1s all; border-radius: 5px;}
#temp02 .name-skelett {width: 50%; height: 20px; background-color: #ebeff1; margin-top: 15px; transition: 1s all; border-radius: 5px;}
#temp02 .ausstatung-skelett {width: 70%; height: 24px; background-color: #ebeff1; margin-top: 18px; margin-bottom: 18px; transition: 1s all; border-radius: 5px;}
#temp02 .preis-skelett {width: 90%; height: 20px; background-color: #ebeff1; transition: 1s all; border-radius: 5px;}
#temp02 .preis2-skelett {width: 50%; height: 20px; background-color: #ebeff1; margin-top: 10px; transition: 1s all; border-radius: 5px;}
#temp02 .minPreis-skelett {width: 40%; height: 20px; background-color: #ebeff1; margin-top: 10px; transition: 1s all; border-radius: 5px;}
#temp02 .button-details-skelett {width: 129px; height: 41px; background-color: #ebeff1; margin-top: 10px; transition: 1s all; border-radius: 5px;}
#temp02 .sterne-skelett {width: 65px; height: 15px; background-color: #ebeff1; position: absolute; top: 15px; right: 15px; transition: 1s all; border-radius: 5px;}
#temp02 .sterne-text-skelett {width: 100px; height: 18px; background-color: #ebeff1; position: absolute; top: 35px; right: 15px; transition: 1s all; border-radius: 5px;}

#temp02 .card-skelett:after {animation: skelett-wave02 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-wave02 {0% {transform: translate(-100%)} to {transform: translate(100%)}}

@media (max-width: 767px) {
    #temp02 .card-skelett {flex-direction: column;}
}

@media (max-width: 478px) {
    #temp02 .sterne-skelett {position: unset; margin-top: 15px; width: 25%;}
    #temp02 .sterne-text-skelett {position: unset; margin-top: 10px; width: 40%;}
    #temp02 .button-details-skelett {width: 100%; margin-top: 15px;}
    #temp02 .ausstatung-skelett {width: 100%;}
    #temp02 .preis-skelett {width: 100%;}
    #temp02 .preis2-skelett {width: 60%;}
    #temp02 .minPreis-skelett {width: 50%;}
}



/*Ohne Effekt*/

body {background-color: #f7f5f4;}
#temp02OhneEffekt .card-skelett {width: 100%; background-color: white; position: relative; display: flex;}
#temp02OhneEffekt .overflow-hidden {overflow: hidden;}
#temp02OhneEffekt .img-skelett {width: 100%; height: 240px; background-color: #ebeff1; transition: 1s all; border-radius: 5px;}
#temp02OhneEffekt .name-skelett {width: 50%; height: 20px; background-color: #ebeff1; margin-top: 15px; transition: 1s all; border-radius: 5px;}
#temp02OhneEffekt .ausstatung-skelett {width: 70%; height: 24px; background-color: #ebeff1; margin-top: 18px; margin-bottom: 18px; transition: 1s all; border-radius: 5px;}
#temp02OhneEffekt .preis-skelett {width: 90%; height: 20px; background-color: #ebeff1; transition: 1s all; border-radius: 5px;}
#temp02OhneEffekt .preis2-skelett {width: 50%; height: 20px; background-color: #ebeff1; margin-top: 10px; transition: 1s all; border-radius: 5px;}
#temp02OhneEffekt .minPreis-skelett {width: 40%; height: 20px; background-color: #ebeff1; margin-top: 10px; transition: 1s all; border-radius: 5px;}
#temp02OhneEffekt .button-details-skelett {width: 129px; height: 41px; background-color: #ebeff1; margin-top: 10px; transition: 1s all; border-radius: 5px;}
#temp02OhneEffekt .sterne-skelett {width: 65px; height: 15px; background-color: #ebeff1; position: absolute; top: 15px; right: 15px; transition: 1s all; border-radius: 5px;}
#temp02OhneEffekt .sterne-text-skelett {width: 100px; height: 18px; background-color: #ebeff1; position: absolute; top: 35px; right: 15px; transition: 1s all; border-radius: 5px;}


@media (max-width: 767px) {
    #temp02OhneEffekt .card-skelett {flex-direction: column;}
}

@media (max-width: 478px) {
    #temp02OhneEffekt .sterne-skelett {position: unset; margin-top: 15px; width: 25%;}
    #temp02OhneEffekt .sterne-text-skelett {position: unset; margin-top: 10px; width: 40%;}
    #temp02OhneEffekt .button-details-skelett {width: 100%; margin-top: 15px;}
    #temp02OhneEffekt .ausstatung-skelett {width: 100%;}
    #temp02OhneEffekt .preis-skelett {width: 100%;}
    #temp02OhneEffekt .preis2-skelett {width: 60%;}
    #temp02OhneEffekt .minPreis-skelett {width: 50%;}
}