Layout angepasst

app.py

@@ -290,7 +290,8 @@ TEMPLATE = """
         .filter-bar select { padding: 10px 15px; border-radius: 20px; background: #222; color: #fff; border: 1px solid #333; font-size: 0.9rem; outline: none; cursor: pointer; }
         .filter-bar select:focus { border-color: var(--primary); }
 
-        .grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 20px; max-width: 1200px; margin: 0 auto; }
+        /* Desktop Grid: max-width auf 1600px erhöht, minmax auf 180px für bis zu 7 Items */
+        .grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 20px; max-width: 1600px; margin: 0 auto; }
         .card { background: var(--card); border-radius: 12px; overflow: hidden; box-shadow: 0 4px 10px rgba(0,0,0,0.5); transition: transform 0.2s; display: flex; flex-direction: column; }
         .card:hover { transform: scale(1.03); }
         .card-clickable { cursor: pointer; flex-grow: 1; }
@@ -301,6 +302,23 @@ TEMPLATE = """
         .btn-direct, .btn-tonie { background: #333; color: #ccc; border: 1px solid #444; padding: 6px 14px; border-radius: 15px; font-size: 0.85rem; cursor: pointer; transition: 0.2s; }
         .btn-direct:hover, .btn-tonie:hover { background: var(--primary); color: white; border-color: var(--primary); }
 
+        /* Mobile Anpassungen (für Bildschirme schmaler als 600px) */
+        @media (max-width: 600px) {
+            body { padding: 10px; padding-bottom: 160px; }
+            h1 { font-size: 2.2rem; }
+            
+            /* Grid auf Handy: minmax auf 110px reduziert -> ergibt 2-3 Spalten */
+            .grid { grid-template-columns: repeat(auto-fill, minmax(110px, 1fr)); gap: 10px; }
+            
+            /* Schriften und Abstände kompakter machen */
+            .card .title { font-size: 0.85rem; padding: 8px 5px 2px 5px; }
+            .card .meta-info { font-size: 0.65rem; padding: 0 5px 5px 5px; }
+            .card-actions { padding: 8px; gap: 4px; }
+            .btn-direct, .btn-tonie { font-size: 0.75rem; padding: 4px 8px; }
+            
+            .filter-bar select { font-size: 0.8rem; padding: 8px 12px; }
+        }
+
         /* Player Bar */
         .player-bar { 
             position: fixed; bottom: 20px; left: 15px; right: 15px;