:root{
  --screen-w:440px;
  --screen-h:956px;

  --device-w:464px;
  --device-h:980px;

  --frame:#111113;
}

*{
  box-sizing:border-box;
}

html,
body{
  margin:0;
  width:100%;
  min-height:100%;
}

body{
  min-height:100dvh;

  display:flex;
  align-items:center;
  justify-content:center;

  overflow:hidden;

  font-family:
    -apple-system,
    BlinkMacSystemFont,
    "SF Pro Display",
    "SF Pro Text",
    Inter,
    "Segoe UI",
    sans-serif;

  background:
    radial-gradient(
      circle at 50% 42%,
      #ffffff 0,
      #f6f6f7 50%,
      #eeeeF0 100%
    );

  color:#111;
}


/* komplette Bühne */
.phone-stage{
  width:100vw;
  height:100dvh;

  display:flex;
  align-items:center;
  justify-content:center;

  padding:18px;
}


/*
Der Container bekommt IMMER die exakten
Proportionen des simulierten Geräts.

Er darf auf großen Desktopfenstern deutlich
größer dargestellt werden.
*/
.phone-wrap{
  width:min(
    620px,
    calc(100vw - 36px),
    calc((100dvh - 72px) * 464 / 980)
  );

  display:flex;
  flex-direction:column;
  align-items:center;

  gap:13px;
}


.phone-label{
  flex:none;

  font-size:16px;
  line-height:20px;

  font-weight:760;
  letter-spacing:-.25px;

  color:#18181a;
}


/* Gerätegehäuse */
.phone{
  position:relative;

  width:100%;
  aspect-ratio:464 / 980;

  flex:none;

  border-radius:12.1% / 5.75%;

  background:
    linear-gradient(
      145deg,
      #29292b 0%,
      #09090a 28%,
      #161618 70%,
      #050506 100%
    );

  box-shadow:
    0 38px 95px rgba(0,0,0,.20),
    0 14px 35px rgba(0,0,0,.13),
    inset 0 0 0 1px rgba(255,255,255,.16);

  isolation:isolate;
}


/* feine Rahmenkante */
.phone::after{
  content:"";

  position:absolute;
  inset:0;

  border-radius:inherit;

  pointer-events:none;

  box-shadow:
    inset 0 0 0 2px rgba(255,255,255,.035),
    inset 0 -3px 7px rgba(0,0,0,.55);

  z-index:20;
}


/*
Display:

440 / 464 = 94.8276 %
956 / 980 = 97.5510 %
*/
.phone-screen{
  position:absolute;

  left:2.5862%;
  right:2.5862%;

  top:1.2245%;
  bottom:1.2245%;

  overflow:hidden;

  border-radius:10.5% / 4.85%;

  background:#fff;
}


/*
Das Entscheidende:

Der iframe selbst IST 440 x 956 CSS-Pixel.

Wir verändern seine Layoutgröße nicht.
Er wird anschließend lediglich mit transform
auf die sichtbare Displaygröße skaliert.
*/
.phone-screen iframe{
  position:absolute;
  top:0;
  left:0;

  width:440px;
  height:956px;

  border:0;
  margin:0;
  padding:0;

  display:block;

  transform-origin:0 0;

  background:#fff;
}


/* Dynamic Island */
.phone-notch{
  position:absolute;

  z-index:50;

  top:1.84%;
  left:50%;

  transform:translateX(-50%);

  width:27.16%;
  aspect-ratio:126 / 37;

  border-radius:999px;

  background:#050505;

  box-shadow:
    0 1px 2px rgba(0,0,0,.25),
    inset 0 0 0 1px rgba(255,255,255,.025);

  pointer-events:none;
}


/* kleine Displays */
@media(max-width:520px){
  .phone-stage{
    padding:8px;
  }

  .phone-wrap{
    width:min(
      calc(100vw - 16px),
      calc((100dvh - 50px) * 464 / 980)
    );

    gap:8px;
  }

  .phone-label{
    font-size:13px;
  }
}


/* sehr niedrige Desktopfenster */
@media(max-height:700px){
  .phone-label{
    display:none;
  }

  .phone-wrap{
    width:min(
      calc(100vw - 24px),
      calc((100dvh - 24px) * 464 / 980)
    );
  }
}