/* ============================================================
   PAIN-TIMELINE — "Kommt dir das bekannt vor?" (Homepage)
   Ein Disponenten-Vormittag als Uhrzeiten-Ablauf: Problem-
   Agitation direkt nach dem Hero, bevor die Lösung erklärt wird
   (eLogii-"Sound Familiar?"-Muster, auf Trailo-Größe übersetzt).
   Kein Kunden-Claim nötig — nur der wiedererkennbare Alltag.
   ============================================================ */

.tl { padding: 64px 20px; background: var(--surface2); }
.tl .sec-h { margin-bottom: 34px; }

.tl__list {
  list-style: none; margin: 0 auto; padding: 0;
  max-width: 620px;
}
.tl__item { display: flex; gap: 16px; }
.tl__time {
  flex: 0 0 52px; text-align: right; padding-top: 1px;
  font-size: 13.5px; font-weight: 700; color: var(--text3);
  font-variant-numeric: tabular-nums;
}
.tl__body {
  flex: 1; position: relative;
  border-left: 2px solid var(--border);
  padding: 0 0 24px 20px;
}
.tl__item:last-child .tl__body { padding-bottom: 4px; }
.tl__body::before {
  content: ''; position: absolute; left: -6px; top: 4px;
  width: 10px; height: 10px; border-radius: 50%;
  background: var(--surface2); border: 2px solid var(--amber);
}
.tl__body b { display: block; font-size: 15px; color: var(--text); margin-bottom: 3px; }
.tl__body p { margin: 0; font-size: 13.5px; color: var(--text2); line-height: 1.55; }

/* Kontrast-Karte: der gleiche Tag mit Trailo — Akzentblau, kompakt
   (Felix: weiße Variante wirkte fad) */
.tl__punch {
  max-width: 620px; margin: 26px auto 0;
  background: linear-gradient(135deg, var(--accent) 0%, #3d5fc5 100%);
  border-radius: var(--r2); padding: 14px 18px;
  box-shadow: var(--sh-accent);
  display: flex; flex-wrap: wrap; align-items: center; gap: 12px;
}
.tl__punch-copy { flex: 1; min-width: 230px; }
.tl__punch-copy b { display: block; font-size: 14.5px; margin-bottom: 2px; color: #fff; }
.tl__punch-copy span { font-size: 13px; color: rgba(255,255,255,.85); line-height: 1.5; }
.tl__punch .btn { white-space: nowrap; }

@media (min-width: 1024px) {
  .tl { padding: 88px 24px; }
}