.ProcStep.run::before{
  opacity:1;
}

.ProcSteps {
  display:flex;
  width:100%;
  padding-bottom:2rem;
  margin:0 auto;
  width:var(--stage-width);
}

.ProcStep {
  position:relative;
  flex:1;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  padding:2.2rem 2rem;
  text-align:center;
  text-decoration:none;
  color:#fff;
  overflow:hidden;
}

.ProcStep > * {
  position:relative;
  z-index:2;
}

.ProcStep img {
  height:48px;
  margin-bottom:1rem;
}

.ProcStep .Title {
  font-weight:600;
}

/* Grundform (Blau) – symmetrisch */
.ProcStep::after {
  content:"";
  position:absolute;
  inset:0;
  background:url("data:image/svg+xml;utf8,\
<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 29955 13100' preserveAspectRatio='none'>\
<polygon points='0 0 27000 0 29955 6550 27000 13100 0 13100 2955 6550' fill='%2319375a'/>\
</svg>") no-repeat center/100% 100%;
  z-index:0;
}

/* Hover Overlay (Orange) */
.ProcStep::before {
  content:"";
  position:absolute;
  inset:0;
  background:url("data:image/svg+xml;utf8,\
<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 29955 13100' preserveAspectRatio='none'>\
<polygon points='0 0 27000 0 29955 6550 27000 13100 0 13100 2955 6550' fill='%23f7941d'/>\
</svg>") no-repeat center/100% 100%;
  opacity:0;
  transition:opacity .3s ease;
  z-index:1;
}

.ProcStep.link:hover::before {
  opacity:1;
}

.ProcStep:not(.link):hover {
  cursor: default;
  text-decoration: none;
}


/* Responsive – untereinander + Pfeil nach unten */
@media (max-width:900px){

  .ProcSteps {
    flex-direction:column;
  }

  .ProcStep {
    flex:none;
    padding:1.8rem 1.5rem;
  }

  .ProcStep::after{
    background:url("data:image/svg+xml;utf8,\
<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 13100 29955' preserveAspectRatio='none'>\
<polygon points='0 0 13100 0 13100 27000 6550 29955 0 27000 0 2955' fill='%2319375a'/>\
</svg>") no-repeat center/100% 100%;
  }

  .ProcStep::before{
    background:url("data:image/svg+xml;utf8,\
<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 13100 29955' preserveAspectRatio='none'>\
<polygon points='0 0 13100 0 13100 27000 6550 29955 0 27000 0 2955' fill='%23f7941d'/>\
</svg>") no-repeat center/100% 100%;
  }

  .ProcStep img {
    height:44px;
    margin-bottom:.8rem;
  }
}