/* ============================================================
   Longevity — Accordion-Styling (FAQ). KEIN eigener ContentBlock: Redakteure nutzen den
   vorhandenen plate_bootstrap-/bootstrap_package-Accordion (CType `accordion`, Markup
   .accordion / .accordion-item / .accordion-button / .accordion-collapse / .accordion-body).
   Diese Datei bildet die minimalistische .acc-*-Optik der Vorlage auf diese Bootstrap-
   Klassen ab. Eingebunden global via page.includeCSS (ContentBlocks/lr-enquire.typoscript),
   da theme.css nicht angefasst werden darf und der Accordion kein CB ist.
   Scope: CType `accordion` (aktiv) und — falls aktiviert — Container `ce_accordion`.
   ============================================================ */
.frame-type-accordion .accordion,
.frame-type-ce_accordion .accordion {
  max-width: 880px;
  --bs-accordion-bg: transparent;
  --bs-accordion-border-width: 0;
  --bs-accordion-border-radius: 0;
  --bs-accordion-inner-border-radius: 0;
  --bs-accordion-btn-padding-x: 0;
  --bs-accordion-btn-padding-y: 1.5rem;
  --bs-accordion-btn-bg: transparent;
  --bs-accordion-active-bg: transparent;
  --bs-accordion-active-color: var(--lr-charcoal);
  --bs-accordion-btn-focus-box-shadow: none;
  --bs-accordion-body-padding-x: 0;
  --bs-accordion-body-padding-y: 0;
  background: transparent;
}

.frame-type-accordion .accordion-item,
.frame-type-ce_accordion .accordion-item {
  background: transparent;
  border: 0;
  border-top: 1px solid var(--lr-line);
}
.frame-type-accordion .accordion-item:last-child,
.frame-type-ce_accordion .accordion-item:last-child { border-bottom: 1px solid var(--lr-line); }

.frame-type-accordion .accordion-header,
.frame-type-ce_accordion .accordion-header { margin: 0; }

.frame-type-accordion .accordion-button,
.frame-type-ce_accordion .accordion-button {
  width: 100%;
  position: relative;
  display: flex; justify-content: space-between; align-items: center; gap: 2rem;
  padding: 1.5rem 0;
  background: transparent; box-shadow: none;
  font-family: var(--lr-font-display); font-weight: 300;
  font-size: clamp(1.2rem, 2.2vw, 1.6rem); line-height: 1.2;
  color: var(--lr-charcoal);
  text-align: left;
}
.frame-type-accordion .accordion-button:not(.collapsed),
.frame-type-ce_accordion .accordion-button:not(.collapsed) {
  background: transparent; box-shadow: none; color: var(--lr-charcoal);
}
.frame-type-accordion .accordion-button:focus,
.frame-type-ce_accordion .accordion-button:focus { box-shadow: none; outline: none; }
.frame-type-accordion .accordion-button:focus-visible,
.frame-type-ce_accordion .accordion-button:focus-visible { outline: 2px solid var(--lr-bronze); outline-offset: 3px; }

/* Bootstrap-Standard-Chevron entfernen, eigenes Plus/Minus zeichnen. */
.frame-type-accordion .accordion-button::after,
.frame-type-ce_accordion .accordion-button::after {
  flex: none;
  width: 16px; height: 16px; margin: 0;
  background-image: none;
  /* horizontaler Balken (bleibt immer) */
  background: var(--lr-bronze-deep);
  -webkit-mask: none; mask: none;
  clip-path: polygon(0 45%, 100% 45%, 100% 55%, 0 55%);
  transition: transform 0.4s var(--lr-ease-out);
}
/* vertikaler Balken via ::before, absolut deckungsgleich über dem ::after
   (verschwindet im offenen Zustand). Nicht als Flex-Item: gap + space-between
   würden die beiden Balken auseinanderziehen. */
.frame-type-accordion .accordion-button::before,
.frame-type-ce_accordion .accordion-button::before {
  content: "";
  position: absolute; right: 0; top: calc(50% - 8px);
  width: 16px; height: 16px;
  background: var(--lr-bronze-deep);
  clip-path: polygon(45% 0, 55% 0, 55% 100%, 45% 100%);
  transition: transform 0.4s var(--lr-ease-out);
  transform: rotate(0deg);
}
.frame-type-accordion .accordion-button:not(.collapsed)::before,
.frame-type-ce_accordion .accordion-button:not(.collapsed)::before { transform: rotate(90deg); opacity: 0; }

.frame-type-accordion .accordion-body,
.frame-type-ce_accordion .accordion-body { padding: 0 0 1.6rem; }
.frame-type-accordion .accordion-body p,
.frame-type-accordion .accordion-content-text p,
.frame-type-ce_accordion .accordion-body p {
  color: var(--lr-ink-soft); max-width: 64ch; margin-bottom: 0;
}

/* Auf invertierenden Frames (forest/dark) Hairlines + Typo anpassen. */
.frame-background-forest.frame-type-accordion .accordion-item,
.frame-background-dark.frame-type-accordion .accordion-item,
.frame.-colorized.frame-type-accordion .accordion-item { border-top-color: var(--lr-line-on-dark); }
.frame-background-forest.frame-type-accordion .accordion-item:last-child,
.frame-background-dark.frame-type-accordion .accordion-item:last-child,
.frame.-colorized.frame-type-accordion .accordion-item:last-child { border-bottom-color: var(--lr-line-on-dark); }
.frame-background-forest.frame-type-accordion .accordion-button,
.frame-background-dark.frame-type-accordion .accordion-button,
.frame.-colorized.frame-type-accordion .accordion-button { color: var(--lr-on-dark); }
.frame-background-forest.frame-type-accordion .accordion-button:not(.collapsed),
.frame-background-dark.frame-type-accordion .accordion-button:not(.collapsed),
.frame.-colorized.frame-type-accordion .accordion-button:not(.collapsed) { color: var(--lr-on-dark); }
.frame-background-forest.frame-type-accordion .accordion-body p,
.frame-background-dark.frame-type-accordion .accordion-body p,
.frame.-colorized.frame-type-accordion .accordion-body p,
.frame-background-forest.frame-type-accordion .accordion-content-text p,
.frame-background-dark.frame-type-accordion .accordion-content-text p { color: var(--lr-on-dark-soft); }
.frame-background-forest.frame-type-accordion .accordion-button::after,
.frame-background-dark.frame-type-accordion .accordion-button::after,
.frame-background-forest.frame-type-accordion .accordion-button::before,
.frame-background-dark.frame-type-accordion .accordion-button::before { background: var(--lr-bronze); }