/* ==========================================================================
   Rückrufaktion — Recall Wizard (service.mts-mobile.de)
   Visual language inherited 1:1 from the MTS Probefahrt frontend: soft animated
   AURORA wash that dissolves to white, thin Gotham Book display with negative
   tracking, generous whitespace, pill buttons (single magenta CTA), borderless
   hairline cards.

   Vanilla CSS, zero dependencies, same-origin assets only. Mobile-first.
   Design tokens live as CSS custom properties; swap to re-skin.
   ========================================================================== */

/* ---------- Fonts (self-hosted Gotham) ---------------------------------- */
@font-face {
  font-family: "Gotham";
  font-weight: 400;
  font-style: normal;
  src: url("../assets/fonts/GothamBook.ttf") format("truetype");
  font-display: swap;
}
@font-face {
  font-family: "Gotham";
  font-weight: 400;
  font-style: italic;
  src: url("../assets/fonts/GothamBookItalic.ttf") format("truetype");
  font-display: swap;
}
@font-face {
  font-family: "Gotham";
  font-weight: 500;
  font-style: normal;
  src: url("../assets/fonts/GothamMedium.ttf") format("truetype");
  font-display: swap;
}
@font-face {
  font-family: "Gotham";
  font-weight: 500;
  font-style: italic;
  src: url("../assets/fonts/GothamMediumItalic.ttf") format("truetype");
  font-display: swap;
}
@font-face {
  font-family: "Gotham";
  font-weight: 700;
  font-style: normal;
  src: url("../assets/fonts/GothamBold.ttf") format("truetype");
  font-display: swap;
}
@font-face {
  font-family: "Gotham";
  font-weight: 700;
  font-style: italic;
  src: url("../assets/fonts/GothamBoldItalic.ttf") format("truetype");
  font-display: swap;
}

/* ---------- Design tokens ----------------------------------------------- */
:root {
  /* Tenant brand (single source of truth) */
  --color-primary: #003761; /* ink / deep blue */
  --color-accent: #e5376d;  /* magenta CTA */
  --color-neutral: #9d9d9d; /* arc swoosh / muted */

  /* Derived brand scale */
  --color-primary-900: #00233f;
  --color-primary-800: #002b4c;
  --color-primary-700: #003761;
  --color-primary-600: #0a4d80;
  --color-primary-500: #2f6f9e;
  --color-primary-100: #e6eef4;
  --color-primary-050: #f3f7fb;

  --color-accent-700: #c12259; /* pressed magenta */
  --color-accent-600: #e5376d;
  --color-accent-500: #ee5a87;
  --color-accent-300: #f6a9c2;
  --color-accent-100: #fde4ec;

  /* --------------------------------------------------------------------------
     BRAND WORLD (scoped) — set dynamically by app.js when a brand/vehicle is
     active; default = MTS magenta base so the UI is identical until a brand is
     chosen and so brands without a colour (e.g. Leapmotor) fall back cleanly.
     These tokens are consumed ONLY by brand/vehicle PRESENTATION surfaces
     (brand cards, vehicle cards, chosen-vehicle summary, a restrained header
     accent). The form, submit CTA, nav logo, step tracker and calendar keep the
     base accent tokens above.
       --brand        solid accent (rings/bars/chips/selected fills, white text)
       --brand-ink    luminance-guarded variant safe as TEXT on white (≥ AA)
       --brand-accent decorative secondary (a hero stop) — never used for text
       --brand-soft   faint surface wash
       --brand-glow   hover/selected glow tint
     -------------------------------------------------------------------------- */
  --brand: var(--color-accent-600);
  --brand-ink: var(--color-accent-600);
  --brand-accent: var(--color-accent-600);
  --brand-soft: var(--color-accent-100);
  --brand-glow: var(--color-accent-300);

  /* Aurora stops — atmospheric only, per brand (deep ink, magenta, soft rose,
     pale lavender). Never rendered as a hard band. */
  --aurora-ink: #003761;
  --aurora-magenta: #e5376d;
  --aurora-rose: #ff9bd2;
  --aurora-lavender: #cfd0ff;

  /* Surfaces & ink — white + cool off-white (Stripe canvas-soft) */
  --color-bg: #ffffff;
  --color-surface: #ffffff;
  --color-surface-2: #f6f9fc;   /* cool off-white */
  --color-canvas-soft: #f6f9fc;
  /* Ink: lean on the brand deep blue (#003761). Never pure black. */
  --ink: #0d2a45;               /* body text — deep brand-navy */
  --ink-soft: #41566a;          /* secondary slate */
  --ink-mute: #6a7c92;          /* helper / captions */
  --line: #e9eef5;              /* hairline (brand spec) */
  --line-soft: #eef2f8;

  --color-success: #137a52;
  --color-success-bg: #e4f5ed;
  --color-error: #c12259;
  --color-error-bg: #fde7ee;

  /* Typography — Gotham, thin/airy display via Book(400) + negative tracking */
  --font-sans: "Gotham", system-ui, -apple-system, "Segoe UI", sans-serif;
  --fs-300: 0.8125rem;  /* 13px */
  --fs-400: 0.9375rem;  /* 15px */
  --fs-500: 1.0625rem;  /* 17px */
  --fs-600: 1.3125rem;  /* 21px */
  --fs-700: 1.625rem;   /* 26px */
  --fs-800: 2.125rem;   /* 34px */
  --fs-900: 3rem;       /* 48px */

  /* Negative letter-spacing for the thin Stripe display feel */
  --track-display-xl: -0.022em;  /* ~ -1.05px at 48px */
  --track-display: -0.018em;     /* ~ -0.6px at 34px */
  --track-head: -0.012em;
  --track-tight: -0.008em;
  --tracking-caps: 0.16em;

  /* Space — generous, 8px base with fine sub-tokens */
  --sp-1: 0.25rem;
  --sp-2: 0.5rem;
  --sp-3: 0.75rem;
  --sp-4: 1rem;
  --sp-5: 1.5rem;
  --sp-6: 2rem;
  --sp-7: 3rem;
  --sp-8: 4rem;

  /* Radii — 12px card signature */
  --r-sm: 8px;
  --r-md: 10px;
  --r-card: 12px;
  --r-lg: 14px;
  --r-xl: 18px;
  --r-pill: 9999px;

  /* Elevation — soft, blue-tinted shadows (rgba(0,55,112,.06–.12)) */
  --sh-1: 0 1px 3px rgba(0, 55, 112, 0.06);
  --sh-2: 0 1px 2px rgba(0, 55, 112, 0.05), 0 6px 18px rgba(0, 55, 112, 0.07);
  --sh-3: 0 2px 6px rgba(0, 55, 112, 0.06), 0 14px 34px rgba(0, 55, 112, 0.10);
  --sh-accent: 0 6px 16px rgba(229, 55, 109, 0.26);
  /* Cut-out imagery: glow BENEATH, never a box outline */
  --sh-float: 0 18px 30px -16px rgba(0, 55, 112, 0.22);
  --ring-focus: 0 0 0 2px var(--color-surface), 0 0 0 4px rgba(229, 55, 109, 0.55);
  --ring-select: 0 0 0 1.5px var(--color-accent-600);

  /* Motion — refined, restrained */
  --ease-spring: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-snap: cubic-bezier(0.2, 0.9, 0.2, 1);
  --ease-out: cubic-bezier(0.22, 0.61, 0.36, 1);
  --dur-1: 0.16s;
  --dur-2: 0.26s;
  --dur-3: 0.5s;

  --maxw: 760px;
  --maxw-wide: 1080px;
  --header-h: 56px;
  --footbar-h: 76px;

  /* Aurora extent — how far down the masked colour wash reaches before it has
     fully dissolved into white. The wash is SOFT and pale, so all type (appbar,
     tracker, headings) renders in dark ink for contrast — never reversed. */
  --aurora-h: 560px;
}

/* ---------- Reset ------------------------------------------------------- */
*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}
html {
  -webkit-text-size-adjust: 100%;
  -webkit-tap-highlight-color: transparent;
  scroll-behavior: smooth;
}
body {
  font-family: var(--font-sans);
  font-size: var(--fs-400);
  font-weight: 400;
  line-height: 1.55;
  color: var(--ink);
  background: var(--color-bg);
  min-height: 100vh;
  min-height: 100dvh;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}
