@bytebrand/fe-ui-core-autobahn 1.0.125 → 1.0.126

package/compat/Checkbox/Checkbox.styl

@@ -13,6 +13,30 @@
 
 .wrapInput
   display flex;
+  // now the actual <label> (see Checkbox.tsx) — was previously just a plain div nested
+  // inside a <label> that also wrapped the text content, so clicking ANYWHERE in the row
+  // (including the paragraph of text next to a checkbox like the checkout modal's terms
+  // agreement) toggled it. Shrinking the real <label> down to just this element means only
+  // the checkbox (+ its price badge, where used) is a native click/tap target — the text
+  // moved out to a plain sibling <span> in the TSX, connected back via aria-labelledby so
+  // screen readers still get the full text as the checkbox's accessible name.
+  cursor: pointer
+  position: relative
+
+  // Larger mobile tap target than the visible 20x20 .checkbox box (WCAG 2.5.5 wants 44x44):
+  // an invisible ::before extends the LABEL's own hit-region via negative inset, so a tap
+  // landing up to 12px outside the visible square still lands inside the <label> and toggles
+  // it — no extra JS, this is purely how native label click-forwarding already works, just
+  // given a bigger box to forward FROM. Mobile-only per the ticket; desktop clicks are
+  // precise enough with a mouse that enlarging the target isn't needed there.
+  +media-phone-only()
+    &::before
+      content: ''
+      position: absolute
+      top: -12px
+      right: -12px
+      bottom: -12px
+      left: -12px
 
 .wrapInput.reversed
   order: 2;
@@ -20,10 +44,19 @@
     margin-left: 5px;
     margin-right: 0;
 
+// Keyboard-only focus ring (WCAG 2.4.3) — :focus-visible instead of plain :focus so it
+// shows when Tabbing to the checkbox but NOT as a side effect of a mouse/touch click, which
+// is what a click already relies on `:focus` for. Browsers without :focus-visible support
+// simply never match this override (an invalid pseudo-class inside :not() invalidates the
+// whole selector, so the rule below is skipped entirely there) and keep the old always-on-
+// focus outline as a safe fallback.
 .container:focus
   outline: 2px auto lighten($primary, 80%)
   outline-offset: 2px
 
+.container:focus:not(:focus-visible)
+  outline: none
+
 .container.checked
   .checkbox
     border-color: $primary
@@ -66,13 +99,15 @@
 .checkbox.withLabel
   margin-right: 10px
 
+// Plain flex-row wrapper now (was a real <label> — see Checkbox.tsx/.wrapInput above for why
+// it shrank down to just the checkbox). No cursor:pointer here: only .wrapInput (the actual
+// clickable label now) should look clickable — the text next to it is deliberately not.
 .label
   display: flex
   flex-direction: row
   align-items: center
   position: relative
   font-size: 14px
-  cursor: pointer
 
 .labelContent
   flex: 1 1 auto

package/compat/Checkbox/Checkbox.tsx

@@ -29,6 +29,12 @@ export interface ICheckboxProps {
   label?: JSX.Element | string | null | ReactNode;
 }
 
