feat(ui): finalize form controls, button states and select styling

- add disabled and loading states for all buttons
- align danger button radius and interaction with design system
- improve native select styling for consistent rounded appearance
- normalize focus, hover and active states for form controls
- ensure visual consistency across pets, posts and forms

frontend/app/globals.css

@@ -45,12 +45,7 @@ html, body {
 
 
 
-@media (prefers-color-scheme: dark) {
+
-  :root {
-    --background: #0a0a0a;
-    --foreground: #ededed;
-  }
-}
 
 body {
   background: var(--background);
@@ -129,22 +124,12 @@ body {
     transform: translateY(0);
   }
 }
-.postcard {
+@keyframes spin {
-  background: var(--color-surface);
+  to {
-  border-radius: var(--radius-lg);
+    transform: rotate(360deg);
-  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);
@@ -187,7 +172,7 @@ body {
 .postcard--discovery {
   border: 1px solid var(--color-primary);
   box-shadow:
-    0 0 0 1px rgba(46, 125, 50, 0.15),
+    0 0 0 1px rgba(236, 214, 15, 0.925),
     var(--shadow-sm);
 }
 .feed-header,
@@ -204,7 +189,7 @@ body {
   display: flex;
   flex-direction: column;
   gap: var(--space-md);
-  padding: 0 var(--space-md) var(--space-xl);
+  padding-bottom: calc(var(--space-xl) + 60px);
 }
 .fresh-scroll,
 .trending-scroll {
@@ -214,9 +199,7 @@ body {
   padding: var(--space-sm) var(--space-md);
 }
 
-.hide-scrollbar {
+
-  scrollbar-width: none;
-}
 
 .hide-scrollbar::-webkit-scrollbar {
   display: none;
@@ -238,16 +221,43 @@ body {
   display: flex;
   gap: var(--space-lg);
   padding: var(--space-lg);
+  margin: var(--space-md);
   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-avatar {
+  width: 72px;
+  height: 72px;
+  border-radius: 50%;
+  background: var(--color-primary-soft);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 2rem;
+}
+.profile-info h1 {
+  font-size: 1.3rem;
+  margin: 0;
+}
+
+.profile-username {
+  font-size: 0.85rem;
+  color: var(--color-text-muted);
+}
+
+.profile-bio {
+  margin-top: var(--space-sm);
+  font-size: 0.9rem;
+  color: var(--color-text-secondary);
+}
+
+
 .profile-stats {
   display: flex;
   gap: var(--space-lg);
-  margin-top: var(--space-sm);
+  margin-top: var(--space-md);
 }
 
 .profile-stats div {
@@ -255,13 +265,51 @@ body {
 }
 
 .profile-stats strong {
-  font-size: 1.1rem;
+  font-size: 1.05rem;
+  font-weight: 600;
 }
 
 .profile-stats span {
-  font-size: 0.8rem;
+  font-size: 0.75rem;
   color: var(--color-text-muted);
 }
+.profile-pets {
+  margin-top: var(--space-lg);
+  padding: 0 var(--space-md);
+}
+
+.profile-pets h2 {
+  font-size: 1.1rem;
+  margin-bottom: var(--space-sm);
+}
+.pets-grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
+  gap: var(--space-md);
+}
+.pet-card {
+  background: var(--color-surface);
+  border-radius: var(--radius-md);
+  border: 1px solid var(--color-border);
+  box-shadow: var(--shadow-sm);
+  padding: var(--space-sm);
+  text-align: center;
+  transition: box-shadow 0.2s ease, transform 0.2s ease;
+}
+.profile-posts {
+  margin-top: var(--space-xl);
+}
+
+.profile-posts h2 {
+  font-size: 1.1rem;
+  margin: 0 var(--space-md) var(--space-sm);
+}
+
+.pet-card:hover {
+  box-shadow: var(--shadow-md);
+  transform: translateY(-1px);
+}
+
 .post-preview-overlay {
   position: fixed;
   inset: 0;
@@ -270,13 +318,406 @@ body {
   justify-content: center;
   align-items: flex-end;
   z-index: 50;
+  overflow: hidden;
 }
 
 .post-preview-modal {
   background: var(--color-surface);
   width: 100%;
   max-width: 600px;
+
+  /* 🔥 DAS FEHLT */
+  max-height: calc(100vh - 70px); /* Platz für Statusbar */
+  overflow-y: auto;
+
   border-radius: var(--radius-lg) var(--radius-lg) 0 0;
   padding: var(--space-lg);
   box-shadow: var(--shadow-lg);
+  padding-bottom: calc(var(--space-xl) + 60px);
+}
+
+.explore-filter {
+  display: flex;
+  gap: var(--space-sm);
+  margin-top: var(--space-md);
+}
+
+.filter-button {
+  padding: 0.4rem 0.8rem;
+  border-radius: 999px;
+  border: 1px solid var(--color-border);
+  background: var(--color-surface);
+  font-size: 0.85rem;
+  color: var(--color-text-secondary);
+  cursor: pointer;
+}
+
+.filter-button.active {
+  background: var(--color-primary);
+  color: white;
+  border-color: var(--color-primary);
+}
+
+.explore-header,
+.explore-trending,
+.explore-posts {
+  padding: 0 var(--space-md);
+}
+
+.explore-trending,
+.explore-posts {
+  margin-top: var(--space-lg);
+}
+.explore-header h1 {
+  font-size: 1.4rem;
+  margin-bottom: 0.2rem;
+}
+
+.explore-header p {
+  font-size: 0.9rem;
+  color: var(--color-text-secondary);
+}
+
+.explore-trending strong,
+.explore-posts strong {
+  display: block;
+  margin-bottom: var(--space-sm);
+}
+.feed-header {
+  padding: var(--space-lg) var(--space-md) var(--space-md);
+}
+
+.feed-header h1 {
+  font-size: 1.4rem;
+  margin-bottom: 0.2rem;
+}
+
+.feed-header p {
+  font-size: 0.9rem;
+  color: var(--color-text-secondary);
+}
+.feed-posts {
+  margin-top: var(--space-md);
+}
+.feed-posts .postcard {
+  margin-bottom: var(--space-md);
+}
+.feed-header h1::after {
+  content: '•';
+  margin-left: 0.4rem;
+  color: var(--color-primary);
+}
+.pets-page {
+  padding-bottom: calc(var(--space-xl) + 60px); /* Abstand zur BottomNav */
+}
+.pets-header {
+  padding: var(--space-lg) var(--space-md) var(--space-md);
+}
+
+.pets-header h1 {
+  font-size: 1.4rem;
+  margin-bottom: 0.25rem;
+}
+
+.pets-header p {
+  font-size: 0.9rem;
+  color: var(--color-text-secondary);
+  margin: 0;
+}
+.pets-grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
+  gap: var(--space-md);
+  padding: 0 var(--space-md);
+}
+.pet-card {
+  background: var(--color-surface);
+  border-radius: var(--radius-lg);
+  border: 1px solid var(--color-border);
+  box-shadow: var(--shadow-sm);
+  padding: var(--space-md);
+  text-align: center;
+  text-decoration: none;
+  color: inherit;
+  display: flex;
+  flex-direction: column;
+  gap: 0.3rem;
+  transition: box-shadow 0.2s ease, transform 0.2s ease;
+}
+
+.pet-card:hover {
+  box-shadow: var(--shadow-md);
+  transform: translateY(-1px);
+}
+.pet-avatar {
+  width: 56px;
+  height: 56px;
+  border-radius: 50%;
+  background: var(--color-primary-soft);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 1.6rem;
+  margin: 0 auto var(--space-sm);
+}
+.pet-name {
+  font-size: 1rem;
+  font-weight: 600;
+}
+
+.pet-meta {
+  font-size: 0.8rem;
+  color: var(--color-text-muted);
+}
+
+.pet-age {
+  font-size: 0.75rem;
+  color: var(--color-text-secondary);
+}
+.pets-actions {
+  margin-top: var(--space-xl);
+  padding: 0 var(--space-md);
+}
+.button-primary {
+  display: inline-flex;
+  justify-content: center;
+  align-items: center;
+  gap: 0.4rem;
+  padding: 0.8rem 1.2rem;
+  border-radius: 12px;
+  background: var(--color-primary);
+  color: white;
+  font-weight: 600;
+  text-decoration: none;
+  border: none;
+  cursor: pointer;
+  box-shadow: var(--shadow-sm);
+  transition: box-shadow 0.2s ease, transform 0.15s ease;
+}
+
+.button-primary:hover {
+  box-shadow: var(--shadow-md);
+  transform: translateY(-1px);
+}
+.button-secondary {
+  display: inline-flex;
+  justify-content: center;
+  align-items: center;
+  padding: 0.8rem 1.2rem;
+  border-radius: 12px;
+  background: var(--color-surface);
+  color: var(--color-text-main);
+  border: 1px solid var(--color-border);
+  font-weight: 500;
+  cursor: pointer;
+}
+.button-danger {
+  display: inline-flex;
+  justify-content: center;
+  align-items: center;
+  gap: 0.4rem;
+
+  padding: 0.8rem 1.2rem;
+  border-radius: 12px; /* 🔴 gleiche Rundung wie grün */
+
+  background: #c62828;
+  color: white;
+  font-weight: 600;
+
+  border: none;
+  cursor: pointer;
+  text-decoration: none;
+
+  box-shadow: var(--shadow-sm);
+  transition: box-shadow 0.2s ease, transform 0.15s ease;
+}
+
+.button-danger:hover {
+  background: #b71c1c;
+  box-shadow: var(--shadow-md);
+}
+.button-danger:active {
+  transform: scale(0.98);
+}
+.badge {
+  display: inline-block;
+  padding: 0.15rem 0.5rem;
+  font-size: 0.7rem;
+  border-radius: 999px;
+  background: var(--color-border);
+  color: var(--color-text-muted);
+}
+.badge-pet {
+  background: var(--color-primary-soft);
+  color: var(--color-primary);
+}
+.postcard--discovery {
+  border: 1px solid var(--color-primary);
+  box-shadow:
+    0 0 0 1px rgba(46, 125, 50, 0.15),
+    var(--shadow-sm);
+}
+.empty-state {
+  padding: var(--space-xl);
+  margin: var(--space-md);
+  text-align: center;
+  background: var(--color-surface);
+  border-radius: var(--radius-lg);
+  border: 1px dashed var(--color-border);
+  color: var(--color-text-secondary);
+}
+
+.empty-state strong {
+  display: block;
+  font-size: 1rem;
+  font-weight: 600;
+  color: var(--color-text-main);
+  margin-bottom: 0.3rem;
+}
+
+.empty-state span {
+  font-size: 0.85rem;
+  line-height: 1.4;
+}
+.empty-state--explore {
+  border-style: solid;
+}
+.empty-state--pets {
+  border-style: dashed;
+}
+
+button:active,
+.button-primary:active {
+  transform: scale(0.98);
+}
+
+a {
+  -webkit-tap-highlight-color: transparent;
+}
+section + section {
+  margin-top: var(--space-xl);
+}
+
+h1, h2, h3 {
+  line-height: 1.25;
+}
+.pet-detail-page {
+  padding-bottom: calc(var(--space-xl) + 60px); /* Platz für BottomNav */
+}
+.pet-detail-header {
+  display: flex;
+  gap: var(--space-lg);
+  padding: var(--space-lg);
+  margin: var(--space-md);
+  background: var(--color-surface);
+  border-radius: var(--radius-lg);
+  border: 1px solid var(--color-border);
+  box-shadow: var(--shadow-sm);
+  align-items: center;
+}
+.pet-detail-avatar {
+  width: 72px;
+  height: 72px;
+  border-radius: 50%;
+  background: var(--color-primary-soft);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 2rem;
+  flex-shrink: 0;
+}
+.pet-detail-info h1 {
+  font-size: 1.4rem;
+  margin: 0;
+}
+
+.pet-detail-meta {
+  display: block;
+  font-size: 0.9rem;
+  color: var(--color-text-secondary);
+  margin-top: 0.2rem;
+}
+
+.pet-detail-owner {
+  display: block;
+  font-size: 0.8rem;
+  color: var(--color-text-muted);
+  margin-top: 0.3rem;
+}
+.pet-detail-posts {
+  margin-top: var(--space-xl);
+}
+
+.pet-detail-posts h2 {
+  font-size: 1.1rem;
+  margin: 0 var(--space-md) var(--space-sm);
+}
+
+.container {
+  max-width: 720px;
+  margin: 0 auto;
+}
+.divider {
+  height: 1px;
+  background: var(--color-border);
+  margin: var(--space-lg) 0;
+}
+button:disabled,
+.button-primary:disabled,
+.button-secondary:disabled,
+.button-danger:disabled {
+  opacity: 0.55;
+  cursor: not-allowed;
+  box-shadow: none;
+  transform: none;
+}
+.button-primary.is-loading,
+.button-secondary.is-loading,
+.button-danger.is-loading {
+  position: relative;
+  pointer-events: none;
+  color: transparent; /* Text ausblenden */
+}
+.button-primary.is-loading::after,
+.button-secondary.is-loading::after,
+.button-danger.is-loading::after {
+  content: '';
+  width: 16px;
+  height: 16px;
+  border: 2px solid rgba(255, 255, 255, 0.4);
+  border-top-color: white;
+  border-radius: 50%;
+  position: absolute;
+  animation: spin 0.8s linear infinite;
+}
+select {
+  appearance: none;
+  -webkit-appearance: none;
+  -moz-appearance: none;
+
+  width: 100%;
+  padding: 0.7rem 2.4rem 0.7rem 0.9rem;
+  border-radius: var(--radius-lg);
+  border: 1px solid var(--color-border);
+  background-color: var(--color-surface);
+  color: var(--color-text-main);
+  font-size: 0.9rem;
+  line-height: 1.3;
+
+  box-shadow: var(--shadow-sm);
+  cursor: pointer;
+
+  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24'%3E%3Cpath fill='%235f6f66' d='M7 10l5 5 5-5z'/%3E%3C/svg%3E");
+  background-repeat: no-repeat;
+  background-position: right 0.9rem center;
+}
+select:focus {
+  outline: none;
+  border-color: var(--color-primary);
+  box-shadow: 0 0 0 2px rgba(46, 125, 50, 0.15);
+}
+select:disabled {
+  background-color: var(--color-primary-soft);
+  color: var(--color-text-muted);
+  cursor: not-allowed;
 }

frontend/app/pets/[id]/page.tsx

@@ -1,27 +1,27 @@
+'use client';
+
+import { useParams } from 'next/navigation';
 import PostCard from '@/app/components/PostCard/PostCard';
 
-type Comment = {
-  id: number;
-  author: string;
-  text: string;
-};
-
-type PetPost = {
-  id: number;
-  text: string;
-  createdAt: string;
-  likes: number;
-  commentsCount: number;
-  commentsList: Comment[];
-};
-
 type Pet = {
   id: number;
   name: string;
   type: 'Hund' | 'Katze';
   breed: string;
-  bio?: string;
+  age?: string;
-  posts: PetPost[];
+  owner: string;
+};
+
+type Post = {
+  id: number;
+  petId: number;
+  petName: string;
+  petType: 'Hund' | 'Katze';
+  author: string;
+  text: string;
+  createdAt: string;
+  likes: number;
+  comments: number;
 };
 
 const mockPets: Pet[] = [
@@ -29,76 +29,103 @@ const mockPets: Pet[] = [
     id: 1,
     name: 'Luna',
     type: 'Katze',
-    breed: 'Bengal x Mix',
+    breed: 'Bengal',
-    bio: 'Neugierig, verspielt und liebt Sonne.',
+    age: '2 Jahre',
-    posts: [
+    owner: 'Anna',
-      {
-        id: 101,
-        text: 'Luna genießt die Sonne ☀️',
-        createdAt: 'vor 2 Stunden',
-        likes: 12,
-        commentsCount: 2,
-        commentsList: [
-          { id: 1, author: 'Lisa', text: 'Wie süß 😍' },
-          { id: 2, author: 'Tom', text: 'Typisch Bengal!' },
-        ],
-      },
-    ],
   },
   {
     id: 2,
     name: 'Bello',
     type: 'Hund',
-    breed: 'Labrador Retriever x Mix',
+    breed: 'Labrador',
-    bio: 'Immer gute Laune.',
+    age: '4 Jahre',
-    posts: [],
+    owner: 'Markus',
   },
 ];
 
-type PageProps = {
+const mockPosts: Post[] = [
-  params: Promise<{ id: string }>;
+  {
-};
+    id: 101,
+    petId: 1,
+    petName: 'Luna',
+    petType: 'Katze',
+    author: 'Anna',
+    text: 'Luna liebt sonnige Nachmittage auf dem Balkon ☀️',
+    createdAt: 'vor 3 Stunden',
+    likes: 12,
+    comments: 3,
+  },
+  {
+    id: 102,
+    petId: 1,
+    petName: 'Luna',
+    petType: 'Katze',
+    author: 'Anna',
+    text: 'Heute gab es neue Spielsachen 🧶',
+    createdAt: 'gestern',
+    likes: 7,
+    comments: 1,
+  },
+];
 
-export default async function PetDetailPage({ params }: PageProps) {
+export default function PetDetailPage() {
-  const { id } = await params; // ✅ DAS ist der entscheidende Fix
+  const params = useParams();
-  const petId = Number(id);
+  const petId = Number(params.id);
-
-  console.log('PET ID:', petId);
 
   const pet = mockPets.find((p) => p.id === petId);
+  const posts = mockPosts.filter((p) => p.petId === petId);
 
   if (!pet) {
-    return <p>Haustier nicht gefunden.</p>;
+    return (
+      <div className="empty-state">
+        <strong>Tier nicht gefunden</strong>
+        <span>Dieses Haustier existiert nicht oder wurde entfernt.</span>
+      </div>
+    );
   }
 
   return (
-    <section style={{ maxWidth: '600px', margin: '0 auto', display: 'grid', gap: '1.5rem' }}>
+    <section className="pet-detail-page">
-      <header style={{ border: '1px solid #e5e5e5', borderRadius: '16px', padding: '1rem' }}>
+      {/* Header */}
-        <h1>{pet.name}</h1>
+      <header className="pet-detail-header">
-        <div>{pet.type} · {pet.breed}</div>
+        <div className="pet-detail-avatar">🐾</div>
-        {pet.bio && <p>{pet.bio}</p>}
+
+        <div className="pet-detail-info">
+          <h1>{pet.name}</h1>
+
+          <span className="pet-detail-meta">
+            {pet.type} · {pet.breed}
+            {pet.age && ` · ${pet.age}`}
+          </span>
+
+          <span className="pet-detail-owner">
+            Betreut von {pet.owner}
+          </span>
+        </div>
       </header>
 
-      <section style={{ display: 'grid', gap: '1.2rem' }}>
+      {/* Posts */}
+      <section className="pet-detail-posts">
         <h2>Beiträge</h2>
 
-        {pet.posts.length === 0 && (
+        {posts.length === 0 ? (
-          <p style={{ color: '#777' }}>Dieses Haustier hat noch keine Beiträge.</p>
+          <div className="empty-state">
+            <strong>Noch keine Beiträge</strong>
+            <span>
+              Für {pet.name} wurden noch keine Beiträge erstellt.
+            </span>
+          </div>
+        ) : (
+          <div className="post-list">
+            {posts.map((post) => (
+              <PostCard
+                key={post.id}
+                post={post}
+                isDiscovery={false}
+              />
+            ))}
+          </div>
         )}
-
-        {pet.posts.map((post) => (
-          <PostCard
-            key={post.id}
-            petName={pet.name}
-            petType={pet.type}
-            author="Du"
-            text={post.text}
-            createdAt={post.createdAt}
-            likes={post.likes}
-            commentsCount={post.commentsCount}
-            commentsList={post.commentsList}
-          />
-        ))}
       </section>
     </section>
   );

frontend/app/pets/new/page.tsx

@@ -2,6 +2,8 @@
 
 import { useState } from 'react';
 import Link from 'next/link';
+import { useRouter } from 'next/navigation';
+
 import { dogBreeds, catBreeds } from '@/app/data/breeds';
 
 type PetType = 'Hund' | 'Katze' | '';
@@ -14,6 +16,11 @@ export default function NewPetPage() {
   const [bio, setBio] = useState('');
   const [error, setError] = useState('');
   const [success, setSuccess] = useState('');
+const router = useRouter();
+
+function handleCancel() {
+  router.back(); // geht zur vorherigen Seite zurück
+}
 
   const breeds =
     type === 'Hund'
@@ -208,7 +215,14 @@ export default function NewPetPage() {
             Haustier speichern
           </button>
 
-          <Link href="/pets">Abbrechen</Link>
+          <button
+            type="button"
+            onClick={handleCancel}
+            className="button-danger"
+            >
+            Abbrechen
+          </button>
+
         </div>
       </form>
     </section>

frontend/app/pets/page.tsx

@@ -1,75 +1,80 @@
+'use client';
+
 import Link from 'next/link';
 
 type Pet = {
   id: number;
   name: string;
   type: 'Hund' | 'Katze';
+  breed: string;
+  age?: string;
 };
 
 const mockPets: Pet[] = [
-  { id: 1, name: 'Luna', type: 'Katze' },
+  {
-  { id: 2, name: 'Bello', type: 'Hund' },
+    id: 1,
+    name: 'Luna',
+    type: 'Katze',
+    breed: 'Bengal',
+    age: '2 Jahre',
+  },
+  {
+    id: 2,
+    name: 'Bello',
+    type: 'Hund',
+    breed: 'Labrador',
+    age: '4 Jahre',
+  },
+  {
+    id: 3,
+    name: 'Milo',
+    type: 'Katze',
+    breed: 'Europäisch Kurzhaar',
+  },
 ];
 
 export default function PetsPage() {
   return (
-    <section
+    <section className="pets-page">
-      style={{
+      {/* Header */}
-        maxWidth: '600px',
+      <header className="pets-header">
-        margin: '0 auto',
+        <h1>Meine Tiere</h1>
-        display: 'grid',
+        <p>
-        gap: '1.5rem',
+          Verwalte deine Haustiere – Beiträge sind immer einem Tier zugeordnet.
-      }}
-    >
-      <header>
-        <h1 style={{ marginBottom: '0.5rem' }}>Meine Haustiere</h1>
-        <p style={{ margin: 0, color: '#555' }}>
-          Verwalte deine Hunde und Katzen
         </p>
       </header>
 
-      <section style={{ display: 'grid', gap: '1rem' }}>
+      {/* Pets Grid */}
+      <div className="pets-grid">
         {mockPets.map((pet) => (
           <Link
             key={pet.id}
             href={`/pets/${pet.id}`}
-            style={{
+            className="pet-card"
-              textDecoration: 'none',
-              color: 'inherit',
-              border: '1px solid #e5e5e5',
-              borderRadius: '16px',
-              padding: '1rem',
-              display: 'flex',
-              justifyContent: 'space-between',
-              alignItems: 'center',
-            }}
           >
-            <div>
+            <div className="pet-avatar">
-              <strong>{pet.name}</strong>
+              🐾
-              <div style={{ fontSize: '0.9rem', color: '#555' }}>
-                {pet.type}
-              </div>
             </div>
 
-            <span style={{ fontSize: '1.2rem' }}>›</span>
+            <strong className="pet-name">{pet.name}</strong>
+
+            <span className="pet-meta">
+              {pet.type} · {pet.breed}
+            </span>
+
+            {pet.age && (
+              <span className="pet-age">{pet.age}</span>
+            )}
           </Link>
         ))}
-      </section>
+      </div>
 
-      <Link
+      {/* Add Pet */}
-        href="/pets/new"
+      <div className="pets-actions">
-        style={{
+        <Link href="/pets/new" className="button-primary">
-          alignSelf: 'flex-start',
+          + Neues Tier hinzufügen
-          padding: '0.7rem 1rem',
+        </Link>
-          borderRadius: '12px',
+      </div>
-          backgroundColor: '#2E7D32',
-          color: 'white',
-          textDecoration: 'none',
-          fontWeight: 600,
-        }}
-      >
-        ➕ Haustier hinzufügen
-      </Link>
     </section>
   );
 }