img {
  display: block;
  max-width: 100%;
}
button {
  font: inherit;
  color: inherit;
  cursor: pointer;
  border: none;
  background: none;
}
input,
select,
textarea {
  font: inherit;
  color: inherit;
}
a {
  color: var(--color-accent-600);
  text-decoration-thickness: 1px;
  text-underline-offset: 2px;
}
:focus-visible {
  outline: none;
  box-shadow: var(--ring-focus);
  border-radius: var(--r-sm);
}
.visually-hidden {
  position: absolute !important;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* ==========================================================================
   Animated AURORA backdrop  (FIX 1)
   A soft, atmospheric colour wash behind the upper page that DISSOLVES into
   white via a radial mask — never a hard band/seam. Two stacked
   repeating-linear-gradients on brand stops drift slowly (~22s). The brand's
   grey arc rides on top as a faint motif. Because the wash is pale, all type
   renders in dark ink (handled elsewhere), keeping contrast clean.

   `.app-bg` is fixed full-bleed (white canvas). `.app-bg__aurora` is the
   masked, blurred, animated colour. `.app-bg__grain` keeps it from banding.
   ========================================================================== */
.app-bg {
  position: fixed;
  inset: 0;
  z-index: -1;
  background: var(--color-bg);
  overflow: hidden;
}

/* The aurora itself: two layered repeating-linear-gradients, heavily blurred,
   low opacity, and — critically — masked so the colour DISSOLVES into white
   high up the page. No hard band, no seam. Stops are airy (ink, magenta, soft
   rose, pale lavender) and never fully saturated, so the wash stays a whisper.

   The mask is doubled (radial fade + a vertical fade) so the colour is gone
   well before the booking content, leaving the cards on clean white. */
.app-bg__aurora {
  position: absolute;
  /* extend well past the viewport so the heavy blur has no visible hard edge */
  inset: -40% -30% auto -30%;
  height: 132%;
  opacity: 0.5;
  filter: blur(88px) saturate(1.05);
  background-image:
    repeating-linear-gradient(
      100deg,
      var(--aurora-ink) 0%,
      var(--aurora-ink) 6%,
      transparent 13%,
      transparent 22%,
      var(--aurora-magenta) 30%
    ),
    repeating-linear-gradient(
      100deg,
      var(--aurora-lavender) 8%,
      var(--aurora-rose) 17%,
      var(--aurora-magenta) 25%,
      var(--aurora-rose) 33%,
      var(--aurora-lavender) 43%
    );
  background-size: 230%, 320%;
  background-position: 0% 50%, 0% 50%;
  background-blend-mode: screen;
  /* Dissolve to white: a soft elliptical bloom near the top-centre, AND a
     vertical fade so nothing lingers as a band. Intersection of both masks. */
  -webkit-mask-image:
    radial-gradient(115% 62% at 50% -8%, #000 0%, rgba(0, 0, 0, 0.55) 34%, transparent 64%),
    linear-gradient(180deg, #000 0%, rgba(0, 0, 0, 0.7) 22%, transparent 46%);
  -webkit-mask-composite: source-in;
  mask-image:
    radial-gradient(115% 62% at 50% -8%, #000 0%, rgba(0, 0, 0, 0.55) 34%, transparent 64%),
    linear-gradient(180deg, #000 0%, rgba(0, 0, 0, 0.7) 22%, transparent 46%);
  mask-composite: intersect;
  animation: aurora-drift 24s linear infinite alternate;
  will-change: background-position;
}
@keyframes aurora-drift {
  from {
    background-position: 0% 50%, 0% 50%;
  }
  to {
    background-position: 140% 50%, -120% 50%;
  }
}

/* the brand swoosh — oversized grey arc echoing the logo motif, kept faint */
.app-bg__arc {
  position: absolute;
  top: -56vh;
  left: 50%;
  width: 200vw;
  max-width: 1900px;
  aspect-ratio: 1 / 1;
  transform: translateX(-50%);
  border-radius: 50%;
  border: 1.5px solid transparent;
  border-bottom-color: rgba(0, 55, 97, 0.10);
  filter: drop-shadow(0 18px 40px rgba(0, 33, 56, 0.05));
  -webkit-mask-image: radial-gradient(ellipse at 50% 100%, #000 30%, transparent 72%);
  mask-image: radial-gradient(ellipse at 50% 100%, #000 30%, transparent 72%);
}

/* very fine grain to keep the wash from banding (atmospheric, not literal) */
.app-bg__grain {
  position: absolute;
  inset: 0;
  height: var(--aurora-h);
  background-image:
    radial-gradient(1px 1px at 18% 24%, rgba(0, 55, 97, 0.05), transparent 60%),
    radial-gradient(1px 1px at 72% 56%, rgba(0, 55, 97, 0.04), transparent 60%);
  background-size: 7px 7px, 11px 11px;
  opacity: 0.6;
  -webkit-mask-image: radial-gradient(ellipse at 50% 0%, #000 5%, transparent 65%);
  mask-image: radial-gradient(ellipse at 50% 0%, #000 5%, transparent 65%);
  pointer-events: none;
}

/* ==========================================================================
   Layout shell
   ========================================================================== */
.app {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  min-height: 100dvh;
}

/* ---------- Header (floats on the pale aurora wash) --------------------- */
.appbar {
  position: sticky;
  top: 0;
  z-index: 30;
  background: rgba(255, 255, 255, 0.55);
  -webkit-backdrop-filter: saturate(1.4) blur(10px);
  backdrop-filter: saturate(1.4) blur(10px);
  color: var(--color-primary-700);
  transition: background var(--dur-2) var(--ease-out),
    box-shadow var(--dur-2) var(--ease-out), backdrop-filter var(--dur-2);
}
/* hairline shelf so the frosted bar reads as a layer */
.appbar::after {
  content: "";
  position: absolute;
  inset: auto 0 0 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(0, 55, 97, 0.10) 18%, rgba(0, 55, 97, 0.10) 82%, transparent);
  transition: background var(--dur-2) var(--ease-out), height var(--dur-2);
}
/* RESTRAINED hero accent: once a brand world is active, the appbar's hairline
   picks up the brand colour (faded at both ends so it stays a whisper). This is
   the only header touch — the nav logo + claim are untouched MTS base. The
   brand colour is a solid accent here (a 2px rule), never low-contrast text. */
body.has-brand .appbar::after {
  height: 2px;
  background: linear-gradient(90deg, transparent, var(--brand) 22%, var(--brand) 78%, transparent);
  opacity: 0.55;
}
.appbar__inner {
  max-width: var(--maxw-wide);
  margin: 0 auto;
  height: var(--header-h);
  padding: 0 var(--sp-5);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-5);
}
.brand-lockup {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  min-width: 0;
  flex: 0 0 auto;
  border-radius: var(--r-sm);
}
.brand-lockup img {
  height: 22px;
  width: auto;
}

/* ---------- Step tracker — a FINE inline rail inside the slim header --------
   Merged with the lockup onto one bar (Req 1): small numbered dots joined by a
   hairline, with a fill that rides up to the current step. Labels show from a
   comfortable width and collapse (current-only) on narrow screens. */
.steps {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  position: relative;
  list-style: none;
  min-width: 0;
  gap: 0;
  flex: 0 1 auto;
}
/* hairline rail behind the dots (spans only the dot run) */
.steps::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 9px;
  right: 9px;
  height: 1.5px;
  transform: translateY(-50%);
  border-radius: var(--r-pill);
  background: rgba(0, 55, 97, 0.16);
}
.steps__fill {
  position: absolute;
  top: 50%;
  left: 9px;
  height: 1.5px;
  width: 0;
  transform: translateY(-50%);
  border-radius: var(--r-pill);
  background: linear-gradient(90deg, var(--color-primary-600), var(--color-accent-600));
  transition: width var(--dur-3) var(--ease-spring), left var(--dur-3) var(--ease-spring);
}
.step {
  position: relative;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
  padding-left: var(--sp-4);
  white-space: nowrap;
}
.step:first-of-type {
  padding-left: 0;
}
.step__dot {
  flex: 0 0 auto;
  width: 18px;
  height: 18px;
  border-radius: var(--r-pill);
  display: grid;
  place-items: center;
  font-weight: 500;
  font-size: 0.625rem; /* 10px */
  line-height: 1;
  color: var(--ink-mute);
  background: var(--color-surface);
  border: 1.5px solid var(--line);
  box-shadow: var(--sh-1);
  transition: transform var(--dur-2) var(--ease-spring),
    background var(--dur-2) var(--ease-out), color var(--dur-2),
    border-color var(--dur-2), box-shadow var(--dur-2);
}
.step__dot svg {
  width: 11px;
  height: 11px;
}
.step__label {
  font-size: 0.75rem;
  font-weight: 400;
  letter-spacing: var(--track-tight);
  color: var(--ink-mute);
  line-height: 1;
  transition: color var(--dur-2);
}
.step.is-clickable {
  cursor: pointer;
  border-radius: var(--r-pill);
}
.step[aria-current="step"] .step__dot {
  background: var(--color-accent-600);
  color: #fff;
  border-color: var(--color-accent-600);
  transform: scale(1.08);
  box-shadow: 0 3px 10px rgba(229, 55, 109, 0.30);
}
.step[aria-current="step"] .step__label {
  color: var(--color-primary-700);
  font-weight: 500;
}
.step.is-done .step__dot {
  background: var(--color-primary-700);
  color: #fff;
  border-color: var(--color-primary-700);
}
.step.is-done .step__label {
  color: var(--ink-soft);
}
/* Below ~640px the labels would crowd the lockup — keep only the CURRENT step's
   label (a compact "you are here" cue); the rest read as numbered dots. */
@media (max-width: 640px) {
  .step:not([aria-current="step"]) .step__label {
    display: none;
  }
  .step {
    padding-left: var(--sp-3);
  }
  .step[aria-current="step"] .step__label {
    font-size: 0.6875rem;
  }
}

/* ---------- Main / step viewport ---------------------------------------- */
.main {
  flex: 1 1 auto;
  max-width: var(--maxw);
  width: 100%;
  margin: 0 auto;
  /* Content starts directly under the slim header (Req 1) — modest top padding,
     no intervening hero/progress band consuming vertical space. */
  padding: var(--sp-5) var(--sp-5) calc(var(--footbar-h) + var(--sp-7));
}
.panel {
  display: none;
}
.panel.is-active {
  display: block;
}
/* entrance animation per step */
.panel.is-active > * {
  animation: rise var(--dur-3) var(--ease-spring) both;
}
.panel.is-active.from-back > * {
  animation-name: rise-back;
}
@keyframes rise {
  from {
    opacity: 0;
    transform: translateY(14px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
@keyframes rise-back {
  from {
    opacity: 0;
    transform: translateY(-10px) scale(0.996);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

/* ---------- Step heading (ink on the pale aurora wash) ------------------ */
.step-head {
  margin-bottom: var(--sp-5);
}
.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  font-size: 0.6875rem;
  font-weight: 500;
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
  color: var(--color-accent-600);
  margin-bottom: var(--sp-3);
}
.eyebrow::before {
  content: "";
  width: 18px;
  height: 1.5px;
  border-radius: 2px;
  background: var(--color-accent-600);
}
.step-head h1 {
  font-size: var(--fs-800);
  font-weight: 400; /* Gotham Book — thin, airy display */
  line-height: 1.1;
  letter-spacing: var(--track-display);
  color: var(--color-primary-700);
}
.step-head p {
  margin-top: var(--sp-3);
  color: var(--ink-soft);
  font-size: var(--fs-500);
  line-height: 1.55;
  max-width: 52ch;
}

/* Programmatic focus moves to the step heading on every step change
   (JS sets tabindex=-1 + .focus()). Suppress the focus ring there — it's not a
   keyboard interaction target — while real controls keep their visible ring. */
.step-head h1:focus,
.step-head h1:focus-visible,
.confirm h1:focus,
.confirm h1:focus-visible {
  outline: none;
  box-shadow: none;
}

/* ==========================================================================
   Buttons — pill, magenta as the single filled CTA per view
   ========================================================================== */
.btn {
  --bg: var(--color-primary-700);
  --fg: #fff;
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-2);
  min-height: 48px;
  padding: 0 var(--sp-6);
  border-radius: var(--r-pill);
  background: var(--bg);
  color: var(--fg);
  font-weight: 500;
  font-size: var(--fs-400);
  letter-spacing: 0;
  box-shadow: var(--sh-1);
  transition: transform var(--dur-1) var(--ease-snap),
    box-shadow var(--dur-2), background var(--dur-2),
    filter var(--dur-1), opacity var(--dur-2);
  -webkit-user-select: none;
  user-select: none;
  touch-action: manipulation;
}
.btn:hover {
  filter: brightness(1.05);
  box-shadow: var(--sh-2);
}
.btn:active {
  transform: translateY(1px) scale(0.99);
}
/* The magenta filled CTA */
.btn--accent {
  --bg: var(--color-accent-600);
  box-shadow: var(--sh-accent);
}
.btn--accent:hover {
  --bg: var(--color-accent-500);
  box-shadow: 0 8px 22px rgba(229, 55, 109, 0.38);
}
.btn--accent:active {
  --bg: var(--color-accent-700);
}
/* Ghost / secondary — hairline outline pill */
.btn--ghost {
  --bg: var(--color-surface);
  --fg: var(--color-primary-700);
  box-shadow: inset 0 0 0 1px var(--line), var(--sh-1);
}
.btn--ghost:hover {
  box-shadow: inset 0 0 0 1px var(--color-primary-500), var(--sh-1);
  filter: none;
}
.btn--block {
  width: 100%;
}
.btn[disabled],
.btn[aria-disabled="true"] {
  opacity: 0.5;
  cursor: not-allowed;
  filter: none;
  box-shadow: var(--sh-1);
  pointer-events: none;
}
/* The hidden attribute must win over the flex display above. */
.btn[hidden] {
  display: none;
}
/* Compact icon-only pill (e.g. footbar Back) — clean circular ghost (Req 5) */
.btn--icon {
  min-width: 46px;
  width: 46px;
  min-height: 46px;
  padding: 0;
  border-radius: var(--r-pill);
}
.btn--ghost.btn--icon svg {
  transition: transform var(--dur-2) var(--ease-spring);
}
.btn--ghost.btn--icon:hover svg {
  transform: translateX(-2px);
}
.btn__spinner {
  display: none;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  border: 2.5px solid rgba(255, 255, 255, 0.45);
  border-top-color: #fff;
  animation: spin 0.7s linear infinite;
}
.btn.is-loading .btn__label {
  opacity: 0.65;
}
.btn.is-loading .btn__spinner {
  display: inline-block;
}
@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}

/* Sticky bottom action bar (mobile thumb zone) — frosted hairline shelf */
.footbar {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 25;
  padding: var(--sp-3) var(--sp-5) calc(var(--sp-3) + env(safe-area-inset-bottom));
  background: linear-gradient(180deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.94) 42%);
  -webkit-backdrop-filter: blur(14px) saturate(1.2);
  backdrop-filter: blur(14px) saturate(1.2);
}
/* hairline shelf — soft, fading at the ends (Req 5: refined, no hard line) */
.footbar::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--line) 14%, var(--line) 86%, transparent);
}
.footbar__inner {
  max-width: var(--maxw);
  margin: 0 auto;
  display: flex;
  align-items: center;
  gap: var(--sp-3);
}
.footbar .btn--ghost {
  flex: 0 0 auto;
}
.footbar .btn--next {
  flex: 1 1 auto;
}
.footbar[hidden] {
  display: none;
}

/* ==========================================================================
   Brand grid (Step 1) — frameless, airy cut-out logos
   No hard frame: logos float in a fixed aspect box on soft off-white, with a
   subtle glow beneath. Offset/uneven cut-outs still align tidily.
   ========================================================================== */
.brand-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  gap: var(--sp-4);
}
@media (min-width: 560px) {
  .brand-grid {
    grid-template-columns: repeat(auto-fill, minmax(168px, 1fr));
    gap: var(--sp-5);
  }
}
.brand-card {
  position: relative;
  display: grid;
  grid-template-rows: 1fr auto;
  align-items: center;
  justify-items: center;
  gap: var(--sp-2);
  aspect-ratio: 3 / 2;
  padding: var(--sp-5) var(--sp-4) var(--sp-4);
  background: var(--color-surface);
  border-radius: var(--r-lg);
  box-shadow: var(--sh-1);
  border: 1px solid var(--line);
  text-align: center;
  transition: transform var(--dur-2) var(--ease-spring),
    box-shadow var(--dur-2), border-color var(--dur-2);
  -webkit-tap-highlight-color: transparent;
}
/* Logo sits in a fixed cut-out box (3/2) so offset/uneven marks align. */
.brand-card__logobox {
  display: grid;
  place-items: center;
  width: 100%;
  height: 100%;
  min-height: 0;
}
.brand-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--sh-3);
  border-color: transparent;
}
.brand-card:active {
  transform: translateY(-1px) scale(0.99);
}
/* Hover: a faint brand-coloured glow + accent ring (presentation surface →
   tinted with --brand; falls back to magenta until a brand is active). */
.brand-card:hover {
  box-shadow: var(--sh-3), inset 0 0 0 1px var(--brand-glow);
}
.brand-card.is-selected {
  border-color: var(--brand);
  box-shadow: var(--sh-2), 0 0 0 1.5px var(--brand);
}
/* selected tick — brand-coloured dot, no frame */
.brand-card.is-selected::after {
  content: "";
  position: absolute;
  top: 10px;
  right: 10px;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: var(--brand)
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E")
    center / 11px no-repeat;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.22);
  animation: pop var(--dur-2) var(--ease-spring) both;
}
/* A thin brand underline anchoring the chosen card (brand world cue). */
.brand-card.is-selected::before {
  content: "";
  position: absolute;
  left: 22%;
  right: 22%;
  bottom: 8px;
  height: 2px;
  border-radius: var(--r-pill);
  background: var(--brand);
  opacity: 0.9;
}
@keyframes pop {
  from {
    transform: scale(0);
  }
  to {
    transform: scale(1);
  }
}
/* The cut-out logo: contained, generous padding, fixed box, glow beneath.
   NO border/frame — offset internal whitespace is absorbed by the box. */
