fix: fix nav scrolling and card layout on mobile

- App.jsx: use flex column layout so BottomNav stays at bottom and
  never scrolls away; Feed gets a proper definite height for scroll-snap
- Feed.css: feed-slot uses min-height so long cards can grow, align top
- PairCards.css: cap image at 40dvh so card always fits on screen

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

src/App.jsx

@@ -29,8 +29,10 @@ function AppContent() {
   const PageComponent = PAGES[page] || Feed
 
   return (
-    <div style={{ minHeight: '100vh', background: '#F5F0E8', paddingBottom: '72px' }}>
+    <div style={{ flex: 1, display: 'flex', flexDirection: 'column', background: '#F5F0E8', overflow: 'hidden' }}>
+      <div style={{ flex: 1, overflow: 'hidden', minHeight: 0 }}>
         <PageComponent />
+      </div>
       <BottomNav active={page} onNavigate={setPage} />
     </div>
   )

src/components/PairCards.css

@@ -83,6 +83,8 @@
   position: relative;
   width: 100%;
   aspect-ratio: 1 / 1;
+  /* Bild nie höher als ~40% des Viewport, damit die Karte komplett sichtbar ist */
+  max-height: 40dvh;
   overflow: hidden;
   cursor: default;
   background: #1a1a1a;

src/pages/Feed.css

@@ -8,10 +8,11 @@
 
 .feed-slot {
   scroll-snap-align: start;
-  height: 100%;
+  /* Mindesthöhe = volle Slot-Höhe; bei langer Karte wächst der Slot mit */
+  min-height: 100%;
   display: flex;
-  align-items: center;
+  align-items: flex-start;
   justify-content: center;
-  padding: 24px 20px;
+  padding: 16px 20px;
   flex-shrink: 0;
 }