.retrofit-hotspot-section--guided .retrofit-hotspot__stage {
  min-height: 748px;
}

.retrofit-hotspot-section--guided .retrofit-machine-panel .retrofit-hotspot__image {
  top: 0;
  width: min(88%, 1120px);
  height: auto;
  max-height: none;
}

.retrofit-hotspot-section--guided .retrofit-hotspot__point {
  transition: color .18s ease-out, opacity .18s ease-out;
}

.retrofit-hotspot-section--guided .retrofit-hotspot__point.is-preview, .retrofit-hotspot-section--guided .retrofit-hotspot__point.is-pinned {
  color: var(--niklas-color-text);
}

.retrofit-hotspot-section--guided .retrofit-hotspot__dot::before {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 56px;
  height: 56px;
  border: 1px solid rgba(0, 205, 189, .58);
  background: radial-gradient(circle, rgba(0, 205, 189, .2) 0, rgba(0, 205, 189, .08) 46%, rgba(0, 205, 189, 0) 72%);
  opacity: 0;
  transform: translate(-50%, -50%) scale(.72);
  transition: opacity .18s ease-out, transform .22s ease-out;
  pointer-events: none;
  content: "";
}

.retrofit-hotspot-section--guided .retrofit-hotspot__point.is-preview .retrofit-hotspot__dot::before, .retrofit-hotspot-section--guided .retrofit-hotspot__point.is-pinned .retrofit-hotspot__dot::before, .retrofit-hotspot-section--guided .retrofit-hotspot__point.active .retrofit-hotspot__dot::before {
  opacity: 1;
  transform: translate(-50%, -50%) scale(1);
}

.retrofit-hotspot-section--guided .retrofit-hotspot__point.is-preview .retrofit-hotspot__dot, .retrofit-hotspot-section--guided .retrofit-hotspot__point.is-pinned .retrofit-hotspot__dot {
  background: var(--niklas-color-accent);
  box-shadow: 0 0 0 7px rgba(0, 205, 189, .14), 0 0 22px rgba(0, 205, 189, .34);
  transform: scale(1.1);
}

.retrofit-hotspot-section--guided .retrofit-hotspot__point.is-preview .retrofit-hotspot__dot::after, .retrofit-hotspot-section--guided .retrofit-hotspot__point.is-pinned .retrofit-hotspot__dot::after {
  background: var(--niklas-color-primary);
}

.retrofit-hotspot-section--guided .retrofit-hotspot__point.is-preview .retrofit-hotspot__line, .retrofit-hotspot-section--guided .retrofit-hotspot__point.is-pinned .retrofit-hotspot__line {
  height: 2px;
  box-shadow: 0 0 10px rgba(0, 205, 189, .4);
}

.retrofit-hotspot-section--guided .retrofit-hotspot__detail.fade {
  transform: translateY(4px);
  transition: opacity .22s ease-out, transform .22s ease-out;
}

.retrofit-hotspot-section--guided .retrofit-hotspot__detail.fade.show {
  transform: translateY(0);
}

.retrofit-hotspot__controlbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 28px;
  margin: 0 0 20px;
}

.retrofit-hotspot__controlbar .retrofit-machine-switcher.carousel-indicators {
  flex: 1 1 auto;
  min-width: 0;
  margin: 0;
}

.retrofit-hotspot__controlbar .retrofit-hotspot__navigation {
  flex: 0 0 382px;
}

.retrofit-hotspot__navigation {
  display: grid;
  grid-template-columns: minmax(110px, 1fr) auto minmax(110px, 1fr);
  align-items: center;
  gap: 12px;
}

.retrofit-hotspot__nav {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 48px;
  padding: 0 16px;
  border: 1px solid var(--niklas-color-border);
  background: var(--niklas-color-background);
  color: var(--niklas-color-text);
  font-family: inherit;
  font-size: var(--v5-button-font-size, .84rem);
  font-weight: 700;
  letter-spacing: .1em;
  cursor: pointer;
  transition: color var(--niklas-transition-default), border-color var(--niklas-transition-default), background var(--niklas-transition-default);
}

.retrofit-hotspot__nav:hover, .retrofit-hotspot__nav:focus-visible {
  border-color: var(--niklas-color-accent);
  background: var(--niklas-color-surface);
}

.retrofit-hotspot__nav:focus-visible {
  outline: 2px solid var(--niklas-color-accent-dark);
  outline-offset: 3px;
}

.retrofit-hotspot__progress {
  display: inline-flex;
  align-items: baseline;
  justify-content: center;
  min-width: 76px;
  color: var(--niklas-color-muted);
  font-size: var(--v5-font-size-small, .84rem);
  letter-spacing: .08em;
}

