/* ============================================================
   NG MARKETING — leistungen.css
============================================================ */

/* .page-hero itself lives in style.css (shared with projekte.html + prozess.html) */

.service-detail {
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: center;
  gap: 60px;
  padding-block: 60px;
  border-bottom: 1px solid rgba(26, 28, 30, 0.1);
}
.service-detail:last-child { border-bottom: none; }
.service-detail.reverse .service-detail-info { order: 2; }
.service-detail.reverse .service-detail-panel { order: 1; }

.service-detail-index {
  display: block;
  font-weight: 600;
  color: var(--lemon);
  margin-bottom: 6px;
}
.service-detail-info h2 { margin-bottom: 20px; }
.service-bullets {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-top: 22px;
}
.service-bullets li {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 0.92rem;
  color: rgba(26, 28, 30, 0.75);
}
.service-bullets svg { flex-shrink: 0; margin-top: 3px; color: var(--lemon); }
.service-detail-info .btn { margin-top: 26px; }

.service-detail-panel {
  border-radius: var(--radius-lg);
  border: 1px solid rgba(26, 28, 30, 0.1);
  background: var(--paper);
  padding: 30px;
  display: flex;
  flex-direction: column;
  gap: 20px;
}
.service-detail-panel .label {
  display: block;
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: rgba(26, 28, 30, 0.4);
  margin-bottom: 6px;
}
.service-detail-panel p { font-size: 0.95rem; color: rgba(26,28,30,.75); }
.service-benefit {
  border-radius: var(--radius-md);
  background: var(--eerie);
  color: var(--cloud);
  padding: 20px;
}
.service-benefit .label { color: rgba(247, 197, 23, 0.8); }
.service-benefit p { color: rgba(242, 242, 242, 0.85); font-size: 0.9rem; }

@media (max-width: 860px) {
  .service-detail,
  .service-detail.reverse {
    grid-template-columns: 1fr;
    gap: 28px;
  }
  .service-detail.reverse .service-detail-info,
  .service-detail.reverse .service-detail-panel {
    order: initial;
  }
}