/* CSS Document */
.ContentProcGallery  {
  --area-color: var(--logo-color-1, #fefefe);
  --hover-color: var(--logo-color-2, #fefefe);
  --font-color: var(--font-color-light, #444);
  --element-radius: var(--border-radius, 10px);
}

.ContentProcGallery {
  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 img {
  height:48px;
  margin-bottom:1rem;
}

.ProcStep .Title {
  font-weight:600;
  color: var(--font-color);
}
.ProcStep a.link:hover { text-decoration: none; }

.ProcStep {
 -webkit-clip-path: polygon(0% 0%, 85% 0%, 100% 50%, 85% 100%, 0% 100%, 15% 50%);
 clip-path: polygon(0% 0%, 85% 0%, 100% 50%, 85% 100%, 0% 100%, 15% 50%);
 width:200px;
 height:200px;
 background: var(--area-color);
 transition: background var(--transition-time) ease;
}
.ProcStep:has(.link):hover, .ProcStep.run { background: var(--hover-color); }

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

  .ContentProcGallery {
    flex-direction:column;
  }

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

  .ProcStep {
    -webkit-clip-path: polygon(0% 0%, 50% 20%, 100% 0%, 100% 80%, 50% 100%, 0% 80%);
    clip-path: polygon(0% 0%, 50% 20%, 100% 0%, 100% 80%, 50% 100%, 0% 80%);
    width: auto;
    height: auto;
  }
}