diff --git a/app/konto/bestellungen/page.tsx b/app/konto/bestellungen/page.tsx
index ed65a1a..2181e49 100644
--- a/app/konto/bestellungen/page.tsx
+++ b/app/konto/bestellungen/page.tsx
@@ -44,29 +44,26 @@ export default async function KontoBestellungenPage() {
                 <Link
                   key={order.orderNumber}
                   href={`/konto/bestellungen/${encodeURIComponent(order.orderNumber)}`}
-                  className="grid grid-cols-2 gap-x-3 sm:gap-x-6 gap-y-4 w-full bg-bg-base border border-border rounded-md p-6 hover:border-brand transition-colors"
+                  className="grid grid-cols-2 min-[500px]:grid-cols-4 gap-x-3 sm:gap-x-6 gap-y-4 w-full bg-bg-base border border-border rounded-md p-6 hover:border-brand transition-colors"
                 >
-                  {/* Always 2 columns, at every viewport width — the 6
-                      fields are ordered Bestellnummer/Datum,
-                      Status/Zahlungsstatus, Artikel/Gesamtbetrag, so a
-                      plain 2-column grid already tiles them into exactly
-                      those 3 pairs: the two colored badges land in one
-                      row together (visually calmer than being split
-                      across two rows), and Artikel/Gesamtbetrag pair up
-                      as the two "quantity" fields. A wider (4-column)
-                      layout was tried first, but then Status/
-                      Zahlungsstatus shared a row with Bestellnummer/Datum
-                      instead of getting their own — 2 columns keeps the
-                      pairing intentional regardless of available width.
-                      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
+                  {/* Below 500px: 2 columns — the 6 fields in DOM order
+                      (Bestellnummer/Datum, Status/Zahlungsstatus,
+                      Artikel/Gesamtbetrag) already tile into exactly
+                      those 3 pairs, no forcing needed. From 500px up: 4
+                      columns, with Bestellnummer/Datum on their own row
+                      and Status/Zahlungsstatus/Artikel/Gesamtbetrag
+                      together on the row below — Status forces
+                      min-[500px]:col-start-1 so it wraps to a new row
+                      instead of Grid auto-flowing it into the 2 empty
+                      cells left after Bestellnummer/Datum (a harmless
+                      no-op below 500px, where it's already first in row
+                      2 anyway). 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. */}
+                      of content — unlike the plain flex-wrap this used
+                      to be, where 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. */}
                   <div className="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>
@@ -75,7 +72,7 @@ export default async function KontoBestellungenPage() {
                     <p className="text-label text-text-muted">Datum</p>
                     <p className="text-body-sm text-text-primary">{formatDate(order.createdAt)}</p>
                   </div>
-                  <div className="flex flex-col gap-1">
+                  <div className="flex flex-col gap-1 min-[500px]:col-start-1">
                     <p className="text-label text-text-muted">Status</p>
                     <OrderStatusBadge status={order.status} />
                   </div>