/* ============================================================================ SSR FX — ein Interaktions-Standard fuer ALLE Module (BBE-STD-FX-001) ---------------------------------------------------------------------------- Fuenf Schalter, ueberall dieselben. Jeder gilt auf drei Ebenen, die von aussen nach innen gewinnen: 1. Seite (aus dem CMS) 2. Abschnitt/Modul class="fx-hover-off" (aus dem CMS je Modul) 3. Nutzer prefers-reduced-motion (schlaegt immer alles) Schalter: hover · transition · animation · motion · reveal Dazu die Scroll-Richtung: reveal-scroll = both | forward | off Diese Datei definiert NUR Optik. Welcher Schalter auf welchem Modul steht, entscheidet ssr-fx.js aus der CMS-Konfiguration. ========================================================================== */ :root{ --fx-lift: -6px; /* wie weit ein Modul beim Hover steigt */ --fx-lift-sm: -4px; --fx-dur: .35s; --fx-ease: cubic-bezier(.16,1,.3,1); --fx-ring: color-mix(in srgb, var(--ssr-lime, #CFDD28) 55%, transparent); } @supports not (color: color-mix(in srgb, red 50%, transparent)){ :root{ --fx-ring: rgba(207,221,40,.55); } } /* ---------------------------------------------------------------- TRANSITION */ /* Grundlage fuer jeden Hover: ohne Transition springt es, mit ist es ruhig. */ html[data-fx-transition="on"] .fx-mod{ transition: transform var(--fx-dur) var(--fx-ease), box-shadow var(--fx-dur) var(--fx-ease), border-color var(--fx-dur) var(--fx-ease), background-color var(--fx-dur) var(--fx-ease); } html[data-fx-transition="off"] .fx-mod, .fx-transition-off, .fx-transition-off *{ transition: none !important; } /* ------------------------------------------------------------------- HOVER */ /* EIN Hover-Verhalten fuer jedes Modul — heben, Schatten vertiefen, Rand in Marken-Lime. Module, die schon einen eigenen Hover hatten, behalten ihn; .fx-mod ergaenzt nur, was fehlte. */ html[data-fx-hover="on"] .fx-mod:hover, html[data-fx-hover="on"] .fx-mod:focus-within{ transform: translateY(var(--fx-lift)); box-shadow: var(--shadow, 0 24px 64px rgba(23,24,25,.09)); border-color: var(--fx-ring); } /* flache Elemente (Listenzeilen, Bildunterschriften) heben weniger */ html[data-fx-hover="on"] .fx-mod-sm:hover, html[data-fx-hover="on"] .fx-mod-sm:focus-within{ transform: translateY(var(--fx-lift-sm)); } /* Medien: statt heben leicht heranholen — der Bildausschnitt lebt */ html[data-fx-hover="on"] .fx-mod-media{ overflow: hidden; } html[data-fx-hover="on"] .fx-mod-media img, html[data-fx-hover="on"] .fx-mod-media picture > img{ transition: transform .6s var(--fx-ease); } html[data-fx-hover="on"] .fx-mod-media:hover img{ transform: scale(1.04); } /* Modul-Ausnahme (CMS: dieses Modul ohne Hover) */ .fx-hover-off:hover, .fx-hover-off:focus-within{ transform: none !important; box-shadow: inherit; } .fx-hover-off:hover img{ transform: none !important; } /* Tastatur behaelt IMMER eine sichtbare Spur, auch wenn Hover aus ist */ .fx-mod:focus-visible, .fx-mod-sm:focus-visible{ outline: 3px solid var(--ssr-lime, #CFDD28); outline-offset: 3px; } /* --------------------------------------------------------------- ANIMATION */ /* Dauerlaeufer (floaty, swing, marquee, gridmove) — Zierde, kein Inhalt. */ html[data-fx-animation="off"] [class*="floaty"], html[data-fx-animation="off"] .stat.s1, html[data-fx-animation="off"] .stat.s2, html[data-fx-animation="off"] .crane-hook, html[data-fx-animation="off"] .prefab, html[data-fx-animation="off"] .hero-grid, html[data-fx-animation="off"] .marquee-track, html[data-fx-animation="off"] .fx-anim{ animation: none !important; } .fx-animation-off, .fx-animation-off *{ animation: none !important; } /* ------------------------------------------------------------------ MOTION */ /* Parallax und scroll-getriebene Verschiebung. */ html[data-fx-motion="off"] .par[data-par]{ transform: none !important; } .fx-motion-off, .fx-motion-off *{ transform: none !important; } /* ------------------------------------------------------------------ REVEAL */ /* Das Einblenden von Text und Modulen beim Scrollen. Die Sichtbarkeits-Wache aus index.html bleibt darueber: eingeblendet heisst immer sichtbar. */ html[data-fx-reveal="off"] [data-reveal], html[data-fx-reveal="off"] [data-stagger] > *{ opacity: 1 !important; transform: none !important; transition: none !important; } .fx-reveal-off, .fx-reveal-off [data-reveal], .fx-reveal-off[data-reveal]{ opacity: 1 !important; transform: none !important; } /* --------------------------------------------------- Nutzer schlaegt alles */ @media (prefers-reduced-motion: reduce){ html .fx-mod, html .fx-mod-sm{ transition: none !important; } html .fx-mod:hover, html .fx-mod-sm:hover{ transform: none !important; } html .fx-mod-media:hover img{ transform: none !important; } html [class*="floaty"], html .crane-hook, html .prefab, html .hero-grid, html .marquee-track{ animation: none !important; } }