/* ===========================================================
   Autohaus M&A — Munda.at redesign
   =========================================================== */

@import url("https://fonts.googleapis.com/css2?family=Instrument+Serif:ital@0;1&family=Geist:wght@300;400;500;600;700;800&family=Geist+Mono:wght@400;500&display=swap");

/* ---------- Theme tokens ---------- */
:root, body[data-theme="onyx"] {
  --bg: #0c0a08;
  --bg-2: #100d0a;
  --surface: #16120e;
  --surface-2: #1f1a14;
  --line: #2a221b;
  --line-soft: #1d1812;
  --text: #f4ece0;
  --text-dim: #8a7c6b;
  --text-mute: #6a604f;
  --accent: #c9a35b;
  --accent-2: #8b6a30;
  --accent-soft: rgba(201, 163, 91, 0.12);
  --danger: #d97757;
  --success: #6ea886;
  --shadow-card: 0 30px 60px -30px rgba(0,0,0,0.6), 0 0 0 1px rgba(255,255,255,0.04);
  --gradient-hero: linear-gradient(180deg, rgba(12,10,8,0) 0%, rgba(12,10,8,0.4) 50%, rgba(12,10,8,0.95) 100%);
  color-scheme: dark;
}

body[data-theme="cream"] {
  --bg: #f3f0eb;
  --bg-2: #eae6df;
  --surface: #ffffff;
  --surface-2: #e4e0d8;
  --line: #d4cdbe;
  --line-soft: #e2dccf;
  --text: #18140f;
  --text-dim: #3d352b;
  --text-mute: #8e8676;
  --accent: #2563eb;
  --accent-2: #1d4ed8;
  --accent-soft: rgba(37, 99, 235, 0.10);
  --shadow-card: 0 30px 60px -30px rgba(60,40,15,0.18), 0 0 0 1px rgba(0,0,0,0.04);
  --gradient-hero: linear-gradient(180deg, rgba(243,240,235,0) 0%, rgba(243,240,235,0.4) 50%, rgba(243,240,235,0.95) 100%);
  color-scheme: light;
}

body[data-theme="munda"] {
  --bg: #0e0907;
  --bg-2: #140b09;
  --surface: #1a100d;
  --surface-2: #251512;
  --line: #2e1c18;
  --line-soft: #21130f;
  --text: #f6ece4;
  --text-dim: #95817a;
  --text-mute: #7a6359;
  --accent: #c0392b;
  --accent-2: #862218;
  --accent-soft: rgba(192, 57, 43, 0.14);
  --shadow-card: 0 30px 60px -30px rgba(0,0,0,0.7), 0 0 0 1px rgba(255,255,255,0.04);
  --gradient-hero: linear-gradient(180deg, rgba(14,9,7,0) 0%, rgba(14,9,7,0.4) 50%, rgba(14,9,7,0.95) 100%);
  color-scheme: dark;
}

/* ---------- Base ---------- */
* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  background: var(--bg);
  color: var(--text);
  font-family: "Geist", system-ui, -apple-system, sans-serif;
  font-size: 16px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  font-feature-settings: "ss01", "cv11";
  overflow-x: clip;
}
html {
  overflow-x: clip;
  /* Anchor scrolling lands below the sticky header (topbar + nav stack)
     with enough headroom for the section's heading. */
  scroll-padding-top: 200px;
}
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
button { font: inherit; cursor: pointer; border: none; background: none; color: inherit; }
input, select, textarea { font: inherit; color: inherit; }

::selection { background: var(--accent); color: var(--bg); }

.serif {
  font-family: system-ui, -apple-system, "Segoe UI", sans-serif;
  font-weight: 400;
  letter-spacing: -0.01em;
}
.serif-i { font-family: system-ui, -apple-system, "Segoe UI", sans-serif; font-style: italic; font-weight: 400; }
.mono { font-family: "Geist Mono", ui-monospace, monospace; }

/* ---------- Layout primitives ---------- */
.wrap {
  width: 100%;
  max-width: 1360px;
  margin: 0 auto;
  padding: 0 32px;
}
.wrap-tight { max-width: 1120px; margin: 0 auto; padding: 0 32px; }

.eyebrow {
  font-family: "Geist Mono", monospace;
  font-size: 18px;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--accent);
  display: inline-flex;
  align-items: center;
  gap: 10px;
}
.eyebrow::before {
  content: "";
  width: 24px; height: 1px;
  background: var(--accent);
  display: inline-block;
}

h1, h2, h3, h4 { margin: 0; font-weight: 600; letter-spacing: -0.02em; }
h1 { font-size: clamp(48px, 7vw, 112px); line-height: 0.95; }
h2 { font-size: clamp(36px, 4.5vw, 64px); line-height: 1.02; }
h3 { font-size: clamp(22px, 2vw, 28px); line-height: 1.15; }
p { margin: 0 0 1em 0; }

.display-serif {
  font-family: system-ui, -apple-system, "Segoe UI", sans-serif;
  font-weight: 400;
  font-style: italic;
  letter-spacing: -0.02em;
}

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 14px 22px;
  border-radius: 999px;
  font-weight: 500;
  font-size: 14px;
  letter-spacing: 0.01em;
  transition: all 0.2s ease;
  white-space: nowrap;
}
.btn-primary {
  background: var(--accent);
  color: var(--bg);
}
.btn-primary:hover { background: var(--text); }
.btn-ghost {
  background: transparent;
  color: var(--accent);
  border: 1px solid var(--accent);
}
.btn-ghost:hover { background: var(--accent); color: var(--bg); }
.btn-solid {
  background: var(--surface-2);
  color: var(--text);
  border: 1px solid var(--line);
}
.btn-solid:hover { border-color: var(--accent); }
.btn-lg { padding: 18px 28px; font-size: 15px; }
.btn .arr {
  display: inline-block; transition: transform 0.2s ease;
}
.btn:hover .arr { transform: translateX(3px); }

/* ---------- Header ---------- */
/* Editorial toolbar — white bar with serif M&A wordmark, centred nav,
   gold-tick active state, navy-on-white. Sticky for the full page. */
[data-slot="header"] {
  position: sticky;
  top: 0;
  z-index: 50;
}
.topbar {
  background: var(--accent);
  color: #fff;
  font-size: 14px;
  letter-spacing: 0.01em;
  border-bottom: 1px solid rgba(255,255,255,0.18);
}
.topbar .wrap {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  padding-top: 11px; padding-bottom: 11px;
  gap: 24px;
}
.topbar-left { display: flex; align-items: center; gap: 18px; justify-self: start; }
.topbar-center { display: flex; align-items: center; justify-self: center; }
.topbar-right { display: flex; align-items: center; gap: 18px; justify-self: end; }
.topbar a { color: #fff; transition: opacity 0.15s; }
.topbar a:hover { opacity: 0.8; }
.topbar .sep { width: 1px; height: 14px; background: rgba(255,255,255,0.12); }
.topbar-item {
  display: inline-flex; align-items: center; gap: 8px;
  white-space: nowrap;
}
.topbar-ico { width: 14px; height: 14px; color: #fff; flex-shrink: 0; }
.topbar-item-mono span {
  font-family: "Geist Mono", monospace;
  letter-spacing: 0.04em;
}
@keyframes dot-pulse-open {
  0%   { box-shadow: 0 0 0 0   rgba(110,168,134,0.55); }
  70%  { box-shadow: 0 0 0 14px rgba(110,168,134,0);    }
  100% { box-shadow: 0 0 0 0   rgba(110,168,134,0);    }
}
@keyframes dot-pulse-closed {
  0%, 100% { opacity: 1;   box-shadow: 0 0 0 5px rgba(255,0,0,0.18); }
  50%      { opacity: 0.55; box-shadow: 0 0 0 5px rgba(255,0,0,0.05); }
}

/* Editorial design tokens. Scoped to the toolbar so the rest of the site
   keeps its existing palette. */
:root {
  --ma-navy:    #0B1E3F;
  --ma-navy-2:  #0E254E;
  --ma-gold:    #C9A961;
  --ma-muted:   #5b6675;
  --ma-success: #16a34a;
}
.nav {
  background: #fff;
  border-bottom: 1px solid rgba(11, 30, 63, 0.10);
  box-shadow: none;
  color: var(--ma-navy);
}
body[data-theme="cream"] .nav,
body[data-theme="munda"] .nav {
  background: #fff;
  border-bottom-color: rgba(11, 30, 63, 0.10);
  box-shadow: none;
}
.nav .wrap {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  height: 104px;
  padding: 0 48px;
  gap: 0;
}
.brand {
  display: flex; align-items: center;
  justify-self: start;
  text-decoration: none;
}
.brand-stack {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  line-height: 1;
}
.brand-mark-text {
  font-family: "Instrument Serif", "Cormorant Garamond", "Times New Roman", serif;
  font-weight: 400;
  font-size: 46px;
  line-height: 0.95;
  letter-spacing: -0.01em;
  color: var(--ma-navy);
  white-space: nowrap;
}
.brand-mark-text .amp { font-style: italic; padding: 0 0.04em; }
.brand-rule {
  height: 1px;
  width: 100%;
  background: var(--ma-navy);
  opacity: 0.85;
}
.brand-sub {
  font-weight: 500;
  font-size: 11px;
  letter-spacing: 0.42em;
  text-transform: uppercase;
  color: var(--ma-navy);
  text-indent: 0.42em;
}
.brand-mark {
  width: 66px; height: 66px;
  border-radius: 10px;
  background: var(--accent);
  color: var(--bg);
  display: grid; place-items: center;
  font-family: system-ui, -apple-system, "Segoe UI", sans-serif;
  font-size: 24px;
  font-style: italic;
  font-weight: 400;
  letter-spacing: -0.04em;
}
/* When the brand mark is an image (the M&A logo), drop the badge styling
   so the image renders cleanly at the same height. */
img.brand-mark {
  width: auto;
  height: 68px;
  border-radius: 0;
  background: none;
  object-fit: contain;
  display: block;
}
/* Force both brand lines to render at identical width: the container
   sizes to the wider line (max-content), and text-align-last: justify
   stretches the inter-word gaps of the shorter line until it fills the
   same width. No fragile per-character letter-spacing tuning needed. */
.brand-text {
  display: flex;
  flex-direction: column;
  line-height: 1.1;
  width: max-content;
}
.brand-text .b1, .brand-text .b2 {
  display: block;
  text-align: justify;
  text-align-last: justify;
}
.brand-text .b1 {
  font-weight: 600;
  font-size: 22px;
  letter-spacing: -0.01em;
}
.brand-text .b2 {
  font-family: "Geist Mono", monospace;
  font-size: 12px;
  letter-spacing: 0.05em;
  color: var(--accent);
  text-transform: uppercase;
}
.nav-links {
  display: flex; align-items: center; gap: 40px;
  justify-self: center;
}
.nav-links a {
  position: relative;
  padding: 6px 0;
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--ma-navy);
  text-decoration: none;
  transition: opacity 0.18s cubic-bezier(0.25, 0.1, 0.25, 1);
}
.nav-links a::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: -2px;
  height: 1.5px;
  background: var(--accent);
  transform: scaleX(0);
  transform-origin: center;
  transition: transform 0.25s cubic-bezier(0.25, 0.1, 0.25, 1);
}
.nav-links a:hover { opacity: 1; }
.nav-links a:hover::after,
.nav-links a.active::after,
.nav-links a.is-active::after {
  transform: scaleX(1);
}
.nav-cta {
  display: flex; align-items: center; gap: 28px;
  justify-self: end;
  border-left: none;
  padding-left: 0;
  margin-left: 0;
}
.nav-contact {
  text-align: right;
  display: flex; flex-direction: column;
  gap: 4px; line-height: 1;
}
.nav-address {
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--ma-navy);
  text-decoration: none;
  display: inline-flex; align-items: center; gap: 6px;
  margin-top: 5px;
  transform: translateX(18px);
  transition: opacity 0.18s ease;
}
.nav-address-text {
  display: flex; flex-direction: column; align-items: flex-end;
  gap: 2px; line-height: 1.1;
}
.nav-address:hover { opacity: 0.7; }
.nav-address-arrow {
  font-size: 10px;
  transition: transform 0.18s ease;
}
.nav-address:hover .nav-address-arrow { transform: translate(1px, -1px); }
.nav-status {
  display: inline-flex; align-items: center; gap: 8px;
  justify-content: flex-end;
  font-size: 11px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--ma-navy);
  margin-top: 5px;
}
.nav-status .open-label { color: var(--ma-navy); font-weight: 500; }
.nav-status .dot {
  width: 6px; height: 6px; border-radius: 999px;
  background: var(--ma-success); display: inline-block;
  box-shadow: none;
  animation: dot-pulse-open 2s ease-out infinite;
}
.nav-status .dot.closed {
  background: #d83232;
  box-shadow: none;
  animation: dot-pulse-closed 3s ease-in-out infinite;
}
.nav-phone {
  font-size: 17px;
  font-weight: 500;
  color: var(--ma-navy);
  text-decoration: none;
  letter-spacing: 0.01em;
  font-variant-numeric: tabular-nums;
  transition: color 0.2s ease;
  margin-top: 2px;
}
.nav-phone:hover { color: var(--ma-navy-2); }

/* ---------- Mobile menu ---------- */
/* Hamburger button: hidden on desktop, replaces the inline nav on mobile. */
.nav-toggle {
  display: none;
  align-items: center; justify-content: center;
  width: 40px; height: 40px;
  background: none;
  border: 1px solid rgba(11, 30, 63, 0.18);
  border-radius: 4px;
  cursor: pointer;
  padding: 0; gap: 5px;
  flex-direction: column;
}
.nav-toggle-bar {
  width: 18px; height: 1.5px;
  background: var(--ma-navy);
  border-radius: 0;
  transition: transform 0.18s ease, opacity 0.18s ease;
}
body.menu-open .nav-toggle-bar:nth-child(1) { transform: translateY(7px) rotate(45deg); }
body.menu-open .nav-toggle-bar:nth-child(2) { opacity: 0; }
body.menu-open .nav-toggle-bar:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* Fullscreen overlay menu — option B. Sits above everything when open,
   completely hidden otherwise. Anchored to the viewport via fixed so the
   visitor can't scroll the page underneath it. */
.mobile-menu {
  position: fixed; inset: 0;
  background: var(--bg);
  z-index: 100;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  gap: 40px;
  padding: 32px;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-8px);
  transition: opacity 0.2s ease, transform 0.2s ease, visibility 0.2s;
}
body.menu-open .mobile-menu {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}
body.menu-open { overflow: hidden; }
.mobile-menu-close {
  position: absolute; top: 18px; right: 18px;
  width: 44px; height: 44px;
  background: none; border: none;
  color: var(--text);
  cursor: pointer;
  display: grid; place-items: center;
}
.mobile-menu-nav {
  display: flex; flex-direction: column;
  align-items: center;
  gap: 22px;
}
.mobile-menu-nav a {
  font-size: 28px;
  font-weight: 500;
  letter-spacing: -0.02em;
  color: var(--text);
  position: relative;
}
.mobile-menu-nav a.active { color: var(--accent); }
.mobile-menu-nav a.active::after {
  content: ""; position: absolute;
  left: 0; right: 0; bottom: -6px;
  height: 2px; background: var(--accent);
}
.mobile-menu-cta {
  display: flex; flex-direction: column;
  gap: 10px;
  width: 100%; max-width: 320px;
}
.mobile-menu-cta .btn { justify-content: center; }
.mobile-menu-foot {
  display: flex; flex-direction: column;
  align-items: center;
  gap: 4px;
  color: var(--text-dim);
  font-size: 13px;
  font-family: "Geist Mono", monospace;
  letter-spacing: 0.04em;
}
.mobile-menu-foot a { color: var(--text-dim); }

/* ---------- Appointment CTA (home page) ---------- */
.appointment-cta-grid {
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  gap: 64px;
  align-items: center;
}
.appointment-cta-h2 {
  font-family: system-ui, -apple-system, "Segoe UI", sans-serif;
  font-weight: 400;
  font-size: clamp(40px, 5vw, 72px);
  line-height: 0.98;
  letter-spacing: -0.025em;
  margin-top: 18px;
}
@media (max-width: 900px) {
  .appointment-cta-grid { grid-template-columns: 1fr; gap: 32px; }
  .appointment-cta-h2 { font-size: clamp(28px, 8vw, 40px); }
}

