/* 08-faq — Häufige Fragen auf paper-2 (Besitzer: FAQ-Agent, nicht im Template).
   Natives <details>, JS-frei; Öffnungsanimation als Progressive Enhancement über ::details-content.
   Nur Rollen-/CI-Tokens aus site.css, keine Hex-Werte. */

/* Raster 1440: Intro .75fr (sticky), Liste 1.25fr */
.rad-faq__grid{display:grid;grid-template-columns:.75fr 1.25fr;gap:90px;align-items:start}

/* Intro: Eyebrow, Zweizeiler, Absatz, Textlink */
.rad-faq__intro{position:sticky;top:calc(var(--rad-header-h-scrolled) + 32px)}
.rad-faq__intro h2{margin-top:14px}
.rad-faq .rad-faq__lead{margin-top:20px;font-size:.9375rem;line-height:1.7;max-width:22em}
.rad-faq__intro .rad-text-link{margin-top:18px}

/* Liste: Hairline oben, jede Zeile Hairline unten */
.rad-faq__list{border-top:1px solid var(--vn-color-line)}
.rad-faq__item{border-bottom:1px solid var(--vn-color-line)}
/* Reveal-Staffelung 40 ms je Zeile (Token lokal halbiert, Stagger-Formel aus site.css bleibt) */
.rad-faq__item{--rad-stagger:40ms}

/* Frage: Syne 500 18 px, Pfeil rechts, kein nativer Marker */
.rad-faq__q{list-style:none;display:flex;justify-content:space-between;align-items:center;gap:24px;padding:22px 0;min-height:44px;font:500 1.125rem/1.4 var(--vn-font-display);letter-spacing:-.02em;color:var(--vn-color-fg);cursor:pointer}
.rad-faq__q::-webkit-details-marker{display:none}
.rad-faq__q::marker{content:""}
@media(hover:hover){.rad-faq__q:hover{color:var(--vn-color-accent-text-small)}}
.rad-faq__q:focus-visible{outline-offset:-2px}
.rad-faq__q .rad-arrow{width:22px;height:22px;transition:transform var(--vn-d-snap) var(--vn-ease-out)}
.rad-faq__item[open] .rad-faq__q .rad-arrow{transform:rotate(-90deg)}

/* Antwort */
.rad-faq__a p{font-size:var(--vn-text-sm);line-height:1.8;color:var(--vn-color-muted);padding:0 48px 24px 0;max-width:60ch}

/* Öffnungsanimation: nur wo interpolate-size existiert; sonst sofortiges Öffnen (natives Verhalten) */
@supports (interpolate-size:allow-keywords){
  .rad-faq__item{interpolate-size:allow-keywords}
  .rad-faq__item::details-content{block-size:0;overflow:hidden;transition:block-size var(--vn-d-medium) var(--vn-ease-out),content-visibility var(--vn-d-medium) allow-discrete}
  .rad-faq__item[open]::details-content{block-size:auto}
}

/* ≤1000: schmaleres Raster, kein sticky */
@media(max-width:1000px){
  .rad-faq__grid{grid-template-columns:.7fr 1.3fr;gap:38px}
  .rad-faq__intro{position:static}
}

/* ≤650: einspaltig, kompaktere Typo */
@media(max-width:650px){
  .rad-faq__grid{grid-template-columns:1fr;gap:28px}
  .rad-faq__q{font-size:var(--vn-text-base);padding:18px 0}
  .rad-faq__a p{font-size:var(--vn-text-sm);padding-right:24px}
}

/* reduced-motion: Dauern sind in site.css auf 0 — hier zusätzlich Staffelung und Pfeil ohne Übergang */
@media(prefers-reduced-motion:reduce){
  .rad-faq__item{--rad-stagger:0ms}
  .rad-faq__q .rad-arrow{transition:none}
}

/* Teamzeile (30.09.2026, Vorbild das-bike.at): Teamgrafik, darunter Erreichbarkeit — klein, ohne Rahmen */
.rad-faq__team{margin-top:26px;max-width:24em}
.rad-faq__team-bild{display:block;width:150px;height:auto}
.rad-faq__team-text{margin:14px 0 0;font-size:.875rem;line-height:1.65;color:var(--vn-color-muted)}
.rad-faq__team-text a{white-space:nowrap;color:var(--vn-color-fg);text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:3px}