/* ==========================================================================
   VaultAI - Support. Ergaenzt assets/base.css (Tokens, Formulare, FAQ-Akkordeon).
   ========================================================================== */
.support{padding-bottom:clamp(56px,8vw,110px)}
.sp-head{padding:clamp(44px,6vw,84px) 0 clamp(28px,4vw,48px)}
.sp-head h1{
  margin-top:16px;font-size:clamp(2.2rem,5.4vw,3.8rem);font-weight:640;
  letter-spacing:-.04em;line-height:1.04;max-width:16ch;text-wrap:balance;
}
.sp-head .lead{margin-top:20px;max-width:52ch}
.kicker{
  display:flex;align-items:center;gap:12px;
  font-size:var(--fs-xs);font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--text-muted);
}
.kicker::before{content:"";width:28px;height:1px;background:var(--border-2)}

.sp-quick{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-top:clamp(28px,4vw,44px)}
.sp-tile{
  display:flex;flex-direction:column;gap:6px;padding:22px 24px;border-radius:var(--r-card);
  background:var(--tile);color:var(--text);
  transition:background .25s ease, box-shadow .3s var(--ease), transform .12s var(--ease-out);
}
.sp-tile b{font-size:1.05rem;font-weight:640;letter-spacing:-.015em}
.sp-tile span{font-size:var(--fs-sm);color:var(--text-muted);overflow-wrap:anywhere}
.sp-tile:active{transform:scale(.99)}
@media (hover:hover) and (pointer:fine){ .sp-tile:hover{background:var(--bg-2);box-shadow:var(--shadow-card)} }
.sp-tile:focus-visible{outline:2px solid var(--focus);outline-offset:3px}

.sp-sec{padding:clamp(36px,5vw,64px) 0}
.sp-h2{font-size:clamp(1.6rem,3.2vw,2.3rem);font-weight:640;letter-spacing:-.03em;line-height:1.1;margin-bottom:22px}
.sp-contact .lead{max-width:58ch;margin-bottom:28px}
.sp-contact{scroll-margin-top:80px}
#fragen{scroll-margin-top:80px}

@media (max-width:820px){ .sp-quick{grid-template-columns:1fr} }