.brand-card__logo {
  max-height: 52px;
  max-width: 82%;
  width: auto;
  object-fit: contain;
  filter: drop-shadow(0 6px 10px rgba(0, 55, 112, 0.10));
  transition: filter var(--dur-2), transform var(--dur-2) var(--ease-spring);
}
.brand-card:hover .brand-card__logo {
  filter: drop-shadow(0 10px 16px rgba(0, 55, 112, 0.16));
  transform: scale(1.04) translateY(-1px);
}
.brand-card__name {
  font-weight: 500;
  font-size: var(--fs-300);
  color: var(--ink-mute);
  letter-spacing: var(--track-tight);
  text-align: center;
  line-height: 1.2;
  transition: color var(--dur-2);
}
.brand-card:hover .brand-card__name {
  color: var(--ink-soft);
}
.brand-card.is-selected .brand-card__name {
  color: var(--brand-ink); /* luminance-guarded → always legible on white */
}
/* If a brand has only a name (logo dropped / absent), the name becomes the
   hero: larger, deep ink, centred in the box. */
.brand-card__logobox.is-empty {
  display: none;
}
.brand-card:has(.brand-card__logobox.is-empty) {
  grid-template-rows: 1fr;
}
.brand-card:has(.brand-card__logobox.is-empty) .brand-card__name {
  font-size: var(--fs-600);
  font-weight: 500;
  color: var(--color-primary-700);
  letter-spacing: var(--track-head);
}

/* ==========================================================================
   Filters (Step 2)
   ========================================================================== */
.filters {
  margin-bottom: var(--sp-6);
}
.filters__chips {
  display: flex;
  gap: var(--sp-2);
  overflow-x: auto;
  padding-bottom: var(--sp-2);
  margin: 0 calc(-1 * var(--sp-5));
  padding-inline: var(--sp-5);
  scrollbar-width: none;
  scroll-snap-type: x proximity;
}
.filters__chips::-webkit-scrollbar {
  display: none;
}
.chip {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  min-height: 40px;
  padding: 0 var(--sp-4);
  border-radius: var(--r-pill);
  background: var(--color-surface);
  box-shadow: inset 0 0 0 1px var(--line);
  color: var(--ink-soft);
  font-weight: 500;
  font-size: var(--fs-400);
  letter-spacing: var(--track-tight);
  white-space: nowrap;
  scroll-snap-align: start;
  transition: transform var(--dur-1) var(--ease-snap),
    box-shadow var(--dur-2), background var(--dur-2), color var(--dur-2);
}
.chip img {
  width: 18px;
  height: 18px;
  object-fit: contain;
}
.chip:hover {
  box-shadow: inset 0 0 0 1px var(--color-primary-500);
}
.chip:active {
  transform: scale(0.96);
}
.chip.is-active {
  background: var(--color-primary-700);
  color: #fff;
  box-shadow: var(--sh-1);
}
.chip.is-active img {
  filter: brightness(0) invert(1);
}

.selects {
  display: grid;
  gap: var(--sp-4);
  margin-top: var(--sp-5);
}
@media (min-width: 560px) {
  .selects {
    grid-template-columns: 1fr 1fr;
  }
}
.field {
  position: relative;
}
.field > label {
  display: block;
  font-size: var(--fs-300);
  font-weight: 500;
  letter-spacing: 0.01em;
  color: var(--ink-mute);
  margin-bottom: 7px;
}
.control {
  width: 100%;
  min-height: 48px;
  padding: 0 var(--sp-4);
  background: var(--color-surface);
  border-radius: var(--r-md);
  box-shadow: inset 0 0 0 1px var(--line);
  color: var(--ink);
  transition: box-shadow var(--dur-2), background var(--dur-2);
  -webkit-appearance: none;
  appearance: none;
}
.control:hover {
  box-shadow: inset 0 0 0 1px var(--color-primary-500);
}
.control:focus {
  box-shadow: inset 0 0 0 1.5px var(--color-accent-600), var(--ring-focus);
  outline: none;
}
select.control {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='%23003761' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right var(--sp-4) center;
  padding-right: calc(var(--sp-4) + 26px);
  cursor: pointer;
}
.field-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--sp-3);
}

/* ==========================================================================
   Vehicle cards (Step 2) — frameless, airy cut-out vehicle photos
   ========================================================================== */
.result-meta {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  margin-bottom: var(--sp-4);
  color: var(--ink-mute);
  font-size: var(--fs-300);
  font-weight: 500;
  letter-spacing: 0.01em;
}
.result-meta svg {
  width: 16px;
  height: 16px;
  stroke: var(--brand-ink);
}
.result-meta strong {
  color: var(--color-primary-700);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}
.vehicle-list {
  display: grid;
  gap: var(--sp-5);
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
}
.vehicle {
  position: relative;
  display: flex;
  flex-direction: column;
  background: var(--color-surface);
  border-radius: var(--r-card);
  overflow: hidden;
  box-shadow: var(--sh-1);
  border: 1px solid var(--line);
  text-align: left;
  width: 100%;
  transition: transform var(--dur-2) var(--ease-spring),
    box-shadow var(--dur-2), border-color var(--dur-2);
}
/* Thin brand accent bar along the top edge (brand world cue). Brand colour via
   --brand; the card SURFACE stays white so cut-out photos read cleanly. The bar
   sits above the media so it's visible on the (slightly tinted) media wash. */
