fix: Mobile-Optimierung v2 — Header-Controls stacken, Bottom-Nav Mehr-Menü, Split-Layouts responsiv

client/src/components/layout/BottomNav.tsx

@@ -1,9 +1,9 @@
 /**
  * BottomNav — Mobile Bottom Navigation
- * Zeigt die 5 wichtigsten Seiten als Icons
+ * 5 primäre Tabs + "Mehr" Drawer für restliche 4 Seiten
- * "Mehr" öffnet das volle Menü
  */
 
+import { useState } from 'react';
 import { Link } from 'wouter';
 import {
   LayoutDashboard,
@@ -11,6 +11,12 @@ import {
   FileEdit,
   Calendar,
   BarChart2,
+  MoreHorizontal,
+  CheckSquare,
+  Megaphone,
+  Package,
+  Settings,
+  X,
 } from 'lucide-react';
 
 interface BottomNavProps {
@@ -25,60 +31,161 @@ const primaryNav = [
   { label: 'Analytics', path: '/analytics', icon: BarChart2 },
 ];
 
-export function BottomNav({ currentPath }: BottomNavProps) {
+const moreNav = [
-  return (
+  { label: 'Freigaben', path: '/approvals', icon: CheckSquare },
-    <nav
+  { label: 'Kampagnen', path: '/campaigns', icon: Megaphone },
-      className="fixed bottom-0 left-0 right-0 flex items-center justify-around"
+  { label: 'Produkte', path: '/products', icon: Package },
-      style={{
+  { label: 'Einstellungen', path: '/settings', icon: Settings },
-        background: 'var(--atlas-surface)',
+];
-        borderTop: '1px solid var(--atlas-border)',
-        height: '60px',
-        zIndex: 50,
-        paddingBottom: 'env(safe-area-inset-bottom)',
-      }}
-    >
-      {primaryNav.map(item => {
-        const isActive = item.path === '/'
-          ? currentPath === '/'
-          : currentPath.startsWith(item.path);
-        const Icon = item.icon;
 
-        return (
+export function BottomNav({ currentPath }: BottomNavProps) {
-          <Link key={item.path} href={item.path}>
+  const [moreOpen, setMoreOpen] = useState(false);
-            <div
+
-              className="flex flex-col items-center justify-center gap-0.5 px-3 py-1 rounded-lg transition-all"
+  const isMoreActive = moreNav.some(item =>
-              style={{
+    item.path === '/' ? currentPath === '/' : currentPath.startsWith(item.path)
-                minWidth: '56px',
+  );
-                color: isActive ? 'var(--atlas-cyan)' : 'var(--muted-foreground)',
+
-                background: isActive ? 'oklch(0.82 0.18 210 / 0.08)' : 'transparent',
+  return (
-              }}
+    <>
-            >
+      {/* More Drawer Overlay */}
-              <Icon size={20} />
+      {moreOpen && (
-              <span
+        <>
+          <div
+            className="fixed inset-0 z-50"
+            style={{ background: 'rgba(0,0,0,0.7)', backdropFilter: 'blur(4px)' }}
+            onClick={() => setMoreOpen(false)}
+          />
+          <div
+            className="fixed left-0 right-0 z-50 rounded-t-2xl"
+            style={{
+              bottom: '60px',
+              background: 'var(--atlas-surface)',
+              borderTop: '1px solid var(--atlas-border)',
+              animation: 'slideInUp 0.22s cubic-bezier(0.23,1,0.32,1)',
+            }}
+          >
+            {/* Handle */}
+            <div className="flex justify-center pt-3 pb-1">
+              <div className="w-10 h-1 rounded-full" style={{ background: 'var(--atlas-border)' }} />
+            </div>
+            {/* Header */}
+            <div className="flex items-center justify-between px-5 py-2">
+              <span className="text-xs font-semibold" style={{ color: 'var(--muted-foreground)', fontFamily: 'var(--font-mono)', letterSpacing: '0.08em' }}>
+                WEITERE SEITEN
+              </span>
+              <button onClick={() => setMoreOpen(false)} style={{ color: 'var(--muted-foreground)' }}>
+                <X size={16} />
+              </button>
+            </div>
+            {/* Items */}
+            <div className="grid grid-cols-4 gap-1 px-4 pb-6">
+              {moreNav.map(item => {
+                const isActive = item.path === '/'
+                  ? currentPath === '/'
+                  : currentPath.startsWith(item.path);
+                const Icon = item.icon;
+                return (
+                  <Link key={item.path} href={item.path} onClick={() => setMoreOpen(false)}>
+                    <div
+                      className="flex flex-col items-center justify-center gap-1.5 py-3 rounded-xl transition-all"
+                      style={{
+                        background: isActive ? 'oklch(0.82 0.18 210 / 0.12)' : 'var(--atlas-navy)',
+                        border: `1px solid ${isActive ? 'oklch(0.82 0.18 210 / 0.3)' : 'var(--atlas-border)'}`,
+                        color: isActive ? 'var(--atlas-cyan)' : 'var(--muted-foreground)',
+                      }}
+                    >
+                      <Icon size={22} />
+                      <span style={{ fontSize: '0.6rem', fontFamily: 'var(--font-body)', fontWeight: isActive ? 600 : 400 }}>
+                        {item.label}
+                      </span>
+                    </div>
+                  </Link>
+                );
+              })}
+            </div>
+          </div>
+        </>
+      )}
+
+      {/* Bottom Nav Bar */}
+      <nav
+        className="fixed bottom-0 left-0 right-0 flex items-center justify-around"
+        style={{
+          background: 'var(--atlas-surface)',
+          borderTop: '1px solid var(--atlas-border)',
+          height: '60px',
+          zIndex: 50,
+          paddingBottom: 'env(safe-area-inset-bottom)',
+        }}
+      >
+        {primaryNav.map(item => {
+          const isActive = item.path === '/'
+            ? currentPath === '/'
+            : currentPath.startsWith(item.path);
+          const Icon = item.icon;
+
+          return (
+            <Link key={item.path} href={item.path}>
+              <div
+                className="flex flex-col items-center justify-center gap-0.5 px-2 py-1 rounded-lg transition-all relative"
                 style={{
-                  fontSize: '0.6rem',
+                  minWidth: '52px',
-                  fontFamily: 'var(--font-body)',
+                  color: isActive ? 'var(--atlas-cyan)' : 'var(--muted-foreground)',
-                  letterSpacing: '0.02em',
-                  fontWeight: isActive ? 600 : 400,
                 }}
               >
-                {item.label}
+                <Icon size={20} strokeWidth={isActive ? 2.2 : 1.7} />
-              </span>
+                <span
-              {isActive && (
-                <div
-                  className="absolute bottom-0 rounded-full"
                   style={{
-                    width: '4px',
+                    fontSize: '0.58rem',
-                    height: '4px',
+                    fontFamily: 'var(--font-body)',
-                    background: 'var(--atlas-cyan)',
+                    letterSpacing: '0.01em',
-                    boxShadow: '0 0 6px var(--atlas-cyan)',
+                    fontWeight: isActive ? 600 : 400,
                   }}
-                />
+                >
-              )}
+                  {item.label}
-            </div>
+                </span>
-          </Link>
+                {isActive && (
-        );
+                  <div
-      })}
+                    className="absolute -bottom-0.5 left-1/2 -translate-x-1/2 rounded-full"
-    </nav>
+                    style={{
+                      width: '20px',
+                      height: '2px',
+                      background: 'var(--atlas-cyan)',
+                      boxShadow: '0 0 8px var(--atlas-cyan)',
+                    }}
+                  />
+                )}
+              </div>
+            </Link>
+          );
+        })}
+
+        {/* Mehr Button */}
+        <button
+          onClick={() => setMoreOpen(!moreOpen)}
+          className="flex flex-col items-center justify-center gap-0.5 px-2 py-1 rounded-lg transition-all"
+          style={{
+            minWidth: '52px',
+            color: isMoreActive ? 'var(--atlas-cyan)' : 'var(--muted-foreground)',
+          }}
+        >
+          <MoreHorizontal size={20} strokeWidth={isMoreActive ? 2.2 : 1.7} />
+          <span style={{ fontSize: '0.58rem', fontFamily: 'var(--font-body)', fontWeight: isMoreActive ? 600 : 400 }}>
+            Mehr
+          </span>
+          {isMoreActive && (
+            <div
+              className="absolute -bottom-0.5 left-1/2 -translate-x-1/2 rounded-full"
+              style={{
+                width: '20px',
+                height: '2px',
+                background: 'var(--atlas-cyan)',
+                boxShadow: '0 0 8px var(--atlas-cyan)',
+              }}
+            />
+          )}
+        </button>
+      </nav>
+    </>
   );
 }

client/src/index.css

@@ -643,3 +643,55 @@
     flex-wrap: wrap;
   }
 }
+
+/* ── Mobile Page Header: stacks vertically on small screens ── */
+.atlas-page-header-row {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 0.75rem;
+}
+@media (max-width: 640px) {
+  .atlas-page-header-row {
+    flex-direction: column;
+    align-items: flex-start;
+    gap: 0.5rem;
+  }
+  .atlas-page-header-row .atlas-header-controls {
+    width: 100%;
+    display: flex;
+    flex-wrap: wrap;
+    gap: 0.4rem;
+  }
+  .atlas-page-header-row .atlas-header-controls > * {
+    flex: 1 1 auto;
+    min-width: 80px;
+  }
+  /* Compact page title on mobile */
+  .atlas-page-header-row h1 {
+    font-size: 1.25rem !important;
+  }
+  .atlas-page-header-row p {
+    font-size: 0.75rem !important;
+    display: -webkit-box;
+    -webkit-line-clamp: 2;
+    -webkit-box-orient: vertical;
+    overflow: hidden;
+  }
+}
+
+/* ── Split layouts: stack on mobile ── */
+.atlas-split-layout {
+  display: grid;
+  gap: 1rem;
+}
+@media (min-width: 768px) {
+  .atlas-split-layout {
+    grid-template-columns: 1fr 16rem;
+  }
+}
+@media (max-width: 767px) {
+  .atlas-split-layout {
+    grid-template-columns: 1fr;
+  }
+}

client/src/pages/Analytics.tsx

@@ -78,30 +78,32 @@ export default function Analytics() {
   return (
     <div className="p-5 animate-fade-in-up space-y-4">
       {/* Header */}
-      <div className="flex items-center justify-between">
+      <div className="atlas-page-header-row">
         <div>
           <h1 className="text-xl font-bold" style={{ fontFamily: 'var(--font-display)', color: 'var(--foreground)' }}>Analytics</h1>
           <p className="text-sm mt-0.5" style={{ color: 'var(--muted-foreground)' }}>Verstehe Reichweite, Performance und Affiliate-Umsätze im Detail.</p>
         </div>
-        <div className="flex items-center gap-2">
+        <div className="atlas-header-controls">
           <div className="flex items-center gap-1.5 px-3 py-1.5 rounded" style={{ background: 'var(--atlas-surface)', border: '1px solid var(--atlas-border)' }}>
             <span className="text-xs" style={{ color: 'var(--foreground)' }}>26. Mai – 1. Juni 2025</span>
           </div>
-          {['7 Tage', '30 Tage', 'Benutzerdefiniert'].map(p => (
+          <div className="flex gap-1">
-            <button
+            {['7 Tage', '30 Tage', 'Benutzerdefiniert'].map(p => (
-              key={p}
+              <button
-              onClick={() => setTimePeriod(p)}
+                key={p}
-              className="text-xs px-3 py-1.5 rounded transition-all"
+                onClick={() => setTimePeriod(p)}
-              style={{
+                className="text-xs px-2 py-1.5 rounded transition-all"
-                background: timePeriod === p ? 'var(--atlas-cyan)' : 'var(--atlas-surface)',
+                style={{
-                color: timePeriod === p ? 'var(--atlas-navy)' : 'var(--muted-foreground)',
+                  background: timePeriod === p ? 'var(--atlas-cyan)' : 'var(--atlas-surface)',
-                border: `1px solid ${timePeriod === p ? 'var(--atlas-cyan)' : 'var(--atlas-border)'}`,
+                  color: timePeriod === p ? 'var(--atlas-navy)' : 'var(--muted-foreground)',
-                fontWeight: timePeriod === p ? 600 : 400,
+                  border: `1px solid ${timePeriod === p ? 'var(--atlas-cyan)' : 'var(--atlas-border)'}`,
-              }}
+                  fontWeight: timePeriod === p ? 600 : 400,
-            >
+                }}
-              {p}
+              >
-            </button>
+                {p}
-          ))}
+              </button>
+            ))}
+          </div>
         </div>
       </div>
 

client/src/pages/Approvals.tsx

@@ -66,12 +66,12 @@ export default function Approvals() {
   return (
     <div className="p-5 animate-fade-in-up space-y-4">
       {/* Header */}
-      <div className="flex items-center justify-between">
+      <div className="atlas-page-header-row">
         <div>
           <h1 className="text-xl font-bold" style={{ fontFamily: 'var(--font-display)', color: 'var(--foreground)' }}>Freigaben</h1>
           <p className="text-sm mt-0.5" style={{ color: 'var(--muted-foreground)' }}>Prüfe, priorisiere und genehmige Inhalte vor der Veröffentlichung.</p>
         </div>
-        <div className="flex items-center gap-2">
+        <div className="atlas-header-controls">
           <span className="text-xs px-2 py-1 rounded" style={{ background: 'var(--atlas-surface)', border: '1px solid var(--atlas-border)', color: 'var(--foreground)' }}>26. Mai 2025</span>
           <select className="text-xs px-2 py-1.5 rounded" style={{ background: 'var(--atlas-surface)', border: '1px solid var(--atlas-border)', color: 'var(--foreground)' }}>
             <option>Alle Plattformen</option>
@@ -122,9 +122,9 @@ export default function Approvals() {
         ))}
       </div>
 
-      <div className="flex gap-4">
+      <div className="atlas-split-layout">
         {/* Queue Table */}
-        <div className="flex-1 min-w-0">
+        <div className="min-w-0">
           <div className="atlas-card overflow-hidden">
             <div className="p-3" style={{ borderBottom: '1px solid var(--atlas-border)' }}>
               <span className="text-sm font-semibold" style={{ fontFamily: 'var(--font-display)', color: 'var(--foreground)' }}>
@@ -210,7 +210,7 @@ export default function Approvals() {
         </div>
 
         {/* Right: Preview + Audit */}
-        <div className="w-64 flex-shrink-0 space-y-3">
+        <div className="space-y-3">
           {/* Schnellvorschau */}
           <div className="atlas-card overflow-hidden">
             <div className="p-3" style={{ borderBottom: '1px solid var(--atlas-border)' }}>

client/src/pages/Calendar.tsx

@@ -90,7 +90,7 @@ export default function Calendar() {
   return (
     <div className="p-5 animate-fade-in-up space-y-4">
       {/* Header */}
-      <div className="flex items-center justify-between">
+      <div className="atlas-page-header-row">
         <div>
           <h1 className="text-xl font-bold" style={{ fontFamily: 'var(--font-display)', color: 'var(--foreground)' }}>
             Kalender & Freigaben
@@ -99,12 +99,12 @@ export default function Calendar() {
             Plane, manage und genehmige Content über alle Plattformen.
           </p>
         </div>
-        <div className="flex items-center gap-2">
+        <div className="atlas-header-controls">
-          <div className="flex items-center gap-1.5 px-3 py-1.5 rounded" style={{ background: 'var(--atlas-surface)', border: '1px solid var(--atlas-border)' }}>
+          <div className="flex items-center gap-1 px-2 py-1.5 rounded" style={{ background: 'var(--atlas-surface)', border: '1px solid var(--atlas-border)' }}>
-            <span className="text-xs" style={{ color: 'var(--foreground)' }}>26. Mai – 1. Jun 2025</span>
+            <button className="atlas-btn-ghost p-0.5"><ChevronLeft size={13} /></button>
+            <span className="text-xs" style={{ color: 'var(--foreground)' }}>26. Mai – 1. Jun</span>
+            <button className="atlas-btn-ghost p-0.5"><ChevronRight size={13} /></button>
           </div>
-          <button className="atlas-btn-ghost p-1.5"><ChevronLeft size={14} /></button>
-          <button className="atlas-btn-ghost p-1.5"><ChevronRight size={14} /></button>
           <div className="flex rounded overflow-hidden" style={{ border: '1px solid var(--atlas-border)' }}>
             {(['Woche', 'Monat'] as const).map(v => (
               <button

client/src/pages/Campaigns.tsx

@@ -63,21 +63,21 @@ export default function Campaigns() {
   return (
     <div className="p-5 animate-fade-in-up space-y-4">
       {/* Header */}
-      <div className="flex items-center justify-between">
+      <div className="atlas-page-header-row">
         <div>
           <h1 className="text-xl font-bold" style={{ fontFamily: 'var(--font-display)', color: 'var(--foreground)' }}>Kampagnen</h1>
           <p className="text-sm mt-0.5" style={{ color: 'var(--muted-foreground)' }}>Plane, bündele und steuere kanalübergreifende Content-Offensiven.</p>
         </div>
-        <div className="flex items-center gap-2">
+        <div className="atlas-header-controls">
-          <div className="flex items-center gap-1.5 px-3 py-1.5 rounded" style={{ background: 'var(--atlas-surface)', border: '1px solid var(--atlas-border)' }}>
+          <div className="flex items-center gap-1 px-2 py-1.5 rounded" style={{ background: 'var(--atlas-surface)', border: '1px solid var(--atlas-border)' }}>
-            <span className="text-xs" style={{ color: 'var(--foreground)' }}>26. Mai – 1. Jun 2025</span>
+            <button className="atlas-btn-ghost p-0.5"><ChevronLeft size={13} /></button>
+            <span className="text-xs" style={{ color: 'var(--foreground)' }}>26. Mai – 1. Jun</span>
+            <button className="atlas-btn-ghost p-0.5"><ChevronRight size={13} /></button>
           </div>
-          <button className="atlas-btn-ghost p-1.5"><ChevronLeft size={14} /></button>
-          <button className="atlas-btn-ghost p-1.5"><ChevronRight size={14} /></button>
           <select className="text-xs px-2 py-1.5 rounded" style={{ background: 'var(--atlas-surface)', border: '1px solid var(--atlas-border)', color: 'var(--foreground)' }}>
             <option>Diese Woche</option>
           </select>
-          <button className="atlas-btn-primary text-xs gap-1.5"><Plus size={13} /> Neue Kampagne</button>
+          <button className="atlas-btn-primary text-xs gap-1.5"><Plus size={13} /> Neu</button>
         </div>
       </div>
 

client/src/pages/Products.tsx

@@ -63,12 +63,12 @@ export default function Products() {
   return (
     <div className="p-5 animate-fade-in-up space-y-4">
       {/* Header */}
-      <div className="flex items-center justify-between">
+      <div className="atlas-page-header-row">
         <div>
           <h1 className="text-xl font-bold" style={{ fontFamily: 'var(--font-display)', color: 'var(--foreground)' }}>Produkte</h1>
           <p className="text-sm mt-0.5" style={{ color: 'var(--muted-foreground)' }}>Verwalte Produktdaten, Affiliate-Links und Content-Potenziale.</p>
         </div>
-        <div className="flex items-center gap-2">
+        <div className="atlas-header-controls">
           <span className="text-xs px-2 py-1 rounded" style={{ background: 'var(--atlas-surface)', border: '1px solid var(--atlas-border)', color: 'var(--muted-foreground)' }}>7 Tage</span>
         </div>
       </div>
@@ -105,24 +105,24 @@ export default function Products() {
             {tab}
           </button>
         ))}
-        <div className="ml-auto flex items-center gap-2">
+        <div className="flex items-center gap-2 w-full sm:w-auto sm:ml-auto">
-          <div className="relative">
+          <div className="relative flex-1 sm:flex-none">
             <Search size={12} className="absolute left-2 top-1/2 -translate-y-1/2" style={{ color: 'var(--muted-foreground)' }} />
             <input
-              className="atlas-input pl-7 text-xs"
+              className="atlas-input pl-7 text-xs w-full"
               placeholder="Produkte suchen..."
               value={search}
               onChange={e => setSearch(e.target.value)}
-              style={{ width: '180px' }}
+              style={{ minWidth: '140px' }}
             />
           </div>
-          <button className="atlas-btn-ghost p-1.5"><Filter size={13} /></button>
+          <button className="atlas-btn-ghost p-1.5 flex-shrink-0"><Filter size={13} /></button>
         </div>
       </div>
 
-      <div className="flex gap-4">
+      <div className="atlas-split-layout">
         {/* Product Table */}
-        <div className="flex-1 min-w-0">
+        <div className="min-w-0">
           <div className="atlas-card overflow-hidden">
             <div className="atlas-table-scroll"><table style={{ width: '100%', borderCollapse: 'collapse' }}>
               <thead>
@@ -219,7 +219,7 @@ export default function Products() {
         </div>
 
         {/* Right Sidebar */}
-        <div className="w-56 flex-shrink-0 space-y-3">
+        <div className="space-y-3">
           <div className="atlas-card p-3">
             <div className="text-xs font-semibold mb-2" style={{ fontFamily: 'var(--font-display)', color: 'var(--foreground)' }}>Top Produkte für Content</div>
             <div className="flex gap-2 mb-2">

client/src/pages/Settings.tsx

@@ -56,12 +56,12 @@ export default function Settings() {
   return (
     <div className="p-5 animate-fade-in-up space-y-4">
       {/* Header */}
-      <div className="flex items-center justify-between">
+      <div className="atlas-page-header-row">
         <div>
           <h1 className="text-xl font-bold" style={{ fontFamily: 'var(--font-display)', color: 'var(--foreground)' }}>Einstellungen</h1>
           <p className="text-sm mt-0.5" style={{ color: 'var(--muted-foreground)' }}>Verwalte Kanäle, Integrationen, Branding und Systemregeln.</p>
         </div>
-        <div className="flex items-center gap-2">
+        <div className="atlas-header-controls">
           <span className="text-xs" style={{ color: 'var(--muted-foreground)', fontFamily: 'var(--font-mono)' }}>26. Mai 2025, 09:41</span>
           <button className="atlas-btn-ghost p-1.5"><RefreshCw size={13} /></button>
         </div>

client/src/pages/WarRoom.tsx

@@ -176,7 +176,7 @@ export default function WarRoom() {
   return (
     <div className="p-5 space-y-5 animate-fade-in-up">
       {/* Page Header */}
-      <div className="flex items-center justify-between">
+      <div className="atlas-page-header-row">
         <div>
           <h1 className="text-xl font-bold" style={{ fontFamily: 'var(--font-display)', color: 'var(--foreground)' }}>
             War Room
@@ -185,7 +185,7 @@ export default function WarRoom() {
             Zentrale Übersicht & Steuerung deiner Content-Operationen
           </p>
         </div>
-        <div className="flex items-center gap-2">
+        <div className="atlas-header-controls">
           <div 
             className="flex items-center gap-1.5 px-3 py-1.5 rounded"
             style={{ background: 'var(--atlas-surface)', border: '1px solid var(--atlas-border)' }}