/* ---------- Surfaces & Cards ---------- */
.feature-card {
    /* eigene Oberfläche, passt sich Light/Dark automatisch an */
    background-color: var(--bs-tertiary-bg);
    color: var(--bs-body-color);
    border: 1px solid var(--bs-border-color);
    border-radius: 1rem;
    transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease, background-color .18s ease;
    box-shadow: 0 .25rem .75rem rgba(0,0,0,.04); /* Light default */
}

/* dunkler etwas kräftigerer Schatten für mehr Tiefe */
:root[data-bs-theme="dark"] .feature-card {
    box-shadow: 0 .5rem 1.25rem rgba(0,0,0,.35);
}

/* Hover-Lift */
.feature-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 .75rem 1.5rem rgba(0,0,0,.08);
}

:root[data-bs-theme="dark"] .feature-card:hover {
    box-shadow: 0 .75rem 1.5rem rgba(0,0,0,.45);
}

/* Card-Content-Abstände */
.feature-card .card-body {
    padding: 1.25rem 1.25rem 1rem;
}

.feature-card .card-footer {
    padding: .75rem 1.25rem;
    background-color: var(--bs-tertiary-bg);
    border-top: 1px solid var(--bs-border-color);
}

/* Icons nicht zu blass: statt fester Opacity die Theme-Secondary-Farbe nutzen */
.feature-card .fs-4 { /* nur für deine großen Icons */
    color: var(--bs-secondary-color);
    opacity: 1 !important; /* überschreibt evtl. .opacity-50 */
}