npm - @bytebrand/fe-ui-core-autobahn - Versions diffs - 1.0.56 → 1.0.58 - Mend

@bytebrand/fe-ui-core-autobahn 1.0.56 → 1.0.58

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (10) hide show

package/vdp/VdpViewer.tsx CHANGED Viewed

@@ -1,18 +1,30 @@
 // Autobahn (auto.de redesign) — fullscreen gallery viewer ("full image view").
 //
 // Typed React 18 + TS port of `VdpViewer` from the design kit
-// (docs/redesign/design-source/ui_kits/website/ScreenVDP.jsx). Renders one of two completely
-// separate layouts depending on viewport width (re-evaluated live on resize, breakpoint
-// MOBILE_BREAKPOINT = 860px):
-//   - width <= 860: the Figma "Component | Galerie | Portrait 390x693 | V01" frame (node
-//     424:8154), rebuilt pixel-for-pixel — full-width header (logo + close + call), a
+// (docs/redesign/design-source/ui_kits/website/ScreenVDP.jsx). Renders one of THREE completely
+// separate layouts depending on live viewport width (re-evaluated on resize):
+//   - width <= 693 ("portrait" layout): the Figma "Component | Galerie | Portrait 390x693 | V01"
+//     frame (node 424:8154), rebuilt pixel-for-pixel — full-width header (logo + close + call), a
 //     photo-count / 360° pill pair over the image, always-visible prev/next circles, a vertical
 //     zoom +/- pill, a single fixed thumbnail strip with a "+N" cap tile, and a full-width bottom
-//     bar with the two primary CTAs.
-//   - width > 860: the ORIGINAL desktop layout from before that redesign work (single header row
-//     with counter + zoom + email + call + close, hover-reveal `.car-arrow` prev/next, a wrapping
-//     thumbnail row) — deliberately left untouched so desktop keeps behaving exactly as it did.
-// The two layouts share the same state (index/zoom/pan, keyboard nav, scroll lock) — only the
+//     bar with the two primary CTAs. DO NOT MODIFY for landscape work — this range is done.
+//   - 693 < width <= 860 ("landscape" layout): the Figma "FRAME | Galerie | Landscape 693x390 |
+//     V01" frame (node 424:7525, a DIFFERENT Figma file from the portrait one) — no full-width
+//     header/footer bars at all; every control floats directly over the white canvas with its own
+//     translucent circle/pill background. Distinct from portrait: close/prev/next share ONE circle
+//     style (black/50%) with no caption text, the counter pill is black/50% (not portrait's navy),
+//     360° is a small outlined circle + 8px label stacked into the zoom column instead of a top
+//     pill, thumbnails are 68px (not 64) with only 3 real + a "+N" tile, and the CTA bar sits
+//     inline with the thumbnails (not a separate full-width bar) using the exact token blue
+//     (`--md-primary` == literal `#005cff` here, not portrait's `#0b63f6` approximation) and a flat
+//     `#1c222c` call button. Any icon shared with portrait that is pixel-identical (X, chevrons,
+//     phone, zoom magnifier, offer-request) is reused as-is; anything visually different gets its
+//     own `Ls*`-prefixed component so the portrait ones stay untouched.
+//   - width > 860 ("desktop" layout): the ORIGINAL desktop layout from before this redesign work
+//     (single header row with counter + zoom + email + call + close, hover-reveal `.car-arrow`
+//     prev/next, a wrapping thumbnail row) — deliberately left untouched so desktop keeps behaving
+//     exactly as it did.
+// All three layouts share the same state (index/zoom/pan, keyboard nav, scroll lock) — only the
 // chrome around the photo differs.
 //
 // Pure / presentational: images arrive ALREADY RESOLVED (the design kit's
@@ -34,6 +46,7 @@ import * as ReactDOM from 'react-dom';
 import { TranslationFunction } from '../types';
 import { Icon, IconButton } from '../ui';
+import logoUrl from '../assets/autode-logo.svg';
 const ZOOM_MIN = 1;
 const ZOOM_MAX = 3;
@@ -42,8 +55,17 @@ const THUMB_W = 64;
 const THUMB_H = 50;
 const THUMB_GAP = 8;
 const THUMBS_PAD = 12;
-/** <=860px renders the Figma mobile gallery; wider renders the original desktop layout. */
+/** <693px renders the Figma "Portrait" gallery. 693 itself is the landscape frame's OWN reference
+ *  width (node 424:7525 is exactly 693x390), so it must land in 'landscape', not 'portrait' — a
+ *  phone rotated from 390x693 to 693x390 needs to actually cross into the other bucket. */
+const PORTRAIT_MAX = 692;
+/** <=860px (and >=693) renders the Figma "Landscape" gallery; wider renders the original desktop layout. */
 const MOBILE_BREAKPOINT = 860;
