feat(ui): global redesign, unified layout and personalized feed

- introduce global design system via CSS variables
- modern green-based color palette with improved readability
- unify Feed, Explore and Profile visual language
- add discovery posts visual highlight via border (no text shift)
- improve card depth, shadows and container consistency
- stabilize personalized feed logic (subscriptions + discovery)
- prepare UI for future theming without TSX changes

frontend/app/components/BottomNav/BottomNav.tsx

@@ -0,0 +1,179 @@
+'use client';
+
+import Link from 'next/link';
+import { useEffect, useState } from 'react';
+import { usePathname } from 'next/navigation';
+
+const leftItems = [
+  { href: '/feed', label: 'Feed', icon: '🏠' },
+  { href: '/explore', label: 'Entdecken', icon: '🔍' },
+];
+
+const rightItems = [
+  { href: '/pets', label: 'Tiere', icon: '🐾' },
+  { href: '/profile', label: 'Profil', icon: '👤' },
+];
+
+function NavItem({
+  item,
+  pathname,
+}: {
+  item: { href: string; label: string; icon: string };
+  pathname: string;
+}) {
+  const isActive =
+    item.href === '/feed'
+      ? pathname === '/feed'
+      : pathname.startsWith(item.href);
+
+  return (
+    <Link
+      href={item.href}
+      style={{
+  textDecoration: 'none',
+  color: isActive ? '#000' : '#777',
+  fontSize: '0.7rem',
+  display: 'flex',
+  flexDirection: 'column',
+  alignItems: 'center',
+  gap: '2px',
+  transition: 'transform 0.15s ease, color 0.15s ease',
+}}
+onMouseDown={(e) => {
+  (e.currentTarget as HTMLElement).style.transform = 'scale(0.9)';
+}}
+onMouseUp={(e) => {
+  (e.currentTarget as HTMLElement).style.transform = 'scale(1)';
+}}
+onMouseLeave={(e) => {
+  (e.currentTarget as HTMLElement).style.transform = 'scale(1)';
+}}
+
+    >
+      <span style={{ fontSize: '1.1rem' }}>{item.icon}</span>
+      {item.label}
+      {isActive && (
+  <span
+    style={{
+      marginTop: '2px',
+      width: '6px',
+      height: '2px',
+      borderRadius: '2px',
+      backgroundColor: '#2E7D32',
+    }}
+  />
+)}
+
+    </Link>
+  );
+}
+
+export default function BottomNav() {
+  const [isLoggedIn, setIsLoggedIn] = useState(false);
+  const pathname = usePathname();
+
+  useEffect(() => {
+    const hasAuthCookie = document.cookie
+      .split('; ')
+      .some((c) => c.startsWith('onlypets-auth=true'));
+
+    setIsLoggedIn(hasAuthCookie);
+  }, []);
+
+  if (!isLoggedIn) return null;
+
+  return (
+    <nav
+  style={{
+    position: 'fixed',
+    bottom: 0,
+    left: 0,
+    right: 0,
+    height: '70px',
+    borderTop: '1px solid #eee',
+    backgroundColor: '#fff',
+    zIndex: 100,
+  }}
+>
+  {/* Linke Seite */}
+  <div
+    style={{
+      position: 'absolute',
+      left: 0,
+      bottom: 0,
+      height: '70px',
+      width: '50%',
+      display: 'flex',
+      justifyContent: 'space-evenly',
+      alignItems: 'center',
+    }}
+  >
+    {leftItems.map((item) => (
+      <NavItem key={item.href} item={item} pathname={pathname} />
+    ))}
+  </div>
+
+  {/* Rechte Seite */}
+  <div
+    style={{
+      position: 'absolute',
+      right: 0,
+      bottom: 0,
+      height: '70px',
+      width: '50%',
+      display: 'flex',
+      justifyContent: 'space-evenly',
+      alignItems: 'center',
+    }}
+  >
+    {rightItems.map((item) => (
+      <NavItem key={item.href} item={item} pathname={pathname} />
+    ))}
+  </div>
+
+  {/* Zentrierter Post-Button */}
+  <Link
+  href="/post/new"
+  style={{
+    position: 'absolute',
+    left: '50%',
+    transform: 'translateX(-50%) translateY(-18px)',
+    textDecoration: 'none',
+  }}
+>
+    <div
+    style={{
+      width: '56px',
+      height: '56px',
+      borderRadius: '50%',
+      backgroundColor: '#2E7D32',
+      color: 'white',
+      display: 'flex',
+      alignItems: 'center',
+      justifyContent: 'center',
+      fontSize: '1.3rem',
+      boxShadow: '0 6px 16px rgba(0,0,0,0.25)',
+      transition: 'transform 0.25s cubic-bezier(0.4, 0, 0.2, 1)',
+      transform: 'translateY(0) scale(1)', // 🔑 Ausgangszustand
+    }}
+    onClick={(e) => {
+      const el = e.currentTarget as HTMLElement;
+
+      // Jump
+      el.style.transform = 'translateY(-8px) scale(0.95)';
+
+      // Rückkehr
+      setTimeout(() => {
+        el.style.transform = 'translateY(0) scale(1)';
+      }, 180);
+    }}
+  >
+    ➕
+  </div>
+</Link>
+
+
+</nav>
+
+  );
+}

frontend/app/components/Navbar/Navbar.tsx