.retrofit-hotspot__progress-current {
  margin-right: 5px;
  color: var(--niklas-color-text);
  font-size: 1.1rem;
}

.retrofit-hotspot__progress-total {
  margin-left: 5px;
}

.retrofit-hotspot-section--guided .retrofit-hotspot__point--cabinet {
  top: 40%;
  width: 45%;
}

.retrofit-hotspot-section--guided .retrofit-hotspot__point--motors {
  top: 23.6%;
  width: 35.3%;
}

.retrofit-hotspot-section--guided .retrofit-hotspot__point--cooling {
  top: 10.6%;
  width: 47.6%;
}

.retrofit-hotspot-section--guided .retrofit-hotspot__point--drives {
  top: 63.5%;
  width: 35.1%;
}

.retrofit-hotspot-section--guided .retrofit-hotspot__point--control {
  top: 44%;
  width: 38.4%;
}

.retrofit-hotspot-section--guided .retrofit-hotspot__point--m2-drives {
  top: 3%;
  width: 46.2%;
}

.retrofit-hotspot-section--guided .retrofit-hotspot__point--m2-tooling {
  top: 35.5%;
  width: 44.2%;
}

.retrofit-hotspot-section--guided .retrofit-hotspot__point--m2-sensors {
  top: 31.5%;
  width: 36.4%;
}

.retrofit-hotspot-section--guided .retrofit-hotspot__point--m2-hydraulics {
  top: 49.5%;
  width: 33.5%;
}

.retrofit-hotspot-section--guided .retrofit-hotspot__point--m2-mechanics {
  top: 65.9%;
  width: 45.3%;
}

.retrofit-hotspot-section--guided .retrofit-hotspot__point--m3-cabinet {
  top: 45.4%;
  width: 46.6%;
}

.retrofit-hotspot-section--guided .retrofit-hotspot__point--m3-handling {
  top: 55%;
  width: 32.6%;
}

.retrofit-hotspot-section--guided .retrofit-hotspot__point--m3-drive {
  top: 30.5%;
  width: 39.1%;
}

.retrofit-hotspot-section--guided .retrofit-hotspot__point--m3-hydraulics {
  top: 50.5%;
  width: 43.2%;
}

.retrofit-hotspot-section--guided .retrofit-hotspot__point--m3-mechanics {
  top: 61%;
  width: 49.3%;
}

.retrofit-hotspot__point.is-intro .retrofit-hotspot__dot::before {
  animation: retrofit-hotspot-intro .9s ease-out 1;
}

@keyframes retrofit-hotspot-intro {
  0% {
    opacity: .35;
    transform: translate(-50%, -50%) scale(.72);
  }
  55% {
    opacity: .9;
    transform: translate(-50%, -50%) scale(1.12);
  }
  100% {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1);
  }
}

@media (min-width: 1200px) and (max-width: 1399.98px) {
  .retrofit-hotspot-section--guided .retrofit-hotspot__stage {
    min-height: 670px;
  }
}

@media (min-width: 1200px) and (max-width: 1399.98px) {
  .retrofit-hotspot__controlbar {
    gap: 18px;
  }
}

@media (min-width: 1200px) and (max-width: 1399.98px) {
  .retrofit-hotspot__controlbar .retrofit-hotspot__navigation {
    flex-basis: 360px;
  }
}

@media (min-width: 1200px) and (max-width: 1399.98px) {
  .retrofit-hotspot-section--guided .retrofit-hotspot__point--cabinet {
    top: 40%;
    width: 45%;
  }
}

@media (min-width: 1200px) and (max-width: 1399.98px) {
  .retrofit-hotspot-section--guided .retrofit-hotspot__point--motors {
    top: 23.6%;
    width: 35.3%;
  }
}

@media (min-width: 1200px) and (max-width: 1399.98px) {
  .retrofit-hotspot-section--guided .retrofit-hotspot__point--cooling {
    top: 10.6%;
    width: 47.6%;
  }
}

@media (min-width: 1200px) and (max-width: 1399.98px) {
  .retrofit-hotspot-section--guided .retrofit-hotspot__point--drives {
    top: 63.5%;
    width: 35.1%;
  }
}

@media (min-width: 1200px) and (max-width: 1399.98px) {
  .retrofit-hotspot-section--guided .retrofit-hotspot__point--control {
    top: 44%;
    width: 38.4%;
  }
}

@media (min-width: 1200px) and (max-width: 1399.98px) {
  .retrofit-hotspot-section--guided .retrofit-hotspot__point--m2-drives {
    top: 3%;
    width: 46.2%;
  }
}

