/**
 * Image Slider Studio – Frontend-Stile.
 *
 * Alle Farben, Größen und Abstände werden über CSS-Custom-Properties
 * gesteuert, die der Renderer als Inline-Stil am Container setzt.
 */

.iss-slider,
.iss-slider * {
	box-sizing: border-box;
}

.iss-slider {
	/* Konsumierte Geräte-Variablen: Standard = Desktop-Wert.
	   Die Media-Queries am Dateiende mappen auf Tablet-/Mobil-Werte um. */
	--iss-visible: var(--iss-visible-d, 4);
	--iss-gap: var(--iss-gap-d, 16px);
	--iss-height: var(--iss-height-d, 460px);
	--iss-img-width: var(--iss-img-width-d, 0px);
	--iss-padding: var(--iss-padding-d, 0px);
	--iss-margin: var(--iss-margin-d, 24px);
	--iss-arrow-size: var(--iss-arrow-size-d, 44px);

	/* Konsumierte Textgrößen je Element (Standard = Desktop). */
	--iss-title-size: var(--iss-title-size-d, 24px);
	--iss-subtitle-size: var(--iss-subtitle-size-d, 15px);
	--iss-desc-size: var(--iss-desc-size-d, 14px);
	--iss-badge-size: var(--iss-badge-size-d, 11px);
	--iss-year-size: var(--iss-year-size-d, 13px);
	--iss-rating-size: var(--iss-rating-size-d, 13px);
	--iss-genre-size: var(--iss-genre-size-d, 11px);
	--iss-runtime-size: var(--iss-runtime-size-d, 13px);

	/* Sterne (Desktop-Basis; Media-Queries mappen auf Tablet/Mobil). */
	--iss-star-size: var(--iss-star-size-d, 14px);
	--iss-star-gap: var(--iss-star-gap-d, 2px);
	--iss-star-gap-text: var(--iss-star-gap-text-d, 6px);

	/* Breite eines Slides: entweder feste Bildbreite oder – im Automatik-
	   Modus – abhängig von der Anzahl sichtbarer Bilder. */
	--iss-slide-w: calc((100% - (var(--iss-visible) - 1) * var(--iss-gap)) / var(--iss-visible));

	position: relative;
	width: var(--iss-width, 100%);
	max-width: 100%;
	margin-inline: auto;
	margin-block: var(--iss-margin, 24px);
	padding: var(--iss-padding, 0);
	background: var(--iss-bg, transparent);
	border-radius: var(--iss-radius, 14px);
	color: #fff;
	font-family: var(--iss-font, inherit);
	overflow: hidden;
	-webkit-tap-highlight-color: transparent;
}

/* Feste Bildbreite: unabhängig von der Anzahl sichtbarer Bilder. */
.iss-slider.iss-imgw-fixed { --iss-slide-w: var(--iss-img-width); }
.iss-slider.iss-imgw-fixed.iss-mode-track .iss-slide { flex: 0 0 var(--iss-slide-w); }

/* Originalgröße beibehalten: Bilder in ihrer natürlichen Größe zeigen. */
.iss-slider.iss-img-natural.iss-mode-track .iss-slide { flex: 0 0 auto; width: auto; }
.iss-slider.iss-img-natural .iss-media { width: auto; height: auto; }
.iss-slider.iss-img-natural .iss-img { width: auto; height: auto; max-width: none; object-fit: initial; }

