add mobile

custom-login-css.css

@@ -86,21 +86,77 @@ body:not(:has(#loginPage:not(.hide))) .skinHeader {
     padding-top: 20px;
 }
 
-@media screen and (min-width: 1165px) {
+@media screen and (max-width: 1165px) {
-
+    #login-logo {
+       max-width: 100%;
+       height: auto;
+    }
 }
 
+@media screen and (max-width: 1050px) {
+    /* Login-Container */
+    #loginPage .padded-left.padded-right.padded-bottom-page {
+        width: 38vw;
+        height: 85vh;
+        max-width: 70%;
+        padding: 2em 2em 1em 2em !important;
+        border-radius: 20px;
+    }
+
+    /* Schriftgröße der Überschrift */
+    #loginPage h1::after {
+        font-size: 28px;
+    }
+
+    /* Square Card */
+    #loginPage .squareCard {
+        width: 26%;
+    }
+
+    /* Verkleinern der Schriftgröße und Anpassung für andere Elemente */
+    #loginPage .readOnlyContent {
+        width: 100%;
+        padding: 1em;
+    }
+}
+
+
+@media screen and (max-width: 860px) {
+    /* Login-Container */
+    #loginPage .padded-left.padded-right.padded-bottom-page {
+        width: 50vw;
+        height: 95vh;
+        max-width: 80%;
+        padding: 2em 2em 1em 2em !important;
+        border-radius: 18px;
+    }
+
+    /* Schriftgröße der Überschrift */
+    #loginPage h1::after {
+        font-size: 26px;
+    }
+
+    /* Square Card */
+    #loginPage .squareCard {
+        width: 28%;
+    }
+
+    /* Verkleinern der Schriftgröße und Anpassung für andere Elemente */
+    #loginPage .readOnlyContent {
+        width: 100%;
+        padding: 1em;
+    }
+}
 
 /* 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 */
+        width: 80vw;
-        height: auto; /* Höhe automatisch basierend auf Inhalt */
+        height: 95vh;
-        max-width: 90%; /* Maximalbreite für kleine Bildschirme */
+        max-width: 90%;
-        padding: 2em 2em 1em 2em !important; /* Weniger Padding auf kleineren Geräten */
+        padding: 2em 2em 1em 2em !important;
-        transform: translate(-50%, -20%); /* Veränderte Position für mobiles Design */
+        border-radius: 16px;
-        border-radius: 16px; /* Kleine Rundung für kleinere Bildschirme */
     }
 
     /* Schriftgröße der Überschrift */
@@ -110,12 +166,12 @@ body:not(:has(#loginPage:not(.hide))) .skinHeader {
 
     /* Square Card */
     #loginPage .squareCard {
-        width: 30%; /* Breite der Card anpassen für mobile Geräte */
+        width: 30%;
     }
 
     /* Verkleinern der Schriftgröße und Anpassung für andere Elemente */
     #loginPage .readOnlyContent {
-        width: 100%; /* Volle Breite für kleinere Geräte */
+        width: 100%;
         padding: 1em;
     }
 }