/* ==========================================================================
   H&S Automobile — Stylesheet
   Mobile-first. Ausschliesslich Tokens aus tokens.css, keine rohen Hex-Werte.
   ========================================================================== */

@import url('fonts.css');
@import url('tokens.css');

/* ==========================================================================
   Reset
   ========================================================================== */
*, *::before, *::after { box-sizing: border-box; }

* { margin: 0; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--header-height) + var(--space-4));
}

body {
  min-height: 100svh;
  background: var(--surface-canvas);
  color: var(--text-primary);
  font-family: var(--font-body);
  font-size: var(--text-base);
  line-height: var(--leading-normal);
  font-synthesis-weight: none;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

img, svg, video, picture { display: block; max-width: 100%; height: auto; }
input, button, textarea, select { font: inherit; color: inherit; }
button { background: none; border: none; cursor: pointer; }
ul, ol { list-style: none; padding: 0; }

a { color: inherit; text-decoration: none; }

:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
  outline: var(--ring-width) solid var(--focus-ring);
  outline-offset: var(--ring-offset);
  border-radius: var(--radius-xs);
}

::selection { background: var(--brand); color: var(--text-on-brand); }

/* Bildschirmleser-only */
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0;
  margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap;
}

.skip-link {
  position: absolute; left: var(--space-4); top: var(--space-2);
  z-index: var(--z-toast);
  padding: var(--space-2) var(--space-4);
  background: var(--brand); color: var(--text-on-brand);
  border-radius: var(--radius-sm);
  transform: translateY(-160%);
  transition: transform var(--duration-fast) var(--ease-out);
}
.skip-link:focus { transform: translateY(0); }

/* ==========================================================================
   Typografie
   ========================================================================== */
h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: var(--weight-bold);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-tight);
  text-wrap: balance;
}
h1 { font-size: var(--text-5xl); letter-spacing: var(--tracking-tighter); }
h2 { font-size: var(--text-4xl); }
h3 { font-size: var(--text-2xl); }
h4 { font-size: var(--text-lg); }

p { text-wrap: pretty; }

.kicker {
  display: inline-flex; align-items: center; gap: var(--space-2);
  font-family: var(--font-body);
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-widest);
  text-transform: uppercase;
  color: var(--brand-text);
}
.kicker::before {
  content: ''; width: var(--space-6); height: 2px;
  background: var(--brand); flex: none;
}

.lead {
  font-size: var(--text-lg);
  color: var(--text-secondary);
  line-height: var(--leading-relaxed);
  max-width: 60ch;
}

.muted { color: var(--text-muted); }
.small { font-size: var(--text-sm); }
.tabular { font-variant-numeric: tabular-nums; }

/* ==========================================================================
   Layout
   ========================================================================== */
.container {
  width: 100%;
  max-width: var(--container-xl);
  margin-inline: auto;
  padding-inline: var(--pad-inline);
}
.container--md { max-width: var(--container-md); }
.container--sm { max-width: var(--container-sm); }

.section { padding-block: var(--section-pad-block); }
.section--tight { padding-block: clamp(var(--space-8), 5vw, var(--space-16)); }
.section--light { background: var(--surface-canvas); color: var(--text-primary); }
.section--sunken { background: var(--surface-sunken); }
.section--raised { background: var(--surface-raised); }

.section-head {
  display: flex; flex-direction: column; gap: var(--space-3);
  margin-bottom: var(--space-10);
  max-width: 62ch;
}
.section-head--split { max-width: none; }

@media (min-width: 60rem) {
  .section-head--split {
    flex-direction: row; align-items: flex-end; justify-content: space-between;
    gap: var(--space-8);
  }
  .section-head--split > .section-head__text { max-width: 62ch; }
}

.stack { display: flex; flex-direction: column; gap: var(--gap-stack); }
.row { display: flex; flex-wrap: wrap; gap: var(--gap-inline); align-items: center; }

.grid { display: grid; gap: var(--gap-grid); }
.grid--auto  { grid-template-columns: repeat(auto-fill, minmax(min(100%, 17rem), 1fr)); }
.grid--wide  { grid-template-columns: repeat(auto-fill, minmax(min(100%, 22rem), 1fr)); }
.grid--2 { grid-template-columns: 1fr; }
.grid--3 { grid-template-columns: 1fr; }
.grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }

