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

package/theme/md3.css

@@ -1,2034 +1,2045 @@
-/* ==========================================================================
-   AUTOBAHN — scoped port of docs/redesign/design-source/ui_kits/website/md3.css
-   --------------------------------------------------------------------------
-   Every selector is nested under `.md3` (the design's `:root` token block is
-   emitted as `.md3 {...}`) so the utility classes (.mbtn/.mcard/.mfield/.chip/
-   .statchip/.segmented/.num/.md-x ...) and CSS vars (--md-/--autode- prefixes)
-   only apply inside a `.md3` subtree and cannot bleed into existing fe-main styles.
-   The responsive layers (1024/980/900/820/600px) are preserved. The Google-
-   Fonts @import was removed here and centralised in ./autobahn.css.
-   Loaded globally via source/App.global.styl -> ./autobahn.css.
-   ADDITIVE ONLY — do not retheme legacy components.
-   ==========================================================================
-
-   auto.de — DESIGN SYSTEM  ·  "Autobahn"
-   A custom, brand-led system on MD3 bones (tokens, spacing, elevation,
-   responsive discipline) with a distinct auto.de identity:
-     · auto.de Blau primary  · Signal-Cyan accent (from the logo swoosh)
-     · Schibsted Grotesk (display) + Hanken Grotesk (text)
-     · deal-green for price/savings  · defined motion
-   This file is the single source of truth the UI kit is built from.
-   ========================================================================== */
-
-.md3 {
-  /* ---- Brand ---- */
-  --autode-blau:           #0B53CC;   /* auto.de Blau — primary, used with intent */
-  --autode-blau-strong:    #0A47AE;   /* hover / pressed */
-  --autode-cyan:           #16B8E8;   /* Signal-Cyan accent (logo swoosh) */
-  --autode-swoosh:         linear-gradient(90deg,#0B53CC 0%,#1E7BDA 55%,#16B8E8 100%); /* @kind color */
-
-  /* ---- MD3 tonal roles (mapped to the brand) ---- */
-  --md-primary:            var(--autode-blau);
-  --md-on-primary:         #FFFFFF;
-  --md-primary-container:  #DBE4FF;
-  --md-on-primary-container:#001A45;
-
-  /* accent (cyan) roles — highlights, focus, on-dark links */
-  --md-accent:             var(--autode-cyan);
-  --md-accent-container:   #C6EEFB;
-  --md-on-accent-container:#04323F;
-
-  --md-secondary-container:#E7E9F1;
-  --md-on-secondary-container:#3A4150;
-
-  /* price-rating + deal accent (green) */
-  --md-good:               #0F7B43;
-  --md-good-container:     #C8EFCF;
-  --md-on-good-container:  #04391F;
-  --md-warn-container:     #FCE3B4;
-  --md-on-warn-container:  #4A3204;
-  --md-error:              #BA1A1A;
-
-  /* surfaces (neutral, a hair cooler to sit under the blue) */
-  --md-surface:            #FBFBFE;
-  --md-surface-dim:        #DAD9E0;
-  --md-surface-bright:     #FBFBFE;
-  --md-sc-lowest:          #FFFFFF;
-  --md-sc-low:             #F4F5FA;
-  --md-sc:                 #EEEFF5;
-  --md-sc-high:            #E8E9F1;
-  --md-sc-highest:         #E2E3EC;
-
-  --md-on-surface:         #1A1B22;
-  --md-on-surface-variant: #44464F;
-  --md-outline:            #74767F;
-  --md-outline-variant:    #C5C6D2;
-
-  --md-inverse-surface:    #2E2F36;
-  --md-inverse-on-surface: #F1F0F6;
-
-  /* elevation (soft, tonal) */
-  --md-e1: 0 1px 2px rgba(16,22,42,.10), 0 1px 3px rgba(16,22,42,.06);
-  --md-e2: 0 2px 6px rgba(16,22,42,.10), 0 1px 2px rgba(16,22,42,.10);
-  --md-e3: 0 8px 20px rgba(16,22,42,.12), 0 2px 6px rgba(16,22,42,.08);
-
-  /* shape */
-  --md-r-xs: 8px;
-  --md-r-sm: 12px;
-  --md-r-md: 16px;
-  --md-r-lg: 24px;
-  --md-r-xl: 28px;
-  --md-r-full: 999px;
-
-  /* type */
-  --md-font:         'Hanken Grotesk', system-ui, sans-serif;
-  --md-font-display: 'Schibsted Grotesk', 'Hanken Grotesk', system-ui, sans-serif;
-  --md-font-hero:    var(--md-font-display); /* hero uses the system display face, weight 800 */
-
-  /* motion */
-  --ease-standard:   cubic-bezier(.2,0,0,1); /* @kind other */
-  --ease-emphasized: cubic-bezier(.3,0,0,1); /* @kind other */
-  --dur-1: 120ms; /* @kind other */
-  --dur-2: 200ms; /* @kind other */
-  --dur-3: 320ms; /* @kind other */
-}
-
-/* ---------- base ---------- */
-.md3 { font-family: var(--md-font); color: var(--md-on-surface); background: var(--md-surface);
-  -webkit-font-smoothing: antialiased; }
-.md3 *, .md3 *::before, .md3 *::after { box-sizing: border-box; }
-.md3 ::selection { background: var(--md-primary-container); }
-
-/* type scale — display family for headlines, text family for UI */
-.md3 .md-display   { font-family: var(--md-font-display); font-size: 46px; font-weight: 700; line-height: 1.04; letter-spacing: -1px; }
-.md3 .md-headline  { font-family: var(--md-font-display); font-size: 29px; font-weight: 700; line-height: 1.14; letter-spacing: -.4px; }
-.md3 .md-headline-sm{ font-family: var(--md-font-display); font-size: 22px; font-weight: 600; line-height: 1.2; letter-spacing: -.2px; }
-.md3 .md-title     { font-size: 17px; font-weight: 600; line-height: 1.3; }
-.md3 .md-title-sm  { font-size: 14px; font-weight: 600; line-height: 1.35; letter-spacing: .1px; }
-.md3 .md-body      { font-size: 14px; font-weight: 400; line-height: 1.5; color: var(--md-on-surface-variant); }
-.md3 .md-body-sm   { font-size: 12.5px; font-weight: 400; line-height: 1.45; color: var(--md-on-surface-variant); }
-.md3 .md-label     { font-size: 13px; font-weight: 500; letter-spacing: .1px; }
-.md3 .md-label-sm  { font-size: 11px; font-weight: 600; letter-spacing: .4px; color: var(--md-on-surface-variant); }
-/* tabular figures for prices & specs */
-.md3 .num { font-family: var(--md-font-display); font-variant-numeric: tabular-nums; font-feature-settings: "tnum" 1; }
-
-/* ---------- buttons (pill) ---------- */
-.md3 .mbtn { font-family: var(--md-font); font-size: 14px; font-weight: 600; letter-spacing: .1px;
-  height: 40px; padding: 0 24px; border-radius: var(--md-r-full); border: 0; cursor: pointer;
-  display: inline-flex; align-items: center; justify-content: center; gap: 8px; white-space: nowrap;
-  transition: box-shadow var(--dur-1) var(--ease-standard), background var(--dur-1) var(--ease-standard),
-    color var(--dur-1) var(--ease-standard), transform var(--dur-1) var(--ease-standard); }
-.md3 .mbtn:active { transform: translateY(1px); }
-.md3 .mbtn .lucide { width: 18px; height: 18px; }
-.md3 .mbtn--filled { background: var(--md-primary); color: var(--md-on-primary); }
-.md3 .mbtn--filled:hover { box-shadow: var(--md-e2); background: var(--autode-blau-strong); }
-.md3 .mbtn--tonal { background: var(--md-primary-container); color: var(--md-on-primary-container); }
-.md3 .mbtn--tonal:hover { box-shadow: var(--md-e1); }
-.md3 .mbtn--outlined { background: transparent; color: var(--md-primary); box-shadow: inset 0 0 0 1px var(--md-outline-variant); }
-.md3 .mbtn--outlined:hover { background: rgba(11,83,204,.06); }
-.md3 .mbtn--text { background: transparent; color: var(--md-primary); padding: 0 12px; }
-.md3 .mbtn--text:hover { background: rgba(11,83,204,.06); }
-.md3 .mbtn--sm { height: 34px; padding: 0 16px; font-size: 13px; }
-.md3 .mbtn--lg { height: 48px; padding: 0 30px; font-size: 15px; }
-.md3 .mbtn--block { width: 100%; }
-
-/* icon button */
-.md3 .icon-btn { width: 40px; height: 40px; border-radius: var(--md-r-full); border: 0; cursor: pointer;
-  background: transparent; color: var(--md-on-surface-variant); display: inline-flex; align-items: center;
-  justify-content: center; transition: background .15s; }
-.md3 .icon-btn:hover { background: var(--md-sc-high); }
-.md3 .icon-btn--filled { background: rgba(255,255,255,.9); box-shadow: var(--md-e1); color: var(--md-on-surface); }
-.md3 .icon-btn .lucide { width: 20px; height: 20px; }
-
-/* ---------- chips (MD3 assist / filter) ---------- */
-.md3 .chip { height: 38px; padding: 0 16px; border-radius: 10px; cursor: pointer;
-  display: inline-flex; align-items: center; gap: 7px; font-size: 14px; font-weight: 500; line-height: 1;
-  background: var(--md-surface); color: var(--md-on-surface-variant);
-  border: 1px solid var(--md-outline-variant); box-shadow: none;
-  transition: background .15s, border-color .15s, color .15s; white-space: nowrap; }
-.md3 .chip .lucide { width: 16px; height: 16px; color: var(--md-primary); }
-.md3 .chip:hover { background: var(--md-sc); border-color: var(--md-outline); }
-.md3 .chip--selected { background: var(--md-secondary-container); color: var(--md-on-secondary-container); border-color: transparent; }
-.md3 .chip--selected .lucide { color: currentColor; }
-.md3 .chip--filter.chip--selected { background: var(--md-primary-container); color: var(--md-on-primary-container); border-color: transparent; }
-/* list-card equipment tags: compact, non-interactive info chips (design CarCard.jsx — h24/11.5px),
-   NOT the 38px tappable filter-chip the base .chip is. */
-.md3 .listcard-chips .chip { height: 24px; padding: 0 10px; font-size: 11.5px; border-radius: 8px; cursor: default; }
-.md3 .listcard-chips .chip:hover { background: var(--md-surface); border-color: var(--md-outline-variant); }
-
-/* status / rating chip (no CTA) */
-.md3 .statchip { display: inline-flex; align-items: center; gap: 5px; height: 24px; padding: 0 10px;
-  border-radius: var(--md-r-xs); font-size: 12px; font-weight: 600; }
-.md3 .statchip--good { background: var(--md-good-container); color: var(--md-on-good-container); }
-.md3 .statchip--warn { background: var(--md-warn-container); color: var(--md-on-warn-container); }
-.md3 .statchip .lucide { width: 14px; height: 14px; }
-
-/* small image label (views, photo count) */
-.md3 .imglabel { display: inline-flex; align-items: center; gap: 5px; height: 26px; padding: 0 10px;
-  border-radius: var(--md-r-full); background: rgba(0,0,0,.55); color: #fff; font-size: 12px; font-weight: 500; backdrop-filter: blur(2px); }
-.md3 .imglabel .lucide { width: 14px; height: 14px; }
-
-/* ---------- cards ---------- */
-.md3 .mcard { background: var(--md-sc-lowest); border-radius: var(--md-r-md); border: 1px solid var(--md-outline-variant);
-  overflow: hidden; transition: box-shadow var(--dur-2) var(--ease-standard), border-color var(--dur-2) var(--ease-standard), transform var(--dur-2) var(--ease-standard); }
-.md3 .mcard--elevated { border: 0; box-shadow: var(--md-e1); }
-.md3 .mcard--interactive { cursor: pointer; }
-.md3 .mcard--interactive:hover { box-shadow: var(--md-e3); border-color: transparent; transform: translateY(-3px); }
-.md3 .mcard--filled { background: var(--md-sc-low); border: 0; }
-
-/* ---------- search bar ---------- */
-.md3 .msearch { display: flex; align-items: center; gap: 12px; height: 56px; padding: 0 18px;
-  border-radius: var(--md-r-full); background: var(--md-sc-high); color: var(--md-on-surface); }
-.md3 .msearch input { border: 0; outline: 0; background: transparent; flex: 1; font: 400 16px var(--md-font); color: inherit; min-width: 0; }
-.md3 .msearch .lucide { width: 22px; height: 22px; color: var(--md-on-surface-variant); flex: none; }
-
-/* ---------- text field (outlined, MD3) ---------- */
-.md3 .mfield { position: relative; display: flex; align-items: center; gap: 10px; height: 48px; padding: 0 14px;
-  border-radius: var(--md-r-xs); background: transparent; box-shadow: inset 0 0 0 1px var(--md-outline-variant);
-  font-size: 14px; color: var(--md-on-surface); transition: box-shadow .15s; }
-.md3 .mfield:focus-within { box-shadow: inset 0 0 0 2px var(--md-accent); }
-.md3 .mfield select, .md3 .mfield input { border: 0; outline: 0; background: transparent; flex: 1; font: inherit; color: inherit; min-width: 0; text-overflow: ellipsis; }
-.md3 .mfield select { -webkit-appearance: none; appearance: none; cursor: pointer; }
-.md3 .mfield .lucide { width: 20px; height: 20px; color: var(--md-on-surface-variant); flex: none; }
-.md3 .mfield .lucide:last-child { margin-left: auto; }
-/* compact field — dense Detailsuche range/value inputs (von/bis, monthly rate). */
-.md3 .mfield--sm { height: 44px; padding: 0 12px; gap: 8px; font-size: 14px; }
-.md3 .mfield--sm input { font-variant-numeric: tabular-nums; }
-/* von/bis range pair (Detailsuche, no slider). */
-.md3 .ds-range { display: flex; align-items: center; gap: 10px; }
-.md3 .ds-range-dash { flex: none; color: var(--md-on-surface-variant); }
-
-/* labelled form field (FormField — label + outlined input + error). */
-.md3 .mfield-group { display: flex; flex-direction: column; gap: 6px; }
-.md3 .mfield-label { color: var(--md-on-surface-variant); font-weight: 600; }
-.md3 .mfield--error { box-shadow: inset 0 0 0 2px var(--md-error); }
-.md3 .mfield-eye { display: flex; align-items: center; justify-content: center; border: 0; background: none;
-  cursor: pointer; color: var(--md-on-surface-variant); padding: 0 2px; flex: none; }
-.md3 .mfield-error-text { color: var(--md-error); font-size: 12px; line-height: 1.35; }
-
-/* ---------- Auth (Anmelden / Registrierung / Passwort) ---------- */
-.md3 .auth-main { padding: 36px 24px 80px; }
-.md3 .auth-card { max-width: 940px; margin: 0 auto; display: grid; grid-template-columns: 1fr;
-  background: var(--md-sc-lowest, #fff); border: 1px solid var(--md-outline-variant);
-  border-radius: var(--md-r-lg, 20px); overflow: hidden; box-shadow: var(--md-e1, 0 2px 10px rgba(0,0,0,.06)); }
-.md3 .auth-card--split { grid-template-columns: 1.08fr .92fr; }
-.md3 .auth-formside { padding: 34px 38px; min-width: 0; }
-.md3 .auth-aside { padding: 38px; background: var(--md-primary); color: #fff; display: flex;
-  flex-direction: column; justify-content: center; }
-.md3 .auth-aside h4 { font: 700 21px var(--md-font-display, var(--md-font)); margin: 0 0 20px; }
-.md3 .auth-aside ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 15px; }
-.md3 .auth-aside li { display: flex; gap: 12px; align-items: flex-start; font-size: 15px; line-height: 1.4; }
-.md3 .auth-aside li svg { flex: none; margin-top: 1px; opacity: .95; }
-.md3 .auth-tabs { display: flex; gap: 6px; margin-bottom: 24px; border-bottom: 1px solid var(--md-outline-variant); }
-.md3 .auth-tab { padding: 10px 14px; font: 600 15px var(--md-font); color: var(--md-on-surface-variant);
-  text-decoration: none; border-bottom: 2px solid transparent; margin-bottom: -1px; }
-.md3 .auth-tab:hover { color: var(--md-on-surface); }
-.md3 .auth-tab.is-active { color: var(--md-primary); border-bottom-color: var(--md-primary); }
-.md3 .auth-sub { color: var(--md-on-surface-variant); font-size: 14px; line-height: 1.5; margin: 0 0 4px; }
-.md3 .auth-form { display: flex; flex-direction: column; gap: 18px; }
-.md3 .auth-error { background: var(--md-error-container, #fdeceb); color: var(--md-error);
-  border-radius: var(--md-r-sm, 12px); padding: 10px 14px; font-size: 14px; }
-.md3 .auth-row-between { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; }
-.md3 .auth-link { color: var(--md-primary); font-weight: 600; text-decoration: none; font-size: 14px; cursor: pointer; }
-.md3 .auth-link:hover { text-decoration: underline; }
-.md3 .auth-foot { margin-top: 22px; font-size: 14px; color: var(--md-on-surface-variant); line-height: 1.5; }
-.md3 .auth-check { display: flex; gap: 10px; align-items: flex-start; font-size: 13px; line-height: 1.5; color: var(--md-on-surface); cursor: pointer; }
-.md3 .auth-check input { margin-top: 2px; accent-color: var(--md-primary); width: 18px; height: 18px; flex: none; }
-.md3 .auth-loading { display: flex; justify-content: center; align-items: center; min-height: 200px; }
-.md3 .auth-spinner { width: 32px; height: 32px; border-radius: 50%; border: 3px solid var(--md-outline-variant);
-  border-top-color: var(--md-primary); animation: auth-spin .8s linear infinite; }
-@keyframes auth-spin { to { transform: rotate(360deg); } }
-@media (max-width: 860px) {
-  .md3 .auth-card--split { grid-template-columns: 1fr; }
-  .md3 .auth-aside { display: none; }
-  .md3 .auth-formside { padding: 26px 22px; }
-}
-
-/* ---------- Checkout (md3 chrome — header · stepper · next button) ---------- */
-.md3 .co-page { background: var(--md-sc, #f4f5f7); min-height: 100vh; }
-.md3 .co-header { background: var(--md-sc-lowest, #fff); border-bottom: 1px solid var(--md-outline-variant);
-  position: sticky; top: 0; z-index: 30; }
-.md3 .co-header-row { display: flex; align-items: center; gap: 16px; padding: 12px 24px; min-height: 64px; }
-.md3 .co-back { display: flex; align-items: center; justify-content: center; width: 40px; height: 40px; flex: none;
-  border: 0; border-radius: 50%; background: none; cursor: pointer; color: var(--md-on-surface); }
-.md3 .co-back:hover { background: var(--md-sc); }
-.md3 .co-logo { display: flex; align-items: center; text-decoration: none; }
-.md3 .co-logo img { height: 36px; display: block; }
-.md3 .co-header-car { display: flex; align-items: center; gap: 16px; margin-left: auto; }
-.md3 .co-header-price { display: flex; flex-direction: column; align-items: flex-end; line-height: 1.1; }
-.md3 .co-price-amount { font: 700 20px var(--md-font); color: var(--md-on-surface); white-space: nowrap; }
-.md3 .co-price-unit { font-size: 13px; font-weight: 600; color: var(--md-on-surface-variant); }
-.md3 .co-price-vat { font-size: 11px; color: var(--md-on-surface-variant); }
-.md3 .co-header-info { display: flex; flex-direction: column; text-align: right; line-height: 1.2; }
-.md3 .co-car-model { font-weight: 600; font-size: 14px; color: var(--md-on-surface); }
-.md3 .co-car-sub { font-size: 12px; color: var(--md-on-surface-variant); }
-.md3 .co-car-img { width: 64px; height: 44px; object-fit: contain; border-radius: var(--md-r-sm, 10px); }
-/* stepper */
-.md3 .co-stepper { display: flex; align-items: center; gap: 0; max-width: 880px; margin: 28px auto 4px;
-  padding: 0 24px; overflow-x: auto; }
-.md3 .co-step { display: flex; align-items: center; gap: 10px; flex: 1; min-width: 0; color: var(--md-on-surface-variant); }
-.md3 .co-step-dot { display: flex; align-items: center; justify-content: center; width: 30px; height: 30px; flex: none;
-  border-radius: 50%; border: 2px solid var(--md-outline-variant); font: 700 13px var(--md-font);
-  background: var(--md-sc-lowest, #fff); }
-.md3 .co-step-label { font-size: 13px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
-.md3 .co-step-bar { flex: 1; height: 2px; min-width: 16px; background: var(--md-outline-variant); margin: 0 10px; }
-.md3 .co-step.is-active { color: var(--md-primary); }
-.md3 .co-step.is-active .co-step-dot { border-color: var(--md-primary); color: var(--md-primary); }
-.md3 .co-step.is-done { color: var(--md-on-surface); }
-.md3 .co-step.is-done .co-step-dot { border-color: var(--md-primary); background: var(--md-primary); color: #fff; }
-.md3 .co-step.is-done .co-step-bar { background: var(--md-primary); }
-/* vertical left rail (desktop) — mirrors the legacy fixed 376px stepper, md3 skin.
-   Each step: number/check dot · title · "x min" · chevron; active = primary-container
-   pill rounded on the right; done = filled primary dot. */
-.md3 .co-rail { position: fixed; top: 65px; bottom: 0; left: 0; width: 376px; box-sizing: border-box;
-  background: var(--md-sc-lowest, #fff); box-shadow: 2px 0 8px rgba(0,0,0,.08); z-index: 2;
-  padding: 28px 16px 28px 0; display: flex; flex-direction: column; gap: 4px; overflow-y: auto; }
-.md3 .co-rail-step { display: flex; align-items: center; gap: 16px; width: 100%; border: 0; background: none;
-  cursor: pointer; text-align: left; padding: 14px 18px 14px 28px; border-radius: 0 999px 999px 0;
-  color: var(--md-on-surface-variant); }
-.md3 .co-rail-step:hover:not(:disabled) { background: var(--md-sc); }
-.md3 .co-rail-step:disabled { cursor: default; }
-.md3 .co-rail-dot { position: relative; display: flex; align-items: center; justify-content: center; width: 44px; height: 44px;
-  flex: none; border-radius: 50%; border: 2px solid var(--md-outline-variant); font: 700 17px var(--md-font);
-  background: var(--md-sc-lowest, #fff); color: var(--md-on-surface-variant); }
-/* connector line so the step sequence reads as a progression (like the legacy stepper).
-   Drawn downward from each dot to the next; turns primary once the step is done. */
-.md3 .co-rail-step:not(:last-child) .co-rail-dot::after { content: ''; position: absolute; top: calc(100% + 2px);
-  left: 50%; transform: translateX(-50%); width: 2px; height: 30px; background: var(--md-outline-variant); }
-.md3 .co-rail-step.is-done .co-rail-dot::after { background: var(--md-primary); }
-.md3 .co-rail-body { display: flex; flex-direction: column; min-width: 0; }
-.md3 .co-rail-label { font: 700 18px var(--md-font); color: var(--md-on-surface); }
-.md3 .co-rail-min { font-size: 13px; color: var(--md-on-surface-variant); margin-top: 2px; }
-.md3 .co-rail-chev { margin-left: auto; color: var(--md-on-surface-variant); flex: none; }
-.md3 .co-rail-step.is-active { background: var(--md-primary-container); }
-.md3 .co-rail-step.is-active .co-rail-dot { border-color: var(--md-primary); color: var(--md-primary); }
-.md3 .co-rail-step.is-active .co-rail-label { color: var(--md-primary); }
-.md3 .co-rail-step.is-done .co-rail-dot { border-color: var(--md-primary); background: var(--md-primary); color: #fff; }
-/* brand row at the rail top (wide desktop, where the top header is hidden) */
-.md3 .co-rail-brand { display: flex; align-items: center; gap: 10px; padding: 0 18px 22px 16px; }
-@media (max-width: 1279px) { .md3 .co-rail-brand { display: none; } }
-/* completed steps read as "done" in green (active stays primary) */
-.md3 .co-rail-step.is-done .co-rail-dot { border-color: var(--md-good); background: var(--md-good); }
-.md3 .co-rail-step.is-done .co-rail-dot::after { background: var(--md-good); }
-/* summary aside (right rail, desktop ≥1280) — single car + offer + price + trust panel */
-.md3 .co-aside { position: fixed; top: 65px; bottom: 0; right: 0; width: 348px; box-sizing: border-box;
-  padding: 40px 24px; overflow-y: auto; z-index: 1; }
-.md3 .co-aside-card { background: var(--md-sc-lowest, #fff); border: 1px solid var(--md-outline-variant);
-  border-radius: var(--md-r-lg, 18px); padding: 18px; box-shadow: var(--md-e1); position: sticky; top: 0; }
-.md3 .co-aside-img { display: block; width: 100%; aspect-ratio: 16 / 10; height: auto; object-fit: cover;
-  border-radius: var(--md-r-md, 12px); background: var(--md-sc); margin-bottom: 16px; }
-.md3 .co-aside-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; }
-.md3 .co-aside-title { min-width: 0; }
-.md3 .co-aside-name { font: 700 17px var(--md-font); color: var(--md-on-surface); line-height: 1.25; }
-.md3 .co-aside-sub { font-size: 12.5px; color: var(--md-on-surface-variant); margin-top: 3px; line-height: 1.35; }
-.md3 .co-aside-offer { flex: none; padding: 4px 10px; border-radius: 999px;
-  background: var(--md-primary-container); color: var(--md-primary); font-size: 11.5px; font-weight: 700; white-space: nowrap; }
-.md3 .co-aside-price { margin-top: 16px; padding-top: 16px; border-top: 1px solid var(--md-outline-variant); }
-.md3 .co-aside-plabel { display: block; font-size: 12px; color: var(--md-on-surface-variant); margin-bottom: 2px; }
-.md3 .co-aside-prow { display: flex; align-items: baseline; gap: 4px; }
-.md3 .co-aside-amount { font: 800 26px var(--md-font); color: var(--md-primary); }
-.md3 .co-aside-unit { font-size: 14px; font-weight: 600; color: var(--md-on-surface-variant); }
-.md3 .co-aside-vat { display: block; font-size: 11.5px; color: var(--md-on-surface-variant); margin-top: 4px; }
-.md3 .co-trust { list-style: none; margin: 16px 0 0; padding: 16px 0 0; border-top: 1px solid var(--md-outline-variant);
-  display: flex; flex-direction: column; gap: 11px; }
-.md3 .co-trust li { display: flex; align-items: center; gap: 9px; font-size: 12.5px; color: var(--md-on-surface); }
-.md3 .co-trust svg { color: var(--md-good); flex: none; }
-@media (max-width: 1279px) { .md3 .co-aside { display: none; } }
-/* wide desktop (≥1280): car lives in the aside and brand/back move into the rail, so the
-   top header is dropped entirely and the rail + aside run from the very top. */
-@media (min-width: 1280px) {
-  .md3 .co-header { display: none; }
-  .md3 .co-rail { top: 0; }
-  .md3 .co-aside { top: 0; }
-}
-/* card-title leading icon */
-.md3 .co-card-title { display: flex; align-items: center; gap: 8px; }
-.md3 .co-card-ic { color: var(--md-primary); flex: none; }
-/* valid field — green ring (matches the --error ring treatment) + trailing green check.
-   .mfield draws its outline via inset box-shadow, not a CSS border, so colour the ring. */
-.md3 .mfield--valid { box-shadow: inset 0 0 0 1.5px var(--md-good); }
-.md3 .mfield-ok { display: flex; align-items: center; flex: none; }
-.md3 .mfield-ok .lucide { color: var(--md-good); }
-/* md3 checkout finance panel (Zahlungsdetails) — replaces the legacy OfferBlock */
-.md3 .cf-panel { display: flex; flex-direction: column; gap: 20px; }
-.md3 .cf-rate { display: flex; flex-direction: column; gap: 2px; }
-.md3 .cf-rate-label { font-size: 13px; color: var(--md-on-surface-variant); }
-.md3 .cf-rate-row { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; }
-.md3 .cf-rate-amount { font: 800 30px var(--md-font); color: var(--md-primary); }
-.md3 .cf-rate-amount small { font-size: 14px; font-weight: 600; color: var(--md-on-surface-variant); }
-.md3 .cf-rate-old { font-size: 13px; color: var(--md-on-surface-variant); text-decoration: line-through; }
-.md3 .cf-slider { display: flex; flex-direction: column; gap: 8px; }
-.md3 .cf-slider-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
-.md3 .cf-slider-val { font-weight: 700; color: var(--md-on-surface); }
-.md3 .cf-period { display: flex; flex-direction: column; gap: 10px; }
-.md3 .cf-opts { display: flex; flex-direction: column; gap: 12px; }
-.md3 .cf-check { display: flex; align-items: center; gap: 10px; font-size: 14px; color: var(--md-on-surface); cursor: pointer; }
-.md3 .cf-check input { width: 20px; height: 20px; accent-color: var(--md-primary); cursor: pointer; flex: none; }
-.md3 .cf-check-cost { margin-left: auto; font-weight: 700; color: var(--md-on-surface); white-space: nowrap; }
-.md3 .cf-details { display: inline-flex; align-items: center; gap: 6px; align-self: flex-start; background: none; border: 0;
-  padding: 0; cursor: pointer; color: var(--md-primary); font: inherit; font-size: 13px; font-weight: 600; }
-.md3 .cf-details-ic { color: var(--md-primary); }
-/* content + next button */
-.md3 .co-content { max-width: 880px; margin: 0 auto; padding: 24px; }
-.md3 .co-next { display: flex; flex-direction: column; align-items: flex-end; gap: 8px; margin-top: 28px; }
-.md3 .co-error { color: var(--md-error); font-size: 13px; font-weight: 600; }
-/* desktop: pin the action bar to the viewport bottom so "Weiter" is always reachable
-   without scrolling. Negative margins cancel the content padding so the bar spans from
-   the rail edge to the right edge; it sits above the rail (z below the header). */
-@media (min-width: 992px) {
-  .md3 .co-next {
-    position: sticky; bottom: 0; z-index: 5;
-    flex-direction: row; align-items: center; justify-content: flex-end; gap: 16px;
-    /* margin-top:auto pins the bar to the bottom of the min-height-filled content column,
-       so its position is identical on every step (no jump on submit). */
-    margin: auto -48px 0; padding: 16px 48px 20px;
-    /* fade the page surface up behind the buttons instead of a hard divider bar */
-    background: linear-gradient(to top, var(--md-surface) 62%, rgba(251, 251, 254, 0));
-    border-top: 0;
-  }
-  .md3 .co-next .co-error { margin-right: auto; }
-}
-/* checkout step content (md3) */
-.md3 .co-form { display: flex; flex-direction: column; gap: 20px; }
-.md3 .co-step-title { font: 700 22px var(--md-font-display, var(--md-font)); margin: 0; color: var(--md-on-surface); }
-.md3 .co-step-sub { color: var(--md-on-surface-variant); font-size: 14px; margin: 6px 0 0; }
-/* the step's leading title + sub form a header band, separated from the cards below. */
-.md3 .co-step-title + .co-step-sub { padding-bottom: 18px; border-bottom: 1px solid var(--md-outline-variant); }
-/* two cards side-by-side on wide desktop (contact step); stacks when the column narrows. */
-.md3 .co-cards-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; align-items: start; }
-@media (max-width: 1200px) { .md3 .co-cards-2 { grid-template-columns: 1fr; } }
-.md3 .co-card { background: var(--md-sc-lowest, #fff); border: 1px solid var(--md-outline-variant);
-  border-radius: var(--md-r-lg, 18px); padding: 22px 24px; }
-.md3 .co-card-title { font: 700 16px var(--md-font); margin: 0 0 18px; color: var(--md-on-surface); }
-.md3 .co-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px 20px; }
-.md3 .co-col-2 { grid-column: 1 / -1; }
-.md3 .co-phone { grid-column: 1 / -1; display: grid; grid-template-columns: 110px 1fr 1.6fr; gap: 12px; align-items: start; }
-.md3 .mfield--disabled { background: var(--md-sc); opacity: .7; }
-/* Zahlart — selectable offer cards */
-.md3 .co-pay-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
-.md3 .co-pay-card { position: relative; display: flex; flex-direction: column; align-items: flex-start; gap: 8px;
-  padding: 20px; text-align: left; cursor: pointer; background: var(--md-sc-lowest, #fff);
-  border: 1.5px solid var(--md-outline-variant); border-radius: var(--md-r-lg, 16px); color: var(--md-on-surface);
-  transition: border-color var(--dur-1), background var(--dur-1); }
-.md3 .co-pay-card:hover:not(.is-disabled):not(.is-on) { border-color: var(--md-primary); }
-.md3 .co-pay-card.is-on { border-color: var(--md-primary); background: var(--md-primary-container); }
-.md3 .co-pay-card.is-disabled { opacity: .45; cursor: not-allowed; }
-.md3 .co-pay-card svg { color: var(--md-primary); }
-.md3 .co-pay-radio { position: absolute; top: 16px; right: 16px; width: 20px; height: 20px; border-radius: 50%;
-  border: 2px solid var(--md-outline); }
-.md3 .co-pay-card.is-on .co-pay-radio { border-color: var(--md-primary); background: radial-gradient(circle, var(--md-primary) 0 5px, transparent 6px); }
-.md3 .co-pay-label { font: 700 16px var(--md-font); }
-.md3 .co-pay-info { font-size: 13px; color: var(--md-on-surface-variant); line-height: 1.4; }
-/* Zahlungsart explanatory block — fills the otherwise-empty step + sets expectations. */
-.md3 .co-pay-note { display: flex; align-items: flex-start; gap: 10px; margin-top: 4px; padding: 14px 16px;
-  background: var(--md-primary-container); border-radius: var(--md-r-md); color: var(--md-on-surface); font-size: 13.5px; line-height: 1.5; }
-.md3 .co-pay-note svg { color: var(--md-primary); flex: none; margin-top: 1px; }
-.md3 .co-pay-benes { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin-top: 4px; }
-.md3 .co-pay-bene { display: flex; align-items: flex-start; gap: 10px; padding: 14px 16px;
-  border: 1px solid var(--md-outline-variant); border-radius: var(--md-r-md); background: var(--md-sc-lowest, #fff); }
-.md3 .co-pay-bene svg { color: var(--md-good); flex: none; margin-top: 1px; }
-.md3 .co-pay-bene b { display: block; font-size: 13.5px; color: var(--md-on-surface); }
-.md3 .co-pay-bene span { font-size: 12.5px; color: var(--md-on-surface-variant); line-height: 1.4; }
-@media (max-width: 700px) { .md3 .co-pay-benes { grid-template-columns: 1fr; } }
-/* Zahldetails — borrower block + accordion */
-.md3 .co-borrower-head { font-size: 14px; color: var(--md-on-surface); }
-.md3 .co-borrower-role { font-weight: 700; }
-.md3 .co-accordion { margin-top: 16px; border: 1px solid var(--md-outline-variant); border-radius: var(--md-r-md, 12px); overflow: hidden; }
-.md3 .co-accordion-head { display: flex; align-items: center; justify-content: space-between; width: 100%;
-  padding: 14px 16px; background: var(--md-sc); border: 0; cursor: pointer; font: 600 15px var(--md-font); color: var(--md-on-surface); }
-.md3 .co-accordion-body { padding: 18px 16px; }
-/* Zusatzleistungen — warranty/registration/delivery card extras */
-.md3 .co-section-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 16px; flex-wrap: wrap; }
-.md3 .co-toggle { display: inline-flex; background: var(--md-sc); border-radius: 999px; padding: 3px; }
-.md3 .co-toggle-btn { border: 0; background: none; cursor: pointer; padding: 6px 16px; border-radius: 999px;
-  font: 600 13px var(--md-font); color: var(--md-on-surface-variant); }
-.md3 .co-toggle-btn.is-on { background: var(--md-sc-lowest, #fff); color: var(--md-primary); box-shadow: var(--md-e1, 0 1px 3px rgba(0,0,0,.12)); }
-.md3 .co-pay-price { font: 700 15px var(--md-font); color: var(--md-on-surface); }
-.md3 .co-pay-list { margin: 4px 0 0; padding-left: 18px; font-size: 12px; color: var(--md-on-surface-variant); line-height: 1.5; }
-.md3 .co-pay-check { position: absolute; top: 16px; right: 16px; width: 22px; height: 22px; border-radius: 6px;
-  border: 2px solid var(--md-outline); display: flex; align-items: center; justify-content: center;
-  font-size: 14px; font-weight: 700; color: #fff; }
-.md3 .co-pay-card.is-on .co-pay-check { background: var(--md-primary); border-color: var(--md-primary); }
-.md3 .co-addr-link { display: inline-flex; align-items: center; gap: 5px; margin-top: 6px; color: var(--md-primary);
-  font-weight: 600; font-size: 13px; cursor: pointer; }
-
-/* ---------- 404 ---------- */
-.md3 .nf-page { padding: 24px 0 64px; }
-.md3 .nf-hero { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; align-items: center; padding: 48px 24px; }
-.md3 .nf-hero-text { display: flex; flex-direction: column; align-items: flex-start; gap: 14px; }
-.md3 .nf-eyebrid { display: inline-flex; align-items: center; gap: 8px; font-weight: 700; font-size: 14px;
-  color: var(--md-on-surface-variant); }
-.md3 .nf-code { font: 800 96px/1 var(--md-font-display, var(--md-font)); color: var(--md-primary); letter-spacing: -2px; margin: 0; }
-.md3 .nf-sub { font-size: 18px; color: var(--md-on-surface); margin: 0; max-width: 36ch; line-height: 1.5; }
-.md3 .nf-search { min-width: 0; }
-.md3 .nf-reco { padding: 24px; }
-.md3 .nf-reco .md-title { margin-bottom: 16px; }
-@media (max-width: 860px) {
-  .md3 .nf-hero { grid-template-columns: 1fr; gap: 24px; padding: 24px; }
-  .md3 .nf-code { font-size: 72px; }
-}
-
-/* ---------- shared textarea ---------- */
-.md3 .mtextarea { width: 100%; min-height: 96px; padding: 12px 14px; border-radius: var(--md-r-xs, 8px);
-  border: 0; box-shadow: inset 0 0 0 1px var(--md-outline-variant); background: transparent; resize: vertical;
-  font: 400 14px/1.5 var(--md-font); color: var(--md-on-surface); }
-.md3 .mtextarea:focus { outline: 0; box-shadow: inset 0 0 0 2px var(--md-accent); }
-
-/* ---------- Impressum ---------- */
-.md3 .imp-page { padding: 28px 24px 64px; display: flex; flex-direction: column; gap: 20px; }
-.md3 .imp-card { background: var(--md-sc-lowest, #fff); border: 1px solid var(--md-outline-variant);
-  border-radius: var(--md-r-lg, 16px); padding: 24px 28px; }
-.md3 .imp-title { font: 700 18px var(--md-font); margin: 0 0 14px; color: var(--md-on-surface);
-  padding-bottom: 12px; border-bottom: 1px solid var(--md-outline-variant); }
-.md3 .imp-text { white-space: pre-line; font-size: 14px; line-height: 1.6; color: var(--md-on-surface-variant); }
-
-/* ---------- Kontakt ---------- */
-.md3 .kt-page { display: grid; grid-template-columns: 1fr 320px; gap: 32px; padding: 28px 24px 64px; align-items: start; }
-.md3 .kt-intro { font-size: 15px; color: var(--md-on-surface); margin: 0 0 20px; line-height: 1.5; }
-.md3 .kt-form { display: flex; flex-direction: column; gap: 18px; }
-.md3 .kt-honeypot { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }
-.md3 .kt-buttons { display: flex; justify-content: flex-end; gap: 12px; margin-top: 24px; }
-.md3 .kt-success { display: flex; align-items: center; gap: 8px; margin-top: 16px; color: var(--md-good);
-  font-weight: 600; font-size: 14px; }
-.md3 .kt-aside { background: var(--md-sc); border-radius: var(--md-r-lg, 16px); padding: 24px; display: flex;
-  flex-direction: column; gap: 22px; }
-.md3 .kt-aside-row { display: flex; gap: 14px; align-items: flex-start; }
-.md3 .kt-aside-icon { color: var(--md-primary); flex: none; }
-.md3 .kt-aside-label { margin: 0; font-size: 13px; color: var(--md-on-surface-variant); }
-.md3 .kt-aside-value { margin: 2px 0 0; font-weight: 700; color: var(--md-on-surface); }
-@media (max-width: 860px) { .md3 .kt-page { grid-template-columns: 1fr; } }
-
-/* ---------- Suchaufträge ---------- */
-.md3 .ms-page { padding: 28px 24px 64px; }
-.md3 .ms-head { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 24px; flex-wrap: wrap; }
-.md3 .ms-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(340px, 1fr)); gap: 18px; }
-.md3 .ms-card { background: var(--md-sc-lowest, #fff); border: 1px solid var(--md-outline-variant);
-  border-radius: var(--md-r-lg, 16px); padding: 20px; display: flex; flex-direction: column; gap: 14px; }
-.md3 .ms-card-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
-.md3 .ms-card-title { font: 700 17px var(--md-font); margin: 0; color: var(--md-on-surface); }
-.md3 .ms-card-desc { font-size: 13px; color: var(--md-on-surface-variant); line-height: 1.5; margin: 0; }
-.md3 .ms-card-info { display: flex; gap: 24px; flex-wrap: wrap; padding: 12px 0; border-top: 1px solid var(--md-outline-variant); border-bottom: 1px solid var(--md-outline-variant); }
-.md3 .ms-card-info > div { display: flex; flex-direction: column; gap: 2px; }
-.md3 .ms-info-label { font-size: 12px; color: var(--md-on-surface-variant); }
-.md3 .ms-info-val { font-weight: 700; font-size: 14px; color: var(--md-on-surface); }
-.md3 .ms-card-actions { display: flex; justify-content: flex-end; gap: 10px; }
-.md3 .ms-empty { text-align: center; padding: 64px 24px; color: var(--md-on-surface-variant); }
-.md3 .ms-empty svg { margin-bottom: 12px; }
-@media (max-width: 600px) { .md3 .ms-grid { grid-template-columns: 1fr; } }
-
-/* ---------- Einstellungen (Profile settings) ---------- */
-.md3 .st-page { padding: 24px 24px 64px; }
-/* st-shell — vertical breathing room for the legacy settings card in `next` mode.
-   The legacy .container is margin:0 on desktop, so the card sits flush against the
-   header/footer. Vertical only; horizontal margin stays from .container so the card
-   width is unchanged. Compound .md3.st-shell (0,2,0) beats .container (0,1,0). */
-.md3.st-shell { margin-top: 28px; margin-bottom: 56px; }
-@media (max-width: 980px) { .md3.st-shell { margin-top: 14px; margin-bottom: 32px; } }
-.md3 .st-tabs { display: flex; gap: 4px; border-bottom: 1px solid var(--md-outline-variant); margin-bottom: 24px; overflow-x: auto; }
-.md3 .st-tab { display: inline-flex; align-items: center; gap: 8px; padding: 12px 18px; border: 0; background: none;
-  cursor: pointer; font: 600 15px var(--md-font); color: var(--md-on-surface-variant); border-bottom: 2px solid transparent;
-  margin-bottom: -1px; white-space: nowrap; }
-.md3 .st-tab:hover { color: var(--md-on-surface); }
-.md3 .st-tab.is-active { color: var(--md-primary); border-bottom-color: var(--md-primary); }
-.md3 .st-tab svg { flex: none; }
-
-/* md3 settings forms (Account tab rebuilt on the autobahn primitives) */
-.md3 .st-panels { max-width: 900px; }
-.md3 .st-loading { display: flex; justify-content: center; padding: 56px; }
-.md3 .st-form { display: flex; flex-direction: column; gap: 24px; }
-.md3 .st-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px 20px; }
-@media (max-width: 600px) { .md3 .st-grid { grid-template-columns: 1fr; } }
-.md3 .st-phone { grid-column: 1 / -1; display: grid; grid-template-columns: 140px 120px 1fr; gap: 12px; align-items: end; }
-@media (max-width: 600px) { .md3 .st-phone { grid-template-columns: 1fr; } }
-.md3 .st-actions { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding-top: 16px; border-top: 1px solid var(--md-outline-variant); flex-wrap: wrap; }
-.md3 .st-actions-right { display: flex; gap: 12px; }
-.md3 .st-del .mbtn, .md3 .st-del { color: var(--md-error); }
-
-/* data-usage toggle rows */
-.md3 .du-row { display: flex; align-items: center; gap: 16px; padding: 18px; border: 1px solid var(--md-outline-variant); border-radius: var(--md-r-lg, 16px); background: var(--md-surface, #fff); }
-.md3 .du-ic { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; flex: none; border-radius: var(--md-r-full); background: var(--md-surface-variant, #eef1f6); color: var(--md-primary); }
-.md3 .du-copy { display: flex; flex-direction: column; gap: 2px; flex: 1; }
-.md3 .du-label { font: 700 15px var(--md-font); color: var(--md-on-surface); }
-.md3 .du-text { font-size: 13px; color: var(--md-on-surface-variant); }
-/* md3 switch */
-.md3 .mswitch { position: relative; display: inline-flex; flex: none; cursor: pointer; }
-.md3 .mswitch input { position: absolute; opacity: 0; width: 0; height: 0; }
-.md3 .mswitch-track { display: inline-block; width: 46px; height: 26px; border-radius: var(--md-r-full); background: var(--md-outline-variant); transition: background .15s; position: relative; }
-.md3 .mswitch-thumb { position: absolute; top: 3px; left: 3px; width: 20px; height: 20px; border-radius: var(--md-r-full); background: #fff; box-shadow: var(--md-e1); transition: transform .15s; }
-.md3 .mswitch input:checked + .mswitch-track { background: var(--md-primary); }
-.md3 .mswitch input:checked + .mswitch-track .mswitch-thumb { transform: translateX(20px); }
-
-/* md3 address cards (Einstellungen → Adressen) */
-.md3 .adr-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 16px; }
-.md3 .adr-card { border: 1px solid var(--md-outline-variant); border-radius: var(--md-r-lg, 16px); background: var(--md-surface, #fff); padding: 18px; box-shadow: var(--md-e1); }
-.md3 .adr-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; }
-.md3 .adr-title { font: 700 16px var(--md-font); color: var(--md-on-surface); }
-.md3 .adr-row { display: flex; gap: 10px; padding: 6px 0; border-bottom: 1px solid var(--md-outline-variant); font-size: 13.5px; }
-.md3 .adr-row:last-child { border-bottom: 0; }
-.md3 .adr-k { flex: none; width: 110px; color: var(--md-on-surface-variant); }
-.md3 .adr-v { color: var(--md-on-surface); }
-.md3 .adr-v--empty { color: var(--md-error); }
-.md3 .adr-add { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; min-height: 160px; border: 2px dashed var(--md-outline-variant); border-radius: var(--md-r-lg, 16px); background: none; cursor: pointer; color: var(--md-on-surface-variant); font: 600 14px var(--md-font); transition: border-color .12s, color .12s; }
-.md3 .adr-add:hover { border-color: var(--md-primary); color: var(--md-primary); }
-.md3 .adr-add-ic { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; border-radius: var(--md-r-full); background: var(--md-surface-variant, #eef1f6); }
-
-/* dealer dashboard — md3 odometer + chart-period buttons */
-.md3 .dash-card .employeesCountWrapper, .md3 .dash-odo { display: inline-flex; gap: 6px; margin: 12px 0; }
-.md3 .dash-odo span { display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 46px; border-radius: var(--md-r-sm, 10px); background: var(--md-primary); color: #fff; font: 700 24px var(--md-font); }
-
-/* dealer Mitarbeiter (employees) — md3 polish over the legacy structure */
-.md3 .emp-info { border: 1px solid var(--md-outline-variant); border-radius: var(--md-r-lg, 16px); background: var(--md-surface, #fff); padding: 20px; box-shadow: var(--md-e1); margin-bottom: 20px; }
-.md3 .emp-controls { display: flex; align-items: center; gap: 12px; margin-bottom: 20px; flex-wrap: wrap; }
-.md3 .emp-add { background: var(--md-primary) !important; color: #fff !important; border-radius: var(--md-r-full) !important; padding: 10px 20px !important; font: 600 14px var(--md-font) !important; text-transform: none !important; box-shadow: var(--md-e1) !important; }
-.md3 .emp-table { border: 1px solid var(--md-outline-variant); border-radius: var(--md-r-lg, 16px); background: var(--md-surface, #fff); overflow: hidden; box-shadow: var(--md-e1); }
-.md3 .emp-thead { background: var(--md-surface-variant, #eef1f6); color: var(--md-on-surface-variant); font: 600 12.5px var(--md-font); }
-
-/* ---------- Meine Fahrzeuge (vehicle list) ---------- */
-.md3 .mv-page { padding: 24px 24px 64px; }
-.md3 .mv-warning { background: var(--md-error-container, #fdeceb); color: var(--md-error); border-radius: var(--md-r-sm, 12px); padding: 12px 16px; margin-bottom: 16px; font-size: 14px; }
-.md3 .mv-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 24px; flex-wrap: wrap; }
-.md3 .mv-tools { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
-.md3 .mv-search { width: 260px; max-width: 100%; padding-right: 4px; }
-.md3 .mv-search input { border: 0; outline: 0; background: transparent; flex: 1; font: inherit; color: inherit; min-width: 0; }
-.md3 .mv-search-btn { display: flex; align-items: center; justify-content: center; border: 0; background: none; cursor: pointer; color: var(--md-on-surface-variant); flex: none; padding: 0 4px; }
-.md3 .mv-loading { display: flex; justify-content: center; padding: 64px; }
-
-/* ---------- Meine Fahrzeuge — md3 owner/dealer card (.mvc-*) ---------- */
-.md3 .mvc-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(440px, 1fr)); gap: 20px; }
-@media (max-width: 600px) { .md3 .mvc-list { grid-template-columns: 1fr; gap: 16px; } }
-.md3 .mvc { display: flex; flex-direction: column; background: var(--md-surface, #fff); border: 1px solid var(--md-outline-variant); border-radius: var(--md-r-lg, 16px); box-shadow: var(--md-e1); overflow: hidden; }
-.md3 .mvc-media { position: relative; display: block; aspect-ratio: 16 / 10; background: var(--md-surface-variant, #eef1f6); border-bottom: 1px solid var(--md-outline-variant); }
-.md3 .mvc-media img { width: 100%; height: 100%; object-fit: contain; }
-.md3 .mvc-imgcount { position: absolute; bottom: 8px; right: 8px; display: inline-flex; align-items: center; gap: 4px; height: 22px; padding: 0 8px; border-radius: var(--md-r-full); background: rgba(0,0,0,.62); color: #fff; font-size: 11px; font-weight: 600; }
-.md3 .mvc-status { position: absolute; top: 10px; left: 10px; display: inline-flex; align-items: center; height: 26px; padding: 0 12px; border-radius: var(--md-r-full); background: var(--md-surface, #fff); color: var(--md-on-surface-variant); font-size: 12px; font-weight: 700; box-shadow: var(--md-e1); cursor: pointer; }
-.md3 .mvc-status--on { background: var(--md-good, #0F7B43); color: #fff; }
-.md3 .mvc-body { padding: 14px 16px; display: flex; flex-direction: column; gap: 6px; }
-.md3 .mvc-title { font: 700 18px var(--md-font); color: var(--md-on-surface); text-decoration: none; line-height: 1.25; }
-.md3 a.mvc-title:hover { color: var(--md-primary); }
-.md3 .mvc-trim { font-size: 13.5px; color: var(--md-on-surface-variant); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
-.md3 .mvc-specs { display: flex; flex-wrap: wrap; align-items: center; gap: 2px 8px; font-size: 12.5px; color: var(--md-on-surface-variant); margin-top: 2px; }
-.md3 .mvc-dot { color: var(--md-outline-variant); }
-.md3 .mvc-ids { display: flex; flex-wrap: wrap; gap: 2px 14px; font-size: 11.5px; color: var(--md-on-surface-variant); margin-top: 4px; }
-.md3 .mvc-ids b { color: var(--md-on-surface); font-weight: 600; }
-.md3 .mvc-price { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; margin-top: 6px; }
-.md3 .mvc-price-main { font-weight: 700; font-size: 22px; color: var(--md-primary); letter-spacing: -.4px; }
-.md3 .mvc-price-rate { font-size: 12.5px; color: var(--md-on-surface-variant); }
-.md3 .mvc-price-rate b { color: var(--md-on-surface); }
-.md3 .mvc-aggs { display: grid; grid-template-columns: repeat(auto-fit, minmax(88px, 1fr)); gap: 8px; margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--md-outline-variant); }
-.md3 .mvc-agg { display: flex; flex-direction: column; gap: 1px; }
-.md3 .mvc-agg-k { font-size: 11px; color: var(--md-on-surface-variant); }
-.md3 .mvc-agg-v { font-size: 15px; font-weight: 700; color: var(--md-on-surface); }
-.md3 .mvc-dealer { border-top: 1px solid var(--md-outline-variant); }
-.md3 .mvc-foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 16px; border-top: 1px solid var(--md-outline-variant); margin-top: auto; flex-wrap: wrap; }
-.md3 .mvc-controls { display: flex; align-items: center; gap: 4px; flex-wrap: wrap; }
-.md3 .mvc-ctrl { display: inline-flex; align-items: center; justify-content: center; width: 38px; height: 38px; border: 1px solid var(--md-outline-variant); border-radius: var(--md-r-full); background: var(--md-surface, #fff); color: var(--md-on-surface-variant); cursor: pointer; transition: background .12s, color .12s, border-color .12s; }
-.md3 .mvc-ctrl:hover { background: var(--md-surface-variant, #eef1f6); color: var(--md-primary); border-color: var(--md-primary); }
-.md3 .mvc-ctrl--disabled { opacity: .4; cursor: not-allowed; }
-.md3 .mvc-ctrl--disabled:hover { background: var(--md-surface, #fff); color: var(--md-on-surface-variant); border-color: var(--md-outline-variant); }
-
-/* ---------- Checkout OrderOverview (Übersicht) ---------- */
-.md3 .oo-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
-.md3 .oo-car { display: flex; gap: 16px; align-items: center; padding-bottom: 16px; border-bottom: 1px solid var(--md-outline-variant); margin-bottom: 16px; }
-.md3 .oo-car-img { width: 96px; height: 66px; object-fit: contain; border-radius: var(--md-r-sm, 10px); flex: none; }
-.md3 .oo-car-name { font: 700 17px var(--md-font); color: var(--md-on-surface); }
-.md3 .oo-car-sub { font-size: 13px; color: var(--md-on-surface-variant); margin-bottom: 4px; }
-.md3 .oo-seller { font-size: 13px; color: var(--md-on-surface-variant); cursor: pointer; }
-.md3 .oo-underline { color: var(--md-primary); text-decoration: underline; cursor: pointer; }
-.md3 .oo-row { padding: 12px 0; border-bottom: 1px solid var(--md-outline-variant); }
-.md3 .oo-row:last-child { border-bottom: 0; }
-.md3 .oo-row-title { font-weight: 700; font-size: 14px; color: var(--md-on-surface); margin-bottom: 6px; display: flex; justify-content: space-between; }
-.md3 .oo-row-add { font-weight: 400; font-size: 12px; color: var(--md-on-surface-variant); }
-.md3 .oo-row-val { font-size: 14px; color: var(--md-on-surface-variant); }
-.md3 .oo-line { display: flex; justify-content: space-between; gap: 12px; font-size: 14px; padding: 3px 0; }
-.md3 .oo-line-name { color: var(--md-on-surface-variant); }
-.md3 .oo-line-rate { color: var(--md-on-surface); font-weight: 600; text-align: right; }
-.md3 .oo-summary { align-self: start; }
-.md3 .oo-total { display: flex; flex-direction: column; padding-bottom: 14px; margin-bottom: 8px; border-bottom: 1px solid var(--md-outline-variant); }
-.md3 .oo-total-label { font-size: 14px; color: var(--md-on-surface-variant); }
-.md3 .oo-total-amount { font: 800 28px var(--md-font); color: var(--md-primary); }
-.md3 .oo-total-unit { font-size: 15px; font-weight: 600; color: var(--md-on-surface-variant); }
-.md3 .oo-vat { font-size: 12px; color: var(--md-on-surface-variant); }
-.md3 .oo-finance-link { display: inline-block; margin: 8px 0; color: var(--md-primary); font-weight: 600; font-size: 13px; cursor: pointer; }
-.md3 .oo-terms { margin-top: 20px; font-size: 13px; color: var(--md-on-surface-variant); line-height: 1.6; }
-.md3 .oo-buy { display: flex; justify-content: flex-end; margin-top: 16px; }
-@media (max-width: 800px) { .md3 .oo-grid { grid-template-columns: 1fr; } }
-
-/* ---------- Bestellungen (orders) ---------- */
-.md3 .mo-page { padding: 28px 24px 64px; }
-.md3 .mo-list { display: flex; flex-direction: column; gap: 18px; }
-.md3 .mo-card { padding: 20px 22px; }
-.md3 .mo-status { font-size: 13px; color: var(--md-on-surface-variant); margin-bottom: 12px; }
-.md3 .mo-status-val { color: var(--md-primary); font-weight: 700; }
-.md3 .mo-head { display: flex; align-items: center; gap: 16px; padding-bottom: 14px; border-bottom: 1px solid var(--md-outline-variant); }
-.md3 .mo-head > div:nth-child(2) { flex: 1; min-width: 0; }
-.md3 .mo-delivered { font-size: 12px; color: var(--md-good); margin-top: 4px; }
-.md3 .mo-rows { padding: 12px 0; border-bottom: 1px solid var(--md-outline-variant); }
-.md3 .mo-total { display: flex; justify-content: space-between; align-items: baseline; padding-top: 14px; font-weight: 700; }
-.md3 .mo-total-val { font-size: 20px; color: var(--md-primary); }
-
-/* ---------- Vergleich ---------- */
-.md3 .cmp-page { padding: 24px 24px 64px; }
-.md3 .cmp-head { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 20px; flex-wrap: wrap; }
-
-/* ---------- Abrechnung (Billing) ---------- */
-.md3 .bl-page { padding: 28px 24px 64px; }
-.md3 .bl-allprices { font-size: 13px; color: var(--md-on-surface-variant); margin: 12px 0 20px; }
-.md3 .bl-search { background: var(--md-sc); border-radius: var(--md-r-md, 12px); padding: 16px; margin-bottom: 20px; }
-.md3 .bl-range { display: flex; align-items: flex-end; gap: 12px; flex-wrap: wrap; }
-.md3 .bl-range .mfield { width: 200px; flex-direction: row; gap: 8px; }
-.md3 .bl-active { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; font-size: 14px; }
-.md3 .bl-active-btns { display: flex; align-items: center; gap: 10px; }
-.md3 .bl-reset { border: 0; background: none; cursor: pointer; color: var(--md-on-surface-variant); display: flex; }
-.md3 .bl-section { margin: 24px 0 12px; }
-.md3 .bl-noresult, .md3 .bl-error { color: var(--md-on-surface-variant); font-size: 14px; }
-
-/* ---------- Daten-Export / Import ---------- */
-.md3 .dx-page { padding: 28px 24px 64px; display: flex; flex-direction: column; gap: 18px; }
-.md3 .dx-info-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
-.md3 .dx-text { font-size: 14px; line-height: 1.55; color: var(--md-on-surface-variant); margin: 0; }
-.md3 .dx-contacts { display: flex; gap: 28px; flex-wrap: wrap; margin-top: 14px; }
-.md3 .dx-contact { display: flex; gap: 12px; align-items: center; color: var(--md-on-surface); }
-.md3 .dx-contact svg { color: var(--md-primary); flex: none; }
-.md3 .dx-c-title { font-size: 12px; color: var(--md-on-surface-variant); }
-.md3 .dx-steps { display: flex; flex-wrap: wrap; gap: 16px; margin: 8px 0 16px; }
-.md3 .dx-step { display: flex; align-items: center; gap: 10px; flex: 1; min-width: 180px; }
-.md3 .dx-step-num { display: flex; align-items: center; justify-content: center; width: 30px; height: 30px; flex: none;
-  border-radius: 50%; background: var(--md-primary); color: #fff; font-weight: 700; font-size: 14px; }
-@media (max-width: 700px) { .md3 .dx-info-grid { grid-template-columns: 1fr; } }
-
-/* shared dealer/owner page frame — md3 padding + max width (legacy inner blocks preserved) */
-.md3 .dlr-page { padding: 24px; }
-@media (min-width: 1100px) { .md3 .dlr-page { max-width: 1280px; margin: 0 auto; } }
-@media (max-width: 700px) {
-  .md3 .co-grid { grid-template-columns: 1fr; }
-  .md3 .co-phone { grid-template-columns: 90px 1fr 1fr; }
-  .md3 .co-pay-grid { grid-template-columns: 1fr; }
-}
-@media (max-width: 700px) {
-  .md3 .co-header-info { display: none; }
-  .md3 .co-step-label { display: none; }
-  .md3 .co-step { flex: none; }
-  .md3 .co-step-bar { min-width: 24px; }
-}
-/* below the 992px desktop breakpoint the content no longer reserves the 424px left
-   gap, so the fixed rail would overlap the form — hide it (mobile uses the header stepper). */
-@media (max-width: 991px) {
-  .md3 .co-rail { display: none; }
-}
-
-/* ---------- custom select / dropdown ----------
-   Themeable replacement for native <select> (whose OS-rendered option list can't be
-   styled). Trigger mirrors .mfield; the menu is a controlled .mcard-style popover. */
-.md3 .mselect { position: relative; display: inline-block; }
-.md3 .mselect.mselect--block { display: block; width: 100%; }
-.md3 .mselect-btn { display: flex; align-items: center; gap: 10px; width: 100%; height: 48px; padding: 0 14px;
-  border: 0; border-radius: var(--md-r-xs); background: transparent; box-shadow: inset 0 0 0 1px var(--md-outline-variant);
-  font: inherit; font-size: 14px; color: var(--md-on-surface); cursor: pointer; text-align: left; transition: box-shadow .15s; }
-.md3 .mselect-btn:hover { box-shadow: inset 0 0 0 1px var(--md-outline); }
-.md3 .mselect-btn[aria-expanded="true"] { box-shadow: inset 0 0 0 2px var(--md-accent); }
-.md3 .mselect-btn:disabled { opacity: .5; cursor: not-allowed; }
-.md3 .mselect-btn .lucide { width: 20px; height: 20px; color: var(--md-on-surface-variant); flex: none; }
-.md3 .mselect-label { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
-.md3 .mselect-label--ph { color: var(--md-on-surface-variant); }
-.md3 .mselect-chev { margin-left: auto; transition: transform .15s; }
-.md3 .mselect-btn[aria-expanded="true"] .mselect-chev { transform: rotate(180deg); }
-.md3 .mselect--sm .mselect-btn { height: 34px; font-size: 13px; padding: 0 10px; gap: 6px; }
-.md3 .mselect--sm .mselect-btn .lucide { width: 16px; height: 16px; }
-.md3 .mselect-menu { position: absolute; z-index: 60; top: calc(100% + 4px); left: 0; min-width: 100%; max-height: 288px;
-  overflow-y: auto; padding: 6px; margin: 0; list-style: none; background: var(--md-sc-lowest, #fff);
-  border-radius: var(--md-r-sm, 12px); border: 1px solid var(--md-outline-variant);
-  box-shadow: var(--md-e2, 0 8px 24px rgba(0,0,0,.16)); }
-.md3 .mselect-menu--right { left: auto; right: 0; }
-.md3 .mselect-opt { display: flex; align-items: center; gap: 8px; width: 100%; padding: 9px 10px; border: 0;
-  border-radius: 8px; background: transparent; font: inherit; font-size: 14px; color: var(--md-on-surface);
-  text-align: left; cursor: pointer; }
-.md3 .mselect-opt-label { flex: 1; min-width: 0; }
-.md3 .mselect-opt:hover, .md3 .mselect-opt.is-active { background: var(--md-sc); }
-.md3 .mselect-opt[aria-selected="true"] { color: var(--md-primary); font-weight: 600; }
-.md3 .mselect-opt:disabled { opacity: .45; cursor: not-allowed; background: transparent; }
-.md3 .mselect-check { color: var(--md-primary); flex: none; }
-
-/* ---------- Detailsuche page ---------- */
-/* the sticky submit bar drives "apply" here, so hide FilterContent's own inline footer button. */
-.md3 .detailed-page .frail-foot { display: none; }
-.md3 .detailed-submitbar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 40; padding: 12px 0;
-  background: var(--md-sc-lowest, #fff); border-top: 1px solid var(--md-outline-variant);
-  box-shadow: 0 -4px 16px rgba(0,0,0,.06); }
-/* the "Detailsuche" link at the foot of the simple SRP rail. */
-.md3 .detailed-link { border-radius: 10px; }
-.md3 .detailed-link:hover { background: var(--md-sc); }
-
-/* sectioned Detailsuche layout (FilterContent variant="page") — full-width sections, multi-col grids */
-.md3 .ds-page { display: block; }
-.md3 .ds-section { padding: 30px 0; border-top: 1px solid var(--md-outline-variant); }
-.md3 .ds-section:first-child { border-top: 0; padding-top: 6px; }
-.md3 .ds-section > h2 { font: 700 19px var(--md-font); letter-spacing: -.2px; margin: 0 0 20px; color: var(--md-on-surface); }
-.md3 .ds-sub { font: 600 13px var(--md-font); color: var(--md-on-surface-variant); margin: 20px 0 8px; }
-.md3 .ds-sub:first-child { margin-top: 0; }
-.md3 .ds-grid-3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 28px; }
-.md3 .ds-grid-2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px 28px; }
-.md3 .ds-cols-3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 4px 28px; }
-@media (max-width: 900px) { .md3 .ds-grid-3, .md3 .ds-cols-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
-@media (max-width: 600px) { .md3 .ds-grid-3, .md3 .ds-grid-2, .md3 .ds-cols-3 { grid-template-columns: 1fr; } }
-
-/* two-column section flow — sections after Grundbasis auto-balance into 2 columns; the
-   densest (Sicherheit, Ausstattung) span both so their 3-up grids keep full reading width. */
-.md3 .ds-flow { column-count: 2; column-gap: 48px; }
-.md3 .ds-flow .ds-section { break-inside: avoid; -webkit-column-break-inside: avoid; padding: 26px 0; }
-.md3 .ds-flow .ds-section--wide { column-span: all; -webkit-column-span: all; padding: 30px 0; }
-/* inside a half-width flow column, collapse the multi-col inner grids so rows aren't cramped. */
-.md3 .ds-flow .ds-section:not(.ds-section--wide) .ds-grid-3 { grid-template-columns: 1fr 1fr; gap: 0 24px; }
-.md3 .ds-flow .ds-section:not(.ds-section--wide) .ds-cols-3 { grid-template-columns: 1fr; gap: 0; }
-.md3 .ds-flow .ds-section:not(.ds-section--wide) .ds-grid-2 { grid-template-columns: 1fr; }
-@media (max-width: 900px) { .md3 .ds-flow { column-count: 1; } }
-
-/* ---------- Merkliste (Favourites) ---------- */
-.md3 .fav-bar { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 18px; }
-.md3 .fav-cell { display: flex; flex-direction: column; }
-.md3 .fav-compare { display: inline-flex; align-items: center; justify-content: center; gap: 8px; margin-top: 8px;
-  height: 40px; border-radius: var(--md-r-sm, 12px); border: 1px solid var(--md-outline-variant); background: transparent;
-  font: 600 13px var(--md-font); color: var(--md-on-surface-variant); cursor: pointer;
-  transition: background .15s, border-color .15s, color .15s; }
-.md3 .fav-compare:hover { background: var(--md-sc); }
-.md3 .fav-compare--on { background: var(--md-primary-container); color: var(--md-on-primary-container); border-color: transparent; }
-.md3 .fav-compare .lucide { width: 18px; height: 18px; }
-
-/* ---------- segmented buttons ---------- */
-.md3 .segmented { display: inline-flex; border-radius: var(--md-r-full); box-shadow: inset 0 0 0 1px var(--md-outline-variant); overflow: hidden; }
-.md3 .segmented button { height: 38px; padding: 0 18px; border: 0; background: transparent; cursor: pointer;
-  font: 600 13px var(--md-font); color: var(--md-on-surface-variant); display: inline-flex; align-items: center; gap: 6px;
-  border-right: 1px solid var(--md-outline-variant); transition: background .15s; }
-.md3 .segmented button:last-child { border-right: 0; }
-.md3 .segmented button.on { background: var(--md-secondary-container); color: var(--md-on-secondary-container); }
-.md3 .segmented button .lucide { width: 16px; height: 16px; }
-
-/* ---------- spec item ---------- */
-.md3 .specitem { display: flex; align-items: center; gap: 10px; }
-.md3 .specitem .lucide { width: 20px; height: 20px; color: var(--md-on-surface-variant); flex: none; stroke-width: 1.75; }
-.md3 .specitem b { font-weight: 600; font-size: 14px; color: var(--md-on-surface); }
-.md3 .specitem span { display: block; font-size: 11.5px; color: var(--md-on-surface-variant); }
-
-/* ---------- list divider ---------- */
-.md3 .mdivider { height: 1px; background: var(--md-outline-variant); border: 0; margin: 0; }
-
-/* ---------- accent helpers (Signal-Cyan) ---------- */
-.md3 .link-accent:hover { text-decoration: underline; text-decoration-color: var(--md-accent); text-underline-offset: 3px; }
-.md3 .accent-rule { height: 3px; width: 44px; border-radius: 2px; background: var(--autode-swoosh); }
-.md3 :focus-visible { outline: 2px solid var(--md-accent); outline-offset: 2px; }
-.md3 .link-accent { color: var(--md-primary); cursor: pointer; text-decoration: none; }
-.md3 .link-accent:hover { text-decoration: underline; text-decoration-color: var(--md-accent); text-underline-offset: 3px; }
-
-/* ---------- card image carousel ---------- */
-.md3 .car-arrow { position: absolute; top: 50%; transform: translateY(-50%); width: 32px; height: 32px; border-radius: var(--md-r-full);
-  border: 0; background: rgba(255,255,255,.92); color: var(--md-on-surface); box-shadow: var(--md-e1);
-  display: flex; align-items: center; justify-content: center; cursor: pointer; opacity: 0; transition: opacity var(--dur-1); z-index: 2; }
-.md3 .car-arrow--l { left: 8px; } .md3 .car-arrow--r { right: 8px; }
-.md3 .cardcar:hover .car-arrow { opacity: 1; }
-@media (hover: none) { .md3 .car-arrow { opacity: .92; } }
-
-/* ==========================================================================
-   RESPONSIVE LAYOUT LAYER
-   Layout-critical grids live here (inline React styles can't carry @media).
-   Breakpoints: tablet ≤ 980px, phone ≤ 600px.
-   ========================================================================== */
-.md3 .container { max-width: 1180px; margin: 0 auto; width: 100%; }
-
-.md3 .hero-grid      { display: grid; grid-template-columns: 1.05fr .95fr; gap: 40px; align-items: center; }
-.md3 .hero-inner     { padding: 40px 24px 44px; }
-.md3 .field-grid-2   { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
-.md3 .cards-3        { display: grid; grid-template-columns: repeat(3,1fr); gap: 20px; }
-.md3 .cards-2        { display: grid; grid-template-columns: repeat(2,1fr); gap: 18px; }
-.md3 .cards-offers   { display: grid; grid-template-columns: repeat(3,1fr); gap: 20px; }
-.md3 .brand-grid     { display: grid; grid-template-columns: repeat(6,1fr); gap: 16px; }
-.md3 .steps-3        { display: grid; grid-template-columns: repeat(3,1fr); gap: 32px; }
-/* car-card grids: 2-up across the whole tablet range (incl. landscape ~1024) so cards never cram to 3 narrow columns */
-@media (max-width: 1024px) {
-  .md3 .cards-offers, .md3 .cards-3 { grid-template-columns: repeat(2, 1fr); }
-}
-/* guarantee band — one cohesive container with hairline columns (not four floating cards) */
-.md3 .guarantee-grid { display: grid; grid-template-columns: repeat(4,1fr); gap: 0; background: var(--md-sc-low);
-  border-radius: var(--md-r-lg); overflow: hidden; }
-.md3 .gitem          { padding: 26px 24px; display: flex; flex-direction: column; gap: 12px; border-left: 1px solid var(--md-outline-variant); }
-.md3 .gitem:first-child { border-left: 0; }
-/* magazine — editorial: one feature + stacked text rows */
-.md3 .mag-grid       { display: grid; grid-template-columns: 1.55fr 1fr; gap: 18px; align-items: stretch; }
-.md3 .mag-side       { display: flex; flex-direction: column; gap: 18px; }
-.md3 .mag-item       { flex: 1; display: flex; flex-direction: column; justify-content: center; gap: 8px;
-  padding: 22px 24px; background: var(--md-sc-lowest); }
-/* lower-page polish: connected 3-step flow band + testimonial accents */
-.md3 .steps-flow { position: relative; }
-.md3 .steps-flow::before { content: ''; position: absolute; top: 23px; left: 16.6%; right: 16.6%; height: 2px;
-  background: linear-gradient(90deg, transparent, rgba(22,184,232,.55), transparent); z-index: 0; }
-.md3 .steps-flow > * { position: relative; z-index: 1; }
-@media (max-width: 980px) { .md3 .steps-flow::before { display: none; } }
-.md3 .tcard { position: relative; }
-.md3 .tcard::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px; background: var(--autode-swoosh); }
-.md3 .mag-tag { display: inline-flex; align-self: flex-start; padding: 3px 10px; border-radius: var(--md-r-full);
-  background: var(--md-primary-container); color: var(--md-on-primary-container); font-size: 11px; font-weight: 700; letter-spacing: .3px; }
-/* VDP: desktop sticky summary bar — docks to top after the calculator scrolls away */
-.md3 .vdp-stickytop { position: fixed; top: 0; left: 0; right: 0; z-index: 70; background: var(--md-sc-lowest);
-  border-bottom: 1px solid var(--md-outline-variant); box-shadow: 0 2px 14px rgba(0,0,0,.08);
-  transform: translateY(-100%); transition: transform var(--dur-2, .25s); }
-.md3 .vdp-stickytop--on { transform: translateY(0); }
-/* VDP: header row — title left, rating chip right */
-.md3 .vdp-headrow  { display: flex; justify-content: space-between; align-items: flex-start; gap: 24px; }
-/* VDP: header fact line — plain text with dot separators (market-leader pattern, no pills) */
-.md3 .vdp-meta { display: flex; flex-wrap: wrap; align-items: center; row-gap: 8px; margin-top: 12px;
-  font-size: 14.5px; font-weight: 500; color: var(--md-on-surface); }
-.md3 .vdp-meta > span { display: inline-flex; align-items: center; gap: 7px; white-space: nowrap; }
-.md3 .vdp-meta > span + span::before { content: ''; width: 4px; height: 4px; border-radius: 50%;
-  background: var(--md-outline-variant); margin: 0 12px; }
-/* VDP: condition row — footer of the header card (hairline-divided, no own box) */
-.md3 .zustand-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0;
-  border-top: 1px solid var(--md-outline-variant); margin-top: 18px; padding-top: 4px; }
-.md3 .zustand-tile { display: flex; align-items: center; gap: 11px; padding: 12px 16px 0;
-  border-left: 1px solid var(--md-outline-variant); min-width: 0; }
-.md3 .zustand-tile:first-child { border-left: 0; padding-left: 0; }
-.md3 .vdp-anchors  { position: sticky; top: 0; z-index: 20; gap: 8px; padding: 10px 0;
-  background: var(--md-surface); overflow-x: auto; scrollbar-width: none;
-  width: 0; min-width: 100%; } /* width:0 kills min-content propagation; min-width re-stretches */
-.md3 .vdp-anchors::-webkit-scrollbar { display: none; }
-/* VDP page tint — white cards on cool gray for depth (mobile.de/AS24 use the same trick) */
-.md3 .vdp-tint .mcard--filled { background: var(--md-sc-lowest); border: 1px solid var(--md-outline-variant); }
-.md3 .steps-4      { display: grid; grid-template-columns: repeat(4, 1fr); gap: 26px; }
-/* HowItWorks — professional redesign: tinted section bg, white elevated step cards, gradient circles */
-.md3 .hiw-section { background: color-mix(in srgb, var(--md-primary) 5%, var(--md-surface));
-  border-radius: 20px; padding: 36px 28px; }
-.md3 .hiw-grid { position: relative; }
-.md3 .hiw-step { display: flex; flex-direction: column; align-items: center; text-align: center;
-  position: relative; z-index: 1;
-  background: #fff; border-radius: 16px; padding: 28px 16px 22px;
-  box-shadow: 0 2px 16px rgba(11,83,204,.09); border: 1px solid rgba(11,83,204,.07); }
-.md3 .hiw-step:not(:last-child)::after { content: '›'; position: absolute; right: -16px; top: 42px;
-  font-size: 24px; font-weight: 700; color: var(--md-primary); opacity: .4; z-index: 2; pointer-events: none; }
-.md3 .hiw-icon-wrap { position: relative; width: 64px; height: 64px; border-radius: var(--md-r-full);
-  background: linear-gradient(135deg, var(--md-primary) 0%, #16B8E8 100%);
-  box-shadow: 0 4px 14px color-mix(in srgb, var(--md-primary) 35%, transparent);
-  display: flex; align-items: center; justify-content: center; flex: none; margin-bottom: 16px; }
-.md3 .hiw-num { position: absolute; top: -4px; right: -4px; min-width: 20px; height: 20px; border-radius: var(--md-r-full);
-  background: #fff; color: var(--md-primary); font-size: 10px; font-weight: 900;
-  display: flex; align-items: center; justify-content: center; padding: 0 4px;
-  box-shadow: 0 2px 8px rgba(0,0,0,.18); }
-.md3 .hiw-title { font-size: 15px; font-weight: 700; margin-top: 4px; margin-bottom: 8px; color: var(--md-on-surface); }
-.md3 .hiw-desc { margin: 0; font-size: 13px; color: var(--md-on-surface-variant); line-height: 1.55; }
-.md3 .footer-grid    { display: grid; grid-template-columns: 1.4fr repeat(4,1fr); gap: 28px; }
-.md3 .srp-grid       { display: grid; grid-template-columns: 244px 1fr; gap: 24px; align-items: start; }
-/* SRP grid view sits beside the filter rail — 2 columns, not 3 (cards need ≥340px) */
-.md3 .srp-grid .cards-3 { grid-template-columns: repeat(2,1fr); }
-.md3 .srp-bar { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 12px; }
-.md3 .srp-chips { flex: 1 1 260px; min-width: 0; }
-/* "NEU" badge on car cards (legacy new-car label). */
-.md3 .neu-badge { display: inline-flex; align-items: center; height: 22px; padding: 0 8px; border-radius: var(--md-r-full); background: var(--md-primary); color: #fff; font-size: 10.5px; font-weight: 700; letter-spacing: .3px; white-space: nowrap; box-shadow: var(--md-e1); }
-@media (max-width: 820px) { .md3 .srp-chips { order: 3; flex-basis: 100%; } }
-.md3 .vdp-grid       { display: grid; grid-template-columns: 1fr 372px; gap: 28px; align-items: start; }
-.md3 .vdp-gallery    { grid-column: 1; grid-row: 1; }
-.md3 .vdp-details    { grid-column: 1; grid-row: 2; display: flex; flex-direction: column; gap: 22px; }
-.md3 .vdp-aside      { grid-column: 2; grid-row: 1 / span 2; align-self: start; position: sticky; top: 84px; display: flex; flex-direction: column; gap: 16px; }
-.md3 .vdp-gallerybox { height: 440px; } .md3 .vdp-gallerybox .cardcar { height: 100%; }
-.md3 .vdp-specs      { display: grid; grid-template-columns: 1fr 1fr; gap: 18px 32px; }
-.md3 .curated-grid   { display: grid; grid-template-columns: repeat(4,1fr); gap: 16px; }
-.md3 .curated-card   { padding: 18px; display: flex; flex-direction: column; gap: 14px; background: var(--md-sc-lowest);
-  text-align: left; transition: box-shadow var(--dur-2), transform var(--dur-2); }
-.md3 .curated-card:hover { box-shadow: var(--md-e2); transform: translateY(-2px); }
-.md3 .curated-top    { display: flex; align-items: center; gap: 13px; }
-.md3 .curated-ic     { width: 48px; height: 48px; border-radius: var(--md-r-md); flex: none;
-  display: inline-flex; align-items: center; justify-content: center; }
-.md3 .curated-titles { min-width: 0; }
-.md3 .curated-title  { display: block; font-family: var(--md-font-display); font-weight: 700; font-size: 16px;
-  color: var(--md-on-surface); letter-spacing: -.2px; }
-.md3 .curated-count  { display: block; font-size: 13px; color: var(--md-on-surface-variant); margin-top: 2px; }
-.md3 .curated-count b { color: var(--md-primary); font-weight: 700; }
-.md3 .curated-chips  { display: flex; flex-wrap: wrap; gap: 6px; }
-.md3 .curated-chip   { display: inline-flex; align-items: center; height: 26px; padding: 0 11px; border-radius: var(--md-r-full);
-  background: var(--md-sc); color: var(--md-on-surface-variant); font-size: 11.5px; font-weight: 600; white-space: nowrap; }
-.md3 .curated-cta    { margin-top: auto; padding-top: 2px; display: inline-flex; align-items: center; gap: 5px;
-  font-size: 13.5px; font-weight: 700; color: var(--md-primary); }
-.md3 .curated-cta svg { transition: transform var(--dur-2); }
-.md3 .curated-card:hover .curated-cta svg { transform: translateX(3px); }
-/* continuation modules: side-by-side on desktop, stacked below tablet */
-.md3 .continue-grid  { display: grid; grid-template-columns: 1fr 1fr; gap: 28px; align-items: start; }
-.md3 .continue-grid > div { min-width: 0; }
-/* "Zuletzt angesehen" / "Ähnlich" — full-width recommendation rows */
-.md3 .seen-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 12px; }
-.md3 .seen-head-ic { width: 30px; height: 30px; border-radius: var(--md-r-full); background: var(--md-primary-container);
-  display: inline-flex; align-items: center; justify-content: center; flex: none; }
-.md3 .seen-head-link { display: inline-flex; align-items: center; gap: 4px; font-size: 13.5px; font-weight: 600; flex: none; cursor: pointer; }
-.md3 .seen-list { display: flex; flex-direction: column; gap: 8px; }
-.md3 .seen-row { width: 100%; display: flex; align-items: center; gap: 14px; padding: 10px 14px 10px 10px;
-  background: var(--md-sc-lowest); text-align: left; box-shadow: var(--md-e1); border-color: var(--md-outline-variant);
-  transition: box-shadow var(--dur-2), transform var(--dur-2); }
-.md3 .seen-row:hover { box-shadow: var(--md-e2); transform: translateY(-1px); }
-.md3 .seen-row-media { width: 104px; height: 74px; border-radius: var(--md-r-sm); background: var(--md-sc); flex: none;
-  display: flex; align-items: center; justify-content: center; overflow: hidden; }
-.md3 .seen-row-img { width: 100%; height: 100%; object-fit: cover; }
-.md3 .seen-row-info { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
-.md3 .seen-row-toprow { display: flex; align-items: center; gap: 8px; min-width: 0; }
-.md3 .seen-row-title { font-family: var(--md-font-display); font-weight: 700; font-size: 15.5px; color: var(--md-on-surface);
-  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
-.md3 .seen-row-rate { flex: none; font-size: 10.5px; font-weight: 700; padding: 2px 8px; border-radius: var(--md-r-full); white-space: nowrap; }
-.md3 .seen-row-specs { font-size: 12.5px; color: var(--md-on-surface-variant); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
-.md3 .seen-row-price { display: flex; align-items: baseline; gap: 6px; margin-top: 1px; }
-.md3 .seen-row-price .num { font-weight: 700; font-size: 17px; color: var(--md-primary); letter-spacing: -.3px; }
-.md3 .seen-row-unit { font-size: 12px; color: var(--md-on-surface-variant); }
-.md3 .seen-row-cash { font-size: 12px; color: var(--md-on-surface-variant); margin-left: auto; white-space: nowrap; }
-/* LP comparison rows */
-.md3 .lp-vs-row { display: flex; align-items: center; gap: 16px; width: 100%; padding: 13px 2px;
-  background: none; border: 0; border-top: 1px solid var(--md-outline-variant); cursor: pointer; text-align: left; }
-.md3 .lp-vs-row:first-child { border-top: 0; }
-.md3 .lp-vs-verdict { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
-/* affordability module */
-.md3 .budget-card  { display: flex; align-items: center; gap: 28px; padding: 22px 26px; background: var(--md-sc-lowest); }
-.md3 .budget-copy  { flex: 1.1; min-width: 0; }
-.md3 .budget-slider{ flex: 1.4; min-width: 0; }
-/* guided finder banner — the cyan accent moment (dark blue stays exclusive to hero + sell band) */
-.md3 .finder-banner{ display: flex; align-items: center; justify-content: space-between; gap: 20px; width: 100%;
-  padding: 18px 22px; background: var(--md-accent-container); text-align: left; }
-.md3 .finder-steps { display: inline-flex; align-items: center; gap: 14px; flex: none; }
-.md3 .thumb-row      { display: grid; grid-template-columns: repeat(5,1fr); gap: 10px; }
-.md3 .scroll-row     { display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none; }
-.md3 .scroll-row::-webkit-scrollbar { display: none; }
-.md3 .carrow         { display: grid; grid-template-columns: 300px 1fr; }
-.md3 .carrow-media   { height: 100%; min-height: 230px; }
-
-/* grid card media — fixed 4:3, hairline seam so the white photo area reads as a zone */
-.md3 .cc-media { aspect-ratio: 4 / 3; width: 100%; border-bottom: 1px solid var(--md-outline-variant); }
-.md3 .cc-media .cardcar { height: 100%; }
-/* consistent studio treatment for ALL inventory photos: white backdrop + soft grounding floor
-   shadow, so mixed-source cutouts look uniform (Carvana/Cinch catalog look) */
-.md3 .cc-media, .md3 .listcard-media {
-  background: radial-gradient(58% 13px at 50% 90%, rgba(16,22,42,.15), rgba(16,22,42,0) 72%), #fff; }
-/* offer cards: border + soft shadow so they sit on the page (not borderless-floaty) */
-.md3 .cc-card  { box-shadow: var(--md-e1); }
-
-/* horizontal listing card (SRP): image | info | price */
-.md3 .listcard { display: grid; grid-template-columns: 300px 1fr 240px; align-items: stretch; }
-.md3 .listcard-media { position: relative; min-height: 100%; }
-.md3 .listcard-info  { padding: 16px 18px; display: flex; flex-direction: column; gap: 11px; min-width: 0; }
-.md3 .listcard-price { position: relative; padding: 16px 18px; border-left: 1px solid var(--md-outline-variant);
-  display: flex; flex-direction: column; justify-content: flex-start; gap: 16px; background: var(--md-sc-low); }
-/* NOTE: no own border-radius — the parent .mcard (radius --md-r-md) has overflow:hidden and clips
-   every column to the card corner. A larger radius here used to leave a card-bg sliver at the
-   bottom-right corner (the reported "corner / color" glitch). */
-/* spec strip (SRP info column) — one soft tinted container, airy icon+value pairs, no lines */
-.md3 .specstrip { display: flex; flex-wrap: wrap; gap: 9px 18px; padding: 11px 14px;
-  background: var(--md-sc-low); border-radius: var(--md-r-md); }
-/* filter rail: collapsible sections */
-.md3 .frail-group { border-bottom: 1px solid var(--md-outline-variant); }
-.md3 .frail-head { display: flex; align-items: center; justify-content: space-between; width: 100%;
-  padding: 13px 0; background: none; border: 0; cursor: pointer; text-align: left; gap: 12px; }
-.md3 .frail-sum { font-size: 12px; font-weight: 600; color: var(--md-primary); white-space: nowrap;
-  overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
-.md3 .frail-body { display: flex; flex-direction: column; gap: 10px; padding-bottom: 16px; }
-.md3 .frail-group:last-of-type { border-bottom: 0 !important; }
-.md3 .frow { display: flex; align-items: center; gap: 10px; font-size: 14px; cursor: pointer; }
-.md3 .frow-label { flex: 1; min-width: 0; color: var(--md-on-surface); }
-.md3 .frow-agg { margin-left: 5px; color: var(--md-on-surface-variant); font-size: 12px; font-variant-numeric: tabular-nums; white-space: nowrap; }
-/* Detailsuche page: give multi-select rows vertical breathing room (legacy list density). */
-.md3 .ds-page .frow { padding: 6px 0; }
-.md3 .frow-toggle { margin-top: 6px; padding-top: 10px; border-top: 1px solid var(--md-outline-variant); }
-/* live-count apply footer — sits at the end of the (non-sticky) filter list */
-.md3 .frail-foot { padding: 14px 0 2px; margin-top: 4px; }
-.md3 .sheet .frail-foot { display: none; }
-/* MD3 slider (standard: thin rounded track, filled active segment, round handle) — .md3 layer, no MUI.
-   NOTE: named .exslider (NOT .mslider — that class is the VDP finance-calculator slider further down). */
-.md3 .exslider { position: relative; height: 32px; margin: 6px 0 2px; touch-action: none; }
-.md3 .exslider-track { position: absolute; left: 0; right: 0; top: 50%; height: 4px; transform: translateY(-50%);
-  border-radius: 999px; background: var(--md-outline-variant); }
-.md3 .exslider-dots { display: none; }
-.md3 .exslider-fill { position: absolute; top: 50%; height: 4px; transform: translateY(-50%);
-  border-radius: 999px; background: var(--md-primary); pointer-events: none; }
-.md3 .exslider-wave { display: none; }
-/* native range inputs drive the interaction; only their round thumbs are hit-tested in range mode */
-.md3 .exslider input[type=range] { position: absolute; left: 0; top: 0; width: 100%; height: 100%; margin: 0;
-  background: none; -webkit-appearance: none; appearance: none; pointer-events: none; }
-.md3 .exslider--single input[type=range] { pointer-events: auto; }
-.md3 .exslider input[type=range]::-webkit-slider-runnable-track { height: 32px; background: none; border: 0; }
-.md3 .exslider input[type=range]::-moz-range-track { height: 32px; background: none; border: 0; }
-.md3 .exslider input[type=range]::-webkit-slider-thumb { -webkit-appearance: none; pointer-events: auto;
-  width: 18px; height: 18px; margin-top: 7px; border-radius: 50%; background: var(--md-primary); border: 0;
-  cursor: pointer; box-shadow: var(--md-e1); transition: box-shadow .15s var(--ease-standard); }
-.md3 .exslider input[type=range]::-moz-range-thumb { pointer-events: auto; width: 18px; height: 18px;
-  border-radius: 50%; background: var(--md-primary); border: 0; cursor: pointer; box-shadow: var(--md-e1); }
-.md3 .exslider input[type=range]:hover::-webkit-slider-thumb { box-shadow: 0 0 0 8px rgba(11,83,204,.12); }
-.md3 .exslider input[type=range]:active::-webkit-slider-thumb { box-shadow: 0 0 0 10px rgba(11,83,204,.18); }
-.md3 .exslider input[type=range]:hover::-moz-range-thumb { box-shadow: 0 0 0 8px rgba(11,83,204,.12); }
-.md3 .exslider input[type=range]:active::-moz-range-thumb { box-shadow: 0 0 0 10px rgba(11,83,204,.18); }
-.md3 .exslider input[type=range]:focus-visible::-webkit-slider-thumb { box-shadow: 0 0 0 3px var(--md-accent); }
-/* body-type tile grid */
-/* body-type tile grid: 2-col in the narrow rail, auto-fill on the full Detailsuche page */
-.md3 .body-tiles { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
-.md3 .ds-page .body-tiles { grid-template-columns: repeat(auto-fill, minmax(108px, 1fr)); gap: 12px; margin-bottom: 24px; }
-.md3 .body-tile { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 12px 6px;
-  border: 1.5px solid var(--md-outline-variant); border-radius: var(--md-r-md); background: var(--md-surface);
-  font: 600 12px/1.3 var(--md-font); color: var(--md-on-surface); cursor: pointer; transition: all var(--dur-1); text-align: center; }
-.md3 .ds-page .body-tile { padding: 16px 10px; gap: 9px; }
-.md3 .body-tile:hover:not(.on) { background: var(--md-surface-variant); border-color: var(--md-primary); }
-.md3 .body-tile.on { border-color: var(--md-primary); background: var(--md-primary-container); color: var(--md-on-primary-container); }
-.md3 .body-tile svg { color: var(--md-on-surface-variant); transition: color var(--dur-1); }
-.md3 .body-tile.on svg { color: var(--md-primary); }
-.md3 .body-tile .md-label-sm { color: var(--md-on-surface-variant); }
-/* payment paths: financing hero (eyebrow + big rate + terms) on top, Leasing/Kaufen quiet rows */
-.md3 .pricepaths { min-width: 0; }
-.md3 .pp-rows { display: flex; flex-direction: column; gap: 15px; }
-/* financing hero (legacy-style): eyebrow → big blue rate → terms line (fills the upper gap) */
-.md3 .pp-eyebrow { font-size: 11px; font-weight: 700; letter-spacing: .4px; text-transform: uppercase;
-  color: var(--md-on-surface-variant); margin-bottom: 4px; }
-.md3 .pp-hero-rate { display: flex; align-items: baseline; gap: 5px; }
-.md3 .pp-hero-val { font-size: 32px; font-weight: 700; color: var(--md-primary); letter-spacing: -1px; line-height: 1; }
-.md3 .pp-hero-unit { font-size: 13px; color: var(--md-on-surface-variant); }
-.md3 .pp-hero-terms { margin-top: 9px; font-size: 11.5px; color: var(--md-on-surface-variant); }
-/* separator line between the financing block and the leasing row (legacy-design parity) */
-.md3 .pp-lease-row { margin-top: 16px; padding-top: 16px; border-top: 1px solid var(--md-outline-variant); }
-.md3 .pp-sub-terms { margin-top: 3px; font-size: 11px; color: var(--md-on-surface-variant); text-align: right; }
-.md3 .pp-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
-.md3 .pp-row-label { display: inline-flex; align-items: center; gap: 5px; white-space: nowrap;
-  font-size: 13.5px; color: var(--md-on-surface-variant); }
-.md3 .pp-row-i { color: var(--md-outline); flex: none; }
-.md3 .pp-row-price { display: flex; flex-direction: column; align-items: flex-end; line-height: 1.08; min-width: 0; }
-.md3 .pp-old { font-size: 11.5px; color: var(--md-error); text-decoration: line-through; }
-.md3 .pp-now { display: inline-flex; align-items: baseline; gap: 4px; }
-.md3 .pp-unit { font-size: 11.5px; color: var(--md-on-surface-variant); }
-/* non-focus rates (Leasing / Kaufen): quiet + neutral so they don't compete with the focus rate */
-.md3 .pp-val { font-size: 19px; font-weight: 700; color: var(--md-on-surface); letter-spacing: -.4px; white-space: nowrap; }
-/* financing is the ONLY blue, dominant figure — big hero rate */
-.md3 .pp-row--focus .pp-row-label { color: var(--md-on-surface); font-weight: 700; }
-.md3 .pp-row--focus .pp-val { font-size: 31px; color: var(--md-primary); letter-spacing: -1px; }
-/* purchase group (Kaufen + meter + CTA) — divider above, anchored to the foot of the column */
-.md3 .pp-purchase { margin-top: auto; padding-top: 16px; border-top: 1px solid var(--md-outline-variant);
-  display: flex; flex-direction: column; gap: 14px; }
-/* CTA — spacing handled by the column's gap (no own margin) */
-.md3 .pp-cta { margin-top: 0; }
-/* Preisbewertung meter — top of the bottom zone (no longer auto-pinned; space-between does it) */
-.md3 .pp-meter-block { margin-top: 0; padding-top: 0; }
-.md3 .pp-market { margin-top: 9px; padding-top: 9px; border-top: 1px solid var(--md-outline-variant); }
-.md3 .pp-market-head { display: flex; flex-direction: column; gap: 2px; font-size: 12px; color: var(--md-on-surface-variant); }
-.md3 .pp-kauf { font-size: 11.5px; }
-.md3 .pp-kaufline { font-size: 12.5px; color: var(--md-on-surface-variant); }
-.md3 .pp-kaufline b { color: var(--md-on-surface); font-weight: 700; }
-/* segmented market-position meter (Preisbewertung shape) */
-.md3 .pp-meter { display: flex; gap: 3px; margin-top: 9px; }
-.md3 .pp-seg { flex: 1; height: 7px; border-radius: 3px; transition: opacity var(--dur-2); }
-.md3 .pp-mlabel { display: inline-block; margin-top: 7px; font-size: 11px; color: var(--md-on-surface-variant); }
-.md3 .pp-mlabel--good { color: var(--md-good); font-weight: 700; }
-/* activity now sits under the CTA */
-.md3 .pp-cta + .pp-activity, .md3 .listcard-price > div > .pp-activity { margin-top: 10px; justify-content: center; }
-.md3 .pp-bar { position: relative; height: 6px; border-radius: 999px; margin-top: 9px;
-  background: linear-gradient(90deg, var(--md-good) 0%, #E8B500 58%, #E8601A 100%); }
-.md3 .pp-bar-dot { position: absolute; top: 50%; width: 13px; height: 13px; border-radius: 50%; background: #fff;
-  border: 2.5px solid var(--md-on-surface); transform: translate(-50%, -50%); box-shadow: var(--md-e1); }
-/* muted buyer activity (#5) */
-.md3 .pp-activity { display: flex; align-items: center; gap: 5px; margin-top: 12px; font-size: 11px;
-  color: var(--md-on-surface-variant); white-space: nowrap; }
-.md3 .pp-activity svg { flex: none; }
-.md3 .gallery-img    { width: 100%; height: 420px; object-fit: cover; display: block; background: var(--md-sc); }
-.md3 .sec            { padding: 48px 24px 0; }
-
-/* mobile app bar / bottom bar visibility */
-.md3 .show-mobile { display: none !important; }
-.md3 .show-tablet { display: none !important; } /* visible ≤980 — tablet AND phone */
-.md3 .srp-sort { width: 186px; }
-.md3 .srp-sort select { font-size: 13px; }
-.md3 .srp-sort .lucide { pointer-events: none; } /* let taps fall through to the native select */
-.md3 .price-card { position: sticky; top: 88px; }
-
-/* CDP offer card — payment-type tabs on top (MD3 underline / primary tabs) */
-.md3 .fin-tabs { display: flex; border-bottom: 1px solid var(--md-outline-variant); margin-bottom: 18px; }
-.md3 .fin-tab { flex: 1; background: none; border: 0; padding: 11px 4px; cursor: pointer; font: inherit;
-  font-size: 13.5px; font-weight: 600; color: var(--md-on-surface-variant); border-bottom: 2px solid transparent;
-  margin-bottom: -1px; transition: color .15s, border-color .15s; }
-.md3 .fin-tab.on { color: var(--md-primary); border-bottom-color: var(--md-primary); }
-.md3 .fin-tab:hover:not(.on) { color: var(--md-on-surface); }
-/* 2-col grid: left grows, right fixed 148px — pill (row 1) and bar (row 2) share a column edge, never wrap */
-.md3 .fin-price-grid { display: grid; grid-template-columns: 1fr 148px; gap: 6px 16px; align-items: center; margin-top: 8px; }
-.md3 .fin-rate-main { min-width: 0; }
-/* rating pill — light tier-tinted bg, tier-colored text + icon (bg/color set inline per tier) */
-.md3 .fin-eval-pill { display: inline-flex; align-items: center; gap: 5px; padding: 6px 13px;
-  border-radius: var(--md-r-full); font-size: 14px; font-weight: 700; line-height: 1; white-space: nowrap; }
-.md3 .fin-eval-pill .lucide { flex: none; }
-/* gradient spectrum bar + circle thumb — replaces opacity-segment design */
-.md3 .fin-eval-bar { position: relative; width: 100%; height: 9px; border-radius: 5px;
-  background: linear-gradient(to right, #0F7B43, #72C02C, #FFC107, #FF6B35, #C62828); }
-.md3 .fin-eval-thumb { position: absolute; top: 50%; transform: translate(-50%, -50%);
-  width: 17px; height: 17px; border-radius: 50%; background: #fff;
-  border: 3px solid currentColor; box-shadow: 0 1px 4px rgba(0,0,0,.3); pointer-events: none; }
-/* UVP (struck list price) — cash mode only */
-.md3 .fin-kauf { margin-top: 8px; font-size: 13px; color: var(--md-on-surface-variant); }
-.md3 .fin-kauf s { color: var(--md-error); }
-/* condition summary — left cell of row 2 in fin-price-grid */
-.md3 .fin-cond { min-width: 0; font-size: 12.5px; color: var(--md-on-surface-variant); }
-/* Rate-edit (Rate anpassen) sits between the rate and the CTA now */
-.md3 .fin-adjust { margin-top: 14px; }
-/* auto.de-ID in front of the Finanzierungs-/Leasingdetails link — one row, divider above */
-.md3 .fin-info { margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--md-outline-variant);
-  display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
-.md3 .fin-id { font-size: 12px; color: var(--md-on-surface-variant); white-space: nowrap; }
-/* phone CTA — useful only on touch; hidden on desktop, shown ≤980 (tablet + phone) */
-.md3 .fin-call { display: none; margin-top: 8px; }
-/* Laufzeit as selectable chips — 4-column grid, filled selected state */
-.md3 .term-chips { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
-.md3 .term-chip { display: flex; align-items: center; justify-content: center; gap: 3px; height: 42px; padding: 0;
-  cursor: pointer; border-radius: 10px; border: 1.5px solid var(--md-outline-variant); background: var(--md-surface);
-  color: var(--md-on-surface); font: inherit; font-size: 15px; font-weight: 700;
-  transition: background .15s, border-color .15s, color .15s; }
-.md3 .term-chip .tc-unit { font-size: 11px; font-weight: 500; color: var(--md-on-surface-variant); }
-.md3 .term-chip:hover:not(.on) { border-color: var(--md-primary); background: color-mix(in srgb, var(--md-primary) 6%, transparent); }
-.md3 .term-chip.on { background: var(--md-primary); border-color: var(--md-primary); color: #fff; }
-.md3 .term-chip.on .tc-unit { color: rgba(255,255,255,.7); }
-
-/* enriched vehicle enquiry — trust aside + form */
-.md3 .enquiry-grid { display: grid; grid-template-columns: 0.85fr 1.15fr; align-items: stretch; }
-.md3 .enquiry-aside { background: var(--md-sc-low); padding: 24px; border-right: 1px solid var(--md-outline-variant);
-  display: flex; flex-direction: column; }
-.md3 .enquiry-ico { width: 36px; height: 36px; border-radius: var(--md-r-full); background: var(--md-primary-container);
-  display: flex; align-items: center; justify-content: center; flex: none; }
-.md3 .enquiry-benefits { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 11px; }
-.md3 .enquiry-benefits li { display: flex; align-items: center; gap: 10px; font-size: 13.5px; color: var(--md-on-surface); }
-.md3 .enquiry-benefits li .lucide { flex: none; }
-.md3 .enquiry-phone { display: inline-flex; align-items: center; gap: 8px; margin-top: auto; padding-top: 18px;
-  color: var(--md-primary); font-weight: 700; font-size: 16px; text-decoration: none; }
-.md3 .enquiry-form { padding: 24px; }
-@media (max-width: 780px) {
-  .md3 .enquiry-grid { grid-template-columns: 1fr; }
-  .md3 .enquiry-aside { border-right: 0; border-bottom: 1px solid var(--md-outline-variant); }
-  .md3 .enquiry-phone { margin-top: 16px; }
-}
-
-/* sticky mobile CTA bar (VDP) */
-.md3 .vdp-bottom-bar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 60; background: var(--md-sc-lowest);
-  border-top: 1px solid var(--md-outline-variant); box-shadow: 0 -2px 14px rgba(0,0,0,.10);
-  padding: 10px 16px; align-items: center; gap: 14px; }
-
-/* bottom-sheet (SRP filters) — sticky header + scrollable body + sticky action bar, slide-up entrance */
-.md3 .sheet-scrim { position: fixed; inset: 0; background: rgba(16,22,42,.5); z-index: 70;
-  animation: sheet-fade var(--dur-2) var(--ease-standard); }
-.md3 .sheet { position: fixed; left: 0; right: 0; bottom: 0; z-index: 71; background: var(--md-surface);
-  border-radius: var(--md-r-xl) var(--md-r-xl) 0 0; max-height: 92vh; display: flex; flex-direction: column;
-  box-shadow: 0 -8px 30px rgba(16,22,42,.22); animation: sheet-up var(--dur-3) var(--ease-emphasized); }
-/* non-scrolling header: drag handle + title + reset + close */
-.md3 .sheet-head { flex: none; padding: 0 16px; background: var(--md-surface);
-  border-radius: var(--md-r-xl) var(--md-r-xl) 0 0; border-bottom: 1px solid var(--md-outline-variant); }
-.md3 .sheet-handle { width: 36px; height: 4px; border-radius: 2px; background: var(--md-outline-variant); margin: 10px auto 6px; }
-.md3 .sheet-head-row { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 2px 0 10px; }
-.md3 .sheet-head-row h2 { margin: 0; font-size: 16px; font-weight: 700; }
-/* scrollable filter body */
-.md3 .sheet-body { flex: 1 1 auto; min-height: 0; overflow-y: auto; -webkit-overflow-scrolling: touch;
-  overscroll-behavior: contain; padding: 2px 16px 6px; }
-/* sticky action bar */
-.md3 .sheet-foot { flex: none; padding: 12px 16px calc(12px + env(safe-area-inset-bottom)); background: var(--md-surface);
-  border-top: 1px solid var(--md-outline-variant); box-shadow: 0 -6px 18px rgba(16,22,42,.08); }
-@keyframes sheet-up { from { transform: translateY(100%); } to { transform: translateY(0); } }
-@keyframes sheet-fade { from { opacity: 0; } to { opacity: 1; } }
-
-/* Finanzierungs-/Leasingdetails popup — centered modal (desktop), bottom-sheet (mobile) */
-.md3 .fin-modal-scrim { position: fixed; inset: 0; z-index: 60; background: rgba(8,12,24,.5);
-  display: flex; align-items: center; justify-content: center; padding: 24px; animation: sheet-fade var(--dur-2); }
-.md3 .fin-modal { background: var(--md-sc-lowest); border-radius: var(--md-r-lg); width: 100%; max-width: 460px;
-  max-height: 88vh; display: flex; flex-direction: column; overflow: hidden; box-shadow: var(--md-e3); }
-.md3 .fin-modal-head { display: flex; align-items: center; justify-content: space-between; gap: 12px;
-  padding: 16px 20px; border-bottom: 1px solid var(--md-outline-variant); flex: none; }
-.md3 .fin-modal-body { padding: 18px 20px 22px; overflow-y: auto; }
-@media (max-width: 600px) {
-  .md3 .fin-modal-scrim { align-items: flex-end; padding: 0; }
-  .md3 .fin-modal { max-width: none; max-height: 90vh; border-radius: var(--md-r-lg) var(--md-r-lg) 0 0;
-    animation: sheet-up var(--dur-2); }
-}
-
-/* mobile dropdown menu (TopBar) */
-.md3 .topbar-menu { position: absolute; top: 100%; left: 0; right: 0; background: var(--md-surface);
-  border-bottom: 1px solid var(--md-outline-variant); box-shadow: var(--md-e2); padding: 8px 16px 16px; }
-/* language segmented DE|EN — active tab filled, inactive ghost */
-.md3 .lang-seg { display: inline-flex; align-items: center; border: 1.5px solid var(--md-outline-variant);
-  border-radius: var(--md-r-full); overflow: hidden; flex: none; }
-.md3 .lang-seg-btn { display: flex; align-items: center; justify-content: center; height: 32px; padding: 0 11px;
-  font: inherit; font-size: 11.5px; font-weight: 700; letter-spacing: .5px; cursor: pointer;
-  border: 0; background: transparent; color: var(--md-on-surface-variant); transition: background .15s, color .15s; }
-.md3 .lang-seg-btn:first-child { border-right: 1.5px solid var(--md-outline-variant); }
-.md3 .lang-seg-btn.on { background: var(--md-primary); color: #fff; }
-.md3 .lang-seg-btn:not(.on):hover { background: color-mix(in srgb, var(--md-primary) 8%, transparent); }
-.md3 .hero-spacer { display: none; }
-
-@media (max-width: 980px) {
-  .md3 .continue-grid  { grid-template-columns: 1fr; gap: 24px; }
-  .md3 .hero-grid      { grid-template-columns: 1fr; gap: 24px; }
-  .md3 .listcard       { grid-template-columns: 260px 1fr; }
-  /* tablet: price column spans full width below image+info, zones stack in a normal column */
-  .md3 .listcard-price { grid-column: 1 / -1; border-left: 0; border-top: 1px solid var(--md-outline-variant);
-    flex-direction: column; justify-content: flex-start; gap: 12px; }
-  .md3 .listcard-price .pp-activity { display: none; }
-  .md3 .hero-inner     { padding: 32px 20px 28px; }
-  .md3 .cards-3        { grid-template-columns: repeat(2,1fr); }
-  .md3 .brand-grid     { grid-template-columns: repeat(4,1fr); }
-  .md3 .steps-3        { grid-template-columns: 1fr; gap: 20px; }
-  .md3 .guarantee-grid { grid-template-columns: repeat(2,1fr); }
-  .md3 .gitem          { border-left: 0; }
-  .md3 .gitem:nth-child(even) { border-left: 1px solid var(--md-outline-variant); }
-  .md3 .gitem:nth-child(n+3)  { border-top: 1px solid var(--md-outline-variant); }
-  .md3 .mag-grid       { grid-template-columns: 1fr; }
-  .md3 .zustand-grid   { grid-template-columns: repeat(2, 1fr); }
-  .md3 .steps-4        { grid-template-columns: repeat(2, 1fr); gap: 20px; }
-  .md3 .hiw-step:not(:last-child)::after { display: none; }
-  .md3 .curated-grid   { grid-template-columns: repeat(2,1fr); }
-  .md3 .footer-grid    { grid-template-columns: repeat(3,1fr); gap: 24px; }
-  .md3 .hide-tablet    { display: none !important; }
-  .md3 .show-tablet    { display: flex !important; }
-  .md3 .srp-rail       { display: none; } /* rail is desktop-only; ≤980 uses the filter sheet */
-  .md3 .srp-grid       { grid-template-columns: 1fr; }
-  .md3 .vdp-grid       { display: flex; flex-direction: column; }
-  .md3 .vdp-gallery    { order: 1; } .md3 .vdp-aside { order: 2; } .md3 .vdp-details { order: 3; }
-  .md3 .vdp-aside      { position: static; }
-  .md3 .price-card     { position: static; }
-  .md3 .fin-call       { display: block; } /* tap-to-call restored on touch */
-  .md3 .vdp-gallerybox { height: auto; aspect-ratio: 4 / 3; }
-  .md3 .press-wrap     { position: static !important; }
-  .md3 .press-bar      { transform: none !important; margin: 20px 16px 0 !important; height: auto !important;
-                    padding: 14px 18px !important; flex-wrap: wrap; }
-  .md3 .hero-spacer    { display: none !important; }
-  .md3 .gallery-img    { height: 320px; }
-}
-
-@media (max-width: 600px) {
-  .md3 .cards-3, .md3 .cards-2 { grid-template-columns: 1fr; }
-  /* listing card stacks: image (4:3) → info → price */
-  .md3 .listcard { grid-template-columns: 1fr; }
-  .md3 .listcard-media { aspect-ratio: 4 / 3; min-height: 0; }
-  .md3 .listcard-price { border-left: 0; border-top: 1px solid var(--md-outline-variant); padding: 14px 16px;
-    flex-direction: column; justify-content: flex-start; align-items: stretch; gap: 14px; }
-  .md3 .listcard-price .pricepaths { flex: none; min-width: 0; }
-  /* only the data-less activity line is hidden on phone */
-  .md3 .listcard-price .pp-activity { display: none; }
-  .md3 .listcard-price .pp-cta { margin-top: 0; }
-  .md3 .listcard-price .mbtn { width: 100%; margin-top: 0 !important; }
-  .md3 .listcard-price .pp-meter-block { margin-top: 0; padding-top: 0; }
-  .md3 .listcard-info { padding: 14px 16px 6px; }
-  /* mobile: show all spec facts (km/EZ/Getriebe/Kraftstoff/Leistung/… wrap to 2 lines) — the
-     4-fact cap dropped Leistung (kW/PS) + Verfügbarkeit, which the legacy mobile card shows. */
-  .md3 .listcard-chips { flex-wrap: nowrap !important; overflow: hidden; }
-  .md3 .listcard-chips > :nth-child(n+3) { display: none; }
-  .md3 .srp-main { padding: 12px 16px 64px !important; }
-  .md3 .srp-sort { width: 146px; }
-  /* save-search banner: full-width button on phone (!important beats the inline desktop flex) */
-  .md3 .savesearch { flex-wrap: wrap; }
-  .md3 .savesearch > div { flex: 1 1 calc(100% - 56px) !important; }
-  .md3 .savesearch .mbtn { flex: 1 1 100% !important; justify-content: center; }
-  .md3 .srp-bar { position: sticky; top: 64px; z-index: 20; background: var(--md-surface); padding: 8px 0; margin: 0 0 8px;
-    box-shadow: 0 6px 8px -8px rgba(0,0,0,.3); }
-  .md3 .field-grid-2   { grid-template-columns: 1fr; gap: 10px; }
-  .md3 .hero-search    { padding: 18px !important; }
-  .md3 .brand-grid     { grid-template-columns: repeat(3,1fr); gap: 12px; }
-  .md3 .footer-grid    { grid-template-columns: repeat(2,1fr); gap: 20px; }
-  .md3 .vdp-specs      { grid-template-columns: 1fr; gap: 14px; }
-  /* spec table clamps to 6 rows on phone until "Alle Daten anzeigen" */
-  .md3 .vdp-specs--clamp .specitem:nth-child(n+7) { display: none; }
-  .md3 .gitem          { padding: 20px 18px; }
-  .md3 .steps-4        { grid-template-columns: 1fr; gap: 18px; }
-  .md3 .hiw-step       { flex-direction: row; align-items: flex-start; text-align: left; gap: 14px; }
-  .md3 .hiw-step:not(:last-child)::after { display: none; }
-  .md3 .hiw-icon-wrap  { margin-bottom: 0; flex: none; }
-  /* --- VDP header card: structured phone layout --- */
-  /* badge above title (no cramped side-by-side) */
-  .md3 .vdp-headrow  { flex-direction: column-reverse; align-items: flex-start; gap: 10px; }
-  /* facts: aligned 2-column grid instead of a wrapping dot-line */
-  .md3 .vdp-meta     { display: grid; grid-template-columns: 1fr 1fr; gap: 11px 14px; margin-top: 14px; }
-  .md3 .vdp-meta > span + span::before { content: none; }
-  .md3 .vdp-meta > span { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
-  /* highlights: one swipeable line, no ragged wrap */
-  .md3 .vdp-highlights { flex-wrap: nowrap !important; overflow-x: auto; scrollbar-width: none;
-    width: 0; min-width: 100%; }
-  .md3 .vdp-highlights::-webkit-scrollbar { display: none; }
-  .md3 .vdp-highlights .chip { flex: none; }
-  /* condition row: 2×2 on phone */
-  .md3 .zustand-grid   { grid-template-columns: 1fr 1fr; }
-  .md3 .zustand-tile   { border-left: 0; padding: 12px 0; }
-  .md3 .zustand-tile:nth-child(even) { border-left: 1px solid var(--md-outline-variant); padding-left: 14px; }
-  .md3 .zustand-tile:nth-child(n+3)  { border-top: 1px solid var(--md-outline-variant); }
-  .md3 .curated-grid   { grid-template-columns: 1fr; gap: 12px; }
-  .md3 .seen-row-cash  { display: none; }
-  .md3 .lp-vs-row      { flex-wrap: wrap; gap: 6px 10px; }
-  .md3 .lp-vs-verdict  { flex: 1 1 100%; white-space: normal; order: 3; }
-  .md3 .budget-card    { flex-direction: column; align-items: stretch; gap: 18px; padding: 20px; }
-  .md3 .budget-card .mbtn { width: 100%; justify-content: center; }
-  .md3 .finder-banner  { flex-direction: column; align-items: stretch; gap: 16px; }
-  .md3 .finder-steps   { justify-content: space-between; gap: 8px; }
-  .md3 .finder-steps .mbtn { display: none; }
-  /* SRP "Mehr laden": results beyond 4 stay hidden until expanded */
-  .md3 .srp-list:not(.srp-list--expanded) .srp-extra { display: none !important; }
-  .md3 .carrow         { grid-template-columns: 1fr; }
-  .md3 .thumb-row      { grid-template-columns: repeat(4,1fr); }
-  .md3 .sec            { padding: 36px 16px 0; }
-  .md3 .hero-inner     { padding: 24px 16px 22px; }
-  .md3 .gallery-img    { height: 230px; }
-  .md3 .hide-mobile    { display: none !important; }
-  .md3 .show-mobile    { display: flex !important; }
-  .md3 .press-logos    { flex-wrap: wrap; justify-content: center !important; gap: 14px 20px !important; }
-  .md3 .mbtn--lg       { height: 46px; }
-  /* compact hero so the search card + button surface above the fold */
-  .md3 .hero-inner     { padding: 16px 16px 18px !important; }
-  .md3 .hero-badge     { margin-bottom: 10px !important; font-size: 12px !important; }
-  .md3 .hero-h1        { font-size: 31px !important; letter-spacing: -.9px !important; margin: 0 0 10px !important; }
-  .md3 .hero-sub       { font-size: 14px !important; margin: 0 0 14px !important; }
-  .md3 .hero-stats     { gap: 16px !important; }
-  .md3 .hero-stats .num{ font-size: 17px !important; }
-  .md3 .hero-stats .st-lbl { font-size: 11px !important; }
-  .md3 .hero-grid      { gap: 16px !important; }
-}
-
-/* ---------- CDP modules ---------- */
-.md3 .mslider { -webkit-appearance: none; appearance: none; width: 100%; height: 6px; border-radius: var(--md-r-full);
-  background: var(--md-sc-highest); outline: 0; cursor: pointer; }
-.md3 .mslider::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; width: 22px; height: 22px; border-radius: 50%;
-  background: var(--md-primary); border: 3px solid #fff; box-shadow: var(--md-e2); cursor: pointer; }
-.md3 .mslider::-moz-range-thumb { width: 22px; height: 22px; border-radius: 50%; background: var(--md-primary); border: 3px solid #fff; box-shadow: var(--md-e2); cursor: pointer; }
-.md3 .eq-cols  { column-count: 2; column-gap: 32px; }
-.md3 .pmv-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 28px; }
-/* trust strip — quiet one-line reassurance, NOT a card band */
-.md3 .trust-strip { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; row-gap: 10px; padding: 2px 4px; }
-.md3 .trust-strip > div { display: inline-flex; align-items: center; gap: 8px; white-space: nowrap;
-  font-size: 13.5px; font-weight: 600; color: var(--md-on-surface-variant); }
-.md3 .trust-strip > div + div::before { content: ''; width: 4px; height: 4px; border-radius: 50%;
-  background: var(--md-outline-variant); margin: 0 14px; }
-
-@media (max-width: 600px) {
-  .md3 .eq-cols  { column-count: 1; }
-  .md3 .pmv-grid { grid-template-columns: 1fr; gap: 22px; }
-  .md3 .trust-strip { display: grid; grid-template-columns: 1fr 1fr; gap: 12px 16px; justify-items: start; }
-  .md3 .trust-strip > div + div::before { content: none; }
-}
-
-/* ---------- CO₂ / energy label — compact horizontal scale ---------- */
-.md3 .co2-scale { display: flex; gap: 4px; align-items: stretch; }
-.md3 .co2-seg   { flex: 1; height: 32px; border-radius: 7px; color: #fff; font-weight: 800; font-size: 12.5px;
-  display: flex; align-items: center; justify-content: center; opacity: .3; transition: opacity var(--dur-2) var(--ease-standard); }
-.md3 .co2-seg--on { opacity: 1; box-shadow: 0 2px 8px rgba(16,22,42,.25), 0 0 0 2px #fff inset; transform: scale(1.06); }
-.md3 .co2-stats { display: flex; flex-wrap: wrap; gap: 10px 26px; margin-bottom: 16px; }
-.md3 .dealer-map { position: relative; height: 130px; border-radius: var(--md-r-sm); overflow: hidden;
-  background: #e8edf3;
-  background-image:
-    linear-gradient(rgba(11,83,204,.07) 1px, transparent 1px),
-    linear-gradient(90deg, rgba(11,83,204,.07) 1px, transparent 1px),
-    linear-gradient(120deg, #dfe6ee, #eef2f7);
-  background-size: 26px 26px, 26px 26px, 100% 100%; }
-.md3 .dealer-map::after { content: ""; position: absolute; left: -10%; top: 60%; width: 130%; height: 10px;
-  background: rgba(22,184,232,.35); transform: rotate(-8deg); }
-.md3 .dealer-pin { position: absolute; left: 50%; top: 50%; transform: translate(-50%,-100%);
-  width: 34px; height: 34px; border-radius: 50% 50% 50% 0; background: var(--md-primary);
-  display: flex; align-items: center; justify-content: center; rotate: 45deg; box-shadow: var(--md-e2); }
-.md3 .dealer-pin .lucide { rotate: -45deg; }
-
-/* VDP: floating back button over the gallery — phone only (breadcrumb is hidden there) */
-.md3 .vdp-back { display: none; position: absolute; top: 12px; left: 14px; z-index: 3; }
-
-@media (max-width: 600px) {
-  /* full-bleed gallery: edge-to-edge, app-like (production pattern) */
-  .md3 .vdp-back { display: flex; }
-  .md3 .vdp-gallerybox { margin: -14px -24px 0; border-radius: 0; border: 0; box-shadow: none; }
-}
-
-/* ---------- save-search bar ---------- */
-.md3 .savesearch { display: flex; align-items: center; gap: 14px; }
-
-/* ---------- home: recent search, brand scroller ---------- */
-
-/* sell-your-car: petrol-cyan image banner (distinct from the hero blue) */
-.md3 .sell-band { position: relative; overflow: hidden; padding: 32px 36px; border: 0; min-height: 190px;
-  background: linear-gradient(115deg, #04293C 0%, #075A75 58%, #0A7FA0 100%); display: flex; align-items: center; }
-.md3 .sell-copy { position: relative; z-index: 1; max-width: 60%; min-width: 0; }
-.md3 .sell-steps { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
-.md3 .sell-car { position: absolute; right: -28px; bottom: -24px; width: 400px; max-width: 44%; object-fit: contain;
-  filter: drop-shadow(0 24px 32px rgba(0,0,0,.4)); }
-
-/* SEO directory */
-.md3 .seo-grid { display: grid; grid-template-columns: repeat(4,1fr); gap: 28px; }
-
-/* offers grid: dense 2-col on phone */
-@media (max-width: 600px) {
-  .md3 .cards-offers { grid-template-columns: 1fr; gap: 14px; }
-  .md3 .seo-grid { grid-template-columns: 1fr 1fr; gap: 22px; }
-  .md3 .sell-band { padding: 22px 18px; }
-  .md3 .sell-copy { max-width: 100%; }
-}
-.md3 .recent-search { display: flex; align-items: center; gap: 14px; padding: 12px 16px; background: var(--md-sc-lowest); }
-.md3 .recent-ic { width: 40px; height: 40px; border-radius: var(--md-r-full); background: var(--md-primary-container);
-  display: flex; align-items: center; justify-content: center; flex: none; }
-.md3 .brand-scroller { gap: 12px; padding-bottom: 6px; }
-.md3 .brand-chip { flex: none; background: none; border: 0; cursor: pointer; display: flex; flex-direction: column;
-  align-items: center; gap: 8px; width: 84px; padding: 4px; }
-.md3 .brand-circle { width: 64px; height: 64px; border-radius: 50%; background: var(--md-sc-lowest);
-  box-shadow: var(--md-e1); display: flex; align-items: center; justify-content: center;
-  transition: box-shadow var(--dur-1) var(--ease-standard), transform var(--dur-1) var(--ease-standard); }
-.md3 .brand-chip:hover .brand-circle { box-shadow: var(--md-e3); transform: translateY(-2px); }
-
-/* ---------- Landing page ---------- */
-.md3 .lp-hero  { display: grid; grid-template-columns: 1fr auto; gap: 32px; align-items: center; }
-.md3 .lp-stats { display: flex; gap: 26px; padding: 18px 24px; border-radius: var(--md-r-md); background: rgba(255,255,255,.10); flex: none; }
-.md3 .lp-text  { display: grid; grid-template-columns: 1fr 1fr; gap: 36px; align-items: start; }
-.md3 .lp-models { display: grid; grid-template-columns: repeat(auto-fill, minmax(176px, 1fr)); gap: 12px; }
-.md3 .lp-model-tile { padding: 13px 16px; text-align: left; background: var(--md-sc-lowest); display: flex; flex-direction: column; gap: 3px; }
-.md3 .lp-duo   { display: grid; grid-template-columns: 1.25fr 1fr; gap: 18px; align-items: stretch; }
-.md3 .lp-table-head { display: grid; grid-template-columns: 1fr 96px 110px; gap: 12px; padding: 8px 0;
-  font-size: 11.5px; font-weight: 700; letter-spacing: .4px; text-transform: uppercase; color: var(--md-on-surface-variant);
-  border-bottom: 1px solid var(--md-outline-variant); }
-.md3 .lp-table-head span:nth-child(n+2), .md3 .lp-table-row span:nth-child(n+2) { text-align: right; }
-.md3 .lp-table-row { display: grid; grid-template-columns: 1fr 96px 110px; gap: 12px; align-items: center;
-  width: 100%; padding: 11px 0; background: none; border: 0; cursor: pointer; text-align: left;
-  border-bottom: 1px solid var(--md-outline-variant); font-family: inherit; font-size: 14px; color: var(--md-on-surface); }
-.md3 .lp-table-row:last-child { border-bottom: 0; }
-.md3 .lp-table-row:hover .md-title-sm { color: var(--md-primary); }
-@media (max-width: 900px) {
-  .md3 .lp-hero  { grid-template-columns: 1fr; gap: 22px; }
-  .md3 .lp-stats { align-self: start; }
-  .md3 .lp-text  { grid-template-columns: 1fr; gap: 28px; }
-  .md3 .lp-duo   { grid-template-columns: 1fr; }
-}
-@media (max-width: 600px) {
-  .md3 .lp-stats { gap: 18px; padding: 14px 16px; width: 100%; justify-content: space-between; }
-  /* phone: model tiles collapse to ONE swipeable row so cars stay near the top */
-  .md3 .lp-models { display: flex; overflow-x: auto; gap: 10px; scrollbar-width: none; padding-bottom: 4px; }
-  .md3 .lp-models::-webkit-scrollbar { display: none; }
-  .md3 .lp-model-tile { flex: none; padding: 10px 14px; }
-  .md3 .lp-table-head, .md3 .lp-table-row { grid-template-columns: 1fr 82px 92px; gap: 8px; }
-}
-
-/* ---------- Dealer Dashboard — md3 card chrome (.dash-*) ----------
-   Additive: these are scoped under .md3 so they ONLY apply when the dashboard
-   renders inside the flagged `md3 dlr-page` root. The legacy variant has no
-   .md3 ancestor → none of these match → legacy look is byte-identical. */
-.md3 .dash-page-title { font: 700 28px var(--md-font); color: var(--md-on-surface); margin: 0 0 24px; letter-spacing: -.4px; }
-.md3 .dash-card { background: var(--md-surface, #fff); border: 1px solid var(--md-outline-variant); border-radius: var(--md-r-lg, 16px); box-shadow: var(--md-e1); padding: 20px; margin-bottom: 20px; min-height: auto; }
-.md3 .dash-card-title { font: 700 17px var(--md-font); color: var(--md-on-surface); margin: 0 0 14px; }
-.md3 .dash-link { display: inline-block; margin-top: 16px; font: 600 14px var(--md-font); color: var(--md-primary); text-decoration: none; }
-.md3 .dash-link:hover { text-decoration: underline; }
-.md3 .dash-link--primary { background: var(--md-primary); color: #fff; padding: 10px 18px; border-radius: var(--md-r-full); box-shadow: var(--md-e1); }
-.md3 .dash-link--primary:hover { text-decoration: none; opacity: .92; }
-.md3 .dash-table { width: 100%; border-collapse: collapse; font-size: 13.5px; }
-.md3 .dash-table th { text-align: left; font: 600 12.5px var(--md-font); color: var(--md-on-surface-variant); padding: 6px 8px; border-bottom: 1px solid var(--md-outline-variant); }
-.md3 .dash-table td { padding: 9px 8px; border-bottom: 1px solid var(--md-outline-variant); color: var(--md-on-surface); vertical-align: middle; }
-.md3 .dash-table tr:last-child td { border-bottom: 0; }
-
-/* ============================================================================
-   LEGACY → md3 IN-PLACE BRIDGE  (account / dealer / admin pages)
-   ----------------------------------------------------------------------------
-   Restyles the legacy MUI / fe-ui-core primitives to md3 tokens WITHOUT changing
-   any structure or layout. Scoped under `.md3`, so it only affects the flagged
-   legacy pages (which wrap their unchanged legacy markup in a `.md3` root).
-   • SRP / VDP / Detailsuche / Checkout / Auth use the autobahn primitives (not
-     MUI) → unaffected.  • MUI Slider is intentionally NOT touched (used by the
-     SRP filters).  • Modals render in a body portal (outside `.md3`) → unchanged.
-   Items move to md3 in place; positions/grids stay exactly as the legacy layout.
-   ============================================================================ */
-
-/* — Buttons (fe-ui-core Button === @mui/material Button) — */
-.md3 .MuiButton-root { font-family: var(--md-font) !important; text-transform: none !important; border-radius: var(--md-r-full) !important; font-weight: 600 !important; letter-spacing: normal !important; box-shadow: none !important; }
-.md3 .MuiButton-root:hover { box-shadow: none !important; }
-.md3 .MuiButton-containedPrimary:not(.Mui-disabled) { background-color: var(--md-primary) !important; color: var(--md-on-primary) !important; }
-.md3 .MuiButton-containedPrimary:not(.Mui-disabled):hover { background-color: var(--autode-blau-strong) !important; }
-.md3 .MuiButton-containedSecondary:not(.Mui-disabled) { background-color: var(--md-error) !important; color: #fff !important; }
-.md3 .MuiButton-outlinedPrimary:not(.Mui-disabled) { border: 1px solid var(--md-primary) !important; color: var(--md-primary) !important; background: transparent !important; }
-.md3 .MuiButton-textPrimary, .md3 .MuiButton-text { color: var(--md-primary) !important; }
-.md3 .MuiButton-textError, .md3 .MuiButton-outlinedError { color: var(--md-error) !important; }
-
-/* — Outlined inputs: TextField / FormMaterialField / Autocomplete / DatePicker — */
-.md3 .MuiOutlinedInput-root { border-radius: var(--md-r-sm) !important; font-family: var(--md-font) !important; }
-.md3 .MuiOutlinedInput-notchedOutline { border-color: var(--md-outline-variant) !important; }
-.md3 .MuiOutlinedInput-root:hover .MuiOutlinedInput-notchedOutline { border-color: var(--md-outline) !important; }
-.md3 .MuiOutlinedInput-root.Mui-focused .MuiOutlinedInput-notchedOutline { border-color: var(--md-primary) !important; border-width: 2px !important; }
-.md3 .MuiInputLabel-root { font-family: var(--md-font) !important; }
-.md3 .MuiInputLabel-root.Mui-focused { color: var(--md-primary) !important; }
-.md3 .MuiInputBase-input, .md3 .MuiInputBase-root { font-family: var(--md-font) !important; }
-
-/* — Tabs (Einstellungen) — */
-.md3 .MuiTab-root { font-family: var(--md-font) !important; text-transform: none !important; font-weight: 600 !important; }
-.md3 .MuiTab-root.Mui-selected { color: var(--md-primary) !important; }
-.md3 .MuiTabs-indicator { background-color: var(--md-primary) !important; }
-
-/* — Selection controls — */
-.md3 .MuiCheckbox-root.Mui-checked, .md3 .MuiRadio-root.Mui-checked { color: var(--md-primary) !important; }
-.md3 .MuiSwitch-switchBase.Mui-checked { color: var(--md-primary) !important; }
-.md3 .MuiSwitch-switchBase.Mui-checked + .MuiSwitch-track { background-color: var(--md-primary) !important; }
-
-/* — MUI tables (where used) — */
-.md3 .MuiTableCell-root { font-family: var(--md-font) !important; }
-.md3 .MuiTableCell-head { font-weight: 600 !important; color: var(--md-on-surface-variant) !important; }
-
-/* — headings inside legacy pages pick up the md3 display face — */
-.md3 h1, .md3 h2, .md3 h3 { font-family: var(--md-font-display); }
-
-
-/* =====================================================================
-   md3 KIT PRIMITIVES (Group-B in-place rebuild) — auto-integrated
-   ===================================================================== */
-
-/* ── FormDropdown (mfd-) — md3 mobx-form dropdown adapter ──────────────────────────
-   Single-select reuses the base Dropdown (.mselect-*); only label/error wrapper +
-   an error ring are added here. Multi-select reuses .mselect-* and adds chips +
-   a checklist. All selectors scoped under .md3, unique `mfd-` prefix. */
-.md3 .mfd { display: flex; flex-direction: column; gap: 6px; }
-.md3 .mfd-label { color: var(--md-on-surface-variant); font-weight: 600; }
-.md3 .mfd-error { color: var(--md-error); font-size: 12px; line-height: 1.35; }
-
-/* error ring on the single-select trigger (base Dropdown puts `className` on the
-   .mselect wrapper, so reach the inner button from there). */
-.md3 .mselect.mfd-invalid .mselect-btn,
-.md3 .mselect-btn.mfd-invalid { box-shadow: inset 0 0 0 2px var(--md-error); }
-.md3 .mselect.mfd-invalid .mselect-btn[aria-expanded="true"],
-.md3 .mselect-btn.mfd-invalid[aria-expanded="true"] { box-shadow: inset 0 0 0 2px var(--md-error); }
-
-/* ── multi-select ──────────────────────────────────────────────────────────── */
-.md3 .mfd-multi { position: relative; display: block; width: 100%; }
-/* taller, top-aligned trigger so wrapped chips don't clip; otherwise = .mselect-btn. */
-.md3 .mfd-multi-btn { height: auto; min-height: 48px; align-items: flex-start; padding: 7px 14px; }
-.md3 .mfd-multi-btn .mselect-chev { align-self: center; }
-
-.md3 .mfd-chips { flex: 1; min-width: 0; display: flex; flex-wrap: wrap; gap: 6px; padding: 1px 0; }
-.md3 .mfd-chip { display: inline-flex; align-items: center; gap: 4px; height: 26px; padding: 0 4px 0 10px;
-  border-radius: var(--md-r-full); background: var(--md-secondary-container);
-  color: var(--md-on-secondary-container); font-size: 12.5px; font-weight: 600; max-width: 100%; }
-.md3 .mfd-chip-label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
-.md3 .mfd-chip-x { display: inline-flex; align-items: center; justify-content: center; width: 18px; height: 18px;
-  border-radius: var(--md-r-full); cursor: pointer; color: var(--md-on-secondary-container); flex: none; }
-.md3 .mfd-chip-x:hover { background: rgba(0,0,0,.10); }
-.md3 .mfd-chip-x .lucide { width: 13px; height: 13px; }
-
-/* checklist menu — same surface as .mselect-menu (declared explicitly so it works
-   even if the base rule is order-sensitive). */
-.md3 .mfd-multi-menu { padding: 6px; }
-.md3 .mfd-multi-opt { gap: 10px; }
-.md3 .mfd-multi-opt.is-checked { color: var(--md-primary); font-weight: 600; }
-.md3 .mfd-check { display: inline-flex; align-items: center; justify-content: center; width: 18px; height: 18px;
-  flex: none; border-radius: var(--md-r-xs); box-shadow: inset 0 0 0 1.5px var(--md-outline-variant);
-  color: #fff; transition: background .12s, box-shadow .12s; }
-.md3 .mfd-check--on { background: var(--md-primary); box-shadow: inset 0 0 0 1.5px var(--md-primary); }
-.md3 .mfd-check .lucide { width: 13px; height: 13px; }
-
-/* ── FormCheckbox (md3 checkbox bound to a mobx-react-form field) ─────────── */
-.md3 .mcheck-group { display: flex; flex-direction: column; gap: 6px; }
-
-/* 44px touch target: the label is the hit area; the visual box sits centred inside. */
-.md3 .mcheck { display: inline-flex; align-items: flex-start; gap: 12px; cursor: pointer;
-  min-height: 44px; padding: 4px 0; font-family: var(--md-font); color: var(--md-on-surface);
-  -webkit-tap-highlight-color: transparent; }
-.md3 .mcheck--disabled { cursor: not-allowed; opacity: .55; }
-
-/* visually-hidden native input — keeps it focusable + semantic; the .mcheck-box is the visual. */
-.md3 .mcheck-input { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0;
-  border: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
-
-.md3 .mcheck-box { flex: none; box-sizing: border-box; display: inline-flex; align-items: center;
-  justify-content: center; width: 20px; height: 20px; margin-top: 10px; border-radius: var(--md-r-sm);
-  border: 2px solid var(--md-outline-variant); background: var(--md-sc-lowest);
-  transition: background .15s, border-color .15s, box-shadow .15s; }
-.md3 .mcheck-input:checked + .mcheck-box { background: var(--md-primary); border-color: var(--md-primary); }
-.md3 .mcheck-tick { color: var(--md-on-primary); }
-
-/* keyboard focus ring on the visual box (input itself is hidden). */
-.md3 .mcheck-input:focus-visible + .mcheck-box { outline: 2px solid var(--md-primary);
-  outline-offset: 2px; box-shadow: var(--md-e1); }
-
-.md3 .mcheck:hover .mcheck-input:not(:checked):not(:disabled) + .mcheck-box { border-color: var(--md-on-surface-variant); }
-
-.md3 .mcheck-label { font-size: 14px; line-height: 1.5; padding-top: 7px; color: var(--md-on-surface); }
-/* rich labels (T&C/permission) — links pick up the brand colour. */
-.md3 .mcheck-label a { color: var(--md-primary); text-decoration: underline; }
-.md3 .mcheck-label a:hover { color: var(--autode-blau-strong); }
-
-/* error state ('required' / 'boolean' / 'accepted' rule) — red box + inline message. */
-.md3 .mcheck-group--error .mcheck-input:not(:checked) + .mcheck-box { border-color: var(--md-error); }
-.md3 .mcheck-error-text { color: var(--md-error); font-size: 12px; line-height: 1.35; }
-
-/* ─── md3 radio group + selectable radio (FormRadioGroup / FormRadio) ─────────────
-   Drop-in re-skin of the legacy fe-ui-core RadioGroup / CheckboxMaterial(radio) used on
-   DealerEmployeeSet, Checkout, and the RICH VehicleEdit/VehicleAdd radios (color swatches,
-   emission stickers, interior icons, energy bars, DAT-model grids). The group is a flex-wrap
-   set; each radio is a selectable surface wrapping ARBITRARY children with a selected ring.
-   Unique prefix: .mradio*  (reuses .mfield-error-text for the inline error). */
-.md3 .mradio-group { display: flex; flex-direction: column; gap: 6px; }
-.md3 .mradio-set { display: flex; flex-wrap: wrap; gap: 10px; align-items: stretch; }
-
-/* the selectable wrapper — an md3 outlined surface; the hidden native radio drives state */
-.md3 .mradio {
-  position: relative; display: inline-flex; align-items: center; gap: 10px;
-  min-height: 44px; padding: 8px 14px; box-sizing: border-box; cursor: pointer;
-  border-radius: var(--md-r-sm); background: var(--md-surface); color: var(--md-on-surface);
-  box-shadow: inset 0 0 0 1px var(--md-outline-variant);
-  font-family: var(--md-font); font-size: 14px; line-height: 1.3;
-  transition: box-shadow .15s, background .15s, color .15s;
-  -webkit-tap-highlight-color: transparent;
-}
-.md3 .mradio:hover { background: var(--md-surface-variant, var(--md-sc, #eceef4)); }
-.md3 .mradio-body { display: inline-flex; align-items: center; gap: 10px; min-width: 0; }
-.md3 .mradio-body > img { display: block; max-width: 100%; height: auto; }
-
-/* hidden but real radio input: keeps native exclusive-group + keyboard + a11y semantics */
-.md3 .mradio-input {
-  position: absolute; opacity: 0; width: 1px; height: 1px; margin: 0; padding: 0;
-  pointer-events: none;
-}
-
-/* selected: primary ring + tonal fill (md3 selected-state) */
-.md3 .mradio--on {
-  background: var(--md-primary-container); color: var(--md-on-primary-container);
-  box-shadow: inset 0 0 0 2px var(--md-primary);
-}
-.md3 .mradio--on:hover { background: var(--md-primary-container); }
-
-/* keyboard focus ring on the wrapper when the hidden input is focused */
-.md3 .mradio-input:focus-visible + .mradio-body { outline: none; }
-.md3 .mradio:focus-within { box-shadow: inset 0 0 0 2px var(--md-primary); }
-
-/* error (group invalid, this option not chosen): red outline, matching .mfield--error */
-.md3 .mradio--error { box-shadow: inset 0 0 0 2px var(--md-error); }
-.md3 .mradio-set--error .mradio:not(.mradio--on) { box-shadow: inset 0 0 0 1px var(--md-error); }
-
-/* disabled */
-.md3 .mradio--disabled { opacity: .5; cursor: not-allowed; }
-.md3 .mradio--disabled:hover { background: var(--md-surface); }
-
-/* ── Accordion (macc) — md3 replacement for fe-ui-core ExpansionPanel / MUI Accordion ── */
-.md3 .macc {
-  background: var(--md-sc-lowest);
-  border: 1px solid var(--md-outline-variant);
-  border-radius: var(--md-r-md);
-  overflow: hidden; /* clips the collapsing region to the rounded corners */
-}
-.md3 .macc + .macc { margin-top: 12px; }
-
-/* header — full-width button so it's keyboard/AT focusable (legacy AccordionSummary) */
-.md3 .macc-hd {
-  display: flex;
-  align-items: center;
-  gap: 12px;
-  width: 100%;
-  padding: 16px 18px;
-  background: transparent;
-  border: 0;
-  margin: 0;
-  text-align: left;
-  font-family: var(--md-font);
-  color: var(--md-on-surface);
-  cursor: pointer;
-  -webkit-tap-highlight-color: transparent;
-}
-.md3 .macc-hd:hover { background: var(--md-sc-low); }
-.md3 .macc-hd:focus-visible {
-  outline: 2px solid var(--md-primary);
-  outline-offset: -2px;
-}
-
-/* title + subtitle stack; subtitle sits inline-after on wide rows, wraps under on narrow */
-.md3 .macc-hd-text {
-  display: flex;
-  flex-wrap: wrap;
-  align-items: baseline;
-  gap: 4px 8px;
-  flex: 1 1 auto;
-  min-width: 0;
-}
-.md3 .macc-title { color: var(--md-on-surface); }
-.md3 .macc-subtitle { color: var(--md-on-surface-variant); font-weight: 400; }
-
-/* header-right validation/status slot (page passes a <StatChip/> here) */
-.md3 .macc-status { display: inline-flex; align-items: center; flex: 0 0 auto; }
-
-/* chevron rotates 0->180 on open (legacy arrowSelect / iconExpanded) */
-.md3 .macc-chev {
-  flex: 0 0 auto;
-  color: var(--md-primary);
-  transition: transform 250ms ease-out;
-}
-.md3 .macc--open .macc-chev { transform: rotate(180deg); }
-
-/* collapsing region: grid 0fr->1fr is smoothly animatable and needs no magic max-height
-   (legacy used max-height:10000px). Children stay mounted so react-scroll anchors inside
-   remain measurable for sticky-sidebar jump-to-section. */
-.md3 .macc-region {
-  display: grid;
-  grid-template-rows: 1fr;
-  opacity: 1;
-  transition: grid-template-rows 300ms ease, opacity 220ms ease;
-}
-.md3 .macc--closed .macc-region {
-  grid-template-rows: 0fr;
-  opacity: 0;
-}
-.md3 .macc-region-inner { overflow: hidden; min-height: 0; }
-.md3 .macc-body { padding: 4px 18px 18px; }
-/* closed panel content is non-interactive (mirrors aria-hidden) */
-.md3 .macc--closed .macc-region { pointer-events: none; }
-
-@media (prefers-reduced-motion: reduce) {
-  .md3 .macc-chev,
-  .md3 .macc-region { transition: none; }
-}
-
-/* ---- Modal (md3 dialog) ---- */
-/* Portal root is a body-level div.md3, so these resolve via the scoped theme. */
-.md3 .mmodal-scrim {
-  position: fixed; inset: 0; z-index: 1300;
-  display: flex; align-items: center; justify-content: center;
-  padding: 16px;
-  background: rgba(16, 22, 42, .5);
-  overflow-y: auto; overscroll-behavior: contain;
-  animation: mmodal-fade .14s ease-out;
-}
-.md3 .mmodal {
-  position: relative;
-  display: flex; flex-direction: column;
-  width: 100%; max-width: 560px;
-  max-height: calc(100vh - 32px);
-  background: var(--md-sc-lowest, #fff);
-  color: var(--md-on-surface);
-  border-radius: var(--md-r-lg);
-  border: 1px solid var(--md-outline-variant);
-  box-shadow: var(--md-e3);
-  font-family: var(--md-font);
-  outline: none;
-  animation: mmodal-pop .16s cubic-bezier(.2, .8, .2, 1);
-}
-.md3 .mmodal--sm { max-width: 420px; }
-.md3 .mmodal--md { max-width: 560px; }
-.md3 .mmodal--lg { max-width: 800px; }
-
-.md3 .mmodal-head {
-  flex: none;
-  display: flex; align-items: center; gap: 12px;
-  padding: 20px 16px 12px 24px;
-}
-.md3 .mmodal-title {
-  flex: 1 1 auto; min-width: 0;
-  margin: 0;
-  color: var(--md-on-surface);
-}
-.md3 .mmodal-head .icon-btn { flex: none; margin: -8px -4px -8px 0; }
-
-.md3 .mmodal-body {
-  flex: 1 1 auto; min-height: 0;
-  overflow-y: auto; overscroll-behavior: contain;
-  padding: 0 24px 4px;
-  color: var(--md-on-surface-variant);
-}
-.md3 .mmodal-body:last-child { padding-bottom: 24px; }
-
-.md3 .mmodal-foot {
-  flex: none;
-  display: flex; align-items: center; justify-content: flex-end; gap: 8px;
-  flex-wrap: wrap;
-  padding: 16px 24px 20px;
-}
-
-@keyframes mmodal-fade { from { opacity: 0; } to { opacity: 1; } }
-@keyframes mmodal-pop {
-  from { opacity: 0; transform: translateY(8px) scale(.98); }
-  to   { opacity: 1; transform: none; }
-}
-
-@media (max-width: 560px) {
-  .md3 .mmodal-scrim { padding: 0; align-items: flex-end; }
-  .md3 .mmodal {
-    max-width: 100%; max-height: 92vh;
-    border-radius: var(--md-r-lg) var(--md-r-lg) 0 0;
-    border-bottom: 0;
-  }
-}
-
-/* ---------- DatePicker (native <input type=date> styled as .mfield) ---------- */
-/* Reuses .mfield / .mfield-group / .mfield--error / .mfield--disabled wholesale; the rules below
-   only tame the native date input's browser chrome so it reads as a real md3 field. */
-.md3 .mdate-input { font: inherit; color: var(--md-on-surface); -webkit-appearance: none; appearance: none;
-  cursor: text; line-height: 1.2; }
-/* native date inputs render no value as transparent placeholder text in some browsers — keep it muted. */
-.md3 .mdate-input:invalid,
-.md3 .mdate-input[value=""] { color: var(--md-on-surface-variant); }
-/* the calendar picker indicator: tint it to the md3 accent and make it a clear affordance. */
-.md3 .mdate-input::-webkit-calendar-picker-indicator { cursor: pointer; opacity: .65; padding: 2px;
-  border-radius: var(--md-r-xs); filter: grayscale(1); transition: opacity .15s, background .15s; }
-.md3 .mdate-input:hover::-webkit-calendar-picker-indicator { opacity: 1; }
-.md3 .mdate-input:focus::-webkit-calendar-picker-indicator { opacity: 1; }
-.md3 .mdate-field:focus-within .mdate-input::-webkit-calendar-picker-indicator { background: var(--md-sc); }
-/* strip the inner spin/clear quirks so the field stays flat like the rest of the md3 kit. */
-.md3 .mdate-input::-webkit-inner-spin-button,
-.md3 .mdate-input::-webkit-clear-button { display: none; -webkit-appearance: none; appearance: none; }
-.md3 .mdate-input::-webkit-datetime-edit { color: inherit; font: inherit; }
-.md3 .mdate-input::-webkit-datetime-edit-fields-wrapper { padding: 0; }
-/* disabled parity with .mfield--disabled. */
-.md3 .mfield--disabled .mdate-input { cursor: not-allowed; color: var(--md-on-surface-variant); }
-.md3 .mfield--disabled .mdate-input::-webkit-calendar-picker-indicator { opacity: .35; cursor: not-allowed; }
-
-/* ---------- Table (md3 composable data/spec table) ---------- */
-/* Composable wrappers Table/Thead/Tbody/Tr/Th/Td. Header on surface-variant,
-   row dividers + hover, dense + sticky-header options, and an overflow-x:auto
-   wrapper so wide tables (Vergleich, options matrix) scroll inside their own box. */
-.md3 .mtab-wrap { width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch;
-  border: 1px solid var(--md-outline-variant); border-radius: var(--md-r-md); background: var(--md-sc-lowest); }
-.md3 .mtab { width: 100%; border-collapse: collapse; font-family: var(--md-font);
-  font-size: 14px; color: var(--md-on-surface); }
-
-/* header — surface-variant tone, small uppercase labels */
-.md3 .mtab-thead { background: var(--md-sc-low); }
-.md3 .mtab-th { text-align: left; padding: 12px 16px; font-size: 11px; font-weight: 600;
-  letter-spacing: .4px; text-transform: uppercase; color: var(--md-on-surface-variant);
-  white-space: nowrap; border-bottom: 1px solid var(--md-outline-variant); }
-
-/* body cells — row dividers via bottom border */
-.md3 .mtab-tbody .mtab-tr { transition: background var(--dur-1) var(--ease-standard); }
-.md3 .mtab-tbody .mtab-tr:not(:last-child) .mtab-td { border-bottom: 1px solid var(--md-outline-variant); }
-.md3 .mtab-td { padding: 14px 16px; vertical-align: middle; line-height: 1.45; }
-
-/* hover + selected */
-.md3 .mtab-tbody .mtab-tr:hover { background: var(--md-sc-low); }
-.md3 .mtab-tr.is-selected { background: var(--md-primary-container); }
-.md3 .mtab-tr.is-selected:hover { background: var(--md-primary-container); }
-
-/* alignment + numeric */
-.md3 .mtab-center { text-align: center; }
-.md3 .mtab-right { text-align: right; }
-.md3 .mtab-td--num { font-variant-numeric: tabular-nums; font-feature-settings: "tnum" 1; }
-
-/* dense — tighter rows for list-heavy tables (Mitarbeiter, options) */
-.md3 .mtab--dense .mtab-th { padding: 8px 12px; }
-.md3 .mtab--dense .mtab-td { padding: 8px 12px; }
-
-/* sticky header — pins while the body scrolls (caller constrains height) */
-.md3 .mtab--sticky .mtab-th { position: sticky; top: 0; z-index: 1; background: var(--md-sc-low);
-  box-shadow: inset 0 -1px 0 var(--md-outline-variant); }
-
-/* md3 Switch — extras for the autobahn ui/Switch.tsx component.
-   The base .mswitch / .mswitch-track / .mswitch-thumb (+ :checked) rules already exist
-   in this file (md3 switch block, ~L424-430). These only add the optional label + the
-   disabled state the React component emits. All scoped under .md3, mswitch- prefix. */
-.md3 .mswitch--labeled { align-items: center; gap: 10px; }
-.md3 .mswitch-label { font: 600 14px var(--md-font); color: var(--md-on-surface); user-select: none; }
-.md3 .mswitch--disabled { cursor: not-allowed; opacity: .5; }
-.md3 .mswitch--disabled .mswitch-track { background: var(--md-outline-variant); }
-.md3 .mswitch input:disabled + .mswitch-track { cursor: not-allowed; }
-.md3 .mswitch input:focus-visible + .mswitch-track { outline: 2px solid var(--md-primary); outline-offset: 2px; }
-
-/* ---------- multiline text field (Textarea — outlined, MD3) ----------
-   Reuses .mfield (outline, focus ring, error/disabled states, label/error via
-   .mfield-group) but overrides the single-line geometry: a textarea needs auto
-   height, top alignment and vertical padding, and must fill the box + resize. */
-.md3 .mfield.mtextarea { height: auto; align-items: stretch; padding: 10px 14px; }
-.md3 .mfield.mtextarea textarea {
-  border: 0; outline: 0; background: transparent; flex: 1; width: 100%;
-  font: inherit; color: inherit; min-width: 0;
-  display: block; resize: vertical; min-height: 96px; line-height: 1.5;
-}
-.md3 .mfield.mtextarea textarea::placeholder { color: var(--md-on-surface-variant); }
-
-/* ── Pagination (md3 pager) — prefix .mpag-, scoped under .md3 ───────────────── */
-.md3 .mpag { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 6px; }
-.md3 .mpag-list { display: flex; align-items: center; gap: 6px; list-style: none; margin: 0; padding: 0; }
-
-/* numbered page buttons */
-.md3 .mpag-page {
-  box-sizing: border-box; min-width: 40px; height: 40px; padding: 0 10px;
-  display: inline-flex; align-items: center; justify-content: center;
-  border: 1px solid var(--md-outline-variant); border-radius: var(--md-r-full);
-  background: transparent; color: var(--md-on-surface); cursor: pointer;
-  font: 600 14px var(--md-font); transition: background .15s, border-color .15s, color .15s, box-shadow .15s;
-}
-.md3 .mpag-page .num { font-size: 14px; }
-.md3 .mpag-page:hover { background: color-mix(in srgb, var(--md-primary) 8%, transparent); border-color: var(--md-primary); }
-.md3 .mpag-page.is-current {
-  background: var(--md-primary); color: var(--md-on-primary);
-  border-color: var(--md-primary); cursor: default; box-shadow: var(--md-e1);
-}
-.md3 .mpag-page.is-current:hover { background: var(--md-primary); }
-
-/* ellipsis gap */
-.md3 .mpag-gap {
-  min-width: 28px; height: 40px; display: inline-flex; align-items: flex-end; justify-content: center;
-  padding-bottom: 8px; color: var(--md-on-surface-variant); font: 600 16px var(--md-font); user-select: none;
-}
-
-/* prev / next pill */
-.md3 .mpag-edge {
-  height: 40px; padding: 0 16px; display: inline-flex; align-items: center; gap: 6px;
-  border: 1px solid var(--md-outline-variant); border-radius: var(--md-r-full);
-  background: transparent; color: var(--md-primary); cursor: pointer;
-  font: 600 14px var(--md-font); white-space: nowrap;
-  transition: background .15s, border-color .15s, color .15s, opacity .15s;
-}
-.md3 .mpag-edge:hover { background: color-mix(in srgb, var(--md-primary) 8%, transparent); border-color: var(--md-primary); }
-.md3 .mpag-edge:disabled { opacity: .4; cursor: not-allowed; color: var(--md-on-surface-variant); }
-.md3 .mpag-edge:disabled:hover { background: transparent; border-color: var(--md-outline-variant); }
-.md3 .mpag-edge-label { line-height: 1; }
-
-/* compact phones: drop the prev/next text labels, keep the chevrons */
-@media (max-width: 520px) {
-  .md3 .mpag-edge { padding: 0 10px; }
-  .md3 .mpag-edge-label { display: none; }
-}
-
-/* ── Stepper (md3 step indicator) ───────────────────────────────────────── */
-/* numbered circles + connectors; done=check on primary fill, active=primary
-   outline, todo=neutral outline. Non-linear (clickable) via .mstep--clickable.
-   Mirrors the inline .co-stepper visual language, generalised for both
-   orientations. Unique `mstep-` prefix — no collision with .co-step*. */
-.md3 .mstep { display: block; max-width: 880px; margin: 0 auto; }
-.md3 .mstep-list { display: flex; align-items: center; gap: 0; margin: 0; padding: 0; list-style: none; }
-.md3 .mstep-item { display: flex; align-items: center; flex: 1; min-width: 0; }
-.md3 .mstep-item:last-child { flex: none; }
-.md3 .mstep-btn { display: inline-flex; align-items: center; gap: 10px; min-width: 0; flex: none;
-  border: 0; background: transparent; padding: 0; margin: 0; font-family: var(--md-font);
-  color: var(--md-on-surface-variant); text-align: left; }
-.md3 .mstep-dot { display: flex; align-items: center; justify-content: center; width: 30px; height: 30px;
-  flex: none; border-radius: var(--md-r-full); border: 2px solid var(--md-outline-variant);
-  font: 700 13px var(--md-font); background: var(--md-sc-lowest, #fff); transition: border-color .15s, background .15s, color .15s; }
-.md3 .mstep-dot .lucide { width: 16px; height: 16px; }
-.md3 .mstep-label { font-size: 13px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
-.md3 .mstep-connector { flex: 1; height: 2px; min-width: 16px; margin: 0 10px;
-  background: var(--md-outline-variant); transition: background .15s; align-self: center; }
-/* state — active */
-.md3 .mstep-item--active .mstep-btn { color: var(--md-primary); }
-.md3 .mstep-item--active .mstep-dot { border-color: var(--md-primary); color: var(--md-primary); }
-/* state — done (primary-filled dot + primary-tinted connector + check glyph) */
-.md3 .mstep-item--done .mstep-btn { color: var(--md-on-surface); }
-.md3 .mstep-item--done .mstep-dot { border-color: var(--md-primary); background: var(--md-primary); color: var(--md-on-primary); }
-.md3 .mstep-item--done .mstep-dot .lucide { color: var(--md-on-primary); }
-.md3 .mstep-item--done .mstep-connector { background: var(--md-primary); }
-/* clickable (non-linear) affordances */
-.md3 .mstep--clickable .mstep-btn { cursor: pointer; border-radius: var(--md-r-full); }
-.md3 .mstep--clickable .mstep-btn:hover .mstep-dot { box-shadow: var(--md-e1); }
-.md3 .mstep--clickable .mstep-btn:hover .mstep-label { color: var(--md-on-surface); }
-.md3 .mstep--clickable .mstep-btn:focus-visible { outline: 2px solid var(--md-primary); outline-offset: 3px; }
-/* vertical orientation */
-.md3 .mstep--vertical .mstep-list { flex-direction: column; align-items: stretch; }
-.md3 .mstep--vertical .mstep-item { flex: none; flex-direction: column; align-items: flex-start; }
-.md3 .mstep--vertical .mstep-btn { width: 100%; }
-.md3 .mstep--vertical .mstep-connector { width: 2px; height: auto; min-height: 22px; flex: none;
-  margin: 4px 0 4px 14px; align-self: flex-start; }
-/* mobile: hide labels on the horizontal variant so dots+connectors stay legible */
-@media (max-width: 720px) {
-  .md3 .mstep--horizontal .mstep-label { display: none; }
-  .md3 .mstep--horizontal .mstep-btn { gap: 0; }
-}
-
-/* ── FileUpload — md3 dropzone shell (wraps preserved Uppy / react-dropzone engine) ── */
-.md3 .mfu { display: flex; flex-direction: column; gap: 14px; }
-.md3 .mfu-zone {
-  position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center;
-  gap: 8px; text-align: center; padding: 32px 24px; min-height: 168px;
-  border: 2px dashed var(--md-outline-variant); border-radius: var(--md-r-lg);
-  background: var(--md-sc-lowest); color: var(--md-on-surface-variant);
-  font-family: var(--md-font); cursor: pointer;
-  transition: border-color .15s, background .15s, box-shadow .15s;
-}
-.md3 .mfu-zone:hover { border-color: var(--md-primary); background: var(--md-primary-container); }
-.md3 .mfu-zone:focus-visible { outline: none; border-color: var(--md-primary); box-shadow: 0 0 0 3px var(--md-primary-container); }
-/* drag-over highlight (driven by the .mfu--over state class) */
-.md3 .mfu--over .mfu-zone { border-color: var(--md-primary); border-style: solid; background: var(--md-primary-container); box-shadow: var(--md-e1); }
-.md3 .mfu-icon { display: inline-flex; align-items: center; justify-content: center; width: 56px; height: 56px;
-  border-radius: var(--md-r-full); background: var(--md-sc-high); color: var(--md-primary); }
-.md3 .mfu-icon .lucide { width: 28px; height: 28px; color: var(--md-primary); }
-.md3 .mfu--over .mfu-icon { background: var(--md-sc-lowest); }
-.md3 .mfu-prompt { font-size: 15px; font-weight: 500; line-height: 1.4; color: var(--md-on-surface); }
-.md3 .mfu-link { color: var(--md-primary); font-weight: 600; text-decoration: underline; text-underline-offset: 2px; }
-.md3 .mfu-or { color: var(--md-on-surface-variant); font-weight: 400; }
-.md3 .mfu-hint { margin-top: 2px; }
-/* visually-hidden native input — click is proxied from the zone */
-.md3 .mfu-input { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
-  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
-/* slot for the preserved engine / file list / progress bar */
-.md3 .mfu-slot { display: block; }
-/* disabled (mirrors react-dropzone/Uppy disabled while uploading) */
-.md3 .mfu--disabled .mfu-zone { cursor: not-allowed; opacity: .5; }
-.md3 .mfu--disabled .mfu-zone:hover { border-color: var(--md-outline-variant); background: var(--md-sc-lowest); box-shadow: none; }
+/* ==========================================================================
+   AUTOBAHN — scoped port of docs/redesign/design-source/ui_kits/website/md3.css
+   --------------------------------------------------------------------------
+   Every selector is nested under `.md3` (the design's `:root` token block is
+   emitted as `.md3 {...}`) so the utility classes (.mbtn/.mcard/.mfield/.chip/
+   .statchip/.segmented/.num/.md-x ...) and CSS vars (--md-/--autode- prefixes)
+   only apply inside a `.md3` subtree and cannot bleed into existing fe-main styles.
+   The responsive layers (1024/980/900/820/600px) are preserved. The Google-
+   Fonts @import was removed here and centralised in ./autobahn.css.
+   Loaded globally via source/App.global.styl -> ./autobahn.css.
+   ADDITIVE ONLY — do not retheme legacy components.
+   ==========================================================================
+
+   auto.de — DESIGN SYSTEM  ·  "Autobahn"
+   A custom, brand-led system on MD3 bones (tokens, spacing, elevation,
+   responsive discipline) with a distinct auto.de identity:
+     · auto.de Blau primary  · Signal-Cyan accent (from the logo swoosh)
+     · Schibsted Grotesk (display) + Hanken Grotesk (text)
+     · deal-green for price/savings  · defined motion
+   This file is the single source of truth the UI kit is built from.
+   ========================================================================== */
+
+.md3 {
+  /* ---- Brand ---- */
+  --autode-blau:           #0B53CC;   /* auto.de Blau — primary, used with intent */
+  --autode-blau-strong:    #0A47AE;   /* hover / pressed */
+  --autode-cyan:           #16B8E8;   /* Signal-Cyan accent (logo swoosh) */
+  --autode-swoosh:         linear-gradient(90deg,#0B53CC 0%,#1E7BDA 55%,#16B8E8 100%); /* @kind color */
+
+  /* ---- MD3 tonal roles (mapped to the brand) ---- */
+  --md-primary:            var(--autode-blau);
+  --md-on-primary:         #FFFFFF;
+  --md-primary-container:  #DBE4FF;
+  --md-on-primary-container:#001A45;
+
+  /* accent (cyan) roles — highlights, focus, on-dark links */
+  --md-accent:             var(--autode-cyan);
+  --md-accent-container:   #C6EEFB;
+  --md-on-accent-container:#04323F;
+
+  --md-secondary-container:#E7E9F1;
+  --md-on-secondary-container:#3A4150;
+
+  /* price-rating + deal accent (green) */
+  --md-good:               #0F7B43;
+  --md-good-container:     #C8EFCF;
+  --md-on-good-container:  #04391F;
+  --md-warn-container:     #FCE3B4;
+  --md-on-warn-container:  #4A3204;
+  --md-error:              #BA1A1A;
+
+  /* surfaces (neutral, a hair cooler to sit under the blue) */
+  --md-surface:            #FBFBFE;
+  --md-surface-dim:        #DAD9E0;
+  --md-surface-bright:     #FBFBFE;
+  --md-sc-lowest:          #FFFFFF;
+  --md-sc-low:             #F4F5FA;
+  --md-sc:                 #EEEFF5;
+  --md-sc-high:            #E8E9F1;
+  --md-sc-highest:         #E2E3EC;
+
+  --md-on-surface:         #1A1B22;
+  --md-on-surface-variant: #44464F;
+  --md-outline:            #74767F;
+  --md-outline-variant:    #C5C6D2;
+
+  --md-inverse-surface:    #2E2F36;
+  --md-inverse-on-surface: #F1F0F6;
+
+  /* elevation (soft, tonal) */
+  --md-e1: 0 1px 2px rgba(16,22,42,.10), 0 1px 3px rgba(16,22,42,.06);
+  --md-e2: 0 2px 6px rgba(16,22,42,.10), 0 1px 2px rgba(16,22,42,.10);
+  --md-e3: 0 8px 20px rgba(16,22,42,.12), 0 2px 6px rgba(16,22,42,.08);
+
+  /* shape */
+  --md-r-xs: 8px;
+  --md-r-sm: 12px;
+  --md-r-md: 16px;
+  --md-r-lg: 24px;
+  --md-r-xl: 28px;
+  --md-r-full: 999px;
+
+  /* type */
+  --md-font:         'Hanken Grotesk', system-ui, sans-serif;
+  --md-font-display: 'Schibsted Grotesk', 'Hanken Grotesk', system-ui, sans-serif;
+  --md-font-hero:    var(--md-font-display); /* hero uses the system display face, weight 800 */
+
+  /* motion */
+  --ease-standard:   cubic-bezier(.2,0,0,1); /* @kind other */
+  --ease-emphasized: cubic-bezier(.3,0,0,1); /* @kind other */
+  --dur-1: 120ms; /* @kind other */
+  --dur-2: 200ms; /* @kind other */
+  --dur-3: 320ms; /* @kind other */
+}
+
+/* ---------- base ---------- */
+.md3 { font-family: var(--md-font); color: var(--md-on-surface); background: var(--md-surface);
+  -webkit-font-smoothing: antialiased; }
+.md3 *, .md3 *::before, .md3 *::after { box-sizing: border-box; }
+.md3 ::selection { background: var(--md-primary-container); }
+
+/* type scale — display family for headlines, text family for UI */
+.md3 .md-display   { font-family: var(--md-font-display); font-size: 46px; font-weight: 700; line-height: 1.04; letter-spacing: -1px; }
+.md3 .md-headline  { font-family: var(--md-font-display); font-size: 29px; font-weight: 700; line-height: 1.14; letter-spacing: -.4px; }
+.md3 .md-headline-sm{ font-family: var(--md-font-display); font-size: 22px; font-weight: 600; line-height: 1.2; letter-spacing: -.2px; }
+.md3 .md-title     { font-size: 17px; font-weight: 600; line-height: 1.3; }
+.md3 .md-title-sm  { font-size: 14px; font-weight: 600; line-height: 1.35; letter-spacing: .1px; }
+.md3 .md-body      { font-size: 14px; font-weight: 400; line-height: 1.5; color: var(--md-on-surface-variant); }
+.md3 .md-body-sm   { font-size: 12.5px; font-weight: 400; line-height: 1.45; color: var(--md-on-surface-variant); }
+.md3 .md-label     { font-size: 13px; font-weight: 500; letter-spacing: .1px; }
+.md3 .md-label-sm  { font-size: 11px; font-weight: 600; letter-spacing: .4px; color: var(--md-on-surface-variant); }
+/* tabular figures for prices & specs */
+.md3 .num { font-family: var(--md-font-display); font-variant-numeric: tabular-nums; font-feature-settings: "tnum" 1; }
+
+/* ---------- buttons (pill) ---------- */
+.md3 .mbtn { font-family: var(--md-font); font-size: 14px; font-weight: 600; letter-spacing: .1px;
+  height: 40px; padding: 0 24px; border-radius: var(--md-r-full); border: 0; cursor: pointer;
+  display: inline-flex; align-items: center; justify-content: center; gap: 8px; white-space: nowrap;
+  transition: box-shadow var(--dur-1) var(--ease-standard), background var(--dur-1) var(--ease-standard),
+    color var(--dur-1) var(--ease-standard), transform var(--dur-1) var(--ease-standard); }
+.md3 .mbtn:active { transform: translateY(1px); }
+.md3 .mbtn .lucide { width: 18px; height: 18px; }
+.md3 .mbtn--filled { background: var(--md-primary); color: var(--md-on-primary); }
+.md3 .mbtn--filled:hover { box-shadow: var(--md-e2); background: var(--autode-blau-strong); }
+.md3 .mbtn--tonal { background: var(--md-primary-container); color: var(--md-on-primary-container); }
+.md3 .mbtn--tonal:hover { box-shadow: var(--md-e1); }
+.md3 .mbtn--outlined { background: transparent; color: var(--md-primary); box-shadow: inset 0 0 0 1px var(--md-outline-variant); }
+.md3 .mbtn--outlined:hover { background: rgba(11,83,204,.06); }
+.md3 .mbtn--text { background: transparent; color: var(--md-primary); padding: 0 12px; }
+.md3 .mbtn--text:hover { background: rgba(11,83,204,.06); }
+.md3 .mbtn--sm { height: 34px; padding: 0 16px; font-size: 13px; }
+.md3 .mbtn--lg { height: 48px; padding: 0 30px; font-size: 15px; }
+.md3 .mbtn--block { width: 100%; }
+
+/* icon button */
+.md3 .icon-btn { width: 40px; height: 40px; border-radius: var(--md-r-full); border: 0; cursor: pointer;
+  background: transparent; color: var(--md-on-surface-variant); display: inline-flex; align-items: center;
+  justify-content: center; transition: background .15s; }
+.md3 .icon-btn:hover { background: var(--md-sc-high); }
+.md3 .icon-btn--filled { background: rgba(255,255,255,.9); box-shadow: var(--md-e1); color: var(--md-on-surface); }
+.md3 .icon-btn .lucide { width: 20px; height: 20px; }
+
+/* ---------- chips (MD3 assist / filter) ---------- */
+.md3 .chip { height: 38px; padding: 0 16px; border-radius: 10px; cursor: pointer;
+  display: inline-flex; align-items: center; gap: 7px; font-size: 14px; font-weight: 500; line-height: 1;
+  background: var(--md-surface); color: var(--md-on-surface-variant);
+  border: 1px solid var(--md-outline-variant); box-shadow: none;
+  transition: background .15s, border-color .15s, color .15s; white-space: nowrap; }
+.md3 .chip .lucide { width: 16px; height: 16px; color: var(--md-primary); }
+.md3 .chip:hover { background: var(--md-sc); border-color: var(--md-outline); }
+.md3 .chip--selected { background: var(--md-secondary-container); color: var(--md-on-secondary-container); border-color: transparent; }
+.md3 .chip--selected .lucide { color: currentColor; }
+.md3 .chip--filter.chip--selected { background: var(--md-primary-container); color: var(--md-on-primary-container); border-color: transparent; }
+/* list-card equipment tags: compact, non-interactive info chips (design CarCard.jsx — h24/11.5px),
+   NOT the 38px tappable filter-chip the base .chip is. */
+.md3 .listcard-chips .chip { height: 24px; padding: 0 10px; font-size: 11.5px; border-radius: 8px; cursor: default; }
+.md3 .listcard-chips .chip:hover { background: var(--md-surface); border-color: var(--md-outline-variant); }
+
+/* status / rating chip (no CTA) */
+.md3 .statchip { display: inline-flex; align-items: center; gap: 5px; height: 24px; padding: 0 10px;
+  border-radius: var(--md-r-xs); font-size: 12px; font-weight: 600; }
+.md3 .statchip--good { background: var(--md-good-container); color: var(--md-on-good-container); }
+.md3 .statchip--warn { background: var(--md-warn-container); color: var(--md-on-warn-container); }
+.md3 .statchip .lucide { width: 14px; height: 14px; }
+
+/* small image label (views, photo count) */
+.md3 .imglabel { display: inline-flex; align-items: center; gap: 5px; height: 26px; padding: 0 10px;
+  border-radius: var(--md-r-full); background: rgba(0,0,0,.55); color: #fff; font-size: 12px; font-weight: 500; backdrop-filter: blur(2px); }
+.md3 .imglabel .lucide { width: 14px; height: 14px; }
+
+/* ---------- cards ---------- */
+.md3 .mcard { background: var(--md-sc-lowest); border-radius: var(--md-r-md); border: 1px solid var(--md-outline-variant);
+  overflow: hidden; transition: box-shadow var(--dur-2) var(--ease-standard), border-color var(--dur-2) var(--ease-standard), transform var(--dur-2) var(--ease-standard); }
+.md3 .mcard--elevated { border: 0; box-shadow: var(--md-e1); }
+.md3 .mcard--interactive { cursor: pointer; }
+.md3 .mcard--interactive:hover { box-shadow: var(--md-e3); border-color: transparent; transform: translateY(-3px); }
+.md3 .mcard--filled { background: var(--md-sc-low); border: 0; }
+
+/* ---------- search bar ---------- */
+.md3 .msearch { display: flex; align-items: center; gap: 12px; height: 56px; padding: 0 18px;
+  border-radius: var(--md-r-full); background: var(--md-sc-high); color: var(--md-on-surface); }
+.md3 .msearch input { border: 0; outline: 0; background: transparent; flex: 1; font: 400 16px var(--md-font); color: inherit; min-width: 0; }
+.md3 .msearch .lucide { width: 22px; height: 22px; color: var(--md-on-surface-variant); flex: none; }
+
+/* ---------- text field (outlined, MD3) ---------- */
+.md3 .mfield { position: relative; display: flex; align-items: center; gap: 10px; height: 48px; padding: 0 14px;
+  border-radius: var(--md-r-xs); background: transparent; box-shadow: inset 0 0 0 1px var(--md-outline-variant);
+  font-size: 14px; color: var(--md-on-surface); transition: box-shadow .15s; }
+.md3 .mfield:focus-within { box-shadow: inset 0 0 0 2px var(--md-accent); }
+.md3 .mfield select, .md3 .mfield input { border: 0; outline: 0; background: transparent; flex: 1; font: inherit; color: inherit; min-width: 0; text-overflow: ellipsis; }
+.md3 .mfield select { -webkit-appearance: none; appearance: none; cursor: pointer; }
+.md3 .mfield .lucide { width: 20px; height: 20px; color: var(--md-on-surface-variant); flex: none; }
+.md3 .mfield .lucide:last-child { margin-left: auto; }
+/* compact field — dense Detailsuche range/value inputs (von/bis, monthly rate). */
+.md3 .mfield--sm { height: 44px; padding: 0 12px; gap: 8px; font-size: 14px; }
+.md3 .mfield--sm input { font-variant-numeric: tabular-nums; }
+/* von/bis range pair (Detailsuche, no slider). */
+.md3 .ds-range { display: flex; align-items: center; gap: 10px; }
+.md3 .ds-range-dash { flex: none; color: var(--md-on-surface-variant); }
+
+/* labelled form field (FormField — label + outlined input + error). */
+.md3 .mfield-group { display: flex; flex-direction: column; gap: 6px; }
+.md3 .mfield-label { color: var(--md-on-surface-variant); font-weight: 600; }
+.md3 .mfield--error { box-shadow: inset 0 0 0 2px var(--md-error); }
+.md3 .mfield-eye { display: flex; align-items: center; justify-content: center; border: 0; background: none;
+  cursor: pointer; color: var(--md-on-surface-variant); padding: 0 2px; flex: none; }
+.md3 .mfield-error-text { color: var(--md-error); font-size: 12px; line-height: 1.35; }
+
+/* ---------- Auth (Anmelden / Registrierung / Passwort) ---------- */
+.md3 .auth-main { padding: 36px 24px 80px; }
+.md3 .auth-card { max-width: 940px; margin: 0 auto; display: grid; grid-template-columns: 1fr;
+  background: var(--md-sc-lowest, #fff); border: 1px solid var(--md-outline-variant);
+  border-radius: var(--md-r-lg, 20px); overflow: hidden; box-shadow: var(--md-e1, 0 2px 10px rgba(0,0,0,.06)); }
+.md3 .auth-card--split { grid-template-columns: 1.08fr .92fr; }
+.md3 .auth-formside { padding: 34px 38px; min-width: 0; }
+.md3 .auth-aside { padding: 38px; background: var(--md-primary); color: #fff; display: flex;
+  flex-direction: column; justify-content: center; }
+.md3 .auth-aside h4 { font: 700 21px var(--md-font-display, var(--md-font)); margin: 0 0 20px; }
+.md3 .auth-aside ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 15px; }
+.md3 .auth-aside li { display: flex; gap: 12px; align-items: flex-start; font-size: 15px; line-height: 1.4; }
+.md3 .auth-aside li svg { flex: none; margin-top: 1px; opacity: .95; }
+.md3 .auth-tabs { display: flex; gap: 6px; margin-bottom: 24px; border-bottom: 1px solid var(--md-outline-variant); }
+.md3 .auth-tab { padding: 10px 14px; font: 600 15px var(--md-font); color: var(--md-on-surface-variant);
+  text-decoration: none; border-bottom: 2px solid transparent; margin-bottom: -1px; }
+.md3 .auth-tab:hover { color: var(--md-on-surface); }
+.md3 .auth-tab.is-active { color: var(--md-primary); border-bottom-color: var(--md-primary); }
+.md3 .auth-sub { color: var(--md-on-surface-variant); font-size: 14px; line-height: 1.5; margin: 0 0 4px; }
+.md3 .auth-form { display: flex; flex-direction: column; gap: 18px; }
+.md3 .auth-error { background: var(--md-error-container, #fdeceb); color: var(--md-error);
+  border-radius: var(--md-r-sm, 12px); padding: 10px 14px; font-size: 14px; }
+.md3 .auth-row-between { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; }
+.md3 .auth-link { color: var(--md-primary); font-weight: 600; text-decoration: none; font-size: 14px; cursor: pointer; }
+.md3 .auth-link:hover { text-decoration: underline; }
+.md3 .auth-foot { margin-top: 22px; font-size: 14px; color: var(--md-on-surface-variant); line-height: 1.5; }
+.md3 .auth-check { display: flex; gap: 10px; align-items: flex-start; font-size: 13px; line-height: 1.5; color: var(--md-on-surface); cursor: pointer; }
+.md3 .auth-check input { margin-top: 2px; accent-color: var(--md-primary); width: 18px; height: 18px; flex: none; }
+.md3 .auth-loading { display: flex; justify-content: center; align-items: center; min-height: 200px; }
+.md3 .auth-spinner { width: 32px; height: 32px; border-radius: 50%; border: 3px solid var(--md-outline-variant);
+  border-top-color: var(--md-primary); animation: auth-spin .8s linear infinite; }
+@keyframes auth-spin { to { transform: rotate(360deg); } }
+@media (max-width: 860px) {
+  .md3 .auth-card--split { grid-template-columns: 1fr; }
+  .md3 .auth-aside { display: none; }
+  .md3 .auth-formside { padding: 26px 22px; }
+}
+
+/* ---------- Checkout (md3 chrome — header · stepper · next button) ---------- */
+.md3 .co-page { background: var(--md-sc, #f4f5f7); min-height: 100vh; }
+.md3 .co-header { background: var(--md-sc-lowest, #fff); border-bottom: 1px solid var(--md-outline-variant);
+  position: sticky; top: 0; z-index: 30; }
+.md3 .co-header-row { display: flex; align-items: center; gap: 16px; padding: 12px 24px; min-height: 64px; }
+.md3 .co-back { display: flex; align-items: center; justify-content: center; width: 40px; height: 40px; flex: none;
+  border: 0; border-radius: 50%; background: none; cursor: pointer; color: var(--md-on-surface); }
+.md3 .co-back:hover { background: var(--md-sc); }
+.md3 .co-logo { display: flex; align-items: center; text-decoration: none; }
+.md3 .co-logo img { height: 36px; display: block; }
+.md3 .co-header-car { display: flex; align-items: center; gap: 16px; margin-left: auto; }
+.md3 .co-header-price { display: flex; flex-direction: column; align-items: flex-end; line-height: 1.1; }
+.md3 .co-price-amount { font: 700 20px var(--md-font); color: var(--md-on-surface); white-space: nowrap; }
+.md3 .co-price-unit { font-size: 13px; font-weight: 600; color: var(--md-on-surface-variant); }
+.md3 .co-price-vat { font-size: 11px; color: var(--md-on-surface-variant); }
+.md3 .co-header-info { display: flex; flex-direction: column; text-align: right; line-height: 1.2; }
+.md3 .co-car-model { font-weight: 600; font-size: 14px; color: var(--md-on-surface); }
+.md3 .co-car-sub { font-size: 12px; color: var(--md-on-surface-variant); }
+.md3 .co-car-img { width: 64px; height: 44px; object-fit: contain; border-radius: var(--md-r-sm, 10px); }
+/* stepper */
+.md3 .co-stepper { display: flex; align-items: center; gap: 0; max-width: 880px; margin: 28px auto 4px;
+  padding: 0 24px; overflow-x: auto; }
+.md3 .co-step { display: flex; align-items: center; gap: 10px; flex: 1; min-width: 0; color: var(--md-on-surface-variant); }
+.md3 .co-step-dot { display: flex; align-items: center; justify-content: center; width: 30px; height: 30px; flex: none;
+  border-radius: 50%; border: 2px solid var(--md-outline-variant); font: 700 13px var(--md-font);
+  background: var(--md-sc-lowest, #fff); }
+.md3 .co-step-label { font-size: 13px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
+.md3 .co-step-bar { flex: 1; height: 2px; min-width: 16px; background: var(--md-outline-variant); margin: 0 10px; }
+.md3 .co-step.is-active { color: var(--md-primary); }
+.md3 .co-step.is-active .co-step-dot { border-color: var(--md-primary); color: var(--md-primary); }
+.md3 .co-step.is-done { color: var(--md-on-surface); }
+.md3 .co-step.is-done .co-step-dot { border-color: var(--md-primary); background: var(--md-primary); color: #fff; }
+.md3 .co-step.is-done .co-step-bar { background: var(--md-primary); }
+/* vertical left rail (desktop) — mirrors the legacy fixed 376px stepper, md3 skin.
+   Each step: number/check dot · title · "x min" · chevron; active = primary-container
+   pill rounded on the right; done = filled primary dot. */
+.md3 .co-rail { position: fixed; top: 65px; bottom: 0; left: 0; width: 376px; box-sizing: border-box;
+  background: var(--md-sc-lowest, #fff); box-shadow: 2px 0 8px rgba(0,0,0,.08); z-index: 2;
+  padding: 28px 16px 28px 0; display: flex; flex-direction: column; gap: 4px; overflow-y: auto; }
+.md3 .co-rail-step { display: flex; align-items: center; gap: 16px; width: 100%; border: 0; background: none;
+  cursor: pointer; text-align: left; padding: 14px 18px 14px 28px; border-radius: 0 999px 999px 0;
+  color: var(--md-on-surface-variant); }
+.md3 .co-rail-step:hover:not(:disabled) { background: var(--md-sc); }
+.md3 .co-rail-step:disabled { cursor: default; }
+.md3 .co-rail-dot { position: relative; display: flex; align-items: center; justify-content: center; width: 44px; height: 44px;
+  flex: none; border-radius: 50%; border: 2px solid var(--md-outline-variant); font: 700 17px var(--md-font);
+  background: var(--md-sc-lowest, #fff); color: var(--md-on-surface-variant); }
+/* connector line so the step sequence reads as a progression (like the legacy stepper).
+   Drawn downward from each dot to the next; turns primary once the step is done. */
+.md3 .co-rail-step:not(:last-child) .co-rail-dot::after { content: ''; position: absolute; top: calc(100% + 2px);
+  left: 50%; transform: translateX(-50%); width: 2px; height: 30px; background: var(--md-outline-variant); }
+.md3 .co-rail-step.is-done .co-rail-dot::after { background: var(--md-primary); }
+.md3 .co-rail-body { display: flex; flex-direction: column; min-width: 0; }
+.md3 .co-rail-label { font: 700 18px var(--md-font); color: var(--md-on-surface); }
+.md3 .co-rail-min { font-size: 13px; color: var(--md-on-surface-variant); margin-top: 2px; }
+.md3 .co-rail-chev { margin-left: auto; color: var(--md-on-surface-variant); flex: none; }
+.md3 .co-rail-step.is-active { background: var(--md-primary-container); }
+.md3 .co-rail-step.is-active .co-rail-dot { border-color: var(--md-primary); color: var(--md-primary); }
+.md3 .co-rail-step.is-active .co-rail-label { color: var(--md-primary); }
+.md3 .co-rail-step.is-done .co-rail-dot { border-color: var(--md-primary); background: var(--md-primary); color: #fff; }
+/* brand row at the rail top (wide desktop, where the top header is hidden) */
+.md3 .co-rail-brand { display: flex; align-items: center; gap: 10px; padding: 0 18px 22px 16px; }
+@media (max-width: 1279px) { .md3 .co-rail-brand { display: none; } }
+/* completed steps read as "done" in green (active stays primary) */
+.md3 .co-rail-step.is-done .co-rail-dot { border-color: var(--md-good); background: var(--md-good); }
+.md3 .co-rail-step.is-done .co-rail-dot::after { background: var(--md-good); }
+/* summary aside (right rail, desktop ≥1280) — single car + offer + price + trust panel */
+.md3 .co-aside { position: fixed; top: 65px; bottom: 0; right: 0; width: 348px; box-sizing: border-box;
+  padding: 40px 24px; overflow-y: auto; z-index: 1; }
+.md3 .co-aside-card { background: var(--md-sc-lowest, #fff); border: 1px solid var(--md-outline-variant);
+  border-radius: var(--md-r-lg, 18px); padding: 18px; box-shadow: var(--md-e1); position: sticky; top: 0; }
+.md3 .co-aside-img { display: block; width: 100%; aspect-ratio: 16 / 10; height: auto; object-fit: cover;
+  border-radius: var(--md-r-md, 12px); background: var(--md-sc); margin-bottom: 16px; }
+.md3 .co-aside-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; }
+.md3 .co-aside-title { min-width: 0; }
+.md3 .co-aside-name { font: 700 17px var(--md-font); color: var(--md-on-surface); line-height: 1.25; }
+.md3 .co-aside-sub { font-size: 12.5px; color: var(--md-on-surface-variant); margin-top: 3px; line-height: 1.35; }
+.md3 .co-aside-offer { flex: none; padding: 4px 10px; border-radius: 999px;
+  background: var(--md-primary-container); color: var(--md-primary); font-size: 11.5px; font-weight: 700; white-space: nowrap; }
+.md3 .co-aside-price { margin-top: 16px; padding-top: 16px; border-top: 1px solid var(--md-outline-variant); }
+.md3 .co-aside-plabel { display: block; font-size: 12px; color: var(--md-on-surface-variant); margin-bottom: 2px; }
+.md3 .co-aside-prow { display: flex; align-items: baseline; gap: 4px; }
+.md3 .co-aside-amount { font: 800 26px var(--md-font); color: var(--md-primary); }
+.md3 .co-aside-unit { font-size: 14px; font-weight: 600; color: var(--md-on-surface-variant); }
+.md3 .co-aside-vat { display: block; font-size: 11.5px; color: var(--md-on-surface-variant); margin-top: 4px; }
+.md3 .co-trust { list-style: none; margin: 16px 0 0; padding: 16px 0 0; border-top: 1px solid var(--md-outline-variant);
+  display: flex; flex-direction: column; gap: 11px; }
+.md3 .co-trust li { display: flex; align-items: center; gap: 9px; font-size: 12.5px; color: var(--md-on-surface); }
+.md3 .co-trust svg { color: var(--md-good); flex: none; }
+@media (max-width: 1279px) { .md3 .co-aside { display: none; } }
+/* wide desktop (≥1280): car lives in the aside and brand/back move into the rail, so the
+   top header is dropped entirely and the rail + aside run from the very top. */
+@media (min-width: 1280px) {
+  .md3 .co-header { display: none; }
+  .md3 .co-rail { top: 0; }
+  .md3 .co-aside { top: 0; }
+}
+/* card-title leading icon */
+.md3 .co-card-title { display: flex; align-items: center; gap: 8px; }
+.md3 .co-card-ic { color: var(--md-primary); flex: none; }
+/* valid field — green ring (matches the --error ring treatment) + trailing green check.
+   .mfield draws its outline via inset box-shadow, not a CSS border, so colour the ring. */
+.md3 .mfield--valid { box-shadow: inset 0 0 0 1.5px var(--md-good); }
+.md3 .mfield-ok { display: flex; align-items: center; flex: none; }
+.md3 .mfield-ok .lucide { color: var(--md-good); }
+/* md3 checkout finance panel (Zahlungsdetails) — replaces the legacy OfferBlock */
+.md3 .cf-panel { display: flex; flex-direction: column; gap: 20px; }
+.md3 .cf-rate { display: flex; flex-direction: column; gap: 2px; }
+.md3 .cf-rate-label { font-size: 13px; color: var(--md-on-surface-variant); }
+.md3 .cf-rate-row { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; }
+.md3 .cf-rate-amount { font: 800 30px var(--md-font); color: var(--md-primary); }
+.md3 .cf-rate-amount small { font-size: 14px; font-weight: 600; color: var(--md-on-surface-variant); }
+.md3 .cf-rate-old { font-size: 13px; color: var(--md-on-surface-variant); text-decoration: line-through; }
+.md3 .cf-slider { display: flex; flex-direction: column; gap: 8px; }
+.md3 .cf-slider-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
+.md3 .cf-slider-val { font-weight: 700; color: var(--md-on-surface); }
+.md3 .cf-period { display: flex; flex-direction: column; gap: 10px; }
+.md3 .cf-opts { display: flex; flex-direction: column; gap: 12px; }
+.md3 .cf-check { display: flex; align-items: center; gap: 10px; font-size: 14px; color: var(--md-on-surface); cursor: pointer; }
+.md3 .cf-check input { width: 20px; height: 20px; accent-color: var(--md-primary); cursor: pointer; flex: none; }
+.md3 .cf-check-cost { margin-left: auto; font-weight: 700; color: var(--md-on-surface); white-space: nowrap; }
+.md3 .cf-details { display: inline-flex; align-items: center; gap: 6px; align-self: flex-start; background: none; border: 0;
+  padding: 0; cursor: pointer; color: var(--md-primary); font: inherit; font-size: 13px; font-weight: 600; }
+.md3 .cf-details-ic { color: var(--md-primary); }
+/* content + next button */
+.md3 .co-content { max-width: 880px; margin: 0 auto; padding: 24px; }
+.md3 .co-next { display: flex; flex-direction: column; align-items: flex-end; gap: 8px; margin-top: 28px; }
+.md3 .co-error { color: var(--md-error); font-size: 13px; font-weight: 600; }
+/* desktop: pin the action bar to the viewport bottom so "Weiter" is always reachable
+   without scrolling. Negative margins cancel the content padding so the bar spans from
+   the rail edge to the right edge; it sits above the rail (z below the header). */
+@media (min-width: 992px) {
+  .md3 .co-next {
+    position: sticky; bottom: 0; z-index: 5;
+    flex-direction: row; align-items: center; justify-content: flex-end; gap: 16px;
+    /* margin-top:auto pins the bar to the bottom of the min-height-filled content column,
+       so its position is identical on every step (no jump on submit). */
+    margin: auto -48px 0; padding: 16px 48px 20px;
+    /* fade the page surface up behind the buttons instead of a hard divider bar */
+    background: linear-gradient(to top, var(--md-surface) 62%, rgba(251, 251, 254, 0));
+    border-top: 0;
+  }
+  .md3 .co-next .co-error { margin-right: auto; }
+}
+/* checkout step content (md3) */
+.md3 .co-form { display: flex; flex-direction: column; gap: 20px; }
+.md3 .co-step-title { font: 700 22px var(--md-font-display, var(--md-font)); margin: 0; color: var(--md-on-surface); }
+.md3 .co-step-sub { color: var(--md-on-surface-variant); font-size: 14px; margin: 6px 0 0; }
+/* the step's leading title + sub form a header band, separated from the cards below. */
+.md3 .co-step-title + .co-step-sub { padding-bottom: 18px; border-bottom: 1px solid var(--md-outline-variant); }
+/* two cards side-by-side on wide desktop (contact step); stacks when the column narrows. */
+.md3 .co-cards-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; align-items: start; }
+@media (max-width: 1200px) { .md3 .co-cards-2 { grid-template-columns: 1fr; } }
+.md3 .co-card { background: var(--md-sc-lowest, #fff); border: 1px solid var(--md-outline-variant);
+  border-radius: var(--md-r-lg, 18px); padding: 22px 24px; }
+.md3 .co-card-title { font: 700 16px var(--md-font); margin: 0 0 18px; color: var(--md-on-surface); }
+.md3 .co-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px 20px; }
+.md3 .co-col-2 { grid-column: 1 / -1; }
+.md3 .co-phone { grid-column: 1 / -1; display: grid; grid-template-columns: 110px 1fr 1.6fr; gap: 12px; align-items: start; }
+.md3 .mfield--disabled { background: var(--md-sc); opacity: .7; }
+/* Zahlart — selectable offer cards */
+.md3 .co-pay-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
+.md3 .co-pay-card { position: relative; display: flex; flex-direction: column; align-items: flex-start; gap: 8px;
+  padding: 20px; text-align: left; cursor: pointer; background: var(--md-sc-lowest, #fff);
+  border: 1.5px solid var(--md-outline-variant); border-radius: var(--md-r-lg, 16px); color: var(--md-on-surface);
+  transition: border-color var(--dur-1), background var(--dur-1); }
+.md3 .co-pay-card:hover:not(.is-disabled):not(.is-on) { border-color: var(--md-primary); }
+.md3 .co-pay-card.is-on { border-color: var(--md-primary); background: var(--md-primary-container); }
+.md3 .co-pay-card.is-disabled { opacity: .45; cursor: not-allowed; }
+.md3 .co-pay-card svg { color: var(--md-primary); }
+.md3 .co-pay-radio { position: absolute; top: 16px; right: 16px; width: 20px; height: 20px; border-radius: 50%;
+  border: 2px solid var(--md-outline); }
+.md3 .co-pay-card.is-on .co-pay-radio { border-color: var(--md-primary); background: radial-gradient(circle, var(--md-primary) 0 5px, transparent 6px); }
+.md3 .co-pay-label { font: 700 16px var(--md-font); }
+.md3 .co-pay-info { font-size: 13px; color: var(--md-on-surface-variant); line-height: 1.4; }
+/* Zahlungsart explanatory block — fills the otherwise-empty step + sets expectations. */
+.md3 .co-pay-note { display: flex; align-items: flex-start; gap: 10px; margin-top: 4px; padding: 14px 16px;
+  background: var(--md-primary-container); border-radius: var(--md-r-md); color: var(--md-on-surface); font-size: 13.5px; line-height: 1.5; }
+.md3 .co-pay-note svg { color: var(--md-primary); flex: none; margin-top: 1px; }
+.md3 .co-pay-benes { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin-top: 4px; }
+.md3 .co-pay-bene { display: flex; align-items: flex-start; gap: 10px; padding: 14px 16px;
+  border: 1px solid var(--md-outline-variant); border-radius: var(--md-r-md); background: var(--md-sc-lowest, #fff); }
+.md3 .co-pay-bene svg { color: var(--md-good); flex: none; margin-top: 1px; }
+.md3 .co-pay-bene b { display: block; font-size: 13.5px; color: var(--md-on-surface); }
+.md3 .co-pay-bene span { font-size: 12.5px; color: var(--md-on-surface-variant); line-height: 1.4; }
+@media (max-width: 700px) { .md3 .co-pay-benes { grid-template-columns: 1fr; } }
+/* Zahldetails — borrower block + accordion */
+.md3 .co-borrower-head { font-size: 14px; color: var(--md-on-surface); }
+.md3 .co-borrower-role { font-weight: 700; }
+.md3 .co-accordion { margin-top: 16px; border: 1px solid var(--md-outline-variant); border-radius: var(--md-r-md, 12px); overflow: hidden; }
+.md3 .co-accordion-head { display: flex; align-items: center; justify-content: space-between; width: 100%;
+  padding: 14px 16px; background: var(--md-sc); border: 0; cursor: pointer; font: 600 15px var(--md-font); color: var(--md-on-surface); }
+.md3 .co-accordion-body { padding: 18px 16px; }
+/* Zusatzleistungen — warranty/registration/delivery card extras */
+.md3 .co-section-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 16px; flex-wrap: wrap; }
+.md3 .co-toggle { display: inline-flex; background: var(--md-sc); border-radius: 999px; padding: 3px; }
+.md3 .co-toggle-btn { border: 0; background: none; cursor: pointer; padding: 6px 16px; border-radius: 999px;
+  font: 600 13px var(--md-font); color: var(--md-on-surface-variant); }
+.md3 .co-toggle-btn.is-on { background: var(--md-sc-lowest, #fff); color: var(--md-primary); box-shadow: var(--md-e1, 0 1px 3px rgba(0,0,0,.12)); }
+.md3 .co-pay-price { font: 700 15px var(--md-font); color: var(--md-on-surface); }
+.md3 .co-pay-list { margin: 4px 0 0; padding-left: 18px; font-size: 12px; color: var(--md-on-surface-variant); line-height: 1.5; }
+.md3 .co-pay-check { position: absolute; top: 16px; right: 16px; width: 22px; height: 22px; border-radius: 6px;
+  border: 2px solid var(--md-outline); display: flex; align-items: center; justify-content: center;
+  font-size: 14px; font-weight: 700; color: #fff; }
+.md3 .co-pay-card.is-on .co-pay-check { background: var(--md-primary); border-color: var(--md-primary); }
+.md3 .co-addr-link { display: inline-flex; align-items: center; gap: 5px; margin-top: 6px; color: var(--md-primary);
+  font-weight: 600; font-size: 13px; cursor: pointer; }
+
+/* ---------- 404 ---------- */
+.md3 .nf-page { padding: 24px 0 64px; }
+.md3 .nf-hero { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; align-items: center; padding: 48px 24px; }
+.md3 .nf-hero-text { display: flex; flex-direction: column; align-items: flex-start; gap: 14px; }
+.md3 .nf-eyebrid { display: inline-flex; align-items: center; gap: 8px; font-weight: 700; font-size: 14px;
+  color: var(--md-on-surface-variant); }
+.md3 .nf-code { font: 800 96px/1 var(--md-font-display, var(--md-font)); color: var(--md-primary); letter-spacing: -2px; margin: 0; }
+.md3 .nf-sub { font-size: 18px; color: var(--md-on-surface); margin: 0; max-width: 36ch; line-height: 1.5; }
+.md3 .nf-search { min-width: 0; }
+.md3 .nf-reco { padding: 24px; }
+.md3 .nf-reco .md-title { margin-bottom: 16px; }
+@media (max-width: 860px) {
+  .md3 .nf-hero { grid-template-columns: 1fr; gap: 24px; padding: 24px; }
+  .md3 .nf-code { font-size: 72px; }
+}
+
+/* ---------- shared textarea ---------- */
+.md3 .mtextarea { width: 100%; min-height: 96px; padding: 12px 14px; border-radius: var(--md-r-xs, 8px);
+  border: 0; box-shadow: inset 0 0 0 1px var(--md-outline-variant); background: transparent; resize: vertical;
+  font: 400 14px/1.5 var(--md-font); color: var(--md-on-surface); }
+.md3 .mtextarea:focus { outline: 0; box-shadow: inset 0 0 0 2px var(--md-accent); }
+
+/* ---------- Impressum ---------- */
+.md3 .imp-page { padding: 28px 24px 64px; display: flex; flex-direction: column; gap: 20px; }
+.md3 .imp-card { background: var(--md-sc-lowest, #fff); border: 1px solid var(--md-outline-variant);
+  border-radius: var(--md-r-lg, 16px); padding: 24px 28px; }
+.md3 .imp-title { font: 700 18px var(--md-font); margin: 0 0 14px; color: var(--md-on-surface);
+  padding-bottom: 12px; border-bottom: 1px solid var(--md-outline-variant); }
+.md3 .imp-text { white-space: pre-line; font-size: 14px; line-height: 1.6; color: var(--md-on-surface-variant); }
+
+/* ---------- Kontakt ---------- */
+.md3 .kt-page { display: grid; grid-template-columns: 1fr 320px; gap: 32px; padding: 28px 24px 64px; align-items: start; }
+.md3 .kt-intro { font-size: 15px; color: var(--md-on-surface); margin: 0 0 20px; line-height: 1.5; }
+.md3 .kt-form { display: flex; flex-direction: column; gap: 18px; }
+.md3 .kt-honeypot { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }
+.md3 .kt-buttons { display: flex; justify-content: flex-end; gap: 12px; margin-top: 24px; }
+.md3 .kt-success { display: flex; align-items: center; gap: 8px; margin-top: 16px; color: var(--md-good);
+  font-weight: 600; font-size: 14px; }
+.md3 .kt-aside { background: var(--md-sc); border-radius: var(--md-r-lg, 16px); padding: 24px; display: flex;
+  flex-direction: column; gap: 22px; }
+.md3 .kt-aside-row { display: flex; gap: 14px; align-items: flex-start; }
+.md3 .kt-aside-icon { color: var(--md-primary); flex: none; }
+.md3 .kt-aside-label { margin: 0; font-size: 13px; color: var(--md-on-surface-variant); }
+.md3 .kt-aside-value { margin: 2px 0 0; font-weight: 700; color: var(--md-on-surface); }
+@media (max-width: 860px) { .md3 .kt-page { grid-template-columns: 1fr; } }
+
+/* ---------- Suchaufträge ---------- */
+.md3 .ms-page { padding: 28px 24px 64px; }
+.md3 .ms-head { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 24px; flex-wrap: wrap; }
+.md3 .ms-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(340px, 1fr)); gap: 18px; }
+.md3 .ms-card { background: var(--md-sc-lowest, #fff); border: 1px solid var(--md-outline-variant);
+  border-radius: var(--md-r-lg, 16px); padding: 20px; display: flex; flex-direction: column; gap: 14px; }
+.md3 .ms-card-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
+.md3 .ms-card-title { font: 700 17px var(--md-font); margin: 0; color: var(--md-on-surface); }
+.md3 .ms-card-desc { font-size: 13px; color: var(--md-on-surface-variant); line-height: 1.5; margin: 0; }
+.md3 .ms-card-info { display: flex; gap: 24px; flex-wrap: wrap; padding: 12px 0; border-top: 1px solid var(--md-outline-variant); border-bottom: 1px solid var(--md-outline-variant); }
+.md3 .ms-card-info > div { display: flex; flex-direction: column; gap: 2px; }
+.md3 .ms-info-label { font-size: 12px; color: var(--md-on-surface-variant); }
+.md3 .ms-info-val { font-weight: 700; font-size: 14px; color: var(--md-on-surface); }
+.md3 .ms-card-actions { display: flex; justify-content: flex-end; gap: 10px; }
+.md3 .ms-empty { text-align: center; padding: 64px 24px; color: var(--md-on-surface-variant); }
+.md3 .ms-empty svg { margin-bottom: 12px; }
+@media (max-width: 600px) { .md3 .ms-grid { grid-template-columns: 1fr; } }
+
+/* ---------- Einstellungen (Profile settings) ---------- */
+.md3 .st-page { padding: 24px 24px 64px; }
+/* st-shell — vertical breathing room for the legacy settings card in `next` mode.
+   The legacy .container is margin:0 on desktop, so the card sits flush against the
+   header/footer. Vertical only; horizontal margin stays from .container so the card
+   width is unchanged. Compound .md3.st-shell (0,2,0) beats .container (0,1,0). */
+.md3.st-shell { margin-top: 28px; margin-bottom: 56px; }
+@media (max-width: 980px) { .md3.st-shell { margin-top: 14px; margin-bottom: 32px; } }
+.md3 .st-tabs { display: flex; gap: 4px; border-bottom: 1px solid var(--md-outline-variant); margin-bottom: 24px; overflow-x: auto; }
+.md3 .st-tab { display: inline-flex; align-items: center; gap: 8px; padding: 12px 18px; border: 0; background: none;
+  cursor: pointer; font: 600 15px var(--md-font); color: var(--md-on-surface-variant); border-bottom: 2px solid transparent;
+  margin-bottom: -1px; white-space: nowrap; }
+.md3 .st-tab:hover { color: var(--md-on-surface); }
+.md3 .st-tab.is-active { color: var(--md-primary); border-bottom-color: var(--md-primary); }
+.md3 .st-tab svg { flex: none; }
+
+/* md3 settings forms (Account tab rebuilt on the autobahn primitives) */
+.md3 .st-panels { max-width: 900px; }
+.md3 .st-loading { display: flex; justify-content: center; padding: 56px; }
+.md3 .st-form { display: flex; flex-direction: column; gap: 24px; }
+.md3 .st-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px 20px; }
+@media (max-width: 600px) { .md3 .st-grid { grid-template-columns: 1fr; } }
+.md3 .st-phone { grid-column: 1 / -1; display: grid; grid-template-columns: 140px 120px 1fr; gap: 12px; align-items: end; }
+@media (max-width: 600px) { .md3 .st-phone { grid-template-columns: 1fr; } }
+.md3 .st-actions { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding-top: 16px; border-top: 1px solid var(--md-outline-variant); flex-wrap: wrap; }
+.md3 .st-actions-right { display: flex; gap: 12px; }
+.md3 .st-del .mbtn, .md3 .st-del { color: var(--md-error); }
+
+/* data-usage toggle rows */
+.md3 .du-row { display: flex; align-items: center; gap: 16px; padding: 18px; border: 1px solid var(--md-outline-variant); border-radius: var(--md-r-lg, 16px); background: var(--md-surface, #fff); }
+.md3 .du-ic { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; flex: none; border-radius: var(--md-r-full); background: var(--md-surface-variant, #eef1f6); color: var(--md-primary); }
+.md3 .du-copy { display: flex; flex-direction: column; gap: 2px; flex: 1; }
+.md3 .du-label { font: 700 15px var(--md-font); color: var(--md-on-surface); }
+.md3 .du-text { font-size: 13px; color: var(--md-on-surface-variant); }
+/* md3 switch */
+.md3 .mswitch { position: relative; display: inline-flex; flex: none; cursor: pointer; }
+.md3 .mswitch input { position: absolute; opacity: 0; width: 0; height: 0; }
+.md3 .mswitch-track { display: inline-block; width: 46px; height: 26px; border-radius: var(--md-r-full); background: var(--md-outline-variant); transition: background .15s; position: relative; }
+.md3 .mswitch-thumb { position: absolute; top: 3px; left: 3px; width: 20px; height: 20px; border-radius: var(--md-r-full); background: #fff; box-shadow: var(--md-e1); transition: transform .15s; }
+.md3 .mswitch input:checked + .mswitch-track { background: var(--md-primary); }
+.md3 .mswitch input:checked + .mswitch-track .mswitch-thumb { transform: translateX(20px); }
+
+/* md3 address cards (Einstellungen → Adressen) */
+.md3 .adr-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 16px; }
+.md3 .adr-card { border: 1px solid var(--md-outline-variant); border-radius: var(--md-r-lg, 16px); background: var(--md-surface, #fff); padding: 18px; box-shadow: var(--md-e1); }
+.md3 .adr-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; }
+.md3 .adr-title { font: 700 16px var(--md-font); color: var(--md-on-surface); }
+.md3 .adr-row { display: flex; gap: 10px; padding: 6px 0; border-bottom: 1px solid var(--md-outline-variant); font-size: 13.5px; }
+.md3 .adr-row:last-child { border-bottom: 0; }
+.md3 .adr-k { flex: none; width: 110px; color: var(--md-on-surface-variant); }
+.md3 .adr-v { color: var(--md-on-surface); }
+.md3 .adr-v--empty { color: var(--md-error); }
+.md3 .adr-add { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; min-height: 160px; border: 2px dashed var(--md-outline-variant); border-radius: var(--md-r-lg, 16px); background: none; cursor: pointer; color: var(--md-on-surface-variant); font: 600 14px var(--md-font); transition: border-color .12s, color .12s; }
+.md3 .adr-add:hover { border-color: var(--md-primary); color: var(--md-primary); }
+.md3 .adr-add-ic { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; border-radius: var(--md-r-full); background: var(--md-surface-variant, #eef1f6); }
+
+/* dealer dashboard — md3 odometer + chart-period buttons */
+.md3 .dash-card .employeesCountWrapper, .md3 .dash-odo { display: inline-flex; gap: 6px; margin: 12px 0; }
+.md3 .dash-odo span { display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 46px; border-radius: var(--md-r-sm, 10px); background: var(--md-primary); color: #fff; font: 700 24px var(--md-font); }
+
+/* dealer Mitarbeiter (employees) — md3 polish over the legacy structure */
+.md3 .emp-info { border: 1px solid var(--md-outline-variant); border-radius: var(--md-r-lg, 16px); background: var(--md-surface, #fff); padding: 20px; box-shadow: var(--md-e1); margin-bottom: 20px; }
+.md3 .emp-controls { display: flex; align-items: center; gap: 12px; margin-bottom: 20px; flex-wrap: wrap; }
+.md3 .emp-add { background: var(--md-primary) !important; color: #fff !important; border-radius: var(--md-r-full) !important; padding: 10px 20px !important; font: 600 14px var(--md-font) !important; text-transform: none !important; box-shadow: var(--md-e1) !important; }
+.md3 .emp-table { border: 1px solid var(--md-outline-variant); border-radius: var(--md-r-lg, 16px); background: var(--md-surface, #fff); overflow: hidden; box-shadow: var(--md-e1); }
+.md3 .emp-thead { background: var(--md-surface-variant, #eef1f6); color: var(--md-on-surface-variant); font: 600 12.5px var(--md-font); }
+
+/* ---------- Meine Fahrzeuge (vehicle list) ---------- */
+.md3 .mv-page { padding: 24px 24px 64px; }
+.md3 .mv-warning { background: var(--md-error-container, #fdeceb); color: var(--md-error); border-radius: var(--md-r-sm, 12px); padding: 12px 16px; margin-bottom: 16px; font-size: 14px; }
+.md3 .mv-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 24px; flex-wrap: wrap; }
+.md3 .mv-tools { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
+.md3 .mv-search { width: 260px; max-width: 100%; padding-right: 4px; }
+.md3 .mv-search input { border: 0; outline: 0; background: transparent; flex: 1; font: inherit; color: inherit; min-width: 0; }
+.md3 .mv-search-btn { display: flex; align-items: center; justify-content: center; border: 0; background: none; cursor: pointer; color: var(--md-on-surface-variant); flex: none; padding: 0 4px; }
+.md3 .mv-loading { display: flex; justify-content: center; padding: 64px; }
+
+/* ---------- Meine Fahrzeuge — md3 owner/dealer card (.mvc-*) ---------- */
+.md3 .mvc-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(440px, 1fr)); gap: 20px; }
+@media (max-width: 600px) { .md3 .mvc-list { grid-template-columns: 1fr; gap: 16px; } }
+.md3 .mvc { display: flex; flex-direction: column; background: var(--md-surface, #fff); border: 1px solid var(--md-outline-variant); border-radius: var(--md-r-lg, 16px); box-shadow: var(--md-e1); overflow: hidden; }
+.md3 .mvc-media { position: relative; display: block; aspect-ratio: 16 / 10; background: var(--md-surface-variant, #eef1f6); border-bottom: 1px solid var(--md-outline-variant); }
+.md3 .mvc-media img { width: 100%; height: 100%; object-fit: contain; }
+.md3 .mvc-imgcount { position: absolute; bottom: 8px; right: 8px; display: inline-flex; align-items: center; gap: 4px; height: 22px; padding: 0 8px; border-radius: var(--md-r-full); background: rgba(0,0,0,.62); color: #fff; font-size: 11px; font-weight: 600; }
+.md3 .mvc-status { position: absolute; top: 10px; left: 10px; display: inline-flex; align-items: center; height: 26px; padding: 0 12px; border-radius: var(--md-r-full); background: var(--md-surface, #fff); color: var(--md-on-surface-variant); font-size: 12px; font-weight: 700; box-shadow: var(--md-e1); cursor: pointer; }
+.md3 .mvc-status--on { background: var(--md-good, #0F7B43); color: #fff; }
+.md3 .mvc-body { padding: 14px 16px; display: flex; flex-direction: column; gap: 6px; }
+.md3 .mvc-title { font: 700 18px var(--md-font); color: var(--md-on-surface); text-decoration: none; line-height: 1.25; }
+.md3 a.mvc-title:hover { color: var(--md-primary); }
+.md3 .mvc-trim { font-size: 13.5px; color: var(--md-on-surface-variant); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+.md3 .mvc-specs { display: flex; flex-wrap: wrap; align-items: center; gap: 2px 8px; font-size: 12.5px; color: var(--md-on-surface-variant); margin-top: 2px; }
+.md3 .mvc-dot { color: var(--md-outline-variant); }
+.md3 .mvc-ids { display: flex; flex-wrap: wrap; gap: 2px 14px; font-size: 11.5px; color: var(--md-on-surface-variant); margin-top: 4px; }
+.md3 .mvc-ids b { color: var(--md-on-surface); font-weight: 600; }
+.md3 .mvc-price { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; margin-top: 6px; }
+.md3 .mvc-price-main { font-weight: 700; font-size: 22px; color: var(--md-primary); letter-spacing: -.4px; }
+.md3 .mvc-price-rate { font-size: 12.5px; color: var(--md-on-surface-variant); }
+.md3 .mvc-price-rate b { color: var(--md-on-surface); }
+.md3 .mvc-aggs { display: grid; grid-template-columns: repeat(auto-fit, minmax(88px, 1fr)); gap: 8px; margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--md-outline-variant); }
+.md3 .mvc-agg { display: flex; flex-direction: column; gap: 1px; }
+.md3 .mvc-agg-k { font-size: 11px; color: var(--md-on-surface-variant); }
+.md3 .mvc-agg-v { font-size: 15px; font-weight: 700; color: var(--md-on-surface); }
+.md3 .mvc-dealer { border-top: 1px solid var(--md-outline-variant); }
+.md3 .mvc-foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 16px; border-top: 1px solid var(--md-outline-variant); margin-top: auto; flex-wrap: wrap; }
+.md3 .mvc-controls { display: flex; align-items: center; gap: 4px; flex-wrap: wrap; }
+.md3 .mvc-ctrl { display: inline-flex; align-items: center; justify-content: center; width: 38px; height: 38px; border: 1px solid var(--md-outline-variant); border-radius: var(--md-r-full); background: var(--md-surface, #fff); color: var(--md-on-surface-variant); cursor: pointer; transition: background .12s, color .12s, border-color .12s; }
+.md3 .mvc-ctrl:hover { background: var(--md-surface-variant, #eef1f6); color: var(--md-primary); border-color: var(--md-primary); }
+.md3 .mvc-ctrl--disabled { opacity: .4; cursor: not-allowed; }
+.md3 .mvc-ctrl--disabled:hover { background: var(--md-surface, #fff); color: var(--md-on-surface-variant); border-color: var(--md-outline-variant); }
+
+/* ---------- Checkout OrderOverview (Übersicht) ---------- */
+.md3 .oo-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
+.md3 .oo-car { display: flex; gap: 16px; align-items: center; padding-bottom: 16px; border-bottom: 1px solid var(--md-outline-variant); margin-bottom: 16px; }
+.md3 .oo-car-img { width: 96px; height: 66px; object-fit: contain; border-radius: var(--md-r-sm, 10px); flex: none; }
+.md3 .oo-car-name { font: 700 17px var(--md-font); color: var(--md-on-surface); }
+.md3 .oo-car-sub { font-size: 13px; color: var(--md-on-surface-variant); margin-bottom: 4px; }
+.md3 .oo-seller { font-size: 13px; color: var(--md-on-surface-variant); cursor: pointer; }
+.md3 .oo-underline { color: var(--md-primary); text-decoration: underline; cursor: pointer; }
+.md3 .oo-row { padding: 12px 0; border-bottom: 1px solid var(--md-outline-variant); }
+.md3 .oo-row:last-child { border-bottom: 0; }
+.md3 .oo-row-title { font-weight: 700; font-size: 14px; color: var(--md-on-surface); margin-bottom: 6px; display: flex; justify-content: space-between; }
+.md3 .oo-row-add { font-weight: 400; font-size: 12px; color: var(--md-on-surface-variant); }
+.md3 .oo-row-val { font-size: 14px; color: var(--md-on-surface-variant); }
+.md3 .oo-line { display: flex; justify-content: space-between; gap: 12px; font-size: 14px; padding: 3px 0; }
+.md3 .oo-line-name { color: var(--md-on-surface-variant); }
+.md3 .oo-line-rate { color: var(--md-on-surface); font-weight: 600; text-align: right; }
+.md3 .oo-summary { align-self: start; }
+.md3 .oo-total { display: flex; flex-direction: column; padding-bottom: 14px; margin-bottom: 8px; border-bottom: 1px solid var(--md-outline-variant); }
+.md3 .oo-total-label { font-size: 14px; color: var(--md-on-surface-variant); }
+.md3 .oo-total-amount { font: 800 28px var(--md-font); color: var(--md-primary); }
+.md3 .oo-total-unit { font-size: 15px; font-weight: 600; color: var(--md-on-surface-variant); }
+.md3 .oo-vat { font-size: 12px; color: var(--md-on-surface-variant); }
+.md3 .oo-finance-link { display: inline-block; margin: 8px 0; color: var(--md-primary); font-weight: 600; font-size: 13px; cursor: pointer; }
+.md3 .oo-terms { margin-top: 20px; font-size: 13px; color: var(--md-on-surface-variant); line-height: 1.6; }
+.md3 .oo-buy { display: flex; justify-content: flex-end; margin-top: 16px; }
+@media (max-width: 800px) { .md3 .oo-grid { grid-template-columns: 1fr; } }
+
+/* ---------- Bestellungen (orders) ---------- */
+.md3 .mo-page { padding: 28px 24px 64px; }
+.md3 .mo-list { display: flex; flex-direction: column; gap: 18px; }
+.md3 .mo-card { padding: 20px 22px; }
+.md3 .mo-status { font-size: 13px; color: var(--md-on-surface-variant); margin-bottom: 12px; }
+.md3 .mo-status-val { color: var(--md-primary); font-weight: 700; }
+.md3 .mo-head { display: flex; align-items: center; gap: 16px; padding-bottom: 14px; border-bottom: 1px solid var(--md-outline-variant); }
+.md3 .mo-head > div:nth-child(2) { flex: 1; min-width: 0; }
+.md3 .mo-delivered { font-size: 12px; color: var(--md-good); margin-top: 4px; }
+.md3 .mo-rows { padding: 12px 0; border-bottom: 1px solid var(--md-outline-variant); }
+.md3 .mo-total { display: flex; justify-content: space-between; align-items: baseline; padding-top: 14px; font-weight: 700; }
+.md3 .mo-total-val { font-size: 20px; color: var(--md-primary); }
+
+/* ---------- Vergleich ---------- */
+.md3 .cmp-page { padding: 24px 24px 64px; }
+.md3 .cmp-head { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 20px; flex-wrap: wrap; }
+
+/* ---------- Abrechnung (Billing) ---------- */
+.md3 .bl-page { padding: 28px 24px 64px; }
+.md3 .bl-allprices { font-size: 13px; color: var(--md-on-surface-variant); margin: 12px 0 20px; }
+.md3 .bl-search { background: var(--md-sc); border-radius: var(--md-r-md, 12px); padding: 16px; margin-bottom: 20px; }
+.md3 .bl-range { display: flex; align-items: flex-end; gap: 12px; flex-wrap: wrap; }
+.md3 .bl-range .mfield { width: 200px; flex-direction: row; gap: 8px; }
+.md3 .bl-active { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; font-size: 14px; }
+.md3 .bl-active-btns { display: flex; align-items: center; gap: 10px; }
+.md3 .bl-reset { border: 0; background: none; cursor: pointer; color: var(--md-on-surface-variant); display: flex; }
+.md3 .bl-section { margin: 24px 0 12px; }
+.md3 .bl-noresult, .md3 .bl-error { color: var(--md-on-surface-variant); font-size: 14px; }
+
+/* ---------- Daten-Export / Import ---------- */
+.md3 .dx-page { padding: 28px 24px 64px; display: flex; flex-direction: column; gap: 18px; }
+.md3 .dx-info-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
+.md3 .dx-text { font-size: 14px; line-height: 1.55; color: var(--md-on-surface-variant); margin: 0; }
+.md3 .dx-contacts { display: flex; gap: 28px; flex-wrap: wrap; margin-top: 14px; }
+.md3 .dx-contact { display: flex; gap: 12px; align-items: center; color: var(--md-on-surface); }
+.md3 .dx-contact svg { color: var(--md-primary); flex: none; }
+.md3 .dx-c-title { font-size: 12px; color: var(--md-on-surface-variant); }
+.md3 .dx-steps { display: flex; flex-wrap: wrap; gap: 16px; margin: 8px 0 16px; }
+.md3 .dx-step { display: flex; align-items: center; gap: 10px; flex: 1; min-width: 180px; }
+.md3 .dx-step-num { display: flex; align-items: center; justify-content: center; width: 30px; height: 30px; flex: none;
+  border-radius: 50%; background: var(--md-primary); color: #fff; font-weight: 700; font-size: 14px; }
+@media (max-width: 700px) { .md3 .dx-info-grid { grid-template-columns: 1fr; } }
+
+/* shared dealer/owner page frame — md3 padding + max width (legacy inner blocks preserved) */
+.md3 .dlr-page { padding: 24px; }
+@media (min-width: 1100px) { .md3 .dlr-page { max-width: 1280px; margin: 0 auto; } }
+@media (max-width: 700px) {
+  .md3 .co-grid { grid-template-columns: 1fr; }
+  .md3 .co-phone { grid-template-columns: 90px 1fr 1fr; }
+  .md3 .co-pay-grid { grid-template-columns: 1fr; }
+}
+@media (max-width: 700px) {
+  .md3 .co-header-info { display: none; }
+  .md3 .co-step-label { display: none; }
+  .md3 .co-step { flex: none; }
+  .md3 .co-step-bar { min-width: 24px; }
+}
+/* below the 992px desktop breakpoint the content no longer reserves the 424px left
+   gap, so the fixed rail would overlap the form — hide it (mobile uses the header stepper). */
+@media (max-width: 991px) {
+  .md3 .co-rail { display: none; }
+}
+
+/* ---------- custom select / dropdown ----------
+   Themeable replacement for native <select> (whose OS-rendered option list can't be
+   styled). Trigger mirrors .mfield; the menu is a controlled .mcard-style popover. */
+.md3 .mselect { position: relative; display: inline-block; }
+.md3 .mselect.mselect--block { display: block; width: 100%; }
+.md3 .mselect-btn { display: flex; align-items: center; gap: 10px; width: 100%; height: 48px; padding: 0 14px;
+  border: 0; border-radius: var(--md-r-xs); background: transparent; box-shadow: inset 0 0 0 1px var(--md-outline-variant);
+  font: inherit; font-size: 14px; color: var(--md-on-surface); cursor: pointer; text-align: left; transition: box-shadow .15s; }
+.md3 .mselect-btn:hover { box-shadow: inset 0 0 0 1px var(--md-outline); }
+.md3 .mselect-btn[aria-expanded="true"] { box-shadow: inset 0 0 0 2px var(--md-accent); }
+.md3 .mselect-btn:disabled { opacity: .5; cursor: not-allowed; }
+.md3 .mselect-btn .lucide { width: 20px; height: 20px; color: var(--md-on-surface-variant); flex: none; }
+.md3 .mselect-label { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+.md3 .mselect-label--ph { color: var(--md-on-surface-variant); }
+.md3 .mselect-chev { margin-left: auto; transition: transform .15s; }
+.md3 .mselect-btn[aria-expanded="true"] .mselect-chev { transform: rotate(180deg); }
+.md3 .mselect--sm .mselect-btn { height: 34px; font-size: 13px; padding: 0 10px; gap: 6px; }
+.md3 .mselect--sm .mselect-btn .lucide { width: 16px; height: 16px; }
+.md3 .mselect-menu { position: absolute; z-index: 60; top: calc(100% + 4px); left: 0; min-width: 100%; max-height: 288px;
+  overflow-y: auto; padding: 6px; margin: 0; list-style: none; background: var(--md-sc-lowest, #fff);
+  border-radius: var(--md-r-sm, 12px); border: 1px solid var(--md-outline-variant);
+  box-shadow: var(--md-e2, 0 8px 24px rgba(0,0,0,.16)); }
+.md3 .mselect-menu--right { left: auto; right: 0; }
+.md3 .mselect-opt { display: flex; align-items: center; gap: 8px; width: 100%; padding: 9px 10px; border: 0;
+  border-radius: 8px; background: transparent; font: inherit; font-size: 14px; color: var(--md-on-surface);
+  text-align: left; cursor: pointer; }
+.md3 .mselect-opt-label { flex: 1; min-width: 0; }
+.md3 .mselect-opt:hover, .md3 .mselect-opt.is-active { background: var(--md-sc); }
+.md3 .mselect-opt[aria-selected="true"] { color: var(--md-primary); font-weight: 600; }
+.md3 .mselect-opt:disabled { opacity: .45; cursor: not-allowed; background: transparent; }
+.md3 .mselect-check { color: var(--md-primary); flex: none; }
+
+/* ---------- Detailsuche page ---------- */
+/* the sticky submit bar drives "apply" here, so hide FilterContent's own inline footer button. */
+.md3 .detailed-page .frail-foot { display: none; }
+.md3 .detailed-submitbar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 40; padding: 12px 0;
+  background: var(--md-sc-lowest, #fff); border-top: 1px solid var(--md-outline-variant);
+  box-shadow: 0 -4px 16px rgba(0,0,0,.06); }
+/* the "Detailsuche" link at the foot of the simple SRP rail. */
+.md3 .detailed-link { border-radius: 10px; }
+.md3 .detailed-link:hover { background: var(--md-sc); }
+
+/* sectioned Detailsuche layout (FilterContent variant="page") — full-width sections, multi-col grids */
+.md3 .ds-page { display: block; }
+.md3 .ds-section { padding: 30px 0; border-top: 1px solid var(--md-outline-variant); }
+.md3 .ds-section:first-child { border-top: 0; padding-top: 6px; }
+.md3 .ds-section > h2 { font: 700 19px var(--md-font); letter-spacing: -.2px; margin: 0 0 20px; color: var(--md-on-surface); }
+.md3 .ds-sub { font: 600 13px var(--md-font); color: var(--md-on-surface-variant); margin: 20px 0 8px; }
+.md3 .ds-sub:first-child { margin-top: 0; }
+.md3 .ds-grid-3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 28px; }
+.md3 .ds-grid-2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px 28px; }
+.md3 .ds-cols-3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 4px 28px; }
+@media (max-width: 900px) { .md3 .ds-grid-3, .md3 .ds-cols-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
+@media (max-width: 600px) { .md3 .ds-grid-3, .md3 .ds-grid-2, .md3 .ds-cols-3 { grid-template-columns: 1fr; } }
+
+/* two-column section flow — sections after Grundbasis auto-balance into 2 columns; the
+   densest (Sicherheit, Ausstattung) span both so their 3-up grids keep full reading width. */
+.md3 .ds-flow { column-count: 2; column-gap: 48px; }
+.md3 .ds-flow .ds-section { break-inside: avoid; -webkit-column-break-inside: avoid; padding: 26px 0; }
+.md3 .ds-flow .ds-section--wide { column-span: all; -webkit-column-span: all; padding: 30px 0; }
+/* inside a half-width flow column, collapse the multi-col inner grids so rows aren't cramped. */
+.md3 .ds-flow .ds-section:not(.ds-section--wide) .ds-grid-3 { grid-template-columns: 1fr 1fr; gap: 0 24px; }
+.md3 .ds-flow .ds-section:not(.ds-section--wide) .ds-cols-3 { grid-template-columns: 1fr; gap: 0; }
+.md3 .ds-flow .ds-section:not(.ds-section--wide) .ds-grid-2 { grid-template-columns: 1fr; }
+@media (max-width: 900px) { .md3 .ds-flow { column-count: 1; } }
+
+/* ---------- Merkliste (Favourites) ---------- */
+.md3 .fav-bar { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 18px; }
+.md3 .fav-cell { display: flex; flex-direction: column; }
+.md3 .fav-compare { display: inline-flex; align-items: center; justify-content: center; gap: 8px; margin-top: 8px;
+  height: 40px; border-radius: var(--md-r-sm, 12px); border: 1px solid var(--md-outline-variant); background: transparent;
+  font: 600 13px var(--md-font); color: var(--md-on-surface-variant); cursor: pointer;
+  transition: background .15s, border-color .15s, color .15s; }
+.md3 .fav-compare:hover { background: var(--md-sc); }
+.md3 .fav-compare--on { background: var(--md-primary-container); color: var(--md-on-primary-container); border-color: transparent; }
+.md3 .fav-compare .lucide { width: 18px; height: 18px; }
+
+/* ---------- segmented buttons ---------- */
+.md3 .segmented { display: inline-flex; border-radius: var(--md-r-full); box-shadow: inset 0 0 0 1px var(--md-outline-variant); overflow: hidden; }
+.md3 .segmented button { height: 38px; padding: 0 18px; border: 0; background: transparent; cursor: pointer;
+  font: 600 13px var(--md-font); color: var(--md-on-surface-variant); display: inline-flex; align-items: center; gap: 6px;
+  border-right: 1px solid var(--md-outline-variant); transition: background .15s; }
+.md3 .segmented button:last-child { border-right: 0; }
+.md3 .segmented button.on { background: var(--md-secondary-container); color: var(--md-on-secondary-container); }
+.md3 .segmented button .lucide { width: 16px; height: 16px; }
+
+/* ---------- spec item ---------- */
+.md3 .specitem { display: flex; align-items: center; gap: 10px; }
+.md3 .specitem .lucide { width: 20px; height: 20px; color: var(--md-on-surface-variant); flex: none; stroke-width: 1.75; }
+.md3 .specitem b { font-weight: 600; font-size: 14px; color: var(--md-on-surface); }
+.md3 .specitem span { display: block; font-size: 11.5px; color: var(--md-on-surface-variant); }
+
+/* ---------- list divider ---------- */
+.md3 .mdivider { height: 1px; background: var(--md-outline-variant); border: 0; margin: 0; }
+
+/* ---------- accent helpers (Signal-Cyan) ---------- */
+.md3 .link-accent:hover { text-decoration: underline; text-decoration-color: var(--md-accent); text-underline-offset: 3px; }
+.md3 .accent-rule { height: 3px; width: 44px; border-radius: 2px; background: var(--autode-swoosh); }
+.md3 :focus-visible { outline: 2px solid var(--md-accent); outline-offset: 2px; }
+.md3 .link-accent { color: var(--md-primary); cursor: pointer; text-decoration: none; }
+.md3 .link-accent:hover { text-decoration: underline; text-decoration-color: var(--md-accent); text-underline-offset: 3px; }
+
+/* ---------- card image carousel ---------- */
+.md3 .car-arrow { position: absolute; top: 50%; transform: translateY(-50%); width: 32px; height: 32px; border-radius: var(--md-r-full);
+  border: 0; background: rgba(255,255,255,.92); color: var(--md-on-surface); box-shadow: var(--md-e1);
+  display: flex; align-items: center; justify-content: center; cursor: pointer; opacity: 0; transition: opacity var(--dur-1); z-index: 2; }
+.md3 .car-arrow--l { left: 8px; } .md3 .car-arrow--r { right: 8px; }
+.md3 .cardcar:hover .car-arrow { opacity: 1; }
+@media (hover: none) { .md3 .car-arrow { opacity: .92; } }
+
+/* ==========================================================================
+   RESPONSIVE LAYOUT LAYER
+   Layout-critical grids live here (inline React styles can't carry @media).
+   Breakpoints: tablet ≤ 980px, phone ≤ 600px.
+   ========================================================================== */
+.md3 .container { max-width: 1180px; margin: 0 auto; width: 100%; }
+
+.md3 .hero-grid      { display: grid; grid-template-columns: 1.05fr .95fr; gap: 40px; align-items: center; }
+.md3 .hero-inner     { padding: 40px 24px 44px; }
+.md3 .field-grid-2   { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
+.md3 .cards-3        { display: grid; grid-template-columns: repeat(3,1fr); gap: 20px; }
+.md3 .cards-2        { display: grid; grid-template-columns: repeat(2,1fr); gap: 18px; }
+.md3 .cards-offers   { display: grid; grid-template-columns: repeat(3,1fr); gap: 20px; }
+.md3 .brand-grid     { display: grid; grid-template-columns: repeat(6,1fr); gap: 16px; }
+.md3 .steps-3        { display: grid; grid-template-columns: repeat(3,1fr); gap: 32px; }
+/* car-card grids: 2-up across the whole tablet range (incl. landscape ~1024) so cards never cram to 3 narrow columns */
+@media (max-width: 1024px) {
+  .md3 .cards-offers, .md3 .cards-3 { grid-template-columns: repeat(2, 1fr); }
+}
+/* guarantee band — one cohesive container with hairline columns (not four floating cards) */
+.md3 .guarantee-grid { display: grid; grid-template-columns: repeat(4,1fr); gap: 0; background: var(--md-sc-low);
+  border-radius: var(--md-r-lg); overflow: hidden; }
+.md3 .gitem          { padding: 26px 24px; display: flex; flex-direction: column; gap: 12px; border-left: 1px solid var(--md-outline-variant); }
+.md3 .gitem:first-child { border-left: 0; }
+/* magazine — editorial: one feature + stacked text rows */
+.md3 .mag-grid       { display: grid; grid-template-columns: 1.55fr 1fr; gap: 18px; align-items: stretch; }
+.md3 .mag-side       { display: flex; flex-direction: column; gap: 18px; }
+.md3 .mag-item       { flex: 1; display: flex; flex-direction: column; justify-content: center; gap: 8px;
+  padding: 22px 24px; background: var(--md-sc-lowest); }
+/* lower-page polish: connected 3-step flow band + testimonial accents */
+.md3 .steps-flow { position: relative; }
+.md3 .steps-flow::before { content: ''; position: absolute; top: 23px; left: 16.6%; right: 16.6%; height: 2px;
+  background: linear-gradient(90deg, transparent, rgba(22,184,232,.55), transparent); z-index: 0; }
+.md3 .steps-flow > * { position: relative; z-index: 1; }
+@media (max-width: 980px) { .md3 .steps-flow::before { display: none; } }
+.md3 .tcard { position: relative; }
+.md3 .tcard::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px; background: var(--autode-swoosh); }
+.md3 .mag-tag { display: inline-flex; align-self: flex-start; padding: 3px 10px; border-radius: var(--md-r-full);
+  background: var(--md-primary-container); color: var(--md-on-primary-container); font-size: 11px; font-weight: 700; letter-spacing: .3px; }
+/* VDP: desktop sticky summary bar — docks to top after the calculator scrolls away */
+.md3 .vdp-stickytop { position: fixed; top: 0; left: 0; right: 0; z-index: 70; background: var(--md-sc-lowest);
+  border-bottom: 1px solid var(--md-outline-variant); box-shadow: 0 2px 14px rgba(0,0,0,.08);
+  transform: translateY(-100%); transition: transform var(--dur-2, .25s); }
+.md3 .vdp-stickytop--on { transform: translateY(0); }
+/* VDP: header row — title left, rating chip right */
+.md3 .vdp-headrow  { display: flex; justify-content: space-between; align-items: flex-start; gap: 24px; }
+/* VDP: header fact line — plain text with dot separators (market-leader pattern, no pills) */
+.md3 .vdp-meta { display: flex; flex-wrap: wrap; align-items: center; row-gap: 8px; margin-top: 12px;
+  font-size: 14.5px; font-weight: 500; color: var(--md-on-surface); }
+.md3 .vdp-meta > span { display: inline-flex; align-items: center; gap: 7px; white-space: nowrap; }
+.md3 .vdp-meta > span + span::before { content: ''; width: 4px; height: 4px; border-radius: 50%;
+  background: var(--md-outline-variant); margin: 0 12px; }
+/* VDP: condition row — footer of the header card (hairline-divided, no own box) */
+.md3 .zustand-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0;
+  border-top: 1px solid var(--md-outline-variant); margin-top: 18px; padding-top: 4px; }
+.md3 .zustand-tile { display: flex; align-items: center; gap: 11px; padding: 12px 16px 0;
+  border-left: 1px solid var(--md-outline-variant); min-width: 0; }
+.md3 .zustand-tile:first-child { border-left: 0; padding-left: 0; }
+.md3 .vdp-anchors  { position: sticky; top: 0; z-index: 20; gap: 8px; padding: 10px 0;
+  background: var(--md-surface); overflow-x: auto; scrollbar-width: none;
+  width: 0; min-width: 100%; } /* width:0 kills min-content propagation; min-width re-stretches */
+.md3 .vdp-anchors::-webkit-scrollbar { display: none; }
+/* VDP page tint — white cards on cool gray for depth (mobile.de/AS24 use the same trick) */
+.md3 .vdp-tint .mcard--filled { background: var(--md-sc-lowest); border: 1px solid var(--md-outline-variant); }
+.md3 .steps-4      { display: grid; grid-template-columns: repeat(4, 1fr); gap: 26px; }
+/* HowItWorks — professional redesign: tinted section bg, white elevated step cards, gradient circles */
+.md3 .hiw-section { background: color-mix(in srgb, var(--md-primary) 5%, var(--md-surface));
+  border-radius: 20px; padding: 36px 28px; }
+.md3 .hiw-grid { position: relative; }
+.md3 .hiw-step { display: flex; flex-direction: column; align-items: center; text-align: center;
+  position: relative; z-index: 1;
+  background: #fff; border-radius: 16px; padding: 28px 16px 22px;
+  box-shadow: 0 2px 16px rgba(11,83,204,.09); border: 1px solid rgba(11,83,204,.07); }
+.md3 .hiw-step:not(:last-child)::after { content: '›'; position: absolute; right: -16px; top: 42px;
+  font-size: 24px; font-weight: 700; color: var(--md-primary); opacity: .4; z-index: 2; pointer-events: none; }
+.md3 .hiw-icon-wrap { position: relative; width: 64px; height: 64px; border-radius: var(--md-r-full);
+  background: linear-gradient(135deg, var(--md-primary) 0%, #16B8E8 100%);
+  box-shadow: 0 4px 14px color-mix(in srgb, var(--md-primary) 35%, transparent);
+  display: flex; align-items: center; justify-content: center; flex: none; margin-bottom: 16px; }
+.md3 .hiw-num { position: absolute; top: -4px; right: -4px; min-width: 20px; height: 20px; border-radius: var(--md-r-full);
+  background: #fff; color: var(--md-primary); font-size: 10px; font-weight: 900;
+  display: flex; align-items: center; justify-content: center; padding: 0 4px;
+  box-shadow: 0 2px 8px rgba(0,0,0,.18); }
+.md3 .hiw-title { font-size: 15px; font-weight: 700; margin-top: 4px; margin-bottom: 8px; color: var(--md-on-surface); }
+.md3 .hiw-desc { margin: 0; font-size: 13px; color: var(--md-on-surface-variant); line-height: 1.55; }
+.md3 .footer-grid    { display: grid; grid-template-columns: 1.4fr repeat(4,1fr); gap: 28px; }
+.md3 .srp-grid       { display: grid; grid-template-columns: 244px 1fr; gap: 24px; align-items: start; }
+/* SRP grid view sits beside the filter rail — 2 columns, not 3 (cards need ≥340px) */
+.md3 .srp-grid .cards-3 { grid-template-columns: repeat(2,1fr); }
+.md3 .srp-bar { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 12px; }
+.md3 .srp-chips { flex: 1 1 260px; min-width: 0; }
+/* "NEU" badge on car cards (legacy new-car label). */
+.md3 .neu-badge { display: inline-flex; align-items: center; height: 22px; padding: 0 8px; border-radius: var(--md-r-full); background: var(--md-primary); color: #fff; font-size: 10.5px; font-weight: 700; letter-spacing: .3px; white-space: nowrap; box-shadow: var(--md-e1); }
+@media (max-width: 820px) { .md3 .srp-chips { order: 3; flex-basis: 100%; } }
+.md3 .vdp-grid       { display: grid; grid-template-columns: 1fr 372px; gap: 28px; align-items: start; }
+.md3 .vdp-gallery    { grid-column: 1; grid-row: 1; }
+.md3 .vdp-details    { grid-column: 1; grid-row: 2; display: flex; flex-direction: column; gap: 22px; }
+.md3 .vdp-aside      { grid-column: 2; grid-row: 1 / span 2; align-self: start; position: sticky; top: 84px; display: flex; flex-direction: column; gap: 16px; }
+.md3 .vdp-gallerybox { height: 440px; } .md3 .vdp-gallerybox .cardcar { height: 100%; }
+.md3 .vdp-specs      { display: grid; grid-template-columns: 1fr 1fr; gap: 18px 32px; }
+.md3 .curated-grid   { display: grid; grid-template-columns: repeat(4,1fr); gap: 16px; }
+.md3 .curated-card   { padding: 18px; display: flex; flex-direction: column; gap: 14px; background: var(--md-sc-lowest);
+  text-align: left; transition: box-shadow var(--dur-2), transform var(--dur-2); }
+.md3 .curated-card:hover { box-shadow: var(--md-e2); transform: translateY(-2px); }
+.md3 .curated-top    { display: flex; align-items: center; gap: 13px; }
+.md3 .curated-ic     { width: 48px; height: 48px; border-radius: var(--md-r-md); flex: none;
+  display: inline-flex; align-items: center; justify-content: center; }
+.md3 .curated-titles { min-width: 0; }
+.md3 .curated-title  { display: block; font-family: var(--md-font-display); font-weight: 700; font-size: 16px;
+  color: var(--md-on-surface); letter-spacing: -.2px; }
+.md3 .curated-count  { display: block; font-size: 13px; color: var(--md-on-surface-variant); margin-top: 2px; }
+.md3 .curated-count b { color: var(--md-primary); font-weight: 700; }
+.md3 .curated-chips  { display: flex; flex-wrap: wrap; gap: 6px; }
+.md3 .curated-chip   { display: inline-flex; align-items: center; height: 26px; padding: 0 11px; border-radius: var(--md-r-full);
+  background: var(--md-sc); color: var(--md-on-surface-variant); font-size: 11.5px; font-weight: 600; white-space: nowrap; }
+.md3 .curated-cta    { margin-top: auto; padding-top: 2px; display: inline-flex; align-items: center; gap: 5px;
+  font-size: 13.5px; font-weight: 700; color: var(--md-primary); }
+.md3 .curated-cta svg { transition: transform var(--dur-2); }
+.md3 .curated-card:hover .curated-cta svg { transform: translateX(3px); }
+/* continuation modules: side-by-side on desktop, stacked below tablet */
+.md3 .continue-grid  { display: grid; grid-template-columns: 1fr 1fr; gap: 28px; align-items: start; }
+.md3 .continue-grid > div { min-width: 0; }
+/* "Zuletzt angesehen" / "Ähnlich" — full-width recommendation rows */
+.md3 .seen-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 12px; }
+.md3 .seen-head-ic { width: 30px; height: 30px; border-radius: var(--md-r-full); background: var(--md-primary-container);
+  display: inline-flex; align-items: center; justify-content: center; flex: none; }
+.md3 .seen-head-link { display: inline-flex; align-items: center; gap: 4px; font-size: 13.5px; font-weight: 600; flex: none; cursor: pointer; }
+.md3 .seen-list { display: flex; flex-direction: column; gap: 8px; }
+.md3 .seen-row { width: 100%; display: flex; align-items: center; gap: 14px; padding: 10px 14px 10px 10px;
+  background: var(--md-sc-lowest); text-align: left; box-shadow: var(--md-e1); border-color: var(--md-outline-variant);
+  transition: box-shadow var(--dur-2), transform var(--dur-2); }
+.md3 .seen-row:hover { box-shadow: var(--md-e2); transform: translateY(-1px); }
+.md3 .seen-row-media { width: 104px; height: 74px; border-radius: var(--md-r-sm); background: var(--md-sc); flex: none;
+  display: flex; align-items: center; justify-content: center; overflow: hidden; }
+.md3 .seen-row-img { width: 100%; height: 100%; object-fit: cover; }
+.md3 .seen-row-info { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
+.md3 .seen-row-toprow { display: flex; align-items: center; gap: 8px; min-width: 0; }
+.md3 .seen-row-title { font-family: var(--md-font-display); font-weight: 700; font-size: 15.5px; color: var(--md-on-surface);
+  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
+.md3 .seen-row-rate { flex: none; font-size: 10.5px; font-weight: 700; padding: 2px 8px; border-radius: var(--md-r-full); white-space: nowrap; }
+.md3 .seen-row-specs { font-size: 12.5px; color: var(--md-on-surface-variant); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
+.md3 .seen-row-price { display: flex; align-items: baseline; gap: 6px; margin-top: 1px; }
+.md3 .seen-row-price .num { font-weight: 700; font-size: 17px; color: var(--md-primary); letter-spacing: -.3px; }
+.md3 .seen-row-unit { font-size: 12px; color: var(--md-on-surface-variant); }
+.md3 .seen-row-cash { font-size: 12px; color: var(--md-on-surface-variant); margin-left: auto; white-space: nowrap; }
+/* LP comparison rows */
+.md3 .lp-vs-row { display: flex; align-items: center; gap: 16px; width: 100%; padding: 13px 2px;
+  background: none; border: 0; border-top: 1px solid var(--md-outline-variant); cursor: pointer; text-align: left; }
+.md3 .lp-vs-row:first-child { border-top: 0; }
+.md3 .lp-vs-verdict { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+/* affordability module */
+.md3 .budget-card  { display: flex; align-items: center; gap: 28px; padding: 22px 26px; background: var(--md-sc-lowest); }
+.md3 .budget-copy  { flex: 1.1; min-width: 0; }
+.md3 .budget-slider{ flex: 1.4; min-width: 0; }
+/* guided finder banner — the cyan accent moment (dark blue stays exclusive to hero + sell band) */
+.md3 .finder-banner{ display: flex; align-items: center; justify-content: space-between; gap: 20px; width: 100%;
+  padding: 18px 22px; background: var(--md-accent-container); text-align: left; }
+.md3 .finder-steps { display: inline-flex; align-items: center; gap: 14px; flex: none; }
+.md3 .thumb-row      { display: grid; grid-template-columns: repeat(5,1fr); gap: 10px; }
+.md3 .scroll-row     { display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none; }
+.md3 .scroll-row::-webkit-scrollbar { display: none; }
+.md3 .carrow         { display: grid; grid-template-columns: 300px 1fr; }
+.md3 .carrow-media   { height: 100%; min-height: 230px; }
+
+/* grid card media — fixed 4:3, hairline seam so the white photo area reads as a zone */
+.md3 .cc-media { aspect-ratio: 4 / 3; width: 100%; border-bottom: 1px solid var(--md-outline-variant); }
+.md3 .cc-media .cardcar { height: 100%; }
+/* consistent studio treatment for ALL inventory photos: white backdrop + soft grounding floor
+   shadow, so mixed-source cutouts look uniform (Carvana/Cinch catalog look) */
+.md3 .cc-media, .md3 .listcard-media {
+  background: radial-gradient(58% 13px at 50% 90%, rgba(16,22,42,.15), rgba(16,22,42,0) 72%), #fff; }
+/* offer cards: border + soft shadow so they sit on the page (not borderless-floaty) */
+.md3 .cc-card  { box-shadow: var(--md-e1); }
+
+/* horizontal listing card (SRP): image | info | price */
+.md3 .listcard { display: grid; grid-template-columns: 300px 1fr 240px; align-items: stretch; }
+.md3 .listcard-media { position: relative; min-height: 100%; display: flex; flex-direction: column; }
+/* wraps the carousel + its absolute overlays; flexes to fill whatever height the badge row below
+   doesn't need, so the row height stays governed by the grid (like before this row existed). */
+.md3 .listcard-media-img { position: relative; flex: 1 1 auto; min-height: 0; }
+/* activity/trust pill row under the SRP card image (availability · views · favorites · Geprüft) */
+.md3 .gallery-badges { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; padding: 8px 10px;
+  border-top: 1px solid var(--md-outline-variant); background: var(--md-sc-lowest); flex: none; }
+.md3 .gallery-pill { display: inline-flex; align-items: center; gap: 5px; height: 26px; padding: 0 10px;
+  border-radius: var(--md-r-full); border: 1px solid var(--md-outline-variant); background: var(--md-sc-lowest);
+  color: var(--md-on-surface); font-size: 11.5px; font-weight: 600; white-space: nowrap; }
+.md3 .gallery-pill--good { color: var(--md-good); border-color: var(--md-good); }
+.md3 .listcard-info  { padding: 16px 18px; display: flex; flex-direction: column; gap: 11px; min-width: 0; }
+.md3 .listcard-price { position: relative; padding: 16px 18px; border-left: 1px solid var(--md-outline-variant);
+  display: flex; flex-direction: column; justify-content: flex-start; gap: 16px; background: var(--md-sc-low); }
+/* NOTE: no own border-radius — the parent .mcard (radius --md-r-md) has overflow:hidden and clips
+   every column to the card corner. A larger radius here used to leave a card-bg sliver at the
+   bottom-right corner (the reported "corner / color" glitch). */
+/* spec strip (SRP info column) — one soft tinted container, airy icon+value pairs, no lines */
+.md3 .specstrip { display: flex; flex-wrap: wrap; gap: 9px 18px; padding: 11px 14px;
+  background: var(--md-sc-low); border-radius: var(--md-r-md); }
+/* filter rail: collapsible sections */
+.md3 .frail-group { border-bottom: 1px solid var(--md-outline-variant); }
+.md3 .frail-head { display: flex; align-items: center; justify-content: space-between; width: 100%;
+  padding: 13px 0; background: none; border: 0; cursor: pointer; text-align: left; gap: 12px; }
+.md3 .frail-sum { font-size: 12px; font-weight: 600; color: var(--md-primary); white-space: nowrap;
+  overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
+.md3 .frail-body { display: flex; flex-direction: column; gap: 10px; padding-bottom: 16px; }
+.md3 .frail-group:last-of-type { border-bottom: 0 !important; }
+.md3 .frow { display: flex; align-items: center; gap: 10px; font-size: 14px; cursor: pointer; }
+.md3 .frow-label { flex: 1; min-width: 0; color: var(--md-on-surface); }
+.md3 .frow-agg { margin-left: 5px; color: var(--md-on-surface-variant); font-size: 12px; font-variant-numeric: tabular-nums; white-space: nowrap; }
+/* Detailsuche page: give multi-select rows vertical breathing room (legacy list density). */
+.md3 .ds-page .frow { padding: 6px 0; }
+.md3 .frow-toggle { margin-top: 6px; padding-top: 10px; border-top: 1px solid var(--md-outline-variant); }
+/* live-count apply footer — sits at the end of the (non-sticky) filter list */
+.md3 .frail-foot { padding: 14px 0 2px; margin-top: 4px; }
+.md3 .sheet .frail-foot { display: none; }
+/* MD3 slider (standard: thin rounded track, filled active segment, round handle) — .md3 layer, no MUI.
+   NOTE: named .exslider (NOT .mslider — that class is the VDP finance-calculator slider further down). */
+.md3 .exslider { position: relative; height: 32px; margin: 6px 0 2px; touch-action: none; }
+.md3 .exslider-track { position: absolute; left: 0; right: 0; top: 50%; height: 4px; transform: translateY(-50%);
+  border-radius: 999px; background: var(--md-outline-variant); }
+.md3 .exslider-dots { display: none; }
+.md3 .exslider-fill { position: absolute; top: 50%; height: 4px; transform: translateY(-50%);
+  border-radius: 999px; background: var(--md-primary); pointer-events: none; }
+.md3 .exslider-wave { display: none; }
+/* native range inputs drive the interaction; only their round thumbs are hit-tested in range mode */
+.md3 .exslider input[type=range] { position: absolute; left: 0; top: 0; width: 100%; height: 100%; margin: 0;
+  background: none; -webkit-appearance: none; appearance: none; pointer-events: none; }
+.md3 .exslider--single input[type=range] { pointer-events: auto; }
+.md3 .exslider input[type=range]::-webkit-slider-runnable-track { height: 32px; background: none; border: 0; }
+.md3 .exslider input[type=range]::-moz-range-track { height: 32px; background: none; border: 0; }
+.md3 .exslider input[type=range]::-webkit-slider-thumb { -webkit-appearance: none; pointer-events: auto;
+  width: 18px; height: 18px; margin-top: 7px; border-radius: 50%; background: var(--md-primary); border: 0;
+  cursor: pointer; box-shadow: var(--md-e1); transition: box-shadow .15s var(--ease-standard); }
+.md3 .exslider input[type=range]::-moz-range-thumb { pointer-events: auto; width: 18px; height: 18px;
+  border-radius: 50%; background: var(--md-primary); border: 0; cursor: pointer; box-shadow: var(--md-e1); }
+.md3 .exslider input[type=range]:hover::-webkit-slider-thumb { box-shadow: 0 0 0 8px rgba(11,83,204,.12); }
+.md3 .exslider input[type=range]:active::-webkit-slider-thumb { box-shadow: 0 0 0 10px rgba(11,83,204,.18); }
+.md3 .exslider input[type=range]:hover::-moz-range-thumb { box-shadow: 0 0 0 8px rgba(11,83,204,.12); }
+.md3 .exslider input[type=range]:active::-moz-range-thumb { box-shadow: 0 0 0 10px rgba(11,83,204,.18); }
+.md3 .exslider input[type=range]:focus-visible::-webkit-slider-thumb { box-shadow: 0 0 0 3px var(--md-accent); }
+/* body-type tile grid */
+/* body-type tile grid: 2-col in the narrow rail, auto-fill on the full Detailsuche page */
+.md3 .body-tiles { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
+.md3 .ds-page .body-tiles { grid-template-columns: repeat(auto-fill, minmax(108px, 1fr)); gap: 12px; margin-bottom: 24px; }
+.md3 .body-tile { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 12px 6px;
+  border: 1.5px solid var(--md-outline-variant); border-radius: var(--md-r-md); background: var(--md-surface);
+  font: 600 12px/1.3 var(--md-font); color: var(--md-on-surface); cursor: pointer; transition: all var(--dur-1); text-align: center; }
+.md3 .ds-page .body-tile { padding: 16px 10px; gap: 9px; }
+.md3 .body-tile:hover:not(.on) { background: var(--md-surface-variant); border-color: var(--md-primary); }
+.md3 .body-tile.on { border-color: var(--md-primary); background: var(--md-primary-container); color: var(--md-on-primary-container); }
+.md3 .body-tile svg { color: var(--md-on-surface-variant); transition: color var(--dur-1); }
+.md3 .body-tile.on svg { color: var(--md-primary); }
+.md3 .body-tile .md-label-sm { color: var(--md-on-surface-variant); }
+/* payment paths: financing hero (eyebrow + big rate + terms) on top, Leasing/Kaufen quiet rows */
+.md3 .pricepaths { min-width: 0; }
+.md3 .pp-rows { display: flex; flex-direction: column; gap: 15px; }
+/* financing hero (legacy-style): eyebrow → big blue rate → terms line (fills the upper gap) */
+.md3 .pp-eyebrow { font-size: 11px; font-weight: 700; letter-spacing: .4px; text-transform: uppercase;
+  color: var(--md-on-surface-variant); margin-bottom: 4px; }
+.md3 .pp-hero-rate { display: flex; align-items: baseline; gap: 5px; }
+.md3 .pp-hero-val { font-size: 32px; font-weight: 700; color: var(--md-primary); letter-spacing: -1px; line-height: 1; }
+.md3 .pp-hero-unit { font-size: 13px; color: var(--md-on-surface-variant); }
+.md3 .pp-hero-terms { margin-top: 9px; font-size: 11.5px; color: var(--md-on-surface-variant); }
+/* separator line between the financing block and the leasing row (legacy-design parity) */
+.md3 .pp-lease-row { margin-top: 16px; padding-top: 16px; border-top: 1px solid var(--md-outline-variant); }
+.md3 .pp-sub-terms { margin-top: 3px; font-size: 11px; color: var(--md-on-surface-variant); text-align: right; }
+.md3 .pp-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
+.md3 .pp-row-label { display: inline-flex; align-items: center; gap: 5px; white-space: nowrap;
+  font-size: 13.5px; color: var(--md-on-surface-variant); }
+.md3 .pp-row-i { color: var(--md-outline); flex: none; }
+.md3 .pp-row-price { display: flex; flex-direction: column; align-items: flex-end; line-height: 1.08; min-width: 0; }
+.md3 .pp-old { font-size: 11.5px; color: var(--md-error); text-decoration: line-through; }
+.md3 .pp-now { display: inline-flex; align-items: baseline; gap: 4px; }
+.md3 .pp-unit { font-size: 11.5px; color: var(--md-on-surface-variant); }
+/* non-focus rates (Leasing / Kaufen): quiet + neutral so they don't compete with the focus rate */
+.md3 .pp-val { font-size: 19px; font-weight: 700; color: var(--md-on-surface); letter-spacing: -.4px; white-space: nowrap; }
+/* financing is the ONLY blue, dominant figure — big hero rate */
+.md3 .pp-row--focus .pp-row-label { color: var(--md-on-surface); font-weight: 700; }
+.md3 .pp-row--focus .pp-val { font-size: 31px; color: var(--md-primary); letter-spacing: -1px; }
+/* purchase group (Kaufen + meter + CTA) — divider above, anchored to the foot of the column */
+.md3 .pp-purchase { margin-top: auto; padding-top: 16px; border-top: 1px solid var(--md-outline-variant);
+  display: flex; flex-direction: column; gap: 14px; }
+/* CTA — spacing handled by the column's gap (no own margin) */
+.md3 .pp-cta { margin-top: 0; }
+/* Preisbewertung meter — top of the bottom zone (no longer auto-pinned; space-between does it) */
+.md3 .pp-meter-block { margin-top: 0; padding-top: 0; }
+.md3 .pp-market { margin-top: 9px; padding-top: 9px; border-top: 1px solid var(--md-outline-variant); }
+.md3 .pp-market-head { display: flex; flex-direction: column; gap: 2px; font-size: 12px; color: var(--md-on-surface-variant); }
+.md3 .pp-kauf { font-size: 11.5px; }
+.md3 .pp-kaufline { font-size: 12.5px; color: var(--md-on-surface-variant); }
+.md3 .pp-kaufline b { color: var(--md-on-surface); font-weight: 700; }
+/* segmented market-position meter (Preisbewertung shape) */
+.md3 .pp-meter { display: flex; gap: 3px; margin-top: 9px; }
+.md3 .pp-seg { flex: 1; height: 7px; border-radius: 3px; transition: opacity var(--dur-2); }
+.md3 .pp-mlabel { display: inline-block; margin-top: 7px; font-size: 11px; color: var(--md-on-surface-variant); }
+.md3 .pp-mlabel--good { color: var(--md-good); font-weight: 700; }
+/* activity now sits under the CTA */
+.md3 .pp-cta + .pp-activity, .md3 .listcard-price > div > .pp-activity { margin-top: 10px; justify-content: center; }
+.md3 .pp-bar { position: relative; height: 6px; border-radius: 999px; margin-top: 9px;
+  background: linear-gradient(90deg, var(--md-good) 0%, #E8B500 58%, #E8601A 100%); }
+.md3 .pp-bar-dot { position: absolute; top: 50%; width: 13px; height: 13px; border-radius: 50%; background: #fff;
+  border: 2.5px solid var(--md-on-surface); transform: translate(-50%, -50%); box-shadow: var(--md-e1); }
+/* muted buyer activity (#5) */
+.md3 .pp-activity { display: flex; align-items: center; gap: 5px; margin-top: 12px; font-size: 11px;
+  color: var(--md-on-surface-variant); white-space: nowrap; }
+.md3 .pp-activity svg { flex: none; }
+.md3 .gallery-img    { width: 100%; height: 420px; object-fit: cover; display: block; background: var(--md-sc); }
+.md3 .sec            { padding: 48px 24px 0; }
+
+/* mobile app bar / bottom bar visibility */
+.md3 .show-mobile { display: none !important; }
+.md3 .show-tablet { display: none !important; } /* visible ≤980 — tablet AND phone */
+.md3 .srp-sort { width: 186px; }
+.md3 .srp-sort select { font-size: 13px; }
+.md3 .srp-sort .lucide { pointer-events: none; } /* let taps fall through to the native select */
+.md3 .price-card { position: sticky; top: 88px; }
+
+/* CDP offer card — payment-type tabs on top (MD3 underline / primary tabs) */
+.md3 .fin-tabs { display: flex; border-bottom: 1px solid var(--md-outline-variant); margin-bottom: 18px; }
+.md3 .fin-tab { flex: 1; background: none; border: 0; padding: 11px 4px; cursor: pointer; font: inherit;
+  font-size: 13.5px; font-weight: 600; color: var(--md-on-surface-variant); border-bottom: 2px solid transparent;
+  margin-bottom: -1px; transition: color .15s, border-color .15s; }
+.md3 .fin-tab.on { color: var(--md-primary); border-bottom-color: var(--md-primary); }
+.md3 .fin-tab:hover:not(.on) { color: var(--md-on-surface); }
+/* 2-col grid: left grows, right fixed 148px — pill (row 1) and bar (row 2) share a column edge, never wrap */
+.md3 .fin-price-grid { display: grid; grid-template-columns: 1fr 148px; gap: 6px 16px; align-items: center; margin-top: 8px; }
+.md3 .fin-rate-main { min-width: 0; }
+/* rating pill — light tier-tinted bg, tier-colored text + icon (bg/color set inline per tier) */
+.md3 .fin-eval-pill { display: inline-flex; align-items: center; gap: 5px; padding: 6px 13px;
+  border-radius: var(--md-r-full); font-size: 14px; font-weight: 700; line-height: 1; white-space: nowrap; }
+.md3 .fin-eval-pill .lucide { flex: none; }
+/* gradient spectrum bar + circle thumb — replaces opacity-segment design */
+.md3 .fin-eval-bar { position: relative; width: 100%; height: 9px; border-radius: 5px;
+  background: linear-gradient(to right, #0F7B43, #72C02C, #FFC107, #FF6B35, #C62828); }
+.md3 .fin-eval-thumb { position: absolute; top: 50%; transform: translate(-50%, -50%);
+  width: 17px; height: 17px; border-radius: 50%; background: #fff;
+  border: 3px solid currentColor; box-shadow: 0 1px 4px rgba(0,0,0,.3); pointer-events: none; }
+/* UVP (struck list price) — cash mode only */
+.md3 .fin-kauf { margin-top: 8px; font-size: 13px; color: var(--md-on-surface-variant); }
+.md3 .fin-kauf s { color: var(--md-error); }
+/* condition summary — left cell of row 2 in fin-price-grid */
+.md3 .fin-cond { min-width: 0; font-size: 12.5px; color: var(--md-on-surface-variant); }
+/* Rate-edit (Rate anpassen) sits between the rate and the CTA now */
+.md3 .fin-adjust { margin-top: 14px; }
+/* auto.de-ID in front of the Finanzierungs-/Leasingdetails link — one row, divider above */
+.md3 .fin-info { margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--md-outline-variant);
+  display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
+.md3 .fin-id { font-size: 12px; color: var(--md-on-surface-variant); white-space: nowrap; }
+/* phone CTA — useful only on touch; hidden on desktop, shown ≤980 (tablet + phone) */
+.md3 .fin-call { display: none; margin-top: 8px; }
+/* Laufzeit as selectable chips — 4-column grid, filled selected state */
+.md3 .term-chips { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
+.md3 .term-chip { display: flex; align-items: center; justify-content: center; gap: 3px; height: 42px; padding: 0;
+  cursor: pointer; border-radius: 10px; border: 1.5px solid var(--md-outline-variant); background: var(--md-surface);
+  color: var(--md-on-surface); font: inherit; font-size: 15px; font-weight: 700;
+  transition: background .15s, border-color .15s, color .15s; }
+.md3 .term-chip .tc-unit { font-size: 11px; font-weight: 500; color: var(--md-on-surface-variant); }
+.md3 .term-chip:hover:not(.on) { border-color: var(--md-primary); background: color-mix(in srgb, var(--md-primary) 6%, transparent); }
+.md3 .term-chip.on { background: var(--md-primary); border-color: var(--md-primary); color: #fff; }
+.md3 .term-chip.on .tc-unit { color: rgba(255,255,255,.7); }
+
+/* enriched vehicle enquiry — trust aside + form */
+.md3 .enquiry-grid { display: grid; grid-template-columns: 0.85fr 1.15fr; align-items: stretch; }
+.md3 .enquiry-aside { background: var(--md-sc-low); padding: 24px; border-right: 1px solid var(--md-outline-variant);
+  display: flex; flex-direction: column; }
+.md3 .enquiry-ico { width: 36px; height: 36px; border-radius: var(--md-r-full); background: var(--md-primary-container);
+  display: flex; align-items: center; justify-content: center; flex: none; }
+.md3 .enquiry-benefits { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 11px; }
+.md3 .enquiry-benefits li { display: flex; align-items: center; gap: 10px; font-size: 13.5px; color: var(--md-on-surface); }
+.md3 .enquiry-benefits li .lucide { flex: none; }
+.md3 .enquiry-phone { display: inline-flex; align-items: center; gap: 8px; margin-top: auto; padding-top: 18px;
+  color: var(--md-primary); font-weight: 700; font-size: 16px; text-decoration: none; }
+.md3 .enquiry-form { padding: 24px; }
+@media (max-width: 780px) {
+  .md3 .enquiry-grid { grid-template-columns: 1fr; }
+  .md3 .enquiry-aside { border-right: 0; border-bottom: 1px solid var(--md-outline-variant); }
+  .md3 .enquiry-phone { margin-top: 16px; }
+}
+
+/* sticky mobile CTA bar (VDP) */
+.md3 .vdp-bottom-bar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 60; background: var(--md-sc-lowest);
+  border-top: 1px solid var(--md-outline-variant); box-shadow: 0 -2px 14px rgba(0,0,0,.10);
+  padding: 10px 16px; align-items: center; gap: 14px; }
+
+/* bottom-sheet (SRP filters) — sticky header + scrollable body + sticky action bar, slide-up entrance */
+.md3 .sheet-scrim { position: fixed; inset: 0; background: rgba(16,22,42,.5); z-index: 70;
+  animation: sheet-fade var(--dur-2) var(--ease-standard); }
+.md3 .sheet { position: fixed; left: 0; right: 0; bottom: 0; z-index: 71; background: var(--md-surface);
+  border-radius: var(--md-r-xl) var(--md-r-xl) 0 0; max-height: 92vh; display: flex; flex-direction: column;
+  box-shadow: 0 -8px 30px rgba(16,22,42,.22); animation: sheet-up var(--dur-3) var(--ease-emphasized); }
+/* non-scrolling header: drag handle + title + reset + close */
+.md3 .sheet-head { flex: none; padding: 0 16px; background: var(--md-surface);
+  border-radius: var(--md-r-xl) var(--md-r-xl) 0 0; border-bottom: 1px solid var(--md-outline-variant); }
+.md3 .sheet-handle { width: 36px; height: 4px; border-radius: 2px; background: var(--md-outline-variant); margin: 10px auto 6px; }
+.md3 .sheet-head-row { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 2px 0 10px; }
+.md3 .sheet-head-row h2 { margin: 0; font-size: 16px; font-weight: 700; }
+/* scrollable filter body */
+.md3 .sheet-body { flex: 1 1 auto; min-height: 0; overflow-y: auto; -webkit-overflow-scrolling: touch;
+  overscroll-behavior: contain; padding: 2px 16px 6px; }
+/* sticky action bar */
+.md3 .sheet-foot { flex: none; padding: 12px 16px calc(12px + env(safe-area-inset-bottom)); background: var(--md-surface);
+  border-top: 1px solid var(--md-outline-variant); box-shadow: 0 -6px 18px rgba(16,22,42,.08); }
+@keyframes sheet-up { from { transform: translateY(100%); } to { transform: translateY(0); } }
+@keyframes sheet-fade { from { opacity: 0; } to { opacity: 1; } }
+
+/* Finanzierungs-/Leasingdetails popup — centered modal (desktop), bottom-sheet (mobile) */
+.md3 .fin-modal-scrim { position: fixed; inset: 0; z-index: 60; background: rgba(8,12,24,.5);
+  display: flex; align-items: center; justify-content: center; padding: 24px; animation: sheet-fade var(--dur-2); }
+.md3 .fin-modal { background: var(--md-sc-lowest); border-radius: var(--md-r-lg); width: 100%; max-width: 460px;
+  max-height: 88vh; display: flex; flex-direction: column; overflow: hidden; box-shadow: var(--md-e3); }
+.md3 .fin-modal-head { display: flex; align-items: center; justify-content: space-between; gap: 12px;
+  padding: 16px 20px; border-bottom: 1px solid var(--md-outline-variant); flex: none; }
+.md3 .fin-modal-body { padding: 18px 20px 22px; overflow-y: auto; }
+@media (max-width: 600px) {
+  .md3 .fin-modal-scrim { align-items: flex-end; padding: 0; }
+  .md3 .fin-modal { max-width: none; max-height: 90vh; border-radius: var(--md-r-lg) var(--md-r-lg) 0 0;
+    animation: sheet-up var(--dur-2); }
+}
+
+/* mobile dropdown menu (TopBar) */
+.md3 .topbar-menu { position: absolute; top: 100%; left: 0; right: 0; background: var(--md-surface);
+  border-bottom: 1px solid var(--md-outline-variant); box-shadow: var(--md-e2); padding: 8px 16px 16px; }
+/* language segmented DE|EN — active tab filled, inactive ghost */
+.md3 .lang-seg { display: inline-flex; align-items: center; border: 1.5px solid var(--md-outline-variant);
+  border-radius: var(--md-r-full); overflow: hidden; flex: none; }
+.md3 .lang-seg-btn { display: flex; align-items: center; justify-content: center; height: 32px; padding: 0 11px;
+  font: inherit; font-size: 11.5px; font-weight: 700; letter-spacing: .5px; cursor: pointer;
+  border: 0; background: transparent; color: var(--md-on-surface-variant); transition: background .15s, color .15s; }
+.md3 .lang-seg-btn:first-child { border-right: 1.5px solid var(--md-outline-variant); }
+.md3 .lang-seg-btn.on { background: var(--md-primary); color: #fff; }
+.md3 .lang-seg-btn:not(.on):hover { background: color-mix(in srgb, var(--md-primary) 8%, transparent); }
+.md3 .hero-spacer { display: none; }
+
+@media (max-width: 980px) {
+  .md3 .continue-grid  { grid-template-columns: 1fr; gap: 24px; }
+  .md3 .hero-grid      { grid-template-columns: 1fr; gap: 24px; }
+  .md3 .listcard       { grid-template-columns: 260px 1fr; }
+  /* tablet: price column spans full width below image+info, zones stack in a normal column */
+  .md3 .listcard-price { grid-column: 1 / -1; border-left: 0; border-top: 1px solid var(--md-outline-variant);
+    flex-direction: column; justify-content: flex-start; gap: 12px; }
+  .md3 .listcard-price .pp-activity { display: none; }
+  .md3 .hero-inner     { padding: 32px 20px 28px; }
+  .md3 .cards-3        { grid-template-columns: repeat(2,1fr); }
+  .md3 .brand-grid     { grid-template-columns: repeat(4,1fr); }
+  .md3 .steps-3        { grid-template-columns: 1fr; gap: 20px; }
+  .md3 .guarantee-grid { grid-template-columns: repeat(2,1fr); }
+  .md3 .gitem          { border-left: 0; }
+  .md3 .gitem:nth-child(even) { border-left: 1px solid var(--md-outline-variant); }
+  .md3 .gitem:nth-child(n+3)  { border-top: 1px solid var(--md-outline-variant); }
+  .md3 .mag-grid       { grid-template-columns: 1fr; }
+  .md3 .zustand-grid   { grid-template-columns: repeat(2, 1fr); }
+  .md3 .steps-4        { grid-template-columns: repeat(2, 1fr); gap: 20px; }
+  .md3 .hiw-step:not(:last-child)::after { display: none; }
+  .md3 .curated-grid   { grid-template-columns: repeat(2,1fr); }
+  .md3 .footer-grid    { grid-template-columns: repeat(3,1fr); gap: 24px; }
+  .md3 .hide-tablet    { display: none !important; }
+  .md3 .show-tablet    { display: flex !important; }
+  .md3 .srp-rail       { display: none; } /* rail is desktop-only; ≤980 uses the filter sheet */
+  .md3 .srp-grid       { grid-template-columns: 1fr; }
+  .md3 .vdp-grid       { display: flex; flex-direction: column; }
+  .md3 .vdp-gallery    { order: 1; } .md3 .vdp-aside { order: 2; } .md3 .vdp-details { order: 3; }
+  .md3 .vdp-aside      { position: static; }
+  .md3 .price-card     { position: static; }
+  .md3 .fin-call       { display: block; } /* tap-to-call restored on touch */
+  .md3 .vdp-gallerybox { height: auto; aspect-ratio: 4 / 3; }
+  .md3 .press-wrap     { position: static !important; }
+  .md3 .press-bar      { transform: none !important; margin: 20px 16px 0 !important; height: auto !important;
+                    padding: 14px 18px !important; flex-wrap: wrap; }
+  .md3 .hero-spacer    { display: none !important; }
+  .md3 .gallery-img    { height: 320px; }
+}
+
+@media (max-width: 600px) {
+  .md3 .cards-3, .md3 .cards-2 { grid-template-columns: 1fr; }
+  /* listing card stacks: image (4:3) → badges → info → price */
+  .md3 .listcard { grid-template-columns: 1fr; }
+  .md3 .listcard-media { min-height: 0; }
+  .md3 .listcard-media-img { aspect-ratio: 4 / 3; flex: none; }
+  .md3 .listcard-price { border-left: 0; border-top: 1px solid var(--md-outline-variant); padding: 14px 16px;
+    flex-direction: column; justify-content: flex-start; align-items: stretch; gap: 14px; }
+  .md3 .listcard-price .pricepaths { flex: none; min-width: 0; }
+  /* only the data-less activity line is hidden on phone */
+  .md3 .listcard-price .pp-activity { display: none; }
+  .md3 .listcard-price .pp-cta { margin-top: 0; }
+  .md3 .listcard-price .mbtn { width: 100%; margin-top: 0 !important; }
+  .md3 .listcard-price .pp-meter-block { margin-top: 0; padding-top: 0; }
+  .md3 .listcard-info { padding: 14px 16px 6px; }
+  /* mobile: show all spec facts (km/EZ/Getriebe/Kraftstoff/Leistung/… wrap to 2 lines) — the
+     4-fact cap dropped Leistung (kW/PS) + Verfügbarkeit, which the legacy mobile card shows. */
+  .md3 .listcard-chips { flex-wrap: nowrap !important; overflow: hidden; }
+  .md3 .listcard-chips > :nth-child(n+3) { display: none; }
+  .md3 .srp-main { padding: 12px 16px 64px !important; }
+  .md3 .srp-sort { width: 146px; }
+  /* save-search banner: full-width button on phone (!important beats the inline desktop flex) */
+  .md3 .savesearch { flex-wrap: wrap; }
+  .md3 .savesearch > div { flex: 1 1 calc(100% - 56px) !important; }
+  .md3 .savesearch .mbtn { flex: 1 1 100% !important; justify-content: center; }
+  .md3 .srp-bar { position: sticky; top: 64px; z-index: 20; background: var(--md-surface); padding: 8px 0; margin: 0 0 8px;
+    box-shadow: 0 6px 8px -8px rgba(0,0,0,.3); }
+  .md3 .field-grid-2   { grid-template-columns: 1fr; gap: 10px; }
+  .md3 .hero-search    { padding: 18px !important; }
+  .md3 .brand-grid     { grid-template-columns: repeat(3,1fr); gap: 12px; }
+  .md3 .footer-grid    { grid-template-columns: repeat(2,1fr); gap: 20px; }
+  .md3 .vdp-specs      { grid-template-columns: 1fr; gap: 14px; }
+  /* spec table clamps to 6 rows on phone until "Alle Daten anzeigen" */
+  .md3 .vdp-specs--clamp .specitem:nth-child(n+7) { display: none; }
+  .md3 .gitem          { padding: 20px 18px; }
+  .md3 .steps-4        { grid-template-columns: 1fr; gap: 18px; }
+  .md3 .hiw-step       { flex-direction: row; align-items: flex-start; text-align: left; gap: 14px; }
+  .md3 .hiw-step:not(:last-child)::after { display: none; }
+  .md3 .hiw-icon-wrap  { margin-bottom: 0; flex: none; }
+  /* --- VDP header card: structured phone layout --- */
+  /* badge above title (no cramped side-by-side) */
+  .md3 .vdp-headrow  { flex-direction: column-reverse; align-items: flex-start; gap: 10px; }
+  /* facts: aligned 2-column grid instead of a wrapping dot-line */
+  .md3 .vdp-meta     { display: grid; grid-template-columns: 1fr 1fr; gap: 11px 14px; margin-top: 14px; }
+  .md3 .vdp-meta > span + span::before { content: none; }
+  .md3 .vdp-meta > span { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
+  /* highlights: one swipeable line, no ragged wrap */
+  .md3 .vdp-highlights { flex-wrap: nowrap !important; overflow-x: auto; scrollbar-width: none;
+    width: 0; min-width: 100%; }
+  .md3 .vdp-highlights::-webkit-scrollbar { display: none; }
+  .md3 .vdp-highlights .chip { flex: none; }
+  /* condition row: 2×2 on phone */
+  .md3 .zustand-grid   { grid-template-columns: 1fr 1fr; }
+  .md3 .zustand-tile   { border-left: 0; padding: 12px 0; }
+  .md3 .zustand-tile:nth-child(even) { border-left: 1px solid var(--md-outline-variant); padding-left: 14px; }
+  .md3 .zustand-tile:nth-child(n+3)  { border-top: 1px solid var(--md-outline-variant); }
+  .md3 .curated-grid   { grid-template-columns: 1fr; gap: 12px; }
+  .md3 .seen-row-cash  { display: none; }
+  .md3 .lp-vs-row      { flex-wrap: wrap; gap: 6px 10px; }
+  .md3 .lp-vs-verdict  { flex: 1 1 100%; white-space: normal; order: 3; }
+  .md3 .budget-card    { flex-direction: column; align-items: stretch; gap: 18px; padding: 20px; }
+  .md3 .budget-card .mbtn { width: 100%; justify-content: center; }
+  .md3 .finder-banner  { flex-direction: column; align-items: stretch; gap: 16px; }
+  .md3 .finder-steps   { justify-content: space-between; gap: 8px; }
+  .md3 .finder-steps .mbtn { display: none; }
+  /* SRP "Mehr laden": results beyond 4 stay hidden until expanded */
+  .md3 .srp-list:not(.srp-list--expanded) .srp-extra { display: none !important; }
+  .md3 .carrow         { grid-template-columns: 1fr; }
+  .md3 .thumb-row      { grid-template-columns: repeat(4,1fr); }
+  .md3 .sec            { padding: 36px 16px 0; }
+  .md3 .hero-inner     { padding: 24px 16px 22px; }
+  .md3 .gallery-img    { height: 230px; }
+  .md3 .hide-mobile    { display: none !important; }
+  .md3 .show-mobile    { display: flex !important; }
+  .md3 .press-logos    { flex-wrap: wrap; justify-content: center !important; gap: 14px 20px !important; }
+  .md3 .mbtn--lg       { height: 46px; }
+  /* compact hero so the search card + button surface above the fold */
+  .md3 .hero-inner     { padding: 16px 16px 18px !important; }
+  .md3 .hero-badge     { margin-bottom: 10px !important; font-size: 12px !important; }
+  .md3 .hero-h1        { font-size: 31px !important; letter-spacing: -.9px !important; margin: 0 0 10px !important; }
+  .md3 .hero-sub       { font-size: 14px !important; margin: 0 0 14px !important; }
+  .md3 .hero-stats     { gap: 16px !important; }
+  .md3 .hero-stats .num{ font-size: 17px !important; }
+  .md3 .hero-stats .st-lbl { font-size: 11px !important; }
+  .md3 .hero-grid      { gap: 16px !important; }
+}
+
+/* ---------- CDP modules ---------- */
+.md3 .mslider { -webkit-appearance: none; appearance: none; width: 100%; height: 6px; border-radius: var(--md-r-full);
+  background: var(--md-sc-highest); outline: 0; cursor: pointer; }
+.md3 .mslider::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; width: 22px; height: 22px; border-radius: 50%;
+  background: var(--md-primary); border: 3px solid #fff; box-shadow: var(--md-e2); cursor: pointer; }
+.md3 .mslider::-moz-range-thumb { width: 22px; height: 22px; border-radius: 50%; background: var(--md-primary); border: 3px solid #fff; box-shadow: var(--md-e2); cursor: pointer; }
+.md3 .eq-cols  { column-count: 2; column-gap: 32px; }
+.md3 .pmv-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 28px; }
+/* trust strip — quiet one-line reassurance, NOT a card band */
+.md3 .trust-strip { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; row-gap: 10px; padding: 2px 4px; }
+.md3 .trust-strip > div { display: inline-flex; align-items: center; gap: 8px; white-space: nowrap;
+  font-size: 13.5px; font-weight: 600; color: var(--md-on-surface-variant); }
+.md3 .trust-strip > div + div::before { content: ''; width: 4px; height: 4px; border-radius: 50%;
+  background: var(--md-outline-variant); margin: 0 14px; }
+
+@media (max-width: 600px) {
+  .md3 .eq-cols  { column-count: 1; }
+  .md3 .pmv-grid { grid-template-columns: 1fr; gap: 22px; }
+  .md3 .trust-strip { display: grid; grid-template-columns: 1fr 1fr; gap: 12px 16px; justify-items: start; }
+  .md3 .trust-strip > div + div::before { content: none; }
+}
+
+/* ---------- CO₂ / energy label — compact horizontal scale ---------- */
+.md3 .co2-scale { display: flex; gap: 4px; align-items: stretch; }
+.md3 .co2-seg   { flex: 1; height: 32px; border-radius: 7px; color: #fff; font-weight: 800; font-size: 12.5px;
+  display: flex; align-items: center; justify-content: center; opacity: .3; transition: opacity var(--dur-2) var(--ease-standard); }
+.md3 .co2-seg--on { opacity: 1; box-shadow: 0 2px 8px rgba(16,22,42,.25), 0 0 0 2px #fff inset; transform: scale(1.06); }
+.md3 .co2-stats { display: flex; flex-wrap: wrap; gap: 10px 26px; margin-bottom: 16px; }
+.md3 .dealer-map { position: relative; height: 130px; border-radius: var(--md-r-sm); overflow: hidden;
+  background: #e8edf3;
+  background-image:
+    linear-gradient(rgba(11,83,204,.07) 1px, transparent 1px),
+    linear-gradient(90deg, rgba(11,83,204,.07) 1px, transparent 1px),
+    linear-gradient(120deg, #dfe6ee, #eef2f7);
+  background-size: 26px 26px, 26px 26px, 100% 100%; }
+.md3 .dealer-map::after { content: ""; position: absolute; left: -10%; top: 60%; width: 130%; height: 10px;
+  background: rgba(22,184,232,.35); transform: rotate(-8deg); }
+.md3 .dealer-pin { position: absolute; left: 50%; top: 50%; transform: translate(-50%,-100%);
+  width: 34px; height: 34px; border-radius: 50% 50% 50% 0; background: var(--md-primary);
+  display: flex; align-items: center; justify-content: center; rotate: 45deg; box-shadow: var(--md-e2); }
+.md3 .dealer-pin .lucide { rotate: -45deg; }
+
+/* VDP: floating back button over the gallery — phone only (breadcrumb is hidden there) */
+.md3 .vdp-back { display: none; position: absolute; top: 12px; left: 14px; z-index: 3; }
+
+@media (max-width: 600px) {
+  /* full-bleed gallery: edge-to-edge, app-like (production pattern) */
+  .md3 .vdp-back { display: flex; }
+  .md3 .vdp-gallerybox { margin: -14px -24px 0; border-radius: 0; border: 0; box-shadow: none; }
+}
+
+/* ---------- save-search bar ---------- */
+.md3 .savesearch { display: flex; align-items: center; gap: 14px; }
+
+/* ---------- home: recent search, brand scroller ---------- */
+
+/* sell-your-car: petrol-cyan image banner (distinct from the hero blue) */
+.md3 .sell-band { position: relative; overflow: hidden; padding: 32px 36px; border: 0; min-height: 190px;
+  background: linear-gradient(115deg, #04293C 0%, #075A75 58%, #0A7FA0 100%); display: flex; align-items: center; }
+.md3 .sell-copy { position: relative; z-index: 1; max-width: 60%; min-width: 0; }
+.md3 .sell-steps { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
+.md3 .sell-car { position: absolute; right: -28px; bottom: -24px; width: 400px; max-width: 44%; object-fit: contain;
+  filter: drop-shadow(0 24px 32px rgba(0,0,0,.4)); }
+
+/* SEO directory */
+.md3 .seo-grid { display: grid; grid-template-columns: repeat(4,1fr); gap: 28px; }
+
+/* offers grid: dense 2-col on phone */
+@media (max-width: 600px) {
+  .md3 .cards-offers { grid-template-columns: 1fr; gap: 14px; }
+  .md3 .seo-grid { grid-template-columns: 1fr 1fr; gap: 22px; }
+  .md3 .sell-band { padding: 22px 18px; }
+  .md3 .sell-copy { max-width: 100%; }
+}
+.md3 .recent-search { display: flex; align-items: center; gap: 14px; padding: 12px 16px; background: var(--md-sc-lowest); }
+.md3 .recent-ic { width: 40px; height: 40px; border-radius: var(--md-r-full); background: var(--md-primary-container);
+  display: flex; align-items: center; justify-content: center; flex: none; }
+.md3 .brand-scroller { gap: 12px; padding-bottom: 6px; }
+.md3 .brand-chip { flex: none; background: none; border: 0; cursor: pointer; display: flex; flex-direction: column;
+  align-items: center; gap: 8px; width: 84px; padding: 4px; }
+.md3 .brand-circle { width: 64px; height: 64px; border-radius: 50%; background: var(--md-sc-lowest);
+  box-shadow: var(--md-e1); display: flex; align-items: center; justify-content: center;
+  transition: box-shadow var(--dur-1) var(--ease-standard), transform var(--dur-1) var(--ease-standard); }
+.md3 .brand-chip:hover .brand-circle { box-shadow: var(--md-e3); transform: translateY(-2px); }
+
+/* ---------- Landing page ---------- */
+.md3 .lp-hero  { display: grid; grid-template-columns: 1fr auto; gap: 32px; align-items: center; }
+.md3 .lp-stats { display: flex; gap: 26px; padding: 18px 24px; border-radius: var(--md-r-md); background: rgba(255,255,255,.10); flex: none; }
+.md3 .lp-text  { display: grid; grid-template-columns: 1fr 1fr; gap: 36px; align-items: start; }
+.md3 .lp-models { display: grid; grid-template-columns: repeat(auto-fill, minmax(176px, 1fr)); gap: 12px; }
+.md3 .lp-model-tile { padding: 13px 16px; text-align: left; background: var(--md-sc-lowest); display: flex; flex-direction: column; gap: 3px; }
+.md3 .lp-duo   { display: grid; grid-template-columns: 1.25fr 1fr; gap: 18px; align-items: stretch; }
+.md3 .lp-table-head { display: grid; grid-template-columns: 1fr 96px 110px; gap: 12px; padding: 8px 0;
+  font-size: 11.5px; font-weight: 700; letter-spacing: .4px; text-transform: uppercase; color: var(--md-on-surface-variant);
+  border-bottom: 1px solid var(--md-outline-variant); }
+.md3 .lp-table-head span:nth-child(n+2), .md3 .lp-table-row span:nth-child(n+2) { text-align: right; }
+.md3 .lp-table-row { display: grid; grid-template-columns: 1fr 96px 110px; gap: 12px; align-items: center;
+  width: 100%; padding: 11px 0; background: none; border: 0; cursor: pointer; text-align: left;
+  border-bottom: 1px solid var(--md-outline-variant); font-family: inherit; font-size: 14px; color: var(--md-on-surface); }
+.md3 .lp-table-row:last-child { border-bottom: 0; }
+.md3 .lp-table-row:hover .md-title-sm { color: var(--md-primary); }
+@media (max-width: 900px) {
+  .md3 .lp-hero  { grid-template-columns: 1fr; gap: 22px; }
+  .md3 .lp-stats { align-self: start; }
+  .md3 .lp-text  { grid-template-columns: 1fr; gap: 28px; }
+  .md3 .lp-duo   { grid-template-columns: 1fr; }
+}
+@media (max-width: 600px) {
+  .md3 .lp-stats { gap: 18px; padding: 14px 16px; width: 100%; justify-content: space-between; }
+  /* phone: model tiles collapse to ONE swipeable row so cars stay near the top */
+  .md3 .lp-models { display: flex; overflow-x: auto; gap: 10px; scrollbar-width: none; padding-bottom: 4px; }
+  .md3 .lp-models::-webkit-scrollbar { display: none; }
+  .md3 .lp-model-tile { flex: none; padding: 10px 14px; }
+  .md3 .lp-table-head, .md3 .lp-table-row { grid-template-columns: 1fr 82px 92px; gap: 8px; }
+}
+
+/* ---------- Dealer Dashboard — md3 card chrome (.dash-*) ----------
+   Additive: these are scoped under .md3 so they ONLY apply when the dashboard
+   renders inside the flagged `md3 dlr-page` root. The legacy variant has no
+   .md3 ancestor → none of these match → legacy look is byte-identical. */
+.md3 .dash-page-title { font: 700 28px var(--md-font); color: var(--md-on-surface); margin: 0 0 24px; letter-spacing: -.4px; }
+.md3 .dash-card { background: var(--md-surface, #fff); border: 1px solid var(--md-outline-variant); border-radius: var(--md-r-lg, 16px); box-shadow: var(--md-e1); padding: 20px; margin-bottom: 20px; min-height: auto; }
+.md3 .dash-card-title { font: 700 17px var(--md-font); color: var(--md-on-surface); margin: 0 0 14px; }
+.md3 .dash-link { display: inline-block; margin-top: 16px; font: 600 14px var(--md-font); color: var(--md-primary); text-decoration: none; }
+.md3 .dash-link:hover { text-decoration: underline; }
+.md3 .dash-link--primary { background: var(--md-primary); color: #fff; padding: 10px 18px; border-radius: var(--md-r-full); box-shadow: var(--md-e1); }
+.md3 .dash-link--primary:hover { text-decoration: none; opacity: .92; }
+.md3 .dash-table { width: 100%; border-collapse: collapse; font-size: 13.5px; }
+.md3 .dash-table th { text-align: left; font: 600 12.5px var(--md-font); color: var(--md-on-surface-variant); padding: 6px 8px; border-bottom: 1px solid var(--md-outline-variant); }
+.md3 .dash-table td { padding: 9px 8px; border-bottom: 1px solid var(--md-outline-variant); color: var(--md-on-surface); vertical-align: middle; }
+.md3 .dash-table tr:last-child td { border-bottom: 0; }
+
+/* ============================================================================
+   LEGACY → md3 IN-PLACE BRIDGE  (account / dealer / admin pages)
+   ----------------------------------------------------------------------------
+   Restyles the legacy MUI / fe-ui-core primitives to md3 tokens WITHOUT changing
+   any structure or layout. Scoped under `.md3`, so it only affects the flagged
+   legacy pages (which wrap their unchanged legacy markup in a `.md3` root).
+   • SRP / VDP / Detailsuche / Checkout / Auth use the autobahn primitives (not
+     MUI) → unaffected.  • MUI Slider is intentionally NOT touched (used by the
+     SRP filters).  • Modals render in a body portal (outside `.md3`) → unchanged.
+   Items move to md3 in place; positions/grids stay exactly as the legacy layout.
+   ============================================================================ */
+
+/* — Buttons (fe-ui-core Button === @mui/material Button) — */
+.md3 .MuiButton-root { font-family: var(--md-font) !important; text-transform: none !important; border-radius: var(--md-r-full) !important; font-weight: 600 !important; letter-spacing: normal !important; box-shadow: none !important; }
+.md3 .MuiButton-root:hover { box-shadow: none !important; }
+.md3 .MuiButton-containedPrimary:not(.Mui-disabled) { background-color: var(--md-primary) !important; color: var(--md-on-primary) !important; }
+.md3 .MuiButton-containedPrimary:not(.Mui-disabled):hover { background-color: var(--autode-blau-strong) !important; }
+.md3 .MuiButton-containedSecondary:not(.Mui-disabled) { background-color: var(--md-error) !important; color: #fff !important; }
+.md3 .MuiButton-outlinedPrimary:not(.Mui-disabled) { border: 1px solid var(--md-primary) !important; color: var(--md-primary) !important; background: transparent !important; }
+.md3 .MuiButton-textPrimary, .md3 .MuiButton-text { color: var(--md-primary) !important; }
+.md3 .MuiButton-textError, .md3 .MuiButton-outlinedError { color: var(--md-error) !important; }
+
+/* — Outlined inputs: TextField / FormMaterialField / Autocomplete / DatePicker — */
+.md3 .MuiOutlinedInput-root { border-radius: var(--md-r-sm) !important; font-family: var(--md-font) !important; }
+.md3 .MuiOutlinedInput-notchedOutline { border-color: var(--md-outline-variant) !important; }
+.md3 .MuiOutlinedInput-root:hover .MuiOutlinedInput-notchedOutline { border-color: var(--md-outline) !important; }
+.md3 .MuiOutlinedInput-root.Mui-focused .MuiOutlinedInput-notchedOutline { border-color: var(--md-primary) !important; border-width: 2px !important; }
+.md3 .MuiInputLabel-root { font-family: var(--md-font) !important; }
+.md3 .MuiInputLabel-root.Mui-focused { color: var(--md-primary) !important; }
+.md3 .MuiInputBase-input, .md3 .MuiInputBase-root { font-family: var(--md-font) !important; }
+
+/* — Tabs (Einstellungen) — */
+.md3 .MuiTab-root { font-family: var(--md-font) !important; text-transform: none !important; font-weight: 600 !important; }
+.md3 .MuiTab-root.Mui-selected { color: var(--md-primary) !important; }
+.md3 .MuiTabs-indicator { background-color: var(--md-primary) !important; }
+
+/* — Selection controls — */
+.md3 .MuiCheckbox-root.Mui-checked, .md3 .MuiRadio-root.Mui-checked { color: var(--md-primary) !important; }
+.md3 .MuiSwitch-switchBase.Mui-checked { color: var(--md-primary) !important; }
+.md3 .MuiSwitch-switchBase.Mui-checked + .MuiSwitch-track { background-color: var(--md-primary) !important; }
+
+/* — MUI tables (where used) — */
+.md3 .MuiTableCell-root { font-family: var(--md-font) !important; }
+.md3 .MuiTableCell-head { font-weight: 600 !important; color: var(--md-on-surface-variant) !important; }
+
+/* — headings inside legacy pages pick up the md3 display face — */
+.md3 h1, .md3 h2, .md3 h3 { font-family: var(--md-font-display); }
+
+
+/* =====================================================================
+   md3 KIT PRIMITIVES (Group-B in-place rebuild) — auto-integrated
+   ===================================================================== */
+
+/* ── FormDropdown (mfd-) — md3 mobx-form dropdown adapter ──────────────────────────
+   Single-select reuses the base Dropdown (.mselect-*); only label/error wrapper +
+   an error ring are added here. Multi-select reuses .mselect-* and adds chips +
+   a checklist. All selectors scoped under .md3, unique `mfd-` prefix. */
+.md3 .mfd { display: flex; flex-direction: column; gap: 6px; }
+.md3 .mfd-label { color: var(--md-on-surface-variant); font-weight: 600; }
+.md3 .mfd-error { color: var(--md-error); font-size: 12px; line-height: 1.35; }
+
+/* error ring on the single-select trigger (base Dropdown puts `className` on the
+   .mselect wrapper, so reach the inner button from there). */
+.md3 .mselect.mfd-invalid .mselect-btn,
+.md3 .mselect-btn.mfd-invalid { box-shadow: inset 0 0 0 2px var(--md-error); }
+.md3 .mselect.mfd-invalid .mselect-btn[aria-expanded="true"],
+.md3 .mselect-btn.mfd-invalid[aria-expanded="true"] { box-shadow: inset 0 0 0 2px var(--md-error); }
+
+/* ── multi-select ──────────────────────────────────────────────────────────── */
+.md3 .mfd-multi { position: relative; display: block; width: 100%; }
+/* taller, top-aligned trigger so wrapped chips don't clip; otherwise = .mselect-btn. */
+.md3 .mfd-multi-btn { height: auto; min-height: 48px; align-items: flex-start; padding: 7px 14px; }
+.md3 .mfd-multi-btn .mselect-chev { align-self: center; }
+
+.md3 .mfd-chips { flex: 1; min-width: 0; display: flex; flex-wrap: wrap; gap: 6px; padding: 1px 0; }
+.md3 .mfd-chip { display: inline-flex; align-items: center; gap: 4px; height: 26px; padding: 0 4px 0 10px;
+  border-radius: var(--md-r-full); background: var(--md-secondary-container);
+  color: var(--md-on-secondary-container); font-size: 12.5px; font-weight: 600; max-width: 100%; }
+.md3 .mfd-chip-label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+.md3 .mfd-chip-x { display: inline-flex; align-items: center; justify-content: center; width: 18px; height: 18px;
+  border-radius: var(--md-r-full); cursor: pointer; color: var(--md-on-secondary-container); flex: none; }
+.md3 .mfd-chip-x:hover { background: rgba(0,0,0,.10); }
+.md3 .mfd-chip-x .lucide { width: 13px; height: 13px; }
+
+/* checklist menu — same surface as .mselect-menu (declared explicitly so it works
+   even if the base rule is order-sensitive). */
+.md3 .mfd-multi-menu { padding: 6px; }
+.md3 .mfd-multi-opt { gap: 10px; }
+.md3 .mfd-multi-opt.is-checked { color: var(--md-primary); font-weight: 600; }
+.md3 .mfd-check { display: inline-flex; align-items: center; justify-content: center; width: 18px; height: 18px;
+  flex: none; border-radius: var(--md-r-xs); box-shadow: inset 0 0 0 1.5px var(--md-outline-variant);
+  color: #fff; transition: background .12s, box-shadow .12s; }
+.md3 .mfd-check--on { background: var(--md-primary); box-shadow: inset 0 0 0 1.5px var(--md-primary); }
+.md3 .mfd-check .lucide { width: 13px; height: 13px; }
+
+/* ── FormCheckbox (md3 checkbox bound to a mobx-react-form field) ─────────── */
+.md3 .mcheck-group { display: flex; flex-direction: column; gap: 6px; }
+
+/* 44px touch target: the label is the hit area; the visual box sits centred inside. */
+.md3 .mcheck { display: inline-flex; align-items: flex-start; gap: 12px; cursor: pointer;
+  min-height: 44px; padding: 4px 0; font-family: var(--md-font); color: var(--md-on-surface);
+  -webkit-tap-highlight-color: transparent; }
+.md3 .mcheck--disabled { cursor: not-allowed; opacity: .55; }
+
+/* visually-hidden native input — keeps it focusable + semantic; the .mcheck-box is the visual. */
+.md3 .mcheck-input { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0;
+  border: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
+
+.md3 .mcheck-box { flex: none; box-sizing: border-box; display: inline-flex; align-items: center;
+  justify-content: center; width: 20px; height: 20px; margin-top: 10px; border-radius: var(--md-r-sm);
+  border: 2px solid var(--md-outline-variant); background: var(--md-sc-lowest);
+  transition: background .15s, border-color .15s, box-shadow .15s; }
+.md3 .mcheck-input:checked + .mcheck-box { background: var(--md-primary); border-color: var(--md-primary); }
+.md3 .mcheck-tick { color: var(--md-on-primary); }
+
+/* keyboard focus ring on the visual box (input itself is hidden). */
+.md3 .mcheck-input:focus-visible + .mcheck-box { outline: 2px solid var(--md-primary);
+  outline-offset: 2px; box-shadow: var(--md-e1); }
+
+.md3 .mcheck:hover .mcheck-input:not(:checked):not(:disabled) + .mcheck-box { border-color: var(--md-on-surface-variant); }
+
+.md3 .mcheck-label { font-size: 14px; line-height: 1.5; padding-top: 7px; color: var(--md-on-surface); }
+/* rich labels (T&C/permission) — links pick up the brand colour. */
+.md3 .mcheck-label a { color: var(--md-primary); text-decoration: underline; }
+.md3 .mcheck-label a:hover { color: var(--autode-blau-strong); }
+
+/* error state ('required' / 'boolean' / 'accepted' rule) — red box + inline message. */
+.md3 .mcheck-group--error .mcheck-input:not(:checked) + .mcheck-box { border-color: var(--md-error); }
+.md3 .mcheck-error-text { color: var(--md-error); font-size: 12px; line-height: 1.35; }
+
+/* ─── md3 radio group + selectable radio (FormRadioGroup / FormRadio) ─────────────
+   Drop-in re-skin of the legacy fe-ui-core RadioGroup / CheckboxMaterial(radio) used on
+   DealerEmployeeSet, Checkout, and the RICH VehicleEdit/VehicleAdd radios (color swatches,
+   emission stickers, interior icons, energy bars, DAT-model grids). The group is a flex-wrap
+   set; each radio is a selectable surface wrapping ARBITRARY children with a selected ring.
+   Unique prefix: .mradio*  (reuses .mfield-error-text for the inline error). */
+.md3 .mradio-group { display: flex; flex-direction: column; gap: 6px; }
+.md3 .mradio-set { display: flex; flex-wrap: wrap; gap: 10px; align-items: stretch; }
+
+/* the selectable wrapper — an md3 outlined surface; the hidden native radio drives state */
+.md3 .mradio {
+  position: relative; display: inline-flex; align-items: center; gap: 10px;
+  min-height: 44px; padding: 8px 14px; box-sizing: border-box; cursor: pointer;
+  border-radius: var(--md-r-sm); background: var(--md-surface); color: var(--md-on-surface);
+  box-shadow: inset 0 0 0 1px var(--md-outline-variant);
+  font-family: var(--md-font); font-size: 14px; line-height: 1.3;
+  transition: box-shadow .15s, background .15s, color .15s;
+  -webkit-tap-highlight-color: transparent;
+}
+.md3 .mradio:hover { background: var(--md-surface-variant, var(--md-sc, #eceef4)); }
+.md3 .mradio-body { display: inline-flex; align-items: center; gap: 10px; min-width: 0; }
+.md3 .mradio-body > img { display: block; max-width: 100%; height: auto; }
+
+/* hidden but real radio input: keeps native exclusive-group + keyboard + a11y semantics */
+.md3 .mradio-input {
+  position: absolute; opacity: 0; width: 1px; height: 1px; margin: 0; padding: 0;
+  pointer-events: none;
+}
+
+/* selected: primary ring + tonal fill (md3 selected-state) */
+.md3 .mradio--on {
+  background: var(--md-primary-container); color: var(--md-on-primary-container);
+  box-shadow: inset 0 0 0 2px var(--md-primary);
+}
+.md3 .mradio--on:hover { background: var(--md-primary-container); }
+
+/* keyboard focus ring on the wrapper when the hidden input is focused */
+.md3 .mradio-input:focus-visible + .mradio-body { outline: none; }
+.md3 .mradio:focus-within { box-shadow: inset 0 0 0 2px var(--md-primary); }
+
+/* error (group invalid, this option not chosen): red outline, matching .mfield--error */
+.md3 .mradio--error { box-shadow: inset 0 0 0 2px var(--md-error); }
+.md3 .mradio-set--error .mradio:not(.mradio--on) { box-shadow: inset 0 0 0 1px var(--md-error); }
+
+/* disabled */
+.md3 .mradio--disabled { opacity: .5; cursor: not-allowed; }
+.md3 .mradio--disabled:hover { background: var(--md-surface); }
+
+/* ── Accordion (macc) — md3 replacement for fe-ui-core ExpansionPanel / MUI Accordion ── */
+.md3 .macc {
+  background: var(--md-sc-lowest);
+  border: 1px solid var(--md-outline-variant);
+  border-radius: var(--md-r-md);
+  overflow: hidden; /* clips the collapsing region to the rounded corners */
+}
+.md3 .macc + .macc { margin-top: 12px; }
+
+/* header — full-width button so it's keyboard/AT focusable (legacy AccordionSummary) */
+.md3 .macc-hd {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  width: 100%;
+  padding: 16px 18px;
+  background: transparent;
+  border: 0;
+  margin: 0;
+  text-align: left;
+  font-family: var(--md-font);
+  color: var(--md-on-surface);
+  cursor: pointer;
+  -webkit-tap-highlight-color: transparent;
+}
+.md3 .macc-hd:hover { background: var(--md-sc-low); }
+.md3 .macc-hd:focus-visible {
+  outline: 2px solid var(--md-primary);
+  outline-offset: -2px;
+}
+
+/* title + subtitle stack; subtitle sits inline-after on wide rows, wraps under on narrow */
+.md3 .macc-hd-text {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: baseline;
+  gap: 4px 8px;
+  flex: 1 1 auto;
+  min-width: 0;
+}
+.md3 .macc-title { color: var(--md-on-surface); }
+.md3 .macc-subtitle { color: var(--md-on-surface-variant); font-weight: 400; }
+
+/* header-right validation/status slot (page passes a <StatChip/> here) */
+.md3 .macc-status { display: inline-flex; align-items: center; flex: 0 0 auto; }
+
+/* chevron rotates 0->180 on open (legacy arrowSelect / iconExpanded) */
+.md3 .macc-chev {
+  flex: 0 0 auto;
+  color: var(--md-primary);
+  transition: transform 250ms ease-out;
+}
+.md3 .macc--open .macc-chev { transform: rotate(180deg); }
+
+/* collapsing region: grid 0fr->1fr is smoothly animatable and needs no magic max-height
+   (legacy used max-height:10000px). Children stay mounted so react-scroll anchors inside
+   remain measurable for sticky-sidebar jump-to-section. */
+.md3 .macc-region {
+  display: grid;
+  grid-template-rows: 1fr;
+  opacity: 1;
+  transition: grid-template-rows 300ms ease, opacity 220ms ease;
+}
+.md3 .macc--closed .macc-region {
+  grid-template-rows: 0fr;
+  opacity: 0;
+}
+.md3 .macc-region-inner { overflow: hidden; min-height: 0; }
+.md3 .macc-body { padding: 4px 18px 18px; }
+/* closed panel content is non-interactive (mirrors aria-hidden) */
+.md3 .macc--closed .macc-region { pointer-events: none; }
+
+@media (prefers-reduced-motion: reduce) {
+  .md3 .macc-chev,
+  .md3 .macc-region { transition: none; }
+}
+
+/* ---- Modal (md3 dialog) ---- */
+/* Portal root is a body-level div.md3, so these resolve via the scoped theme. */
+.md3 .mmodal-scrim {
+  position: fixed; inset: 0; z-index: 1300;
+  display: flex; align-items: center; justify-content: center;
+  padding: 16px;
+  background: rgba(16, 22, 42, .5);
+  overflow-y: auto; overscroll-behavior: contain;
+  animation: mmodal-fade .14s ease-out;
+}
+.md3 .mmodal {
+  position: relative;
+  display: flex; flex-direction: column;
+  width: 100%; max-width: 560px;
+  max-height: calc(100vh - 32px);
+  background: var(--md-sc-lowest, #fff);
+  color: var(--md-on-surface);
+  border-radius: var(--md-r-lg);
+  border: 1px solid var(--md-outline-variant);
+  box-shadow: var(--md-e3);
+  font-family: var(--md-font);
+  outline: none;
+  animation: mmodal-pop .16s cubic-bezier(.2, .8, .2, 1);
+}
+.md3 .mmodal--sm { max-width: 420px; }
+.md3 .mmodal--md { max-width: 560px; }
+.md3 .mmodal--lg { max-width: 800px; }
+
+.md3 .mmodal-head {
+  flex: none;
+  display: flex; align-items: center; gap: 12px;
+  padding: 20px 16px 12px 24px;
+}
+.md3 .mmodal-title {
+  flex: 1 1 auto; min-width: 0;
+  margin: 0;
+  color: var(--md-on-surface);
+}
+.md3 .mmodal-head .icon-btn { flex: none; margin: -8px -4px -8px 0; }
+
+.md3 .mmodal-body {
+  flex: 1 1 auto; min-height: 0;
+  overflow-y: auto; overscroll-behavior: contain;
+  padding: 0 24px 4px;
+  color: var(--md-on-surface-variant);
+}
+.md3 .mmodal-body:last-child { padding-bottom: 24px; }
+
+.md3 .mmodal-foot {
+  flex: none;
+  display: flex; align-items: center; justify-content: flex-end; gap: 8px;
+  flex-wrap: wrap;
+  padding: 16px 24px 20px;
+}
+
+@keyframes mmodal-fade { from { opacity: 0; } to { opacity: 1; } }
+@keyframes mmodal-pop {
+  from { opacity: 0; transform: translateY(8px) scale(.98); }
+  to   { opacity: 1; transform: none; }
+}
+
+@media (max-width: 560px) {
+  .md3 .mmodal-scrim { padding: 0; align-items: flex-end; }
+  .md3 .mmodal {
+    max-width: 100%; max-height: 92vh;
+    border-radius: var(--md-r-lg) var(--md-r-lg) 0 0;
+    border-bottom: 0;
+  }
+}
+
+/* ---------- DatePicker (native <input type=date> styled as .mfield) ---------- */
+/* Reuses .mfield / .mfield-group / .mfield--error / .mfield--disabled wholesale; the rules below
+   only tame the native date input's browser chrome so it reads as a real md3 field. */
+.md3 .mdate-input { font: inherit; color: var(--md-on-surface); -webkit-appearance: none; appearance: none;
+  cursor: text; line-height: 1.2; }
+/* native date inputs render no value as transparent placeholder text in some browsers — keep it muted. */
+.md3 .mdate-input:invalid,
+.md3 .mdate-input[value=""] { color: var(--md-on-surface-variant); }
+/* the calendar picker indicator: tint it to the md3 accent and make it a clear affordance. */
+.md3 .mdate-input::-webkit-calendar-picker-indicator { cursor: pointer; opacity: .65; padding: 2px;
+  border-radius: var(--md-r-xs); filter: grayscale(1); transition: opacity .15s, background .15s; }
+.md3 .mdate-input:hover::-webkit-calendar-picker-indicator { opacity: 1; }
+.md3 .mdate-input:focus::-webkit-calendar-picker-indicator { opacity: 1; }
+.md3 .mdate-field:focus-within .mdate-input::-webkit-calendar-picker-indicator { background: var(--md-sc); }
+/* strip the inner spin/clear quirks so the field stays flat like the rest of the md3 kit. */
+.md3 .mdate-input::-webkit-inner-spin-button,
+.md3 .mdate-input::-webkit-clear-button { display: none; -webkit-appearance: none; appearance: none; }
+.md3 .mdate-input::-webkit-datetime-edit { color: inherit; font: inherit; }
+.md3 .mdate-input::-webkit-datetime-edit-fields-wrapper { padding: 0; }
+/* disabled parity with .mfield--disabled. */
+.md3 .mfield--disabled .mdate-input { cursor: not-allowed; color: var(--md-on-surface-variant); }
+.md3 .mfield--disabled .mdate-input::-webkit-calendar-picker-indicator { opacity: .35; cursor: not-allowed; }
+
+/* ---------- Table (md3 composable data/spec table) ---------- */
+/* Composable wrappers Table/Thead/Tbody/Tr/Th/Td. Header on surface-variant,
+   row dividers + hover, dense + sticky-header options, and an overflow-x:auto
+   wrapper so wide tables (Vergleich, options matrix) scroll inside their own box. */
+.md3 .mtab-wrap { width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch;
+  border: 1px solid var(--md-outline-variant); border-radius: var(--md-r-md); background: var(--md-sc-lowest); }
+.md3 .mtab { width: 100%; border-collapse: collapse; font-family: var(--md-font);
+  font-size: 14px; color: var(--md-on-surface); }
+
+/* header — surface-variant tone, small uppercase labels */
+.md3 .mtab-thead { background: var(--md-sc-low); }
+.md3 .mtab-th { text-align: left; padding: 12px 16px; font-size: 11px; font-weight: 600;
+  letter-spacing: .4px; text-transform: uppercase; color: var(--md-on-surface-variant);
+  white-space: nowrap; border-bottom: 1px solid var(--md-outline-variant); }
+
+/* body cells — row dividers via bottom border */
+.md3 .mtab-tbody .mtab-tr { transition: background var(--dur-1) var(--ease-standard); }
+.md3 .mtab-tbody .mtab-tr:not(:last-child) .mtab-td { border-bottom: 1px solid var(--md-outline-variant); }
+.md3 .mtab-td { padding: 14px 16px; vertical-align: middle; line-height: 1.45; }
+
+/* hover + selected */
+.md3 .mtab-tbody .mtab-tr:hover { background: var(--md-sc-low); }
+.md3 .mtab-tr.is-selected { background: var(--md-primary-container); }
+.md3 .mtab-tr.is-selected:hover { background: var(--md-primary-container); }
+
+/* alignment + numeric */
+.md3 .mtab-center { text-align: center; }
+.md3 .mtab-right { text-align: right; }
+.md3 .mtab-td--num { font-variant-numeric: tabular-nums; font-feature-settings: "tnum" 1; }
+
+/* dense — tighter rows for list-heavy tables (Mitarbeiter, options) */
+.md3 .mtab--dense .mtab-th { padding: 8px 12px; }
+.md3 .mtab--dense .mtab-td { padding: 8px 12px; }
+
+/* sticky header — pins while the body scrolls (caller constrains height) */
+.md3 .mtab--sticky .mtab-th { position: sticky; top: 0; z-index: 1; background: var(--md-sc-low);
+  box-shadow: inset 0 -1px 0 var(--md-outline-variant); }
+
+/* md3 Switch — extras for the autobahn ui/Switch.tsx component.
+   The base .mswitch / .mswitch-track / .mswitch-thumb (+ :checked) rules already exist
+   in this file (md3 switch block, ~L424-430). These only add the optional label + the
+   disabled state the React component emits. All scoped under .md3, mswitch- prefix. */
+.md3 .mswitch--labeled { align-items: center; gap: 10px; }
+.md3 .mswitch-label { font: 600 14px var(--md-font); color: var(--md-on-surface); user-select: none; }
+.md3 .mswitch--disabled { cursor: not-allowed; opacity: .5; }
+.md3 .mswitch--disabled .mswitch-track { background: var(--md-outline-variant); }
+.md3 .mswitch input:disabled + .mswitch-track { cursor: not-allowed; }
+.md3 .mswitch input:focus-visible + .mswitch-track { outline: 2px solid var(--md-primary); outline-offset: 2px; }
+
+/* ---------- multiline text field (Textarea — outlined, MD3) ----------
+   Reuses .mfield (outline, focus ring, error/disabled states, label/error via
+   .mfield-group) but overrides the single-line geometry: a textarea needs auto
+   height, top alignment and vertical padding, and must fill the box + resize. */
+.md3 .mfield.mtextarea { height: auto; align-items: stretch; padding: 10px 14px; }
+.md3 .mfield.mtextarea textarea {
+  border: 0; outline: 0; background: transparent; flex: 1; width: 100%;
+  font: inherit; color: inherit; min-width: 0;
+  display: block; resize: vertical; min-height: 96px; line-height: 1.5;
+}
+.md3 .mfield.mtextarea textarea::placeholder { color: var(--md-on-surface-variant); }
+
+/* ── Pagination (md3 pager) — prefix .mpag-, scoped under .md3 ───────────────── */
+.md3 .mpag { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 6px; }
+.md3 .mpag-list { display: flex; align-items: center; gap: 6px; list-style: none; margin: 0; padding: 0; }
+
+/* numbered page buttons */
+.md3 .mpag-page {
+  box-sizing: border-box; min-width: 40px; height: 40px; padding: 0 10px;
+  display: inline-flex; align-items: center; justify-content: center;
+  border: 1px solid var(--md-outline-variant); border-radius: var(--md-r-full);
+  background: transparent; color: var(--md-on-surface); cursor: pointer;
+  font: 600 14px var(--md-font); transition: background .15s, border-color .15s, color .15s, box-shadow .15s;
+}
+.md3 .mpag-page .num { font-size: 14px; }
+.md3 .mpag-page:hover { background: color-mix(in srgb, var(--md-primary) 8%, transparent); border-color: var(--md-primary); }
+.md3 .mpag-page.is-current {
+  background: var(--md-primary); color: var(--md-on-primary);
+  border-color: var(--md-primary); cursor: default; box-shadow: var(--md-e1);
+}
+.md3 .mpag-page.is-current:hover { background: var(--md-primary); }
+
+/* ellipsis gap */
+.md3 .mpag-gap {
+  min-width: 28px; height: 40px; display: inline-flex; align-items: flex-end; justify-content: center;
+  padding-bottom: 8px; color: var(--md-on-surface-variant); font: 600 16px var(--md-font); user-select: none;
+}
+
+/* prev / next pill */
+.md3 .mpag-edge {
+  height: 40px; padding: 0 16px; display: inline-flex; align-items: center; gap: 6px;
+  border: 1px solid var(--md-outline-variant); border-radius: var(--md-r-full);
+  background: transparent; color: var(--md-primary); cursor: pointer;
+  font: 600 14px var(--md-font); white-space: nowrap;
+  transition: background .15s, border-color .15s, color .15s, opacity .15s;
+}
+.md3 .mpag-edge:hover { background: color-mix(in srgb, var(--md-primary) 8%, transparent); border-color: var(--md-primary); }
+.md3 .mpag-edge:disabled { opacity: .4; cursor: not-allowed; color: var(--md-on-surface-variant); }
+.md3 .mpag-edge:disabled:hover { background: transparent; border-color: var(--md-outline-variant); }
+.md3 .mpag-edge-label { line-height: 1; }
+
+/* compact phones: drop the prev/next text labels, keep the chevrons */
+@media (max-width: 520px) {
+  .md3 .mpag-edge { padding: 0 10px; }
+  .md3 .mpag-edge-label { display: none; }
+}
+
+/* ── Stepper (md3 step indicator) ───────────────────────────────────────── */
+/* numbered circles + connectors; done=check on primary fill, active=primary
+   outline, todo=neutral outline. Non-linear (clickable) via .mstep--clickable.
+   Mirrors the inline .co-stepper visual language, generalised for both
+   orientations. Unique `mstep-` prefix — no collision with .co-step*. */
+.md3 .mstep { display: block; max-width: 880px; margin: 0 auto; }
+.md3 .mstep-list { display: flex; align-items: center; gap: 0; margin: 0; padding: 0; list-style: none; }
+.md3 .mstep-item { display: flex; align-items: center; flex: 1; min-width: 0; }
+.md3 .mstep-item:last-child { flex: none; }
+.md3 .mstep-btn { display: inline-flex; align-items: center; gap: 10px; min-width: 0; flex: none;
+  border: 0; background: transparent; padding: 0; margin: 0; font-family: var(--md-font);
+  color: var(--md-on-surface-variant); text-align: left; }
+.md3 .mstep-dot { display: flex; align-items: center; justify-content: center; width: 30px; height: 30px;
+  flex: none; border-radius: var(--md-r-full); border: 2px solid var(--md-outline-variant);
+  font: 700 13px var(--md-font); background: var(--md-sc-lowest, #fff); transition: border-color .15s, background .15s, color .15s; }
+.md3 .mstep-dot .lucide { width: 16px; height: 16px; }
+.md3 .mstep-label { font-size: 13px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
+.md3 .mstep-connector { flex: 1; height: 2px; min-width: 16px; margin: 0 10px;
+  background: var(--md-outline-variant); transition: background .15s; align-self: center; }
+/* state — active */
+.md3 .mstep-item--active .mstep-btn { color: var(--md-primary); }
+.md3 .mstep-item--active .mstep-dot { border-color: var(--md-primary); color: var(--md-primary); }
+/* state — done (primary-filled dot + primary-tinted connector + check glyph) */
+.md3 .mstep-item--done .mstep-btn { color: var(--md-on-surface); }
+.md3 .mstep-item--done .mstep-dot { border-color: var(--md-primary); background: var(--md-primary); color: var(--md-on-primary); }
+.md3 .mstep-item--done .mstep-dot .lucide { color: var(--md-on-primary); }
+.md3 .mstep-item--done .mstep-connector { background: var(--md-primary); }
+/* clickable (non-linear) affordances */
+.md3 .mstep--clickable .mstep-btn { cursor: pointer; border-radius: var(--md-r-full); }
+.md3 .mstep--clickable .mstep-btn:hover .mstep-dot { box-shadow: var(--md-e1); }
+.md3 .mstep--clickable .mstep-btn:hover .mstep-label { color: var(--md-on-surface); }
+.md3 .mstep--clickable .mstep-btn:focus-visible { outline: 2px solid var(--md-primary); outline-offset: 3px; }
+/* vertical orientation */
+.md3 .mstep--vertical .mstep-list { flex-direction: column; align-items: stretch; }
+.md3 .mstep--vertical .mstep-item { flex: none; flex-direction: column; align-items: flex-start; }
+.md3 .mstep--vertical .mstep-btn { width: 100%; }
+.md3 .mstep--vertical .mstep-connector { width: 2px; height: auto; min-height: 22px; flex: none;
+  margin: 4px 0 4px 14px; align-self: flex-start; }
+/* mobile: hide labels on the horizontal variant so dots+connectors stay legible */
+@media (max-width: 720px) {
+  .md3 .mstep--horizontal .mstep-label { display: none; }
+  .md3 .mstep--horizontal .mstep-btn { gap: 0; }
+}
+
+/* ── FileUpload — md3 dropzone shell (wraps preserved Uppy / react-dropzone engine) ── */
+.md3 .mfu { display: flex; flex-direction: column; gap: 14px; }
+.md3 .mfu-zone {
+  position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center;
+  gap: 8px; text-align: center; padding: 32px 24px; min-height: 168px;
+  border: 2px dashed var(--md-outline-variant); border-radius: var(--md-r-lg);
+  background: var(--md-sc-lowest); color: var(--md-on-surface-variant);
+  font-family: var(--md-font); cursor: pointer;
+  transition: border-color .15s, background .15s, box-shadow .15s;
+}
+.md3 .mfu-zone:hover { border-color: var(--md-primary); background: var(--md-primary-container); }
+.md3 .mfu-zone:focus-visible { outline: none; border-color: var(--md-primary); box-shadow: 0 0 0 3px var(--md-primary-container); }
+/* drag-over highlight (driven by the .mfu--over state class) */
+.md3 .mfu--over .mfu-zone { border-color: var(--md-primary); border-style: solid; background: var(--md-primary-container); box-shadow: var(--md-e1); }
+.md3 .mfu-icon { display: inline-flex; align-items: center; justify-content: center; width: 56px; height: 56px;
+  border-radius: var(--md-r-full); background: var(--md-sc-high); color: var(--md-primary); }
+.md3 .mfu-icon .lucide { width: 28px; height: 28px; color: var(--md-primary); }
+.md3 .mfu--over .mfu-icon { background: var(--md-sc-lowest); }
+.md3 .mfu-prompt { font-size: 15px; font-weight: 500; line-height: 1.4; color: var(--md-on-surface); }
+.md3 .mfu-link { color: var(--md-primary); font-weight: 600; text-decoration: underline; text-underline-offset: 2px; }
+.md3 .mfu-or { color: var(--md-on-surface-variant); font-weight: 400; }
+.md3 .mfu-hint { margin-top: 2px; }
+/* visually-hidden native input — click is proxied from the zone */
+.md3 .mfu-input { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
+  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
+/* slot for the preserved engine / file list / progress bar */
+.md3 .mfu-slot { display: block; }
+/* disabled (mirrors react-dropzone/Uppy disabled while uploading) */
+.md3 .mfu--disabled .mfu-zone { cursor: not-allowed; opacity: .5; }
+.md3 .mfu--disabled .mfu-zone:hover { border-color: var(--md-outline-variant); background: var(--md-sc-lowest); box-shadow: none; }