/* ════════════════════════════════════════════════════════════════
   BIKELEY — Produktflaechen, Zustands-Chips, Hoehenlinien
   Patch v82 · laedt NACH allen Komponenten-Stylesheets.

   Warum diese Datei existiert: die Produktkachel-Regeln liegen in
   fuenf verschiedenen Stylesheets (marketplace-v5, parts_list,
   provider-microsite, lab, marketplace-detail). Eine gemeinsame
   Regel an einer Stelle ist nachvollziehbarer und wieder
   ruecknehmbar als fuenf verstreute Aenderungen.
   ════════════════════════════════════════════════════════════════ */

/* ── 1. Produktflaeche ────────────────────────────────────────────
   Alle Haendlerfotos im Bestand sind weiss freigestellt, in stark
   wechselnden Seitenverhaeltnissen (450x450 bis 1176x882).

   `cover` schneidet die Raeder an. `contain` allein legt ein weisses
   Rechteck auf die graue Kachel. `multiply` gegen die Kachelfarbe
   loest das Weiss exakt auf: weiss * #F4F4F1 = #F4F4F1. Das Rad
   selbst wird dabei um 4 % dunkler — gleichmaessig und unsichtbar.

   `isolation:isolate` haelt die Mischung in der Kachel, damit sie
   nicht bis auf den Seitengrund durchschlaegt.                    */

.mkt-card__media,
.market-shell .mkt-card__media,
.provider-site-bikes .mkt-card__media,
.mkt-bike-card__media,
.lab-bike-card__media,
.market-product__stage,
.market-product__thumb {
  background: var(--surface, #F4F4F1);
  isolation: isolate;
}

.mkt-card__media img,
.market-shell .mkt-card__media img,
.provider-site-bikes .mkt-card__media img,
.mkt-bike-card__media img,
.lab-bike-card__media img,
.market-product__stage img,
.market-product__thumb img {
  object-fit: contain;
  mix-blend-mode: multiply;
}

/* Innenabstand, damit das Rad nicht an der Kante klebt */
.mkt-card__media img,
.market-shell .mkt-card__media img,
.provider-site-bikes .mkt-card__media img,
.mkt-bike-card__media img {
  padding: 8%;
}

.market-product__stage img { padding: 6%; }
.market-product__thumb img { padding: 8%; }

/* Der Hover-Zoom bleibt, faellt aber ruhiger aus, weil das Motiv
   jetzt vollstaendig sichtbar ist statt angeschnitten. */
.mkt-card:hover .mkt-card__media img,
.provider-site-bikes .mkt-card:hover .mkt-card__media img { transform: scale(1.03); }

/* Ausnahme: echte Fotos statt Freisteller. Wer eine Kachel mit
   `is-photo` markiert, bekommt wieder Anschnitt ohne Mischung. */
.mkt-card__media.is-photo img,
.market-product__stage.is-photo img {
  object-fit: cover;
  mix-blend-mode: normal;
  padding: 0;
}

/* Haendlerlogos liegen ebenfalls auf Weiss */
.bb__dealer-logo,
.provider-card__logo img,
.provider-ms-logo img { mix-blend-mode: multiply; }


/* ── 2. Zustands-Chips ────────────────────────────────────────────
   Rot ist der einzige Akzent und gehoert dem Primaerbutton. Ein
   Zustand ist eine Information, keine Warnung: ruhige Flaeche,
   Farbe nur als Punkt.                                            */

.mkt-badge,
.mkt-card__badge {
  background: rgba(244,244,241,.92) !important;
  color: var(--text, #0F0F0D) !important;
  border: 1px solid rgba(15,15,13,.10) !important;
  font-weight: 600 !important;
  border-radius: 8px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.mkt-badge::before,
.mkt-card__badge::before {
  content: "";
  width: 6px; height: 6px;
  border-radius: 50%;
  flex: 0 0 auto;
  background: rgba(15,15,13,.35);
}

.mkt-badge--sale::before,
.mkt-card__badge--sale::before { background: var(--accent, #D92B1E); }
.mkt-badge--used::before,
.mkt-card__badge--used::before { background: rgba(15,15,13,.42); }
.mkt-badge--demo::before       { background: rgba(15,15,13,.42); }
.mkt-badge--year::before       { display: none; }


/* ── 3. Hoehenlinien ──────────────────────────────────────────────
   Das Signatur-Motiv aus der App. Nur auf Revier-Flaechen, im
   Hero ohne Foto und in Leerzustaenden — nirgends sonst.          */

.bk-hoehenlinien {
  position: relative;
  isolation: isolate;
}
.bk-hoehenlinien::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background-image: url("/assets/img/hoehenlinien.svg");
  background-size: 560px auto;
  background-position: center;
  opacity: .08;
}
.bk-hoehenlinien--dark::before { filter: invert(1); opacity: .10; }

/* v109 · EU AI Act: Kennzeichnung KI-erstellter Beschreibungen */
.market-ai-note{margin:10px 0 0;font-size:12.5px;line-height:1.4;color:rgba(15,15,13,.55)}
.market-ai-note::before{content:"";display:inline-block;width:6px;height:6px;border-radius:50%;background:rgba(15,15,13,.35);margin:0 7px 1px 0}