/* ==========================================================================
   7SPIRIT Motion – Animationsstile (Plugin „7spirit-motion“, zusammen mit motion.js)

   Klassen-API (Elementor Free → Erweitert → CSS-Klassen):
     s7-reveal [s7-reveal--left|--right|--scale]   Einblenden beim Scrollen
     s7-delay-1 … s7-delay-7                          Verzögerung in Stufen (110 ms)
     s7-stagger                                       direkte Kinder nacheinander einblenden
     s7-line                                          Akzentlinie unter der Überschrift zeichnet sich ein
     s7-spot                                          Lichtreflex folgt dem Mauszeiger (nur Maus/Trackpad)
     s7-parallax                                      Hintergrundbild bewegt sich dezent beim Scrollen
     s7-glow / s7-float / s7-float--slow              ruhige Hintergrundbewegung (Deko)
     s7-timeline                                      Fortschrittslinie füllt sich, Schritte leuchten nacheinander auf
     s7-ticker                                        Werte-Band läuft als Endlosband (Pause bei Hover/Fokus)

   Grundsatz: Ohne JavaScript, bei „Bewegung reduzieren“ und im Elementor-Editor ist alles sofort sichtbar.
   Versteckt wird nur unter html.s7-motion.
   ========================================================================== */
:root { --s7-m-ease: cubic-bezier(0.22, 1, 0.36, 1); --s7-m-dist: 34px; --s7-m-dur: 0.9s; }

/* --- Einblenden --- */
.s7-motion .s7-reveal { opacity: 0; transform: translate3d(0, var(--s7-m-dist), 0); transition: opacity var(--s7-m-dur) var(--s7-m-ease), transform var(--s7-m-dur) var(--s7-m-ease); transition-delay: calc(var(--s7-d, 0) * 110ms); }
.s7-motion .s7-reveal--left { transform: translate3d(calc(var(--s7-m-dist) * -1.5), 0, 0); }
.s7-motion .s7-reveal--right { transform: translate3d(calc(var(--s7-m-dist) * 1.5), 0, 0); }
.s7-motion .s7-reveal--scale { transform: scale(0.94); }
.s7-motion .s7-reveal.is-in { opacity: 1; transform: none; }
.s7-delay-1 { --s7-d: 1; } .s7-delay-2 { --s7-d: 2; } .s7-delay-3 { --s7-d: 3; } .s7-delay-4 { --s7-d: 4; }
.s7-delay-5 { --s7-d: 5; } .s7-delay-6 { --s7-d: 6; } .s7-delay-7 { --s7-d: 7; }

.s7-motion .s7-stagger > * { opacity: 0; transform: translate3d(0, 26px, 0); transition: opacity 0.8s var(--s7-m-ease), transform 0.8s var(--s7-m-ease); transition-delay: calc(var(--i, 0) * 90ms + 60ms); }
.s7-motion .s7-stagger.is-in > * { opacity: 1; transform: none; }
/* Karten in einem gestaffelten Raster behalten ihren eigenen Hover-Übergang, sobald sie sichtbar sind */
.s7-motion .s7-stagger.is-in > .s7-card { transition: opacity 0.8s var(--s7-m-ease), transform 0.45s var(--s7-m-ease), border-color 0.35s, box-shadow 0.45s; transition-delay: calc(var(--i, 0) * 90ms + 60ms), 0s, 0s, 0s; }
.s7-motion .s7-stagger.is-done > .s7-card { transition-delay: 0s; }

/* --- Akzentlinie unter Überschriften --- */
.s7-motion .s7-line .elementor-heading-title::after { transform: scaleX(0); transition: transform 1.1s var(--s7-m-ease) 0.35s; }
.s7-motion .s7-line.is-in .elementor-heading-title::after { transform: scaleX(1); }