@media (min-width: 48rem) {
  .grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .grid--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
@media (min-width: 68rem) {
  .grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

.divider { height: 1px; background: var(--border-subtle); border: 0; }

/* ==========================================================================
   Buttons
   ========================================================================== */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  gap: var(--space-2);
  height: var(--btn-height-md);
  padding-inline: var(--btn-pad-x-md);
  border-radius: var(--btn-radius);
  font-family: var(--btn-font);
  font-size: var(--text-sm);
  font-weight: var(--btn-weight);
  letter-spacing: var(--btn-tracking);
  text-transform: uppercase;
  white-space: nowrap;
  border: 1px solid transparent;
  transition:
    background-color var(--duration-fast) var(--ease-in-out),
    border-color var(--duration-fast) var(--ease-in-out),
    color var(--duration-fast) var(--ease-in-out),
    box-shadow var(--duration-normal) var(--ease-out),
    transform var(--duration-fast) var(--ease-out);
}
.btn:active { transform: translateY(1px); }
.btn[disabled], .btn[aria-disabled='true'] {
  opacity: var(--opacity-disabled); pointer-events: none; cursor: not-allowed;
}
.btn--sm { height: var(--btn-height-sm); padding-inline: var(--btn-pad-x-sm); font-size: var(--text-xs); }
.btn--lg { height: var(--btn-height-lg); padding-inline: var(--btn-pad-x-lg); font-size: var(--text-base); }
.btn--block { width: 100%; }

.btn--primary {
  background: var(--btn-primary-bg);
  color: var(--btn-primary-fg);
}
.btn--primary:hover { background: var(--btn-primary-bg-hover); box-shadow: var(--btn-primary-shadow); }
.btn--primary:active { background: var(--btn-primary-bg-active); box-shadow: none; }

.btn--secondary {
  background: var(--btn-secondary-bg);
  color: var(--btn-secondary-fg);
  border-color: var(--btn-secondary-border);
}
.btn--secondary:hover { background: var(--btn-secondary-bg-hover); border-color: var(--border-strong); }

.btn--outline {
  color: var(--btn-outline-fg);
  border-color: var(--btn-outline-border);
}
.btn--outline:hover { border-color: var(--btn-outline-border-hover); color: var(--brand-text); }

.btn--ghost { color: var(--btn-ghost-fg); }
.btn--ghost:hover { color: var(--btn-ghost-fg-hover); background: var(--btn-ghost-bg-hover); }

.btn--whatsapp { background: var(--success); color: var(--text-on-brand); }
.btn--whatsapp:hover { filter: brightness(1.12); }

.btn--danger { background: var(--danger); color: var(--text-on-brand); }

/* ==========================================================================
   Chips & Badges
   ========================================================================== */
.chip {
  display: inline-flex; align-items: center; gap: var(--space-1);
  padding: var(--chip-pad);
  border-radius: var(--chip-radius);
  background: var(--chip-bg);
  border: 1px solid var(--chip-border);
  color: var(--chip-fg);
  font-size: var(--chip-font-size);
  line-height: 1.4;
  white-space: nowrap;
}
.chip--brand { background: var(--brand-subtle); border-color: var(--brand-border); color: var(--brand-text); }

.badge {
  display: inline-flex; align-items: center; gap: var(--space-1);
  padding: var(--badge-pad);
  border-radius: var(--badge-radius);
  font-size: var(--badge-font-size);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--badge-tracking);
  text-transform: uppercase;
  background: var(--surface-overlay);
  color: var(--text-secondary);
}
.badge--brand   { background: var(--brand); color: var(--text-on-brand); }
.badge--success { background: var(--success-subtle); color: var(--success-text); }
.badge--warning { background: var(--warning-subtle); color: var(--warning-text); }
.badge--danger  { background: var(--danger-subtle);  color: var(--danger-text); }
.badge--info    { background: var(--info-subtle);    color: var(--info-text); }
.badge--solid-dark { background: rgb(10 10 10 / 0.78); color: var(--ink-50); backdrop-filter: blur(6px); }

/* ==========================================================================
   Header / Navigation
   ========================================================================== */
.header {
  position: sticky; top: 0; z-index: var(--z-header);
  background: var(--nav-bg);
  border-bottom: 1px solid var(--nav-border);
  backdrop-filter: blur(var(--nav-blur)) saturate(140%);
  transition: background-color var(--duration-normal) var(--ease-in-out);
}
.header[data-scrolled='true'] { background: var(--nav-bg-scrolled); box-shadow: var(--shadow-md); }

.header__bar {
  display: flex; align-items: center; gap: var(--space-4);
  height: var(--header-height);
}

.logo { display: flex; align-items: center; gap: var(--space-3); flex: none; }
.logo__mark { width: 2.25rem; height: 2.25rem; flex: none; }
.logo__text { display: flex; flex-direction: column; line-height: 1.05; }
.logo__name {
  font-family: var(--font-display); font-weight: var(--weight-bold);
  font-size: var(--text-lg); letter-spacing: var(--tracking-tight);
}
.logo__sub {
  font-size: var(--text-2xs); letter-spacing: var(--tracking-widest);
  text-transform: uppercase; color: var(--text-muted);
}

.nav { display: none; }

.nav__link {
  position: relative;
  display: inline-flex; align-items: center;
  height: var(--header-height);
  padding-inline: var(--space-3);
  color: var(--nav-fg);
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
  transition: color var(--duration-fast) var(--ease-in-out);
}
.nav__link::after {
  content: ''; position: absolute; inset-inline: var(--space-3); bottom: 0;
  height: 2px; background: var(--nav-indicator);
  transform: scaleX(0); transform-origin: left;
  transition: transform var(--duration-normal) var(--ease-out);
}
.nav__link:hover { color: var(--nav-fg-hover); }
.nav__link:hover::after,
.nav__link[aria-current='page']::after { transform: scaleX(1); }
.nav__link[aria-current='page'] { color: var(--nav-fg-active); }

.header__actions { margin-inline-start: auto; display: flex; align-items: center; gap: var(--space-2); }
.header__cta { display: none; }

.burger {
  display: grid; place-items: center;
  width: var(--btn-height-md); height: var(--btn-height-md);
  border-radius: var(--radius-sm);
  border: 1px solid var(--border-default);
  color: var(--text-primary);
}
.burger:hover { background: var(--surface-hover); }
.burger__lines { display: block; width: 1.15rem; height: 2px; background: currentColor; position: relative; }
.burger__lines::before, .burger__lines::after {
  content: ''; position: absolute; left: 0; width: 100%; height: 2px; background: currentColor;
  transition: transform var(--duration-normal) var(--ease-out), top var(--duration-normal) var(--ease-out);
}
.burger__lines::before { top: -6px; }
.burger__lines::after  { top: 6px; }
.burger[aria-expanded='true'] .burger__lines { background: transparent; }
.burger[aria-expanded='true'] .burger__lines::before { top: 0; transform: rotate(45deg); }
.burger[aria-expanded='true'] .burger__lines::after  { top: 0; transform: rotate(-45deg); }

/* Mobiles Menü */
.drawer {
  position: fixed; inset: var(--header-height) 0 0 0;
  z-index: var(--z-drawer);
  background: var(--surface-canvas);
  padding: var(--space-6) var(--pad-inline) var(--space-12);
  overflow-y: auto;
  overscroll-behavior: contain;
  display: flex; flex-direction: column; gap: var(--space-6);
  transform: translateX(100%);
  visibility: hidden;
  transition: transform var(--duration-normal) var(--ease-out), visibility var(--duration-normal);
}
.drawer[data-open='true'] { transform: translateX(0); visibility: visible; }

.drawer__link {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--space-3);
  padding: var(--space-4) 0;
  border-bottom: 1px solid var(--border-subtle);
  font-family: var(--font-display);
  font-size: var(--text-xl);
  font-weight: var(--weight-semibold);
}
.drawer__link[aria-current='page'] { color: var(--brand-text); }
.drawer__link span:last-child { color: var(--text-muted); font-size: var(--text-base); }

body[data-drawer='open'] { overflow: hidden; }