@media (min-width: 1200px) and (max-width: 1399.98px) {
  .retrofit-hotspot-section--guided .retrofit-hotspot__point--m2-tooling {
    top: 35.5%;
    width: 44.2%;
  }
}

@media (min-width: 1200px) and (max-width: 1399.98px) {
  .retrofit-hotspot-section--guided .retrofit-hotspot__point--m2-sensors {
    top: 31.5%;
    width: 36.4%;
  }
}

@media (min-width: 1200px) and (max-width: 1399.98px) {
  .retrofit-hotspot-section--guided .retrofit-hotspot__point--m2-hydraulics {
    top: 49.5%;
    width: 33.5%;
  }
}

@media (min-width: 1200px) and (max-width: 1399.98px) {
  .retrofit-hotspot-section--guided .retrofit-hotspot__point--m2-mechanics {
    top: 65.9%;
    width: 45.3%;
  }
}

@media (min-width: 1200px) and (max-width: 1399.98px) {
  .retrofit-hotspot-section--guided .retrofit-hotspot__point--m3-cabinet {
    top: 45.4%;
    width: 46.6%;
  }
}

@media (min-width: 1200px) and (max-width: 1399.98px) {
  .retrofit-hotspot-section--guided .retrofit-hotspot__point--m3-handling {
    top: 55%;
    width: 32.6%;
  }
}

@media (min-width: 1200px) and (max-width: 1399.98px) {
  .retrofit-hotspot-section--guided .retrofit-hotspot__point--m3-drive {
    top: 30.5%;
    width: 39.1%;
  }
}

@media (min-width: 1200px) and (max-width: 1399.98px) {
  .retrofit-hotspot-section--guided .retrofit-hotspot__point--m3-hydraulics {
    top: 50.5%;
    width: 43.2%;
  }
}

@media (min-width: 1200px) and (max-width: 1399.98px) {
  .retrofit-hotspot-section--guided .retrofit-hotspot__point--m3-mechanics {
    top: 61%;
    width: 49.3%;
  }
}

@media (prefers-reduced-motion: reduce) {
  .retrofit-hotspot-section--guided .retrofit-hotspot__point, .retrofit-hotspot-section--guided .retrofit-hotspot__dot::before, .retrofit-hotspot-section--guided .retrofit-hotspot__detail.fade, .retrofit-hotspot__nav {
    transition: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .retrofit-hotspot__point.is-intro .retrofit-hotspot__dot::before {
    animation: none;
  }
}

@media (max-width: 1199.98px) {
  .retrofit-hotspot__controlbar {
    flex-direction: column;
    align-items: stretch;
    gap: 18px;
  }
}

@media (max-width: 1199.98px) {
  .retrofit-hotspot__controlbar .retrofit-machine-switcher.carousel-indicators {
    width: 100%;
  }
}

@media (max-width: 1199.98px) {
  .retrofit-hotspot__controlbar .retrofit-hotspot__navigation {
    width: 100%;
    min-width: 0;
    flex: 0 1 auto;
    grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  }
}

@media (max-width: 1199.98px) {
  .retrofit-hotspot__nav {
    min-width: 0;
  }
}

@media (max-width: 575.98px) {
  .retrofit-hotspot__controlbar {
    gap: 12px;
  }
}

@media (max-width: 575.98px) {
  .retrofit-hotspot__controlbar .retrofit-machine-switcher.carousel-indicators {
    gap: 8px;
  }
}

@media (max-width: 575.98px) {
  .retrofit-hotspot__controlbar .retrofit-machine-switcher.carousel-indicators [data-bs-target] {
    min-width: 0;
    flex: 1 1 0;
    gap: 6px;
    padding: 0 10px;
    font-size: var(--v5-button-font-size, .84rem);
    letter-spacing: .06em;
  }
}

@media (max-width: 575.98px) {
  .retrofit-hotspot__controlbar .retrofit-machine-switcher.carousel-indicators [data-bs-target] strong {
    font-size: var(--v5-button-font-size, .84rem);
  }
}

@media (max-width: 575.98px) {
  .retrofit-hotspot__navigation {
    gap: 8px;
  }
}

@media (max-width: 575.98px) {
  .retrofit-hotspot__nav {
    gap: 6px;
    min-height: 44px;
    padding: 0 10px;
    font-size: var(--v5-button-font-size, .84rem);
    letter-spacing: .06em;
  }
}

@media (max-width: 575.98px) {
  .retrofit-hotspot__progress {
    min-width: 56px;
    font-size: var(--v5-eyebrow-font-size, .84rem);
    letter-spacing: .04em;
  }
}

@media (max-width: 575.98px) {
  .retrofit-hotspot__progress-current {
    font-size: .95rem;
  }
}