/* Kernfunktionen-Seite: sticky Chip-Navigation */
.features-page {
    --features-chips-sticky-top: 70px;
    --features-chips-scroll-gap: 12px;
    --features-scroll-offset: 182px; /* Fallback; wird per JS aus Bar-Höhe gesetzt */
    overflow-x: clip;
    max-width: 100%;
}

.features-page > section[id] {
    scroll-margin-top: var(--features-scroll-offset);
}

.features-chips-wrap {
    position: sticky;
    top: 70px;
    z-index: 50; /* unter .nav-menu ul (99), über Seiteninhalt */
    background: #fff;
    padding: 0 0 12px;
    margin: 10px 0 0 0;
    border-bottom: 1px solid #e9ecef;
    box-shadow: 0 1px 0 rgba(0, 0, 0, 0.04);
    overflow-x: clip;
    max-width: 100%;
}

.features-chips-wrap > .container {
    max-width: 100%;
    overflow: hidden;
    padding-left: 15px;
    padding-right: 15px;
}

.features-chips-row {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 8px;
    width: 100%;
    max-width: 100%;
}

.features-chips-row:last-child {
    margin-bottom: 0;
}

.features-chip {
    display: inline-flex;
    align-items: center;
    flex: 1 1 calc(50% - 4px);
    min-width: calc(50% - 4px);
    max-width: calc(50% - 4px);
    height: 40px;
    padding: 0 10px;
    border: 1px solid #dee2e6;
    border-radius: 6px;
    background: #f8f9fa;
    color: #333;
    text-decoration: none;
    transition: background-color 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease;
    box-sizing: border-box;
}

.features-chip:hover,
.features-chip:focus {
    text-decoration: none;
    color: #333;
    background: #eef0f2;
    border-color: #ced4da;
}

.features-chip.active {
    background: rgba(113, 197, 93, 0.15);
    border-color: #71c55d;
    box-shadow: inset 0 0 0 1px rgba(113, 197, 93, 0.35);
}

.features-chip-external {
    background: #e8f4fd;
    border-color: #b8daff;
}

.features-chip-external:hover,
.features-chip-external:focus {
    background: #d6ebff;
}

.features-chip-icon {
    flex-shrink: 0;
    width: 1.15em;
    margin-right: 8px;
    font-size: 1rem;
    text-align: center;
}

.features-chip-label {
    font-size: 0.8125rem;
    line-height: 1.2;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    min-width: 0;
}

.badge-multi {
    background-color: #6f42c1;
    color: #fff;
}

@media (min-width: 768px) {
    .features-chip {
        flex: 1 1 calc(25% - 6px);
        min-width: calc(25% - 6px);
        max-width: calc(25% - 6px);
    }
}

@media (min-width: 1200px) {
    .features-chips-row {
        flex-wrap: nowrap;
    }

    .features-chip {
        flex: 1 1 0;
        min-width: 0;
        max-width: none;
    }
}

@media (max-width: 767.98px) {
    .features-chip-label {
        font-size: 0.75rem;
    }
}