Fix order-list mobile layout: 2 columns under 400px, badges no longer stretch

The forced 4-column layout overflowed on narrow phones — badge labels
like "In Bearbeitung" and the order number wrapped/overlapped into
neighboring columns. Drop to 2 columns below 400px (the field order
already tiles cleanly into 3 rows of 2). Also stop OrderStatusBadge/
PaymentStatusBadge from stretching to their flex-col parent's full
width — self-start keeps the badge background only as wide as its label.

Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>

app/konto/bestellungen/page.tsx

@@ -44,13 +44,19 @@ export default async function KontoBestellungenPage() {
                 <Link
                   key={order.orderNumber}
                   href={`/konto/bestellungen/${encodeURIComponent(order.orderNumber)}`}
-                  className="grid 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"
+                  className="grid grid-cols-2 min-[400px]: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 4 columns, even on the narrowest mobile widths
-                      — every field spans exactly 1 track, so every row
-                      shares the exact same column boundaries regardless of
-                      viewport. Plain flex-wrap here (as this used to be)
-                      sized every field to its own content width, so e.g.
+                  {/* 4 columns as soon as there's room for badge labels
+                      like "In Bearbeitung" to fit (>= 400px) — every field
+                      spans exactly 1 track, so every row shares the exact
+                      same column boundaries regardless of viewport. Below
+                      400px there just isn't room for 4 tracks without
+                      badges overflowing their column, so it drops to 2
+                      columns; the 6 fields in DOM order already tile into
+                      exactly Bestellnummer/Datum, Artikel/Status,
+                      Zahlungsstatus/Gesamtbetrag without any reordering.
+                      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
@@ -61,8 +67,10 @@ export default async function KontoBestellungenPage() {
                       Bestellnummer/Datum deliberately do NOT span 2 tracks
                       — that would push Datum to start at the 3rd column
                       instead of the 2nd. Artikel forces col-start-1 so it
-                      wraps to its own row instead of Grid auto-flowing it
-                      into the 2 empty cells left in row 1. */}
+                      wraps to its own row in the 4-column layout instead
+                      of Grid auto-flowing it into the 2 empty cells left
+                      in row 1 (harmless no-op in the 2-column layout,
+                      where it's already first in row 2 anyway). */}
                   <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>

app/konto/components/OrderStatusBadge.tsx

@@ -20,7 +20,7 @@ const STYLES: Record<string, string> = {
 export function OrderStatusBadge({ status }: { status: string }) {
   return (
     <span
-      className={`inline-flex items-center px-2.5 py-1 rounded-full text-label font-bold whitespace-nowrap ${STYLES[status] ?? "bg-bg-muted text-text-muted"}`}
+      className={`self-start inline-flex items-center px-2.5 py-1 rounded-full text-label font-bold whitespace-nowrap ${STYLES[status] ?? "bg-bg-muted text-text-muted"}`}
     >
       {ORDER_STATUS_LABEL[status] ?? status}
     </span>

app/konto/components/PaymentStatusBadge.tsx

@@ -25,7 +25,7 @@ const STYLES: Record<string, string> = {
 export function PaymentStatusBadge({ paymentStatus }: { paymentStatus: string }) {
   return (
     <span
-      className={`inline-flex items-center px-2.5 py-1 rounded-full text-label font-bold whitespace-nowrap ${STYLES[paymentStatus] ?? "bg-bg-muted text-text-muted"}`}
+      className={`self-start inline-flex items-center px-2.5 py-1 rounded-full text-label font-bold whitespace-nowrap ${STYLES[paymentStatus] ?? "bg-bg-muted text-text-muted"}`}
     >
       {LABEL[paymentStatus] ?? paymentStatus}
     </span>