+/** Landscape thumbnails (Figma node 424:7566 etc.) are 68px, not portrait's 64. */
+const LS_THUMB_W = 68;
+type Layout = 'portrait' | 'landscape' | 'desktop';
+const layoutForWidth = (w: number): Layout => (w <= PORTRAIT_MAX ? 'portrait' : w <= MOBILE_BREAKPOINT ? 'landscape' : 'desktop');
 export interface VdpViewerProps {
   /** ready-to-use image URLs (already resolved by the caller). */
@@ -139,14 +161,15 @@ const IconZoomIn: React.FunctionComponent<{ dim?: boolean }> = ({ dim }) => (
     />
   </svg>
 );
-const IconZoomOut: React.FunctionComponent<{ dim?: boolean }> = ({ dim }) => (
-  <svg width={30} height={30} viewBox="0 0 30 30" fill="none" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" style={{ opacity: dim ? 0.4 : 1 }}>
+const IconZoomOut: React.FunctionComponent = () => (
+  <svg width={30} height={30} viewBox="0 0 30 30" fill="none" xmlns="http://www.w3.org/2000/svg">
     <path
       d="M16.3125 22.8125C21.2831 22.8125 25.3125 18.7831 25.3125 13.8125C25.3125 8.84194 21.2831 4.8125 16.3125 4.8125C11.3419 4.8125 7.3125 8.84194 7.3125 13.8125C7.3125 18.7831 11.3419 22.8125 16.3125 22.8125Z"
       stroke="white"
       strokeWidth={1.9}
     />
     <path d="M23.3125 19.8125L28.3125 25.8125" stroke="white" strokeWidth={1.9} strokeLinecap="round" />
+    <path d="M11.625 15V12.625H21V15H11.625Z" fill="white" />
   </svg>
 );
@@ -177,31 +200,103 @@ const IconOfferRequest: React.FunctionComponent<{ size?: number }> = ({ size = 2
   </svg>
 );
-/** Figma "Logo" (node 424:8073, 160×71) — the auto.de wordmark, already authored in white for this
- *  dark-header context (not the brand-blue mark used elsewhere, so no CSS filter trick is needed). */
-const LogoMark: React.FunctionComponent = () => (
+/** Figma "Logo" (node 424:8073, 160×71) — the auto.de wordmark. Authored white for the viewer's own
+ *  dark header bar (this component's original call site, hence the default), but the PhotoSheet
+ *  reuses it at the brand blue (`#005CFF`) instead — so `color` is a prop, not hardcoded. */
+const LogoMark: React.FunctionComponent<{ color?: string }> = ({ color = 'white' }) => (
   <svg width={160} height={71} viewBox="0 0 160 71" fill="none" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" role="img">
-    <path d="M143.317 34.3796C142.516 31.079 140.75 28.5118 137.618 26.9569C135.243 25.7833 132.675 25.2112 130.063 24.9178C126.338 24.4924 122.612 24.1697 118.887 23.8029C115.191 23.4362 111.258 22.7321 110.724 22.6294C110.694 22.6294 108.334 22.1746 107.562 21.8666C106.375 21.3825 103.08 17.9352 91.7998 14.4878C82.835 11.7447 65.618 12.7422 59.6217 13.7837C54.1746 14.7372 43.2655 17.7151 38.7237 19.4314C34.7757 20.9277 24.1634 24.4484 20.1708 27.2943C17.9148 28.8932 15.7478 30.6095 16.1931 36.0812C16.1931 36.0812 16.5493 31.8858 19.7256 29.8907C24.3118 27.0155 31.4658 25.71 34.0335 24.9325C38.8721 23.4655 52.0966 19.3434 60.2154 18.2872C67.1912 17.3777 73.7515 16.6296 81.5586 17.3777C90.2413 18.2139 95.3916 20.5463 95.6439 20.6197C95.8963 20.693 106.197 25.5046 107.355 25.8126C108.512 26.1794 110.189 26.2381 111.392 26.3701C114.568 26.7221 117.818 26.8982 121.009 27.1035C124.008 27.3089 127.006 27.529 129.989 27.8517C132.72 28.1451 135.377 28.7465 137.915 29.8321C140.171 30.8149 142.1 32.1498 143.154 34.4529C143.184 34.5116 143.347 34.849 143.406 34.893C143.421 34.8197 143.332 34.4383 143.317 34.3796Z" fill="white" />
-    <path d="M39.5398 45.5724C39.2874 46.8193 38.4711 48.4916 36.4377 48.3009C35.2058 48.1835 34.7605 46.966 34.8348 46.1591C34.8348 46.0858 34.8644 45.9098 34.8644 45.9098C32.7717 47.8608 30.5453 48.829 27.8737 48.9023C22.6937 49.0343 19.1613 46.0565 19.0425 41.685C18.8941 35.9639 23.0796 31.343 30.1149 31.167C32.742 31.0936 35.3691 31.7831 37.1205 34.3062C37.2986 33.5141 38.011 31.9005 39.4062 31.8711C40.6381 31.8418 41.7067 32.5019 41.7364 33.5728C41.7364 33.6755 41.7067 33.9835 41.6622 34.1302L39.5398 45.5724ZM36.126 38.8978C36.0667 36.624 33.8997 34.8197 31.0648 34.893C27.2058 34.9957 24.0741 37.9296 24.1483 40.9662C24.2077 43.3133 26.1223 45.2056 29.0314 45.1323C32.742 45.0443 36.2151 42.3451 36.126 38.8978Z" fill="white" />
-    <path d="M59.0131 47.626C56.8164 48.7116 54.501 48.917 52.3489 48.917C47.6884 48.917 43.8145 46.5552 43.8145 43.0345C43.8145 42.4771 43.9184 41.1275 44.0372 40.5407L45.1503 34.0715C45.4472 32.7366 46.6791 31.8124 47.9555 31.8124C49.232 31.8124 49.9592 32.7659 49.9592 33.5727C49.9592 33.7928 49.9147 34.0568 49.885 34.2182L48.5344 40.8928C48.4602 41.2889 48.4008 42.0663 48.5344 42.4771C49.0984 44.2374 50.7459 45.0589 53.1207 45.0589C55.7923 45.0589 58.4787 43.1079 58.924 41.5382C59.5177 39.4258 60.4973 33.9688 60.4973 33.9688C60.7941 32.6339 62.0854 31.7977 63.347 31.9004C64.7125 32.0178 65.3359 33.294 65.1429 34.6876C65.039 35.4944 64.6086 37.9736 64.5789 38.1349C64.0001 41.4649 62.8572 45.7337 59.0131 47.626Z" fill="white" />
-    <path d="M69.2544 31.7978L69.7294 29.4507C69.9669 28.2771 71.0355 27.3236 72.5791 27.2943C73.7071 27.2649 74.5828 28.0131 74.6125 28.9519C74.6125 29.1133 74.5828 29.348 74.5234 29.6854L74.0633 32.0031H78.0708C79.5847 32.0031 80.1042 32.6339 79.9557 33.7635C79.7776 35.0104 78.2489 35.4945 76.7498 35.5238L73.3509 35.4505L72.0596 42.125C72.0003 42.4918 71.837 43.2106 72.0745 43.8414C72.2823 44.4135 72.7721 44.8389 73.6181 45.0883C74.1672 45.2496 75.9038 45.2936 75.9038 45.2936C76.9873 45.2643 77.7887 45.6164 77.8184 46.5259C77.8481 47.8314 76.9427 48.9317 75.7257 48.9317C75.7257 48.9317 73.3361 49.1077 71.2136 48.8436C68.6014 48.5209 66.939 46.3792 67.1023 43.9881C67.221 42.2424 67.6663 40.13 67.7257 39.7339L68.5123 35.7585L69.2544 31.7978Z" fill="white" />
-    <path d="M89.2908 48.9757C83.6359 48.9757 80.0589 45.6751 80.0589 41.4649C80.0589 35.5238 85.2388 31.1377 92.3186 31.1377C97.6915 31.1377 101.387 34.4383 101.387 38.7218C101.387 44.4135 96.5338 48.9757 89.2908 48.9757ZM96.8604 39.1765C96.8604 36.9761 94.5746 35.1424 91.8288 35.1424C87.8066 35.1424 84.9865 37.8563 84.9865 40.9808C84.9865 43.2106 86.7824 44.9416 89.6025 45.0003C93.788 45.0736 96.8604 42.4038 96.8604 39.1765Z" fill="white" />
-    <path d="M122.686 46.8046C122.479 47.6261 122.004 48.1982 120.831 48.1982C119.911 48.1982 119.421 47.5087 119.421 46.9659C119.421 46.9219 119.451 46.7312 119.451 46.7312C118.59 47.3473 117.15 48.7703 114.701 48.7703C110.367 48.7703 108.141 46.2911 108.141 43.3719C108.141 38.9418 112.43 36.1252 116.794 36.1252C118.887 36.1252 120.653 37.5775 121.039 38.2816L122.33 32.7073C122.538 31.8858 122.79 31.3283 124.037 31.3283C125.017 31.3283 125.566 31.9151 125.566 32.5459C125.566 32.7219 125.536 32.8833 125.506 32.986L122.686 46.8046ZM116.556 38.8831C113.915 39.0591 111.822 40.8341 111.822 43.0932C111.822 44.6922 112.994 46.1738 115.043 46.1738C117.373 46.1738 120.133 44.5455 120.401 42.7558C120.92 39.4405 117.774 38.7951 116.556 38.8831Z" fill="white" />
-    <path d="M129.558 43.5773C129.588 44.8975 131.235 45.9684 132.913 45.9684C135.525 45.9684 135.495 45.5137 136.727 45.5137C137.558 45.5137 138.137 45.9831 138.137 46.6139C138.137 47.3913 137.395 47.8754 136.668 48.1395C136.059 48.3595 134.619 48.7556 132.571 48.7556C128.504 48.7556 126.041 46.0271 126.041 43.6213C126.041 39.1911 130.078 36.0666 134.753 36.0666C138.671 36.0666 140.942 38.3697 140.942 40.9075C140.942 42.4037 139.651 43.5626 137.261 43.5773C137.217 43.5773 129.558 43.5773 129.558 43.5773ZM130.048 41.4209H137.677C137.677 40.1447 136.564 38.7804 134.412 38.7804C132.482 38.7804 130.478 40.174 130.048 41.4209Z" fill="white" />
-    <path d="M103.911 45.0736C104.98 45.0736 105.707 45.7337 105.707 46.5846C105.707 47.7434 104.416 48.7556 103.08 48.7556C102.011 48.7556 101.284 48.1249 101.284 47.274C101.284 46.1592 102.486 45.0736 103.911 45.0736Z" fill="white" />
+    <path d="M143.317 34.3796C142.516 31.079 140.75 28.5118 137.618 26.9569C135.243 25.7833 132.675 25.2112 130.063 24.9178C126.338 24.4924 122.612 24.1697 118.887 23.8029C115.191 23.4362 111.258 22.7321 110.724 22.6294C110.694 22.6294 108.334 22.1746 107.562 21.8666C106.375 21.3825 103.08 17.9352 91.7998 14.4878C82.835 11.7447 65.618 12.7422 59.6217 13.7837C54.1746 14.7372 43.2655 17.7151 38.7237 19.4314C34.7757 20.9277 24.1634 24.4484 20.1708 27.2943C17.9148 28.8932 15.7478 30.6095 16.1931 36.0812C16.1931 36.0812 16.5493 31.8858 19.7256 29.8907C24.3118 27.0155 31.4658 25.71 34.0335 24.9325C38.8721 23.4655 52.0966 19.3434 60.2154 18.2872C67.1912 17.3777 73.7515 16.6296 81.5586 17.3777C90.2413 18.2139 95.3916 20.5463 95.6439 20.6197C95.8963 20.693 106.197 25.5046 107.355 25.8126C108.512 26.1794 110.189 26.2381 111.392 26.3701C114.568 26.7221 117.818 26.8982 121.009 27.1035C124.008 27.3089 127.006 27.529 129.989 27.8517C132.72 28.1451 135.377 28.7465 137.915 29.8321C140.171 30.8149 142.1 32.1498 143.154 34.4529C143.184 34.5116 143.347 34.849 143.406 34.893C143.421 34.8197 143.332 34.4383 143.317 34.3796Z" fill={color} />
+    <path d="M39.5398 45.5724C39.2874 46.8193 38.4711 48.4916 36.4377 48.3009C35.2058 48.1835 34.7605 46.966 34.8348 46.1591C34.8348 46.0858 34.8644 45.9098 34.8644 45.9098C32.7717 47.8608 30.5453 48.829 27.8737 48.9023C22.6937 49.0343 19.1613 46.0565 19.0425 41.685C18.8941 35.9639 23.0796 31.343 30.1149 31.167C32.742 31.0936 35.3691 31.7831 37.1205 34.3062C37.2986 33.5141 38.011 31.9005 39.4062 31.8711C40.6381 31.8418 41.7067 32.5019 41.7364 33.5728C41.7364 33.6755 41.7067 33.9835 41.6622 34.1302L39.5398 45.5724ZM36.126 38.8978C36.0667 36.624 33.8997 34.8197 31.0648 34.893C27.2058 34.9957 24.0741 37.9296 24.1483 40.9662C24.2077 43.3133 26.1223 45.2056 29.0314 45.1323C32.742 45.0443 36.2151 42.3451 36.126 38.8978Z" fill={color} />
+    <path d="M59.0131 47.626C56.8164 48.7116 54.501 48.917 52.3489 48.917C47.6884 48.917 43.8145 46.5552 43.8145 43.0345C43.8145 42.4771 43.9184 41.1275 44.0372 40.5407L45.1503 34.0715C45.4472 32.7366 46.6791 31.8124 47.9555 31.8124C49.232 31.8124 49.9592 32.7659 49.9592 33.5727C49.9592 33.7928 49.9147 34.0568 49.885 34.2182L48.5344 40.8928C48.4602 41.2889 48.4008 42.0663 48.5344 42.4771C49.0984 44.2374 50.7459 45.0589 53.1207 45.0589C55.7923 45.0589 58.4787 43.1079 58.924 41.5382C59.5177 39.4258 60.4973 33.9688 60.4973 33.9688C60.7941 32.6339 62.0854 31.7977 63.347 31.9004C64.7125 32.0178 65.3359 33.294 65.1429 34.6876C65.039 35.4944 64.6086 37.9736 64.5789 38.1349C64.0001 41.4649 62.8572 45.7337 59.0131 47.626Z" fill={color} />
+    <path d="M69.2544 31.7978L69.7294 29.4507C69.9669 28.2771 71.0355 27.3236 72.5791 27.2943C73.7071 27.2649 74.5828 28.0131 74.6125 28.9519C74.6125 29.1133 74.5828 29.348 74.5234 29.6854L74.0633 32.0031H78.0708C79.5847 32.0031 80.1042 32.6339 79.9557 33.7635C79.7776 35.0104 78.2489 35.4945 76.7498 35.5238L73.3509 35.4505L72.0596 42.125C72.0003 42.4918 71.837 43.2106 72.0745 43.8414C72.2823 44.4135 72.7721 44.8389 73.6181 45.0883C74.1672 45.2496 75.9038 45.2936 75.9038 45.2936C76.9873 45.2643 77.7887 45.6164 77.8184 46.5259C77.8481 47.8314 76.9427 48.9317 75.7257 48.9317C75.7257 48.9317 73.3361 49.1077 71.2136 48.8436C68.6014 48.5209 66.939 46.3792 67.1023 43.9881C67.221 42.2424 67.6663 40.13 67.7257 39.7339L68.5123 35.7585L69.2544 31.7978Z" fill={color} />
+    <path d="M89.2908 48.9757C83.6359 48.9757 80.0589 45.6751 80.0589 41.4649C80.0589 35.5238 85.2388 31.1377 92.3186 31.1377C97.6915 31.1377 101.387 34.4383 101.387 38.7218C101.387 44.4135 96.5338 48.9757 89.2908 48.9757ZM96.8604 39.1765C96.8604 36.9761 94.5746 35.1424 91.8288 35.1424C87.8066 35.1424 84.9865 37.8563 84.9865 40.9808C84.9865 43.2106 86.7824 44.9416 89.6025 45.0003C93.788 45.0736 96.8604 42.4038 96.8604 39.1765Z" fill={color} />
+    <path d="M122.686 46.8046C122.479 47.6261 122.004 48.1982 120.831 48.1982C119.911 48.1982 119.421 47.5087 119.421 46.9659C119.421 46.9219 119.451 46.7312 119.451 46.7312C118.59 47.3473 117.15 48.7703 114.701 48.7703C110.367 48.7703 108.141 46.2911 108.141 43.3719C108.141 38.9418 112.43 36.1252 116.794 36.1252C118.887 36.1252 120.653 37.5775 121.039 38.2816L122.33 32.7073C122.538 31.8858 122.79 31.3283 124.037 31.3283C125.017 31.3283 125.566 31.9151 125.566 32.5459C125.566 32.7219 125.536 32.8833 125.506 32.986L122.686 46.8046ZM116.556 38.8831C113.915 39.0591 111.822 40.8341 111.822 43.0932C111.822 44.6922 112.994 46.1738 115.043 46.1738C117.373 46.1738 120.133 44.5455 120.401 42.7558C120.92 39.4405 117.774 38.7951 116.556 38.8831Z" fill={color} />
+    <path d="M129.558 43.5773C129.588 44.8975 131.235 45.9684 132.913 45.9684C135.525 45.9684 135.495 45.5137 136.727 45.5137C137.558 45.5137 138.137 45.9831 138.137 46.6139C138.137 47.3913 137.395 47.8754 136.668 48.1395C136.059 48.3595 134.619 48.7556 132.571 48.7556C128.504 48.7556 126.041 46.0271 126.041 43.6213C126.041 39.1911 130.078 36.0666 134.753 36.0666C138.671 36.0666 140.942 38.3697 140.942 40.9075C140.942 42.4037 139.651 43.5626 137.261 43.5773C137.217 43.5773 129.558 43.5773 129.558 43.5773ZM130.048 41.4209H137.677C137.677 40.1447 136.564 38.7804 134.412 38.7804C132.482 38.7804 130.478 40.174 130.048 41.4209Z" fill={color} />
+    <path d="M103.911 45.0736C104.98 45.0736 105.707 45.7337 105.707 46.5846C105.707 47.7434 104.416 48.7556 103.08 48.7556C102.011 48.7556 101.284 48.1249 101.284 47.274C101.284 46.1592 102.486 45.0736 103.911 45.0736Z" fill={color} />
+  </svg>
+);
+// ============================================================================
+// LANDSCAPE-ONLY (693 < width <= 860) — Figma file qyZFhH6grmzQ1ptNwPcilw, node
+// 424:7525. Icons pixel-identical to portrait's (close X, chevrons, phone, zoom
+// magnifier, offer-request) are reused directly; anything visually different gets
+// its own `Ls*` component here so the portrait versions above stay untouched.
+// ============================================================================
+/** Figma "360 / Circle" (node 424:9246 group, landscape only) — an unfilled outline circle (no
+ *  bg fill), NOT the pill-shaped 360 button portrait uses. Distinct asset, own component. */
+const Ls360Circle: React.FunctionComponent = () => (
+  <svg width={30} height={30} viewBox="0 0 30 30" fill="none" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
+    <circle cx="15" cy="15" r="14.4" stroke="white" strokeWidth={1.2} />
   </svg>
 );
+/** Close/Prev/Next circle background, landscape only (Figma node 424:7556/7560/7563) — ONE shared
+ *  glass tint for all three (black/50%, thin white/16% ring), unlike portrait's two different
+ *  tints for header-vs-stage circles. Decoded from Figma's flattened SVG export, not a guess. */
+const lsCircleBg: React.CSSProperties = {
+  width: 48,
+  height: 48,
+  borderRadius: '50%',
+  background: 'rgba(0,0,0,0.5)',
+  border: '1.5px solid rgba(255,255,255,0.16)',
+  display: 'flex',
+  alignItems: 'center',
+  justifyContent: 'center',
+};
+/** Icon-only circle button (no caption) — landscape's close/prev/next (Figma nodes 424:7556-7564).
+ *  Portrait's HeaderAction/StageNavButton both show a caption or use a different tint, so this is
+ *  its own component rather than a reuse. */
+const LsCircleButton: React.FunctionComponent<{
+  icon: React.ReactNode;
+  ariaLabel: string;
+  onClick: () => void;
+  style?: React.CSSProperties;
+}> = ({ icon, ariaLabel, onClick, style }) => (
+  <button type="button" onClick={onClick} aria-label={ariaLabel} style={{ ...lsCircleBg, position: 'absolute', border: 0, cursor: 'pointer', padding: 0, ...style }}>
+    <span style={lsCircleBg}>{icon}</span>
+  </button>
+);
+/** Counter pill, landscape only (Figma node 424:9277 "Counter / BG") — black/50%, fixed 72×42; NOT
+ *  portrait's navy-tinted `pillStyle` (which is also used there for the 360 pill, absent here). */
+const lsCounterStyle: React.CSSProperties = {
+  position: 'absolute',
+  left: 108,
+  top: 12,
+  width: 72,
+  height: 42,
+  borderRadius: 21,
+  background: 'rgba(0,0,0,0.5)',
+  border: '1px solid rgba(255,255,255,0.14)',
+  display: 'flex',
+  alignItems: 'center',
+  justifyContent: 'center',
+  color: '#FFFFFF',
+  fontFamily: "'Inter', var(--md-font)",
+  fontWeight: 500,
+  fontSize: 14,
+  lineHeight: '20px',
+  textAlign: 'center',
+};
 /** Header close/call action: circle icon button (Figma "Close|Call / Circle+Icon", node 424:8082-8089)
  *  with its caption stacked below. The circle fill/stroke are decoded from Figma's flattened PNG
  *  export (`get_design_context` rasterizes it because of the translucent glass fill) — not a guess.
  *  Mobile layout only. */
-const HeaderAction: React.FunctionComponent<{ icon: React.ReactNode; label: string; ariaLabel: string; onClick: () => void }> = ({
-  icon,
-  label,
-  ariaLabel,
-  onClick,
-}) => (
+const HeaderAction: React.FunctionComponent<{
+  icon: React.ReactNode;
+  label: string;
+  ariaLabel: string;
+  onClick: () => void;
+  /** Hides the visible caption below the circle, keeping only the icon — used when this is reused
+   *  inside the PhotoSheet's compact header, where a second "schließen" caption right under the
+   *  sheet's own title would be redundant. `ariaLabel` is unaffected: it's always announced,
+   *  visible caption or not. Defaults to true so the viewer's own header (this component's
+   *  original call site) is unchanged. */
+  showLabel?: boolean;
+}> = ({ icon, label, ariaLabel, onClick, showLabel = true }) => (
   <button
     type="button"
     onClick={onClick}
@@ -222,9 +317,11 @@ const HeaderAction: React.FunctionComponent<{ icon: React.ReactNode; label: stri
     >
       {icon}
     </span>
-    <span style={{ fontFamily: "'Inter', var(--md-font)", fontSize: 13, lineHeight: '20px', fontWeight: 400, color: '#fff', textTransform: 'capitalize' }}>
-      {label}
-    </span>
+    {showLabel && (
+      <span style={{ fontFamily: "'Inter', var(--md-font)", fontSize: 13, lineHeight: '20px', fontWeight: 400, color: '#fff', textTransform: 'capitalize' }}>
+        {label}
+      </span>
+    )}
   </button>
 );
@@ -285,6 +382,130 @@ const pillStyle: React.CSSProperties = {
   textAlign: 'center',
 };
+/** "Alle Fotos" bottom sheet, triggered by the "+N" thumbnail tile in both portrait and landscape
+ *  (no equivalent on desktop — its thumbnail row already shows every photo, wrapped). Shares the
+ *  active-index/select state with the main viewer; only the header row (close button + logo)
+ *  differs per layout, so it's passed in as `headerContent` from the two call sites below rather
+ *  than duplicated here — title/subtitle/grid/footer are the one shared, layout-agnostic part the
+ *  spec calls for. All static styling lives in `md3.css` under `.vdp-photosheet*`; the only inline
+ *  styles here are the live drag/open transform and the backdrop's open-state opacity, both of
+ *  which depend on state that CSS alone can't express. */
+const PhotoSheet: React.FunctionComponent<{
+  images: string[];
+  activeIndex: number;
+  open: boolean;
+  onSelect: (index: number) => void;
+  onCloseSheet: () => void;
+  t: TranslationFunction;
+  headerContent: React.ReactNode;
+}> = ({ images, activeIndex, open, onSelect, onCloseSheet, t, headerContent }) => {
+  const n = images.length;
+  const gridRef = useRef<HTMLDivElement | null>(null);
+  // Scroll the CURRENT photo into view on open — only the grid's own scrollTop, never an ancestor
+  // (scrollIntoView can walk up the tree; computing the offset directly against this one ref can't).
+  useEffect(() => {
+    if (!open) return;
+    const grid = gridRef.current;
+    if (!grid) return;
+    const tile = grid.querySelector<HTMLElement>(`[data-photosheet-index="${activeIndex}"]`);
+    if (!tile) return;
+    grid.scrollTop = Math.max(0, tile.offsetTop - (grid.clientHeight - tile.offsetHeight) / 2);
+    // Only on open, deliberately: re-scrolling every time `activeIndex` changes while already open
+    // (e.g. the user just clicked a different photo, a click that's about to close the sheet
+    // anyway) would yank the scroll position out from under them.
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [open]);
+  // Drag-to-dismiss from the header row only (not the grid itself, which needs its own vertical
+  // scroll — dragging the header is the conventional "handle" gesture and can't fight that scroll).
+  const dragRef = useRef<{ startY: number; startTime: number } | null>(null);
+  const [dragOffset, setDragOffset] = useState(0);
+  const onHeaderPointerDown = (e: React.PointerEvent<HTMLDivElement>): void => {
+    dragRef.current = { startY: e.clientY, startTime: Date.now() };
+    try {
+      e.currentTarget.setPointerCapture(e.pointerId);
+    } catch {
+      // See VdpViewer's onStagePointerDown for why this is safe to swallow.
+    }
+  };
+  const onHeaderPointerMove = (e: React.PointerEvent<HTMLDivElement>): void => {
+    if (!dragRef.current) return;
+    setDragOffset(Math.max(0, e.clientY - dragRef.current.startY));
+  };
+  const onHeaderPointerUp = (e: React.PointerEvent<HTMLDivElement>): void => {
+    const start = dragRef.current;
+    dragRef.current = null;
+    if (start) {
+      const dy = Math.max(0, e.clientY - start.startY);
+      const dt = Date.now() - start.startTime;
+      const isFlick = dy > 40 && dt < 250;
+      if (dy > 90 || isFlick) onCloseSheet();
+    }
+    setDragOffset(0);
+  };
+  return (
+    <>
+      <div
+        className="vdp-photosheet-backdrop"
+        onClick={onCloseSheet}
+        style={{ opacity: open ? 1 : 0, pointerEvents: open ? 'auto' : 'none' }}
+      />
+      <div
+        className="vdp-photosheet"
+        style={{
+          transform: open ? `translateY(${dragOffset}px)` : 'translateY(100%)',
+          transition: dragRef.current ? 'none' : 'transform 280ms var(--ease-standard, ease)',
+        }}
+      >
+        <div
+          className="vdp-photosheet__header"
+          onPointerDown={onHeaderPointerDown}
+          onPointerMove={onHeaderPointerMove}
+          onPointerUp={onHeaderPointerUp}
+          onPointerCancel={onHeaderPointerUp}
+        >
+          <div className="vdp-photosheet__handle" />
+          {headerContent}
+        </div>
+        <div className="vdp-photosheet__titles">
+          <p className="vdp-photosheet__title">{t('autobahn:viewer.allPhotosTitle', { count: n })}</p>
+          <p className="vdp-photosheet__subtitle">{t('autobahn:viewer.allPhotosSubtitle')}</p>
+        </div>
+        <div className="vdp-photosheet__scroll" ref={gridRef}>
+          <div className="vdp-photosheet__grid">
+            {images.map((src, k) => {
+              const active = k === activeIndex;
+              return (
+                <button
+                  key={k}
+                  type="button"
+                  data-photosheet-index={k}
+                  className={'vdp-photosheet__tile' + (active ? ' vdp-photosheet__tile--active' : '')}
+                  onClick={() => onSelect(k)}
+                  aria-label={t('autobahn:viewer.thumbnailLabel', { number: k + 1 })}
+                >
+                  <img src={src} alt="" loading="lazy" />
+                  {active && (
+                    <span className="vdp-photosheet__badge">
+                      <Icon name="check" size={12} color="#fff" />
+                    </span>
+                  )}
+                </button>
+              );
+            })}
+          </div>
+        </div>
+        <div className="vdp-photosheet__footer">
+          <Icon name="info" size={16} color="rgba(255,255,255,0.72)" />
+          <span>{t('autobahn:viewer.allPhotosFooter', { count: n })}</span>
+        </div>
+      </div>
+    </>
+  );
+};
 const VdpViewer: React.FunctionComponent<VdpViewerProps> = ({ images, start = 0, onClose, t, phone, onCall, onEmail, on360 }) => {
   const [i, setI] = useState(start);
   const [zoom, setZoom] = useState(ZOOM_MIN);
@@ -293,14 +514,40 @@ const VdpViewer: React.FunctionComponent<VdpViewerProps> = ({ images, start = 0,
   const go = (d: number) => setI((p) => (p + d + n) % n);
   const stageRef = useRef<HTMLDivElement | null>(null);
-  // Which layout to render — re-checked on every resize so rotating a tablet or resizing a
-  // desktop window across the breakpoint switches layouts live instead of only on next open.
-  const [isMobile, setIsMobile] = useState(() => (typeof window !== 'undefined' ? window.innerWidth <= MOBILE_BREAKPOINT : true));
+  // "Alle Fotos" bottom sheet (mobile only — see PhotoSheet above). Opened from the "+N" thumbnail
+  // tile in portrait/landscape; picking a photo in it just reuses `i`/`setI`, so the counter and
+  // main image update for free. Read via a ref inside the keydown handler below (registered once
+  // with an empty dep array) so Escape can close the sheet first without resubscribing that effect.
+  const [sheetOpen, setSheetOpen] = useState(false);
+  const sheetOpenRef = useRef(sheetOpen);
+  sheetOpenRef.current = sheetOpen;
+  const selectFromSheet = (k: number): void => {
+    setI(k);
+    setSheetOpen(false);
+  };
+  // Which of the three layouts to render — re-checked on every resize/rotation so turning the
+  // phone from 390x693 to 693x390 while the viewer is OPEN swaps layouts live, not just on next
+  // open. Both 'resize' (fires on rotation in every current mobile browser) and 'orientationchange'
+  // are listened for: some browsers deliver 'orientationchange' a tick before window.innerWidth
+  // has actually updated to the new orientation's value, so that handler re-reads it on the next
+  // frame rather than trusting the value at event-fire time. `isMobile` (both portrait and
+  // landscape) is kept as a derived boolean for the one spot that still needs it: the desktop-only
+  // whole-overlay touch-swipe guard below.
+  const [layout, setLayout] = useState<Layout>(() => (typeof window !== 'undefined' ? layoutForWidth(window.innerWidth) : 'portrait'));
   useEffect(() => {
-    const onResize = (): void => setIsMobile(window.innerWidth <= MOBILE_BREAKPOINT);
+    const onResize = (): void => setLayout(layoutForWidth(window.innerWidth));
+    const onOrientationChange = (): void => {
+      requestAnimationFrame(onResize);
+    };
     window.addEventListener('resize', onResize);
-    return () => window.removeEventListener('resize', onResize);
+    window.addEventListener('orientationchange', onOrientationChange);
+    return () => {
+      window.removeEventListener('resize', onResize);
+      window.removeEventListener('orientationchange', onOrientationChange);
+    };
   }, []);
+  const isMobile = layout !== 'desktop';
   // Reset zoom (and pan) on every slide change — a lingering zoom/pan from the previous photo
   // reads as a stuck/broken control on the new one.
@@ -335,7 +582,14 @@ const VdpViewer: React.FunctionComponent<VdpViewerProps> = ({ images, start = 0,
   closeRef.current = onClose;
   useEffect(() => {
     const onKey = (e: KeyboardEvent) => {
-      if (e.key === 'Escape') closeRef.current();
+      if (e.key === 'Escape') {
+        // Escape closes the "Alle Fotos" sheet first if it's open — it's a modal-within-the-modal,
+        // so it owns Escape until it's dismissed — and only closes the whole viewer otherwise.
+        if (sheetOpenRef.current) setSheetOpen(false);
+        else closeRef.current();
+        return;
+      }
+      if (sheetOpenRef.current) return; // arrow-key photo nav belongs to the viewer, not the sheet
       if (e.key === 'ArrowRight') goRef.current(1);
       if (e.key === 'ArrowLeft') goRef.current(-1);
     };
@@ -408,7 +662,25 @@ const VdpViewer: React.FunctionComponent<VdpViewerProps> = ({ images, start = 0,
     measure();
     window.addEventListener('resize', measure);
     return () => window.removeEventListener('resize', measure);
-  }, [images.length, isMobile]);
+  }, [images.length, layout]);
+  // Landscape: same "fixed strip, cap tile if it doesn't fit" idea as portrait's fitCount above,
+  // but measured against its own ref/thumb width (68px, Figma node 424:7566) since the landscape
+  // thumbnail group sits in a flex row it shares with the CTA buttons (see render below) rather
+  // than owning the full row width the way portrait's does.
+  const lsThumbsWrapRef = useRef<HTMLDivElement | null>(null);
+  const [lsFitCount, setLsFitCount] = useState(images.length);
+  useEffect(() => {
+    const el = lsThumbsWrapRef.current;
+    if (!el) return undefined;
+    const measure = (): void => {
+      const count = Math.max(1, Math.floor((el.clientWidth + THUMB_GAP) / (LS_THUMB_W + THUMB_GAP)));
+      setLsFitCount(count);
+    };
+    measure();
+    window.addEventListener('resize', measure);
+    return () => window.removeEventListener('resize', measure);
+  }, [images.length, layout]);
   // Desktop-only styles, unchanged from the original layout.
   const iconBtnStyle: React.CSSProperties = { background: 'var(--md-sc-lowest, #fff)', boxShadow: 'var(--md-e1)' };
@@ -436,7 +708,7 @@ const VdpViewer: React.FunctionComponent<VdpViewerProps> = ({ images, start = 0,
           if (Math.abs(dx) > 40) go(dx > 0 ? -1 : 1);
         }}
       >
-        {isMobile ? (
+        {layout === 'portrait' ? (
           <>
             {/* full-width header: close (left) / auto.de logo (center) / call (right) — Figma "Top
                 Overlay" + "Header Divider" (nodes 424:8070-8089). */}
@@ -476,7 +748,7 @@ const VdpViewer: React.FunctionComponent<VdpViewerProps> = ({ images, start = 0,
             {/* stage: photo + counter/360 pills + prev/next + vertical zoom pill. */}
             <div
               ref={stageRef}
-              style={{ flex: 1, position: 'relative', minHeight: 0, background: '#fff', overflow: 'hidden', touchAction: 'none' }}
+              style={{ flex: 1, position: 'relative', minHeight: 0, background: '#797979', overflow: 'hidden', touchAction: 'none' }}
               onPointerDown={onStagePointerDown}
               onPointerMove={onStagePointerMove}
               onPointerUp={onStagePointerUp}
@@ -554,7 +826,7 @@ const VdpViewer: React.FunctionComponent<VdpViewerProps> = ({ images, start = 0,
                   aria-label={t('autobahn:viewer.zoomOutLabel')}
                   style={{ width: 40, height: 40, border: 0, background: 'none', padding: 0, display: 'flex', alignItems: 'center', justifyContent: 'center', cursor: 'pointer' }}
                 >
-                  <IconZoomOut dim={zoom === ZOOM_MIN} />
+                  <IconZoomOut />
                 </button>
               </div>
             </div>
@@ -567,7 +839,7 @@ const VdpViewer: React.FunctionComponent<VdpViewerProps> = ({ images, start = 0,
               const visibleCount = overflow ? fitCount - 1 : images.length;
               const remaining = images.length - visibleCount;
               return (
-                <div ref={thumbsWrapRef} style={{ display: 'flex', gap: THUMB_GAP, padding: THUMBS_PAD, flex: 'none', overflow: 'hidden' }}>
+                <div ref={thumbsWrapRef} style={{ display: 'flex', gap: THUMB_GAP, padding: THUMBS_PAD, flex: 'none', overflow: 'hidden', background: '#797979' }}>
                   {images.slice(0, visibleCount).map((src, k) => {
                     const selected = k === i;
                     return (
@@ -581,13 +853,13 @@ const VdpViewer: React.FunctionComponent<VdpViewerProps> = ({ images, start = 0,
                           width: THUMB_W,
                           height: THUMB_H,
                           padding: 0,
-                          borderRadius: 10,
+                          borderRadius: selected ? 16 : 10,
                           overflow: 'hidden',
                           cursor: 'pointer',
-                          background: '#fff',
-                          border: selected ? 'none' : '1px solid var(--fig-gray)',
-                          outline: selected ? '3px solid var(--md-primary)' : 'none',
-                          outlineOffset: selected ? 1 : 0,
+                          background: '#797979',
+                          border: selected ? '3px solid #0B63F6' : '1px solid var(--fig-gray)',
+                          outline: 'none',
+                          outlineOffset: 0,
                         }}
                       >
                         <img src={src} alt="" style={{ width: '100%', height: '100%', objectFit: 'cover' }} />
@@ -598,7 +870,7 @@ const VdpViewer: React.FunctionComponent<VdpViewerProps> = ({ images, start = 0,
                     <button
                       key="more"
                       type="button"
-                      onClick={() => setI(visibleCount)}
+                      onClick={() => setSheetOpen(true)}
                       aria-label={t('autobahn:viewer.moreThumbsLabel', { count: remaining })}
                       style={{
                         position: 'relative',
@@ -606,13 +878,13 @@ const VdpViewer: React.FunctionComponent<VdpViewerProps> = ({ images, start = 0,
                         width: THUMB_W,
                         height: THUMB_H,
                         padding: 0,
-                        borderRadius: 10,
+                        borderRadius: i >= visibleCount ? 16 : 10,
                         overflow: 'hidden',
                         cursor: 'pointer',
-                        background: '#fff',
-                        border: i >= visibleCount ? 'none' : '1px solid var(--fig-gray)',
-                        outline: i >= visibleCount ? '3px solid var(--md-primary)' : 'none',
-                        outlineOffset: i >= visibleCount ? 1 : 0,
+                        background: '#797979',
+                        border: i >= visibleCount ? '3px solid #0B63F6' : '1px solid var(--fig-gray)',
+                        outline: 'none',
+                        outlineOffset: 0,
                       }}
                     >
                       <img src={images[visibleCount]} alt="" style={{ width: '100%', height: '100%', objectFit: 'cover' }} />
@@ -642,7 +914,7 @@ const VdpViewer: React.FunctionComponent<VdpViewerProps> = ({ images, start = 0,
             {/* full-width bottom bar — "Jetzt Anfragen" (primary) + "Anrufen" (dark), Figma nodes
                 424:8128-8134. */}
             {(onEmail || onCall) && (
-              <div style={{ display: 'flex', gap: THUMB_GAP, padding: 12, height: 82, background: 'rgba(0,0,0,0.5)', flex: 'none' }}>
+              <div style={{ display: 'flex', gap: THUMB_GAP, padding: 12, height: 82, background: '#797979', flex: 'none' }}>
                 {onEmail && (
                   <button
                     type="button"
@@ -698,7 +970,325 @@ const VdpViewer: React.FunctionComponent<VdpViewerProps> = ({ images, start = 0,
                 )}
               </div>
             )}
+            {/* "Alle Fotos" bottom sheet — triggered by the "+N" tile above. Header reuses the SAME
+                close button (HeaderAction) and logo (LogoMark) as this layout's own top bar. */}
+            <PhotoSheet
+              images={images}
+              activeIndex={i}
+              open={sheetOpen}
+              onSelect={selectFromSheet}
+              onCloseSheet={() => setSheetOpen(false)}
+              t={t}
+              headerContent={
+                <>
+                  <div className="vdp-photosheet__close">
+                    <HeaderAction icon={<IconClose />} label={t('autobahn:viewer.closeLabel')} ariaLabel={t('autobahn:viewer.closeLabel')} onClick={() => setSheetOpen(false)} showLabel={false} />
+                  </div>
+                  <div className="vdp-photosheet__logo vdp-photosheet__logo--portrait">
+                    <LogoMark color="#005CFF" />
+                  </div>
+                </>
+              }
+            />
           </>
+        ) : layout === 'landscape' ? (
+          // ====================================================================
+          // LANDSCAPE (693 < width <= 860) — Figma file qyZFhH6grmzQ1ptNwPcilw,
+          // node 424:7525 "FRAME | Galerie | Landscape 693x390 | V01". Everything
+          // below is scoped to THIS branch only; portrait (above) and desktop
+          // (below) are untouched.
+          // ====================================================================
+          <div style={{ position: 'relative', flex: 1, overflow: 'hidden', background: '#797979' }}>
+            {/* image stage — full-bleed (edge-to-edge over the whole landscape canvas): the photo
+                fills 100% width/height via `inset:0` + the <img>'s own `object-fit:cover` below.
+                The floating controls (logo/counter/close/prev-next/zoom/thumbnails) are independent
+                SIBLINGS of this div, each positioned with their own absolute coordinates against
+                the same landscape root — not children of the stage — so widening the stage to full
+                bleed doesn't move or resize any of them. */}
+            <div
+              ref={stageRef}
+              style={{ position: 'absolute', inset: 0, touchAction: 'none' }}
+              onPointerDown={onStagePointerDown}
+              onPointerMove={onStagePointerMove}
+              onPointerUp={onStagePointerUp}
+              onPointerCancel={onStagePointerUp}
+            >
+              <img
+                src={images[i]}
+                alt=""
+                draggable={false}
+                style={{
+                  position: 'absolute',
+                  inset: 0,
+                  width: '100%',
+                  height: '100%',
+                  objectFit: 'cover',
+                  transform: `translate(${pan.x}px, ${pan.y}px) scale(${zoom})`,
+                  transition: dragRef.current ? 'none' : 'transform var(--dur-2, 200ms) var(--ease-standard, ease)',
+                  cursor: zoom > ZOOM_MIN ? 'grab' : undefined,
+                }}
+              />
+            </div>
+            {/* logo — Figma node 424:9330 "auto-de_RGB (2) 1": the actual asset there is the
+                brand-blue/gradient mark (verified against its raw export), i.e. the SAME svg this
+                codebase already ships as `assets/autode-logo.svg` — reused directly, not portrait's
+                white LogoMark (landscape has no dark bar behind it to need a white variant). */}
+            <div style={{ position: 'absolute', left: 4, top: 10, width: 93, height: 42, display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
+              <img src={logoUrl} alt="auto.de" style={{ width: 74, height: 21.46, display: 'block' }} />
+            </div>
+            {/* counter pill — Figma node 424:9277 "Counter / BG" */}
+            <div style={lsCounterStyle} aria-label={t('autobahn:viewer.counterLabel', { current: i + 1, total: n })}>
+              <span className="num">
+                {i + 1} | {n}
+              </span>
+            </div>
+            {/* close — Figma nodes 424:7556/7557, no caption text in this layout */}
+            <LsCircleButton icon={<IconClose />} ariaLabel={t('autobahn:viewer.closeLabel')} onClick={onClose} style={{ right: 12, top: 12 }} />
+            {/* prev/next — Figma nodes 424:7560/7561 and 424:7563/7564 */}
+            {n > 1 && (
+              <>
+                <LsCircleButton icon={<IconChevronLeft />} ariaLabel={t('autobahn:viewer.previousLabel')} onClick={() => go(-1)} style={{ left: 12, top: 126 }} />
+                <LsCircleButton icon={<IconChevronRight />} ariaLabel={t('autobahn:viewer.nextLabel')} onClick={() => go(1)} style={{ right: 12, top: 126 }} />
+              </>
+            )}
+            {/* zoom +/- and 360° column — Figma node 424:9246 "Zoom / BG" (h=150, taller than
+                portrait's 110 because 360° lives inside this column instead of its own top pill). */}
+            <div
+              style={{
+                position: 'absolute',
+                right: 12,
+                bottom: 12,
+                width: 48,
+                height: 150,
+                borderRadius: 'var(--md-r-full)',
+                background: 'rgba(0,0,0,0.5)',
+                border: '1.2px solid rgba(255,255,255,0.18)',
+                display: 'flex',
+                flexDirection: 'column',
+                alignItems: 'center',
+                padding: '9px 0',
+              }}
+            >
+              <button
+                type="button"
+                onClick={zoomIn}
+                disabled={zoom === ZOOM_MAX}
+                aria-label={t('autobahn:viewer.zoomInLabel')}
+                style={{ width: 32, height: 32, border: 0, background: 'none', padding: 0, display: 'flex', alignItems: 'center', justifyContent: 'center', cursor: 'pointer' }}
+              >
+                <IconZoomIn dim={zoom === ZOOM_MAX} />
+              </button>
+              <div style={{ width: 28, height: 1, background: 'rgba(255,255,255,0.16)', margin: '8px 0' }} />
+              <button
+                type="button"
+                onClick={zoomOut}
+                disabled={zoom === ZOOM_MIN}
+                aria-label={t('autobahn:viewer.zoomOutLabel')}
+                style={{ width: 32, height: 32, border: 0, background: 'none', padding: 0, display: 'flex', alignItems: 'center', justifyContent: 'center', cursor: 'pointer' }}
+              >
+                <IconZoomOut />
+              </button>
+              <div style={{ width: 28, height: 1, background: 'rgba(255,255,255,0.16)', margin: '8px 0' }} />
+              <button
+                type="button"
+                onClick={() => on360 && on360()}
+                aria-label={t('autobahn:viewer.threeSixtyLabel')}
+                style={{ position: 'relative', width: 30, height: 30, border: 0, background: 'none', padding: 0, cursor: 'pointer', display: 'flex', alignItems: 'center', justifyContent: 'center' }}
+              >
+                <Ls360Circle />
+                <span
+                  style={{
+                    position: 'absolute',
+                    top: '50%',
+                    left: '50%',
+                    transform: 'translate(-50%, -50%)',
+                    fontFamily: "'Inter', var(--md-font)",
+                    fontWeight: 700,
+                    fontSize: 8,
+                    lineHeight: '8px',
+                    color: '#fff',
+                    pointerEvents: 'none',
+                  }}
+                >
+                  360°
+                </span>
+              </button>
+            </div>
+            {/* bottom band: thumbnails (left, flexible width) + CTA buttons (right, natural width)
+                sharing one row at bottom:12 (Figma nodes 424:7566-7594) so both groups optically
+                align the way the design does, without hardcoding a container width that would break
+                across the 693-860 range. `right: 81` keeps this band clear of the zoom/360 column
+                (12 right-margin + 48 wide + the 21px gap Figma leaves before it = 81). */}
+            <div style={{ position: 'absolute', left: 12, right: 81, bottom: 12, height: 50, display: 'flex', alignItems: 'center' }}>
+              {(() => {
+                const overflow = images.length > lsFitCount;
+                const visibleCount = overflow ? lsFitCount - 1 : images.length;
+                const remaining = images.length - visibleCount;
+                return (
+                  <div ref={lsThumbsWrapRef} style={{ flex: '1 1 0', minWidth: 0, display: 'flex', alignItems: 'center', gap: THUMB_GAP, overflow: 'hidden' }}>
+                    {images.slice(0, visibleCount).map((src, k) => {
+                      const selected = k === i;
+                      return (
+                        <button
+                          key={k}
+                          type="button"
+                          onClick={() => setI(k)}
+                          aria-label={t('autobahn:viewer.thumbnailLabel', { number: k + 1 })}
+                          style={{
+                            flex: 'none',
+                            width: LS_THUMB_W,
+                            height: THUMB_H,
+                            padding: 0,
+                            borderRadius: selected ? 16 : 'var(--md-r-md)',
+                            overflow: 'hidden',
+                            cursor: 'pointer',
+                            background: '#fff',
+                            border: selected ? '3px solid #0B63F6' : '1px solid var(--fig-gray)',
+                            outline: 'none',
+                            outlineOffset: 0,
+                          }}
+                        >
+                          <img src={src} alt="" style={{ width: '100%', height: '100%', objectFit: 'cover' }} />
+                        </button>
+                      );
+                    })}
+                    {remaining > 0 && (
+                      <button
+                        key="more"
+                        type="button"
+                        onClick={() => setSheetOpen(true)}
+                        aria-label={t('autobahn:viewer.moreThumbsLabel', { count: remaining })}
+                        style={{
+                          position: 'relative',
+                          flex: 'none',
+                          width: LS_THUMB_W,
+                          height: THUMB_H,
+                          padding: 0,
+                          borderRadius: i >= visibleCount ? 16 : 'var(--md-r-md)',
+                          overflow: 'hidden',
+                          cursor: 'pointer',
+                          background: '#fff',
+                          border: i >= visibleCount ? '3px solid #0B63F6' : '1px solid var(--fig-gray)',
+                          outline: 'none',
+                          outlineOffset: 0,
+                        }}
+                      >
+                        <img src={images[visibleCount]} alt="" style={{ width: '100%', height: '100%', objectFit: 'cover' }} />
+                        {/* landscape's cap tile uses the SAME light 0.14 overlay as every other
+                            thumb (Figma node 424:9348), not portrait's heavier 0.5 "Label Scrim". */}
+                        <span
+                          style={{
+                            position: 'absolute',
+                            inset: 0,
+                            background: 'rgba(0,0,0,0.14)',
+                            display: 'flex',
+                            alignItems: 'center',
+                            justifyContent: 'center',
+                            color: '#fff',
+                            fontFamily: "'Inter', var(--md-font-display)",
+                            fontSize: 18,
+                            lineHeight: '24px',
+                            fontWeight: 700,
+                          }}
+                        >
+                          +{remaining}
+                        </span>
+                      </button>
+                    )}
+                  </div>
+                );
+              })()}
+              {(onEmail || onCall) && (
+                <div style={{ flex: 'none', display: 'flex', alignItems: 'center', gap: THUMB_GAP }}>
+                  {onEmail && (
+                    <button
+                      type="button"
+                      onClick={onEmail}
+                      style={{
+                        flex: 'none',
+                        height: 40,
+                        padding: '0 16px',
+                        border: 0,
+                        borderRadius: 'var(--md-r-md)',
+                        background: 'var(--md-primary)',
+                        color: '#fff',
+                        display: 'flex',
+                        alignItems: 'center',
+                        justifyContent: 'center',
+                        gap: 8,
+                        fontFamily: "'Inter', var(--md-font)",
+                        fontSize: 13,
+                        lineHeight: '28px',
+                        fontWeight: 700,
+                        cursor: 'pointer',
+                        whiteSpace: 'nowrap',
+                      }}
+                    >
+                      <IconOfferRequest size={32} />
+                      {t('autobahn:viewer.requestLabel')}
+                    </button>
+                  )}
+                  {onCall && (
+                    <button
+                      type="button"
+                      onClick={onCall}
+                      style={{
+                        flex: 'none',
+                        height: 40,
+                        padding: '0 16px',
+                        border: 0,
+                        borderRadius: 'var(--md-r-md)',
+                        background: '#1c222c',
+                        color: '#fff',
+                        display: 'flex',
+                        alignItems: 'center',
+                        justifyContent: 'center',
+                        gap: 8,
+                        fontFamily: "'Inter', var(--md-font)",
+                        fontSize: 13,
+                        lineHeight: '28px',
+                        fontWeight: 700,
+                        cursor: 'pointer',
+                        whiteSpace: 'nowrap',
+                      }}
+                    >
+                      <IconPhone size={18} />
+                      {t('autobahn:finance.callCta')}
+                    </button>
+                  )}
+                </div>
+              )}
+            </div>
+            {/* "Alle Fotos" bottom sheet — triggered by the "+N" tile above. Header reuses the SAME
+                close button (LsCircleButton, re-parented into normal flow via a position override)
+                and logo (the real logoUrl asset) as this layout's own floating controls. */}
+            <PhotoSheet
+              images={images}
+              activeIndex={i}
+              open={sheetOpen}
+              onSelect={selectFromSheet}
+              onCloseSheet={() => setSheetOpen(false)}
+              t={t}
+              headerContent={
+                <>
+                  <div className="vdp-photosheet__close">
+                    <LsCircleButton icon={<IconClose />} ariaLabel={t('autobahn:viewer.closeLabel')} onClick={() => setSheetOpen(false)} style={{ position: 'relative' }} />
+                  </div>
+                  <div className="vdp-photosheet__logo">
+                    <img src={logoUrl} alt="auto.de" style={{ width: 74, height: 21.46, display: 'block' }} />
+                  </div>
+                </>
+              }
+            />
+          </div>
         ) : (
           <>
             {/* Original desktop layout — unchanged. */}