/**
 * ELLI Accordion
 * Bootstrap 5.3 Mapping auf komponentenspezifische CSS-Variablen
 */

.elli-accordion .elli-accordion__list {
  /* Basis */
  --bs-accordion-color: var(--elli-accordion-color, #1a1a1a);
  --bs-accordion-bg: var(--elli-accordion-bg, #ffffff);

  /* Rahmen */
  --bs-accordion-border-color: var(--elli-accordion-border-color, #d8dee4);
  --bs-accordion-border-width: var(--elli-accordion-border-width, 1px);
  --bs-accordion-border-radius: var(--elli-accordion-border-radius, .5rem);
  --bs-accordion-inner-border-radius: var(--elli-accordion-border-radius, .5rem);

  /* Button */
  --bs-accordion-btn-color: var(--elli-accordion-button-color, #1a1a1a);
  --bs-accordion-btn-bg: var(--elli-accordion-button-bg, #ffffff);
  --bs-accordion-btn-padding-x: var(--elli-accordion-button-padding-x, 1.5rem);
  --bs-accordion-btn-padding-y: var(--elli-accordion-button-padding-y, 1rem);

  /* Aktiver/geöffneter Button */
  --bs-accordion-active-color: var(--elli-accordion-button-active-color, #005ea8);
  --bs-accordion-active-bg: var(--elli-accordion-button-active-bg, #eaf4fb);

  /* Body */
  --bs-accordion-body-padding-x: var(--elli-accordion-body-padding-x, 1.5rem);
  --bs-accordion-body-padding-y: var(--elli-accordion-body-padding-y, 1rem);

  /* Icon */
  --bs-accordion-btn-icon-width: var(--elli-accordion-icon-size, 1.25rem);

  /* Eigener Fokus-Stil */
  --bs-accordion-btn-focus-box-shadow: none;
  --bs-accordion-btn-focus-border-color: transparent;
}

.elli-accordion .elli-accordion__button {
  font-weight: var(--elli-accordion-question-font-weight, 600);
  font-size: var(--elli-accordion-question-font-size, var(--fs-lg, 1.125rem));
}

.elli-accordion .accordion-button:not(.collapsed) {
  color: var(--elli-accordion-button-active-color, #005ea8);
  background-color: var(--elli-accordion-button-active-bg, #eaf4fb);
}

.elli-accordion .elli-accordion__body {
  color: var(--elli-accordion-body-color, #1a1a1a);
  background-color: var(--elli-accordion-body-bg, #ffffff);
}

/* A11y-Basis: gut sichtbarer Tastaturfokus */
.elli-accordion :where(.accordion-button):focus-visible {
  outline: var(--elli-accordion-focus-width, 3px) solid var(--elli-accordion-focus-color, #ffbf00);
  outline-offset: var(--elli-accordion-focus-offset, 3px);
  box-shadow: none;
}

/* Fokus für interaktive Elemente innerhalb des Accordion-Inhalts */
.elli-accordion .accordion-body :where(a, button, input, textarea, select, summary):focus-visible {
  outline: var(--elli-accordion-focus-width, 3px) solid var(--elli-accordion-focus-color, #ffbf00);
  outline-offset: var(--elli-accordion-focus-offset, 3px);
}

/* Reduced motion – wichtig wegen collapse transition */
@media (prefers-reduced-motion: reduce) {
  .elli-accordion .accordion-collapse,
  .elli-accordion .accordion-button,
  .elli-accordion .accordion-button::after {
    transition: none !important;
  }
}