public/styles.css aktualisiert

public/styles.css

@@ -59,19 +59,79 @@ footer {
     font-size: 0.9em;
 }
 
-/* Buttons */
+/* ===== BUTTONS - MOBILE OPTIMIZED ===== */
 .btn {
     display: inline-block;
-    padding: 10px 20px;
+    padding: 12px 24px;
     background-color: #3498db;
     color: white;
     text-decoration: none;
     border: none;
-    border-radius: 4px;
+    border-radius: 6px;
     cursor: pointer;
-    font-size: 1em;
+    font-size: 1.1em;
-    margin: 5px;
+    margin: 8px 4px;
     transition: background-color 0.3s;
+    min-width: 140px;
+    text-align: center;
+    min-height: 48px;
+    line-height: 1.4;
+}
+
+/* Touch-friendly button sizes for mobile */
+@media (hover: none) and (pointer: coarse) {
+    .btn {
+        padding: 16px 32px;
+        min-width: 160px;
+        min-height: 56px;
+        font-size: 1.2em;
+    }
+}
+
+/* Larger input fields for mobile */
+@media (hover: none) and (pointer: coarse) {
+    .form-group input[type="text"],
+    .form-group input[type="password"],
+    .form-group input[type="number"],
+    .form-group input[type="email"],
+    .form-group select,
+    .form-group textarea {
+        padding: 16px 20px;
+        font-size: 1.2em;
+    }
+}
+
+/* Make action buttons larger and more touch-friendly */
+.actions .btn {
+    min-width: 180px;
+    padding: 14px 28px;
+    margin: 10px 8px;
+}
+
+@media (hover: none) and (pointer: coarse) {
+    .actions .btn {
+        min-width: 200px;
+        padding: 16px 32px;
+        font-size: 1.2em;
+    }
+}
+
+/* Responsive tables for mobile */
+@media (max-width: 768px) {
+    .data-table,
+    .transaction-table {
+        display: block;
+        overflow-x: auto;
+        white-space: nowrap;
+    }
+
+    .data-table th,
+    .data-table td,
+    .transaction-table th,
+    .transaction-table td {
+        padding: 8px 12px;
+        min-width: 100px;
+    }
 }
 
 .btn:hover {