/* ===== components.css ===== */

/* Buttons / Karten Grundstil kommt aus base.css – hier Extras und Lightbox */

/* Karten „schweben“ generisch etwas höher */
.content-wrap .content-box,
.insta-card {
  border-radius: 12px;
  box-shadow: 0 12px 24px rgba(0,0,0,.12);
}

/* Lightbox */
.lightbox { position: fixed; inset: 0; background: rgba(0,0,0,.92); display: none; align-items: center; justify-content: center; z-index: 4000; padding: 20px; }
.lb-content { max-width: 92vw; max-height: 88vh; display: flex; align-items: center; justify-content: center; }
.lb-content img, .lb-content video { max-width: 100%; max-height: 100%; border-radius: 10px; display: block; }
.lb-close, .lb-prev, .lb-next { position: absolute; background: rgba(0,0,0,.4); border: none; color: #fff; font-size: 2rem; line-height: 1; width: 48px; height: 48px; border-radius: 50%; cursor: pointer; display: grid; place-items: center; user-select: none; }
.lb-close { top: 20px; right: 20px; font-size: 2.2rem; }
.lb-prev  { left: 20px; top: 50%; transform: translateY(-50%); }
.lb-next  { right: 20px; top: 50%; transform: translateY(-50%); }
.lb-close:hover, .lb-prev:hover, .lb-next:hover { background: rgba(255,255,255,.2); }