improve listing

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`)

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;
     }
 }
 

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 {