/* ---------- Hero ---------- */
.hero {
  position: relative;
  height: calc(100vh - 80px - 41px);
  min-height: 640px;
  max-height: 900px;
  overflow: hidden;
  isolation: isolate;
}
.hero-img {
  position: absolute; inset: 0;
  background-size: cover;
  background-position: center;
  transform: scale(1.05);
  animation: heroZoom 18s ease-out forwards;
  /* Filter removed — the source JPG was pre-brightened by hand. Adding a
     CSS brightness boost on top would blow out the highlights (white
     building, sky). Leaving filter off so the image renders at its
     native exposure. */
}
/* 0% dark overlay over the hero image — overlay disabled. */
.hero-img::after {
  content: "";
  position: absolute; inset: 0;
  background: rgba(0, 0, 0, 0);
}
@keyframes heroZoom {
  to { transform: scale(1); }
}
.hero::after {
  /* Overlay disabled — image renders at its true brightness with nothing
     on top of it. White H1 / tagline rely on the photo's own contrast. */
  content: none;
}
.hero-content {
  position: relative;
  z-index: 2;
  height: 100%;
  display: flex; flex-direction: column;
  justify-content: flex-start;
  align-items: flex-end;
  text-align: right;
  /* Override .wrap's max-width so the text column anchors to the viewport
     edge instead of the centered 1360px container. Right gutter scales
     with viewport — original was max(3cm, 6vw); now reduced by 2cm
     so H1 / tagline / CTA all sit closer to the right edge. The whole
     block is also lifted 3cm via translateY (visual-only, doesn't affect
     layout below the hero). */
  max-width: none;
  padding-top: clamp(48px, 6vh, 96px);
  padding-right: calc(max(3cm, 6vw) - 2cm);
  padding-bottom: 0;
  transform: translateY(-3cm);
}
.hero h1 {
  font-family: system-ui, -apple-system, "Segoe UI", sans-serif;
  font-weight: 400;
  /* Fixed 90px so the headline stays the same physical size at every
     viewport — block doesn't visibly resize as the window changes.
     The mobile breakpoint below (max-width: 900px) reintroduces a
     responsive clamp for small screens. */
  font-size: 90px;
  letter-spacing: -0.04em;
  line-height: 1;
  color: #fff;
}
.hero h1 .it { font-style: italic; color: #fff; }
.hero-meta {
  display: flex; flex-direction: column; align-items: flex-end;
  gap: 20px; margin-top: 28px;
}
.hero-tagline {
  max-width: 520px;
  font-size: 16px;
  color: #fff;
  line-height: 1.55;
  text-shadow: 0 1px 4px rgba(0,0,0,0.55);
  /* 30% dark backdrop behind the tagline so the white copy stays legible
     even against bright parts of the hero photo. */
  background: rgba(0, 0, 0, 0.3);
  padding: 14px 18px;
  border-radius: 4px;
}
.hero-cta { display: flex; gap: 12px; flex-wrap: wrap; justify-content: flex-end; }

/* ---------- Search bar ---------- */
.searchbar {
  margin-top: 2px;
  position: relative;
  z-index: 10;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: 8px;
  display: grid;
  grid-template-columns: 1.2fr 1fr 1fr 1fr auto;
  gap: 4px;
  box-shadow: var(--shadow-card);
}
.searchbar .field {
  padding: 16px 18px;
  display: flex; flex-direction: column; gap: 4px;
  border-radius: 12px;
  cursor: pointer;
  transition: background 0.15s;
}
.searchbar .field:hover { background: var(--surface-2); }
.searchbar .field + .field { border-left: 1px solid var(--line-soft); }
.searchbar .field:hover + .field { border-left-color: transparent; }
.field-label {
  font-family: "Geist Mono", monospace;
  font-size: 10px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--text-mute);
}
.field-value {
  font-size: 15px; font-weight: 500; color: var(--text);
}
.field-value.dim { color: var(--text-dim); font-weight: 400; }
.searchbar select, .searchbar input {
  background: transparent; border: none; outline: none;
  padding: 0; margin: 0;
  font-size: 15px; font-weight: 500;
  width: 100%;
  appearance: none;
  cursor: pointer;
}
.searchbar select option { background: var(--surface); color: var(--text); }
.searchbar-submit {
  padding: 0 28px;
  border-radius: 12px;
  background: var(--accent);
  color: var(--bg);
  font-weight: 500;
  display: flex; align-items: center; gap: 8px;
  transition: background 0.15s;
}
.searchbar-submit:hover { background: var(--text); }

/* ---------- Section general ---------- */
section { padding: 120px 0; }
section.compact { padding: 80px 0; }
section.tight { padding: 60px 0; }
.section-head {
  display: grid;
  grid-template-columns: 1fr 1.4fr;
  gap: 80px;
  align-items: end;
  margin-bottom: 64px;
}
.section-head h2 {
  font-family: system-ui, -apple-system, "Segoe UI", sans-serif;
  font-weight: 400;
  font-size: clamp(40px, 5.5vw, 80px);
  line-height: 0.96;
  letter-spacing: -0.03em;
}
.section-head h2 .it { font-style: italic; color: var(--accent); }
.section-head .lede { color: var(--text-dim); font-size: 17px; max-width: 480px; }
@media (max-width: 900px) {
  .section-head { grid-template-columns: 1fr; gap: 24px; }
}

/* ---------- Cars Grid ---------- */
.cars-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 40px 32px;
}
@media (max-width: 1100px) { .cars-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px)  { .cars-grid { grid-template-columns: 1fr; } }

/* ---------- Cars Carousel (homepage Empfehlungen) ---------- */
/* All own-inventory cars in one flat flex row; viewport clips to N visible
   at a time (3 desktop / 2 tablet / 1 mobile). Pagination always advances
   by exactly one viewport so the visible page matches the grid breakpoint. */
.cars-carousel { position: relative; }
.cars-carousel .cars-viewport { overflow: hidden; }
.cars-carousel .cars-track {
  display: flex;
  gap: 32px;
  transition: transform 0.45s cubic-bezier(0.4, 0.0, 0.2, 1);
  will-change: transform;
}
.cars-carousel .cars-track > .car-card {
  flex: 0 0 calc((100% - 64px) / 3);
  min-width: 0;
}
@media (max-width: 1100px) {
  .cars-carousel .cars-track > .car-card { flex: 0 0 calc((100% - 32px) / 2); }
}
@media (max-width: 640px) {
  .cars-carousel .cars-track > .car-card { flex: 0 0 100%; }
}

.carousel-controls {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 20px;
  margin-top: 40px;
}
.carousel-arrow {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 999px;
  border: 1px solid var(--line-soft);
  background: transparent;
  color: var(--text-dim);
  cursor: pointer;
  transition: border-color 0.15s, color 0.15s, background 0.15s;
  font-size: 18px;
  line-height: 1;
  padding: 0;
}
.carousel-arrow:hover:not(:disabled) {
  border-color: var(--accent);
  color: var(--accent);
}
.carousel-arrow:disabled {
  opacity: 0.3;
  cursor: not-allowed;
}
.carousel-counter {
  font-family: "Geist Mono", monospace;
  font-size: 17px;
  font-weight: 500;
  letter-spacing: 0.06em;
  color: var(--text-dim);
  min-width: 80px;
  text-align: center;
}

/* ---------- Garantie / Gewährleistung badge ---------- */
/* Three honest states driven by car.warrantyStatus from autoblicker-sync.js:
   - .garantie-badge-active   → Händler-Garantie über CarGarantie (green)
   - .garantie-badge-neutral  → gesetzliche Gewährleistung only (gray)
   - .garantie-badge-warning  → Verkauf ohne Gewährleistung (amber) */
.garantie-badge {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  padding: 14px 16px;
  border-radius: 10px;
  margin: 24px 0 0;
  border: 1px solid var(--line-soft);
  background: var(--surface);
}
.garantie-badge-icon {
  flex-shrink: 0;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
}
.garantie-badge-active   .garantie-badge-icon { background: #e1f5ee; color: #0f6e56; }
.garantie-badge-neutral  .garantie-badge-icon { background: #f1efe8; color: #5f5e5a; }
.garantie-badge-warning  .garantie-badge-icon { background: #fbe7c9; color: #7b4b00; }
.garantie-badge-info     .garantie-badge-icon { background: var(--accent-soft); color: var(--accent); }
.garantie-badge-content { flex: 1; min-width: 0; }
.garantie-badge-title { font-weight: 500; font-size: 15px; margin: 0 0 4px; }
.garantie-badge-text {
  font-size: 13px;
  line-height: 1.55;
  color: var(--text-dim);
  margin: 0;
}
.garantie-badge-text a { color: var(--accent); text-decoration: none; white-space: nowrap; }
.garantie-badge-text a:hover { text-decoration: underline; }

/* Compact pill — small chip for car cards / inventory list (not used yet). */
.garantie-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 500;
  line-height: 1.4;
  white-space: nowrap;
}
.garantie-pill svg { width: 13px; height: 13px; }
.garantie-pill-active   { background: #e1f5ee; color: #0f6e56; }
.garantie-pill-neutral  { background: #f1efe8; color: #5f5e5a; }
.garantie-pill-warning  { background: #fbe7c9; color: #7b4b00; }
/* "Garantie auf Anfrage" — light orange so it reads as "talk to us,
   different from the green guaranteed cars" without being amber-
   warning loud. Distinct from .garantie-pill-warning which uses a
   darker amber + darker text for explicit no-Gewährleistung cars. */
.garantie-pill-info     { background: #ffe9d1; color: #a55a00; }

/* Whenever a card's pill is JS-moved into .photo (homepage Empfehlungen
   + inventory grid), pin it at the bottom edge horizontally centred.
   Out of the way of the car body, still scannable while browsing.
   Drop shadow keeps it readable against any photo background. */
.car-card .photo .garantie-pill {
  position: absolute;
  left: 50%;
  bottom: 14px;
  transform: translateX(-50%);
  z-index: 2;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.25);
}

/* ---------- Merkliste (wishlist) ---------- */
/* Heart toggle pinned bottom-right of every car card's photo. White-disc
   background keeps the icon readable against any image; bottom-right
   avoids collision with the centred garantie-pill and the bottom-left
   price-overlay. Outlined heart when not saved, fills red (#e11d48)
   when saved. Lives inside the wrapping <a class="car-card">; the
   delegated click handler in site.js calls preventDefault/stopPropagation
   so toggling never navigates. */
.wishlist-card-toggle {
  position: absolute;
  bottom: 12px;
  right: 12px;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.92);
  border: none;
  color: #6a604f;
  cursor: pointer;
  display: grid;
  place-items: center;
  z-index: 3;
  transition: background 0.15s, color 0.15s, transform 0.15s;
  padding: 0;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.18);
}
.wishlist-card-toggle svg { width: 20px; height: 20px; }
.wishlist-card-toggle:hover {
  background: #fff;
  color: #e11d48;
  transform: scale(1.08);
}
/* Preview the save action: while hovering the heart fills red against
   the white disc, so users see what clicking is about to do. */
.wishlist-card-toggle:hover svg { fill: currentColor; }
.wishlist-card-toggle.saved { color: #e11d48; }
.wishlist-card-toggle.saved svg { fill: currentColor; }

/* Compare toggle pinned bottom-left of the photo (heart is bottom-right —
   same row, opposite side, with the centred garantie-pill between them).
   Same white-disc treatment for legibility against any image; selected
   state turns accent-blue. */
.compare-card-toggle {
  position: absolute;
  bottom: 12px;
  left: 12px;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.92);
  border: none;
  color: #6a604f;
  cursor: pointer;
  display: grid;
  place-items: center;
  z-index: 3;
  transition: background 0.15s, color 0.15s, transform 0.15s;
  padding: 0;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.18);
}
.compare-card-toggle svg { width: 17px; height: 17px; }
.compare-card-toggle:hover {
  background: #fff;
  color: var(--accent);
  transform: scale(1.06);
}
.compare-card-toggle.selected { color: #fff; background: var(--accent); }
.recent-row > .car-card .compare-card-toggle { width: 28px; height: 28px; bottom: 8px; left: 8px; top: auto; right: auto; }
.recent-row > .car-card .compare-card-toggle svg { width: 14px; height: 14px; }

/* ---------- Compare page grid (/vergleich.html) ---------- */
/* CSS grid table: first column is the row-label, then N (2-3) car columns
   driven by the --cols custom property set inline from JS. Header cells
   (top row) carry the photo + title + remove button; remaining rows are
   spec values, highlighted in accent when not all cars share the same
   value for that row. */
.compare-grid {
  display: grid;
  grid-template-columns: 160px repeat(var(--cols, 2), 1fr);
  border-top: 1px solid var(--line-soft);
  margin-top: 32px;
}
.compare-rowlabel,
.compare-cell {
  padding: 14px 18px;
  border-bottom: 1px solid var(--line-soft);
  font-size: 15px;
  display: flex;
  align-items: center;
}
.compare-rowlabel {
  font-family: "Geist Mono", monospace;
  font-size: 11.5px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-mute);
  background: var(--bg-2);
}
.compare-cell { font-variant-numeric: tabular-nums; color: var(--text); }
.compare-cell-diff {
  color: var(--accent);
  font-weight: 600;
  background: rgba(37, 99, 235, 0.12);
  box-shadow: inset 3px 0 0 var(--accent);
}
/* Section header row — full-width band that visually breaks the long
   spec list into groups (Übersicht / Motor & Leistung / Verbrauch …). */
.compare-section {
  padding: 22px 18px 8px;
  font-family: system-ui, -apple-system, "Segoe UI", sans-serif;
  font-weight: 500;
  font-size: 13px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--text-dim);
  border-bottom: 1px solid var(--line-soft);
  background: transparent;
}
/* Header row (photo + title + remove) */
.compare-rowlabel-header { background: transparent; border-bottom: 1px solid var(--line); }
.compare-cell-header {
  flex-direction: column;
  align-items: stretch;
  gap: 10px;
  padding: 18px 18px 22px;
  border-bottom: 1px solid var(--line);
  position: relative;
}
.compare-cell-photo {
  display: block;
  aspect-ratio: 4/3;
  border-radius: 10px;
  overflow: hidden;
  background: var(--bg-2);
  text-decoration: none;
}
.compare-cell-photo img { width: 100%; height: 100%; object-fit: cover; }
.compare-cell-title { text-decoration: none; color: inherit; }
.compare-cell-title .brand-mini {
  font-family: "Geist Mono", monospace;
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--text-mute);
  margin-bottom: 4px;
}
.compare-cell-title h3 {
  font-family: system-ui, -apple-system, "Segoe UI", sans-serif;
  font-weight: 400;
  font-size: 22px;
  line-height: 1.1;
  letter-spacing: -0.01em;
}
.compare-cell-remove {
  position: absolute;
  top: 8px;
  right: 8px;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.85);
  border: 1px solid var(--line);
  color: var(--text-mute);
  cursor: pointer;
  font-size: 18px;
  line-height: 1;
  display: grid;
  place-items: center;
}
.compare-cell-remove:hover { color: #e11d48; border-color: #e11d48; }

@media (max-width: 800px) {
  .compare-grid { grid-template-columns: 110px repeat(var(--cols, 2), 1fr); }
  .compare-rowlabel, .compare-cell { padding: 10px 12px; font-size: 13.5px; }
  .compare-rowlabel { font-size: 10px; letter-spacing: 0.10em; }
  .compare-cell-title h3 { font-size: 17px; }
  .compare-cell-header { padding: 12px 12px 16px; }
}

/* ---------- Floating Compare bar ---------- */
/* Fixed at the bottom of the viewport when ≥2 cars are in the compare
   list. Translates off-screen when the count drops below 2. */
.compare-bar {
  position: fixed;
  left: 50%;
  bottom: 24px;
  transform: translate(-50%, 80px);
  z-index: 50;
  display: flex;
  align-items: center;
  gap: 18px;
  padding: 12px 16px 12px 20px;
  background: var(--accent);
  color: #fff;
  border-radius: 999px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.22);
  font-family: "Geist", system-ui, sans-serif;
  font-size: 14.5px;
  font-weight: 500;
  opacity: 0;
  pointer-events: none;
  transition: transform 0.25s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.2s;
  max-width: calc(100vw - 32px);
}
.compare-bar.is-visible { transform: translate(-50%, 0); opacity: 1; pointer-events: auto; }
.compare-bar-count {
  font-family: "Geist Mono", monospace;
  font-size: 13px;
  letter-spacing: 0.06em;
  opacity: 0.85;
}
.compare-bar-go {
  display: inline-flex; align-items: center; gap: 6px;
  color: #fff; text-decoration: none;
  padding: 8px 16px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.18);
  transition: background 0.15s;
}
.compare-bar-go:hover { background: rgba(255, 255, 255, 0.28); }
.compare-bar-clear {
  background: transparent; border: none;
  color: rgba(255, 255, 255, 0.7);
  cursor: pointer; padding: 4px 8px;
  font-size: 18px; line-height: 1;
}
.compare-bar-clear:hover { color: #fff; }
@media (max-width: 600px) {
  .compare-bar { font-size: 13px; gap: 12px; padding: 10px 12px 10px 16px; }
  .compare-bar-go { padding: 7px 12px; }
}

/* Topbar Merkliste count badge — small accent pill after "Merkliste". */
.nav-count {
  display: inline-block;
  min-width: 18px;
  padding: 1px 7px;
  border-radius: 999px;
  background: var(--accent);
  color: var(--bg);
  font-size: 11px;
  font-family: "Geist Mono", monospace;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-align: center;
  margin-left: 6px;
  vertical-align: 1px;
  line-height: 1.45;
}
.mobile-menu-nav .nav-count { vertical-align: 2px; }

/* ---------- Zuletzt angesehen — compact horizontal carousel ---------- */
/* Reuses MUNDA.carCard but compacts each card heavily (no meta row, no
   garantie pill, smaller photo + text). Native CSS scroll-snap so users
   swipe horizontally on touch and scroll on desktop — no JS needed.
   Cards have fixed width so they're visibly partial-cut at the edge,
   signalling "there's more, scroll" the way Netflix rows do. */
.recent-row {
  display: flex;
  gap: 16px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: thin;
  padding-bottom: 8px;
  /* Bleed a little into the wrap padding so the first card snaps cleanly. */
  margin: 0 -4px;
  padding-left: 4px;
  padding-right: 4px;
  -webkit-overflow-scrolling: touch;
}
.recent-row::-webkit-scrollbar { height: 6px; }
.recent-row::-webkit-scrollbar-thumb { background: var(--line); border-radius: 3px; }
.recent-row > .car-card {
  flex: 0 0 220px;
  scroll-snap-align: start;
}
.recent-row > .car-card:hover { transform: none; } /* lift effect feels wrong in a scroll row */
/* Photo keeps the default 4/3 aspect-ratio from .car-card .photo so cars
   aren't cropped — the previous 5/3 override clipped the top/bottom edges. */
.recent-row > .car-card .photo .garantie-pill,
.recent-row > .car-card .price-overlay { display: none; }
.recent-row > .car-card .wishlist-card-toggle { width: 30px; height: 30px; bottom: 8px; right: 8px; }
.recent-row > .car-card .wishlist-card-toggle svg { width: 15px; height: 15px; }
.recent-row > .car-card .head {
  padding: 10px 12px 12px;
  gap: 4px;
  min-height: 0;
}
.recent-row > .car-card .title-block .brand-mini { font-size: 10px; margin-bottom: 2px; }
.recent-row > .car-card .title-block h3 { font-size: 16px; line-height: 1.15; }
.recent-row > .car-card .price { font-size: 15px; }
.recent-row > .car-card .meta { display: none; }
@media (max-width: 640px) {
  .recent-row > .car-card { flex: 0 0 170px; }
  .recent-row > .car-card .title-block h3 { font-size: 14.5px; }
  .recent-row > .car-card .price { font-size: 14px; }
}

/* ---------- Detail-page action toolbar ---------- */
/* Four-up icon toolbar that replaces the stacked secondary CTAs below the
   big "Probefahrt buchen" primary button. Each tile is a coloured rounded
   square with a white icon and a label below — iOS share-sheet flavour
   adapted to the site's palette. The wishlist tile toggles between a
   neutral grey (unsaved) and accent red (saved) with the heart filling
   on toggle. Mobile shrinks the tiles gracefully via flex/grid. */
.action-toolbar {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 12px;
  margin-top: 4px;
}
.action-tile {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  text-decoration: none;
  color: inherit;
  background: transparent;
  border: none;
  cursor: pointer;
  padding: 0;
  font-family: inherit;
}
.action-tile-icon {
  width: 100%;
  aspect-ratio: 1;
  max-width: 72px;
  border-radius: 18px;
  display: grid;
  place-items: center;
  color: #fff;
  transition: transform 0.15s, box-shadow 0.15s, background 0.15s;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.10);
}
.action-tile:hover .action-tile-icon {
  transform: translateY(-2px);
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.18);
}
.action-tile-icon svg { width: 30px; height: 30px; }
.action-tile-label {
  font-family: "Geist", system-ui, sans-serif;
  font-size: 12.5px;
  font-weight: 500;
  color: var(--text-dim);
  text-align: center;
  letter-spacing: 0.01em;
}

