/* ============================================================
   mycoyouco — FAQ page
   Builds on trainer-public/styles.css tokens
   ============================================================ */

/* ---- FAQ hero ---- */
.faq-hero{
  background:var(--surface-2);
  border-bottom:1px solid var(--outline-variant);
  padding:56px 0 48px;
}
.faq-hero-inner{max-width:760px}
.faq-eyebrow{
  display:inline-flex;align-items:center;gap:7px;
  font-weight:800;font-size:11px;letter-spacing:1.8px;text-transform:uppercase;
  color:var(--lavender-deep);background:var(--tertiary-container);
  padding:6px 12px;border-radius:999px;margin-bottom:18px;
}
.faq-h1{
  font-family:var(--display);font-weight:400;
  font-size:54px;line-height:1;letter-spacing:-.8px;text-transform:uppercase;
  color:var(--primary);margin:0 0 18px;text-wrap:balance;
}
.faq-lead{font-size:19px;line-height:1.6;color:var(--on-surface-variant);margin:0 0 28px;max-width:640px}
.faq-lead b{color:var(--primary);font-weight:700}

/* search */
.faq-search{position:relative;max-width:520px}
.faq-search svg{position:absolute;left:18px;top:50%;transform:translateY(-50%);color:var(--on-surface-variant)}
.faq-search input{
  width:100%;height:56px;border-radius:999px;border:1.5px solid var(--outline-variant);
  background:var(--surface);padding:0 20px 0 48px;
  font-family:var(--body);font-size:16px;color:var(--on-surface);
  transition:border-color .14s,box-shadow .14s;
}
.faq-search input:focus{outline:none;border-color:var(--primary);box-shadow:0 0 0 4px rgba(26,64,41,.1)}
.faq-search input::placeholder{color:var(--on-surface-variant)}
.faq-search-clear{
  position:absolute;right:8px;top:50%;transform:translateY(-50%);
  width:40px;height:40px;border-radius:50%;display:none;place-items:center;
  color:var(--on-surface-variant);
}
.faq-search-clear:hover{background:var(--surface-3)}
.faq-search.has-value .faq-search-clear{display:grid}

