/* =========================================================
   geschichte-fuer-kids.de — faq.css
   Styles only for the FAQ page. Loaded after /site.css.
   ========================================================= */
.h1-split em { display: block; }
.cta-warm { background: linear-gradient(120deg, var(--ramp-purple-deep), var(--bloom-plum) 60%, #8a3f5e); box-shadow: var(--shadow-lg), 0 40px 100px -50px rgba(217, 98, 46, .9); }
.cta-warm::before { background: radial-gradient(closest-side, rgba(247, 206, 116, .45), transparent); }
.cta-warm p { color: #e6e0f6; }

.faq-jump { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 6px; }
.faq-jump a {
  display: inline-flex; align-items: center; gap: 8px; padding: 10px 18px; border-radius: 999px;
  font-weight: 800; font-size: .95rem; color: var(--ink); text-decoration: none;
  background: var(--pill); border: 1px solid rgba(255, 255, 255, .3);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); transition: background .2s ease, transform .2s ease;
}
.faq-jump a:hover { background: rgba(255, 255, 255, .2); transform: translateY(-2px); }

.faq-group { display: grid; grid-template-columns: minmax(0, 300px) minmax(0, 1fr); gap: clamp(20px, 4vw, 56px); align-items: start; scroll-margin-top: 96px; }
.faq-group + .faq-group { margin-top: clamp(40px, 6vw, 72px); }
.faq-head { display: grid; gap: 12px; position: sticky; top: calc(96px + env(safe-area-inset-top, 0px)); }
.faq-ico { width: 64px; height: 64px; border-radius: 18px; display: grid; place-items: center; font-size: 1.9rem; background: rgba(201, 174, 227, .16); border: 1px solid rgba(201, 174, 227, .3); box-shadow: 0 0 34px -10px rgba(201, 174, 227, .7); }
.faq-head h2 { font-size: clamp(1.5rem, 2.6vw, 2rem); }
.faq-head p { color: var(--mute); }

.faq { display: grid; gap: 12px; }
.faq details {
  border-radius: var(--r-md); background: var(--surface); border: 1px solid var(--line); box-shadow: var(--shadow);
  transition: border-color .2s ease, box-shadow .2s ease;
}
.faq details[open] { border-color: rgba(201, 174, 227, .45); box-shadow: var(--shadow), 0 0 32px -10px rgba(201, 174, 227, .55); }
.faq summary {
  list-style: none; cursor: pointer; display: flex; justify-content: space-between; align-items: center; gap: 16px;
  padding: 18px 22px; font-family: var(--display); font-weight: 700; font-size: 1.08rem; color: var(--ink);
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: "+"; flex: none; width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center;
  font-size: 1.2rem; color: var(--lilac);
  background: rgba(201, 174, 227, .14); border: 1px solid rgba(201, 174, 227, .3); transition: transform .2s ease;
}
.faq details[open] summary::after { transform: rotate(45deg); }
.faq details p { padding: 0 22px 20px; color: #d9d2ee; line-height: 1.7; }
.faq details p + p { margin-top: -8px; }
.faq details a { color: var(--lilac); }

@media (max-width: 860px) {
  .faq-group { grid-template-columns: 1fr; }
  .faq-head { position: static; grid-template-columns: auto 1fr; align-items: center; column-gap: 16px; }
  .faq-head p { grid-column: 1 / -1; }
}
.foot-legal a[aria-current="page"], .foot-grid a[aria-current="page"] { color: var(--ink); }