/* =================================================================
   UXOVIA · FRAGENBLOCK (Akkordeon)

   Herausgeloest am 31.08.2026 aus dem Fragenblock der Startseite, damit
   ihn auch die Leistungsseiten benutzen koennen. Gleiches Aussehen,
   gleiches Verhalten, nur ueber Klassen angesprochen statt ueber die
   ID #faq. Die Startseite traegt ihre eigene Fassung in
   assets/startseite/sektionen.css noch selbst; sie sollte beim
   naechsten Aufraeumen auf diese Datei umgestellt werden, dann faellt
   die Doppelung dort weg.

   Das Umschalten macht assets/faq.js.
   ================================================================= */

.faq-list { display: flex; flex-direction: column; gap: var(--s-3); }

.faq-list .faq-item {
  border-radius: var(--r-lg);
  border: 1px solid var(--border);
  /* Deckend, nicht durchscheinend: dahinter laeuft der Sternenhimmel des
     Hintergrunds, und der zoege sonst quer durch die Antworttexte. */
  background: var(--bg-karte-deckend);
  overflow: hidden;
  transition: border-color var(--dur) var(--ease-out), background var(--dur) var(--ease-out);
}
.faq-list .faq-item:hover { border-color: var(--border-strong); }
.faq-list .faq-item.is-open {
  border-color: var(--border-brand);
  background: var(--bg-karte-offen);
}

.faq-list .faq-item h3 { margin: 0; font: inherit; }
.faq-list .faq-q {
  width: 100%; display: grid;
  grid-template-columns: 2.25rem 1fr auto; align-items: center;
  column-gap: var(--s-3);
  text-align: left; padding: var(--s-4) var(--s-5); margin: 0;
  background: none; border: 0; cursor: pointer; color: var(--text);
  font-family: inherit; font-size: var(--t-body); font-weight: var(--w-semi); line-height: 1.45;
}
.faq-list .faq-num {
  font-family: var(--font-mono); font-size: var(--t-small); font-weight: var(--w-medium);
  font-variant-numeric: tabular-nums; color: var(--text-legible);
  transition: color var(--dur) var(--ease-out);
}
.faq-list .faq-item.is-open .faq-num { color: var(--kobalt-hell); }
/* Der Winkel dreht sich beim Oeffnen, statt gegen ein Minus zu tauschen —
   eine Drehung laesst sich weich fuehren, ein Zeichenwechsel springt. */
.faq-list .faq-ico {
  width: 18px; height: 18px; flex-shrink: 0; color: var(--text-3);
  transition: transform var(--dur) var(--ease-out), color var(--dur) var(--ease-out);
}
.faq-list .faq-item.is-open .faq-ico { transform: rotate(180deg); color: var(--kobalt-hell); }

/* Aufklappen ueber grid-template-rows: die Hoehe laesst sich damit
   animieren, ohne sie vorher zu kennen. */
.faq-list .faq-wrap { display: grid; grid-template-rows: 0fr; transition: grid-template-rows var(--dur) var(--ease-out); }
.faq-list .faq-item.is-open .faq-wrap { grid-template-rows: 1fr; }
.faq-list .faq-inner { overflow: hidden; }
.faq-list .faq-a {
  padding: 0 var(--s-5) var(--s-5) calc(var(--s-5) + 2.25rem + var(--s-3));
  font-size: var(--t-body); line-height: var(--lh-body); color: var(--text-2);
}

@media (max-width: 900px) {
  .faq-list .faq-q { grid-template-columns: 2rem 1fr auto; padding: var(--s-4); }
  .faq-list .faq-a { padding: 0 var(--s-4) var(--s-4) calc(var(--s-4) + 2rem + var(--s-3)); }
}
@media (prefers-reduced-motion: reduce) {
  .faq-list .faq-wrap, .faq-list .faq-ico, .faq-list .faq-item { transition: none; }
}