/* ============================================================ Animierter Mesh-Gradient — nur CSS, kein JavaScript uxexpert.de · Judith Biedenkapp WAS DAS IST Drei weiche Farbflächen driften langsam hinter dem Hero. Animiert wird ausschließlich `transform` und damit auf der GPU, kein Repaint, kein Reflow. Respektiert prefers-reduced-motion. ANGEPASST gegenüber der Vorlage: Diese Fassung liegt NUR hinter dem Hero, nicht hinter der ganzen Seite. Sie wird deshalb absolut im .hero-Container positioniert (der bringt `position: relative` und `overflow: hidden` schon mit) statt fix im Viewport. FARBEN Über die Tokens --mesh-1/2/3 aus css/tokens/colors.css. Dort gibt es je einen hellen und einen dunklen Satz, der Dunkelmodus schaltet automatisch mit um. EINBAU 1) im nach den anderen CSS-Dateien verlinken: 2) als erstes Kind von
einfügen: ============================================================ */ /* Der Container, in dem der Mesh liegt, muss ihn eingrenzen. */ .has-mesh { position: relative; overflow: hidden; } .has-mesh > .wrap { position: relative; z-index: 1; } .mesh-bg { position: absolute; inset: 0; z-index: 0; overflow: hidden; pointer-events: none; } /* Gespiegelte Fassung: gleiche Bewegung, andere Komposition. Verhindert, dass zwei Abschnitte mit Mesh wie eine Kopie voneinander aussehen. */ .mesh-bg--mirrored { transform: scaleX(-1); } .mesh-bg::before, .mesh-bg::after, .mesh-bg .mesh-blob { content: ""; position: absolute; width: 62vmax; height: 62vmax; border-radius: 50%; will-change: transform; } .mesh-bg::before { top: -30%; left: -14%; background: radial-gradient(circle, var(--mesh-1) 0%, transparent 70%); animation: mesh-drift-a 8s ease-in-out infinite alternate; } .mesh-bg .mesh-blob { top: 12%; right: -18%; background: radial-gradient(circle, var(--mesh-2) 0%, transparent 70%); animation: mesh-drift-b 7s ease-in-out infinite alternate; } .mesh-bg::after { bottom: -34%; left: 20%; background: radial-gradient(circle, var(--mesh-3) 0%, transparent 70%); animation: mesh-drift-c 9s ease-in-out infinite alternate; } @keyframes mesh-drift-a { from { transform: translate(0, 0) scale(1); } to { transform: translate(6vw, 8vh) scale(1.15); } } @keyframes mesh-drift-b { from { transform: translate(0, 0) scale(1); } to { transform: translate(-8vw, 5vh) scale(1.1); } } @keyframes mesh-drift-c { from { transform: translate(0, 0) scale(1); } to { transform: translate(5vw, -6vh) scale(1.08); } } /* Bewegung aus, Farben bleiben — für Menschen, die reduzierte Bewegung eingestellt haben (Vestibularbeschwerden, Migräne). */ @media (prefers-reduced-motion: reduce) { .mesh-bg::before, .mesh-bg::after, .mesh-bg .mesh-blob { animation: none; } }