/* ==========================================================================
   Vista City — Roadmap
   Charakter: Bauplan. Durchgehende Zeitachse, Meilensteine wechselseitig
   daran aufgehängt, Status jederzeit ablesbar.
   ========================================================================== */

/* --- Fortschritt im Ueberblick -------------------------------------------- */

.progress {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr));
  gap: clamp(0.75rem, 1.5vw, 1.25rem);
  margin-bottom: clamp(3rem, 6vw, 5rem);
}
.progress__item {
  display: grid;
  gap: 0.75rem;
  padding: 1.35rem;
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  background: var(--surface);
}
.progress__top {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
}
.progress__label {
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-mute);
}
.progress__value {
  font-family: var(--font-display);
  font-size: 1.5rem;
  letter-spacing: var(--track-tight);
  color: var(--ink);
  font-variant-numeric: tabular-nums;
}
.progress__bar {
  height: 6px;
  border-radius: var(--r-pill);
  background: color-mix(in oklab, var(--ink) 10%, transparent);
  overflow: hidden;
}
.progress__bar i {
  display: block;
  height: 100%;
  width: var(--pct, 0%);
  border-radius: inherit;
  background: var(--accent);
  transform-origin: left;
  animation: grow 1.2s var(--ease-out-expo) both;
}
@keyframes grow {
  from { transform: scaleX(0); }
  to   { transform: scaleX(1); }
}
@media (prefers-reduced-motion: reduce) {
  .progress__bar i { animation: none; }
}

/* --- Zeitachse ------------------------------------------------------------ */

.timeline {
  position: relative;
  display: grid;
  gap: clamp(1.5rem, 3vw, 2.5rem);
  padding-block: 1rem;
}

/* Die Achse selbst. */
.timeline::before {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  left: 50%;
  width: 2px;
  translate: -50% 0;
  background: linear-gradient(180deg,
    transparent,
    var(--line-hi) 6%,
    var(--line-hi) 94%,
    transparent);
}

.phase {
  position: relative;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: start;
  gap: clamp(1rem, 2.5vw, 2.5rem);
}

/* Quartalsmarke auf der Achse */
.phase__marker {
  position: sticky;
  top: 7rem;
  z-index: 2;
  display: grid;
  place-items: center;
  gap: 0.15rem;
  width: 5.5rem;
  height: 5.5rem;
  border: 1px solid var(--line-hi);
  border-radius: var(--r-pill);
  background: var(--bg);
  text-align: center;
}
.phase__marker b {
  font-family: var(--font-display);
  font-size: 1.1rem;
  letter-spacing: var(--track-tight);
  color: var(--ink);
}
.phase__marker span {
  font-size: 0.6rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-mute);
}
.phase--done .phase__marker {
  border-color: color-mix(in oklab, var(--state-live) 55%, transparent);
  background: color-mix(in oklab, var(--state-live) 14%, var(--bg));
}
.phase--active .phase__marker {
  border-color: transparent;
  background: var(--accent);
}
.phase--active .phase__marker b,
.phase--active .phase__marker span { color: var(--ink-on-accent); }

/* Karten wechseln die Seite; die leere Spalte bleibt als Luft stehen. */
.phase__items { display: grid; gap: 0.75rem; }
.phase:nth-child(odd) .phase__items:first-child { grid-column: 1; }
.phase:nth-child(odd) .phase__items:last-child { grid-column: 3; }

.milestone {
  position: relative;
  display: grid;
  gap: 0.6rem;
  padding: 1.35rem 1.5rem;
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  background: var(--surface);
  overflow: hidden;
  transition: border-color var(--dur-mid) linear, background-color var(--dur-mid) linear;
}
/* Kante links statt Anheben — passt zur Leserichtung der Zeitachse. */
.milestone::before {
  content: '';
  position: absolute;
  inset-block: 0;
  left: 0;
  width: 2px;
  background: var(--accent);
  transform: scaleY(0);
  transform-origin: top;
  transition: transform var(--dur-mid) var(--ease-out-expo);
}
.milestone:hover::before { transform: scaleY(1); }
.milestone:hover { border-color: var(--line-hi); background: var(--surface-hi); }

/* Verbindungsstrich zur Achse */
.milestone::after {
  content: '';
  position: absolute;
  top: 2.4rem;
  width: clamp(1rem, 2.5vw, 2.5rem);
  height: 1px;
  background: var(--line-hi);
}
.phase__items:first-child .milestone::after { right: calc(-1 * clamp(1rem, 2.5vw, 2.5rem)); }
.phase__items:last-child .milestone::after { left: calc(-1 * clamp(1rem, 2.5vw, 2.5rem)); }

.milestone__top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}
.milestone h3 {
  font-family: var(--font-display);
  font-size: 1.05rem;
  line-height: 1.1;
  letter-spacing: -0.01em;
  text-transform: uppercase;
}
.milestone p { color: var(--ink-soft); font-size: var(--text-sm); line-height: 1.65; }

.milestone__tags { display: flex; flex-wrap: wrap; gap: 0.35rem; }

/* Erledigte Punkte treten optisch zurück. */
.milestone--done { opacity: 0.72; }
.milestone--done h3 { color: var(--ink-soft); }

/* --- Vorschlagsblock ------------------------------------------------------ */

.suggest {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  margin-top: clamp(3rem, 6vw, 5rem);
  padding: clamp(1.75rem, 3.5vw, 3rem);
  border: 1px solid var(--line);
  border-top: 2px solid var(--accent);
  border-radius: var(--r-md);
  background: var(--surface);
  text-align: center;
}
.suggest h2 {
  font-family: var(--font-display);
  font-size: var(--text-h3);
  letter-spacing: var(--track-tight);
  text-transform: uppercase;
}
.suggest p { margin: 0.75rem auto 1.5rem; max-width: 56ch; color: var(--ink-soft); font-size: var(--text-sm); }

/* --- Umbrüche ------------------------------------------------------------ */

@media (max-width: 62rem) {
  .timeline::before { left: 2.75rem; }
  .phase { grid-template-columns: 5.5rem 1fr; }
  .phase__marker { position: static; }
  .phase:nth-child(odd) .phase__items:first-child,
  .phase:nth-child(odd) .phase__items:last-child,
  .phase__items { grid-column: 2 !important; }
  .milestone::after { display: none; }
}