moving admintables to lists when screen is not wide enough

admin/backorders.php

@@ -129,7 +129,7 @@ include __DIR__ . '/../includes/header.php';
     <div class="panel">
         <h3>Übersicht Vorbestellte Artikel</h3>
         <div class="table-responsive">
-        <table class="table-compact">
+        <table class="table-compact responsive-table">
             <thead>
                 <tr>
                     <th>Produkt</th>
@@ -140,9 +140,9 @@ include __DIR__ . '/../includes/header.php';
             <tbody>
                 <?php foreach ($summaryRows as $row): ?>
                     <tr>
-                        <td><?php echo htmlspecialchars($row['name']); ?></td>
-                        <td><?php echo $row['size'] !== '' ? htmlspecialchars($row['size']) : '—'; ?></td>
-                        <td><?php echo (int)$row['quantity']; ?></td>
+                        <td data-label="Produkt"><?php echo htmlspecialchars($row['name']); ?></td>
+                        <td data-label="Größe"><?php echo $row['size'] !== '' ? htmlspecialchars($row['size']) : '—'; ?></td>
+                        <td data-label="Menge"><?php echo (int)$row['quantity']; ?></td>
                     </tr>
                 <?php endforeach; ?>
             </tbody>
@@ -158,7 +158,7 @@ include __DIR__ . '/../includes/header.php';
     </div>
 <?php else: ?>
     <div class="table-responsive">
-        <table>
+        <table class="responsive-table">
             <thead>
                 <tr>
                     <th>Bestellnummer</th>
@@ -172,9 +172,9 @@ include __DIR__ . '/../includes/header.php';
             <tbody>
             <?php foreach ($reservations as $reservation): ?>
                 <tr>
