.slider-light {
	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 100%;
				display: flex;
				position: relative;
				--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;
					}
				}
				&.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);
				}
				& > article {
					flex: 0 0 100%;
					display: grid;
					grid-template-columns: 50% 50%;
					grid-template-rows: 1fr;

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

						&::before,
						&::after {
							content: "";
							display: block;
							position: absolute;
							border-style: solid;
						}
						&::before {
							z-index: 1;
						}
						&::after {
							z-index: 2;
						}
						& > 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: 14px; /* Abstand für Link-Info - Icon - (44px - Innenabstand) */
							outline: none;
							text-decoration: none;

							&::after {
								content: "";
								width: 100%;
								height: 100%;
								top: 0;
								left: 0;
								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: 0;
							}
							@media (hover: hover) {
								&:hover {
									&::after {
										outline: 1px solid var(--hover-color-dark);
										outline-offset: 0;
									}
									& i.icon::after {
										color: var(--hover-color-dark);
									}
								}
							}
						}
						& > p {
							margin: 0px;
							color: var(--text-color);
						}
					}
					& > figure {
						grid-column: 1 / 2;
						grid-row: 1 / 2;
						display: grid;
						grid-template-columns: minmax(0, 1fr);
						grid-template-rows: minmax(0, 1fr);
						margin: 0px;

						& > 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 {
								width: 100%;
								display: block;
								aspect-ratio: 16 / 9;
							}
						}
						& > 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 */
							}
						}
					}
				}
			}
		}
	}
	/* Paginierung */
	:is(fieldset > div.hidden, ol.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-light {
		ul:not(:has(> li:nth-child(2))) { /* nur ein Eintrag dann Platz für Urheber freihalten */
			padding-bottom: 22px;
		}
		div[tabindex="-1"] > ul > li > article > .content {
			/* Dreieck */
			&::before {
				top: calc(50% - 42px); /* border-top-width subtrahieren */
				right: 50%;
				border-width: 42px 0px 0px 32px;
				border-color: var(--fak-color) transparent transparent transparent;
			}
			&::after {
				top: calc(50% - 42px + var(--fak-color-border-width)); /* border-top-width subtrahieren, var(--fak-color-border-width) addieren */
				right: calc(50% - (var(--fak-color-border-width) * 2)); /* var(--fak-color-border-width) mal 2 subtrahieren */
				border-width: 42px 0px 0px 32px;
				border-color: var(--block-background) transparent transparent transparent;
			}
		}
	}
}
/* Kleiner gleich 1199px - Small + Medium */
@media (max-width: 74.9375em) {
	.slider-light {
		div[tabindex="-1"] > ul > li > article > .content {
			padding: 20px;

			& > a {
				margin-right: 24px; /* Abstand für Link-Info - Icon - (44px - Innenabstand) */
			}
			& > 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-light {
		div[tabindex="-1"] ul > li > article {
			grid-template-columns: 100%;
			grid-template-rows: auto 1fr;

			& > .content {
				border-top: var(--fak-color-border-width) solid var(--fak-color);
				border-left: 0px;

				/* Dreieck */
				&::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;
					left: 44px;
					border-width: 0px 42px 32px 0px;
					border-color: transparent transparent var(--fak-color) transparent;
				}
				&::after {
					margin-top: calc(56.25% - 32px + (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;
					left: calc(44px + 2px); /* border-width FakFarbe addieren */
					border-width: 0px 42px 32px 0px;
					border-color: transparent transparent var(--block-background) transparent;
				}
				& > a > .info > i.icon::after {
					margin-top: calc(56.25% + var(--fak-color-border-width));
				}
			}
			& > figure {
				& > picture.bg {
					display: none;
				}
				& > figcaption {
					padding: 0px; /* keinen Abstand - im kleinsten Small zu wenig Platz */
					top: 0px;
					left: 100%;
					transform: rotate(180deg);
					writing-mode: vertical-rl;
				}
			}
		}
		/* Paginierung */
		fieldset {
			margin-top: 20px;
		}
	}
}