/* einklang OS · Sektion "Die Loesung" — Viz-Teil des Code-Embeds. Erzeugt aus dem Prototyp einklang-os-v2-sektion3-funktion_2_3_3.html. Kopf, Grid, Textspalte und Schritte sind in Webflow nativ; hier stehen nur die Buehne und die Zustaende, die Webflow nicht ausdruecken kann (Keyframes, Nachfahren-Selektoren unter einer Combo-Klasse, scroll-snap). Token auf den Design-2.0-Stand der Site gezogen. Sie haengen an der Sektion, damit beide Spalten sie sehen. */ .funktion_os{ --ek-deepflow:#007889; --ek-supplyblue:#9BC4D5; --ek-amberyield:#FBB963; --ek-sunbuffer:#F5D88F; --ek-midnightsafe:#131936; --ek-surface:#f5f9fa; --ek-paper:#fff; --ek-ink:#1e1e1e; --ek-stone:#565656; --ek-stone-light:#B3B3B3; --ek-line:rgba(30,30,30,.1); --ek-ease:cubic-bezier(.22,.61,.36,1); --ek-ease-out:cubic-bezier(.16,1,.3,1); --ek-spring:cubic-bezier(.34,1.32,.64,1); --uc-pv:#FBB963; --uc-peak:#007889; --uc-buy:#9BC4D5; --uc-market:#131936; } .funktion_os_viz *{box-sizing:border-box;min-width:0} .funktion_os_viz b{font-weight:600} /* Webflow wickelt jeden HtmlEmbed in ein div.w-embed. Das steht auf height:auto und macht jedes height:100% darin wirkungslos (gemessen: 0px) — die Buehnenregie rechnet dann gegen einen 0 Pixel hohen Rahmen. */ .funktion_os_viz > .w-embed{height:100%} @media(max-width:991px){.funktion_os_viz > .w-embed{height:auto}} /* ---------- Einrasten am Phasenwechsel ---------- Die Schritte sind Snap-Ziele, ausgerichtet auf die Mitte — genau dort entscheidet die Regie, welcher Schritt gelesen wird. Der Umschaltpunkt und der Rastpunkt fallen damit zusammen. `proximity` statt `mandatory`: es rastet nur ein, wenn man ohnehin nah dran ist, und blockiert nie das Weiterscrollen. Der Schalter haengt an und wird von der Regie nur gesetzt, solange die Sektion das Bild fuellt — sonst wuerde die ganze Seite schnappen. */ html[data-ek-snap="on"]{scroll-snap-type:y proximity} .funktion_os_step{scroll-snap-align:center;scroll-snap-stop:normal} /* ---------- Der Einrast-Impuls ---------- Beim Wechsel bekommt der neue Textblock einen kurzen Anschlag: die Ziffer faellt in ihren Kreis, der Kicker setzt sich. Das ist die Rueckmeldung, die dem Auge sagt "hier stehe ich jetzt" — ohne sie wirkt der Wechsel wie ein Durchrutschen. */ .funktion_os_step.is-cur .funktion_os_step_num{background-color:var(--ek-deepflow);color:#fff} .funktion_os_step.is-snap .funktion_os_step_num{animation:ekStepSnap .42s var(--ek-ease)} .funktion_os_step.is-snap .funktion_os_step_kicker{animation:ekStepSettle .42s var(--ek-ease)} @keyframes ekStepSnap{0%{transform:scale(.86)}55%{transform:scale(1.1)}100%{transform:scale(1)}} @keyframes ekStepSettle{0%{transform:translateY(6px)}100%{transform:translateY(0)}} .funktion_os_step_kicker{cursor:pointer} .funktion_os_step_kicker:focus-visible{outline:2px solid var(--ek-deepflow);outline-offset:4px;border-radius:8px} @media(max-width:991px){ /* Ohne Sticky-Buehne gibt es keine Phasen — dann auch kein Einrasten. */ html[data-ek-snap="on"]{scroll-snap-type:none} .funktion_os_step{scroll-snap-align:none} .funktion_os_step_kicker{cursor:auto} .funktion_os_step.is-cur .funktion_os_step_num{background-color:rgba(0,120,137,.1);color:var(--ek-deepflow)} } @media(prefers-reduced-motion:reduce){ html[data-ek-snap="on"]{scroll-snap-type:none} .funktion_os_step.is-snap .funktion_os_step_num, .funktion_os_step.is-snap .funktion_os_step_kicker{animation:none} } .fnode{position:absolute;width:44px;height:44px;transform:translate(-50%,-50%); transition:opacity .45s var(--ek-ease-out);will-change:opacity,transform} .fnode__l{position:absolute;bottom:100%;left:50%;margin-bottom:7px; transform:translateX(-50%);white-space:nowrap; font:400 9.5px/1.4 'Inter',sans-serif;color:var(--ek-stone); transition:color .4s var(--ek-ease-out)} .fnode__b{width:44px;height:44px;border-radius:8px;background:var(--ek-paper); border:1px solid var(--ek-line);display:grid;place-items:center; box-shadow:0 1px 2px rgba(19,25,54,.05),0 10px 24px -20px rgba(19,25,54,.45); transition:transform .5s var(--ek-spring),border-color .45s var(--ek-ease-out), background .45s var(--ek-ease-out),box-shadow .45s var(--ek-ease-out)} .fnode__b svg{width:19px;height:19px;stroke:var(--ek-midnightsafe);fill:none; stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round; transition:transform .5s var(--ek-spring)} .fnode.is-hot{z-index:3} .fnode.is-hot .fnode__b{transform:translateY(-4px) scale(1.18); background:var(--ucTint);border-color:var(--ucEdge); box-shadow:0 0 0 4px var(--ucRing),0 18px 32px -12px var(--ucSoft)} .fnode.is-hot .fnode__b svg{transform:scale(1.06)} .fnode.is-hot .fnode__l{color:var(--ek-ink)} .orc.is-sweeping .fnode:not(.is-hot):not(.is-lit), .f3stage.is-sweeping .fnode:not(.is-hot):not(.is-lit){opacity:.34} .fnode--lb .fnode__l{bottom:auto;top:100%;margin:7px 0 0} .fcore{position:absolute;width:0;height:0;will-change:transform,opacity} .fglow{position:absolute;left:0;top:0;width:200px;height:200px;margin:-100px 0 0 -100px; border-radius:50%;background:radial-gradient(circle,rgba(0,120,137,.12),rgba(0,120,137,0) 68%); animation:breathe 7s ease-in-out infinite} .fhalo{position:absolute;left:0;top:0;width:126px;height:126px;margin:-63px 0 0 -63px; border-radius:50%;border:1.5px dashed rgba(0,120,137,.34);animation:spin 64s linear infinite} .fdisc{position:absolute;left:0;top:0;width:100px;height:100px;margin:-50px 0 0 -50px; border-radius:50%;background:var(--ek-paper);border:2px solid var(--ek-deepflow); display:flex;align-items:center;justify-content:center; box-shadow:0 22px 50px -30px rgba(0,120,137,.75)} .fdisc__in{display:flex;flex-direction:column;align-items:center;transform:translateY(-2px)} .fdisc__mark{width:31px;color:var(--ek-deepflow);line-height:0} .fdisc__w{width:47px;margin-top:6px;line-height:0} @keyframes spin{to{transform:rotate(360deg)}} @keyframes breathe{0%,100%{transform:scale(1);opacity:.85}50%{transform:scale(1.07);opacity:1}} .orcrail{position:absolute;height:6px;margin-top:-3px;transform-origin:0 50%; opacity:0;transition:opacity var(--rail-t,.9s) var(--ek-ease-out)} .orcrail.is-on{opacity:1} .orcrail i{position:absolute;left:0;top:0;width:6px;height:6px;border-radius:50%; opacity:0;will-change:transform,opacity} @keyframes railH{0%{transform:translateX(0) scale(.55);opacity:0} 18%{opacity:1;transform:translateX(calc(var(--tv) * .18)) scale(1)} 82%{opacity:1;transform:translateX(calc(var(--tv) * .82)) scale(1)} 100%{transform:translateX(var(--tv)) scale(.55);opacity:0}} .fviz{position:relative;height:100%;overflow:clip;overflow-clip-margin:24px} .fviz__stack{position:absolute;left:0;right:0;top:var(--finset,16px);transform-origin:top center; transform:translateY(var(--dy,0px)) scale(var(--fscale,1))} .fpart{opacity:.55;transform:none;pointer-events:auto;border-radius:16px; transition:opacity .35s var(--ek-ease),transform .35s var(--ek-ease),box-shadow .35s var(--ek-ease)} .fviz[data-cur="1"] .fpart--in, .fviz[data-cur="2"] .fpart--model, .fviz[data-cur="3"] .fpart--plan{opacity:1;transform:translateY(-3px)} .fviz[data-cur="2"] .fpart--model, .fviz[data-cur="3"] .fpart--plan{box-shadow:0 10px 40px rgba(0,0,0,.08)} .f3tiles{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px} .f3tile{display:flex;flex-direction:column;background:var(--ek-paper); border:1px solid var(--ek-line);border-radius:16px;padding:11px 12px 10px} .f3tile__l{font:600 .68rem/1.3 'Inter',sans-serif;color:var(--ek-midnightsafe); margin-bottom:8px} .f3tile__b{flex:1;display:flex;align-items:flex-end;min-height:46px} .f3tile__b svg{display:block;width:100%;height:auto} .funktion_os .fdraw{stroke-dasharray:1000;stroke-dashoffset:1000; transition:stroke-dashoffset 1.3s var(--ek-ease-out) .2s} .funktion_os.is-live .fdraw{stroke-dashoffset:0} .f3tile--live{background:rgba(155,196,213,.22);border-color:rgba(155,196,213,.55)} .f3tile--live .f3tile__t{font:400 .66rem/1.4 'Inter',sans-serif;color:var(--ek-stone)} .f3wx{display:flex;flex-direction:column;gap:7px;padding-bottom:2px;width:100%} .f3wx__r{display:flex;align-items:center;gap:9px} .f3wx__r svg{width:21px;height:21px;flex:none;stroke:var(--ek-amberyield);fill:none; stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round} .f3wx__r b{font:600 1.02rem/1 'Inter',sans-serif;color:var(--ek-midnightsafe); font-variant-numeric:tabular-nums} .f3wx__r span{font:400 .62rem/1 'Inter',sans-serif;color:var(--ek-stone)} .ucos{background:var(--ek-paper);border:1px solid var(--ek-line);border-radius:24px; box-shadow:none; overflow:hidden;margin-top:8px} .ucos__bar{display:flex;align-items:center;gap:11px;height:48px;padding:0 18px; background:rgba(245,249,250,.92);border-bottom:1px solid var(--ek-line)} .ucos__dots{display:flex;gap:6px;flex:none;margin-right:3px} .ucos__dots i{display:block;width:9px;height:9px;border-radius:50%;background:rgba(19,25,54,.13)} .ucos__bar .emark{width:20px;flex:none;line-height:0;color:var(--ek-midnightsafe)} .ucos__t{font-size:.84rem;font-weight:600;letter-spacing:-.005em} .ucos__pill{margin-left:auto;display:inline-flex;align-items:center;gap:6px; background:rgba(0,120,137,.09);color:var(--ek-deepflow); font:600 .68rem/1 'Inter',sans-serif;padding:.34rem .7rem;border-radius:100px;white-space:nowrap} .ucos__body{padding:16px 20px 18px} .ucos__body>svg{display:block;width:100%;height:auto} .ucpulse{width:6px;height:6px;border-radius:50%;background:var(--ek-deepflow);flex:none; animation:ucpulse 2.4s ease-in-out infinite} @keyframes ucpulse{0%,100%{opacity:.35;transform:scale(.82)}50%{opacity:1;transform:scale(1)}} .f3card{background:var(--ek-paper);border:1px solid var(--ek-line); border-radius:16px;padding:13px 16px 14px;margin-top:8px} .f3card__head{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap;margin-bottom:4px} .f3card__head b{font:600 .82rem/1 'Inter',sans-serif} .f3card__head span{font:400 .7rem/1 'Inter',sans-serif;color:var(--ek-stone-light);margin-left:auto} .f3chip{display:inline-flex;align-items:center;gap:6px;margin-left:auto; font:600 .62rem/1 'Inter',sans-serif;color:var(--ek-deepflow); background:rgba(0,120,137,.09);border-radius:100px;padding:5px 10px} .f3flow{position:relative;overflow:hidden;max-height:var(--f3flow-max,300px)} .f3stage{position:absolute;left:50%;top:0;width:700px;height:400px; margin-left:-350px;transform-origin:top center} .f3plan svg{display:block;width:100%;height:auto} .f3legend{display:flex;flex-wrap:wrap;gap:7px 18px;margin-top:12px;align-items:center} .flg{display:inline-flex;align-items:center;gap:7px;font-size:.72rem;color:var(--ek-stone); transition:color .4s var(--ek-ease-out)} .flg i{width:9px;height:9px;border-radius:50%;flex:none; transition:box-shadow .4s var(--ek-ease-out)} .flg.is-hot{color:var(--ek-ink)} .flg.is-hot i{box-shadow:0 0 0 4px var(--ucSoft)} .f3bar{will-change:transform,opacity;opacity:0;transform:scaleY(.04); transition:transform .62s var(--ek-spring),opacity .3s linear} .f3bar.is-on{opacity:1;transform:none} .f3ax{font:400 9px 'Inter',sans-serif;fill:var(--ek-stone-light)} @media(max-width:991px){ .fviz{position:static;height:auto;overflow:visible} .fviz__stack{position:static;transform:none}} @media(max-width:767px){ .f3tiles{grid-template-columns:repeat(2,minmax(0,1fr))} } @media(prefers-reduced-motion:reduce){ .ucpulse,.fglow,.fhalo,.orcrail i{animation:none!important} .orcrail i{opacity:.85} .f3bar{transition:none!important} }