/* Handy-Mockup für Instagram-Einbettungen - gehört zu ig-phone.js */
.ig-phone {
  --ig-w: 350px;
  --ig-bezel: 11px;
  width: calc(var(--ig-w) + 2 * var(--ig-bezel));
  max-width: 100%;
  flex: none;
}
.ig-frame {
  position: relative;
  aspect-ratio: 9 / 19.5;
  border: var(--ig-bezel) solid #0d0d0d;
  border-radius: 52px;
  background: #0d0d0d;
  box-shadow: 0 0 0 1.5px #3a3a3a, 0 30px 60px -20px rgba(0, 0, 0, .45);
  overflow: hidden;
}
.ig-notch {
  position: absolute; z-index: 3; top: 9px; left: 50%;
  width: 96px; height: 28px; margin-left: -48px;
  border-radius: 20px; background: #0d0d0d;
}
.ig-screen {
  position: absolute; inset: 0;
  border-radius: 41px;
  background: #fff;
  overflow-y: auto; overflow-x: hidden;
  padding-top: 46px;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}
.ig-screen::-webkit-scrollbar { display: none; }
.ig-screen iframe { min-width: 0 !important; width: 100% !important; border: 0 !important; }

/* Vor dem Laden: ruhige Fläche mit Play-Knopf, keine Verbindung zu Instagram */
.ig-gate {
  position: absolute; inset: 0;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px;
  border: 0; cursor: pointer; color: #fff; font: inherit; text-align: center;
  background: radial-gradient(120% 80% at 50% 30%, #2b2b2b 0%, #0f0f0f 70%);
}
.ig-gate-play {
  width: 76px; height: 76px; border-radius: 50%;
  border: 2px solid rgba(255, 255, 255, .85);
  background: rgba(255, 255, 255, .08);
  position: relative;
}
.ig-gate-play::after {
  content: ""; position: absolute; top: 50%; left: 50%;
  margin: -13px 0 0 -8px;
  border-style: solid; border-width: 13px 0 13px 22px;
  border-color: transparent transparent transparent #fff;
}
.ig-gate-handle { font-weight: 600; letter-spacing: .02em; }
.ig-gate-hint { font-size: 14px; opacity: .75; line-height: 1.4; }
.ig-gate-hint small { font-size: 11px; opacity: .7; }
.ig-phone.is-loaded .ig-gate { display: none; }

@media (max-width: 400px) {
  .ig-phone { --ig-w: 326px; --ig-bezel: 8px; }
  .ig-frame { border-radius: 44px; }
  .ig-screen { border-radius: 36px; }
}

/* Vorschaubild statt dunkler Fläche (data-ig-poster) */
.ig-gate.has-poster { background-size: cover; background-position: center; justify-content: flex-end; padding-bottom: 34px; }
.ig-gate.has-poster .ig-gate-play { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); background: rgba(0,0,0,.42); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); }
.ig-gate.has-poster .ig-gate-hint { text-shadow: 0 1px 6px rgba(0,0,0,.6); }