/* Echte App-Screenshots im Handy-Rahmen (liegt ueber motion.css) */

.sphone {
  position: relative;
  width: min(300px, 74vw);
  padding: 10px;
  border-radius: 46px;
  background: #0E0F11;
  box-shadow: inset 0 0 0 2px #2E3136, inset 0 0 0 4px #0E0F11, 0 40px 80px -24px rgba(0, 4, 16, .7); /* taste-skill-ignore: Geraetekante */
}
.sphone::before { content: ""; position: absolute; left: 50%; top: 18px; z-index: 2; width: 26%; height: 20px; translate: -50% 0; border-radius: 999px; background: #000; }
.sphone picture, .sphone img { display: block; width: 100%; border-radius: 36px; }
.sphone img { aspect-ratio: 720 / 1435; object-fit: cover; object-position: top; padding-top: 0; background: #ECEAE5; }

.sphone-row { display: flex; justify-content: center; gap: clamp(12px, 3vw, 28px); }
.sphone-row .sphone { width: min(260px, 44vw); padding: 8px; border-radius: 38px; }
.sphone-row .sphone img, .sphone-row .sphone picture { border-radius: 30px; }
.sphone-row .sphone:nth-child(2) { margin-top: 48px; }
.sphone-row .sphone::before { top: 15px; height: 16px; }

figure.mock-wrap { margin: 0; }

@media (prefers-reduced-motion: no-preference) {
  .mock-wrap > .sphone, .sphone-row .sphone { animation: phone-float 7s ease-in-out infinite; }
  .sphone-row .sphone:nth-child(2), .split--flip .mock-wrap > .sphone { animation-delay: -3.5s; }
}
@media (hover: hover) and (pointer: fine) {
  .sphone { transition: transform .5s var(--ease); }
}

.shot-center { display: grid; justify-items: center; margin-top: clamp(40px, 6vw, 72px); }