/*
 * KnowListic · gemeinsamer Apple-Watch-Geräterahmen
 * ------------------------------------------------
 * Eine einzige Hardware-Darstellung für /apps/, Startseite und /mehr-erfahren/.
 * 46-mm-Referenz: 39 x 46 mm Gehäuse, 416 x 496 px Display.
 * Der Screenshot liegt immer in einem eigenen, geclippten Screen-Container.
 * Dadurch kann er an keiner Kante aus dem Gehäuse herausragen.
 */

.kl-watch-device,
.kl-watch-device *,
.kl-watch-device *::before,
.kl-watch-device *::after {
	box-sizing: border-box;
}

.kl-watch-device {
	position: relative;
	display: block;
	width: 100%;
	aspect-ratio: 39 / 46;
	isolation: isolate;
	overflow: visible;
	border: 1px solid rgba(170, 190, 218, .34);
	border-radius: 24% / 21%;
	background:
		linear-gradient(180deg, rgba(255, 255, 255, .11), transparent 18%),
		linear-gradient(90deg, rgba(255, 255, 255, .055), transparent 16%, transparent 82%, rgba(0, 0, 0, .2)),
		linear-gradient(145deg, #465163 0%, #151c28 22%, #06090e 69%, #303947 100%);
	box-shadow:
		0 1.25rem 2.7rem rgba(0, 0, 0, .42),
		inset 0 1px 0 rgba(255, 255, 255, .12),
		inset 0 -1px 0 rgba(255, 255, 255, .035),
		inset 0 0 0 1px rgba(5, 9, 15, .48);
}

/*
 * Display-Inset bewusst prozentual: Der Innenbereich liegt sehr nahe am
 * 416:496-Verhältnis des Simulator-Screenshots. Unten bleibt minimal mehr
 * Gehäuse sichtbar als oben, damit die Bildschirmkante optisch nie übersteht.
 */
.kl-watch-device__screen {
	position: absolute;
	z-index: 3;
	top: 4%;
	right: 5%;
	bottom: 5.1%;
	left: 5%;
	display: block;
	overflow: hidden;
	border: 1px solid rgba(255, 255, 255, .075);
	border-radius: 20% / 17%;
	background: #000;
	box-shadow:
		0 0 0 1px rgba(0, 0, 0, .78),
		inset 0 1px 0 rgba(255, 255, 255, .035);
}

.kl-watch-device__screen img {
	display: block;
	width: 100%;
	height: 100%;
	max-width: none;
	margin: 0;
	object-fit: cover;
	object-position: 50% 50%;
	border: 0;
	border-radius: 0;
	background: #000;
}

/* Digital Crown – klar sichtbar, aber hinter der Displayebene. */
.kl-watch-device__crown {
	position: absolute;
	z-index: 2;
	top: 20.8%;
	right: -6.4%;
	display: block;
	width: 11.2%;
	height: 18.5%;
	border: 1px solid rgba(170, 190, 218, .24);
	border-radius: 58% 48% 48% 58%;
	background:
		radial-gradient(circle at 34% 26%, rgba(255, 255, 255, .21), transparent 34%),
		repeating-linear-gradient(180deg, rgba(255, 255, 255, .09) 0 1px, transparent 1px 3px),
		linear-gradient(90deg, #101620 0%, #465163 55%, #111721 100%);
	box-shadow:
		inset 0 1px 0 rgba(255, 255, 255, .1),
		inset 0 -1px 0 rgba(0, 0, 0, .42),
		0 .18rem .42rem rgba(0, 0, 0, .28);
}

/* Seitentaste – flacher und näher am Gehäuse als die Crown. */
.kl-watch-device__button {
	position: absolute;
	z-index: 1;
	top: 45.8%;
	right: -3.2%;
	display: block;
	width: 6.1%;
	height: 14.2%;
	border: 1px solid rgba(170, 190, 218, .18);
	border-radius: 34% / 22%;
	background: linear-gradient(90deg, #0f151e 0%, #3c4655 58%, #101620 100%);
	box-shadow:
		inset 0 1px 0 rgba(255, 255, 255, .08),
		inset 0 -1px 0 rgba(0, 0, 0, .38);
}

@media (prefers-reduced-motion: reduce) {
	.kl-watch-device,
	.kl-watch-device * {
		scroll-behavior: auto !important;
	}
}