Merge branch 'main' into DEV

WEBROOT/services/vergabe.php

@@ -25,11 +25,10 @@ if ($_SERVER['REQUEST_METHOD'] === 'POST' && isset($_POST['add_entry'])) {
     redirectToWebsite((new getSpecificData())->getReferer());
     exit;
 }
-
 ?>
+
 <div class="arbeitsberichte-wrapper">
     <div class="vergabe-form">
-
         <form method="POST" class="vergabe-grid">
 
             <div class="form-group">
@@ -52,11 +51,10 @@ if ($_SERVER['REQUEST_METHOD'] === 'POST' && isset($_POST['add_entry'])) {
                 <input type="text" name="was" placeholder="Gegenstand eingeben" required>
             </div>
 
-            <button type="submit" name="add_entry">
+            <button type="submit" name="add_entry" class="btn-submit-vergabe">
                 💾 Speichern
             </button>
 
         </form>
-
     </div>
 </div>

WEBROOT/style.css

@@ -1073,7 +1073,6 @@ body.dark-mode select {
 }
 
 /* ===== Vergabe Formular ===== */
-
 .vergabe-form {
     background: var(--card-bg);
     border: 1px solid var(--card-border);
@@ -1084,9 +1083,11 @@ body.dark-mode select {
     box-shadow: 0 4px 10px rgba(0, 0, 0, 0.05);
 }
 
+/* Desktop-First Grid Layout */
 .vergabe-grid {
     display: grid;
-    grid-template-columns: 170px 170px 1.3fr 2fr auto;
+    /* Nutzt minmax, damit die Datumsfelder auf kleineren Desktop-Monitoren nicht zerquetschen */
+    grid-template-columns: minmax(140px, 1fr) minmax(140px, 1fr) 1.3fr 2fr auto;
     gap: 15px;
     align-items: end;
 }
@@ -1096,37 +1097,124 @@ body.dark-mode select {
 }
 
 .vergabe-grid input,
-.vergabe-grid button {
+.btn-submit-vergabe {
+    width: 100%;
+    /* Wichtig für Responsiveness */
     padding: 10px 16px;
     font-size: 15px;
     border-radius: 5px;
+    box-sizing: border-box;
 }
 
 body.dark-mode input[type="date"] {
     color-scheme: dark;
 }
 
-.vergabe-grid button:hover {
-    opacity: .9;
+/* Dedizierter Speicher-Button Style */
+.btn-submit-vergabe {
+    background: var(--btn-add-bg);
+    color: white;
+    border: none;
+    font-weight: 600;
+    cursor: pointer;
+    height: 43px;
+    /* Gleicht die Höhe der Inputs inklusive Padding/Border perfekt aus */
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    transition: background-color 0.2s ease, transform 0.1s ease;
+}
+
+.btn-submit-vergabe:hover {
+    opacity: 0.9;
     transform: translateY(-1px);
 }
 
-@media (max-width: 1000px) {
+.btn-submit-vergabe:active {
+    transform: scale(0.98);
+}
+
+/* ===== Mobile Optimierung (Tablets & Smartphones) ===== */
+@media (max-width: 1024px) {
     .vergabe-grid {
+        /* Schaltet auf Mobilgeräten in eine saubere 1-spaltige Liste um */
         grid-template-columns: 1fr;
+        gap: 12px;
+        /* Schafft vertikalen Abstand zwischen den Feldern */
     }
 
-    .vergabe-grid button {
-        appearance: none;
-        -webkit-appearance: none;
+    .btn-submit-vergabe {
+        margin-top: 5px;
+        height: 48px;
+        /* Größere Touch-Fläche für Smartphones */
+        font-size: 1rem;
+    }
+}
 
-        background: var(--btn-add-bg);
-        color: white;
-        border: none;
-        border-radius: 6px;
-        padding: 0 24px;
-        height: 46px;
-        font-size: .95rem;
-        font-weight: 600;
+/* ===== Globale Mobile Anpassungen ===== */
+@media (max-width: 768px) {
+
+    /* 1. Haupt-Layout untereinander brechen lassen */
+    .main {
+        flex-direction: column;
+        height: calc(100vh - 60px);
+        /* Behält die feste Gesamthöhe bei */
+        overflow-y: auto;
+        /* Erlaubt das Scrollen der gesamten Seite falls nötig */
+    }
+
+    /* 2. Sidebar nimmt volle Breite ein und passt sich dem Inhalt an */
+    .sidebar {
+        width: 100%;
+        height: auto;
+        /* Keine feste Höhe mehr auf Mobile */
+        border-right: none;
+        border-bottom: 1px solid #333;
+        /* Trennlinie nach unten statt nach rechts */
+        overflow-y: visible;
+        /* Scrollbar hier deaktivieren */
+    }
+
+    /* 3. Inhaltsbereich nimmt den Rest des Platzes ein */
+    .content {
+        width: 100%;
+        height: auto;
+        overflow-y: visible;
+        /* Verhindert doppelte Scrollbalken */
+        padding: 15px 10px;
+    }
+
+    /* 4. Das Vergabe-Formular bricht sauber in eine Spalte um */
+    .vergabe-grid {
+        grid-template-columns: 1fr !important;
+        /* Erzwingt eine Spalte */
+        gap: 12px;
+    }
+
+    /* 5. Inputs und Buttons nehmen die volle Breite der Box ein */
+    .vergabe-grid input,
+    .btn-submit-vergabe,
+    .vergabe-grid button {
+        width: 100% !important;
+        box-sizing: border-box;
+    }
+
+    /* Optional: Header-Buttons (Logout / Light Mode) für Mobile optimieren, falls sie überlappen */
+    #darkModeToggle,
+    #logoutButton {
+        position: static;
+        /* Entfernt absolute Positionierung im mobilen Header */
+        margin: 5px;
+        padding: 6px 12px;
+        font-size: 0.9rem;
+    }
+
+    header {
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        gap: 10px;
+        padding: 10px;
+        height: auto;
     }
 }