/*
 * Nur Suche und Trefferzustaende. Das Grundaussehen der Accordions kommt
 * bewusst weiter aus dem Theme (bootstrap_package accordion component),
 * damit der Block sich nicht mit dem Theme-Styling beisst.
 */

.faq-headline {
    margin-bottom: 1.5rem;
}

.faq-search-wrap {
    margin-bottom: 2rem;
}

.faq .faq-search {
    background-color: #fff;
    border: 1px solid var(--primary, #183A68);
    border-radius: 0;
}

.faq .faq-search:focus {
    background-color: #fff;
    border-color: var(--primary, #183A68);
    box-shadow: none;
    outline: none;
}

.faq .faq-no-results {
    margin-top: 0.75rem;
    margin-bottom: 0;
    font-weight: 500;
}

.faq-columns .faq-accordion {
    height: 100%;
}

/*
 * Mobil stehen die Spalten untereinander. Bootstraps vertikaler Gutter setzte
 * dort margin-top auf jede Spalte und riss damit genau an den Spaltengrenzen
 * eine Luecke in die Liste - deshalb im Template gx-4 statt g-4.
 *
 * Ohne diese Luecke werden die Kanten der einzelnen Spalten-Accordions
 * sichtbar: an der Naht treffen zwei 1px-Rahmen aufeinander und mitten in der
 * Liste tauchen abgerundete Ecken auf. Beides wird hier geglaettet, damit der
 * Stapel wie ein durchgehendes Accordion wirkt. Ab md stehen die Spalten
 * nebeneinander, dort sind die Radien je Spalte richtig und bleiben.
 */
@media (max-width: 767.98px) {
    .faq-columns > .col:not(:first-child) .faq-item:first-of-type {
        border-top: 0;
    }

    .faq-columns > .col:not(:first-child) .faq-item:first-of-type,
    .faq-columns > .col:not(:first-child) .faq-item:first-of-type .accordion-button {
        border-top-left-radius: 0;
        border-top-right-radius: 0;
    }

    .faq-columns > .col:not(:last-child) .faq-item:last-of-type,
    .faq-columns > .col:not(:last-child) .faq-item:last-of-type .accordion-button {
        border-bottom-left-radius: 0;
        border-bottom-right-radius: 0;
    }
}

/* Treffer der Textsuche */
.faq .faq-item.faq-match > .accordion-header .accordion-button {
    background-color: var(--primary, #183A68);
    color: #fff;
}

.faq .faq-item.faq-match > .accordion-header .accordion-button::after {
    filter: brightness(0) invert(1);
}

/* Nicht-Treffer bleiben lesbar, treten aber zurueck */
.faq .faq-item.faq-dimmed {
    opacity: 0.45;
}

.faq .faq-item.faq-dimmed:focus-within {
    opacity: 1;
}

@media (prefers-reduced-motion: no-preference) {
    .faq .faq-item {
        transition: opacity 0.15s ease-in-out;
    }
}