/* Top-Angebote – Regler + „Alle ansehen". Karussell-Styles: maschinen_markt_karussell.css */
/* Unten 80px, damit die Startseiten-Slider klar von der nächsten Sektion
   abgesetzt sind (gleicher Wert bei allen drei Karussells). */
.mm_top_angebote { margin: 24px 0 80px; }

/* Kopf: zwei Trennlinien (oben/unten) + Zeile mit Titel links und Button rechts. */
.mm_top_angebote_sep { height: 1px; background: rgba(13, 21, 29, .12); }
.mm_top_angebote_sep_bottom { margin-bottom: 28px; }
.mm_top_angebote_head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 16px;
  padding: 16px 0;
}
.mm_top_angebote_title {
  color: #16202e;
  font-size: clamp(1.5rem, 2.5vw, 2.2rem);
  font-weight: 800;
  letter-spacing: -.02em;
  margin: 0;
}
.mm_top_angebote_btn {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: #e85d26;
  color: #fff;
  text-decoration: none;
  font-weight: 500;
  font-size: 14px;
  padding: 10px 18px;
  border: 1px solid #e85d26;
  border-radius: 10px;
  transition: background .15s ease, border-color .15s ease;
}
.mm_top_angebote_btn:hover { background: #c04b1e; border-color: #c04b1e; color: #fff; }
.mm_top_angebote_btn:focus-visible { outline: 2px solid #e85d26; outline-offset: 2px; }

/* Dark-Mode (global via html.mm-dark) */
html.mm-dark .mm_top_angebote_sep { background: rgba(255, 255, 255, .10); }
html.mm-dark .mm_top_angebote_title { color: #f2f6fa; }
html.mm-dark .mm_top_angebote_btn { background: #e85d26; border-color: #e85d26; }
html.mm-dark .mm_top_angebote_btn:hover { background: #ff7a45; border-color: #ff7a45; }

@media (max-width: 560px) {
  .mm_top_angebote_title { font-size: 1.4rem; }
  .mm_top_angebote_btn { font-size: 13px; padding: 9px 14px; }
}

/* ------------------------------------------------------------- Regler (oben) */
.mm_ta_control {
  display: flex; align-items: center; flex-wrap: wrap; gap: 12px;
  background: #f6f7fb; border: 1px solid #e7eaf1; border-radius: 8px;
  padding: 12px 16px; margin: 0 0 18px;
}
.mm_ta_ctl_label { font-weight: 600; color: #2d3c62; }
.mm_ta_slider { flex: 1 1 220px; min-width: 180px; max-width: 460px; margin: 0 6px; }
.mm_ta_ctl_val { font-weight: 700; color: #2d3c62; min-width: 52px; text-align: right; }
.mm_ta_hint { flex: 1 1 100%; color: #8a90a2; font-size: 13px; }

/* Rabatt-Regler (noUiSlider) im Maschinera-Dark-Design: Orange-Fortschritt,
   dunkle Spur, weißer Griff. Lädt nach nouislider.min.css -> gewinnt. */
.mm_ta_slider.noUi-target {
  height: 6px; border: none; border-radius: 4px;
  background: rgba(255,255,255,0.15); box-shadow: none;
}
.mm_ta_slider .noUi-connect { background: #e85d26; }
.mm_ta_slider .noUi-handle {
  width: 18px; height: 18px; right: -9px; top: -6px;
  border: none; border-radius: 50%; background: #fff;
  box-shadow: 0 1px 4px rgba(0,0,0,.45); cursor: grab;
}
.mm_ta_slider .noUi-handle::before,
.mm_ta_slider .noUi-handle::after { display: none; }
.mm_ta_slider .noUi-handle:focus { outline: none; }
.mm_ta_slider .noUi-handle.noUi-active { cursor: grabbing; box-shadow: 0 0 0 4px rgba(232,93,38,.3); }