.TeaserList .item { background: var(--logo-color-1-light); box-shadow: 2px 2px 5px rgba(0, 0, 0, .5); }
.TeaserList .item .head a.link { display: flex; flex-direction: column; }
.TeaserList .item a.link:hover, .TeaserList .item a.link:hover > * { text-decoration:	none; }
.TeaserList .item .head a.link .date.vorschau { order: 2; margin-left: -20px; margin-top: 1rem; }
.TeaserList .item .head a.link .vorschautext { color: var(--font-color-light); font-weight: 400; font-size: 14px; }
.TeaserList .item .foot .link { border: 1px solid #fff; }
.TeaserList .item .foot .link:hover { background-color: var(--logo-color-2); }

/* hover animation */
.TeaserList .item.ani-end img:hover { transform: scale(1.15) rotate(-5deg); }
.TeaserList .item .text .link:hover { text-decoration: none; background: var(--logo-color-2); transition: background-color 500ms; }
.TeaserList .item .text .link { display: block; color: #fff; border: 1px solid #fff; margin: 10px auto 0 auto; padding: 3px;
  	background: var(--logo-color-1); transition: background-color 500ms; line-height: 3rem; text-align: center; }

/* animation */
.TeaserList .item.ani-end img:hover { transform: scale(1.15) rotate(-5deg); }
.TeaserList .item .text .link:hover { text-decoration: none; background: var(--logo-color-2); transition: background-color 500ms; }
.TeaserList .item .date { background-color: var(--logo-color-2); color: var(--font-color-light); 
	align-self: flex-start; margin-left: -16px; padding-left: 16px; padding-right: 10px; }
.TeaserList .item .date.vorschau { display: none; }

@media all and (max-width: 1300px) { .TeaserList .item { flex-basis: calc(33.3% - 20px); } }
@media all and (max-width: 800px) { .TeaserList .item { flex-basis: calc(50% - 10px); } }
@media all and (max-width: 600px) { .TeaserList .item { flex-basis: calc(100% - 10px); } }