New Responsive design

public/css/app.css

@@ -16,7 +16,6 @@
 html {
     background-color: #FAFAFB !important;
     font-family: Aleo;
-
 }
 
 h1, h2, h3, h4, h5, h6 {
@@ -39,11 +38,10 @@ h1, h2, h3, h4, h5, h6 {
 }
 
 .header {
-    height: 80px; /* Höhe anpassen */
+    height: 80px;
     align-items: center;
     justify-content: space-between;
     width: calc(100% - 40px);
-
 }
 
 .header .anonymous-actions {
@@ -78,7 +76,6 @@ h1, h2, h3, h4, h5, h6 {
     box-shadow: 0 1px 3px rgba(0,0,0,0.1);
     width: 100%;
     margin-top: -5px;
-
 }
 
 .flexbox {
@@ -88,8 +85,6 @@ h1, h2, h3, h4, h5, h6 {
     padding: 0;
     gap: 1px;
     margin: 0;
-
-
 }
 
 /* Layout */
@@ -182,3 +177,124 @@ th:after {
     font-weight: bold;
     text-decoration: none;
 }
+
+/* ═══════════════════════════════════════════
+   RESPONSIVE – TABLET (640px – 1023px)
+═══════════════════════════════════════════ */
+@media (max-width: 1023px) {
+    .app-layout {
+        margin: 0 !important;
+        height: 100vh;
+        border-radius: 0;
+    }
+
+    .main {
+        margin: 0 !important;
+        border-radius: 0 !important;
+        box-shadow: none !important;
+    }
+
+    .header {
+        display: flex;
+        align-items: center;
+        flex-direction: row;
+        justify-content: space-between;
+        height: 60px;
+        padding: 0;
+        width: 100%;
+    }
+
+    .header .anonymous-actions,
+    .header .user-info {
+        position: static !important;
+        right: auto !important;
+        top: auto !important;
+        width: auto !important;
+        border-radius: 0 !important;
+        background-color: transparent !important;
+        padding: 0 10px !important;
+        text-align: right;
+    }
+
+    .header .left-side {
+        flex: 1;
+        height: auto;
+        padding: 0 15px;
+        margin-top: 0 !important;
+        box-shadow: none;
+        display: flex;
+        flex-direction: column;
+        justify-content: center;
+        width: auto;
+    }
+
+    .header .left-side h1 {
+        font-size: 1.1rem;
+        margin: 0;
+        white-space: nowrap;
+        overflow: hidden;
+        text-overflow: ellipsis;
+    }
+
+    #show_username {
+        position: static !important;
+        top: auto !important;
+        font-size: 0.78rem;
+        text-align: left;
+        width: auto !important;
+    }
+
+    .content {
+        padding: 20px 15px !important;
+    }
+
+    .footer table {
+        font-size: 9pt;
+    }
+
+    .footer table td:first-child {
+        width: auto;
+    }
+}
+
+/* ═══════════════════════════════════════════
+   RESPONSIVE – SMARTPHONE (< 640px)
+═══════════════════════════════════════════ */
+@media (max-width: 639px) {
+    .header {
+        height: 56px;
+    }
+
+    .header .left-side h1 {
+        font-size: 0.95rem;
+    }
+
+    #show_username {
+        display: none !important;
+    }
+
+    .header .anonymous-actions a,
+    .header .user-info a {
+        padding: 8px 8px !important;
+        font-size: 0.8rem;
+    }
+
+    .content {
+        padding: 12px 8px !important;
+    }
+
+    .footer table,
+    .footer table tbody,
+    .footer table tr,
+    .footer table td {
+        display: block;
+        width: 100% !important;
+        text-align: center;
+        line-height: 1.8em;
+    }
+
+    .footer {
+        font-size: 9pt;
+        padding: 6px;
+    }
+}