/* Effekte (GSAP) – Stil, Farben und Formen der Seite bleiben unverändert; alles liegt als Überlagerung darüber. */
html.fx-pre main{opacity:0}
html.fx .fx-t{--fxo:0;--mx:50%;--my:50%}

/* Weiße Felder: grünes Licht unter der Maus + dünne Lichtkante */
html.fx .fx-card{position:relative;isolation:isolate}
html.fx .fx-card::before{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;z-index:-1;opacity:var(--fxo);background:radial-gradient(250px circle at var(--mx) var(--my),rgba(126,217,87,.2),rgba(126,217,87,.08) 45%,rgba(126,217,87,0) 72%)}
html.fx .fx-card::after,html.fx .fx-ghost::after{content:"";position:absolute;inset:-1px;border-radius:inherit;padding:2px;pointer-events:none;opacity:var(--fxo);background:radial-gradient(170px circle at var(--mx) var(--my),rgba(126,217,87,.95),rgba(114,138,199,.35) 55%,rgba(114,138,199,0) 80%);-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask:linear-gradient(#000 0 0) content-box exclude,linear-gradient(#000 0 0)}

html.fx .fx-edgeonly::before{display:none}

/* Zweit-Buttons: nur Lichtkante, Form bleibt */
html.fx .fx-ghost{position:relative}
html.fx .fx-ghost::after{inset:-1.5px;padding:3.5px}
html.fx .fx-ringw::after{background:radial-gradient(170px circle at var(--mx) var(--my),rgba(255,255,255,.95),rgba(255,255,255,0) 75%)}
/* Zweit-Buttons: beim Darüberfahren nicht mehr komplett grün, nur Lichtkante und Bewegung */
html.fx .btn-ghost:hover{color:var(--navy);background:#fff;border-color:var(--line-strong)}

/* „Jetzt anfragen“: Schimmer-Streifen + Mauslicht im Button */
html.fx .fx-shine{--sx:-150%;position:relative;overflow:hidden;isolation:isolate}
html.fx .fx-shine::before{content:"";position:absolute;top:0;bottom:0;left:0;width:45%;z-index:-1;pointer-events:none;background:linear-gradient(100deg,rgba(255,255,255,0),rgba(255,255,255,.38),rgba(255,255,255,0));transform:translateX(var(--sx)) skewX(-18deg)}
html.fx .fx-shine::after{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;opacity:var(--fxo);background:radial-gradient(90px circle at var(--mx) var(--my),rgba(255,255,255,.3),rgba(255,255,255,0) 70%)}

/* Lichtkante für Felder (Formular, Suche, Rechner, Preistabelle) */
.fx-edge{position:fixed;left:0;top:0;width:0;height:0;box-sizing:border-box;padding:2.5px;pointer-events:none;z-index:9990;opacity:0;visibility:hidden;background:radial-gradient(170px circle at var(--mx,50%) var(--my,50%),rgba(126,217,87,.95),rgba(114,138,199,.35) 55%,rgba(114,138,199,0) 80%);-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask:linear-gradient(#000 0 0) content-box exclude,linear-gradient(#000 0 0)}

/* Gleitende Markierung in Listen */
html.fx .fx-list{position:relative;isolation:isolate}
.fx-pill{position:absolute;left:0;top:0;width:0;height:0;border-radius:10px;background:var(--green-tint);pointer-events:none;z-index:-1;opacity:0;visibility:hidden}

/* Gleitende Markierung in der Navigation (gleiche Optik wie bisher der aktive Punkt) */
html.fx .nav-links{position:relative}
.fx-nav-pill{position:absolute;left:0;top:0;width:0;height:0;box-sizing:border-box;border:1.5px solid var(--green-fill);background:var(--green-tint);border-radius:100px;pointer-events:none;opacity:0;visibility:hidden}
html.fx .nav-links.fx-has-pill a.active{border-color:transparent;background:transparent}

/* Logo auf der Startseite */
html.fx .hero-logo{will-change:transform}

/* Grüne Aufforderungskästen am Seitenende: Spiegelblitz alle 8 Sekunden */
html.fx .fx-band{--bx:-120%;position:relative;overflow:hidden;isolation:isolate}
html.fx .fx-band::before{content:"";position:absolute;top:0;bottom:0;left:0;width:30%;z-index:-1;pointer-events:none;background:linear-gradient(100deg,rgba(255,255,255,0),rgba(255,255,255,.5),rgba(255,255,255,0));transform:translateX(var(--bx)) skewX(-18deg)}
html.fx .about-hero-logo{will-change:transform}

/* Textlinks (Footer, Fließtext): Licht folgt der Maus statt einfarbigem Grün */
html.fx .fx-txt{--fxg:63,168,30;--fxo:0;--mx:50%;--my:50%;background-image:radial-gradient(34px circle at var(--mx) var(--my),rgba(var(--fxg),var(--fxo)) 0,rgba(var(--fxg),0) 100%),linear-gradient(var(--fxc,currentColor),var(--fxc,currentColor));-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}

/* Download-Buttons und „Dokument freischalten“: schwarz mit weißer Schrift */
html .btn.btn-dark{background:var(--navy);color:#fff;border-color:var(--navy);box-shadow:0 1px 2px #00000026,0 10px 22px -10px #00000080}
html .btn.btn-dark:hover{background:#000;color:#fff;border-color:#000}

/* Jobs: Mauslicht im Bereich „Offene Positionen“ */
html.fx .fx-jobs{--jo:0;--jx:50%;--jy:50%;background-image:radial-gradient(300px circle at var(--jx) var(--jy),rgba(126,217,87,calc(.22*var(--jo))),rgba(114,138,199,calc(.08*var(--jo))) 55%,rgba(114,138,199,0) 75%)}

/* Download-Buttons: Text nie abschneiden */
.download-item .btn{flex:none;min-width:max-content;white-space:nowrap}

/* Feste 3D-Tiefe (ohne Bewegung): Kacheln, Kopfleiste, Abschnitte, Symbole, Zahlen */
.post-card,.download-item,.flow-card,.contact-card,.calc-card{background-image:linear-gradient(180deg,#fff,#fafbf8);border-color:#dedcd3;box-shadow:inset 0 1px 0 #fff,0 1px 2px rgba(16,23,40,.07),0 6px 10px -4px rgba(16,23,40,.08),0 22px 38px -20px rgba(16,23,40,.34)}
.contact-card,.calc-card{background-image:linear-gradient(180deg,#fafaf6,#f3f4ef)}
html .cta-band{box-shadow:inset 0 2px 0 rgba(255,255,255,.5),inset 0 -14px 28px -14px rgba(0,0,0,.2),0 2px 4px rgba(52,140,28,.25),0 34px 56px -26px rgba(52,140,28,.7)}
.band-dark{box-shadow:inset 0 22px 30px -22px rgba(16,23,40,.2),inset 0 -22px 30px -22px rgba(16,23,40,.16)}
.nav{box-shadow:0 1px 0 rgba(255,255,255,.8),0 14px 28px -18px rgba(16,23,40,.38)}
.process .badge{box-shadow:inset 0 2px 0 rgba(255,255,255,.38),inset 0 -4px 8px rgba(0,0,0,.18),0 2px 3px rgba(16,23,40,.2),0 14px 22px -8px rgba(16,23,40,.5)}
.stat-grid .num{text-shadow:0 1px 0 rgba(255,255,255,.9),0 3px 0 rgba(60,140,30,.22),0 10px 16px rgba(60,140,30,.22)}
.hero-logo img,.about-hero-logo img{filter:drop-shadow(0 18px 22px rgba(16,23,40,.22))}
.vp-stage{box-shadow:0 2px 4px rgba(16,23,40,.1),0 30px 50px -24px rgba(16,23,40,.5)}

/* Ablauf-Linie, die beim Scrollen wächst */
.fx-pline-h{position:absolute;height:2px;background:var(--green);border-radius:2px;transform-origin:left center;z-index:0;pointer-events:none}
.fx-rail{position:absolute;left:-8px;top:0;bottom:0;width:0;pointer-events:none}
.fx-rail-track,.fx-rail-fill{position:absolute;left:-1px;width:2px;border-radius:2px}
.fx-rail-track{background:var(--line-strong);opacity:.6}
.fx-rail-fill{background:var(--green);transform-origin:top center}
.fx-rail-dot{position:absolute;left:-6px;width:12px;height:12px;box-sizing:border-box;border-radius:50%;background:#fff;border:2px solid var(--line-strong);transition:background .3s,border-color .3s,transform .3s}
.fx-rail-dot.on{background:var(--green);border-color:var(--green);transform:scale(1.25)}
/* Häufige Fragen: Plus dreht beim Zuklappen sofort zurück */
.faq-item.fx-closing summary:after{transform:none}