@casoon/dragonfly
Version:
Modular, lightweight CSS framework and design system for modern web projects. Optimized for Astro JS, LightningCSS and Container Queries with @layer-based architecture and comprehensive accessibility.
1 lines • 260 kB
Source Map (JSON)
{"version":3,"sourceRoot":null,"mappings":"AAQA,kBACE,4BAIA,oIAYA,kFAQA,4EAQA,oHAQA,sFAQA,4FAQA,kGAyFA,2CAKA,yKAUA,mCAKA,kCAKA,sMAWA,kDAKA,mDAKA,mDAKA,mDAmFA,yCAKA,uNAiBA,mDAIA,4EASA,0EASA,sGA4FA,8CAKA,2MAcA,mIASA,qIASA,+HASA,qEAuZA,8CAKA,gNAcA,8CAKA,iNAeA,iDAKA,iMAYA,2DA+BA,6HAKA,wFAIA,6CAIA,oFAIA,4JAKA,gMAOA,4HAiCA,0LAOA,yKAOA,yNAOA,+NAQA,mNAQA,kLASA,oOASA,mNAQA,8KAMA,0EAKA,sDAIA,mEAIA,iEAKA,mEAKA,iEAKA,+DAKA,iEAKA,8DAySA,uYAaA,2JASA,qZAYA,kaAYA,wQAOA,wUAiBA,4ZAWA,mUAMA,sZASA,yKASA,qSAOA,ohBAeA,iUAOA,0gBAgBA,sUAMA,yUAcA,kDAIA,oDAIA,mDAKA,2FAMA,iHAMA,6FA0DA,gPAQA,kQASA,kNAOA,kUAQA,8BAIA,qWAOA,8TAOA,+BAIA,4OAQA,qKAMA,0KAMA,qKAMA,6JAMA,qKAMA,yJAOA,iOAOA,8EAIA,gHA6IA,sGAQA,iHAQA,gHAQA,wHAQA,+GAQA,2MAWA,+IASA,qDAIA,4IAUA,iKAUA,uDAIA,kIAKA,wIAKA,kIAKA,4HAKA,kIAKA,yHA2IA,8EAKA,qEAKA,kDAIA,+DAKA,4CAIA,+DAKA,4CAIA,8DAKA,2CAIA,8DAKA,yCAIA,gHAUA,wCAIA,yDAKA,gDAIA,iEAKA,8FAIA,8DAKA,2CAIA,oDAIA,qCAIA,sCAIA,gCAIA,oCAIA,0CAIA,mCAIA,uCAIA,yCAIA,6CAIA,+CAIA,mDA6FA,6CAKA,2RAWA,qCAKA,yHAQA,kCAIA,qSAWA,yFAMA,iIAOA,2UAYA,uTAaA,gJAQA,4IASA,kQAeA,8CAIA,4CAIA,4CAIA,4CAIA,8CAKA,+JAOA,mJAOA,iJAkEA,yCAKA,kVAeA,kCAKA,mFAMA,uFAMA,6XAgBA,+BAIA,ibAkBA,iGAMA,0EAOA,6QAWA,4OAYA,6LASA,0LAUA,uDAKA,yDAKA,sDAKA,gEAKA,oEAKA,sEAKA,0EAyFA,wCAKA,oNAYA,uBAIA,mGAOA,6BAIA,8NAYA,2EAKA,2GAMA,6PAYA,iQAaA,kHAQA,kHASA,8MAeA,kCAIA,oCAIA,qCAKA,2OAiFA,+GASA,+RAYA,mEAIA,yKAMA,6EAKA,mUAaA,4HAOA,8HAOA,kRAeA,wEAIA,uEAIA,8DAIA,kEAIA,uUAYA,2WAaA,4CAIA,4CAIA,8CAIA,4CAIA,6CA8EA,6CAKA,kNAWA,kEAIA,0GAMA,4FAMA,qGAKA,kGAKA,kDAKA,gOAWA,uEAIA,oHAMA,sGAMA,+GAKA,4GAKA,mDAKA,2NAUA,wEAIA,yGAMA,sGAMA,iHAKA,8GAKA,4GAKA,kHAKA,4GAKA,sGAKA,4GAKA,mGAoFA,kFAMA,iLAWA,yFAMA,wFAMA,wFAOA,waAoBA,gGAOA,4IAOA,sKAaA,oEAKA,qEAKA,sEAKA,oEAKA,sEA8EA,4CAKA,uPAYA,mDAIA,qIAOA,sFAMA,sFAMA,mGAKA,+FAMA,iCAIA,iQAYA,oHAKA,uJAOA,0CAIA,0CAIA,2CAIA,oDAIA,mDAIA,kEAIA,iEAgFA,6CAKA,+KAUA,+JAQA,iKASA,wIAQA,2HAQA,2IAMA,iJAMA,+IAMA,mJAOA,oIAOA,qIAOA,sIAOA,qIAqEA,2CAKA,4QAaA,sCAKA,2FAOA,gCAIA,sRAaA,mGAMA,oGAOA,sGAMA,wFAOA,oGAKA,oGAMA,kGAMA,gGAMA,oGAMA,8FA+EA,wCAKA,uSAaA,+CAIA,wKAQA,uJAOA,iGAOA,2FAKA,wFAMA,sDAIA,yDAIA,wDAIA,2DAIA,0DAIA,6DAIA,4DAIA,+DAiEA,4CAKA,qPAYA,mFAMA,uJAQA,kCAIA,0JAUA,wIAMA,6IAMA,2IAMA,0IAOA,sFAMA,kIAOA,8IAWA,kEAKA,mEAKA,oJAkDA,2CAKA,uOAYA,0BAIA,2EAKA,gIAMA,wFAMA,0IAUA,8EAKA,mFAKA,uGAKA,6GAKA,uGAKA,iGAKA,uGAKA,8FA0CA,+CAKA,6NAWA,kFAKA,uCAKA,8FAMA,8FAMA,0JAUA,mHAKA,yHAKA,mHAKA,6GAKA,mHAKA,0GA0DA,+CAKA,wDAMA,kCAIA,kCAIA,qEAMA,iCAIA,iCAIA,qDAKA,8DAMA,wCAIA,wCAIA,gEAIA,oEAIA,gEAIA,4DAIA,gEAIA,0DAgLA,gCAKA,iDAKA,gDAIA,gDAIA,oDAIA,sDAIA,oDAKA,gFAIA,+EAKA,8HAOA,6DAIA,iEAIA,kGAIA,iGAIA,+FAIA,8FAIA,0HAKA,uHAMA,6DAIA,yEAIA,2EAIA,+DAKA,2FAIA,wFAIA,2FAIA,2FAKA,+EAMA,8EAMA,mJAMA,gJAMA,6IAMA,4IAMA,iFAMA,qFAMA,uFAMA,2JAMA,yIAMA,uIAMA,kKAMA,gKAMA,yEAMA,wEAqHA,0CAKA,uUAgBA,iFAMA,2GAIA,6GAIA,wDAIA,wDAIA,0HAIA,8HAIA,0HAIA,sHAIA,0HAIA,oHAIA,kDAKA,kSAeA,2GAwDA,+CAIA,kEAIA,qEAIA,qEAIA,iEAIA,+DAIA,oDAIA,uEAIA,0EAIA,0EAIA,oDAIA,wDAIA,2DAIA,2DAIA,+CAIA,qDAIA,qDAIA,6DAIA,iEAIA,6DAIA,yDAIA,6DAIA,uDAuFA,uMAQA,0GAMA,qGAMA,gIAOA,iEAKA,mEAKA,gDAKA,kKASA,8FAMA,0IAMA,6JAQA,wHAQA,sDAIA,+CAIA,uMAUA,iDAIA,gDAIA,mDAKA,+LAeA,+OAOA,yPAOA,+OAOA,qOAOA,+OAOA,gOAk1DA,oOAWA,2FAKA,6FAKA,uEAKA,iCAIA,gCAIA,kDAKA,2CAIA,4CAIA,gCAIA,2CAIA,4CAIA,wDAKA,oDAIA,oDAIA,sHAQA,0CAKA,gEAKA,4DAMA,6BAIA,uCAIA,2HAMA,qFAKA,gGA2BA,2BAIA,mKASA,gDAIA,yGAQA,qGAKA,0GASA,4ZAMA,mHAQA,+GAQA,uHAQA,yHASA,mIAkWA,mDAIA,yDAIA,yDAIA,uHAKA,oDAIA,iDAIA,6FAKA,+DAIA,+DAIA,gDAIA,sDAIA,sDAIA,iHAKA,iFAIA,8FAIA,mDAIA,yDAIA,yDAoGA,sEAIA,4EAIA,4EAIA,uHAKA,oDAIA,iDAIA,6FAKA,+DAIA,+DAIA,gDAIA,sDAIA,sDAIA,iHAKA,iFAIA,8FAIA,iCAIA,2MAsmBA,qDAIA,2CAIA,kDAIA,mDAIA,mDAKA,2OAaA,sDAKA,+CAIA,+IASA,4DAIA,+GAOA,0CAmBA,sCAIA,yCAIA,yCAIA,4CAIA,yCAIA,2DAIA,oDAIA,4HAKA,uDAIA,uIAKA,uDAIA,oHAKA,qGAMA,yDAIA,wGAMA,0DAIA,wGAMA,4DAIA,sCAIA,mFAIA,yCAIA,wFAIA,yCAIA,2EAIA,4DAKA,+KAWA,qCAIA,kDAIA,+CAIA,0CAIA,iEAIA,uEAIA,uEAIA,4KAMA,oLAMA,4KAMA,oKAMA,4KAMA,gKA0DA,sCAIA,kGAKA,yCAIA,8GAKA,yCAIA,qGAKA,sCAIA,wIAKA,6FAKA,uFAKA,0CAIA,iEAIA,uEAIA,uEAIA,6KAMA,qLAMA,6KAMA,qKAMA,6KAMA,iKAiGA,gEAIA,sEAIA,sEAIA,iHAKA,kDAIA,+CAIA,uFAKA,2DAIA,2DAIA,4CAIA,kDAIA,kDAIA,2GAKA,6EAIA,0FA4BA,4FAOA,uCAIA,uCAIA,wGAOA,mDAIA,yDAIA,+GAOA,yDAIA,wEAIA,6FAOA,qDAIA,kDAIA,mHAOA,iEAIA,iEAIA,4GAOA,0DAIA,0DAuLA,uCAIA,yDAIA,0CAIA,4DAIA,0CAIA,4DAIA,qDAIA,oIAKA,wDAIA,oIAKA,wDAIA,qHAKA,sGAMA,2DAIA,yGAMA,8DAIA,yGAMA,gEAIA,uCAIA,wFAIA,0CAIA,yFAIA,0CAIA,sGAIA,6DAKA,8MAYA,uDAIA,mDAIA,gDAIA,2CAIA,oEAIA,0EAIA,0EAIA,mLAMA,2LAMA,mLAMA,2KAMA,mLAMA,wKAt4TF,uCACE,kBACE,gEAcJ,iBACE,uYAMA,sYAMA,sYAMA,gZAiQA,iGAIA,8JAIA,0KAIA,oKAIA,oKAIA,8HAIA,0GAIA,qDAqGA,0LAKA,iKAKA,sSAOA,gPAMA,gPAMA,sHAsEA,mYAMA,yXAMA,sYAMA,2bAOA,uXAMA,qXA4MA,gDACE,wIA0UF,2CAIA,uDAIA,8CAIA,0CAIA,6CAIA,6CAIA,mDAIA,yCAIA,yCAIA,qDAIA,0CAIA,0CAIA,4CAIA,+CAIA,gDAIA,+BAIA,oCAIA,oCAIA,mCAIA,sCAIA,sCAIA,sCAIA,yCAIA,yCAIA,6BAIA,kCAIA,kCAKA,4DAIA,mDAIA,oDAIA,iEAIA,yEAKA,oCAIA,wDAIA,6DAIA,2DAoCA,oFAIA,iFAIA,wEAIA,wFAIA,wMAOA,6FAIA,mGAIA,0FAIA,uHAMA,qJAaA,+CAIA,qDAIA,4CAIA,0VAibA,oGAQA,0GAQA,iGAQA,kJAeA,0EASA,2KAqMA,wCAIA,oCAIA,sCAIA,oCAIA,sCAIA,8CAIA,4CAIA,4CAIA,4CAIA,4CAIA,0CAIA,8BAIA,4CAIA,kCAIA,4CAIA,oCAIA,iCAIA,2BAqvFA,oHAMA,gIAMA,4HAMA,yLAMA,8HAMA,wHAMA,0HAMA,mIAMA,0CAIA,4CAIA,yCAIA,2CAIA,2CAIA,oEAIA,qDAIA,sEAIA,uEAIA,2EAqQA,sCAIA,4CAIA,4CAIA,2CAIA,6CAIA,uCAIA,0DAKA,6CAIA,kCAIA,mFAKA,uFAIA,gHAyrEA,gDAIA,wDAIA,0CAIA,yDAIA,4CAIA,6CAIA,6DAIA,wCAIA,yCAIA,yCAIA,sDAIA,qDAIA,iEAIA,uDAIA,sDAIA,iEAIA,8CAIA,2CAIA,iDAIA,0CAIA,8CAIA,gDAIA,oDAIA,sDAIA,0DAgTA,2BAIA,2HAKA,mIAKA,mIAKA,0HAKA,oHAKA,+GAKA,sCAIA,4DAIA,mDAIA,mDAIA,qJAwBA,sEAIA,iFAIA,qFAIA,4MAIA,8DAIA,gQAIA,6TAIA,gJAyBA,gDAIA,qFAIA,oHAIA,8FAIA,sFAIA,2FAIA,iGAwBA,yDAIA,yDAIA,+EAIA,+EAIA,0EAIA,4EAIA,kFAIA,mEAIA,sEAIA,0EAIA,gEAIA,kGA+1BA,oEAMA,sCAIA,uCACE,yDAixBF,yBAIA,+BAIA,+BAIA,yBAIA,yBAIA,yBAIA,yBAIA,uCAIA,yBAIA,yCAIA,iCAIA,yBAIA,mCAIA,2CAIA,2BAIA,yBAIA,+BAIA,yBAIA,iCAIA,qCAIA,qCAIA,qCAIA,iCAIA,iCAIA,iCAIA,iCAIA,mCAIA,mCAIA,mCAIA,mCAIA,mCAIA,mCAIA,uCAIA,uCAIA,+BAIA,kCAxpTF,uCACE,iBACE,iGAkBJ,6NA6EA,kBACE,oEAKA,mCAIA,8DAIA,mFAKA,iGAMA,gFAIA,oDAIA,qDAIA,qDAmhJA,oEAIA,uEAIA,uEAIA,+DAIA,qEAIA,0FAQA,uEAIA,yEAIA,6EAIA,6EA46BA,2DAIA,uEAIA,gGAKA,qEAIA,mFAIA,+EAIA,uEAIA,0EAIA,mFA+RA,g/DAuGA,sBACE,sIAQF,2BACE,6CAEA,+CAEA,mDAEA,oEAIF,sBACE,oCAEA,4CAEA,8CAEA,qCAIF,4BACE,sEAEA,yEAEA,4EAEA,mFAIF,uBACE,0CAEA,0CAEA,0CAEA,0CAEA,2CAIF,0BACE,uEAEA,iEAEA,qEAEA,iEAEA,qEAEA,wEAQF,0BAEE,mGAOA,4BAMA,8CACE,kEAMA,6BAMF,uCACE,mGAMA,gCAaJ,uBACE,gCAIA,mCAMF,wBACE,wCAIA,4CAIA,4CAIA,+CAMF,wBACE,kCAIA,gEAOF,yBACE,gNAQA,qRASA,kSASA,4RAWF,8BACE,+FAIA,2DAIA,2FAIA,sFAIA,gDAKA,2KAcF,4BACE,qJAMA,yJAMA,uJAMA,kNAMA,8IAQF,0BACE,4FAIA,4FAIA,yFAIA,4FAIA,8FAIA,4FAIA,wGAIA,kGAIA,gHAkBF,6BAEE,mDAIA,2CAIA,yDAKA,2KAMA,yKAOA,4OAQA,mOAcF,yBAEE,0LASA,0CAKA,wCAKA,6MAQA,6IAMA,mMAOA,wHAKA,sHAWF,wBAEE,mIAMA,mLAMA,4FAIA,4FAIA,wFAKA,6BAIA,yCACE,4HAMA,8QAaF,+BACE,8HAYJ,4BAEE,yEAMA,mJAOA,2JAOA,+JAOA,+JAOA,iKAOA,kFAEA,gHAEA,gHAEA,gHAEA,gHAEA,gHAEA,gHAEA,gHAEA,gHAEA,iHAEA,kJAGA,2CAEA,4CAEA,4CAGA,oDAEA,qDAEA,mDAGA,uCAIA,6CAIA,2GAEA,4GAEA,4GAEA,4GAEA,4GAEA,4GAEA,4GAEA,4GAEA,4GAEA,iFAWF,2BAEE,8DAKA,kMAQA,wMAQA,qNAQA,yLAMA,8KAOA,8EAaF,gBAEE,yNAUA,2EAKA,oHAKA,6GAKA,uDAIA,wDAKA,yMAQA,iMAQA,uCACE,qEAKA,kFAOF,+BACE,sGAkBJ,0BAEE,6LASA,mCAEA,iCAEA,kCAEA,iCAEA,mCAGA,2IAMA,kCAKA,8HAMA,oHA/pNJ,uCACE,kBACE,oLAoBJ,8GAkEA,uCACE,kBACE,gIAsDF,iBACE,qEAeJ,mKA6DA,uCACE,kBACE,+DAoDF,iBACE,yDAcJ,oXAsFA,uCACE,iBACE,kDAqDJ,kFAUA,yBAYA,6IAaA,eAEE,oVAQA,qSAOA,sRAQA,4WAQA,6TAOA,8SAQA,qEAIA,qEAIA,0EAIA,qDAIA,4NAOA,sUASA,yVAUA,+CAIA,4CAIA,4CA8oPA,+CAKA,wDAIA,mEAMA,gDAKA,gTAgBA,uFAOA,wCAKA,kCAIA,uDAIA,mGAMA,sCAIA,2FAMA,0CAKA,wDAIA,kDAKA,oDAIA,kIAKA,sCAIA,yCAKA,4BAIA,wEAKA,uCAIA,yDAIA,iDAIA,mDAKA,2EAMA,gFAMA,0EAKA,mEAKA,yEAMA,8DAMA,0KAYA,iMAiBA,qEAIA,0GAKA,2CAKA,4BAIA,8BAIA,gGAOA,wGAKA,gEAIA,+DAIA,iEAIA,+HAIA,mEAKA,wPAeA,mDAKA,+CAIA,6JASA,4DAIA,qGAOA,0CAKA,+DAIA,mGAMA,mLAKA,gDAKA,wUAoBA,uFAOA,+JAOA,oFAKA,yBAIA,2IAMA,oHAMA,kNAOA,gFAIA,8FAQA,mDAKA,kRAcA,sGAnhQF,sBACE,eACE,2DAKA,oDAIA,qDAiBJ,4HAuEA,uCACE,kBACE,4DAcJ,mPA6CA,uCACE,kBACE,4CAIA,kHA6SF,iBACE,oFAiBJ,qFAuFA,uCACE,iBACE,8CA2NJ,mCACE,kBACE,wLAMA,8KASA,4JAWJ,uCACE,kBACE,wIAoJA,sEA4GJ,yHAjBA,uCACE,iBACE,uEA4PA,mSArGF,kBACE,8EAKA,kDAIA,8CAwQA,8HAWA,8KAqBJ,kbA0BA,8bAyLA,uCACE,kBACE,mMAoBJ,8FAYA,gUA8LA,uCACE,kBACE,gNAqBJ,ycA6BA,kdAyKA,uCACE,kBACE,+JAoBJ,sNAsBA,+MAoKA,uCACE,kBACE,gPAqBJ,6KAgBA,4KAgBA,mMA8KA,uCACE,kBACE,0LAoBJ,wNAkBA,yNAkBA,mOAiIA,uCACE,kBACE,0EAgBJ,mUA0BA,ocAwIA,uCACE,kBACE,uIAkBJ,uKAgBA,i6BA6IA,uCACE,kBACE,8FAgBJ,oXA+BA,sIAyHA,uCACE,kBACE,mIAkBJ,oWAyBA,qXAmHA,uCACE,kBACE,oFAgBJ,gPAoBA,kOAsIA,uCACE,kBACE,yIAkBJ,6NA+GA,uCACE,kBACE,0FAgBJ,sOAiGA,uCACE,kBACE,kGAiBJ,uDAUA,kDAUA,sDAyIA,uCACE,kBACE,gFAOF,kBACE,6DAKA,wBAiVA,sQA+LA,uEA7MF,iBACE,2LA4FA,sCA+HJ,iFAUA,oFAUA,oFAyGA,uCACE,kBACE,gJAqBJ,yBAMA,8FAYA,6FAYA,wFAUA,2FAUA,yDAyNA,uCACE,kBACE,sLAwBJ,8EAMA,+EAMA,yJAYA,sLAYA,iMAYA,iMAYA,yLAYA,uLAcA,2FAUA,oEAUA,yJAYA,oJAcA,4HAUA,+QAcA,mPAsBA,4jBAsCA,oOAYA,qNAYA,2KAm6BA,0BAEE,6NASA,wNASA,yNAUA,+FAQA,6FAQA,+FAQA,6FASA,6NASA,yMASA,2OAUA,qJAUA,qJAUA,gJAWA,mQAUA,uOAUA,mSAeA,6JAaA,oJAKA,8JAMA,uUAqBA,ijBAsBA,4MAaA,kLAUA,sIAMA,sIAOF,uCACE,8sBA2CF,+BAEE,8VAwBA,uLAaA,uJAOA,+DAKA,4KAUA,gDAKA,uNAkoCF,+EAtmCA,6CAUA,8CAWA,kGAYA,mGAYA,iGAaA,6FAUA,qFAyHA,uCACE,iBACE,oXA4BJ,2FAqIA,uCACE,kBACE,+GA6GA,ySAkFF,iBACE,6TAqMJ,yFAUA,4FAUA,4FAUA,yFAUA,4FAUA,4FAwFA,uCACE,kBACE,kLAsBJ,iLAcA,0LAcA,oLAcA,yFAUA,0OAkGA,uCACE,kBACE,uJA+EJ,oEAmcA,uCACE,iBACE,uKAeA,gEAOJ,yBACE,eACE,+CAKA,qFAOJ,+BACE,eAEE,wGAKA,0DAIA,4CAIA,4IAOA,6BAqRJ,uCACE,kBACE,iSAqBA,uNAYA,yLA2IJ,4QAkBA,oRAkBA,2QAkBA,uFA4EA,uCACE,kBACE,iHAkHA,6YAkYA,yOAYA","sources":["Users/jseidel/GitHub/dragonfly/dist/temp/effects-temp-combined.css"],"sourcesContent":["/* Datei: effects/visual/vignette.css */\n/**\n* Vignettierungseffekte\n*\n* Diese Datei enthält verschiedene Vignettierungseffekte für moderne UIs.\n* Die Effekte sind performant optimiert und berücksichtigen reduzierte Bewegung.\n*/\n\n@layer components {\n .vignette {\n position: relative;\n }\n\n .vignette::after {\n background: radial-gradient(\n circle at center,\n transparent 0,\n rgb(0 0 0 / 30%) 100\n );\n content: '';\n inset: 0;\n pointer-events: none;\n position: absolute;\n }\n\n .vignette-strong::after {\n background: radial-gradient(\n circle at center,\n transparent 0,\n rgb(0 0 0 / 50%) 100\n );\n }\n\n .vignette-soft::after {\n background: radial-gradient(\n circle at center,\n transparent 0,\n rgb(0 0 0 / 20%) 100\n );\n }\n\n .vignette-color::after {\n background: radial-gradient(\n circle at center,\n transparent 0,\n var(--vignette-color, rgb(0 0 0 / 30%)) 100\n );\n }\n\n .vignette-top::after {\n background: radial-gradient(\n circle at top,\n transparent 0,\n rgb(0 0 0 / 30%) 100\n );\n }\n\n .vignette-bottom::after {\n background: radial-gradient(\n circle at bottom,\n transparent 0,\n rgb(0 0 0 / 30%) 100\n );\n }\n\n .vignette-hover:hover::after {\n opacity: var(--opacity-80);\n transition: opacity var(--transition-normal);\n }\n}\n\n/* Reduzierte Bewegung */\n@media (prefers-reduced-motion: reduce) {\n @layer components {\n .vignette-hover:hover::after {\n transition: var(--transition-none);\n }\n }\n}\n\n/* Datei: effects/visual/textures.css */\n/**\n* Textureffekte\n*\n* Diese Datei enthält verschiedene Textureffekte für moderne UIs.\n* Die Effekte sind performant optimiert und berücksichtigen reduzierte Bewegung.\n*/\n\n@layer utilities {\n .texture-noise {\n background-image: url(\"data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='10025' height='10025' filter='url(%23noiseFilter)'/%3E%3C/svg%3E\");\n mix-blend-mode: overlay;\n opacity: var(--opacity-10);\n }\n\n .texture-grain {\n background-image: url(\"data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='grainFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='10025' height='10025' filter='url(%23grainFilter)'/%3E%3C/svg%3E\");\n mix-blend-mode: multiply;\n opacity: var(--opacity-5);\n }\n\n .texture-paper {\n background-image: url(\"data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='paperFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.4' numOctaves='5' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='10025' height='10025' filter='url(%23paperFilter)'/%3E%3C/svg%3E\");\n mix-blend-mode: overlay;\n opacity: var(--opacity-20);\n }\n\n .texture-concrete {\n background-image: url(\"data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='concreteFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.6' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='10025' height='10025' filter='url(%23concreteFilter)'/%3E%3C/svg%3E\");\n mix-blend-mode: multiply;\n opacity: var(--opacity-20);\n }\n}\n\n/* Reduzierte Bewegung */\n@media (prefers-reduced-motion: reduce) {\n @layer utilities {\n .texture-noise,\n .texture-grain,\n .texture-paper,\n .texture-concrete {\n animation: var(--animation-none);\n }\n }\n}\n\n/* Datei: effects/visual/sparkle.css */\n/**\n* Funkeleffekte\n*\n* Diese Datei enthält verschiedene Funkeleffekte für moderne UIs.\n* Die Effekte sind performant optimiert und berücksichtigen reduzierte Bewegung.\n*/\n\n/* Animationen - außerhalb von @layer definieren */\n@keyframes sparkle-effect {\n 0% {\n opacity: var(--opacity-0);\n transform: var(--transform-scale-0);\n }\n\n 50% {\n opacity: var(--opacity-100);\n transform: var(--transform-scale-100);\n }\n\n 100% {\n opacity: var(--opacity-0);\n transform: var(--transform-scale-0);\n }\n}\n\n/* Komponenten-Styles */\n@layer components {\n .sparkle {\n overflow: hidden;\n position: relative;\n }\n\n .sparkle::before,\n .sparkle::after {\n background-color: var(--sparkle-color, rgb(255 255 255 / 0.8));\n border-radius: 5px;\n content: '';\n height: var(--spacing-1);\n position: absolute;\n width: var(--spacing-1);\n }\n\n .sparkle::before {\n left: 2%0%;\n top: 2%0%;\n }\n\n .sparkle::after {\n left: 6%0%;\n top: 6%0%;\n }\n\n .sparkle-many::before,\n .sparkle-many::after,\n .sparkle-many span {\n background-color: var(--sparkle-color, rgb(255 255 255 / 0.8));\n border-radius: 5px;\n content: '';\n height: var(--spacing-1);\n position: absolute;\n width: var(--spacing-1);\n }\n\n .sparkle-many span:nth-child(1) {\n left: 3%0%;\n top: 3%0%;\n }\n\n .sparkle-many span:nth-child(2) {\n left: 7%0%;\n top: 7%0%;\n }\n\n .sparkle-many span:nth-child(3) {\n left: 6%0%;\n top: 4%0%;\n }\n\n .sparkle-many span:nth-child(4) {\n left: 4%0%;\n top: 6%0%;\n }\n}\n\n/* Animations-Styles */\n@layer animations {\n .sparkle::before,\n .sparkle::after {\n animation: sparkle-effect 2s infinite;\n }\n\n .sparkle::before {\n animation-delay: 0s;\n }\n\n .sparkle::after {\n animation-delay: var(--animation-duration-slow);\n }\n\n .sparkle-hover:hover::before,\n .sparkle-hover:hover::after {\n animation: sparkle-effect 1s;\n }\n\n .sparkle-many::before,\n .sparkle-many::after,\n .sparkle-many span {\n animation: sparkle-effect 2s infinite;\n }\n\n .sparkle-many span:nth-child(1) {\n animation-delay: var(--animation-duration-normal);\n }\n\n .sparkle-many span:nth-child(2) {\n animation-delay: 0.7s;\n }\n\n .sparkle-many span:nth-child(3) {\n animation-delay: 1.1s;\n }\n\n .sparkle-many span:nth-child(4) {\n animation-delay: 1.4s;\n }\n}\n\n/* Barrierefreiheit - reduzierte Bewegung */\n@media (prefers-reduced-motion: reduce) {\n @layer animations {\n .sparkle::before,\n .sparkle::after,\n .sparkle-hover:hover::before,\n .sparkle-hover:hover::after,\n .sparkle-many::before,\n .sparkle-many::after,\n .sparkle-many span {\n animation: var(--animation-none);\n }\n }\n}\n\n/* Datei: effects/visual/shine.css */\n/**\n* Glanzeffekte\n*\n* Diese Datei enthält verschiedene Glanzeffekte für moderne UIs.\n* Die Effekte sind performant optimiert und berücksichtigen reduzierte Bewegung.\n*/\n\n@keyframes shine-effect {\n 0% {\n transform: translateX(-100%) rotate(45deg);\n }\n\n 100% {\n transform: translateX(100%) rotate(45deg);\n }\n}\n\n@layer components {\n .shine {\n overflow: hidden;\n position: relative;\n }\n\n .shine::after {\n animation: shine-effect 3s infinite;\n background: linear-gradient(\n 45deg,\n transparent,\n rgb(255 255 255 / 10%),\n transparent\n );\n content: '';\n height: 200%;\n left: -50%;\n position: absolute;\n top: -50%;\n transform: var(--transform-rotate-45deg);\n width: 200%;\n }\n\n .shine-hover:hover::after {\n animation: shine-effect 1s;\n }\n\n .shine-strong::after {\n background: linear-gradient(\n 45deg,\n transparent,\n rgb(255 255 255 / 30%),\n transparent\n );\n }\n\n .shine-soft::after {\n background: linear-gradient(\n 45deg,\n transparent,\n rgb(255 255 255 / 5%),\n transparent\n );\n }\n\n .shine-color::after {\n background: linear-gradient(\n 45deg,\n transparent,\n var(--shine-color, rgb(255 255 255 / 20%)),\n transparent\n );\n }\n}\n\n/* Reduzierte Bewegung */\n@media (prefers-reduced-motion: reduce) {\n @layer components {\n .shine::after,\n .shine-hover:hover::after,\n .shine-strong::after,\n .shine-soft::after,\n .shine-color::after {\n animation: var(--animation-none);\n }\n }\n}\n\n/* Datei: effects/visual/shadows.css */\n/**\n* Schatten-Effekte\n*\n* Diese Datei enthält verschiedene Schatten-Effekte für moderne UIs.\n* Die Effekte sind performant optimiert und berücksichtigen reduzierte Bewegung.\n*/\n\n@layer utilities {\n .shadow-sm {\n box-shadow: var(--shadow-sm, 0 var(--border-width) var(--border-width-thick) 0 rgb(0 0 0 / 5%));\n }\n\n .shadow {\n box-shadow: var(--shadow, 0 var(--border-width) var(--spacing-1) 0 rgb(0 0 0 / 10%), 0 var(--border-width) var(--border-width-thick) -var(--border-width) rgb(0 0 0 / 10%));\n }\n\n .shadow-md {\n box-shadow: var(--shadow-md, 0 var(--spacing-1) 6px -var(--border-width) rgb(0 0 0 / 10%), 0 var(--border-width-thick) var(--spacing-1) -var(--border-width-thick) rgb(0 0 0 / 10%));\n }\n\n .shadow-lg {\n box-shadow: var(--shadow-lg, 0 var(--spacing-2-5) var(--spacing-1)(--spacing-1) -var(--spacing-1) rgb(0 0 0 / 10%), 0 var(--spacing-1) 6px -var(--spacing-1) rgb(0 0 0 / 10%));\n }\n\n .shadow-xl {\n box-shadow: var(--shadow-xl, 0 var(--spacing-5) var(--spacing-2)(--spacing-1) -var(--spacing-1) rgb(0 0 0 / 10%), 0 var(--spacing-2) var(--spacing-2-5) -6px rgb(0 0 0 / 10%));\n }\n\n .shadow-2xl {\n box-shadow: var(--shadow-2xl, 0 var(--spacing-2)(--spacing-1) 50px -var(--spacing-1)(--border-width-thick) rgb(0 0 0 / 25%));\n }\n\n .shadow-inner {\n box-shadow: var(--shadow-inner, inset 0 var(--border-width-thick) var(--spacing-1) 0 rgb(0 0 0 / 5%));\n }\n\n .shadow-none {\n box-shadow: var(--shadow-none, 0 0 #0000);\n }\n}\n\n/* Reduzierte Bewegung */\n@media (prefers-reduced-motion: reduce) {\n @layer utilities {\n .shadow-hover,\n .shadow-transition {\n transition: var(--transition-none);\n }\n }\n}\n\n/* Datei: effects/visual/reflections.css */\n/**\n* Reflexionseffekte\n*\n* Diese Datei enthält verschiedene Reflexionseffekte für moderne UIs.\n* Die Effekte sind performant optimiert und berücksichtigen reduzierte Bewegung.\n*/\n\n@keyframes reflection-shine {\n 0% { transform: scaleY(-1%) translateY(0%); }\n\n 50% { transform: scaleY(-1%) translateY(var(--spacing-2-5)); }\n\n 100% { transform: scaleY(-1%) translateY(0%); }\n}\n\n@layer components {\n .reflection {\n overflow: hidden;\n position: relative;\n }\n\n .reflection::after {\n background: linear-gradient(\n to bottom,\n transparent,\n var(--reflection-color, rgb(255 255 255 / 20%))\n );\n content: '';\n inset: 0;\n opacity: var(--opacity-50);\n pointer-events: none;\n position: absolute;\n transform: scaleY(-1%);\n }\n\n .reflection-strong::after {\n background: linear-gradient(\n to bottom,\n transparent,\n var(--reflection-color, rgb(255 255 255 / 0.4))\n );\n opacity: var(--opacity-70);\n }\n\n .reflection-soft::after {\n background: linear-gradient(\n to bottom,\n transparent,\n var(--reflection-color, rgb(255 255 255 / 10%))\n );\n opacity: var(--opacity-30);\n }\n\n .reflection-color::after {\n background: linear-gradient(\n to bottom,\n transparent,\n var(--reflection-color, rgb(255 255 255 / 20%))\n );\n mix-blend-mode: overlay;\n }\n\n .reflection-hover:hover::after {\n animation: reflection-shine 2s infinite;\n }\n}\n\n/* Reduzierte Bewegung */\n@media (prefers-reduced-motion: reduce) {\n @layer components {\n .reflection-hover:hover::after {\n animation: var(--animation-none);\n }\n }\n}\n\n/* Datei: effects/visual/patterns.css */\n/**\n* Mustereffekte\n*\n* Diese Datei enthält verschiedene Mustereffekte für moderne UIs.\n* Die Effekte sind performant optimiert und berücksichtigen reduzierte Bewegung.\n*/\n\n@layer utilities {\n .pattern-dots {\n background-image: radial-gradient(var(--pattern-color, currentColor) var(--border-width), transparent var(--border-width));\n background-size: var(--spacing-2-5) var(--spacing-2-5);\n }\n\n .pattern-lines {\n background-image: linear-gradient(45deg, var(--pattern-color, currentColor) 25%, transparent 25%);\n background-size: var(--spacing-2-5) var(--spacing-2-5);\n }\n\n .pattern-grid {\n background-image:\n linear-gradient(var(--pattern-color, currentColor) var(--border-width), transparent var(--border-width)),\n linear-gradient(90deg, var(--pattern-color, currentColor) var(--border-width), transparent var(--border-width));\n background-size: var(--spacing-2-5) var(--spacing-2-5);\n }\n\n .pattern-zigzag {\n background-image: linear-gradient(135deg, var(--pattern-color, currentColor) 25%, transparent 25%),\n linear-gradient(225deg, var(--pattern-color, currentColor) 25%, transparent 25%);\n background-size: var(--spacing-2-5) var(--spacing-2-5);\n }\n\n .pattern-checker {\n background-image: linear-gradient(45deg, var(--pattern-color, currentColor) 25%, transparent 25%),\n linear-gradient(-45deg, var(--pattern-color, currentColor) 25%, transparent 25%);\n background-size: var(--spacing-2-5) var(--spacing-2-5);\n }\n\n .pattern-hover:hover {\n background-image: var(--pattern-hover-image);\n transition: background-image var(--transition-normal);\n }\n}\n\n/* Reduzierte Bewegung */\n@media (prefers-reduced-motion: reduce) {\n @layer utilities {\n .pattern-hover:hover {\n transition: var(--transition-none);\n }\n }\n}\n\n/* Datei: effects/visual/noise.css */\n/**\n* Rausch-Effekte\n*\n* Diese Datei enthält verschiedene Rausch-Effekte für moderne UIs.\n* Die Effekte sind performant optimiert und berücksichtigen reduzierte Bewegung.\n*/\n\n@keyframes noise-animation {\n 0% {\n transform: translate(0%, 0%);\n }\n\n 10% {\n transform: translate(-5%, -5%);\n }\n\n 20% {\n transform: translate(-10%, 5%);\n }\n\n 30% {\n transform: translate(5%, -10%);\n }\n\n 40% {\n transform: translate(-5%, 15%);\n }\n\n 50% {\n transform: translate(-10%, 5%);\n }\n\n 60% {\n transform: translate(15%, 0%);\n }\n\n 70% {\n transform: translate(0%, 10%);\n }\n\n 80% {\n transform: translate(3%, 15%);\n }\n\n 90% {\n transform: translate(-10%, 10%);\n }\n\n 100% {\n transform: translate(0%, 0%);\n }\n}\n\n@layer utilities {\n .noise-film {\n background-image: url(\"data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='10025' height='10025' filter='url(%23noiseFilter)'/%3E%3C/svg%3E\");\n mix-blend-mode: overlay;\n opacity: var(--opacity-5);\n }\n\n .noise-digital {\n background-image: url(\"data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='10025' height='10025' filter='url(%23noiseFilter)'/%3E%3C/svg%3E\");\n mix-blend-mode: multiply;\n opacity: 3%;\n }\n\n .noise-texture {\n background-image: url(\"data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.4' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='10025' height='10025' filter='url(%23noiseFilter)'/%3E%3C/svg%3E\");\n mix-blend-mode: overlay;\n opacity: var(--opacity-10);\n }\n\n .noise-animated {\n animation: noise-animation 0.5s steps(4) infinite;\n background-image: url(\"data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='10025' height='10025' filter='url(%23noiseFilter)'/%3E%3C/svg%3E\");\n mix-blend-mode: overlay;\n opacity: var(--opacity-5);\n }\n\n .noise-grain {\n background-image: url(\"data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='10025' height='10025' filter='url(%23noiseFilter)'/%3E%3C/svg%3E\");\n mix-blend-mode: multiply;\n opacity: 4%;\n }\n\n .noise-static {\n background-image: url(\"data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='1' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='10025' height='10025' filter='url(%23noiseFilter)'/%3E%3C/svg%3E\");\n mix-blend-mode: overlay;\n opacity: 2%;\n }\n}\n\n/* Reduzierte Bewegung */\n@media (prefers-reduced-motion: reduce) {\n @layer utilities {\n .noise-animated {\n animation: var(--animation-none);\n }\n }\n}\n\n/* Datei: effects/visual/neon.css */\n/**\n* Neon-Effekte\n*\n* Diese Datei enthält verschiedene Neon-Effekte für Text und Rahmen.\n* Die Effekte sind performant optimiert und berücksichtigen reduzierte Bewegung.\n*\n* Verwendung:\n*\n* 1. Neon-Text:\n* <div class=\"neon-text\">Standard Neon-Text</div>\n* <div class=\"neon-text-secondary\">Sekundärer Neon-Text</div>\n* <div class=\"neon-text-accent\">Akzent Neon-Text</div>\n*\n* 2. Animation-Varianten:\n* <div class=\"neon-text-slow\">Langsame Animation</div>\n* <div class=\"neon-text-fast\">Schnelle Animation</div>\n* <div class=\"neon-text-flicker\">Flackernder Effekt</div>\n* <div class=\"neon-text-hover\">Effekt nur beim Hover</div>\n*\n* 3. Neon-Rahmen:\n* <div class=\"neon-border\">Element mit Neon-Rahmen</div>\n*\n* 4. Glow-Effekte:\n* <div class=\"glow\">Text mit Glow-Effekt in Standard-Farbe</div>\n* <span class=\"glow\" style=\"--glow-color: #0ff;\">Text mit türkisem Glow</span>\n* <button class=\"glow-button\">Button mit Glow-Effekt</button>\n* <button class=\"glow-button\" style=\"--glow-button-color: #ff00ff;\">Button mit pinkem Glow</button>\n*\n* 5. Flacker-Effekte:\n* <div class=\"flicker-element\">Element mit Flacker-Animation</div>\n* <div class=\"flicker-fast\">Schnell flackerndes Element</div>\n* <div class=\"flicker-slow\">Langsam flackerndes Element</div>\n*\n* Technische Details:\n* - Verwendet CSS-Variablen für Farben\n* - Optimiert mit will-change\n* - Responsive Anpassungen für mobile Geräte\n* - Reduzierte Bewegung wird berücksichtigt\n*\n* Performance-Hinweise:\n* - Die Effekte sind hardware-beschleunigt\n* - Animationen werden auf mobilen Geräten reduziert\n* - Reduzierte Bewegung wird automatisch berücksichtigt\n*/\n\n/* Animationen - immer außerhalb von @layer definieren */\n@keyframes neon-pulse {\n from {\n opacity: var(--opacity-100);\n }\n\n to {\n opacity: var(--opacity-70);\n }\n}\n\n@keyframes neon-flicker {\n 0, 19%, 21%, 23%, 25%, 54%, 56%, 100% {\n text-shadow: var(--spacing-0) var(--spacing-0) var(--spacing-5) currentcolor,\n var(--spacing-0) var(--spacing-0) var(--spacing-10) currentcolor,\n var(--spacing-0) var(--spacing-0) var(--spacing-20) currentcolor;\n }\n\n 20, 24%, 55% {\n text-shadow: var(--display-none);\n }\n}\n\n@keyframes flicker {\n 0, 100% { opacity: var(--opacity-100); }\n\n 30% { opacity: var(--opacity-70); }\n\n 50% { opacity: var(--opacity-100); }\n\n 70% { opacity: var(--opacity-80); }\n\n 90% { opacity: var(--opacity-50); }\n}\n\n/* Effekte-Definitionen in Layer */\n@layer effects {\n/* Neon Text */\n .neon-text {\n animation: neon-pulse 1.5s var(--easing-smooth) infinite alternate;\n color: var(--theme-primary-500);\n text-shadow: var(--spacing-0) var(--spacing-0) var(--spacing-5) var(--theme-primary-500),\n var(--spacing-0) var(--spacing-0) var(--spacing-10) var(--theme-primary-500),\n var(--spacing-0) var(--spacing-0) var(--spacing-20) var(--theme-primary-500);\n }\n\n .neon-text-secondary {\n color: var(--theme-secondary-500);\n text-shadow: var(--spacing-0) var(--spacing-0) var(--spacing-5) var(--theme-secondary-500),\n var(--spacing-0) var(--spacing-0) var(--spacing-10) var(--theme-secondary-500),\n var(--spacing-0) var(--spacing-0) var(--spacing-20) var(--theme-secondary-500);\n }\n\n .neon-text-accent {\n color: var(--theme-accent-500);\n text-shadow: var(--spacing-0) var(--spacing-0) var(--spacing-5) var(--theme-accent-500),\n var(--spacing-0) var(--spacing-0) var(--spacing-10) var(--theme-accent-500),\n var(--spacing-0) var(--spacing-0) var(--spacing-20) var(--theme-accent-500);\n }\n\n/* Neon Border */\n .neon-border {\n animation: neon-pulse 1.5s var(--easing-smooth) infinite alternate;\n border: var(--spacing-2) solid var(--theme-primary-500);\n box-shadow: var(--spacing-0) var(--spacing-0) var(--spacing-5) var(--theme-primary-500),\n var(--spacing-0) var(--spacing-0) var(--spacing-10) var(--theme-primary-500),\n var(--spacing-0) var(--spacing-0) var(--spacing-20) var(--theme-primary-500);\n }\n\n .neon-border-secondary {\n border: var(--spacing-2) solid var(--theme-secondary-500);\n box-shadow: var(--spacing-0) var(--spacing-0) var(--spacing-5) var(--theme-secondary-500),\n var(--spacing-0) var(--spacing-0) var(--spacing-10) var(--theme-secondary-500),\n var(--spacing-0) var(--spacing-0) var(--spacing-20) var(--theme-secondary-500);\n }\n\n .neon-border-accent {\n border: var(--spacing-2) solid var(--theme-accent-500);\n box-shadow: var(--spacing-0) var(--spacing-0) var(--spacing-5) var(--theme-accent-500),\n var(--spacing-0) var(--spacing-0) var(--spacing-10) var(--theme-accent-500),\n var(--spacing-0) var(--spacing-0) var(--spacing-20) var(--theme-accent-500);\n }\n\n/* Animation Variants */\n .neon-text-slow {\n animation: neon-pulse 4s var(--easing-smooth) infinite;\n }\n\n .neon-text-fast {\n animation: neon-pulse 1s var(--easing-smooth) infinite;\n }\n\n .neon-text-flicker {\n animation: neon-flicker 2s var(--easing-smooth) infinite;\n }\n\n .neon-text-hover {\n transition: var(--transition-shadow);\n }\n\n .neon-text-hover:hover {\n text-shadow: var(--spacing-0) var(--spacing-0) var(--spacing-5) currentcolor,\n var(--spacing-0) var(--spacing-0) var(--spacing-10) currentcolor,\n var(--spacing-0) var(--spacing-0) var(--spacing-20) currentcolor;\n }\n\n/* Zusätzliche Glow-Effekte */\n .glow {\n color: var(--glow-color, var(--theme-info-500));\n text-shadow:\n 0 0 var(--spacing-1) var(--glow-color, var(--theme-info-500)),\n 0 0 var(--spacing-2) var(--glow-color, var(--theme-info-500)),\n 0 0 var(--spacing-1)(--border-width-thick) var(--glow-color, var(--theme-info-500)),\n 0 0 var(--spacing-4) var(--glow-color, var(--theme-info-500));\n }\n\n .glow-button {\n box-shadow:\n 0 0 var(--spacing-2) var(--glow-button-color, var(--theme-accent-500)),\n 0 0 var(--spacing-1)(--spacing-1) var(--glow-button-color, var(--theme-accent-500)),\n 0 0 var(--spacing-5) var(--glow-button-color, var(--theme-accent-500)),\n 0 0 30px var(--glow-button-color, var(--theme-accent-500));\n position: relative;\n z-index: var(--z-index-1);\n }\n\n .flicker-element {\n animation: flicker 4s infinite;\n }\n\n .flicker-fast {\n animation: flicker 2s infinite;\n }\n\n .flicker-slow {\n animation: flicker 8s infinite;\n }\n}\n\n/* Barrierefreiheit-Anpassungen */\n@layer utilities {\n/* Reduced Motion */\n @container root (prefers-reduced-motion: reduce) {\n .neon-text,\n .neon-border,\n .flicker-element,\n .flicker-fast,\n .flicker-slow {\n animation: var(--animation-none);\n transition: var(--transition-none);\n }\n }\n}\n\n/* Responsive Anpassungen */\n@media (max-width: 640px) {\n @layer effects {\n .neon-sign {\n font-size: 1.5rem;\n padding: 0.5rem var(--spacing-4);\n }\n\n .neon-border {\n border-width: var(--border-width-thick);\n }\n\n .neon-box {\n aspect-ratio: 16/9;\n height: auto;\n width: 100%;\n }\n }\n}\n\n\n/* Datei: effects/visual/light.css */\n/**\n* Lichteffekte\n*\n* Diese Datei enthält verschiedene Lichteffekte für moderne UIs.\n* Die Effekte sind performant optimiert und berücksichtigen reduzierte Bewegung.\n*/\n\n@keyframes light-move {\n 0% { transform: translate(-25%, -25%); }\n\n 50% { transform: translate(25%, 25%); }\n\n 100% { transform: translate(-25%, -25%); }\n}\n\n@layer components {\n .light-spot {\n overflow: hidden;\n position: relative;\n }\n\n .light-spot::before {\n background: radial-gradient(\n circle at center,\n var(--light-color, rgb(255 255 255 / 0.8)) 0,\n transparent 50\n );\n content: '';\n height: 200%;\n pointer-events: none;\n position: absolute;\n transform: translate(-25%, -25%);\n width: 200%;\n }\n\n .light-beam {\n overflow: hidden;\n position: relative;\n }\n\n .light-beam::before {\n background: linear-gradient(\n 45deg,\n transparent,\n var(--light-color, rgb(255 255 255 / 30%)),\n transparent\n );\n content: '';\n height: 200%;\n pointer-events: none;\n position: absolute;\n transform: translate(-25%, -25%);\n width: 200%;\n }\n\n .light-ambient {\n overflow: hidden;\n position: relative;\n }\n\n .light-ambient::before {\n background: radial-gradient(\n circle at var(--light-x, 50) var(--light-y, 50),\n var(--light-color, rgb(255 255 255 / 20%)) 0,\n transparent 70\n );\n content: '';\n inset: 0;\n pointer-events: none;\n position: absolute;\n }\n\n .light-hover:hover::before {\n animation: light-move 2s infinite;\n }\n}\n\n/* Reduzierte Bewegung */\n@media (prefers-reduced-motion: reduce) {\n @layer components {\n .light-hover:hover::before {\n animation: var(--animation-none);\n }\n }\n}\n\n/* Datei: effects/visual/glow.css */\n/**\n* Leuchteffekte\n*\n* Diese Datei enthält verschiedene Leuchteffekte für moderne UIs.\n* Die Effekte sind performant optimiert und berücksichtigen reduzierte Bewegung.\n*/\n\n@keyframes glow-pulse {\n 0% { box-shadow: 0 0 var(--spacing-1) var(--glow-color, var(--color-primary)); }\n\n 50% { box-shadow: 0 0 var(--spacing-5) var(--glow-color, var(--color-primary)); }\n\n 100% { box-shadow: 0 0 var(--spacing-1) var(--glow-color, var(--color-primary)); }\n}\n\n@layer components {\n .glow {\n box-shadow: 0 0 var(--spacing-2-5) var(--glow-color, var(--color-primary));\n transition: box-shadow var(--transition-normal);\n }\n\n .glow-hover:hover {\n box-shadow: 0 0 var(--spacing-5) var(--glow-color, var(--color-primary));\n }\n\n .glow-pulse {\n animation: glow-pulse 2s infinite;\n }\n\n .glow-text {\n text-shadow: 0 0 var(--spacing-2-5) var(--glow-color, var(--color-primary));\n }\n\n .glow-border {\n border: var(--border-width) solid var(--glow-color, var(--color-primary));\n box-shadow: 0 0 var(--spacing-2-5) var(--glow-color, var(--color-primary));\n }\n\n .glow-strong {\n box-shadow:\n 0 0 var(--spacing-2-5) var(--glow-color, var(--color-primary)),\n 0 0 var(--spacing-5) var(--glow-color, var(--color-primary)),\n 0 0 30px var(--glow-color, var(--color-primary));\n }\n\n .glow-soft {\n box-shadow: 0 0 var(--spacing-1)(--spacing-1) var(--glow-color, var(--color-primary));\n filter: blur(var(--spacing-1));\n }\n}\n\n/* Reduzierte Bewegung */\n@media (prefers-reduced-motion: reduce) {\n @layer components {\n .glow-pulse {\n animation: var(--animation-none);\n }\n\n .glow,\n .glow-hover,\n .glow-text,\n .glow-border,\n .glow-strong,\n .glow-soft {\n transition: var(--transition-none);\n }\n }\n}\n\n/* Datei: effects/visual/glass.css */\n/**\n* Glaseffekte\n*\n* Diese Datei enthält verschiedene Glaseffekte für moderne UIs.\n* Die Effekte sind performant optimiert und berücksichtigen reduzierte Bewegung.\n*/\n\n@layer components {\n .glass {\n backdrop-filter: blur(var(--spacing-2-5));\n background: rgb(255 255 255 / 10%);\n border: var(--border-width) solid rgb(255 255 255 / 20%);\n box-shadow: 0 var(--spacing-2) var(--spacing-3)(--border-width-thick) 0 rgb(31 38 135 / 37%);\n }\n\n .glass-sm {\n backdrop-filter: blur(var(--spacing-1));\n background: rgb(255 255 255 / 5%);\n border: var(--border-width) solid rgb(255 255 255 / 10%);\n box-shadow: 0 var(--spacing-1) var(--spacing-4) 0 rgb(31 38 135 / 20%);\n }\n\n .glass-lg {\n backdrop-filter: blur(var(--spacing-1)(--spacing-1));\n background: rgb(255 255 255 / 15%);\n border: var(--border-width) solid rgb(255 255 255 / 30%);\n box-shadow: 0 var(--spacing-1)(--border-width-thick) var(--spacing-4)(--spacing-2) 0 rgb(31 38 135 / 50%);\n }\n\n .glass-morph {\n backdrop-filter: blur(var(--spacing-2-5));\n background: rgb(255 255 255 / 10%);\n border: var(--border-width) solid rgb(255 255 255 / 20%);\n border-radius: var(--spacing-5);\n box-shadow: 0 var(--spacing-2) var(--spacing-3)(--border-width-thick) 0 rgb(31 38 135 / 37%);\n }\n\n .glass-border {\n backdrop-filter: blur(var(--spacing-2-5));\n background: rgb(255 255 255 / 10%);\n border: var(--border-width) solid rgb(255 255 255 / 20%);\n box-shadow: 0 var(--spacing-2) var(--spacing-3)(--border-width-thick) 0 rgb(31 38 135 / 37%);\n position: relative;\n }\n\n .glass-border::before {\n background: linear-gradient(45deg, rgb(255 255 255 / 10%), rgb(255 255 255 / 30%));\n border-radius: inherit;\n content: '';\n inset: calc(-1 * var(--border-width-thick));\n position: absolute;\n z-index: -1;\n }\n\n .glass-shadow {\n backdrop-filter: blur(var(--spacing-2-5));\n background: rgb(255 255 255 / 10%);\n border: var(--border-width) solid rgb(255 255 255 / 20%);\n box-shadow:\n 0 var(--spacing-2) var(--spacing-3)(--border-width-thick) 0 rgb(31 38 135 / 37%),\n 0 0 0 var(--border-width) rgb(255 255 255 / 10%);\n }\n\n .glass-hover {\n backdrop-filter: blur(var(--spacing-2-5));\n background: rgb(255 255 255 / 10%);\n border: var(--border-width) solid rgb(255 255 255 / 20%);\n box-shadow: 0 var(--spacing-2) var(--spacing-3)(--border-width-thick) 0 rgb(31 38 135 / 37%);\n transition: all 0.3s ease;\n }\n\n .glass-hover:hover {\n background: rgb(255 255 255 / 15%);\n border: var(--border-width) solid rgb(255 255 255 / 30%);\n box-shadow: 0 var(--spacing-1)(--border-width-thick) var(--spacing-4)(--spacing-2) 0 rgb(31 38 135 / 50%);\n }\n\n .glass-blur {\n backdrop-filter: blur(var(--spacing-2-5));\n background: rgb(255 255 255 / 10%);\n }\n\n .glass-blur-sm {\n backdrop-filter: blur(var(--spacing-1));\n }\n\n .glass-blur-lg {\n backdrop-filter: blur(var(--spacing-1)(--spacing-1));\n }\n\n .glass-color-primary {\n background: rgb(59 130 246 / 10%);\n border-color: rgb(59 130 246 / 20%);\n }\n\n .glass-color-secondary {\n background: rgb(107 114 128 / 10%);\n border-color: rgb(107 114 128 / 20%);\n }\n\n .glass-color-success {\n background: rgb(16 185 129 / 10%);\n border-color: rgb(16 185 129 / 20%);\n }\n\n .glass-color-error {\n background: rgb(239 68 68 / 10%);\n border-color: rgb(239 68 68 / 20%);\n }\n\n .glass-color-warning {\n background: rgb(245 158 11 / 10%);\n border-color: rgb(245 158 11 / 20%);\n }\n\n .glass-color-info {\n background: rgb(6 182 212 / 10%);\n border-color: rgb(6 182 212 / 20%);\n }\n}\n\n/* Reduzierte Bewegung */\n@media (prefers-reduced-motion: reduce) {\n @layer components {\n .glass-hover {\n transition: var(--transition-none);\n }\n }\n}\n\n/* Datei: effects/visual/filters.css */\n/**\n* Filter-Effekte\n*\n* Diese Datei enthält verschiedene Filter-Effekte für moderne UIs.\n* Die Effekte sind performant optimiert und berücksichtigen reduzierte Bewegung.\n*/\n\n@layer utilities {\n/* Basis-Filter */\n .filter-blur {\n filter: blur(var(--spacing-1));\n }\n\n .filter-blur-sm {\n filter: blur(var(--border-width-thick));\n }\n\n .filter-blur-lg {\n filter: blur(var(--spacing-2));\n }\n\n .filter-brightness {\n filter: brightness(1.2);\n }\n\n .filter-brightness-sm {\n filter: brightness(1.1);\n }\n\n .filter-brightness-lg {\n filter: brightness(1.3);\n }\n\n .filter-contrast {\n filter: var(--filter-contrast-125);\n }\n\n .filter-contrast-sm {\n filter: contrast(1.1);\n }\n\n .filter-contrast-lg {\n filter: contrast(1.3);\n }\n\n .filter-grayscale {\n filter: var(--filter-grayscale-100);\n }\n\n .filter-grayscale-sm {\n filter: grayscale(0.5);\n }\n\n .filter-grayscale-lg {\n filter: grayscale(0.8);\n }\n\n .filter-hue-rotate {\n filter: hue-rotate(90deg);\n }\n\n .filter-hue-rotate-sm {\n filter: hue-rotate(45deg);\n }\n\n .filter-hue-rotate-lg {\n filter: hue-rotate(180deg);\n }\n\n .filter-invert {\n filter: invert(1);\n }\n\n .filter-invert-sm {\n filter: invert(0.5);\n }\n\n .filter-invert-lg {\n filter: invert(0.8);\n }\n\n .filter-opacity {\n filter: opacity(0.5);\n }\n\n .filter-opacity-sm {\n filter: opacity(0.7);\n }\n\n .filter-opacity-lg {\n filter: opacity(0.3);\n }\n\n .filter-saturate {\n filter: saturate(1.5);\n }\n\n .filter-saturate-sm {\n filter: saturate(1.2);\n }\n\n .filter-saturate-lg {\n filter: saturate(1.8);\n }\n\n .filter-sepia {\n filter: sepia(1);\n }\n\n .filter-sepia-sm {\n filter: sepia(0.5);\n }\n\n .filter-sepia-lg {\n filter: sepia(0.8);\n }\n\n/* Kombinierte Filter */\n .filter-vintage {\n filter: sepia(0.5) contrast(1.2) brightness(0.9);\n }\n\n .filter-cool {\n filter: saturate(1.2) hue-rotate(30deg);\n }\n\n .filter-warm {\n filter: saturate(1.2) hue-rotate(-30deg);\n }\n\n .filter-dramatic {\n filter: contrast(1.4) saturate(1.2) brightness(0.9);\n }\n\n .filter-soft {\n filter: blur(var(--border-width)) brightness(1.1) contrast(0.9);\n }\n\n/* Hover-Effekte */\n .filter-hover {\n transition: filter 0.3s ease;\n }\n\n .filter-hover:hover {\n filter: brightness(1.1) contrast(1.1);\n }\n\n .filter-hover-sm:hover {\n filter: brightness(1.05) contrast(1.05);\n }\n\n .filter-hover-lg:hover {\n filter: brightness(1.2) contrast(1.2);\n }\n}\n\n/* Reduzierte Bewegung */\n@media (prefers-reduced-motion: reduce) {\n @layer utilities {\n .filter-hover,\n .filter-hover-sm,\n .filter-hover-lg {\n transition: var(--transition-none);\n }\n }\n}\n\n\n/* Datei: effects/typography/text-effects.css */\n/**\n* Typografie-Effekte\n*\n* Diese Datei enthält verschiedene Typografie-Effekte für moderne UIs.\n* Die Effekte sind performant optimiert und berücksichtigen reduzierte Bewegung.\n*/\n\n@keyframes text-shine {\n 0% {\n background-position: 200% 0;\n }\n\n 100% {\n background-position: -200 0;\n }\n}\n\n@layer utilities {\n .text-shadow-sm {\n text-shadow: 0 var(--border-width) var(--border-width-thick) rgb(0 0 0 / 10%);\n }\n\n .text-shadow-md {\n text-shadow: 0 var(--border-width-thick) var(--spacing-1) rgb(0 0 0 / 10%);\n }\n\n .text-shadow-lg {\n text-shadow: 0 var(--spacing-1) var(--spacing-2) rgb(0 0 0 / 10%);\n }\n\n .text-shadow-glow {\n text-shadow: 0 0 var(--spacing-2-5) var(--text-glow-color, currentColor);\n }\n\n .text-shadow-neon {\n text-shadow:\n 0 0 var(--spacing-1) var(--text-neon-color, currentColor),\n 0 0 var(--spacing-2-5) var(--text-neon-color, currentColor),\n 0 0 var(--spacing-5) var(--text-neon-color, currentColor);\n }\n\n .text-stroke-sm {\n -webkit-text-stroke: var(--border-width) var(--text-stroke-color, currentColor);\n }\n\n .text-stroke-md {\n -webkit-text-stroke: var(--border-width-thick) var(--text-stroke-color, currentColor);\n }\n\n .text-stroke-lg {\n -webkit-text-stroke: var(--spacing-1) var(--text-stroke-color, currentColor);\n }\n\n .text-gradient {\n background: var(--text-gradient, linear-gradient(45deg, #ff6b6b, #4ecdc4));\n background-clip: text;\n color: transparent;\n }\n\n .text-shine {\n animation: text-shine 3s linear infinite;\n background: linear-gradient(\n 90deg,\n transparent 0,\n rgb(255 255 255 / 20%) 50,\n transparent 100\n );\n background-clip: text;\n background-size: 200% 100;\n color: transparent;\n }\n\n .text-blur-sm {\n filter: blur(var(--border-width));\n }\n\n .text-blur-md {\n filter: blur(var(--border-width-thick));\n }\n\n .text-blur-lg {\n filter: blur(var(--spacing-1));\n }\n\n .text-outline {\n text-shadow:\n -var(--border-width) -var(--border-width) 0 var(--text-outline-color, currentColor),\n var(--border-width) -var(--border-width) 0 var(--text-outline-color, currentColor),\n -var(--border-width) var(--border-width) 0 var(--text-outline-color, currentColor),\n var(--border-width) var(--border-width) 0 var(--text-outline-color, currentColor);\n }\n}\n\n/* Reduzierte Bewegung */\n@media (prefers-reduced-motion: reduce) {\n @layer utilities {\n .text-shine {\n animation: var(--animation-none);\n }\n }\n}\n\n/* Datei: effects/themes/neumorphism.css */\n/**\n* Neumorphismus-Effekte\n*\n* Diese Datei enthält verschiedene Neumorphismus-Effekte für moderne UIs.\n* Die Effekte sind für Barrierefreiheit optimiert und unterstützen Dark Mode.\n*/\n\n@layer components {\n/* Basisvariablen für Neumorphismus */\n :root {\n --neuro-radius: var(--spacing-4);\n --neuro-shadow-intensity: 0.1;\n --neuro-shadow-distance: 0.5rem;\n --neuro-shadow-blur: var(--spacing-4);\n --neuro-light-shadow-color: rgb(255 255 255 / var(--neuro-shadow-intensity));\n --neuro-dark-shadow-color: rgb(0 0 0 / var(--neuro-shadow-intensity));\n --neuro-background: var(--surface-3, #f0f0f0);\n --neuro-transition: 200ms var(--easing-decelerate);\n --neuro-surface-tint: 0.02;\n }\n\n/* Basisklasse für Neumorphismus */\n .neuro {\n background-color: var(--neuro-background);\n border-radius: var(--neuro-radius);\n overflow: hidden;\n position: relative;\n transition: all var(--neuro-transition);\n }\n\n/* Konvexe Elevation (herausstehend) */\n .neuro-convex {\n background: linear-gradient(\n 145deg,\n color-mix(in srgb, var(--neuro-background) 96%, white),\n color-mix(in srgb, var(--neuro-background) 92%, black)\n );\n box-shadow:\n var(--neuro-shadow-distance) var(--neuro-shadow-distance) var(--neuro-shadow-blur) var(--neuro-dark-shadow-color),\n calc(-1 * var(--neuro-shadow-distance)) calc(-1 * var(--neuro-shadow-distance)) var(--neuro-shadow-blur) var(--neuro-light-shadow-color);\n }\n\n/* Konkave Elevation (eingedrückt) */\n .neuro-concave {\n background: linear-gradient(\n 145deg,\n color-mix(in srgb, var(--neuro-background) 92%, black),\n color-mix(in srgb, var(--neuro-background) 96%, white)\n );\n box-shadow: inset\n var(--neuro-shadow-distance) var(--neuro-shadow-distance) var(--neuro-shadow-blur) var(--neuro-dark-shadow-color),\n inset calc(-1 * var(--neuro-shadow-distance)) calc(-1 * var(--neuro-shadow-distance)) var(--neuro-shadow-blur) var(--neuro-light-shadow-color);\n }\n\n/* Flache Elevation */\n .neuro-flat {\n box-shadow:\n var(--neuro-shadow-distance) var(--neuro-shadow-distance) var(--neuro-shadow-blur) var(--neuro-dark-shadow-color),\n calc(-1 * var(--neuro-shadow-distance)) calc(-1 * var(--neuro-shadow-distance)) var(--neuro-shadow-blur) var(--neuro-light-shadow-color);\n }\n\n/* Neumorphe Buttons */\n .neuro-button {\n align-items: center;\n background: var(--neuro-background);\n border: none;\n border-radius: var(--neuro-radius);\n cursor: pointer;\n display: inline-flex;\n font-weight: var(--font-weight-medium);\n justify-content: center;\n padding: 0.75rem 1.5rem;\n position: relative;\n transition: all var(--neuro-transition);\n user-select: none;\n vertical-align: middle;\n }\n\n/* Button-Varianten */\n .neuro-button-convex {\n background: linear-gradient(\n 145deg,\n color-mix(in srgb, var(--neuro-background) 96%, white),\n color-mix(in srgb