/* =============================================================================
   faq-accordion — natives <details>/<summary>-Akkordeon
   =============================================================================
   FAQ-Sektion auf Basis von nativem <details>/<summary>: klappt OHNE JS auf und
   zu. Jede Frage ein klickbares <summary> (>=44px Touch-Target) mit Chevron, der
   bei [open] per CSS rotiert; darunter der Antwort-Body. Border-bottom je Item,
   dezenter Hover-Hintergrund. Optionales JS schaltet auf 'nur eins offen' um.

   TOKEN-PUR: ausschließlich Variablen aus _tokens/_base.css oder color-mix()
   daraus — kein hardgekodeter Marken-Wert. Siehe rules/lp-components-token-disziplin.md.
   Die --fa-* sind komponenten-lokale Layout-Konstanten (max-Breite, Touch-Höhe,
   Chevron-Maße, Border-Stärke) — an keine Marke gekettet, laut Regel erlaubt.

   Lade-Reihenfolge: _tokens/_base.css → <brand>.css → diese Datei.
   ============================================================================ */

.faq-accordion {
  /* komponenten-lokale Konstanten (kein Marken-Bezug) */
  --fa-max-width:    800px;   /* Spaltenbreite der Sektion */
  --fa-min-touch:    44px;    /* Mindest-Höhe Touch-Target (Summary) */
  --fa-border-w:     1px;     /* Hairline-Trenner je Item */
  --fa-chevron-size: 0.7em;   /* Kantenlänge des Chevron-Quadrats */
  --fa-chevron-w:    2px;     /* Strichstärke des Chevrons */

  display: block;
  max-width: var(--fa-max-width);
  margin-inline: auto;
}

.faq-accordion__item {
  border-bottom: var(--fa-border-w) solid var(--color-line);
}

/* --- Frage (klickbares Summary) ------------------------------------------- */
.faq-accordion__q {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-s);
  min-height: var(--fa-min-touch);
  padding: var(--space-s) var(--space-xs);
  cursor: pointer;
  font-family: var(--font-body);
  font-size: var(--font-scale-body);
  font-weight: 600;
  color: var(--color-ink);
  list-style: none;                /* Standard-Dreieck entfernen (Firefox/Standard) */
  transition: background 0.2s ease;
}
/* Standard-Marker auch in WebKit/Blink entfernen */
.faq-accordion__q::-webkit-details-marker { display: none; }
.faq-accordion__q::marker { content: ""; }

.faq-accordion__item:hover .faq-accordion__q {
  background: color-mix(in srgb, var(--color-ink) 4%, transparent);
}

/* Sichtbarer Tastatur-Fokus (Summary ist nativ fokussierbar) */
.faq-accordion__q:focus-visible {
  outline: var(--fa-border-w) solid var(--color-primary);
  outline-offset: calc(-1 * var(--space-xs));
}

.faq-accordion__q-text {
  flex: 1 1 auto;
  min-width: 0;
}

/* --- Chevron-Indikator (reines CSS, rotiert bei [open]) ------------------- */
.faq-accordion__chevron {
  flex: 0 0 auto;
  width: var(--fa-chevron-size);
  height: var(--fa-chevron-size);
  margin-right: var(--space-xs);
  border-right: var(--fa-chevron-w) solid var(--color-ink-soft);
  border-bottom: var(--fa-chevron-w) solid var(--color-ink-soft);
  transform: rotate(45deg);        /* zeigt nach unten (zu) */
  transition: transform 0.25s ease, border-color 0.2s ease;
}
.faq-accordion__item[open] .faq-accordion__chevron {
  transform: rotate(-135deg);      /* zeigt nach oben (offen) */
  border-color: var(--color-primary);
}

/* --- Antwort-Body --------------------------------------------------------- */
.faq-accordion__a {
  padding: 0 var(--space-xs) var(--space-m);
  font-family: var(--font-body);
  font-size: var(--font-scale-body);
  line-height: 1.6;
  color: var(--color-ink-soft);
}
.faq-accordion__a p { margin: 0 0 var(--space-s); }
.faq-accordion__a p:last-child { margin-bottom: 0; }
.faq-accordion__a ul {
  margin: 0;
  padding-left: var(--space-m);
}
.faq-accordion__a li { margin-bottom: var(--space-xs); }
.faq-accordion__a li:last-child { margin-bottom: 0; }

/* --- Sanftes Aufklappen (Items, deren Body-Höhe der Browser kennt) -------- */
@media (prefers-reduced-motion: no-preference) {
  .faq-accordion__item[open] .faq-accordion__a {
    animation: faq-accordion-open 0.3s var(--sr-easing, ease) both;
  }
}
@keyframes faq-accordion-open {
  from { opacity: 0; transform: translateY(calc(-1 * var(--space-xs))); }
  to   { opacity: 1; transform: none; }
}

/* Reduced-Motion: keine Chevron-Rotation/Body-Animation als Übergang erzwingen */
@media (prefers-reduced-motion: reduce) {
  .faq-accordion__q,
  .faq-accordion__chevron { transition: none; }
}