* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  background: #EAE6DF;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  height: 100dvh;
  overflow: hidden;
  font-family: var(--font-ui);
}
::-webkit-scrollbar { width: 0; height: 0; }
a { color: inherit; text-decoration: none; }
button, input, textarea { font: inherit; color: inherit; }
input, textarea { text-wrap: pretty; }

#phone {
  width: 390px;
  max-width: 100vw;
  height: 100%;
  max-height: 844px;
  background: var(--bg);
  box-shadow: 0 0 0 1px rgba(0,0,0,0.04);
  overflow: hidden;
}

@media (min-width: 480px) {
  #phone {
    height: min(844px, calc(100dvh - 48px));
    border-radius: 28px;
    box-shadow: 0 20px 60px rgba(20,18,15,0.18);
  }
}

#app {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  font-family: var(--font-ui);
  font-weight: 300;
  letter-spacing: 0.01em;
  color: var(--ink);
  background: var(--bg);
  position: relative;
  overflow: hidden;
  text-wrap: pretty;
}

.screen-scroll {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
}

.statusbar {
  height: 44px;
  flex: none;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  padding: 0 22px 6px;
  font-size: 12px;
  letter-spacing: 0.06em;
  opacity: 0.55;
}

/* Vom Startbildschirm aus zeigt das Telefon seine eigene Leiste mit Uhrzeit
   und Akku — dann brauchen wir unsere nicht, nur den Platz darunter. */
@media (display-mode: standalone) {
  .statusbar { visibility: hidden; height: env(safe-area-inset-top, 20px); padding: 0; }
  #phone { max-height: none; border-radius: 0; box-shadow: none; }
  #app { padding-bottom: env(safe-area-inset-bottom, 0px); }
}