+// Unique-per-instance id for the text content span, so the (visually hidden) native
+// <input type="checkbox"> can point aria-labelledby at it — see render() below for why the
+// text moved out of the <label> and needs this to still work as the checkbox's accessible
+// name for screen readers.
+let contentIdCounter = 0;
+
 class Checkbox extends React.Component<ICheckboxProps, {}> {
   static defaultProps = {
     name: '',
@@ -54,6 +60,13 @@ class Checkbox extends React.Component<ICheckboxProps, {}> {
   };
 
   input: HTMLInputElement = null;
+  contentId: string;
+
+  constructor(props: ICheckboxProps) {
+    super(props);
+    contentIdCounter += 1;
+    this.contentId = `checkbox-content-${contentIdCounter}`;
+  }
 
   setInputRef = (ref: HTMLInputElement) => {
     this.input = ref;
@@ -133,8 +146,14 @@ class Checkbox extends React.Component<ICheckboxProps, {}> {
       // putting it where a sighted user would visually expect it (after the fields above,
       // before the CTA below) instead of unpredictably early.
       <div className={containerClasses} tabIndex={0} onFocus={this.props.onFocus} onBlur={this.props.onBlur} onKeyPress={this.onKeyPress}>
-        <label className={labelClasses}>
-          <div className={wrapInputClasses}>
+        <div className={labelClasses}>
+          {/* Real <label>, scoped to JUST the checkbox (+ its optional price badge) — was
+              wrapping the text content too, so clicking anywhere in a long paragraph like the
+              checkout modal's terms-agreement text toggled the checkbox as a side effect.
+              Native label-click-forwarding only fires for clicks landing inside THIS element
+              now, and it still works with zero extra JS since the hidden <input> is nested
+              inside it. */}
+          <label className={wrapInputClasses}>
             {/* Visual representation of the checkbox */}
             {/* HidePlus class for OrderOverview component */}
             {checkboxPriceValue && <span className={styles.checkboxPrice}><span className={styles.hidePlus}>+</span><FormattedNumber numbersAfterDot={0} value={checkboxPriceValue} /> €</span>}
@@ -148,18 +167,22 @@ class Checkbox extends React.Component<ICheckboxProps, {}> {
               tabIndex={-1}
               onChange={this.onChange}
               ref={this.setInputRef}
+              // The text is no longer a DOM ancestor/descendant of this input (moved out to a
+              // plain sibling <span> below so it stops being a click target) — aria-labelledby
+              // keeps it as the input's accessible name for assistive tech regardless.
+              aria-labelledby={label ? this.contentId : undefined}
             />
 
             {isAboAccordionExpanded0 && <span className={checkboxClasses}>{checked ? <IconSVG name='common_CheckBlue' className={styles.checkBlueIcon} /> : false}</span>}
 
-          </div>
+          </label>
           {!!label ? (
-            <span className={labelContentClasses}>
+            <span id={this.contentId} className={labelContentClasses}>
               {label}
               {tooltipDescription && <Tooltip description={tooltipDescription} positionY={'top'} positionX={tooltipPosX} tooltipClassName={styles.tooltipCheckbox} iconName='InfoTransparent' />}
             </span>
           ) : false}
-        </label>
+        </div>
       </div>
     );
   }

package/compat/Checkbox/FormCheckbox.tsx

@@ -1,88 +1,88 @@
-import * as React from 'react';
-import classnames from 'classnames';
-import Checkbox from './Checkbox';
-import styles from './FormCheckbox.styl';
-
-interface IFormCheckboxProps {
-  className?: string;
-  errorClassName?: string;
-  label?: JSX.Element | string | null;
-  field: any;
-  checkboxClassName?: string;
-  labelClassName?: string;
-  labelContentClassName?: string;
-  customError?: boolean;
-  helperText?: string;
-}
-
-interface IFormCheckboxState {
-  field: {
-    name?: string;
-    value?: boolean;
-    checked?: boolean;
-    error?: boolean;
-    disabled?: boolean
-  };
-}
-
-class FormCheckbox extends React.Component<IFormCheckboxProps, IFormCheckboxState> {
-  constructor(props: IFormCheckboxProps) {
-    super(props);
-
-    this.state = {
-      field: {
-        value: this.props.field.value,
-        error: this.props.field.error,
-        checked: this.props.field.checked,
-        disabled: this.props.field.disabled,
-        name: this.props.field.name
-      }
-    };
-  }
-  static defaultProps = {
-    className: '',
-    label: false
-  };
-
-  handleChange = (event: React.ChangeEvent<HTMLInputElement>, checked?: boolean, value?: any) => {
-    const { name, disabled, onChange, rules } = this.props.field;
-    const customError = (rules.includes('accepted') && !checked);
-    this.setState(() => ({
-      field: {
-        value,
-        name,
-        disabled,
-        checked,
-        error: customError
-      }
-    }));
-    onChange(event, checked, value);
-  }
-
-  render() {
-    const { label, className, checkboxClassName, labelClassName, labelContentClassName } = this.props;
-    const { name, value, checked, disabled, error } = this.state.field;
-    const customError = error || (this.props.field.error && !checked);
-
-    const _props = {
-      value,
-      checked,
-      name,
-      disabled,
-      label,
-      checkboxClassName,
-      labelClassName,
-      labelContentClassName,
-      onChange: this.handleChange,
-      error: customError
-    };
-
-    return (
-      <div className={classnames(styles.field, className)}>
-        <Checkbox {..._props} />
-      </div>
-    );
-  }
-}
-
-export default FormCheckbox;
+import * as React from 'react';
+import classnames from 'classnames';
+import Checkbox from './Checkbox';
+import styles from './FormCheckbox.styl';
+
+interface IFormCheckboxProps {
+  className?: string;
+  errorClassName?: string;
+  label?: JSX.Element | string | null;
+  field: any;
+  checkboxClassName?: string;
+  labelClassName?: string;
+  labelContentClassName?: string;
+  customError?: boolean;
+  helperText?: string;
+}
+
+interface IFormCheckboxState {
+  field: {
+    name?: string;
+    value?: boolean;
+    checked?: boolean;
+    error?: boolean;
+    disabled?: boolean
+  };
+}
+
+class FormCheckbox extends React.Component<IFormCheckboxProps, IFormCheckboxState> {
+  constructor(props: IFormCheckboxProps) {
+    super(props);
+
+    this.state = {
+      field: {
+        value: this.props.field.value,
+        error: this.props.field.error,
+        checked: this.props.field.checked,
+        disabled: this.props.field.disabled,
+        name: this.props.field.name
+      }
+    };
+  }
+  static defaultProps = {
+    className: '',
+    label: false
+  };
+
+  handleChange = (event: React.ChangeEvent<HTMLInputElement>, checked?: boolean, value?: any) => {
+    const { name, disabled, onChange, rules } = this.props.field;
+    const customError = (rules.includes('accepted') && !checked);
+    this.setState(() => ({
+      field: {
+        value,
+        name,
+        disabled,
+        checked,
+        error: customError
+      }
+    }));
+    onChange(event, checked, value);
+  }
+
+  render() {
+    const { label, className, checkboxClassName, labelClassName, labelContentClassName } = this.props;
+    const { name, value, checked, disabled, error } = this.state.field;
+    const customError = error || (this.props.field.error && !checked);
+
+    const _props = {
+      value,
+      checked,
+      name,
+      disabled,
+      label,
+      checkboxClassName,
+      labelClassName,
+      labelContentClassName,
+      onChange: this.handleChange,
+      error: customError
+    };
+
+    return (
+      <div className={classnames(styles.field, className)}>
+        <Checkbox {..._props} />
+      </div>
+    );
+  }
+}
+
+export default FormCheckbox;

package/compat/CookieModal/modals/PreviewCookieModal/PreviewCookieModal.styl

@@ -58,12 +58,16 @@
   +media-tablet-down()
     column-gap: 0
 
+// Cookie Layer ticket: all 3 buttons → height 50px; "Anpassen"/"zustimmen" → width 160px;
+// rounded corners/color/font size/font type brought in line with the CDP's shared .mbtn
+// (md3.css) — var(--md-r-full) (pill), var(--md-primary)/var(--md-on-primary), var(--md-font),
+// 14px on every breakpoint (was 11px !important on mobile, one-off vs. the CDP's constant size).
+// PreviewCookieModal is mounted inside App.tsx's root `.md3` div (see CookieModal in App.tsx),
+// so these --md-* custom properties resolve here exactly as they do on the CDP.
 .modalBtn
-  height: 38px
+  height: 50px
   text-transform: capitalize !important
   min-width: calc(50% - 18px) !important
-  +media-tablet-down()
-    font-size: 11px !important
 
 .necessaryCookiesBtn
   text-transform: none !important
@@ -73,54 +77,60 @@
   justify-content: center !important
   width: 184px !important
   min-width: 184px !important
-  height: 38px !important
-  background: #005CFF !important
+  height: 50px !important
+  background: var(--md-primary) !important
   box-shadow: 0px 4px 8px -4px rgba(76, 78, 100, 0.42) !important
-  border-radius: 16px !important
-  font-family: 'Arial', 'Arimo', sans-serif !important
+  border-radius: var(--md-r-full) !important
+  font-family: var(--md-font) !important
   font-weight: 500 !important
   font-size: 14px !important
   line-height: 24px !important
   letter-spacing: 0.4px !important
-  color: #FFFFFF !important
+  color: var(--md-on-primary) !important
 
 .anpassenBtn
   box-sizing: border-box !important
-  padding: 9.95px 39.39px 11.05px 40.11px !important
-  border: 1px solid #005CFF !important
+  // was a fixed asymmetric Figma-export padding (9.95/39.39/11.05/40.11px) tuned to the old
+  // 142.5x38 box — with flex centering already doing the alignment, that padding was vestigial
+  // and would fight the new 160x50 box (e.g. top+bottom padding alone exceeding line-height
+  // could clip/misalign the label). Flex align-items/justify-content center it correctly at
+  // any size, so a plain symmetric padding is enough.
+  padding: 0 16px !important
+  border: 1px solid var(--md-primary) !important
   box-shadow: none !important
-  border-radius: 16px !important
-  width: 142.5px !important
-  min-width: 142.5px !important
-  height: 38px !important
+  border-radius: var(--md-r-full) !important
+  width: 160px !important
+  min-width: 160px !important
+  height: 50px !important
   display: flex !important
   align-items: center !important
   justify-content: center !important
   text-align: center !important
-  font-family: 'Arial', 'Arimo', sans-serif !important
+  font-family: var(--md-font) !important
   font-style: normal !important
   font-weight: 400 !important
   font-size: 14px !important
   line-height: 16px !important
-  color: #005CFF !important
+  color: var(--md-primary) !important
 
 .zustimmenBtn
-  padding: 9.95px 36.87px 11.05px 35.63px !important
-  width: 142.5px !important
-  min-width: 142.5px !important
-  height: 38px !important
-  background: #005CFF !important
-  border-radius: 16px !important
+  box-sizing: border-box !important
+  padding: 0 16px !important
+  width: 160px !important
+  min-width: 160px !important
+  height: 50px !important
+  background: var(--md-primary) !important
+  border-radius: var(--md-r-full) !important
   display: flex !important
   align-items: center !important
   justify-content: center !important
   text-align: center !important
-  font-family: 'Arial', 'Arimo', sans-serif !important
+  font-family: var(--md-font) !important
   font-style: normal !important
   font-weight: 400 !important
   font-size: 14px !important
   line-height: 16px !important
-  color: #FFFFFF !important
+  color: var(--md-on-primary) !important
 
 .outlinedBtnLeft
   display: flex;

package/locales/en/autobahn.json

@@ -164,7 +164,7 @@
       "lastNamePlaceholder": "Last name*",
       "lastNameAria": "Last name",
       "countryLabel": "Country",
-      "areaCodeLabel": "Area code",
+      "areaCodeLabel": "Prefix",
       "phoneNumberLabel": "Phone number",
       "termsPrefix": "I agree to the auto.de",
       "termsLink": "terms of use",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@bytebrand/fe-ui-core-autobahn",
-  "version": "1.0.125",
+  "version": "1.0.126",
   "description": "auto.de md3 (Autobahn) design system — UI primitives, cards, chrome, VDP modules, theme CSS and locales. Ships raw TypeScript source (like fe-ui-core before it); each consumer's bundler compiles it.",
   "main": "index.ts",
   "license": "UNLICENSED",

package/theme/md3.css

@@ -665,7 +665,7 @@ line-height: 31px;
   align-items: center;
   gap: 10px;
   height: 48px;
-  padding: 0 14px;
+  padding: 0 12px;
   border-radius: var(--md-r-xs);
   background: transparent;
   box-shadow: inset 0 0 0 1px var(--md-outline-variant);
@@ -5686,8 +5686,15 @@ line-height: 31px;
 /* Kaufen tab (FinanceCalculator.tsx's own .fin-calc-card) — was an inline style={isCash ? {...} :
    undefined}; switched to a class modifier because React leaves a stale (but harmless-looking)
    style="" attribute on the node when that ternary flips to undefined on tab switch. */
+/* row-gap was 0px here (this rule used to be the only one — no breakpoint scoping), which on
+   desktop zeroed the gap between the price row and the (empty, isCash) .fin-cond row while
+   Financing/Leasing keep the base .fin-price-grid's 12px — the exact same cross-tab jump the
+   ≤-breakpoint rule further down this file (search "Bug: switching the Financing/Leasing/Buy
+   tabs") already diagnosed and fixed for mobile, just never mirrored up here for desktop. Same
+   fix, same reasoning: keep the row-gap constant across all 3 tabs so nothing below (rating
+   pill, CTA buttons) shifts when .fin-cond collapses to empty on Buy. */
 .md3 .fin-calc-card .fin-price-grid.fin-price-grid--cash {
-  gap: 0px 15px;
+  gap: 12px 15px;
 }
 .md3 .fin-rate-main {
   grid-area: rate;
@@ -5963,12 +5970,23 @@ line-height: 31px;
 .md3 .fin-cond {
   min-width: 0;
   font-size: 12.5px;
+  line-height: 15px;
+  /* renders empty on the Buy tab (isCash hides its "0 € Anzahlung · 60 Monate · ..." text —
+     see FinanceCalculator.tsx) — without a floor it collapsed to 0 height there instead of the
+     one text line Financing/Leasing occupy, part of the same cross-tab jump fix as the
+     .fin-price-grid--cash row-gap above (mirrors the already-working ≤-breakpoint fix). */
+  min-height: 15px;
   color: var(--md-on-surface-variant);
 }
 /* Rate-edit (Rate anpassen) sits between the rate and the CTA now */
 .md3 .fin-adjust {
   margin-top: 14px;
 }
+/* Kaufen ("Details anzeigen") only — no top margin, per explicit request. Financing/Leasing
+   ("Rate anpassen") keep the shared 14px above unchanged. */
+.md3 .fin-calc-card .fin-adjust.fin-adjust--cash {
+  margin-top: 0;
+}
 /* auto.de-ID in front of the Finanzierungs-/Leasingdetails link — one row, divider above */
 .md3 .fin-info {
   margin-top: 16px;
@@ -5998,6 +6016,18 @@ line-height: 31px;
   display: none;
   margin-top: 8px;
 }
+/* Request ("Angebot anfragen") vs Call ("Anrufen", inside .fin-call) — was mbtn--lg's 48px on
+   Request against plain .mbtn's 40px on Call (no size modifier there), a fixed mismatch present
+   on every tab alike (not something that changes on tab switch). Bumped both to the same 50px —
+   matches the mobile CTA row's own Request/Call sizing (already 50/50 there) and satisfies
+   "must be higher" for both. Scoped to just these 2 buttons — no other spacing/position in the
+   card changes. */
+.md3 .fin-calc-card .hide-mobile > .mbtn--lg.mbtn--block {
+  height: 50px;
+}
+.md3 .fin-calc-card .fin-call .mbtn {
+  height: 50px;
+}
 /* Laufzeit as selectable chips — 4-column grid, filled selected state */
 .md3 .term-chips {
   display: grid;
@@ -7135,6 +7165,12 @@ line-height: 31px;
     gap: 15px 44px;
     margin-top: 14px;
   }
+  /* owner count — mobile only, per request. Desktop keeps it (base .vdp-meta rule, untouched).
+     !important: still showed after the plain version — something later/more specific in this
+     file was winning the cascade for this span's display; forcing it rather than keep hunting. */
+  .md3 .vdp-meta-owner {
+    display: none !important;
+  }
   .md3 .vdp-meta > span + span::before {
     content: none;
   }
@@ -7200,10 +7236,9 @@ line-height: 31px;
   }
   /* compact dot-line = km/EZ/Getriebe/Kraftstoff · Karosserie (round 9: body type must be
      visible here — was previously invisible under nth-child(n+5), which also swallowed it).
-     Only "1. Hand" (item 5) stays hidden; item 6 (body type) now renders. */
-  .md3 .vdp-header-summary .vdp-meta > span:nth-child(5) {
-    display: none;
-  }
+     "1. Hand" stays hidden via .vdp-meta-owner (below, generic rule) — was nth-child(5) here,
+     which broke the moment Horsepower got inserted as a new 3rd item and shifted owner from
+     position 5 to 6 (silently hid Gearbox instead). A class survives future reordering. */
   /* highlights: the ≤980 Figma 2-col grid applies here too (no swipe-line since round 9) */
   /* condition row: 2×2 on phone */
   .md3 .zustand-grid {
@@ -9167,6 +9202,15 @@ color: #005CFF;
     grid-template-areas: "rate evalcol" "cond cond";
     align-items: start;
   }
+  /* Request/Call row jump (mobile) — per request: one fixed-height block for .fin-price-grid,
+     with .fin-cta-row (next sibling once .hide-mobile's desktop block collapses to 0 height
+     here) landing at the same fixed offset below it on every tab, instead of chasing each row's
+     own height individually (.fin-cond min-height / .fin-price-grid--cash gap below still help
+     fill this box, they're just no longer the thing .fin-cta-row's position depends on).
+     97px — measured value (devtools), confirmed. */
+  .md3 .fin-calc-card .fin-price-grid {
+    min-height: 97px;
+  }
   /* Bug: switching the Financing/Leasing/Buy tabs made the price row, rating pill and the two
      CTA buttons below jump up/down, because the row above them had a different rendered height
      per tab: (a) .fin-cond (the "0 € Anzahlung · 60 Monate · ..." terms line) renders NOTHING on
@@ -9175,10 +9219,10 @@ color: #005CFF;
      below cancel each of those, so Financing/Leasing/Buy all reserve the same total height.
      (A first pass also force-reserved height on .fin-rate-main itself, to additionally cover the
      rare case of an extra struck list-price line on Buy when the car has a discount — isCash &&
-     showStrike in FinanceCalculator.tsx. Dropped: since Financing/Leasing/undiscounted-Buy don't
-     need that extra room, it left a visible empty gap under the price on every normal tab just to
-     pre-cover one edge case. That specific combination can still shift by the strike line's own
-     height; every other tab switch is now jump-free without the dead space.) */
+     showStrike in FinanceCalculator.tsx. Dropped at the time: reserving it on every tab left a
+     visible empty gap under the price whenever that edge case wasn't in play. Revisited below,
+     right after the .fin-cond rule, with the actual fix instead: take the strike line out of
+     flow so it no longer needs a reservation on the OTHER tabs at all.) */
   .md3 .fin-calc-card .fin-price-grid.fin-price-grid--cash {
     /* same 12px row-gap as Financing/Leasing (the base .fin-price-grid rule) — the 0px gap on
        .fin-price-grid--cash further up this file otherwise pulls the CTA row 12px closer on Buy. */

package/vdp/FinanceCalculator.tsx

@@ -839,31 +839,35 @@ const FinanceCalculator: React.FunctionComponent<FinanceCalculatorProps> = ({
           <div className="fin-eval-bar-cell">{ratingLabel && <EvalBar tier={evalTier} />}</div>
         </div>
         {/* col 1 row 2: condition line — financing "0 € Anzahlung · 60 Monate · Finanzierungsdetails",
-            leasing "25.000 € Sonderzahlung · 60 Mon. · 10.000 km/Jahr · Details" */}
-        <div className="fin-cond">
-          {!isCash &&
-            condParts.map((part, i) => (
+            leasing "25.000 € Sonderzahlung · 60 Mon. · 10.000 km/Jahr · Details". Buy has nothing
+            to show here (no down payment/term/details link of its own) — not rendered at all
+            rather than left as an empty reserved-height div. */}
+        {!isCash && (
+          <div className="fin-cond">
+            {condParts.map((part, i) => (
               <React.Fragment key={i}>
                 {i > 0 && <span className="cc-terms-dot"> · </span>}
                 {part}
               </React.Fragment>
             ))}
-          {!isCash && onShowDetails && (
-            <>
-              <span className="cc-terms-dot"> · </span>
-              {/* plain underlined text link, same onShowDetails handler as .fin-info used to open. */}
-              <button type="button" className="cc-terms-link" onClick={onShowDetails}>
-                {mode === 'leasing' ? t('autobahn:card.price.detailsLink') : t('autobahn:finance.financingDetails')}
-              </button>
-            </>
-          )}
-        </div>
+            {onShowDetails && (
+              <>
+                <span className="cc-terms-dot"> · </span>
+                {/* plain underlined text link, same onShowDetails handler as .fin-info used to open. */}
+                <button type="button" className="cc-terms-link" onClick={onShowDetails}>
+                  {mode === 'leasing' ? t('autobahn:card.price.detailsLink') : t('autobahn:finance.financingDetails')}
+                </button>
+              </>
+            )}
+          </div>
+        )}
       </div>
 
       {/* ============================== DESKTOP (≥601px) — unchanged ============================== */}
       <div className="hide-mobile">
-        {/* RATE EDIT (Rate anpassen) — between the rate and the request CTA */}
-        <div className="fin-adjust">
+        {/* RATE EDIT (Rate anpassen) — between the rate and the request CTA. fin-adjust--cash:
+            Kaufen-only margin-top override (0, was the shared 14px) — see md3.css. */}
+        <div className={'fin-adjust' + (isCash ? ' fin-adjust--cash' : '')}>
           <button onClick={() => setAdjust((a) => !a)} style={expanderBtnStyle}>
             <span style={{ display: 'inline-flex', alignItems: 'center', gap: 7 }}>
               <Icon name={isCash ? 'list' : 'sliders-horizontal'} size={16} color="var(--md-primary)" />

package/vdp/VdpModules.tsx

@@ -59,6 +59,17 @@ function stripParen(s: string): string {
   return s.replace(/\s*\(.*\)/, '');
 }
 
+/**
+ * Opposite of stripParen, for vehicle.power specifically: pull the PS value OUT of the trailing
+ * parenthetical instead of discarding it, e.g. '145 kW (197 PS)' → '197 PS' — the fact line
+ * wants PS (Horsepower), not kW. Same helper as cards/cardParts.tsx's own extractPS (that file
+ * doesn't export it, so it's duplicated here rather than reaching across packages for one line).
+ */
+function extractPS(s: string): string {
+  const m = s.match(/\((\d+\s*PS)\)\s*$/i);
+  return m ? m[1].replace(/\s+/, ' ') : stripParen(s);
+}
+
 // ---------------------------------------------------------------------------
 // Header card — title, fact line, highlight chips, condition tiles
 // ---------------------------------------------------------------------------
@@ -73,11 +84,14 @@ export interface VdpHeaderCardProps {
  *  identity block. Split out so the mobile-only layout can show this BEFORE the finance
  *  card (see VdpTrustRow) while the highlights/condition tiles move after it. */
 export const VdpHeaderSummary: React.FunctionComponent<VdpHeaderCardProps> = ({ vehicle, t }) => {
+  // Order: Mileage, First Registration, Horsepower, Fuel Type, Gearbox, then owners last
+  // (unchanged position) — per request, desktop + mobile both use this order.
   const factLine: ReadonlyArray<readonly [string, string]> = [
     ['gauge', fmtKm(vehicle.km)],
     ['calendar', vehicle.reg],
-    ['cog', vehicle.gear],
+    ['zap', extractPS(vehicle.power)],
     ['fuel', stripParen(vehicle.fuel)],
+    ['cog', vehicle.gear],
     ['user', t('autobahn:header.owners', { owners: vehicle.owners, count: vehicle.owners })],
   ];
   return (
@@ -108,7 +122,8 @@ export const VdpHeaderSummary: React.FunctionComponent<VdpHeaderCardProps> = ({
       {/* fact line — plain text with dot separators, not pills */}
       <div className="vdp-meta">
         {factLine.map(([ic, v]) => (
-          <span key={ic}>
+          // vdp-meta-owner: hidden on mobile only (md3.css, ≤600px) — desktop keeps it.
+          <span key={ic} className={ic === 'user' ? 'vdp-meta-owner' : undefined}>
             <Icon name={ic} size={16} color="var(--md-on-surface-variant)" stroke={1.8} />
             {v}
           </span>
@@ -3790,7 +3805,10 @@ export const VdpEnquiry: React.FunctionComponent<VdpEnquiryProps> = ({
   const [areaCode, setAreaCode] = useState('');
   const [phoneNum, setPhoneNum] = useState('');
   const [consent, setConsent] = useState(false);
-  const [pref, setPref] = useState<'email' | 'phone'>('email');
+  // "Telefon" selected by default (per request) — both channels stay fully selectable via the
+  // chips below; `valid`/asterisk logic already branches on `pref` reactively, so this default
+  // is the only change needed to make Telefon the pre-selected (not exclusive) channel.
+  const [pref, setPref] = useState<'email' | 'phone'>('phone');
   const [message, setMessage] = useState(
     autoDeId
       ? t('autobahn:enquiry.prefilledMessageWithId', { carTitle, autoDeId })
@@ -3889,14 +3907,8 @@ export const VdpEnquiry: React.FunctionComponent<VdpEnquiryProps> = ({
               {t('autobahn:enquiry.contactMethod.heading')}
             </div>
             <div className="enquiry-contact-buttons" style={{ display: 'flex', gap: 8 }}>
-              <button
-                type="button"
-                className={'chip' + (pref === 'email' ? ' chip--filter chip--selected' : '')}
-                onClick={() => setPref('email')}
-              >
-                <Icon name="mail" size={15} />
-                {t('autobahn:enquiry.contactMethod.email')}
-              </button>
+              {/* Telefon left, E-Mail right (per request) — both stay fully selectable, only
+                  the order + the default `pref` above changed. */}
               <button
                 type="button"
                 className={'chip' + (pref === 'phone' ? ' chip--filter chip--selected' : '')}
@@ -3905,6 +3917,14 @@ export const VdpEnquiry: React.FunctionComponent<VdpEnquiryProps> = ({
                 <Icon name="phone" size={15} />
                 {t('autobahn:enquiry.contactMethod.phone')}
               </button>
+              <button
+                type="button"
+                className={'chip' + (pref === 'email' ? ' chip--filter chip--selected' : '')}
+                onClick={() => setPref('email')}
+              >
+                <Icon name="mail" size={15} />
+                {t('autobahn:enquiry.contactMethod.email')}
+              </button>
             </div>
           </div>
           {/* Vorname* / Nachname* — two required fields SIDE BY SIDE (Figma round 9; fixed
@@ -3951,7 +3971,11 @@ export const VdpEnquiry: React.FunctionComponent<VdpEnquiryProps> = ({
             <FloatField label={t('autobahn:enquiry.form.areaCodeLabel')}>
               <input
                 type="tel"
-                placeholder="1638"
+                // was a hardcoded fake number ("1638"), then the areaCodeLabel text — per
+                // request, empty: the FloatField label above already reads "Prefix"/"Vorwahl",
+                // no placeholder needed on top of it. Real prefill only ever comes from
+                // `areaCode` state itself (authenticated profile / prior form input).
+                placeholder=""
                 maxLength={5}
                 value={areaCode}
                 onChange={(e) => setAreaCode(e.target.value)}
@@ -3961,7 +3985,8 @@ export const VdpEnquiry: React.FunctionComponent<VdpEnquiryProps> = ({
             <FloatField label={t('autobahn:enquiry.form.phoneNumberLabel')}>
               <input
                 type="tel"
-                placeholder="5857458"
+                // was a hardcoded fake number ("5857458") — see areaCode above, empty now too.
+                placeholder=""
                 maxLength={13}
                 value={phoneNum}
                 onChange={(e) => setPhoneNum(e.target.value)}