/* Five steps with alternating circular illustrations. */
#steps #arbeitsweise { scroll-margin-top: 100px; }
#steps .step-title { font-size: clamp(30px, 3.1vw, 44px); line-height: 1.15; hyphens: auto; overflow-wrap: break-word; }
#steps .step-text { line-height: 1.7; }
#steps .step-center-part img { width: 270px; height: auto; max-width: 100%; aspect-ratio: 1; object-fit: contain; }
#steps .process-color-support { color: #49a6ff !important; border-color: #49a6ff; }

#steps .fc-process-connector { display: none; }
@media (min-width: 992px) {
  #steps.fc-connectors-ready .step-center-part { position: relative; }
  #steps.fc-connectors-ready .step-center-part::after { display: none; }
  #steps.fc-connectors-ready .fc-process-connector {
    display: block;
    position: absolute;
    right: 55px;
    bottom: -97px;
    width: 34px;
    height: 136px;
    overflow: visible;
    pointer-events: none;
    z-index: 4;
    fill: none;
    stroke-linecap: round;
    stroke-linejoin: round;
  }
  #steps.fc-connectors-ready .right .fc-process-connector {
    right: auto;
    left: 55px;
    transform: scaleX(-1);
  }
  #steps .fc-process-track { stroke: #ffffff29; stroke-width: 1.5; }
  #steps .fc-process-trace { stroke-width: 2.5; stroke-dasharray: 1 1; }
  #steps .fc-process-head { stroke: var(--fc-connector-end); stroke-width: 2.5; }
  #steps .fc-process-dot { fill: var(--fc-connector-end); stroke: #fff; stroke-width: 1; }
}
@media (min-width: 992px) and (max-width: 1199px) {
  #steps.fc-connectors-ready .fc-process-connector { right: 19px; }
  #steps.fc-connectors-ready .right .fc-process-connector { left: 19px; right: auto; }
}

@media (max-width: 1199px) {
  #steps #arbeitsweise { scroll-margin-top: 76px; }
}

/* Keep numbers and longer headings in a predictable stack on small screens. */
@media (max-width: 991px) {
  #steps .step-left-part,
  #steps .right .step-left-part,
  #steps .part3 { margin: 0; }
  #steps .step-title { display: flex; flex-direction: column; align-items: center; gap: 8px; margin: 20px 0 10px; font-size: clamp(28px, 6.5vw, 36px); text-align: center; }
  #steps .step-title span,
  #steps .right .step-title span,
  #steps .part3 span,
  #steps .right .part4 span { position: static; display: block; width: auto; margin: 0; font-size: 64px; line-height: 1; letter-spacing: 2px; z-index: auto; }
  #steps .step-center-part img { width: 240px; }
  #steps .step-text { text-align: center; }
}