/*
 * Dunkler Kontext (dev-wp.progiton.com component.scss:
 * .pg-component--dark) -- dieselbe Vereinfachung wie bei pg-hero:
 * kein generisches Kontext-Token-System, Werte lokal gesetzt.
 */
.pg-timeline {
  --component-background: var(--color-dark);
  --component-text: var(--color-text-inverse);
  --component-muted: rgba(255, 255, 255, 0.72);
  --component-border: rgba(255, 255, 255, 0.14);
  --component-radius: var(--radius-lg);

  padding-block: var(--space-section);
  color: var(--component-text);
  background: var(--component-background);
}

.pg-timeline__container {
  width: min(var(--container-width), calc(100% - 2 * var(--container-padding)));
  margin-inline: auto;
}

.pg-timeline__header {
  max-width: 40rem;
  margin: 0 auto var(--space-xl);
  text-align: center;
}

.pg-timeline__eyebrow {
  display: inline-flex;
  gap: var(--space-xs);
  align-items: center;
  margin: 0 0 var(--space-sm);
  color: var(--color-primary);
  font-size: 0.8125rem;
  font-weight: var(--font-weight-black);
  letter-spacing: 0.1em;
  line-height: 1.4;
  text-transform: uppercase;
}

.pg-timeline__eyebrow::before {
  width: 2.5rem;
  height: 0.1875rem;
  border-radius: var(--radius-pill);
  background: var(--color-primary);
  content: "";
}

.pg-timeline__heading {
  margin: 0;
  color: var(--component-text);
  font-family: var(--font-family-heading);
  font-size: clamp(2rem, 4vw, 2.75rem);
  font-weight: var(--font-weight-bold);
  letter-spacing: -0.02em;
}

.pg-timeline__introduction {
  margin: var(--space-sm) 0 0;
  color: var(--component-muted);
  font-size: 1.1rem;
  line-height: 1.6;
}

/* --- Journey: zentrierte Fortschrittslinie, alternierende Karten --- */

.pg-timeline__journey {
  position: relative;
  max-width: 62.5rem;
  margin-inline: auto;
}

.pg-timeline__line {
  position: absolute;
  top: 0;
  left: 50%;
  overflow: hidden;
  width: 0.1875rem;
  height: 100%;
  border-radius: var(--radius-pill);
  background: var(--component-border);
  transform: translateX(-50%);
}

.pg-timeline__fill {
  display: block;
  width: 100%;
  height: 100%;
  transform: scaleY(0);
  transform-origin: top;
  background: linear-gradient(180deg, var(--color-primary), var(--color-secondary), var(--color-text-inverse));
}

.pg-timeline__stations {
  position: relative;
}

.pg-timeline__station {
  position: relative;
  display: flex;
  align-items: center;
  width: 50%;
  min-height: 44vh;
}

.pg-timeline__station:nth-child(odd) {
  justify-content: flex-end;
  padding-right: 3.375rem;
}

.pg-timeline__station:nth-child(even) {
  justify-content: flex-start;
  margin-left: 50%;
  padding-left: 3.375rem;
}

.pg-timeline__station-dot {
  position: absolute;
  top: 50%;
  width: 1.125rem;
  height: 1.125rem;
  border: 2px solid var(--component-border);
  border-radius: 50%;
  background: var(--component-background);
  transform: translate(-50%, -50%);
  transition:
    background-color var(--duration-normal) var(--ease-standard),
    border-color var(--duration-normal) var(--ease-standard),
    box-shadow var(--duration-normal) var(--ease-standard);
}

.pg-timeline__station:nth-child(odd) .pg-timeline__station-dot {
  left: 100%;
}

.pg-timeline__station:nth-child(even) .pg-timeline__station-dot {
  left: 0;
}

.pg-timeline__station[data-timeline-accent="primary"] {
  --station-accent: var(--color-primary);
  --station-accent-text: var(--color-primary);
}

.pg-timeline__station[data-timeline-accent="secondary"] {
  --station-accent: var(--color-secondary);
  --station-accent-text: var(--color-secondary-light);
}

.pg-timeline__station.is-lit .pg-timeline__station-dot {
  border-color: var(--station-accent);
  background: var(--station-accent);
  box-shadow: 0 0 1rem var(--station-accent);
}

.pg-timeline__card {
  max-width: 25rem;
  border: 1px solid var(--component-border);
  border-radius: var(--component-radius);
  padding: var(--space-md) var(--space-lg);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0.02));
  opacity: 0.25;
  transform: translateY(1.375rem);
  transition:
    opacity var(--duration-normal) var(--ease-standard),
    transform var(--duration-normal) var(--ease-standard),
    border-color var(--duration-normal) var(--ease-standard);
  backdrop-filter: blur(0.375rem);
}

.pg-timeline__station.is-lit .pg-timeline__card {
  opacity: 1;
  transform: none;
  border-color: var(--station-accent);
}

.pg-timeline__card-badge {
  display: inline-block;
  margin-bottom: var(--space-sm);
  border: 1px solid var(--station-accent-text, var(--color-primary));
  border-radius: var(--radius-pill);
  padding: 0.25rem 0.75rem;
  color: var(--station-accent-text, var(--color-primary));
  font-size: 0.78rem;
  font-weight: var(--font-weight-bold);
  letter-spacing: 0.05em;
}

.pg-timeline__card-icon {
  margin-bottom: var(--space-sm);
}

.pg-timeline__card-media {
  width: 3.25rem;
  height: 3.25rem;
  object-fit: contain;
}

.pg-timeline__card-title {
  margin: 0 0 var(--space-xs);
  color: var(--component-text);
  font-family: var(--font-family-heading);
  font-size: 1.32rem;
  font-weight: var(--font-weight-bold);
}

.pg-timeline__card-text {
  margin: 0;
  color: var(--component-muted);
  font-size: 0.9375rem;
}

@media (max-width: 61.9375rem) {
  .pg-timeline__line {
    left: 0.9375rem;
  }

  .pg-timeline__station:nth-child(odd),
  .pg-timeline__station:nth-child(even) {
    width: 100%;
    margin-left: 0;
    padding: 1.5rem 0 1.5rem 2.875rem;
    justify-content: flex-start;
  }

  .pg-timeline__station:nth-child(odd) .pg-timeline__station-dot,
  .pg-timeline__station:nth-child(even) .pg-timeline__station-dot {
    left: 0.9375rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  .pg-timeline__fill,
  .pg-timeline__station-dot,
  .pg-timeline__card {
    transition: none;
  }

  .pg-timeline__fill {
    transform: scaleY(1);
  }

  .pg-timeline__card {
    opacity: 1;
    transform: none;
  }
}