/* ===============================
    Schwerpunkt-Karten

    Kleine Karten für die drei
    Praxis-Schwerpunkte
   =============================== */

.focus-container {

    /* Karten nebeneinander anzeigen */
    display: grid;

    grid-template-columns: repeat(3, 1fr);

    gap: 20px;

    margin-top: 30px;
}


.focus-box {

    /* Kartenoptik */
    background-color: #f7fbf8;

    border: 1px solid rgba(7, 97, 42, 0.15);

    border-radius: 8px;

    padding: 24px;

    min-height: 180px;

    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.06);

    /* ruhige Bewegung beim Hover */
    transition:
        transform 0.25s ease,
        box-shadow 0.25s ease,
        border-color 0.25s ease,
        background-color 0.25s ease;
}

.focus-box:hover {

    /* Karte hebt sich leicht an */
    transform: translateY(-6px);

    box-shadow: 0 10px 24px rgba(0, 0, 0, 0.12);

    border-color: rgba(7, 97, 42, 0.35);

    background-color: #ffffff;
}



.focus-box h3 {

    /* Überschrift innerhalb der Karten */
    margin-top: 0;

    color: var(--primary-color);

    font-size: 22px;
}


.focus-box p {

    /* Text innerhalb der Karten */
    margin-bottom: 0;
}