diff --git a/src/styles/global.css b/src/styles/global.css
index df36735..f93dde9 100644
--- a/src/styles/global.css
+++ b/src/styles/global.css
@@ -500,11 +500,6 @@ a.list-row:hover .cell-title { color: var(--accent-ink); }
 
 .hidden { display: none; }
 
-.ticket-projects { margin-top: 16px; }
-/* Zeile unter der Projektliste: Projekt waehlen + Zuweisen + Neues Projekt */
-.ticket-projects-assign { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
-.ticket-projects-assign .form-control { flex: 1 1 220px; margin: 0; }
-
 @keyframes spin {
   from { transform: rotate(0deg); }
   to { transform: rotate(360deg); }
@@ -1112,6 +1107,77 @@ button.link { font-weight: 500; } /* font: inherit setzt sonst das Gewicht von .
 }
 /* ===== ENDE Kunden (P4) ===== */
 
+/* ===== Projekte (P5) ===== */
+/* Projektliste als Tabelle, Dialog-Inhalte, Preview-Block, Projektzeile am Ticket und beim Kunden, Zuordnen-Assistent. Steht direkt vor */
+/* KOMPAT: gewinnt ueber die Bausteinregeln oberhalb durch die Reihenfolge, nie durch eine Erzwingung. */
+button.link { text-align: left; } /* Reset und Gewicht von button.link stehen im Block Tickets (P2) */
+
+/* ---------- Projektliste (Tabelle) ---------- */
+.projects-table td:first-child { min-width: 140px; }
+.projects-table th, .projects-table td { padding-right: 8px; }
+.projects-table th:last-child, .projects-table td:last-child { padding-right: 0; }
+.projects-table .cell-title .link, .projects-table .cell-sub { overflow-wrap: anywhere; }
+.projects-table .select { width: clamp(104px, 10vw, 180px); max-width: 100%; }
+.projects-table td.cell-address code { display: block; max-width: 84px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 12px; }
+.projects-table td.cell-updated { min-width: 70px; }
+.projects-table tr.is-archived td { opacity: .72; }
+.row-actions { display: flex; flex-wrap: wrap; gap: 4px 14px; font-size: 13px; }
+.row-actions .link { white-space: nowrap; }
+.projects-table .row-actions { justify-content: flex-end; }
+/* Unter 860 px steht jede Zeile als zweispaltiges Raster: Projekt ueber beide Spalten, Kunde und Status nebeneinander, Aktionen darunter. */
+/* Rollen (table, row, cell) stehen im JSX, damit die Tabellensemantik beim Stapeln erhalten bleibt. */
+@media (max-width: 860px) {
+  .projects-table, .projects-table tbody, .projects-table td { display: block; }
+  .projects-table thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; } /* nur fuer Screenreader */
+  .projects-table tbody tr { display: grid; grid-template-columns: 1fr 1fr; gap: 8px 12px; padding: 14px 0; border-bottom: 1px solid var(--line); }
+  .projects-table td { padding: 0; border: 0; }
+  .projects-table td:first-child, .projects-table td.cell-actions { grid-column: 1 / -1; }
+  .projects-table td[data-label]::before { content: attr(data-label); display: block; font-size: 12px; color: var(--text-2); }
+  .projects-table .select { width: 100%; }
+  .projects-table .row-actions { justify-content: flex-start; }
+  .projects-table tr.row:hover td, .projects-table tr.row:hover td:first-child, .projects-table tr.row:hover td:last-child { background: none; box-shadow: none; }
+  /* (0,2,1) schlaegt .hide-sm (0,1,0) und .projects-table td { display: block } (0,1,1) ueber die Spezifitaet, ohne Erzwingung */
+  .projects-table td.hide-sm, .projects-table td.hide-md { display: none; }
+}
+.badge.wrap { white-space: normal; height: auto; min-height: 20px; padding-top: 2px; padding-bottom: 2px; overflow-wrap: anywhere; }
+
+/* ---------- Dialog-Inhalte ---------- */
+.dialog-form { display: flex; flex-direction: column; gap: 16px; }
+
+/* ---------- Preview-Block (im Projekt-Dialog, am Ticket und beim Kunden) ---------- */
+.pv-block { font-size: 13px; display: flex; flex-direction: column; gap: 10px; }
+.pv-row, .pv-add, .pv-var { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
+.pv-var { padding-bottom: 8px; border-bottom: 1px solid var(--line); }
+.pv-mode { width: 200px; max-width: 100%; }
+.pv-title { font-size: 13px; font-weight: 600; }
+.pv-log { background: var(--bg-subtle); max-height: 260px; overflow: auto; white-space: pre-wrap; word-break: break-all; padding: 8px; border-radius: var(--radius); font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 11px; line-height: 16px; }
+.pv-var code, .pv-var .input, .pv-add .input { flex: 1 1 140px; min-width: 0; }
+.pv-var code { overflow-wrap: anywhere; }
+
+/* ---------- Projektzeile am Ticket und beim Kunden ---------- */
+/* Spalte mit Abstand statt Aussenabstaenden an den Kindern: ein offener Dialog (fest, ausserhalb des Flusses) bekaeme sonst einen Versatz */
+.proj-item { padding: 16px 0; border-bottom: 1px solid var(--line); display: flex; flex-direction: column; gap: 8px; }
+.proj-item > button.link { align-self: flex-start; } /* sonst waere der ganze Streifen klickbar */
+.proj-head { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px 16px; }
+.proj-main { min-width: 0; overflow-wrap: anywhere; }
+.proj-meta { display: flex; flex-wrap: wrap; gap: 4px 16px; font-size: 12px; color: var(--text-2); }
+.ticket-projects-assign { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 12px; }
+.ticket-projects-assign .select { flex: 1 1 220px; min-width: 0; }
+.ticket-projects-assign .input { flex: 1 1 160px; min-width: 0; }
+
+/* ---------- Zuordnen-Assistent ---------- */
+.seg.wrap { flex-wrap: wrap; }
+.row-buttons { display: flex; flex-wrap: wrap; gap: 8px; }
+.check.top { align-items: flex-start; }
+.pick-list { max-height: 360px; overflow-y: auto; }
+.pick-empty { padding: 12px 0; }
+button.list-row { width: 100%; text-align: left; background: none; border: 0; border-bottom: 1px solid var(--line); font: inherit; color: inherit; cursor: pointer; }
+button.list-row:hover, button.list-row[aria-pressed="true"] { background: var(--bg-hover); }
+button.list-row .cell-sub { display: block; }
+button.list-row:focus-visible { outline-offset: -2px; } /* in .pick-list (Scroll-Container) wuerde der Ring sonst abgeschnitten */
+.summary { list-style: none; display: flex; flex-direction: column; gap: 6px; }
+/* ===== ENDE Projekte (P5) ===== */
+
 /* ===== KOMPAT (bis P10) ===== */
 /* Uebergangsschicht: alte Klassen im neuen Look, damit Seiten und Dialoge, die noch nicht umgebaut sind, weiss, kastenlos */
 /* und lesbar bleiben. Steht am Dateiende und gewinnt dort gegen die Altregeln und gegen die anderen Stylesheets (global.css */