/* ===================================================================== UTOPIA STORE — bewegter Hintergrund (Aurora, Sternenfeld, Retro-Ebene) Aus index.html extrahiert, damit alle Unterseiten denselben Look haben. Braucht im Markup:

direkt nach . ===================================================================== */ @keyframes aurora-move { 0% { transform: translate(-20%, -20%); } 50% { transform: translate(20%, 20%); } 100% { transform: translate(-20%, -20%); } } @keyframes drift-1 { from { transform: translate(0, 0); } to { transform: translate(100px, -150px); } } @keyframes drift-2 { from { transform: translate(0, 0); } to { transform: translate(-150px, 100px); } } @keyframes galaxy-rotate { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } } html::after { content: ''; position: fixed; top: -50%; left: -50%; width: 200%; height: 200%; background: radial-gradient(circle at center, rgba(0, 255, 130, 0.08) 0%, rgba(0, 200, 255, 0.03) 40%, transparent 70%); z-index: -10; pointer-events: none; animation: aurora-move 15s ease-in-out infinite alternate; } body::before { content: ' '; position: fixed; top: -10%; left: -10%; width: 1px; height: 1px; background: transparent; z-index: -5; opacity: 0.9; pointer-events: none; box-shadow: 124px 543px #FFF, 1800px 200px #FFF, 400px 1200px #FFF, 873px 56px #FFF, 150px 800px #FFF, 900px 100px #FFF, 1600px 400px #FFF, 1100px 900px #FFF, 50px 1500px #FFF, 1300px 600px #FFF, 600px 1400px #FFF, 300px 300px #FFF, 1700px 1100px #FFF, 750px 750px #FFF, 200px 1800px #FFF, 1400px 1300px #FFF, 1000px 1600px #FFF, 500px 500px #FFF, 1900px 50px #FFF, 250px 950px #FFF, 1200px 150px #FFF, 550px 1750px #FFF, 1650px 850px #FFF, 800px 250px #FFF; animation: drift-1 60s linear infinite alternate; } body::after { content: ' '; position: fixed; top: -10%; left: -10%; width: 2px; height: 2px; background: transparent; z-index: -4; opacity: 0.7; pointer-events: none; box-shadow: 300px 400px #FFF, 1500px 1200px #FFF, 600px 800px #FFF, 1100px 200px #FFF, 100px 1600px #FFF, 1800px 500px #FFF, 900px 1300px #FFF, 1300px 50px #FFF, 500px 1000px #FFF, 1600px 1700px #FFF, 200px 600px #FFF, 1400px 900px #FFF; animation: drift-2 90s linear infinite alternate; } #retro-layer { position: fixed; top: -150%; left: -150%; width: 400%; height: 400%; pointer-events: none; z-index: -3; opacity: 0.25; background-image: url('data:image/svg+xml,%3Csvg width=%221400%22 height=%221400%22 viewBox=%220 0 1400 1400%22 xmlns=%22http://www.w3.org/2000/svg%22%3E%3Cstyle%3E.wire{fill:none;stroke:white;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round;opacity:0.9}.dot{fill:white;opacity:1}%3C/style%3E%3Cg transform=%22translate(200,200) rotate(-15)%22%3E%3Crect x=%220%22 y=%220%22 width=%2250%22 height=%2280%22 rx=%222%22 class=%22wire%22/%3E%3Crect x=%225%22 y=%225%22 width=%2240%22 height=%2230%22 class=%22wire%22/%3E%3Ccircle cx=%2235%22 cy=%2260%22 r=%222.5%22 class=%22dot%22/%3E%3Ccircle cx=%2215%22 cy=%2260%22 r=%222.5%22 class=%22dot%22/%3E%3Cpolyline points=%2210,50 10,70%22 class=%22wire%22/%3E%3Cpolyline points=%220,60 20,60%22 class=%22wire%22/%3E%3C/g%3E%3Cg transform=%22translate(1000,300) rotate(10)%22%3E%3Crect x=%220%22 y=%220%22 width=%2290%22 height=%2235%22 class=%22wire%22/%3E%3Crect x=%2210%22 y=%2210%22 width=%2215%22 height=%2215%22 class=%22wire%22/%3E%3Ccircle cx=%2260%22 cy=%2217%22 r=%224%22 class=%22dot%22/%3E%3Ccircle cx=%2275%22 cy=%2217%22 r=%224%22 class=%22dot%22/%3E%3C/g%3E%3Cg transform=%22translate(600,800)%22%3E%3Cpath class=%22wire%22 d=%22M0,0 L10,0 L10,-10 L20,-10 L20,0 L30,0 L30,-10 L40,-10 L40,0 L50,0 L50,10 L60,10 L60,30 L50,30 L50,40 L40,40 L40,30 L30,30 L20,30 L20,40 L10,40 L10,30 L0,30 L0,10 L10,10 L10,0 Z%22/%3E%3Ccircle cx=%2215%22 cy=%2210%22 r=%222%22 class=%22dot%22/%3E%3Ccircle cx=%2235%22 cy=%2210%22 r=%222%22 class=%22dot%22/%3E%3C/g%3E%3Cg transform=%22translate(300,1100) rotate(20)%22%3E%3Cpath class=%22wire%22 d=%22M0,40 L0,20 Q0,0 25,0 Q50,0 50,20 L50,40 L40,30 L30,40 L20,30 L10,40 Z%22/%3E%3Ccircle cx=%2215%22 cy=%2215%22 r=%223%22 class=%22dot%22/%3E%3Ccircle cx=%2235%22 cy=%2215%22 r=%223%22 class=%22dot%22/%3E%3C/g%3E%3Cg transform=%22translate(1100,1000) rotate(-45)%22%3E%3Cpolyline points=%220,0 30,0 30,-30 60,-30 60,0 90,0 90,30 0,30 0,0%22 class=%22wire%22/%3E%3C/g%3E%3Cg transform=%22translate(150,700) rotate(45)%22%3E%3Cpath class=%22wire%22 d=%22M15,50 L15,10 L25,0 L35,10 L35,50%22 /%3E%3Cpath class=%22wire%22 d=%22M5,50 L45,50 L45,55 L25,60 L5,55 Z%22 /%3E%3Crect x=%2220%22 y=%2260%22 width=%2210%22 height=%2220%22 class=%22wire%22/%3E%3Ccircle cx=%2225%22 cy=%2255%22 r=%222%22 class=%22dot%22/%3E%3C/g%3E%3C/svg%3E'); background-size: 1400px 1400px; background-repeat: repeat; animation: galaxy-rotate 600s linear infinite; } /* Auf sehr breiten Schirmen abschalten — dort kostet es mehr, als es bringt */ @media screen and (min-width: 2000px) { html::after, body::before, body::after, #retro-layer { display: none !important; } } /* Bewegungsempfindliche Nutzer: Animationen aus, Farbverlauf bleibt */ @media (prefers-reduced-motion: reduce) { html::after, body::before, body::after, #retro-layer { animation: none !important; } } /* ===================================================================== HINTERGRUND AUF MOBILGERAETEN --------------------------------------------------------------------- Der Hintergrund ist AN. Die urspruengliche Ruckel-Ursache lag nicht hier, sondern bei den Impressionen-Bildern (5,22 MB, inzwischen auf 0,9 MB fuer Mobilgeraete reduziert). FALLS ES AUF DEM HANDY DOCH HAKT: Den folgenden Block einkommentieren. Er schaltet die teuerste Ebene ab - #retro-layer ist eine fixierte Flaeche von 400% x 400% der Fenstergroesse, die dauerhaft rotiert und damit die mit Abstand meiste Rechenzeit kostet. Aurora und Sternenfeld bleiben dabei erhalten, der Look aendert sich also nur wenig. @media screen and (max-width: 900px) { #retro-layer { display: none !important; } } Reicht das nicht, zusaetzlich diesen Block einkommentieren - dann ist der bewegte Hintergrund mobil komplett aus: @media screen and (max-width: 900px) { html::after, body::before, body::after, footer.site-footer::before { display: none !important; animation: none !important; } } ===================================================================== */