diff --git a/app/konto/bestellungen/page.tsx b/app/konto/bestellungen/page.tsx
index afc5242..e22bf70 100644
--- a/app/konto/bestellungen/page.tsx
+++ b/app/konto/bestellungen/page.tsx
@@ -44,13 +44,25 @@ export default async function KontoBestellungenPage() {
                 <Link
                   key={order.orderNumber}
                   href={`/konto/bestellungen/${encodeURIComponent(order.orderNumber)}`}
-                  className="flex flex-wrap items-center gap-4 w-full bg-bg-base border border-border rounded-md p-6 hover:border-brand transition-colors"
+                  className="grid grid-cols-2 sm:grid-cols-4 gap-x-6 gap-y-4 w-full bg-bg-base border border-border rounded-md p-6 hover:border-brand transition-colors"
                 >
-                  <div className="flex flex-col gap-1">
+                  {/* One grid for the whole card, not two separate flex/grid
+                      groups — Bestellnummer/Datum each span 2 of the 4
+                      tracks from sm: up, so both rows share the exact same
+                      column boundaries. Plain flex-wrap here (as this used
+                      to be) sized every field to its own content width, so
+                      e.g. "Status"/"Zahlungsstatus" started at a different
+                      x position from one order card to the next depending
+                      on how wide that particular badge's label happened to
+                      be — a grid's column tracks are fixed by the
+                      container width, identical on every card regardless
+                      of content, which is what actually guarantees the
+                      "always starts at the same position" alignment. */}
+                  <div className="col-span-2 flex flex-col gap-1">
                     <p className="text-label text-text-muted">Bestellnummer</p>
                     <p className="font-bold text-body-sm text-text-primary">{order.orderNumber}</p>
                   </div>
-                  <div className="flex flex-col gap-1">
+                  <div className="col-span-2 flex flex-col gap-1">
                     <p className="text-label text-text-muted">Datum</p>
                     <p className="text-body-sm text-text-primary">{formatDate(order.createdAt)}</p>
                   </div>
@@ -66,7 +78,7 @@ export default async function KontoBestellungenPage() {
                     <p className="text-label text-text-muted">Zahlungsstatus</p>
                     <PaymentStatusBadge paymentStatus={order.paymentStatus} />
                   </div>
-                  <div className="flex flex-col gap-1 ml-auto">
+                  <div className="flex flex-col gap-1">
                     <p className="text-label text-text-muted">Gesamtbetrag</p>
                     <p className="font-bold text-body-sm text-text-primary">{formatPrice(order.total)}</p>
                   </div>