/* =========================================================================
   Maschinen-Reader (Detailseite) – Carwow/Dark-Redesign 2026-07-16
   Token-basiert: helle Werte auf .mm_rd, dunkle Werte unter html.mm-dark .mm_rd.
   Alle Regeln nutzen die --rd-*-Tokens -> beide Themes ohne !important-Kampf.
   ========================================================================= */

.mm_rd {
  --rd-bg:        #ffffff;
  --rd-surface:   #f5f6f8;
  --rd-surface-2: #eceff3;
  --rd-accent:    #e85d26;
  --rd-accent-dk: #c04b1e;
  --rd-good:      #1f8a53;
  --rd-text:      #16202e;
  --rd-text-mid:  #55617a;
  --rd-text-mut:  #8b93a5;
  --rd-border:    #e2e6ec;
  --rd-border-mid:#cfd5df;
  --rd-r-sm: 6px; --rd-r-md: 10px; --rd-r-lg: 14px; --rd-r-pill: 20px;
  color: var(--rd-text);
}

html.mm-dark .mm_rd {
  --rd-bg:        #0f1923;
  --rd-surface:   #1a2535;
  --rd-surface-2: #243044;
  --rd-good:      #4fd18a;
  --rd-text:      #ffffff;
  --rd-text-mid:  rgba(255,255,255,.66);
  --rd-text-mut:  rgba(255,255,255,.40);
  --rd-border:    rgba(255,255,255,.09);
  --rd-border-mid:rgba(255,255,255,.16);
}

.mm_rd * { box-sizing: border-box; }
.mm_rd img { max-width: 100%; height: auto; display: block; }

/* ---------- Breadcrumb ---------- */
.mm_rd_crumbs { display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  font-size: 14px; color: var(--rd-text-mut); padding-top: 18px; }
/* Filter-Icon wie in der Header-Topbar (.ico-filter, gleiche mask-Grafik) */
.mm_rd_crumbs::before {
  content: ''; flex: 0 0 auto; width: 16px; height: 16px; background-color: currentColor;
  -webkit-mask-position: center; mask-position: center;
  -webkit-mask-size: contain; mask-size: contain;
  -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='4' y1='7' x2='20' y2='7'/%3E%3Cline x1='4' y1='12' x2='20' y2='12'/%3E%3Cline x1='4' y1='17' x2='20' y2='17'/%3E%3Ccircle cx='9' cy='7' r='2'/%3E%3Ccircle cx='15' cy='12' r='2'/%3E%3Ccircle cx='9' cy='17' r='2'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='4' y1='7' x2='20' y2='7'/%3E%3Cline x1='4' y1='12' x2='20' y2='12'/%3E%3Cline x1='4' y1='17' x2='20' y2='17'/%3E%3Ccircle cx='9' cy='7' r='2'/%3E%3Ccircle cx='15' cy='12' r='2'/%3E%3Ccircle cx='9' cy='17' r='2'/%3E%3C/svg%3E");
}
.mm_rd_crumbs a { color: var(--rd-text-mut); }
.mm_rd_crumbs a:hover { color: var(--rd-accent); }
.mm_rd_crumbs .sep { opacity: .5; }
.mm_rd_crumbs .mm_rd_here { color: var(--rd-text-mid); }
.mm_rd_back { margin-left: auto; background: var(--rd-surface-2); color: var(--rd-text-mid);
  padding: 6px 14px; border-radius: var(--rd-r-sm); font-weight: 600; font-size: 13px; }
/* Kontext-Spezifität nötig: .mm_rd_crumbs a:hover würde den Text sonst orange
   auf orangem Grund setzen (unlesbar). */
