/**
 * NEO Shot — Screenshot-System CSS.
 * Fokus-Crop-Container + Praesentations-Presets.
 */
/* Basis: Container behaelt seine vom Konsumenten gesetzte Groesse
   (z. B. Story-Gallery-Media). Kein erzwungenes width/height hier! */
.nc-shot { position: relative; overflow: hidden; }
/* Ratio-/Standalone-Modus: Container bekommt aspect-ratio (JS) + volle Breite. */
.nc-shot--ratio { width: 100%; }
.nc-shot__img { display: block; width: 100%; height: 100%; object-fit: cover; }

/* Device-Frame (Browser-Chrome) */
.nc-shot__frame { display: flex; flex-direction: column; width: 100%; height: 100%; border-radius: 14px; overflow: hidden; }
.nc-shot__frame .nc-shot__viewport { flex: 1; min-height: 0; }
.nc-shot__chrome-bar {
  display: flex; align-items: center; gap: .5rem; padding: .55rem .8rem;
  background: #101a24; border-bottom: 1px solid rgba(255, 255, 255, .06);
}
.nc-shot__chrome-dot { width: 10px; height: 10px; border-radius: 50%; background: #2a3845; }
.nc-shot__chrome-url {
  flex: 1; max-width: 320px; margin: 0 auto; text-align: center;
  font: .62rem ui-monospace, Menlo, monospace; color: #7da58a;
  background: #0a131c; border-radius: 6px; padding: .25rem .8rem;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.nc-shot__frame .nc-shot__viewport { position: relative; overflow: hidden; }
.nc-shot--shadow { box-shadow: 0 24px 70px rgba(0, 0, 0, .45), 0 0 40px rgba(55, 233, 61, .05); }

/* Ken-Burns: langsame Fokus-Fahrt zwischen zwei Punkten */
.nc-shot[data-nc-shot="kenburns"] .nc-shot__img {
  transition: object-position var(--nc-shot-dur, 6s) ease, transform var(--nc-shot-dur, 6s) ease;
}

/* Lens (Lupe) */
.nc-shot__lens {
  position: absolute; border-radius: 50%; border: 2px solid var(--nc-shot-accent, #37e93d);
  overflow: hidden; pointer-events: none; display: none; z-index: 4;
  box-shadow: 0 10px 40px rgba(0, 0, 0, .6); background: #060c12;
}
.nc-shot__lens img { position: absolute; top: 0; left: 0; max-width: none; }

/* Hotspots */
.nc-shot__hotspot {
  position: absolute; width: 22px; height: 22px; border-radius: 50%;
  background: rgba(55, 233, 61, .25); border: 2px solid var(--nc-shot-accent, #37e93d);
  cursor: pointer; transform: translate(-50%, -50%); padding: 0; z-index: 3;
}
.nc-shot__hotspot::after {
  content: ""; position: absolute; inset: -6px; border-radius: 50%;
  border: 2px solid rgba(55, 233, 61, .4); animation: ncShotPing 2s ease-out infinite;
}
.nc-shot__tip {
  position: absolute; z-index: 5; width: 240px; left: 50%; top: 100%;
  transform: translate(-50%, 12px);
  background: #0c151e; border: 1px solid var(--nc-shot-accent, #37e93d);
  border-radius: 10px; padding: .6rem; color: #eafff0;
}
.nc-shot__tip p { font-size: .72rem; margin-top: .5rem; line-height: 1.5; }
.nc-shot__tip .nc-shot { aspect-ratio: 16 / 10; border-radius: 6px; }
@keyframes ncShotPing { 0% { transform: scale(.6); opacity: 1; } 100% { transform: scale(1.4); opacity: 0; } }

/* Compare (Vorher/Nachher) */
.nc-shot__compare { position: relative; width: 100%; height: 100%; }
.nc-shot__compare .nc-shot { position: absolute; inset: 0; }
.nc-shot__divider {
  position: absolute; top: 0; bottom: 0; width: 2px; background: var(--nc-shot-accent, #37e93d);
  z-index: 3; box-shadow: 0 0 12px rgba(55, 233, 61, .8); pointer-events: none;
}
.nc-shot__compare input[type="range"] {
  position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: ew-resize; z-index: 4; margin: 0;
}

@media (prefers-reduced-motion: reduce) {
  .nc-shot[data-nc-shot="kenburns"] .nc-shot__img { transition: none; }
  .nc-shot__hotspot::after { animation: none; }
}

/* Hotspot-Tooltip: Titel ueber der Beschreibung */
.nc-shot__tip-title { display: block; margin-block: .25rem 0; font-weight: 700; }