/* Produktentwicklung page-specific styles */

/* FÜR WEN – pain lead + cards (built on global .card / .card-grid-2) */
.pain-lead {
  font-family: var(--font-heading); font-size: 1.4rem; font-weight: 400;
  color: var(--text-primary); margin-bottom: var(--space-lg);
}
.pain-card h3 { font-size: 1.02rem; font-weight: 600; margin-bottom: 10px; line-height: 1.4; }
.pain-card p { font-size: .92rem; color: var(--text-secondary); line-height: 1.65; }

/* LEISTUNGSBAUSTEINE – cards with icon heading + tag row */
.block-card h3 {
  display: flex; align-items: center; gap: 10px;
  font-size: 1.15rem; font-weight: 600; margin-bottom: 12px;
}
.block-card > p { font-size: .92rem; color: var(--text-secondary); line-height: 1.7; }
.block-tags {
  display: flex; flex-wrap: wrap; gap: 8px;
  margin-top: 20px; padding-top: 20px; border-top: 1px solid var(--border);
}
.block-tag {
  font-size: .78rem; padding: 8px 16px; border-radius: var(--radius-pill);
  background: var(--accent-bg-subtle); color: var(--accent); font-weight: 600;
  border: 1px solid var(--accent-border-subtle);
}

/* ZUSAMMENARBEIT – service formats (mirrors .tier-* from page-leistungen.css) */
.tier-grid { display: flex; flex-direction: column; gap: var(--space-lg); }
.tier-card {
  display: grid; grid-template-columns: 320px 1fr; gap: 0;
  background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius-xl);
  overflow: hidden; transition: all .4s; scroll-margin-top: 100px; box-shadow: var(--card-shadow);
}
.tier-card:hover { border-color: var(--accent-border-hover); box-shadow: var(--shadow-md); }
.tier-left {
  padding: var(--space-lg); display: flex; flex-direction: column; gap: 16px;
  border-right: 1px solid var(--border); background: var(--accent-bg-faint);
}
.tier-emoji { line-height: 1; }
.tier-label {
  font-size: .75rem; font-weight: 600; text-transform: uppercase;
  letter-spacing: .1em; color: var(--accent);
}
.tier-left h3 { font-family: var(--font-heading); font-size: 1.6rem; font-weight: 400; }
.tier-for { font-size: .88rem; color: var(--text-muted); line-height: 1.5; font-style: italic; }
.tier-format {
  display: inline-flex; align-items: center; gap: 6px; font-size: .82rem;
  color: var(--text-secondary); padding: 8px 14px; background: var(--overlay-subtle);
  border-radius: var(--radius-sm); margin-top: auto;
}
.tier-right { padding: var(--space-lg); }
.tier-right > p { color: var(--text-secondary); font-size: .95rem; line-height: 1.7; margin-bottom: 16px; }
.deliverables {
  display: flex; flex-wrap: wrap; gap: 8px; margin-top: 20px; padding-top: 20px;
  border-top: 1px solid var(--border);
}
.deliverable-tag {
  font-size: .78rem; padding: 8px 16px; border-radius: var(--radius-pill);
  background: var(--accent-bg-subtle); color: var(--accent); font-weight: 600;
  border: 1px solid var(--accent-border-subtle);
}
.tier-cta {
  display: inline-flex; align-items: center; gap: 6px; margin-top: 24px;
  font-size: .9rem; font-weight: 600; color: var(--accent); text-decoration: none; transition: gap .3s;
}
.tier-cta:hover { gap: 10px; }

.formats-note {
  font-size: .92rem; color: var(--text-secondary); line-height: 1.7;
  max-width: 820px; margin-top: var(--space-lg);
  padding-top: var(--space-lg); border-top: 1px solid var(--border);
}
.formats-note strong { color: var(--text-primary); }

/* WARUM TRAIL1 */
.why-card h3 { font-size: 1.05rem; font-weight: 600; margin-bottom: 10px; }
.why-card p { font-size: .92rem; color: var(--text-secondary); line-height: 1.7; }

/* RESPONSIVE */
@media (max-width: 1024px) {
  .tier-card { grid-template-columns: 1fr; }
  .tier-left { border-right: none; border-bottom: 1px solid var(--border); }
}