/* Self-hosted Archivo Variable font (no third-party/Google Fonts requests for visitors).
   Site-wide type family — replaces Manrope. This build (the "wdth" axis file) carries
   BOTH the weight (100-900) and width/stretch (62%-125%) axes in one variable font, which
   is what lets the header wordmark use font-weight + font-stretch together (e.g. the
   "SPRING" / "AUTOMOBILE" lockup at 118% width). Two subset files matching the upstream
   @fontsource-variable/archivo package. */
@font-face {
  font-family: 'Archivo Variable';
  font-style: normal;
  font-display: swap;
  font-weight: 100 900;
  font-stretch: 62% 125%;
  src: url(/fonts/archivo-latin-wdth-normal.woff2) format('woff2');
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face {
  font-family: 'Archivo Variable';
  font-style: normal;
  font-display: swap;
  font-weight: 100 900;
  font-stretch: 62% 125%;
  src: url(/fonts/archivo-latin-ext-wdth-normal.woff2) format('woff2');
  unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}

/* Self-hosted JetBrains Mono Variable — used only for the small tracked "HEGNAU" line
   under the header wordmark, for a technical/precision accent against the Archivo type. */
@font-face {
  font-family: 'JetBrains Mono Variable';
  font-style: normal;
  font-display: swap;
  font-weight: 100 800;
  src: url(/fonts/jetbrains-mono-latin-wght-normal.woff2) format('woff2');
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face {
  font-family: 'JetBrains Mono Variable';
  font-style: normal;
  font-display: swap;
  font-weight: 100 800;
  src: url(/fonts/jetbrains-mono-latin-ext-wght-normal.woff2) format('woff2');
  unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}

/* ===================================================================
   Design tokens — dark luxury automotive theme.
   Deep near-black base, warm gold accent, glassy elevated surfaces.
   =================================================================== */
:root {
  --bg: #0a0a0a;
  --bg-elevated: #141414;
  --navy: #121212;
  --navy-light: #1e1e1e;
  --surface: linear-gradient(160deg, rgba(255,255,255,0.05), rgba(255,255,255,0.015));
  --surface-solid: #161616;
  --border: rgba(255, 255, 255, 0.09);
  --border-strong: rgba(255, 255, 255, 0.16);
  --accent: #1e97f3;
  --accent-soft: #8fc7fb;
  --accent-dark: #0d5fae;
  --text: #eef0f7;
  --text-muted: #9aa0b8;
  --radius: 18px;
  --radius-pill: 999px;
  --shadow: 0 24px 60px rgba(0, 0, 0, 0.55);
  --shadow-soft: 0 12px 32px rgba(0, 0, 0, 0.35);
  --glow: 0 0 0 1px rgba(30, 151, 243, 0.25), 0 20px 50px rgba(30, 151, 243, 0.12);
  --transition: 0.25s cubic-bezier(0.4, 0, 0.2, 1);
  --bounce: 0.45s cubic-bezier(0.34, 1.56, 0.64, 1);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: 'Archivo Variable', -apple-system, BlinkMacSystemFont, 'Helvetica Neue', Arial, sans-serif;
  color: var(--text);
  background: var(--bg);
  line-height: 1.65;
  position: relative;
  overflow-x: hidden; /* the hero and story-section full-bleed layouts use 100vw; this
                          keeps a stray fractional-scrollbar pixel from causing horizontal scroll */
}

/* Ambient background glow — gives the dark theme depth without any photography.
   Slowly drifts so the page feels alive rather than a flat static gradient. */
body::before {
  content: "";
  position: fixed;
  inset: -10%;
  z-index: -2;
  background:
    radial-gradient(ellipse 1100px 650px at 12% -8%, rgba(30, 151, 243, 0.16), transparent 60%),
    radial-gradient(ellipse 900px 700px at 100% 10%, rgba(20, 70, 130, 0.18), transparent 55%),
    radial-gradient(ellipse 800px 600px at 8% 95%, rgba(30, 151, 243, 0.08), transparent 60%);
  background-repeat: no-repeat;
  pointer-events: none;
  animation: ambientDrift 26s ease-in-out infinite alternate;
}
@keyframes ambientDrift {
  0%   { transform: translate3d(0, 0, 0) scale(1); }
  50%  { transform: translate3d(-1.5%, 1.5%, 0) scale(1.04); }
  100% { transform: translate3d(1.5%, -1%, 0) scale(1.02); }
}
/* Faint film-grain texture for a premium, non-flat surface. */
body::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  opacity: 0.035;
  mix-blend-mode: overlay;
  pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

a { color: inherit; }
img { max-width: 100%; display: block; }

:focus-visible {
  outline: 3px solid var(--accent);
  outline-offset: 2px;
}

/* Skip link — hidden until keyboard-focused, for accessibility */
.skip-link {
  position: absolute;
  top: -60px;
  left: 12px;
  background: var(--accent);
  color: #fff;
  padding: 10px 16px;
  border-radius: 0 0 var(--radius) var(--radius);
  z-index: 100;
  text-decoration: none;
  font-weight: 700;
  transition: top var(--transition);
}
.skip-link:focus { top: 0; }

/* ---------- Header / nav ---------- */
.site-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: rgba(10, 12, 20, 0.72);
  backdrop-filter: blur(14px) saturate(140%);
  -webkit-backdrop-filter: blur(14px) saturate(140%);
  padding: 20px 32px;
  position: sticky;
  top: 0;
  z-index: 50;
  border-bottom: 1px solid var(--border);
  transition: padding var(--transition), box-shadow var(--transition), background var(--transition);
}
.site-header::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: -1px;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--accent) 30%, var(--accent) 70%, transparent);
  opacity: 0.6;
}
.site-header.is-scrolled {
  padding: 12px 32px;
  background: rgba(8, 10, 16, 0.88);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.4);
}
.site-header .logo {
  display: flex;
  align-items: center;
  color: #fff;
  text-decoration: none;
}
.logo-mark {
  display: block;
  height: 46px;
  width: auto;
  transition: height var(--transition);
}
.site-header.is-scrolled .logo-mark { height: 36px; }
@media (max-width: 480px) {
  .logo-mark { height: 38px; }
  .site-header.is-scrolled .logo-mark { height: 30px; }
}
.site-header nav {
  display: flex;
  align-items: center;
}
.site-header nav a {
  color: #a5acc4;
  text-decoration: none;
  margin-left: 26px;
  font-size: 0.88rem;
  font-weight: 700;
  font-stretch: 118%;
  letter-spacing: 0.3px;
  transition: color var(--transition);
  position: relative;
  padding: 4px 0;
}
.site-header nav a::after {
  content: "";
  position: absolute;
  left: 0; right: 100%; bottom: 0;
  height: 1px;
  background: var(--accent);
  transition: right var(--transition);
}
.site-header nav a:hover,
.site-header nav a[aria-current="page"] { color: #fff; }
.site-header nav a:hover::after,
.site-header nav a[aria-current="page"]::after { right: 0; }

.nav-toggle {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  background: none;
  border: none;
  padding: 8px;
  cursor: pointer;
}
.nav-toggle span {
  display: block;
  width: 24px;
  height: 2px;
  background: #fff;
  border-radius: 2px;
}

/* ---------- Hero (home page only) ---------- */
.hero {
  position: relative;
  color: #fff;
  /* Full-bleed: breaks out of main's max-width so the hero fills the entire viewport
     width, not just the 1120px content column. Only "left" is set (not "right" too) —
     with both set some engines mis-resolve the over-constrained box on narrow viewports
     and the hero shifts sideways instead of centering. */
  left: 50%;
  width: 100vw;
  margin-left: -50vw;
  margin-bottom: 56px;
  padding: 100px 24px 88px;
  text-align: center;
  overflow: hidden;
  isolation: isolate;
}
.hero-bg {
  position: absolute;
  inset: 0;
  z-index: -3;
}
/* Story-style crossfading background: all photos stacked, only .is-active is visible.
   A slow scale (Ken Burns) on the active photo adds movement without feeling gimmicky. */
.hero-bg-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: saturate(0.8) brightness(0.5);
  opacity: 0;
  transform: scale(1.06);
  transition: opacity 1.8s ease, transform 7s ease-out;
  z-index: 0;
}
.hero-bg-img.is-active {
  opacity: 1;
  transform: scale(1);
  z-index: 1;
}
.hero-bg::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  background:
    radial-gradient(ellipse 1000px 560px at 18% -15%, rgba(30, 151, 243, 0.28), transparent 60%),
    radial-gradient(ellipse 700px 500px at 95% 0%, rgba(20, 70, 130, 0.22), transparent 55%),
    linear-gradient(180deg, rgba(10, 12, 20, 0.35) 0%, rgba(10, 12, 20, 0.55) 55%, var(--bg) 100%);
}
/* Wide segmented progress bar under the trust row so the rotation reads as an
   intentional "story", not a glitch — each segment is a real button you can click
   to jump straight to that slide. */
