/* drx_opc: Content-Karten — Kartengruen aus der Vorlage (#d6e3c0), grosszuegige Rundungen. */
.drx-karten {
    --drx-card: #d6e3c0;
    --drx-green: rgb(64, 86, 29);
    --drx-ink: #2f3327;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: clamp(1rem, 2.5vw, 2rem);
    /* drx: boxed wie PSD */
    max-width: 1240px;
    margin: clamp(1.25rem, 2.5vw, 2rem) auto;
    padding-left: 1rem;
    padding-right: 1rem;
}
.drx-karte {
    background: var(--drx-card);
    border-radius: 26px;
    padding: clamp(1.4rem, 3vw, 2.6rem);
}
.drx-karte-top {
    display: flex;
    align-items: center;
    gap: clamp(1rem, 2vw, 1.8rem);
    margin-bottom: clamp(.9rem, 2vw, 1.6rem);
}
.drx-karte-icon { flex: 0 0 auto; width: clamp(90px, 11vw, 175px); height: auto; }
.drx-karte-title {
    /* drx (Markus): Karten-Titel sind h3 — Max von 1.8rem (28.8px) war groesser als manche Abschnitts-h2
       (z.B. "News" 24px) und brach damit die visuelle H-Hierarchie. Auf max 1.4rem (22.4px) gesenkt ->
       klar kleiner als jede Abschnitts-h2, saubere absteigende Stufung. */
    font-size: clamp(1.15rem, 1.6vw, 1.4rem);
    font-weight: 400;
    color: var(--drx-ink);
    line-height: 1.2;
    margin: 0;
}
.drx-karte-text { color: var(--drx-ink); line-height: 1.6; font-size: .95rem; }
.drx-karte-text ul { padding-left: 1.1rem; margin: 0; }
.drx-karte-text li { margin-bottom: .55rem; }
.drx-karte-text li strong { display: block; }

@media (max-width: 767px) {
    .drx-karten { grid-template-columns: 1fr; }
}