/* ==========================================================================
   /fragen/ – Häufige Fragen (page layer, loaded after site.css)
   Hero: compact paper hero + chat illustration (≥1100 only)
   Body: sheet with a sticky topic aside (desktop) / sticky chip row (≤1020)
         and three grouped accordions (h2.h2-sm per topic)
   From site.css: .topic-nav (the topic list / chip row, scroll-spy in
   site.js), .h2-sm, .accordion, .avatar, .person-*
   Only the breakpoints from DESIGN-SYSTEM.md §3 are used.
   ========================================================================== */

/* 1 · Hero ---------------------------------------------------------------- */
.faq-hero-grid { display: grid; gap: clamp(2rem, 4vw, 3.5rem); }
.faq-hero-assurance { margin-top: 1.75rem; }
.faq-hero-art { display: none; }

@media (min-width: 1100px) {
  /* Top-aligned: the chat window shares its top edge with the kicker */
  .faq-hero-grid { grid-template-columns: minmax(0, 1fr) 460px; align-items: start; }
  .faq-hero-art { display: block; }
}

/* Chat mock: a small "Frage → Antwort" conversation (window bar, bubbles,
   static mail footer) on the dotted art tint, like .service-art. */
.faq-hero-art {
  position: relative;
  padding: 20px;
  border-radius: var(--r-lg);
  background: var(--art-texture), var(--surface-2);
  box-shadow: inset 0 0 0 1px var(--line);
}
.faq-chat { overflow: hidden; border-radius: var(--r-md); background: var(--surface); box-shadow: var(--shadow-lift); }
.faq-chat-bar {
  display: flex; align-items: center; gap: 12px;
  height: 44px; padding: 0 10px 0 14px;
  border-bottom: 1px solid var(--line);
  background: var(--surface-2);
}
.faq-chat-title { display: inline-flex; align-items: center; gap: 8px; font-size: var(--fs-sm); font-weight: 600; color: var(--fg); }
.faq-chat-body { display: grid; gap: 10px; padding: 16px 16px 14px; }
/* Bubbles hug their text: normal wrapping (no balance, it cannot shrink the
   box) and tight width caps so the longest line fills the bubble */
.msg { font-size: var(--fs-sm); line-height: 1.45; }
.msg-you { max-width: 64%; }
/* The first question breaks after "wissen," and needs a slightly tighter cap */
.faq-chat-body > .msg-you:first-child { max-width: 58%; }
.msg-me { max-width: 84%; }
.msg-you {
  justify-self: end;
  padding: 9px 13px;
  border-radius: 14px 14px 4px 14px;
  color: #fff; background: var(--grad-brand-strong);
  box-shadow: 0 6px 16px -8px rgba(30, 80, 220, .55);
}
.msg-me { justify-self: start; display: flex; align-items: flex-end; gap: 8px; }
.msg-me p {
  padding: 9px 13px;
  border-radius: 14px 14px 14px 4px;
  color: var(--fg-2); background: var(--surface-2);
  box-shadow: inset 0 0 0 1px var(--line);
}
/* Static meta footer (no composer: the site has no live chat) */
.faq-chat-foot {
  display: flex; align-items: center; gap: 8px;
  padding: 11px 16px;
  border-top: 1px solid var(--line);
  font-family: var(--font-mono); font-size: var(--fs-xs); color: var(--fg-3);
}
.faq-chat-foot .i { flex: none; width: 15px; height: 15px; color: var(--icon); }

/* 2 · Layout: sticky topic aside (site.css .topic-nav + contact card) ------- */
.faq-layout {
  display: grid;
  grid-template-columns: 272px minmax(0, 1fr);
  gap: clamp(2.5rem, 6vw, 6rem);
  align-items: start;
}
.faq-side { position: sticky; top: calc(var(--header-h) + 24px); display: grid; gap: 14px; }

/* Contact card under the topic nav */
.faq-contact { padding: 20px; border-radius: var(--r-md); background: var(--surface-2); box-shadow: inset 0 0 0 1px var(--line); }
.faq-contact-person { display: flex; align-items: center; gap: 12px; }
.faq-contact .avatar { grid-row: auto; width: 44px; height: 44px; font-size: var(--fs-sm); }
.faq-contact .person-t strong { font-size: var(--fs-md); }
.faq-contact .person-t span { display: block; }
.faq-contact-h { margin-top: 1.1rem; font-weight: 600; letter-spacing: -.01em; color: var(--fg); }
.faq-contact-text { margin-top: .25rem; font-size: var(--fs-sm); line-height: 1.5; color: var(--fg-2); }
.faq-contact-cta { margin-top: 1rem; }
.faq-contact .person-mail { margin-top: .25rem; }

/* 3 · Topic groups --------------------------------------------------------- */
.faq-groups { display: grid; gap: clamp(3.5rem, 2.4rem + 3vw, 5.5rem); }
/* Rules run to the shell edge like the homepage FAQ; the reading width is
   capped at the text level instead */
.faq-group .accordion-body p, .faq-group-lead { max-width: 68ch; }
/* Page-scoped until site.css adopts it for the shared accordion: no lone
   last word in two-line questions, no orphan in answers */
.faq-group .accordion-item summary > span:first-child { text-wrap: balance; }
.faq-group .accordion-body p { text-wrap: pretty; }
/* One left edge: the topic icon sits in the kicker row, h2 and lead are
   flush with the accordion rules below */
.faq-group-head { margin-bottom: 1.75rem; }
.faq-group-meta { display: flex; align-items: center; gap: 12px; margin-bottom: .85rem; }
.faq-group-meta .icon-tile { width: 32px; height: 32px; border-radius: 9px; }
.faq-group-meta .icon-tile .i { width: 17px; height: 17px; }
.faq-group-meta .kicker { margin-bottom: 0; color: var(--fg-3); }
.faq-group-lead { margin-top: .45rem; font-size: var(--fs-md); color: var(--fg-2); text-wrap: pretty; }
.faq-group-links { display: flex; flex-wrap: wrap; column-gap: 1.75rem; margin-top: 1rem; }
/* Jump target lines up with the sticky aside (html scroll-padding + 8px) */
.faq-group { scroll-margin-top: 8px; }

/* 4 · Responsive ----------------------------------------------------------- */
@media (max-width: 1020px) {
  .faq-layout { grid-template-columns: minmax(0, 1fr); gap: 0; }
  /* The aside dissolves: the topic nav becomes a sticky chip row above the
     groups; the contact card is dropped because the CTA stage follows. */
  .faq-side { display: contents; }
  .faq-contact { display: none; }
  /* .topic-nav turns into the sticky chip row (site.css) */
}

@media (max-width: 760px) {
  .faq-hero-assurance { margin-top: 1.4rem; }
  .faq-group-head { margin-bottom: 1.1rem; }
  .faq-group-meta { margin-bottom: .45rem; }
  .faq-group-meta .icon-tile { display: none; }
  .faq-group-lead { font-size: var(--fs-sm); }
}