/* Susanne Taddey – Video Showcase */

.stvs {
	--stvs-a: #207acf;
	--stvs-b: #79a0c5;
	--stvs-ink: #1d2a3a;
	--stvs-muted: #5b6878;
	--stvs-grad: linear-gradient(135deg, var(--stvs-a), var(--stvs-b));
	position: relative;
	isolation: isolate;
	overflow: hidden;
	padding: clamp(56px, 8vw, 112px) 20px;
	background:
		radial-gradient(60% 70% at 85% 20%, color-mix(in srgb, var(--stvs-b) 22%, transparent), transparent 70%),
		radial-gradient(50% 60% at 10% 90%, color-mix(in srgb, var(--stvs-a) 14%, transparent), transparent 70%),
		#f7fafd;
	color: var(--stvs-ink);
	font-family: inherit;
	line-height: 1.6;
	box-sizing: border-box;
}
.stvs *, .stvs *::before, .stvs *::after { box-sizing: border-box; }

/* zarte, schwebende Lichtkugeln im Hintergrund */
.stvs::before, .stvs::after {
	content: "";
	position: absolute;
	z-index: -1;
	border-radius: 50%;
	filter: blur(60px);
	opacity: .45;
	pointer-events: none;
	animation: stvs-float 18s ease-in-out infinite alternate;
}
.stvs::before { width: 340px; height: 340px; top: -80px; left: -60px; background: color-mix(in srgb, var(--stvs-b) 55%, #fff); }
.stvs::after { width: 280px; height: 280px; bottom: -90px; right: 8%; background: color-mix(in srgb, var(--stvs-a) 35%, #fff); animation-delay: -9s; }
@keyframes stvs-float { to { transform: translate(40px, 30px) scale(1.08); } }

.stvs__inner {
	max-width: 1200px;
	margin: 0 auto;
	display: grid;
	grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
	gap: clamp(32px, 5vw, 72px);
	align-items: center;
}
.stvs--left .stvs__content { order: 2; }
.stvs--left .stvs__inner { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); }
.stvs--stacked .stvs__inner { grid-template-columns: minmax(0, 1fr); max-width: 980px; }
.stvs--stacked .stvs__content { text-align: center; max-width: 720px; margin: 0 auto; }
.stvs--stacked .stvs__list { display: inline-grid; text-align: left; }

/* ---------- Text ---------- */

.stvs__eyebrow {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	padding: 7px 16px 7px 12px;
	border-radius: 999px;
	background: rgba(255, 255, 255, .75);
	border: 1px solid color-mix(in srgb, var(--stvs-a) 18%, transparent);
	box-shadow: 0 6px 20px -10px color-mix(in srgb, var(--stvs-a) 50%, transparent);
	font-size: 13px;
	font-weight: 600;
	letter-spacing: .06em;
	text-transform: uppercase;
	color: var(--stvs-a);
	backdrop-filter: blur(6px);
}
.stvs__dot {
	width: 8px; height: 8px; border-radius: 50%;
	background: var(--stvs-grad);
	box-shadow: 0 0 0 0 color-mix(in srgb, var(--stvs-a) 60%, transparent);
	animation: stvs-dot 2.4s ease-out infinite;
}
@keyframes stvs-dot { 70% { box-shadow: 0 0 0 9px transparent; } 100% { box-shadow: 0 0 0 0 transparent; } }

.stvs .stvs__title {
	margin: 18px 0 16px;
	font-size: clamp(30px, 4vw, 48px);
	line-height: 1.12;
	font-weight: 700;
	letter-spacing: -.02em;
	color: var(--stvs-ink);
	text-transform: none;
}
.stvs__text { color: var(--stvs-muted); font-size: clamp(16px, 1.3vw, 18px); }
.stvs__text p { margin: 0 0 14px; }

.stvs .stvs__list { list-style: none; margin: 22px 0 0; padding: 0; display: grid; gap: 12px; }
.stvs .stvs__list li { display: flex; gap: 12px; align-items: flex-start; margin: 0; padding: 0; font-weight: 500; color: var(--stvs-ink); }
.stvs .stvs__list li::before { content: none; }
.stvs__check {
	flex: none;
	display: grid; place-items: center;
	width: 26px; height: 26px; margin-top: 0;
	border-radius: 50%;
	background: var(--stvs-grad);
	color: #fff;
	box-shadow: 0 6px 14px -6px var(--stvs-a);
}
.stvs__check .stvs-i { width: 14px; height: 14px; }

.stvs .stvs__cta {
	display: inline-flex; align-items: center; gap: 10px;
	margin-top: 30px;
	padding: 15px 28px;
	border-radius: 999px;
	background: var(--stvs-grad);
	background-size: 160% 160%;
	color: #fff;
	font-weight: 600;
	text-decoration: none;
	box-shadow: 0 14px 30px -12px var(--stvs-a);
	transition: transform .25s ease, box-shadow .25s ease, background-position .5s ease;
}
.stvs .stvs__cta:hover, .stvs .stvs__cta:focus-visible { color: #fff; transform: translateY(-2px); background-position: 100% 0; box-shadow: 0 20px 36px -14px var(--stvs-a); }
.stvs__cta .stvs-i { width: 18px; height: 18px; transition: transform .25s ease; }
.stvs__cta:hover .stvs-i { transform: translateX(4px); }

/* ---------- Player ---------- */

.stvs__media { position: relative; min-width: 0; }

.stvs-player {
	position: relative;
	aspect-ratio: 16 / 9;
	border-radius: 24px;
	background: #0b1220;
	color: #fff;
	overflow: hidden;
	outline: none;
	user-select: none;
	-webkit-tap-highlight-color: transparent;
	box-shadow:
		0 0 0 1px rgba(255, 255, 255, .6),
		0 30px 60px -20px rgba(16, 40, 80, .45),
		0 18px 36px -18px color-mix(in srgb, var(--stvs-a) 60%, transparent);
	transform: translateZ(0);
}
/* leuchtender Verlauf hinter dem Player */
.stvs__media::before {
	content: "";
	position: absolute;
	inset: 6% -3% -5% 4%;
	z-index: -1;
	border-radius: 32px;
	background: var(--stvs-grad);
	filter: blur(40px);
	opacity: .5;
	transition: opacity .6s ease;
}
.stvs__media:has(.is-playing)::before { opacity: .3; }

.stvs-player__video {
	position: absolute; inset: 0;
	width: 100%; height: 100%;
	object-fit: contain;
	background: #000;
	display: block;
	cursor: pointer;
}
.stvs-player:fullscreen { border-radius: 0; aspect-ratio: auto; }
.stvs-player:-webkit-full-screen { border-radius: 0; aspect-ratio: auto; width: 100%; height: 100%; }

.stvs .stvs-player button {
	appearance: none;
	-webkit-appearance: none;
	margin: 0; padding: 0;
	border: 0;
	background: none;
	color: inherit;
	font: inherit;
	line-height: 1;
	text-transform: none;
	letter-spacing: normal;
	box-shadow: none;
	min-height: 0;
	cursor: pointer;
}
.stvs .stvs-player button:focus-visible,
.stvs-player__progress:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }

/* Startbildschirm */
.stvs-player__poster {
	position: absolute; inset: 0;
	display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 18px;
	background:
		radial-gradient(circle at center, rgba(11, 18, 32, .05), rgba(11, 18, 32, .55)),
		linear-gradient(to top, rgba(11, 18, 32, .65), transparent 55%);
	transition: opacity .5s ease, visibility .5s;
	z-index: 3;
}
.stvs-player.has-started .stvs-player__poster { opacity: 0; visibility: hidden; pointer-events: none; }

.stvs .stvs-player .stvs-player__bigplay {
	position: relative;
	display: grid; place-items: center;
	width: clamp(72px, 10vw, 104px); aspect-ratio: 1;
	border-radius: 50%;
	background: var(--stvs-grad);
	box-shadow: 0 20px 50px -10px color-mix(in srgb, var(--stvs-a) 85%, #000), inset 0 1px 0 rgba(255, 255, 255, .4);
	transition: transform .3s cubic-bezier(.2, .9, .3, 1.4);
}
.stvs .stvs-player .stvs-player__bigplay:hover { transform: scale(1.08); }
.stvs-player__bigplay .stvs-i { width: 40%; height: 40%; margin-left: 6%; position: relative; z-index: 1; filter: drop-shadow(0 2px 6px rgba(0, 0, 0, .25)); }
.stvs-player__ring {
	position: absolute; inset: 0;
	border-radius: 50%;
	border: 2px solid rgba(255, 255, 255, .6);
	animation: stvs-ring 2.6s cubic-bezier(.2, .6, .4, 1) infinite;
}
.stvs-player__ring--2 { animation-delay: 1.3s; }
@keyframes stvs-ring { from { transform: scale(1); opacity: .8; } to { transform: scale(1.75); opacity: 0; } }

.stvs-player__label {
	display: inline-flex; align-items: center; gap: 10px;
	padding: 8px 16px;
	border-radius: 999px;
	background: rgba(255, 255, 255, .14);
	border: 1px solid rgba(255, 255, 255, .22);
	backdrop-filter: blur(10px);
	-webkit-backdrop-filter: blur(10px);
	font-size: 14px; font-weight: 600; letter-spacing: .02em;
}
.stvs-player__dur { opacity: .75; font-weight: 500; font-variant-numeric: tabular-nums; }
.stvs-player__dur::before { content: "·"; margin-right: 10px; }
.stvs .stvs-player .stvs-player__restart { font-size: 13px; opacity: .8; text-decoration: underline; text-underline-offset: 3px; }
.stvs .stvs-player .stvs-player__restart:hover { opacity: 1; }

/* Ladeanzeige */
.stvs-player__spinner {
	position: absolute; top: 50%; left: 50%;
	width: 54px; height: 54px; margin: -27px 0 0 -27px;
	border-radius: 50%;
	border: 3px solid rgba(255, 255, 255, .2);
	border-top-color: #fff;
	animation: stvs-spin .8s linear infinite;
	opacity: 0; visibility: hidden;
	transition: opacity .2s;
	z-index: 2;
	pointer-events: none;
}
.stvs-player.is-waiting.has-started .stvs-player__spinner { opacity: 1; visibility: visible; }
@keyframes stvs-spin { to { transform: rotate(360deg); } }

/* kurzes Aufleuchten bei Play/Pause/Spulen */
.stvs-player__flash {
	position: absolute; top: 50%; left: 50%;
	display: grid; place-items: center;
	width: 76px; height: 76px; margin: -38px 0 0 -38px;
	border-radius: 50%;
	background: rgba(11, 18, 32, .55);
	backdrop-filter: blur(6px);
	opacity: 0;
	pointer-events: none;
	z-index: 2;
	font-weight: 700; font-size: 15px;
}
.stvs-player__flash .stvs-i { width: 34px; height: 34px; }
.stvs-player__flash.is-on { animation: stvs-flash .6s ease-out; }
@keyframes stvs-flash { from { opacity: 1; transform: scale(.85); } to { opacity: 0; transform: scale(1.25); } }

/* Steuerleiste */
.stvs-player__controls {
	position: absolute; left: 0; right: 0; bottom: 0;
	padding: 40px 16px 12px;
	background: linear-gradient(to top, rgba(6, 12, 24, .85), rgba(6, 12, 24, .4) 60%, transparent);
	z-index: 4;
	transition: opacity .35s ease, transform .35s ease;
}
.stvs-player:not(.has-started) .stvs-player__controls { opacity: 0; transform: translateY(10px); pointer-events: none; }
.stvs-player.is-idle .stvs-player__controls { opacity: 0; transform: translateY(10px); pointer-events: none; }
.stvs-player.is-idle { cursor: none; }
.stvs-player.is-idle .stvs-player__video { cursor: none; }

.stvs-player__progress {
	position: relative;
	height: 18px;
	display: flex; align-items: center;
	cursor: pointer;
	touch-action: none;
	border-radius: 4px;
}
.stvs-player__track {
	position: relative;
	width: 100%; height: 5px;
	border-radius: 999px;
	background: rgba(255, 255, 255, .22);
	overflow: hidden;
	transition: height .2s ease;
}
.stvs-player__progress:hover .stvs-player__track,
.stvs-player.is-scrubbing .stvs-player__track { height: 8px; }
.stvs-player__buffer, .stvs-player__played { position: absolute; inset: 0 auto 0 0; width: 0; border-radius: inherit; }
.stvs-player__buffer { background: rgba(255, 255, 255, .3); }
.stvs-player__played { background: linear-gradient(90deg, var(--stvs-b), var(--stvs-a)); box-shadow: 0 0 12px var(--stvs-a); }
.stvs-player__markers { position: absolute; inset: 0; }
.stvs-player__markers span { position: absolute; top: 0; bottom: 0; width: 3px; margin-left: -1.5px; background: rgba(6, 12, 24, .75); }
.stvs-player__thumb {
	position: absolute; top: 50%; left: 0;
	width: 15px; height: 15px; margin: -7.5px 0 0 -7.5px;
	border-radius: 50%;
	background: #fff;
	box-shadow: 0 0 0 4px color-mix(in srgb, var(--stvs-a) 45%, transparent), 0 2px 8px rgba(0, 0, 0, .4);
	transform: scale(0);
	transition: transform .2s ease;
	pointer-events: none;
}
.stvs-player__progress:hover .stvs-player__thumb,
.stvs-player__progress:focus-visible .stvs-player__thumb,
.stvs-player.is-scrubbing .stvs-player__thumb { transform: scale(1); }
.stvs-player__tip {
	position: absolute; bottom: 24px; left: 0;
	display: flex; flex-direction: column; align-items: center; gap: 2px;
	padding: 6px 10px;
	border-radius: 10px;
	background: rgba(255, 255, 255, .95);
	color: var(--stvs-ink);
	font-size: 12px; font-weight: 600; white-space: nowrap;
	font-variant-numeric: tabular-nums;
	transform: translateX(-50%);
	opacity: 0;
	transition: opacity .15s ease;
	pointer-events: none;
	box-shadow: 0 8px 20px -6px rgba(0, 0, 0, .4);
}
.stvs-player__tip-ch { color: var(--stvs-a); font-weight: 700; max-width: 220px; overflow: hidden; text-overflow: ellipsis; }
.stvs-player__tip-ch:empty { display: none; }
.stvs-player__progress:hover .stvs-player__tip, .stvs-player.is-scrubbing .stvs-player__tip { opacity: 1; }

.stvs-player__bar { display: flex; align-items: center; gap: 4px; margin-top: 6px; }
.stvs .stvs-player .stvs-btn {
	display: grid; place-items: center;
	width: 40px; height: 40px;
	border-radius: 12px;
	transition: background .2s ease, transform .15s ease;
	flex: none;
}
.stvs .stvs-player .stvs-btn:hover { background: rgba(255, 255, 255, .14); }
.stvs .stvs-player .stvs-btn:active { transform: scale(.92); }
.stvs-btn .stvs-i { width: 22px; height: 22px; }
.stvs-btn .stvs-i-pause, .stvs-btn .stvs-i-muted, .stvs-btn .stvs-i-exitfull { display: none; }
.stvs-player.is-playing .stvs-btn--play .stvs-i-play { display: none; }
.stvs-player.is-playing .stvs-btn--play .stvs-i-pause { display: block; }
.stvs-player.is-muted .stvs-btn--mute .stvs-i-vol { display: none; }
.stvs-player.is-muted .stvs-btn--mute .stvs-i-muted { display: block; }
.stvs-player.is-full .stvs-btn--full .stvs-i-full { display: none; }
.stvs-player.is-full .stvs-btn--full .stvs-i-exitfull { display: block; }
.stvs .stvs-player .stvs-btn--speed { width: auto; min-width: 44px; padding: 0 10px; font-size: 14px; font-weight: 700; font-variant-numeric: tabular-nums; }

.stvs-player__vol { display: flex; align-items: center; }
.stvs-player__volrange {
	-webkit-appearance: none; appearance: none;
	width: 0; height: 4px; margin: 0;
	border-radius: 999px;
	background: linear-gradient(90deg, #fff var(--v, 100%), rgba(255, 255, 255, .3) var(--v, 100%));
	opacity: 0;
	transition: width .25s ease, opacity .25s ease, margin .25s ease;
	cursor: pointer;
}
.stvs-player__vol:hover .stvs-player__volrange,
.stvs-player__volrange:focus-visible { width: 80px; opacity: 1; margin: 0 8px 0 2px; }
.stvs-player__volrange::-webkit-slider-thumb { -webkit-appearance: none; width: 13px; height: 13px; border-radius: 50%; background: #fff; border: 0; }
.stvs-player__volrange::-moz-range-thumb { width: 13px; height: 13px; border-radius: 50%; background: #fff; border: 0; }

.stvs-player__time { margin-left: 6px; font-size: 13px; font-weight: 600; font-variant-numeric: tabular-nums; white-space: nowrap; }
.stvs-player__sep { margin: 0 5px; opacity: .5; }
.stvs-player__total { opacity: .7; }
.stvs-player__chapter {
	margin-left: 10px; min-width: 0;
	font-size: 13px; opacity: .85;
	white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.stvs-player__chapter:not(:empty)::before { content: "•"; margin-right: 10px; opacity: .5; }
.stvs-player__spacer { flex: 1; }

.stvs-player__speed { position: relative; }
.stvs-player__menu {
	position: absolute; right: 0; bottom: 48px;
	display: grid; gap: 2px;
	min-width: 96px; padding: 6px;
	border-radius: 14px;
	background: rgba(15, 24, 42, .92);
	border: 1px solid rgba(255, 255, 255, .12);
	backdrop-filter: blur(14px);
	-webkit-backdrop-filter: blur(14px);
	box-shadow: 0 16px 40px -10px rgba(0, 0, 0, .6);
}
.stvs-player__menu[hidden] { display: none; }
.stvs .stvs-player .stvs-player__menu button { padding: 9px 12px; border-radius: 9px; font-size: 14px; font-weight: 600; text-align: left; }
.stvs .stvs-player .stvs-player__menu button:hover { background: rgba(255, 255, 255, .12); }
.stvs .stvs-player .stvs-player__menu button[aria-checked="true"] { background: var(--stvs-grad); }

/* ---------- Kapitel-Liste ---------- */

.stvs .stvs-chapters {
	list-style: none;
	margin: 18px 0 0; padding: 8px;
	display: grid; gap: 2px;
	max-height: 260px; overflow: auto;
	border-radius: 18px;
	background: rgba(255, 255, 255, .7);
	border: 1px solid rgba(255, 255, 255, .9);
	box-shadow: 0 14px 34px -20px rgba(16, 40, 80, .35);
	backdrop-filter: blur(8px);
	-webkit-backdrop-filter: blur(8px);
}
.stvs .stvs-chapters li { margin: 0; padding: 0; }
.stvs .stvs-chapters li::before { content: none; }
.stvs .stvs-chapters button {
	appearance: none;
	display: flex; gap: 14px; align-items: center;
	width: 100%;
	margin: 0; padding: 10px 12px;
	border: 0; border-radius: 12px;
	background: none;
	color: var(--stvs-ink);
	font: inherit; font-size: 15px; text-align: left; text-transform: none; letter-spacing: normal;
	box-shadow: none;
	cursor: pointer;
	transition: background .2s ease;
}
.stvs .stvs-chapters button:hover { background: color-mix(in srgb, var(--stvs-a) 8%, transparent); }
.stvs-chapters__t {
	flex: none;
	min-width: 58px; padding: 3px 8px;
	border-radius: 8px;
	background: color-mix(in srgb, var(--stvs-a) 10%, #fff);
	color: var(--stvs-a);
	font-size: 13px; font-weight: 700; text-align: center;
	font-variant-numeric: tabular-nums;
}
.stvs .stvs-chapters button.is-active { background: color-mix(in srgb, var(--stvs-a) 10%, #fff); font-weight: 600; }
.stvs .stvs-chapters button.is-active .stvs-chapters__t { background: var(--stvs-grad); color: #fff; }

/* ---------- Einblend-Animation ---------- */

.stvs.is-reveal .stvs__content > *,
.stvs.is-reveal .stvs__media { opacity: 0; transform: translateY(24px); }
.stvs.is-visible .stvs__content > *,
.stvs.is-visible .stvs__media { opacity: 1; transform: none; transition: opacity .8s ease, transform .8s cubic-bezier(.2, .8, .2, 1); }
.stvs.is-visible .stvs__content > :nth-child(2) { transition-delay: .08s; }
.stvs.is-visible .stvs__content > :nth-child(3) { transition-delay: .16s; }
.stvs.is-visible .stvs__content > :nth-child(4) { transition-delay: .24s; }
.stvs.is-visible .stvs__content > :nth-child(5) { transition-delay: .32s; }
.stvs.is-visible .stvs__media { transition-delay: .15s; }

/* ---------- Responsive ---------- */

@media (max-width: 900px) {
	.stvs .stvs__inner,
	.stvs--left .stvs__inner { grid-template-columns: minmax(0, 1fr); }
	.stvs--left .stvs__content { order: 0; }
	.stvs__media { order: -1; }
	.stvs--stacked .stvs__media { order: 0; }
}
@media (max-width: 600px) {
	.stvs { padding-left: 16px; padding-right: 16px; }
	.stvs-player { border-radius: 16px; }
	.stvs-player__controls { padding: 28px 8px 6px; }
	.stvs .stvs-player .stvs-btn { width: 36px; height: 36px; }
	.stvs .stvs-player .stvs-btn--back,
	.stvs .stvs-player .stvs-btn--fwd,
	.stvs-player__volrange,
	.stvs-player__chapter { display: none; }
	.stvs-player__time { font-size: 12px; }
	.stvs-player__label { font-size: 13px; padding: 6px 12px; }
}

@media (prefers-reduced-motion: reduce) {
	.stvs *, .stvs::before, .stvs::after { animation: none !important; transition: none !important; }
	.stvs.is-reveal .stvs__content > *, .stvs.is-reveal .stvs__media { opacity: 1; transform: none; }
}