.slider-pro {
	hyphens: auto;
	overflow-wrap: anywhere;

	.block-1340 {
		overflow: clip visible;
	}
	:where(ol, ul) {
		padding: 0px;
		margin: 0px;
		list-style-type: none;
	}
	/* Einträge */
	div[tabindex="-1"] {
		&:focus-visible {
			outline: 3px solid var(--hover-color-dark);
			outline-offset: 0px;
		}
		& > ul {
			display: flex;
			column-gap: 25px;

			@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 {
				flex: 0 0 calc(50% - (25px / 2)); /* 50% - Hälfte vom Gap */
				display: flex;
				flex-direction: column;
				position: relative;
				aspect-ratio: 8 / 9;
				--fak-color: var(--skin-color, var(--fsu-gold));

				&.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;
					}
				}
				/* Text oben */
				&.text-top > article {
					grid-template-rows: 1fr auto;

					.content {
						border-bottom: var(--fak-color-border-width) solid var(--fak-color);
					}
				}
				/* Text unten */
				&.text-bottom > article {
					grid-template-rows: auto 1fr;

					& > .content {
						grid-column: 1 / 2;
						grid-row: 2 / 3;
					}
					& > figure {
						grid-column: 1 / 2;
						grid-row: 1 / 2;
					}
				}
				/* Voll-Kachel */
				&:is(.text-full, .image-full) > article > .content {
					padding-top: 20px;
				}
				/* Voll-Text */
				&.text-full > article {
					grid-template-rows: 1fr;
				}
				/* Voll-Bild */
				&.image-full > article {
					grid-template-rows: 1fr min-content;

					& > .content {
						grid-column: 1 / 2;
						grid-row: 2 / 3;
						z-index: 1;
						background-color: rgba(238, 238, 238, 0.8); /* #eeeeee - 80% */
					}
					& > figure {
						grid-column: 1 / 2;
						grid-row: 1 / 3;
						display: grid;
						grid-template-columns: minmax(0, 1fr);
						grid-template-rows: minmax(0, 1fr);

						& > picture {
							grid-column: 1 / 2;
							grid-row: 1 / 2;
							align-self: center;
							overflow: hidden;

							&.bg {
								height: 100%;
								z-index: -1;

								& > img {
									height: 100%;
									filter: blur(10px) grayscale(60%);
									transform: scale(1.1);
								}
							}
							& > img {
								aspect-ratio: 8 / 9;
							}
						}
					}
				}
				/* Voll-Kachel + Text unten */
				&:where(.text-full, .image-full, .text-bottom) > article > .content {
					border-top: var(--fak-color-border-width) solid var(--fak-color);
				}
				&.biopha {
					--fak-color: var(--color-biopha);
				}
				&.chege {
					--fak-color: var(--color-chege);
				}
				&.fsv {
					--fak-color: var(--color-fsv);
				}
				&.m_ehealth {
					--fak-color: var(--color-m_ehealth);
				}
				&.mirz {
					--fak-color: var(--color-mirz);
				}
				&.paf {
					--fak-color: var(--color-paf);
				}
				&.phifak {
					--fak-color: var(--color-phifak);
				}
				&.rewi {
					--fak-color: var(--color-rewi);
				}
				&.thefak_fe {
					--fak-color: var(--color-thefak_fe);
				}
				&.wiwi {
					--fak-color: var(--color-wiwi);
				}
				/* Dreieck */
				&.triangle > article {
					& > .content {
						&::before,
						&::after {
							content: "";
							display: block;
							position: absolute;
							border-style: solid;
						}
						&::before {
							z-index: 1;
						}
						&::after {
							z-index: 2;
						}
					}
				}
				& > article {
					flex: 0 0 100%;
					display: grid;
					grid-template-columns: 1fr;

					& > .content {
						display: flex;
						flex-direction: column;
						justify-content: flex-end;
						padding: 30px 20px 20px 20px;
						background-color: var(--block-background);
						--fak-color-border-width: 2px;

						& > a,
						& > .title { /* Titel ohne Link */
							margin: 0px 0px 2px 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;
						}
						& > a {
							margin-right: 24px; /* Abstand für Link-Info - Icon - (44px - Innenabstand) */
							outline: none;
							text-decoration: none;

							&::after {
								content: "";
								width: 100%;
								height: 100%;
								top: 0px;
								left: 0px;
								position: absolute;
							}
							& > .title {
								display: inline;
								margin: 0px;
								font-weight: inherit;
								font-size: inherit;
							}
							& > .info { /* über :hover und :focus-visible, damit Änderung Schriftfarbe greift */
								position: inherit; /* funktioniert nur solange Slider kein overflow/Scrollbalken hat - https://jira.uni-jena.de/browse/STK001RELA-6049 */

								/* Link-Info - Icon */
								& > i.icon::after {
									width: 44px;
									height: 44px;
									display: flex;
									align-items: center;
									justify-content: center;
									position: absolute;
									top: 0px;
									right: 0px;
									color: var(--button-color-80);
								}
							}
							&: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;
									}
									& i.icon::after {
										color: var(--hover-color-dark);
									}
								}
							}
						}
						& > p {
							margin: 0px;
							color: var(--text-color);
						}
					}
					& > figure {
						margin: 0px;

						:where(div.approval, img, video, iframe) {
							aspect-ratio: 16 / 9;
						}
						:where(img, video, iframe) {
							width: 100%;
							display: block;
							border: none;
						}
						:where(video, iframe) {
							position: relative; /* damit Video/iFrame über dem ::after des Haupt-Link liegt */
							z-index: 2;
						}
						& > .approval {
							display: grid;
							grid-template-columns: 1fr;
							grid-template-rows: 1fr;
							align-items: center;
							justify-items: end;

							:where(picture, a) {
								grid-column: 1 / 2;
								grid-row: 1 / 2;
							}
							& > a {
								width: fit-content;
								display: block;
								padding: var(--link-block-padding) 20px;
								margin-right: 30px;
								z-index: 1;
								cursor: pointer;
								background-color: var(--white-100);
								border: 1px solid var(--fsu-blue);
								color: var(--fsu-blue);
								text-align: center;
								text-decoration: none;
								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;
									}
								}
							}
						}
						& > figcaption {
							padding: 3px 0px;
							position: absolute;
							top: 100%;
							left: 0px;
							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 */
							}
						}
					}
				}
				/* Link-Info - Icon - Bild oben, Text unten */
				&.text-bottom i.icon::after {
					margin-top: calc(56.25% + var(--fak-color-border-width));
				}
				/* Link-Info - Icon - Voll-Bild */
				&.image-full .content {
					position: relative;
				}
			}
		}
	}
	/* Paginierung */
	:is(fieldset.hidden, fieldset > div.hidden, ol.hidden, li.hidden) {
		display: none;
	}
	:is(fieldset > div, ol) {
		flex-grow: 1;
	}
	fieldset {
		display: flex;
		align-items: center;
		margin-top: 42px; /* 20px + Höhe einzeiliger Autor */

		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;
				}
			}
		}
	}
}
/* Größer gleich 768px - Medium + Big */
@media (min-width: 48.0000em) {
	.slider-pro {
		div[tabindex="-1"] > ul {
			&:not(:has(li:nth-child(3))) { /* nur ein oder zwei Eintrag dann Platz für Urheber freihalten */
				padding-bottom: 22px;
			}
			& > li {
				/* Dreieck - Text oben, Bild unten */
				&.triangle.text-top > article > .content::before {
					margin-bottom: calc(56.25% - 32px); /* border-top-width subtrahieren, margin nutzen weil Bild Höhe dynamisch 56.25% sind 16/9 Höhe */
					bottom: 0px;
					border-color: var(--fak-color) transparent transparent transparent;
				}
				&.triangle.text-top > article >  .content::after {
					margin-bottom: calc(56.25% - 32px + calc(var(--fak-color-border-width) * 2)); /* border-top-width subtrahieren, var(--fak-color-border-width) mal 2 addieren, margin nutzen weil Bild Höhe dynamisch 56.25% sind 16/9 Höhe */
					bottom: 0px;
					border-color: var(--block-background) transparent transparent transparent;
				}
				&:nth-child(odd).triangle.text-top > article >  .content::before {
					left: 100px;
					border-width: 32px 42px 0px 0px;
				}
				&:nth-child(odd).triangle.text-top > article >  .content::after {
					left: 102px;
					border-width: 32px 42px 0px 0px;
				}
				&:nth-child(even).triangle.text-top > article >  .content::before {
					right: 100px;
					border-width: 32px 0px 0px 42px;
				}
				&:nth-child(even).triangle.text-top > article >  .content::after {
					right: 102px;
					border-width: 32px 0px 0px 42px;
				}
				/* Dreieck - Bild oben, Text unten */
				&.triangle.text-bottom > article > .content::before {
					margin-top: calc(56.25% - 32px); /* border-bottom-width subtrahieren, margin nutzen weil Bild Höhe dynamisch 56.25% sind 16/9 Höhe */
					top: 0px;
					border-color: transparent transparent var(--fak-color) transparent;
				}
				&.triangle.text-bottom > article > .content::after {
					margin-top: calc(56.25% - 32px + calc(var(--fak-color-border-width) * 2)); /* border-bottom-width subtrahieren, var(--fak-color-border-width) mal 2 addieren, margin nutzen weil Bild Höhe dynamisch 56.25% sind 16/9 Höhe */
					top: 0px;
					border-color: transparent transparent var(--block-background) transparent;
				}
				&:nth-child(odd).triangle.text-bottom > article > .content::before {
					left: 100px;
					border-width: 0px 42px 32px 0px;
				}
				&:nth-child(odd).triangle.text-bottom > article > .content::after {
					left: 102px;
					border-width: 0px 42px 32px 0px;
				}
				&:nth-child(even).triangle.text-bottom > article > .content::before {
					right: 100px;
					border-width: 0px 0px 32px 42px;
				}
				&:nth-child(even).triangle.text-bottom > article > .content::after {
					right: 102px;
					border-width: 0px 0px 32px 42px;
				}
			}
		}
	}
}
/* Größer gleich 768px, Kleiner gleich 1199px - Medium */
@media (min-width: 48.0000em) and (max-width: 74.9375em) {
	.slider-pro {
		div[tabindex="-1"] > ul > li {
			/* Dreieck */
			&:nth-child(odd).triangle.text-top > article > .content::before {
				left: 50px;
			}
			&:nth-child(odd).triangle.text-top > article > .content::after {
				left: 52px;
			}
			&:nth-child(even).triangle.text-top > article > .content::before {
				right: 50px;
			}
			&:nth-child(even).triangle.text-top > article > .content::after {
				right: 52px;
			}
			/* Kachel - Bild oben, Text unten */
			&:nth-child(odd).triangle.text-bottom > article > .content::before {
				left: 50px;
			}
			&:nth-child(odd).triangle.text-bottom > article > .content::after {
				left: 52px;
			}
			&:nth-child(even).triangle.text-bottom > article > .content::before {
				right: 50px;
			}
			&:nth-child(even).triangle.text-bottom > article > .content::after {
				right: 52px;
			}
		}
	}
}
/* Kleiner gleich 1199px - Small + Medium */
@media (max-width: 74.9375em) {
	.slider-pro {
		div[tabindex="-1"] ul > li > article > .content {
			padding: 20px;

			& > a,
			& > .title { /* Titel ohne Link */
				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) {
	.slider-pro {
		div[tabindex="-1"] > ul > li {
			flex-basis: 100%;

			& > article > figure figcaption {
				padding: 0px; /* keinen Abstand - im kleinsten Small zu wenig Platz */
				top: 0px;
				left: 100%;
				transform: rotate(180deg);
				writing-mode: vertical-rl;
			}
			/* Dreieck - Kachel - Text oben, Bild unten */
			&.triangle.text-top > article > .content::before {
				margin-bottom: calc(56.25% - 32px); /* border-top-width subtrahieren, margin nutzen weil Bild Höhe dynamisch 56.25% sind 16/9 Höhe */
				right: 50px;
				bottom: 0px;
				left: auto;
				border-width: 32px 0px 0px 42px;
				border-color: var(--fak-color) transparent transparent transparent;
			}
			&.triangle.text-top > article > .content::after {
				margin-bottom: calc(56.25% - 32px + calc(var(--fak-color-border-width) * 2)); /* border-top-width subtrahieren, var(--fak-color-border-width) mal 2 addieren, margin nutzen weil Bild Höhe dynamisch 56.25% sind 16/9 Höhe */
				right: 52px;
				bottom: 0px;
				left: auto;
				border-width: 32px 0px 0px 42px;
				border-color: var(--block-background) transparent transparent transparent;
			}
			/* Dreieck - Kachel - Bild oben, Text unten */
			&.triangle.text-bottom > article > .content::before {
				margin-top: calc(56.25% - 32px);  /* border-bottom-width subtrahieren, margin nutzen weil Bild Höhe dynamisch 56.25% sind 16/9 Höhe */
				top: 0px;
				right: 50px;
				left: auto;
				border-color: transparent transparent var(--fak-color) transparent;
				border-width: 0px 0px 32px 42px;
			}
			&.triangle.text-bottom > article > .content::after {
				margin-top: calc(56.25% - 32px + calc(var(--fak-color-border-width) * 2)); /* border-bottom-width subtrahieren, var(--fak-color-border-width) mal 2 addieren, margin nutzen weil Bild Höhe dynamisch 56.25% sind 16/9 Höhe */
				top: 0px;
				right: 52px;
				left: auto;
				border-color: transparent transparent var(--block-background) transparent;
				border-width: 0px 0px 32px 42px;
			}
		}
		/* Paginierung */
		fieldset {
			margin-top: 20px;
		}
	}
}