.vehicle::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  z-index: 2;
  background: var(--brand);
  opacity: 0.85;
  transition: opacity var(--dur-2), height var(--dur-2) var(--ease-spring);
}
.vehicle:hover {
  transform: translateY(-4px);
  box-shadow: var(--sh-3);
  border-color: transparent;
}
.vehicle:hover::before {
  opacity: 1;
}
.vehicle:active {
  transform: translateY(-1px) scale(0.995);
}
.vehicle.is-selected {
  border-color: var(--brand);
  box-shadow: var(--sh-2), 0 0 0 1.5px var(--brand);
}
.vehicle.is-selected::before {
  height: 4px;
  opacity: 1;
}
/* Media: cut-out vehicle photo floats on soft off-white, contained, no frame */
.vehicle__media {
  position: relative;
  aspect-ratio: 16 / 10;
  background:
    radial-gradient(120% 100% at 50% 120%, rgba(0, 55, 112, 0.06), transparent 60%),
    var(--color-surface-2);
  overflow: hidden;
  display: grid;
  place-items: center;
}
.vehicle__media img {
  width: 100%;
  height: 100%;
  object-fit: contain;          /* cut-out: contain, never crop */
  padding: var(--sp-4) var(--sp-5);
  filter: drop-shadow(0 14px 16px rgba(0, 55, 112, 0.16)); /* glow beneath */
  transition: transform var(--dur-3) var(--ease-out);
}
.vehicle:hover .vehicle__media img {
  transform: scale(1.04) translateY(-2px);
}
/* Tasteful placeholder (no broken/empty frame) */
.vehicle__media .ph {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  color: var(--color-primary-500);
  opacity: 0.4;
}
.vehicle__media .ph svg {
  width: 60px;
  height: 60px;
}
.vehicle__brandtag {
  position: absolute;
  top: var(--sp-3);
  left: var(--sp-3);
  z-index: 1;
  display: inline-flex;
  align-items: center;
  height: 26px;
  padding: 0 var(--sp-3);
  border-radius: var(--r-pill);
  background: rgba(255, 255, 255, 0.86);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  box-shadow: var(--sh-1);
  font-size: var(--fs-300);
  font-weight: 700;
  color: var(--brand-ink); /* brand chip — luminance-guarded, legible on the frosted pill */
  letter-spacing: 0.01em;
}
.vehicle__check {
  position: absolute;
  top: var(--sp-3);
  right: var(--sp-3);
  z-index: 1;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: var(--color-surface);
  box-shadow: var(--sh-1);
  display: grid;
  place-items: center;
  opacity: 0;
  transform: scale(0.6);
  transition: opacity var(--dur-2), transform var(--dur-2) var(--ease-spring);
}
.vehicle__check svg {
  width: 15px;
  height: 15px;
  stroke: var(--brand);
}
.vehicle.is-selected .vehicle__check {
  opacity: 1;
  transform: scale(1);
  background: var(--brand);
}
.vehicle.is-selected .vehicle__check svg {
  stroke: #fff;
}
.vehicle__body {
  padding: var(--sp-5);
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
  flex: 1;
}
.vehicle__title {
  position: relative;
  font-weight: 500;
  font-size: var(--fs-600);
  line-height: 1.18;
  letter-spacing: var(--track-head);
  color: var(--color-primary-700);
  padding-left: 12px;
}
/* A short brand-coloured rule anchoring the model name (brand world accent).
   The title text stays deep navy for legibility; only the rule carries colour. */
.vehicle__title::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.18em;
  bottom: 0.18em;
  width: 3px;
  border-radius: var(--r-pill);
  background: var(--brand);
}
.vehicle__desc {
  font-size: var(--fs-400);
  color: var(--ink-soft);
  line-height: 1.5;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.spec-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2);
  margin-top: auto;
  padding-top: var(--sp-1);
}
.spec {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 28px;
  padding: 0 10px;
  border-radius: var(--r-pill);
  background: var(--color-surface-2);
  box-shadow: inset 0 0 0 1px var(--line);
  font-size: var(--fs-300);
  font-weight: 500;
  color: var(--ink-soft);
  white-space: nowrap;
}
.spec svg {
  width: 14px;
  height: 14px;
  stroke: var(--brand-ink); /* spec accent in the brand world (legible on tint) */
  flex: 0 0 auto;
}
.spec .swatch {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.16);
}

/* ==========================================================================
   Date + slots (Step 3)
   ========================================================================== */
.summary-card {
  position: relative;
  display: flex;
  gap: var(--sp-4);
  align-items: center;
  padding: var(--sp-3);
  padding-left: calc(var(--sp-3) + 4px);
  background: var(--color-surface);
  border-radius: var(--r-card);
  box-shadow: var(--sh-1);
  border: 1px solid var(--line);
  margin-bottom: var(--sp-5);
  overflow: hidden;
}
/* Chosen-vehicle summary keeps its brand world: a brand-coloured left accent
   bar. Surface stays white; the cut-out thumb stays clean. */
.summary-card::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 4px;
  background: var(--brand);
}
/* thumb: cut-out vehicle, contained, on soft off-white, no frame */
.summary-card__thumb {
  flex: 0 0 auto;
  width: 96px;
  height: 66px;
  border-radius: var(--r-md);
  overflow: hidden;
  background:
    radial-gradient(120% 100% at 50% 120%, rgba(0, 55, 112, 0.06), transparent 60%),
    var(--color-surface-2);
  display: grid;
  place-items: center;
}
.summary-card__thumb img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  padding: 6px 8px;
  filter: drop-shadow(0 6px 8px rgba(0, 55, 112, 0.14));
}
.summary-card__thumb svg {
  width: 28px;
  height: 28px;
  color: var(--color-primary-500);
  opacity: 0.45;
}
.summary-card__info {
  min-width: 0;
}
.summary-card__info .k {
  font-size: 0.6875rem;
  font-weight: 500;
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
  color: var(--brand-ink); /* brand world eyebrow (luminance-guarded) */
}
.summary-card__info .v {
  font-weight: 500;
  font-size: var(--fs-500);
  color: var(--color-primary-700);
  letter-spacing: var(--track-tight);
  line-height: 1.25;
}
/* Brand slogan — small italic line beneath the model in the chosen-vehicle
   summary. Soft slate ink (not the brand colour) so it never fights legibility. */
.summary-card__slogan {
  font-size: var(--fs-300);
  font-style: italic;
  color: var(--ink-soft);
  letter-spacing: 0.005em;
  line-height: 1.3;
  margin-top: 1px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.summary-card__info .sub {
  font-size: var(--fs-400);
  color: var(--ink-mute);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.card-label {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  font-size: var(--fs-300);
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-mute);
  margin-bottom: var(--sp-4);
}
.card-label svg {
  width: 16px;
  height: 16px;
  stroke: var(--color-accent-600);
}

/* ---- Schedule layout: calendar + slots, side-by-side on desktop --------- */
.schedule {
  display: grid;
  gap: var(--sp-4);
}
@media (min-width: 720px) {
  .schedule {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    align-items: start;
    gap: var(--sp-5);
  }
}
.cal-card,
.slots-card {
  background: var(--color-surface);
  border-radius: var(--r-lg);
  box-shadow: var(--sh-2);
  border: 1px solid var(--line);
  padding: var(--sp-5);
}
@media (min-width: 720px) {
  .cal-card,
  .slots-card {
    padding: var(--sp-6);
  }
  /* Keep the slots panel from outgrowing the calendar: scroll the chips
     internally if a day has many slots. The date label stays pinned. */
  .slots-card {
    display: flex;
    flex-direction: column;
    max-height: 420px;
  }
  .slots-host {
    overflow-y: auto;
    scrollbar-width: thin;
    scrollbar-color: var(--line) transparent;
  }
  .slots-host::-webkit-scrollbar {
    width: 8px;
  }
  .slots-host::-webkit-scrollbar-thumb {
    background: var(--line);
    border-radius: 999px;
  }
}

/* ==========================================================================
   Custom calendar (Step 3) — the centerpiece. Frameless, airy month grid.
   ========================================================================== */
.cal {
  --cell: 44px;
  -webkit-user-select: none;
  user-select: none;
}
.cal-head {
  display: grid;
  grid-template-columns: 40px 1fr 40px;
  align-items: center;
  margin-bottom: var(--sp-4);
}
.cal-title {
  text-align: center;
  font-weight: 500;
  font-size: var(--fs-500);
  color: var(--color-primary-700);
  letter-spacing: var(--track-tight);
}
.cal-nav {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  color: var(--color-primary-700);
  background: var(--color-surface);
  box-shadow: inset 0 0 0 1px var(--line);
  transition: transform var(--dur-1) var(--ease-snap),
    box-shadow var(--dur-2), background var(--dur-2), color var(--dur-2),
    opacity var(--dur-2);
}
.cal-nav svg {
  width: 19px;
  height: 19px;
}
.cal-nav:hover {
  box-shadow: inset 0 0 0 1px var(--color-primary-500);
  background: var(--color-primary-050);
}
.cal-nav:active {
  transform: scale(0.92);
}
.cal-nav[disabled] {
  opacity: 0.32;
  cursor: not-allowed;
  pointer-events: none;
  box-shadow: inset 0 0 0 1px var(--line-soft);
}
.cal-dow {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  margin-bottom: var(--sp-1);
}
.cal-dow span {
  text-align: center;
  font-size: 0.7rem;
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-mute);
  padding: var(--sp-2) 0;
}
/* The grid wrapper clips the slide-in of a freshly navigated month. */
.cal-grid-wrap {
  overflow: hidden;
}
.cal-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 2px;
}
.cal-grid.slide-next {
  animation: cal-in-next var(--dur-2) var(--ease-out) both;
}
.cal-grid.slide-prev {
  animation: cal-in-prev var(--dur-2) var(--ease-out) both;
}
@keyframes cal-in-next {
  from { opacity: 0; transform: translateX(7%); }
  to { opacity: 1; transform: translateX(0); }
}
@keyframes cal-in-prev {
  from { opacity: 0; transform: translateX(-7%); }
  to { opacity: 1; transform: translateX(0); }
}
.cal-pad {
  aspect-ratio: 1 / 1;
}
.cal-day {
  position: relative;
  aspect-ratio: 1 / 1;
  display: grid;
  place-items: center;
  border-radius: var(--r-md);
  background: transparent;
  color: var(--ink);
  font-size: var(--fs-400);
  font-weight: 400;
  font-variant-numeric: tabular-nums;
  letter-spacing: var(--track-tight);
  transition: background var(--dur-1) var(--ease-out),
    color var(--dur-1), box-shadow var(--dur-1), transform var(--dur-1) var(--ease-snap);
}
.cal-day__n {
  position: relative;
  z-index: 1;
  line-height: 1;
}
.cal-day:not([disabled]):hover {
  background: var(--color-primary-050);
  color: var(--color-primary-700);
}
.cal-day:not([disabled]):active {
  transform: scale(0.9);
}
.cal-day:focus-visible {
  outline: none;
  box-shadow: var(--ring-focus);
  z-index: 2;
}
/* Today — a small accent dot beneath the number (shadcn grammar). */
.cal-day.is-today::after {
  content: "";
  position: absolute;
  bottom: 5px;
  left: 50%;
  transform: translateX(-50%);
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: var(--color-accent-600);
  transition: background var(--dur-1);
}
.cal-day.is-today {
  font-weight: 500;
  color: var(--color-primary-700);
}
/* Past / disabled — muted, struck, not interactive. */
.cal-day[disabled] {
  color: var(--ink-mute);
  opacity: 0.4;
  text-decoration: line-through;
  cursor: not-allowed;
  pointer-events: none;
}
/* Selected — magenta fill, white number; today-dot flips to white. */
.cal-day.is-selected {
  background: var(--color-accent-600);
  color: #fff;
  font-weight: 500;
  box-shadow: var(--sh-accent);
  transform: scale(1.02);
}
.cal-day.is-selected.is-today::after {
  background: #fff;
}
.cal-day.is-selected:hover {
  background: var(--color-accent-500);
  color: #fff;
}

