/*
 * Pain/Promise — 2-Spalten-Vergleich (z.B. 90-Tage-Programm).
 * Eigenständige Komponente; via assets/app.js eingebunden.
 */
.promise-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
  margin-top: 40px;
  align-items: start;
}
.promise-col {
  background: var(--c-card);
  border: 1px solid var(--c-border);
  border-radius: 18px;
  padding: 28px 26px;
}
.promise-col--bad { border-color: rgba(255,80,80,.3); background: linear-gradient(135deg, rgba(255,80,80,.06) 0%, transparent 60%); }
.promise-col--good { border-color: rgba(253,182,10,.4); background: linear-gradient(135deg, rgba(253,182,10,.1) 0%, transparent 60%); }
.promise-col h3 { font-size: 1.3rem; margin-bottom: 16px; }
.promise-col ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 12px; }
.promise-col li { padding-left: 22px; position: relative; line-height: 1.5; }
.promise-col--bad li::before { content: "✕"; position: absolute; left: 0; color: #ff7070; font-weight: 900; }
.promise-col--good li::before { content: "✓"; position: absolute; left: 0; color: var(--c-yellow); font-weight: 900; }
@media (max-width: 760px){ .promise-grid { grid-template-columns: 1fr; } }