/* ============================================================
   Diagnostic / process connector geometry fix
   Shared by Asthma, Allergien, COPD, Lungenfibrose, Lungenkrebs.
   Connectors are calculated from the actual icon-box size and
   each grid cell, so every path touches neighboring icon edges.
   ============================================================ */
.copd-diag .steps {
  --diag-icon-size: 124px;
  --diag-num-size: 46px;
  --diag-num-gap: 20px;
  --diag-connector-height: 30px;
}

.copd-diag .icon-box {
  width: var(--diag-icon-size) !important;
  height: var(--diag-icon-size) !important;
  position: relative;
  z-index: 3 !important;
}

.copd-diag .connector {
  position: absolute !important;
  left: calc(50% + (var(--diag-icon-size) / 2)) !important;
  width: calc(100% - var(--diag-icon-size)) !important;
  top: calc(
    var(--diag-num-size) +
    var(--diag-num-gap) +
    (var(--diag-icon-size) / 2) -
    (var(--diag-connector-height) / 2)
  ) !important;
  height: var(--diag-connector-height) !important;
  z-index: 1 !important;
  overflow: visible !important;
  pointer-events: none !important;
  transform: none !important;
}

.copd-diag .connector svg {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  overflow: visible !important;
}

/* One decorative gold dot, attached to the center of each path. */
.copd-diag .connector::before {
  left: 50% !important;
  right: auto !important;
  top: 50% !important;
  transform: translate(-50%, -50%) !important;
  z-index: 2 !important;
}
.copd-diag .connector::after {
  display: none !important;
}
.copd-diag .step:last-child .connector {
  display: none !important;
}

/* Tablet: existing layout remains 3 columns. Keep only connectors
   that join cards within the same row, calculated identically. */
@media (max-width: 1100px) and (min-width: 641px) {
  .copd-diag .connector {
    display: block !important;
  }
  .copd-diag .step:nth-child(3n) .connector,
  .copd-diag .step:last-child .connector {
    display: none !important;
  }
}

/* Mobile already stacks the cards in one column; do not leave
   desktop horizontal connectors floating between stacked steps. */
@media (max-width: 640px) {
  .copd-diag .connector {
    display: none !important;
  }
}