/* support karten und faq */
.support{padding:30px 0 clamp(76px,10vw,110px)}
.support-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.sup-card{position:relative;border:1px solid var(--line);border-radius:12px;padding:32px 28px;background:linear-gradient(165deg,rgba(24,24,29,.85),rgba(9,9,12,.95));display:flex;flex-direction:column;gap:13px;transition:border-color .4s,transform .4s var(--ease),box-shadow .4s}
.sup-card::before{content:"";position:absolute;top:0;right:0;width:130px;height:130px;border-radius:0 12px 0 0;background:radial-gradient(circle at top right,rgba(255,46,58,.13),transparent 70%);opacity:0;transition:opacity .45s;pointer-events:none}
.sup-card:hover{border-color:var(--line-red);transform:translateY(-4px);box-shadow:0 22px 50px -18px rgba(255,46,58,.3)}
.sup-card:hover::before{opacity:1}
.sup-card:hover .sup-ico{transform:translateY(-3px) rotate(-5deg);box-shadow:0 8px 22px -6px rgba(255,46,58,.45)}
.sup-ico{width:44px;height:44px;border:1px solid var(--line-red);border-radius:10px;display:flex;align-items:center;justify-content:center;background:rgba(255,46,58,.06);transition:transform .45s var(--ease),box-shadow .45s}
.sup-ico svg{width:20px;height:20px;stroke:var(--red);fill:none}
.sup-card h3{font-family:var(--serif);font-weight:600;font-size:22px;color:var(--white)}
.sup-card p{color:var(--ash);font-size:13.5px;line-height:1.65;flex-grow:1}
.sup-link{display:inline-flex;align-items:center;gap:8px;font-family:var(--mono);font-size:12px;font-weight:700;letter-spacing:.06em;color:var(--bone);border-top:1px solid var(--line-soft);padding-top:15px;transition:color .3s}
.sup-link svg{width:14px;height:14px;stroke:var(--red);transition:transform .3s var(--ease)}
.sup-link:hover{color:var(--red)}
.sup-link:hover svg{transform:translateX(4px)}
.faq{max-width:760px;margin:52px auto 0}
.faq details{border:1px solid var(--line);border-radius:10px;background:rgba(255,255,255,.014);margin-bottom:12px;transition:border-color .3s,background .3s}
.faq details[open]{border-color:var(--line-red);background:rgba(255,46,58,.025)}
.faq summary{list-style:none;cursor:pointer;display:flex;align-items:center;justify-content:space-between;gap:18px;padding:19px 22px;font-family:var(--grotesk);font-weight:600;font-size:15px;color:var(--bone);transition:color .3s}
.faq summary::-webkit-details-marker{display:none}
.faq summary:hover{color:var(--white)}
.fplus{position:relative;width:14px;height:14px;flex-shrink:0}
.fplus::before,.fplus::after{content:"";position:absolute;background:var(--red);transition:transform .3s var(--ease)}
.fplus::before{top:6px;left:0;width:14px;height:2px}
.fplus::after{top:0;left:6px;width:2px;height:14px}
.faq details[open] .fplus::after{transform:scaleY(0)}
.faq .fa-body{padding:0 22px 20px;color:var(--ash);font-size:14px;line-height:1.7;max-width:640px}
@supports (interpolate-size:allow-keywords){
  :root{interpolate-size:allow-keywords}
  .faq details::details-content{block-size:0;overflow:hidden;transition:block-size .45s var(--ease),content-visibility .45s allow-discrete}
  .faq details[open]::details-content{block-size:auto}
}

/* die zahlen leiste */
.stats{padding:clamp(28px,4vw,48px) 0 0}
.stats-grid{display:grid;grid-template-columns:repeat(4,1fr);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.stat{position:relative;padding:clamp(30px,5vw,48px) 22px;text-align:center;border-right:1px solid var(--line);transition:background .4s;overflow:hidden}
.stat:last-child{border-right:none}
.stat::after{content:"";position:absolute;left:50%;bottom:0;transform:translateX(-50%);width:0;height:2px;background:var(--red);box-shadow:0 0 14px var(--red);transition:width .55s var(--ease)}
.stat:hover{background:rgba(255,46,58,.03)}
.stat:hover::after{width:62%}
.stat .num{font-family:var(--serif);font-weight:700;font-size:clamp(38px,5.5vw,60px);line-height:1;letter-spacing:-.02em;color:var(--white)}
.stat .lab{font-family:var(--mono);font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--ash);margin-top:13px}