@@ -0,0 +1,47 @@
+'use client';
+
+import Link from 'next/link';
+import { useEffect, useState } from 'react';
+
+export default function Navbar() {
+  const [isLoggedIn, setIsLoggedIn] = useState(false);
+
+  useEffect(() => {
+    const hasAuthCookie = document.cookie
+      .split('; ')
+      .some((c) => c.startsWith('onlypets-auth=true'));
+
+    setIsLoggedIn(hasAuthCookie);
+  }, []);
+
+  return (
+    <nav
+      style={{
+        display: 'flex',
+        gap: '1.5rem',
+        padding: '1rem',
+        borderBottom: '1px solid #eee',
+      }}
+    >
+      {/* 🌱 GAST-NAVIGATION */}
+      {!isLoggedIn && (
+        <>
+          <Link href="/">Home</Link>
+          <Link href="/login">Login</Link>
+          <Link href="/register">Registrierung</Link>
+        </>
+      )}
+
+      {/* 🐾 USER-NAVIGATION */}
+      {isLoggedIn && (
+        <>
+          <Link href="/feed">Feed</Link>
+          <Link href="/explore">Entdecken</Link>
+          <Link href="/pets">Meine Tiere</Link>
+          <Link href="/post/new">Posten</Link>
+          <Link href="/profile">Profil</Link>
+        </>
+      )}
+    </nav>
+  );
+}

frontend/app/components/PostCard/PostCard.tsx

@@ -1,242 +1,119 @@
 'use client';
 
-import { useState, useEffect } from 'react';
-import CommentModal from '../CommentModal/CommentModal';
+import { useRef } from 'react';
 