.iss-slider.iss-has-border {
	border: 1px solid var(--iss-border-color, #1f2933);
}

/* Container-Schatten */
.iss-shadow-sm { box-shadow: 0 2px 6px rgba(0, 0, 0, .25); }
.iss-shadow-md { box-shadow: 0 8px 24px rgba(0, 0, 0, .35); }
.iss-shadow-lg { box-shadow: 0 18px 48px rgba(0, 0, 0, .45); }
.iss-shadow-xl { box-shadow: 0 30px 80px rgba(0, 0, 0, .55); }

.iss-viewport {
	position: relative;
	width: 100%;
	overflow: hidden;
	/* Horizontale Gesten an die Engine geben, vertikales Scrollen erlauben. */
	touch-action: pan-y;
}

/* ------------------------------------------------------------------ *
 * Track-Modus (horizontale Spur)
 * ------------------------------------------------------------------ */
.iss-mode-track .iss-track {
	display: flex;
	gap: var(--iss-gap, 16px);
	will-change: transform;
	transition: transform var(--iss-duration, 650ms) cubic-bezier(.22, .61, .36, 1);
}

.iss-mode-track .iss-slide {
	flex: 0 0 var(--iss-slide-w);
	min-width: 0;
	position: relative;
	border-radius: var(--iss-img-radius, 12px);
	overflow: hidden;
}

/* ------------------------------------------------------------------ *
 * Stack-Modus (ein Bild pro Zeit)
 * ------------------------------------------------------------------ */
.iss-mode-stack .iss-track {
	position: relative;
	height: var(--iss-height, 460px);
}

.iss-mode-stack .iss-slide {
	position: absolute;
	inset: 0;
	border-radius: var(--iss-img-radius, 12px);
	overflow: hidden;
	opacity: 0;
	visibility: hidden;
	transition:
		opacity var(--iss-duration, 650ms) ease,
		transform var(--iss-duration, 650ms) cubic-bezier(.22, .61, .36, 1);
	z-index: 1;
}

.iss-mode-stack .iss-slide.is-active {
	opacity: 1;
	visibility: visible;
	z-index: 2;
}

/* ------------------------------------------------------------------ *
 * Medien / Bild
 * ------------------------------------------------------------------ */
.iss-media {
	position: relative;
	width: 100%;
	overflow: hidden;
	background: #111318;
	border-radius: var(--iss-img-radius, 12px);
}

.iss-mode-stack .iss-media { height: 100%; }
.iss-mode-track.iss-ar-free .iss-media { height: var(--iss-height, 460px); }
.iss-mode-track.iss-ar-fixed .iss-media { aspect-ratio: var(--iss-ratio, 2 / 3); }

.iss-media-link {
	display: block;
	width: 100%;
	height: 100%;
	cursor: pointer;
}

.iss-img,
.iss-media-placeholder {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: var(--iss-img-fit, cover);
	transition: transform var(--iss-duration, 650ms) ease, filter var(--iss-duration, 650ms) ease;
}

/* Verlinkter Titel erbt die Titelfarbe. */
.iss-title-link {
	color: inherit;
	text-decoration: none;
}
.iss-title-link:hover { color: var(--iss-btn-bg, #00c7be); }

.iss-media-placeholder {
	background:
		repeating-linear-gradient(45deg, #1a1d24, #1a1d24 12px, #20242c 12px, #20242c 24px);
}

/* Bild-Schatten (auf das Slide) */
.iss-imgshadow-sm .iss-slide { box-shadow: 0 2px 8px rgba(0, 0, 0, .3); }
.iss-imgshadow-md .iss-slide { box-shadow: 0 10px 24px rgba(0, 0, 0, .4); }
.iss-imgshadow-lg .iss-slide { box-shadow: 0 18px 40px rgba(0, 0, 0, .5); }
.iss-imgshadow-xl .iss-slide { box-shadow: 0 26px 60px rgba(0, 0, 0, .6); }

/* Zoom beim aktiven Slide */
.iss-img-zoom .iss-slide.is-active .iss-img,
.iss-img-zoom.iss-mode-track .iss-slide .iss-img { transform: scale(1); }
.iss-img-zoom .iss-slide.is-active .iss-img { transform: scale(1.04); }

/* Hover-Effekte */
.iss-hover-zoom-in .iss-slide:hover .iss-img { transform: scale(1.08); }
.iss-hover-zoom-out .iss-slide .iss-img { transform: scale(1.08); }
.iss-hover-zoom-out .iss-slide:hover .iss-img { transform: scale(1); }
.iss-hover-poster-lift .iss-slide { transition: transform .35s ease, box-shadow .35s ease; }
.iss-hover-poster-lift .iss-slide:hover { transform: translateY(-8px) scale(1.02); box-shadow: 0 24px 50px rgba(0, 0, 0, .55); z-index: 5; }
.iss-hover-glow .iss-slide { transition: box-shadow .35s ease; }
.iss-hover-glow .iss-slide:hover { box-shadow: 0 0 0 2px var(--iss-btn-bg, #00c7be), 0 0 40px -6px var(--iss-btn-bg, #00c7be); }
.iss-hover-tilt .iss-slide { transition: transform .35s ease; transform-style: preserve-3d; }
.iss-hover-tilt .iss-slide:hover { transform: perspective(900px) rotateX(4deg) rotateY(-4deg) scale(1.02); }
.iss-hover-shadow .iss-slide { transition: box-shadow .35s ease; }
.iss-hover-shadow .iss-slide:hover { box-shadow: 0 30px 70px rgba(0, 0, 0, .7); }

/* ------------------------------------------------------------------ *
 * Overlay
 * ------------------------------------------------------------------ */
.iss-overlay {
	position: absolute;
	inset: 0;
	pointer-events: none;
	background: var(--iss-slide-overlay-color, var(--iss-overlay-color, #000));
	opacity: var(--iss-slide-overlay-opacity, var(--iss-overlay-opacity, .55));
}

.iss-overlay-gradient .iss-overlay {
	background: linear-gradient(
		to top,
		var(--iss-slide-overlay-color, var(--iss-overlay-color, #000)) 0%,
		color-mix(in srgb, var(--iss-slide-overlay-color, var(--iss-overlay-color, #000)) 55%, transparent) 45%,
		transparent 78%
	);
	opacity: 1;
}

/* ------------------------------------------------------------------ *
 * Inhalt
 * ------------------------------------------------------------------ */
.iss-content {
	position: absolute;
	inset: auto 0 0 0;
	display: flex;
	flex-direction: column;
	gap: 8px;
	padding: clamp(14px, 3vw, 32px);
	z-index: 3;
	text-align: var(--iss-align, left);
}

.iss-align-center .iss-content { align-items: center; text-align: center; }
.iss-align-right .iss-content { align-items: flex-end; text-align: right; }

.iss-badge {
	align-self: flex-start;
	display: inline-block;
	padding: 4px 10px;
	font-family: var(--iss-badge-font, inherit);
	font-size: var(--iss-badge-size, 11px);
	font-weight: var(--iss-badge-weight, 700);
	font-style: var(--iss-badge-style, normal);
	line-height: var(--iss-badge-lh, 1.2);
	letter-spacing: var(--iss-badge-ls, .5px);
	text-transform: var(--iss-badge-tt, uppercase);
	text-decoration: var(--iss-badge-dec, none);
	color: var(--iss-badge-color, #04110f);
	background: var(--iss-btn-bg, #00c7be);
	border-radius: 6px;
}
.iss-align-center .iss-badge { align-self: center; }
.iss-align-right .iss-badge { align-self: flex-end; }

.iss-subtitle {
	margin: 0;
	font-family: var(--iss-subtitle-font, inherit);
	font-size: var(--iss-subtitle-size, 15px);
	font-weight: var(--iss-subtitle-weight, 600);
	font-style: var(--iss-subtitle-style, normal);
	line-height: var(--iss-subtitle-lh, 1.3);
	letter-spacing: var(--iss-subtitle-ls, .6px);
	text-transform: var(--iss-subtitle-tt, uppercase);
	text-decoration: var(--iss-subtitle-dec, none);
	color: var(--iss-subtitle-color, #00c7be);
}

.iss-title {
	margin: 0;
	font-family: var(--iss-title-font, inherit);
	font-size: var(--iss-title-size, 24px);
	font-weight: var(--iss-title-weight, 800);
	font-style: var(--iss-title-style, normal);
	line-height: var(--iss-title-lh, 1.15);
	letter-spacing: var(--iss-title-ls, 0);
	text-transform: var(--iss-title-tt, none);
	text-decoration: var(--iss-title-dec, none);
	color: var(--iss-title-color, #fff);
	text-shadow: 0 2px 12px rgba(0, 0, 0, .5);
}

.iss-meta {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px 12px;
}
.iss-align-center .iss-meta { justify-content: center; }
.iss-align-right .iss-meta { justify-content: flex-end; }

.iss-year {
	font-family: var(--iss-year-font, inherit);
	font-size: var(--iss-year-size, 13px);
	font-weight: var(--iss-year-weight, 600);
	font-style: var(--iss-year-style, normal);
	line-height: var(--iss-year-lh, 1.3);
	letter-spacing: var(--iss-year-ls, 0);
	text-transform: var(--iss-year-tt, none);
	text-decoration: var(--iss-year-dec, none);
	color: var(--iss-year-color, #d4d8de);
}

.iss-rating {
	display: inline-flex;
	align-items: center;
	gap: var(--iss-star-gap-text, 6px);
	font-family: var(--iss-rating-font, inherit);
	font-size: var(--iss-rating-size, 13px);
	font-weight: var(--iss-rating-weight, 700);
	font-style: var(--iss-rating-style, normal);
	line-height: var(--iss-rating-lh, 1.3);
	letter-spacing: var(--iss-rating-ls, 0);
	text-transform: var(--iss-rating-tt, none);
	text-decoration: var(--iss-rating-dec, none);
	color: var(--iss-rating-color, #ffcf3f);
}
.iss-rating-value { color: inherit; }

/* Sterne – vollständig über eigene Variablen gesteuert, unabhängig vom Text. */
.iss-stars {
	display: inline-flex;
	align-items: center;
	gap: var(--iss-star-gap, 2px);
	line-height: 1;
}
.iss-star {
	position: relative;
	display: inline-block;
	font-size: var(--iss-star-size, 14px);
	line-height: 1;
}
.iss-star-bg { color: var(--iss-star-inactive, #3a3d46); }
.iss-star-fill {
	position: absolute;
	left: 0;
	top: 0;
	overflow: hidden;
	white-space: nowrap;
	color: var(--iss-star-color, #ffcf3f);
}
.iss-rating:hover .iss-star-fill { color: var(--iss-star-hover, var(--iss-star-color, #ffcf3f)); }

.iss-runtime {
	font-family: var(--iss-runtime-font, inherit);
	font-size: var(--iss-runtime-size, 13px);
	font-weight: var(--iss-runtime-weight, 600);
	font-style: var(--iss-runtime-style, normal);
	line-height: var(--iss-runtime-lh, 1.3);
	letter-spacing: var(--iss-runtime-ls, 0);
	text-transform: var(--iss-runtime-tt, none);
	text-decoration: var(--iss-runtime-dec, none);
	color: var(--iss-runtime-color, #d4d8de);
}

.iss-genres { display: inline-flex; flex-wrap: wrap; gap: 6px; }
.iss-genre {
	padding: 2px 8px;
	font-family: var(--iss-genre-font, inherit);
	font-size: var(--iss-genre-size, 11px);
	font-weight: var(--iss-genre-weight, 500);
	font-style: var(--iss-genre-style, normal);
	line-height: var(--iss-genre-lh, 1.2);
	letter-spacing: var(--iss-genre-ls, 0);
	text-transform: var(--iss-genre-tt, none);
	text-decoration: var(--iss-genre-dec, none);
	color: var(--iss-genre-color, #fff);
	border: 1px solid rgba(255, 255, 255, .3);
	border-radius: 999px;
	background: rgba(255, 255, 255, .08);
	backdrop-filter: blur(4px);
}

.iss-desc {
	margin: 0;
	font-family: var(--iss-desc-font, inherit);
	font-size: var(--iss-desc-size, 14px);
	font-weight: var(--iss-desc-weight, 400);
	font-style: var(--iss-desc-style, normal);
	line-height: var(--iss-desc-lh, 1.5);
	letter-spacing: var(--iss-desc-ls, 0);
	text-transform: var(--iss-desc-tt, none);
	text-decoration: var(--iss-desc-dec, none);
	color: var(--iss-desc-color, #d4d8de);
	max-width: 60ch;
	display: -webkit-box;
	-webkit-line-clamp: 3;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

.iss-button {
	align-self: flex-start;
	display: inline-flex;
	align-items: center;
	gap: 8px;
	margin-top: 6px;
	padding: 10px 18px;
	font-weight: 700;
	font-size: 14px;
	text-decoration: none;
	color: var(--iss-btn-color, #04110f);
	background: var(--iss-btn-bg, #00c7be);
	border-radius: var(--iss-btn-radius, 999px);
	transition: background .25s ease, transform .2s ease, box-shadow .25s ease;
}
.iss-align-center .iss-button { align-self: center; }
.iss-align-right .iss-button { align-self: flex-end; }
.iss-button:hover { background: var(--iss-btn-bg-hover, #00a49d); transform: translateY(-1px); }
.iss-button:focus-visible { outline: 3px solid #fff; outline-offset: 2px; }
.iss-button .iss-button-icon { transition: transform .25s ease; }
.iss-button:hover .iss-button-icon { transform: translateX(3px); }

.iss-slider:not(.iss-btn-shadow-off) .iss-button { box-shadow: 0 8px 22px -6px var(--iss-btn-bg, #00c7be); }

/* ------------------------------------------------------------------ *
 * Navigation: Pfeile
 * ------------------------------------------------------------------ */
.iss-arrow {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: var(--iss-arrow-size, 44px);
	height: var(--iss-arrow-size, 44px);
	color: var(--iss-arrow-color, #fff);
	background: var(--iss-arrow-bg, rgba(12, 14, 20, .55));
	border: 1px solid rgba(255, 255, 255, .18);
	border-radius: 50%;
	cursor: pointer;
	z-index: 10;
	backdrop-filter: blur(6px);
	transition: background .2s ease, color .2s ease, transform .2s ease, opacity .2s ease;
}
.iss-arrow:hover {
	color: var(--iss-arrow-color-hover, var(--iss-arrow-color, #fff));
	background: var(--iss-arrow-bg-hover, rgba(12, 14, 20, .85));
}
.iss-arrow svg { width: 55%; height: 55%; }
.iss-arrow:focus-visible { outline: 3px solid var(--iss-btn-bg, #00c7be); outline-offset: 2px; }
.iss-arrow.iss-prev { left: 12px; }
.iss-arrow.iss-next { right: 12px; }
.iss-arrow[disabled] { opacity: .35; cursor: default; }
.iss-arrow[hidden] { display: none; }

/* ------------------------------------------------------------------ *
 * Navigation: Punkte
 * ------------------------------------------------------------------ */
.iss-dots {
	display: flex;
	justify-content: center;
	gap: 8px;
	padding: 14px 0 4px;
}
.iss-dot {
	width: 9px;
	height: 9px;
	padding: 0;
	border: none;
	border-radius: 50%;
	background: rgba(255, 255, 255, .32);
	cursor: pointer;
	transition: transform .2s ease, background .2s ease, width .2s ease;
}
.iss-dot:hover { background: rgba(255, 255, 255, .6); }
.iss-dot.is-active { width: 24px; border-radius: 6px; background: var(--iss-btn-bg, #00c7be); }
.iss-dot:focus-visible { outline: 2px solid var(--iss-btn-bg, #00c7be); outline-offset: 2px; }

/* Fortschrittsbalken */
.iss-progress {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	height: 3px;
	background: rgba(255, 255, 255, .15);
	z-index: 6;
}
.iss-progress-bar {
	display: block;
	height: 100%;
	width: 0;
	background: var(--iss-btn-bg, #00c7be);
}

/* Zähler */
.iss-counter {
	position: absolute;
	top: 12px;
	right: 16px;
	padding: 4px 10px;
	font-size: 13px;
	font-weight: 600;
	background: rgba(12, 14, 20, .55);
	border-radius: 999px;
	z-index: 6;
	backdrop-filter: blur(6px);
}

/* Thumbnails */
.iss-thumbs {
	display: flex;
	gap: 8px;
	padding: 12px 4px 4px;
	overflow-x: auto;
	scrollbar-width: thin;
}
.iss-thumb {
	flex: 0 0 auto;
	width: 72px;
	height: 44px;
	padding: 0;
	border: 2px solid transparent;
	border-radius: 6px;
	overflow: hidden;
	cursor: pointer;
	background: #111;
	opacity: .55;
	transition: opacity .2s ease, border-color .2s ease;
}
.iss-thumb.is-active,
.iss-thumb:hover { opacity: 1; border-color: var(--iss-btn-bg, #00c7be); }
.iss-thumb-img { width: 100%; height: 100%; object-fit: cover; }

/* ------------------------------------------------------------------ *
 * Übergänge (Stack-Modus)
 * ------------------------------------------------------------------ */
.iss-mode-stack.iss-trans-fade .iss-slide { transform: none; }

.iss-mode-stack.iss-trans-slide .iss-slide { transform: translateX(40px); }
.iss-mode-stack.iss-trans-slide .iss-slide.is-active { transform: translateX(0); }

.iss-mode-stack.iss-trans-zoom .iss-slide { transform: scale(1.12); }
.iss-mode-stack.iss-trans-zoom .iss-slide.is-active { transform: scale(1); }

.iss-mode-stack.iss-trans-scale .iss-slide { transform: scale(.86); }
.iss-mode-stack.iss-trans-scale .iss-slide.is-active { transform: scale(1); }

.iss-mode-stack.iss-trans-flip .iss-slide { transform: perspective(1200px) rotateY(90deg); }
.iss-mode-stack.iss-trans-flip .iss-slide.is-active { transform: perspective(1200px) rotateY(0); }

.iss-mode-stack.iss-trans-rotate .iss-slide { transform: rotate(6deg) scale(.9); }
.iss-mode-stack.iss-trans-rotate .iss-slide.is-active { transform: rotate(0) scale(1); }

.iss-mode-stack.iss-trans-push .iss-slide { transform: translateY(40px); }
.iss-mode-stack.iss-trans-push .iss-slide.is-active { transform: translateY(0); }

.iss-mode-stack.iss-trans-pull .iss-slide { transform: translateY(-40px); }
.iss-mode-stack.iss-trans-pull .iss-slide.is-active { transform: translateY(0); }

/* ------------------------------------------------------------------ *
 * Coverflow (3D) – wird zusätzlich per JS mit Transforms unterstützt.
 * ------------------------------------------------------------------ */
.iss-coverflow .iss-viewport,
.iss-layout-coverflow .iss-viewport { perspective: 1400px; }
.iss-layout-coverflow .iss-track { align-items: center; }
.iss-layout-coverflow .iss-slide {
	transition: transform var(--iss-duration, 650ms) cubic-bezier(.22, .61, .36, 1), opacity var(--iss-duration, 650ms) ease;
	transform-style: preserve-3d;
}

/* ------------------------------------------------------------------ *
 * Layout-spezifische Feinheiten
 * ------------------------------------------------------------------ */

/* Hero / Full Width */
.iss-layout-hero .iss-title,
.iss-layout-fullwidth-hero .iss-title { font-size: clamp(28px, 5vw, calc(var(--iss-title-size) * 1.6)); }
.iss-layout-fullwidth-hero { --iss-radius: 0; margin-inline: 0; width: 100%; border-radius: 0; }
.iss-layout-fullwidth-hero .iss-slide,
.iss-layout-fullwidth-hero .iss-media { border-radius: 0; }

/* Netflix / Disney / Shelf: kompakte Karten, Titel unter Bild beim Hover */
.iss-layout-netflix .iss-content,
.iss-layout-shelf .iss-content { padding: 12px; }
.iss-layout-netflix .iss-desc { -webkit-line-clamp: 2; }

/* Disney+: kräftigere Rundung + blauer Grundton */
.iss-layout-disney { --iss-bg: linear-gradient(180deg, #0a1a3f, #060d24); }
.iss-layout-disney .iss-slide { border-radius: 10px; }

/* Apple TV: extra weiche Schatten + Skalierung des aktiven Elements */
.iss-layout-appletv .iss-slide { transition: transform .4s ease, box-shadow .4s ease; }
.iss-layout-appletv .iss-slide:hover { transform: scale(1.06); box-shadow: 0 30px 60px rgba(0, 0, 0, .55); }

/* Poster: schmale Kinoposter */
.iss-layout-poster { --iss-ratio: 2 / 3; }

/* Glass Card: Glassmorphism-Content */
.iss-layout-glass-card .iss-content {
	inset: auto 12px 12px 12px;
	background: rgba(18, 20, 28, .45);
	border: 1px solid rgba(255, 255, 255, .14);
	border-radius: 14px;
	backdrop-filter: blur(14px);
}

/* Card Slider: heller Kartenrahmen */
.iss-layout-card .iss-slide { background: #14161d; box-shadow: 0 12px 30px rgba(0, 0, 0, .4); }

/* Featured: großes Hauptbild */
.iss-layout-featured .iss-title { font-size: clamp(26px, 4vw, calc(var(--iss-title-size) * 1.4)); }

/* Magazine: seitlicher Textblock */
.iss-layout-magazine .iss-content {
	inset: 0 auto 0 0;
	justify-content: center;
	width: min(46%, 520px);
	background: linear-gradient(90deg, rgba(8, 9, 13, .9), transparent);
}

/* Timeline: Content oben, Jahr betont */
.iss-layout-timeline .iss-year {
	font-size: 20px;
	font-weight: 800;
	color: var(--iss-btn-bg, #00c7be);
}

/* Logo Slider: transparente Medien, kleine Höhe */
.iss-layout-logo .iss-media { background: transparent; }
.iss-layout-logo .iss-img { object-fit: contain; padding: 12px; filter: grayscale(1); opacity: .8; }
.iss-layout-logo .iss-slide:hover .iss-img { filter: grayscale(0); opacity: 1; }
.iss-layout-logo .iss-overlay,
.iss-layout-logo .iss-content { display: none; }

/* Masonry: variable Höhen (leichte Versätze) */
.iss-layout-masonry .iss-track { align-items: flex-start; }
.iss-layout-masonry .iss-slide:nth-child(even) { margin-top: 28px; }

/* Stack Cards: gestapelte Karten */
.iss-layout-stack-cards.iss-mode-stack .iss-slide { transform: translateY(30px) scale(.92); }
.iss-layout-stack-cards.iss-mode-stack .iss-slide.is-active { transform: translateY(0) scale(1); }

/* Parallax: sanfter Bild-Versatz */
.iss-layout-parallax .iss-slide.is-active .iss-img { transform: scale(1.08); }

/* ------------------------------------------------------------------ *
 * Textposition: Titel/Beschreibung unter- oder oberhalb des Bildes
 * ------------------------------------------------------------------ */
.iss-slider.iss-content-below .iss-slide,
.iss-slider.iss-content-above .iss-slide {
	display: flex;
	flex-direction: column;
	overflow: visible;
	border-radius: 0;
}
.iss-slider.iss-content-above .iss-content { order: -1; }

.iss-content-below .iss-media,
.iss-content-above .iss-media { border-radius: var(--iss-img-radius, 12px); }

/* Inhalt läuft im normalen Fluss statt als Overlay. */
.iss-content-below .iss-content,
.iss-content-above .iss-content {
	position: static;
	inset: auto;
	padding: 12px 2px 2px;
	background: none;
}
.iss-content-above .iss-content { padding: 2px 2px 12px; }
.iss-content-below .iss-title,
.iss-content-above .iss-title { text-shadow: none; }

/* Bildhöhe im Fluss-Modus (Track). */
.iss-slider.iss-content-below.iss-mode-track.iss-ar-free .iss-media,
.iss-slider.iss-content-above.iss-mode-track.iss-ar-free .iss-media { height: var(--iss-height, 460px); }

/* Stack-Layouts mit externem Text: nur das aktive Bild belegt Platz,
   sanftes Einblenden statt Überlagerung. */
.iss-slider.iss-content-below.iss-mode-stack .iss-track,
.iss-slider.iss-content-above.iss-mode-stack .iss-track { height: auto; }
.iss-slider.iss-content-below.iss-mode-stack .iss-slide,
.iss-slider.iss-content-above.iss-mode-stack .iss-slide {
	position: relative;
	inset: auto;
	display: none;
	opacity: 1;
	visibility: visible;
	transform: none;
}
.iss-slider.iss-content-below.iss-mode-stack .iss-slide.is-active,
.iss-slider.iss-content-above.iss-mode-stack .iss-slide.is-active {
	display: flex;
	animation: iss-fadein var(--iss-duration, 650ms) ease;
}
.iss-content-below.iss-mode-stack .iss-media,
.iss-content-above.iss-mode-stack .iss-media { height: var(--iss-height, 460px); }
.iss-content-below.iss-mode-stack.iss-ar-fixed .iss-media,
.iss-content-above.iss-mode-stack.iss-ar-fixed .iss-media { height: auto; aspect-ratio: var(--iss-ratio, 2 / 3); }

@keyframes iss-fadein { from { opacity: 0; } to { opacity: 1; } }

/* ------------------------------------------------------------------ *
 * Barrierefreiheit
 * ------------------------------------------------------------------ */
.iss-slider :focus-visible { outline: 3px solid var(--iss-btn-bg, #00c7be); outline-offset: 2px; }

@media (prefers-reduced-motion: reduce) {
	.iss-slider .iss-track,
	.iss-slider .iss-slide,
	.iss-slider .iss-img { transition-duration: .01ms !important; }
	.iss-progress-bar { transition: none !important; }
}

/* ------------------------------------------------------------------ *
 * Responsive – jedes Gerät hat eigene Werte (Desktop/Tablet/Smartphone).
 * Die konsumierten Variablen werden je Breakpoint auf die -t/-m-Quellen
 * umgemappt; die Desktop-Werte (-d) bleiben davon unberührt.
 * ------------------------------------------------------------------ */
@media (max-width: 1024px) {
	.iss-slider {
		--iss-visible: var(--iss-visible-t);
		--iss-gap: var(--iss-gap-t);
		--iss-height: var(--iss-height-t);
		--iss-img-width: var(--iss-img-width-t);
		--iss-padding: var(--iss-padding-t);
		--iss-margin: var(--iss-margin-t);
		--iss-arrow-size: var(--iss-arrow-size-t);
		--iss-title-size: var(--iss-title-size-t);
		--iss-subtitle-size: var(--iss-subtitle-size-t);
		--iss-desc-size: var(--iss-desc-size-t);
		--iss-badge-size: var(--iss-badge-size-t);
		--iss-year-size: var(--iss-year-size-t);
		--iss-rating-size: var(--iss-rating-size-t);
		--iss-genre-size: var(--iss-genre-size-t);
		--iss-runtime-size: var(--iss-runtime-size-t);
		--iss-star-size: var(--iss-star-size-t);
		--iss-star-gap: var(--iss-star-gap-t);
		--iss-star-gap-text: var(--iss-star-gap-text-t);
	}

	/* Geräteabhängige Textposition (Track-Layouts). */
	.iss-slider.iss-mode-track[data-cpos-t="overlay"] .iss-slide { display: block; overflow: hidden; }
	.iss-slider.iss-mode-track[data-cpos-t="overlay"] .iss-content { position: absolute; inset: auto 0 0 0; }
	.iss-slider.iss-mode-track[data-cpos-t="below"] .iss-slide,
	.iss-slider.iss-mode-track[data-cpos-t="above"] .iss-slide { display: flex; flex-direction: column; overflow: visible; border-radius: 0; }
	.iss-slider.iss-mode-track[data-cpos-t="below"] .iss-content,
	.iss-slider.iss-mode-track[data-cpos-t="above"] .iss-content { position: static; inset: auto; padding: 12px 2px 2px; }
	.iss-slider.iss-mode-track[data-cpos-t="above"] .iss-content { order: -1; }
}

@media (max-width: 640px) {
	.iss-slider {
		--iss-visible: var(--iss-visible-m);
		--iss-gap: var(--iss-gap-m);
		--iss-height: var(--iss-height-m);
		--iss-img-width: var(--iss-img-width-m);
		--iss-padding: var(--iss-padding-m);
		--iss-margin: var(--iss-margin-m);
		--iss-arrow-size: var(--iss-arrow-size-m);
		--iss-title-size: var(--iss-title-size-m);
		--iss-subtitle-size: var(--iss-subtitle-size-m);
		--iss-desc-size: var(--iss-desc-size-m);
		--iss-badge-size: var(--iss-badge-size-m);
		--iss-year-size: var(--iss-year-size-m);
		--iss-rating-size: var(--iss-rating-size-m);
		--iss-genre-size: var(--iss-genre-size-m);
		--iss-runtime-size: var(--iss-runtime-size-m);
		--iss-star-size: var(--iss-star-size-m);
		--iss-star-gap: var(--iss-star-gap-m);
		--iss-star-gap-text: var(--iss-star-gap-text-m);
	}

	.iss-slider.iss-mode-track[data-cpos-m="overlay"] .iss-slide { display: block; overflow: hidden; }
	.iss-slider.iss-mode-track[data-cpos-m="overlay"] .iss-content { position: absolute; inset: auto 0 0 0; }
	.iss-slider.iss-mode-track[data-cpos-m="below"] .iss-slide,
	.iss-slider.iss-mode-track[data-cpos-m="above"] .iss-slide { display: flex; flex-direction: column; overflow: visible; border-radius: 0; }
	.iss-slider.iss-mode-track[data-cpos-m="below"] .iss-content,
	.iss-slider.iss-mode-track[data-cpos-m="above"] .iss-content { position: static; inset: auto; padding: 12px 2px 2px; }
	.iss-slider.iss-mode-track[data-cpos-m="above"] .iss-content { order: -1; }

	.iss-layout-magazine .iss-content { width: 100%; background: linear-gradient(to top, rgba(8, 9, 13, .92), transparent); inset: auto 0 0 0; }
	.iss-desc { -webkit-line-clamp: 2; }
}