.hero-progress {
  position: relative;
  z-index: 3;
  display: flex;
  gap: 8px;
  width: 100%;
  max-width: 620px;
  margin: 44px auto 0;
}
.hero-progress button {
  flex: 1 1 0;
  min-width: 24px;
  height: 3px;
  border-radius: 3px;
  background: rgba(255, 255, 255, 0.22);
  overflow: hidden;
  position: relative;
  border: none;
  padding: 0;
  cursor: pointer;
  transition: background var(--transition), transform var(--bounce);
}
.hero-progress button:hover { background: rgba(255, 255, 255, 0.36); transform: scaleY(2.4); }
.hero-progress button::after {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--accent);
  transform: scaleX(0);
  transform-origin: left;
}
.hero-progress button.is-active::after {
  animation: heroProgress 5s linear forwards;
}
.hero-progress button.is-done::after {
  transform: scaleX(1);
}
@keyframes heroProgress {
  from { transform: scaleX(0); }
  to { transform: scaleX(1); }
}
.hero::before {
  /* Abstract "speed line" motif, slowly drifting like light streaking past on a road —
     decorative, no photography needed */
  content: "";
  position: absolute;
  inset: -20% -30%;
  background-image: repeating-linear-gradient(
    115deg,
    rgba(30, 151, 243, 0.06) 0px,
    rgba(30, 151, 243, 0.06) 1px,
    transparent 1px,
    transparent 68px
  );
  mask-image: radial-gradient(ellipse 60% 60% at 30% 30%, black, transparent);
  pointer-events: none;
  z-index: -1;
  animation: speedLines 14s linear infinite;
}
@keyframes speedLines {
  0% { background-position: 0 0; }
  100% { background-position: 480px -240px; }
}
.hero::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--border-strong) 30%, var(--border-strong) 70%, transparent);
  pointer-events: none;
}
/* Wordmark above the eyebrow line — echoes the logo's own typography (heavy "SPRING" +
   light, wide-tracked "AUTOMOBILE") using the site's own font rather than an image, so it
   stays crisp at any size and matches the surrounding text color/theme. */