@media (min-width: 64rem) {
  .nav { display: flex; align-items: center; gap: var(--space-1); }
  .burger { display: none; }
  .drawer { display: none; }
  .header__cta { display: inline-flex; }
}

/* ==========================================================================
   Aktionsband (Banner)
   ========================================================================== */
.announce {
  background: var(--brand);
  color: var(--text-on-brand);
  font-size: var(--text-sm);
  text-align: center;
  padding: var(--space-2) var(--pad-inline);
}
.announce a { text-decoration: underline; text-underline-offset: 3px; font-weight: var(--weight-semibold); }

/* ==========================================================================
   Hero
   ========================================================================== */
.hero {
  position: relative;
  min-height: var(--hero-min-height-sm);
  display: grid; align-items: end;
  isolation: isolate;
  overflow: hidden;
}
@media (min-width: 48rem) { .hero { min-height: var(--hero-min-height); } }

.hero__media {
  position: absolute; inset: 0; z-index: -2;
}
.hero__media img, .hero__media svg {
  width: 100%; height: 100%; object-fit: cover;
}
.hero::after {
  content: ''; position: absolute; inset: 0; z-index: -1;
  background: var(--hero-overlay);
}

.hero__inner {
  padding-block: clamp(var(--space-12), 9vw, var(--space-24));
  display: flex; flex-direction: column; gap: var(--space-5);
  max-width: 46rem;
}
.hero__title {
  font-size: var(--hero-title-size);
  font-weight: var(--hero-title-weight);
  letter-spacing: var(--hero-title-tracking);
}
.hero__title em { font-style: normal; color: var(--brand-text); }
.hero__actions { display: flex; flex-wrap: wrap; gap: var(--space-3); }
.hero__actions .btn { flex: 1 1 14rem; }
@media (min-width: 30rem) { .hero__actions .btn { flex: 0 0 auto; } }

.hero__stats {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(6.5rem, 1fr));
  gap: var(--space-4) var(--space-8);
  margin-top: var(--space-4);
  padding-top: var(--space-6);
  border-top: 1px solid var(--border-default);
}
.stat__value {
  font-family: var(--font-display);
  font-size: var(--text-3xl); font-weight: var(--weight-bold);
  letter-spacing: var(--tracking-tight);
  font-variant-numeric: tabular-nums;
}
.stat__label {
  font-size: var(--text-xs); color: var(--text-muted);
  letter-spacing: var(--tracking-wide); text-transform: uppercase;
}

/* ==========================================================================
   Schnellsuche (unter dem Hero)
   ========================================================================== */
.quicksearch {
  background: var(--surface-raised);
  border: 1px solid var(--border-subtle);
  border-radius: var(--card-radius);
  padding: var(--space-5);
  box-shadow: var(--shadow-lg);
  display: grid; gap: var(--space-4);
}
.quicksearch__grid {
  display: grid; gap: var(--space-3);
  grid-template-columns: 1fr;
}
@media (min-width: 40rem) { .quicksearch__grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 64rem) { .quicksearch__grid { grid-template-columns: repeat(4, 1fr); } }
.quicksearch--floating { margin-top: calc(var(--space-10) * -1); position: relative; z-index: 1; }

/* ==========================================================================
   Formularfelder
   ========================================================================== */
.field { display: flex; flex-direction: column; gap: var(--space-2); min-width: 0; }
.field__label {
  font-size: var(--input-label-size);
  font-weight: var(--weight-medium);
  color: var(--input-label-color);
}
.field__hint { font-size: var(--text-xs); color: var(--text-muted); }
.field__error { font-size: var(--text-xs); color: var(--danger-text); }

.input, .select, .textarea {
  width: 100%;
  min-height: var(--input-height);
  padding: var(--space-2) var(--input-pad-x);
  background: var(--input-bg);
  color: var(--input-fg);
  border: 1px solid var(--input-border);
  border-radius: var(--input-radius);
  font-size: var(--text-base);   /* ≥16px: iOS zoomt sonst beim Fokus */
  transition: border-color var(--duration-fast) var(--ease-in-out), background-color var(--duration-fast) var(--ease-in-out);
}
.input::placeholder, .textarea::placeholder { color: var(--input-placeholder); }
.input:hover, .select:hover, .textarea:hover { border-color: var(--input-border-hover); }
.input:focus, .select:focus, .textarea:focus {
  outline: none;
  border-color: var(--input-border-focus);
  box-shadow: 0 0 0 3px var(--brand-subtle);
}
.input[aria-invalid='true'], .textarea[aria-invalid='true'] { border-color: var(--input-border-error); }
.textarea { min-height: 8rem; resize: vertical; line-height: var(--leading-normal); }

.select {
  appearance: none;
  padding-right: var(--space-8);
  background-image: linear-gradient(45deg, transparent 50%, currentColor 50%), linear-gradient(135deg, currentColor 50%, transparent 50%);
  background-position: right var(--space-4) center, right calc(var(--space-4) - 5px) center;
  background-size: 5px 5px, 5px 5px;
  background-repeat: no-repeat;
}

.check { display: flex; align-items: flex-start; gap: var(--space-3); font-size: var(--text-sm); color: var(--text-secondary); }
.check input { width: 1.15rem; height: 1.15rem; margin-top: 0.15rem; accent-color: var(--brand); flex: none; }

/* ==========================================================================
   Fahrzeugkarte
   ========================================================================== */
.vcard {
  display: flex; flex-direction: column;
  background: var(--card-bg);
  border: 1px solid var(--card-border);
  border-radius: var(--card-radius);
  overflow: hidden;
  transition:
    border-color var(--duration-fast) var(--ease-in-out),
    box-shadow var(--duration-normal) var(--ease-out),
    transform var(--duration-normal) var(--ease-out);
}
@media (hover: hover) {
  .vcard:hover { border-color: var(--card-border-hover); box-shadow: var(--card-shadow-hover); transform: translateY(-3px); }
  .vcard:hover .vcard__img { transform: scale(1.045); }
}
.vcard:focus-within { border-color: var(--card-border-hover); }

