/* ── problem-solution.css ──────────────────────────────
   Module: nf--problem-solution
   2×2 grid of paired cards. Each card has two columns:
   Problem (white, red tag) | Lösung (peach, orange tag).
   ──────────────────────────────────────────────────────── */

.nf--problem-solution__grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--spacing4);
}

.nf--problem-solution__card {
    background: var(--white);
    border: 1px solid var(--fog);
    border-radius: 1.4rem;
    display: grid;
    grid-template-columns: 1fr 1fr;
    overflow: hidden;
}

.nf--problem-solution__col {
    padding: 2.8rem 2.8rem 3rem;
}

.nf--problem-solution__col--problem {
    background: var(--white);
}

.nf--problem-solution__col--solution {
    background: #f3f8f3;
    border-left: 1px solid var(--fog);
}

/* ── Tag (Problem / Lösung label with icon) ───────────── */
.nf--problem-solution__tag {
    display: inline-flex;
    align-items: center;
    gap: 0.9rem;
    font-size: 1.1rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    margin-bottom: 1.8rem;
}

.nf--problem-solution__tag--problem {
    color: #d83a3a;
}

.nf--problem-solution__tag--solution {
    color: #39a571;
}

.nf--problem-solution__tag-icon {
    width: 2.6rem;
    height: 2.6rem;
    border-radius: 999px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: none;
}

.nf--problem-solution__tag--problem .nf--problem-solution__tag-icon {
    background: #fdeaea;
    color: #d83a3a;
}

.nf--problem-solution__tag--solution .nf--problem-solution__tag-icon {
    background: var(--white);
    color: var(--green);
}

.nf--problem-solution__tag-icon svg {
    width: 1.3rem;
    height: 1.3rem;
}

/* ── Headline + body ─────────────────────────────────── */
.nf--problem-solution__title {
    font-weight: 600;
    font-size: 1.8rem;
    line-height: 1.28;
    letter-spacing: -0.01em;
    color: var(--black);
    margin: 0 0 1.2rem;
    text-wrap: balance;
}

.nf--problem-solution__body {
    font-size: 1.4rem;
    line-height: 1.6;
    color: var(--slate);
    margin: 0;
}

/* ── Responsive ────────────────────────────────────────
   At ≤1024px: 1 card per row.
   At ≤640px: card columns also stack (problem on top, solution below).
   ──────────────────────────────────────────────────────── */
@media (max-width: 1024px) {
    .nf--problem-solution__grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 640px) {
    .nf--problem-solution__card {
        grid-template-columns: 1fr;
    }

    .nf--problem-solution__col--solution {
        border-left: 0;
        border-top: 1px solid var(--fog);
    }
}