@bytebrand/fe-ui-core-autobahn 1.0.1 → 1.0.2

package/assets/autode-logo.svg

@@ -1,7 +1,7 @@
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 120 34.909" width="120" height="34.909">
-<defs><linearGradient id="autodeG" x1="0" y1="0" x2="1" y2="0">
-<stop offset="0%" stop-color="#005CCB"></stop><stop offset="42%" stop-color="#0C69D0"></stop><stop offset="73%" stop-color="#3090E1"></stop><stop offset="100%" stop-color="#68CEFC"></stop>
-</linearGradient></defs>
-<g transform="translate(-0.004 0.283)" fill="url(#autodeG)"><path d="M 119.204 20.517 C 118.454 17.39 116.804 14.954 113.865 13.485 C 111.636 12.428 109.238 11.773 106.782 11.55 C 103.291 11.15 99.8 10.845 96.309 10.496 C 92.847 10.154 89.16 9.485 88.658 9.39 C 88.629 9.39 86.418 8.954 85.691 8.663 C 84.578 8.205 81.494 4.939 70.92 1.681 C 62.52 -0.915 46.382 0.023 40.76 1.012 C 35.654 1.914 25.429 4.736 21.174 6.357 C 17.473 7.776 7.531 11.106 3.793 13.805 C 1.662 15.317 -0.36 16.939 0.054 22.117 C 0.054 22.117 0.382 18.146 3.364 16.256 C 7.654 13.536 14.367 12.299 16.774 11.557 C 21.305 10.176 33.698 6.27 41.313 5.266 C 47.858 4.416 54.004 3.717 61.313 4.416 C 69.458 5.208 74.28 7.412 74.513 7.485 C 74.753 7.557 84.404 12.11 85.494 12.401 C 86.578 12.75 88.149 12.801 89.276 12.932 C 92.258 13.259 95.298 13.426 98.294 13.623 C 101.102 13.819 103.909 14.023 106.702 14.328 C 109.262 14.612 111.756 15.179 114.134 16.205 C 116.244 17.136 118.062 18.401 119.044 20.583 C 119.073 20.634 119.225 20.954 119.284 20.997 C 119.291 20.925 119.211 20.561 119.196 20.51 L 119.204 20.517 Z" fill-rule="nonzero"></path></g>
-<g transform="translate(2.723 14.086)" fill="#005CCB"><path d="M 19.211 17.303 C 18.978 18.488 18.215 20.066 16.302 19.892 C 15.153 19.775 14.731 18.626 14.804 17.855 C 14.804 17.79 14.833 17.623 14.833 17.623 C 12.869 19.47 10.782 20.386 8.28 20.459 C 3.422 20.583 0.113 17.768 0.004 13.623 C -0.142 8.212 3.786 3.834 10.382 3.666 C 12.84 3.594 15.306 4.248 16.949 6.641 C 17.109 5.892 17.778 4.365 19.088 4.335 C 20.244 4.306 21.248 4.932 21.269 5.943 C 21.269 6.045 21.248 6.335 21.197 6.474 L 19.211 17.31 L 19.211 17.303 Z M 16.011 10.983 C 15.96 8.83 13.924 7.128 11.269 7.201 C 7.655 7.288 4.724 10.066 4.789 12.946 C 4.84 15.165 6.637 16.961 9.371 16.888 C 12.84 16.808 16.098 14.248 16.011 10.983 Z M 37.466 19.252 C 35.408 20.277 33.233 20.474 31.218 20.474 C 26.855 20.474 23.218 18.234 23.218 14.903 C 23.218 14.372 23.32 13.099 23.429 12.539 L 24.469 6.415 C 24.606 5.816 24.939 5.28 25.417 4.892 C 25.894 4.504 26.487 4.288 27.102 4.277 C 28.295 4.277 28.978 5.179 28.978 5.95 C 28.978 6.154 28.935 6.401 28.906 6.554 L 27.64 12.881 C 27.568 13.245 27.517 13.986 27.64 14.372 C 28.171 16.045 29.713 16.823 31.938 16.823 C 34.448 16.823 36.957 14.975 37.378 13.485 C 37.943 11.112 38.436 8.723 38.855 6.321 C 38.992 5.729 39.337 5.205 39.826 4.845 C 40.316 4.485 40.918 4.312 41.524 4.357 C 42.804 4.474 43.393 5.681 43.211 6.997 C 43.109 7.761 42.702 10.11 42.68 10.27 C 42.135 13.419 41.066 17.455 37.466 19.252 Z M 47.066 4.263 L 47.502 2.045 C 47.728 0.932 48.738 0.03 50.178 0.001 C 51.233 -0.028 52.055 0.677 52.084 1.572 C 52.084 1.717 52.055 1.943 52.004 2.263 L 51.568 4.459 L 55.328 4.459 C 56.746 4.459 57.233 5.055 57.095 6.125 C 56.928 7.303 55.495 7.761 54.084 7.797 L 50.898 7.725 L 49.691 14.045 C 49.633 14.386 49.48 15.063 49.706 15.666 C 49.902 16.212 50.36 16.612 51.153 16.845 C 51.662 16.997 53.291 17.041 53.291 17.041 C 54.309 17.012 55.058 17.346 55.088 18.205 C 55.117 19.441 54.266 20.488 53.124 20.488 C 53.124 20.488 50.891 20.655 48.898 20.401 C 47.783 20.29 46.755 19.747 46.035 18.888 C 45.314 18.029 44.959 16.922 45.044 15.805 C 45.16 14.154 45.575 12.154 45.626 11.775 L 46.368 8.015 L 47.066 4.263 Z M 65.844 20.532 C 60.542 20.532 57.189 17.405 57.189 13.419 C 57.189 7.79 62.048 3.637 68.68 3.637 C 73.713 3.637 77.182 6.765 77.182 10.823 C 77.182 16.205 72.629 20.525 65.837 20.525 L 65.844 20.532 Z M 72.935 11.252 C 72.935 9.165 70.797 7.434 68.222 7.434 C 64.455 7.434 61.808 10.001 61.808 12.961 C 61.808 15.07 63.495 16.706 66.135 16.765 C 70.062 16.837 72.935 14.306 72.935 11.252 Z M 97.138 18.474 C 96.949 19.252 96.498 19.79 95.4 19.79 C 94.542 19.79 94.084 19.135 94.084 18.626 L 94.106 18.408 C 93.306 18.99 91.953 20.335 89.655 20.335 C 85.597 20.335 83.509 17.986 83.509 15.223 C 83.509 11.026 87.531 8.365 91.618 8.365 C 93.582 8.365 95.233 9.739 95.597 10.401 L 96.804 5.128 C 97 4.35 97.24 3.819 98.404 3.819 C 99.328 3.819 99.837 4.372 99.837 4.975 C 99.837 5.135 99.815 5.288 99.786 5.39 L 97.138 18.474 Z M 91.393 10.975 C 88.92 11.135 86.957 12.823 86.957 14.961 C 86.951 15.354 87.026 15.744 87.177 16.106 C 87.329 16.469 87.553 16.797 87.835 17.069 C 88.118 17.342 88.454 17.554 88.822 17.691 C 89.19 17.829 89.582 17.89 89.975 17.87 C 92.157 17.87 94.746 16.335 94.993 14.641 C 95.488 11.499 92.535 10.888 91.393 10.975 Z M 103.582 15.419 C 103.611 16.67 105.153 17.674 106.724 17.674 C 109.175 17.674 109.146 17.252 110.302 17.252 C 111.08 17.252 111.626 17.688 111.626 18.292 C 111.626 19.026 110.928 19.485 110.244 19.739 C 109.677 19.943 108.324 20.321 106.404 20.321 C 102.593 20.321 100.288 17.739 100.288 15.455 C 100.288 11.266 104.069 8.306 108.455 8.306 C 112.12 8.306 114.251 10.488 114.251 12.888 C 114.251 14.306 113.044 15.405 110.804 15.419 L 103.582 15.419 Z M 104.04 13.375 L 111.189 13.375 C 111.189 12.168 110.149 10.874 108.135 10.874 C 106.317 10.874 104.448 12.197 104.04 13.375 Z M 79.546 16.83 C 80.549 16.83 81.226 17.455 81.226 18.263 C 81.226 19.361 80.018 20.321 78.768 20.321 C 77.764 20.321 77.08 19.725 77.08 18.917 C 77.08 17.863 78.208 16.83 79.546 16.83 Z" fill-rule="nonzero"></path></g>
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 120 34.909" width="120" height="34.909">
+<defs><linearGradient id="autodeG" x1="0" y1="0" x2="1" y2="0">
+<stop offset="0%" stop-color="#005CCB"></stop><stop offset="42%" stop-color="#0C69D0"></stop><stop offset="73%" stop-color="#3090E1"></stop><stop offset="100%" stop-color="#68CEFC"></stop>
+</linearGradient></defs>
+<g transform="translate(-0.004 0.283)" fill="url(#autodeG)"><path d="M 119.204 20.517 C 118.454 17.39 116.804 14.954 113.865 13.485 C 111.636 12.428 109.238 11.773 106.782 11.55 C 103.291 11.15 99.8 10.845 96.309 10.496 C 92.847 10.154 89.16 9.485 88.658 9.39 C 88.629 9.39 86.418 8.954 85.691 8.663 C 84.578 8.205 81.494 4.939 70.92 1.681 C 62.52 -0.915 46.382 0.023 40.76 1.012 C 35.654 1.914 25.429 4.736 21.174 6.357 C 17.473 7.776 7.531 11.106 3.793 13.805 C 1.662 15.317 -0.36 16.939 0.054 22.117 C 0.054 22.117 0.382 18.146 3.364 16.256 C 7.654 13.536 14.367 12.299 16.774 11.557 C 21.305 10.176 33.698 6.27 41.313 5.266 C 47.858 4.416 54.004 3.717 61.313 4.416 C 69.458 5.208 74.28 7.412 74.513 7.485 C 74.753 7.557 84.404 12.11 85.494 12.401 C 86.578 12.75 88.149 12.801 89.276 12.932 C 92.258 13.259 95.298 13.426 98.294 13.623 C 101.102 13.819 103.909 14.023 106.702 14.328 C 109.262 14.612 111.756 15.179 114.134 16.205 C 116.244 17.136 118.062 18.401 119.044 20.583 C 119.073 20.634 119.225 20.954 119.284 20.997 C 119.291 20.925 119.211 20.561 119.196 20.51 L 119.204 20.517 Z" fill-rule="nonzero"></path></g>
+<g transform="translate(2.723 14.086)" fill="#005CCB"><path d="M 19.211 17.303 C 18.978 18.488 18.215 20.066 16.302 19.892 C 15.153 19.775 14.731 18.626 14.804 17.855 C 14.804 17.79 14.833 17.623 14.833 17.623 C 12.869 19.47 10.782 20.386 8.28 20.459 C 3.422 20.583 0.113 17.768 0.004 13.623 C -0.142 8.212 3.786 3.834 10.382 3.666 C 12.84 3.594 15.306 4.248 16.949 6.641 C 17.109 5.892 17.778 4.365 19.088 4.335 C 20.244 4.306 21.248 4.932 21.269 5.943 C 21.269 6.045 21.248 6.335 21.197 6.474 L 19.211 17.31 L 19.211 17.303 Z M 16.011 10.983 C 15.96 8.83 13.924 7.128 11.269 7.201 C 7.655 7.288 4.724 10.066 4.789 12.946 C 4.84 15.165 6.637 16.961 9.371 16.888 C 12.84 16.808 16.098 14.248 16.011 10.983 Z M 37.466 19.252 C 35.408 20.277 33.233 20.474 31.218 20.474 C 26.855 20.474 23.218 18.234 23.218 14.903 C 23.218 14.372 23.32 13.099 23.429 12.539 L 24.469 6.415 C 24.606 5.816 24.939 5.28 25.417 4.892 C 25.894 4.504 26.487 4.288 27.102 4.277 C 28.295 4.277 28.978 5.179 28.978 5.95 C 28.978 6.154 28.935 6.401 28.906 6.554 L 27.64 12.881 C 27.568 13.245 27.517 13.986 27.64 14.372 C 28.171 16.045 29.713 16.823 31.938 16.823 C 34.448 16.823 36.957 14.975 37.378 13.485 C 37.943 11.112 38.436 8.723 38.855 6.321 C 38.992 5.729 39.337 5.205 39.826 4.845 C 40.316 4.485 40.918 4.312 41.524 4.357 C 42.804 4.474 43.393 5.681 43.211 6.997 C 43.109 7.761 42.702 10.11 42.68 10.27 C 42.135 13.419 41.066 17.455 37.466 19.252 Z M 47.066 4.263 L 47.502 2.045 C 47.728 0.932 48.738 0.03 50.178 0.001 C 51.233 -0.028 52.055 0.677 52.084 1.572 C 52.084 1.717 52.055 1.943 52.004 2.263 L 51.568 4.459 L 55.328 4.459 C 56.746 4.459 57.233 5.055 57.095 6.125 C 56.928 7.303 55.495 7.761 54.084 7.797 L 50.898 7.725 L 49.691 14.045 C 49.633 14.386 49.48 15.063 49.706 15.666 C 49.902 16.212 50.36 16.612 51.153 16.845 C 51.662 16.997 53.291 17.041 53.291 17.041 C 54.309 17.012 55.058 17.346 55.088 18.205 C 55.117 19.441 54.266 20.488 53.124 20.488 C 53.124 20.488 50.891 20.655 48.898 20.401 C 47.783 20.29 46.755 19.747 46.035 18.888 C 45.314 18.029 44.959 16.922 45.044 15.805 C 45.16 14.154 45.575 12.154 45.626 11.775 L 46.368 8.015 L 47.066 4.263 Z M 65.844 20.532 C 60.542 20.532 57.189 17.405 57.189 13.419 C 57.189 7.79 62.048 3.637 68.68 3.637 C 73.713 3.637 77.182 6.765 77.182 10.823 C 77.182 16.205 72.629 20.525 65.837 20.525 L 65.844 20.532 Z M 72.935 11.252 C 72.935 9.165 70.797 7.434 68.222 7.434 C 64.455 7.434 61.808 10.001 61.808 12.961 C 61.808 15.07 63.495 16.706 66.135 16.765 C 70.062 16.837 72.935 14.306 72.935 11.252 Z M 97.138 18.474 C 96.949 19.252 96.498 19.79 95.4 19.79 C 94.542 19.79 94.084 19.135 94.084 18.626 L 94.106 18.408 C 93.306 18.99 91.953 20.335 89.655 20.335 C 85.597 20.335 83.509 17.986 83.509 15.223 C 83.509 11.026 87.531 8.365 91.618 8.365 C 93.582 8.365 95.233 9.739 95.597 10.401 L 96.804 5.128 C 97 4.35 97.24 3.819 98.404 3.819 C 99.328 3.819 99.837 4.372 99.837 4.975 C 99.837 5.135 99.815 5.288 99.786 5.39 L 97.138 18.474 Z M 91.393 10.975 C 88.92 11.135 86.957 12.823 86.957 14.961 C 86.951 15.354 87.026 15.744 87.177 16.106 C 87.329 16.469 87.553 16.797 87.835 17.069 C 88.118 17.342 88.454 17.554 88.822 17.691 C 89.19 17.829 89.582 17.89 89.975 17.87 C 92.157 17.87 94.746 16.335 94.993 14.641 C 95.488 11.499 92.535 10.888 91.393 10.975 Z M 103.582 15.419 C 103.611 16.67 105.153 17.674 106.724 17.674 C 109.175 17.674 109.146 17.252 110.302 17.252 C 111.08 17.252 111.626 17.688 111.626 18.292 C 111.626 19.026 110.928 19.485 110.244 19.739 C 109.677 19.943 108.324 20.321 106.404 20.321 C 102.593 20.321 100.288 17.739 100.288 15.455 C 100.288 11.266 104.069 8.306 108.455 8.306 C 112.12 8.306 114.251 10.488 114.251 12.888 C 114.251 14.306 113.044 15.405 110.804 15.419 L 103.582 15.419 Z M 104.04 13.375 L 111.189 13.375 C 111.189 12.168 110.149 10.874 108.135 10.874 C 106.317 10.874 104.448 12.197 104.04 13.375 Z M 79.546 16.83 C 80.549 16.83 81.226 17.455 81.226 18.263 C 81.226 19.361 80.018 20.321 78.768 20.321 C 77.764 20.321 77.08 19.725 77.08 18.917 C 77.08 17.863 78.208 16.83 79.546 16.83 Z" fill-rule="nonzero"></path></g>
 </svg>

