.shade {box-shadow: rgba(0, 0, 0, 0.4) 0 0.25rem 0.5rem}
.linksom {transform: rotate(0deg)}
.rechtsom {transform: rotate(-0deg)}

.card-container {display: flex;justify-content: center;align-items: stretch;gap: 2%;flex-wrap: wrap;padding: 0; max-width: 100%;}

.card {display: flex;flex-direction: column;width: 21%;background-color: #f1f0ee;box-shadow: rgba(0, 0, 0, 0.4) 0 0.25rem 0.5rem;text-align: center;text-wrap: balance;transition: 0.5s;overflow: hidden;border-radius: 6px;}

.card-image {width: 100%;height: auto;object-fit: cover;margin-bottom: 20px;}
.card-title {padding: 2% 0 7% 0;color: #011057}
.card-description {flex-grow: 1;padding: 2% 5% 12% 5%;}

.card-button {align-self: center;margin: 0 0 30px 0;font-size: 1rem;background-color: #011057;color: #f1f0ee;border-color:#f8f8f8;padding: 14px 5% 14px 5%;text-align: center;text-decoration: none; box-sizing: border-box; border: 1px solid; border-radius: 6px;cursor: pointer;transition: 0.3s;}


.card:hover {background-color: #011057;color: #f1f0ee}
.card:hover > .card-button {background-color: #786c5c;color: #f8f8f8;font-weight: 700}
.card:hover > .card-title {color: #3b8dbe}
		
@media screen and (max-width: 600px) {

.card {width: 85%;margin:30px 0 0 0}
.card-title {padding: 2px 0 10px 0}
.card-description {padding: 2% 2% 5% 2%;}

}