/* ---------- Instagram-Nachbau (Platzhalter-Account, kein echtes Konto) ---------- */
.ig {
  --ig-bg: #000;
  --ig-fg: #fff;
  --ig-dim: #a8a8a8;
  --ig-line: #262626;
  font-family: var(--font);
  background: var(--ig-bg); color: var(--ig-fg);
}

/* Telefonrahmen */
.phone {
  width: 100%; max-width: 390px; background: #000; border-radius: 44px; padding: 10px;
  box-shadow: 0 0 0 1.5px #3a3a3e, 0 28px 70px -22px rgba(0,0,0,.9), inset 0 0 0 1px #111;
  position: relative; flex: none;
}
.phone-screen { border-radius: 35px; overflow: hidden; background: #000; position: relative; }
.phone .island {
  position: absolute; top: 20px; left: 50%; translate: -50% 0; width: 92px; height: 26px;
  background: #000; border-radius: 99px; z-index: 6; pointer-events: none;
}
.ig-status {
  display: flex; align-items: center; justify-content: space-between; padding: 12px 22px 4px;
  font-size: 13.5px; font-weight: 650; letter-spacing: -.01em; position: relative; z-index: 5;
}
.ig-status .sig { display: flex; gap: 4px; align-items: center; opacity: .95; }
.no-phone .phone { max-width: 470px; border-radius: 16px; padding: 0; box-shadow: none; }
.no-phone .phone-screen { border-radius: 14px; border: 1px solid var(--ig-line); }
.no-phone .island, .no-phone .ig-status { display: none; }

/* Feed-Kopf */
.ig-topbar { display: flex; align-items: center; justify-content: space-between; padding: 8px 14px 10px; }
.ig-logo { font-family: "Snell Roundhand", "Segoe Script", cursive; font-size: 25px; font-weight: 600; letter-spacing: .3px; }
.ig-topbar .icons { display: flex; gap: 17px; }

/* Feed-Post */
.ig-post { border-bottom: 1px solid var(--ig-line); padding-bottom: 6px; }
.ig-post-head { display: flex; align-items: center; gap: 10px; padding: 9px 12px; }
.ig-ring {
  padding: 2px; border-radius: 99px; background: conic-gradient(from 210deg, #f9ce34, #ee2a7b, #6228d7, #f9ce34);
  flex: none; display: grid; place-items: center;
}
.ig-ring > * { border: 2px solid #000; border-radius: 99px; }
.ig-av { width: 32px; height: 32px; border-radius: 99px; object-fit: cover; background: #2a2a2a; display: grid; place-items: center; font-weight: 700; font-size: 12px; color: #ddd; }
.ig-handle { font-weight: 650; font-size: 13.5px; letter-spacing: -.01em; display: flex; align-items: center; gap: 4px; }
.ig-verified { width: 12px; height: 12px; }
.ig-sub { font-size: 11.5px; color: var(--ig-dim); margin-top: -1px; }
.ig-more { margin-left: auto; letter-spacing: 1px; font-weight: 700; opacity: .9; }

.ig-media { position: relative; background: #000; overflow: hidden; }
.ig-media > img, .ig-media > video { width: 100%; height: 100%; object-fit: cover; display: block; }
.ig-media.r-1-1 { aspect-ratio: 1/1; }
.ig-media.r-4-5 { aspect-ratio: 4/5; }
.ig-media.r-16-9 { aspect-ratio: 1.91/1; }
.ig-media.r-9-16 { aspect-ratio: 9/16; }

/* Carousel */
.ig-carousel { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; height: 100%; }
.ig-carousel::-webkit-scrollbar { display: none; }
.ig-carousel > figure { margin: 0; flex: none; width: 100%; scroll-snap-align: center; height: 100%; }
.ig-carousel img, .ig-carousel video { width: 100%; height: 100%; object-fit: cover; }
.ig-dots { position: absolute; bottom: 12px; left: 50%; translate: -50% 0; display: flex; gap: 5px; }
.ig-dots i { width: 6px; height: 6px; border-radius: 99px; background: rgba(255,255,255,.45); transition: background .2s, scale .2s; }
.ig-dots i.on { background: #0095f6; scale: 1.05; }
.ig-count { position: absolute; top: 12px; right: 12px; background: rgba(0,0,0,.6); border-radius: 99px; padding: 3px 9px; font-size: 11.5px; font-weight: 650; }

/* Aktionsleiste */
.ig-actions { display: flex; align-items: center; gap: 15px; padding: 9px 13px 5px; }
.ig-actions .spacer { flex: 1; }
.ig-actions svg { width: 24px; height: 24px; }
.ig-likes { padding: 1px 13px; font-size: 13.5px; font-weight: 650; }
.ig-caption { padding: 4px 13px 0; font-size: 13.5px; line-height: 1.42; }
.ig-caption b { font-weight: 650; margin-right: 5px; }
.ig-caption .tag { color: #e0f1ff; }
.ig-caption .more { color: var(--ig-dim); }
.ig-comments { padding: 4px 13px 0; font-size: 13.5px; color: var(--ig-dim); }
.ig-time { padding: 5px 13px 10px; font-size: 10.5px; color: var(--ig-dim); text-transform: uppercase; letter-spacing: .02em; }

/* Reel */
.ig-reel { position: relative; aspect-ratio: 9/16; background: #000; overflow: hidden; }
.ig-reel > video, .ig-reel > img { width: 100%; height: 100%; object-fit: cover; }
.ig-reel .grad-top { position: absolute; inset: 0 0 auto; height: 110px; background: linear-gradient(rgba(0,0,0,.5), transparent); pointer-events: none; }
.ig-reel .grad-bot { position: absolute; inset: auto 0 0; height: 230px; background: linear-gradient(transparent, rgba(0,0,0,.72)); pointer-events: none; }
.ig-reel .reel-top { position: absolute; top: 12px; left: 14px; right: 14px; display: flex; align-items: center; justify-content: space-between; font-weight: 650; font-size: 16px; }
.reel-rail { position: absolute; right: 9px; bottom: 74px; display: flex; flex-direction: column; align-items: center; gap: 19px; }
.reel-rail .it { display: grid; justify-items: center; gap: 3px; font-size: 11.5px; font-weight: 600; }
.reel-rail svg { width: 25px; height: 25px; filter: drop-shadow(0 1px 3px rgba(0,0,0,.5)); }
.reel-rail .disc { width: 27px; height: 27px; border-radius: 6px; border: 1.5px solid rgba(255,255,255,.85); background: linear-gradient(135deg,#444,#111); display: grid; place-items: center; font-size: 12px; animation: spinDisc 5s linear infinite; }
@keyframes spinDisc { to { rotate: 360deg; } }
.reel-bottom { position: absolute; left: 14px; right: 66px; bottom: 16px; display: grid; gap: 7px; }
.reel-user { display: flex; align-items: center; gap: 8px; }
.reel-follow { border: 1px solid rgba(255,255,255,.8); border-radius: 7px; padding: 2px 9px; font-size: 12px; font-weight: 650; }
.reel-cap { font-size: 13px; line-height: 1.35; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.reel-audio { display: flex; align-items: center; gap: 6px; font-size: 12px; overflow: hidden; }
.reel-audio .marq { white-space: nowrap; overflow: hidden; flex: 1; }
.reel-audio .marq span { display: inline-block; animation: marq 11s linear infinite; }
@keyframes marq { from { translate: 0; } to { translate: -100%; } }
.reel-mute {
  position: absolute; top: 52px; right: 12px; width: 32px; height: 32px; border-radius: 99px;
  background: rgba(0,0,0,.55); border: none; color: #fff; display: grid; place-items: center; cursor: pointer; z-index: 3;
}
.reel-play { position: absolute; inset: 0; display: grid; place-items: center; background: transparent; border: none; cursor: pointer; z-index: 2; }
.reel-play span { width: 62px; height: 62px; border-radius: 99px; background: rgba(0,0,0,.45); backdrop-filter: blur(4px); display: grid; place-items: center; font-size: 25px; color: #fff; opacity: 0; transition: opacity .2s; }
.ig-reel.paused .reel-play span { opacity: 1; }
.reel-scrub { position: absolute; left: 0; right: 0; bottom: 0; height: 3px; background: rgba(255,255,255,.22); z-index: 4; }
.reel-scrub i { display: block; height: 100%; background: #fff; width: 0; }

/* Story */
.ig-story { position: relative; aspect-ratio: 9/16; background: #000; overflow: hidden; }
.ig-story > img, .ig-story > video { width: 100%; height: 100%; object-fit: cover; }
.story-bars { position: absolute; top: 10px; left: 9px; right: 9px; display: flex; gap: 3px; z-index: 4; }
.story-bars i { flex: 1; height: 2.5px; background: rgba(255,255,255,.35); border-radius: 99px; overflow: hidden; }
.story-bars i b { display: block; height: 100%; background: #fff; width: 0; }
.story-bars i.done b { width: 100%; }
.story-head { position: absolute; top: 22px; left: 12px; right: 12px; display: flex; align-items: center; gap: 9px; z-index: 4; font-size: 13px; font-weight: 650; }
.story-head .t { color: rgba(255,255,255,.72); font-weight: 500; }
.story-foot { position: absolute; left: 12px; right: 12px; bottom: 14px; display: flex; align-items: center; gap: 10px; z-index: 4; }
.story-reply { flex: 1; border: 1px solid rgba(255,255,255,.65); border-radius: 99px; padding: 9px 15px; font-size: 13px; color: rgba(255,255,255,.85); }
.story-nav { position: absolute; inset: 0; display: flex; z-index: 3; }
.story-nav button { flex: 1; background: none; border: none; cursor: pointer; }

/* Profil-Grid */
.ig-profile { padding: 10px 0 0; }
.ig-prof-head { display: flex; align-items: center; gap: 22px; padding: 6px 16px 12px; }
.ig-prof-head .ig-av { width: 74px; height: 74px; font-size: 24px; }
.ig-stats { display: flex; gap: 24px; flex: 1; }
.ig-stats div { text-align: center; }
.ig-stats b { display: block; font-size: 15px; font-weight: 700; }
.ig-stats span { font-size: 12.5px; color: var(--ig-dim); }
.ig-bio { padding: 0 16px 12px; font-size: 13px; line-height: 1.4; white-space: pre-line; }
.ig-bio b { font-weight: 650; }
.ig-tabs { display: flex; border-top: 1px solid var(--ig-line); }
.ig-tabs button { flex: 1; padding: 10px; background: none; border: none; border-top: 1.5px solid transparent; margin-top: -1px; color: var(--ig-dim); cursor: pointer; }
.ig-tabs button.on { color: #fff; border-top-color: #fff; }
.ig-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2px; }
.ig-grid .cell { aspect-ratio: 1; background: #1a1a1a; position: relative; cursor: pointer; overflow: hidden; }
.ig-grid .cell img, .ig-grid .cell video { width: 100%; height: 100%; object-fit: cover; }
.ig-grid .cell .ico { position: absolute; top: 5px; right: 5px; filter: drop-shadow(0 1px 2px rgba(0,0,0,.6)); }
.ig-grid .cell .st { position: absolute; left: 0; bottom: 0; right: 0; height: 3px; }
.ig-grid .cell .dt { position: absolute; bottom: 4px; left: 5px; font-size: 10px; font-weight: 700; text-shadow: 0 1px 3px rgba(0,0,0,.8); }
.ig-grid .cell.empty { display: grid; place-items: center; color: #3a3a3a; font-size: 22px; }

.ph-media { width: 100%; height: 100%; display: grid; place-items: center; background: repeating-linear-gradient(45deg, #151517, #151517 10px, #17171a 10px, #17171a 20px); color: #4a4a52; font-size: 13px; text-align: center; padding: 20px; }

/* ---------- Geöffneter Post wie auf Instagram (ohne Telefonrahmen) ---------- */
.igv {
  width: min(100%, 470px); display: flex; flex-direction: column; overflow: hidden;
  border: 1px solid var(--ig-line); border-radius: 8px; box-shadow: 0 24px 60px -30px rgba(0,0,0,.9);
}
.igv-side, .igv-side-in { display: contents; }
.igv-head { order: -1; display: flex; align-items: center; gap: 10px; padding: 10px 12px; }
.igv-head .dot { color: var(--ig-dim); margin: 0 2px; font-weight: 400; }
.igv-head .follow { color: #0095f6; font-weight: 650; }
.igv-media { position: relative; aspect-ratio: var(--r, .8); background: #000; overflow: hidden; flex: none; }
.igv-media > img, .igv-media > video, .igv-media > .ph-media { width: 100%; height: 100%; object-fit: cover; display: block; }
.igv-media .ig-carousel { position: absolute; inset: 0; }
.igv-nav {
  position: absolute; top: 50%; translate: 0 -50%; width: 30px; height: 30px; border-radius: 99px; border: none;
  background: rgba(255,255,255,.82); color: #111; display: grid; place-items: center; cursor: pointer; z-index: 3;
  box-shadow: 0 2px 8px rgba(0,0,0,.3); opacity: 0; transition: opacity .15s;
}
.igv-nav.prev { left: 10px; } .igv-nav.next { right: 10px; }
.igv-media:hover .igv-nav { opacity: 1; }
@media (hover: none) { .igv-nav { opacity: .9; } }
.igv-mute, .story-mute {
  width: 30px; height: 30px; border-radius: 99px; border: none; background: rgba(0,0,0,.6); color: #fff;
  display: grid; place-items: center; cursor: pointer; z-index: 3;
}
.igv-mute { position: absolute; right: 12px; bottom: 12px; }
.story-mute { background: rgba(0,0,0,.35); width: 28px; height: 28px; }
.igv-body, .igv-add { display: none; }
.igv-actions { display: flex; align-items: center; gap: 15px; padding: 10px 13px 6px; }
.igv-actions .spacer { flex: 1; }
.igv-likes { padding: 0 13px; font-size: 13.5px; font-weight: 650; }
.igv .ig-caption.inline { padding: 5px 13px 0; }
.igv-comments { padding: 5px 13px 0; font-size: 13.5px; color: var(--ig-dim); }
.igv-date { padding: 6px 13px 13px; font-size: 10.5px; color: var(--ig-dim); text-transform: uppercase; letter-spacing: .02em; }
.ig-cmt { display: flex; gap: 12px; align-items: flex-start; }
.ig-cmt .ig-caption { padding: 4px 0 0; }
.ig-cmt-time { font-size: 12px; color: var(--ig-dim); margin-top: 8px; }
.ig-caption { white-space: pre-wrap; word-break: break-word; }
.vid-fail { white-space: pre-line; color: #a1a1aa; font-size: 12.5px; line-height: 1.5; }

/* Großer Bildschirm mit festem Versionen-Block: Vorschau so hoch, wie daneben Platz ist */
@media (min-width: 1101px) {
  @container stage (max-width: 699px) {
    .dock-sticky .igv { width: min(100%, 470px, calc((100dvh - var(--reserve, 330px) - 210px) * var(--r, .8))); }
  }
}

/* Breite Bühne: wie ein geöffneter Post auf instagram.com – Medien links, Details rechts */
@container stage (min-width: 700px) {
  .igv { flex-direction: row; width: auto; max-width: 100%; min-height: 340px; border-radius: 6px; }
  .igv-media { width: min(calc((100dvh - var(--reserve, 330px)) * var(--r, .8)), calc(100cqw - 336px), 640px); align-self: center; }
  .igv-side { display: block; position: relative; width: 335px; flex: none; border-left: 1px solid var(--ig-line); }
  .igv-side-in { display: flex; flex-direction: column; position: absolute; inset: 0; }
  .igv-head { order: 0; border-bottom: 1px solid var(--ig-line); padding: 12px 14px; }
  .igv-body { display: block; flex: 1; min-height: 0; overflow: auto; padding: 14px 16px; }
  .igv .ig-caption.inline, .igv-comments { display: none; }
  .igv-actions { border-top: 1px solid var(--ig-line); padding-top: 8px; }
  .igv-date { padding-bottom: 12px; }
  .igv-add { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-top: 1px solid var(--ig-line); font-size: 13.5px; }
  .igv-add span:first-child { font-size: 20px; line-height: 1; }
  .igv-add .ph { flex: 1; color: var(--ig-dim); }
  .igv-add .post { color: #0095f6; opacity: .5; font-weight: 650; }
}

/* Reel und Story: hochkant, so groß wie der Bildschirm zulässt */
.igv-tall { width: min(100%, 420px); border-radius: 10px; overflow: hidden; box-shadow: 0 24px 60px -30px rgba(0,0,0,.9); flex: none; }
.igv-tall > .ig-reel, .igv-tall > .ig-story { width: 100%; }
@media (min-width: 1101px) {
  .igv-tall { width: min(100%, 400px, calc((100dvh - 180px) * 9 / 16)); }
  .dock-sticky .igv-tall { width: min(100%, 400px, calc((100dvh - var(--reserve, 330px)) * 9 / 16)); }
}

/* Feed-Vorschau: Profil wie auf Instagram, ohne Telefonrahmen */
.ig-profile-card { width: min(100%, 470px); flex: none; border: 1px solid var(--ig-line); border-radius: 8px; overflow: hidden; padding-top: 6px; box-shadow: 0 24px 60px -30px rgba(0,0,0,.9); }