.cphs { position: relative; background: #000; color: #fff; overflow: hidden; }
.cphs__viewport {
	position: relative;
	/* Bildschirmfüllend: gesamte Fensterhöhe abzüglich Header (--cph-header-h vom Theme). */
	height: calc(100vh - var(--cph-header-h, 0px));
	height: calc(100svh - var(--cph-header-h, 0px));
	min-height: 360px;
}
.cphs__picture { display: block; width: 100%; height: 100%; }
.cphs__slide {
	position: absolute; inset: 0; margin: 0; opacity: 0; visibility: hidden;
	transition: opacity 0.9s ease, visibility 0s linear 0.9s;
}
.cphs__slide.is-active { opacity: 1; visibility: visible; transition: opacity 0.9s ease, visibility 0s; z-index: 1; }
.cphs__img { width: 100%; height: 100%; object-fit: cover; display: block; }
.cphs__caption {
	position: absolute; right: 1.5rem; top: 1.25rem; max-width: 60%; text-align: right;
	font-size: 0.78rem; letter-spacing: 0.16em; text-transform: uppercase;
	text-shadow: 0 1px 12px rgba(0, 0, 0, 0.8);
}
.cphs__caption a { color: inherit; text-decoration: none; border-bottom: 1px solid rgba(255, 255, 255, 0.6); }

.cphs__controls { position: absolute; right: clamp(1rem, 3vw, 2.5rem); bottom: clamp(1rem, 3vw, 2.5rem); z-index: 10; display: flex; gap: 0.5rem; }
.cphs__btn {
	width: 46px; height: 46px; display: inline-flex; align-items: center; justify-content: center;
	background: rgba(0, 0, 0, 0.45); color: #fff; border: 1px solid rgba(255, 255, 255, 0.35);
	border-radius: 50%; cursor: pointer; font-size: 1.1rem; line-height: 1;
	-webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); transition: background 0.2s, border-color 0.2s;
}
.cphs__btn:hover { background: rgba(16, 17, 20, 0.85); border-color: #fff; }
.cphs__btn:focus-visible, .cphs__dot:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }
.cphs__icon { width: 12px; height: 14px; border-left: 4px solid currentColor; border-right: 4px solid currentColor; display: block; }
.cphs.is-paused .cphs__icon { width: 0; height: 0; border-left: 12px solid currentColor; border-right: 0; border-top: 7px solid transparent; border-bottom: 7px solid transparent; }

.cphs__dots { position: absolute; left: 50%; bottom: 1.1rem; z-index: 10; transform: translateX(-50%); display: flex; gap: 0.25rem; max-width: 70%; flex-wrap: wrap; justify-content: center; }
.cphs__dot { width: 28px; height: 28px; padding: 0; background: none; border: 0; cursor: pointer; position: relative; }
.cphs__dot::before { content: ""; position: absolute; left: 50%; top: 50%; width: 10px; height: 10px; margin: -5px; border-radius: 50%; background: rgba(255, 255, 255, 0.4); transition: background 0.2s, transform 0.2s; }
.cphs__dot.is-active::before { background: #fff; transform: scale(1.25); }

@media (max-width: 640px) {
	.cphs__dots { display: none; }
	.cphs__caption { max-width: 85%; }
}

@media (prefers-reduced-motion: reduce) {
	.cphs__slide, .cphs__slide.is-active { transition: none; }
}