.vcard__media {
  position: relative;
  aspect-ratio: var(--card-media-ratio);
  background: var(--surface-sunken);
  overflow: hidden;
}
.vcard__img {
  width: 100%; height: 100%; object-fit: cover;
  transition: transform var(--duration-slow) var(--ease-out);
}
.vcard__flags {
  position: absolute; top: var(--space-3); left: var(--space-3);
  display: flex; flex-wrap: wrap; gap: var(--space-1); max-width: calc(100% - var(--space-6));
}
.vcard__count {
  position: absolute; bottom: var(--space-3); right: var(--space-3);
}
.vcard__fav {
  position: absolute; top: var(--space-2); right: var(--space-2);
  width: 2.25rem; height: 2.25rem;
  display: grid; place-items: center;
  border-radius: var(--radius-full);
  background: rgb(10 10 10 / 0.62);
  color: var(--ink-50); font-size: var(--text-lg); line-height: 1;
  backdrop-filter: blur(6px);
  transition: background-color var(--duration-fast), color var(--duration-fast), transform var(--duration-fast);
}
.vcard__fav:hover { background: var(--brand); transform: scale(1.08); }
.vcard__fav[aria-pressed='true'] { background: var(--brand); color: var(--text-on-brand); }

.vcard__body { padding: var(--card-pad); display: flex; flex-direction: column; gap: var(--card-gap); flex: 1; }
.vcard__brand {
  font-size: var(--text-xs); letter-spacing: var(--tracking-wide);
  text-transform: uppercase; color: var(--text-muted);
}
.vcard__title {
  font-family: var(--font-display);
  font-size: var(--text-lg); font-weight: var(--weight-semibold);
  line-height: var(--leading-snug);
  letter-spacing: var(--tracking-tight);
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.vcard__specs {
  display: flex; flex-wrap: wrap; gap: var(--space-1) var(--space-2);
  font-size: var(--text-xs); color: var(--text-secondary);
}
.vcard__specs li { display: flex; align-items: center; gap: var(--space-1); }
.vcard__specs li + li::before { content: '·'; color: var(--text-muted); margin-right: var(--space-1); }

.vcard__foot {
  margin-top: auto; padding-top: var(--card-gap);
  border-top: 1px solid var(--border-subtle);
  display: flex; align-items: flex-end; justify-content: space-between; gap: var(--space-3);
}
.vcard__price {
  font-family: var(--font-display);
  font-size: var(--text-xl); font-weight: var(--weight-bold);
  letter-spacing: var(--tracking-tight);
  font-variant-numeric: tabular-nums;
}
.vcard__price-note { font-size: var(--text-2xs); color: var(--text-muted); }
.vcard__price-old {
  font-size: var(--text-xs); color: var(--text-muted);
  text-decoration: line-through;
}
.vcard__link { display: contents; }

/* Skeleton beim Laden */
.vcard--skeleton { pointer-events: none; }
.skeleton {
  background: linear-gradient(90deg, var(--surface-sunken) 0%, var(--surface-hover) 50%, var(--surface-sunken) 100%);
  background-size: 200% 100%;
  animation: shimmer 1.4s linear infinite;
  border-radius: var(--radius-sm);
  color: transparent;
}
@keyframes shimmer { to { background-position: -200% 0; } }

/* ==========================================================================
   Fahrzeugliste: Filterleiste
   ========================================================================== */
.listing { display: grid; gap: var(--gap-grid); align-items: start; }
@media (min-width: 68rem) {
  .listing { grid-template-columns: 18rem minmax(0, 1fr); }
}

.filters {
  background: var(--surface-raised);
  border: 1px solid var(--border-subtle);
  border-radius: var(--card-radius);
  padding: var(--space-5);
  display: flex; flex-direction: column; gap: var(--space-5);
}
@media (min-width: 68rem) { .filters { position: sticky; top: calc(var(--header-height) + var(--space-4)); max-height: calc(100svh - var(--header-height) - var(--space-8)); overflow-y: auto; } }

.filters__group { display: flex; flex-direction: column; gap: var(--space-3); }
.filters__legend {
  font-size: var(--text-xs); font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-wide); text-transform: uppercase;
  color: var(--text-muted);
}
.filters__pair { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-2); }

/* Mobiler Filter-Aufklapper */
.filters-toggle { display: flex; }
@media (min-width: 68rem) { .filters-toggle { display: none; } }
.filters[data-collapsed='true'] { display: none; }
@media (min-width: 68rem) { .filters[data-collapsed='true'] { display: flex; } }

.listing__bar {
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3);
  justify-content: space-between;
  margin-bottom: var(--space-5);
}
.listing__count { font-size: var(--text-sm); color: var(--text-secondary); }
.listing__count b { color: var(--text-primary); font-variant-numeric: tabular-nums; }

.active-filters { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.active-filters .chip { cursor: pointer; }
.active-filters .chip:hover { border-color: var(--danger); color: var(--danger-text); }

.empty {
  padding: var(--space-16) var(--space-6);
  text-align: center;
  border: 1px dashed var(--border-default);
  border-radius: var(--card-radius);
  color: var(--text-secondary);
  display: flex; flex-direction: column; gap: var(--space-4); align-items: center;
}

.pagination { display: flex; justify-content: center; gap: var(--space-2); margin-top: var(--space-10); flex-wrap: wrap; }
.pagination button {
  min-width: var(--btn-height-sm); height: var(--btn-height-sm);
  padding-inline: var(--space-3);
  border: 1px solid var(--border-default); border-radius: var(--radius-sm);
  font-size: var(--text-sm); color: var(--text-secondary);
}
.pagination button[aria-current='true'] { background: var(--brand); border-color: var(--brand); color: var(--text-on-brand); }
.pagination button:hover:not([aria-current='true']) { border-color: var(--border-strong); color: var(--text-primary); }

/* ==========================================================================
   Fahrzeug-Detail
   ========================================================================== */
.detail { display: grid; gap: var(--gap-grid); align-items: start; }
@media (min-width: 68rem) { .detail { grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr); } }