/* --- Lichtreflex auf Karten --- */
/* nur über das Hintergrundbild – ::before/::after gehören den Karten selbst (Kantenlinie, Nummer) */
.s7-spot.is-spot { background-image: radial-gradient(520px circle at var(--mx, 50%) var(--my, 0%), rgba(240, 124, 0, 0.12), transparent 42%), linear-gradient(160deg, var(--s7-graphite, #1d2024), var(--s7-anthracite, #15171a) 60%); }
.s7-partner-card.s7-spot.is-spot { background-image: radial-gradient(520px circle at var(--mx, 50%) var(--my, 0%), rgba(240, 124, 0, 0.14), transparent 42%), linear-gradient(170deg, var(--s7-graphite, #1d2024), var(--s7-ink, #0d0e10) 70%); }

/* --- Deko-Bewegung --- */
@keyframes s7-drift { 0% { transform: translate3d(0, 0, 0) scale(1); } 50% { transform: translate3d(-4vmax, 3vmax, 0) scale(1.08); } 100% { transform: translate3d(0, 0, 0) scale(1); } }
@keyframes s7-float { 0% { transform: translate3d(0, 0, 0) rotate(0deg); } 50% { transform: translate3d(0, -14px, 0) rotate(6deg); } 100% { transform: translate3d(0, 0, 0) rotate(0deg); } }
@keyframes s7-draw { from { transform: rotate(-24deg) scaleX(0); opacity: 0; } to { transform: rotate(-24deg) scaleX(1); } }
@keyframes s7-paint { from { transform: rotate(-7deg) scaleX(0); } to { transform: rotate(-7deg) scaleX(1); } }
.s7-motion .s7-glow { animation: s7-drift 16s ease-in-out infinite; }
.s7-motion .s7-float { animation: s7-float 12s ease-in-out infinite; transform-origin: 50% 50%; }
.s7-motion .s7-float--slow { animation-duration: 18s; animation-delay: -6s; }
.s7-motion .s7-fx__scratch { animation: s7-draw 1.4s var(--s7-m-ease) both; }
.s7-motion .s7-fx__scratch--2 { animation-delay: 0.35s; }
.s7-motion .s7-fx__scratch--3 { animation-delay: 0.6s; }
.s7-motion .s7-fx__paint { animation: s7-paint 1.6s var(--s7-m-ease) both 0.3s; }
.s7-motion .s7-fx__paint--2 { animation-delay: 0.7s; }

/* --- Timeline --- */
.s7-motion .s7-timeline .s7-timeline__fill { transform: scaleX(0); transition: transform 1.8s var(--s7-m-ease) 0.2s; }
.s7-motion .s7-timeline.is-in .s7-timeline__fill { transform: scaleX(1); }
@media (max-width: 767px) {
  .s7-motion .s7-timeline .s7-timeline__fill { transform: scaleY(0); }
  .s7-motion .s7-timeline.is-in .s7-timeline__fill { transform: scaleY(1); }
}
.s7-motion .s7-timeline .s7-step .elementor-icon { transition: color 0.35s, transform 0.5s var(--s7-m-ease); }
.s7-motion .s7-timeline.is-in .s7-step .elementor-icon { animation: s7-pop 0.7s var(--s7-m-ease) both; animation-delay: calc(var(--s7-d, 0) * 110ms + 0.3s); }
@keyframes s7-pop { 0% { transform: scale(0.7); } 60% { transform: scale(1.08); } 100% { transform: scale(1); } }

/* --- Werte-Band als Endlosband --- */
.s7-ticker.is-marquee { overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent); mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent); }
.s7-ticker.is-marquee ul { flex-wrap: nowrap !important; justify-content: flex-start !important; width: max-content; animation: s7-marquee var(--s7-marquee-dur, 38s) linear infinite; }
.s7-ticker.is-marquee li:last-child::after { display: block !important; }
.s7-ticker.is-marquee:hover ul, .s7-ticker.is-marquee:focus-within ul { animation-play-state: paused; }
@keyframes s7-marquee { from { transform: translate3d(0, 0, 0); } to { transform: translate3d(-50%, 0, 0); } }

/* --- Abschalten --- */
.s7-motion-off .s7-reveal, .s7-motion-off .s7-stagger > * { opacity: 1 !important; transform: none !important; }
@media (prefers-reduced-motion: reduce) {
  .s7-glow, .s7-float, .s7-fx__scratch, .s7-fx__paint, .s7-ticker ul, .s7-timeline .elementor-icon { animation: none !important; }
  .s7-reveal, .s7-stagger > * { opacity: 1 !important; transform: none !important; transition: none !important; }
}