From 43a905c027ae7b2d69ee6c56ea97ed31c765a4bb Mon Sep 17 00:00:00 2001
From: Alexander Schmidt <alexander@schmidt.eco>
Date: Sun, 1 Feb 2026 10:47:29 +0100
Subject: [PATCH] improve listing

---
 AGENTS.md                           |  1 +
 css/components.css                  | 48 +++++++++--------------------
 js/components/pages/page-listing.js | 13 +++++++-
 3 files changed, 28 insertions(+), 34 deletions(-)

diff --git a/AGENTS.md b/AGENTS.md
index 5ef788c..3857746 100644
--- a/AGENTS.md
+++ b/AGENTS.md
@@ -92,6 +92,7 @@ locales/
 - **Font-Size**: `var(--font-size-xs|sm|base|lg|xl|2xl|3xl)`
 - **Font-Family**: `var(--font-family)` für Body, `var(--font-family-heading)` für Headlines
 - **Border-Radius**: `var(--radius-sm|md|lg|xl|full)`
+- **Breakpoint**: `@media (max-width: 768px)` - einziger Mobile-Breakpoint für alle Komponenten
 
 ### i18n
 - Schlüssel: `section.key` (z.B. `home.title`)
diff --git a/css/components.css b/css/components.css
index 3057346..ba94320 100644
--- a/css/components.css
+++ b/css/components.css
@@ -149,40 +149,22 @@
     grid-template-columns: repeat(4, 1fr);
 }
 
-@media (max-width: 1024px) {
-    .grid-cols-4 { grid-template-columns: repeat(3, 1fr); }
-}
-
 @media (max-width: 768px) {
-    .grid-cols-4, .grid-cols-3 { grid-template-columns: repeat(2, 1fr); }
+    .grid-cols-4 { grid-template-columns: repeat(2, 1fr); }
+    .grid-cols-3 { grid-template-columns: repeat(2, 1fr); }
+    .grid-cols-2 { grid-template-columns: 1fr; }
 }
 
-@media (max-width: 480px) {
-    .grid-cols-4, .grid-cols-3, .grid-cols-2 { grid-template-columns: 1fr; }
-}
-
-/* Listings Grid - responsive 2/3/4/5 columns */
+/* Listings Grid - responsive columns */
 .listings-grid {
     display: grid;
-    grid-template-columns: repeat(2, 1fr);
+    grid-template-columns: repeat(4, 1fr);
     gap: var(--space-md);
 }
 
-@media (min-width: 640px) {
+@media (max-width: 768px) {
     .listings-grid {
-        grid-template-columns: repeat(3, 1fr);
-    }
-}
-
-@media (min-width: 900px) {
-    .listings-grid {
-        grid-template-columns: repeat(4, 1fr);
-    }
-}
-
-@media (min-width: 1200px) {
-    .listings-grid {
-        grid-template-columns: repeat(5, 1fr);
+        grid-template-columns: repeat(2, 1fr);
     }
 }
 
@@ -285,28 +267,28 @@ app-header .btn-profile {
 
 app-header .btn-login-text,
 app-header .btn-profile-text {
-    display: none;
+    display: inline;
 }
 
-@media (min-width: 480px) {
+@media (max-width: 768px) {
     app-header .btn-create {
-        padding: var(--space-sm) var(--space-md);
-        border-radius: var(--radius-md);
+        padding: var(--space-sm);
+        border-radius: var(--radius-full);
     }
     
     app-header .btn-create-text {
-        display: inline;
+        display: none;
     }
 
     app-header .btn-login,
     app-header .btn-profile {
-        padding: var(--space-sm) var(--space-md);
-        border-radius: var(--radius-md);
+        padding: var(--space-sm);
+        border-radius: var(--radius-full);
     }
     
     app-header .btn-login-text,
     app-header .btn-profile-text {
-        display: inline;
+        display: none;
     }
 }
 
diff --git a/js/components/pages/page-listing.js b/js/components/pages/page-listing.js
index f25792f..e6a9f36 100644
--- a/js/components/pages/page-listing.js
+++ b/js/components/pages/page-listing.js
@@ -508,7 +508,7 @@ style.textContent = /* css */`
         align-items: start;
     }
 
-    @media (max-width: 900px) {
+    @media (max-width: 768px) {
         page-listing .listing-content {
             grid-template-columns: 1fr;
         }
@@ -517,6 +517,10 @@ style.textContent = /* css */`
             position: static;
             order: -1;
         }
+
+        page-listing .sidebar-card {
+            padding: var(--space-md);
+        }
     }
 
     /* Main Info */
@@ -584,6 +588,12 @@ style.textContent = /* css */`
         gap: var(--space-md);
     }
 
+    @media (max-width: 768px) {
+        page-listing .listing-sidebar {
+            position: static;
+        }
+    }
+
     page-listing .sidebar-card {
         background: var(--color-bg-secondary);
         border: 1px solid var(--color-border);
@@ -629,6 +639,7 @@ style.textContent = /* css */`
 
     page-listing .action-btn.active {
         color: var(--color-accent);
+        background: var(--color-bg-tertiary);
     }
 
     page-listing .action-btn.copied {