.teaser-event {
	overflow-wrap: anywhere;
	hyphens: auto;

	:where(ol, ul) {
		padding: 0px;
		margin: 0px;
		list-style-type: none;
	}
	/* Einträge */
	& > ol {
		display: grid;
		grid-template-columns: repeat(3, minmax(0px, 1fr));
		column-gap: 50px;
		row-gap: 50px;

		& > li {
			display: flex;
			flex-direction: column;
			position: relative;
			background-color: var(--white-100);
			box-shadow: 0px 0px 4px var(--box-shadow-color), 0px 0px 8px var(--box-shadow-color), 0px 0px 16px var(--box-shadow-color);
			--color: var(--skin-color, var(--fsu-gold));

			&.gold { /* damit in Mandant mit Fak-Farbe goldene Markierung erscheint */
				--color: var(--fsu-gold);
			}
			&.biopha {
				--color: var(--color-biopha);
			}
			&.chege {
				--color: var(--color-chege);
			}
			&.fsv {
				--color: var(--color-fsv);
			}
			&.m_ehealth {
				--color: var(--color-m_ehealth);
			}
			&.mirz {
				--color: var(--color-mirz);
			}
			&.paf {
				--color: var(--color-paf);
			}
			&.phifak {
				--color: var(--color-phifak);
			}
			&.rewi {
				--color: var(--color-rewi);
			}
			&.thefak_fe {
				--color: var(--color-thefak_fe);
			}
			&.wiwi {
				--color: var(--color-wiwi);
			}
			& > article {
				flex: 1 0 auto;
				display: flex;
				flex-direction: column;

				& > a {
					display: block;
					outline: none;
					text-decoration: none;

					&::after {
						content: "";
						width: 100%;
						height: 100%;
						top: 0px;
						left: 0px;
						position: absolute;
					}
					&:focus-visible::after {
						outline: 3px solid var(--hover-color-dark);
						outline-offset: 0px;
					}
					@media (hover: hover) {
						&:hover::after {
							outline: 1px solid var(--hover-color-dark);
							outline-offset: 0px;
						}
					}
					& > .title {
						display: block;
						padding: 20px 15px 0px 15px; /* siehe Sonderfall Tooltip Blocküberschrift-Hierarchie */
						margin: 0px 0px 10px 0px;
						position: relative;
						z-index: 0;
						border-top: 3px solid var(--color);
						text-wrap: balance;
						color: var(--fsu-blue);
						font-weight: 500;
						font-variation-settings: var(--fsu-font-variation-headline-block);
						font-size: 1.375rem;
						line-height: 1.813rem;

						/* Rundung */
						& > span { /* Extra-Element, da Überschrift-Hierarchie die Pseudo-Elemente bei .title verwendet */
							&::before,
							&::after {
								content: "";
								width: 30px;
								position: absolute;
								top: 0px;
								right: 0px;
							}
							&::before {
								height: 30px; /* Safari Dinge */
								z-index: 1;
								background-color: var(--color);
							}
							&::after {
								height: 31px; /* Safari Dinge */
								z-index: 2;
								background-color: var(--white-100);
								border-top-right-radius: 30px;
							}
						}
					}
				}
				& > .date-time-categories {
					padding: 0px 15px;
					margin-bottom: 5px;
					text-transform: uppercase;
					color: var(--fsu-blue);
					font-size: 0.750rem;
					line-height: 1.000rem;

					& :where(li, ul) {
						display: inline;
					}
					& .academic-timing {
						text-transform: none;
					}
					& li:not(:first-child):before {
						content: "\2006\00B7\2006"; /* Leerzeichen · Leerzeichen */
					}
				}
				& > p {
					padding: 0px 15px;
					margin: 0px 0px 15px 0px;
					color: var(--text-color);
				}
				& > ul {
					flex: 1 0 auto;
					display: flex;
					align-content: flex-end;
					flex-wrap: wrap;
					gap: 10px;
					padding: 0px 15px 15px 15px;
					text-transform: uppercase;
					font-variation-settings: var(--fsu-font-variation-text-condensed);
					font-size: 0.750rem;
					line-height: 1.000rem;

					& > li {
						padding: 4px 5px 3px 5px; /* Standard - damit Eigenschaften visuell vertikal zentriert */
						box-sizing: border-box;
						border: 1px solid var(--text-color);
						color: var(--text-color);
					}
				}
				& > figure {
					order: -1;
					margin: 0px;

					& > picture {
						display: block; /* sonst werden ::before und ::after nicht korrekt positioniert */
						position: relative;
						z-index: 0;

						/* Rundung */
						&::before {
							content: "";
							width: 30px;
							position: absolute;
							right: 0px;
							bottom: 0px;
						}
						&::before {
							height: 30px; /* Safari Dinge */
							z-index: -1;
							background-color: var(--color);
						}
						& > img {
							width: 100%;
							display: block;
							aspect-ratio: 16 / 9;
							border-bottom-right-radius: 27px; /* Webkit Dinge */
						}
					}
					& > figcaption {
						padding: 0px 2px;
						position: absolute;
						top: 0px;
						left: 100%;
						transform: rotate(180deg);
						writing-mode: vertical-rl;
						color: var(--copyright-color);
						font-variation-settings: var(--fsu-font-variation-text-condensed);
						font-size: 0.750rem;
						line-height: 1.000rem;

						& > small {
							font-size: inherit; /* von figcaption übernehmen, da per default sonst "small" genutzt wird */
						}
					}
				}
			}
		}
		& + a {
			width: fit-content;
			display: block;
			padding: var(--link-block-padding) 0px var(--link-block-padding) 0px;
			margin: 0px 0px 0px auto;
			text-decoration: underline 1px;
			text-underline-offset: 3px;
			color: var(--text-color);

			&:focus-visible {
				outline: 3px solid var(--hover-color-dark);
				outline-offset: 0px;
			}
			@media (hover: hover) {
				&:hover {
					text-decoration-thickness: 2px;
				}
			}
		}
	}
}
/* Größer gleich 768px, Kleiner gleich 1199px - Medium */
@media (min-width: 48.0000em) and (max-width: 74.9375em) {
	.teaser-event > ol {
		grid-template-columns: repeat(2, minmax(0px, 1fr));
	}
}
/* Kleiner gleich 1199px - Small + Medium */
@media (max-width: 74.9375em) {
	.teaser-event > ol > li > article > a > .title {
		font-size: clamp(var(--fsu-block-font-size-scale-min), var(--fsu-block-font-size-scale), var(--fsu-block-font-size-scale-max));
		line-height: clamp(var(--fsu-block-line-height-scale-min), var(--fsu-block-line-height-scale), var(--fsu-block-line-height-scale-max));
	}
}
/* Kleiner gleich 767px - Small */
@media (max-width: 47.9375em) {
	.teaser-event > ol {
		grid-template-columns: minmax(0px, 1fr);
		row-gap: 35px;

		& > li > article > figure > figcaption {
			padding: 0px; /* keinen Abstand - im kleinsten Small zu wenig Platz */
		}
	}
}