.action-tile-call     .action-tile-icon { background: #2563eb; }
.action-tile-whatsapp .action-tile-icon { background: #25D366; }
.action-tile-inquiry  .action-tile-icon { background: #f97316; }
.action-tile-wishlist .action-tile-icon { background: #9aa0a6; }
.action-tile-wishlist.saved .action-tile-icon { background: #e11d48; }
.action-tile-wishlist.saved .action-tile-icon svg { fill: currentColor; }
.action-tile-print    .action-tile-icon { background: #475569; }

/* ---------- WhatsApp button ---------- */
/* Branded green CTA that matches WhatsApp's recognized colour (#25D366).
   Used on the car detail page (.detail-actions), kontakt.html WhatsApp
   channel, and as an icon-only round button in the topbar nav-cta. */
.btn-whatsapp {
  background: #25D366;
  color: #fff;
  border: 1px solid #25D366;
}
.btn-whatsapp:hover {
  background: #1ebe5a;
  border-color: #1ebe5a;
  color: #fff;
}
.btn-whatsapp .whatsapp-icon { color: #fff; }

/* Magazine card (default) */
.car-card {
  display: flex; flex-direction: column;
  text-decoration: none; color: inherit;
  transition: transform 0.3s ease, border-color 0.2s ease, box-shadow 0.2s ease;
  border: 1px solid silver;
  border-radius: 4px;
  overflow: hidden;
}
.car-card:hover {
  transform: translateY(-4px);
  border-color: var(--accent);
  box-shadow: 0 0 0 1px var(--accent); /* doubles the perceived border weight on hover without layout shift */
}
.car-card .photo {
  position: relative;
  aspect-ratio: 4 / 3;
  background: var(--surface-2);
  overflow: hidden;
}
.car-card .photo img {
  width: 100%; height: 100%; object-fit: cover;
  transition: transform 0.6s ease;
}
.car-card:hover .photo img { transform: scale(1.04); }
.car-card .photo .tag {
  position: absolute; top: 14px; left: 14px;
  font-family: "Geist Mono", monospace;
  font-size: 10px; letter-spacing: 0.16em;
  text-transform: uppercase;
  background: rgba(12,10,8,0.7);
  backdrop-filter: blur(8px);
  color: var(--text);
  padding: 6px 10px;
  border-radius: 4px;
  border: 1px solid rgba(255,255,255,0.08);
}
.car-card .photo .tag.new { background: var(--accent); color: var(--bg); border-color: transparent; }
.car-card .head {
  display: flex; flex-direction: column;
  justify-content: flex-start;
  gap: 4px;
  margin-top: 0;
  padding: 12px 18px 16px;
  border-top: 1px solid var(--line);
  /* Gap between title-block and price tightened 10→4px so the price
     sits closer to the subtitle (lifted up inside the box). Bottom
     padding 16px keeps the price from touching the .meta border below. */
  height: 144px;
}
.car-card .title-block .brand-mini {
  font-family: "Geist Mono", monospace;
  font-size: 11.5px; letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--text-mute);
}
/* Top row of the .title-block — brand-mini on the left, stock number on
   the right. Replaces the old layout where the stock number sat next to
   the price; pushing it to the top edge frees the price line for the
   amount alone and reads as "this car: <brand> · ref <seqNum>". */
.car-card .head-top-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 2px;
}
.car-card .seq-number {
  font-family: "Geist Mono", monospace;
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-mute);
  white-space: nowrap;
}
.car-card .title-block h3 {
  font-family: system-ui, -apple-system, "Segoe UI", sans-serif;
  font-weight: 400;
  font-size: 28px;
  line-height: 1.05;
  letter-spacing: -0.02em;
  /* Clamp to 1 line so a long model name (e.g. "Q3 Sportback TFSI") can't
     wrap and push subsequent elements out of the 165px .head budget. */
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
/* Variant line under the model name — muted body text so the model stays
   the visual headline. NOT uppercase like .brand-mini above (the variant
   reads as natural sentence text: "Coupé 2.0 d 4MATIC AMG Line"). Clamped
   to 2 lines max via -webkit-line-clamp; min-height reserves the full
   2-line height even when the actual text is 1 line, so the brand-mini
   and h3 above (and the price row below via .head's space-between)
   ALWAYS land at the same Y across cards in the grid. */
.car-card .title-block .title-sub {
  margin-top: 2px;
  font-size: 12.5px;
  color: var(--text-mute);
  line-height: 1.3;
  font-weight: 400;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  /* Reserve a fixed 2-line block even when the actual subtitle text is
     1 line. WITHOUT this, the title-block above shrinks on 1-line cards
     so the price ends up at a different Y than 2-line-subtitle cards in
     the same grid row. With it, every card's price lands at the same
     horizontal line. */
  min-height: calc(1.3em * 2);
}
/* Hide on compact recent-row cards — no vertical room and the variant
   is rarely needed for quick re-discovery. */
.recent-row > .car-card .title-block .title-sub { display: none; }
/* Second line of the head: ref number on the left, price on the right. */
.car-card .price {
  display: flex; align-items: baseline; justify-content: flex-end;
  gap: 12px;
  font-size: 22px;
  font-weight: 500;
  letter-spacing: -0.01em;
  white-space: nowrap;
  /* Visual-only lift: transform doesn't touch the layout flow so nothing
     above or below shifts. On 1-line-subtitle cards the price moves into
     the (otherwise blank) reserved 2nd-line space; on 2-line-subtitle
     cards the lift still keeps the price below the subtitle baseline. */
  transform: translateY(-10px);
}
.car-card .price .mono {
  font-size: 12px; letter-spacing: 0.16em;
  color: var(--text-mute);
  text-transform: uppercase;
  font-weight: 400;
}
.car-card .meta {
  display: flex; gap: 8px 14px;
  flex-wrap: wrap;
  align-content: flex-start;
  margin-top: 0;
  padding: 10px 14px;
  background: #e0e0e0;
  border-top: 1px solid var(--line-soft);
  font-size: 13px;
  line-height: 1.2;
  color: var(--text-dim);
  /* flex-grow:1 lets .meta absorb the remaining card height when the
     grid stretches a short card to match the row's tallest sibling.
     Spec icons stay anchored at the top (align-content:flex-start);
     the extra space below them stays grey instead of falling back to
     the card's white background — so the gray block extends cleanly
     to the bottom edge regardless of how many spec rows there are. */
  flex: 1 1 auto;
  box-sizing: border-box;
}
.car-card .meta-item { display: inline-flex; align-items: center; gap: 6px; }
.car-card .meta-item svg { width: 14px; height: 14px; stroke: var(--text-mute); }
.car-card .meta-item svg.ico-car {
  width: 20px;
  height: 20px;
  color: var(--text-mute);
  stroke: none;
}

/* Showcase variant */
body[data-cards="showcase"] .car-card .photo { aspect-ratio: 4/5; border-radius: 8px; }
body[data-cards="showcase"] .car-card .photo::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg, transparent 50%, rgba(0,0,0,0.7) 100%);
}
body[data-cards="showcase"] .car-card .photo .price-overlay {
  position: absolute; bottom: 16px; left: 16px; right: 16px;
  z-index: 2;
  display: flex; justify-content: space-between; align-items: flex-end;
  color: white;
}
body[data-cards="showcase"] .car-card .photo .price-overlay .pname { font-family: system-ui, -apple-system, "Segoe UI", sans-serif; font-size: 24px; }
body[data-cards="showcase"] .car-card .photo .price-overlay .pprice { font-weight: 600; font-size: 20px; }
body[data-cards="showcase"] .car-card .head { display: none; }
body[data-cards="showcase"] .car-card .meta { border-top: none; padding-top: 12px; }

/* Gallery (compact dense) */
body[data-cards="gallery"] .cars-grid { gap: 24px 20px; grid-template-columns: repeat(4, 1fr); }
@media (max-width: 1100px) { body[data-cards="gallery"] .cars-grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 700px)  { body[data-cards="gallery"] .cars-grid { grid-template-columns: repeat(2, 1fr); } }
body[data-cards="gallery"] .car-card .photo { aspect-ratio: 3/2; }
body[data-cards="gallery"] .car-card .title-block h3 { font-size: 20px; font-family: "Geist", sans-serif; font-weight: 600; letter-spacing: -0.01em; }
body[data-cards="gallery"] .car-card .price { font-size: 16px; }
/* Inventory page (fahrzeuge.html) emphasises the price more than the home cards. */
body[data-page="inventory"] .car-card .price { font-size: 30px; color: var(--accent); }
/* Landing page: bump the price up 4px and switch it to the M&A brand blue.
   The ref number sits inside the same .price flex row but has its own
   .mono color/font rules above, so it keeps its muted look. */
body[data-page="home"] .car-card .price { font-size: 26px; color: #2563eb; }
body[data-cards="gallery"] .car-card .meta { font-size: 11.5px; gap: 12px; }

/* ---------- USP cards ---------- */
.usp {
  background: var(--bg-2);
  border-top: 1px solid var(--line-soft);
  border-bottom: 1px solid var(--line-soft);
}
.usp-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
}
.usp-grid > div {
  padding: 56px 32px 56px 32px;
  border-right: 1px solid var(--line-soft);
  display: flex; flex-direction: column; gap: 16px;
}
.usp-grid > div:last-child { border-right: none; }
.usp-icon {
  width: 44px; height: 44px;
  display: grid; place-items: center;
  color: var(--accent);
  border: 1px solid var(--line);
  border-radius: 10px;
  flex-shrink: 0;
}
/* Icon + "01 / Faire Preise" label on the same horizontal line. */
.usp-grid .usp-head {
  display: flex;
  align-items: center;
  gap: 14px;
}
.usp-grid .usp-head .num {
  white-space: nowrap;
}
.usp-grid h3 {
  font-family: system-ui, -apple-system, "Segoe UI", sans-serif;
  font-weight: 400;
  font-size: 26px;
  letter-spacing: -0.015em;
}
.usp-grid p { color: var(--text-dim); font-size: 14.5px; line-height: 1.55; margin: 0; }
.usp-grid .num {
  font-family: "Geist Mono", monospace;
  font-size: 18px; letter-spacing: 0.2em;
  color: var(--accent);
}
@media (max-width: 1000px) { .usp-grid { grid-template-columns: repeat(2, 1fr); }
  .usp-grid > div:nth-child(2n) { border-right: none; }
  .usp-grid > div:nth-child(1), .usp-grid > div:nth-child(2) { border-bottom: 1px solid var(--line-soft); }
}

/* ---------- Brands marquee ---------- */
.brands {
  border-top: 1px solid var(--line-soft);
  border-bottom: 1px solid var(--line-soft);
  padding: 40px 0;
  overflow: hidden;
}
.brands-row {
  display: flex; align-items: center; gap: 80px;
  animation: marquee 30s linear infinite;
  width: max-content;
}
.brand-logo {
  font-family: system-ui, -apple-system, "Segoe UI", sans-serif;
  font-style: italic;
  font-size: 36px;
  letter-spacing: -0.02em;
  color: var(--text-dim);
  white-space: nowrap;
  transition: color 0.2s;
  cursor: pointer;
}
.brand-logo:hover { color: var(--accent); }
.brand-logo .dot {
  display: inline-block;
  width: 6px; height: 6px;
  background: var(--accent);
  border-radius: 50%;
  vertical-align: middle;
  margin: 0 20px;
}
@keyframes marquee {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}

/* ---------- Stats / numbers ---------- */
.stats {
  display: grid; grid-template-columns: repeat(3, 1fr);
  border-top: 1px solid var(--line-soft);
  border-bottom: 1px solid var(--line-soft);
}
.stat { padding: 80px 40px; border-right: 1px solid var(--line-soft); }
.stat:last-child { border-right: none; }
.stat .n {
  font-family: system-ui, -apple-system, "Segoe UI", sans-serif;
  font-size: clamp(64px, 8vw, 120px);
  line-height: 1;
  letter-spacing: -0.04em;
}
.stat .n .plus { color: var(--accent); }
.stat .lbl {
  font-family: "Geist Mono", monospace;
  font-size: 11px; letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--text-mute);
  margin-top: 20px;
  display: block;
}
.stat p { color: var(--text-dim); margin-top: 16px; font-size: 14.5px; }
@media (max-width: 900px) { .stats { grid-template-columns: 1fr; } .stat { border-right: none; border-bottom: 1px solid var(--line-soft); } .stat:last-child { border-bottom: none; } }

/* ---------- Quote (reviews) ---------- */
.reviews {
  background: var(--bg-2);
  border-top: 1px solid var(--line-soft);
  border-bottom: 1px solid var(--line-soft);
}
.featured-review {
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  gap: 80px;
  align-items: center;
  margin-bottom: 80px;
}
.featured-review blockquote {
  margin: 0;
  font-family: system-ui, -apple-system, "Segoe UI", sans-serif;
  font-weight: 400;
  font-size: clamp(13px, 1.3vw, 17px);
  line-height: 1.55;
  letter-spacing: -0.015em;
  color: var(--text);
}
.featured-review .quote-mark {
  font-family: system-ui, -apple-system, "Segoe UI", sans-serif;
  font-style: italic;
  font-size: 120px;
  line-height: 1;
  color: var(--accent);
  margin-bottom: -40px;
  display: block;
}
.featured-review .attrib {
  display: flex; align-items: center; gap: 16px;
  margin-top: 32px;
  font-size: 14.5px;
}
.featured-review .avatar {
  width: 48px; height: 48px;
  border-radius: 50%;
  background: var(--accent);
  color: var(--bg);
  display: grid; place-items: center;
  font-family: system-ui, -apple-system, "Segoe UI", sans-serif;
  font-size: 22px;
}
.featured-review .who { font-weight: 500; }
.featured-review .src { color: var(--text-mute); font-size: 12.5px; font-family: "Geist Mono", monospace; letter-spacing: 0.12em; }
.featured-review .badge {
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: 32px;
  background: var(--surface);
  display: flex; flex-direction: column; gap: 12px;
}
.featured-review .badge .gscore {
  font-family: system-ui, -apple-system, "Segoe UI", sans-serif;
  font-size: 80px; line-height: 1;
}
.featured-review .badge .gstars { color: #f5b400; font-size: 18px; letter-spacing: 4px; }
.featured-review .badge .glabel {
  font-family: "Geist Mono", monospace; font-size: 11px;
  letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--text-mute);
}
@media (max-width: 900px) { .featured-review { grid-template-columns: 1fr; gap: 40px; } }

.reviews-grid {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}
.review-card {
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 28px;
  background: var(--surface);
  display: flex; flex-direction: column; gap: 16px;
}
.review-card .stars { color: #f5b400; font-size: 14px; letter-spacing: 3px; }
/* Stretch the review text so the name + Google badge row at the bottom
   of every card sits at the same horizontal level across all three. */
.review-card p { font-size: 14.5px; color: var(--text-dim); margin: 0; line-height: 1.6; flex: 1; }
.review-card .who { font-weight: 500; font-size: 13.5px; }
.review-card .src { font-family: "Geist Mono", monospace; font-size: 10.5px; letter-spacing: 0.14em; color: var(--text-mute); }
.review-card .review-foot {
  display: flex; justify-content: space-between; align-items: center;
}
.review-card .review-name { display: flex; align-items: center; gap: 12px; }
.review-card .reviewer-avatar {
  width: 36px; height: 36px;
  border-radius: 50%;
  background: var(--accent);
  color: #fff;
  display: inline-grid; place-items: center;
  font-family: "Geist Mono", monospace;
  font-size: 12px; font-weight: 600;
  letter-spacing: 0.04em;
  flex-shrink: 0;
}
@media (max-width: 900px) { .reviews-grid { grid-template-columns: 1fr; } }

/* ---------- Big editorial split ---------- */
.split {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: 80px; align-items: center;
}
.split-img {
  aspect-ratio: 4/5;
  background-size: cover; background-position: center;
  border-radius: 4px;
}
.split h2 {
  font-family: system-ui, -apple-system, "Segoe UI", sans-serif;
  font-weight: 400;
  font-size: clamp(40px, 5.5vw, 80px);
  line-height: 0.98;
  letter-spacing: -0.025em;
  margin-bottom: 32px;
}
.split h2 .it { font-style: italic; color: var(--accent); }
.split p { color: var(--text-dim); font-size: 17px; max-width: 520px; line-height: 1.6; }
.split .feature-list {
  margin-top: 40px;
  display: flex; flex-direction: column; gap: 20px;
}
.split .feature-list .row {
  display: grid; grid-template-columns: 32px 1fr; gap: 16px;
  padding: 20px 0; border-top: 1px solid var(--line-soft);
}
.split .feature-list .row:last-child { border-bottom: 1px solid var(--line-soft); }
.split .feature-list .row .n {
  font-family: "Geist Mono", monospace; font-size: 11px; letter-spacing: 0.16em;
  color: var(--accent);
}
.split .feature-list h4 {
  font-family: system-ui, -apple-system, "Segoe UI", sans-serif;
  font-weight: 400; font-size: 22px;
  letter-spacing: -0.01em;
  margin-bottom: 4px;
}
.split .feature-list p { color: var(--text-dim); font-size: 14.5px; margin: 0; }
@media (max-width: 900px) { .split { grid-template-columns: 1fr; gap: 40px; } }

/* ---------- Werkstatt banner section (full-width image + horizontal feature row) ---------- */
.werkstatt-section { padding: 0 0 96px 0; }
.werkstatt-banner,
.section-banner {
  /* Cap at 1800 px so the bitmap never upscales past its native size on
     ultra-wide / 4K monitors (sources are 1400-1850 px wide). Centered
     with auto margins — on wider viewports the banner sits in the
     middle with the page background showing as letterboxing. */
  width: 100%;
  max-width: 1400px;
  margin-left: auto;
  margin-right: auto;
  aspect-ratio: 2 / 1;
  background-size: cover;
  background-position: center;
}
@media (max-width: 768px) {
  .section-banner { aspect-ratio: 16 / 9; }
}
.werkstatt-body { padding-top: 80px; }
.werkstatt-head {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: 56px;
  margin-bottom: 56px;
}
.werkstatt-head h2 {
  margin-top: 20px;
  font-family: system-ui, -apple-system, "Segoe UI", sans-serif;
  font-weight: 400;
  font-size: clamp(40px, 5.5vw, 80px);
  letter-spacing: -0.025em;
  line-height: 1.05;
}
.werkstatt-head h2 .it { font-style: italic; color: var(--accent); }
.werkstatt-intro p { color: var(--text-dim); font-size: 17px; line-height: 1.6; margin-bottom: 12px; }
.werkstatt-features {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: 32px;
  border-top: 1px solid var(--line-soft);
  border-bottom: 1px solid var(--line-soft);
  padding: 28px 0;
}
.werkstatt-features .row {
  display: grid; grid-template-columns: 40px 1fr; gap: 16px;
  align-items: baseline;
}
.werkstatt-features .row .n {
  font-family: "Geist Mono", monospace; font-size: 18px; letter-spacing: 0.16em;
  color: var(--accent);
}
.werkstatt-features .row h4 {
  font-family: system-ui, -apple-system, "Segoe UI", sans-serif;
  font-weight: 400; font-size: 22px;
  letter-spacing: -0.01em;
  margin-bottom: 4px;
}
.werkstatt-features .row p { color: var(--text-dim); font-size: 14.5px; line-height: 1.55; margin: 0; }
@media (max-width: 900px) {
  .werkstatt-head { grid-template-columns: 1fr; gap: 24px; margin-bottom: 32px; }
  .werkstatt-features { grid-template-columns: 1fr; gap: 24px; }
  /* aspect-ratio override removed — image's natural aspect is ~1.98:1
     (2335×1178), so the default 2/1 from the base rule fits without
     crop. Previous 16/9 override made the frame taller than the image
     aspect, causing background-size:cover to crop the sides. */
  .werkstatt-body { padding-top: 48px; }
}

/* ---------- Financing / Service / Trade-in tiles ---------- */
.tiles {
  display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: 16px;
}
@media (max-width: 1000px) { .tiles { grid-template-columns: 1fr; } }
.tile {
  position: relative;
  border-radius: 16px;
  padding: 40px;
  background: var(--surface);
  border: 1px solid var(--line);
  display: flex; flex-direction: column;
  min-height: 380px;
  overflow: hidden;
  transition: border-color 0.2s;
}
.tile:hover { border-color: var(--accent); }
.tile.dark {
  background: linear-gradient(135deg, var(--surface-2), var(--surface));
}
.tile.feature {
  background: var(--accent);
  color: #fff;
  border-color: transparent;
}
.tile.feature .eyebrow { color: rgba(255,255,255,0.85); }
.tile.feature .eyebrow::before { background: rgba(255,255,255,0.6); }
.tile h3 {
  font-family: system-ui, -apple-system, "Segoe UI", sans-serif;
  font-weight: 400;
  font-size: 36px;
  letter-spacing: -0.02em;
  margin-top: 16px;
  line-height: 1.04;
}
.tile p { color: var(--text-dim); font-size: 14.5px; line-height: 1.55; margin-top: 12px; flex: 1; }
.tile.feature p { color: rgba(255,255,255,0.92); }
.tile .tile-foot {
  display: flex; align-items: center; gap: 12px;
  margin-top: 32px;
  font-size: 14px; font-weight: 500;
}
.tile.feature .tile-foot { color: #fff; }
.tile .tile-foot .arr { transition: transform 0.2s; }
.tile:hover .tile-foot .arr { transform: translateX(4px); }
.tile-num {
  font-family: system-ui, -apple-system, "Segoe UI", sans-serif;
  font-style: italic;
  font-size: 100px;
  line-height: 1;
  letter-spacing: -0.04em;
  color: var(--accent);
  margin-bottom: 8px;
}
.tile.feature .tile-num { color: #fff; opacity: 0.6; }

/* ---------- Financing calculator ---------- */
.calc {
  display: grid; grid-template-columns: 1fr 1.2fr; gap: 64px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 20px;
  padding: 56px;
  align-items: center;
}
.calc h3 {
  font-family: system-ui, -apple-system, "Segoe UI", sans-serif;
  font-weight: 400;
  font-size: 48px;
  letter-spacing: -0.02em;
  line-height: 1;
}
.calc .rate-display {
  font-family: system-ui, -apple-system, "Segoe UI", sans-serif;
  font-size: clamp(80px, 10vw, 144px);
  line-height: 0.9;
  letter-spacing: -0.04em;
  color: var(--accent);
}
.calc .rate-suffix {
  font-family: "Geist Mono", monospace;
  font-size: 12px; letter-spacing: 0.16em;
  color: var(--text-mute); text-transform: uppercase;
  margin-top: 8px;
  display: block;
}
.calc-fields { display: flex; flex-direction: column; gap: 20px; }
.calc-field {
  display: flex; flex-direction: column; gap: 12px;
}
.calc-field .row {
  display: flex; justify-content: space-between; align-items: baseline;
}
.calc-field .lbl {
  font-family: "Geist Mono", monospace; font-size: 11px;
  letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--text-mute);
}
.calc-field .val { font-size: 18px; font-weight: 500; }
.calc-field input[type="range"] {
  width: 100%; appearance: none; background: transparent;
}
.calc-field input[type="range"]::-webkit-slider-runnable-track {
  height: 2px; background: var(--line); border-radius: 1px;
}
.calc-field input[type="range"]::-webkit-slider-thumb {
  appearance: none; width: 18px; height: 18px;
  border-radius: 50%; background: var(--accent);
  margin-top: -8px;
  cursor: pointer; transition: transform 0.15s;
}
.calc-field input[type="range"]::-webkit-slider-thumb:hover { transform: scale(1.2); }
.calc-disclaimer { font-size: 11.5px; color: var(--text-mute); margin-top: 12px; }
@media (max-width: 900px) { .calc { grid-template-columns: 1fr; gap: 40px; padding: 32px; } }

/* ---------- Budget-mode finder (reverse calculator) ---------- */
.budget-finder {
  margin-top: 48px;
  padding: 40px;
  border: 1px solid var(--line-soft);
  border-radius: 12px;
  background: var(--surface);
}
.budget-finder-head { margin-bottom: 24px; max-width: 760px; }
.budget-finder-head h3 {
  font-family: system-ui, -apple-system, "Segoe UI", sans-serif;
  font-weight: 400;
  font-size: clamp(28px, 3.4vw, 44px);
  letter-spacing: -0.02em;
  margin: 14px 0 10px;
}
.budget-finder-head p { color: var(--text-dim); font-size: 15px; line-height: 1.6; }
.budget-finder-row {
  display: grid; grid-template-columns: auto auto auto;
  align-items: end; gap: 14px;
  margin-bottom: 24px;
}
.budget-finder-label {
  display: block;
  font-family: "Geist Mono", monospace;
  font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--text-mute);
  margin-bottom: 6px;
}
.budget-finder-input {
  display: inline-flex; align-items: center;
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 0 10px 0 12px;
  height: 44px;
}
.budget-finder-input:focus-within {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(37,99,235,0.18);
}
.budget-prefix {
  color: var(--text-dim); font-size: 16px; margin-right: 6px;
}
.budget-finder-input input {
  width: 140px;
  background: transparent;
  border: none;
  font-family: inherit;
  font-size: 18px;
  color: var(--text);
  font-variant-numeric: tabular-nums;
  outline: none;
}
.budget-summary {
  font-size: 15px;
  color: var(--text);
  line-height: 1.6;
  margin: 0 0 24px;
}
.budget-finder-results .cars-grid { grid-template-columns: repeat(3, 1fr); gap: 24px; }
@media (max-width: 1000px) { .budget-finder-results .cars-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 700px) {
  .budget-finder { padding: 28px 20px; }
  .budget-finder-row { grid-template-columns: 1fr; }
  .budget-finder-input input { width: 100%; }
  .budget-finder-results .cars-grid { grid-template-columns: 1fr; }
}

/* ---------- Inventory sidebar: Wunschrate filter ---------- */
/* Reuses .budget-finder-input from the homepage budget-finder section
   but widens the input to fill the narrow filter sidebar and adds a
   small hint line below explaining the fixed loan assumptions. The
   .filter-budget-hint switches color when a max-price is being shown. */
.filter-budget-input { display: flex; }
.filter-budget-input input { width: 100%; font-size: 16px; }
.filter-budget-hint {
  font-family: "Geist Mono", monospace;
  font-size: 10.5px;
  letter-spacing: 0.04em;
  color: var(--text-mute);
  margin-top: 8px;
  line-height: 1.4;
}
.filter-budget-hint.active { color: var(--accent); }

/* ---------- Map / Location ---------- */
.location {
  display: grid; grid-template-columns: 1fr 1fr; gap: 0;
  border-top: 1px solid var(--line-soft);
}
.location-info { padding: 80px 60px; }
.location-map {
  min-height: 520px;
  background: var(--surface-2);
  position: relative;
  overflow: hidden;
}
.map-placeholder {
  width: 100%; height: 100%;
  min-height: 520px;
  display: grid; place-items: center;
  background:
    radial-gradient(circle at 25% 30%, rgba(0,0,0,0.04), transparent 50%),
    radial-gradient(circle at 75% 70%, rgba(0,0,0,0.04), transparent 50%),
    repeating-linear-gradient(45deg, transparent 0 14px, rgba(0,0,0,0.025) 14px 15px),
    var(--surface-2);
  padding: 40px;
}
.map-placeholder-card {
  max-width: 480px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 32px;
  text-align: center;
  box-shadow: var(--shadow-card);
}
.map-placeholder-icon {
  width: 44px; height: 44px;
  border-radius: 50%;
  background: var(--accent-soft);
  color: var(--accent);
  display: grid; place-items: center;
  margin: 0 auto 16px;
}
.map-placeholder-icon svg { width: 22px; height: 22px; }
.map-placeholder-card h3 {
  font-family: system-ui, -apple-system, "Segoe UI", sans-serif;
  font-weight: 400;
  font-size: 26px;
  letter-spacing: -0.02em;
  margin-bottom: 12px;
}
.map-placeholder-card p {
  color: var(--text-dim);
  font-size: 14px;
  line-height: 1.55;
  margin-bottom: 20px;
}
.map-placeholder-card .btn { width: 100%; justify-content: center; }
.map-placeholder-alt {
  margin-top: 16px !important;
  font-size: 12px !important;
  color: var(--text-mute) !important;
}
.location-info h2 {
  font-family: system-ui, -apple-system, "Segoe UI", sans-serif;
  font-weight: 400;
  font-size: clamp(40px, 5vw, 72px);
  line-height: 0.98;
  letter-spacing: -0.025em;
}
.location-info .pieces {
  margin-top: 48px;
  display: grid; grid-template-columns: 1fr 1fr; gap: 32px;
}
.location-info .piece h4 {
  font-family: "Geist Mono", monospace;
  font-size: 11px; letter-spacing: 0.2em; text-transform: uppercase;
  color: var(--text-mute); font-weight: 500;
  margin-bottom: 12px;
}
.location-info .piece p { font-size: 15px; margin: 0; line-height: 1.6; }
.location-info .piece a { transition: color 0.15s; }
.location-info .piece a:hover { color: var(--accent); }
@media (max-width: 900px) { .location { grid-template-columns: 1fr; } .location-info { padding: 56px 32px; } }

.hours-table { display: flex; flex-direction: column; gap: 4px; margin-top: 4px; }
.hours-row { display: flex; justify-content: space-between; align-items: flex-start; padding: 6px 0; border-bottom: 1px dotted var(--line); font-size: 14.5px; }
.hours-row:last-child { border-bottom: none; }
.hours-row .hours-cell { display: flex; flex-direction: column; align-items: flex-end; gap: 2px; }
.hours-row .hours-status {
  font-family: "Geist Mono", monospace;
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
.hours-row .hours-status.open { color: var(--success); }
.hours-row .hours-status.closed { color: var(--danger); }

/* ---------- Footer ---------- */
footer {
  background: var(--bg-2);
  border-top: 1px solid var(--line);
  padding: 80px 0 32px;
  margin-top: 0;
}
.footer-top {
  display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr;
  gap: 48px;
  padding-bottom: 56px;
  border-bottom: 1px solid var(--line-soft);
}
.footer-brand p { color: var(--text-dim); font-size: 14.5px; max-width: 320px; margin-top: 20px; }
.footer-col h5 {
  font-family: "Geist Mono", monospace;
  font-size: 11px; letter-spacing: 0.2em; text-transform: uppercase;
  color: var(--accent); font-weight: 500;
  margin: 0 0 20px 0;
}
.footer-col ul { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 12px; font-size: 14.5px; }
.footer-col ul a:hover { color: var(--accent); }
.footer-bottom {
  display: flex; justify-content: space-between; align-items: center;
  padding-top: 32px;
  font-size: 12.5px; color: var(--text-mute);
}
.footer-bottom .links { display: flex; gap: 24px; }
.footer-trademark {
  margin-top: 14px;
  font-size: 12.5px;
  color: var(--text-mute);
}

/* ----- Footer heart: continuous heartbeat + click reveals an
   "Autoblicker credit" panel after a heart-particle burst.
   The continuous animation is a two-beat ba-bump every ~2.4 s
   (short scale-up sequence, long rest) so it draws a touch of
   attention without ever becoming distracting. */
.footer-heart {
  display: inline-block;
  padding: 0 2px;
  background: none;
  border: none;
  color: #e63946;
  font: inherit;
  font-size: 1em;
  line-height: 1;
  cursor: pointer;
  vertical-align: -1px;
  transform-origin: center;
  animation: footer-heartbeat 2s ease-in-out infinite;
}
.footer-heart:hover { animation-play-state: paused; transform: scale(1.4); }
/* Single smooth pulse: 1 s growing larger, 1 s shrinking back. No
   lub-dub — that read as too busy. Just a calm, steady "breathing"
   tempo. */
@keyframes footer-heartbeat {
  0%, 100% { transform: scale(1); }    /* small */
  50%      { transform: scale(1.4); }  /* big, one second in */
}

/* Heart-particle burst — 14 small ❤ float outward & up from the
   footer heart when clicked. Pure CSS animation per particle. */
.heart-particle {
  position: fixed;
  z-index: 9999;
  pointer-events: none;
  color: #e63946;
  font-size: 14px;
  line-height: 1;
  opacity: 0;
  animation: heart-particle-fly 1.8s var(--delay, 0s) ease-out forwards;
  transform: translate(-50%, -50%);
}
@keyframes heart-particle-fly {
  0%   { opacity: 0; transform: translate(-50%, -50%) scale(0.4); }
  15%  { opacity: 1; }
  100% {
    opacity: 0;
    transform: translate(calc(-50% + var(--dx, 0px)), calc(-50% + var(--dy, -60px)))
               scale(var(--scale, 0.9))
               rotate(var(--rot, 0deg));
  }
}

/* Bottom-right panel that slides in ~0.5 s after the burst —
   carries the Autoblicker credit. White card with brand-blue accent
   line, dismissible via × button or auto-fades after 12 s. */
.heart-panel {
  position: fixed;
  right: 24px;
  bottom: 24px;
  z-index: 9999;
  width: 340px;
  max-width: calc(100vw - 48px);
  padding: 22px 24px 20px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-top: 3px solid var(--accent);
  border-radius: 14px;
  box-shadow: var(--shadow-card);
  font-size: 13.5px;
  line-height: 1.55;
  color: var(--text);
  transform: translateY(16px);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.25s, transform 0.25s;
}
.heart-panel.is-open { opacity: 1; transform: translateY(0); pointer-events: auto; }
.heart-panel-close {
  position: absolute;
  top: 8px; right: 10px;
  width: 28px; height: 28px;
  border-radius: 50%;
  background: transparent;
  color: var(--text-dim);
  font-size: 18px;
  line-height: 1;
  cursor: pointer;
}
.heart-panel-close:hover { background: var(--bg-2); color: var(--text); }
.heart-panel-eyebrow {
  font-family: "Geist Mono", monospace;
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 10px;
}
.heart-panel p { margin: 0 0 10px; color: var(--text-dim); }
.heart-panel p strong { color: var(--text); }
.heart-panel-cta {
  display: inline-flex;
  align-items: center;
  margin-top: 6px;
  font-family: "Geist Mono", monospace;
  font-size: 12px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--accent);
  text-decoration: none;
  transition: color 0.15s;
}
.heart-panel-cta:hover { color: var(--accent-2, var(--accent)); text-decoration: underline; }
@media (max-width: 900px) {
  .footer-top { grid-template-columns: 1fr 1fr; }
  .footer-bottom { flex-direction: column; gap: 16px; }
}

/* ---------- Inventory page ---------- */
.page-head {
  padding: 64px 0 40px;
  border-bottom: 1px solid var(--line-soft);
}
.crumbs {
  font-family: "Geist Mono", monospace; font-size: 11px;
  letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--accent);
}
.crumbs a:hover { color: var(--text); }
.page-head h1 {
  font-family: system-ui, -apple-system, "Segoe UI", sans-serif;
  font-weight: 400;
  font-size: clamp(40px, 5.5vw, 72px);
  line-height: 1;
  letter-spacing: -0.03em;
  margin-top: 20px;
}
.page-head h1 .it { font-style: italic; color: var(--accent); }
.page-head .summary {
  display: flex; justify-content: space-between; align-items: flex-end;
  margin-top: 32px; flex-wrap: wrap; gap: 24px;
}
.page-head .summary p { color: var(--text-dim); font-size: 16px; max-width: 540px; margin: 0; }

.inventory-shell {
  display: grid; grid-template-columns: 280px 1fr;
  gap: 56px;
  padding: 48px 0 120px;
}
@media (max-width: 1000px) { .inventory-shell { grid-template-columns: 1fr; gap: 24px; } }

.filters {
  position: sticky; top: 96px; align-self: start;
  display: flex; flex-direction: column; gap: 32px;
  /* Cap the sidebar to the viewport height so the cars list can scroll
     independently and every filter (incl. Sitze at the bottom) stays
     reachable via the sidebar's own scroll. */
  max-height: calc(100vh - 112px);
  overflow-y: auto;
  /* Breathing room so the scrollbar doesn't crowd the last filter, and
     so sticky chips don't sit flush against the edge. */
  padding-right: 12px;
  /* Thin scrollbar styling for browsers that support it. */
  scrollbar-width: thin;
}
.filters::-webkit-scrollbar { width: 6px; }
.filters::-webkit-scrollbar-thumb { background: var(--line); border-radius: 3px; }
@media (max-width: 1000px) {
  /* On mobile the sidebar stacks above the cars; let it grow naturally. */
  .filters {
    position: static;
    max-height: none;
    overflow-y: visible;
    padding-right: 0;
  }
}
.filter-group h5 {
  font-family: "Geist Mono", monospace;
  font-size: 10px; letter-spacing: 0.2em; text-transform: uppercase;
  color: var(--text-mute); font-weight: 500;
  margin: 0 0 14px 0;
}
.chips { display: flex; flex-wrap: wrap; gap: 6px; }
.chip {
  padding: 7px 14px; font-size: 13px;
  border: 1px solid var(--line); border-radius: 999px;
  color: var(--text-dim);
  transition: all 0.15s;
}
.chip:hover { color: var(--text); border-color: var(--text-dim); }
.chip.active { background: var(--accent); border-color: var(--accent); color: var(--bg); }
.range-row { display: flex; justify-content: space-between; font-family: "Geist Mono", monospace; font-size: 12px; color: var(--text-dim); margin-bottom: 8px; }
.checkbox-list { display: flex; flex-direction: column; gap: 10px; }
.checkbox-list label { display: flex; align-items: center; gap: 10px; font-size: 14px; color: var(--text-dim); cursor: pointer; }
.checkbox-list input { accent-color: var(--accent); }
/* Inline checkbox row — used for short numeric values (e.g. seat counts)
   so they sit side-by-side instead of one per line. */
.checkbox-list-inline { flex-direction: row; flex-wrap: wrap; gap: 14px; }
.checkbox-list-inline label { gap: 6px; }

.inv-toolbar {
  display: flex; justify-content: space-between; align-items: center;
  margin-bottom: 24px;
  flex-wrap: wrap; gap: 16px;
}
.inv-toolbar .results { font-family: "Geist Mono", monospace; font-size: 12px; color: var(--text-dim); letter-spacing: 0.14em; }
.inv-toolbar select {
  background: var(--surface); border: 1px solid var(--line);
  padding: 8px 32px 8px 14px; border-radius: 8px;
  font-size: 13px;
}

/* ---------- Detail page ---------- */
.detail-hero {
  display: grid; grid-template-columns: 1.5fr 1fr; gap: 56px;
  padding: 56px 0 80px;
  border-bottom: 1px solid var(--line-soft);
}
.gallery {
  display: block;
}
.gallery .main {
  aspect-ratio: 4 / 3;
  background-size: cover;
  background-position: center;
  border-radius: 8px;
  position: relative;
}
.gallery-nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 48px;
  height: 48px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: rgba(12, 10, 8, 0.55);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border: 1px solid rgba(255, 255, 255, 0.12);
  color: #fff;
  cursor: pointer;
  padding: 0;
  transition: background 0.15s ease, transform 0.15s ease;
  z-index: 2;
}
.gallery-nav:hover { background: rgba(12, 10, 8, 0.85); }
.gallery-nav:active { transform: translateY(-50%) scale(0.94); }
.gallery-nav.prev { left: -24px; }
.gallery-nav.next { right: -24px; }
@media (max-width: 600px) {
  /* Keep buttons inside the image on narrow viewports so they don't fall off-screen. */
  .gallery-nav.prev { left: 12px; }
  .gallery-nav.next { right: 12px; }
}
.gallery-nav svg { width: 22px; height: 22px; }

/* Fullscreen toggle button on the main gallery image. Sits in the
   top-right corner of the image and opens the lightbox. */
.gallery-fullscreen {
  position: absolute;
  top: 14px;
  right: 14px;
  width: 40px;
  height: 40px;
  display: grid; place-items: center;
  border-radius: 8px;
  background: rgba(12, 10, 8, 0.6);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border: 1px solid rgba(255, 255, 255, 0.15);
  color: #fff;
  cursor: pointer;
  padding: 0;
  transition: background 0.15s ease, transform 0.15s ease;
  z-index: 2;
}
.gallery-fullscreen:hover { background: rgba(12, 10, 8, 0.85); }
.gallery-fullscreen:active { transform: scale(0.94); }
.gallery-fullscreen svg { width: 18px; height: 18px; }

/* ---- Fullscreen lightbox (opened via the fullscreen button) ---- */
.lightbox-overlay {
  position: fixed; inset: 0;
  z-index: 1100;
  background: rgba(0, 0, 0, 0.92);
  display: grid; place-items: center;
  padding: 40px;
}
.lightbox-img {
  max-width: 95vw;
  max-height: 90vh;
  object-fit: contain;
  display: block;
  user-select: none;
}
.lightbox-close {
  position: absolute;
  top: 18px; right: 18px;
  width: 44px; height: 44px;
  display: grid; place-items: center;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.2);
  color: #fff;
  cursor: pointer;
  padding: 0;
}
.lightbox-close:hover { background: rgba(255, 255, 255, 0.2); }
.lightbox-close svg { width: 22px; height: 22px; }
.lightbox-nav {
  position: absolute;
  top: 50%; transform: translateY(-50%);
  width: 56px; height: 56px;
  display: grid; place-items: center;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.2);
  color: #fff;
  cursor: pointer;
  padding: 0;
}
.lightbox-nav:hover { background: rgba(255, 255, 255, 0.2); }
.lightbox-nav.prev { left: 24px; }
.lightbox-nav.next { right: 24px; }
.lightbox-nav svg { width: 28px; height: 28px; }
.lightbox-counter {
  position: absolute;
  bottom: 24px; left: 50%;
  transform: translateX(-50%);
  color: rgba(255, 255, 255, 0.7);
  font-family: "Geist Mono", monospace;
  font-size: 12px;
  letter-spacing: 0.14em;
}
@media (max-width: 600px) {
  .lightbox-overlay { padding: 16px; }
  .lightbox-nav { width: 44px; height: 44px; }
  .lightbox-nav.prev { left: 8px; }
  .lightbox-nav.next { right: 8px; }
  .lightbox-nav svg { width: 22px; height: 22px; }
}
.gallery-counter {
  position: absolute;
  right: 0;
  bottom: -28px;
  font-family: "Geist Mono", monospace;
  font-size: 11px;
  letter-spacing: 0.14em;
  color: var(--text-mute);
  pointer-events: none;
}
.gallery-thumbs {
  display: grid; grid-template-columns: repeat(5, 1fr); gap: 8px;
  margin-top: 36px;
}
.gallery-thumbs .thumb {
  aspect-ratio: 4/3;
  background-size: cover; background-position: center;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  opacity: 0.7;
  transition: opacity 0.15s;
}
.gallery-thumbs .thumb:hover, .gallery-thumbs .thumb.active { opacity: 1; }
.gallery-thumbs .thumb.active { outline: 2px solid var(--accent); outline-offset: 2px; }

