@bytebrand/fe-ui-core-autobahn 1.0.29 → 1.0.30

package/vdp/VdpModules.tsx

@@ -61,6 +61,9 @@ export const VdpHeaderSummary: React.FunctionComponent<VdpHeaderCardProps> = ({
     ['cog', vehicle.gear],
     ['fuel', stripParen(vehicle.fuel)],
     ['user', t('autobahn:header.owners', { owners: vehicle.owners, count: vehicle.owners })],
+    // body type closes the fact grid (mockup: km|EZ / Getriebe|Kraftstoff / Hand|Karosserie);
+    // the compact phone dot-line hides everything from "Hand" on via CSS (nth-child(n+5)).
+    ...(vehicle.body ? ([['car-front', vehicle.body]] as const) : []),
   ];
   return (
     <>
@@ -99,10 +102,12 @@ export const VdpHeaderSummary: React.FunctionComponent<VdpHeaderCardProps> = ({
   );
 };
 
-/** hand-picked highlights — the single accent row of the header. */
+/** hand-picked highlights — the accent rows of the header. ALL highlights are shown
+ *  (review round 9: "all highlights shown", no 6-chip cap); the Figma pill colors live
+ *  on .vdp-highlights .chip in the theme. */
 export const VdpHeaderHighlights: React.FunctionComponent<VdpHeaderCardProps> = ({ vehicle }) => (
   <div className="vdp-highlights" style={{ display: 'flex', flexWrap: 'wrap', alignItems: 'center', gap: 8 }}>
-    {vehicle.highlights.slice(0, 6).map((f) => (
+    {vehicle.highlights.map((f) => (
       <span key={f} className="chip chip--filter chip--selected" style={{ cursor: 'default' }}>
         <Icon name="check" size={14} stroke={2.4} />
         {f}
@@ -297,7 +302,7 @@ export const EquipmentList: React.FunctionComponent<EquipmentListProps> = ({ gro
       <div className="eq-cols">
         {entries.map(([g, items]) => (
           <div key={g} style={{ breakInside: 'avoid', marginBottom: 18 }}>
-            <div className="md-title-sm" style={{ color: 'var(--md-primary)', marginBottom: 8 }}>
+            <div className="md-title-sm" style={{ color: 'var(--md-link)', marginBottom: 8 }}>
               {g}
             </div>
             <ul style={{ listStyle: 'none', margin: 0, padding: 0, display: 'flex', flexDirection: 'column', gap: 7 }}>
@@ -341,10 +346,14 @@ export interface Co2LabelProps {
   t: TranslationFunction;
 }
 
-/** CO₂ / energy-efficiency label (EU-style stepped colour band). Handles PHEV. */
+/** CO₂ / energy-efficiency label (EU-style stepped colour band, Figma pastel scale).
+ *  Handles PHEV with BOTH class markers (gew. komb. + entladen komb.) on the scale. */
 export const Co2Label: React.FunctionComponent<Co2LabelProps> = ({ vehicle, t }) => {
   const p = vehicle.phev;
   const idx = Math.max(0, CO2_CLASSES.indexOf((p ? p.co2classW : vehicle.co2class) as (typeof CO2_CLASSES)[number]));
+  // discharged-class marker (PHEV only); -1 when absent or same as the weighted class.
+  const idxD = p ? CO2_CLASSES.indexOf(p.co2classD as (typeof CO2_CLASSES)[number]) : -1;
+  const hasMarks = !!p && (idx >= 0 || idxD >= 0);
   const stats: ReadonlyArray<readonly [string, string]> = p
     ? [
         [t('autobahn:eco.stat.powerConsumptionWeighted'), p.consEl],
@@ -374,8 +383,27 @@ export const Co2Label: React.FunctionComponent<Co2LabelProps> = ({ vehicle, t })
       </div>
       <div className="co2-scale">
         {CO2_CLASSES.map((c, i) => (
-          <div key={c} className={'co2-seg' + (i === idx ? ' co2-seg--on' : '')} style={{ background: CO2_COLORS[i] }}>
-            {c}
+          <div key={c} className="co2-col">
+            {/* PHEV: tiny class markers above the weighted + discharged segments (mockup) */}
+            {hasMarks && (
+              <span className="co2-mark">
+                {i === idx
+                  ? t('autobahn:eco.weightedShort')
+                  : i === idxD && idxD !== idx
+                    ? t('autobahn:eco.dischargedShort')
+                    : ' '}
+              </span>
+            )}
+            <div
+              className={
+                'co2-seg' +
+                (i === idx ? ' co2-seg--on' : '') +
+                (i === idxD && idxD !== idx ? ' co2-seg--on2' : '')
+              }
+              style={{ ['--seg' as string]: CO2_COLORS[i] } as React.CSSProperties}
+            >
+              {c}
+            </div>
           </div>
         ))}
       </div>
@@ -450,8 +478,8 @@ export const VehicleDescription: React.FunctionComponent<VehicleDescriptionProps
 // Trust strip
 // ---------------------------------------------------------------------------
 
-/** [kebab-case lucide icon, label]. */
-export type TrustItem = readonly [icon: string, label: string];
+/** [kebab-case lucide icon, label, optional subline (mobile Figma tiles)]. */
+export type TrustItem = readonly [icon: string, label: string, sub?: string];
 
 export interface TrustStripProps {
   /** trust badges; defaults to auto.de's four standard promises. */
@@ -460,21 +488,25 @@ export interface TrustStripProps {
   t: TranslationFunction;
 }
 
-/** auto.de's four standard promises — [icon, i18n label key]. */
-const DEFAULT_TRUST: ReadonlyArray<TrustItem> = [
-  ['shield-check', 'autobahn:trust.warranty'],
-  ['undo-2', 'autobahn:trust.return'],
-  ['truck', 'autobahn:trust.delivery'],
-  ['badge-check', 'autobahn:trust.inspection'],
+/** auto.de's four standard promises — [icon, i18n label key, i18n subline key]. */
+const DEFAULT_TRUST: ReadonlyArray<readonly [string, string, string]> = [
+  ['shield-check', 'autobahn:trust.warranty', 'autobahn:trust.warrantySub'],
+  ['undo-2', 'autobahn:trust.return', 'autobahn:trust.returnSub'],
+  ['truck', 'autobahn:trust.delivery', 'autobahn:trust.deliverySub'],
+  ['badge-check', 'autobahn:trust.inspection', 'autobahn:trust.inspectionSub'],
 ];
 
-/** Horizontal trust-signal strip. */
+/** Trust-signal strip: quiet one-liner on desktop, Figma 2×2 tile card on mobile
+ *  (the .trust-sub sublines only surface in the mobile tile layout via CSS). */
 export const TrustStrip: React.FunctionComponent<TrustStripProps> = ({ items, t }) => (
   <div className="trust-strip">
-    {(items ?? DEFAULT_TRUST.map(([ic, key]) => [ic, t(key)] as TrustItem)).map(([ic, label]) => (
+    {(items ?? DEFAULT_TRUST.map(([ic, key, subKey]) => [ic, t(key), t(subKey)] as TrustItem)).map(([ic, label, sub]) => (
       <div key={label}>
         <Icon name={ic} size={17} color="var(--md-primary)" stroke={2} style={{ flex: 'none' }} />
-        {label}
+        <span style={{ minWidth: 0 }}>
+          {label}
+          {sub && <span className="trust-sub">{sub}</span>}
+        </span>
       </div>
     ))}
   </div>
@@ -930,32 +962,111 @@ export interface VdpBottomBarProps {
    * after scrolling past the main offer card.
    */
   show: boolean;
+  /** active payment mode — drives the tabs + the displayed figure (rate vs price). */
+  mode?: FinanceMode;
+  /** mode tab tapped; when omitted the tabs row is not rendered. */
+  onModeChange?: (mode: FinanceMode) => void;
+  /** monthly rate for the CURRENT mode (fin/leasing differ); falls back to vehicle.monthly. */
+  monthly?: number;
+  /** price-rating label — drives the eval pill + gradient bar (same as the offer card). */
+  ratingLabel?: string;
   /** primary CTA click. */
   onSecure?: () => void;
+  /** phone CTA click. */
+  onCall?: () => void;
+  /** opens the "Rate anpassen" sheet; when omitted the button is not rendered. */
+  onOpenAdjust?: () => void;
   /** i18n function (drilled from the page). */
   t: TranslationFunction;
 }
 
-/** Mobile sticky bottom CTA bar — rate + Kaufpreis + "Angebot sichern". */
-export const VdpBottomBar: React.FunctionComponent<VdpBottomBarProps> = ({ vehicle, show, onSecure, t }) => (
-  <div className={'vdp-bottom-bar show-mobile' + (show ? ' vdp-bottom-bar--on' : '')}>
-    <div style={{ flex: 1, minWidth: 0 }}>
-      <div style={{ display: 'flex', alignItems: 'baseline', gap: 5, whiteSpace: 'nowrap' }}>
-        <span className="md-label-sm">{t('autobahn:bottom.from')}</span>
-        <span className="num" style={{ fontWeight: 700, fontSize: 22, color: 'var(--md-primary)', letterSpacing: '-.5px' }}>
-          {vehicle.monthly} €
-        </span>
-        <span className="md-label-sm">{t('autobahn:bottom.perMonth')}</span>
+/** Mobile sticky bottom bar (Figma "Sticky Footer"): mode tabs, rate + price rating,
+ *  then Angebot anfragen · phone · Rate anpassen. No struck old rate — there is no
+ *  real previous-rate source (needs-data discipline), so nothing is fabricated. */
+export const VdpBottomBar: React.FunctionComponent<VdpBottomBarProps> = ({
+  vehicle,
+  show,
+  mode = 'fin',
+  onModeChange,
+  monthly,
+  ratingLabel,
+  onSecure,
+  onCall,
+  onOpenAdjust,
+  t,
+}) => {
+  const isCash = mode === 'cash';
+  const rate = monthly != null ? monthly : vehicle.monthly;
+  const tierIdx = TIER_LABELS.indexOf(ratingLabel as (typeof TIER_LABELS)[number]);
+  const evalTier = tierIdx >= 0 ? tierIdx : 1;
+  return (
+    <div className={'vdp-bottom-bar show-mobile' + (show ? ' vdp-bottom-bar--on' : '')}>
+      {onModeChange && (
+        <div className="fin-tabs bb-tabs" role="tablist">
+          {(
+            [
+              ['fin', 'autobahn:finance.mode.financing'],
+              ['leasing', 'autobahn:finance.mode.leasing'],
+              ['cash', 'autobahn:card.price.buy'],
+            ] as Array<[FinanceMode, string]>
+          ).map(([k, labelKey]) => (
+            <button
+              key={k}
+              type="button"
+              role="tab"
+              aria-selected={mode === k}
+              className={'fin-tab' + (mode === k ? ' on' : '')}
+              onClick={() => onModeChange(k)}
+            >
+              {t(labelKey)}
+            </button>
+          ))}
+        </div>
+      )}
+      <div className="bb-price-row">
+        <div style={{ display: 'flex', alignItems: 'baseline', gap: 5, whiteSpace: 'nowrap', minWidth: 0 }}>
+          <span className="num" style={{ fontWeight: 800, fontSize: 30, color: 'var(--md-primary)', letterSpacing: '-1px' }}>
+            {isCash ? eur(vehicle.price) : eur(Math.round(rate))} €
+          </span>
+          <span className="md-label-sm" style={{ fontWeight: 600 }}>
+            {isCash ? t('autobahn:finance.fixedPrice') : `${t('autobahn:finance.exampleLabel')} ${t('autobahn:bottom.perMonth')}`}
+          </span>
+        </div>
+        {ratingLabel && (
+          <div className="bb-eval">
+            <span
+              className="fin-eval-pill"
+              style={{ color: TIER_COLORS[evalTier], background: `color-mix(in srgb, ${TIER_COLORS[evalTier]} 16%, transparent)` }}
+            >
+              <Icon
+                name={evalTier <= 1 ? 'check' : evalTier === 2 ? 'minus' : 'trending-up'}
+                size={13}
+                stroke={2.6}
+                color={TIER_COLORS[evalTier]}
+              />
+              {t('autobahn:tier.' + TIER_KEYS[evalTier])}
+            </span>
+            <div className="fin-eval-bar">
+              <div className="fin-eval-thumb" style={{ left: `${(evalTier + 0.5) * 20}%`, borderColor: TIER_COLORS[evalTier] }} />
+            </div>
+          </div>
+        )}
       </div>
-      <div className="md-label-sm" style={{ whiteSpace: 'nowrap', overflow: 'hidden', textOverflow: 'ellipsis' }}>
-        {t('autobahn:bottom.purchasePrice', { price: eur(vehicle.price) })}
+      <div className="bb-cta-row">
+        <Button variant="filled" icon="file-check" style={{ flex: 1, minWidth: 0 }} onClick={onSecure}>
+          {t('autobahn:bottom.secureOffer')}
+        </Button>
+        {/* padding:0 — icon-only button (same fix as the sheet's phone button) */}
+        {onCall && <Button variant="outlined" icon="phone" style={{ width: 46, flex: 'none', padding: 0 }} onClick={onCall} />}
+        {onOpenAdjust && !isCash && (
+          <Button variant="outlined" icon="sliders-horizontal" className="bb-adjust" style={{ flex: 'none' }} onClick={onOpenAdjust}>
+            {t('autobahn:finance.adjustRate')}
+          </Button>
+        )}
       </div>
     </div>
-    <Button variant="filled" icon="shield-check" style={{ flex: 'none' }} onClick={onSecure}>
-      {t('autobahn:bottom.secureOffer')}
-    </Button>
-  </div>
-);
+  );
+};
 
 // ---------------------------------------------------------------------------
 // 130-Punkte-Check block
@@ -1483,6 +1594,12 @@ export const FinanceDetailsModal: React.FunctionComponent<FinanceDetailsModalPro
 export interface CustomerRatingsProps {
   /** the loaded reviews (REAL — from the WP json-quotes source). */
   reviews: VdpReview[];
+  /**
+   * Overall auto.de Google rating to display instead of the average of the few
+   * loaded reviews (which skews to 5,0 — the review feed only carries 5-star
+   * quotes). The page passes the real aggregate (4,6 per Google, review round 9).
+   */
+  average?: number;
   /** i18n function (drilled from the page). */
   t: TranslationFunction;
 }
@@ -1495,11 +1612,11 @@ export interface CustomerRatingsProps {
  * the WordPress json-quotes feed); the page loads them and passes them in. When no
  * reviews load, the page renders nothing (no fabricated content).
  */
-export const CustomerRatings: React.FunctionComponent<CustomerRatingsProps> = ({ reviews, t }) => {
+export const CustomerRatings: React.FunctionComponent<CustomerRatingsProps> = ({ reviews, average, t }) => {
   const [showAll, setShowAll] = useState(false);
   if (!reviews || !reviews.length) return null;
   const count = reviews.length;
-  const avg = reviews.reduce((s, r) => s + (r.rating || 0), 0) / count;
+  const avg = average != null ? average : reviews.reduce((s, r) => s + (r.rating || 0), 0) / count;
   const shown = showAll ? reviews : reviews.slice(0, 4);
   return (
     <section className="mcard" id="vdp-bewertungen" style={{ padding: 22, marginTop: 44 }}>
@@ -1608,15 +1725,13 @@ const enquiryInput: React.CSSProperties = {
   fontSize: 14,
 };
 
-/** field with a small floating-style label above the input. */
-const EnquiryField: React.FunctionComponent<{
+/** outlined field with the label floating ON the top border (Figma phone/message fields). */
+const FloatField: React.FunctionComponent<{
   label: string;
   children: React.ReactNode;
 }> = ({ label, children }) => (
-  <label style={{ display: 'flex', flexDirection: 'column', gap: 5 }}>
-    <span className="md-label-sm" style={{ fontWeight: 600 }}>
-      {label}
-    </span>
+  <label className="enq-float">
+    <span className="enq-float-label">{label}</span>
     {children}
   </label>
 );
@@ -1640,9 +1755,12 @@ export const VdpEnquiry: React.FunctionComponent<VdpEnquiryProps> = ({
   onSubmit,
   t,
 }) => {
-  const [name, setName] = useState('');
+  const [firstName, setFirstName] = useState('');
+  const [lastName, setLastName] = useState('');
   const [email, setEmail] = useState('');
-  const [phone, setPhone] = useState('');
+  const [areaCode, setAreaCode] = useState('');
+  const [phoneNum, setPhoneNum] = useState('');
+  const [consent, setConsent] = useState(false);
   const [pref, setPref] = useState<'email' | 'phone'>('email');
   const [message, setMessage] = useState(
     autoDeId
@@ -1654,9 +1772,16 @@ export const VdpEnquiry: React.FunctionComponent<VdpEnquiryProps> = ({
   const [error, setError] = useState('');
 
   const emailOk = /.+@.+\..+/.test(email);
-  const phoneOk = phone.replace(/\D/g, '').length >= 6;
-  // the preferred channel is required; the other stays optional.
-  const valid = name.trim().length > 1 && (pref === 'email' ? emailOk : phoneOk);
+  const phoneDigits = (areaCode + phoneNum).replace(/\D/g, '');
+  const phoneOk = phoneDigits.length >= 6;
+  // Figma round 9: Vorname/Nachname/E-Mail are always required (*), phone additionally
+  // when it's the preferred channel; the consent checkbox gates the send.
+  const valid =
+    firstName.trim().length > 0 &&
+    lastName.trim().length > 0 &&
+    emailOk &&
+    consent &&
+    (pref !== 'phone' || phoneOk);
 
   const submit = async (): Promise<void> => {
     if (!valid || sending) return;
@@ -1665,8 +1790,14 @@ export const VdpEnquiry: React.FunctionComponent<VdpEnquiryProps> = ({
     const note = t('autobahn:enquiry.preferredContact', {
       channel: pref === 'email' ? t('autobahn:enquiry.contactMethod.email') : t('autobahn:enquiry.contactMethod.phone'),
     });
+    const phone = phoneDigits ? `+49 ${areaCode.trim()} ${phoneNum.trim()}`.replace(/\s+/g, ' ').trim() : '';
     try {
-      await onSubmit({ name: name.trim(), email: email.trim(), phone: phone.trim(), message: message.trim() + note });
+      await onSubmit({
+        name: `${firstName.trim()} ${lastName.trim()}`,
+        email: email.trim(),
+        phone,
+        message: message.trim() + note,
+      });
       setSent(true);
     } catch (e) {
       setError(t('autobahn:enquiry.form.sendError'));
@@ -1744,38 +1875,103 @@ export const VdpEnquiry: React.FunctionComponent<VdpEnquiryProps> = ({
               </button>
             </div>
           </div>
-          <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(190px, 1fr))', gap: 12 }}>
-            <EnquiryField label={t('autobahn:enquiry.form.nameLabel')}>
-              <input style={enquiryInput} placeholder={t('autobahn:enquiry.form.namePlaceholder')} value={name} onChange={(e) => setName(e.target.value)} aria-label={t('autobahn:enquiry.form.nameAria')} />
-            </EnquiryField>
-            <EnquiryField label={pref === 'email' ? t('autobahn:enquiry.form.emailLabelRequired') : t('autobahn:enquiry.form.emailLabel')}>
-              <input style={enquiryInput} type="email" placeholder={t('autobahn:enquiry.form.emailPlaceholder')} value={email} onChange={(e) => setEmail(e.target.value)} aria-label={t('autobahn:enquiry.contactMethod.email')} />
-            </EnquiryField>
-            <EnquiryField label={pref === 'phone' ? t('autobahn:enquiry.form.phoneLabelRequired') : t('autobahn:enquiry.form.phoneLabel')}>
-              <input style={enquiryInput} type="tel" placeholder={t('autobahn:enquiry.form.phonePlaceholder')} value={phone} onChange={(e) => setPhone(e.target.value)} aria-label={t('autobahn:enquiry.contactMethod.phone')} />
-            </EnquiryField>
+          {/* Vorname* / Nachname* — two required fields (Figma round 9), placeholder-labeled */}
+          <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(150px, 1fr))', gap: 12 }}>
+            <input
+              style={enquiryInput}
+              placeholder={t('autobahn:enquiry.form.firstNamePlaceholder')}
+              value={firstName}
+              onChange={(e) => setFirstName(e.target.value)}
+              aria-label={t('autobahn:enquiry.form.firstNameAria')}
+            />
+            <input
+              style={enquiryInput}
+              placeholder={t('autobahn:enquiry.form.lastNamePlaceholder')}
+              value={lastName}
+              onChange={(e) => setLastName(e.target.value)}
+              aria-label={t('autobahn:enquiry.form.lastNameAria')}
+            />
           </div>
           <div style={{ marginTop: 12 }}>
-            <EnquiryField label={t('autobahn:enquiry.form.messageLabel')}>
+            <input
+              style={enquiryInput}
+              type="email"
+              placeholder={t('autobahn:enquiry.form.emailPlaceholder')}
+              value={email}
+              onChange={(e) => setEmail(e.target.value)}
+              aria-label={t('autobahn:enquiry.contactMethod.email')}
+            />
+          </div>
+          {/* Land (+49 fixed) · Vorwahl · Telefonnummer — outlined float-label row (Figma) */}
+          <div className="enq-phone-row" style={{ marginTop: 16 }}>
+            <FloatField label={t('autobahn:enquiry.form.countryLabel')}>
+              <span className="enq-country num">
+                +49
+                <Icon name="chevron-down" size={14} color="var(--md-on-surface-variant)" />
+              </span>
+            </FloatField>
+            <FloatField label={t('autobahn:enquiry.form.areaCodeLabel')}>
+              <input
+                type="tel"
+                value={areaCode}
+                onChange={(e) => setAreaCode(e.target.value)}
+                aria-label={t('autobahn:enquiry.form.areaCodeLabel')}
+              />
+            </FloatField>
+            <FloatField label={t('autobahn:enquiry.form.phoneNumberLabel')}>
+              <input
+                type="tel"
+                value={phoneNum}
+                onChange={(e) => setPhoneNum(e.target.value)}
+                aria-label={t('autobahn:enquiry.form.phoneNumberLabel')}
+              />
+            </FloatField>
+          </div>
+          <div style={{ marginTop: 16 }}>
+            <FloatField label={t('autobahn:enquiry.form.messageLabel')}>
               <textarea
-                style={{ ...enquiryInput, height: 92, padding: '10px 14px', resize: 'vertical' }}
                 value={message}
                 onChange={(e) => setMessage(e.target.value)}
                 aria-label={t('autobahn:enquiry.form.messageAria')}
               />
-            </EnquiryField>
+            </FloatField>
           </div>
+          {/* Nutzungsbedingungen sentence + revocable-consent checkbox (Figma round 9) */}
+          <p className="md-body-sm" style={{ margin: '14px 0 0' }}>
+            {t('autobahn:enquiry.form.termsPrefix')}{' '}
+            <a href="/nutzungsbedingungen/" target="_blank" rel="noopener noreferrer" style={{ color: 'inherit' }}>
+              {t('autobahn:enquiry.form.termsLink')}
+            </a>{' '}
+            {t('autobahn:enquiry.form.termsSuffix')}
+          </p>
+          <label className="enq-consent">
+            <input type="checkbox" checked={consent} onChange={(e) => setConsent(e.target.checked)} />
+            <span>
+              {t('autobahn:enquiry.form.consentPart1')}{' '}
+              <a href="/datenschutz/" target="_blank" rel="noopener noreferrer">
+                {t('autobahn:enquiry.form.consentLinkHere')}
+              </a>{' '}
+              {t('autobahn:enquiry.form.consentPart2')}{' '}
+              <a href="/datenschutz/" target="_blank" rel="noopener noreferrer">
+                {t('autobahn:enquiry.form.consentLinkPrivacy')}
+              </a>
+              {t('autobahn:enquiry.form.consentPart3')}
+            </span>
+          </label>
           {error && (
             <div className="md-label-sm" style={{ color: 'var(--md-error)', marginTop: 8 }}>
               {error}
             </div>
           )}
-          <div style={{ display: 'flex', alignItems: 'center', gap: 14, marginTop: 16, flexWrap: 'wrap' }}>
-            <Button variant="filled" size="lg" icon="send" disabled={!valid || sending} onClick={submit}>
+          <div style={{ marginTop: 16 }}>
+            <Button variant="filled" block size="lg" icon="send" disabled={!valid || sending} onClick={submit}>
               {sending ? t('autobahn:enquiry.form.sending') : t('autobahn:enquiry.sendButton')}
             </Button>
-            <span className="md-label-sm" style={{ display: 'inline-flex', alignItems: 'center', gap: 5 }}>
-              <Icon name="lock" size={13} />
+            <span
+              className="md-label-sm"
+              style={{ display: 'flex', alignItems: 'center', justifyContent: 'center', gap: 5, marginTop: 10, color: 'var(--md-good)' }}
+            >
+              <Icon name="lock" size={13} color="var(--md-good)" />
               {t('autobahn:enquiry.security')}
             </span>
           </div>
@@ -1816,7 +2012,8 @@ export const HowItWorks: React.FunctionComponent<HowItWorksProps> = ({ steps, t
     steps ?? DEFAULT_STEPS.map(([titleKey, descKey]) => [t(titleKey), t(descKey)] as HowItWorksStep);
   return (
     <section className="hiw-section" style={{ marginTop: 44 }}>
-      <h2 className="md-headline-sm" style={{ marginBottom: 28, textAlign: 'center' }}>
+      {/* alignment is breakpoint-owned: centered on desktop, left on the mobile card (CSS) */}
+      <h2 className="md-headline-sm hiw-heading" style={{ marginBottom: 28 }}>
         {t('autobahn:howItWorks.title')}
       </h2>
       <div className="steps-4 hiw-grid">