/* ═══════════════════════════════════════════════════════════════════════════
   Instagram — Content-Plan und Rohmaterial, Paket P2-7
   Gehört zu public/js/instagram-material.js. Mobile-first.
   ═══════════════════════════════════════════════════════════════════════════ */

.insta-plan-hinweis {
  font-size: 13px;
  color: var(--muted);
  line-height: 1.5;
  margin-bottom: 14px;
}

.insta-plan-titel { font-size: 14px; font-weight: 600; overflow-wrap: anywhere; }
.insta-plan-id { font-size: 13px; color: var(--muted); font-family: monospace; margin-top: 2px; }

/* Fehlende Angabe als solche kennzeichnen, nicht als Null oder leer. */
.insta-fehlt { color: var(--muted); font-style: italic; font-size: 13px; }

.insta-plan-tabelle { overflow-x: auto; }
.insta-plan-tabelle .btn { min-height: 44px; white-space: nowrap; }

/* ── Rohmaterial ──────────────────────────────────────────────────────────── */

.insta-raw-liste {
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px;
}

.insta-raw-karte {
  display: flex;
  gap: 12px;
  padding: 12px;
  margin-bottom: 0;
  align-items: flex-start;
}

.insta-raw-bild {
  flex: 0 0 72px;
  width: 72px;
  height: 72px;
  border-radius: var(--r);
  overflow: hidden;
  background: var(--surface-2);
  border: 1px solid var(--border);
}

.insta-raw-bild img { width: 100%; height: 100%; object-fit: cover; display: block; }

.insta-raw-bild-leer {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 26px;
  color: var(--muted);
}

.insta-raw-text { min-width: 0; flex: 1 1 auto; }

.insta-raw-kopf {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
  flex-wrap: wrap;
}

.insta-raw-name { font-size: 14px; font-weight: 600; overflow-wrap: anywhere; }
.insta-raw-sub { font-size: 13px; color: var(--muted); margin-top: 3px; }
.insta-raw-kennung { font-size: 13px; color: var(--muted); font-family: monospace; margin-top: 2px; }

.insta-raw-aktionen {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  margin-top: 10px;
}

.insta-raw-aktionen .btn { min-height: 44px; }

.insta-raw-mehr { margin-top: 14px; }
.insta-raw-mehr .btn { min-height: 44px; width: 100%; }

/* Entwurf, zu dem aus dem Content-Plan gesprungen wurde. */
.insta-hervorgehoben {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  transition: outline-color .4s;
}

@media (min-width: 640px) {
  .insta-raw-liste { grid-template-columns: repeat(auto-fill, minmax(340px, 1fr)); }
  .insta-raw-mehr .btn { width: auto; }
}