anpasssen auf mobile geräten

assets/styles.css

@@ -1,4 +1,3 @@
-
 body {
     font-family: Arial, sans-serif;
     margin: 0;
@@ -8,51 +7,51 @@ body {
 
 header {
     background: #ccc;
-  padding: 10px;
+    padding: 1rem;
     text-align: left;
 }
 
 .logo {
-  height: 60px;
+    height: 4rem; /* Relative H<>he */
 }
 
 main {
-  padding: 50px 20px;
+    padding: 5rem 2rem; /* Relative Werte f<>r Padding */
 }
 
 h1 {
-  font-size: 48px;
+    font-size: 3rem; /* Relative Schriftgr<67><72>e */
     margin: 0;
 }
 
 h2 {
-  font-size: 24px;
+    font-size: 1.5rem;
     color: #666;
-  margin-bottom: 30px;
+    margin-bottom: 2rem;
 }
 
 .buttons {
     display: flex;
     justify-content: center;
-  gap: 15px;
+    gap: 1rem;
 }
 
 .btn {
-  padding: 10px 25px;
-  font-size: 16px;
+    padding: 0.6rem 2rem; /* Relative Werte f<>r Padding */
+    font-size: 1rem; /* Relative Schriftgr<67><72>e */
     color: white;
     border: none;
-  border-radius: 5px;
+    border-radius: 0.5rem;
     cursor: pointer;
 }
 
-.btn.green {
+    .btn.green {
         background-color: #28a745;
-}
+    }
 
-.btn.red {
+    .btn.red {
         background-color: #dc3545;
-}
+    }
 
 .overlay {
     position: fixed;
@@ -68,47 +67,47 @@ h2 {
 
 .form-box {
     background: white;
-  padding: 30px;
-  border-radius: 10px;
+    padding: 2rem;
+    border-radius: 1rem;
     width: 90%;
-  max-width: 400px;
+    max-width: 25rem; /* Maximale Breite relativ */
     position: relative;
     text-align: left;
 }
 
-.form-box h3 {
+    .form-box h3 {
         text-align: center;
-}
+    }
 
-.form-box p {
-  font-size: 12px;
+    .form-box p {
+        font-size: 0.75rem; /* Relativer Wert */
         text-align: center;
-}
+    }
 
-.form-box form {
+    .form-box form {
         display: flex;
         flex-direction: column;
-  gap: 10px;
-  margin-top: 15px;
-}
+        gap: 1rem; /* Relative Gap */
+        margin-top: 1.5rem;
+    }
 
-.form-box input {
-  padding: 10px;
-  font-size: 14px;
-}
+    .form-box input {
+        padding: 1rem;
+        font-size: 0.875rem; /* Relativer Wert */
+    }
 
-.form-box button {
+    .form-box button {
         background: black;
         color: white;
-  padding: 10px;
-  font-size: 16px;
+        padding: 1rem;
+        font-size: 1rem;
         border: none;
-  margin-top: 10px;
+        margin-top: 1rem;
         cursor: pointer;
-}
+    }
 
 .form-logo {
     display: block;
-  margin: 20px auto 0;
-  height: 40px;
+    margin: 2rem auto 0;
+    height: 2.5rem; /* Relative H<>he */
 }