/* =========================================================================
   timeline.css — Werdegang: linke Achse, ruhige Daten, feine Marker
   ========================================================================= */

.timeline-wrap {
   position: relative;
}

.timeline {
   position: relative;
   display: flex;
   flex-direction: column;
}

/* ---------- Achse ---------- */
.timeline::before {
   content: "";
   position: absolute;
   top: 0;
   bottom: 0;
   left: 6.5rem;
   width: 1px;
   background: var(--edge);
}

@media (max-width: 720px) {
   .timeline::before {
      left: 0.35rem;
   }
}

/* Der laufende Fortschritt der Achse */
.timeline__progress {
   position: absolute;
   top: 0;
   left: 6.5rem;
   width: 1px;
   height: 0;
   background: var(--accent);
   transition: height 120ms linear;
}

@media (max-width: 720px) {
   .timeline__progress {
      left: 0.35rem;
   }
}

/* ---------- Eintrag ---------- */
.timeline-item {
   position: relative;
   display: grid;
   grid-template-columns: 6.5rem minmax(0, 1fr);
   gap: 0 var(--sp-6);
   padding-block: 1.5rem;
   border-top: 1px solid var(--edge-faint);
}

.timeline-item:first-child {
   border-top: none;
   padding-top: 0;
}

.timeline-item:last-child {
   padding-bottom: 0;
}

/* ---------- Jahresangabe ---------- */
.timeline-year {
   position: relative;
   font-family: var(--font-mono);
   font-size: var(--fs-sm);
   letter-spacing: var(--track-wide);
   color: var(--ink-3);
   padding-top: 0.15rem;
   padding-right: 1.1rem;
   text-align: right;
   transition: color var(--t-sm) var(--ease-out);
}

.timeline-year::after {
   content: "";
   position: absolute;
   top: 0.42rem;
   right: -0.35rem;
   width: 7px;
   height: 7px;
   background: var(--bg);
   border: 1px solid var(--edge-strong);
   border-radius: 50%;
   transition: background-color var(--t-md) var(--ease-out), border-color var(--t-md) var(--ease-out),
      transform var(--t-md) var(--ease-spring), box-shadow var(--t-md) var(--ease-out);
}

.timeline-item.is-revealed .timeline-year {
   color: var(--accent);
}

.timeline-item.is-revealed .timeline-year::after {
   background: var(--accent);
   border-color: var(--accent);
   transform: scale(1.15);
   box-shadow: 0 0 0 4px var(--accent-tint);
}

/* ---------- Inhalt ---------- */
.timeline-content {
   position: relative;
   padding-left: 1.1rem;
   transition: transform var(--t-sm) var(--ease-out);
}

.timeline-content::before {
   content: "";
   position: absolute;
   left: 0;
   top: 0.35rem;
   bottom: 0.35rem;
   width: 2px;
   background: var(--accent);
   border-radius: 2px;
   opacity: 0;
   transform: scaleY(0.3);
   transform-origin: top;
   transition: opacity var(--t-md) var(--ease-out), transform var(--t-md) var(--ease-out);
}

.timeline-item.is-revealed .timeline-content::before {
   opacity: 1;
   transform: scaleY(1);
}

.timeline-item:hover .timeline-content {
   transform: translateX(4px);
}

.timeline-event {
   font-size: clamp(1rem, 0.97rem + 0.3vw, 1.12rem);
   line-height: var(--lh-base);
   color: var(--ink);
   max-width: 54ch;
}

/* ---------- Kennzeichnung "in Arbeit" ---------- */
.timeline-item.is-future .timeline-event {
   color: var(--ink-2);
}

.timeline-flag {
   display: inline-flex;
   align-items: center;
   gap: 0.45rem;
   margin-top: 0.7rem;
   padding: 0.25rem 0.65rem;
   font-family: var(--font-mono);
   font-size: var(--fs-micro);
   letter-spacing: var(--track-wide);
   text-transform: uppercase;
   color: var(--accent);
   background: var(--accent-tint);
   border: 1px solid var(--accent-line);
   border-radius: var(--r-pill);
}

.timeline-flag::before {
   content: "";
   width: 5px;
   height: 5px;
   background: var(--accent);
   border-radius: 50%;
   animation: flag-blink 2.2s var(--ease-in-out) infinite;
}

/* ---------- Zusammenfassende Fußnote ---------- */
.timeline-note {
   display: flex;
   align-items: center;
   gap: 0.65rem;
   margin-top: 2rem;
   padding-top: 1.25rem;
   border-top: 1px dashed var(--edge);
   font-family: var(--font-mono);
   font-size: var(--fs-micro);
   letter-spacing: var(--track-wide);
   text-transform: uppercase;
   color: var(--ink-3);
}

.timeline-note span:last-child {
   margin-left: auto;
   color: var(--accent);
}

/* ---------- Mobile ---------- */
@media (max-width: 720px) {
   .timeline-item {
      grid-template-columns: 1fr;
      gap: 0.4rem;
      padding-block: 1.25rem;
      padding-left: 1.6rem;
   }

   .timeline-year {
      text-align: left;
      padding-right: 0;
   }

   .timeline-year::after {
      top: 0.3rem;
      right: auto;
      left: -1.245rem;
   }

   .timeline-content {
      padding-left: 0;
   }

   .timeline-content::before {
      display: none;
   }

   .timeline-item:hover .timeline-content {
      transform: none;
   }
}