Merge branch 'ulsklyc:main' into main

public/styles/kitchen-tabs.css

@@ -0,0 +1,86 @@
+/* Modul: Kitchen Tabs Bar
+ * Sticky Segment-Control für Mahlzeiten/Rezepte/Einkauf + Sub-Modul Layout-Fixes
+ */
+
+.kitchen-tabs-bar {
+  display: flex;
+  gap: var(--space-1);
+  padding: var(--space-2) var(--space-4);
+  height: var(--kitchen-tabs-height);
+  box-sizing: border-box;
+  position: sticky;
+  top: 0;
+  z-index: var(--z-sticky);
+  background-color: var(--color-bg);
+  border-bottom: 1px solid var(--color-border-subtle);
+  overflow-x: auto;
+  scrollbar-width: none;
+  -ms-overflow-style: none;
+  flex-shrink: 0;
+}
+
+.kitchen-tabs-bar::-webkit-scrollbar {
+  display: none;
+}
+
+.kitchen-tab {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--space-1);
+  padding: 0 var(--space-3);
+  height: 36px;
+  border-radius: var(--radius-full);
+  border: none;
+  background: transparent;
+  color: var(--color-text-secondary);
+  font-family: inherit;
+  font-size: var(--text-sm);
+  font-weight: var(--font-weight-medium);
+  cursor: pointer;
+  white-space: nowrap;
+  flex-shrink: 0;
+  transition: background-color var(--transition-fast), color var(--transition-fast);
+  -webkit-tap-highlight-color: transparent;
+}
+
+.kitchen-tab:active {
+  transform: scale(0.96);
+  transition-duration: 0.06s;
+}
+
+.kitchen-tab--active {
+  background-color: color-mix(in srgb, var(--active-module-accent, var(--color-accent)) 14%, transparent);
+  color: var(--active-module-accent, var(--color-accent));
+}
+
+.kitchen-tab__icon {
+  width: 16px;
+  height: 16px;
+  flex-shrink: 0;
+}
+
+.kitchen-tab__label {
+  line-height: 1;
+}
+
+/* Mahlzeiten: sticky day-header unterhalb der Tab-Leiste */
+.has-kitchen-tabs .day-header {
+  top: var(--kitchen-tabs-height);
+}
+
+/* Einkauf: Viewport-Höhe um Tab-Leiste reduzieren (Mobile) */
+.has-kitchen-tabs .shopping-page {
+  height: calc(
+    100dvh
+    - var(--nav-bottom-height)
+    - var(--safe-area-inset-bottom)
+    - var(--kitchen-tabs-height)
+  );
+}
+
+/* Einkauf: Viewport-Höhe (Desktop) */
+@media (min-width: 1024px) {
+  .has-kitchen-tabs .shopping-page {
+    height: calc(100dvh - var(--kitchen-tabs-height));
+  }
+}

public/styles/layout.css

@@ -172,7 +172,9 @@
 }
 
 /* ── More-Button (Button-Basis, ansonsten wie nav-item) ── */
-.nav-item--more {
+.nav-item--more,
+.nav-item--kitchen,
+.nav-item--search {
   background: none;
   border: none;
   cursor: pointer;
@@ -216,7 +218,7 @@
   padding: var(--space-4) var(--space-4) calc(var(--space-4) + var(--safe-area-inset-bottom));
   z-index: calc(var(--z-nav) + 2);
   display: grid;
-  grid-template-columns: repeat(3, 1fr);
+  grid-template-columns: repeat(2, 1fr);
   gap: var(--space-3);
   transform: translateY(100%);
   transition: transform 0.25s var(--ease-out);
@@ -226,6 +228,16 @@
   transform: translateY(0);
 }
 
+/* ── More-Sheet Drag-Handle ── */
+.more-sheet__handle {
+  grid-column: 1 / -1;
+  width: 36px;
+  height: 4px;
+  border-radius: var(--radius-full);
+  background-color: var(--color-border);
+  margin: 0 auto var(--space-2);
+}
+
 /* ── More-Item ── */
 .more-item {
   display: flex;
@@ -275,7 +287,7 @@
   background-color: var(--color-surface);
   z-index: calc(var(--z-nav) + 3);
   display: flex;
-  flex-direction: column;
+  flex-direction: column-reverse;
   transform: translateY(100%);
   transition: transform 0.25s var(--ease-out);
 }
@@ -288,8 +300,8 @@
   display: flex;
   align-items: center;
   gap: var(--space-3);
-  padding: calc(var(--space-4) + var(--safe-area-inset-top)) var(--space-4) var(--space-3);
-  border-bottom: 1px solid var(--color-border-subtle);
+  padding: var(--space-3) var(--space-4) calc(var(--space-4) + var(--safe-area-inset-bottom));
+  border-top: 1px solid var(--color-border-subtle);
 }
 
 .search-overlay__input {
@@ -331,7 +343,8 @@
 .search-overlay__results {
   flex: 1;
   overflow-y: auto;
-  padding: var(--space-4);
+  padding: var(--space-4) var(--space-4) var(--space-2);
+  padding-top: calc(var(--space-4) + var(--safe-area-inset-top));
 }
 
 .search-overlay__empty {

public/styles/tokens.css

@@ -351,6 +351,7 @@
   --content-max-width: 1280px;
   --content-max-width-narrow: 720px;
   --cal-hour-height: 56px;
+  --kitchen-tabs-height: 56px;
 
   /* --------------------------------------------------------
    * 13. Sidebar