many visual alignments

pages/booking/[uuid]/index.tsx

@@ -56,10 +56,9 @@ export default function ShowBooking({
   }
 
   return (
-    <div className="mx-3 flex flex-col min-h-screen">
-      <Header />
-      <main className="flex-grow">
-        <h2 className="text-3xl">Ihre Buchung</h2>
+    <>
+      <Header label="Ihre Buchung" />
+      <main className="main">
         <div>
           <strong>Buchungsstatus:</strong> {getBookingStatus(booking.status)}
         </div>
@@ -85,6 +84,6 @@ export default function ShowBooking({
       </main>
 
       <Footer />
-    </div>
+    </>
   )
 }

pages/booking/[uuid]/stored.tsx

@@ -24,15 +24,20 @@ export default function ShowBookingStored({
   }
 
   return (
-    <div className="mx-3 flex flex-col min-h-screen">
-      <Header />
-      <main className="flex-grow">
-        <h3>Vielen Dank für die Buchungsanfrage!</h3>
-        <p>Nach Prüfung bestätigen wir die Buchung bald per E-Mail!</p>
+    <>
+      <Header label="Eingangsbestätigung" />
+      <main className="main">
+        <h3 className="text-lg mb-3">Vielen Dank für die Buchungsanfrage</h3>
+        <p className="mb-6">
+          Nach Prüfung bestätigen wir die Buchung zeitnah per E-Mail.
+        </p>
         <p>
+          Den{' '}
           <Link href={`/booking/${booking.uuid}`}>
-            <a className="link">Buchungstatus einsehen</a>
-          </Link>
+            <a className="link">Link</a>
+          </Link>{' '}
+          zur Buchung schicken wir Dir auch per E-Mail. Dort kann die Buchung
+          auch jederzeit storniert werden.
         </p>
         {!storedBookingData && !bookingDataStored && (
           <div className="mt-6">
@@ -56,6 +61,6 @@ export default function ShowBookingStored({
       </main>
 
       <Footer />
-    </div>
+    </>
   )
 }