.gallery { display: flex; flex-direction: column; gap: var(--space-3); }
.gallery__main {
  position: relative;
  aspect-ratio: 16 / 10;
  background: var(--surface-sunken);
  border: 1px solid var(--border-subtle);
  border-radius: var(--card-radius);
  overflow: hidden;
}
.gallery__main img { width: 100%; height: 100%; object-fit: cover; }
.gallery__nav {
  position: absolute; top: 50%; transform: translateY(-50%);
  width: 2.75rem; height: 2.75rem;
  display: grid; place-items: center;
  border-radius: var(--radius-full);
  background: rgb(10 10 10 / 0.6);
  color: var(--ink-50);
  backdrop-filter: blur(6px);
  transition: background-color var(--duration-fast) var(--ease-in-out);
}
.gallery__nav:hover { background: var(--brand); }
.gallery__nav--prev { left: var(--space-3); }
.gallery__nav--next { right: var(--space-3); }
.gallery__counter {
  position: absolute; bottom: var(--space-3); right: var(--space-3);
}
.gallery__thumbs {
  display: flex; gap: var(--space-2);
  overflow-x: auto; padding-bottom: var(--space-2);
  scroll-snap-type: x mandatory;
  scrollbar-width: thin;
}
.gallery__thumb {
  flex: 0 0 5.5rem; aspect-ratio: 4 / 3;
  border-radius: var(--radius-sm); overflow: hidden;
  border: 2px solid transparent;
  scroll-snap-align: start;
  transition: border-color var(--duration-fast) var(--ease-in-out), opacity var(--duration-fast);
  opacity: 0.6;
}
.gallery__thumb img { width: 100%; height: 100%; object-fit: cover; }
.gallery__thumb[aria-current='true'] { border-color: var(--brand); opacity: 1; }
.gallery__thumb:hover { opacity: 1; }

.buybox {
  background: var(--surface-raised);
  border: 1px solid var(--border-subtle);
  border-radius: var(--card-radius);
  padding: var(--space-6);
  display: flex; flex-direction: column; gap: var(--space-5);
}
@media (min-width: 68rem) { .buybox { position: sticky; top: calc(var(--header-height) + var(--space-4)); } }
.buybox__price {
  font-family: var(--font-display);
  font-size: var(--text-4xl); font-weight: var(--weight-bold);
  letter-spacing: var(--tracking-tighter);
  font-variant-numeric: tabular-nums;
  line-height: 1;
}
.buybox__rate {
  padding: var(--space-3) var(--space-4);
  background: var(--brand-subtle);
  border: 1px solid var(--brand-border);
  border-radius: var(--radius-sm);
  font-size: var(--text-sm);
}
.buybox__rate b { font-size: var(--text-lg); font-family: var(--font-display); }

.specs {
  display: grid; gap: 0;
  grid-template-columns: 1fr;
}
@media (min-width: 40rem) { .specs { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--space-8); } }
.specs__row {
  display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-4);
  padding: var(--table-pad-y) 0;
  border-bottom: 1px solid var(--table-row-border);
  font-size: var(--text-sm);
}
.specs__key { color: var(--text-muted); }
.specs__val { font-weight: var(--weight-medium); text-align: right; }

.featurelist {
  display: grid; gap: var(--space-2) var(--space-6);
  grid-template-columns: 1fr;
  font-size: var(--text-sm);
  color: var(--text-secondary);
}
@media (min-width: 40rem) { .featurelist { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 68rem) { .featurelist { grid-template-columns: repeat(3, 1fr); } }
.featurelist li { display: flex; gap: var(--space-2); align-items: flex-start; }
.featurelist li::before { content: '✓'; color: var(--brand-text); flex: none; font-weight: var(--weight-bold); }

/* Mobiler Sticky-Kontaktbalken auf der Detailseite */
.stickybar {
  position: fixed; inset-inline: 0; bottom: 0; z-index: var(--z-sticky);
  display: flex; gap: var(--space-2);
  padding: var(--space-3) var(--pad-inline);
  padding-bottom: calc(var(--space-3) + env(safe-area-inset-bottom));
  background: var(--nav-bg-scrolled);
  border-top: 1px solid var(--border-default);
  backdrop-filter: blur(var(--nav-blur));
}
.stickybar .btn { flex: 1; }
.stickybar__price { display: none; }
@media (min-width: 68rem) { .stickybar { display: none; } }
body:has(.stickybar) { padding-bottom: 5rem; }
@media (min-width: 68rem) { body:has(.stickybar) { padding-bottom: 0; } }

/* ==========================================================================
   Inhaltsbausteine
   ========================================================================== */
.usp {
  display: flex; flex-direction: column; gap: var(--space-3);
  padding: var(--space-6);
  background: var(--surface-raised);
  border: 1px solid var(--border-subtle);
  border-radius: var(--card-radius);
  border-top: 2px solid var(--brand);
  transition: transform var(--duration-normal) var(--ease-out), box-shadow var(--duration-normal) var(--ease-out);
}
@media (hover: hover) { .usp:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); } }
.usp__icon {
  width: 2.75rem; height: 2.75rem;
  display: grid; place-items: center;
  border-radius: var(--radius-sm);
  background: var(--brand-subtle); color: var(--brand-text);
  font-size: var(--text-xl);
}
.usp__title { font-family: var(--font-display); font-size: var(--text-lg); font-weight: var(--weight-semibold); }
.usp__text { font-size: var(--text-sm); color: var(--text-secondary); line-height: var(--leading-relaxed); }

.svc {
  position: relative;
  display: flex; flex-direction: column; gap: var(--space-3);
  padding: var(--space-6);
  background: var(--surface-raised);
  border: 1px solid var(--border-subtle);
  border-radius: var(--card-radius);
  overflow: hidden;
}
.svc::before {
  content: ''; position: absolute; inset: 0 auto 0 0; width: 3px;
  background: var(--brand); transform: scaleY(0); transform-origin: top;
  transition: transform var(--duration-normal) var(--ease-out);
}
.svc:hover::before { transform: scaleY(1); }
.svc__num {
  font-family: var(--font-display); font-size: var(--text-sm);
  color: var(--text-muted); letter-spacing: var(--tracking-wide);
}
.svc ul { display: flex; flex-direction: column; gap: var(--space-2); font-size: var(--text-sm); color: var(--text-secondary); }
.svc ul li { display: flex; gap: var(--space-2); }
.svc ul li::before { content: '—'; color: var(--brand-text); flex: none; }

