/*
 * Info-Raster - Frontend (Startseite)
 * Farben aus den --bk-*-Variablen des Templates, Fallbacks fuer den OPC-Editor.
 */
.bk-info {
    margin: 32px 0;
    color: var(--bk-text, #3B3535);
}

.bk-info-title {
    margin: 0 0 24px;
    text-align: center;
    font-size: 26px;
    font-weight: 700;
    line-height: 1.25;
    color: var(--bk-accent, #107C92);
}

.bk-info-grid {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 20px;
}

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

.bk-info-card {
    padding: 20px 22px;
    background: var(--bk-surface, #F8F6F5);
    border: 1px solid var(--bk-border-soft, #EBEAE9);
    border-radius: 10px;
}

.bk-info-card-title {
    display: block;
    margin-bottom: 8px;
    font-size: 17px;
    font-weight: 700;
    color: var(--bk-text, #3B3535);
}

.bk-info--title-accent .bk-info-card-title {
    color: var(--bk-accent, #107C92);
}

.bk-info-card-text {
    display: block;
    font-size: 14px;
    line-height: 1.55;
}

@media (max-width: 991.98px) {
    .bk-info .bk-info-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
}

@media (max-width: 767.98px) {
    .bk-info-title { font-size: 22px; }
    .bk-info .bk-info-grid { grid-template-columns: minmax(0, 1fr); gap: 12px; }
}