/**
 * Paqato iPhone Frame — Frontend & Editor Styles
 * Pure CSS-Mockup (kein Asset-Load), responsive über aspect-ratio.
 */

.pqf-frame-wrapper {
	display: flex;
	width: 100%;
	justify-content: center;
}

.pqf-frame {
	display: block;
	max-width: 320px;
	width: 100%;
	box-sizing: border-box;
	font-size: 0; /* whitespace-Killer für inline-Kinder */
}

/* Geräte-Body */
.pqf-frame__device {
	position: relative;
	width: 100%;
	aspect-ratio: 9 / 19.5;
	background: #1a1a1a;
	border-radius: 14% / 6.4%;
	padding: 4% 3.5%;
	box-sizing: border-box;
	box-shadow:
		inset 0 0 0 2px #2c2c2c,
		inset 0 0 0 4px #0a0a0a,
		0 30px 60px -20px rgba(0, 0, 0, 0.45),
		0 10px 20px -10px rgba(0, 0, 0, 0.35);
	transition: box-shadow 0.3s ease;
}

/* Seitenknöpfe (dezent, rein dekorativ) */
.pqf-frame__device::before,
.pqf-frame__device::after {
	content: "";
	position: absolute;
	background: #0e0e0e;
	border-radius: 1px;
	pointer-events: none;
}

/* linker Mute-Switch + Lautstärke (vereinfacht als ein Strich) */
.pqf-frame__device::before {
	left: -2px;
	top: 18%;
	width: 3px;
	height: 22%;
	border-radius: 2px;
}

/* rechter Power-Button */
.pqf-frame__device::after {
	right: -2px;
	top: 22%;
	width: 3px;
	height: 14%;
	border-radius: 2px;
}

/* Bildschirm */
.pqf-frame__screen {
	position: relative;
	width: 100%;
	height: 100%;
	border-radius: 9.5% / 4.4%;
	overflow: hidden;
	background: #000;
	box-sizing: border-box;
}

.pqf-frame__screen > img,
.pqf-frame__screen > video,
.pqf-frame__screen > iframe {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	display: block;
	border: 0;
}

.pqf-frame__screen > img,
.pqf-frame__screen > video {
	object-fit: cover;
}

/* Notch (iPhone X–13) */
.pqf-frame__notch {
	position: absolute;
	top: 4.2%;
	left: 50%;
	transform: translateX(-50%);
	width: 50%;
	height: 3.3%;
	background: #1a1a1a;
	border-radius: 0 0 18px 18px;
	z-index: 2;
	pointer-events: none;
}

/* Dynamic Island (iPhone 14 Pro+) */
.pqf-frame__island {
	position: absolute;
	top: 4.5%;
	left: 50%;
	transform: translateX(-50%);
	width: 30%;
	height: 3.6%;
	background: #000;
	border: 1px solid #1a1a1a;
	border-radius: 999px;
	z-index: 2;
	pointer-events: none;
	box-shadow: inset 0 0 0 1px #0a0a0a;
}

/* Kleine Frames brauchen kleinere Notch-Radien */
@media (max-width: 480px) {
	.pqf-frame__notch {
		border-radius: 0 0 12px 12px;
	}
}

/* Editor-Hilfe: stelle sicher, dass das Widget im Elementor-Editor nicht weggeschnitten wird */
.elementor-editor-active .pqf-frame {
	max-width: min(100%, 320px);
}