/* ==========================================================================
   Slots (Step 3) — beautiful time chips with skeleton + empty states
   ========================================================================== */
.slots-host[aria-busy="true"] {
  opacity: 0.9;
}
.slots-date {
  font-size: var(--fs-400);
  font-weight: 500;
  color: var(--color-primary-700);
  letter-spacing: var(--track-tight);
  margin-bottom: var(--sp-4);
}
.slots-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(96px, 1fr));
  gap: var(--sp-3);
}
.slot {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  min-height: 60px;
  padding: var(--sp-2);
  border-radius: var(--r-md);
  background: var(--color-surface);
  box-shadow: inset 0 0 0 1px var(--line);
  color: var(--color-primary-700);
  transition: transform var(--dur-1) var(--ease-snap),
    box-shadow var(--dur-2), background var(--dur-2), color var(--dur-2);
}
.slot__time {
  font-weight: 500;
  font-size: var(--fs-500);
  letter-spacing: var(--track-tight);
  font-variant-numeric: tabular-nums;
}
.slot__sub {
  font-size: 0.7rem;
  color: var(--ink-mute);
  font-variant-numeric: tabular-nums;
  transition: color var(--dur-2);
}
.slot:hover {
  box-shadow: inset 0 0 0 1px var(--color-primary-500);
  transform: translateY(-2px);
}
.slot:active {
  transform: scale(0.96);
}
.slot.is-active {
  background: var(--color-accent-600);
  color: #fff;
  box-shadow: var(--sh-accent);
}
.slot.is-active .slot__sub {
  color: rgba(255, 255, 255, 0.82);
}
/* Slot loading skeleton chips */
.slot-skel {
  min-height: 60px;
  border-radius: var(--r-md);
  background: var(--color-surface-2);
  box-shadow: inset 0 0 0 1px var(--line);
  position: relative;
  overflow: hidden;
}
.slot-skel::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(100deg, transparent 20%, rgba(0, 55, 112, 0.06) 50%, transparent 80%);
  background-size: 200% 100%;
  animation: shimmer 1.4s infinite;
}
/* Empty / hint state inside the slots card */
.slots-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: var(--sp-3);
  padding: var(--sp-6) var(--sp-3);
  color: var(--ink-mute);
}
.slots-empty svg {
  width: 30px;
  height: 30px;
  stroke: var(--color-neutral);
  opacity: 0.7;
}
.slots-empty p {
  font-size: var(--fs-400);
  max-width: 26ch;
  line-height: 1.5;
}

/* ==========================================================================
   Form (Step 4)
   ========================================================================== */
.form-grid {
  display: grid;
  gap: var(--sp-4);
}
@media (min-width: 560px) {
  .form-grid {
    grid-template-columns: 1fr 1fr;
  }
  .form-grid .col-span {
    grid-column: 1 / -1;
  }
}
.form-section {
  background: var(--color-surface);
  border-radius: var(--r-card);
  box-shadow: var(--sh-1);
  border: 1px solid var(--line);
  padding: var(--sp-6);
  margin-bottom: var(--sp-4);
}
.form-section > h2 {
  font-size: var(--fs-600);
  font-weight: 400; /* thin display feel */
  color: var(--color-primary-700);
  letter-spacing: var(--track-head);
  margin-bottom: var(--sp-1);
}
.form-section > .hint {
  font-size: var(--fs-400);
  color: var(--ink-mute);
  margin-bottom: var(--sp-5);
}
.field input.control::placeholder {
  color: var(--ink-mute);
  opacity: 0.7;
}
.req {
  color: var(--color-accent-600);
  font-weight: 700;
}
.field .err {
  display: none;
  margin-top: 6px;
  font-size: var(--fs-300);
  font-weight: 500;
  color: var(--color-error);
}
.field.has-error .control {
  box-shadow: inset 0 0 0 1.5px var(--color-error), 0 0 0 3px var(--color-error-bg);
}
.field.has-error .err {
  display: block;
  animation: shake 0.32s var(--ease-out);
}
@keyframes shake {
  0%, 100% { transform: translateX(0); }
  25% { transform: translateX(-4px); }
  75% { transform: translateX(4px); }
}

/* Consent — custom checkbox, large target */
.consent {
  display: flex;
  gap: var(--sp-3);
  align-items: flex-start;
  padding: var(--sp-4);
  border-radius: var(--r-md);
  background: var(--color-surface-2);
  box-shadow: inset 0 0 0 1px var(--line);
  cursor: pointer;
  transition: box-shadow var(--dur-2), background var(--dur-2);
}
.consent:hover {
  box-shadow: inset 0 0 0 1px var(--color-primary-500);
}
.consent.has-error {
  box-shadow: inset 0 0 0 1.5px var(--color-error);
  background: var(--color-error-bg);
}
.consent input {
  position: absolute;
  opacity: 0;
  width: 1px;
  height: 1px;
}
.consent__box {
  flex: 0 0 auto;
  width: 24px;
  height: 24px;
  margin-top: 1px;
  border-radius: 7px;
  background: var(--color-surface);
  box-shadow: inset 0 0 0 1.5px var(--color-neutral);
  display: grid;
  place-items: center;
  transition: background var(--dur-2) var(--ease-spring),
    box-shadow var(--dur-2), transform var(--dur-1);
}
.consent__box svg {
  width: 15px;
  height: 15px;
  stroke: #fff;
  stroke-width: 3.5;
  stroke-dasharray: 24;
  stroke-dashoffset: 24;
  transition: stroke-dashoffset var(--dur-2) var(--ease-out);
}
.consent input:checked ~ .consent__box {
  background: var(--color-accent-600);
  box-shadow: inset 0 0 0 1.5px var(--color-accent-700), var(--sh-accent);
}
.consent input:checked ~ .consent__box svg {
  stroke-dashoffset: 0;
}
.consent input:focus-visible ~ .consent__box {
  box-shadow: inset 0 0 0 1.5px var(--color-accent-600), var(--ring-focus);
}
.consent input:active ~ .consent__box {
  transform: scale(0.9);
}
.consent__text {
  font-size: var(--fs-400);
  color: var(--ink-soft);
  line-height: 1.5;
}
.consent__text strong {
  color: var(--ink);
  font-weight: 700;
}

/* Honeypot — visually & semantically hidden, off-screen */
.hp-field {
  position: absolute !important;
  left: -9999px !important;
  top: -9999px !important;
  width: 1px;
  height: 1px;
  overflow: hidden;
  opacity: 0;
  pointer-events: none;
}

/* Order review block in Step 4 */
.review {
  display: grid;
  gap: var(--sp-2);
}
.review__row {
  display: flex;
  justify-content: space-between;
  gap: var(--sp-4);
  padding: var(--sp-3) 0;
  border-bottom: 1px solid var(--line-soft);
}
.review__row:last-child {
  border-bottom: none;
}
.review__row .k {
  color: var(--ink-mute);
  font-size: var(--fs-400);
}
.review__row .v {
  font-weight: 500;
  color: var(--color-primary-700);
  letter-spacing: var(--track-tight);
  font-variant-numeric: tabular-nums;
  text-align: right;
}

/* ==========================================================================
   States: loading, empty, error
   ========================================================================== */
.state {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: var(--sp-3);
  padding: var(--sp-8) var(--sp-4);
  color: var(--ink-soft);
}
.state svg {
  width: 52px;
  height: 52px;
  stroke: var(--color-neutral);
  opacity: 0.8;
}
.state h3 {
  font-size: var(--fs-600);
  font-weight: 400;
  color: var(--color-primary-700);
  letter-spacing: var(--track-head);
}
.state p {
  max-width: 40ch;
  color: var(--ink-mute);
}
.state .btn {
  margin-top: var(--sp-2);
}
.state--error svg {
  stroke: var(--color-error);
}
.state--error h3 {
  color: var(--color-error);
}

/* Skeleton shimmer — hairline cards on white */
.skeleton-grid {
  display: grid;
  gap: var(--sp-5);
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
}
.skel {
  border-radius: var(--r-card);
  background: var(--color-surface);
  box-shadow: var(--sh-1);
  border: 1px solid var(--line);
  overflow: hidden;
  aspect-ratio: 4 / 3;
  position: relative;
}
.skel--tall {
  aspect-ratio: 3 / 4;
}
.skel::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    100deg,
    transparent 20%,
    rgba(0, 55, 112, 0.05) 50%,
    transparent 80%
  );
  background-size: 200% 100%;
  animation: shimmer 1.4s infinite;
}
@keyframes shimmer {
  from {
    background-position: 180% 0;
  }
  to {
    background-position: -80% 0;
  }
}

/* Inline spinner for slots */
.loading-inline {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-3);
  padding: var(--sp-5);
  color: var(--ink-mute);
  font-weight: 500;
}
.loading-inline .ring {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  border: 2.5px solid var(--line);
  border-top-color: var(--color-accent-600);
  animation: spin 0.7s linear infinite;
}

/* ==========================================================================
   Confirmation
   ========================================================================== */
.confirm {
  text-align: center;
  padding: var(--sp-7) var(--sp-4) var(--sp-8);
}
.confirm__badge {
  width: 88px;
  height: 88px;
  margin: 0 auto var(--sp-5);
  border-radius: 50%;
  background: var(--color-success);
  display: grid;
  place-items: center;
  box-shadow: 0 14px 30px rgba(19, 122, 82, 0.32);
  animation: badge-in 0.6s var(--ease-spring) both;
}
.confirm__badge svg {
  width: 44px;
  height: 44px;
  stroke: #fff;
  stroke-width: 3;
  stroke-dasharray: 48;
  stroke-dashoffset: 48;
  animation: draw 0.5s 0.25s var(--ease-out) forwards;
}
@keyframes badge-in {
  from {
    transform: scale(0.4);
    opacity: 0;
  }
  to {
    transform: scale(1);
    opacity: 1;
  }
}
@keyframes draw {
  to {
    stroke-dashoffset: 0;
  }
}
.confirm h1 {
  font-size: var(--fs-800);
  font-weight: 400;
  color: var(--color-primary-700);
  letter-spacing: var(--track-display);
  line-height: 1.1;
}
.confirm > p {
  margin: var(--sp-3) auto var(--sp-6);
  max-width: 44ch;
  color: var(--ink-soft);
  font-size: var(--fs-500);
  line-height: 1.5;
}
.ref-chip {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  padding: var(--sp-3) var(--sp-6);
  border-radius: var(--r-card);
  background: var(--color-surface);
  box-shadow: var(--sh-1);
  border: 1px dashed var(--color-accent-300);
  margin-bottom: var(--sp-6);
}
.ref-chip .k {
  font-size: var(--fs-300);
  font-weight: 500;
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
  color: var(--ink-mute);
}
.ref-chip .v {
  font-size: var(--fs-700);
  font-weight: 700;
  letter-spacing: 0.02em;
  color: var(--color-accent-600);
  font-variant-numeric: tabular-nums;
}
.confirm__summary {
  max-width: 420px;
  margin: 0 auto var(--sp-6);
  text-align: left;
  background: var(--color-surface);
  border-radius: var(--r-card);
  box-shadow: var(--sh-1);
  border: 1px solid var(--line);
  padding: var(--sp-6);
}
/* The two confirmation action buttons (restart / maps) -> centered, spaced */
.confirm > .btn {
  margin-top: var(--sp-3);
}

