/* CIS Leads – schwebender Button für EIGENE Seiten (Elementor & Co.). Bewusst eigenständig und ohne vererbte Variablen: Der Button hängt am und liegt damit außerhalb jedes Theme-Containers. Farben kommen inline aus dem Backend (--cisl-sticky-bg / --cisl-sticky-fg). DURCHGÄNGIG doppelter Klassen-Selektor (Spezifität 0,2,0): Themes und Elementor färben Links über Regeln wie `.elementor-kit-5 a` (0,1,1). Ein einfacher `.cisl-sticky` (0,1,0) verlöre dagegen – die Schrift wäre dann in der Theme-Farbe und auf dem farbigen Button unlesbar. Die doppelte Klasse muss deshalb in ALLEN Regeln stehen, sonst kippt der Rest (Einblenden, Handy-Ansicht) gegen die Basisregel. */ .cisl-sticky.cisl-sticky { position: fixed; left: 50%; bottom: 22px; transform: translate( -50%, 160% ); z-index: 2147483000; display: inline-flex; align-items: center; gap: 0.4em; overflow: hidden; /* Solide Farbe zuerst, Verlauf danach – Browser ohne color-mix bleiben solide. */ background: var( --cisl-sticky-bg, #d6b76b ); background: linear-gradient( 135deg, var( --cisl-sticky-bg, #d6b76b ), color-mix( in srgb, var( --cisl-sticky-bg, #d6b76b ) 80%, #000 ) ); color: var( --cisl-sticky-fg, #06182b ); font-family: -apple-system, "Segoe UI", Roboto, Arial, sans-serif; font-weight: 700; font-size: 1.05rem; line-height: 1; text-decoration: none; padding: 15px 34px; border-radius: 12px; box-shadow: 0 14px 34px rgba( 0, 0, 0, 0.28 ), 0 8px 22px color-mix( in srgb, var( --cisl-sticky-bg, #d6b76b ) 34%, transparent ); transition: transform 0.4s cubic-bezier( 0.2, 0.7, 0.2, 1 ), box-shadow 0.25s ease; } .cisl-sticky.cisl-sticky.show { transform: translate( -50%, 0 ); } /* Textfarbe in allen Zuständen halten – sonst färbt das Theme den Link. */ .cisl-sticky.cisl-sticky:hover, .cisl-sticky.cisl-sticky:focus, .cisl-sticky.cisl-sticky:active, .cisl-sticky.cisl-sticky:visited { color: var( --cisl-sticky-fg, #06182b ); text-decoration: none; } .cisl-sticky.cisl-sticky:hover, .cisl-sticky.cisl-sticky:focus { box-shadow: 0 18px 42px rgba( 0, 0, 0, 0.32 ), 0 12px 28px color-mix( in srgb, var( --cisl-sticky-bg, #d6b76b ) 44%, transparent ); } /* Glanz-Sweep wie bei den übrigen Buttons. */ .cisl-sticky.cisl-sticky::after { content: ""; position: absolute; top: 0; left: -120%; width: 60%; height: 100%; background: linear-gradient( 100deg, transparent, rgba( 255, 255, 255, 0.5 ), transparent ); transform: skewX( -20deg ); transition: left 0.6s ease; pointer-events: none; } .cisl-sticky.cisl-sticky:hover::after, .cisl-sticky.cisl-sticky:focus::after { left: 130%; } /* Auf dem Handy über die volle Breite – dort zählt der Daumenweg. */ @media ( max-width: 480px ) { .cisl-sticky.cisl-sticky { left: 16px; right: 16px; justify-content: center; transform: translateY( 160% ); } .cisl-sticky.cisl-sticky.show { transform: translateY( 0 ); } } @media ( prefers-reduced-motion: reduce ) { .cisl-sticky.cisl-sticky { transition: none; } }