/* Effekte der Landingpage: Scroll-Animationen und Conti als Begleiter.
   Nur transform und opacity (laeuft auf der Grafikkarte), keine Unschaerfe-Filter, keine Dauerlast.
   Bei "Bewegung reduzieren" bleibt alles still und sofort sichtbar. */
:root{--fx-gruen:#1DB954;--fx-dunkel:#1E1B3A;--fx-weich:cubic-bezier(.16,1,.3,1)}
/* Fortschritt oben */
.fx-fort{position:fixed;top:0;left:0;right:0;height:3px;z-index:60;transform-origin:0 50%;transform:scaleX(0);will-change:transform;
  background:linear-gradient(90deg,#3bd7c6,var(--fx-gruen),#9be15d);pointer-events:none}
/* Einblenden beim Scrollen: Ruhezustand ist sichtbar; versteckt wird nur, was noch unter dem Bildschirm liegt */
.fx-warte{opacity:0;transform:translate3d(0,40px,0) scale(.97)}
.fx-warte.fx-links{transform:translate3d(-56px,0,0)}
.fx-warte.fx-rechts{transform:translate3d(56px,0,0)}
.fx-da{opacity:1;transform:none;transition:opacity .8s var(--fx-weich),transform 1s var(--fx-weich);transition-delay:var(--fx-v,0s)}
/* Ueberschriften Wort fuer Wort */
.fx-w{display:inline-block}
.fx-warte-w .fx-w{opacity:0;transform:translate3d(0,.55em,0) rotate(2deg)}
.fx-da-w .fx-w{opacity:1;transform:none;transition:opacity .7s var(--fx-weich),transform .9s var(--fx-weich)}
/* Karten: 3D-Kippen zur Maus, Transform nur solange aktiv (sonst keine Extra-Ebenen) */
.fx-kipp{transition:transform .5s var(--fx-weich)}
.fx-kipp.fx-aktiv{transform:perspective(900px) rotateX(var(--fx-rx,0deg)) rotateY(var(--fx-ry,0deg));transition:transform .12s linear}
/* Magnetische Knoepfe */
.fx-mag{transition:transform .45s var(--fx-weich)}
/* Lichtkegel: eine fertig gemalte Scheibe, die nur verschoben wird */
.fx-licht{position:relative;overflow:hidden}
.fx-kegel{position:absolute;left:0;top:0;width:840px;height:840px;pointer-events:none;z-index:0;opacity:0;transition:opacity .6s;will-change:transform;
  background:radial-gradient(closest-side,rgba(29,185,84,.28),rgba(29,185,84,0))}
.fx-licht.fx-hell .fx-kegel{opacity:1}
.fx-licht > *:not(.fx-kegel){position:relative;z-index:1}

/* ---------- Conti */
.fx-conti{position:fixed;left:0;top:0;width:82px;height:82px;z-index:55;pointer-events:none;will-change:transform,opacity;
  transform-origin:50% 60%;transition:opacity .35s}
.fx-conti.fx-unsichtbar{opacity:0;visibility:hidden;transition:opacity .35s,visibility 0s .35s}
.fx-koerper{position:relative;width:100%;height:100%;animation:fx-schweben 3.2s ease-in-out infinite}
.fx-conti.fx-fliegt .fx-koerper{animation:none}
.fx-conti-figur{pointer-events:auto;display:block;width:100%;height:100%;cursor:pointer;border:0;padding:0;background:none;
  filter:drop-shadow(0 10px 16px rgba(16,90,48,.26))}
.fx-conti-figur:focus-visible{outline:3px solid var(--fx-gruen);outline-offset:4px;border-radius:50%}
.fx-conti .cl-augen{transition:none}
.fx-conti .cl-antenne{transform-box:view-box;transform-origin:60px 31px}
.fx-conti .cl-hand-r{transform-box:view-box;transform-origin:88px 66px}
.fx-conti .cl-haende > circle{transform-box:view-box;transform-origin:30px 66px}
@keyframes fx-schweben{0%,100%{transform:translate3d(0,0,0)}50%{transform:translate3d(0,-7px,0)}}
/* Landung: stauchen, nachfedern, Antenne schwingt nach */
.fx-koerper.fx-landen{animation:fx-landen .62s var(--fx-weich),fx-schweben 3.2s ease-in-out .62s infinite}
.fx-koerper.fx-landen .cl-antenne{animation:fx-wackel .9s ease-in-out}
@keyframes fx-landen{0%{transform:scale(1.08,.84) translate3d(0,6px,0)}40%{transform:scale(.95,1.07) translate3d(0,-5px,0)}70%{transform:scale(1.02,.98)}100%{transform:none}}
@keyframes fx-wackel{20%{transform:rotate(-18deg)}50%{transform:rotate(12deg)}75%{transform:rotate(-5deg)}100%{transform:none}}
/* Winken: rechte Hand hoch und hin und her */
.fx-conti.fx-winken .cl-hand-r{animation:fx-winken 1.4s ease-in-out}
@keyframes fx-winken{0%{transform:none}18%{transform:translate(4px,-16px) rotate(-10deg)}32%{transform:translate(6px,-18px) rotate(14deg)}
  46%{transform:translate(4px,-16px) rotate(-10deg)}60%{transform:translate(6px,-18px) rotate(14deg)}78%{transform:translate(4px,-14px)}100%{transform:none}}
/* Staunen: kleiner Hops, Haende hoch, Antenne zappelt */
.fx-conti.fx-staunen .fx-conti-figur{animation:fx-hops .7s var(--fx-weich)}
.fx-conti.fx-staunen .cl-haende,.fx-conti.fx-staunen .cl-hand-r{animation:fx-haende .8s var(--fx-weich)}
.fx-conti.fx-staunen .cl-antenne{animation:fx-wackel .8s ease-in-out}
@keyframes fx-hops{0%{transform:none}35%{transform:translate3d(0,-18px,0) scale(1.05,.96)}70%{transform:scale(.97,1.03)}100%{transform:none}}
@keyframes fx-haende{40%{transform:translate(0,-10px)}100%{transform:none}}
.fx-koerper.fx-blinzel .cl-augen{animation:fx-blinzel .24s ease-in-out}
.fx-koerper.fx-blinzel .cl-augen{transform-box:fill-box;transform-origin:center}
@keyframes fx-blinzel{50%{transform:scaleY(.1)}}

/* Sprung in die Buehne: Conti leuchtet auf, zieht eine Lichtspur, die Buehne blitzt */
.fx-halo{position:absolute;left:50%;top:50%;width:230%;height:230%;margin:-115% 0 0 -115%;border-radius:50%;pointer-events:none;opacity:0;
  background:radial-gradient(closest-side,rgba(125,255,180,.85),rgba(60,230,140,.35) 45%,rgba(29,185,84,0));transform:scale(.6);
  transition:opacity .35s,transform .5s var(--fx-weich)}
.fx-conti.fx-taucht .fx-halo{opacity:1;transform:scale(1);animation:fx-halo-puls .5s ease-in-out infinite alternate}
@keyframes fx-halo-puls{to{transform:scale(1.18)}}
.fx-spur{position:fixed;left:0;top:0;z-index:54;border-radius:50%;pointer-events:none;will-change:transform,opacity;
  background:radial-gradient(closest-side,#eafff3,rgba(125,255,180,.9) 40%,rgba(29,185,84,0));animation:fx-glimmen .7s ease-out forwards}
@keyframes fx-glimmen{from{opacity:.95}to{opacity:0;scale:.2}}
.fx-glow{position:absolute;z-index:3;pointer-events:none}
.fx-glow i{position:absolute;left:50%;top:46%;display:block;border-radius:50%}
.fx-glow-hof{width:170%;height:170%;margin:-85% 0 0 -85%;opacity:0;
  background:radial-gradient(closest-side,rgba(140,255,190,.75),rgba(29,185,84,.28) 50%,rgba(29,185,84,0));animation:fx-hof 1.3s var(--fx-weich) forwards}
@keyframes fx-hof{0%{opacity:0;transform:scale(.5)}25%{opacity:1;transform:scale(1)}100%{opacity:0;transform:scale(1.15)}}
.fx-glow-ring{width:120px;height:120px;margin:-60px 0 0 -60px;border:3px solid rgba(160,255,200,.95);box-shadow:0 0 24px rgba(125,255,180,.9),inset 0 0 18px rgba(125,255,180,.6);
  opacity:0;animation:fx-ring 1.1s cubic-bezier(.2,.7,.2,1) forwards}
.fx-glow-ring2{animation-delay:.16s;border-width:2px}
@keyframes fx-ring{0%{opacity:1;transform:scale(.2)}100%{opacity:0;transform:scale(3.4)}}
.fx-funke{width:10px;height:10px;margin:-5px 0 0 -5px;background:#fff;box-shadow:0 0 14px 5px rgba(125,255,180,.95);opacity:0;
  animation:fx-funke 1s cubic-bezier(.15,.8,.3,1) forwards}
@keyframes fx-funke{0%{opacity:1;transform:translate(0,0) scale(1)}70%{opacity:1}100%{opacity:0;transform:translate(var(--fx-fx),var(--fx-fy)) scale(.3)}}
.fx-glow-klein .fx-glow-hof{animation-duration:.9s}
.fx-glow-klein .fx-glow-ring2{display:none}
.fx-blitz{position:absolute;inset:0;z-index:5;pointer-events:none;border-radius:inherit;opacity:0;
  background:radial-gradient(60% 55% at 50% 46%,rgba(255,255,255,.95),rgba(160,255,200,.55) 45%,rgba(29,185,84,0) 80%);animation:fx-blitz .9s ease-out forwards}
@keyframes fx-blitz{0%{opacity:0}15%{opacity:1}100%{opacity:0}}
.fx-buehne-puls{animation:fx-buehne .9s var(--fx-weich)}
@keyframes fx-buehne{0%{transform:scale(1)}20%{transform:scale(1.045)}55%{transform:scale(.985)}100%{transform:scale(1)}}

/* Sprechblase: eigene Ebene, wird nur verschoben (kein Unschaerfe-Filter) */
.fx-blase{position:fixed;left:0;top:0;z-index:56;pointer-events:auto;width:max-content;max-width:min(260px,62vw);background:#fff;
  color:var(--fx-dunkel);border:1px solid rgba(30,27,75,.08);border-radius:18px 18px 18px 6px;padding:11px 34px 11px 14px;
  font:500 14.5px/1.4 Inter,system-ui,-apple-system,sans-serif;box-shadow:0 12px 34px rgba(30,27,75,.16);will-change:transform}
.fx-blase{border-radius:18px 18px 18px 6px}
.fx-blase.fx-links{border-radius:18px 18px 6px 18px}
.fx-blase .fx-text{display:inline-block;transition:opacity .3s,transform .45s var(--fx-weich)}
.fx-blase{transition:opacity .3s}
.fx-blase.fx-weg{opacity:0;pointer-events:none}
.fx-blase.fx-weg .fx-text{transform:translate3d(0,6px,0);opacity:0}
.fx-blase a{color:#117A37;font-weight:600;text-decoration:none;white-space:nowrap}
.fx-blase-zu{position:absolute;top:4px;right:6px;width:24px;height:24px;border:0;background:none;color:#8a88a0;font-size:18px;line-height:1;cursor:pointer;border-radius:50%}
.fx-blase-zu:hover{background:rgba(30,27,75,.06)}
@media (max-width:759px){.fx-blase{font-size:13.5px}}
@media (prefers-reduced-motion: reduce){
  .fx-warte,.fx-warte-w .fx-w{opacity:1!important;transform:none!important}
  .fx-da,.fx-da-w .fx-w,.fx-kipp,.fx-mag,.fx-conti,.fx-blase{transition:none!important}
  .fx-koerper,.fx-koerper *,.fx-conti *{animation:none!important}
  .fx-spur,.fx-glow,.fx-blitz{display:none}
}

/* ---------- Handys im Kopfbereich: Titanrahmen, Dynamic Island, Tasten, Glasreflex */
.fx-handy{border:0!important;padding:7px!important;border-radius:46px!important;overflow:visible!important;
  background:linear-gradient(150deg,#4a5068 0%,#1b1e2a 28%,#2c3142 62%,#0e1016 100%)!important;
  box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.16),inset 0 0 0 3.5px #07080c,0 28px 50px -18px rgba(16,24,40,.45),0 10px 22px -10px rgba(16,24,40,.3)!important}
.fx-handy[style*="z-index: 5"]{box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.2),inset 0 0 0 3.5px #07080c,0 40px 70px -22px rgba(16,24,40,.55),0 26px 60px -24px rgba(29,185,84,.55)!important}
.fx-handy video{border-radius:39px!important}
.fx-handy::before{content:"";position:absolute;right:-2.5px;top:27%;width:3px;height:58px;border-radius:0 3px 3px 0;background:linear-gradient(90deg,#1b1e2a,#4a5068)}
.fx-handy::after{content:"";position:absolute;left:-2.5px;top:20%;width:3px;height:30px;border-radius:3px 0 0 3px;background:linear-gradient(270deg,#1b1e2a,#4a5068);box-shadow:0 42px 0 #2c3142}
.fx-insel{position:absolute;left:50%;top:15px;width:32%;height:21px;margin-left:-16%;border-radius:20px;background:#030405;pointer-events:none;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.04)}
.fx-insel::after{content:"";position:absolute;right:9px;top:6px;width:9px;height:9px;border-radius:50%;
  background:radial-gradient(circle at 35% 35%,#3b4a7a,#0b1020 60%);box-shadow:0 0 0 1.5px #10131c}
.fx-glanz{position:absolute;inset:7px;border-radius:39px;pointer-events:none;
  background:linear-gradient(118deg,rgba(255,255,255,.22) 0%,rgba(255,255,255,.06) 22%,rgba(255,255,255,0) 38%)}
@media (max-width:420px){.fx-handy{padding:5px!important;border-radius:38px!important}.fx-handy video,.fx-glanz{border-radius:33px!important}.fx-glanz{inset:5px}.fx-insel{top:11px;height:17px}}