Replace horizontal-scroll table with a stacked card layout on mobile

Materialliste war auf schmalen Screens nur per Seitwärts-Scrollen lesbar.
Ab 680px Breite wird jede Zeile jetzt als Karte dargestellt (CSS Grid mit
benannten Areas, Bezeichnung prominent oben, Menge/Einheit/Art.-Nr./Notiz
darunter beschriftet, Position + Löschen-Button in der Kopfzeile der Karte).
Die Grid-Areas ordnen die Felder unabhängig von der DOM-Reihenfolge um, die
Desktop-Tabelle bleibt unverändert in der ursprünglichen Spaltenreihenfolge.

Temporärer test-build-only.yml Workflow zur Verifikation ohne Registry-Push.

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

client/src/pages/ProjektDetail.tsx

@@ -355,22 +355,22 @@ export default function ProjektDetail() {
               <tbody>
                 {matList.map((r, i) => (
                   <tr key={r.id} className={selected.has(r.id) ? 'row-selected' : undefined}>
-                    <td className="chk-col">
+                    <td className="chk-col td-chk">
                       <input type="checkbox" className="row-check" checked={selected.has(r.id)} onChange={e => toggleRowSelect(r.id, e.target.checked)} />
                     </td>
-                    <td className="pos-nr">{i + 1}</td>
-                    <td>
+                    <td className="pos-nr td-pos" data-label="Pos.">{i + 1}</td>
+                    <td className="td-menge" data-label="Menge">
                       <input key={r.menge} className="qty-input" type="number" inputMode="decimal" min={0} step={0.1} defaultValue={r.menge} onBlur={e => updateMenge(r, e.target.value)} />
                       <span className="print-only">{fmt1(r.menge)}</span>
                     </td>
-                    <td>{r.einheit}</td>
-                    <td className="art-cell">{r.artNr || '—'}</td>
-                    <td>{r.bezeichnung}</td>
-                    <td>
+                    <td className="td-einh" data-label="Einheit">{r.einheit}</td>
+                    <td className="art-cell td-art" data-label="Art.-Nr.">{r.artNr || '—'}</td>
+                    <td className="td-bez">{r.bezeichnung}</td>
+                    <td className="td-notiz" data-label="Notiz">
                       <input key={r.notiz ?? ''} className="notiz-input" type="text" placeholder="…" defaultValue={r.notiz ?? ''} onBlur={e => updateNotiz(r, e.target.value)} />
                       <span className="print-only">{r.notiz}</span>
                     </td>
-                    <td><button className="del-btn" onClick={() => deleteRow(r)}>✕</button></td>
+                    <td className="td-del"><button className="del-btn" onClick={() => deleteRow(r)}>✕</button></td>
                   </tr>
                 ))}
               </tbody>