.step {
  display: flex; gap: var(--space-4);
  padding-bottom: var(--space-6);
  position: relative;
}
.step:not(:last-child)::after {
  content: ''; position: absolute; left: 1.15rem; top: 2.75rem; bottom: 0;
  width: 1px; background: var(--border-default);
}
.step__num {
  flex: none; width: 2.3rem; height: 2.3rem;
  display: grid; place-items: center;
  border-radius: var(--radius-full);
  background: var(--brand); color: var(--text-on-brand);
  font-family: var(--font-display); font-weight: var(--weight-bold); font-size: var(--text-sm);
  z-index: 1;
}
.step__body { display: flex; flex-direction: column; gap: var(--space-1); padding-top: var(--space-1); }
.step__title { font-family: var(--font-display); font-size: var(--text-lg); font-weight: var(--weight-semibold); }
.step__text { font-size: var(--text-sm); color: var(--text-secondary); }

/* Standortkarte */
.loc {
  display: flex; flex-direction: column; gap: var(--space-4);
  padding: var(--space-6);
  background: var(--surface-raised);
  border: 1px solid var(--border-subtle);
  border-radius: var(--card-radius);
}
.loc__name { font-family: var(--font-display); font-size: var(--text-xl); font-weight: var(--weight-bold); }
.loc__rows { display: flex; flex-direction: column; gap: var(--space-2); font-size: var(--text-sm); color: var(--text-secondary); }
.loc__rows a:hover { color: var(--brand-text); }
.hours { display: flex; flex-direction: column; gap: var(--space-1); font-size: var(--text-sm); }
.hours__row { display: flex; justify-content: space-between; gap: var(--space-4); padding: var(--space-1) 0; border-bottom: 1px solid var(--border-subtle); }
.hours__row span:first-child { color: var(--text-muted); }
.hours__row[data-today='true'] { color: var(--brand-text); font-weight: var(--weight-semibold); }
.hours__row[data-today='true'] span:first-child { color: inherit; }

/* CTA-Band */
.cta-band {
  position: relative; isolation: isolate; overflow: hidden;
  background: var(--surface-raised);
  border-block: 1px solid var(--border-subtle);
}
.cta-band::before {
  content: ''; position: absolute; inset: 0; z-index: -1;
  background: radial-gradient(60rem 24rem at 15% 0%, var(--brand-subtle), transparent 70%);
}
.cta-band__inner {
  display: flex; flex-direction: column; gap: var(--space-6);
  align-items: flex-start;
}
@media (min-width: 60rem) {
  .cta-band__inner { flex-direction: row; align-items: center; justify-content: space-between; }
}

/* Prose (Rechtstexte, Beschreibungen) */
.prose { max-width: 72ch; color: var(--text-secondary); line-height: var(--leading-relaxed); }
.prose > * + * { margin-top: var(--space-4); }
.prose h2 { font-size: var(--text-2xl); color: var(--text-primary); margin-top: var(--space-10); }
.prose h3 { font-size: var(--text-xl); color: var(--text-primary); margin-top: var(--space-8); }
.prose strong { color: var(--text-primary); font-weight: var(--weight-semibold); }
.prose a { color: var(--brand-text); text-decoration: underline; text-underline-offset: 3px; }
.prose ul { list-style: disc; padding-left: var(--space-5); }
.prose ul li + li { margin-top: var(--space-2); }
.prose table { width: 100%; border-collapse: collapse; font-size: var(--text-sm); }
.prose th, .prose td { text-align: left; padding: var(--table-pad-y) var(--table-pad-x); border-bottom: 1px solid var(--table-row-border); }

/* Akkordeon (FAQ) */
.acc { border-bottom: 1px solid var(--border-subtle); }
.acc__sum {
  display: flex; align-items: center; justify-content: space-between; gap: var(--space-4);
  padding: var(--space-5) 0;
  cursor: pointer; list-style: none;
  font-family: var(--font-display); font-size: var(--text-lg); font-weight: var(--weight-semibold);
}
.acc__sum::-webkit-details-marker { display: none; }
.acc__sum::after {
  content: '+'; flex: none; color: var(--brand-text);
  font-size: var(--text-2xl); line-height: 1;
  transition: transform var(--duration-normal) var(--ease-out);
}
.acc[open] .acc__sum::after { transform: rotate(45deg); }
.acc__body { padding-bottom: var(--space-5); color: var(--text-secondary); font-size: var(--text-sm); line-height: var(--leading-relaxed); }

