/* ============================================================
   SECTION 2: PROBLEM
   ============================================================ */

.problem {
  background-color: var(--background-primary);
  padding-block: var(--section-padding-y);
}

/* ── Header-Block ── */
.problem-header {
  text-align: center;
  max-width: 640px;
  margin-inline: auto;
  margin-bottom: clamp(48px, 6vw, 72px);
}

.problem-headline {
  font-size: var(--font-section-headline);
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: -0.02em;
  color: var(--text-primary);
  margin-bottom: clamp(16px, 2vw, 24px);
}

.problem-headline em {
  font-style: italic;
  font-weight: 700;
  color: var(--accent-primary);
}

.problem-intro {
  font-size: var(--font-body);
  line-height: 1.65;
  color: var(--text-secondary);
  max-width: 520px;
  margin-inline: auto;
}

/* ── Cards-Grid ── */
.problem-cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  align-items: stretch;
  gap: 20px;
}

/* ── Einzelne Card ── */
.problem-card {
  background-color: #ffffff;
  border-radius: var(--card-radius);
  padding: var(--card-padding);
  box-shadow: var(--shadow-card);
  transition: box-shadow var(--transition-base), transform var(--transition-base);
}

.problem-card:hover {
  box-shadow: var(--shadow-card-hover);
  transform: translateY(-4px);
}

/* Nummer */
.problem-card-num {
  font-size: 1.5rem;
  font-weight: 500;
  line-height: 1;
  letter-spacing: 0.04em;
  color: var(--accent-primary);
  opacity: 0.45;
  margin-bottom: 24px;
  transition: opacity var(--transition-base);
}

.problem-card:hover .problem-card-num {
  opacity: 0.36;
}

.problem-card-title {
  font-size: var(--font-subsection);
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: -0.01em;
  color: var(--text-primary);
  margin-bottom: 16px;
}

.problem-card-body {
  font-size: var(--font-body);
  line-height: 1.65;
  color: var(--text-secondary);
}

/* ── Stagger-Delays für Scroll-Animation ── */
.problem-card:nth-child(1) { transition-delay: 0ms;   }
.problem-card:nth-child(2) { transition-delay: 100ms; }
.problem-card:nth-child(3) { transition-delay: 200ms; }

/* ── Responsive ── */
@media (max-width: 900px) and (min-width: 601px) {
  .problem-cards {
    grid-template-columns: repeat(2, 1fr);
  }

  .problem-card:nth-child(1),
  .problem-card:nth-child(2),
  .problem-card:nth-child(3) {
    transition-delay: 0ms;
  }
}

@media (max-width: 600px) {
  .problem-cards {
    grid-template-columns: 1fr;
    max-width: 560px;
    margin-inline: auto;
  }

  .problem-card:nth-child(1),
  .problem-card:nth-child(2),
  .problem-card:nth-child(3) {
    transition-delay: 0ms;
  }

  .problem-card-icon svg {
    width: 40px;
    height: 40px;
  }
}