feat(image): enhance image handling with focal points and responsive support

- Added support for extracting focal points and alt text from CMS image fields.
- Introduced responsive image handling in TopBanner component, allowing for AVIF/WebP sources and LQIP placeholders.
- Updated image transformation functions to accommodate focal point parameters for better cropping.
- Refactored image URL resolution logic across various components and routes to utilize new image field structure.

src/routes/+layout.svelte

@@ -20,7 +20,20 @@
     seoDescription?: string;
     socialImage?: string;
     breadcrumbItems?: { href?: string; label: string }[];
-    topBanner?: { banner: unknown; resolvedImages: string[]; headline?: string; subheadline?: string } | null;
+    topBanner?: {
+      banner: unknown;
+      resolvedImages: string[];
+      headline?: string;
+      subheadline?: string;
+      responsive?: {
+        sources: { type: string; srcset: string }[];
+        fallback: string;
+        width: number;
+        height: number;
+        lqip?: string;
+      } | null;
+      focalCss?: string | null;
+    } | null;
   });
 
   const baseUrl = $derived(data.siteBaseUrl ?? '');
@@ -153,6 +166,8 @@
       <TopBanner
         banner={topBannerData.banner as import('$lib/cms').FullwidthBannerEntry | null}
         resolvedImages={topBannerData.resolvedImages}
+        responsive={topBannerData.responsive ?? null}
+        focalCss={topBannerData.focalCss ?? null}
         headline={topBannerData.headline}
         subheadline={topBannerData.subheadline}
       />