/*TODO: Hintergrundfarben entfernen*/ .hauptcontainer { /*Einzelne Elemente untereinander anzeigen.*/ flex-direction: column; height: 71%; } #searchResult_heading { background-color: #70AD47; margin-top: 30px; margin-left: 30px; margin-bottom: 25px; margin-right: 50px; } /*Container wird mit Daten aus der Datenbank gefüllt.*/ #searchResult_container { padding-left: 45px; padding-right: 50px; padding-bottom: 50px; } .book_container { background-color: blueviolet; display: flex; /*Einzelne Elemente nebeneinander anzeigen.*/ flex-direction: row; } .bookCover_container { background-color: blue; display: flex; /*Verbietet dem Container, seine Standardgröße (px) zu ändern.*/ flex: 0 0 125px; align-items: center; height: auto; } .bookCover { /*Bild passt sich seinem Container an.*/ max-width:100%; max-height:100%; } .bookDetails_container { background-color: aquamarine; width: 100%; display: flex; flex-direction: column; padding-left: 25px; padding-right: 25px; } .available_container { width: fit-content; /*Hintergrundfarbe wird an Inhalt angepasst.*/ background-color: #70AD47; /*background-color: #F34343;*/ /*Element immer an der unteren Seite des Containers platzieren.*/ margin-top: auto; } .available { color: white; margin: 10px 25px; } .shoppingCart_container { background-color: chartreuse; margin-left: auto; margin-top: auto; flex: 0 0 40px; } .shoppingCart { background-image: url('pictures/shopping_cart.png'); width: 40px; height: 40px; background-size: contain; background-repeat: no-repeat; } .shoppingCart:hover { background-image: url('pictures/shopping_cart_hover.png'); cursor: pointer; } .divider { margin-top: 15px; margin-bottom: 15px; background-color: #987554; width: 100%; height: 1px; }