/* ─────────────────────────────────────────────────────────────
   Service-Detail-Komponenten: Entscheidungskarten (decision-grid)
   + Technologievergleich (comparison-table). Token-basiert, global
   geladen. Ersetzt das frühere seitenspezifische rohr-pages.css –
   die bewusste Sonderpalette (Orange/Blau) wurde auf die zentralen
   Marken-Tokens normalisiert, damit Restyling zentral steuerbar bleibt.
   ───────────────────────────────────────────────────────────── */

/* ── Entscheidungskarten ─────────────────────────────────────── */
.decision-grid {
  margin-top: var(--space-6);
  display: grid;
  grid-template-columns: repeat(3, var(--grid-track-fluid));
  gap: var(--space-4);
}

.decision-card {
  background: var(--color-bg-alt);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: var(--space-5);
}

.decision-card h3 {
  margin: 0 0 var(--space-2);
  font-size: var(--text-lg);
}

.decision-card p {
  margin: 0;
}

/* ── Technologievergleich-Tabelle ────────────────────────────── */
.comparison-table {
  width: 100%;
  /* Lesbare Mindestbreite → horizontaler Scroll (im `.table-responsive__scroll`)
     auf schmalen Viewports statt gequetschter Umbrüche. */
  min-width: 40rem;
  border-collapse: separate;
  border-spacing: 0;
  overflow: hidden;
  border-radius: var(--radius-lg);
  border: 1px solid var(--color-border);
}

.comparison-table thead th {
  background: var(--color-bg-alt);
  font-weight: var(--font-weight-bold);
  text-align: left;
}

.comparison-table th,
.comparison-table td {
  padding: var(--space-3);
  border-bottom: 1px solid var(--color-border);
  border-right: 1px solid var(--color-border);
  vertical-align: middle;
  text-align: left;
}

.comparison-table tr:last-child td {
  border-bottom: 0;
}

.comparison-table th:last-child,
.comparison-table td:last-child {
  border-right: 0;
}

.comparison-table .highlight-col {
  background: var(--color-accent-bg);
}

.comparison-table thead .highlight-col {
  background: var(--color-accent-bg-hover);
}

.comparison-badge {
  display: inline-block;
  margin-top: var(--space-1);
  padding: var(--space-1) var(--space-2);
  border-radius: var(--radius-full);
  background: var(--color-accent);
  color: var(--color-text-inverse);
  font-size: var(--text-xs);
  font-weight: var(--font-weight-semibold);
}

/* ── Dunkle Sektionen ────────────────────────────────────────
   In `.dark-section` flippen `--color-bg`/`-text`/`-border` bereits,
   aber `--color-bg-alt` (Karten + Tabellenkopf) bleibt hell → sonst
   heller Grund unter hellem Text. Analog zu `.spec-table`/`.section-
   media--card` bekommen Karten und Kopf/Highlight einen dunklen Ton,
   damit der Vergleich auf JEDER Sektion sauber lesbar bleibt. */
.dark-section .decision-card {
  background: var(--glass-on-dark-bg);
  border-color: var(--glass-on-dark-border);
}
.dark-section .comparison-table thead th {
  background: var(--on-dark-surface-soft);
  color: var(--on-dark-text);
}
.dark-section .comparison-table .highlight-col {
  background: var(--color-accent-bg-hover);
}
.dark-section .comparison-table thead .highlight-col {
  background: var(--color-accent-bg-hover);
}

@media (max-width: 780px) {
  .decision-grid {
    grid-template-columns: 1fr;
  }

  .comparison-table {
    font-size: var(--text-sm);
  }

  .comparison-table th,
  .comparison-table td {
    padding: var(--space-2);
  }
}

/* ── Maschinen-Bild-Galerie neben der Kenndaten-Tabelle (spec_table + machine_ref) ──
   Öffnet in der generischen Lightbox (assets/js/lightbox.js, reused vom /einblicke/).
   Primärbild groß, weitere als Thumb-Reihe. Zoom-Badge + Cover-Zoom aus der Galerie-
   Bildsprache; alle Tokens aus variables.css (Styling-SSOT). */
