/* ========================================================================== Systemhaus IT – effects.css Volle Effekt-Ebene. Nur aktiv unter . Wird automatisch still bei prefers-reduced-motion (siehe unten) und im AAA-Modus (html.aaa.fx -> Effekte gedämpft). ========================================================================== */ /* --- Sanfter Seiteneinstieg --- */ html.fx body{opacity:0;animation:fx-fade .6s ease forwards} @keyframes fx-fade{to{opacity:1}} /* --- Animierter Hero: driftender Gradient + atmendes Grid --- */ html.fx .hero{background-size:160% 160%;animation:fx-gradient 18s ease-in-out infinite} @keyframes fx-gradient{ 0%{background-position:80% 0%} 50%{background-position:20% 100%} 100%{background-position:80% 0%} } html.fx .hero::after{animation:fx-grid 24s linear infinite} @keyframes fx-grid{ from{background-position:0 0,0 0} to{background-position:42px 42px,42px 42px} } /* Leuchtender Akzentbogen im Hero */ html.fx .hero::before{ content:"";position:absolute;top:-30%;right:-10%;width:55%;height:120%; background:radial-gradient(circle,rgba(245,165,36,.22),transparent 60%); filter:blur(20px);pointer-events:none;animation:fx-pulse 9s ease-in-out infinite} @keyframes fx-pulse{0%,100%{opacity:.55;transform:scale(1)}50%{opacity:1;transform:scale(1.08)}} /* --- Scroll-Reveal --- */ html.fx [data-reveal]{opacity:0;transform:translateY(24px); transition:opacity .7s cubic-bezier(.2,.7,.2,1),transform .7s cubic-bezier(.2,.7,.2,1)} html.fx [data-reveal].is-visible{opacity:1;transform:none} html.fx [data-reveal][data-reveal="2"]{transition-delay:.08s} html.fx [data-reveal][data-reveal="3"]{transition-delay:.16s} html.fx [data-reveal][data-reveal="4"]{transition-delay:.24s} /* --- Hover-Tiefe + Glow auf Karten --- */ html.fx .service-card,html.fx .card,html.fx .review{ transition:transform .25s cubic-bezier(.2,.7,.2,1),box-shadow .25s ease,border-color .25s ease} html.fx .service-card:hover{ transform:translateY(-6px) scale(1.012); box-shadow:0 22px 50px -18px rgba(11,27,43,.4),0 0 0 1px rgba(245,165,36,.5); border-color:var(--c-amber)} html.fx .chip{transition:transform .18s ease,border-color .18s ease,box-shadow .18s ease} html.fx .chip:hover{transform:translateY(-2px);box-shadow:0 8px 18px -10px rgba(11,27,43,.5);border-color:var(--c-amber)} /* --- Buttons: Schimmer beim Hover --- */ html.fx .btn{position:relative;overflow:hidden} html.fx .btn::after{content:"";position:absolute;inset:0; background:linear-gradient(110deg,transparent 30%,rgba(255,255,255,.45) 50%,transparent 70%); transform:translateX(-120%);transition:transform .6s ease} html.fx .btn:hover::after{transform:translateX(120%)} html.fx .btn-primary:hover{transform:translateY(-2px);box-shadow:0 12px 28px -10px rgba(245,165,36,.7)} /* --- Animierte Zähler (Stat-Block) --- */ .stats{display:grid;grid-template-columns:repeat(4,1fr);gap:1.4rem;margin-top:2.4rem} .stat{background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.16); border-radius:14px;padding:1.4rem 1rem;text-align:center} .stat-num{font-family:var(--ff-display);font-size:clamp(2rem,4vw,2.8rem);font-weight:700;color:#fff;line-height:1} .stat-suffix{color:var(--c-amber)} .stat-label{display:block;margin-top:.4rem;color:#cdd9e5;font-size:.92rem} html.fx .stat{transition:transform .25s ease,box-shadow .25s ease} html.fx .stat:hover{transform:translateY(-4px);box-shadow:0 16px 36px -16px rgba(0,0,0,.5)} @media(max-width:760px){.stats{grid-template-columns:repeat(2,1fr)}} /* --- Floating-Contact: sanftes Einschweben --- */ html.fx .floating-contact{animation:fx-float-in .6s .4s ease both} @keyframes fx-float-in{from{opacity:0;transform:translateY(20px)}to{opacity:1;transform:none}} html.fx .fc-call{animation:fx-bob 3.5s ease-in-out 1.2s infinite} @keyframes fx-bob{0%,100%{transform:translateY(0)}50%{transform:translateY(-4px)}} /* --- Im AAA-Modus Effekte dämpfen (Bewegung minimieren, Lesbarkeit zuerst) --- */ html.aaa.fx .hero,html.aaa.fx .hero::after,html.aaa.fx .hero::before, html.aaa.fx .fc-call{animation:none} html.aaa.fx .btn::after{display:none} html.aaa.fx .service-card:hover{transform:translateY(-3px) scale(1)} /* --- Reduced motion: ALLES still (Pflicht für Barrierefreiheit) --- */ @media(prefers-reduced-motion:reduce){ html.fx *,html.fx *::before,html.fx *::after{ animation:none!important;transition:none!important} html.fx body{opacity:1!important} html.fx [data-reveal]{opacity:1!important;transform:none!important} }