@charset "UTF-8";
.viewer-wrapper {
  position: relative;
  width: 100%;
  max-width: 1200px;
  aspect-ratio: 3/2; /* 1.5 */
  margin: 0 auto;
  user-select: none;
  cursor: grab;
}

.viewer-wrapper.dragging {
  cursor: grabbing;
}

.viewer {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
  pointer-events: none;
  /* Anti-Flicker Fix für Chrome */
  transform: translateZ(0);
  backface-visibility: hidden;
  will-change: transform;
}

.frame-slider {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  max-width: 1200px;
  height: 10px;
  background: #F0F1F3; /* Basis = noch nicht abgelaufen */
  border-radius: 0;
  outline: none;
  margin: 0px auto 0 auto;
  padding: 0;
  display: block;
  position: relative;
}

/* ===== WebKit Track ===== */
.frame-slider::-webkit-slider-runnable-track {
  height: 10px;
  background: transparent;
  border: none;
}

/* ===== WebKit Thumb ===== */
.frame-slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 25px;
  height: 25px;
  background: #FFEB00;
  border: none;
  border-radius: 0;
  box-shadow: none;
  cursor: pointer;
  margin-top: -8px;
}

/* ===== Firefox ===== */
.frame-slider::-moz-range-track {
  height: 10px;
  background: #F0F1F3;
  border: none;
}

.frame-slider::-moz-range-progress {
  height: 10px;
  background: #363A3D;
}

.frame-slider::-moz-range-thumb {
  width: 25px;
  height: 25px;
  background: #FFEB00;
  border: none;
  border-radius: 0;
  box-shadow: none;
  cursor: pointer;
}

/*# sourceMappingURL=drag-animation.css.map */