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

	:where(ol, ul) {
		padding: 0px;
		margin: 0px;
		list-style-type: none;
	}
	/* Rahmen um Bilder/Videos */
	&.border :where(img, video) {
		box-sizing: border-box;
		border: 1px solid var(--copyright-color);
	}
	/* Icon */
	&:where(.icon-arches, .icon-area, .icon-border, .icon-circle, .icon-diagonal, .icon-rumble) {
		picture {
			display: flex;
			aspect-ratio: 16 / 9;
			align-items: center;
			justify-content: center;
			position: relative;

			img {
				width: auto;
				height: 80%;
				position: relative;
				z-index: 5;
			}
		}

		&.icon-circle picture::before { /* Kreis */
			content: "";
			width: 100%;
			height: 100%;
			position: absolute;
			top: 0px;
			left: 0px;
			z-index: 4;
			background: radial-gradient(circle at center, var(--white-100) 42%, transparent 42% 42.5%, var(--skin-color, var(--fsu-gold)) 43% 44%, transparent 44.5% 100%);
		}
		&.icon-arches picture::before { /* Bögen */
			content: "";
			width: 100%;
			height: 100%;
			position: absolute;
			top: 0px;
			left: 0px;
			z-index: 4;
			background: url("/skin/_global/_images/blocks/icon-bg-arches.svg") no-repeat center / cover;
		}
		&.icon-diagonal picture::before { /* Diagonalen */
			content: "";
			width: 100%;
			height: 100%;
			position: absolute;
			top: 0px;
			left: 0px;
			z-index: 4;
			mask: url("/skin/_global/_images/blocks/icon-bg-diagonal.svg") no-repeat center / cover;
			background-color: var(--skin-color, var(--fsu-gold));
		}
		&.icon-rumble picture::before { /* Gestöber */
			content: "";
			width: 100%;
			height: 100%;
			position: absolute;
			top: 0px;
			left: 0px;
			z-index: 4;
			mask: url("/skin/_global/_images/blocks/icon-bg-rumble.svg") no-repeat center / cover;
			background-color: var(--skin-color, var(--fsu-gold));
		}
		&.icon-area picture::after { /* Fläche */
			content: "";
			width: 100%;
			height: 100%;
			position: absolute;
			top: 0px;
			left: 0px;
			z-index: 3;
			background: linear-gradient(180deg, transparent 50%, var(--block-background) 50%);
		}
		&.icon-border picture::after { /* Rahmen unten */
			content: "";
			width: 100%;
			height: 100%;
			box-sizing: border-box;
			position: absolute;
			top: 0px;
			left: 0px;
			z-index: 3;
			border-bottom: 4px solid var(--skin-color, var(--fsu-gold));
		}
	}
	/* Einträge */
	& > div[tabindex="-1"] {
		&:focus-visible {
			outline: 3px solid var(--hover-color-dark);
			outline-offset: 0px;
		}
		& > ul {
			display: grid;
			grid-template-columns: repeat(3, minmax(0px, 1fr));
			gap: 50px;

			& > li {
				display: flex;
				position: relative;

				& > article {
					flex: 0 0 100%;
					display: flex;
					flex-direction: column;

					& > a {
						text-decoration: none;

						&:nth-of-type(1) {
							outline: none;
							margin: 0px 0px 5px 0px;
							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;

							&::after {
								content: "";
								width: 100%;
								height: 100%;
								top: 0px;
								left: 0px;
								position: absolute;
								z-index: 10;
							}
							&:focus-visible:after {
								outline: 3px solid var(--hover-color-dark);
								outline-offset: 10px; /* Sonderfall */
							}
							@media (hover: hover) {
								&:hover:after {
									outline: 1px solid var(--hover-color-dark);
									outline-offset: 10px; /* Sonderfall */
								}
							}
							& > .title {
								display: inline;
								margin: 0px;
								font-weight: inherit;
								font-size: inherit;
							}
						}
						&:nth-of-type(2) {
							padding: var(--link-block-padding) 10px;
							margin-top: 24px;
							display: block;
							position: relative; /* damit Link über dem ::after des Haupt-Link liegt */
							z-index: 20;
							box-sizing: border-box;
							border: 1px solid var(--fsu-blue);
							background-color: transparent;
							text-align: center;
							color: var(--fsu-blue);
							font-variation-settings: var(--fsu-font-variation-text-condensed);
							font-size: 1.125rem;
							line-height: 1.500rem;

							&:focus-visible {
								outline: 3px solid var(--hover-color-dark);
								outline-offset: -6px;
							}
							@media (hover: hover) {
								&:hover {
									border-color: var(--hover-color-dark);
									color: var(--hover-color-dark);
									outline: 1px solid var(--hover-color-dark);
									outline-offset: -4px;
								}
							}
						}
					}
					& > p {
						flex-grow: 1;
						margin: 0px;
						color: var(--text-color);
					}
					& > figure {
						order: -1;
						margin: 0px;

						&:not(:has(figcaption)) { /* kein Autor */
							margin-bottom: 32px;
						}
						& :where(img, video) {
							width: 100%;
							display: block;
							aspect-ratio: 16 / 9;
						}
						& > video {
							position: relative; /* damit Video über dem ::after des Haupt-Link liegt */
							z-index: 20;
						}
						& > figcaption {
							padding: 3px 0px;
							margin-bottom: 10px;
							text-align: right;
							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 */
							}
						}
					}
				}
			}
		}
	}
	/* Paginierung */
	&.slider fieldset {
		display: none;
	}
}
/* Größer gleich 768px, Kleiner gleich 1199px - Medium */
@media (min-width: 48.0000em) and (max-width: 74.9375em) {
	/* Untereinander */
	.teaser-pages > div[tabindex="-1"] > ul {
		grid-template-columns: repeat(2, minmax(0px, 1fr));
	}
	/* Slider */
	.js .teaser-pages.slider {
		/* Paginierung */
		&:not(:has(ul > li:last-child:nth-child(1), ul > li:last-child:nth-child(2))) fieldset { /* Slider - mehr als zwei Einträge */
			display: flex;
		}
		.small {
			display: none;
		}
		/* Einträge */
		& > div[tabindex="-1"] > ul > li {
			flex: 0 0 calc(50% - (50px / 2));

			&:not(:last-child) {
				margin-right: 50px; /* Abstand zwischen 2 sichtbaren Einträgen */
			}
			&:nth-child(2n):not(:last-child) {
				margin-right: 25px; /* Abstand zwischen sichtbaren und angedeuteten Einträgen */
			}
		}
	}
}
/* Kleiner gleich 1199px - Small + Medium */
@media (max-width: 74.9375em) {
	.teaser-pages > div[tabindex="-1"] > ul > li > article > a:nth-of-type(1) {
		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));
	}
	/* Slider */
	.js .teaser-pages.slider {
		overflow: clip visible;

		/* Einträge */
		& > div[tabindex="-1"] > ul {
			display: flex;
			gap: unset;

			@media (prefers-reduced-motion: no-preference) { /* https://developer.mozilla.org/en-US/docs/Web/CSS/@media/prefers-reduced-motion#user_preferences */
				&.transition {
					transition: transform 700ms ease-in-out 0ms;
				}
			}
			& > li.opacity {
				pointer-events: none;
				filter: opacity(0.2);

				@media (prefers-reduced-motion: no-preference) { /* https://developer.mozilla.org/en-US/docs/Web/CSS/@media/prefers-reduced-motion#user_preferences */
					transition: filter 500ms linear;
				}
			}
		}
		/* Paginierung */
		:is(fieldset > div.hidden, ol.hidden, li.hidden) {
			display: none;
		}
		:is(fieldset > div, ol) {
			flex-grow: 1;
		}
		fieldset {
			align-items: center;
			margin-top: 20px;

			button {
				width: 44px;
				height: 44px;
				display: flex;
				align-items: center;
				justify-content: center;
				border: none;
				cursor: pointer;
			}
			& > div {
				text-align: center;
				color: var(--text-color);
				font-variation-settings: var(--fsu-font-variation-text-condensed);
				font-size: 1.125rem;
				line-height: 1.500rem;
			}
			ol {
				display: flex;
				justify-content: center;

				li > button {
					background-color: transparent;
					color: var(--button-color);

					&:focus-visible {
						outline: 3px solid var(--hover-color-dark);
						outline-offset: -6px;
					}
					@media (hover: hover) {
						&:hover {
							color: var(--hover-color-dark);

							i.icon {
								--icon-font-fill: 0; /* Sonderfall */

								&::after {
									content: "\e39e";
								}
							}
						}
						&[aria-current]:hover i.icon::after {
							content: "\e837";
						}
					}
				}
			}
			& > button {
				background-color: var(--button-color);
				color: var(--white-100);

				&:disabled {
					box-sizing: border-box;
					pointer-events: none;
					touch-action: none;
					background-color: var(--white-100);
					border: 1px solid var(--copyright-color);
					color: var(--copyright-color);
				}
				&:focus-visible {
					outline: 3px solid var(--white-100);
					outline-offset: -6px;
				}
				@media (hover: hover) {
					&:hover {
						background-color: var(--hover-color-dark);
						outline: 1px solid var(--white-100);
						outline-offset: -4px;
					}
				}
			}
		}
	}
}
/* Kleiner gleich 767px - Small */
@media (max-width: 47.9375em) {
	/* Untereinander */
	.teaser-pages > div[tabindex="-1"] > ul {
		grid-template-columns: minmax(0px, 1fr);
		gap: 30px;
	}

	/* Slider */
	.js .teaser-pages.slider {
		/* Paginierung */
		&:not(:has(ul > li:last-child:nth-child(1))) fieldset { /* Slider - mehr als einen Eintrag */
			display: flex;
		}
		.medium {
			display: none;
		}
		/* Einträge */
		& > div[tabindex="-1"] > ul > li {
			flex: 0 0 100%;

			&:not(:last-child) {
				margin-right: 14px; /* Abstand zwischen Einträgen */
			}
		}
	}
}