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

index.html

@@ -39,19 +39,7 @@
             </div>
         </div>
 
-        <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>
-                <span></span>
-                <span></span>
-            </button>
-            <nav class="dashboard-menu-panel" id="dashboardMenuPanel" aria-label="Dashboard Aktionen" hidden>
-                <span class="dashboard-menu-user" id="dashboardUserBadge" hidden></span>
-                <a class="dashboard-menu-item" id="favoritesLink" href="/favorites.html" hidden>Favoriten verwalten</a>
-                <button class="dashboard-menu-item" id="dashboardLoginButton" type="button">SSO Login</button>
-                <button class="dashboard-menu-item is-danger" id="dashboardLogoutButton" type="button" hidden>Abmelden</button>
-            </nav>
-        </div>
     </header>
 
     <main class="shell">
@@ -64,6 +52,19 @@
                     </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>
+                        <span></span>
+                        <span></span>
+                    </button>
+                    <nav class="dashboard-menu-panel" id="dashboardMenuPanel" aria-label="Dashboard Aktionen" hidden>
+                        <span class="dashboard-menu-user" id="dashboardUserBadge" hidden></span>
+                        <a class="dashboard-menu-item" id="favoritesLink" href="/favorites.html" hidden>Favoriten verwalten</a>
+                        <button class="dashboard-menu-item" id="dashboardLoginButton" type="button">SSO Login</button>
+                        <button class="dashboard-menu-item is-danger" id="dashboardLogoutButton" type="button" hidden>Abmelden</button>
+                    </nav>
+                </div>
             </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;
     }