/* ==========================================================================
   faq.css — Häufige Fragen
   Eigene Datei, weil die Startseite und jede Themenseite dieselben Fragen-
   blöcke tragen. Die Themenseiten laden layout.css nicht.
   ========================================================================== */

/* --------------------------------------------------------------------------
   FAQ
   Natives <details>. Der Standardmarker wird ersetzt, weil er in jedem
   Browser anders aussieht. Das «+» bekommt eine feste Fläche mit
   zentriertem Zeichen – sonst dreht es beim Öffnen um seine eigene
   Textbox und ragt rund 8px über die Zeile hinaus.
   -------------------------------------------------------------------------- */
.faq__title { margin-top: 1.375rem; }
.faq { margin-top: clamp(3rem, 5vw, 4rem); border-top: 1px solid var(--c-line); }
.faq__item { border-bottom: 1px solid var(--c-line); }
.faq__q {
  display: flex;
  align-items: baseline;
  gap: 1.25rem;
  padding: 1.375rem 0;
  cursor: pointer;
  list-style: none;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(1.0625rem, 1.5vw, 1.1875rem);
  letter-spacing: -0.01em;
  color: var(--c-bg-ink);
  text-wrap: pretty;
  transition: color var(--dur-fast) var(--ease-soft);
}
.faq__q::-webkit-details-marker { display: none; }
.faq__q::after {
  content: "+";
  margin-left: auto;
  flex: none;
  display: grid;
  place-items: center;
  width: 1.5rem;
  height: 1.5rem;
  font-weight: 600;
  font-size: 1.25rem;
  line-height: 1;
  color: var(--accent);
  transition: transform var(--dur-fast) var(--ease-out);
}
.faq__item[open] .faq__q::after { transform: rotate(45deg); }
.faq__q:hover { color: var(--accent); }
.faq__a {
  padding: 0 3rem 1.5rem 0;
  font-size: var(--fs-sm);
  line-height: 1.75;
  color: var(--c-body);
  text-wrap: pretty;
  max-width: 44rem;
}