mobile 1st test

custom-login-css.css

@@ -84,4 +84,38 @@ body:not(:has(#loginPage:not(.hide))) .skinHeader {
     margin-top: 30px !important;
     text-align: center;
     padding-top: 20px;
+}
+
+@media screen and (min-width: 1165px) {
+
+}
+
+
+/* Mobile Optimierungen */
+@media screen and (max-width: 768px) {
+    /* Login-Container */
+    #loginPage .padded-left.padded-right.padded-bottom-page {
+        width: 80vw; /* Setze die Breite auf 80% des Viewports */
+        height: auto; /* Höhe automatisch basierend auf Inhalt */
+        max-width: 90%; /* Maximalbreite für kleine Bildschirme */
+        padding: 2em 2em 1em 2em !important; /* Weniger Padding auf kleineren Geräten */
+        transform: translate(-50%, -20%); /* Veränderte Position für mobiles Design */
+        border-radius: 16px; /* Kleine Rundung für kleinere Bildschirme */
+    }
+
+    /* Schriftgröße der Überschrift */
+    #loginPage h1::after {
+        font-size: 24px;
+    }
+
+    /* Square Card */
+    #loginPage .squareCard {
+        width: 30%; /* Breite der Card anpassen für mobile Geräte */
+    }
+
+    /* Verkleinern der Schriftgröße und Anpassung für andere Elemente */
+    #loginPage .readOnlyContent {
+        width: 100%; /* Volle Breite für kleinere Geräte */
+        padding: 1em;
+    }
 }