/* ==========================================================================
   Footer
   ========================================================================== */
.site-foot {
  padding: var(--sp-6) var(--sp-4) calc(var(--footbar-h) + var(--sp-5));
  text-align: center;
  color: var(--ink-mute);
  font-size: var(--fs-300);
}
.site-foot nav {
  display: flex;
  gap: var(--sp-4);
  justify-content: center;
  flex-wrap: wrap;
  margin-bottom: var(--sp-2);
}
.site-foot a {
  color: var(--ink-soft);
  font-weight: 500;
  text-decoration: none;
}
.site-foot a:hover {
  color: var(--color-accent-600);
  text-decoration: underline;
}

/* ==========================================================================
   Toast (transient errors)
   ========================================================================== */
.toast-wrap {
  position: fixed;
  left: 50%;
  bottom: calc(var(--footbar-h) + var(--sp-4));
  transform: translateX(-50%);
  z-index: 60;
  width: min(440px, calc(100vw - 2 * var(--sp-4)));
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
  pointer-events: none;
}
.toast {
  display: flex;
  align-items: flex-start;
  gap: var(--sp-3);
  padding: var(--sp-3) var(--sp-4);
  border-radius: var(--r-card);
  background: var(--color-primary-900);
  color: #fff;
  box-shadow: var(--sh-3);
  font-size: var(--fs-400);
  pointer-events: auto;
  animation: toast-in var(--dur-3) var(--ease-spring) both;
}
.toast.is-out {
  animation: toast-out var(--dur-2) var(--ease-out) forwards;
}
.toast--error {
  background: var(--color-error);
}
.toast svg {
  width: 20px;
  height: 20px;
  flex: 0 0 auto;
  margin-top: 1px;
}
@keyframes toast-in {
  from {
    opacity: 0;
    transform: translateY(16px) scale(0.96);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}
@keyframes toast-out {
  to {
    opacity: 0;
    transform: translateY(10px) scale(0.96);
  }
}

/* ==========================================================================
   Responsive niceties — display stair-steps up on larger viewports
   ========================================================================== */
@media (min-width: 760px) {
  :root {
    --header-h: 72px;
    --mesh-h: 480px;
  }
  .step-head h1 {
    font-size: var(--fs-900);
    letter-spacing: var(--track-display-xl);
  }
  .confirm h1 {
    font-size: var(--fs-900);
    letter-spacing: var(--track-display-xl);
  }
  .brand-lockup img {
    height: 30px;
  }
  .main {
    padding-top: var(--sp-5);
  }
}

/* ==========================================================================
   Reduced motion
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
  /* Freeze the aurora on a pleasing frame instead of letting it jump. */
  .app-bg__aurora {
    animation: none !important;
    background-position: 26% 50%, -20% 50% !important;
  }
}

/* ==========================================================================
   Rückrufaktion — recall-specific additions
   (everything above is the shared MTS design system; below are the few
   surfaces unique to the recall wizard)
   ========================================================================== */

/* ---- Step 1: campaign card -------------------------------------------- */
.campaign-card {
  position: relative;
  background: var(--color-surface);
  border-radius: var(--r-lg);
  box-shadow: var(--sh-2);
  border: 1px solid var(--line);
  padding: var(--sp-6);
  overflow: hidden;
}
/* signature accent bar along the top edge */
.campaign-card::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--color-primary-600), var(--color-accent-600));
}
.campaign-card__brand {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  height: 28px;
  padding: 0 var(--sp-3);
  border-radius: var(--r-pill);
  background: var(--color-primary-050);
  box-shadow: inset 0 0 0 1px var(--line);
  font-size: var(--fs-300);
  font-weight: 700;
  color: var(--color-primary-700);
  letter-spacing: 0.01em;
  margin-bottom: var(--sp-4);
}
.campaign-card h2 {
  font-size: var(--fs-700);
  font-weight: 400;
  color: var(--color-primary-700);
  letter-spacing: var(--track-head);
  line-height: 1.2;
  margin-bottom: var(--sp-3);
}
.campaign-card__intro {
  color: var(--ink-soft);
  font-size: var(--fs-500);
  line-height: 1.55;
  margin-bottom: var(--sp-4);
}
.campaign-card__desc {
  color: var(--ink-soft);
  font-size: var(--fs-400);
  line-height: 1.6;
  margin-bottom: var(--sp-5);
}

/* fact rows: affected models, build period, duration */
.campaign-facts {
  display: grid;
  gap: var(--sp-3);
  padding: var(--sp-4) 0 0;
  border-top: 1px solid var(--line-soft);
}
.fact {
  display: flex;
  align-items: flex-start;
  gap: var(--sp-3);
}
.fact svg {
  flex: 0 0 auto;
  width: 20px;
  height: 20px;
  margin-top: 2px;
  stroke: var(--color-accent-600);
}
.fact .k {
  display: block;
  font-size: 0.6875rem;
  font-weight: 500;
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
  color: var(--ink-mute);
  margin-bottom: 1px;
}
.fact .v {
  font-weight: 500;
  font-size: var(--fs-400);
  color: var(--color-primary-700);
  line-height: 1.4;
}
.campaign-card__fin {
  margin-top: var(--sp-5);
  font-size: var(--fs-400);
}
.campaign-card__fin a {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-weight: 500;
}
.campaign-card__fin a svg {
  width: 15px;
  height: 15px;
}

/* free-of-charge reassurance pill */
.free-pill {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  margin-top: var(--sp-5);
  min-height: 36px;
  padding: var(--sp-1) var(--sp-4);
  border-radius: var(--r-pill);
  background: var(--color-success-bg);
  color: var(--color-success);
  font-weight: 500;
  font-size: var(--fs-300);
}
.free-pill svg {
  width: 16px;
  height: 16px;
  stroke: var(--color-success);
}

/* Completion-link notice (step 1): "Ihre Anfrage RRA-… ist bereits angelegt" */
.prefill-notice {
  display: flex;
  align-items: flex-start;
  gap: var(--sp-2);
  margin-bottom: var(--sp-5);
  padding: var(--sp-3) var(--sp-4);
  border-radius: var(--r-md);
  background: var(--color-success-bg);
  color: var(--color-success);
  font-size: var(--fs-300);
  font-weight: 500;
  line-height: 1.5;
}
.prefill-notice svg {
  flex: none;
  width: 18px;
  height: 18px;
  margin-top: 1px;
  stroke: var(--color-success);
}
.prefill-notice strong {
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

/* ---- Step 4: privacy notice block -------------------------------------- */
.privacy-box {
  background: var(--color-surface-2);
  border-radius: var(--r-md);
  box-shadow: inset 0 0 0 1px var(--line);
  padding: var(--sp-4);
  margin-bottom: var(--sp-4);
  font-size: var(--fs-300);
  color: var(--ink-soft);
  line-height: 1.55;
  max-height: 180px;
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: var(--line) transparent;
}
.privacy-box p {
  margin-bottom: var(--sp-2);
}
.privacy-box p:last-child {
  margin-bottom: 0;
}
.privacy-box a {
  font-weight: 500;
}
.privacy-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: var(--fs-400);
  font-weight: 500;
  margin-bottom: var(--sp-4);
}
.privacy-link svg {
  width: 15px;
  height: 15px;
}

/* optional consent gets a softer, clearly-optional look */
.consent--optional {
  background: var(--color-surface);
  margin-top: var(--sp-3);
}
.consent__optional-tag {
  display: inline-block;
  font-size: 0.6875rem;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-mute);
  margin-bottom: 2px;
}

/* ---- Step 2: Foto des Fahrzeugscheins ----------------------------------- */
.photo-example {
  display: block;
  width: 100%;
  max-width: 400px;
  height: auto;
  margin: 0 0 var(--sp-3);
}
.photo-example text {
  font-family: var(--font-sans);
  letter-spacing: 0.01em;
}
.photo-tips {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2) var(--sp-4);
  margin-bottom: var(--sp-5);
}
.photo-tips li {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-1);
  font-size: var(--fs-300);
  font-weight: 500;
  color: var(--ink-soft);
}
.photo-tips svg {
  width: 14px;
  height: 14px;
  stroke-width: 3;
  color: var(--color-success);
}
/* Two guided capture slots — Vorderseite / Rückseite der Zulassungs-
   bescheinigung Teil I. Side by side on wider screens, stacked on mobile. */
.photo-slots {
  display: grid;
  gap: var(--sp-3);
  grid-template-columns: 1fr;
  align-items: stretch;
}
@media (min-width: 680px) {
  .photo-slots {
    grid-template-columns: 1fr 1fr;
  }
}
.photo-slot {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 7px;
}
.photo-slot__label {
  font-size: var(--fs-300);
  font-weight: 500;
  letter-spacing: 0.01em;
  color: var(--ink-mute);
}
.photo-slot__body {
  flex: 1 1 auto;
  display: grid;
}
/* The real file input stays focusable but invisible — the dashed label below
   is the visible control (mirrors the consent checkbox pattern). */
.photo-input {
  position: absolute;
  opacity: 0;
  width: 1px;
  height: 1px;
}
.photo-drop {
  display: flex;
  align-items: center;
  gap: var(--sp-4);
  padding: var(--sp-4) var(--sp-5);
  border-radius: var(--r-md);
  border: 1.5px dashed var(--color-neutral);
  background: var(--color-surface-2);
  cursor: pointer;
  transition: border-color var(--dur-2), background var(--dur-2);
}
.photo-drop:hover {
  border-color: var(--color-accent-600);
}
.photo-input:focus-visible ~ .photo-slot__body .photo-drop {
  border-color: var(--color-accent-600);
  box-shadow: var(--ring-focus);
}
/* Missing photo(s) after "Weiter": outline the empty slots. */
#photo-section.has-error .photo-slot:not(.is-filled) .photo-drop {
  border-color: var(--color-error);
  background: var(--color-error-bg);
}
.photo-drop > svg {
  flex: 0 0 auto;
  color: var(--color-accent-600);
}
.photo-drop__text {
  display: grid;
  gap: 2px;
}
.photo-drop__text strong {
  font-size: var(--fs-400);
  font-weight: 700;
  color: var(--color-primary-700);
  letter-spacing: var(--track-tight);
}
.photo-drop__text span {
  font-size: var(--fs-300);
  color: var(--ink-mute);
}
/* Slot variant of the drop zone: centred column, fills the slot height so
   both tiles stay level when one already shows a preview. */
