/*
 * Generisches Maschinen-Karussell (.mm_ta_carousel) – genutzt von Top-Angebote,
 * Beliebteste Maschinen und Zuletzt angesehen. Zeigt 3 Karten ohne Scrollbalken;
 * die Spur (.mm_ta_track) wird per transform verschoben. Steuerung: JS-Engine
 * maschinen_markt_karussell.js.
 */
/* Eigene Pfeil-Spalten links/rechts (Padding), damit die Pfeile NEBEN den
   Karten sitzen – nicht darüber (kein Fehlklick) und nicht abgeschnitten. */
.mm_ta_carousel { position: relative; min-height: 120px; padding: 0 54px; }

/* Sichtfenster: genau 3 Karten, kein Scrollbalken. */
.mm_ta_viewport { overflow: hidden; }
.mm_ta_track {
  display: flex;
  gap: 16px;
  padding: 4px 2px 12px;   /* etwas Boden-Puffer */
  transition: transform .32s ease;
  will-change: transform;
}
.mm_ta_track .maschinen_markt_trennlinie { display: none !important; }
.mm_ta_track .maschinen_markt_liste_element {
  flex: 0 0 calc((100% - 32px) / 3);   /* 3 sichtbar, 2 Lücken à 16px */
  width: calc((100% - 32px) / 3) !important;
  margin: 0 !important;
  float: none !important;
  box-sizing: border-box;
  background: #fff;
  border: 1px solid #eef0f4;
  border-radius: 6px;
}
.mm_ta_track .maschinen_markt_liste_element:hover { z-index: 5; border-color: #e85d26 !important; }

/* Pfeile: in der eigenen Randspalte, auf Bildmitte verankert (feste Höhe, damit
   sie NICHT wandern, wenn nachgeladene Karten wegen längerer Titel höher sind).
   Bildhöhe = 190px + 4px Track-Padding oben -> Mitte ~99px. */
.mm_ta_arrow {
  position: absolute; top: 99px; transform: translateY(-50%);
  z-index: 6; width: 42px; height: 42px; border-radius: 50%;
  border: none; cursor: pointer; color: #2d3c62;
  background: #fff; box-shadow: 0 2px 10px rgba(0,0,0,.18);
  display: flex; align-items: center; justify-content: center; padding: 0;
}
.mm_ta_arrow:hover { color: #fff; background: #e85d26; }
.mm_ta_arrow[hidden] { display: none; }
/* Am Anfang/Ende: Pfeil bleibt sichtbar, ist aber ausgegraut und ohne Hover.
   Dark-Mode-Varianten mit höherer Spezifität, weil style.css .mm_ta_arrow
   dort per !important einfärbt. */
.mm_ta_arrow[disabled] {
  cursor: default;
  color: #c3c9d4;
  background: #fff;
  box-shadow: 0 1px 5px rgba(0,0,0,.10);
}
.mm_ta_arrow[disabled]:hover { color: #c3c9d4; background: #fff; }
html.mm-dark .mm_ta_arrow[disabled],
html.mm-dark .mm_ta_arrow[disabled]:hover {
  color: rgba(242,246,250,.32) !important;
  background: var(--color-surface) !important;
  box-shadow: 0 1px 5px rgba(0,0,0,.25);
}
.mm_ta_prev { left: 4px; }
.mm_ta_next { right: 4px; }

/* Karten-Innenleben (identisch zur Liste/Suche, hier nur im Karussell). */
.mm_ta_track .maschinen_markt_liste_img,
.mm_ta_track .maschinen_markt_liste_img figure { margin: 0 !important; line-height: 0; }
.mm_ta_track .maschinen_markt_liste_img img {
  width: 100% !important;
  height: 190px !important;
  object-fit: contain !important;
  background: #f2f2f2;
  display: block;
}
.mm_ta_track .maschinen_markt_liste_daten { display: flex; flex-direction: column; }
.mm_ta_track .maschinen_markt_liste_img { order: 1; }
.mm_ta_track .preis_title {
  position: static !important; order: 2; width: auto !important; bottom: auto !important;
  font-size: 16px; padding: 8px 12px !important;
}
.mm_ta_track .maschinen_markt_liste_untertitel { min-height: 0 !important; padding-bottom: 12px; }
.mm_ta_track .maschinen_markt_liste_untertitel .title_wrapper { min-height: 0 !important; }
.mm_ta_track .maschinen_markt_liste_untertitel .list_deteils {
  position: static !important; top: auto !important; min-height: 0 !important; margin-top: 10px;
}

/* Ladezustände über der Karussell-Spur. */
.mm_ta_loader {
  position: absolute; inset: 0; z-index: 7;
  display: flex; align-items: center; justify-content: center;
  background: rgba(255,255,255,.7); color: #2d3c62; font-weight: 600;
}
.mm_ta_loader[hidden] { display: none; }
.mm_ta_empty { text-align: center; color: #8a90a2; padding: 30px 0; }
.mm_ta_empty[hidden] { display: none; }

/* ---------------------------------------------------------------- Responsiv */
@media (max-width: 900px) {
  .mm_ta_track .maschinen_markt_liste_element {
    flex-basis: calc((100% - 16px) / 2);      /* 2 sichtbar */
    width: calc((100% - 16px) / 2) !important;
  }
}
@media (max-width: 600px) {
  .mm_ta_carousel { padding: 0 42px; }
  .mm_ta_arrow { width: 36px; height: 36px; }
  .mm_ta_prev { left: 2px; }
  .mm_ta_next { right: 2px; }
  .mm_ta_track .maschinen_markt_liste_element {
    flex-basis: 100%;                          /* 1 sichtbar */
    width: 100% !important;
  }
}