/* ═══════════════════════════════════════════
   SONDERMASCHINENBAU — page additions (v1.9.23, image v1.9.24, v1.9.25)
   Loaded only on page-expertise.php (enqueued from the template, after
   parkvi.css): carton counting machine section.
   Layout: CAD image | text + facts box; one column below 900px.
═══════════════════════════════════════════ */
.cm-offer {
  display: grid; grid-template-columns: 1.1fr 1fr;
  gap: 56px; align-items: center;
}
.cm-offer > * { min-width: 0; }

/* v1.9.24: CAD image (light studio background, stack drawn transparent); no caption since v1.9.25 */
.cm-figure { margin: 0; }
.cm-figure img {
  display: block; width: 100%; height: auto;
  border-radius: var(--r-lg);
  border: 1px solid rgba(255,255,255,0.10);
  background: #e9eef5;
  box-shadow: 0 24px 60px rgba(0,0,0,0.35);
}
.cm-info { display: flex; flex-direction: column; gap: 28px; }
.cm-title {
  margin-bottom: 16px;
  font-family: 'DM Serif Display', serif; font-weight: 400;
  font-size: clamp(1.9rem, 3.4vw, 2.6rem);
  line-height: 1.15; letter-spacing: -0.02em;
  color: var(--white);
}
.cm-lead {
  max-width: 620px; margin-bottom: 18px;
  font-size: 1.02rem; line-height: 1.7; font-weight: 300;
  color: rgba(255,255,255,0.68);
}
/* v1.9.25: facts box (delivery time, software, quote button) — no price */
.cm-facts {
  padding: 10px 28px 28px;
  border-radius: var(--r-lg);
  background: linear-gradient(160deg, rgba(0,180,216,0.10) 0%, rgba(232,169,35,0.06) 100%);
  border: 1px solid rgba(0,180,216,0.35);
  box-shadow: 0 24px 60px rgba(0,0,0,0.3);
}
.cm-fact {
  display: flex; justify-content: space-between; gap: 16px;
  padding: 14px 0;
  border-top: 1px solid rgba(255,255,255,0.08);
  font-size: 0.95rem;
}
.cm-fact:first-child { border-top: 0; }
.cm-fact-label { color: rgba(255,255,255,0.55); }
.cm-fact-val { font-weight: 700; color: var(--white); text-align: right; }
.cm-cta { width: 100%; margin-top: 16px; justify-content: center; }

@media (max-width: 1100px) {
  .cm-offer { gap: 40px; }
}
@media (max-width: 900px) {
  .cm-offer { grid-template-columns: 1fr; gap: 32px; }
}
@media (max-width: 640px) {
  .cm-facts { padding: 6px 20px 22px; }
  .cm-title { -webkit-hyphens: auto; hyphens: auto; overflow-wrap: break-word; }
}