.detail-side h1 {
  font-family: system-ui, -apple-system, "Segoe UI", sans-serif;
  font-weight: 400;
  font-size: 56px;
  line-height: 1;
  letter-spacing: -0.025em;
  margin-bottom: 12px;
}
.detail-side .subtitle {
  font-size: 17px; color: var(--text-dim); margin-bottom: 12px;
}
.detail-side .price-block {
  padding: 24px 0 0;
  border-top: 1px solid var(--line-soft);
  margin-bottom: 0;
}
.detail-side .price-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
}
.detail-side .price-main {
  font-family: system-ui, -apple-system, "Segoe UI", sans-serif;
  font-size: 64px; line-height: 1;
  letter-spacing: -0.03em;
  color: var(--accent);
}
/* Dealer stock number ("FZ3381") sits to the right of the price.
   Quiet mono treatment so it doesn't compete with the price for the
   buyer's eye — it's there for unambiguous reference when the buyer
   calls in or the dealer looks the car up in Autoblicker. */
.detail-side .price-stock {
  font-family: "Geist Mono", monospace;
  font-size: 12px;
  letter-spacing: 0.14em;
  color: var(--text-mute);
  white-space: nowrap;
}
.detail-side .price-stock:not(:empty)::before {
  content: "Bestand-Nr. · ";
  color: var(--text-mute);
  opacity: 0.7;
}
.detail-side .price-rate {
  font-size: 14px; color: var(--text-dim); margin-top: 36px;
  font-family: "Geist Mono", monospace; letter-spacing: 0.06em;
}

