/* Fahrzeugdaten als kompaktes Icon/Label/Wert-Grid: Angebots-Nr.,
   Kilometerstand, Leistung, Getriebe, … Eine Zeile Shortcode-Inhalt pro
   Eintrag (Format siehe VehicleSpecsComponent). */
/* Section-Modus: der Standard-SectionHeader über dem Widget, beides auf
   Containerbreite. Vertikaler Rhythmus aus .d35-section, dunkles Band aus
   .d35-section-dark — gleiches Muster wie die Bezahloptionen-Section. */
.d35-vehicle-specs-section__inner {
  width: min(100%, var(--d35-container));
  margin-inline: auto;
  padding-inline: var(--d35-gap);
  display: grid;
  gap: clamp(1.25rem, 2.5vw, 2rem);
}

/* Das Widget ist eine Karte im Look des SectionHeaders — auch auf dem
   dunklen Band bleibt das Grid so auf heller Fläche lesbar. */
.d35-vehicle-specs {
  border: 1px solid var(--d35-color-border);
  border-radius: var(--d35-radius);
  background: var(--d35-color-surface);
  padding: clamp(1.25rem, 3vw, 2rem);
}

/* auto-fit (nicht auto-fill): leere Spalten-Tracks kollabieren, sodass wenige
   Einträge (2–3) die volle Breite gleichmäßig ausnutzen statt links zu kleben.
   Bei vielen Einträgen (4–8+) wird weiterhin sauber umbrochen; die 14rem-Unter-
   grenze verhindert zu schmale Spalten. */
.d35-vehicle-specs__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 14rem), 1fr));
  gap: clamp(1rem, 2.5vw, 1.5rem) clamp(1rem, 3vw, 2rem);
}

.d35-vehicle-specs__item {
  display: flex;
  align-items: center;
  gap: 0.9rem;
  min-width: 0;
}

/* Icon in weichem Quadrat auf der Flächenfarbe der Zebra-Streifen —
   Primary als Akzent, wie das CardIcon-Icon. */
.d35-vehicle-specs__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: 2.75rem;
  height: 2.75rem;
  border-radius: 0.75rem;
  background: var(--d35-color-light, #f8fafc);
  color: var(--d35-color-primary, #000);
}

.d35-vehicle-specs__icon-svg {
  width: 1.5rem;
  height: 1.5rem;
}

.d35-vehicle-specs__text {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  min-width: 0;
}

/* Label als Kicker über dem Wert — gleiche Anmutung wie die
   Highlight-Labels der Bezahloptionen. */
.d35-vehicle-specs__label {
  color: var(--d35-color-muted, #5b6770);
  font-size: 0.78rem;
  font-weight: 800;
  letter-spacing: 0.12em;
  line-height: 1.2;
  text-transform: uppercase;
}

/* tabular-nums: Ziffern gleicher Breite, damit Werte wie "128.000 km"
   ruhig nebeneinanderstehen. */
.d35-vehicle-specs__value {
  color: var(--d35-color-text, #000);
  font-weight: 700;
  line-height: 1.3;
  overflow-wrap: anywhere;
  font-variant-numeric: tabular-nums;
}

/* Dark variant: durchscheinende Kartenfläche + umgefärbte Icons/Labels statt
   der weißen Fläche — identischer Look wie die Feature-Showcase-Karten, damit
   die Fahrzeug-Sections auf dem dunklen Band einheitlich wirken. Der helle
   Icon-Kasten würde auf Dunkel absaufen, daher weißes Icon im getönten Rahmen
   (#fff 10% Fläche, #fff 28% Rand — wie Feature-Showcase). */
.d35-vehicle-specs-section--dark .d35-vehicle-specs {
  background: color-mix(in srgb, #fff 6%, transparent);
  border-color: color-mix(in srgb, #fff 28%, transparent);
}

.d35-vehicle-specs-section--dark .d35-vehicle-specs__icon {
  border: 1px solid color-mix(in srgb, #fff 28%, transparent);
  background: color-mix(in srgb, #fff 10%, transparent);
  color: #fff;
}

.d35-vehicle-specs-section--dark .d35-vehicle-specs__label {
  color: color-mix(in srgb, #fff 78%, transparent);
}

.d35-vehicle-specs-section--dark .d35-vehicle-specs__value {
  color: #fff;
}