From 0f50ab334c0d4513d059d2821684d859e7fc0a0d Mon Sep 17 00:00:00 2001
From: Marco <marco.kunitz@googlemail.com>
Date: Thu, 30 Jul 2026 19:55:13 +0000
Subject: [PATCH] Move Artikel to the front of the 4-column row

From 500px up, the second row is now Artikel/Status/Zahlungsstatus/
Gesamtbetrag (was Status/Zahlungsstatus/Artikel/Gesamtbetrag). Done via
min-[500px]:order-* so the below-500px pairing (badges together,
quantities together) stays on plain DOM order, untouched.

Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
---
 app/konto/bestellungen/page.tsx | 52 ++++++++++++++++++---------------
 1 file changed, 28 insertions(+), 24 deletions(-)

diff --git a/app/konto/bestellungen/page.tsx b/app/konto/bestellungen/page.tsx
index 2181e49..1642c40 100644
--- a/app/konto/bestellungen/page.tsx
+++ b/app/konto/bestellungen/page.tsx
@@ -46,45 +46,49 @@ export default async function KontoBestellungenPage() {
                   href={`/konto/bestellungen/${encodeURIComponent(order.orderNumber)}`}
                   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"
                 >
-                  {/* 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 — 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">
+                  {/* Below 500px: 2 columns, plain DOM order — Bestellnummer/
+                      Datum, Status/Zahlungsstatus, Artikel/Gesamtbetrag
+                      tile into exactly those 3 pairs on their own, no
+                      reordering needed. From 500px 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
+                      min-[500px]: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. */}
+                  <div className="flex flex-col gap-1 min-[500px]:order-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="flex flex-col gap-1 min-[500px]:order-2">
                     <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 min-[500px]:col-start-1">
+                  <div className="flex flex-col gap-1 min-[500px]:order-4">
                     <p className="text-label text-text-muted">Status</p>
                     <OrderStatusBadge status={order.status} />
                   </div>
-                  <div className="flex flex-col gap-1">
+                  <div className="flex flex-col gap-1 min-[500px]:order-5">
                     <p className="text-label text-text-muted">Zahlungsstatus</p>
                     <PaymentStatusBadge paymentStatus={order.paymentStatus} />
                   </div>
-                  <div className="flex flex-col gap-1">
+                  <div className="flex flex-col gap-1 min-[500px]:order-3 min-[500px]: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">
+                  <div className="flex flex-col gap-1 min-[500px]:order-6">
                     <p className="text-label text-text-muted">Gesamtbetrag</p>
                     <p className="font-bold text-body-sm text-text-primary">{formatPrice(order.total)}</p>
                   </div>