diff --git a/src/components/auftraege/ProjektkontoListe.jsx b/src/components/auftraege/ProjektkontoListe.jsx
index 4b4bd06..73da2f5 100644
--- a/src/components/auftraege/ProjektkontoListe.jsx
+++ b/src/components/auftraege/ProjektkontoListe.jsx
@@ -1,11 +1,81 @@
+import './projektkonto.css'
+import { Card } from '../ui'
+import { kontoZeile, ohneProjektZeile, stripeHinweis, KEINE_PROJEKTE_HINWEIS } from '../../lib/projektkontoView'
+
 /**
- * Platzhalter von W0: Strang W1 ersetzt diese Datei vollständig (Dateiname, Default-Export und Props bleiben).
- * Die fertige Komponente rendert ihren Abschnitt selbst: <Card title="Projekte"> (ein <section>; den Abstand zu den
- * Nachbarn liefert `.page section + section`).
- *
- * Props (V8): konten (Projektkonten), ohneProjekt ({ berechnetCents, bezahltCents, anzahl }), auftraegeAktiv, stripeOk,
- * onRechnung(projektId) und onAuftrag(projektId); die Kennung ist die des Projekts, `null` die Zeile „Ohne Projekt“.
+ * Abschnitt „Projekte“ im Kundenreiter „Aufträge und Rechnungen“: je Projekt eine Zeile mit Vereinbart, Berechnet
+ * (darunter bezahlt), Noch offen und erfasster Zeit, am Ende die feste Zeile „Ohne Projekt“.
+ * Props: konten (Projektkonten, darf fehlen), ohneProjekt ({ berechnetCents, bezahltCents, anzahl }), auftraegeAktiv,
+ * stripeOk, onRechnung(projektId) und onAuftrag(projektId). Die Kennung ist die des Projekts, `null` die Zeile „Ohne Projekt“.
+ * Die Überschrift „Projekte“ rendert die Komponente selbst; die Anzeigelogik steht in lib/projektkontoView.js.
  */
 export default function ProjektkontoListe({ konten, ohneProjekt, auftraegeAktiv, stripeOk, onRechnung, onAuftrag }) {
-  return null
+  const liste = Array.isArray(konten) ? konten : []
+  const zeilen = [...liste.map((k) => kontoZeile(k, { stripeOk })), ohneProjektZeile(ohneProjekt, { stripeOk })]
+  const hinweis = stripeHinweis(stripeOk)
+
+  return (
+    <Card title="Projekte">
+      <div className="pk">
+        {hinweis && (
+          <p className="msg warn pk-hinweis" role="status">
+            {hinweis}
+          </p>
+        )}
+        {liste.length === 0 && <p className="msg muted pk-hinweis">{KEINE_PROJEKTE_HINWEIS}</p>}
+        <table className="table pk-table" role="table">
+          <caption className="pk-sr">Projektkonten</caption>
+          <thead role="rowgroup">
+            <tr role="row">
+              <th role="columnheader" scope="col">Projekt</th>
+              <th role="columnheader" scope="col">Vereinbart</th>
+              <th role="columnheader" scope="col">Berechnet</th>
+              <th role="columnheader" scope="col">Noch offen</th>
+              <th role="columnheader" scope="col">Zeit erfasst</th>
+              <th role="columnheader" scope="col"><span className="pk-sr">Aktionen</span></th>
+            </tr>
+          </thead>
+          <tbody role="rowgroup">
+            {zeilen.map((z) => {
+              const id = z.projektId || null
+              const fuer = id === null ? 'ohne Projekt' : `für ${z.name}`
+              return (
+                <tr role="row" key={z.key}>
+                  <td role="cell" className="pk-name">
+                    <div className="cell-title">{z.name}</div>
+                    {z.meta && <div className="cell-sub">{z.meta}</div>}
+                  </td>
+                  <td role="cell" className="pk-vereinbart" data-label="Vereinbart">{z.vereinbart}</td>
+                  <td role="cell" className="pk-berechnet" data-label="Berechnet">
+                    <div className="num">{z.berechnet}</div>
+                    {z.bezahlt && <div className="cell-sub">{z.bezahlt}</div>}
+                  </td>
+                  <td role="cell" className="pk-offen" data-label="Noch offen">
+                    <span className="num">{z.offen}</span>
+                  </td>
+                  <td role="cell" className="pk-zeit" data-label="Zeit erfasst">
+                    <div className="num">{z.zeit.stunden}</div>
+                    {z.zeit.wert && <div className="cell-sub">{z.zeit.wert}</div>}
+                    {z.zeit.abo && <div className="cell-sub">{z.zeit.abo}</div>}
+                  </td>
+                  <td role="cell" className="pk-actions-cell">
+                    <div className="pk-actions">
+                      {auftraegeAktiv && (
+                        <button type="button" className="link" aria-label={`Auftragsbestätigung ${fuer}`} onClick={() => onAuftrag(id)}>
+                          Auftragsbestätigung
+                        </button>
+                      )}
+                      <button type="button" className="link" aria-label={`Rechnung ${fuer}`} onClick={() => onRechnung(id)}>
+                        Rechnung
+                      </button>
+                    </div>
+                  </td>
+                </tr>
+              )
+            })}
+          </tbody>
+        </table>
+      </div>
+    </Card>
+  )
 }
diff --git a/src/components/auftraege/projektkonto.css b/src/components/auftraege/projektkonto.css
new file mode 100644
index 0000000..94901fd
--- /dev/null
+++ b/src/components/auftraege/projektkonto.css
@@ -0,0 +1,27 @@
+/* Projektliste im Kundenreiter „Aufträge und Rechnungen“. .pk ist der Container der Abfrage unten (in W1 nur hier
+   container-type; der Rechnungsdialog liegt nie darin). Jede Regel trägt .pk und überstimmt so .table td aus global.css. */
+.pk { container-type: inline-size; }
+.pk .pk-hinweis { margin: 0 0 8px; }
+.pk .pk-table th, .pk .pk-table td { vertical-align: top; }
+.pk .pk-name, .pk .pk-table td .cell-sub { overflow-wrap: anywhere; }
+.pk .pk-table .num { font-variant-numeric: tabular-nums; }
+.pk .pk-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 4px 14px; }
+.pk .pk-sr { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
+@container (max-width: 860px) {
+  .pk .pk-table thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
+  .pk .pk-table, .pk .pk-table tbody { display: block; }
+  .pk .pk-table tr {
+    display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px 16px; align-items: start;
+    grid-template-areas: "name name" "vereinbart berechnet" "offen zeit" "actions actions";
+    padding: 12px 0; border-bottom: 1px solid var(--line);
+  }
+  .pk .pk-table td, .pk .pk-table td:first-child, .pk .pk-table td:last-child { display: block; padding: 0; border: 0; min-width: 0; }
+  .pk .pk-name { grid-area: name; }
+  .pk .pk-vereinbart { grid-area: vereinbart; }
+  .pk .pk-berechnet { grid-area: berechnet; }
+  .pk .pk-offen { grid-area: offen; }
+  .pk .pk-zeit { grid-area: zeit; }
+  .pk .pk-actions-cell { grid-area: actions; }
+  .pk .pk-actions { justify-content: flex-start; }
+  .pk .pk-table td[data-label]::before { content: attr(data-label); display: block; font-size: 12px; font-weight: 500; color: var(--text-2); }
+}