/* MediaMill Bootstrap 5 Accordion */

/* ---------------------------------------------------------------------------
 * Theme (MediaMill)
 * ------------------------------------------------------------------------ */
.accordion {
    --bs-accordion-color: #212529;
    --bs-accordion-bg: #fff;
    --bs-accordion-border-color: var(--bs-border-color);
    --bs-accordion-btn-color: #212529;
    --bs-accordion-btn-bg: var(--bs-accordion-bg);
    --bs-accordion-btn-icon: url(data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23212529'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e);

    --bs-accordion-btn-focus-border-color: rgb(67, 120, 47);
    --bs-accordion-btn-focus-box-shadow: 0 0 0 0.25rem rgba(204, 203, 203, 0.25);
    --bs-accordion-active-color:  #000;
    --bs-accordion-active-bg: #d5d5d5;
    --bs-accordion-btn-active-icon: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23000000'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e");
}

/* ---------------------------------------------------------------------------
 * Grundlagen
 * ------------------------------------------------------------------------ */
.accordion .accordion-item {
    /* Sprungziel nicht unter einem Sticky-Header verschwinden lassen */
    scroll-margin-top: 6rem;
}

.accordion-body > *:last-child,
.mm-accordion-text > *:last-child,
.mm-accordion-media__text > *:last-child {
    margin-bottom: 0;
}

/* ---------------------------------------------------------------------------
 * Bildergruppe
 * Breite je Bild kommt aus --mm-accordion-imgwidth-set (Prozent, Inline-Style),
 * optionale Pixel-Obergrenze aus --mm-accordion-imgmax.
 * Der Abstand wird als Innenabstand gesetzt (Gutter), damit z. B. vier Bilder
 * mit je 25 % auch tatsaechlich in eine Reihe passen.
 * ------------------------------------------------------------------------ */
.mm-accordion-images {
    --mm-accordion-gap: 1rem;
    --mm-accordion-imgwidth: var(--mm-accordion-imgwidth-set, 33%);
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    margin: 0 calc(var(--mm-accordion-gap) / -2);
}

.mm-accordion-images--start  { justify-content: flex-start; }
.mm-accordion-images--center { justify-content: center; }
.mm-accordion-images--end    { justify-content: flex-end; }

.mm-accordion-images__item {
    flex: 0 1 var(--mm-accordion-imgwidth);
    max-width: min(var(--mm-accordion-imgwidth), var(--mm-accordion-imgmax, 100%));
    box-sizing: border-box;
    padding: 0 calc(var(--mm-accordion-gap) / 2) var(--mm-accordion-gap);
    margin: 0;
}

.mm-accordion-images__img {
    display: block;
    width: 100%;
    height: auto;
    max-width: 100%;
}

.mm-accordion-images__link {
    display: block;
    cursor: zoom-in;
}

.mm-accordion-images__caption {
    margin-top: .35rem;
    font-size: .875rem;
    line-height: 1.35;
    color: var(--bs-secondary-color, #6c757d);
}

.mm-accordion-images--center .mm-accordion-images__caption { text-align: center; }
.mm-accordion-images--end .mm-accordion-images__caption    { text-align: right; }

/* ---------------------------------------------------------------------------
 * Text mit Bild links / rechts
 * Spaltenbreite kommt aus --mm-accordion-mediawidth (Inline-Style).
 * ------------------------------------------------------------------------ */
.mm-accordion-media__images {
    margin-bottom: .5rem;
}

@media (min-width: 768px) {
    .mm-accordion-media {
        display: flex;
        align-items: flex-start;
        gap: 1.5rem;
    }

    .mm-accordion-media__images {
        flex: 0 0 var(--mm-accordion-mediawidth, 33%);
        max-width: var(--mm-accordion-mediawidth, 33%);
        margin-bottom: 0;
    }

    .mm-accordion-media__text {
        flex: 1 1 auto;
        min-width: 0;
    }

    .mm-accordion-media--right .mm-accordion-media__images {
        order: 2;
    }
}

/* ---------------------------------------------------------------------------
 * Responsive
 * ------------------------------------------------------------------------ */
@media (max-width: 767.98px) {
    /* auf Tablets nie schmaler als die halbe Breite */
    .mm-accordion-images {
        --mm-accordion-imgwidth: max(var(--mm-accordion-imgwidth-set, 33%), 50%);
    }
}

@media (max-width: 575.98px) {
    /* auf dem Smartphone immer einspaltig */
    .mm-accordion-images {
        --mm-accordion-imgwidth: 100%;
        --mm-accordion-gap: .75rem;
    }

    .accordion {
        --bs-accordion-btn-padding-x: 1rem;
        --bs-accordion-btn-padding-y: .875rem;
        --bs-accordion-body-padding-x: 1rem;
        --bs-accordion-body-padding-y: 1rem;
    }

    .accordion-button {
        font-size: 1rem;
        line-height: 1.3;
    }
}