Auftragsbestaetigung: Liste mit Status, Zusatzzeilen, Aktionen und Projekt zuordnen

Co-Authored-By: Claude Sonnet 5.5 <noreply@anthropic.com>

src/components/auftraege/auftrag.css

@@ -0,0 +1,35 @@
+/* Auftragsbestaetigungen (W2): Liste, Dialog-Schritte, Vorschau. Nur Tokens, alle Klassen beginnen mit auftrag-.
+   Die Datei wird von der Komponente geladen, global.css kommt danach: darum nie eine globale Klasse ueberschreiben. */
+
+/* Liste */
+.auftrag-body { container-type: inline-size; }
+.auftrag-notice { margin: 0 0 8px; }
+.auftrag-table-wrap { overflow-x: auto; }
+.auftrag-sr { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
+.auftrag-nummer { white-space: nowrap; }
+.auftrag-titel { overflow-wrap: anywhere; }
+.auftrag-table th.auftrag-amount { text-align: right; }
+.auftrag-amount { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
+.auftrag-note { margin-top: 2px; font-size: 13px; overflow-wrap: anywhere; }
+.auftrag-actions { display: flex; flex-wrap: wrap; gap: 4px 14px; }
+.auftrag-zuordnen { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin-top: 8px; }
+.auftrag-zuordnen .select { flex: 1 1 180px; min-width: 0; max-width: 100%; }
+.auftrag-liste button.link:disabled, .auftrag-liste button.link-danger:disabled { cursor: not-allowed; }
+
+@container (max-width: 860px) {
+  .auftrag-table thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
+  .auftrag-table, .auftrag-table tbody { display: block; }
+  .auftrag-table tr {
+    display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 4px 16px; align-items: baseline;
+    grid-template-areas: "nummer status" "titel titel" "datum summe" "aktionen aktionen";
+    padding: 10px 0; border-bottom: 1px solid var(--line);
+  }
+  .auftrag-table td, .auftrag-table td:first-child, .auftrag-table td:last-child { display: block; padding: 0; border: 0; min-width: 0; }
+  .auftrag-nummer { grid-area: nummer; }
+  .auftrag-status { grid-area: status; text-align: right; }
+  .auftrag-titel { grid-area: titel; }
+  .auftrag-datum { grid-area: datum; }
+  .auftrag-table td.auftrag-amount { grid-area: summe; }
+  .auftrag-aktionen { grid-area: aktionen; padding-top: 4px; }
+  .auftrag-table td[data-label]::before { content: attr(data-label) " "; color: var(--text-2); font-weight: 500; }
+}