.photo-drop--slot {
  flex-direction: column;
  justify-content: center;
  text-align: center;
  gap: var(--sp-2);
  padding: var(--sp-5) var(--sp-4);
  min-height: 128px;
}
.photo-preview {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sp-3);
  padding: var(--sp-3);
  border-radius: var(--r-md);
  background: var(--color-surface);
  box-shadow: inset 0 0 0 1px var(--line);
}
.photo-preview__thumb {
  flex: 0 0 auto;
  width: 52px;
  height: 52px;
  border-radius: var(--r-sm);
  object-fit: contain;
  background: var(--color-surface-2);
  box-shadow: inset 0 0 0 1px var(--line-soft);
}
.photo-preview__thumb--doc {
  display: grid;
  place-items: center;
  color: var(--color-primary-500);
}
.photo-preview__meta {
  display: grid;
  gap: 2px;
  min-width: 0;
  flex: 1 1 auto;
}
.photo-preview__name {
  font-size: var(--fs-400);
  font-weight: 500;
  color: var(--ink);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.photo-preview__size {
  font-size: var(--fs-300);
  color: var(--ink-mute);
}
.photo-preview__actions {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  margin-left: auto;
}
/* "Neu aufnehmen" — small pill label bound to the slot's file input. */
.photo-preview__retake {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-1);
  padding: 6px 12px;
  border-radius: var(--r-pill);
  font-size: var(--fs-300);
  font-weight: 700;
  color: var(--color-accent-600);
  box-shadow: inset 0 0 0 1.5px currentColor;
  cursor: pointer;
  transition: background var(--dur-1);
}
.photo-preview__retake:hover {
  background: var(--color-surface-2);
}
.photo-preview__retake svg {
  flex: 0 0 auto;
}
.photo-preview__remove {
  flex: 0 0 auto;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  color: var(--ink-mute);
  transition: background var(--dur-1), color var(--dur-1);
}
.photo-preview__remove:hover {
  background: var(--color-error-bg);
  color: var(--color-error);
}
.photo-preview__remove:focus-visible {
  outline: none;
  box-shadow: var(--ring-focus);
}
/* Inline requirement error below the two slots (empty = hidden). */
.photo-err {
  display: none;
  margin-top: var(--sp-3);
  font-size: var(--fs-300);
  font-weight: 500;
  color: var(--color-error);
}
#photo-section.has-error .photo-err:not(:empty) {
  display: block;
  animation: shake 0.32s var(--ease-out);
}
.form-section > .photo-privacy {
  margin: var(--sp-4) 0 0;
}

