/* Scoped block CSS — plain CSS, served as-is, no Tailwind rebuild needed.
   Visual reference: the milestone timeline of the Unternehmen prototype
   (branch prototype/unternehmen-page, variant A).

   Kicker, heading and intro on the left, the milestones on the right as a
   vertical line with one green dot per station. Below lg the two stack in
   source order (intro, then list); from lg (1024px) they sit side by side,
   1/3 to 2/3, and the intro sticks below the site header while the list
   scrolls past. The split is written here because the compiled Tailwind
   bundle carries neither `lg:grid-cols-3` for this shape nor `sticky`
   offsets.

   Pages come in two layouts (Templates/Page/Default.html): navy with white
   text or light with black text. Heading, intro, titles and the line
   therefore derive from the page colour (`currentColor`) instead of pinning
   a colour that would vanish on one of them. The green dot and the orange
   year are the two fixed brand colours. */

.timeline {
  max-width: 80rem;
  /* Not `margin: 0 auto`: the shorthand would zero margin-top and beat the
     page rhythm rule (`:where(.frontend-content) > :not(:first-child)`), which
     is what spaces this block from its neighbours. */
  margin-inline: auto;
}

.timeline__inner {
  display: grid;
  gap: 2rem;
  align-items: start;
}

.timeline__intro {
  min-width: 0;
}

.timeline__heading {
  margin: 0 0 1rem;
  color: inherit;
  font-weight: 300;
  font-size: clamp(1.75rem, 3.6vw, 2.75rem);
  line-height: 1.1;
  text-wrap: balance;
}

.timeline__heading-highlight {
  font-weight: 500;
}

.timeline__body {
  color: inherit;
  opacity: 0.85;
  line-height: 1.6;
  max-width: 60ch;
}

.timeline__body > :last-child {
  margin-bottom: 0;
}

/* The line runs behind the dots for the whole list; the dots sit on top of
   it, so it needs no gaps. */
.timeline__list {
  list-style: none;
  margin: 0;
  padding: 0;
  position: relative;
  min-width: 0;
}

.timeline__list::before {
  content: '';
  position: absolute;
  left: calc(0.5rem - 1px);
  top: 0.5rem;
  bottom: 0.5rem;
  width: 2px;
  background: color-mix(in srgb, currentColor 15%, transparent);
}

.milestone {
  position: relative;
  margin: 0 0 1.75rem;
  padding-left: 2.25rem;
  min-width: 0;
}

.milestone:last-child {
  margin-bottom: 0;
}

.milestone::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0.35rem;
  width: 1rem;
  height: 1rem;
  border-radius: 9999px;
  background: var(--theme-tertiary, #00b388);
}

.milestone__year {
  margin: 0;
  font-size: 0.8125rem;
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--theme-secondary, #ff7e47);
}

.milestone__title {
  margin: 0.15rem 0 0;
  font-size: 1.125rem;
  font-weight: 500;
  line-height: 1.3;
  color: inherit;
}

.milestone__text {
  margin: 0.25rem 0 0;
  font-size: 0.95rem;
  line-height: 1.55;
  color: inherit;
  opacity: 0.8;
}

@media (min-width: 1024px) {
  .timeline__inner {
    grid-template-columns: minmax(0, 1fr) minmax(0, 2fr);
    gap: 4rem;
  }

  /* Below the floating site header (h-28 + mt-5, see Layouts/Page/Default). */
  .timeline__intro {
    position: sticky;
    top: 8.5rem;
  }
}