/* ===== WOW-Layer (ergänzt style.css) ===== */
em{font-style:italic;color:var(--red-hot)}
h1 em{color:transparent}
.grain{position:fixed;inset:-50%;z-index:90;pointer-events:none;opacity:.07;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
  animation:grain 1.2s steps(6) infinite}
@keyframes grain{0%{transform:translate(0,0)}25%{transform:translate(-3%,2%)}50%{transform:translate(2%,-3%)}75%{transform:translate(-2%,-1%)}100%{transform:translate(0,0)}}
.progress{position:fixed;top:0;left:0;right:0;height:3px;z-index:80}
.progress span{display:block;height:100%;width:0;background:linear-gradient(90deg,var(--red-deep),var(--red-hot),var(--gold))}
.site-header.solid,.site-header.scrolled{background:rgba(11,11,13,.82);border-bottom:1px solid var(--line);backdrop-filter:blur(14px)}
.header-inner{transition:min-height .3s}
.scrolled .header-inner{min-height:64px}

/* Hero: Maus-Spotlight + Headline-Reveal */
.spot{position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:radial-gradient(520px circle at var(--sx,70%) var(--sy,30%),rgba(255,43,56,.22),transparent 60%)}
.hero-gear{animation:none;transform:translateY(-50%) rotate(var(--rot,0deg));will-change:transform;filter:drop-shadow(0 0 60px rgba(225,6,19,.35))}
.line{display:block;overflow:hidden;padding-bottom:.08em}
.line>span{display:block;transform:translateY(110%);animation:rise 1s cubic-bezier(.2,.8,.2,1) forwards}
.line:nth-of-type(2)>span{animation-delay:.18s}
@keyframes rise{to{transform:none}}
h1 .line em{background:linear-gradient(110deg,var(--red-hot),#ff9a6a,var(--red-hot));background-size:200% 100%;-webkit-background-clip:text;background-clip:text;animation:shine 5s linear infinite}
@keyframes shine{to{background-position:-200% 0}}
.eyebrow,.lead,.cta-row,.trust{opacity:0;animation:fade 1s .5s forwards}
.lead{animation-delay:.65s}.cta-row{animation-delay:.8s}.trust{animation-delay:.95s}
@keyframes fade{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
.scroll-hint::after{content:"";position:absolute;left:-2px;top:0;width:5px;height:5px;border-radius:50%;background:var(--gold);animation:drip 2s ease-in-out infinite}
@keyframes drip{0%{top:0;opacity:1}100%{top:100%;opacity:0}}

/* Marquee */
.marquee{overflow:hidden;border-block:1px solid var(--line);background:var(--bg2);padding:20px 0}
.marquee-track{display:flex;gap:56px;width:max-content;animation:marq 38s linear infinite}
.marquee span{font:italic 400 clamp(1.4rem,3vw,2.2rem) var(--serif);color:transparent;-webkit-text-stroke:1px rgba(243,241,238,.45);white-space:nowrap}
.marquee span::after{content:"◆";margin-left:56px;color:var(--red);-webkit-text-stroke:0;font-size:.5em;vertical-align:.3em}
@keyframes marq{to{transform:translateX(-50%)}}
.marquee:hover .marquee-track{animation-play-state:paused}

/* Cards: Glow-Rand + Tilt */
.card{--mx:50%;--my:50%;transform-style:preserve-3d;will-change:transform}
.card::before{content:"";position:absolute;inset:0;border-radius:inherit;padding:1px;pointer-events:none;
  background:radial-gradient(280px circle at var(--mx) var(--my),rgba(255,43,56,.9),rgba(217,183,121,.35) 40%,transparent 70%);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude;opacity:0;transition:opacity .3s}
.card:hover::before{opacity:1}
.card.tilt:hover{transform:perspective(900px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg)) translateY(-6px)}

/* FAQ */
.faq-wrap{max-width:860px}
.faq{margin-top:36px;border-top:1px solid var(--line)}
.faq details{border-bottom:1px solid var(--line)}
.faq summary{list-style:none;cursor:pointer;padding:24px 44px 24px 0;font:400 1.25rem/1.3 var(--serif);position:relative;transition:color .2s}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";position:absolute;right:6px;top:50%;translate:0 -50%;font:300 2rem var(--sans);color:var(--red-hot);transition:transform .3s}
.faq details[open] summary{color:var(--gold)}
.faq details[open] summary::after{transform:rotate(45deg)}
.faq details p{margin:0 0 26px;color:var(--muted);max-width:640px;animation:fade .4s both}

.contact-list address{font:400 1.25rem/1.4 var(--serif);font-style:normal}
.contact-list address a{font-size:inherit}
.magnetic{will-change:transform}

/* Rechtstexte / 404 */
.legal-page .site-header{position:sticky}
.legal{padding:60px 22px 90px;max-width:820px}
.legal h1{font-size:clamp(2rem,5vw,3rem);max-width:none}
.legal h2{margin-top:56px;padding-top:24px;border-top:1px solid var(--line)}
.legal h3{font:400 1.3rem var(--serif);color:var(--gold);margin:32px 0 8px}
.legal p,.legal li,.legal dd{color:#cfcbc5}
.legal ul{padding-left:20px}
.facts{display:grid;grid-template-columns:max-content 1fr;gap:12px 28px}
.facts dt{color:var(--gold);font-size:.8rem;letter-spacing:.16em;text-transform:uppercase;padding-top:4px}
.facts dd{margin:0}
.legal main > p > .btn,.legal > p > .btn{margin-top:40px}

@media (max-width:759px){.facts{grid-template-columns:1fr;gap:2px}.facts dd{margin-bottom:14px}}
@media (prefers-reduced-motion:reduce){
  .line>span,.eyebrow,.lead,.cta-row,.trust{transform:none!important;opacity:1!important;animation:none!important}
  .grain,.marquee-track{animation:none}
}

.hero-gear{right:-8vw;width:min(680px,92vw);opacity:.2}
@media (max-width:759px){.hero-gear{opacity:.11;right:-30vw}}