.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:hover::before{
  opacity:1;
}

/* 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;
  }
}