Implement checkout and payment flow with new components

- Added Checkout and Payment pages to handle user authentication and order processing.
- Introduced MockPayPalButton for simulating payment during development.
- Updated CartSheet and CartSidebar components to navigate to the new checkout page.
- Enhanced Cart UI with responsive design for mobile and desktop views.
- Implemented order confirmation and success pages to provide feedback after payment completion.

These changes complete the checkout and payment functionality, improving the overall user experience and ensuring a seamless transition from cart to order confirmation.

app/components/MockPayPalButton.vue

@@ -0,0 +1,106 @@
+<script setup lang="ts">
+/**
+ * Mock PayPal Button Component
+ *
+ * Simulates a PayPal payment for development/testing purposes.
+ * In production, this would be replaced with the real PayPal SDK integration.
+ *
+ * Features:
+ * - Displays mock PayPal button with branding
+ * - Simulates 2-second payment processing
+ * - Emits success event after "payment" completes
+ * - Shows loading state during processing
+ * - Displays amount to be paid
+ */
+
+interface Props {
+  orderId: string
+  amount: number
+}
+
+const props = defineProps<Props>()
+
+const emit = defineEmits<{
+  success: []
+}>()
+
+const isProcessing = ref(false)
+
+/**
+ * Simulate PayPal payment
+ * In production, this would integrate with PayPal SDK
+ */
+async function handlePayment() {
+  isProcessing.value = true
+
+  try {
+    // Simulate payment processing delay (2 seconds)
+    await new Promise((resolve) => setTimeout(resolve, 2000))
+
+    // In production: Call PayPal API to process payment
+    // const result = await processPayPalPayment(props.orderId, props.amount)
+
+    // Emit success event
+    emit('success')
+  } catch (error) {
+    console.error('Mock payment failed:', error)
+    // In production: Show error message to user
+  } finally {
+    isProcessing.value = false
+  }
+}
+</script>
+
+<template>
+  <div class="space-y-4">
+    <!-- Payment Amount Info -->
+    <div class="flex items-center justify-between p-4 bg-white/5 rounded-lg border border-white/10">
+      <span class="text-white/80">Zu zahlen:</span>
+      <span class="text-xl font-bold text-experimenta-accent">
+        {{
+          new Intl.NumberFormat('de-DE', {
+            style: 'currency',
+            currency: 'EUR',
+          }).format(amount)
+        }}
+      </span>
+    </div>
+
+    <!-- Mock PayPal Button -->
+    <button
+      @click="handlePayment"
+      :disabled="isProcessing"
+      class="w-full relative overflow-hidden bg-[#0070ba] hover:bg-[#005ea6] disabled:bg-[#0070ba]/50 disabled:cursor-not-allowed text-white font-bold py-4 px-6 rounded-lg transition-colors shadow-lg"
+    >
+      <span v-if="!isProcessing" class="flex items-center justify-center gap-3">
+        <!-- PayPal Logo SVG -->
+        <svg
+          class="w-6 h-6"
+          viewBox="0 0 24 24"
+          fill="currentColor"
+          xmlns="http://www.w3.org/2000/svg"
+        >
+          <path
+            d="M20.067 8.478c.492.88.556 2.014.3 3.327-.74 3.806-3.276 5.12-6.514 5.12h-.5a.805.805 0 00-.794.683l-.94 5.96-.267 1.69a.404.404 0 01-.4.342H7.55a.48.48 0 01-.474-.555l.912-5.782.916-5.816a.959.959 0 01.948-.812h1.964c4.332 0 7.299-1.775 8.06-6.145a4.803 4.803 0 00-.808-4.014 6.186 6.186 0 00-1.636-1.293A7.943 7.943 0 0013.784 0H6.732A.959.959 0 005.784.812L2.076 23.235a.48.48 0 00.474.555h3.952a.959.959 0 00.948-.812l.912-5.782h1.74c4.919 0 8.74-2.016 9.965-7.718z"
+          />
+        </svg>
+        <span>Mit PayPal bezahlen (Mock)</span>
+      </span>
+      <span v-else class="flex items-center justify-center gap-2">
+        <div
+          class="animate-spin rounded-full h-5 w-5 border-2 border-white/20 border-t-white"
+        />
+        Zahlung wird verarbeitet...
+      </span>
+    </button>
+
+    <!-- Mock Info -->
+    <div class="text-center">
+      <p class="text-xs text-white/40 italic">
+        Dies ist ein Mock-PayPal-Button für Entwicklungszwecke.
+        <br />
+        Die Zahlung wird simuliert und ist nicht echt.
+      </p>
+    </div>
+  </div>
+</template>