/* ---- FAQ layout: sticky TOC + content ---- */
.faq-layout{
  display:grid;
  grid-template-columns:248px 1fr;
  gap:56px;
  align-items:start;
  padding:48px 0 0;
}
.faq-toc{
  position:sticky;top:88px;
  display:flex;flex-direction:column;gap:4px;
}
.faq-toc-label{
  font-weight:800;font-size:11px;letter-spacing:1.6px;text-transform:uppercase;
  color:var(--on-surface-variant);margin:0 0 10px 14px;
}
.faq-toc a{
  display:flex;align-items:center;gap:12px;
  padding:11px 14px;border-radius:14px;
  font-weight:600;font-size:14px;color:var(--on-surface-variant);
  transition:background .12s,color .12s;
}
.faq-toc a:hover{background:var(--surface-2);color:var(--on-surface)}
.faq-toc a.active{background:var(--primary);color:#fff}
.faq-toc a.active .faq-toc-ico{background:rgba(255,255,255,.16);color:#fff}
.faq-toc a.active .faq-toc-cnt{background:rgba(255,255,255,.2);color:#fff}
.faq-toc-ico{
  width:28px;height:28px;border-radius:9px;flex:none;
  display:grid;place-items:center;
  background:var(--surface-3);color:var(--primary);
}
.faq-toc-txt{flex:1;min-width:0}
.faq-toc-cnt{
  font-size:11px;font-weight:800;color:var(--on-surface-variant);
  background:var(--surface-3);border-radius:999px;padding:2px 8px;
}

/* ---- categories ---- */
.faq-cat{margin-bottom:56px;scroll-margin-top:88px}
.faq-cat-head{
  display:flex;align-items:center;gap:16px;margin-bottom:24px;
  padding-bottom:18px;border-bottom:2px solid var(--outline-variant);
}
.faq-cat-ico{
  width:52px;height:52px;border-radius:16px;flex:none;
  display:grid;place-items:center;
  color:#fff;
}
.faq-cat-ico.c-kosten{background:var(--primary)}
.faq-cat-ico.c-funktionen{background:var(--sage-deep)}
.faq-cat-ico.c-zielgruppen{background:var(--lavender-deep)}
.faq-cat-ico.c-datenschutz{background:#3A2614}
.faq-cat-ico.c-vergleich{background:var(--amber);color:#3A2614}
.faq-cat-h2{
  font-family:var(--display);font-weight:400;
  font-size:30px;line-height:1.05;letter-spacing:-.4px;text-transform:uppercase;
  color:var(--primary);margin:0;
}
.faq-cat-sub{font-size:13.5px;color:var(--on-surface-variant);font-weight:600;margin-top:4px}

.faq-items{display:flex;flex-direction:column;gap:14px}
.faq-item{
  background:var(--surface-2);
  border-radius:var(--radius-md);
  padding:24px 26px;
  scroll-margin-top:88px;
  transition:box-shadow .15s,transform .15s;
  border:1px solid transparent;
}
.faq-item:hover{box-shadow:0 10px 30px rgba(15,30,18,.06)}
.faq-item:target{border-color:var(--primary);box-shadow:0 0 0 3px rgba(26,64,41,.1)}
.faq-q{
  display:flex;align-items:flex-start;gap:12px;
  font-family:var(--body);font-weight:700;font-size:19px;line-height:1.3;
  color:var(--on-surface);margin:0 0 10px;letter-spacing:-.2px;
}
.faq-q-num{
  flex:none;font-family:var(--display);font-weight:400;font-size:14px;
  color:var(--primary);background:var(--surface);
  min-width:30px;height:30px;border-radius:9px;
  display:inline-grid;place-items:center;margin-top:1px;letter-spacing:0;
}
.faq-a{font-size:15.5px;line-height:1.65;color:var(--on-surface-variant);margin:0;padding-left:42px}
.faq-a a{color:var(--primary);font-weight:700;text-decoration:underline;text-underline-offset:2px}
.faq-a .soon{
  /* Hidden until corresponding pages exist. When a Sub-Project D
     page (e.g. /loesungen/yoga-studio) goes live, replace its
     <span class="soon">…</span> in faq.body.html with a real <a> link
     analog zum Sub-Project-C-Unlock-Pattern. The display:none stays
     active for the remaining still-pending hints. */
  display:none;
  margin-top:8px;
  font-style:italic;font-size:13.5px;color:var(--on-surface-variant);
  background:var(--surface-3);padding:3px 10px;border-radius:999px;
}
.faq-a b{color:var(--on-surface);font-weight:700}

/* no-results */
.faq-noresults{
  display:none;text-align:center;padding:56px 20px;color:var(--on-surface-variant);
}
.faq-noresults.show{display:block}
.faq-noresults .display-sm{color:var(--primary);margin:14px 0 8px}

/* ---- final CTA ---- */
.faq-cta{
  background:var(--primary);color:#fff;
  border-radius:var(--radius-xl);
  padding:48px;margin:8px 0 80px;
  display:grid;grid-template-columns:1fr auto;gap:28px;align-items:center;
  position:relative;overflow:hidden;
}
.faq-cta::before{
  content:"";position:absolute;right:-60px;bottom:-80px;
  width:280px;height:280px;border-radius:50%;
  background:radial-gradient(circle,rgba(232,220,248,.16),transparent 70%);
}
.faq-cta h2{font-family:var(--display);font-weight:400;font-size:30px;line-height:1.05;letter-spacing:-.4px;text-transform:uppercase;color:#fff;margin:8px 0 10px}
.faq-cta p{margin:0;font-size:16px;line-height:1.6;color:rgba(255,255,255,.74);max-width:460px}
.faq-cta-actions{display:flex;flex-direction:column;gap:20px;position:relative}
.faq-cta .btn-light{background:#fff;color:var(--primary)}
.faq-cta .btn-light:hover{background:var(--cream)}
.faq-cta .btn-ghost-light{background:rgba(255,255,255,.12);color:#fff}
.faq-cta .btn-ghost-light:hover{background:rgba(255,255,255,.2)}

/* ---- responsive ---- */
@media (max-width:980px){
  .faq-layout{grid-template-columns:1fr;gap:0;padding:32px 0 0}
  .faq-toc{
    position:static;flex-direction:row;flex-wrap:nowrap;
    gap:8px;overflow-x:auto;scrollbar-width:none;
    margin:0 calc(var(--gutter) * -1) 32px;padding:0 var(--gutter);
  }
  .faq-toc::-webkit-scrollbar{display:none}
  .faq-toc-label{display:none}
  .faq-toc a{flex:none;white-space:nowrap;background:var(--surface-2)}
  .faq-toc-cnt{background:var(--surface-3)}
}
@media (max-width:880px){
  .faq-hero{padding:36px 0 32px}
  .faq-h1{font-size:36px}
  .faq-lead{font-size:17px}
  .faq-cat-h2{font-size:24px}
  .faq-cat-ico{width:44px;height:44px;border-radius:13px}
  .faq-item{padding:20px}
  .faq-q{font-size:17px}
  .faq-a{font-size:15px;padding-left:0;margin-top:4px}
  .faq-q-num{min-width:26px;height:26px;font-size:13px}
  .faq-cta{grid-template-columns:1fr;padding:32px 24px;border-radius:28px}
  .faq-cta-actions{flex-direction:column}
  .faq-cta-actions .btn{width:100%}
}
@media (max-width:480px){
  .faq-h1{font-size:30px}
  .faq-search input{height:52px}
}