/* --- Linsenband: Grundstyling. Hoehe und Rahmen kannst du frei anpassen. --- */ .lensband { position: relative; width: 100%; height: clamp(200px, 30vw, 440px); overflow: hidden; --lb-vignette-light: 0; } /* Vignette-Richtung automatisch an den Light/Dark-Mode der Seite koppeln: 0 = Rand wird dunkler (Standard/Dark Mode), 1 = Rand wird transparenter und laesst den (hellen) Seitenhintergrund durchscheinen. Greift ueber das data-theme-Attribut am -Element; falls keins gesetzt ist, uebernimmt ersatzweise die System-Farbschema-Praeferenz des Browsers. */ html[data-theme="light"] .lensband { --lb-vignette-light: 1; } html[data-theme="dark"] .lensband { --lb-vignette-light: 0; } @media (prefers-color-scheme: light) { html:not([data-theme]) .lensband { --lb-vignette-light: 1; } } @media (prefers-color-scheme: dark) { html:not([data-theme]) .lensband { --lb-vignette-light: 0; } } .lensband.lb-on { cursor: grab; } .lensband.lb-drag { cursor: grabbing; } .lensband .lb-canvas { position: absolute; inset: 0; display: block; width: 100%; height: 100%; opacity: 0; transition: opacity .6s ease; } .lensband.lb-ready .lb-canvas { opacity: 1; } /* Fallback ohne WebGL: schlichtes Endlosband ohne Verzerrung */ .lensband.lb-css { display: flex; align-items: center; } .lensband.lb-css .lb-css-track { display: flex; align-items: center; height: 80%; animation: lb-marquee linear infinite; will-change: transform; } .lensband.lb-css .lb-css-track img { height: 100%; width: auto; display: block; } @keyframes lb-marquee { from { transform: translate3d(0,0,0); } to { transform: translate3d(-50%,0,0); } } @media (prefers-reduced-motion: reduce) { .lensband.lb-css .lb-css-track { animation: none; } } /* Hinweis im Elementor-Editor / Frontend, wenn noch keine Bilder gewaehlt sind */ .lensband-empty { display: flex; align-items: center; justify-content: center; min-height: 120px; padding: 20px; border: 1px dashed #b9c2c0; border-radius: 4px; background: #f4f6f5; color: #5c6b69; font: 500 13px/1.5 -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; text-align: center; }