/* ---- Confirmation: Fahrzeugschein upload status -------------------------- */
.upload-card {
  max-width: 420px;
  margin: 0 auto var(--sp-6);
  text-align: left;
  background: var(--color-surface);
  border-radius: var(--r-card);
  box-shadow: var(--sh-1);
  border: 1px solid var(--line);
  padding: var(--sp-5) var(--sp-6);
}
.upload-card__head {
  font-size: var(--fs-400);
  font-weight: 700;
  color: var(--color-primary-700);
  letter-spacing: var(--track-tight);
  margin-bottom: var(--sp-2);
}
.upload-row {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  padding: var(--sp-2) 0;
  font-size: var(--fs-400);
  color: var(--ink-soft);
}
.upload-row > svg {
  flex: 0 0 auto;
}
.upload-row .ring {
  flex: 0 0 auto;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  border: 2.5px solid var(--line);
  border-top-color: var(--color-accent-600);
  animation: spin 0.7s linear infinite;
}
.upload-row__name {
  min-width: 0;
  flex: 1 1 auto;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.upload-row__state {
  flex: 0 0 auto;
  font-size: var(--fs-300);
  font-weight: 500;
  color: var(--ink-mute);
}
.upload-row--done > svg,
.upload-row--done .upload-row__state {
  color: var(--color-success);
}
.upload-row--error > svg {
  color: var(--color-error);
}
.upload-row__retry {
  flex: 0 0 auto;
  padding: 6px 14px;
  border-radius: var(--r-pill);
  font-size: var(--fs-300);
  font-weight: 700;
  color: var(--color-error);
  background: var(--color-surface);
  box-shadow: inset 0 0 0 1.5px var(--color-error);
  transition: background var(--dur-1);
}
.upload-row__retry:hover {
  background: var(--color-error-bg);
}
/* Subtle Fahrzeugschein hints on the confirmation screen */
.confirm > .upload-note {
  font-size: var(--fs-400);
  color: var(--ink-mute);
  margin-top: var(--sp-3);
}

/* ---- Pre-step: Aktion wählen (several campaigns active) ------------------
   One tappable card per Aktion: brand chip + title + chevron. Mobile-first
   single column; the cards share the hairline-card grammar of the wizard. */
.campaign-select {
  display: grid;
  gap: var(--sp-3);
}
.select-card {
  display: flex;
  align-items: center;
  gap: var(--sp-4);
  width: 100%;
  min-height: 72px;
  padding: var(--sp-5);
  text-align: left;
  background: var(--color-surface);
  border-radius: var(--r-lg);
  border: 1px solid var(--line);
  box-shadow: var(--sh-1);
  transition: transform var(--dur-2) var(--ease-spring),
    box-shadow var(--dur-2), border-color var(--dur-2), opacity var(--dur-2);
  -webkit-tap-highlight-color: transparent;
}
.select-card:hover {
  transform: translateY(-2px);
  box-shadow: var(--sh-3);
  border-color: transparent;
}
.select-card:active {
  transform: translateY(0) scale(0.995);
}
.select-card[aria-busy="true"] {
  opacity: 0.55;
  pointer-events: none;
}
.select-card__main {
  display: grid;
  gap: var(--sp-2);
  justify-items: start;
  min-width: 0;
  flex: 1 1 auto;
}
.select-card__brand {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  height: 24px;
  padding: 0 var(--sp-3);
  border-radius: var(--r-pill);
  background: var(--color-primary-050);
  box-shadow: inset 0 0 0 1px var(--line);
  font-size: var(--fs-300);
  font-weight: 700;
  color: var(--color-primary-700);
  letter-spacing: 0.01em;
}
.select-card__brand svg {
  width: 14px;
  height: 14px;
  stroke: var(--color-primary-700);
}
.select-card__title {
  font-size: var(--fs-500);
  font-weight: 500;
  color: var(--color-primary-700);
  letter-spacing: var(--track-head);
  line-height: 1.3;
}
.select-card__chev {
  flex: 0 0 auto;
  width: 20px;
  height: 20px;
  stroke: var(--color-accent-600);
  transition: transform var(--dur-2) var(--ease-spring);
}
.select-card:hover .select-card__chev {
  transform: translateX(3px);
}
@media (min-width: 560px) {
  .select-card {
    padding: var(--sp-5) var(--sp-6);
  }
  .select-card__title {
    font-size: var(--fs-600);
    font-weight: 400;
  }
}

/* "Andere Aktion wählen" — quiet text link in the step-1 header area */
.switch-campaign {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  margin-top: var(--sp-3);
  font-size: var(--fs-400);
  font-weight: 500;
  color: var(--color-accent-600);
  border-radius: var(--r-pill);
}
.switch-campaign svg {
  width: 15px;
  height: 15px;
  transition: transform var(--dur-2) var(--ease-spring);
}
.switch-campaign:hover {
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 2px;
}
.switch-campaign:hover svg {
  transform: translateX(-2px);
}

/* ---- Pre-step: Ihre Marke (rueckruf-Einstieg) -----------------------------
   One large touch tile per brand: official logo when assets/brands/<slug>.svg
   exists, otherwise the typographic monogram (big initial + brand name). */
.brand-select {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: var(--sp-4);
}
.brand-card {
  display: grid;
  justify-items: center;
  align-content: center;
  gap: var(--sp-4);
  min-height: 176px;
  padding: var(--sp-6) var(--sp-4);
  text-align: center;
  background: var(--color-surface);
  border-radius: var(--r-lg);
  border: 1px solid var(--line);
  box-shadow: var(--sh-1);
  transition: transform var(--dur-2) var(--ease-spring),
    box-shadow var(--dur-2), border-color var(--dur-2), opacity var(--dur-2);
  -webkit-tap-highlight-color: transparent;
}
.brand-card:hover {
  transform: translateY(-2px);
  box-shadow: var(--sh-3);
  border-color: transparent;
}
.brand-card:active {
  transform: translateY(0) scale(0.995);
}
.brand-card[aria-busy="true"] {
  opacity: 0.55;
  pointer-events: none;
}
.brand-card__visual {
  display: grid;
  place-items: center;
  width: 84px;
  height: 84px;
}
.brand-card__logo {
  width: 84px;
  height: 84px;
  object-fit: contain;
}
.brand-card__monogram {
  display: grid;
  place-items: center;
  width: 84px;
  height: 84px;
  border-radius: 50%;
  background: var(--color-primary-050);
  box-shadow: inset 0 0 0 1px var(--line);
}
.brand-card__monogram[hidden] {
  display: none;
}
.brand-card__initial {
  font-size: 38px;
  font-weight: 700;
  line-height: 1;
  color: var(--color-primary-700);
}
.brand-card__name {
  font-size: var(--fs-500);
  font-weight: 600;
  color: var(--color-primary-700);
  letter-spacing: var(--track-head);
  line-height: 1.3;
}
@media (min-width: 560px) {
  .brand-select {
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    gap: var(--sp-5);
  }
}

/* ---- Step 2: slot controls — Kamera primär, Drop-Zone sekundär -----------
   Per slot: the in-page camera is ALWAYS the prominent primary path (big
   filled CTA), beneath it a real drag-&-drop file zone (also a label → click
   opens the dialog). On mobile the zone collapses to a quiet "Datei wählen"
   line; without a usable camera the zone is promoted to the primary control. */
.photo-slot__empty {
  display: grid;
  gap: var(--sp-2);
  align-content: start;
}
.photo-drop__capture {
  width: 100%;
  min-height: 48px;
  font-size: var(--fs-400);
}
.photo-drop__capture svg {
  flex: 0 0 auto;
}
/* The drop zone reuses the dashed .photo-drop grammar — compact row on
   mobile, roomier centred field on desktop (where dragging exists). */
.photo-drop--zone {
  align-items: center;
  gap: var(--sp-3);
  padding: var(--sp-3) var(--sp-4);
}
.photo-drop--zone > svg {
  width: 20px;
  height: 20px;
  color: var(--ink-mute);
}
.photo-drop--zone .photo-drop__text strong {
  font-weight: 500;
  color: var(--ink-soft);
}
.photo-drop__t--desktop {
  display: none;
}
@media (min-width: 680px) {
  .photo-drop--zone {
    flex-direction: column;
    justify-content: center;
    text-align: center;
    gap: var(--sp-2);
    padding: var(--sp-4);
    min-height: 96px;
  }
  .photo-drop__t--desktop {
    display: inline;
  }
  .photo-drop__t--mobile {
    display: none;
  }
}
/* Drag-over feedback */
.photo-drop--zone.is-dragover {
  border-color: var(--color-accent-600);
  background: var(--color-accent-100);
}
/* Camera unavailable → the zone is the primary control: full drop-field look */
.photo-drop--primary {
  flex-direction: column;
  justify-content: center;
  text-align: center;
  gap: var(--sp-2);
  padding: var(--sp-5) var(--sp-4);
  min-height: 128px;
}
.photo-drop--primary .photo-drop__text strong {
  font-weight: 700;
  color: var(--color-primary-700);
}
.photo-drop--primary > svg {
  width: 24px;
  height: 24px;
  color: var(--color-accent-600);
}
/* Secondary file link in the filled preview ("Datei wählen") */
.photo-preview__file {
  font-size: var(--fs-300);
  font-weight: 500;
  color: var(--color-accent-600);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 2px;
  cursor: pointer;
  border-radius: var(--r-sm);
  padding: 6px 2px;
}
.photo-preview__file:hover {
  color: var(--color-accent-700);
}

/* ---- In-Page-Kamera (Step 2): Overlay mit Fahrzeugschein-Rahmen ----------
   Live getUserMedia preview filling the viewport; the guide frame is a bright
   rounded-rect cut-out in document ratio 148:105 (Zulassungsbescheinigung
   Teil I, quer) — the surroundings are dimmed by the guide's oversized
   box-shadow. Corner marks aid intuition; the shutter mirrors the brand CTA. */
body.cam-open {
  overflow: hidden;
}
.cam-modal {
  position: fixed;
  inset: 0;
  z-index: 80;
  background: #000;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  animation: cam-in var(--dur-2) var(--ease-out) both;
}
@keyframes cam-in {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
.cam-modal__video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
}
.cam-modal__hint {
  position: relative;
  z-index: 2;
  max-width: min(86vw, 46ch);
  margin-bottom: var(--sp-4);
  padding: var(--sp-2) var(--sp-4);
  border-radius: var(--r-pill);
  background: rgba(0, 10, 20, 0.6);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  color: #fff;
  font-size: var(--fs-400);
  font-weight: 500;
  text-align: center;
  line-height: 1.4;
}
/* The guide frame: ~85% of the smaller viewport dimension, document ratio.
   The huge box-shadow dims everything AROUND the frame — the cut-out itself
   stays bright live video. */
.cam-guide {
  position: relative;
  z-index: 1;
  /* Zulassungsbescheinigung Teil I: 210 x 105 mm aufgeklappt (FZV Anlage 6) */
  width: min(92vw, 78vh * 2);
  aspect-ratio: 210 / 105;
  display: grid;
  place-items: center;
  border-radius: var(--r-lg);
  border: 1.5px solid rgba(255, 255, 255, 0.85);
  box-shadow: 0 0 0 200vmax rgba(0, 10, 20, 0.58);
}
.cam-guide__corner {
  position: absolute;
  width: 26px;
  height: 26px;
  border: 3px solid #fff;
  filter: drop-shadow(0 1px 4px rgba(0, 0, 0, 0.4));
}
.cam-guide__corner--tl {
  top: -3px;
  left: -3px;
  border-right: none;
  border-bottom: none;
  border-top-left-radius: var(--r-lg);
}
.cam-guide__corner--tr {
  top: -3px;
  right: -3px;
  border-left: none;
  border-bottom: none;
  border-top-right-radius: var(--r-lg);
}
.cam-guide__corner--bl {
  bottom: -3px;
  left: -3px;
  border-right: none;
  border-top: none;
  border-bottom-left-radius: var(--r-lg);
}
.cam-guide__corner--br {
  bottom: -3px;
  right: -3px;
  border-left: none;
  border-top: none;
  border-bottom-right-radius: var(--r-lg);
}
.cam-modal__close {
  position: absolute;
  top: calc(var(--sp-4) + env(safe-area-inset-top));
  right: var(--sp-4);
  z-index: 2;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: rgba(0, 10, 20, 0.55);
  color: #fff;
  transition: background var(--dur-1), transform var(--dur-1) var(--ease-snap);
}
.cam-modal__close:hover {
  background: rgba(0, 10, 20, 0.75);
}
.cam-modal__close:active {
  transform: scale(0.92);
}
.cam-modal__controls {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 2;
  display: flex;
  justify-content: center;
  padding: var(--sp-5) var(--sp-5) calc(var(--sp-5) + env(safe-area-inset-bottom));
}
/* Big round shutter — white ring, magenta core (the one filled CTA). */
.cam-shutter {
  width: 74px;
  height: 74px;
  border-radius: 50%;
  border: 4px solid #fff;
  background: var(--color-accent-600);
  box-shadow: 0 6px 22px rgba(0, 0, 0, 0.45);
  transition: transform var(--dur-1) var(--ease-snap), background var(--dur-2),
    opacity var(--dur-2);
}
.cam-shutter:hover {
  background: var(--color-accent-500);
}
.cam-shutter:active {
  transform: scale(0.9);
}
.cam-shutter[disabled] {
  opacity: 0.45;
  cursor: not-allowed;
}
.cam-shutter:focus-visible {
  outline: none;
  box-shadow: 0 6px 22px rgba(0, 0, 0, 0.45), 0 0 0 3px rgba(255, 255, 255, 0.85);
}

/* ---- Step 4: Marketing-Wahl — aktive Entscheidung, keine Vorauswahl ------
   Two EQUAL-weight radio cards ("Ja, gern informieren" / "Nein, danke");
   the selection indicator is the only accent — neither option is nudged. */
.choice-question {
  font-size: var(--fs-500);
  font-weight: 500;
  color: var(--color-primary-700);
  line-height: 1.5;
  margin-bottom: var(--sp-3);
}
.choice-smallprint {
  font-size: var(--fs-300);
  color: var(--ink-mute);
  line-height: 1.55;
  margin-bottom: var(--sp-4);
}
.choice-cards {
  display: grid;
  gap: var(--sp-3);
}
@media (min-width: 560px) {
  .choice-cards {
    grid-template-columns: 1fr 1fr;
  }
}
.choice-card {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  padding: var(--sp-4);
  border-radius: var(--r-md);
  background: var(--color-surface-2);
  box-shadow: inset 0 0 0 1px var(--line);
  cursor: pointer;
  transition: box-shadow var(--dur-2), background var(--dur-2);
}
.choice-card:hover {
  box-shadow: inset 0 0 0 1px var(--color-primary-500);
}
.choice-card input {
  position: absolute;
  opacity: 0;
  width: 1px;
  height: 1px;
}
.choice-card__dot {
  flex: 0 0 auto;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: var(--color-surface);
  box-shadow: inset 0 0 0 1.5px var(--color-neutral);
  display: grid;
  place-items: center;
  transition: box-shadow var(--dur-2), transform var(--dur-1);
}
.choice-card__dot::after {
  content: "";
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: var(--color-accent-600);
  transform: scale(0);
  transition: transform var(--dur-2) var(--ease-spring);
}
.choice-card input:checked ~ .choice-card__dot {
  box-shadow: inset 0 0 0 1.5px var(--color-accent-600);
}
.choice-card input:checked ~ .choice-card__dot::after {
  transform: scale(1);
}
.choice-card input:focus-visible ~ .choice-card__dot {
  box-shadow: inset 0 0 0 1.5px var(--color-accent-600), var(--ring-focus);
}
.choice-card input:active ~ .choice-card__dot {
  transform: scale(0.9);
}
.choice-card:has(input:checked) {
  background: var(--color-surface);
  box-shadow: inset 0 0 0 1.5px var(--color-accent-600);
}
.choice-card__text {
  font-size: var(--fs-400);
  font-weight: 500;
  color: var(--ink);
  line-height: 1.4;
}
/* Missing choice after "Anfrage absenden": both cards flag equally. */
.choice-cards.has-error .choice-card {
  box-shadow: inset 0 0 0 1.5px var(--color-error);
  background: var(--color-error-bg);
}

/* ---- Embed mode (?embed=1): bare wizard, host page provides the chrome -- */
body.is-embed .appbar .brand-lockup,
body.is-embed .site-foot {
  display: none;
}
body.is-embed .appbar__inner {
  justify-content: flex-end;
}

/* ==========================================================================
   Polish 30.10. abends: Marken-Kacheln (Logo prominent, Name dezent, kein
   Overflow) + service-Auswahl mit Icon-Kreisen. Überschreibt Altlasten oben.
   ========================================================================== */
.main, .app { overflow-x: clip; }
.brand-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--sp-3);
}
@media (min-width: 560px) {
  .brand-grid { grid-template-columns: repeat(auto-fill, minmax(168px, 1fr)); gap: var(--sp-5); }
}
.brand-card,
.brand-card__visual,
.brand-card__logobox { min-width: 0; max-width: 100%; }
.brand-card { min-height: 148px; padding: var(--sp-5) var(--sp-3); gap: var(--sp-3); }
.brand-card__logo {
  max-height: 72px;
  max-width: min(150px, 86%);
  height: auto;
  width: auto;
}
.brand-card__name {
  font-size: 11.5px;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-mute);
  opacity: 0.8;
}
/* service-Auswahlkacheln: Icon-Kreis + mehr Luft */
.select-card--service { align-items: center; padding: var(--sp-5) var(--sp-4); text-decoration: none; }
.select-card--service:hover { text-decoration: none; }
.select-card__icon {
  flex: 0 0 auto;
  width: 46px;
  height: 46px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: color-mix(in srgb, var(--accent, #e0245e) 12%, white);
  color: var(--accent, #e0245e);
  margin-right: var(--sp-4);
}
.select-card--service .select-card__title { font-size: var(--fs-500); }
.select-card--service .select-card__body { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.select-card--service .select-card__meta { color: var(--ink-mute); font-size: var(--fs-300); line-height: 1.4; }


/* Kamera-Polish 30.10.: Text im Rahmen, Licht-Knopf, beschriftete Buttons */
.cam-guide__label {
  padding: 0 10%;
  text-align: center;
  color: rgba(255, 255, 255, 0.92);
  font-size: clamp(13px, 2.2vmin, 17px);
  font-weight: 600;
  text-shadow: 0 1px 6px rgba(0, 0, 0, 0.6);
  pointer-events: none;
}
.cam-torch {
  position: absolute;
  top: calc(env(safe-area-inset-top, 0px) + 14px);
  left: 14px;
  z-index: 3;
  border: 1.5px solid rgba(255, 255, 255, 0.7);
  background: rgba(0, 0, 0, 0.45);
  color: #fff;
  border-radius: 999px;
  padding: 9px 16px;
  font-size: 14px;
  font-weight: 600;
}
.cam-torch.is-on { background: #ffd34d; color: #1a1a1a; border-color: #ffd34d; }
.cam-modal__close {
  width: auto !important;
  padding: 9px 16px !important;
  border-radius: 999px !important;
  font-size: 14px;
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.cam-shutter-wrap { display: grid; justify-items: center; gap: 8px; }
.cam-shutter-wrap .cam-shutter__label {
  color: #fff;
  font-size: 14px;
  font-weight: 700;
  text-shadow: 0 1px 6px rgba(0, 0, 0, 0.6);
}

.cam-modal__video { background: #000; }