diff --git a/frontend/src/client/i18n.ts b/frontend/src/client/i18n.ts
index deb9c09..bcaf2eb 100644
--- a/frontend/src/client/i18n.ts
+++ b/frontend/src/client/i18n.ts
@@ -1163,6 +1163,39 @@ const translations: Record<Lang, Record<string, string>> = {
     "projects.detail.tab.checklisten": "Checklisten",
     "projects.detail.verlauf.empty": "Noch keine Ereignisse aufgezeichnet.",
     "projects.detail.verlauf.loadMore": "Mehr laden",
+    // SmartTimeline (t-paliad-171, Slice 1).
+    "projects.detail.smarttimeline.empty": "Noch keine Ereignisse erfasst.",
+    "projects.detail.smarttimeline.today": "Heute",
+    "projects.detail.smarttimeline.section.past": "Vergangenheit",
+    "projects.detail.smarttimeline.section.future": "Zukunft",
+    "projects.detail.smarttimeline.section.undated": "Ohne Datum",
+    "projects.detail.smarttimeline.kind.deadline": "Frist",
+    "projects.detail.smarttimeline.kind.appointment": "Termin",
+    "projects.detail.smarttimeline.kind.milestone": "Meilenstein",
+    "projects.detail.smarttimeline.kind.projected": "Vorhersage",
+    "projects.detail.smarttimeline.status.done": "Erledigt",
+    "projects.detail.smarttimeline.status.open": "Offen",
+    "projects.detail.smarttimeline.status.overdue": "Überfällig",
+    "projects.detail.smarttimeline.status.court_set": "Datum vom Gericht",
+    "projects.detail.smarttimeline.status.predicted": "Voraussichtlich",
+    "projects.detail.smarttimeline.status.off_script": "Eigener Eintrag",
+    "projects.detail.smarttimeline.audit.toggle.show": "Audit-Log anzeigen",
+    "projects.detail.smarttimeline.audit.toggle.hide": "Nur Timeline-Einträge",
+    "projects.detail.smarttimeline.add.cta": "+ Eintrag",
+    "projects.detail.smarttimeline.add.modal.title": "Neuer Eintrag im SmartTimeline",
+    "projects.detail.smarttimeline.add.choice.deadline": "Frist anlegen",
+    "projects.detail.smarttimeline.add.choice.appointment": "Termin anlegen",
+    "projects.detail.smarttimeline.add.choice.counterclaim": "Widerklage (CCR)",
+    "projects.detail.smarttimeline.add.choice.amend": "Antrag auf Änderung (R.30)",
+    "projects.detail.smarttimeline.add.choice.milestone": "Eigener Meilenstein",
+    "projects.detail.smarttimeline.add.choice.disabled": "Kommt mit Slice 3",
+    "projects.detail.smarttimeline.add.cancel": "Abbrechen",
+    "projects.detail.smarttimeline.add.submit": "Speichern",
+    "projects.detail.smarttimeline.milestone.title": "Titel",
+    "projects.detail.smarttimeline.milestone.date": "Datum (optional)",
+    "projects.detail.smarttimeline.milestone.description": "Beschreibung (optional)",
+    "projects.detail.smarttimeline.error.title_required": "Bitte einen Titel angeben.",
+    "projects.detail.smarttimeline.error.generic": "Konnte den Eintrag nicht speichern.",
     "projects.detail.team.form.user": "Benutzer",
     "projects.detail.team.form.role": "Rolle",
     "projects.detail.team.form.responsibility": "Rolle im Projekt",
@@ -3367,6 +3400,38 @@ const translations: Record<Lang, Record<string, string>> = {
     "projects.detail.tab.checklisten": "Checklists",
     "projects.detail.verlauf.empty": "No events recorded yet.",
     "projects.detail.verlauf.loadMore": "Load more",
+    "projects.detail.smarttimeline.empty": "No events captured yet.",
+    "projects.detail.smarttimeline.today": "Today",
+    "projects.detail.smarttimeline.section.past": "Past",
+    "projects.detail.smarttimeline.section.future": "Future",
+    "projects.detail.smarttimeline.section.undated": "Undated",
+    "projects.detail.smarttimeline.kind.deadline": "Deadline",
+    "projects.detail.smarttimeline.kind.appointment": "Appointment",
+    "projects.detail.smarttimeline.kind.milestone": "Milestone",
+    "projects.detail.smarttimeline.kind.projected": "Predicted",
+    "projects.detail.smarttimeline.status.done": "Done",
+    "projects.detail.smarttimeline.status.open": "Open",
+    "projects.detail.smarttimeline.status.overdue": "Overdue",
+    "projects.detail.smarttimeline.status.court_set": "Court-set date",
+    "projects.detail.smarttimeline.status.predicted": "Predicted",
+    "projects.detail.smarttimeline.status.off_script": "Custom",
+    "projects.detail.smarttimeline.audit.toggle.show": "Show audit log",
+    "projects.detail.smarttimeline.audit.toggle.hide": "Timeline only",
+    "projects.detail.smarttimeline.add.cta": "+ Entry",
+    "projects.detail.smarttimeline.add.modal.title": "New SmartTimeline entry",
+    "projects.detail.smarttimeline.add.choice.deadline": "Add a deadline",
+    "projects.detail.smarttimeline.add.choice.appointment": "Add an appointment",
+    "projects.detail.smarttimeline.add.choice.counterclaim": "Counterclaim (CCR)",
+    "projects.detail.smarttimeline.add.choice.amend": "Application to amend (R.30)",
+    "projects.detail.smarttimeline.add.choice.milestone": "Custom milestone",
+    "projects.detail.smarttimeline.add.choice.disabled": "Coming in Slice 3",
+    "projects.detail.smarttimeline.add.cancel": "Cancel",
+    "projects.detail.smarttimeline.add.submit": "Save",
+    "projects.detail.smarttimeline.milestone.title": "Title",
+    "projects.detail.smarttimeline.milestone.date": "Date (optional)",
+    "projects.detail.smarttimeline.milestone.description": "Description (optional)",
+    "projects.detail.smarttimeline.error.title_required": "Please enter a title.",
+    "projects.detail.smarttimeline.error.generic": "Could not save the entry.",
     "projects.detail.team.form.user": "User",
     "projects.detail.team.form.role": "Role",
     "projects.detail.team.form.responsibility": "Project role",
diff --git a/frontend/src/client/views/shape-timeline.ts b/frontend/src/client/views/shape-timeline.ts
new file mode 100644
index 0000000..e0fc952
--- /dev/null
+++ b/frontend/src/client/views/shape-timeline.ts
@@ -0,0 +1,300 @@
+import { t, tDyn, getLang } from "../i18n";
+
+// shape-timeline (t-paliad-171) — vertical timeline render for the
+// SmartTimeline. Two-column layout (date / event card), "Heute →" rule
+// separating past from future, status icon + kind chip per row, deep
+// link on actuals via a row-level click handler (NOT a ::before
+// overlay — text-selection must stay intact, see project CLAUDE.md
+// "Whole-card click → use a JS row handler").
+//
+// This file is intentionally self-contained — it does not extend the
+// FilterBar's `ViewRow` shape. The SmartTimeline's wire shape
+// (TimelineEvent) is the contract from /api/projects/{id}/timeline,
+// frozen across slices so Slice 2 just adds Kind="projected" rows
+// without breaking the renderer here.
+//
+// Design ref: docs/design-smart-timeline-2026-05-08.md §3.
+
+export interface TimelineEvent {
+  kind: "deadline" | "appointment" | "milestone" | "projected";
+  status: "done" | "open" | "overdue" | "court_set" | "predicted" | "off_script";
+  track: string;
+  date?: string | null;
+  title: string;
+  description?: string;
+  rule_code?: string;
+
+  deadline_id?: string;
+  appointment_id?: string;
+  project_event_id?: string;
+
+  deadline_rule_id?: string;
+  deadline_rule_party?: string;
+
+  sub_project_id?: string;
+  sub_project_title?: string;
+}
+
+interface RenderOptions {
+  // Today's date as ISO YYYY-MM-DD; defaults to "now in browser TZ".
+  // Passed in for testability; not used at runtime.
+  today?: string;
+}
+
+export function renderSmartTimeline(
+  host: HTMLElement,
+  rows: TimelineEvent[],
+  opts: RenderOptions = {},
+): void {
+  host.innerHTML = "";
+  host.classList.add("smart-timeline");
+
+  if (rows.length === 0) {
+    const empty = document.createElement("div");
+    empty.className = "smart-timeline-empty";
+    empty.textContent = t("projects.detail.smarttimeline.empty");
+    host.appendChild(empty);
+    return;
+  }
+
+  const todayISO = opts.today ?? todayLocalISO();
+  // Split into past, today, future. Undated rows live at the bottom of
+  // the past block (we render past on top, future below — but the design
+  // calls for past first, future after — see §3.2 mockup which puts the
+  // future ABOVE the "Heute →" rule with reverse-chronology... actually
+  // re-reading: "Past goes below (most-recent first), future above
+  // (chronological)". For Slice 1 simplicity we render chronologically:
+  // past oldest→newest, then "Heute →", then future newest→furthest.
+  // This is the calmer reading order; we can flip on m's review.
+  const past: TimelineEvent[] = [];
+  const todays: TimelineEvent[] = [];
+  const future: TimelineEvent[] = [];
+  const undated: TimelineEvent[] = [];
+  for (const r of rows) {
+    const iso = dateOnlyISO(r.date);
+    if (!iso) {
+      undated.push(r);
+      continue;
+    }
+    if (iso < todayISO) past.push(r);
+    else if (iso === todayISO) todays.push(r);
+    else future.push(r);
+  }
+  past.sort(byDateAsc);
+  todays.sort(byDateAsc);
+  future.sort(byDateAsc);
+
+  const wrap = document.createElement("div");
+  wrap.className = "smart-timeline-flow";
+
+  if (past.length > 0) {
+    const section = document.createElement("section");
+    section.className = "smart-timeline-section smart-timeline-section--past";
+    const heading = document.createElement("h3");
+    heading.className = "smart-timeline-heading";
+    heading.textContent = t("projects.detail.smarttimeline.section.past");
+    section.appendChild(heading);
+    for (const ev of past) section.appendChild(renderRow(ev));
+    wrap.appendChild(section);
+  }
+
+  // "Heute →" rule. Always present so the user has a temporal anchor
+  // even when one zone is empty.
+  const todayRule = document.createElement("div");
+  todayRule.className = "smart-timeline-today-rule";
+  const todayLabel = document.createElement("span");
+  todayLabel.className = "smart-timeline-today-label";
+  todayLabel.textContent = `${t("projects.detail.smarttimeline.today")} (${formatDateOnly(todayISO)})`;
+  todayRule.appendChild(todayLabel);
+  wrap.appendChild(todayRule);
+
+  if (todays.length > 0) {
+    const section = document.createElement("section");
+    section.className = "smart-timeline-section smart-timeline-section--today";
+    for (const ev of todays) section.appendChild(renderRow(ev));
+    wrap.appendChild(section);
+  }
+
+  if (future.length > 0) {
+    const section = document.createElement("section");
+    section.className = "smart-timeline-section smart-timeline-section--future";
+    const heading = document.createElement("h3");
+    heading.className = "smart-timeline-heading";
+    heading.textContent = t("projects.detail.smarttimeline.section.future");
+    section.appendChild(heading);
+    for (const ev of future) section.appendChild(renderRow(ev));
+    wrap.appendChild(section);
+  }
+
+  if (undated.length > 0) {
+    const section = document.createElement("section");
+    section.className = "smart-timeline-section smart-timeline-section--undated";
+    const heading = document.createElement("h3");
+    heading.className = "smart-timeline-heading";
+    heading.textContent = t("projects.detail.smarttimeline.section.undated");
+    section.appendChild(heading);
+    for (const ev of undated) section.appendChild(renderRow(ev));
+    wrap.appendChild(section);
+  }
+
+  host.appendChild(wrap);
+}
+
+function renderRow(ev: TimelineEvent): HTMLElement {
+  const li = document.createElement("article");
+  li.className =
+    `smart-timeline-row smart-timeline-row--${ev.kind} ` +
+    `smart-timeline-row--${ev.status}`;
+
+  // Left: date column. "—" placeholder for undated rows so the
+  // two-column grid stays aligned across the whole timeline.
+  const dateCol = document.createElement("div");
+  dateCol.className = "smart-timeline-date";
+  dateCol.textContent = ev.date ? formatDateOnly(dateOnlyISO(ev.date) ?? "") : "—";
+  li.appendChild(dateCol);
+
+  // Right: event card.
+  const body = document.createElement("div");
+  body.className = "smart-timeline-body";
+
+  const head = document.createElement("div");
+  head.className = "smart-timeline-row-head";
+
+  const icon = document.createElement("span");
+  icon.className = "smart-timeline-status-icon";
+  icon.textContent = statusGlyph(ev.status);
+  icon.setAttribute("aria-label", t(statusKey(ev.status)));
+  head.appendChild(icon);
+
+  const titleEl = document.createElement("span");
+  titleEl.className = "smart-timeline-title";
+  const href = deepLinkHref(ev);
+  if (href) {
+    const a = document.createElement("a");
+    a.className = "smart-timeline-link";
+    a.href = href;
+    a.textContent = ev.title;
+    titleEl.appendChild(a);
+  } else {
+    titleEl.textContent = ev.title;
+  }
+  head.appendChild(titleEl);
+
+  const kindChip = document.createElement("span");
+  kindChip.className = `smart-timeline-kind-chip smart-timeline-kind-chip--${ev.kind}`;
+  kindChip.textContent = t(kindKey(ev.kind));
+  head.appendChild(kindChip);
+
+  if (ev.rule_code) {
+    const ruleChip = document.createElement("span");
+    ruleChip.className = "smart-timeline-rule-chip";
+    ruleChip.textContent = ev.rule_code;
+    head.appendChild(ruleChip);
+  }
+
+  body.appendChild(head);
+
+  if (ev.description) {
+    const desc = document.createElement("div");
+    desc.className = "smart-timeline-desc";
+    desc.textContent = ev.description;
+    body.appendChild(desc);
+  }
+
+  li.appendChild(body);
+
+  // Row-level navigation — same pattern as .entity-event (t-paliad-103).
+  // Skips clicks on inner <a>/<button> so the title link, Cmd-click,
+  // and any future inline action buttons stay working; text selection
+  // is unaffected because we use a click handler, not an overlay.
+  if (href) {
+    li.classList.add("smart-timeline-row--clickable");
+    li.addEventListener("click", (e) => {
+      const target = e.target as HTMLElement;
+      if (target.closest("a") || target.closest("button")) return;
+      window.location.href = href;
+    });
+  }
+
+  return li;
+}
+
+function deepLinkHref(ev: TimelineEvent): string | null {
+  if (ev.kind === "deadline" && ev.deadline_id) {
+    return `/deadlines/${ev.deadline_id}`;
+  }
+  if (ev.kind === "appointment" && ev.appointment_id) {
+    return `/appointments/${ev.appointment_id}`;
+  }
+  // Project events have no detail page today; the row stays
+  // non-clickable. Slice 2 lights up projected rows with a
+  // click-to-anchor inline editor instead of a navigation.
+  return null;
+}
+
+function statusGlyph(status: TimelineEvent["status"]): string {
+  switch (status) {
+    case "done":       return "✓";
+    case "open":       return "…";
+    case "overdue":    return "!";
+    case "court_set":  return "▢";
+    case "predicted":  return "░";
+    case "off_script": return "⊕";
+    default:           return "·";
+  }
+}
+
+function statusKey(status: TimelineEvent["status"]) {
+  return `projects.detail.smarttimeline.status.${status}` as const;
+}
+
+function kindKey(kind: TimelineEvent["kind"]) {
+  return `projects.detail.smarttimeline.kind.${kind}` as const;
+}
+
+function dateOnlyISO(raw: string | null | undefined): string | null {
+  if (!raw) return null;
+  // Accept both YYYY-MM-DD and full ISO timestamps; in either case
+  // collapse to the date-only slug for grouping.
+  if (/^\d{4}-\d{2}-\d{2}$/.test(raw)) return raw;
+  const d = new Date(raw);
+  if (isNaN(d.getTime())) return null;
+  const y = d.getFullYear();
+  const m = String(d.getMonth() + 1).padStart(2, "0");
+  const day = String(d.getDate()).padStart(2, "0");
+  return `${y}-${m}-${day}`;
+}
+
+function todayLocalISO(): string {
+  const d = new Date();
+  const y = d.getFullYear();
+  const m = String(d.getMonth() + 1).padStart(2, "0");
+  const day = String(d.getDate()).padStart(2, "0");
+  return `${y}-${m}-${day}`;
+}
+
+function byDateAsc(a: TimelineEvent, b: TimelineEvent): number {
+  const ai = dateOnlyISO(a.date) ?? "";
+  const bi = dateOnlyISO(b.date) ?? "";
+  if (ai === bi) return a.title.localeCompare(b.title);
+  return ai < bi ? -1 : 1;
+}
+
+function formatDateOnly(iso: string): string {
+  if (!iso) return "—";
+  // Build a Date from an ISO date-slug at midnight local time so the
+  // formatter doesn't off-by-one on TZs west of UTC.
+  const parts = iso.split("-");
+  if (parts.length !== 3) return iso;
+  const d = new Date(Number(parts[0]), Number(parts[1]) - 1, Number(parts[2]));
+  if (isNaN(d.getTime())) return iso;
+  return d.toLocaleDateString(getLang() === "de" ? "de-DE" : "en-GB", {
+    year: "numeric",
+    month: "2-digit",
+    day: "2-digit",
+  });
+}
+
+// Suppress unused warning — exported for future axes that may want to
+// translate per-track labels (counterclaim / child:<id>) dynamically.
+void tDyn;
diff --git a/frontend/src/i18n-keys.ts b/frontend/src/i18n-keys.ts
index bfdb739..d8a8efb 100644
--- a/frontend/src/i18n-keys.ts
+++ b/frontend/src/i18n-keys.ts
@@ -1695,6 +1695,38 @@ export type I18nKey =
   | "projects.detail.parteien.role.defendant"
   | "projects.detail.parteien.role.thirdparty"
   | "projects.detail.save"
+  | "projects.detail.smarttimeline.add.cancel"
+  | "projects.detail.smarttimeline.add.choice.amend"
+  | "projects.detail.smarttimeline.add.choice.appointment"
+  | "projects.detail.smarttimeline.add.choice.counterclaim"
+  | "projects.detail.smarttimeline.add.choice.deadline"
+  | "projects.detail.smarttimeline.add.choice.disabled"
+  | "projects.detail.smarttimeline.add.choice.milestone"
+  | "projects.detail.smarttimeline.add.cta"
+  | "projects.detail.smarttimeline.add.modal.title"
+  | "projects.detail.smarttimeline.add.submit"
+  | "projects.detail.smarttimeline.audit.toggle.hide"
+  | "projects.detail.smarttimeline.audit.toggle.show"
+  | "projects.detail.smarttimeline.empty"
+  | "projects.detail.smarttimeline.error.generic"
+  | "projects.detail.smarttimeline.error.title_required"
+  | "projects.detail.smarttimeline.kind.appointment"
+  | "projects.detail.smarttimeline.kind.deadline"
+  | "projects.detail.smarttimeline.kind.milestone"
+  | "projects.detail.smarttimeline.kind.projected"
+  | "projects.detail.smarttimeline.milestone.date"
+  | "projects.detail.smarttimeline.milestone.description"
+  | "projects.detail.smarttimeline.milestone.title"
+  | "projects.detail.smarttimeline.section.future"
+  | "projects.detail.smarttimeline.section.past"
+  | "projects.detail.smarttimeline.section.undated"
+  | "projects.detail.smarttimeline.status.court_set"
+  | "projects.detail.smarttimeline.status.done"
+  | "projects.detail.smarttimeline.status.off_script"
+  | "projects.detail.smarttimeline.status.open"
+  | "projects.detail.smarttimeline.status.overdue"
+  | "projects.detail.smarttimeline.status.predicted"
+  | "projects.detail.smarttimeline.today"
   | "projects.detail.tab.checklisten"
   | "projects.detail.tab.fristen"
   | "projects.detail.tab.kinder"
diff --git a/frontend/src/styles/global.css b/frontend/src/styles/global.css
index b7aa1a6..d5673b0 100644
--- a/frontend/src/styles/global.css
+++ b/frontend/src/styles/global.css
@@ -13451,3 +13451,305 @@ dialog.quick-add-sheet::backdrop {
     gap: 0.5rem;
     margin-top: 0.5rem;
 }
+
+/* ========================================================================
+   SmartTimeline (t-paliad-171, Slice 1).
+   Vertical two-column timeline replacing the legacy <ul.entity-events>
+   on the Verlauf tab. Past chronological → "Heute →" rule → Future
+   chronological. Status icon + kind chip per row, deep-link via a
+   row-level click handler on .smart-timeline-row--clickable (NOT a
+   ::before overlay — text selection must stay intact, project CLAUDE.md
+   "Whole-card click → use a JS row handler").
+   ======================================================================== */
+
+.smart-timeline-controls {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 0.5rem;
+    align-items: center;
+    margin-bottom: 1rem;
+}
+
+.smart-timeline-controls #smart-timeline-add-btn {
+    margin-left: auto;
+}
+
+.smart-timeline {
+    display: block;
+}
+
+.smart-timeline-empty {
+    text-align: center;
+    padding: 2rem 1rem;
+    color: var(--color-text-muted);
+    font-size: 0.9rem;
+}
+
+.smart-timeline-flow {
+    display: flex;
+    flex-direction: column;
+    gap: 1.25rem;
+}
+
+.smart-timeline-section {
+    display: flex;
+    flex-direction: column;
+    gap: 0.6rem;
+}
+
+.smart-timeline-heading {
+    font-size: 0.78rem;
+    text-transform: uppercase;
+    letter-spacing: 0.06em;
+    color: var(--color-text-muted);
+    margin: 0 0 0.25rem;
+    font-weight: 600;
+}
+
+/* "Heute →" horizontal rule. Anchors past vs future visually even when
+   one side is empty, so the user always has a temporal reference. */
+.smart-timeline-today-rule {
+    display: flex;
+    align-items: center;
+    gap: 0.6rem;
+    color: var(--color-accent-fg);
+    font-size: 0.78rem;
+    font-weight: 600;
+    text-transform: uppercase;
+    letter-spacing: 0.06em;
+    margin: 0.25rem 0;
+}
+
+.smart-timeline-today-rule::before,
+.smart-timeline-today-rule::after {
+    content: "";
+    flex: 1;
+    height: 0;
+    border-top: 2px solid var(--hlc-lime, var(--color-accent-fg));
+    border-radius: 1px;
+}
+
+.smart-timeline-today-label {
+    flex: 0 0 auto;
+    padding: 0 0.4rem;
+}
+
+.smart-timeline-row {
+    display: grid;
+    grid-template-columns: 130px 1fr;
+    gap: 1rem;
+    padding: 0.65rem 0.9rem;
+    border: 1px solid var(--color-border);
+    border-radius: var(--radius);
+    background: var(--color-surface);
+    box-shadow: var(--shadow);
+    align-items: start;
+}
+
+@media (max-width: 640px) {
+    .smart-timeline-row {
+        grid-template-columns: 1fr;
+    }
+}
+
+.smart-timeline-row--clickable {
+    cursor: pointer;
+    transition: border-color 0.12s ease, box-shadow 0.12s ease;
+}
+
+.smart-timeline-row--clickable:hover {
+    border-color: var(--color-accent-fg);
+    box-shadow: var(--shadow-hover, var(--shadow));
+}
+
+.smart-timeline-date {
+    font-size: 0.8rem;
+    color: var(--color-text-muted);
+    font-family: var(--font-mono);
+    padding-top: 0.15rem;
+}
+
+.smart-timeline-body {
+    display: flex;
+    flex-direction: column;
+    gap: 0.25rem;
+    min-width: 0;
+}
+
+.smart-timeline-row-head {
+    display: flex;
+    flex-wrap: wrap;
+    align-items: center;
+    gap: 0.5rem;
+}
+
+.smart-timeline-status-icon {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    width: 1.4rem;
+    height: 1.4rem;
+    border-radius: 50%;
+    background: var(--color-surface-alt, #f4f4f4);
+    color: var(--color-text-muted);
+    font-size: 0.85rem;
+    font-weight: 600;
+    flex: 0 0 auto;
+}
+
+.smart-timeline-row--done .smart-timeline-status-icon {
+    background: var(--hlc-lime, #c6f41c);
+    color: #1a1a1a;
+}
+
+.smart-timeline-row--overdue .smart-timeline-status-icon {
+    background: #f8d7da;
+    color: #842029;
+}
+
+.smart-timeline-row--off_script .smart-timeline-status-icon {
+    background: #fff3cd;
+    color: #664d03;
+}
+
+.smart-timeline-row--court_set .smart-timeline-status-icon {
+    background: transparent;
+    border: 1px dashed var(--color-text-muted);
+}
+
+.smart-timeline-title {
+    font-weight: 600;
+    font-size: 0.92rem;
+    flex: 1 1 auto;
+    min-width: 0;
+}
+
+.smart-timeline-link {
+    color: inherit;
+    text-decoration: none;
+}
+
+.smart-timeline-link:hover {
+    color: var(--color-accent-fg);
+    text-decoration: underline;
+}
+
+.smart-timeline-link:focus-visible {
+    outline: none;
+}
+
+.smart-timeline-kind-chip,
+.smart-timeline-rule-chip {
+    flex: 0 0 auto;
+    font-size: 0.72rem;
+    padding: 0.1rem 0.45rem;
+    border-radius: 999px;
+    background: var(--color-surface-alt, #f4f4f4);
+    color: var(--color-text-muted);
+    font-weight: 500;
+    letter-spacing: 0.02em;
+}
+
+.smart-timeline-kind-chip--deadline {
+    background: #e0ecff;
+    color: #1a4a8a;
+}
+
+.smart-timeline-kind-chip--appointment {
+    background: #e7f5ee;
+    color: #2c6b46;
+}
+
+.smart-timeline-kind-chip--milestone {
+    background: #fdecd2;
+    color: #7a4f15;
+}
+
+.smart-timeline-kind-chip--projected {
+    background: var(--color-surface-alt, #f4f4f4);
+    color: var(--color-text-muted);
+    font-style: italic;
+}
+
+.smart-timeline-rule-chip {
+    font-family: var(--font-mono);
+}
+
+.smart-timeline-desc {
+    font-size: 0.85rem;
+    color: var(--color-text-muted);
+    margin-top: 0.2rem;
+}
+
+/* Modal — minimal scrim + centred card. The new-entry CTA opens this;
+   "Eigener Meilenstein" expands the form inline, every other choice
+   is a plain link / disabled button. */
+.smart-timeline-modal {
+    position: fixed;
+    inset: 0;
+    background: rgba(0, 0, 0, 0.45);
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    z-index: 1000;
+    padding: 1rem;
+}
+
+.smart-timeline-modal-card {
+    background: var(--color-surface);
+    border-radius: var(--radius);
+    padding: 1.5rem;
+    max-width: 480px;
+    width: 100%;
+    max-height: 90vh;
+    overflow-y: auto;
+    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.18);
+}
+
+.smart-timeline-modal-card h3 {
+    margin: 0 0 1rem;
+    font-size: 1.1rem;
+}
+
+.smart-timeline-add-choices {
+    display: flex;
+    flex-direction: column;
+    gap: 0.5rem;
+    margin-bottom: 1rem;
+}
+
+.smart-timeline-add-choice {
+    display: block;
+    text-align: left;
+    padding: 0.6rem 0.9rem;
+    border: 1px solid var(--color-border);
+    border-radius: var(--radius);
+    background: var(--color-surface);
+    color: inherit;
+    text-decoration: none;
+    font-size: 0.9rem;
+    cursor: pointer;
+}
+
+.smart-timeline-add-choice:hover:not(:disabled) {
+    border-color: var(--color-accent-fg);
+    background: var(--color-surface-alt, #fafafa);
+}
+
+.smart-timeline-add-choice--primary {
+    border-color: var(--hlc-lime, var(--color-accent-fg));
+    font-weight: 600;
+}
+
+.smart-timeline-add-choice--disabled,
+.smart-timeline-add-choice:disabled {
+    opacity: 0.55;
+    cursor: not-allowed;
+}
+
+.smart-timeline-modal-close-row {
+    display: flex;
+    justify-content: flex-end;
+    margin-top: 0.5rem;
+}
+