/* Inline finance calculator on the detail page. Lets the visitor adjust
   Anzahlung % and Laufzeit and see the monthly rate update live. */
.finance-calc {
  margin-top: 18px;
  padding: 14px 16px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface);
}
/* New 2-column layout: sliders on the left, output (breakdown above,
   monthly below) on the right. */
.finance-calc-layout {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
  align-items: start;
}
.finance-calc-sliders {
  display: flex; flex-direction: column;
  gap: 14px;
}
.finance-calc-output {
  display: flex; flex-direction: column;
  gap: 14px;
}
.finance-calc-field { display: flex; flex-direction: column; gap: 6px; }
.finance-calc-label {
  display: flex; justify-content: space-between; align-items: baseline;
  font-family: "Geist Mono", monospace;
  font-size: 10.5px; letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-mute);
}
.finance-calc-value { color: var(--text); letter-spacing: 0.04em; }
.finance-calc input[type="range"] {
  width: 100%;
  -webkit-appearance: none;
  appearance: none;
  height: 4px;
  background: var(--line);
  border-radius: 2px;
  outline: none;
  cursor: pointer;
}
.finance-calc input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 16px; height: 16px;
  border-radius: 50%;
  background: var(--accent);
  border: 2px solid var(--bg);
  box-shadow: 0 1px 3px rgba(0,0,0,0.15);
  cursor: pointer;
}
.finance-calc input[type="range"]::-moz-range-thumb {
  width: 16px; height: 16px;
  border-radius: 50%;
  background: var(--accent);
  border: 2px solid var(--bg);
  cursor: pointer;
}
.finance-calc-monthly {
  display: flex; flex-direction: column;
  padding-top: 12px;
  border-top: 1px solid var(--line-soft);
}
.finance-calc-out-label {
  display: block;
  font-family: "Geist Mono", monospace;
  font-size: 10px; letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--text-mute);
  margin-bottom: 2px;
}
.finance-calc-out-monthly {
  font-family: system-ui, -apple-system, "Segoe UI", sans-serif;
  font-size: 34px; line-height: 1;
  color: var(--accent);
  letter-spacing: -0.01em;
}
/* Breakdown table — 2-column grid with the running total at the bottom
   separated by a hairline. Updates live as the sliders change. */
.finance-calc-breakdown {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 3px 12px;
  font-size: 12.5px;
  margin: 0;
}
.finance-calc-breakdown dt { color: var(--text-dim); }
.finance-calc-breakdown dd { color: var(--text); font-variant-numeric: tabular-nums; text-align: right; margin: 0; }
.finance-calc-breakdown .finance-calc-sum-key,
.finance-calc-breakdown .finance-calc-sum-val {
  padding-top: 6px;
  margin-top: 4px;
  border-top: 1px solid var(--line-soft);
  color: var(--text);
  font-weight: 600;
}
/* Disclaimer line that hangs off the "Gesamt ca." label so it doesn't
   eat its own row. */
.finance-calc-sum-key { display: flex; flex-direction: column; gap: 2px; }
.finance-calc-sum-note {
  font-size: 10.5px;
  font-weight: 400;
  color: var(--text-mute);
  letter-spacing: 0.02em;
}
.finance-calc-note {
  margin: 10px 0 0;
  font-size: 11px;
  color: var(--text-mute);
  letter-spacing: 0.02em;
}
@media (max-width: 700px) {
  .finance-calc-layout { grid-template-columns: 1fr; gap: 18px; }
}
/* Compact key/value list — replaces the previous 2x3 card grid that
   ate ~280px of vertical space with empty card chrome. Same data,
   tighter rhythm, wrapped in a single white card to match the rule
   "any car data block has a white surface on the detail page". */
.detail-quickspecs {
  margin: 24px 0 0;
  padding: 4px 16px;
  background: var(--surface);
  border: 1px solid var(--line-soft);
  border-radius: 10px;
}
.detail-quickspecs .qs-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 16px;
  padding: 10px 0;
  border-bottom: 1px solid var(--line-soft);
}
.detail-quickspecs .qs-row:last-child { border-bottom: none; }
.detail-quickspecs .qs-row dt {
  margin: 0;
  font-family: "Geist Mono", monospace;
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-mute);
}
.detail-quickspecs .qs-row dd {
  margin: 0;
  font-size: 14.5px;
  font-weight: 500;
  text-align: right;
}

/* Finance calculator toggle button — collapsed-by-default disclosure.
   Sits between the price/rate line and the (initially hidden) calc. */
.finance-toggle {
  display: flex;
  width: 100%;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: 14px;
  padding: 10px 14px;
  background: var(--surface);
  border: 1px solid var(--line-soft);
  border-radius: 10px;
  font-family: "Geist Mono", monospace;
  font-size: 12px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-dim);
  cursor: pointer;
  transition: border-color 0.15s, color 0.15s;
}
.finance-toggle:hover { border-color: var(--text-dim); color: var(--text); }
.finance-toggle .finance-toggle-caret {
  font-size: 14px;
  transition: transform 0.2s ease;
}
.finance-toggle.is-open .finance-toggle-caret { transform: rotate(180deg); }
.finance-toggle.is-open + .finance-calc { margin-top: 12px; }

.detail-actions { display: flex; flex-direction: column; gap: 10px; margin-top: 24px; }
.detail-actions .btn { justify-content: center; }

