/* ==========================================================================
   FinDoku · FlipSuite-Ablaufgrafik (Claude Design 08.10.2026)
   Geladen auf der Übergangsseite und auf Start 1/2 (functions.php), nicht global. Grafik-Stil unverändert übernommen.
   ========================================================================== */
/* FlipSuite Hero-Animation – Komponente */
.fs{--e:cubic-bezier(.22,1,.36,1);position:relative;width:100%;max-width:520px;aspect-ratio:520/440;margin-inline:auto;font-family:"Inter",Arial,sans-serif;transition:opacity .6s var(--e)}
.fs.fs-fade{opacity:0}
.fs svg{display:block;width:100%;height:100%;overflow:visible}
.fs .fs-defs{position:absolute;width:0;height:0;overflow:hidden}
.fs .fs-m{display:none}
.fs-sr{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0}
@media (max-width:599px){.fs{max-width:396px;aspect-ratio:360/200;max-height:220px}.fs .fs-d{display:none}.fs .fs-m{display:block}}

.fs text{font-family:"Inter",Arial,sans-serif;font-size:12px;font-weight:500}
.fs .t1{fill:#E9F2F1;font-weight:600}
.fs .t2{fill:#A2B5B4}
.fs .tk{fill:#E9F2F1;font-weight:600;letter-spacing:.08em}
.fs .ln,.fs .h{fill:none;stroke:rgba(0,229,212,.38);stroke-width:1.2;stroke-linecap:round;stroke-linejoin:round}
.fs .h{stroke:#00E5D4;stroke-opacity:.8;stroke-width:1.4}
.fs .bx{fill:rgba(0,229,212,.05);stroke:rgba(0,229,212,.38);stroke-width:1.2}
.fs .sh{fill:rgba(0,229,212,.12);stroke:rgba(0,229,212,.38);stroke-width:1.2;stroke-linejoin:round}

/* Linien zeichnen */
.fs .d{stroke-dasharray:1 1;transition:stroke-dashoffset .6s var(--e)}
.fs .d.q{transition-duration:.35s}
.fs-js .d:not(.on){stroke-dashoffset:1}

/* Einblenden */
.fs .f,.fs .ex,.fs .pA,.fs .pB{transition:opacity .6s var(--e),transform .6s var(--e);transform-box:fill-box;transform-origin:center}
.fs-js .f:not(.on){opacity:0;transform:translateY(6px)}
.fs-js .ex:not(.on){opacity:0;transform:translate(16px,-8px) rotate(4deg)}

/* Status-Pillen (A = vorher, B = nachher) */
.fs .pA{opacity:0}
.fs-js .pA.on:not(.x){opacity:1}
.fs-js .pB:not(.on){opacity:0}
.fs .py{fill:rgba(251,191,36,.12);stroke:rgba(251,191,36,.55)}
.fs .ty{fill:#FBBF24}
.fs .pg{fill:rgba(52,211,153,.12);stroke:rgba(52,211,153,.55)}
.fs .tg{fill:#34D399}

/* Feld-Lichtimpuls */
.fs .fld{fill:#00E5D4;opacity:.5;filter:url(#fsGlow);transform-box:fill-box;transform-origin:0 50%}
.fs-js .fld:not(.on){opacity:0;transform:scaleX(0)}
.fs .fld.on{animation:fsFill .9s var(--e)}
@keyframes fsFill{0%{opacity:1;transform:scaleX(0)}55%{opacity:1;transform:scaleX(1)}100%{opacity:.5;transform:scaleX(1)}}

/* Lichtimpulse auf Leiterbahnen */
.fs .pl{fill:none;stroke:#00E5D4;stroke-width:2;stroke-linecap:round;stroke-dasharray:.14 3;stroke-dashoffset:-1.2;filter:url(#fsGlow);transition:stroke-dashoffset .8s var(--e)}
.fs-js .pl:not(.on){stroke-dashoffset:.2}
.fs .pl.sw{stroke-dasharray:.07 3;transition-duration:1.6s}
.fs-js .sw:not(.on){stroke-dashoffset:.1}

/* Schritt-Knoten */
.fs .rg{fill:none;stroke:rgba(0,229,212,.38);stroke-width:1.2}
.fs .rh{fill:none;stroke:#00E5D4;stroke-width:1.2}
.fs .cr{fill:#00E5D4;filter:url(#fsGlow)}
.fs .rh,.fs .cr,.fs .lb{transition:opacity .5s var(--e),transform .5s var(--e);transform-box:fill-box;transform-origin:center}
.fs-js .nd:not(.on) .rh,.fs-js .nd:not(.on) .cr{opacity:0}
.fs-js .nd:not(.on) .cr{transform:scale(.3)}
.fs-js .nd:not(.on) .lb{opacity:.32}
.fs .lb{fill:#E9F2F1}
.fs .no{fill:#00E5D4;font-weight:600}

.fs-static *{transition:none!important;animation:none!important}
@media (prefers-reduced-motion:reduce){.fs,.fs *{transition:none!important;animation:none!important}}
.fdn-flipgrafik{min-width:0}
.fdn-flipgrafik .fdn-portal__vermerk{justify-content:center}
.fdn-flipgrafik .fdn-portal__vermerk{display:flex;align-items:center;gap:8px;margin-top:16px;font-size:var(--fs-xs);color:var(--text-3)}
.fdn-flipgrafik .fdn-portal__vermerk::before{content:"";width:16px;height:1px;background:var(--mk-linie)}
.fd-site .fdn-flipabschnitt .fd-haken{margin-top:24px}