package/cards/CarCard.tsx

@@ -1,174 +1,174 @@
-// Autobahn (auto.de redesign) — vertical grid car card.
-//
-// Typed React 18 + TS port of `CarCard` from the design kit
-// (docs/redesign/design-source/ui_kits/website/CarCard.jsx). Dense, professional
-// (AutoScout24 / Carvana style); the whole card is clickable. Used on the home
-// page, landing pages and "similar cars" grids.
-//
-// Pure / presentational: all data comes via the `AutobahnCar` prop, all behaviour
-// via injected callbacks. No store / API / `window` access. Renders correctly
-// only inside a `<div className="md3">` subtree.
-//
-// Differs from the design kit on purpose:
-//  - favorite state is INJECTED (isFavorite + onToggleFavorite) instead of the
-//    design's internal useState, so the parent owns the merkliste.
-//  - the needs-data deal signals (DropChip / SaveChip) only appear when real
-//    `drop` / `savings` data is present.
-
-import React from 'react';
-import { TranslationFunction } from '../types';
-
-import { CardCarousel, IconButton, StatChip, SaveChip, Button } from '../ui';
-import { SpecLine, EcoLine, DropChip, PercentChip, ZeroDownChip, cardSpec, fmtRate } from './cardParts';
-import { AutobahnCar } from './types';
-
-export interface CarCardProps {
-  /** fully-resolved car view-model. */
-  car: AutobahnCar;
-  /** whether this car is on the user's merkliste (drives the heart). */
-  isFavorite: boolean;
-  /** toggle the favorite; the heart calls this (click is kept off the card). */
-  onToggleFavorite: () => void;
-  /** fired when the card is clicked (opens the detail page). */
-  onOpen: (car: AutobahnCar) => void;
-  /** fired on first hover/touch of the media box — the SRP uses it to lazy-load the gallery. */
-  onMediaEnter?: () => void;
-  /** i18n translate fn (drilled from the page). */
-  t: TranslationFunction;
-  /**
-   * Optional admin-only action (e.g. dealer super admins' "Zum Schieberegler hinzufügen").
-   * Rendered as a quiet button at the card foot; the page decides visibility (JWT claim).
-   */
-  adminAction?: { label: string; onClick: () => void };
-}
-
-const CarCard: React.FunctionComponent<CarCardProps> = ({ car, isFavorite, onToggleFavorite, onOpen, onMediaEnter, t, adminAction }) => {
-  const showSave = car.savings != null && car.savings > 600;
-  return (
-    <article
-      className="mcard mcard--interactive cc-card"
-      onClick={() => onOpen(car)}
-      style={{ display: 'flex', flexDirection: 'column' }}
-    >
-      <div className="cc-media" style={{ position: 'relative' }} onMouseEnter={onMediaEnter} onTouchStart={onMediaEnter}>
-        <CardCarousel images={car.gallery} height="100%" fit="contain" />
-        {/* max two overlays: heart + ONE deal signal — rating moved next to the price */}
-        <div
-          style={{ position: 'absolute', top: 6, right: 6, zIndex: 3 }}
-          onClick={(e) => e.stopPropagation()}
-        >
-          <IconButton name="heart" filled active={isFavorite} onClick={onToggleFavorite} label={t('autobahn:card.action.save')} />
-        </div>
-        {/* top-left signal stack (heart is top-right): NEU badge + ONE deal signal.
-            DropChip takes precedence over SaveChip; each only renders when its real data exists. */}
-        {(car.isNew || car.drop != null || showSave || car.dropPct != null || car.zeroDown) && (
-          <div
-            style={{ position: 'absolute', top: 10, left: 10, zIndex: 3, display: 'flex', flexWrap: 'nowrap', gap: 5, alignItems: 'center', maxWidth: 'calc(100% - 52px)' }}
-          >
-            {car.isNew && <span className="neu-badge">NEU</span>}
-            {car.drop != null ? <DropChip t={t} amount={car.drop} /> : showSave && <SaveChip t={t} amount={car.savings!} />}
-            <ZeroDownChip t={t} show={car.zeroDown} />
-            <PercentChip pct={car.dropPct} />
-          </div>
-        )}
-      </div>
-      <div style={{ padding: '12px 14px 14px', display: 'flex', flexDirection: 'column', gap: 9, flex: 1 }}>
-        <div>
-          <div className="md-title" style={{ whiteSpace: 'nowrap', overflow: 'hidden', textOverflow: 'ellipsis' }}>
-            {car.make} {car.model}
-          </div>
-          <div className="md-body-sm" style={{ whiteSpace: 'nowrap', overflow: 'hidden', textOverflow: 'ellipsis' }}>
-            {car.trim}
-          </div>
-        </div>
-        <SpecLine items={cardSpec(car)} oneLine />
-        <div style={{ flex: 1 }} />
-        <div style={{ marginTop: 4 }}>
-          {/* rate block: payment-path eyebrow (cheaper of financing/leasing) ABOVE the big
-              monthly rate; Preisbewertung chip kept on the right, centered on the block. */}
-          {(() => {
-            const useLease = car.lease != null && (car.lease as number) < car.monthly;
-            const rate = useLease ? (car.lease as number) : car.monthly;
-            const rateLabel = t(useLease ? 'autobahn:card.price.leasingFrom' : 'autobahn:card.price.financingFrom');
-            return (
-              <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', gap: 8 }}>
-                <div style={{ minWidth: 0 }}>
-                  <div
-                    className="md-label-sm"
-                    style={{
-                      textTransform: 'uppercase',
-                      letterSpacing: '.5px',
-                      fontWeight: 700,
-                      fontSize: 10.5,
-                      color: 'var(--md-on-surface-variant)',
-                      lineHeight: 1.4,
-                    }}
-                  >
-                    {rateLabel}
-                  </div>
-                  <div style={{ display: 'flex', alignItems: 'baseline', gap: 5 }}>
-                    <span
-                      className="num"
-                      style={{
-                        fontWeight: 700,
-                        fontSize: 26,
-                        color: 'var(--md-primary)',
-                        letterSpacing: '-.6px',
-                        whiteSpace: 'nowrap',
-                      }}
-                    >
-                      {fmtRate(rate)} €
-                    </span>
-                    <span className="md-label-sm">{t('autobahn:card.price.perMonth')}</span>
-                  </div>
-                </div>
-                {car.rating && (
-                  <StatChip
-                    tone={car.rating === 'fair' ? 'warn' : 'good'}
-                    icon={car.rating === 'fair' ? 'minus' : 'check'}
-                  >
-                    {t('autobahn:tier.' + car.rating)}
-                  </StatChip>
-                )}
-              </div>
-            );
-          })()}
-          <div className="md-label-sm" style={{ marginTop: 2, display: 'flex', flexWrap: 'wrap', gap: '0 6px' }}>
-            <span style={{ whiteSpace: 'nowrap' }}>
-              {t('autobahn:card.price.purchasePrice')}{' '}
-              <b style={{ color: 'var(--md-on-surface)' }}>{car.price.toLocaleString('de-DE')} €</b>
-            </span>
-            {showSave && car.listPrice != null && (
-              <span
-                style={{
-                  color: 'var(--md-on-surface-variant)',
-                  textDecoration: 'line-through',
-                  whiteSpace: 'nowrap',
-                }}
-              >
-                {car.listPrice.toLocaleString('de-DE')} €
-              </span>
-            )}
-          </div>
-        </div>
-        <EcoLine t={t} car={car} style={{ marginTop: 8 }} />
-        {adminAction && (
-          <div style={{ marginTop: 8 }}>
-            <Button
-              variant="outlined"
-              block
-              onClick={(e) => {
-                e.stopPropagation();
-                adminAction.onClick();
-              }}
-            >
-              {adminAction.label}
-            </Button>
-          </div>
-        )}
-      </div>
-    </article>
-  );
-};
-
-export default CarCard;
+// Autobahn (auto.de redesign) — vertical grid car card.
+//
+// Typed React 18 + TS port of `CarCard` from the design kit
+// (docs/redesign/design-source/ui_kits/website/CarCard.jsx). Dense, professional
+// (AutoScout24 / Carvana style); the whole card is clickable. Used on the home
+// page, landing pages and "similar cars" grids.
+//
+// Pure / presentational: all data comes via the `AutobahnCar` prop, all behaviour
+// via injected callbacks. No store / API / `window` access. Renders correctly
+// only inside a `<div className="md3">` subtree.
+//
+// Differs from the design kit on purpose:
+//  - favorite state is INJECTED (isFavorite + onToggleFavorite) instead of the
+//    design's internal useState, so the parent owns the merkliste.
+//  - the needs-data deal signals (DropChip / SaveChip) only appear when real
+//    `drop` / `savings` data is present.
+
+import React from 'react';
+import { TranslationFunction } from '../types';
+
+import { CardCarousel, IconButton, StatChip, SaveChip, Button } from '../ui';
+import { SpecLine, EcoLine, DropChip, PercentChip, ZeroDownChip, cardSpec, fmtRate } from './cardParts';
+import { AutobahnCar } from './types';
+
+export interface CarCardProps {
+  /** fully-resolved car view-model. */
+  car: AutobahnCar;
+  /** whether this car is on the user's merkliste (drives the heart). */
+  isFavorite: boolean;
+  /** toggle the favorite; the heart calls this (click is kept off the card). */
+  onToggleFavorite: () => void;
+  /** fired when the card is clicked (opens the detail page). */
+  onOpen: (car: AutobahnCar) => void;
+  /** fired on first hover/touch of the media box — the SRP uses it to lazy-load the gallery. */
+  onMediaEnter?: () => void;
+  /** i18n translate fn (drilled from the page). */
+  t: TranslationFunction;
+  /**
+   * Optional admin-only action (e.g. dealer super admins' "Zum Schieberegler hinzufügen").
+   * Rendered as a quiet button at the card foot; the page decides visibility (JWT claim).
+   */
+  adminAction?: { label: string; onClick: () => void };
+}
+
+const CarCard: React.FunctionComponent<CarCardProps> = ({ car, isFavorite, onToggleFavorite, onOpen, onMediaEnter, t, adminAction }) => {
+  const showSave = car.savings != null && car.savings > 600;
+  return (
+    <article
+      className="mcard mcard--interactive cc-card"
+      onClick={() => onOpen(car)}
+      style={{ display: 'flex', flexDirection: 'column' }}
+    >
+      <div className="cc-media" style={{ position: 'relative' }} onMouseEnter={onMediaEnter} onTouchStart={onMediaEnter}>
+        <CardCarousel images={car.gallery} height="100%" fit="contain" />
+        {/* max two overlays: heart + ONE deal signal — rating moved next to the price */}
+        <div
+          style={{ position: 'absolute', top: 6, right: 6, zIndex: 3 }}
+          onClick={(e) => e.stopPropagation()}
+        >
+          <IconButton name="heart" filled active={isFavorite} onClick={onToggleFavorite} label={t('autobahn:card.action.save')} />
+        </div>
+        {/* top-left signal stack (heart is top-right): NEU badge + ONE deal signal.
+            DropChip takes precedence over SaveChip; each only renders when its real data exists. */}
+        {(car.isNew || car.drop != null || showSave || car.dropPct != null || car.zeroDown) && (
+          <div
+            style={{ position: 'absolute', top: 10, left: 10, zIndex: 3, display: 'flex', flexWrap: 'nowrap', gap: 5, alignItems: 'center', maxWidth: 'calc(100% - 52px)' }}
+          >
+            {car.isNew && <span className="neu-badge">NEU</span>}
+            {car.drop != null ? <DropChip t={t} amount={car.drop} /> : showSave && <SaveChip t={t} amount={car.savings!} />}
+            <ZeroDownChip t={t} show={car.zeroDown} />
+            <PercentChip pct={car.dropPct} />
+          </div>
+        )}
+      </div>
+      <div style={{ padding: '12px 14px 14px', display: 'flex', flexDirection: 'column', gap: 9, flex: 1 }}>
+        <div>
+          <div className="md-title" style={{ whiteSpace: 'nowrap', overflow: 'hidden', textOverflow: 'ellipsis' }}>
+            {car.make} {car.model}
+          </div>
+          <div className="md-body-sm" style={{ whiteSpace: 'nowrap', overflow: 'hidden', textOverflow: 'ellipsis' }}>
+            {car.trim}
+          </div>
+        </div>
+        <SpecLine items={cardSpec(car)} oneLine />
+        <div style={{ flex: 1 }} />
+        <div style={{ marginTop: 4 }}>
+          {/* rate block: payment-path eyebrow (cheaper of financing/leasing) ABOVE the big
+              monthly rate; Preisbewertung chip kept on the right, centered on the block. */}
+          {(() => {
+            const useLease = car.lease != null && (car.lease as number) < car.monthly;
+            const rate = useLease ? (car.lease as number) : car.monthly;
+            const rateLabel = t(useLease ? 'autobahn:card.price.leasingFrom' : 'autobahn:card.price.financingFrom');
+            return (
+              <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', gap: 8 }}>
+                <div style={{ minWidth: 0 }}>
+                  <div
+                    className="md-label-sm"
+                    style={{
+                      textTransform: 'uppercase',
+                      letterSpacing: '.5px',
+                      fontWeight: 700,
+                      fontSize: 10.5,
+                      color: 'var(--md-on-surface-variant)',
+                      lineHeight: 1.4,
+                    }}
+                  >
+                    {rateLabel}
+                  </div>
+                  <div style={{ display: 'flex', alignItems: 'baseline', gap: 5 }}>
+                    <span
+                      className="num"
+                      style={{
+                        fontWeight: 700,
+                        fontSize: 26,
+                        color: 'var(--md-primary)',
+                        letterSpacing: '-.6px',
+                        whiteSpace: 'nowrap',
+                      }}
+                    >
+                      {fmtRate(rate)} €
+                    </span>
+                    <span className="md-label-sm">{t('autobahn:card.price.perMonth')}</span>
+                  </div>
+                </div>
+                {car.rating && (
+                  <StatChip
+                    tone={car.rating === 'fair' ? 'warn' : 'good'}
+                    icon={car.rating === 'fair' ? 'minus' : 'check'}
+                  >
+                    {t('autobahn:tier.' + car.rating)}
+                  </StatChip>
+                )}
+              </div>
+            );
+          })()}
+          <div className="md-label-sm" style={{ marginTop: 2, display: 'flex', flexWrap: 'wrap', gap: '0 6px' }}>
+            <span style={{ whiteSpace: 'nowrap' }}>
+              {t('autobahn:card.price.purchasePrice')}{' '}
+              <b style={{ color: 'var(--md-on-surface)' }}>{car.price.toLocaleString('de-DE')} €</b>
+            </span>
+            {showSave && car.listPrice != null && (
+              <span
+                style={{
+                  color: 'var(--md-on-surface-variant)',
+                  textDecoration: 'line-through',
+                  whiteSpace: 'nowrap',
+                }}
+              >
+                {car.listPrice.toLocaleString('de-DE')} €
+              </span>
+            )}
+          </div>
+        </div>
+        <EcoLine t={t} car={car} style={{ marginTop: 8 }} />
+        {adminAction && (
+          <div style={{ marginTop: 8 }}>
+            <Button
+              variant="outlined"
+              block
+              onClick={(e) => {
+                e.stopPropagation();
+                adminAction.onClick();
+              }}
+            >
+              {adminAction.label}
+            </Button>
+          </div>
+        )}
+      </div>
+    </article>
+  );
+};
+
+export default CarCard;