/* ==================================================
   CONTENT CSS
   Zweck: Durchgängiger Content-Bereich ohne zusätzliche Container-Verschachtelung.
================================================== */

.site-main {
    background: var(--color-menu-bg);
    padding: 20px;
}

.grid {
    display: grid;
    gap: var(--grid-gap);
    margin-bottom: var(--grid-gap);
}

.grid:last-child {
    margin-bottom: 0;
}

.grid-1 {
    grid-template-columns: 1fr;
}

.grid-2 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.grid-3 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.grid-70-30 {
    grid-template-columns: 7fr 3fr;
}

.grid-30-70 {
    grid-template-columns: 3fr 7fr;
}

.card {
    padding: 24px;
    background: var(--color-card-bg);
    border: 1px solid var(--color-card-border);
    border-radius: var(--radius-button);
    color: #ffffff;
    transition: transform 0.2s ease, background-color 0.2s ease;
}

.card:hover {
    transform: translateY(-2px);
    background: rgba(32, 54, 101, 0.84);
}

.card h2,
.card h3,
.card p {
    color: #ffffff;
}

.card p:last-child {
    margin-bottom: 0;
}

.card-image {
    padding: 0;
    overflow: hidden;
}

.card-image img {
    width: 100%;
    object-fit: cover;
}

.card-image.is-16-9 img {
    aspect-ratio: 16 / 9;
}

.card-image.is-21-9 img {
    aspect-ratio: 21 / 9;
}

.card-body {
    padding: 24px;
}

@media (max-width: 900px) {
    .grid-2,
    .grid-3,
    .grid-70-30,
    .grid-30-70 {
        grid-template-columns: 1fr;
    }
}