.hero-brandmark {
  font-size: 2.1rem;
  text-transform: uppercase;
  color: #fff;
  margin: 0 0 14px;
  position: relative;
}
.hero-brandmark-heavy {
  font-weight: 800;
  font-stretch: 118%;
  letter-spacing: 0.06em;
}
.hero-brandmark-light {
  font-weight: 300;
  font-stretch: 118%;
  letter-spacing: 0.3em;
  color: var(--accent-soft);
}
@media (max-width: 480px) {
  .hero-brandmark { font-size: 1.84rem; }
}

.hero-eyebrow {
  display: inline-block;
  font-size: 0.78rem;
  font-weight: 300;
  font-stretch: 118%;
  letter-spacing: 0.335em;
  text-transform: uppercase;
  color: var(--accent-soft);
  margin: 0 0 18px;
  position: relative;
}
.hero h1 {
  color: #fff;
  margin: 0 0 18px;
  font-weight: 700;
  font-stretch: 118%;
  letter-spacing: -0.005em;
  text-wrap: balance;
  position: relative;
  font-size: clamp(2.1rem, 4.6vw, 3.6rem);
  line-height: 1.08;
  max-width: 880px;
  margin-left: auto;
  margin-right: auto;
}
@supports (background-clip: text) or (-webkit-background-clip: text) {
  .hero h1 {
    background: linear-gradient(100deg, #ffffff 25%, #8fc7fb 55%, var(--accent) 105%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
  }
}

.hero-subtitle {
  font-size: 1.2rem;
  color: #b9c0da;
  max-width: 620px;
  margin: 0 auto 36px;
  position: relative;
}
/* Fades out/in when the hero swaps to the next slide's title/subtitle/CTA text,
   timed to the photo crossfade so the whole slide feels like one unit. */
.hero-copy { transition: opacity 0.3s ease; }
.hero-copy.is-fading { opacity: 0; }
.cta-row { display: flex; gap: 16px; justify-content: center; flex-wrap: wrap; }
.btn {
  display: inline-block;
  padding: 15px 34px;
  border-radius: var(--radius-pill);
  text-decoration: none;
  font-weight: 700;
  font-stretch: 118%;
  letter-spacing: -0.005em;
  transition: transform var(--bounce), box-shadow var(--transition), background var(--transition);
}
.btn:hover { transform: translateY(-3px) rotate(-1deg) scale(1.03); box-shadow: 0 16px 34px rgba(0,0,0,0.4); }
.btn:active { transform: translateY(-1px) rotate(0deg) scale(0.98); }
.btn-primary { background: linear-gradient(135deg, var(--accent), var(--accent-dark)); color: #fff; box-shadow: 0 12px 30px rgba(30, 151, 243, 0.25); }
.btn-secondary { background: rgba(255,255,255,0.05); color: #fff; border: 1px solid rgba(255,255,255,0.28); }
.btn-secondary:hover { background: rgba(255,255,255,0.09); }

main { max-width: 1120px; margin: 0 auto; padding: 8px 24px 40px; min-height: 60vh; }
h1 { font-size: clamp(1.8rem, 3.4vw, 2.5rem); margin-bottom: 24px; text-wrap: balance; font-weight: 700; font-stretch: 118%; letter-spacing: -0.005em; }
main h2 {
  font-size: 1.5rem;
  margin: 56px 0 20px;
  font-weight: 700;
  font-stretch: 118%;
  letter-spacing: -0.005em;
  text-wrap: balance;
  position: relative;
  padding-left: 20px;
}
main h2::before {
  content: "";
  position: absolute;
  left: 0;
  top: 6px;
  bottom: 6px;
  width: 3px;
  border-radius: 2px;
  background: linear-gradient(180deg, var(--accent), var(--accent-dark));
}
main h2:first-of-type { margin-top: 8px; }
main h3 { font-size: 1.1rem; margin: 24px 0 8px; font-weight: 700; font-stretch: 118%; letter-spacing: -0.005em; }
main p { margin: 0 0 16px; color: var(--text-muted); }
main ul:not(.btn-row) { margin: 0 0 20px; padding-left: 22px; color: var(--text-muted); }
main ul:not(.btn-row) li { margin-bottom: 8px; }
main a { color: var(--accent-soft); text-underline-offset: 3px; }
main a:hover { text-decoration-thickness: 2px; color: var(--accent); }

/* ---------- Lede (Home intro line) — one short sentence instead of a full paragraph,
   so the page breathes before the feature row starts. ---------- */
main .lede {
  font-size: 1.1rem;
  color: var(--text-muted);
  max-width: 640px;
  margin: 4px 0 4px;
  line-height: 1.5;
}

/* ---------- Feature row (Home: Angebote / Ankauf / Werkstatt / Finanzierung) ----------
   Deliberately not a boxed icon-card grid — a numbered editorial row, closer to a
   magazine index than a generic SaaS feature grid. */
.feature-row {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  margin: 32px 0 8px;
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
}
.feature-item {
  display: block;
  text-decoration: none;
  color: inherit;
  padding: 30px 26px 26px;
  border-left: 1px solid var(--border);
  transition: background var(--transition);
  position: relative;
}
.feature-item:first-child { border-left: none; }
.feature-item:hover { background: rgba(255, 255, 255, 0.025); }
.feature-index {
  display: block;
  font-size: 0.78rem;
  font-weight: 300;
  font-stretch: 118%;
  letter-spacing: 0.335em;
  color: var(--accent);
  margin-bottom: 18px;
  transition: transform var(--bounce), color var(--transition);
}
.feature-item:hover .feature-index { transform: scale(1.3) rotate(-6deg); color: #fff; }
.feature-item h3 { margin: 0 0 10px; font-size: 1.1rem; color: #fff; font-weight: 700; font-stretch: 118%; letter-spacing: -0.005em; }
.feature-item p { margin: 0 0 16px; color: var(--text-muted); font-size: 0.92rem; }
.feature-item .feature-arrow {
  display: inline-block;
  color: var(--accent);
  font-weight: 700;
  font-size: 0.85rem;
  opacity: 0;
  transform: translateX(-6px);
  transition: opacity var(--transition), transform var(--bounce);
}
.feature-item:hover .feature-arrow { opacity: 1; transform: translateX(4px); }

@media (max-width: 760px) {
  .feature-row { grid-template-columns: 1fr; border-bottom: none; }
  .feature-item {
    border-left: none;
    border-bottom: 1px solid var(--border);
    padding: 24px 4px;
  }
  .feature-item .feature-arrow { opacity: 1; transform: none; }
}

/* Staggered reveal so the four items feel like they arrive in sequence, not all at once */
.feature-row .feature-item:nth-child(1) { transition-delay: 0s; }
.feature-row .feature-item:nth-child(2) { transition-delay: 0.08s; }
.feature-row .feature-item:nth-child(3) { transition-delay: 0.16s; }
.feature-row .feature-item:nth-child(4) { transition-delay: 0.24s; }

/* ---------- Stat strip (Home) — a slim, borderless row of numbers, deliberately
   lighter than the feature-row above it so the two sections don't stack as two
   heavy bordered blocks. No headline, no boxes: just the numbers doing the work. ---------- */
.stat-strip {
  display: flex;
  justify-content: center;
  align-items: stretch;
  flex-wrap: wrap;
  gap: 0;
  margin: 8px 0 48px;
  padding: 20px 0;
}
.stat {
  flex: 1 1 0;
  min-width: 150px;
  text-align: center;
  padding: 0 24px;
  position: relative;
}
.stat + .stat::before {
  content: "";
  position: absolute;
  left: 0;
  top: 6px;
  bottom: 6px;
  width: 1px;
  background: var(--border);
}
.stat .stat-num {
  display: block;
  font-size: clamp(1.1rem, 1.6vw, 1.4rem);
  font-weight: 800;
  letter-spacing: -0.01em;
  overflow-wrap: break-word;
  background: linear-gradient(100deg, #fff, var(--accent-soft));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.stat .stat-label {
  display: block;
  margin-top: 6px;
  color: var(--text-muted);
  font-size: 0.8rem;
  letter-spacing: 0.4px;
  text-transform: uppercase;
}
@media (max-width: 760px) {
  .stat-strip { flex-direction: column; gap: 20px; padding: 8px 0; }
  .stat + .stat::before { display: none; }
}

/* ---------- FAQ cards (Ankauf, Finanzierung) ---------- */
.faq-list { margin: 8px 0 0; }
.faq-item {
  background: var(--surface);
  border: 1px solid var(--border);
  border-left: 3px solid var(--accent);
  border-radius: var(--radius);
  padding: 18px 22px;
  margin-bottom: 14px;
  transition: border-color var(--transition), transform var(--transition);
}
.faq-item:hover { border-color: var(--border-strong); border-left-color: var(--accent); transform: translateX(2px); }
.faq-item h3 { margin: 0 0 8px; font-size: 1rem; color: #fff; }
.faq-item p { margin: 0; color: var(--text-muted); }

/* ---------- Tag grid (Werkstatt services) ---------- */
.tag-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 12px;
  margin: 20px 0 24px;
}
.tag-item {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 16px 18px;
  font-weight: 600;
  color: var(--text);
  font-size: 0.95rem;
  transition: border-color var(--transition), transform var(--transition);
}
.tag-item:hover { border-color: var(--border-strong); transform: translateY(-2px); }

/* ---------- Process steps (Home: So funktioniert's) — a connected timeline instead
   of three loose boxes: a thin line runs behind the numbered circles, tying the three
   steps together as one flow. Circles sit above the line (z-index) so it reads as
   "connected", not crossed-out. Reveals in sequence via nth-child stagger. ---------- */
.process-steps {
  position: relative;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 28px 24px;
  margin: 28px 0 8px;
  counter-reset: step;
}
.process-steps::before {
  content: "";
  position: absolute;
  left: 20px;
  right: 20px;
  top: 18px;
  height: 1px;
  background: linear-gradient(90deg, var(--border-strong), var(--border) 50%, var(--border-strong));
  z-index: 0;
}
.process-step { position: relative; z-index: 1; padding-left: 56px; }
.process-step::before {
  counter-increment: step;
  content: counter(step);
  position: absolute;
  left: 0;
  top: -2px;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--accent), var(--accent-dark));
  color: #fff;
  font-weight: 800;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.05rem;
  box-shadow: 0 8px 20px rgba(30, 151, 243, 0.3);
  transition: transform var(--bounce);
}
.process-step:hover::before { transform: scale(1.12) rotate(-8deg); }
.process-step h3 { margin: 4px 0 6px; font-size: 1.05rem; color: #fff; font-weight: 700; font-stretch: 118%; letter-spacing: -0.005em; }
.process-step p { margin: 0; color: var(--text-muted); font-size: 0.92rem; }
.process-steps .process-step:nth-child(1) { transition-delay: 0s; }
.process-steps .process-step:nth-child(2) { transition-delay: 0.12s; }
.process-steps .process-step:nth-child(3) { transition-delay: 0.24s; }

@media (max-width: 760px) {
  .process-steps { grid-template-columns: 1fr; gap: 30px; }
  .process-steps::before {
    left: 20px;
    right: auto;
    top: 20px;
    bottom: 20px;
    width: 1px;
    height: auto;
    background: linear-gradient(180deg, var(--border-strong), var(--border) 50%, var(--border-strong));
  }
}

/* ---------- Story section (Home): cinematic full-bleed panels — each entry is a
   full-width "scene" (big background photo, diagonal dark gradient, oversized headline,
   circular link badge), stacked like chapters of one story rather than a card grid.
   Editable from /admin/story. Full-bleed wrapper matches the hero treatment. */
.story-bleed {
  position: relative;
  left: 50%;
  width: 100vw;
  margin-left: -50vw;
}
.story-panels {
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.story-panel {
  position: relative;
  display: flex;
  min-height: 62vh;
  overflow: hidden;
  color: #fff;
  text-decoration: none;
  isolation: isolate;
}
a.story-panel { cursor: pointer; }
.story-panel-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  background: var(--surface-solid);
}
.story-panel-bg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: saturate(0.85) brightness(0.55);
  transition: transform 1.4s cubic-bezier(0.2, 0, 0, 1);
}
.story-panel:hover .story-panel-bg img { transform: scale(1.06); }
.story-placeholder {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  color: var(--text-muted);
  background:
    radial-gradient(ellipse 300px 200px at 30% 20%, rgba(30, 151, 243, 0.12), transparent 60%),
    linear-gradient(160deg, rgba(255,255,255,0.05), rgba(255,255,255,0.01));
}
.story-placeholder svg { width: 40px; height: 40px; opacity: 0.5; }
.story-placeholder span { font-size: 0.82rem; letter-spacing: 0.3px; }
.story-panel-overlay {
  position: absolute;
  inset: 0;
  z-index: 1;
  background:
    linear-gradient(100deg, rgba(6, 8, 14, 0.94) 0%, rgba(6, 8, 14, 0.6) 34%, rgba(6, 8, 14, 0.18) 58%, transparent 78%),
    linear-gradient(0deg, rgba(6, 8, 14, 0.65), transparent 50%);
}
.story-panel-content {
  position: relative;
  z-index: 2;
  max-width: 560px;
  padding: 56px 48px;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
}
.story-panel-content::before {
  content: "";
  display: block;
  width: 34px;
  height: 3px;
  background: var(--accent);
  margin-bottom: 18px;
}
.story-panel-index {
  font-family: 'JetBrains Mono Variable', ui-monospace, monospace;
  font-size: 0.78rem;
  letter-spacing: 0.3em;
  color: var(--accent-soft);
  margin-bottom: 10px;
}
.story-panel-kicker {
  display: inline-block;
  align-self: flex-start;
  font-size: 0.7rem;
  font-weight: 300;
  font-stretch: 118%;
  letter-spacing: 0.335em;
  text-transform: uppercase;
  color: #fff;
  padding: 5px 13px;
  border: 1px solid rgba(255, 255, 255, 0.35);
  border-radius: 999px;
  margin-bottom: 18px;
}
.story-panel h3 {
  font-size: clamp(1.6rem, 3.2vw, 2.6rem);
  font-weight: 700;
  font-stretch: 118%;
  letter-spacing: -0.005em;
  margin: 0 0 14px;
  text-wrap: balance;
}
.story-panel p {
  font-size: 1rem;
  line-height: 1.55;
  color: #c9cfe6;
  max-width: 460px;
  margin: 0;
}
.story-panel-badge {
  position: absolute;
  z-index: 2;
  right: 40px;
  bottom: 40px;
  width: 86px;
  height: 86px;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.45);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  font-size: 0.62rem;
  font-weight: 700;
  font-stretch: 118%;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  text-align: center;
  color: #fff;
  transition: background var(--transition), border-color var(--transition), transform var(--bounce), color var(--transition);
}
.story-panel:hover .story-panel-badge {
  background: var(--accent);
  border-color: var(--accent);
  color: #fff;
  transform: scale(1.14) rotate(10deg);
}

/* Alternate panels align content right, like a story flipping sides as it unfolds */
.story-panel:nth-child(even) .story-panel-content { margin-left: auto; align-items: flex-end; text-align: right; }
.story-panel:nth-child(even) .story-panel-content::before { align-self: flex-end; }
.story-panel:nth-child(even) .story-panel-overlay {
  background:
    linear-gradient(260deg, rgba(6, 8, 14, 0.94) 0%, rgba(6, 8, 14, 0.6) 34%, rgba(6, 8, 14, 0.18) 58%, transparent 78%),
    linear-gradient(0deg, rgba(6, 8, 14, 0.65), transparent 50%);
}
.story-panel:nth-child(even) .story-panel-badge { right: auto; left: 40px; }

@media (max-width: 760px) {
  .story-panel { min-height: 78vh; }
  /* Right padding reserves room for the round "Mehr erfahren" badge, which stays fixed at
     bottom-right on mobile (see .story-panel-badge below) — without it, full-width text on
     narrow screens runs underneath the badge and overlaps it. */
  .story-panel-content { max-width: 100%; padding: 32px 100px 32px 24px; }
  .story-panel:nth-child(even) .story-panel-content { align-items: flex-start; text-align: left; margin-left: 0; }
  .story-panel:nth-child(even) .story-panel-content::before { align-self: flex-start; }
  .story-panel:nth-child(even) .story-panel-badge { right: 24px; left: auto; }
  .story-panel:nth-child(even) .story-panel-overlay {
    background:
      linear-gradient(100deg, rgba(6, 8, 14, 0.94) 0%, rgba(6, 8, 14, 0.6) 34%, rgba(6, 8, 14, 0.18) 58%, transparent 78%),
      linear-gradient(0deg, rgba(6, 8, 14, 0.65), transparent 50%);
  }
  .story-panel-badge { right: 24px; bottom: 24px; width: 72px; height: 72px; font-size: 0.56rem; }
}

/* ---------- CTA band (Home, bottom) ---------- */
.cta-band {
  margin: 64px 0 8px;
  padding: 52px 32px;
  border-radius: var(--radius);
  background:
    radial-gradient(ellipse 700px 400px at 15% 0%, rgba(30, 151, 243, 0.16), transparent 60%),
    linear-gradient(135deg, var(--navy-light) 0%, var(--navy) 100%);
  border: 1px solid var(--border);
  color: #fff;
  text-align: center;
  position: relative;
  overflow: hidden;
}
.cta-band h2 { color: #fff; margin: 0 0 12px; padding-left: 0; }
.cta-band h2::before { display: none; }
.cta-band p { color: #b9c0da; margin: 0 0 26px; max-width: 560px; margin-left: auto; margin-right: auto; }
.cta-band .btn-row { justify-content: center; margin-bottom: 0; }

/* ---------- Page banner photo (Werkstatt, Über uns, Ankauf, Finanzierung) ---------- */
.page-banner {
  border-radius: var(--radius);
  overflow: hidden;
  border: 1px solid var(--border);
  box-shadow: var(--shadow-soft);
  margin: 8px 0 32px;
  aspect-ratio: 16 / 7;
  position: relative;
}
.page-banner img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* Very light grade — just enough contrast/brightness trim to sit comfortably on the
     dark theme, without masking the real photos' actual colors like a heavy filter would. */
  filter: saturate(0.96) brightness(0.97) contrast(1.03);
}
.page-banner::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 72%, rgba(10, 12, 20, 0.28) 100%);
}
@media (max-width: 720px) {
  .page-banner { aspect-ratio: 4 / 3; }
}

/* ---------- Generic content card (Über uns sections etc.) ---------- */
.content-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 26px;
  margin: 20px 0 24px;
}
.content-card > *:last-child { margin-bottom: 0; }

/* ---------- WhatsApp floating button ---------- */
.whatsapp-fab {
  position: fixed;
  right: 22px;
  bottom: 22px;
  z-index: 60;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: #25d366;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: var(--shadow-soft);
  transition: transform var(--transition), box-shadow var(--transition);
}
.whatsapp-fab svg { width: 30px; height: 30px; fill: #fff; }
.whatsapp-fab:hover, .whatsapp-fab:focus-visible {
  transform: translateY(-3px) scale(1.05);
  box-shadow: var(--shadow);
}
@media (max-width: 760px) {
  .whatsapp-fab { right: 16px; bottom: 16px; width: 50px; height: 50px; }
  .whatsapp-fab svg { width: 26px; height: 26px; }
}
@media (prefers-reduced-motion: reduce) {
  .whatsapp-fab:hover, .whatsapp-fab:focus-visible { transform: none; }
}

/* ---------- Footer ---------- */
.site-footer {
  background: var(--navy);
  border-top: 1px solid var(--border);
  color: #9aa0b8;
  padding: 40px 32px 32px;
  text-align: center;
  font-size: 0.9rem;
}
.site-footer a { color: #fff; text-decoration: none; }
.site-footer a:hover { color: var(--accent-soft); }
.footer-nav { display: flex; justify-content: center; flex-wrap: wrap; gap: 4px 20px; margin-bottom: 18px; }
.footer-nav a { color: #a5acc4; font-size: 0.85rem; font-weight: 700; font-stretch: 118%; letter-spacing: 0.3px; }
.footer-nav a:hover, .footer-nav a[aria-current="page"] { color: #fff; }
.site-footer .member-badge { margin-top: 8px; font-size: 0.8rem; }
.site-footer .member-badge a { color: var(--accent); }
.site-footer .copyright { margin-top: 14px; font-size: 0.75rem; color: #656c85; }
.cookie-reopen {
  background: none;
  border: none;
  padding: 0;
  margin: 0;
  color: inherit;
  font: inherit;
  text-decoration: underline;
  cursor: pointer;
}
.cookie-reopen:hover, .cookie-reopen:focus-visible { color: var(--accent-soft); }

/* ---------- Cookie consent banner ---------- */
.cookie-banner {
  position: fixed;
  left: 16px;
  right: 16px;
  bottom: 16px;
  z-index: 200;
  max-width: 560px;
  margin: 0 auto;
  background: var(--surface-solid);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 20px 22px;
  backdrop-filter: blur(14px);
}
.cookie-banner[hidden] { display: none; }
.cookie-banner p {
  margin: 0 0 14px;
  font-size: 0.88rem;
  line-height: 1.5;
  color: var(--text-muted);
}
.cookie-banner p a { color: var(--accent-soft); }
.cookie-banner-actions {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  flex-wrap: wrap;
}
.cookie-btn {
  border-radius: var(--radius-pill);
  padding: 10px 20px;
  font-weight: 700;
  font-size: 0.85rem;
  font-stretch: 118%;
  cursor: pointer;
  transition: transform var(--bounce), box-shadow var(--transition), background var(--transition);
  border: 1px solid transparent;
}
.cookie-btn-accept {
  background: var(--accent);
  color: #fff;
  box-shadow: var(--glow);
}
.cookie-btn-accept:hover, .cookie-btn-accept:focus-visible { transform: translateY(-2px); background: var(--accent-dark); }
.cookie-btn-reject {
  background: transparent;
  color: var(--text);
  border-color: var(--border-strong);
}
.cookie-btn-reject:hover, .cookie-btn-reject:focus-visible { background: rgba(255,255,255,0.06); }
@media (prefers-reduced-motion: reduce) {
  .cookie-btn-accept:hover, .cookie-btn-accept:focus-visible { transform: none; }
}
@media (max-width: 480px) {
  .cookie-banner { padding: 16px 18px; }
  .cookie-banner-actions { justify-content: stretch; }
  .cookie-btn { flex: 1; text-align: center; }
}

/* Social icon buttons — official platform glyphs recolored to the site's own accent blue
   (not each brand's native colors) so they read as part of this site rather than three
   unrelated app logos pasted into the footer. Same accent-gradient treatment as the
   WhatsApp fab / .content-btn, so all "circular action button" elements match. */
.footer-social { display: flex; justify-content: center; gap: 14px; margin: 18px 0 4px; }
.footer-social a {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--accent), var(--accent-dark));
  box-shadow: 0 8px 20px rgba(30, 151, 243, 0.22);
  transition: transform var(--bounce), box-shadow var(--transition), background var(--transition);
}
.footer-social a:hover, .footer-social a:focus-visible {
  transform: translateY(-3px) scale(1.06);
  box-shadow: 0 12px 26px rgba(30, 151, 243, 0.32);
  color: #fff;
}
.footer-social svg { width: 20px; height: 20px; fill: #fff; }

/* ---------- Buttons used inside content pages ---------- */
.content-btn,
.content-btn-outline {
  display: inline-block;
  padding: 12px 27px;
  border-radius: var(--radius-pill);
  text-decoration: none;
  font-weight: 700;
  font-stretch: 118%;
  letter-spacing: -0.005em;
  transition: transform var(--bounce), background var(--transition), color var(--transition), box-shadow var(--transition), border-color var(--transition);
}
.content-btn { background: linear-gradient(135deg, var(--accent), var(--accent-dark)); color: #fff; box-shadow: 0 10px 26px rgba(30, 151, 243, 0.2); }
.content-btn:hover { transform: translateY(-3px) rotate(-1deg) scale(1.03); box-shadow: 0 16px 34px rgba(30, 151, 243, 0.3); }
.content-btn-outline { background: transparent; color: var(--text); border: 1px solid var(--border-strong); }
.content-btn-outline:hover { background: rgba(255,255,255,0.06); color: #fff; border-color: var(--accent); transform: translateY(-3px) rotate(1deg) scale(1.03); }
.btn-row { display: flex; gap: 12px; flex-wrap: wrap; margin: 4px 0 24px; }

/* ---------- Google review cards (Über uns) — handpicked static reviews, styled to sit
   alongside .content-card so the page reads as one consistent family of "boxed" content. ---------- */
.review-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 18px;
  margin: 16px 0 24px;
}
.review-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 22px;
  display: flex;
  flex-direction: column;
}
.review-stars { color: #ffb400; font-size: 1.05rem; letter-spacing: 2px; margin-bottom: 10px; }
.review-quote { color: var(--text-muted); font-size: 0.92rem; line-height: 1.55; margin: 0 0 14px; flex: 1; }
.review-author { margin: auto 0 0; font-weight: 700; font-stretch: 118%; color: #fff; font-size: 0.9rem; }
.review-meta { display: block; margin-top: 2px; font-weight: 400; font-stretch: 100%; color: var(--text-muted); font-size: 0.78rem; }

/* ---------- Embedded map (Über uns) ---------- */
.map-embed {
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--shadow-soft);
  border: 1px solid var(--border);
  margin: 16px 0 20px;
  line-height: 0;
}
.map-embed iframe { display: block; width: 100%; }

.car-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 24px; }
.car-card {
  display: block;
  text-decoration: none;
  color: inherit;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--surface-solid);
  transition: box-shadow var(--transition), transform var(--transition), border-color var(--transition);
}
.car-card:hover { box-shadow: var(--glow); transform: translateY(-3px); border-color: var(--border-strong); }
.car-card-media { position: relative; }
.car-card img { width: 100%; height: 180px; object-fit: cover; }
.car-card h3 { margin: 14px 14px 4px; font-size: 1.1rem; color: #fff; font-weight: 700; font-stretch: 118%; letter-spacing: -0.005em; }
.car-card p { margin: 0 14px 14px; color: var(--text-muted); font-size: 0.9rem; }
.car-card .price { color: var(--accent-soft); font-weight: bold; }

.status-badge {
  position: absolute;
  top: 10px;
  right: 10px;
  padding: 4px 10px;
  border-radius: 4px;
  font-size: 0.75rem;
  font-weight: bold;
  color: #fff;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}
.status-reserved { background: var(--accent-dark); }
.status-sold { background: #555; }

/* ---------- Car detail ---------- */
/* Narrow, focused photo carousel (up to 10 photos per car) — one photo at a time,
   with prev/next arrows so visitors can step back and forth instead of scanning a grid. */
.car-carousel {
  position: relative;
  max-width: 540px;
  margin: 0 auto 28px;
  aspect-ratio: 4 / 3;
  border-radius: var(--radius);
  border: 1px solid var(--border);
  overflow: hidden;
  background: #0d0f14;
  outline: none;
}
.car-carousel-track { display: flex; height: 100%; transition: transform 0.35s ease; }
.car-carousel-track img { flex: 0 0 100%; width: 100%; height: 100%; object-fit: cover; }
.car-carousel-prev,
.car-carousel-next {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 38px;
  height: 38px;
  border-radius: 50%;
  border: none;
  background: rgba(10, 12, 20, 0.55);
  color: #fff;
  font-size: 22px;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background var(--transition);
}
.car-carousel-prev:hover,
.car-carousel-next:hover { background: rgba(10, 12, 20, 0.8); }
.car-carousel-prev { left: 10px; }
.car-carousel-next { right: 10px; }
.car-carousel-counter {
  position: absolute;
  right: 12px;
  bottom: 10px;
  padding: 2px 10px;
  border-radius: var(--radius-pill);
  background: rgba(10, 12, 20, 0.55);
  color: #fff;
  font-size: 12px;
  font-weight: 600;
}
.car-detail .specs { display: grid; grid-template-columns: max-content 1fr; gap: 10px 16px; margin-bottom: 24px; }
.car-detail .specs dt { font-weight: bold; color: var(--text-muted); }
.car-detail .specs dd { margin: 0; color: var(--text); }
.car-detail .cta {
  display: inline-block;
  margin-top: 16px;
  background: linear-gradient(135deg, var(--accent), var(--accent-dark));
  color: #fff;
  padding: 14px 30px;
  border-radius: var(--radius-pill);
  text-decoration: none;
  font-weight: 700;
  box-shadow: 0 10px 26px rgba(30, 151, 243, 0.2);
  transition: transform var(--transition), box-shadow var(--transition);
}
.car-detail .cta:hover { transform: translateY(-2px); box-shadow: 0 16px 34px rgba(30, 151, 243, 0.3); }

.autoscout-section { margin-top: 56px; padding-top: 32px; border-top: 1px solid var(--border); }
.autoscout-section h2 { font-size: 1.3rem; margin-bottom: 8px; padding-left: 0; }
.autoscout-section h2::before { display: none; }
.autoscout-section p { color: var(--text-muted); margin-bottom: 20px; }

/* ---------- Ankauf inquiry form ---------- */
.inquiry-section { margin-top: 56px; padding-top: 40px; border-top: 1px solid var(--border); }
.inquiry-section h2 { font-size: 1.4rem; margin-bottom: 22px; padding-left: 0; }
.inquiry-section h2::before { display: none; }
.inquiry-form { max-width: 640px; }
.inquiry-form label {
  display: block;
  margin-bottom: 16px;
  font-weight: 600;
  font-size: 0.9rem;
  color: var(--text);
}
.inquiry-form .field-hint { font-weight: normal; color: var(--text-muted); font-size: 0.8rem; }
.inquiry-form input,
.inquiry-form textarea {
  display: block;
  width: 100%;
  margin-top: 8px;
  padding: 12px 14px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid var(--border);
  border-radius: 10px;
  color: var(--text);
  font-weight: normal;
  font-size: 1rem;
  font-family: inherit;
  box-sizing: border-box;
  transition: border-color var(--transition), background var(--transition);
}
.inquiry-form input::placeholder,
.inquiry-form textarea::placeholder { color: #6b7290; }
.inquiry-form input:focus,
.inquiry-form textarea:focus { border-color: var(--accent); background: rgba(255, 255, 255, 0.06); outline: none; }
.inquiry-form .form-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 0 16px; }
.inquiry-form button {
  background: linear-gradient(135deg, var(--accent), var(--accent-dark));
  color: #fff;
  border: none;
  padding: 15px 34px;
  border-radius: var(--radius-pill);
  font-weight: 700;
  font-size: 1rem;
  cursor: pointer;
  box-shadow: 0 10px 26px rgba(30, 151, 243, 0.2);
  transition: transform var(--transition), box-shadow var(--transition);
}
.inquiry-form button:hover { transform: translateY(-2px); box-shadow: 0 16px 34px rgba(30, 151, 243, 0.3); }
.inquiry-form button:disabled { opacity: 0.5; cursor: not-allowed; transform: none; box-shadow: none; }

/* Honeypot: visually hidden from sighted users and screen readers, but still part of the DOM
   so bots that auto-fill every field trip it. */
.hp-field {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

.form-msg { min-height: 1.2em; margin-bottom: 12px; font-size: 0.9rem; }
.form-msg-success { color: #6fcf8a; font-weight: bold; }
.form-msg-error { color: #ef8b7c; font-weight: bold; }

/* ---------- Responsive nav (mobile) ---------- */
@media (max-width: 720px) {
  .nav-toggle { display: inline-flex; }
  .site-header nav {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: rgba(8, 10, 16, 0.97);
    backdrop-filter: blur(14px);
    flex-direction: column;
    align-items: flex-start;
    padding: 12px 32px 20px;
    overflow: hidden;
    visibility: hidden;
    opacity: 0;
    transform: translateY(-8px);
    transition: opacity var(--transition), transform var(--transition), visibility 0s linear var(--transition);
    border-bottom: 1px solid var(--border);
    will-change: transform, opacity;
  }
  .site-header nav.nav-open {
    visibility: visible;
    opacity: 1;
    transform: translateY(0);
    transition: opacity var(--transition), transform var(--transition);
  }
  .site-header nav a { margin: 0; padding: 10px 0; width: 100%; }

  .hero { margin-bottom: 40px; padding: 64px 16px 56px; }

  main { padding: 8px 16px 32px; }
  main h2 { margin: 44px 0 16px; }
  .cta-band { padding: 36px 22px; margin: 48px 0 8px; }
}

/* ---------- Scroll-reveal micro-animations ---------- */
[data-reveal] {
  opacity: 0;
  transform: translateY(22px);
  transition: opacity 0.6s cubic-bezier(0.4, 0, 0.2, 1), transform 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}
[data-reveal].reveal-visible {
  opacity: 1;
  transform: translateY(0);
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  [data-reveal] {
    opacity: 1;
    transform: none;
    transition: none;
  }
  .btn:hover,
  .content-btn:hover,
  .content-btn-outline:hover,
  .feature-item:hover,
  .feature-item:hover .feature-index,
  .car-card:hover,
  .car-detail .cta:hover,
  .story-panel:hover .story-panel-badge,
  .process-step:hover::before,
  .hero-progress button:hover,
  .inquiry-form button:hover {
    transform: none;
  }
  body::before,
  .hero::before,
  .hero-bg-img,
  .hero-copy,
  .hero-progress button::after {
    animation: none;
    transition: none;
  }
  .hero-progress { display: none; }
}