.specs-section { padding: 80px 0; border-bottom: 1px solid var(--line-soft); }
.specs-grid {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 32px;
}
.spec-block h4 {
  font-family: "Geist Mono", monospace;
  font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--accent); font-weight: 500;
  margin: 0 0 16px 0;
}
.spec-block .rows {
  display: flex; flex-direction: column;
  background: var(--surface);
  border: 1px solid var(--line-soft);
  border-radius: 10px;
  padding: 4px 16px;
  margin-top: 4px;
}
.spec-block .row {
  display: flex; justify-content: space-between; gap: 8px 16px; flex-wrap: wrap;
  padding: 6px 0; border-bottom: 1px solid var(--line-soft);
  font-size: 14.5px;
}
.spec-block .row:last-child { border-bottom: none; }
.spec-block .row .k { color: var(--text-dim); flex-shrink: 0; }
.spec-block .row .v { font-weight: 500; text-align: right; min-width: 0; word-break: break-word; }
@media (max-width: 900px) { .specs-grid { grid-template-columns: 1fr 1fr; } .detail-hero { grid-template-columns: 1fr; } }
/* Below 640px the 2-col specs grid becomes too narrow — keys and values
   collide. Go to 1 column on phones. */
@media (max-width: 640px) { .specs-grid { grid-template-columns: 1fr; gap: 20px; } }

.equipment-section { padding: 80px 0; border-bottom: 1px solid var(--line-soft); }
.equipment-grid {
  columns: 3; column-gap: 32px;
  background: var(--surface);
  border: 1px solid var(--line-soft);
  border-radius: 10px;
  padding: 20px 24px;
}
.equipment-grid .item {
  display: flex; align-items: center; gap: 10px;
  font-size: 14.5px; line-height: 1.3;
  padding: 4px 0;
  break-inside: avoid;
  color: var(--text-dim);
}
.equipment-grid .item::before {
  content: ""; width: 6px; height: 6px;
  background: var(--accent); border-radius: 50%;
  flex-shrink: 0;
}
@media (max-width: 900px) { .equipment-grid { columns: 1; } }

/* ---------- Calendar (test drive) ---------- */
.booking-section { padding: 80px 0; }
.booking-shell {
  display: grid; grid-template-columns: 1fr 1.2fr; gap: 56px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 20px;
  padding: 48px;
}
.booking-info h2 {
  font-family: system-ui, -apple-system, "Segoe UI", sans-serif;
  font-weight: 400;
  font-size: 48px;
  letter-spacing: -0.025em;
  line-height: 1;
  margin-bottom: 24px;
}
.booking-info p { color: var(--text-dim); font-size: 15.5px; line-height: 1.6; }
.booking-meta {
  margin-top: 32px;
  display: flex; flex-direction: column; gap: 14px;
}
.booking-meta .bmeta {
  display: flex; align-items: center; gap: 12px;
  font-size: 14px; color: var(--text-dim);
}
.booking-meta .bmeta svg { width: 18px; height: 18px; color: var(--accent); }

.cal-shell {
  background: var(--surface);
  border: 1px solid var(--line-soft);
  border-radius: 14px; padding: 24px;
}
.cal-head {
  display: flex; justify-content: space-between; align-items: center;
  margin-bottom: 20px;
}
.cal-head h4 {
  font-family: system-ui, -apple-system, "Segoe UI", sans-serif; font-weight: 400; font-size: 24px;
  letter-spacing: -0.01em;
}
.cal-nav { display: flex; gap: 4px; }
.cal-nav button {
  width: 32px; height: 32px; border-radius: 8px;
  border: 1px solid var(--line);
  color: var(--text-dim);
  transition: all 0.15s;
}
.cal-nav button:hover { color: var(--text); border-color: var(--text-dim); }
.cal-grid {
  display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px;
}
.cal-grid .dow {
  font-family: "Geist Mono", monospace;
  font-size: 10px; letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--text-mute);
  text-align: center; padding: 8px 0;
}
.cal-grid .day {
  aspect-ratio: 1;
  display: grid; place-items: center;
  border-radius: 8px;
  font-size: 14px;
  cursor: pointer;
  transition: all 0.12s;
  position: relative;
  color: var(--text);
}
.cal-grid .day:hover:not(.muted):not(.closed) { background: var(--surface-2); }
.cal-grid .day.muted { color: var(--text-mute); opacity: 0.4; cursor: default; }
.cal-grid .day.closed { color: var(--text-mute); text-decoration: line-through; cursor: not-allowed; }
.cal-grid .day.today { font-weight: 600; color: var(--accent); }
.cal-grid .day.selected { background: var(--accent); color: var(--bg); font-weight: 600; }
.cal-grid .day.available::after {
  content: ""; position: absolute; bottom: 6px; left: 50%; transform: translateX(-50%);
  width: 3px; height: 3px; background: var(--accent); border-radius: 50%;
}
.cal-grid .day.selected.available::after { background: var(--bg); }

.timeslots {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px;
  margin-top: 24px;
}
.timeslot {
  padding: 10px; text-align: center; font-size: 13px;
  border: 1px solid var(--line); border-radius: 8px;
  cursor: pointer;
  transition: all 0.12s;
  color: var(--text-dim);
  font-family: "Geist Mono", monospace;
  letter-spacing: 0.04em;
}
.timeslot:hover:not(.disabled):not(.loading) { color: var(--text); border-color: var(--text-dim); }
.timeslot.selected { background: var(--accent); border-color: var(--accent); color: var(--bg); }
.timeslot.disabled { opacity: 0.3; cursor: not-allowed; text-decoration: line-through; }

/* Loading shimmer while the live-calendar lookup is in flight. Replaces
   the readable time with a soft pulsing bar so the user doesn't briefly
   read every slot as struck-through-unavailable before the real data
   resolves. */
.timeslot.loading {
  cursor: progress; color: transparent; position: relative;
  border-color: var(--line-soft);
  background: linear-gradient(90deg, var(--bg-2) 0%, var(--line-soft) 50%, var(--bg-2) 100%);
  background-size: 200% 100%;
  animation: timeslot-shimmer 1.2s linear infinite;
}
.timeslot.loading::after {
  content: ""; position: absolute; inset: 50% 18% auto 18%;
  height: 6px; border-radius: 3px; transform: translateY(-50%);
  background: var(--line); opacity: 0.55;
}
@keyframes timeslot-shimmer {
  0%   { background-position: 100% 0; }
  100% { background-position: -100% 0; }
}

.timeslots-loading-label {
  grid-column: 1 / -1;
  font-family: "Geist Mono", monospace;
  font-size: 11px; letter-spacing: 0.14em;
  color: var(--text-mute); text-transform: uppercase;
  padding: 4px 0 12px; display: flex; align-items: center; gap: 10px;
}
.timeslots-loading-label::before {
  content: ""; width: 11px; height: 11px; border-radius: 50%;
  border: 1.5px solid var(--line); border-top-color: var(--accent);
  animation: timeslot-spinner 0.7s linear infinite;
}
@keyframes timeslot-spinner { to { transform: rotate(360deg); } }

.booking-form { margin-top: 24px; display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.booking-form .full { grid-column: 1 / -1; }
.input {
  background: var(--bg-2); border: 1px solid var(--line);
  padding: 14px 16px; border-radius: 10px;
  font-size: 14px;
  width: 100%;
  outline: none;
  transition: border-color 0.15s;
}
.input:focus { border-color: var(--accent); }
.input::placeholder { color: var(--text-mute); }

@media (max-width: 900px) { .booking-shell { grid-template-columns: 1fr; padding: 32px; } }

/* ---------- About page ---------- */
.about-hero {
  padding: 120px 0 80px;
}
.about-hero h1 {
  font-family: system-ui, -apple-system, "Segoe UI", sans-serif;
  font-weight: 400;
  font-size: clamp(56px, 8vw, 120px);
  line-height: 0.94;
  letter-spacing: -0.03em;
  max-width: 900px;
}
.about-hero h1 .it { font-style: italic; color: var(--accent); }
.about-hero .meta {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: 24px; margin-top: 64px;
  padding-top: 32px; border-top: 1px solid var(--line-soft);
}
.about-hero .meta-item .lbl {
  font-family: "Geist Mono", monospace; font-size: 11px;
  letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--text-mute);
}
.about-hero .meta-item .val {
  font-family: system-ui, -apple-system, "Segoe UI", sans-serif;
  font-size: 36px;
  margin-top: 8px; line-height: 1;
  white-space: nowrap;
}
/* Mobile: 3 columns become too tight — values overlap and the star row
   gets clipped. Stack vertically and shrink the value font so each row
   has room. */
@media (max-width: 640px) {
  .about-hero .meta { grid-template-columns: 1fr; gap: 20px; margin-top: 40px; padding-top: 24px; }
  .about-hero .meta-item .val { font-size: 28px; }
}

/* Utility: keep on one line at desktop widths, allow wrap on mobile.
   Used on the "★ 4,5 auf Google · 367 Bewertungen" eyebrow which is
   too long for phone viewports. */
.nowrap-md { white-space: normal; }
@media (min-width: 641px) {
  .nowrap-md { white-space: nowrap; }
}

.values-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; }
.value-card {
  padding: 48px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 16px;
  min-height: 300px;
  display: flex; flex-direction: column;
  position: relative;
}
.value-card .n {
  font-family: system-ui, -apple-system, "Segoe UI", sans-serif; font-style: italic;
  font-size: 64px; line-height: 1;
  color: var(--accent);
}
.value-card h3 {
  font-family: system-ui, -apple-system, "Segoe UI", sans-serif; font-weight: 400;
  font-size: 32px; letter-spacing: -0.02em;
  margin-top: 24px;
}
.value-card p { color: var(--text-dim); font-size: 15px; line-height: 1.6; margin-top: 16px; flex: 1; }
@media (max-width: 800px) { .values-grid { grid-template-columns: 1fr; } }

.timeline {
  display: flex; flex-direction: column;
}
.timeline-row {
  display: grid; grid-template-columns: 160px 1fr 1.4fr; gap: 48px;
  padding: 40px 0;
  border-bottom: 1px solid var(--line-soft);
}
.timeline-row:last-child { border-bottom: none; }
.timeline-row .yr {
  font-family: system-ui, -apple-system, "Segoe UI", sans-serif;
  font-size: 56px; line-height: 1;
  letter-spacing: -0.02em;
  color: var(--accent);
}
.timeline-row h4 {
  font-family: system-ui, -apple-system, "Segoe UI", sans-serif; font-weight: 400;
  font-size: 28px; letter-spacing: -0.015em;
}
.timeline-row p { color: var(--text-dim); font-size: 15px; line-height: 1.6; margin: 0; }
@media (max-width: 800px) { .timeline-row { grid-template-columns: 1fr; gap: 12px; } }

/* ---------- Contact page ---------- */
.contact-shell {
  display: grid; grid-template-columns: 1fr 1.1fr;
  gap: 80px;
  padding: 64px 0 120px;
}
.contact-info h2 {
  font-family: system-ui, -apple-system, "Segoe UI", sans-serif; font-weight: 400;
  font-size: clamp(48px, 6vw, 80px);
  line-height: 0.98; letter-spacing: -0.025em;
}
.contact-info p { color: var(--text-dim); font-size: 17px; max-width: 460px; margin-top: 24px; }
.contact-info .channels {
  margin-top: 56px;
  display: flex; flex-direction: column;
}
.channel {
  padding: 24px 0;
  border-top: 1px solid var(--line-soft);
  display: grid; grid-template-columns: 200px 1fr auto; gap: 32px;
  align-items: center;
}
.channel:last-child { border-bottom: 1px solid var(--line-soft); }
.channel .lbl {
  font-family: "Geist Mono", monospace;
  font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--accent);
}
.channel .val { font-size: 17px; font-weight: 500; }
.channel .val a:hover { color: var(--accent); }
.channel .sub { font-size: 13px; color: var(--text-dim); font-family: "Geist Mono", monospace; letter-spacing: 0.06em; }

.contact-form {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 20px;
  padding: 48px;
  display: flex; flex-direction: column; gap: 16px;
}
.contact-form h3 {
  font-family: system-ui, -apple-system, "Segoe UI", sans-serif; font-weight: 400;
  font-size: 32px; letter-spacing: -0.02em;
}
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.form-row.full { grid-template-columns: 1fr; }
.form-field { display: flex; flex-direction: column; gap: 6px; }
.form-field label {
  font-family: "Geist Mono", monospace;
  font-size: 10px; letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--accent);
}
textarea.input { resize: vertical; min-height: 120px; font-family: inherit; }

/* Optional car picker on the contact form. Compact search-and-select:
   visitor types Marke/Modell/Stocknummer, sees up to 8 matches in a
   dropdown, clicks one to tag the inquiry to it. Selected car becomes
   a chip with a clear button. Submitting without picking is fine —
   the form just sends without the Fahrzeug fields. */
.car-picker-compact { position: relative; }
.car-picker-results {
  position: absolute;
  left: 0; right: 0;
  top: calc(100% + 4px);
  z-index: 20;
  max-height: 320px;
  overflow-y: auto;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 10px;
  box-shadow: var(--shadow-card);
}
.car-picker-result {
  display: grid;
  grid-template-columns: 86px 1fr auto;
  align-items: baseline;
  gap: 14px;
  width: 100%;
  padding: 12px 14px;
  background: transparent;
  border: none;
  border-bottom: 1px solid var(--line-soft);
  text-align: left;
  cursor: pointer;
  color: inherit;
  transition: background 0.1s;
}
.car-picker-result:last-child { border-bottom: none; }
.car-picker-result:hover { background: var(--bg-2); }
.car-picker-result-seq {
  font-family: "Geist Mono", monospace;
  font-size: 11px;
  letter-spacing: 0.14em;
  color: var(--text-mute);
}
.car-picker-result-title { font-size: 14px; font-weight: 500; }
.car-picker-result-price {
  font-size: 13px;
  color: var(--accent);
  font-family: system-ui, -apple-system, "Segoe UI", sans-serif;
}
.car-picker-empty {
  padding: 14px;
  color: var(--text-mute);
  font-size: 13px;
  font-style: italic;
  cursor: default;
}
.car-picker-selected {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  background: var(--accent-soft);
  border: 1px solid var(--accent);
  border-radius: 10px;
  font-size: 14px;
}
.car-picker-selected-text { flex: 1; }
.car-picker-clear {
  flex-shrink: 0;
  width: 28px; height: 28px;
  border-radius: 50%;
  background: transparent;
  color: var(--text-dim);
  font-size: 18px;
  line-height: 1;
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
}
.car-picker-clear:hover { background: var(--surface); color: var(--text); }
@media (max-width: 900px) { .contact-shell { grid-template-columns: 1fr; gap: 40px; } }

