/* Datei: /public/css/timeline.css - öffentliche Time-Line (pages/entwicklung.php) */
.ct-tl-body { min-height: 100vh; display: flex; flex-direction: column; }
.tl { width: 100%; max-width: 820px; margin: 40px auto 0; padding: 0 20px 60px; flex: 1; }
.tl__hero h1 { margin: 0 0 8px; font-size: clamp(1.8rem, 5vw, 2.6rem); }
.tl__hero p { margin: 0 0 8px; color: var(--ct-text-muted); line-height: 1.6; max-width: 60ch; }
.tl__hero .tl__meta { color: var(--ct-primary); font-weight: 600; font-size: .9rem; }
.tl__empty { color: var(--ct-text-muted); margin-top: 32px; }

.tl__filter { display: flex; flex-wrap: wrap; gap: 8px; margin: 28px 0 8px; }
.tl-chip {
    --tl-c: var(--ct-text-muted);
    display: inline-flex; align-items: center; padding: 5px 12px; border-radius: 999px;
    border: 1px solid var(--ct-border); background: transparent; color: var(--tl-c);
    font: inherit; font-size: .82rem; font-weight: 600; cursor: pointer; line-height: 1.3;
}
.tl-chip--streaming { --tl-c: var(--ct-area-streaming); }
.tl-chip--social { --tl-c: var(--ct-area-social); }
.tl-chip--website { --tl-c: var(--ct-area-website); }
.tl-chip--platform { --tl-c: var(--ct-text-muted); }
.tl__filter .tl-chip:hover { border-color: var(--tl-c); }
.tl__filter .tl-chip.is-active { background: var(--tl-c); border-color: var(--tl-c); color: var(--ct-bg); }
.tl__filter .tl-chip[data-filter="all"] { --tl-c: var(--ct-primary); }
.tl-chip--static { cursor: default; font-size: .72rem; padding: 2px 10px; border-color: color-mix(in srgb, var(--tl-c) 45%, transparent); }

.tl__list { position: relative; margin-top: 24px; padding-left: 28px; }
.tl__list::before {
    content: ""; position: absolute; left: 6px; top: 6px; bottom: 0; width: 2px;
    background: var(--ct-border);
}
.tl-day { margin-bottom: 28px; }
.tl-day[hidden], .tl-item[hidden] { display: none; }
.tl-day__title {
    position: relative; margin: 0 0 12px; font-size: .95rem; color: var(--ct-text-muted);
    font-weight: 600; letter-spacing: .02em;
}
.tl-day__title::before {
    content: ""; position: absolute; left: -29px; top: 50%; width: 12px; height: 12px; margin-top: -6px;
    border-radius: 50%; background: var(--ct-primary); box-shadow: 0 0 0 4px var(--ct-bg);
}

.tl-item { margin-bottom: 10px; }
.tl-item--full {
    background: var(--ct-bg-card); border: 1px solid var(--ct-border-soft, var(--ct-border));
    border-left: 3px solid var(--tl-c, var(--ct-primary)); border-radius: var(--ct-radius-lg, 12px);
    padding: 16px 18px;
}
.tl-item--streaming { --tl-c: var(--ct-area-streaming); }
.tl-item--social { --tl-c: var(--ct-area-social); }
.tl-item--website { --tl-c: var(--ct-area-website); }
.tl-item--platform { --tl-c: var(--ct-text-muted); }
.tl-item--full h3 { margin: 8px 0 6px; font-size: 1.1rem; line-height: 1.35; }
.tl-item--full p { margin: 0 0 8px; color: var(--ct-text); line-height: 1.6; }
.tl-item--full p:last-child { margin-bottom: 0; }

.tl-item--short {
    display: flex; align-items: center; justify-content: space-between; gap: 12px;
    padding: 8px 14px; border-radius: 10px; border: 1px solid var(--ct-border-soft, var(--ct-border));
    border-left: 3px solid var(--tl-c); color: var(--ct-text);
}
.tl-item__title { min-width: 0; overflow-wrap: anywhere; }

@media (max-width: 560px) {
    .tl { margin-top: 24px; }
    .tl-item--short { flex-direction: column; align-items: flex-start; gap: 6px; }
}