gut

static/css/main.css

@@ -65,6 +65,7 @@
   
   .container {
     display: flex;
+    flex-wrap: wrap;
     height: 100%;
     width: 100%;
   }
@@ -83,35 +84,34 @@
     height: 100%;
   }
   
-  #bereich-a .top {
-    margin-top: 10px;
-    height: 35px;
+  .top {
     display: grid;
-    width: 100%;
+    gap: 0px;
     grid-template-columns: 68.96% 6.92% 10.34% 13.79%;
+    margin-top: 10px;
   }
   
-  #bereich-a .top > div {
+  .top > div {
     background-color: var(--bg); /* Beispiel für Formularfelder */
   }
 
-  #bereich-a .top input {
-    width: 100%; /* Das Textfeld nimmt die gesamte Breite der Spalte ein */
+  .top input {
+    width: 100%; /* Vollständige Breite */
     padding: 8px;
     border: 1px solid #ddd;
     border-radius: var(--radius); /* Abgerundete Ecken */
     background-color: #fff;
     font-size: 14px;
     color: var(--text);
-    transition: all 0.3s ease; /* Für weiche Übergänge */
+    transition: all 0.3s ease;
   }
   
-  #bereich-a .top input::placeholder {
+  .top input::placeholder {
     color: #aaa; /* Platzhalter in einer helleren Farbe */
     font-style: italic;
   }
   
-  #bereich-a .top input:focus {
+  .top input:focus {
     border-color: var(--accent); /* Die Rahmenfarbe beim Fokus */
     outline: none; /* Entfernt den Standard-Fokusrahmen */
   }