/* ---------- Tweaks panel ---------- */
.tweaks {
  position: fixed; bottom: 24px; right: 24px;
  z-index: 1000;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 18px;
  padding: 22px;
  width: 280px;
  box-shadow: var(--shadow-card);
  display: none;
}
.tweaks.open { display: block; }
.tweaks-head {
  display: flex; justify-content: space-between; align-items: center;
  margin-bottom: 18px;
}
.tweaks-head .t1 {
  font-family: "Geist Mono", monospace;
  font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--accent);
}
.tweaks-head button { color: var(--text-mute); font-size: 16px; }
.tweak-group { margin-bottom: 20px; }
.tweak-group:last-child { margin-bottom: 0; }
.tweak-group .tlbl {
  font-family: "Geist Mono", monospace;
  font-size: 10px; letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--text-mute); margin-bottom: 10px;
}
.tweak-opts { display: flex; gap: 6px; }
.swatch {
  width: 44px; height: 44px; border-radius: 10px;
  cursor: pointer; transition: transform 0.15s;
  position: relative; overflow: hidden;
  border: 2px solid transparent;
}
.swatch:hover { transform: scale(1.05); }
.swatch.active { border-color: var(--text); }
.swatch.onyx { background: linear-gradient(135deg, #0c0a08 60%, #c9a35b 60%); }
.swatch.cream { background: linear-gradient(135deg, #f3f0eb 60%, #2e5644 60%); }
.swatch.munda { background: linear-gradient(135deg, #0e0907 60%, #c0392b 60%); }
.tweak-segs { display: flex; gap: 4px; background: var(--bg-2); padding: 4px; border-radius: 10px; }
.tweak-seg {
  flex: 1; padding: 8px; font-size: 11px;
  text-align: center; border-radius: 7px;
  color: var(--text-dim); cursor: pointer;
  font-family: "Geist Mono", monospace; letter-spacing: 0.08em;
  text-transform: uppercase;
  transition: all 0.12s;
}
.tweak-seg:hover { color: var(--text); }
.tweak-seg.active { background: var(--surface); color: var(--text); }

/* ---------- Misc utilities ---------- */
.divider { height: 1px; background: var(--line-soft); margin: 80px 0; }
.kbd {
  font-family: "Geist Mono", monospace;
  font-size: 11px;
  padding: 2px 6px;
  border: 1px solid var(--line);
  border-radius: 4px;
  color: var(--text-dim);
}
.tag-pill {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 4px 10px;
  border: 1px solid var(--line);
  border-radius: 999px;
  font-family: "Geist Mono", monospace;
  font-size: 10.5px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-dim);
}

/* =====================================================================
   KFZ-KAUFVERTRAG (online-fillable contract page → printable A4)
   --------------------------------------------------------------------- */
.kv-toolbar { padding: 28px 0 56px; }
.kv-toolbar-row { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; justify-content: center; }
.kv-hint {
  color: var(--text-dim);
  font-size: 13.5px;
  margin: 16px auto 0;
  max-width: 720px;
  line-height: 1.55;
  text-align: center;
}

.kv-doc-wrap { padding: 48px 0 80px; background: var(--bg); }
.kv-doc {
  background: #fff;
  color: #111;
  width: 100%;
  max-width: 210mm;
  margin: 0 auto;
  padding: 14mm 14mm;
  border: 4px solid #1d4ed8;
  box-shadow: 0 8px 24px rgba(0,0,0,0.08);
  font-family: "Geist", system-ui, sans-serif;
  font-size: 12px;
  line-height: 1.4;
}

/* Document header */
.kv-doc-head {
  display: flex; justify-content: space-between; align-items: flex-start;
  padding-bottom: 16px;
  border-bottom: 1px solid #e5e7eb;
}
.kv-title-block h2 {
  font-family: "Inter", "Geist", sans-serif;
  font-weight: 700; font-size: 28px;
  letter-spacing: -0.02em; line-height: 1;
  color: #111;
  margin: 0;
}
.kv-title-block .kv-title-light { color: #2563eb; font-weight: 600; }
.kv-title-block .kv-title-bold  { color: #1e3a8a; font-weight: 700; }
.kv-title-block p { color: #555; font-size: 13px; margin-top: 4px; }
.kv-doc-brand { text-align: right; font-size: 13px; line-height: 1.4; }
.kv-doc-brand a { color: #2563eb; font-weight: 600; text-decoration: none; }
.kv-doc-brand span { display: block; color: #6b7280; font-size: 11.5px; margin-top: 2px; }

/* Each section: side-tab on the left, fields on the right */
.kv-block {
  display: grid;
  grid-template-columns: 160px 1fr;
  gap: 16px;
  padding: 14px 0;
  border-bottom: 1px solid #e5e7eb;
  align-items: start;
}
.kv-block:last-of-type { border-bottom: none; }
.kv-block-side { display: flex; flex-direction: column; gap: 4px; }
.kv-block-side .kv-icon {
  width: 36px; height: 36px;
  border-radius: 50%;
  border: 1.5px solid currentColor;
  display: grid; place-items: center;
  margin-bottom: 6px;
}
.kv-icon svg { width: 18px; height: 18px; }
.kv-icon-blue   { color: #2563eb; }
.kv-icon-green  { color: #16a34a; }
.kv-icon-orange { color: #ea7c2c; }

.kv-side-title { font-family: "Inter", "Geist", sans-serif; font-weight: 700; font-size: 13px; letter-spacing: 0.04em; line-height: 1.15; }
.kv-side-title-blue   { color: #1e3a8a; }
.kv-side-title-green  { color: #166534; }
.kv-side-title-orange { color: #c2410c; }
.kv-side-sub { font-size: 11px; color: #6b7280; }

/* Field rows */
.kv-block-body { display: flex; flex-direction: column; gap: 6px; }
.kv-field {
  display: grid; grid-template-columns: 120px 1fr;
  align-items: center;
  gap: 12px;
}
.kv-field > label {
  font-size: 11px; color: #374151;
  text-align: left;
}
.kv-field-two { grid-template-columns: 120px 100px 1fr; }
.kv-field-suffix { position: relative; }
.kv-field-suffix .kv-suffix {
  position: absolute;
  right: 10px; top: 50%; transform: translateY(-50%);
  font-size: 11px; color: #6b7280;
  pointer-events: none;
}
.kv-no-label > label { display: none; }
.kv-no-label { grid-template-columns: 1fr; }

.kv-doc input[type="text"],
.kv-doc input[type="tel"],
.kv-doc input[type="email"],
.kv-doc textarea {
  width: 100%;
  background: #eef2f9;
  border: none;
  border-radius: 4px;
  padding: 6px 10px;
  font-family: inherit;
  font-size: 12px;
  color: #111;
  line-height: 1.4;
  -webkit-appearance: none;
  appearance: none;
}
.kv-doc textarea { resize: vertical; min-height: 60px; }
.kv-doc input::placeholder { color: #9ca3af; }
.kv-doc input:focus, .kv-doc textarea:focus { outline: 2px solid #2563eb; outline-offset: 1px; }

/* Price grid (Preis · Anzahlung · Rest · Rest am) */
.kv-price-grid {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr;
  gap: 4px 8px;
  margin-bottom: 8px;
}
.kv-price-head {
  background: #1e3a8a;
  color: #fff;
  font-size: 11px;
  text-align: center;
  padding: 6px 8px;
  font-weight: 600;
  border-radius: 2px;
}
.kv-price-label { font-size: 11px; color: #6b7280; padding: 4px 4px 0; }

/* Payment-method row beneath the price grid */
.kv-pay-row {
  display: grid;
  grid-template-columns: 80px 1fr 1fr 1fr;
  gap: 12px;
  align-items: center;
  margin-top: 4px;
}
.kv-pay-label {
  font-size: 11px;
  color: #374151;
}
.kv-pay-cell { display: flex; gap: 12px; padding: 4px 0 0; }
.kv-pay-cell-label {
  font-size: 11px;
  color: #6b7280;
  text-align: right;
  align-self: center;
  padding: 4px 4px 0;
}
.kv-check {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 11.5px; color: #111;
  cursor: pointer;
}
.kv-check input[type="checkbox"] {
  width: 14px; height: 14px;
  margin: 0;
  accent-color: #2563eb;
}
.kv-check-other input[type="text"] { width: 110px; padding: 2px 6px; font-size: 11.5px; }
.kv-inline-input {
  display: inline-block; width: 110px;
  background: #eef2f9; border: none; border-radius: 4px;
  padding: 4px 8px; font-size: 12px; color: #111;
  margin: 0 4px;
}
.kv-inline-wide { width: 260px; }

/* Übergabe */
.kv-handover { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; margin-bottom: 8px; font-size: 12px; color: #111; }
.kv-handover-text { color: #374151; }
.kv-handover-checks { display: flex; flex-wrap: wrap; gap: 16px 24px; }

/* Verkäufer-Garantien — 4 cards in a row */
.kv-guarantees {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr;
  gap: 12px;
}
.kv-guarantee {
  display: flex; flex-direction: column; gap: 4px;
  cursor: pointer;
}
.kv-guarantee-head { display: flex; align-items: center; gap: 8px; }
.kv-guarantee-head strong { font-size: 11.5px; font-weight: 600; color: #111; }
.kv-guarantee p { font-size: 10.5px; color: #6b7280; line-height: 1.4; margin: 0; }

/* Signature block */
.kv-block-sign .kv-block-body { gap: 14px; }
/* Two columns so Ort sits over the seller signature and Datum sits over the buyer signature. */
.kv-sign-row { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; align-items: center; }
.kv-sign-inline { display: inline-flex; align-items: center; gap: 8px; }
.kv-sign-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
.kv-sign-box { display: flex; flex-direction: column; gap: 4px; }
.kv-sign-line { height: 32px; border-bottom: 1.5px solid; }
.kv-sign-line-seller { border-bottom-color: #dc2626; }
.kv-sign-line-buyer  { border-bottom-color: #16a34a; }
.kv-sign-caption { font-size: 11px; text-align: center; padding-top: 4px; }
.kv-sign-caption-seller { color: #dc2626; }
.kv-sign-caption-buyer  { color: #16a34a; }

/* Document footer note */
.kv-doc-foot {
  margin-top: 14px;
  background: #f3f6fd;
  border-radius: 4px;
  padding: 10px 14px;
  font-size: 11.5px;
  color: #1e3a8a;
}
.kv-doc-foot strong { font-weight: 700; }

/* ---- Print-only rules ---------------------------------------------- */
@media print {
  /* Page margins give the contract some breathing room from the paper edge
     (top/bottom/left/right). The doc itself shrinks to fit inside. */
  @page { size: A4; margin: 20mm; }

  /* Hide every chrome that isn't part of the contract itself */
  .no-print,
  [data-slot="header"],
  [data-slot="footer"],
  .page-head,
  .kv-toolbar { display: none !important; }

  body {
    background: #fff;
    overflow: visible !important;
    margin: 0;
  }
  .kv-doc-wrap { padding: 0; background: #fff; }

  /* Print layout sized for 20mm @page margins (170x257mm printable area).
     No outer frame — section dividers carry the visual rhythm on their own.
     Content sizes are modestly above the form-view baseline so the contract
     fills the printable area in a single page. */
  .kv-doc {
    box-shadow: none;
    border: none;
    max-width: none;
    width: 100%;
    min-height: auto;
    padding: 0;
    margin: 0;
    font-size: 11px;
    line-height: 1.3;
    page-break-inside: avoid;
    page-break-after: avoid;
  }
  /* Document header */
  .kv-doc-head { padding-bottom: 8px; }
  .kv-title-block h2 { font-size: 19px; }
  .kv-title-block p { font-size: 10.5px; margin-top: 2px; }
  .kv-doc-brand { font-size: 10.5px; }
  .kv-doc-brand span { font-size: 9.5px; margin-top: 1px; }

  /* Sections — tight enough to fit on one page within the 20mm margins */
  .kv-block {
    grid-template-columns: 115px 1fr;
    gap: 10px;
    padding: 5px 0;
  }
  .kv-block-side .kv-icon { width: 26px; height: 26px; margin-bottom: 2px; }
  .kv-icon svg { width: 14px; height: 14px; }
  .kv-side-title { font-size: 11px; }
  .kv-side-sub   { font-size: 9.5px; }

  .kv-block-body { gap: 5px; }
  .kv-field { grid-template-columns: 95px 1fr; gap: 9px; }
  .kv-field-two { grid-template-columns: 95px 85px 1fr; }
  .kv-field > label { font-size: 10px; }

  .kv-doc input[type="text"],
  .kv-doc input[type="tel"],
  .kv-doc input[type="email"],
  .kv-doc textarea {
    background: #eef2f9 !important;
    color: #111 !important;
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
    font-size: 10.5px;
    padding: 3px 8px;
  }
  .kv-doc textarea { min-height: 28px; }

  /* Price block */
  .kv-price-grid { gap: 3px 8px; }
  .kv-price-head {
    background: #1e3a8a !important;
    color: #fff !important;
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
    font-size: 10.5px;
    padding: 4px 8px;
  }
  .kv-price-label { font-size: 10.5px; padding: 3px 5px 0; }
  .kv-pay-cell { padding-top: 3px; gap: 10px; }
  .kv-pay-cell-label { font-size: 10.5px; padding: 3px 5px 0; }
  .kv-check { font-size: 11px; gap: 5px; }
  .kv-check input[type="checkbox"] { width: 12px; height: 12px; }

  /* Übergabe */
  .kv-handover { font-size: 11px; gap: 5px; margin-bottom: 6px; }
  .kv-handover-checks { gap: 10px 20px; }

  /* Verkäufer-Garantien */
  .kv-guarantees { gap: 10px; }
  .kv-guarantee-head strong { font-size: 11px; }
  .kv-guarantee p { font-size: 10px; line-height: 1.35; }

  /* Signature block — sign-row and sign-grid share the same 2-col template
     so Ort/Datum sit directly above their respective signature lines. */
  .kv-block-sign .kv-block-body { gap: 10px; }
  .kv-sign-row { gap: 18px; }
  .kv-sign-grid { gap: 18px; }
  .kv-sign-line { height: 22px; }
  .kv-sign-caption { font-size: 10px; }
  .kv-inline-input { font-size: 10.5px; padding: 2px 7px; }

  /* Footer hint */
  .kv-doc-foot {
    background: #f3f6fd !important;
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
    font-size: 10px;
    padding: 5px 10px;
    margin-top: 4px;
  }

  /* Make sure scroll-reveal animation doesn't keep anything hidden in print. */
  .reveal { opacity: 1 !important; transform: none !important; }
}

/* ---- Mobile responsive for the contract page ----------------------- */
@media (max-width: 700px) {
  .kv-doc { padding: 10mm 8mm; font-size: 11.5px; }
  .kv-block { grid-template-columns: 1fr; gap: 8px; }
  .kv-block-side { flex-direction: row; align-items: center; gap: 10px; flex-wrap: wrap; }
  .kv-block-side .kv-icon { margin-bottom: 0; }
  .kv-field { grid-template-columns: 100px 1fr; }
  .kv-field-two { grid-template-columns: 100px 1fr 1fr; }
  .kv-price-grid { grid-template-columns: 1fr 1fr; }
  .kv-pay-row { grid-template-columns: 1fr; gap: 6px; }
  .kv-pay-cell { gap: 10px; }
  .kv-guarantees { grid-template-columns: 1fr 1fr; }
  .kv-sign-row { grid-template-columns: 1fr; }
  .kv-sign-grid { grid-template-columns: 1fr; }
}
@media (max-width: 480px) {
  .kv-guarantees { grid-template-columns: 1fr; }
  .kv-handover-checks { flex-direction: column; gap: 8px; }
}

/* fade in animation */
.fade-in { animation: fadeIn 0.6s ease-out both; }
@keyframes fadeIn {
  from { opacity: 0; transform: translateY(12px); }
  to { opacity: 1; transform: translateY(0); }
}

/* Scroll-reveal: each section slides in from the left + fades in the first
   time it enters the viewport. Users with reduced-motion preferences see
   no animation. */
@media (prefers-reduced-motion: no-preference) {
  /* Match ta-autoshop.at: simple fadeInLeft — opacity + translateX from
     -100% to 0, over 1 s, no delay, no curtain. Triggered on first peek. */
  .reveal {
    opacity: 0;
    transform: translate3d(-100%, 0, 0);
  }
  .reveal.is-visible {
    animation: revealFadeInLeft 1s forwards;
  }
}
@keyframes revealFadeInLeft {
  from { opacity: 0; transform: translate3d(-100%, 0, 0); }
  to   { opacity: 1; transform: none; }
}

/* =====================================================================
   COOKIE / EXTERNAL-MEDIA CONSENT
   --------------------------------------------------------------------- */
.consent-overlay {
  position: fixed; inset: 0;
  z-index: 1000;
  background: rgba(0,0,0,0.55);
  display: grid; place-items: center;
  padding: 24px;
  overflow-y: auto;
  /* Disable the reveal animation on the modal itself */
  animation: none;
}
.consent-modal {
  background: var(--bg);
  color: var(--text);
  border-radius: 8px;
  border: 1px solid var(--line);
  max-width: 680px;
  width: 100%;
  max-height: 90vh;
  display: flex; flex-direction: column;
  box-shadow: 0 24px 60px rgba(0,0,0,0.25);
}
.consent-modal h2 {
  font-family: system-ui, -apple-system, "Segoe UI", sans-serif;
  font-weight: 400;
  font-size: 24px;
  letter-spacing: -0.02em;
  padding: 20px 28px 12px;
  border-bottom: 1px solid var(--line-soft);
  margin: 0;
}
.consent-body {
  padding: 16px 28px;
  overflow-y: auto;
  flex: 1;
  font-size: 12.5px;
  line-height: 1.5;
  color: var(--text-dim);
}
.consent-body p { margin-bottom: 8px; }
.consent-body a { color: var(--accent); text-decoration: underline; }
.consent-categories {
  border: none;
  padding: 8px 0 0;
  margin: 16px 0 0;
  display: flex; flex-direction: column;
  gap: 12px;
}
.consent-cat {
  display: grid;
  grid-template-columns: 24px 1fr;
  gap: 12px;
  align-items: start;
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: 6px;
  cursor: pointer;
}
.consent-cat input[type="checkbox"] {
  width: 18px; height: 18px;
  accent-color: var(--accent);
  margin-top: 2px;
}
.consent-cat strong {
  display: block;
  font-size: 13px;
  margin-bottom: 2px;
  color: var(--text);
}
.consent-cat span {
  display: block;
  font-size: 12px;
  color: var(--text-dim);
  line-height: 1.45;
}
.consent-buttons {
  padding: 12px 28px 20px;
  border-top: 1px solid var(--line-soft);
  display: flex; flex-direction: column;
  gap: 6px;
}
.consent-buttons .btn { justify-content: center; padding: 10px 16px; font-size: 13.5px; }

/* Placeholder shown when an external-media iframe is blocked by consent. */
.consent-placeholder {
  display: flex; flex-direction: column;
  justify-content: center; align-items: center;
  gap: 14px;
  text-align: center;
  padding: 32px;
  background: var(--surface);
  border: 1px dashed var(--line);
  border-radius: 8px;
  position: absolute; inset: 0;
  z-index: 2;
}
.consent-placeholder strong { font-size: 15px; }
.consent-placeholder p {
  max-width: 380px;
  font-size: 13.5px;
  color: var(--text-dim);
  line-height: 1.55;
  margin: 0;
}

/* Make the location-map container a positioning context for the placeholder
   and force the iframe to fill it (was using flex layout via the parent). */
.location-map { position: relative; }
.location-map iframe { width: 100%; height: 100%; border: 0; }

@media (max-width: 600px) {
  .consent-modal h2 { padding: 20px 22px 12px; font-size: 24px; }
  .consent-body { padding: 16px 22px; }
  .consent-buttons { padding: 12px 22px 18px; }
}

/* =====================================================================
   MOBILE RESPONSIVE
   --------------------------------------------------------------------- */

/* Foldable / small tablet (769–1024px) ------------------------------
   The editorial bar's grid (1fr auto 1fr) plus 48px padding plus 0.22em-
   tracked nav links needs ~1000px before the logo column gets squeezed
   below its natural width. On a Samsung Z Fold in landscape (~823×708)
   this overflows; compress padding, gap, tracking and logo height so the
   bar still fits without dropping to the hamburger menu. */
@media (min-width: 769px) and (max-width: 1024px) {
  .nav .wrap { height: 88px; padding: 0 20px; }
  .nav-links { gap: 22px; }
  .nav-links a { font-size: 12px; letter-spacing: 0.16em; }
  img.brand-mark { height: 56px; }
  .nav-cta { gap: 18px; }
  .nav-phone { font-size: 15px; }
  .nav-status, .nav-address { font-size: 10px; letter-spacing: 0.18em; }

  /* Hero: the desktop H1 is fixed at 90px which dwarfs an 800px viewport,
     and the 3cm right padding + translateY(-3cm) clip content off the top
     under overflow:hidden. Scale all three down for this band. */
  .hero h1 { font-size: clamp(48px, 9vw, 72px); }
  .hero-tagline { font-size: 15px; }
  .hero-content {
    padding-right: max(1.5cm, 4vw);
    padding-top: clamp(32px, 4vh, 64px);
    transform: translateY(-1.5cm);
  }
}

/* Short landscape viewports (e.g. Z Fold unfolded landscape, 708px tall).
   Desktop hero pattern uses overflow:hidden + transform:translateY(-3cm)
   which clips the H1 above the visible area on heights < 760px. Tame the
   lift, shrink the headline, and relax min-height so the hero still fits
   the viewport vertically. */
@media (max-height: 760px) and (min-width: 769px) {
  .hero { min-height: 440px; max-height: 100vh; }
  .hero h1 { font-size: clamp(40px, 7vw, 60px); }
  .hero-content {
    transform: translateY(-1cm);
    padding-top: 32px;
  }
}

/* Tablet & phone (≤ 768px) ------------------------------------------- */
@media (max-width: 768px) {
  /* Tighter horizontal gutter so content actually fits a 375 px viewport */
  .wrap { padding: 0 20px; }

  /* On mobile the utility topbar (status / address / phone / e-mail) is
     hidden entirely — all of that info is reachable through the hamburger
     menu's CTA block + footer, and the strip otherwise just adds noise
     above the main nav on a narrow screen. */
  .topbar { display: none; }

  /* Topbar: hide the right-hand contact strip (phone + e-mail are repeated
     in the footer and via the nav-cta "Anrufen" button). Keep the open/closed
     status + address on the left. Smaller font + tighter gap. Background
     flips to brand blue so the topbar reads as one continuous strip with
     the mobile browser chrome (theme-color #2563eb). */
  .topbar { background: #2563eb; font-size: 12px; border-bottom-color: rgba(255,255,255,0.18); }
  .topbar .wrap { padding-top: 8px; padding-bottom: 8px; gap: 12px; flex-wrap: wrap; }
  .topbar-left { gap: 12px; flex-wrap: wrap; }
  .topbar-right { display: none; }
  .topbar .sep { display: none; }

  /* Editorial bar on mobile: brand-stack on the left at a reduced scale,
     hamburger on the right; inline desktop nav-links and right cluster
     are hidden in favour of the overlay menu. */
  [data-slot="header"] { padding: 0; }
  .nav .wrap {
    height: 72px;
    padding: 0 20px;
    display: flex; grid-template-columns: none;
    justify-content: space-between; align-items: center;
    gap: 10px;
  }
  .brand-mark, img.brand-mark { height: 48px; }
  .nav-links, .nav-cta { display: none; }
  .nav-toggle { display: flex; }

  /* Hero: smaller heading, no horizontal translate, less padding-bottom,
     full-width CTA. Tagline stays on the right but with reduced max-width. */
  /* On mobile restructure the hero into a vertical stack: image strip at
     the top sized to its natural 4/3 aspect (so all cars stay visible —
     no side-crop), text content as a regular block below it. Replaces
     the desktop overlay layout where the image fills a fixed-height hero
     and the H1/tagline/CTA overlay on top — that pattern can't fit a
     landscape photo + content into a portrait viewport without either
     cropping (cover) or empty space (contain). */
  .hero {
    height: auto;
    min-height: 0;
    max-height: none;
    display: flex;
    flex-direction: column;
    padding: 0; /* overrides the global section { padding: 120px 0 } so the
                   image sits flush against the nav with no empty gap */
  }
  .hero-img {
    position: relative;
    inset: auto;
    width: 100%;
    aspect-ratio: 4 / 3;
    transform: none;
    animation: none;
    background-size: cover !important;
    background-position: center !important;
  }
  .hero::after { content: none; } /* scrim was only for the overlay layout */
  .hero-content {
    position: static;
    height: auto;
    padding: 24px 1cm 32px !important;
    transform: none !important;
    margin-bottom: 0 !important;
    background: var(--bg-2);
    align-items: flex-end;
    text-align: right;
  }
  .hero h1 {
    font-size: clamp(32px, 8.8vw, 54px);
    color: var(--text); /* dark text reads on the light bg-2, not on photo */
  }
  .hero h1 .it { color: var(--accent); }
  .hero-tagline {
    color: var(--text);
    text-shadow: none;
    background: transparent;
    padding: 0;
  }
  .hero-content {
    padding-top: 24px;
    padding-bottom: 1.5cm;
    margin-bottom: -1cm;
    transform: none;
  }
  .hero-tagline { font-size: 14px; max-width: 100%; }
  .hero-cta {
    width: 100%;
    /* Cap the CTA's stretch so it doesn't span the entire viewport on
       phablets / foldables, where a full-width button looks oversized.
       Push it to the right edge so it visually anchors with the hero copy. */
    max-width: 360px;
    margin-left: auto;
  }
  .hero-cta .btn { flex: 1 1 auto; justify-content: center; }
  .btn-lg { padding: 12px 18px; font-size: 14px; }

  /* Section vertical padding: 80–120 px on desktop is too much on phones */
  section { padding: 56px 0; }

  /* Page header */
  .page-head { padding: 56px 0 32px; }
  .page-head h1 { font-size: clamp(36px, 9vw, 56px); }

  /* Section heads stack instead of side-by-side text columns */
  .section-head { grid-template-columns: 1fr; gap: 24px; }

  /* Footer columns stack (already in 900px breakpoint elsewhere; reinforce
     padding/font here so single column fits comfortably). */
  .footer-top { grid-template-columns: 1fr; gap: 32px; padding: 48px 0 32px; }
  .footer-bottom { flex-direction: column; gap: 16px; align-items: flex-start; padding: 24px 0; }
  .footer-bottom .links { flex-wrap: wrap; gap: 16px; }

  /* Inventory shell: filters above grid (already stacks at 1000px) */
  .filter-sidebar { position: static; max-height: none; }

  /* Detail page hero on mobile: re-order from the customer's perspective.
     The buyer's mental flow is "look → confirm → decide → act":
       1. Photo (visual hook, the emotional reason for tapping in)
       2. Title block (brand·year, model, subtitle — confirms right car)
       3. Price + monthly rate (financial fit check)
       4. Quickspecs (year/km/fuel/gear at-a-glance scan)
       5. Action toolbar (Probefahrt + Anrufen/WhatsApp/Anfrage/Merken)
       6. Warranty badge (supportive info, less time-critical)
       7. Ansprechpartner box (personal close)
     Implemented by switching .detail-hero to flex-column and exposing
     .detail-side's children as flex items via display:contents so per-
     element `order` works. */
  .detail-hero {
    display: flex; flex-direction: column;
    gap: 16px;
    padding: 32px 0 48px;
  }
  .detail-hero > div:first-child       { order: 1; } /* gallery wrapper */
  .detail-side                         { display: contents; }
  .detail-side > .eyebrow              { order: 2; }
  .detail-side > h1                    { order: 2; }
  .detail-side > .subtitle             { order: 2; }
  /* Quickspecs come right after the title (at-a-glance "is this the
     car for me?" scan), then the price+financing block sits directly
     above the Probefahrt buchen CTA so the user sees the financial
     fit at the moment of decision. */
  .detail-side > .detail-quickspecs    { order: 3; }
  .detail-side > .price-block          { order: 4; }
  .detail-side > .detail-actions       { order: 5; }
  .detail-side > #warrantyBadge        { order: 6; }
  .detail-side > div:last-child        { order: 7; } /* Ansprechpartner */

  /* Tighten basic-info spacing on mobile. detail-side uses display:contents
     so its children become direct flex items of .detail-hero (gap: 16px).
     Margins don't collapse in flex — zero per-child margins so we don't
     double-stack space. The flex gap controls all spacing. */
  .detail-side h1 { font-size: clamp(28px, 7vw, 44px); margin: 0 0 4px; }
  .detail-side .subtitle { margin: 0 0 12px; font-size: 15px; }
  .detail-side .price-block { padding: 12px 0 0; margin: 0; }
  .detail-side .price-rate { margin-top: 16px; }
  .price-main { font-size: clamp(28px, 7vw, 40px); }
  .detail-side .garantie-badge { margin: 0; }
  .detail-side .detail-quickspecs { margin: 0; }
  .detail-side .detail-actions { margin-top: 0; }
  .gallery-thumbs { gap: 8px; }
  .gallery-nav { width: 36px; height: 36px; }

  /* Forms: stack 2-column form-rows */
  .form-row { grid-template-columns: 1fr !important; gap: 12px; }

  /* Contact channels: stack vertically (channel button below text) */
  .channel { grid-template-columns: 1fr; gap: 12px; }

  /* Kontakt: location info / map stack */
  .pieces { grid-template-columns: 1fr; }

  /* USP grid: 1 col on phones (was 2 col at <1000px) */
  .usp-grid { grid-template-columns: 1fr; }
}

/* Phone only (≤ 480px) ----------------------------------------------- */
@media (max-width: 480px) {
  .wrap { padding: 0 16px; }
  .hero h1 { font-size: clamp(34px, 12.5vw, 56px); line-height: 1.05; }
  .hero-content { padding-bottom: 1cm; margin-bottom: -0.5cm; }
  section { padding: 44px 0; }
  .page-head h1 { font-size: clamp(30px, 10vw, 44px); }
  .nav .wrap { padding-top: 8px; padding-bottom: 8px; }
  .nav-cta .btn { padding: 7px 10px; font-size: 12px; }
  .nav-cta .btn-primary .arr { display: none; } /* the → arrow eats space */
}

/* =================================================================
   PRINT — Fahrzeug-Datenblatt (fits 2 pages)
   ================================================================= */
/* Triggered by the "Drucken" tile on the car-detail page. Goal: a clean
   spec sheet that fits on at most 2 A4 pages — photo + title + price +
   quickspecs + warranty on page 1, full Technische-Daten + Komfort &
   Assistenz on page 2. Everything else stripped. */
@media print {
  @page { margin: 12mm 12mm; }
  /* Reset the dark-theme tokens to light values for print, otherwise the
     onyx/munda theme paints body and every var(--bg) consumer in near-
     black, which then bleeds into the page margins. */
  :root,
  body,
  body[data-theme="onyx"],
  body[data-theme="munda"],
  body[data-theme="cream"] {
    --bg: #fff !important;
    --bg-2: #f7f6f3 !important;
    --surface: #fff !important;
    --surface-2: #f0eee9 !important;
    --line: #c9c4ba !important;
    --line-soft: #ddd8cd !important;
    --text: #000 !important;
    --text-dim: #333 !important;
    --text-mute: #666 !important;
    --accent: #2563eb !important;
    color-scheme: light !important;
  }
  html, body { background: #fff !important; color: #000 !important; }
  body[data-page="inventory"] {
    font-family: system-ui, -apple-system, "Segoe UI", sans-serif !important;
  }
  /* Force background-images (gallery hero uses background-image, not
     <img>) to print on .gallery .main only — applying it globally with
     `*` was what forced the dark body background to render through the
     page margins in the previous version. */
  .gallery .main { -webkit-print-color-adjust: exact !important; print-color-adjust: exact !important; }

  /* Hide everything not in the datasheet. */
  [data-slot="header"],
  [data-slot="footer"],
  .crumbs,
  .gallery-nav,
  .gallery-fullscreen,
  .gallery-counter,
  .gallery-thumbs,
  .finance-toggle,
  .finance-calc,
  .price-rate,
  .detail-actions,
  .booking-section,
  #booking-section,
  #booking,
  #inquiry,
  #similarSection,
  .similar-section,
  .similar-cars,
  .tweaks-panel,
  #tweaksPanel,
  .footer-heart-panel,
  .cookie-banner,
  .nav-toggle,
  .mobile-menu,
  /* Section heads with their lede paragraphs — keep the grids, drop the chatty intros. */
  .specs-section .section-head,
  .equipment-section .section-head,
  /* Ansprechpartner box — last sibling of .detail-side, no class, distinctive last-child position */
  .detail-side > div:last-child { display: none !important; }

  /* Container reset. */
  .wrap { max-width: none !important; padding: 0 !important; }
  section { padding: 0 !important; margin: 0 !important; }

  /* Detail hero — block layout, source order (photo first). Reset the
     mobile @media reorder so we don't fall into flex-order territory at
     print viewport size (~794px), which would otherwise still apply. */
  .detail-hero {
    display: block !important;
    padding: 0 0 8px !important;
    gap: 0 !important;
    border-bottom: 1px solid #ccc;
    margin-bottom: 8px !important;
  }
  .detail-side { display: block !important; }
  .detail-side > * { order: 0 !important; }
  .detail-hero > div:first-child { order: 0 !important; }

  /* Gallery photo: show the WHOLE car without cropping. background-size:
     cover (previously) always cropped one edge of the photo to fit the
     container; switched to `contain` so the entire image is visible.
     Slight whitespace on the sides if the photo's aspect ratio doesn't
     match the container — coloured with the light --bg-2 token so it
     reads as an intentional frame, not a layout bug. */
  .gallery .main {
    aspect-ratio: auto !important;
    height: 110mm !important;
    border-radius: 4px !important;
    margin-bottom: 10px;
    page-break-inside: avoid;
    background-size: contain !important;
    background-position: center !important;
    background-repeat: no-repeat !important;
    background-color: var(--bg-2) !important;
  }
  .gallery .main img { width: 100% !important; height: auto !important; }

  /* Title block: tight. */
  .detail-side .eyebrow { font-size: 10pt !important; color: #555 !important; letter-spacing: 0.1em; }
  .detail-side h1 {
    font-size: 20pt !important;
    line-height: 1.05 !important;
    margin: 2px 0 4px !important;
    page-break-after: avoid;
  }
  .detail-side .subtitle {
    font-size: 10pt !important;
    color: #444 !important;
    margin: 0 0 10px !important;
  }

  /* Price block. */
  .price-block { padding: 0 !important; margin: 0 0 10px !important; }
  .price-main { font-size: 18pt !important; color: #000 !important; font-weight: 600; }
  .price-row { display: flex !important; justify-content: space-between; align-items: baseline; }
  .price-stock { color: #555 !important; font-size: 10pt !important; }

  /* Quickspecs key/value rows — tight. */
  .detail-quickspecs { margin: 0 0 10px !important; page-break-inside: avoid; }
  .qs-row {
    display: flex !important;
    justify-content: space-between;
    padding: 2px 0 !important;
    border-bottom: 1px solid #ddd !important;
    font-size: 9.5pt !important;
  }
  .qs-row dt { color: #555 !important; text-transform: uppercase; letter-spacing: 0.06em; }
  .qs-row dd { color: #000 !important; font-weight: 500; }

  /* Warranty pill — text only, no big icon, no green tint. */
  .garantie-badge {
    margin: 0 0 10px !important;
    padding: 6px 10px !important;
    background: #fff !important;
    border: 1px solid #999 !important;
    color: #000 !important;
    page-break-inside: avoid;
    font-size: 9.5pt !important;
  }
  .garantie-badge svg { display: none !important; }

  /* PAGE 2 — Specs grid: 2-col, tight. */
  .specs-section { padding: 0 !important; page-break-before: auto; }
  .specs-grid {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 4px 20px !important;
  }
  .spec-block {
    page-break-inside: avoid;
    border: none !important;
    padding: 0 !important;
    margin-bottom: 6px !important;
  }
  .spec-block h4 {
    font-size: 9.5pt !important;
    margin: 4px 0 2px !important;
    border-bottom: 1px solid #000;
    padding-bottom: 1px;
    text-transform: uppercase;
    letter-spacing: 0.08em;
  }
  .spec-block .row {
    display: flex !important;
    justify-content: space-between;
    padding: 1px 0 !important;
    border-bottom: 1px dotted #ccc;
    font-size: 9pt !important;
  }
  .spec-block .row .k { color: #444 !important; }
  .spec-block .row .v { color: #000 !important; text-align: right; font-weight: 500; }

  /* Equipment list — compact 3-column tag cloud under the specs. */
  .equipment-section { padding: 0 !important; }
  .equipment-grid {
    column-count: 3;
    column-gap: 16px;
    font-size: 8.5pt !important;
    margin-top: 6px;
  }
  .equipment-grid > * {
    break-inside: avoid;
    padding: 1px 0;
    color: #000 !important;
    background: transparent !important;
    border: none !important;
  }

  /* Print footer band — fixed at bottom of every page. */
  body[data-page="inventory"]::after {
    content: "Autohaus M&A e.U. · Biberhaufenweg 19A, 1220 Wien · +43 664 8871 6789 · munda.at";
    display: block;
    margin-top: 14px;
    padding-top: 6px;
    border-top: 1px solid #000;
    font-size: 8pt;
    color: #555;
    text-align: center;
  }

  a { color: #000 !important; text-decoration: none !important; }
  img { max-width: 100% !important; }
}