.roadmap-wrap {
  position: relative;
}

.roadmap {
  --per-view: 3;
  --gap: 4rem;
  --circle-base: 320px;
  --center-emph: 0.3;
  --band-h: calc(var(--circle-base) * (1 + var(--center-emph)));
  --roadmap-chevron: url("data:image/svg+xml,%3Csvg%20width='14'%20height='33'%20viewBox='20%200%2014%2033'%20fill='none'%20xmlns='http://www.w3.org/2000/svg'%3E%3Cpath%20d='M20.3425%200.0332031C20.8001%206.90468%2025.6382%2013.6257%2033.8105%2016.0332C25.6382%2018.4407%2020.8001%2025.1617%2020.3425%2032.0332'%20stroke='black'/%3E%3C/svg%3E");
  --roadmap-arrow-color: #000;
  --roadmap-line: 1px;
  --roadmap-chevron-h: 26px;
  --roadmap-plus: url("data:image/svg+xml,%3Csvg%20width='37'%20height='37'%20viewBox='0%200%2037%2037'%20fill='none'%20xmlns='http://www.w3.org/2000/svg'%3E%3Cpath%20d='M0%2018.4092L36.8283%2018.4092'%20stroke='black'/%3E%3Cpath%20d='M18.418%2036.8281L18.418%20-0.000139236'%20stroke='black'/%3E%3C/svg%3E");
  display: flex;
  align-items: flex-start;
  gap: var(--gap);
  position: relative;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  -ms-overflow-style: none;
}
.roadmap::-webkit-scrollbar {
  display: none;
}
.roadmap__phase {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  flex: 0 0 calc((100% - (var(--per-view) - 1) * var(--gap)) / var(--per-view));
  scroll-snap-align: start;
}
.roadmap__phase:not(:last-child)::after {
  content: "";
  position: absolute;
  top: calc(var(--band-h) / 2);
  right: calc(var(--gap) * -1);
  width: var(--gap);
  height: var(--roadmap-line);
  transform: translateY(-50%);
  background: var(--roadmap-arrow-color);
  pointer-events: none;
  z-index: 0;
}
.roadmap__phase:not(:last-child)::before {
  content: "";
  position: absolute;
  top: calc(var(--band-h) / 2);
  right: calc(var(--gap) * -1);
  width: calc(var(--roadmap-chevron-h) * 14 / 33);
  height: var(--roadmap-chevron-h);
  transform: translateY(-50%);
  background-color: var(--roadmap-arrow-color);
  -webkit-mask: var(--roadmap-chevron) center/contain no-repeat;
  mask: var(--roadmap-chevron) center/contain no-repeat;
  pointer-events: none;
  z-index: 0;
}
.roadmap__band {
  height: var(--band-h);
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}
.roadmap__circle {
  position: relative;
  z-index: 1;
  width: calc(var(--circle-base) * var(--phase-scale, 1));
  height: calc(var(--circle-base) * var(--phase-scale, 1));
  flex: 0 0 auto;
  border-radius: 50%;
  background: var(--phase-bg);
  color: var(--phase-fg, inherit);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 1.5rem;
  overflow: hidden;
}
.roadmap__icon {
  position: absolute;
  inset: 15%;
  background-color: rgba(0, 0, 0, 0.12);
  -webkit-mask: var(--phase-icon) center/contain no-repeat;
  mask: var(--phase-icon) center/contain no-repeat;
  pointer-events: none;
}
.roadmap__plus {
 border: none !important;
position: relative;
 
  width: 2rem;
  height: 2rem;
  
  border-radius: 50%;
  background: transparent !important;
  cursor: pointer;

  /* Plus-SVG als Maske; Farbe erbt die Kreis-Textfarbe */
  &::before {
    content: "";
    position: absolute;
    inset: 10%;                               /* Grösse des Plus im Button */
    background-color: var(--phase-fg, #000);  /* Purple-Kreis -> weiss, Lime -> schwarz */
    -webkit-mask: var(--roadmap-plus) center / contain no-repeat;
            mask: var(--roadmap-plus) center / contain no-repeat;
  }

}

.roadmap__circle--clickable {
  cursor: pointer;
  /* Button-Reset, falls role=button visuell nichts erben soll */
  -webkit-appearance: none;
  appearance: none;
}
.roadmap__plus { pointer-events: none; } /* Deko – Klick geht an den ganzen Kreis */

.roadmap { cursor: grab; }
.roadmap.is-dragging { cursor: grabbing; scroll-snap-type: none; } /* Snap beim Ziehen aus */
.roadmap__detail {
  width: min(90%, 340px);
  margin-top: 1.5rem;
  text-align: left;
}
.roadmap__detail[hidden] {
  display: none;
}
.roadmap__num {
  font-size: 0.75rem;
  font-weight: 600;
}
.roadmap__title {
  margin: 0.25rem 0;
  font-size: 1.1rem;
}
.roadmap__subtitle {
  margin: 0 0 0.5rem;
  font-weight: 700;
  line-height: normal;
}
.roadmap__content {
  font-size: 0.9rem;
  line-height: 1.5;
}

.roadmap-wrap .screen-reader-text {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

.roadmap-edge {
  position: absolute;
  top: 0;
  height: var(--band-h, 300px);
  border: none !important;
  padding: 50px !important;
  background: transparent !important;
  cursor: pointer;
  z-index: 3;
  transition: opacity 0.15s ease;
  --bleed: calc((100vw - 100%) / 2);
  --edge-inset: calc(50% / var(--per-view) + var(--circle-base) / 2) !important;
}

.roadmap-edge--prev {
  left: calc(var(--bleed) * -1);
  width: calc(var(--bleed) + var(--edge-inset));
}
.roadmap-edge--next {
  right: calc(var(--bleed) * -1);
  width: calc(var(--bleed) + var(--edge-inset));
}
.roadmap-edge:disabled {
  opacity: 0;
  pointer-events: none;
}

/* weicher Übergang beim Blättern (optional) */
.roadmap__circle { transition: width .3s ease, height .3s ease; }

/* Grosser Kreis = der mittlere in der AKTUELLEN Ansicht, nur Desktop */
@media (min-width: 1025px) {
  .roadmap__phase.is-center { --phase-scale: calc(1 + var(--center-emph)); }
}

@media (max-width: 1024px) {
  .roadmap {
    --per-view: 2;
  }
}
@media (max-width: 767px) {
  .roadmap {
    --per-view: 1;
  }
  .roadmap-edge {
    --edge-inset: calc(18% + var(--circle-base) / 4);
  }
}