.mm_rd_crumbs .mm_rd_back:hover { background: var(--rd-accent); color: #fff; }

/* ---------- Titelblock (Kopf der Preiskarte) ---------- */
.mm_rd_eyebrow { font-size: 11px; text-transform: uppercase; letter-spacing: 1.4px;
  color: var(--rd-accent); font-weight: 700; }
.mm_rd_title { font-size: 30px; font-weight: 700; margin: 8px 0 4px; line-height: 1.15;
  text-transform: none; border: 0; padding: 0; color: var(--rd-text); }
.mm_rd_stocknr { font-size: 12px; color: var(--rd-text-mut); letter-spacing: .4px; }

/* Key-Facts-Chips (linke Spalte, über der Beschreibung) */
.mm_rd_facts { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px; }
.mm_rd_main > .mm_rd_facts { margin-top: 26px; }
.mm_rd_fact { display: inline-flex; flex-direction: column; gap: 1px;
  background: var(--rd-surface); border: 1px solid var(--rd-border);
  padding: 8px 14px; border-radius: var(--rd-r-md); min-width: 90px; }
.mm_rd_fact .k { font-size: 10px; text-transform: uppercase; letter-spacing: .6px; color: var(--rd-text-mut); }
.mm_rd_fact .v { font-size: 14px; font-weight: 600; color: var(--rd-text); }
.mm_rd_fact.hl { border-color: color-mix(in srgb, var(--rd-good) 55%, transparent); }
.mm_rd_fact.hl .v { color: var(--rd-good); }

/* ---------- Standort-Info ---------- */
.mm_rd .location_details { margin: 20px 0 0; }
.mm_rd .location_details_text,
.mm_rd .location_details_position { font-size: 16px; color: var(--rd-text-mid); }
.mm_rd .location_button a { display: inline-block; margin-top: 8px; background: var(--rd-accent);
  color: #fff; padding: 6px 16px; border-radius: var(--rd-r-sm); font-weight: 500; font-size: 14px; }
.mm_rd .location_button a:hover { background: var(--rd-accent-dk); }
.mm_rd .product_standorte_url { color: var(--rd-accent); font-weight: 600; }

/* Standort-Info in der Sidebar (unter der Teilen-Leiste) */
.mm_rd .mm_rd_dealer .location_details { margin: 14px 0 0; padding-top: 14px;
  border-top: 1px solid var(--rd-border); }
/* Überschrift wie „Teilen:" (.mm_teilen_label: 14px/600, gedämpftes Grau) */
.mm_rd .mm_rd_dealer .location_details_label { display: block; margin-bottom: 8px;
  font-size: 14px; font-weight: 600; color: var(--rd-text-mut); }
.mm_rd .mm_rd_dealer .location_details_text,
.mm_rd .mm_rd_dealer .location_details_position { font-size: 13px; line-height: 1.5; }
.mm_rd .mm_rd_dealer .location_button a { display: flex; align-items: center; justify-content: center;
  text-align: center; margin-top: 10px; padding: 9px 14px; font-size: 13px; line-height: 1.3; }

/* ---------- Layout ---------- */
.mm_rd_layout { display: grid; grid-template-columns: minmax(0,1fr) 450px; gap: 40px;
  padding: 26px 0 56px; align-items: start; }
.mm_rd_main { min-width: 0; }

/* ---------- Galerie ---------- */
.mm_rd_gallery .mm_rd_main_img { position: relative; border-radius: var(--rd-r-lg); overflow: hidden;
  background: var(--rd-surface); border: 1px solid var(--rd-border); }
.mm_rd_stage { display: block; cursor: zoom-in; }
.mm_rd_stage img { width: 100%; aspect-ratio: 4/3; object-fit: cover; display: block; }

/* Blätter-Pfeile über dem großen Bild */
.mm_rd_gal_arrow { position: absolute; top: 50%; transform: translateY(-50%); z-index: 3;
  width: 44px; height: 44px; border: none; border-radius: 50%; cursor: pointer;
  background: rgba(15,25,35,.55); color: #fff; display: flex; align-items: center; justify-content: center;
  transition: background .15s; }
.mm_rd_gal_arrow:hover { background: var(--rd-accent); }
.mm_rd_gal_arrow svg { width: 26px; height: 26px; }
.mm_rd_gal_prev { left: 12px; }
.mm_rd_gal_next { right: 12px; }

.mm_rd_photocount { position: absolute; top: 12px; right: 12px; z-index: 2; font-size: 12px; color: #fff;
  background: rgba(0,0,0,.55); padding: 4px 10px; border-radius: var(--rd-r-sm);
  display: inline-flex; gap: 5px; align-items: center; font-variant-numeric: tabular-nums; }
.mm_rd_zoom { position: absolute; bottom: 12px; right: 12px; z-index: 2; font-size: 11px; color: #fff;
  background: var(--rd-accent); padding: 4px 10px; border-radius: var(--rd-r-sm); cursor: zoom-in;
  text-transform: uppercase; letter-spacing: .5px; font-weight: 500; }

.mm_rd_thumbs { display: grid; grid-template-columns: repeat(6, 1fr); gap: 8px; margin-top: 8px; }
.mm_rd_thumb { aspect-ratio: 4/3; border-radius: var(--rd-r-sm); overflow: hidden; cursor: pointer;
  border: 2px solid transparent; background: var(--rd-surface-2); padding: 0; margin: 0;
  -webkit-appearance: none; appearance: none; display: block; }
.mm_rd_thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.mm_rd_thumb:hover { border-color: var(--rd-border-mid); }
.mm_rd_thumb.is-active { border-color: var(--rd-accent); }

/* Datenquelle der Lightbox (nur Daten, nicht sichtbar) */
.mm_rd_lbset { display: none; }

/* ---------- Großansicht-Lightbox (eigenständig, am <body>) ---------- */
body.mm_rd_lb_open { overflow: hidden; }
.mm_rd_lightbox { position: fixed; inset: 0; z-index: 9999; display: flex; align-items: center; justify-content: center; }
.mm_rd_lightbox[hidden] { display: none; }
.mm_rd_lb_overlay { position: absolute; inset: 0; background: rgba(6,12,18,.92); cursor: zoom-out; }
.mm_rd_lb_fig { position: relative; z-index: 2; margin: 0; max-width: 92vw; max-height: 90vh;
  display: flex; flex-direction: column; align-items: center; gap: 12px; pointer-events: none; }
.mm_rd_lb_img { max-width: 92vw; max-height: 82vh; width: auto; height: auto; object-fit: contain;
  /* Flex darf das Bild NICHT skalieren -> sonst wird die Hoehe je nach Format/
     Viewport gestaucht und das Bild wirkt verzerrt. Selbstbemessung ueber
     max-width/max-height + auto behaelt das Seitenverhaeltnis garantiert bei. */
  flex: 0 0 auto; min-height: 0;
  border-radius: 8px; box-shadow: 0 10px 40px rgba(0,0,0,.5); }
.mm_rd_lb_count { color: rgba(255,255,255,.8); font-size: 13px; letter-spacing: .3px; font-variant-numeric: tabular-nums; }
.mm_rd_lb_close { position: absolute; top: 18px; right: 22px; z-index: 3; width: 44px; height: 44px;
  border: none; border-radius: 50%; background: rgba(255,255,255,.12); color: #fff; font-size: 30px; line-height: 1;
  cursor: pointer; transition: background .15s; }
.mm_rd_lb_close:hover { background: var(--rd-accent, #e85d26); }
.mm_rd_lb_nav { position: absolute; top: 50%; transform: translateY(-50%); z-index: 3;
  width: 52px; height: 52px; border: none; border-radius: 50%; cursor: pointer;
  background: rgba(255,255,255,.12); color: #fff; display: flex; align-items: center; justify-content: center;
  transition: background .15s; }
.mm_rd_lb_nav:hover { background: var(--rd-accent, #e85d26); }
.mm_rd_lb_nav svg { width: 30px; height: 30px; }
.mm_rd_lb_prev { left: 20px; }
.mm_rd_lb_next { right: 20px; }
@media (max-width: 600px) {
  .mm_rd_lb_nav { width: 42px; height: 42px; }
  .mm_rd_lb_prev { left: 8px; } .mm_rd_lb_next { right: 8px; }
  .mm_rd_lb_img { max-height: 74vh; }
}

/* ---------- Content-Bloecke ---------- */
.mm_rd_block { margin-top: 30px; }
.mm_rd_block > h2 { font-size: 17px; font-weight: 600; margin: 0 0 14px; padding-bottom: 10px;
  border-bottom: 2px solid var(--rd-accent); display: inline-block; color: var(--rd-text);
  text-transform: none; }
/* Kein max-width: der Text nutzt die volle Breite der linken Spalte (auf mobilen
   Breiten war die 68ch-Grenze ohnehin nie erreicht). */
.mm_rd_prose { color: var(--rd-text-mid); font-size: 15px; line-height: 1.7; }
.mm_rd_prose ul { margin: 6px 0; padding-left: 18px; }

/* Transparenz-Hinweis unter dem KI-generierten Beschreibungstext: bewusst
   zurückhaltend (kleiner, gedämpft), aber durch Icon und Linie erkennbar
   vom Fließtext abgesetzt. */
.mm_rd_kihinweis {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  margin: 14px 0 0;
  padding-top: 10px;
  border-top: 1px solid var(--rd-border);
  color: var(--rd-text-mut);
  font-size: 12.5px;
  line-height: 1.5;
}
.mm_rd_kihinweis svg { flex: 0 0 auto; margin-top: 2px; }

/* Technische Details – Tabelle */
.mm_rd_specs { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; }
.mm_rd_specs tr { border-bottom: 1px solid var(--rd-border); }
.mm_rd_specs tr:nth-child(odd) { background: var(--rd-surface); }
.mm_rd_specs td { padding: 9px 12px; font-size: 14px; }
/* Drei Spalten: Merkmal | Wert | Einheit. Wert und Einheit haben feste Breiten
   und sitzen rechts; die Merkmal-Spalte nimmt den Rest. Dadurch beginnen Werte
   UND Einheiten in jeder Zeile an derselben Kante – beides linksbündig. */
.mm_rd_specs td.k { color: var(--rd-text-mid); }
.mm_rd_specs td.v { width: 200px; font-weight: 600; text-align: left; color: var(--rd-text); white-space: nowrap; }
.mm_rd_specs td.u { width: 74px; text-align: left; padding-left: 0; }
.mm_rd_specs td.u small { color: var(--rd-text-mut); font-weight: 400; }
/* Schmale Spalten: der Wert darf enger werden, bevor das Merkmal umbricht. */
@media (max-width: 700px) {
  .mm_rd_specs td.v { width: 130px; }
  .mm_rd_specs td.u { width: 52px; }
}

/* Zusatzinformationen – Akkordeon (native details) */
.mm_rd_acc { border: 1px solid var(--rd-border); border-radius: var(--rd-r-md); margin-top: 14px;
  overflow: hidden; background: var(--rd-surface); }
.mm_rd_acc > summary { list-style: none; cursor: pointer; padding: 13px 16px; font-size: 15px;
  font-weight: 600; color: var(--rd-text); display: flex; align-items: center; justify-content: space-between; }
.mm_rd_acc > summary::-webkit-details-marker { display: none; }
.mm_rd_acc > summary::after { content: '+'; color: var(--rd-accent); font-size: 22px; line-height: 1; }
.mm_rd_acc[open] > summary::after { content: '\2013'; }
.mm_rd_acc .mm_rd_acc_body { padding: 0 16px 14px; color: var(--rd-text-mid); font-size: 14px; line-height: 1.7; }
.mm_rd_acc .mm_rd_acc_body ul { margin: 0; padding-left: 18px; }

/* Service-Wiki (Händler-FAQ) */
.mm_rd_wiki_intro { font-size: 14px; color: var(--rd-text-mid); margin: 0 0 6px; max-width: 68ch; }
.mm_rd_wiki_intro strong { color: var(--rd-text); }

/* Medien (Video / PDF) */
.mm_rd_media { margin-top: 24px; }
.mm_rd_media .video { margin-top: 12px; }
.mm_rd_media .video iframe { width: 100%; aspect-ratio: 16/10; border: 0; border-radius: var(--rd-r-md); }
.mm_rd_media .maschine_pdf { display: inline-block; background: var(--rd-surface-2); color: var(--rd-text);
  padding: 8px 16px; border-radius: var(--rd-r-sm); margin: 8px 8px 0 0; font-weight: 600; }
.mm_rd_media .maschine_pdf:hover { background: var(--rd-accent); color: #fff; }

/* ---------- KI-Assistent-Panel (per Button aufklappbar) ---------- */
.mm_rd_aichat { margin-top: 26px; padding: 20px; border-radius: var(--rd-r-lg);
  border: 1px solid color-mix(in srgb, var(--rd-accent) 35%, transparent);
  background: color-mix(in srgb, var(--rd-accent) 8%, var(--rd-surface)); }
.mm_rd_aichat_head { display: flex; align-items: center; gap: 12px; }
.mm_rd_bot { width: 40px; height: 40px; border-radius: var(--rd-r-md); background: var(--rd-accent);
  display: grid; place-items: center; flex-shrink: 0; }
.mm_rd_bot svg { width: 22px; height: 22px; fill: #fff; }
.mm_rd_aichat .ai_eyebrow { font-size: 10px; text-transform: uppercase; letter-spacing: 1.2px;
  color: var(--rd-accent); font-weight: 700; }
.mm_rd_aichat .ai_title { font-size: 17px; font-weight: 600; color: var(--rd-text); }
.mm_rd_aichat .ai_sub { font-size: 13px; color: var(--rd-text-mid); margin: 12px 0 14px; }
.mm_rd_chips { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 14px; }
.mm_rd_chip { background: var(--rd-bg); border: 1px solid var(--rd-border-mid); color: var(--rd-text-mid);
  font-size: 13px; padding: 7px 13px; border-radius: var(--rd-r-pill); cursor: pointer; font: inherit; }
.mm_rd_chip:hover { border-color: var(--rd-accent); color: var(--rd-text); }
/* Chat-Thread */
.mm_rd_ai_thread { display: flex; flex-direction: column; gap: 10px; max-height: 380px; overflow-y: auto;
  margin-bottom: 14px; }
.mm_rd_ai_thread:empty { display: none; }
.mm_rd_ai_msg { max-width: 85%; padding: 10px 13px; border-radius: var(--rd-r-md); font-size: 14px; line-height: 1.55; white-space: pre-wrap; }
.mm_rd_ai_user { align-self: flex-end; background: var(--rd-accent); color: #fff; border-bottom-right-radius: 3px; }
.mm_rd_ai_assistant { align-self: flex-start; background: var(--rd-bg); border: 1px solid var(--rd-border);
  color: var(--rd-text); border-bottom-left-radius: 3px; }
.mm_rd_ai_typing { display: inline-flex; gap: 4px; align-items: center; }
.mm_rd_ai_typing span { width: 6px; height: 6px; border-radius: 50%; background: var(--rd-text-mut);
  animation: mm_rd_blink 1.2s infinite ease-in-out both; }
.mm_rd_ai_typing span:nth-child(2) { animation-delay: .2s; }
.mm_rd_ai_typing span:nth-child(3) { animation-delay: .4s; }
@keyframes mm_rd_blink { 0%, 80%, 100% { opacity: .25; } 40% { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .mm_rd_ai_typing span { animation: none; } }

/* Suchtreffer-Links unter einer Assistenten-Antwort */
.mm_rd_ai_matches { align-self: flex-start; display: flex; flex-direction: column; gap: 6px; max-width: 92%; }
.mm_rd_ai_match { display: flex; flex-direction: column; gap: 1px; padding: 9px 12px; border-radius: var(--rd-r-md);
  background: var(--rd-bg); border: 1px solid var(--rd-border); text-decoration: none; transition: border-color .12s; }
.mm_rd_ai_match:hover { border-color: var(--rd-accent); }
.mm_rd_ai_match_t { font-size: 14px; font-weight: 600; color: var(--rd-text); }
.mm_rd_ai_match:hover .mm_rd_ai_match_t { color: var(--rd-accent); }
.mm_rd_ai_match_m { font-size: 12px; color: var(--rd-text-mut); }
.mm_rd_ai_inputrow { display: flex; gap: 0; background: #fff; border-radius: var(--rd-r-md); overflow: hidden; }
.mm_rd_ai_inputrow input { flex: 1; border: 0; outline: none; padding: 0 14px; height: 46px;
  font-size: 14px; font-family: inherit; color: #16202e; background: #fff; }
.mm_rd_ai_inputrow button { width: 46px; border: 0; background: var(--rd-accent); color: #fff;
  cursor: pointer; display: grid; place-items: center; }
.mm_rd_ai_inputrow button:hover { background: var(--rd-accent-dk); }
.mm_rd_ai_inputrow button svg { width: 18px; height: 18px; fill: currentColor; }
.mm_rd_ai_note { font-size: 11px; color: var(--rd-text-mut); margin: 10px 0 0; }

/* ---------- Rechte Sidebar ---------- */
/* z-index: sticky erzeugt einen eigenen Stacking-Context – ohne ihn landet das
   Teilen-Modal (z-index 9999, aber INNERHALB der Spalte) unter den Galerie-Labels
   (.mm_rd_zoom, z-index 2) und dessen × ist nicht klickbar. */
.mm_rd_side { position: sticky; top: 85px; z-index: 20; display: flex; flex-direction: column;
  gap: 16px; }

/* Abstand unter der letzten Sidebar-Karte, damit sie nicht bündig am Rand endet.
   Nur ab 901px – darunter steht die Spalte im Fluss. */
@media (min-width: 901px) {
  .mm_rd_side .mm_rd_dealer { margin-bottom: 24px; }
}
.mm_rd_card { background: var(--rd-surface); border: 1px solid var(--rd-border); border-radius: var(--rd-r-lg); }

/* Preis-/Aktionskarte */
.mm_rd_pricecard { padding: 20px; }

/* Kopf der Preiskarte: Kategorie + Titel + Lagernummer über dem Preis */
.mm_rd_pc_head { padding-bottom: 14px; margin-bottom: 14px; border-bottom: 1px solid var(--rd-border); }
.mm_rd_pc_head .mm_rd_title { font-size: 24px; margin: 6px 0 4px; }
.mm_rd_pricecard .mm_rd_offerbadge { margin-bottom: 2px; }

.mm_rd_offerbadge { display: inline-flex; align-items: center; gap: 6px;
  background: color-mix(in srgb, var(--rd-accent) 15%, transparent); color: var(--rd-accent);
  font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .6px;
  padding: 4px 10px; border-radius: var(--rd-r-pill); }
.mm_rd_price_old { color: var(--rd-text-mut); text-decoration: line-through; font-size: 15px; margin-top: 12px; }
.mm_rd_price_new { font-size: 30px; font-weight: 800; letter-spacing: -.5px; margin-top: 2px; color: var(--rd-accent); }
.mm_rd_price_plain { font-size: 26px; font-weight: 800; margin-top: 6px; color: var(--rd-accent); }
.mm_rd_price_req { font-size: 19px; font-weight: 700; margin-top: 6px; color: var(--rd-accent); }
/* Der Text ist ein Link aufs Anfrageformular – ohne diese Regel gewinnt die
   globale a-Farbe und die Akzentfarbe oben käme nie an. */
.mm_rd_price_req a { color: inherit; }
.mm_rd_price_req a:hover { text-decoration: underline; }
.mm_rd_price_note { font-size: 12px; color: var(--rd-text-mut); margin-top: 4px; }

.mm_rd_cta { display: flex; flex-direction: column; gap: 10px; margin-top: 18px; }
.mm_rd_btn_row { display: flex; gap: 10px; }
.mm_rd_btn { height: 42px; border-radius: var(--rd-r-md); cursor: pointer; font: 600 13px/1 inherit;
  font-family: inherit; display: inline-flex; align-items: center; justify-content: center; gap: 7px;
  text-decoration: none; border: 1px solid var(--rd-border-mid); background: transparent; color: var(--rd-text-mid); }
.mm_rd_btn svg { width: 17px; height: 17px; }
.mm_rd_btn:hover { border-color: var(--rd-accent); color: var(--rd-accent); }
.mm_rd_btn_primary { background: var(--rd-accent); border-color: var(--rd-accent); color: #fff; height: 46px; font-size: 15px; font-weight: 500; }
.mm_rd_btn_primary:hover { background: var(--rd-accent-dk); color: #fff; }
.mm_rd_btn_row > .mm_rd_btn { flex: 1; }

/* KI-Öffnen-Button (unter Merken/PDF) */
.mm_rd_aibtn { width: 100%; height: 44px; padding: 0 14px; cursor: pointer; font: 600 14px/1 inherit;
  font-family: inherit; display: flex; align-items: center; gap: 8px; border-radius: var(--rd-r-md);
  background: color-mix(in srgb, var(--rd-accent) 12%, transparent);
  border: 1px solid color-mix(in srgb, var(--rd-accent) 45%, transparent); color: var(--rd-accent); }
.mm_rd_aibtn:hover { background: color-mix(in srgb, var(--rd-accent) 20%, transparent); }
.mm_rd_aibtn svg { width: 18px; height: 18px; flex-shrink: 0; fill: currentColor; }
.mm_rd_aibtn .lbl { flex: 1; text-align: left; }
.mm_rd_aibtn .chev { transition: transform .2s; }
.mm_rd_aibtn.is-open .chev { transform: rotate(90deg); }

/* Merken-Button in der Sidebar: die runde Karten-Optik (mm_merk_btn) komplett
   neutralisieren, damit er wie der Ghost-Button „Datenblatt" daneben aussieht. */
.mm_rd_side .mm_merk_btn {
  position: static; top: auto; right: auto; z-index: auto;
  width: auto; height: 42px; padding: 0 12px; margin: 0;
  border: 1px solid var(--rd-border-mid); border-radius: var(--rd-r-md);
  background: transparent; box-shadow: none; color: var(--rd-text-mid);
  font: 600 13px/1 inherit; font-family: inherit;
  display: inline-flex; align-items: center; justify-content: center; gap: 7px;
}
.mm_rd_side .mm_merk_btn:hover { background: transparent; box-shadow: none;
  border-color: var(--rd-accent); color: var(--rd-accent); }
.mm_rd_side .mm_merk_btn .mm_merk_ico { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 2; }
.mm_rd_side .mm_merk_btn.is-merkt { border-color: var(--rd-accent); color: var(--rd-accent);
  background: color-mix(in srgb, var(--rd-accent) 10%, transparent); }
.mm_rd_side .mm_merk_btn.is-merkt .mm_merk_ico { fill: var(--rd-accent); stroke: var(--rd-accent); }

/* Kennwerte-Liste in der Preiskarte */
.mm_rd_keyvals { margin-top: 18px; border-top: 1px solid var(--rd-border); padding-top: 14px; display: grid; gap: 8px; }
.mm_rd_keyval { display: flex; justify-content: space-between; gap: 12px; font-size: 15px; }
.mm_rd_keyval .k { color: var(--rd-text-mut); }
.mm_rd_keyval .v { font-weight: 600; text-align: right; color: var(--rd-text); }

/* Händler-Karte (mit Anfrage-CTA kombiniert) */
.mm_rd_dealer { padding: 18px 20px; }
.mm_rd_dealer .head { font-size: 11px; text-transform: uppercase; letter-spacing: .8px; color: var(--rd-text-mut); margin-bottom: 12px; }
.mm_rd_dealer_top { display: flex; align-items: center; gap: 12px; }
/* Breite Bühne, keine eigene Füllung: die Logodateien bringen ihre weiße Karte
   selbst mit (nötig, weil transparente Logos im Dark-Mode sonst verschwinden) –
   ein Container-Hintergrund lag als grauer Rahmen darum. Höhe ergibt sich aus
   dem Seitenverhältnis des Logos (150px / 2,59 ≈ 58px). */
.mm_rd_dealer_logo { width: 150px; border-radius: var(--rd-r-md); overflow: hidden;
  display: grid; place-items: center; flex-shrink: 0; }
.mm_rd_dealer_logo img { width: 100%; height: auto; display: block; }
.mm_rd_dealer_name { font-size: 16px; font-weight: 600; color: var(--rd-text); }
.mm_rd_dealer_name:hover { color: var(--rd-accent); }
.mm_rd_dealer_loc { font-size: 13px; color: var(--rd-text-mut); }
.mm_rd_contact { margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--rd-border);
  display: flex; align-items: center; gap: 12px; }
.mm_rd_contact + .mm_rd_contact { margin-top: 10px; padding-top: 10px; }
.mm_rd_avatar { width: 40px; height: 40px; border-radius: 50%; overflow: hidden; flex-shrink: 0;
  background: var(--rd-surface-2); display: grid; place-items: center; color: var(--rd-text-mid); font-weight: 600; }
.mm_rd_avatar img { width: 100%; height: 100%; object-fit: cover; }
/* Neutrales Personen-Symbol für Kontakte ohne Foto (Rollen-Kontakte der echten
   Händler). Eine zweite, eigenständige Regel liegt in
   maschinen_markt_haendler.css für die Profilseite.
   ⚠️ Die Farbe MUSS auf `.mm_rd` eingeschränkt bleiben: die Händler-Profilseite
   lädt beide Stylesheets, und `--rd-text-mut` ist nur innerhalb von `.mm_rd`
   definiert – unqualifiziert fiele die Farbe dort auf das geerbte Weiß zurück. */
.mm_rd .mm_avatar_icon { color: var(--rd-text-mut, #a9b1c1); }
.mm_avatar_icon { position: relative; }
.mm_avatar_icon::before {
  content: ''; position: absolute; inset: 0; background-color: currentColor;
  -webkit-mask-position: center; mask-position: center;
  -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
  -webkit-mask-size: 56%; mask-size: 56%;
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2'/%3E%3Ccircle cx='12' cy='7' r='4'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2'/%3E%3Ccircle cx='12' cy='7' r='4'/%3E%3C/svg%3E");
}
.mm_rd_cname { font-size: 14px; font-weight: 600; color: var(--rd-text); }
.mm_rd_cpos { font-size: 12px; color: var(--rd-text-mut); }
.mm_rd_cline { display: block; font-size: 12px; color: var(--rd-text-mid); }
.mm_rd_cline:hover { color: var(--rd-accent); }
.mm_rd_dphone { display: flex; align-items: center; gap: 8px; margin-top: 14px; font-size: 17px; font-weight: 700; color: var(--rd-text); }
.mm_rd_dphone svg { width: 17px; height: 17px; fill: var(--rd-accent); }
.mm_rd_dphone:hover { color: var(--rd-accent); }
.mm_rd_dweb { display: flex; align-items: center; gap: 8px; margin-top: 8px; font-size: 13px; color: var(--rd-text-mid); word-break: break-all; }
.mm_rd_dweb svg { width: 16px; height: 16px; color: var(--rd-accent); flex-shrink: 0; }
.mm_rd_dweb:hover { color: var(--rd-accent); }
.mm_rd_dealer .mm_rd_btn_primary { width: 100%; margin-top: 14px; }
.mm_rd_dealer_more { display: block; margin-top: 14px; text-align: center; font-size: 13px; color: var(--rd-accent); font-weight: 600; }
.mm_rd_dealer_more:hover { color: var(--rd-accent-dk); }

/* ---------- Verwandte Maschinen ---------- */
.mm_rd_related { padding-top: 36px; border-top: 1px solid var(--rd-border); }
.mm_rd_related h2 { font-size: 20px; font-weight: 700; text-transform: uppercase; letter-spacing: .5px;
  margin: 0 0 22px; color: var(--rd-text); }

/* Nutzt die bestehende .maschinen_markt_liste-Grid-Ausgabe darunter unveraendert. */

/* ---------- Responsive ---------- */
@media (max-width: 900px) {
  .mm_rd_layout { grid-template-columns: 1fr; gap: 24px; }
  .mm_rd_side { position: static; }
  .mm_rd_pc_head .mm_rd_title { font-size: 22px; }
  .mm_rd_thumbs { grid-template-columns: repeat(5, 1fr); }

  /* Einspaltig zuerst die rechte Spalte: Kategorie, Titel, Preis, Kennwerte,
     Aktionen und Händler sind die kaufentscheidenden Angaben. Im DOM steht die
     Galerie voran (Desktop-Reihenfolge), mobil wird per order getauscht –
     Grid-Items respektieren order, das Markup bleibt unveraendert. */
  .mm_rd_side { order: 1; }
  .mm_rd_main { order: 2; }
}
@media (max-width: 600px) {
  .mm_rd_thumbs { grid-template-columns: repeat(4, 1fr); }

  /* Logo (150px) + Händlername nebeneinander lassen bei 390px nur ~130px für
     den Namen – „FLECKENSTEIN Werkzeugmaschinen GmbH" brach auf drei Zeilen.
     Mobil deshalb untereinander. */
  .mm_rd_dealer_top { flex-direction: column; align-items: flex-start; gap: 10px; }
}

/* ============================================================
   Verwandte Maschinen + Merkliste + Zuletzt (Tabs + Ansicht-Umschalter)
   ============================================================ */
.mm_rd_userlists { margin-top: 44px; }

/* Kopfleiste: Tabs links, Ansicht-Buttons rechts */
.mm_rd_ul_bar { display: flex; align-items: center; justify-content: space-between;
  gap: 16px; flex-wrap: wrap; margin: 0 0 22px;
  border-bottom: 1px solid var(--rd-border); padding-bottom: 16px; }
.mm_rd_ul_tabs { display: flex; flex-wrap: wrap; gap: 10px; }
.mm_rd_ul_tab { appearance: none; font: inherit; font-weight: 600; cursor: pointer;
  padding: 10px 18px; border-radius: var(--rd-r-pill, 999px);
  border: 1px solid var(--rd-border-mid, var(--rd-border)); background: transparent;
  color: var(--rd-text-mid); transition: color .15s, background .15s, border-color .15s; }
.mm_rd_ul_tab:hover { color: var(--rd-text); border-color: var(--rd-accent, #e85d26); }
.mm_rd_ul_tab.is-active { background: var(--rd-accent, #e85d26); border-color: var(--rd-accent, #e85d26); color: #fff; font-weight: 500; }
.mm_rd_ul_cnt { font-weight: 500; opacity: .85; }

/* Ansicht-Umschalter */
.mm_rd_ul_views { display: inline-flex; gap: 4px; flex: 0 0 auto; }
.mm_rd_ul_views .mm_view_btn { display: inline-flex; align-items: center; justify-content: center;
  width: 38px; height: 38px; padding: 0; cursor: pointer;
  border: 1px solid var(--rd-border-mid, var(--rd-border)); border-radius: 8px;
  background: transparent; color: var(--rd-text-mid); transition: color .15s, background .15s, border-color .15s; }
.mm_rd_ul_views .mm_view_btn svg { fill: currentColor; }
.mm_rd_ul_views .mm_view_btn:hover { color: var(--rd-text); border-color: var(--rd-accent, #e85d26); }
.mm_rd_ul_views .mm_view_btn.is-active { background: var(--rd-accent, #e85d26); border-color: var(--rd-accent, #e85d26); color: #fff; }

.mm_rd_ul_loading, .mm_rd_ul_empty { color: var(--rd-text-mut); padding: 10px 2px; margin: 0; }

/* Karten als Flex-Grid (ueberschreibt das Float-Thirds-Layout der Liste),
   analog zur Filterseite – damit die Ansicht-Modi sauber greifen.
   align-items: stretch → Karten einer Zeile bekommen gleiche Höhe; der Fuß
   (Preis + „Details ansehen") sitzt via margin-top:auto (card.css) unten bündig. */
.mm_rd_ul_cards #maschinen_markt_liste { display: flex; flex-wrap: wrap; gap: 16px; align-items: stretch; }
.mm_rd_ul_cards .maschinen_markt_liste_element { float: none !important; width: calc(33.333% - 11px) !important; margin: 0 !important; box-sizing: border-box; }
.mm_rd_ul_cards .maschinen_markt_trennlinie { display: none !important; }
.mm_rd_ul_cards .maschinen_markt_liste_element:hover { z-index: 5; border: 2px solid var(--rd-accent, #e85d26) !important; }
.mm_rd_ul_cards .maschinen_markt_liste_img,
.mm_rd_ul_cards .maschinen_markt_liste_img figure { margin: 0 !important; line-height: 0; }
.mm_rd_ul_cards .maschinen_markt_liste_img img { width: 100% !important; height: 230px !important; object-fit: contain !important; background: #f2f2f2; display: block; }
.mm_rd_ul_cards .maschinen_markt_liste_daten { display: flex; flex-direction: column; }
.mm_rd_ul_cards .maschinen_markt_liste_img { order: 1; }
.mm_rd_ul_cards .preis_title { position: static !important; order: 2; width: auto !important; bottom: auto !important; font-size: 16px; padding: 8px 12px !important; }
.mm_rd_ul_cards .maschinen_markt_liste_untertitel { min-height: 0 !important; padding-bottom: 12px; }
.mm_rd_ul_cards .maschinen_markt_liste_untertitel .title_wrapper { min-height: 0 !important; }
.mm_rd_ul_cards .maschinen_markt_liste_untertitel .list_deteils { position: static !important; top: auto !important; min-height: 0 !important; margin-top: 10px; }
.mm_rd_ul_cards .maschinen_markt_liste_untertitel .details_anzeigen_button { position: static !important; margin-top: 8px; padding-left: 15px; }

/* Ansicht: 2 pro Zeile */
.mm_rd_ul_cards.view-grid2 .maschinen_markt_liste_element { width: calc(50% - 8px) !important; }

/* Ansicht: Liste (eine Maschine pro Zeile) – Bild links, Text rechts */
.mm_rd_ul_cards.view-list #maschinen_markt_liste { display: block; }
.mm_rd_ul_cards.view-list .maschinen_markt_liste_element { width: 100% !important; margin-bottom: 26px !important; padding-bottom: 4px; }
/* Bild füllt die Kartenhöhe, Breite folgt dem 4:3-Verhältnis (Vorlage).
   Vorher: feste 280px Breite + img height:210px -> viel leere Fläche unter
   dem Bild. Die Basis-Regeln stehen in maschinen_markt_card.css; hier nur
   die Alt-Wrapper-Klassen, die dieselben Elemente treffen. */
.mm_rd_ul_cards.view-list .maschinen_markt_liste_element > a { display: flex; align-items: stretch; gap: 24px; }
.mm_rd_ul_cards.view-list .maschinen_markt_liste_daten { flex: 0 0 58%; width: 58%; max-width: min(58%, 600px); aspect-ratio: auto; align-self: stretch; }
.mm_rd_ul_cards.view-list .maschinen_markt_liste_untertitel { flex: 1 1 auto; min-width: 0; }
.mm_rd_ul_cards.view-list .maschinen_markt_liste_img img { height: 100% !important; }

/* Dunkles Theme: Bild-Fuellflaeche */
html.mm-dark .mm_rd_ul_cards .maschinen_markt_liste_img img { background: #10202e; }

@media (max-width: 1100px) {
  .mm_rd_ul_cards:not(.view-list) .maschinen_markt_liste_element { width: calc(50% - 8px) !important; }
}
@media (max-width: 700px) {
  .mm_rd_ul_cards:not(.view-list) .maschinen_markt_liste_element { width: 100% !important; }
}
@media (max-width: 640px) {
  .mm_rd_ul_cards.view-list .maschinen_markt_liste_element > a { flex-direction: column; gap: 10px; }
  .mm_rd_ul_cards.view-list .maschinen_markt_liste_daten { flex-basis: auto; max-width: none; width: 100%; align-self: auto; aspect-ratio: 4 / 3; }
}