/* Gemeinsame Bausteine: iPhone, Varianten-Umschalter */

/* ---------- iPhone (Pro-Form, ohne Logo) ----------
   Breite über width setzen, Höhe ergibt sich. Bildschirm-Inhalte nutzen cqw. */
.iphone {
  position: relative; width: 300px; aspect-ratio: 1 / 2.065; flex: none;
  border-radius: 16.8% / 8.15%;
  padding: 1.15%;
  background:
    linear-gradient(90deg, rgba(255,255,255,.18), transparent 6%, transparent 94%, rgba(255,255,255,.14)),
    linear-gradient(160deg, #6E6E73 0%, #2C2C2E 18%, #1C1C1E 50%, #3A3A3C 82%, #8E8E93 100%);
  box-shadow:
    0 0 0 .5px rgba(0,0,0,.7),
    inset 0 0 0 .6px rgba(255,255,255,.28),
    0 2px 4px rgba(0,0,0,.18),
    0 40px 70px -28px rgba(20, 15, 10, .5),
    0 24px 40px -30px rgba(0,0,0,.4);
}
.iphone__bezel {
  position: relative; width: 100%; height: 100%;
  border-radius: 15.8% / 7.65%;
  background: #000; padding: 3.3%;
  box-shadow: inset 0 0 0 1px #111;
}
.iphone__screen {
  position: relative; width: 100%; height: 100%; overflow: hidden;
  border-radius: 12.6% / 5.85%;
  background: #fff; color: #1D1D1F;
  container-type: inline-size;
  isolation: isolate;
}
.iphone__screen.is-dark { background: #000; color: #fff; }
.iphone__btn { position: absolute; background: linear-gradient(90deg, #3A3A3C, #6E6E73 60%, #2C2C2E); border-radius: 2px; }
.iphone__btn--action, .iphone__btn--volup, .iphone__btn--voldown { left: -.9%; width: 1.1%; border-radius: 2px 0 0 2px; }
.iphone__btn--action { top: 17.5%; height: 3.6%; }
.iphone__btn--volup { top: 24.5%; height: 6.6%; }
.iphone__btn--voldown { top: 32.5%; height: 6.6%; }
.iphone__btn--side { right: -.9%; width: 1.1%; top: 27%; height: 10.5%; border-radius: 0 2px 2px 0; }
.iphone__btn--cam { right: -.6%; width: .8%; top: 56%; height: 6%; opacity: .7; border-radius: 0 2px 2px 0; }

.ip-status {
  position: absolute; left: 0; right: 0; top: 0; height: 13.2cqw; z-index: 40;
  display: flex; align-items: center; justify-content: space-between;
  padding: 1.4cqw 7.4cqw 0 10.6cqw; pointer-events: none;
  font-family: -apple-system, 'SF Pro Text', 'Inter', sans-serif; font-weight: 600; font-size: 4.25cqw; letter-spacing: -.01em;
}
.ip-icons { display: flex; align-items: center; gap: 1.5cqw; }
.ip-icons svg { fill: currentColor; display: block; }
.ip-sig { width: 4.6cqw; height: 3.1cqw; }
.ip-wifi { width: 4.2cqw; height: 3.1cqw; }
.ip-bat { position: relative; width: 6.6cqw; height: 3.2cqw; border: .3cqw solid currentColor; border-radius: 1cqw; opacity: .95; display: block; }
.ip-bat::after { content: ''; position: absolute; right: -1cqw; top: 50%; width: .5cqw; height: 1.2cqw; translate: 0 -50%; background: currentColor; border-radius: 0 .4cqw .4cqw 0; opacity: .5; }
.ip-bat i { position: absolute; inset: .35cqw; border-radius: .5cqw; background: currentColor; }
.ip-island { position: absolute; z-index: 41; left: 50%; top: 2.75cqw; width: 31.3cqw; height: 9.2cqw; translate: -50% 0; background: #000; border-radius: 99px; pointer-events: none; }
.ip-home { position: absolute; z-index: 41; left: 50%; bottom: 2cqw; width: 33.4cqw; height: 1.3cqw; translate: -50% 0; border-radius: 99px; background: currentColor; opacity: .9; pointer-events: none; }
.ip-glare { position: absolute; inset: 0; z-index: 42; pointer-events: none; background: linear-gradient(115deg, rgba(255,255,255,.10) 0%, rgba(255,255,255,0) 32%); mix-blend-mode: screen; }

/* ---------- Varianten-Umschalter (nur Entwurf) ---------- */
.vswitch { position: fixed; left: 14px; bottom: 14px; z-index: 2147483000; isolation: isolate; pointer-events: auto; font-family: var(--sans, sans-serif); font-size: 13px; color: #1D1D1F; }
.vswitch__toggle {
  display: flex; align-items: center; gap: 8px; cursor: pointer; border: 0;
  background: #1D1D1F; color: #fff; font-weight: 600; font-size: 13px; padding: 9px 14px; border-radius: 99px;
  box-shadow: 0 10px 30px -10px rgba(0,0,0,.5);
}
.vswitch__dot { width: 10px; height: 10px; border-radius: 50%; background: conic-gradient(#F2A3B3 0 25%, #F6C744 0 50%, #9DBE5B 0 75%, #4F8FE8 0); }
.vswitch__panel {
  display: none; position: absolute; left: 0; bottom: calc(100% + 8px); width: 360px; max-height: calc(100vh - 90px); overflow-y: auto; overscroll-behavior: contain;
  background: rgba(255,255,255,.96); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  border: 1px solid #EEEAE4; border-radius: 18px; padding: 10px 12px; box-shadow: 0 30px 60px -20px rgba(0,0,0,.35);
}
.vswitch.is-open .vswitch__panel { display: block; }
.vswitch__row { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 6px 0; border-bottom: 1px solid #F1EEE9; }
.vswitch__row:last-of-type { border-bottom: 0; }
.vswitch__row > span { font-weight: 600; white-space: nowrap; }
.vswitch__row div { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 4px; }
.vswitch__row button { width: 28px; height: 28px; border-radius: 50%; border: 1px solid #E3DED6; background: #fff; cursor: pointer; font-weight: 600; font-size: 12px; color: #1D1D1F; }
.vswitch__row button:hover { border-color: #1D1D1F; }
.vswitch__row button.is-on { background: #1D1D1F; color: #fff; border-color: #1D1D1F; }
.vswitch__row .vswitch__play { border-style: dashed; }
.vswitch__row button.is-chosen { box-shadow: 0 0 0 2px #9DBE5B; }
.vswitch__hint { margin: 8px 0 2px; font-size: 11px; color: #8A857E; }
@media (max-width: 600px) { .vswitch { left: 10px; bottom: 10px; } .vswitch__panel { width: calc(100vw - 20px); } }

.vswitch__solo { display: grid; gap: 2px; padding: 4px 0 10px; margin-bottom: 4px; border-bottom: 1px solid #F1EEE9; }
.vswitch__solo b { font-size: 15px; }
.vswitch__solo span { color: #4A4744; }
.vswitch__solo small { color: #8A857E; font-size: 11px; }
.vswitch__all { justify-self: start; margin-top: 6px; border: 1px solid #1D1D1F; background: #fff; border-radius: 99px; padding: 5px 12px; font-weight: 600; font-size: 12px; cursor: pointer; }
.vswitch__row.is-solo > span { color: #4F8FE8; }
.vswitch__row .vswitch__focus { border-color: transparent; background: #F4F2EF; font-size: 14px; }
.vswitch__row .vswitch__focus.is-on { background: #4F8FE8; color: #fff; border-color: #4F8FE8; }
html[data-solo] main { min-height: 100vh; }

/* Patrick: Label «Neu fürs iPhone · bald im App Store» im Hero weglassen */
[data-slot="hero"] .eyebrow--live { display: none !important; }