diff --git a/app/konto/bestellungen/page.tsx b/app/konto/bestellungen/page.tsx
index 1642c40..47a5bc8 100644
--- a/app/konto/bestellungen/page.tsx
+++ b/app/konto/bestellungen/page.tsx
@@ -44,16 +44,17 @@ export default async function KontoBestellungenPage() {
                 <Link
                   key={order.orderNumber}
                   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"
+                  className="grid grid-cols-2 sm: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, 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
+                  {/* 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
-                      min-[500px]:order-* rather than changing the actual
+                      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
@@ -68,27 +69,27 @@ export default async function KontoBestellungenPage() {
                       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">
+                  <div className="flex flex-col gap-1 sm: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 min-[500px]:order-2">
+                  <div className="flex flex-col gap-1 sm: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]:order-4">
+                  <div className="flex flex-col gap-1 sm:order-4">
                     <p className="text-label text-text-muted">Status</p>
                     <OrderStatusBadge status={order.status} />
                   </div>
-                  <div className="flex flex-col gap-1 min-[500px]:order-5">
+                  <div className="flex flex-col gap-1 sm:order-5">
                     <p className="text-label text-text-muted">Zahlungsstatus</p>
                     <PaymentStatusBadge paymentStatus={order.paymentStatus} />
                   </div>
-                  <div className="flex flex-col gap-1 min-[500px]:order-3 min-[500px]:col-start-1">
+                  <div className="flex flex-col gap-1 sm:order-3 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 min-[500px]:order-6">
+                  <div className="flex flex-col gap-1 sm: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>