/* ==========================================================================
   Page CSS: FAQ (no draft – built from design system v2 for the visual
   acceptance, offene-fragen.md P3). Hairline list in the spirit of the
   surroundings entries (umgebung-konzept.md Nr. 5): structure by white
   space and 1-px lines, no boxes.
   ========================================================================== */

.faq-intro .head-title { grid-column: 1 / span 6; }
.faq-intro .prose { grid-column: 8 / span 5; align-self: end; }

.faq-group .faq-topic { grid-column: 1 / span 4; font-size: var(--fs-h3); align-self: start; position: sticky; top: calc(var(--header-h) + var(--anchor-h) + var(--space-4)); }
.faq-group .faq-list { grid-column: 5 / span 8; border-top: var(--line); }

.faq-item { border-bottom: var(--line); }
.faq-item summary {
  display: flex; align-items: center; justify-content: space-between; gap: var(--space-3);
  min-height: 44px; padding: var(--space-3) 0;
  cursor: pointer; list-style: none;
  font-weight: 600; font-size: var(--fs-body);
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary svg { flex: 0 0 16px; width: 16px; height: 16px; transition: transform var(--ease-control); }
.faq-item[open] summary svg { transform: rotate(180deg); }
.faq-item summary:hover .q { text-decoration: underline; text-underline-offset: 3px; }
.faq-item summary:focus-visible { outline-offset: 2px; }
.faq-answer { padding: 0 0 var(--space-4); max-width: 65ch; }
.faq-answer > * + * { margin-top: var(--space-2); }
.faq-answer ul, .faq-answer ol { padding-left: 1.25em; }
.faq-answer a { text-decoration: underline; text-underline-offset: 3px; }
main [id] { scroll-margin-top: calc(var(--header-h) + var(--anchor-h)); }

/* Contact band head (same as the surroundings page). */
.contact .contact-head { grid-column: 1 / span 6; }

@media (max-width: 960px) {
  .faq-intro .head-title, .faq-intro .prose,
  .faq-group .faq-topic, .faq-group .faq-list, .contact .contact-head { grid-column: 1 / -1; }
  .faq-group .faq-topic { position: static; margin-bottom: var(--space-3); }
}
@media (prefers-reduced-motion: reduce) {
  .faq-item summary svg { transition: none; }
}