Integrate dashboard hamburger menu inside search box and swap control-bar layout

index.html

@@ -39,6 +39,19 @@
             </div>
         </div>
 
+
+    </header>
+
+    <main class="shell">
+        <section class="control-bar" aria-label="Dienste filtern">
+            <label class="search-box">
+                <span class="search-icon" aria-hidden="true">
+                    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round">
+                        <circle cx="11" cy="11" r="7"></circle>
+                        <path d="m20 20-3.5-3.5"></path>
+                    </svg>
+                </span>
+                <input id="serviceSearch" type="search" placeholder="Dienst suchen" autocomplete="off">
                 <div class="dashboard-menu">
                     <button class="dashboard-menu-button" id="dashboardMenuButton" type="button" aria-label="Menue oeffnen" aria-expanded="false" aria-controls="dashboardMenuPanel">
                         <span></span>
@@ -52,18 +65,6 @@
                         <button class="dashboard-menu-item is-danger" id="dashboardLogoutButton" type="button" hidden>Abmelden</button>
                     </nav>
                 </div>
-    </header>
-
-    <main class="shell">
-        <section class="control-bar" aria-label="Dienste filtern">
-            <label class="search-box">
-                <span class="search-icon" aria-hidden="true">
-                    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round">
-                        <circle cx="11" cy="11" r="7"></circle>
-                        <path d="m20 20-3.5-3.5"></path>
-                    </svg>
-                </span>
-                <input id="serviceSearch" type="search" placeholder="Dienst suchen" autocomplete="off">
             </label>
 
             <div class="view-toggle" role="tablist" aria-label="Ansicht">

style.css

@@ -64,7 +64,7 @@ input {
 
 .hero {
     display: grid;
-    grid-template-columns: minmax(0, 1fr) auto auto;
+    grid-template-columns: minmax(0, 1fr) auto;
     gap: 16px;
     align-items: start;
     padding: 32px 0 22px;
@@ -132,6 +132,28 @@ h1 {
     margin-top: 12px;
 }
 
+.search-box .dashboard-menu {
+    position: absolute;
+    right: 4px;
+    top: 50%;
+    transform: translateY(-50%);
+    margin-top: 0;
+    z-index: 30;
+}
+
+.search-box .dashboard-menu-button {
+    width: 36px;
+    height: 36px;
+    background: transparent;
+    border: none;
+}
+
+.search-box .dashboard-menu-button:hover,
+.search-box .dashboard-menu-button.is-open {
+    background: rgba(103, 232, 249, 0.1);
+    border-color: transparent;
+}
+
 .dashboard-menu-button {
     width: 42px;
     height: 42px;
@@ -259,7 +281,7 @@ main {
     top: 0;
     z-index: 10;
     display: grid;
-    grid-template-columns: minmax(240px, 360px) 1fr;
+    grid-template-columns: 1fr minmax(240px, 360px);
     gap: 10px 12px;
     align-items: center;
     padding: 12px 0;
@@ -270,6 +292,12 @@ main {
     position: relative;
     display: flex;
     align-items: center;
+    grid-column: 2;
+}
+
+.view-toggle {
+    grid-column: 1;
+    grid-row: 1;
 }
 
 .search-icon {
@@ -284,7 +312,7 @@ main {
 .search-box input {
     width: 100%;
     height: 44px;
-    padding: 0 14px 0 40px;
+    padding: 0 52px 0 40px;
     color: var(--text);
     background: rgba(17, 22, 36, 0.92);
     border: 1px solid var(--border);
@@ -297,6 +325,13 @@ main {
     box-shadow: 0 0 0 3px rgba(103, 232, 249, 0.08);
 }
 
+.search-box input::-webkit-search-decoration,
+.search-box input::-webkit-search-cancel-button,
+.search-box input::-webkit-search-results-button,
+.search-box input::-webkit-search-results-decoration {
+    display: none;
+}
+
 .category-filters {
     margin: 16px 0 6px 0;
     display: flex;
@@ -1054,12 +1089,6 @@ main {
         grid-column: 1 / 2;
     }
 
-    .dashboard-menu {
-        grid-column: 2 / 3;
-        grid-row: 1;
-        justify-self: end;
-    }
-
     .admin-actions {
         justify-content: flex-start;
     }
@@ -1093,15 +1122,21 @@ main {
         grid-template-columns: 1fr;
     }
 
-    .segments {
+    .search-box {
-        justify-content: flex-start;
+        grid-column: auto;
     }
 
     .view-toggle {
+        grid-column: auto;
+        grid-row: auto;
         width: 100%;
         grid-template-columns: repeat(3, 1fr);
     }
 
+    .segments {
+        justify-content: flex-start;
+    }
+
     .view-option {
         min-width: 0;
     }