/* ==========================================================================
   Zeitplan – offene Timeline
   Eine durchgehende Linie links. Zeit + Titel je Programmpunkt, darunter Details.
   Bis "jetzt" ist die Linie gedimmt, danach hell; der laufende Punkt sitzt als Kreis auf der Linie.
   ========================================================================== */

.tl-view {
  --tl-rail: 18px;              /* x-Position der Linie */
  --tl-text: 52px;              /* Textbeginn */
  --tl-pad: 18px;               /* vertikaler Abstand je Punkt */
  --rail-on: var(--ink);
  --rail-off: var(--rail-dim);
}

/* ---------- Filter ---------- */
.tl-filters {
  display: flex;
  gap: var(--space-5);
  margin: var(--space-2) calc(var(--gutter) * -1) var(--space-4);
  padding: 0 var(--gutter);
  overflow-x: auto;
  scrollbar-width: none;
  scroll-padding-inline: var(--gutter);
}
.tl-filters::-webkit-scrollbar { display: none; }
.tl-filter {
  position: relative;
  flex: none;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-height: var(--tap);
  padding: 0;
  border: 0;
  background: none;
  color: var(--ink-2);
  font: inherit;
  font-size: var(--fs-sub);
  font-weight: var(--fw-medium);
  cursor: pointer;
}
.tl-filter__dot { width: 8px; height: 8px; border-radius: 50%; background: var(--cat, var(--ink-3)); }
.tl-filter[aria-pressed="true"] { color: var(--ink); }
.tl-filter[aria-pressed="true"]::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 6px;
  height: 2px;
  border-radius: 2px;
  background: var(--cat, var(--accent));
}
.tl-filter:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; border-radius: 4px; }

/* ---------- Timeline ---------- */
.tl {
  list-style: none;
  margin: 0;
  padding: var(--space-3) 0 var(--space-8);
}

.tl-item,
.tl-now {
  position: relative;
  padding: var(--tl-pad) 0 var(--tl-pad) var(--tl-text);
}
/* Linie: je Punkt ein Segment, damit der Fortschritt mitlaufen kann */
.tl-item::before,
.tl-now::before {
  content: "";
  position: absolute;
  left: calc(var(--tl-rail) - 1px);
  top: 0;
  bottom: 0;
  width: 2px;
  background: var(--rail-on);
}
.tl > :first-child::before { top: calc(var(--tl-pad) + 0.7em); }
.tl > :last-child::before { bottom: auto; height: calc(var(--tl-pad) + 0.7em); }
.tl[data-phase="live"] .tl-item.is-past::before,
.tl[data-phase="done"] .tl-item::before { background: var(--rail-off); }
.tl-item.is-live::before {
  background: linear-gradient(to bottom, var(--rail-off) calc(var(--tl-pad) + 0.7em), var(--rail-on) calc(var(--tl-pad) + 0.7em));
}
.tl-now::before {
  background: linear-gradient(to bottom, var(--rail-off) 50%, var(--rail-on) 50%);
}

.tl-item__head {
  margin: 0;
  font-size: 1.1875rem;
  font-weight: var(--fw-medium);
  line-height: 1.4;
  letter-spacing: -0.01em;
  color: var(--ink);
  text-wrap: pretty;
}
.tl-item__time {
  font-variant-numeric: tabular-nums;
  margin-right: 0.15em;
}
.tl-item__cat { color: var(--cat-ink, var(--ink-2)); }
.tl-item__sub {
  margin: 3px 0 0;
  font-size: var(--fs-sub);
  line-height: 1.45;
  color: var(--ink-2);
  max-width: 34em;
}
.tl-item__count { color: var(--ink); font-variant-numeric: tabular-nums; font-weight: var(--fw-medium); }

.tl-item__link { color: inherit; text-decoration: none; }
.tl-item__link::after { content: ""; position: absolute; inset: 0; } /* ganze Zeile tippbar */
.tl-item__link:focus-visible { outline: none; }
.tl-item:has(.tl-item__link:focus-visible) { outline: 2px solid var(--focus); outline-offset: -2px; border-radius: 8px; }
.tl-item__results {
  display: inline-block;
  margin-top: 6px;
  font-size: var(--fs-footnote);
  font-weight: var(--fw-semibold);
  color: var(--accent);
  text-decoration: none;
}
.tl-item__results::after { content: " ›"; }

/* Vergangen: grau, wie im Entwurf */
.tl[data-phase="live"] .tl-item.is-past .tl-item__head,
.tl[data-phase="live"] .tl-item.is-past .tl-item__cat,
.tl[data-phase="done"] .tl-item .tl-item__head,
.tl[data-phase="done"] .tl-item .tl-item__cat { color: var(--ink-past); }
.tl[data-phase="live"] .tl-item.is-past .tl-item__sub,
.tl[data-phase="done"] .tl-item .tl-item__sub { color: var(--ink-past); }

/* Pausen ruhiger */
.tl-item.is-break .tl-item__head { color: var(--ink-2); font-weight: var(--fw-regular); }

/* Läuft: Akzentfarbe + Kreis auf der Linie */
.tl-item.is-live .tl-item__head,
.tl-item.is-live .tl-item__cat { color: var(--accent); }
.tl-item.is-live .tl-item__sub { color: var(--ink); }
.tl-item.is-live .tl-item__node,
.tl-now .tl-item__node {
  position: absolute;
  left: var(--tl-rail);
  top: calc(var(--tl-pad) + 0.7em);
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: var(--accent);
  transform: translate(-50%, -50%);
}
.tl-item.is-live .tl-item__node::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: var(--accent);
  animation: tl-pulse 2.4s var(--ease-out) infinite;
}
@keyframes tl-pulse {
  0% { transform: scale(1); opacity: .45; }
  70%, 100% { transform: scale(1.9); opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .tl-item.is-live .tl-item__node::after { animation: none; display: none; }
}
/* Mehrere gleichzeitig (z.B. Training + Transponder-Ausgabe): zweiter Kreis kleiner */
.tl-item.is-live + .tl-item.is-live .tl-item__node { width: 16px; height: 16px; }

/* Fortschritt des laufenden Punkts */
.tl-item__bar {
  display: block;
  width: min(100%, 240px);
  height: 2px;
  margin-top: 10px;
  border-radius: 2px;
  background: var(--rail-dim);
  overflow: hidden;
}
.tl-item__bar i { display: block; height: 100%; width: var(--p, 0%); background: var(--accent); transition: width 1s linear; }

/* "Jetzt" zwischen zwei Punkten */
.tl-now { padding-block: 6px; }
.tl-now .tl-item__node { top: 50%; width: 12px; height: 12px; }
.tl-now p {
  margin: 0;
  font-size: var(--fs-footnote);
  font-weight: var(--fw-semibold);
  color: var(--accent);
  font-variant-numeric: tabular-nums;
}

.tl-empty { padding: var(--space-6) 0 var(--space-6) var(--tl-text); color: var(--ink-2); }

@media (min-width: 600px) {
  .tl-view { --tl-rail: 24px; --tl-text: 64px; --tl-pad: 20px; }
  .tl-item__head { font-size: 1.3125rem; }
}