CSS

public/css/style.css

@@ -1,89 +1,167 @@
 html, body {
     margin: 0;
-    width: 100vw;
-    height: 100vh;
+    width: 100%;
+    min-height: 100vh;
     background-color: #4b0600;
+    box-sizing: border-box;
+    overflow-x: hidden;
+}
+
+*, *:before, *:after {
+    box-sizing: inherit;
 }
 
 .ticker {
     background-color: #0c0;
     height: 3vh;
+    min-height: 24px;
 }
 
-
 .header {
     background-color: #999;
-    height: 20vh;
+    min-height: 20vh;
     margin: 0;
-
+    display: flex;
+    flex-wrap: wrap;
 }
 
 .header-main {
-    width: 20vw;
-    float: left;
+    width: 20%;
     height: 20vh;
     margin: 0;
+    display: flex;
+    justify-content: center;
+    align-items: center;
 }
 
 .banner {
-    width: 60vw;
+    width: 60%;
     height: 20vh;
-    float: left;
-    align-content: center;
+    display: flex;
+    justify-content: center;
+    align-items: center;
 }
 
 .banner img {
-    margin-left: auto;
-    margin-right: auto;
+    max-width: 100%;
+    height: auto;
     display: block;
 }
 
 .language-area {
-    width: 20vw;
+    width: 20%;
     height: 20vh;
-    float: left;
     background-color: #ccc;
-    border: 2vh;
+    padding: 10px;
 }
 
 .language {
-    margin: 1vw;
+    margin: 5px;
+    display: flex;
+    gap: 10px;
+    justify-content: center;
+}
+
+.language img {
+    cursor: pointer;
 }
 
 .login-status {
     text-align: center;
+    font-size: 0.9em;
 }
 
 #logo {
-    margin: 2vh;
-    min-height: 12.5vh;
-    max-height: 35vh;
+    max-width: 90%;
+    max-height: 18vh;
 }
 
-
 .main {
     display: flex;
     flex-direction: row;
     margin: 0;
     min-height: 77vh;
-    width: 100vw;
+    width: 100%;
 }
 
 .navbar {
     background-color: #ccc;
-    width: 20vw;
+    width: 200px;
+    flex-shrink: 0;
 }
 
 .content {
     background-color: #dcccaa;
-    width: 80vw;
-    padding-left: 1vw;
+    flex-grow: 1;
+    padding: 15px;
+}
+
+.navbar ul {
+    list-style-type: none;
+    padding: 10px;
+    margin: 0;
+}
+
+.navbar li {
+    margin-bottom: 8px;
+}
+
+.navbar a {
+    text-decoration: none;
+    color: #333;
+    display: block;
+    padding: 5px;
+}
+
+.navbar a:hover {
+    background-color: #bbb;
+}
+
+@media (max-width: 768px) {
+    .header {
+        flex-direction: column;
+        height: auto;
+    }
+
+    .header-main, .banner, .language-area {
+        width: 100%;
+        height: auto;
+        padding: 10px;
+    }
+
+    .main {
+        flex-direction: column;
+    }
+
+    .navbar {
+        width: 100%;
+    }
+
+    .navbar ul {
+        display: flex;
+        flex-wrap: wrap;
+        gap: 10px;
+        justify-content: center;
+    }
+
+    .content {
+        width: 100%;
+    }
+
+    #logo {
+        max-height: 100px;
+    }
+
+    .banner img {
+        max-width: 100%;
+    }
 }
 
 .eingabemaske {
     border: 5px inset;
     font-size: 1.2em;
     padding: 0.5em;
+    overflow-x: auto;
 }
 
 .eingabemaske table, th, td {
@@ -92,6 +170,7 @@ html, body {
 
 .eingabemaske input {
     padding: 0.5em;
+    max-width: 100%;
 }
 
 .eingabemaske button {
@@ -103,7 +182,8 @@ html, body {
 
 #fehlermeldung {
     border: 4px outset;
-    width: 50vw;
+    width: 100%;
+    max-width: 500px;
 }
 
 nav {
@@ -111,7 +191,7 @@ nav {
 }
 
 .w-5 {
-    width: 5vw;
+    width: 5%;
 }
 
 .h-5 {