changes to the style and formating of the Buttons

Web/templates/main_admin.html

@@ -562,26 +562,54 @@
        align-items: center;
     }
    
-    .navigation-buttons {
-        display: flex;
-        justify-content: center;
-        gap: 10px;
+    .items-navigation {
+        display: grid;
+        grid-template-columns: 46px minmax(0, 1fr) 46px;
+        align-items: center;
+        column-gap: 20px;
+        width: calc(100% + 132px);
+        margin-left: -66px;
         margin-top: 20px;
     }
 
-    .navigation-buttons .prev-button,
-    .navigation-buttons .next-button {
-        background-color: #007bff;
-        color: #fff;
-        border: none;
-        cursor: pointer;
-        padding: 10px;
-        border-radius: 5px;
+    .navigation-button-slot {
+        display: flex;
+        justify-content: center;
     }
 
-    .navigation-buttons .prev-button:hover,
-    .navigation-buttons .next-button:hover {
-        background-color: #0056b3;
+    .navigation-button {
+        display: inline-flex;
+        align-items: center;
+        justify-content: center;
+        width: 46px;
+        height: 46px;
+        padding: 0;
+        background: linear-gradient(145deg, #1687f5, #0067d9);
+        color: #fff;
+        border: 2px solid rgba(255, 255, 255, 0.9);
+        box-shadow: 0 8px 18px rgba(0, 82, 170, 0.28), 0 2px 5px rgba(15, 23, 42, 0.18);
+        cursor: pointer;
+        border-radius: 50%;
+        font-size: 1.35rem;
+        font-weight: 700;
+        line-height: 1;
+        transition: transform 160ms ease, box-shadow 160ms ease, background 160ms ease;
+        z-index: 1;
+    }
+
+    .navigation-button:hover {
+        background: linear-gradient(145deg, #319bff, #0058bd);
+        box-shadow: 0 11px 22px rgba(0, 82, 170, 0.36), 0 3px 7px rgba(15, 23, 42, 0.2);
+        transform: translateY(-2px) scale(1.04);
+    }
+
+    .navigation-button:active {
+        transform: translateY(0) scale(0.96);
+    }
+
+    .navigation-button:focus-visible {
+        outline: 3px solid rgba(37, 99, 235, 0.35);
+        outline-offset: 3px;
     }
 
     /* Modal styles */
@@ -1633,7 +1661,13 @@
         }
         
         /* Navigation buttons mobile */
-        .navigation-buttons {
+        .items-navigation {
+            display: block !important;
+            width: 100% !important;
+            margin-left: 0 !important;
+        }
+
+        .navigation-button-slot {
             display: none !important; /* Hide horizontal navigation on mobile */
         }
         
@@ -1946,7 +1980,7 @@
     /* Standardized button styles across the application */
     .search-button, .scan-button, .filter-toggle, .clear-filter, 
     .add-new-btn, .popup-close-button, .prev-image-button, .next-image-button,
-    .navigation-buttons .prev-button, .navigation-buttons .next-button {
+    .navigation-button {
         display: inline-flex;
         align-items: center;
         justify-content: center;
@@ -2543,12 +2577,16 @@ document.addEventListener('DOMContentLoaded', ()=>{
             <span>Anzahl</span>
         </div>
 
-        <div id="items-container" class="items-container">
-            <!-- Items will be dynamically loaded here -->
-        </div>
-        <div class="navigation-buttons">
-            <button class="prev-button" onclick="scrollPrev()">&#10094;</button>
-            <button class="next-button" onclick="scrollNext()">&#10095;</button>
+        <div class="items-navigation">
+            <div class="navigation-button-slot">
+                <button class="navigation-button prev-button" type="button" onclick="scrollPrev()" aria-label="Vorherige Elemente">&#10094;</button>
+            </div>
+            <div id="items-container" class="items-container">
+                <!-- Items will be dynamically loaded here -->
+            </div>
+            <div class="navigation-button-slot">
+                <button class="navigation-button next-button" type="button" onclick="scrollNext()" aria-label="Nächste Elemente">&#10095;</button>
+            </div>
         </div>
     </div>
     <div id="item-modal" class="item-modal">