/*
|--------------------------------------------------------------------------
| Card-Grundlage
|--------------------------------------------------------------------------
|
| Gemeinsame Eigenschaften aller Cards.
|
| Farben oder besondere Hervorhebungen werden ausschließlich in den
| jeweiligen Card-Komponenten definiert.
|
*/

.card {
    display: flex;
    flex-direction: column;

    gap: var(--spacing-5);

    padding: var(--spacing-6);

    border:
        var(--border-width)
        solid
        var(--border-color);

    border-radius: var(--radius-xl);

    background: var(--background-surface);

    box-shadow: var(--shadow-sm);

    transition:
        border-color var(--transition-base),
        background-color var(--transition-base),
        box-shadow var(--transition-base),
        transform var(--transition-base);
}


/*
|--------------------------------------------------------------------------
| Hover
|--------------------------------------------------------------------------
*/

.card:hover {
    transform: translateY(-2px);

    background: var(--background-surface-hover);

    border-color: var(--border-color-strong);

    box-shadow: var(--shadow-md);
}


/*
|--------------------------------------------------------------------------
| Bereiche
|--------------------------------------------------------------------------
*/

.card-header {
    display: flex;
    flex-direction: column;

    gap: var(--spacing-2);
}

.card-body {
    display: flex;
    flex-direction: column;

    gap: var(--spacing-4);
}

.card-footer {
    display: flex;
    align-items: center;
    justify-content: flex-end;

    gap: var(--spacing-3);

    margin-top: auto;
}


/*
|--------------------------------------------------------------------------
| Titel
|--------------------------------------------------------------------------
*/

.card-title {
    margin: 0;

    font-size: var(--font-size-xl);
    font-weight: var(--font-weight-bold);

    color: var(--text-primary);
}

.card-subtitle {
    margin: 0;

    color: var(--text-secondary);

    font-size: var(--font-size-sm);
}


/*
|--------------------------------------------------------------------------
| Mobile Geräte
|--------------------------------------------------------------------------
*/

@media (max-width: 768px) {

    .card {
        padding: var(--spacing-5);
    }

    .card-footer {
        flex-wrap: wrap;
    }

}