-                    <td><strong><?php echo htmlspecialchars($reservation['id']); ?></strong></td>
-                    <td><?php echo htmlspecialchars($reservation['customer_name']); ?></td>
-                    <td>
+                    <td data-label="Bestellnummer"><strong><?php echo htmlspecialchars($reservation['id']); ?></strong></td>
+                    <td data-label="Kunde"><?php echo htmlspecialchars($reservation['customer_name']); ?></td>
+                    <td data-label="Artikel">
                         <?php
                         $itemCount = 0;
                         foreach ($reservation['items'] as $item) {
@@ -183,8 +183,8 @@ include __DIR__ . '/../includes/header.php';
                         echo $itemCount . ' Artikel';
                         ?>
                     </td>
-                    <td><?php echo formatDate($reservation['created']); ?></td>
-                    <td>
+                    <td data-label="Erstellt"><?php echo formatDate($reservation['created']); ?></td>
+                    <td data-label="Status">
                         <?php
                         if (isset($reservation['backorder_status']) && $reservation['backorder_status'] === 'notified') {
                             echo '<span class="status status-notified">Informiert</span>';
@@ -193,7 +193,7 @@ include __DIR__ . '/../includes/header.php';
                         }
                         ?>
                     </td>
-                    <td>
+                    <td data-label="Aktionen">
                         <?php if ((!isset($reservation['backorder_status']) || $reservation['backorder_status'] !== 'notified') && canFulfillReservationItems($reservation['items'])): ?>
                             <form method="POST" style="display: inline;" onsubmit="return confirm('Kunden informieren, dass die Vorbestellung zur Abholung bereit ist?');">
                                 <input type="hidden" name="reservation_id" value="<?php echo htmlspecialchars($reservation['id']); ?>">

admin/index.php

@@ -94,7 +94,7 @@ if (empty($openReservationsList)):
     <p>Keine offenen Reservierungen vorhanden.</p>
 <?php else: ?>
     <div class="table-responsive">
-        <table>
+        <table class="responsive-table">
             <thead>
                 <tr>
                     <th>Bestellnummer</th>
@@ -107,10 +107,10 @@ if (empty($openReservationsList)):
             <tbody>
                 <?php foreach ($openReservationsList as $reservation): ?>
                     <tr>
-                        <td><strong><?php echo htmlspecialchars($reservation['id']); ?></strong></td>
-                        <td><?php echo htmlspecialchars($reservation['customer_name']); ?></td>
-                        <td><?php echo formatDate($reservation['created']); ?></td>
-                        <td>
+                        <td data-label="Bestellnummer"><strong><?php echo htmlspecialchars($reservation['id']); ?></strong></td>
+                        <td data-label="Kunde"><?php echo htmlspecialchars($reservation['customer_name']); ?></td>
+                        <td data-label="Erstellt"><?php echo formatDate($reservation['created']); ?></td>
+                        <td data-label="Status">
                             <?php
                             if ($reservation['picked_up']) {
                                 echo '<span class="status status-picked">Abgeholt</span>';
@@ -121,7 +121,7 @@ if (empty($openReservationsList)):
                             }
                             ?>
                         </td>
-                        <td>
+                        <td data-label="Aktionen">
                             <a href="reservations.php?order_number=<?php echo urlencode($reservation['id']); ?>" class="btn btn-small">Details</a>
                         </td>
                     </tr>
@@ -139,7 +139,7 @@ if (empty($openPreordersList)):
     <p>Keine offenen Vorbestellungen vorhanden.</p>
 <?php else: ?>
     <div class="table-responsive">
-        <table>
+        <table class="responsive-table">
             <thead>
                 <tr>
                     <th>Bestellnummer</th>
@@ -152,10 +152,10 @@ if (empty($openPreordersList)):
             <tbody>
                 <?php foreach ($openPreordersList as $reservation): ?>
                     <tr>
-                        <td><strong><?php echo htmlspecialchars($reservation['id']); ?></strong></td>
-                        <td><?php echo htmlspecialchars($reservation['customer_name']); ?></td>
-                        <td><?php echo formatDate($reservation['created']); ?></td>
-                        <td>
+                        <td data-label="Bestellnummer"><strong><?php echo htmlspecialchars($reservation['id']); ?></strong></td>
+                        <td data-label="Kunde"><?php echo htmlspecialchars($reservation['customer_name']); ?></td>
+                        <td data-label="Erstellt"><?php echo formatDate($reservation['created']); ?></td>
+                        <td data-label="Status">
                             <?php
                             if (isset($reservation['backorder_status']) && $reservation['backorder_status'] === 'notified') {
                                 echo '<span class="status status-notified">Informiert</span>';
@@ -164,7 +164,7 @@ if (empty($openPreordersList)):
                             }
                             ?>
                         </td>
-                        <td>
+                        <td data-label="Aktionen">
                             <a href="backorders.php?order_number=<?php echo urlencode($reservation['id']); ?>" class="btn btn-small">Details</a>
                         </td>
                     </tr>

admin/products.php

@@ -118,6 +118,7 @@ if (isset($_GET['edit'])) {
     $editingProduct = getProductById((int)$_GET['edit']);
 }
 
+$bodyClass = 'admin-page';
 include __DIR__ . '/../includes/header.php';
 ?>
 
@@ -303,7 +304,7 @@ include __DIR__ . '/../includes/header.php';
 <?php if (empty($products)): ?>
     <p>Keine Produkte vorhanden.</p>
 <?php else: ?>
-    <table>
+    <table class="responsive-table">
         <thead>
             <tr>
                 <th>ID</th>
@@ -317,11 +318,11 @@ include __DIR__ . '/../includes/header.php';
         <tbody>
             <?php foreach ($products as $product): ?>
                 <tr>
-                <td><?php echo $product['id']; ?></td>
-                <td><?php echo htmlspecialchars($product['name']); ?></td>
-                <td><?php echo $product['category'] === 'apparel' ? 'Bekleidung' : 'Merchandise'; ?></td>
-                <td><?php echo formatPrice($product['price']); ?></td>
-                <td>
+                <td data-label="ID"><?php echo $product['id']; ?></td>
+                <td data-label="Name"><?php echo htmlspecialchars($product['name']); ?></td>
+                <td data-label="Kategorie"><?php echo $product['category'] === 'apparel' ? 'Bekleidung' : 'Merchandise'; ?></td>
+                <td data-label="Preis"><?php echo formatPrice($product['price']); ?></td>
+                <td data-label="Lagerbestand">
                     <?php 
                     if ($product['category'] === 'apparel' && isset($product['stock_by_size']) && is_array($product['stock_by_size'])) {
                         $stockInfo = [];
@@ -334,7 +335,7 @@ include __DIR__ . '/../includes/header.php';
                     }
                     ?>
                 </td>
-                    <td>
+                    <td data-label="Aktionen">
                         <a href="?edit=<?php echo $product['id']; ?>" class="btn btn-small">Bearbeiten</a>
                         <form method="POST" style="display: inline;" onsubmit="return confirm('Möchten Sie dieses Produkt wirklich löschen?');">
                             <input type="hidden" name="product_id" value="<?php echo $product['id']; ?>">

admin/reservations.php

@@ -102,7 +102,7 @@ include __DIR__ . '/../includes/header.php';
     </div>
 <?php else: ?>
     <div class="table-responsive">
-        <table>
+        <table class="responsive-table">
             <thead>
                 <tr>
                     <th>Bestellnummer</th>
@@ -116,9 +116,9 @@ include __DIR__ . '/../includes/header.php';
             <tbody>
             <?php foreach ($reservations as $reservation): ?>
                 <tr>
-                    <td><strong><?php echo htmlspecialchars($reservation['id']); ?></strong></td>
-                    <td><?php echo htmlspecialchars($reservation['customer_name']); ?></td>
-                    <td>
+                    <td data-label="Bestellnummer"><strong><?php echo htmlspecialchars($reservation['id']); ?></strong></td>
+                    <td data-label="Kunde"><?php echo htmlspecialchars($reservation['customer_name']); ?></td>
+                    <td data-label="Artikel">
                         <?php
                         $itemCount = 0;
                         foreach ($reservation['items'] as $item) {
@@ -127,8 +127,8 @@ include __DIR__ . '/../includes/header.php';
                         echo $itemCount . ' Artikel';
                         ?>
                     </td>
-                    <td><?php echo formatDate($reservation['created']); ?></td>
-                    <td>
+                    <td data-label="Erstellt"><?php echo formatDate($reservation['created']); ?></td>
+                    <td data-label="Status">
                         <?php
                         if ($reservation['picked_up']) {
                             echo '<span class="status status-picked">Abgeholt</span>';
@@ -139,7 +139,7 @@ include __DIR__ . '/../includes/header.php';
                         }
                         ?>
                     </td>
-                    <td>
+                    <td data-label="Aktionen">
                         <?php if (!$reservation['picked_up'] && $reservation['status'] === 'open'): ?>
                             <form method="POST" style="display: inline;" onsubmit="return confirm('Reservierung als abgeholt markieren?');">
                                 <input type="hidden" name="reservation_id" value="<?php echo htmlspecialchars($reservation['id']); ?>">

assets/css/style.css

@@ -674,6 +674,62 @@ footer {
     .table-responsive .btn {
         white-space: normal;
     }
+
+    /* Admin tables: stack rows into blocks on narrow screens */
+    body.admin-page table.responsive-table {
+        border: 0;
+        box-shadow: none;
+        background: transparent;
+    }
+
+    body.admin-page table.responsive-table thead {
+        display: none;
+    }
+
+    body.admin-page table.responsive-table tbody {
+        display: block;
+    }
+
+    body.admin-page table.responsive-table tr {
+        display: block;
+        background: var(--brand-surface);
+        border: 1px solid var(--brand-border);
+        border-radius: 8px;
+        margin-bottom: 0.8rem;
+        box-shadow: 0 2px 4px rgba(0,0,0,0.35);
+    }
+
+    body.admin-page table.responsive-table td {
+        display: flex;
+        justify-content: space-between;
+        gap: 1rem;
+        width: 100%;
+        border-top: 1px solid var(--brand-border);
+        border-bottom: 0;
+        padding: 0.65rem 0.85rem;
+        text-align: right;
+    }
+
+    body.admin-page table.responsive-table td:first-child {
+        border-top: 0;
+    }
+
+    body.admin-page table.responsive-table td::before {
+        content: attr(data-label);
+        font-weight: 600;
+        color: var(--brand-muted);
+        text-align: left;
+    }
+
+    body.admin-page table.responsive-table td[data-label="Aktionen"] {
+        display: block;
+        text-align: left;
+    }
+
+    body.admin-page table.responsive-table td[data-label="Aktionen"]::before {
+        display: block;
+        margin-bottom: 0.4rem;
+    }
 }
 
 @media (max-width: 480px) {
@@ -699,7 +755,7 @@ footer {
     }
     
     /* Very narrow: admin tables scroll so columns stay readable */
-    .table-responsive table {
+    .table-responsive table:not(.responsive-table) {
         min-width: 520px;
     }
 }