/* ========================================================================== Magic Flow 8.0 — motion-plus.css (Jonas-Diktat 02.09.2026) Ergänzt motion-v4.css um: Bar-Fill (Tribeband + generisch), Underline-Draw, Hero-Checkmark-Pop, Werte-Wörter (grösser + Pop), Schmetterlings-Flattern, Breakthrough-Shake, Hero-Preis-Badge, mobiler CTA-Puls, generischer Streichpreis-Draw, Testimonial-Stagger, Exit-Popup-Balken. Regeln: · Alle Zustände hängen an Klassen, die NUR js/motion-plus.js vergibt — ohne JS (und bei prefers-reduced-motion) bleibt die Seite 1:1 im Endzustand, nichts ist versteckt. · Gate für Dauer-Animationen: body.mp-motion (setzt motion-plus.js nur OHNE reduced-motion — gleiche Konvention wie body.mf-motion). · Nur transform / opacity / background-size; die zwei diktierten Ausnahmen (Balken-width, Streichstrich-width) sind bewusst so (Jonas-Diktat Punkt 1 + 9), betreffen winzige Flächen und laufen einmalig. ========================================================================== */ /* -------------------------------------------------------------------------- 1 · BAR-FILL — .mp-bar wird erst beim Intersect vergeben; die Transition greift damit im selben Frame wie das Ziel-width (0 → Inline-Ziel). [data-fillw]-Balken macht bereits render.js/initFillBars — hier bewusst ausgenommen, sonst liefen zwei Systeme gegeneinander. -------------------------------------------------------------------------- */ .mp-bar { transition: width 1.05s var(--mf-ease, cubic-bezier(0.22, 0.61, 0.36, 1)); } /* -------------------------------------------------------------------------- 2 · UNDERLINE-DRAW — zieht seinen Strich von links. currentColor, damit goldene Passagen automatisch gold unterstrichen werden. -------------------------------------------------------------------------- */ u.mp-u { text-decoration: none; /* Magic-Flow-Regel (Jonas 02.09.): Unterstreichungen sind IMMER gelb, der Text bleibt weiss — die Linie zieht sich beim Scrollen. */ background-image: linear-gradient(var(--mf-gold-soft, #f5cd48), var(--mf-gold-soft, #f5cd48)); background-repeat: no-repeat; background-position: 0 100%; background-size: 0% 2px; padding-bottom: 1px; /* kleiner Delay nach Sichtbarkeit, damit erst der Text ankommt */ transition: background-size 0.5s ease-out 0.18s; } u.mp-u.mp-in { background-size: 100% 2px; } /* -------------------------------------------------------------------------- 3 · CHECKMARK-POP — Hero-Checkliste (.mf-herox__check). Die Fit-Karten- Haken poppen bereits über das V4-System (data-stagger + ::before-Scale in motion-v4.css) — dort NICHT doppeln. -------------------------------------------------------------------------- */ .mf-herox__check.mp-pop { opacity: 0; transform: scale(0.4); transition: opacity 0.35s ease-out, transform 0.5s cubic-bezier(0.34, 1.56, 0.64, 1); /* leichter Overshoot */ } .mf-herox__check.mp-pop.mp-in { opacity: 1; transform: scale(1); } /* -------------------------------------------------------------------------- 4 · WERTE-WÖRTER — Jonas: Wörter unter den Werte-Karten sind zu klein. Vorher 27px Arial weiss → jetzt Versal-Gold in Headline-Schrift, ~1.6×. width:max-content + nowrap: „Transformation" darf über seine 207px-Spalte hinausragen (die Karten stehen versetzt, html hat overflow-x:clip). Styling gilt IMMER (auch ohne JS/Motion) — nur der Pop ist gated. -------------------------------------------------------------------------- */ .mf-values .mf-value figcaption { font-family: var(--mf-font-head, 'Montserrat', Arial, sans-serif); font-size: clamp(19px, 1.9vw, 23px); line-height: 1.12; font-weight: 800; text-transform: uppercase; letter-spacing: 0.05em; /* Jonas 02.09.: zu viel Gelb auf der Seite — Werte-Woerter im Hero-Bar- Violett (#d96fe0, wie die "37" im Plaetze-Zaehler). */ color: #d96fe0; text-shadow: 0 2px 16px rgba(168, 72, 214, 0.45); white-space: nowrap; width: max-content; margin: 6px auto 0; position: relative; z-index: 1; /* über den transparenten Bildrändern der Nachbar-Karten */ } @media (max-width: 900px) { .mf-values .mf-value figcaption { font-size: 16px; letter-spacing: 0.03em; white-space: normal; width: auto; max-width: 100%; } } .mf-value figcaption.mp-val { opacity: 0; transform: translateY(16px) scale(0.82); transition: opacity 0.5s ease-out, transform 0.55s cubic-bezier(0.34, 1.56, 0.64, 1); } .mf-value figcaption.mp-val.mp-in { opacity: 1; transform: none; } /* -------------------------------------------------------------------------- 5 · SCHMETTERLINGE — Testi-, Erwartet- und Team-Falter. Die Lehren/Stip- Falter flattern bereits (sections.css mf-bfly-float) und bleiben aussen vor. --mp-r trägt die statische Grundrotation aus sections.css in die Keyframes, weil animation deren transform sonst plattmachen würde. -------------------------------------------------------------------------- */ img.mp-bfly { opacity: 0; transition: opacity 0.9s ease; will-change: transform; /* Dauer-Animation → eigene Ebene lohnt sich */ } img.mp-bfly.mp-in { opacity: var(--mp-bfly-o, 1); } body.mp-motion img.mp-bfly.mp-in { animation: mp-bfly-flutter var(--mp-bfly-dur, 5s) ease-in-out var(--mp-bfly-delay, 0s) infinite alternate; } @keyframes mp-bfly-flutter { from { transform: translateY(10px) rotate(calc(var(--mp-r, 0deg) - 8deg)); } to { transform: translateY(-10px) rotate(calc(var(--mp-r, 0deg) + 8deg)); } } .sec-testi__bfly { --mp-bfly-o: 0.9; } /* Grund-Opacity aus sections.css erhalten */ .sec-testi__bfly--1 { --mp-r: -14deg; } .sec-testi__bfly--2 { --mp-r: 12deg; } /* -------------------------------------------------------------------------- 6 · ADRENALIN BREAKTHROUGH — kurzes Wackeln beim ersten Einscrollen, Klasse wird nach animationend wieder entfernt (danach Ruhe). -------------------------------------------------------------------------- */ .mp-shake { animation: mp-shake 0.55s ease-in-out both; } @keyframes mp-shake { 0%, 100% { transform: translate(0, 0) rotate(0deg); } 15% { transform: translate(-3px, 1px) rotate(-0.8deg); } 30% { transform: translate(3px, -1px) rotate(0.8deg); } 45% { transform: translate(-3px, 0) rotate(-0.6deg); } 60% { transform: translate(3px, 1px) rotate(0.6deg); } 80% { transform: translate(-2px, 0) rotate(-0.3deg); } } /* -------------------------------------------------------------------------- 7 · HERO-PREIS-BADGE — poppt beim Laden ein (Bounce), floatet danach. Float startet exakt am Pop-Ende (Delay = Pop-Dauer), beide enden/starten auf transform-Neutral → kein Sprung an der Naht. -------------------------------------------------------------------------- */ body.mp-motion .mf-herox__badge.mp-badge { animation: mp-badge-pop 0.75s cubic-bezier(0.34, 1.56, 0.64, 1) both, mp-badge-float 5s ease-in-out 0.75s infinite; will-change: transform; } @keyframes mp-badge-pop { 0% { transform: scale(0.6); opacity: 0; } 65% { transform: scale(1.07); opacity: 1; } 100% { transform: scale(1); opacity: 1; } } @keyframes mp-badge-float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-6px); } } /* -------------------------------------------------------------------------- 8 · CTA-PULS (nur mobil ≤900px) — ersetzt dort den harten 1.7s-Puls aus sections.css (mf-ticketcta-pulse) durch die ruhigere 3.2s-Fassung. Spezifität (0,3,0) schlägt die (0,1,0)-Regel unabhängig von der Ladereihenfolge. Glow als Opacity-Puls auf dem ::after (Composite statt box-shadow-Repaint), statischer Grundschatten bleibt erhalten. -------------------------------------------------------------------------- */ @media (max-width: 900px) { body.mp-motion .mf-ticket .mf-ticket__cta { position: relative; box-shadow: 0 6px 18px rgba(0, 0, 0, 0.28); animation: mp-cta-soft 3.2s ease-in-out infinite; } body.mp-motion .mf-ticket .mf-ticket__cta::after { content: ''; position: absolute; inset: 0; border-radius: inherit; box-shadow: 0 0 24px 4px rgba(251, 194, 1, 0.5); opacity: 0; pointer-events: none; animation: mp-cta-glow 3.2s ease-in-out infinite; } } @keyframes mp-cta-soft { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.02); } } @keyframes mp-cta-glow { 0%, 100% { opacity: 0; } 50% { opacity: 0.85; } } /* -------------------------------------------------------------------------- 9 · STREICHPREIS-DRAW (generisch) — .mf-ticket__strike hat schon seine eigene V4.1-Mechanik (mobil zeichnend, Desktop bewusst statisch, Jonas- Review 07.07.) und bleibt unangetastet. Das hier greift für künftige //.mf-strikedraw-Preise; currentColor übernimmt die Textfarbe. -------------------------------------------------------------------------- */ .mp-strike { text-decoration: none; position: relative; } .mp-strike::after { content: ''; position: absolute; left: 0; top: 50%; height: 2px; width: 0; background: currentColor; transform: translateY(-50%) rotate(-4deg); transition: width 0.45s ease-out 0.15s; } .mp-strike.mp-in::after { width: 100%; } /* -------------------------------------------------------------------------- 10 · TESTIMONIAL-STAGGER — Video- und Review-Karten ohne eigenes data-reveal erscheinen nacheinander (Delay staffelt das JS, 120ms). -------------------------------------------------------------------------- */ .mp-stag { opacity: 0; transform: translateY(22px); transition: opacity 0.55s ease-out, transform 0.6s var(--mf-ease, cubic-bezier(0.22, 0.61, 0.36, 1)); } .mp-stag.mp-in { opacity: 1; transform: none; } /* -------------------------------------------------------------------------- 11 · EXIT-POPUP-BALKEN — Markup baut ein anderer Agent; hier nur Optik + Animation. Der Fill startet mit seiner Inline-width (Endzustand ohne JS); motion-plus.js nullt ihn beim Erscheinen des Popups und animiert via .mp-bar-animate zurück aufs Ziel. -------------------------------------------------------------------------- */ .mf-modal__bar { height: 10px; border-radius: 999px; background: rgba(255, 255, 255, 0.12); overflow: hidden; margin: 14px auto 6px; max-width: 320px; } .mf-modal__bar-fill { height: 100%; border-radius: 999px; background: linear-gradient(90deg, rgb(189, 148, 106), rgb(245, 205, 72), rgb(251, 194, 1)); box-shadow: 0 0 10px rgba(245, 205, 72, 0.5); } .mf-modal__bar-fill.mp-bar-animate { transition: width 1s var(--mf-ease, cubic-bezier(0.22, 0.61, 0.36, 1)) 0.25s; } .mf-modal__bar-label { font-size: 13px; color: rgba(255, 255, 255, 0.85); margin: 0 0 4px; } /* -------------------------------------------------------------------------- Reduced-Motion-Sicherheitsnetz — motion-plus.js vergibt bei reduced-motion gar keine Klassen; dieser Block fängt zusätzlich den Fall, dass der User die OS-Einstellung MITTEN in der Session umschaltet: alles sofort in den Endzustand, Dauer-Animationen aus. -------------------------------------------------------------------------- */ @media (prefers-reduced-motion: reduce) { .mp-bar, .mf-modal__bar-fill.mp-bar-animate, u.mp-u, .mf-herox__check.mp-pop, .mf-value figcaption.mp-val, .mp-strike::after, .mp-stag, img.mp-bfly { transition: none !important; animation: none !important; } body.mp-motion .mf-herox__badge.mp-badge, body.mp-motion .mf-ticket .mf-ticket__cta, body.mp-motion .mf-ticket .mf-ticket__cta::after, .mp-shake { animation: none !important; } u.mp-u { background-size: 100% 2px; } .mf-herox__check.mp-pop, .mf-value figcaption.mp-val, .mp-stag { opacity: 1; transform: none; } img.mp-bfly { opacity: var(--mp-bfly-o, 1); } .mp-strike.mp-in::after { width: 100%; } }