/* Merken · iPhone-Rahmen
   Der Rahmen ist reines CSS (Rundung, Kante, Schatten). Im Bildschirm steht
   ein echter Screenshot aus dem Simulator (<img class="phone__shot">), der
   seine eigene Statusleiste und Dynamic Island mitbringt. Das
   Seitenverhältnis 1320 × 2868 entspricht dem iPhone 16 Pro Max (6,9 Zoll). */

.phone {
  --pw: 300px;
  position: relative;
  width: var(--pw);
  max-width: 100%;
  padding: calc(var(--pw) * .032);
  border-radius: calc(var(--pw) * .165);
  background: #141414;
  box-shadow:
    inset 0 0 0 2px #3a3a3a,
    0 0 0 6px #fff,
    0 28px 60px -12px rgba(20, 20, 20, .32),
    0 8px 18px rgba(20, 20, 20, .12);
  flex: none;
}
.phone__screen {
  position: relative;
  overflow: hidden;
  border-radius: calc(var(--pw) * .135);
  background: var(--mk-bg);
}
.phone__screen picture { display: contents; }
/* Das Bild bestimmt die Höhe des Telefons und wird nie beschnitten. Mit
   object-fit fehlten sonst links und rechts Pixel, und der Inhalt klebte am Rahmen. */
.phone__shot { display: block; width: 100%; height: auto; }

/* Angeschnittenes Telefon: zeigt nur einen Fokus-Ausschnitt des echten
   Screens (assets/screens/fokus-*), dafür in fast echter Größe. Das Bild
   bestimmt die Höhe. Die Hülle .cut trägt die Maske, damit Stanzrand und
   Schatten nicht abgeschnitten werden. --top zeigt den oberen Teil des
   Telefons und läuft unten aus, --bottom zeigt den unteren und läuft oben aus. */
.cut { position: relative; padding: 80px; margin: -80px; }
.cut > .phone { --pw: inherit; }
.cut--top {
  padding-bottom: 0; margin-bottom: 0;
}
.cut--bottom {
  padding-top: 0; margin-top: 0;
  -webkit-mask-image: linear-gradient(to top, #000 90%, transparent 100%);
  mask-image: linear-gradient(to top, #000 90%, transparent 100%);
}
.phone--top { padding-bottom: 0; border-bottom-left-radius: 0; border-bottom-right-radius: 0; }
.phone--top .phone__screen { border-bottom-left-radius: 0; border-bottom-right-radius: 0; }
.phone--bottom { padding-top: 0; border-top-left-radius: 0; border-top-right-radius: 0; }
.phone--bottom .phone__screen { border-top-left-radius: 0; border-top-right-radius: 0; }

/* Ausschnitt als Sticker: weißer Stanzrand, Bild mit den Ecken der App */
.shot { padding: 8px; border-radius: 26px; box-shadow: var(--sh-sticker-up); }
.shot img { width: 100%; border-radius: 19px; }