/* ==========================================================================
   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; }

/* Eigene Farbe eines Programmpunkts (schedule[].color): Titel in der Farbe */
.tl:not([data-phase="done"]) .tl-item.has-color:not(.is-past):not(.is-live):not(.is-ongoing) .tl-item__title { color: var(--cat-ink); }

/* 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;
}

/* Einklappbarer Bereich: Kopfzeile «Ab 19:40 Titel» mit Pfeil im Kreis (neutral, nie rot);
   aufgeklappt sind die Punkte einen Tab nach rechts eingerückt – die Linie bleibt wie überall */
.tl-group__btn { all: unset; box-sizing: border-box; cursor: pointer; }
.tl-group__btn::after { content: ""; position: absolute; inset: 0; } /* ganze Zeile tippbar */
.tl-group:has(.tl-group__btn:focus-visible) { outline: 2px solid var(--focus); outline-offset: -2px; border-radius: 8px; }
.tl-group .tl-item__head { font-weight: var(--fw-semibold); }
.tl-group__now { margin: 4px 0 0; font-size: var(--fs-sub); font-weight: var(--fw-semibold); color: var(--accent); }
.grp-disc {
  display: inline-grid; place-items: center; width: 1.45em; height: 1.45em; margin-right: .4em; vertical-align: -0.22em; position: relative; top: -0.08em;
  border-radius: 50%; background: rgba(255,255,255,.14); color: var(--ink);
}
.grp-chev { width: .9em; height: .9em; transition: transform .2s var(--ease-out); }
.is-open .grp-chev { transform: rotate(180deg); }
.tl .tl-item.in-group { padding-left: calc(var(--tl-text) + 32px); }
@media (prefers-reduced-motion: reduce) { .grp-chev { transition: none; } }

/* Läuft im Hintergrund weiter («Ab 19:15 Fondueplausch», während ein Lauf läuft): rot mit Dreieck statt Kreis.
   Alles, was schon begonnen hat, liegt auf der grauen Linie – hell wird sie erst ab dem laufenden Kreis */
.tl-item.is-ongoing .tl-item__head, .tl-item.is-ongoing .tl-item__cat { color: var(--accent); }
.tl-item.is-ongoing .tl-item__node {
  position: absolute; left: var(--tl-rail); top: calc(var(--tl-pad) + 0.7em); width: 24px; height: 26px;
  transform: translate(-30%, -50%); /* leicht rechts der Linie, Spitze näher am Text */
}
.tl-item.is-ongoing .tl-item__node::before {
  content: ""; position: absolute; inset: 0; background: var(--accent); clip-path: polygon(0 0, 100% 50%, 0 100%);
}
/* pulsiert leicht wie der laufende Kreis (Kopie dahinter wächst und verblasst) */
.tl-item.is-ongoing .tl-item__node::after {
  content: ""; position: absolute; inset: 0; background: var(--accent); clip-path: polygon(0 0, 100% 50%, 0 100%);
  animation: tl-pulse-soft 2.4s var(--ease-out) infinite;
}
@keyframes tl-pulse-soft {
  0% { transform: scale(1); opacity: .5; }
  70%, 100% { transform: scale(1.5); opacity: 0; }
}
@media (prefers-reduced-motion: reduce) { .tl-item.is-ongoing .tl-item__node::after { animation: none; display: none; } }
.tl[data-phase="live"] .tl-item.is-ongoing::before,
.tl[data-phase="live"] .tl-item.is-begun::before { background: var(--rail-off); }
/* steht das Dreieck unter dem laufenden Kreis, ist die Linie dort schon hell (ab «jetzt» alles weiss) */
.tl[data-phase="live"] .tl-item.is-live ~ .tl-item.is-ongoing::before,
.tl[data-phase="live"] .tl-now ~ .tl-item.is-ongoing::before { background: var(--rail-on); }

.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; }
}