diff --git a/app/konto/bestellungen/page.tsx b/app/konto/bestellungen/page.tsx
index 56ff795..1d02d4f 100644
--- a/app/konto/bestellungen/page.tsx
+++ b/app/konto/bestellungen/page.tsx
@@ -49,60 +49,48 @@ export default async function KontoBestellungenPage() {
                   {/* Below sm (640px): 2 columns, plain DOM order —
                       Bestellnummer/Datum, Status/Zahlungsstatus,
                       Artikel/Gesamtbetrag tile into exactly those 3 pairs
-                      on their own, no reordering needed. From sm up: 4
-                      columns, with
-                      Bestellnummer/Datum on their own row and
-                      Artikel/Status/Zahlungsstatus/Gesamtbetrag together
-                      on the row below, in that order — done via
-                      sm:order-* rather than changing the actual
-                      DOM order, so the mobile pairing above stays
-                      untouched. Artikel carries both order-3 (first in
-                      the second row) and col-start-1 (so it actually
-                      wraps to a new row instead of Grid auto-flowing it
-                      into the 2 empty cells left after Bestellnummer/
-                      Datum) — order alone only controls placement
-                      sequence, not which row/column an item lands in. A
-                      grid's column tracks are fixed by the container
-                      width, identical on every card regardless 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.
-
-                      Bestellnummer additionally forces sm:col-start-2 —
-                      without it, the top row's 2 items (only spanning 2
-                      of the 4 tracks) pack flush left with all the
-                      leftover space on the right, an asymmetric margin
-                      against the card's edges. Starting Bestellnummer at
-                      column 2 instead of 1 centers that pair within the
-                      row (column 1 and column 4 both stay empty), while
-                      each cell's own content (the label/value pair) stays
-                      left-aligned within itself. Datum needs no override
-                      of its own — with column 2 already taken, its
-                      order-2 auto-places it into column 3, the next open
-                      cell. */}
-                  <div className="flex flex-col gap-1 sm:order-1 sm:col-start-2">
+                      on their own, no explicit placement needed. From sm
+                      up: 4 columns, every cell explicitly pinned to a
+                      row+column (sm:row-start-N sm:col-start-N) rather
+                      than relying on `order` + Grid's auto-placement —
+                      mixing `order` with only SOME items explicitly
+                      positioned is a real footgun: the auto-placement
+                      cursor for the un-pinned items starts scanning from
+                      column 1 again regardless of what's already
+                      explicitly placed elsewhere, so Datum (previously
+                      auto-placed, relying on Bestellnummer's explicit
+                      col-start-2 to "push" it to column 3) actually
+                      landed back in column 1 — same visual bug as before
+                      this whole pass (left-packed, empty space on the
+                      right), just for a different reason than the
+                      original flex-wrap issue. Pinning every cell's row
+                      AND column explicitly removes that ambiguity
+                      entirely. Row 1: Bestellnummer/Datum centered in
+                      columns 2-3 (columns 1 and 4 both empty, symmetric
+                      margins) — each cell's own content still
+                      left-aligned within itself. Row 2: Artikel/Status/
+                      Zahlungsstatus/Gesamtbetrag fill all 4 columns. */}
+                  <div className="flex flex-col gap-1 sm:row-start-1 sm:col-start-2">
                     <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 sm:order-2">
+                  <div className="flex flex-col gap-1 sm:row-start-1 sm:col-start-3">
                     <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 sm:order-4">
+                  <div className="flex flex-col gap-1 sm:row-start-2 sm:col-start-2">
                     <p className="text-label text-text-muted">Status</p>
                     <OrderStatusBadge status={order.status} />
                   </div>
-                  <div className="flex flex-col gap-1 sm:order-5">
+                  <div className="flex flex-col gap-1 sm:row-start-2 sm:col-start-3">
                     <p className="text-label text-text-muted">Zahlungsstatus</p>
                     <PaymentStatusBadge paymentStatus={order.paymentStatus} />
                   </div>
-                  <div className="flex flex-col gap-1 sm:order-3 sm:col-start-1">
+                  <div className="flex flex-col gap-1 sm:row-start-2 sm:col-start-1">
                     <p className="text-label text-text-muted">Artikel</p>
                     <p className="text-body-sm text-text-primary">{order.itemCount}</p>
                   </div>
-                  <div className="flex flex-col gap-1 sm:order-6">
+                  <div className="flex flex-col gap-1 sm:row-start-2 sm:col-start-4">
                     <p className="text-label text-text-muted">Gesamtbetrag</p>
                     <p className="font-bold text-body-sm text-text-primary">{formatPrice(order.total)}</p>
                   </div>