.spec-media { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-3); align-content: start; margin: 0; }
.section-media__figure.spec-media { box-shadow: none; overflow: visible; border-radius: 0; align-self: start; }
.spec-media__shot {
  position: relative; display: block; padding: 0;
  border: 1px solid var(--color-border); border-radius: var(--radius-lg);
  overflow: hidden; background: var(--color-bg-alt); cursor: zoom-in;
  transition: border-color var(--glow-speed) var(--glow-ease), box-shadow var(--glow-speed) var(--glow-ease);
}
.spec-media__shot--main { grid-column: 1 / -1; aspect-ratio: 3 / 2; }
.spec-media__shot--thumb { aspect-ratio: 4 / 3; }
.spec-media__shot:is(:hover, :focus-visible) { border-color: var(--color-accent); box-shadow: var(--card-shadow-hover), var(--glow); outline: none; }
.spec-media__shot picture { display: block; width: 100%; height: 100%; }
.spec-media__img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 0.32s ease, filter 0.32s ease; }
.spec-media__shot:is(:hover, :focus-visible) .spec-media__img { transform: scale(1.05); filter: brightness(0.9); }
/* Aussehen, Hover-/Fokus-Aufdeckung und Touch-Sichtbarkeit = SSOT
   `.media-zoom-badge` (components/lightbox.css, greift über `[data-lightbox]`
   am `.spec-media__shot`-Button). Hier nur noch die Größe. */
.spec-media__zoom {
  --media-zoom-size: 2rem;
  --media-zoom-icon-size: 1rem;
}
/* Thumbs stehen zu dritt in der Reihe (~105px bei 390px Viewport) und tragen das
   Badge auf Touch DAUERHAFT — in Hauptbild-Größe wären das 30 % der Kachel. */
.spec-media__shot--thumb .spec-media__zoom {
  --media-zoom-size: 1.4rem;
  --media-zoom-icon-size: 0.75rem;
  --media-zoom-inset: var(--space-1);
}
@media (max-width: 767px) { .spec-media { gap: var(--space-2); } }

/* ── Bedarf → Maschine (capability_match) ────────────────────────────────
   Die komplementäre Maschinen-Hülle als Erzählung: eine Karte je Kunden-Bedarf,
   gepaart mit der Maschine, die ihn abdeckt + hartem Spec-Chip (driftfrei aus der
   SSOT). Bildsprache = mpk-envelope-Verwandtschaft (Accent-Haarlinie beim Hover als
   „technischer" Tell), aber eigenständige Klassen, weil machinery.css nicht auf der
   Leistungs-Detailseite lädt. Alle Werte = variables.css-Tokens (Styling-SSOT). */
.cap-match {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-5);
  margin-top: var(--space-10);
}
.cap-match__card {
  position: relative;
  display: grid;
  align-content: start;
  gap: var(--space-3);
  padding: var(--space-8) var(--space-6);
  background: var(--color-bg-alt);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  transition: var(--transition-base);
}
.cap-match__card::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 3px;
  background: var(--color-accent);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--transition-base);
}
.cap-match__card:hover {
  border-color: var(--color-accent);
  box-shadow: var(--card-shadow-hover-soft);
  transform: var(--card-hover-transform);
}
.cap-match__card:hover::before { transform: scaleX(1); }
.cap-match__need {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  margin: 0;
  font-family: var(--font-display);
  font-size: var(--text-xl);
  font-weight: var(--font-weight-bold);
  letter-spacing: var(--tracking-tight);
  color: var(--color-text);
}
.cap-match__icon {
  display: inline-flex;
  flex: 0 0 auto;
  color: var(--color-accent-text);
}
.cap-match__icon svg { width: 1.5rem; height: 1.5rem; }
.cap-match__detail {
  margin: 0;
  font-size: var(--text-base);
  line-height: var(--leading-relaxed);
  color: var(--color-text-muted);
}
.cap-match__match {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--space-1) var(--space-3);
  margin-top: var(--space-1);
  padding-top: var(--space-4);
  border-top: 1px solid var(--color-border);
}
.cap-match__machine {
  font-weight: var(--font-weight-semibold);
  color: var(--color-text);
}
.cap-match__eg {
  margin: 0;
  font-size: var(--text-sm);
  color: var(--color-text-muted);
}
/* Formen-Streifen: „und in jeder Form" — Geometrien, die alle Walzen liefern */
.cap-match__forms {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-3) var(--space-4);
  margin-top: var(--space-6);
  padding: var(--space-5) var(--space-6);
  background: var(--color-accent-bg);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
}
.cap-match__forms-label {
  font-family: var(--font-display);
  font-weight: var(--font-weight-bold);
  color: var(--color-text);
}
.cap-match__forms-list {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin: 0;
  padding: 0;
  list-style: none;
}
.cap-match__form {
  padding: var(--space-1) var(--space-3);
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-full);
  font-size: var(--text-sm);
  font-weight: var(--font-weight-medium);
  color: var(--color-text);
}
@media (max-width: 780px) {
  .cap-match { grid-template-columns: 1fr; gap: var(--space-4); }
  .cap-match__card { padding: var(--space-6) var(--space-5); }
}