Fix trust-badge title/description misalignment, cap order-confirmation card width at tablet

TrustRow.tsx: reserve 2 lines of height for the title below lg: so the
description starts at the same y-position regardless of whether that
badge's own title happened to wrap to 1 or 2 lines in its narrow
stacked column.

BestellbestaetigungContent.tsx: same fix category as NewsletterModal's
dialog width cap — max-w-[56rem] doesn't constrain anything below
896px, so the order-details card stretched full width through the
640-1023px tablet range. Added max-w-[36rem] there, widening to the
real cap only once lg:'s sidebar split needs the room.

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

app/bestellbestaetigung/components/BestellbestaetigungContent.tsx

@@ -189,9 +189,17 @@ export function BestellbestaetigungContent({ defaultTaxRate }: { defaultTaxRate:
         // already switches at sm: — intentional, not an inconsistent
         // leftover: the inner row has no fixed-width sidebar to fight for
         // room against, just two flexible columns.
+        //
+        // max-w-[36rem] between sm and lg (same fix/value as
+        // NewsletterModal.tsx's own dialog cap) — max-w-[56rem] (896px)
+        // doesn't actually constrain anything below that viewport width,
+        // so at real Tablet widths (640-1023px) this card stretched to
+        // fill the full page width instead of reading as a compact,
+        // centered card. Widens to the real 56rem cap only once lg:'s
+        // sidebar split kicks in and needs the room.
         <Reveal
           delay={0.05}
-          className="w-full max-w-[56rem] mx-auto bg-bg-base border border-border rounded-md overflow-hidden flex flex-col lg:flex-row mb-16"
+          className="w-full max-w-[36rem] lg:max-w-[56rem] mx-auto bg-bg-base border border-border rounded-md overflow-hidden flex flex-col lg:flex-row mb-16"
         >
           <div className="flex-1 p-6 md:p-8 flex flex-col sm:flex-row gap-8">
             {/* Order meta */}