/* Marken-Logowand */
.brands { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.brandchip {
  display: flex; align-items: center; gap: var(--space-2);
  padding: var(--space-2) var(--space-4);
  border: 1px solid var(--border-subtle); border-radius: var(--radius-full);
  background: var(--surface-raised);
  font-size: var(--text-sm); color: var(--text-secondary);
  transition: border-color var(--duration-fast), color var(--duration-fast), background-color var(--duration-fast);
}
.brandchip:hover { border-color: var(--brand); color: var(--text-primary); background: var(--surface-hover); }
.brandchip b { color: var(--text-primary); font-weight: var(--weight-semibold); }
.brandchip span { font-variant-numeric: tabular-nums; color: var(--text-muted); font-size: var(--text-xs); }

/* ==========================================================================
   Ansprechpartner am Fahrzeug
   ========================================================================== */
.seller {
  display: flex; gap: var(--space-4); align-items: flex-start;
  padding: var(--space-4);
  background: var(--surface-sunken);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
}
.seller__avatar, .person__avatar {
  flex: none; display: grid; place-items: center;
  width: 3.25rem; height: 3.25rem;
  border-radius: var(--radius-full);
  background: var(--brand); color: var(--text-on-brand);
  font-family: var(--font-display); font-weight: var(--weight-bold);
  overflow: hidden;
}
.seller__avatar img, .person__avatar img { width: 100%; height: 100%; object-fit: cover; }
.seller__label {
  font-size: var(--text-2xs); letter-spacing: var(--tracking-widest);
  text-transform: uppercase; color: var(--text-muted);
}
.seller__name { font-family: var(--font-display); font-size: var(--text-lg); font-weight: var(--weight-semibold); }

/* ==========================================================================
   Teilen, Merken, Vergleichen
   ========================================================================== */
.sharebar { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.sharebar .chip { cursor: pointer; }
.sharebar .chip:hover { border-color: var(--brand); color: var(--text-primary); }
.sharebar .chip[aria-pressed='true'] {
  background: var(--brand-subtle); border-color: var(--brand-border); color: var(--brand-text);
}

.favcount {
  display: inline-grid; place-items: center;
  min-width: 1.25rem; height: 1.25rem; padding: 0 .3rem;
  border-radius: var(--radius-full);
  background: var(--brand); color: var(--text-on-brand);
  font-size: var(--text-2xs); font-weight: var(--weight-bold);
  font-variant-numeric: tabular-nums;
}

.headerfav { position: relative; display: none; }
@media (min-width: 40rem) { .headerfav { display: inline-flex; } }
.headerfav .favcount { position: absolute; top: -.35rem; right: -.35rem; }

/* Leiste, die beim Vergleichen unten mitläuft */
.comparebar {
  position: fixed; inset-inline: 0; bottom: 0; z-index: var(--z-sticky);
  display: none; align-items: center; gap: var(--space-3);
  padding: var(--space-3) var(--pad-inline);
  padding-bottom: calc(var(--space-3) + env(safe-area-inset-bottom));
  background: var(--nav-bg-scrolled);
  border-top: 1px solid var(--brand-border);
  backdrop-filter: blur(var(--nav-blur));
}
.comparebar[data-show='true'] { display: flex; }
.comparebar__items { display: flex; gap: var(--space-2); overflow-x: auto; flex: 1; }
.comparebar__item {
  display: flex; align-items: center; gap: var(--space-2);
  padding: var(--space-1) var(--space-2);
  border: 1px solid var(--border-default); border-radius: var(--radius-sm);
  font-size: var(--text-xs); white-space: nowrap;
}
.comparebar__item img { width: 2.5rem; height: 1.9rem; object-fit: cover; border-radius: var(--radius-xs); }

/* ==========================================================================
   Vergleichstabelle
   ========================================================================== */
.compare { overflow-x: auto; border: 1px solid var(--border-subtle); border-radius: var(--card-radius); }
.compare table { width: 100%; border-collapse: collapse; min-width: 40rem; }
.compare th, .compare td {
  padding: var(--table-pad-y) var(--table-pad-x);
  border-bottom: 1px solid var(--table-row-border);
  text-align: left; font-size: var(--text-sm); vertical-align: top;
}
.compare thead th {
  position: sticky; top: 0; z-index: 1;
  background: var(--surface-raised);
  border-bottom: 1px solid var(--border-default);
  min-width: 13rem;
}
.compare tbody th {
  position: sticky; left: 0; z-index: 1;
  background: var(--surface-sunken);
  color: var(--text-muted); font-weight: var(--weight-regular);
  min-width: 11rem;
}
.compare tbody tr:hover td { background: var(--table-row-hover); }
.compare__head { display: flex; flex-direction: column; gap: var(--space-2); }
.compare__head img { width: 100%; aspect-ratio: 4/3; object-fit: cover; border-radius: var(--radius-sm); }

/* ==========================================================================
   Personen & Kundenstimmen
   ========================================================================== */
.person {
  display: flex; flex-direction: column; gap: var(--space-3);
  padding: var(--space-6);
  background: var(--surface-raised);
  border: 1px solid var(--border-subtle);
  border-radius: var(--card-radius);
}
.person__avatar { width: 4.5rem; height: 4.5rem; font-size: var(--text-xl); }
.person__name { font-family: var(--font-display); font-size: var(--text-lg); font-weight: var(--weight-semibold); }
.person__role { font-size: var(--text-sm); color: var(--brand-text); }

.quote {
  display: flex; flex-direction: column; gap: var(--space-3);
  padding: var(--space-6);
  background: var(--surface-raised);
  border: 1px solid var(--border-subtle);
  border-radius: var(--card-radius);
  position: relative;
}
.quote__text {
  font-size: var(--text-base); line-height: var(--leading-relaxed);
  color: var(--text-secondary);
}
.quote__text::before { content: '„'; color: var(--brand); font-size: var(--text-3xl); line-height: 0; vertical-align: -0.35em; margin-right: .15em; }
.quote__meta { margin-top: auto; font-size: var(--text-sm); }

.stars { color: var(--brand-text); letter-spacing: .1em; font-size: var(--text-lg); line-height: 1; }
.stars__off { color: var(--border-strong); }

.ratingbadge {
  display: inline-flex; align-items: center; gap: var(--space-2);
  padding: var(--space-2) var(--space-4);
  border: 1px solid var(--border-subtle); border-radius: var(--radius-full);
  background: var(--surface-raised); font-size: var(--text-sm);
  transition: border-color var(--duration-fast);
}
.ratingbadge:hover { border-color: var(--brand); }

/* ==========================================================================
   Öffnungsstatus
   ========================================================================== */
.openstate {
  display: inline-flex; align-items: center; gap: var(--space-2);
  font-size: var(--text-sm); color: var(--text-secondary);
}
.openstate .dot {
  width: .55rem; height: .55rem; border-radius: var(--radius-full);
  background: var(--danger); flex: none;
}
.openstate[data-open='true'] .dot { background: var(--success); box-shadow: 0 0 0 3px var(--success-subtle); }
.openstate[data-open='true'] { color: var(--success-text); }

/* ==========================================================================
   Bild-Vollbild (Lightbox)
   ========================================================================== */
.lightbox {
  position: fixed; inset: 0; z-index: var(--z-overlay);
  display: none; place-items: center;
  background: rgb(0 0 0 / 0.93);
  padding: var(--space-4);
}
.lightbox[data-open='true'] { display: grid; }
.lightbox img {
  max-width: 100%; max-height: calc(100svh - 8rem);
  object-fit: contain; border-radius: var(--radius-sm);
}
.lightbox__close, .lightbox__nav {
  position: absolute; display: grid; place-items: center;
  width: 3rem; height: 3rem; border-radius: var(--radius-full);
  background: rgb(255 255 255 / 0.1); color: var(--ink-0-invert, #fff);
  font-size: var(--text-xl);
  transition: background-color var(--duration-fast);
}
.lightbox__close:hover, .lightbox__nav:hover { background: var(--brand); }
.lightbox__close { top: var(--space-4); right: var(--space-4); }
.lightbox__nav--prev { left: var(--space-4); top: 50%; transform: translateY(-50%); }
.lightbox__nav--next { right: var(--space-4); top: 50%; transform: translateY(-50%); }
.lightbox__caption {
  position: absolute; bottom: var(--space-4); left: 50%; transform: translateX(-50%);
  color: var(--ink-50); font-size: var(--text-sm);
  background: rgb(0 0 0 / .5); padding: var(--space-2) var(--space-4); border-radius: var(--radius-full);
}
.gallery__main img { cursor: zoom-in; }

/* ==========================================================================
   Footer
   ========================================================================== */
.footer {
  background: var(--surface-sunken);
  border-top: 1px solid var(--border-subtle);
  padding-block: var(--space-16) var(--space-8);
  font-size: var(--text-sm);
  color: var(--text-secondary);
}
.footer__grid {
  display: grid; gap: var(--space-10);
  grid-template-columns: 1fr;
}
@media (min-width: 48rem) { .footer__grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 68rem) { .footer__grid { grid-template-columns: 1.4fr 1fr 1fr 1fr; } }
.footer__title {
  font-size: var(--text-xs); font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-widest); text-transform: uppercase;
  color: var(--text-primary); margin-bottom: var(--space-4);
}
.footer__list { display: flex; flex-direction: column; gap: var(--space-2); }
.footer__list a:hover { color: var(--brand-text); }
.footer__bottom {
  margin-top: var(--space-12); padding-top: var(--space-6);
  border-top: 1px solid var(--border-subtle);
  display: flex; flex-direction: column; gap: var(--space-4);
  font-size: var(--text-xs); color: var(--text-muted);
}
@media (min-width: 48rem) { .footer__bottom { flex-direction: row; justify-content: space-between; align-items: center; } }
.footer__legal { display: flex; flex-wrap: wrap; gap: var(--space-4); }

/* ==========================================================================
   Toast / Meldungen
   ========================================================================== */
.toast-host {
  position: fixed; z-index: var(--z-toast);
  bottom: calc(var(--space-4) + env(safe-area-inset-bottom)); left: var(--space-4); right: var(--space-4);
  display: flex; flex-direction: column; gap: var(--space-2);
  pointer-events: none;
}
@media (min-width: 40rem) { .toast-host { left: auto; width: min(24rem, calc(100vw - var(--space-8))); } }
.toast {
  pointer-events: auto;
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-sm);
  background: var(--surface-overlay);
  border: 1px solid var(--border-default);
  border-left: 3px solid var(--info);
  box-shadow: var(--shadow-lg);
  font-size: var(--text-sm);
  animation: toast-in var(--duration-normal) var(--ease-out);
}
.toast--ok    { border-left-color: var(--success); }
.toast--error { border-left-color: var(--danger); }
@keyframes toast-in { from { opacity: 0; transform: translateY(0.75rem); } }

.notice {
  padding: var(--space-4);
  border-radius: var(--radius-sm);
  border: 1px solid var(--border-default);
  border-left: 3px solid var(--info);
  background: var(--info-subtle);
  font-size: var(--text-sm);
}
.notice--ok    { border-left-color: var(--success); background: var(--success-subtle); }
.notice--warn  { border-left-color: var(--warning); background: var(--warning-subtle); }
.notice--error { border-left-color: var(--danger);  background: var(--danger-subtle); }

/* ==========================================================================
   Einblenden beim Scrollen
   ========================================================================== */
/* Sicherheitsnetz: Sollte das Skript einmal nicht laden, macht die Animation
   den Bereich nach 2,5 s trotzdem sichtbar — Inhalte dürfen nie hängen bleiben. */
.reveal {
  opacity: 0;
  transform: translateY(1.25rem);
  transition: opacity var(--duration-slow) var(--ease-out), transform var(--duration-slow) var(--ease-out);
  animation: reveal-fallback 0s linear 2.5s forwards;
}
.reveal[data-visible='true'] { opacity: 1; transform: none; animation: none; }
@keyframes reveal-fallback { to { opacity: 1; transform: none; } }

@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; animation: none; }
}

