Merge branch 'main' of github.com:rafaelfoster/oikos

public/styles/layout.css

@@ -80,6 +80,11 @@
   to   { opacity: 0; transform: translateX(20px); }
 }
 
+@keyframes page-crossfade-in {
+  from { opacity: 0; }
+  to   { opacity: 1; }
+}
+
 .page-transition--in-right {
   animation: page-slide-in-right 0.2s var(--ease-out);
 }
@@ -95,6 +100,11 @@
   pointer-events: none;
 }
 
+.page-transition--crossfade {
+  animation: page-crossfade-in 0.18s var(--ease-out);
+  opacity: 1;
+}
+
 @media (prefers-reduced-motion: reduce) {
   .page-transition--in-right,
   .page-transition--in-left {
@@ -105,6 +115,10 @@
   .page-transition--out-right {
     animation: none;
   }
+  .page-transition--crossfade {
+    animation: none;
+    opacity: 1;
+  }
 }
 
 /* --------------------------------------------------------
@@ -144,6 +158,11 @@
   z-index: var(--z-nav);
   backdrop-filter: var(--blur-md) saturate(180%);
   -webkit-backdrop-filter: var(--blur-md) saturate(180%);
+  transition: transform 0.2s var(--ease-out);
+}
+
+.nav-bottom--hidden {
+  transform: translateY(100%);
 }
 
 /* ── Items-Reihe ── */
@@ -197,7 +216,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(4, 1fr);
+  grid-template-columns: repeat(3, 1fr);
   gap: var(--space-3);
   transform: translateY(100%);
   transition: transform 0.25s var(--ease-out);
@@ -644,6 +663,38 @@
   }
 }
 
+/* Tooltip für collapsed Sidebar (nur Icons sichtbar bei 1024–1439px) */
+@media (min-width: 1024px) and (max-width: 1439px) {
+  .nav-sidebar .nav-item {
+    overflow: visible;
+  }
+
+  .nav-sidebar .nav-item::after {
+    content: attr(title);
+    position: absolute;
+    left: calc(var(--sidebar-width) + var(--space-2));
+    top: 50%;
+    transform: translateY(-50%);
+    background: var(--color-surface);
+    color: var(--color-text-primary);
+    padding: var(--space-1) var(--space-3);
+    border-radius: var(--radius-sm);
+    box-shadow: var(--shadow-md);
+    border: 1px solid var(--color-border-subtle);
+    white-space: nowrap;
+    font-size: var(--text-sm);
+    font-weight: var(--font-weight-medium);
+    pointer-events: none;
+    opacity: 0;
+    transition: opacity 0.15s ease;
+    z-index: calc(var(--z-nav) + 10);
+  }
+
+  .nav-sidebar .nav-item:hover::after {
+    opacity: 1;
+  }
+}
+
 /* ================================================================
  * Sidebar Expanded (≥ 1280px) - Labels sichtbar
  * ================================================================ */
@@ -1590,6 +1641,12 @@
   width: min(calc(100% - var(--space-8)), 380px);
 }
 
+@media (min-width: 768px) and (max-width: 1023px) {
+  .toast-container {
+    bottom: var(--space-8);
+  }
+}
+
 @media (min-width: 1024px) {
   .toast-container {
     bottom: var(--space-6);