/* ============================================================
   PRODUKT-SCREENSHOT — echtes App-Bild im Mock-Rahmen
   (Startseite #produkt + Produktseiten). Rahmen = .mock-Optik.
   ============================================================ */
.shot { margin: 0 auto; max-width: 1120px; width: 100%; }
.shot picture, .shot img {
  display: block; width: 100%; height: auto;
}
.shot img {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r3);
  box-shadow: var(--sh-lg);
}
.shot figcaption {
  margin-top: 12px; text-align: center;
  font-size: 13px; line-height: 1.5; color: var(--text3);
}
.shot-band { padding: 8px 20px 48px; }
@media (min-width: 1024px) { .shot-band { padding: 16px 24px 72px; } }