/* ==========================================================================
   Hilfsklassen
   ========================================================================== */
.hide-sm { display: none; }
@media (min-width: 48rem) { .hide-sm { display: revert; } }
@media (min-width: 48rem) { .only-sm { display: none; } }
.center { text-align: center; }
.mt-auto { margin-top: auto; }
.nowrap { white-space: nowrap; }
.scroll-x { overflow-x: auto; }

/* ==========================================================================
   Druck
   ========================================================================== */
/* Die Fahrzeugseite soll gedruckt wie ein Exposé aussehen: keine Bedien-
   elemente, schwarz auf weiss, Galerie auf das Titelbild reduziert und die
   Adresse der Seite unter jedem Bild, damit man sie wiederfindet. */
@media print {
  .header, .footer, .stickybar, .drawer, .announce, .toast-host, .comparebar,
  .sharebar, .gallery__thumbs, .gallery__nav, .lightbox, .skip-link,
  .btn, form, .acc, .reveal[data-visible='false'] { display: none !important; }

  :root {
    --surface-canvas: #fff; --surface-raised: #fff; --surface-sunken: #fff;
    --text-primary: #000; --text-secondary: #222; --text-muted: #555;
    --border-subtle: #bbb; --border-default: #999; --brand-text: #A20000;
  }
  body { background: #fff; color: #000; font-size: 11pt; }
  a { color: #000; text-decoration: none; }
  main a[href^='http']::after { content: ' (' attr(href) ')'; font-size: 8pt; color: #555; }

  .section { padding-block: 0.5cm; }
  .detail { display: block; }
  .buybox { border: 1px solid #999; box-shadow: none; page-break-inside: avoid; margin-top: .5cm; }
  .gallery__main { aspect-ratio: 16/9; page-break-inside: avoid; }
  .specs { page-break-inside: avoid; }
  .featurelist { columns: 2; font-size: 10pt; }
  h1 { font-size: 20pt; }
  h2 { font-size: 14pt; }
  .reveal { opacity: 1 !important; transform: none !important; animation: none !important; }
  @page { margin: 1.5cm; }
}