.medaille {
    width: 5.5em;
    height: 5.5em;
    border-width: 2px;
    border-radius: 50%;
    box-shadow: 0 .2em .6em rgba(0, 0, 0, 0.2), inset 0 3px 2px 2px rgba(255, 255, 255, .8), inset 0 -2px 1px -1px rgba(0, 0, 0, .2);
    display: inline-block;
}

.medaille.small {
    width: 1.3rem;
    height: 1.3rem;
    border-width: 1px;
    border-radius: 50%;
    box-shadow: inset 0 2px 1px 1px rgba(255, 255, 255, .8), inset 0 -1px 1px -1px rgba(0, 0, 0, .2);
    display: inline-block;
}

.animate {
    animation-name: rotation;
    animation-duration: 1.5s;
    animation-iteration-count: infinite;
    animation-direction: alternate;
    animation-timing-function: ease-in-out;
}

@keyframes rotation {
    from {
        transform: translate(-8px) rotate(-8deg);
    }
    to {
        transform: translate(8px) rotate(8deg);
    }
}

.ohne {
    border: 2px dashed lightsteelblue;
    box-shadow: 0 .2em .6em rgba(0, 0, 0, 0.2);
}

.gold {
    border-color: #f1ca00;
    border-style: solid;
    background: linear-gradient(135deg, #fff 0%, #FFD700 100%);
}

.silber {
    border-color: #ccc;
    border-style: solid;
    background: linear-gradient(135deg, #fff 0%, #ddd 100%);
}

.bronze {
    border-color: #f3ae5e;
    border-style: solid;
    background: linear-gradient(135deg, #fff 0%, #f3ae5e 100%);
}