Listen der Admin-Bereiche stapeln nach verfuegbarer Breite (Tablet quer, halbes Fenster)

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>

src/styles/admin-areas.css

@@ -1,6 +1,6 @@
 /* Bereiche aus dem frueheren Admin-Panel (Gutschriften, Abo-Angebote, E-Mail-Speicher, Funktionen, Abo-Status).
    Zeilen als Raster; unter 720 px untereinander, damit nichts waagerecht scrollt. */
-.area-rows { display: flex; flex-direction: column; }
+.area-rows { display: flex; flex-direction: column; container-type: inline-size; }
 .area-row {
   display: grid; gap: var(--sp-3); align-items: start; padding: 12px 16px;
   border-bottom: 1px solid var(--border); overflow-wrap: anywhere;
@@ -43,3 +43,9 @@
 @media (max-width: 720px) { .credit-calc { grid-template-columns: minmax(0, 1fr); } }
 .credit-cols a { color: var(--accent); }
 .offer-row { grid-template-columns: 130px 200px minmax(0, 1fr) 110px 210px; }
+/* Nach verfuegbarer Breite stapeln (nicht nach Fensterbreite): mit ausgeklappter Sidebar sind Tablet quer oder ein
+   halbes Laptop-Fenster sonst zu schmal fuer die Spalten */
+@container (max-width: 960px) {
+  .area-row { grid-template-columns: minmax(0, 1fr) !important; gap: 4px; }
+  .area-row.head { display: none; }
+}