/* Phone frame from hero-welten.jsx; app contents use the shared homepage factories. */
.lp-hero .visual.lp-app-demo { width: 100%; max-width: 340px; margin: 0 auto; }
.lp-app-switch { display: flex; flex-shrink: 0; gap: 6px; padding: 8px 4px 4px; }
.lp-app-switch[hidden], .lp-app-frame[hidden], .lp-app-screen[hidden] { display: none; }
.lp-app-switch button { flex: 1; min-height: 44px; padding: 8px; border: 1px solid rgba(255,255,255,.5); border-radius: 24px; background: transparent; color: #fff; font: 600 13px var(--font-body); cursor: pointer; }
.lp-app-switch button[aria-pressed="true"] { background: #fff; color: var(--deep); }
.lp-app-switch button:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }
.lp-app-frame { position: relative; display: flex; flex-direction: column; width: 100%; aspect-ratio: 400 / 880; border-radius: 40px; background: #0d1117; padding: 10px; box-shadow: 0 40px 90px rgba(0,42,70,.30), 0 8px 24px rgba(0,42,70,.16); }
.lp-app-viewport { position: relative; flex: 1; min-height: 0; overflow: hidden; border-radius: 30px 30px 0 0; }
.lp-app-screen { position: absolute; inset: 0; width: 100%; height: 100%; overflow: hidden; background: #fff; }
.lp-app-fallback, .lp-app-fallback a { color: #fff; }
@media (prefers-reduced-motion: reduce) {
  .lp-app-demo *, .lp-app-demo *::before, .lp-app-demo *::after { transition-duration: 0s !important; animation-duration: 0s !important; }
}