-type Comment = {
+export type PostCardData = {
   id: number;
-  author: string;
+  petName: string;
+  petType: 'Hund' | 'Katze';
+  authorName: string;
+  createdAt: string;
   text: string;
-};
-
-type Media = {
-  type: 'image' | 'video';
-  url: string;
-  aspect: '1:1' | '9:16';
+  likesCount: number;
+  commentsCount: number;
+  
 };
 
 type PostCardProps = {
-  petName: string;
-  petType: 'Hund' | 'Katze';
-  ownerName?: string;
-  text: string;
-  createdAt: string;
-  media?: Media;
-  likes: number;
-  likedByCurrentUser?: boolean;
-  commentsCount: number;
-  commentsList: Comment[];
+  post: PostCardData;
+  isDiscovery?: boolean
+  onOpenPreview: (post: PostCardData) => void;
+  onCommentClick?: (post: PostCardData) => void;
+  
+
 };
 
-// 🔐 Simulierter eingeloggter User
-const CURRENT_USER_ID = 1;
-
 export default function PostCard({
-  petName,
-  petType,
-  ownerName,
-  text,
-  createdAt,
-  media,
-  likes,
-  likedByCurrentUser,
-  commentsCount,
-  commentsList,
+  post,
+  onOpenPreview,
+  onCommentClick,
+  isDiscovery,
 }: PostCardProps) {
-  const [showComments, setShowComments] = useState(false);
-  const [showMediaFullscreen, setShowMediaFullscreen] = useState(false);
+  const likeRef = useRef<HTMLButtonElement | null>(null);
+  const commentRef = useRef<HTMLButtonElement | null>(null);
 
-  const [localLikes, setLocalLikes] = useState(likes);
-  const [liked, setLiked] = useState(!!likedByCurrentUser);
-
-  const isSquare = media?.aspect === '1:1';
-
-  // ⛔ Scroll sperren bei Vollbild
-  useEffect(() => {
-    if (showMediaFullscreen) {
-      document.body.style.overflow = 'hidden';
-    } else {
-      document.body.style.overflow = '';
-    }
-  }, [showMediaFullscreen]);
+  function animate(
+    ref: React.RefObject<HTMLButtonElement>,
+    animation: string
+  ) {
+    if (!ref.current) return;
+    const el = ref.current;
+    el.style.animation = animation;
+    el.addEventListener(
+      'animationend',
+      () => {
+        el.style.animation = '';
+      },
+      { once: true }
+    );
+  }
 
   return (
-    <>
-      <article
-        style={{
-          border: '1px solid #e5e5e5',
-          borderRadius: '16px',
-          backgroundColor: 'white',
-          overflow: 'hidden',
-        }}
+    <article
+  className={`postcard ${
+    isDiscovery ? 'postcard--discovery' : ''
+  }`}
+>
+
+      {/* Klickbarer Bereich → Preview */}
+      <div
+        className="postcard-main"
+        onClick={() => onOpenPreview(post)}
       >
-        {/* HEADER */}
-        <header style={{ padding: '1rem', display: 'grid', gap: '0.2rem' }}>
-          <div style={{ fontWeight: 800, fontSize: '1.1rem' }}>
-            {petName}{' '}
-            <span style={{ fontWeight: 500, color: '#666' }}>
-              ({petType})
-            </span>
-          </div>
+        <div className="postcard-media" />
 
-          <div style={{ fontSize: '0.8rem', color: '#777' }}>
-            {createdAt}
-            {ownerName && (
-              <>
-                {' · '}
-                <span style={{ fontStyle: 'italic' }}>
-                  verwaltet von {ownerName}
-                </span>
-              </>
-            )}
-          </div>
-        </header>
+        <div className="postcard-content">
+          <div className="postcard-header">
+  {isDiscovery && (
+    <div className="post-discovery-wrapper">
+      
+    </div>
+  )}
 
-        {/* MEDIA */}
-        {media && (
-          <div
-            onClick={() => setShowMediaFullscreen(true)}
-            style={{
-              width: '100%',
-              aspectRatio: isSquare ? '1 / 1' : '9 / 16',
-              backgroundColor: '#000',
-              cursor: 'pointer',
-            }}
-          >
-            {media.type === 'image' && (
-              <img
-                src={media.url}
-                alt={petName}
-                style={{
-                  width: '100%',
-                  height: '100%',
-                  objectFit: 'cover',
-                }}
-              />
-            )}
+  <div className="postcard-title-row">
+    <strong className="postcard-title">
+      {post.petName}
+    </strong>
+    <span className="postcard-meta">
+      · {post.petType} · {post.authorName} · {post.createdAt}
+    </span>
+  </div>
+</div>
 
-            {media.type === 'video' && (
-              <video
-                src={media.url}
-                muted
-                style={{
-                  width: '100%',
-                  height: '100%',
-                  objectFit: 'cover',
-                }}
-              />
-            )}
-          </div>
-        )}
-
-        {/* TEXT */}
-        <div style={{ padding: '1rem', fontSize: '0.95rem' }}>
-          {text}
+          <p className="postcard-text">{post.text}</p>
         </div>
+      </div>
 
-        {/* FOOTER */}
-        <footer
-          style={{
-            padding: '0 1rem 1rem',
-            display: 'flex',
-            gap: '1.2rem',
-            fontSize: '0.85rem',
+      {/* Interaktionen */}
+      <div className="postcard-actions">
+        <button
+          ref={likeRef}
+          type="button"
+          className="postcard-action"
+          onClick={(e) => {
+            e.stopPropagation();
+            animate(likeRef, 'heart-pop 0.3s ease');
+            // später: Like-Logik
           }}
         >
-          <button
-            type="button"
-            onClick={() => {
-              setLiked(!liked);
-              setLocalLikes((prev) => (liked ? prev - 1 : prev + 1));
+          <span aria-hidden>❤️</span>
+          <span>{post.likesCount}</span>
+        </button>
 
-              console.log('LIKE', {
-                byUser: CURRENT_USER_ID,
-                pet: petName,
-              });
-            }}
-            style={{
-              background: 'none',
-              border: 'none',
-              cursor: 'pointer',
-              fontWeight: 600,
-              color: liked ? '#d32f2f' : '#555',
-            }}
-          >
-            ❤️ {localLikes}
-          </button>
-
-          <button
-            type="button"
-            onClick={() => setShowComments(true)}
-            style={{
-              background: 'none',
-              border: 'none',
-              cursor: 'pointer',
-              fontWeight: 600,
-              color: '#2E7D32',
-            }}
-          >
-            💬 {commentsCount} Kommentare
-          </button>
-        </footer>
-      </article>
-
-      {/* 💬 Kommentare */}
-      {showComments && (
-        <CommentModal
-          comments={commentsList}
-          onClose={() => setShowComments(false)}
-        />
-      )}
-
-      {/* 🖼️ MEDIA FULLSCREEN */}
-      {showMediaFullscreen && media && (
-        <div
-          onClick={() => setShowMediaFullscreen(false)}
-          style={{
-            position: 'fixed',
-            inset: 0,
-            backgroundColor: 'rgba(0,0,0,0.9)',
-            display: 'flex',
-            alignItems: 'center',
-            justifyContent: 'center',
-            zIndex: 2000,
-            cursor: 'zoom-out',
+        <button
+          ref={commentRef}
+          type="button"
+          className="postcard-action"
+          onClick={(e) => {
+            e.stopPropagation();
+            animate(commentRef, 'comment-wiggle 0.25s ease');
+            onCommentClick?.(post);
           }}
         >
-          <div
-            onClick={(e) => e.stopPropagation()}
-            style={{
-              maxWidth: '95vw',
-              maxHeight: '95vh',
-            }}
-          >
-            {media.type === 'image' && (
-              <img
-                src={media.url}
-                alt={petName}
-                style={{
-                  maxWidth: '100%',
-                  maxHeight: '100%',
-                  objectFit: 'contain',
-                }}
-              />
-            )}
-
-            {media.type === 'video' && (
-              <video
-                src={media.url}
-                controls
-                autoPlay
-                style={{
-                  maxWidth: '100%',
-                  maxHeight: '100%',
-                }}
-              />
-            )}
-          </div>
-        </div>
-      )}
-    </>
+          <span aria-hidden>💬</span>
+          <span>{post.commentsCount}</span>
+        </button>
+      </div>
+    </article>
   );
 }

frontend/app/explore/page.tsx

@@ -1,3 +1,226 @@
+'use client';
+
+import { useRef, useState } from 'react';
+import PostCard, {
+  PostCardData,
+} from '@/app/components/PostCard/PostCard';
+
+/* =======================
+   MOCK DATA
+======================= */
+
+const trendingPets = [
+  { id: 1, name: 'Luna', type: 'Katze' },
+  { id: 2, name: 'Bello', type: 'Hund' },
+  { id: 3, name: 'Milo', type: 'Katze' },
+  { id: 4, name: 'Rocky', type: 'Hund' },
+  { id: 5, name: 'Nala', type: 'Katze' },
+  { id: 6, name: 'Leo', type: 'Hund' },
+];
+
+const latestPosts: PostCardData[] = [
+  {
+    id: 101,
+    petName: 'Luna',
+    petType: 'Katze',
+    authorName: 'Anna',
+    createdAt: 'vor 2 Stunden',
+    text: 'Luna chillt auf dem Sofa und beobachtet alles ganz genau.',
+    likesCount: 12,
+    commentsCount: 3,
+  },
+  {
+    id: 102,
+    petName: 'Bello',
+    petType: 'Hund',
+    authorName: 'Markus',
+    createdAt: 'heute',
+    text: 'Bello hat sein neues Lieblingsspielzeug gefunden.',
+    likesCount: 25,
+    commentsCount: 8,
+  },
+  {
+    id: 103,
+    petName: 'Milo',
+    petType: 'Katze',
+    authorName: 'Sophie',
+    createdAt: 'gestern',
+    text: 'Milo hat wieder einen Karton erobert.',
+    likesCount: 7,
+    commentsCount: 1,
+  },
+  {
+    id: 104,
+    petName: 'Rocky',
+    petType: 'Hund',
+    authorName: 'Timo',
+    createdAt: 'gestern',
+    text: 'Rocky war im Wald unterwegs. 10/10 würde wieder rennen.',
+    likesCount: 19,
+    commentsCount: 4,
+  },
+];
+
+/* =======================
+   PAGE
+======================= */
+
 export default function ExplorePage() {
-  return <h1>Entdecken</h1>;
+  const [activeFilter, setActiveFilter] =
+    useState<'ALLE' | 'HUND' | 'KATZE'>('ALLE');
+
+  const [previewPost, setPreviewPost] =
+    useState<PostCardData | null>(null);
+
+  const [openComments, setOpenComments] = useState(false);
+
+  // Swipe-Down fürs Modal
+  const startY = useRef<number | null>(null);
+
+  const filteredPosts = latestPosts.filter((p) => {
+    if (activeFilter === 'HUND') return p.petType === 'Hund';
+    if (activeFilter === 'KATZE') return p.petType === 'Katze';
+    return true;
+  });
+
+  return (
+    <>
+      {/* ================= HEADER / FILTER ================= */}
+      <section className="explore-header">
+        <header>
+          <h1>Entdecken</h1>
+          <p>Neue Tiere, Trends & besondere Momente</p>
+        </header>
+
+        <div className="explore-filter">
+          {[
+            { key: 'ALLE', label: 'Alle' },
+            { key: 'HUND', label: 'Hunde' },
+            { key: 'KATZE', label: 'Katzen' },
+          ].map((f) => (
+            <button
+              key={f.key}
+              className={
+                activeFilter === f.key
+                  ? 'filter-button active'
+                  : 'filter-button'
+              }
+              onClick={() =>
+                setActiveFilter(f.key as 'ALLE' | 'HUND' | 'KATZE')
+              }
+            >
+              {f.label}
+            </button>
+          ))}
+        </div>
+      </section>
+
+      {/* ================= BELIEBTE TIERE ================= */}
+      <section className="explore-trending">
+        <strong>Beliebte Tiere</strong>
+
+        <div className="trending-scroll hide-scrollbar">
+          {trendingPets.map((pet) => (
+            <div key={pet.id} className="trending-item">
+              <div className="trending-avatar">🐾</div>
+              <div className="trending-meta">
+                <strong>{pet.name}</strong>
+                <span>{pet.type}</span>
+              </div>
+            </div>
+          ))}
+        </div>
+      </section>
+
+      {/* ================= POSTS ================= */}
+      <section className="explore-posts">
+        <strong>Neueste Beiträge</strong>
+
+        <div className="post-list">
+          {filteredPosts.map((post) => (
+            <PostCard
+              key={post.id}
+              post={post}
+              onOpenPreview={(p) => {
+                setOpenComments(false);
+                setPreviewPost(p);
+              }}
+              onCommentClick={(p) => {
+                setOpenComments(true);
+                setPreviewPost(p);
+              }}
+            />
+          ))}
+        </div>
+      </section>
+
+      {/* ================= PREVIEW MODAL ================= */}
+      {previewPost && (
+        <div
+          className="post-preview-overlay"
+          onClick={() => {
+            setPreviewPost(null);
+            setOpenComments(false);
+          }}
+        >
+          <div
+            className="post-preview-modal"
+            onClick={(e) => e.stopPropagation()}
+            onTouchStart={(e) =>
+              (startY.current = e.touches[0].clientY)
+            }
+            onTouchEnd={(e) => {
+              if (
+                startY.current &&
+                e.changedTouches[0].clientY - startY.current > 80
+              ) {
+                setPreviewPost(null);
+                setOpenComments(false);
+              }
+            }}
+          >
+            <div className="modal-handle" />
+
+            <div className="modal-media" />
+
+            <strong>{previewPost.petName}</strong>{' '}
+            <span className="modal-meta">
+              · {previewPost.petType} · {previewPost.authorName}
+            </span>
+
+            <p className="modal-text">{previewPost.text}</p>
+
+            <div className="modal-stats">
+              <span>❤️ {previewPost.likesCount}</span>
+              <span>💬 {previewPost.commentsCount}</span>
+            </div>
+
+            {openComments && (
+              <div className="modal-comments">
+                <strong>Kommentare</strong>
+                <p className="modal-comment-empty">
+                  Noch keine Kommentare.
+                </p>
+
+                <input
+                  className="modal-comment-input"
+                  placeholder="Kommentar schreiben…"
+                  autoFocus
+                />
+              </div>
+            )}
+
+            <div className="modal-actions">
+              <a
+                href={`/post/${previewPost.id}`}
+                className="modal-open-post"
+              >
+                Zum Beitrag
+              </a>
+            </div>
+          </div>
+        </div>
+      )}
+    </>
+  );
 }

frontend/app/feed/page.tsx

@@ -1,179 +1,237 @@
 'use client';
 
-import { useState } from 'react';
-import PostCard from '../components/PostCard/PostCard';
-import FreshPostsSlider from '../components/FreshPostsSlider/FreshPostsSlider';
+import { useRef, useState } from 'react';
+import PostCard, {
+  PostCardData,
+} from '@/app/components/PostCard/PostCard';
 
-/* ---------------- TYPES ---------------- */
+/* =======================
+   MOCK: USER KONTEXT
+======================= */
 
-type Comment = {
-  id: number;
-  author: string;
-  text: string;
-};
-
-type Media = {
-  type: 'image' | 'video';
-  url: string;
-  aspect: '1:1' | '9:16';
-};
-
-type FeedPost = {
-  id: number;
-
-  // 🐾 Tier (Absender)
-  petId: number;
-  petName: string;
-  petType: 'Hund' | 'Katze';
-
-  // 👤 Admin (sekundär)
-  ownerId: number;
-  ownerName: string;
-
-  // 📝 Inhalt
-  text: string;
-  createdAt: string;
-
-  // 📸 / 🎥 Media
-  media?: Media;
-
-  // ❤️ Interaktion
-  likes: number;
-  //likedByCurrentUser: number; // ✅ FEHLTE
-  commentsCount: number;
-  commentsList: Comment[];
-};
-
-type FeedAdmin = {
-  id: number;
-  name: string;
-  avatar: string;
-};
-
-/* ---------------- MOCK ADMINS ---------------- */
-
-const mockAdmins: FeedAdmin[] = [
+const myPets = [
   {
     id: 1,
-    name: 'Anna',
-    avatar: 'https://i.pravatar.cc/100?img=12',
-  },
-  {
-    id: 2,
-    name: 'Markus',
-    avatar: 'https://i.pravatar.cc/100?img=32',
+    petType: 'Katze',
+    breed: 'Bengal',
+    ageMonths: 24,
   },
 ];
 
-/* ---------------- MOCK POSTS ---------------- */
+const followedPetIds = [1, 3, 5];
 
-const mockPosts: FeedPost[] = [
+/* =======================
+   MOCK: POSTS
+======================= */
+
+type FeedPost = PostCardData & {
+  petId: number;
+  breed: string;
+  ageMonths: number;
+};
+
+const allPosts: FeedPost[] = [
   {
-    id: 1,
+    id: 401,
     petId: 1,
     petName: 'Luna',
     petType: 'Katze',
-
-    ownerId: 1,
-    ownerName: 'Anna',
-
-    text: 'Luna genießt die Sonne auf dem Balkon ☀️',
-    createdAt: 'vor 2 Stunden',
-
-    media: {
-      type: 'image',
-      url: 'https://placekitten.com/600/600',
-      aspect: '1:1',
-    },
-
-    likes: 12,
+    breed: 'Bengal',
+    ageMonths: 26,
+    authorName: 'Anna',
+    createdAt: 'vor 10 Minuten',
+    text: 'Luna liebt den neuen Kratzbaum.',
+    likesCount: 8,
     commentsCount: 2,
-    commentsList: [
-      { id: 1, author: 'Lisa', text: 'Wie süß 😍' },
-      { id: 2, author: 'Tom', text: 'Typisch Katze!' },
-    ],
   },
   {
-    id: 2,
+    id: 402,
     petId: 2,
-    petName: 'Bello',
+    petName: 'Rocky',
     petType: 'Hund',
-
-    ownerId: 2,
-    ownerName: 'Markus',
-
-    text: 'Spaziergang im Park – jemand hatte sehr viel Energie 🐕',
-    createdAt: 'heute Morgen',
-
-    media: {
-      type: 'video',
-      url: 'https://www.w3schools.com/html/mov_bbb.mp4',
-      aspect: '9:16',
-    },
-
-    likes: 20,
-    
-
-    commentsCount: 0,
-    commentsList: [],
+    breed: 'Labrador',
+    ageMonths: 30,
+    authorName: 'Tim',
+    createdAt: 'vor 1 Stunde',
+    text: 'Rocky war schwimmen 🐕‍🦺',
+    likesCount: 15,
+    commentsCount: 4,
+  },
+  {
+    id: 403,
+    petId: 3,
+    petName: 'Milo',
+    petType: 'Katze',
+    breed: 'Bengal',
+    ageMonths: 22,
+    authorName: 'Sophie',
+    createdAt: 'heute',
+    text: 'Milo entdeckt den Balkon.',
+    likesCount: 11,
+    commentsCount: 3,
+  },
+  {
+    id: 404,
+    petId: 4,
+    petName: 'Nala',
+    petType: 'Katze',
+    breed: 'Maine Coon',
+    ageMonths: 40,
+    authorName: 'Laura',
+    createdAt: 'gestern',
+    text: 'Nala beobachtet alles ganz ruhig.',
+    likesCount: 6,
+    commentsCount: 1,
   },
 ];
 
-/* ---------------- PAGE ---------------- */
+/* =======================
+   RELEVANZ LOGIK
+======================= */
+
+function relevanceScore(post: FeedPost) {
+  let score = 0;
+
+  myPets.forEach((pet) => {
+    if (post.petType === pet.petType) score += 3;
+    if (post.breed === pet.breed) score += 5;
+    if (Math.abs(post.ageMonths - pet.ageMonths) <= 6) score += 2;
+  });
+
+  score += Math.min(post.likesCount / 10, 3);
+  score += Math.min(post.commentsCount / 5, 2);
+
+  return score;
+}
+
+/* =======================
+   PAGE
+======================= */
 
 export default function FeedPage() {
-  const [selectedOwnerId, setSelectedOwnerId] = useState<number | null>(null);
+  const [previewPost, setPreviewPost] =
+    useState<PostCardData | null>(null);
+  const [openComments, setOpenComments] = useState(false);
 
-  const visiblePosts = selectedOwnerId
-    ? mockPosts.filter((post) => post.ownerId === selectedOwnerId)
-    : mockPosts;
+  const startY = useRef<number | null>(null);
+
+  /* =======================
+     FEED ZUSAMMENSTELLEN
+  ======================= */
+
+  const subscribedPosts = allPosts.filter((post) =>
+    followedPetIds.includes(post.petId)
+  );
+
+  const discoveryPosts = allPosts
+    .filter((post) => !followedPetIds.includes(post.petId))
+    .sort((a, b) => relevanceScore(b) - relevanceScore(a));
+
+  const FEED_SIZE = 20;
+  const DISCOVERY_RATIO = 0.15;
+
+  const discoveryCount = Math.max(
+    1,
+    Math.round(FEED_SIZE * DISCOVERY_RATIO)
+  );
+
+  const finalFeed = [
+    ...subscribedPosts
+      .slice(0, FEED_SIZE - discoveryCount)
+      .map((p) => ({ ...p, isDiscovery: false })),
+
+    ...discoveryPosts
+      .slice(0, discoveryCount)
+      .map((p) => ({ ...p, isDiscovery: true })),
+  ];
 
   return (
-    <section
-      style={{
-        maxWidth: '600px',
-        margin: '0 auto',
-        display: 'grid',
-        gap: '1.5rem',
-      }}
-    >
-      {/* HEADER */}
-      <header>
-        <h1 style={{ marginBottom: '0.3rem' }}>Feed</h1>
-        <p style={{ margin: 0, color: '#555' }}>
-          Neueste Beiträge aus der OnlyPets-Community
-        </p>
-      </header>
-
-      {/* 🔄 Frische Tier-Admins Slider */}
-      <FreshPostsSlider
-        users={mockAdmins}
-        onSelectUser={setSelectedOwnerId}
-      />
-
-      {/* 📰 FEED */}
-      <section style={{ display: 'grid', gap: '1.5rem' }}>
-        {visiblePosts.length === 0 && (
-          <p style={{ color: '#777' }}>
-            Keine Beiträge von diesen Tier-Admins.
-          </p>
-        )}
-
-        {visiblePosts.map((post) => (
-          <PostCard
-            key={post.id}
-            petName={post.petName}
-            petType={post.petType}
-            ownerName={post.ownerName}
-            text={post.text}
-            createdAt={post.createdAt}
-            media={post.media}
-            likes={post.likes}
-            commentsCount={post.commentsCount}
-            commentsList={post.commentsList}
-          />
-        ))}
+    <>
+      {/* ================= HEADER ================= */}
+      <section className="feed-header">
+        <header>
+          <h1>Feed</h1>
+          <p>Beiträge deiner Tiere & Abos</p>
+        </header>
       </section>
-    </section>
+
+      {/* ================= POSTS ================= */}
+      <section className="feed-posts">
+        <div className="post-list">
+          {finalFeed.map((post) => (
+            <PostCard
+              key={post.id}
+              post={post}
+              isDiscovery={post.isDiscovery}
+              onOpenPreview={(p) => {
+                setOpenComments(false);
+                setPreviewPost(p);
+              }}
+              onCommentClick={(p) => {
+                setOpenComments(true);
+                setPreviewPost(p);
+              }}
+            />
+          ))}
+        </div>
+      </section>
+
+      {/* ================= PREVIEW MODAL ================= */}
+      {previewPost && (
+        <div
+          className="post-preview-overlay"
+          onClick={() => {
+            setPreviewPost(null);
+            setOpenComments(false);
+          }}
+        >
+          <div
+            className="post-preview-modal"
+            onClick={(e) => e.stopPropagation()}
+            onTouchStart={(e) =>
+              (startY.current = e.touches[0].clientY)
+            }
+            onTouchEnd={(e) => {
+              if (
+                startY.current &&
+                e.changedTouches[0].clientY - startY.current > 80
+              ) {
+                setPreviewPost(null);
+                setOpenComments(false);
+              }
+            }}
+          >
+            <div className="modal-handle" />
+            <div className="modal-media" />
+
+            <strong>{previewPost.petName}</strong>{' '}
+            <span className="modal-meta">
+              · {previewPost.petType} · {previewPost.authorName}
+            </span>
+
+            <p className="modal-text">{previewPost.text}</p>
+
+            <div className="modal-stats">
+              <span>❤️ {previewPost.likesCount}</span>
+              <span>💬 {previewPost.commentsCount}</span>
+            </div>
+
+            {openComments && (
+              <div className="modal-comments">
+                <strong>Kommentare</strong>
+                <p className="modal-comment-empty">
+                  Noch keine Kommentare.
+                </p>
+                <input
+                  className="modal-comment-input"
+                  placeholder="Kommentar schreiben…"
+                  autoFocus
+                />
+              </div>
+            )}
+          </div>
+        </div>
+      )}
+    </>
   );
 }

frontend/app/globals.css

@@ -1,16 +1,49 @@
 @import "tailwindcss";
 
+* {
+  box-sizing: border-box;
+}
 :root {
-  --background: #ffffff;
-  --foreground: #171717;
+  /* ===== COLORS ===== */
+  --color-primary: #2e7d32;
+  --color-primary-soft: #e6efe9;
+
+  --color-bg: #f6faf7;
+  --color-surface: #ffffff;
+
+  --color-text-main: #1f2d24;
+  --color-text-secondary: #5f6f66;
+  --color-text-muted: #8a9b92;
+
+  --color-border: rgba(0, 0, 0, 0.06);
+
+  /* ===== SHADOWS ===== */
+  --shadow-sm: 0 2px 6px rgba(0, 0, 0, 0.05);
+  --shadow-md: 0 8px 20px rgba(0, 0, 0, 0.08);
+  --shadow-lg: 0 20px 40px rgba(0, 0, 0, 0.12);
+
+  /* ===== RADIUS ===== */
+  --radius-sm: 10px;
+  --radius-md: 14px;
+  --radius-lg: 18px;
+
+  /* ===== SPACING ===== */
+  --space-xs: 0.25rem;
+  --space-sm: 0.5rem;
+  --space-md: 1rem;
+  --space-lg: 1.5rem;
+  --space-xl: 2rem;
+}
+html, body {
+  background: var(--color-bg);
+  color: var(--color-text-main);
+  font-family: system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
+  line-height: 1.5;
 }
 
-@theme inline {
-  --color-background: var(--background);
-  --color-foreground: var(--foreground);
-  --font-sans: var(--font-geist-sans);
-  --font-mono: var(--font-geist-mono);
-}
+
+
+
 
 @media (prefers-color-scheme: dark) {
   :root {
@@ -46,4 +79,204 @@ body {
 .navbar a.active {
   background-color: rgba(255, 255, 255, 0.35);
 }
+/* Hide horizontal scrollbar but keep scroll */
+.hide-scrollbar {
+  scrollbar-width: none;        /* Firefox */
+  -ms-overflow-style: none;     /* IE / Edge */
+}
 
+.hide-scrollbar::-webkit-scrollbar {
+  display: none;                /* Chrome / Safari */
+}
+@keyframes skeleton {
+  0% { background-position: 100% 0; }
+  100% { background-position: 0 0; }
+}
+@keyframes heart-pop {
+  0% {
+    transform: scale(1);
+  }
+  40% {
+    transform: scale(1.25);
+  }
+  70% {
+    transform: scale(0.95);
+  }
+  100% {
+    transform: scale(1);
+  }
+}
+
+@keyframes comment-wiggle {
+  0% {
+    transform: translateX(0);
+  }
+  30% {
+    transform: translateX(-2px);
+  }
+  60% {
+    transform: translateX(2px);
+  }
+  100% {
+    transform: translateX(0);
+  }
+}
+@keyframes slideUp {
+  from {
+    transform: translateY(100%);
+  }
+  to {
+    transform: translateY(0);
+  }
+}
+.postcard {
+  background: var(--color-surface);
+  border-radius: var(--radius-lg);
+  border: 1px solid var(--color-border);
+  box-shadow: var(--shadow-sm);
+  padding: var(--space-md);
+  display: flex;
+  flex-direction: column;
+  gap: var(--space-sm);
+  transition: box-shadow 0.2s ease, transform 0.2s ease;
+}
+
+.postcard:hover {
+  box-shadow: var(--shadow-md);
+  transform: translateY(-1px);
+}
+.postcard {
+  background: var(--color-surface);
+  border-radius: var(--radius-lg);
+  border: 1px solid var(--color-border);
+  box-shadow: var(--shadow-sm);
+  padding: var(--space-md);
+  display: flex;
+  flex-direction: column;
+  gap: var(--space-sm);
+  transition: box-shadow 0.2s ease, transform 0.2s ease;
+}
+
+.postcard:hover {
+  box-shadow: var(--shadow-md);
+  transform: translateY(-1px);
+}
+.postcard-content {
+  font-size: 0.95rem;
+  color: var(--color-text-secondary);
+}
+.postcard-actions {
+  display: flex;
+  gap: var(--space-md);
+  align-items: center;
+  font-size: 0.85rem;
+  color: var(--color-text-muted);
+}
+
+.postcard-action {
+  display: flex;
+  align-items: center;
+  gap: 0.3rem;
+  cursor: pointer;
+  user-select: none;
+}
+
+.postcard-action:hover {
+  color: var(--color-text-main);
+}
+.postcard--discovery {
+  border: 1px solid var(--color-primary);
+  box-shadow:
+    0 0 0 1px rgba(46, 125, 50, 0.15),
+    var(--shadow-sm);
+}
+.feed-header,
+.explore-header {
+  padding: var(--space-lg) var(--space-md) var(--space-md);
+}
+
+.feed-header p,
+.explore-header p {
+  color: var(--color-text-secondary);
+  margin: 0.25rem 0 0;
+}
+.post-list {
+  display: flex;
+  flex-direction: column;
+  gap: var(--space-md);
+  padding: 0 var(--space-md) var(--space-xl);
+}
+.fresh-scroll,
+.trending-scroll {
+  display: flex;
+  gap: var(--space-sm);
+  overflow-x: auto;
+  padding: var(--space-sm) var(--space-md);
+}
+
+.hide-scrollbar {
+  scrollbar-width: none;
+}
+
+.hide-scrollbar::-webkit-scrollbar {
+  display: none;
+}
+.fresh-item,
+.trending-item {
+  background: var(--color-surface);
+  border-radius: var(--radius-md);
+  padding: var(--space-sm);
+  min-width: 80px;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 0.3rem;
+  box-shadow: var(--shadow-sm);
+  border: 1px solid var(--color-border);
+}
+.profile-header {
+  display: flex;
+  gap: var(--space-lg);
+  padding: var(--space-lg);
+  background: var(--color-surface);
+  border-radius: var(--radius-lg);
+  border: 1px solid var(--color-border);
+  box-shadow: var(--shadow-sm);
+  margin: var(--space-md);
+}
+.profile-stats {
+  display: flex;
+  gap: var(--space-lg);
+  margin-top: var(--space-sm);
+}
+
+.profile-stats div {
+  text-align: center;
+}
+
+.profile-stats strong {
+  font-size: 1.1rem;
+}
+
+.profile-stats span {
+  font-size: 0.8rem;
+  color: var(--color-text-muted);
+}
+.post-preview-overlay {
+  position: fixed;
+  inset: 0;
+  background: rgba(0, 0, 0, 0.35);
+  display: flex;
+  justify-content: center;
+  align-items: flex-end;
+  z-index: 50;
+}
+
+.post-preview-modal {
+  background: var(--color-surface);
+  width: 100%;
+  max-width: 600px;
+  border-radius: var(--radius-lg) var(--radius-lg) 0 0;
+  padding: var(--space-lg);
+  box-shadow: var(--shadow-lg);
+}

frontend/app/layout.tsx

@@ -1,5 +1,7 @@
 import './globals.css';
-import Navigation from './components/Navigation';
+/*import Navigation from './components/Navigation';*/
+import BottomNav from './components/BottomNav/BottomNav';
+
 
 export const metadata = {
   title: 'OnlyPets',
@@ -14,11 +16,13 @@ export default function RootLayout({
   return (
     <html lang="de">
       <body>
-        <Navigation />
-        <main style={{ padding: '2rem' }}>
-          {children}
-        </main>
-      </body>
+  <div style={{ paddingBottom: '80px' }}>
+    {children}
+  </div>
+
+  <BottomNav />
+</body>
+
     </html>
   );
 }

frontend/app/profile/page.tsx

@@ -1,3 +1,157 @@
+'use client';
+
+import PostCard, {
+  PostCardData,
+} from '@/app/components/PostCard/PostCard';
+
+/* =======================
+   MOCK: USER
+======================= */
+
+const user = {
+  id: 1,
+  name: 'Laura',
+  username: '@laura_pets',
+  bio: 'Liebt Tiere, Natur & ruhige Momente.',
+  stats: {
+    pets: 2,
+    posts: 6,
+    follows: 18,
+  },
+};
+
+/* =======================
+   MOCK: PETS
+======================= */
+
+const pets = [
+  {
+    id: 1,
+    name: 'Nala',
+    type: 'Katze',
+    breed: 'Maine Coon',
+    age: '3 Jahre',
+  },
+  {
+    id: 2,
+    name: 'Rocky',
+    type: 'Hund',
+    breed: 'Labrador',
+    age: '4 Jahre',
+  },
+];
+
+/* =======================
+   MOCK: POSTS
+======================= */
+
+const posts: PostCardData[] = [
+  {
+    id: 501,
+    petName: 'Nala',
+    petType: 'Katze',
+    authorName: 'Laura',
+    createdAt: 'gestern',
+    text: 'Nala beobachtet alles ganz ruhig.',
+    likesCount: 6,
+    commentsCount: 1,
+  },
+  {
+    id: 502,
+    petName: 'Rocky',
+    petType: 'Hund',
+    authorName: 'Laura',
+    createdAt: 'vor 2 Tagen',
+    text: 'Rocky liebt lange Spaziergänge.',
+    likesCount: 9,
+    commentsCount: 2,
+  },
+];
+
+/* =======================
+   PAGE
+======================= */
+
 export default function ProfilePage() {
-  return <h1>Profil</h1>;
+  return (
+    <>
+      {/* ================= USER HEADER ================= */}
+      <section className="profile-header">
+        <div className="profile-avatar">
+          <span>👤</span>
+        </div>
+
+        <div className="profile-info">
+          <h1>{user.name}</h1>
+          <span className="profile-username">
+            {user.username}
+          </span>
+
+          {user.bio && (
+            <p className="profile-bio">
+              {user.bio}
+            </p>
+          )}
+
+          <div className="profile-stats">
+            <div>
+              <strong>{user.stats.pets}</strong>
+              <span>Tiere</span>
+            </div>
+            <div>
+              <strong>{user.stats.posts}</strong>
+              <span>Beiträge</span>
+            </div>
+            <div>
+              <strong>{user.stats.follows}</strong>
+              <span>Abos</span>
+            </div>
+          </div>
+        </div>
+      </section>
+
+      {/* ================= PETS ================= */}
+      <section className="profile-pets">
+        <h2>Meine Tiere</h2>
+
+        <div className="pets-grid">
+          {pets.map((pet) => (
+            <a
+              key={pet.id}
+              href={`/pets/${pet.id}`}
+              className="pet-card"
+            >
+              <div className="pet-avatar">🐾</div>
+
+              <strong className="pet-name">
+                {pet.name}
+              </strong>
+
+              <span className="pet-meta">
+                {pet.type} · {pet.breed}
+              </span>
+
+              <span className="pet-age">
+                {pet.age}
+              </span>
+            </a>
+          ))}
+        </div>
+      </section>
+
+      {/* ================= POSTS ================= */}
+      <section className="profile-posts">
+        <h2>Beiträge</h2>
+
+        <div className="post-list">
+          {posts.map((post) => (
+            <PostCard
+              key={post.id}
+              post={post}
+            />
+          ))}
+        </div>
+      </section>
+    </>
+  );
 }

frontend/middleware.ts

@@ -0,0 +1,42 @@
+import { NextResponse } from 'next/server';
+import type { NextRequest } from 'next/server';
+
+export function middleware(request: NextRequest) {
+  const { pathname } = request.nextUrl;
+
+  // 🔐 Simulierter Login-Check
+  // später: Cookie / Session / JWT
+  const isLoggedIn = request.cookies.get('onlypets-auth')?.value === 'true';
+
+  // 🚪 Gast auf Startseite lassen
+  if (!isLoggedIn && pathname === '/') {
+    return NextResponse.next();
+  }
+
+  // 🏠 Eingeloggt? Startseite überspringen → Feed
+  if (isLoggedIn && pathname === '/') {
+    return NextResponse.redirect(new URL('/feed', request.url));
+  }
+
+  // 🔒 Geschützte Seiten
+  const protectedRoutes = [
+  '/feed',
+  '/post',
+  '/pets',
+  '/explore',   // 🔍 Entdecken / Neue Beiträge
+  '/profile',    // 👤 Eigenes Profil
+  '/user',       // 👥 fremde Profile (z. B. /user/123)
+];
+
+
+  if (!isLoggedIn && protectedRoutes.some((route) => pathname.startsWith(route))) {
+    return NextResponse.redirect(new URL('/login', request.url));
+  }
+
+  // 🔄 Login-Seite für eingeloggte User blocken
+  if (isLoggedIn && pathname === '/login') {
+    return NextResponse.redirect(new URL('/feed', request.url));
+  }
+
+  return NextResponse.next();
+}