{"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, 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  .neuro-button-convex:hover {\n    box-shadow:\n    calc(var(--neuro-shadow-distance) * 1.2) calc(var(--neuro-shadow-distance) * 1.2) calc(var(--neuro-shadow-blur) * 1.2) var(--neuro-dark-shadow-color),\n    calc(-1.2 * var(--neuro-shadow-distance)) calc(-1.2 * var(--neuro-shadow-distance)) calc(var(--neuro-shadow-blur) * 1.2) var(--neuro-light-shadow-color);\n  }\n\n  .neuro-button-convex:active,\n  .neuro-button-convex.active {\n    box-shadow: inset\n    calc(var(--neuro-shadow-distance) * 0.5) calc(var(--neuro-shadow-distance) * 0.5) calc(var(--neuro-shadow-blur) * 0.7) var(--neuro-dark-shadow-color),\n    inset calc(-0.5 * var(--neuro-shadow-distance)) calc(-0.5 * var(--neuro-shadow-distance)) calc(var(--neuro-shadow-blur) * 0.7) var(--neuro-light-shadow-color);\n    transform: translateY(var(--border-width-thick));\n  }\n\n/* Neumorphe Karten */\n  .neuro-card {\n    background: var(--neuro-background);\n    border-radius: var(--neuro-radius);\n    overflow: hidden;\n    padding: 1.5rem;\n    position: relative;\n    transition: all var(--neuro-transition);\n  }\n\n  .neuro-card-elevated {\n    box-shadow:\n    var(--neuro-shadow-distance) var(--neuro-shadow-distance) calc(var(--neuro-shadow-blur) * 1.5) var(--neuro-dark-shadow-color),\n    calc(-1 * var(--neuro-shadow-distance)) calc(-1 * var(--neuro-shadow-distance)) calc(var(--neuro-shadow-blur) * 1.5) var(--neuro-light-shadow-color);\n  }\n\n/* Neumorphe Eingabefelder */\n  .neuro-input {\n    background: var(--neuro-background);\n    border: none;\n    border-radius: var(--neuro-radius);\n    box-shadow: inset\n    calc(var(--neuro-shadow-distance) * 0.4) calc(var(--neuro-shadow-distance) * 0.4) calc(var(--neuro-shadow-blur) * 0.6) var(--neuro-dark-shadow-color),\n    inset calc(-0.4 * var(--neuro-shadow-distance)) calc(-0.4 * var(--neuro-shadow-distance)) calc(var(--neuro-shadow-blur) * 0.6) var(--neuro-light-shadow-color);\n    color: inherit;\n    font-size: var(--spacing-4);\n    outline: none;\n    padding: 0.75rem var(--spacing-4);\n    transition: all var(--neuro-transition);\n    width: 100%;\n  }\n\n  .neuro-input:focus {\n    box-shadow: inset\n    calc(var(--neuro-shadow-distance) * 0.5) calc(var(--neuro-shadow-distance) * 0.5) calc(var(--neuro-shadow-blur) * 0.7) var(--neuro-dark-shadow-color),\n    inset calc(-0.5 * var(--neuro-shadow-distance)) calc(-0.5 * var(--neuro-shadow-distance)) calc(var(--neuro-shadow-blur) * 0.7) var(--neuro-light-shadow-color);\n  }\n\n/* Neumorphe Checkbox */\n  .neuro-checkbox {\n    appearance: none;\n    background: var(--neuro-background);\n    border: none;\n    border-radius: calc(var(--neuro-radius) * 0.5);\n    box-shadow:\n    calc(var(--neuro-shadow-distance) * 0.3) calc(var(--neuro-shadow-distance) * 0.3) calc(var(--neuro-shadow-blur) * 0.5) var(--neuro-dark-shadow-color),\n    calc(-0.3 * var(--neuro-shadow-distance)) calc(-0.3 * var(--neuro-shadow-distance)) calc(var(--neuro-shadow-blur) * 0.5) var(--neuro-light-shadow-color);\n    cursor: pointer;\n    height: 1%.5rem;\n    margin: 0;\n    position: relative;\n    transition: all var(--neuro-transition);\n    width: 1%.5rem;\n  }\n\n  .neuro-checkbox:checked {\n    box-shadow: inset\n    calc(var(--neuro-shadow-distance) * 0.3) calc(var(--neuro-shadow-distance) * 0.3) calc(var(--neuro-shadow-blur) * 0.5) var(--neuro-dark-shadow-color),\n    inset calc(-0.3 * var(--neuro-shadow-distance)) calc(-0.3 * var(--neuro-shadow-distance)) calc(var(--neuro-shadow-blur) * 0.5) var(--neuro-light-shadow-color);\n  }\n\n  .neuro-checkbox:checked::after {\n    border-bottom: var(--border-width-thick) solid var(--accent-6, currentColor);\n    border-right: var(--border-width-thick) solid var(--accent-6, currentColor);\n    content: '';\n    display: block;\n    height: 0%.5rem;\n    left: 5%0%;\n    position: absolute;\n    top: var(--percentage-45);\n    transform: translate(-50%, -50%) rotate(45deg);\n    width: 0%.25rem;\n  }\n\n/* Intensitäts-Varianten */\n  .neuro-intensity-low {\n    --neuro-shadow-intensity: 0.05;\n  }\n\n  .neuro-intensity-medium {\n    --neuro-shadow-intensity: 0.1;\n  }\n\n  .neuro-intensity-high {\n    --neuro-shadow-intensity: 0.15;\n  }\n\n/* Größen-Varianten */\n  .neuro-small {\n    --neuro-radius: 0.5rem;\n    --neuro-shadow-distance: 0.25rem;\n    --neuro-shadow-blur: 0.5rem;\n  }\n\n  .neuro-medium {\n    --neuro-radius: var(--spacing-4);\n    --neuro-shadow-distance: 0.5rem;\n    --neuro-shadow-blur: var(--spacing-4);\n  }\n\n  .neuro-large {\n    --neuro-radius: 1.5rem;\n    --neuro-shadow-distance: 0.75rem;\n    --neuro-shadow-blur: 1.5rem;\n  }\n}\n\n/* Dark Mode Anpassungen */\n@media (prefers-color-scheme: dark) {\n  @layer components {\n    :root {\n      --neuro-shadow-intensity: 0.2;\n      --neuro-light-shadow-color: rgb(255 255 255 / calc(var(--neuro-shadow-intensity) * 0.6));\n      --neuro-dark-shadow-color: rgb(0 0 0 / var(--neuro-shadow-intensity));\n    }\n\n    .neuro-convex,\n    .neuro-button-convex {\n      background: linear-gradient(\n      145deg,\n      color-mix(in srgb, var(--neuro-background) 92%, white),\n      color-mix(in srgb, var(--neuro-background) 94%, black)\n      );\n    }\n\n    .neuro-concave {\n      background: linear-gradient(\n      145deg,\n      color-mix(in srgb, var(--neuro-background) 94%, black),\n      color-mix(in srgb, var(--neuro-background) 92%, white)\n      );\n    }\n  }\n}\n\n/* Reduzierte Bewegung */\n@media (prefers-reduced-motion: reduce) {\n  @layer components {\n    .neuro,\n    .neuro-button,\n    .neuro-card,\n    .neuro-input,\n    .neuro-checkbox {\n      transition: var(--transition-none);\n    }\n  }\n}\n\n/* Datei: effects/themes/neos.css */\n/**\n* Neo-Effekte\n*\n* Diese Datei enthält verschiedene Neo-Effekte für moderne UIs.\n* Die Effekte sind performant optimiert und berücksichtigen reduzierte Bewegung.\n*/\n\n@layer components {\n/* Basis Neo-Effekte */\n  .neo {\n    background: var(--neo-bg, #e0e5ec);\n    border-radius: var(--spacing-2-5);\n    box-shadow:\n    var(--spacing-2) var(--spacing-2) var(--spacing-4) var(--neo-shadow-dark, #a3b1c6),\n    -var(--spacing-2) -var(--spacing-2) var(--spacing-4) var(--neo-shadow-light, #fff);\n  }\n\n  .neo-inset {\n    background: var(--neo-bg, #e0e5ec);\n    border-radius: var(--spacing-2-5);\n    box-shadow:\n    inset var(--spacing-2) var(--spacing-2) var(--spacing-4) var(--neo-shadow-dark, #a3b1c6),\n    inset -var(--spacing-2) -var(--spacing-2) var(--spacing-4) var(--neo-shadow-light, #fff);\n  }\n\n/* Größen-Varianten */\n  .neo-sm {\n    border-radius: var(--spacing-1-5);\n    box-shadow:\n    var(--spacing-1) var(--spacing-1) var(--spacing-2) var(--neo-shadow-dark, #a3b1c6),\n    -var(--spacing-1) -var(--spacing-1) var(--spacing-2) var(--neo-shadow-light, #fff);\n  }\n\n  .neo-lg {\n    border-radius: var(--spacing-4);\n    box-shadow:\n    var(--spacing-1)(--border-width-thick) var(--spacing-1)(--border-width-thick) var(--spacing-2)(--spacing-1) var(--neo-shadow-dark, #a3b1c6),\n    -var(--spacing-1)(--border-width-thick) -var(--spacing-1)(--border-width-thick) var(--spacing-2)(--spacing-1) var(--neo-shadow-light, #fff);\n  }\n\n/* Hover-Effekte */\n  .neo-hover {\n    transition: all 0.3s ease;\n  }\n\n  .neo-hover:hover {\n    box-shadow:\n    var(--spacing-1)(--border-width-thick) var(--spacing-1)(--border-width-thick) var(--spacing-2)(--spacing-1) var(--neo-shadow-dark, #a3b1c6),\n    -var(--spacing-1)(--border-width-thick) -var(--spacing-1)(--border-width-thick) var(--spacing-2)(--spacing-1) var(--neo-shadow-light, #fff);\n    transform: translateY(calc(-1 * var(--border-width-thick)));\n  }\n\n  .neo-hover-inset:hover {\n    box-shadow:\n    inset var(--spacing-1)(--border-width-thick) var(--spacing-1)(--border-width-thick) var(--spacing-2)(--spacing-1) var(--neo-shadow-dark, #a3b1c6),\n    inset -var(--spacing-1)(--border-width-thick) -var(--spacing-1)(--border-width-thick) var(--spacing-2)(--spacing-1) var(--neo-shadow-light, #fff);\n  }\n\n/* Aktive Zustände */\n  .neo-active {\n    transition: all 0.2s ease;\n  }\n\n  .neo-active:active {\n    box-shadow:\n    inset var(--spacing-1) var(--spacing-1) var(--spacing-2) var(--neo-shadow-dark, #a3b1c6),\n    inset -var(--spacing-1) -var(--spacing-1) var(--spacing-2) var(--neo-shadow-light, #fff);\n    transform: var(--transform-scale-98);\n  }\n\n/* Farb-Varianten */\n  .neo-primary {\n    --neo-bg: var(--color-primary-light, #e6f3ff);\n    --neo-shadow-dark: var(--color-primary-dark, #b3d1ff);\n    --neo-shadow-light: var(--color-primary-lighter, #f0f7ff);\n  }\n\n  .neo-secondary {\n    --neo-bg: var(--color-secondary-light, #f0f0f0);\n    --neo-shadow-dark: var(--color-secondary-dark, #d1d1d1);\n    --neo-shadow-light: var(--color-secondary-lighter, #fff);\n  }\n\n  .neo-success {\n    --neo-bg: var(--color-success-light, #e6fff0);\n    --neo-shadow-dark: var(--color-success-dark, #b3ffd1);\n    --neo-shadow-light: var(--color-success-lighter, #f0fff7);\n  }\n\n  .neo-error {\n    --neo-bg: var(--color-error-light, #ffe6e6);\n    --neo-shadow-dark: var(--color-error-dark, #ffb3b3);\n    --neo-shadow-light: var(--color-error-lighter, #fff0f0);\n  }\n\n  .neo-warning {\n    --neo-bg: var(--color-warning-light, #fff7e6);\n    --neo-shadow-dark: var(--color-warning-dark, #ffe0b3);\n    --neo-shadow-light: var(--color-warning-lighter, #fffaf0);\n  }\n\n  .neo-info {\n    --neo-bg: var(--color-info-light, #e6f7ff);\n    --neo-shadow-dark: var(--color-info-dark, #b3e0ff);\n    --neo-shadow-light: var(--color-info-lighter, #f0f9ff);\n  }\n\n/* Spezielle Effekte */\n  .neo-glow {\n    box-shadow:\n    var(--spacing-2) var(--spacing-2) var(--spacing-4) var(--neo-shadow-dark, #a3b1c6),\n    -var(--spacing-2) -var(--spacing-2) var(--spacing-4) var(--neo-shadow-light, #fff),\n    0 0 var(--spacing-5) var(--neo-glow, rgb(59 130 246 / 50%));\n  }\n\n  .neo-border {\n    border: var(--border-width-thick) solid var(--neo-border, rgb(59 130 246 / 20%));\n  }\n\n  .neo-gradient {\n    background: linear-gradient(\n    145deg,\n    var(--neo-gradient-start, #e0e5ec),\n    var(--neo-gradient-end, #fff)\n    );\n  }\n}\n\n/* Reduzierte Bewegung */\n@media (prefers-reduced-motion: reduce) {\n  @layer components {\n    .neo-hover,\n    .neo-hover-inset,\n    .neo-active {\n      transition: var(--transition-none);\n    }\n\n    .neo-hover:hover,\n    .neo-active:active {\n      transform: var(--transform-none);\n    }\n  }\n}\n\n/* Datei: effects/themes/gradients.css */\n/**\n* Farbverläufe\n*\n* Diese Datei enthält verschiedene Farbverläufe für moderne UIs.\n* Die Effekte sind performant optimiert und berücksichtigen reduzierte Bewegung.\n*/\n\n@keyframes gradient-shift {\n  0% { background-position: 0% 50; }\n\n  50% { background-position: 100% 50; }\n\n  100% { background-position: 0% 50; }\n}\n\n@layer utilities {\n  .gradient-primary {\n    background: linear-gradient(\n    45deg,\n    var(--color-primary),\n    var(--color-primary-light)\n    );\n  }\n\n  .gradient-secondary {\n    background: linear-gradient(\n    45deg,\n    var(--color-secondary),\n    var(--color-secondary-light)\n    );\n  }\n\n  .gradient-accent {\n    background: linear-gradient(\n    45deg,\n    var(--color-accent),\n    var(--color-accent-light)\n    );\n  }\n\n  .gradient-rainbow {\n    animation: gradient-shift 5s ease infinite;\n    background: linear-gradient(\n    45deg,\n    #f00,\n    #ff7f00,\n    #ff0,\n    #0f0,\n    #00f,\n    #4b0082,\n    #8b00ff\n    );\n    background-size: 200% 200;\n  }\n\n  .gradient-metallic {\n    background: linear-gradient(\n    45deg,\n    #e6e6e6,\n    #fff,\n    #e6e6e6\n    );\n  }\n\n  .gradient-iridescent {\n    animation: gradient-shift 5s ease infinite;\n    background: linear-gradient(\n    45deg,\n    #f00,\n    #ff7300,\n    #fffb00,\n    #48ff00,\n    #00ffd5,\n    #002bff,\n    #7a00ff,\n    #ff00c8,\n    #f00\n    );\n    background-size: 200% 200;\n  }\n}\n\n/* Reduzierte Bewegung */\n@media (prefers-reduced-motion: reduce) {\n  @layer utilities {\n    .gradient-rainbow,\n    .gradient-iridescent {\n      animation: var(--animation-none);\n    }\n  }\n}\n\n/* Datei: effects/themes/gradient.css */\n/**\n* Gradient-Effekte\n*\n* Diese Datei enthält verschiedene Gradient-Effekte für moderne UIs.\n* Die Effekte sind performant optimiert und berücksichtigen reduzierte Bewegung.\n*/\n\n@keyframes gradient-shift {\n  0% {\n    background-position: 0% 50;\n  }\n\n  50% {\n    background-position: 100% 50;\n  }\n\n  100% {\n    background-position: 0% 50;\n  }\n}\n\n@layer components {\n  .gradient {\n    background: linear-gradient(\n    45deg,\n    var(--gradient-start, #3b82f6),\n    var(--gradient-end, #8b5cf6)\n    );\n  }\n\n  .gradient-horizontal {\n    background: linear-gradient(\n    90deg,\n    var(--gradient-start, #3b82f6),\n    var(--gradient-end, #8b5cf6)\n    );\n  }\n\n  .gradient-vertical {\n    background: linear-gradient(\n    180deg,\n    var(--gradient-start, #3b82f6),\n    var(--gradient-end, #8b5cf6)\n    );\n  }\n\n  .gradient-radial {\n    background: radial-gradient(\n    circle at center,\n    var(--gradient-start, #3b82f6),\n    var(--gradient-end, #8b5cf6)\n    );\n  }\n\n  .gradient-conic {\n    background: conic-gradient(\n    from 0deg,\n    var(--gradient-start, #3b82f6),\n    var(--gradient-end, #8b5cf6)\n    );\n  }\n\n  .gradient-animated {\n    animation: gradient-shift 3s ease infinite;\n    background: linear-gradient(\n    45deg,\n    var(--gradient-start, #3b82f6),\n    var(--gradient-mid, #8b5cf6),\n    var(--gradient-end, #3b82f6)\n    );\n    background-size: 200% 200;\n  }\n\n  .gradient-hover {\n    background: linear-gradient(\n    45deg,\n    var(--gradient-start, #3b82f6),\n    var(--gradient-end, #8b5cf6)\n    );\n    transition: background-position 0.3s ease;\n  }\n\n  .gradient-hover:hover {\n    background-position: 100% 100;\n  }\n\n  .gradient-text {\n    background: linear-gradient(\n    45deg,\n    var(--gradient-start, #3b82f6),\n    var(--gradient-end, #8b5cf6)\n    );\n    background-clip: text;\n    color: transparent;\n  }\n\n  .gradient-border {\n    background: linear-gradient(\n    45deg,\n    var(--gradient-start, #3b82f6),\n    var(--gradient-end, #8b5cf6)\n    );\n    padding: var(--border-width-thick);\n    position: relative;\n  }\n\n  .gradient-border > * {\n    background: var(--gradient-bg, white);\n  }\n\n  .gradient-color-primary {\n    --gradient-start: var(--gradient-primary-start, #3b82f6);\n    --gradient-end: var(--gradient-primary-end, #1d4ed8);\n  }\n\n  .gradient-color-secondary {\n    --gradient-start: var(--gradient-secondary-start, #6b7280);\n    --gradient-end: var(--gradient-secondary-end, #374151);\n  }\n\n  .gradient-color-success {\n    --gradient-start: var(--gradient-success-start, #10b981);\n    --gradient-end: var(--gradient-success-end, #047857);\n  }\n\n  .gradient-color-error {\n    --gradient-start: var(--gradient-error-start, #ef4444);\n    --gradient-end: var(--gradient-error-end, #b91c1c);\n  }\n\n  .gradient-color-warning {\n    --gradient-start: var(--gradient-warning-start, #f59e0b);\n    --gradient-end: var(--gradient-warning-end, #b45309);\n  }\n\n  .gradient-color-info {\n    --gradient-start: var(--gradient-info-start, #06b6d4);\n    --gradient-end: var(--gradient-info-end, #0e7490);\n  }\n}\n\n/* Reduzierte Bewegung */\n@media (prefers-reduced-motion: reduce) {\n  @layer components {\n    .gradient-animated {\n      animation: var(--animation-none);\n      background-size: 100% 100;\n    }\n\n    .gradient-hover {\n      transition: var(--transition-none);\n    }\n\n    .gradient-hover:hover {\n      background-position: 0% 0;\n    }\n  }\n}\n\n/* Datei: effects/themes/blends.css */\n/**\n* Blend-Effekte\n*\n* Diese Datei enthält verschiedene Blend-Effekte für moderne UIs.\n* Die Effekte sind performant optimiert und berücksichtigen reduzierte Bewegung.\n*/\n\n@layer utilities {\n  .blend-multiply {\n    mix-blend-mode: multiply;\n  }\n\n  .blend-screen {\n    mix-blend-mode: screen;\n  }\n\n  .blend-overlay {\n    mix-blend-mode: overlay;\n  }\n\n  .blend-darken {\n    mix-blend-mode: darken;\n  }\n\n  .blend-lighten {\n    mix-blend-mode: lighten;\n  }\n\n  .blend-color-dodge {\n    mix-blend-mode: color-dodge;\n  }\n\n  .blend-color-burn {\n    mix-blend-mode: color-burn;\n  }\n\n  .blend-hard-light {\n    mix-blend-mode: hard-light;\n  }\n\n  .blend-soft-light {\n    mix-blend-mode: soft-light;\n  }\n\n  .blend-difference {\n    mix-blend-mode: difference;\n  }\n\n  .blend-exclusion {\n    mix-blend-mode: exclusion;\n  }\n\n  .blend-hue {\n    mix-blend-mode: hue;\n  }\n\n  .blend-saturation {\n    mix-blend-mode: saturation;\n  }\n\n  .blend-color {\n    mix-blend-mode: color;\n  }\n\n  .blend-luminosity {\n    mix-blend-mode: luminosity;\n  }\n\n  .blend-normal {\n    mix-blend-mode: normal;\n  }\n\n  .blend-isolate {\n    isolation: isolate;\n  }\n\n  .blend-auto {\n    isolation: auto;\n  }\n}\n\n/* Reduzierte Bewegung */\n@media (prefers-reduced-motion: reduce) {\n  @layer utilities {\n    .blend-multiply,\n    .blend-screen,\n    .blend-overlay,\n    .blend-darken,\n    .blend-lighten,\n    .blend-color-dodge,\n    .blend-color-burn,\n    .blend-hard-light,\n    .blend-soft-light,\n    .blend-difference,\n    .blend-exclusion,\n    .blend-hue,\n    .blend-saturation,\n    .blend-color,\n    .blend-luminosity,\n    .blend-normal {\n      transition: var(--transition-none);\n    }\n  }\n}\n\n/* Datei: effects/themes/3d.css */\n/**\n* 3D-Effekte\n*\n* Diese Datei enthält verschiedene 3D-Effekte für moderne UIs.\n* Die Effekte sind performant optimiert und berücksichtigen reduzierte Bewegung.\n*/\n\n@layer components {\n  .transform-3d {\n    perspective: var(--space-large-1000);\n    transform-style: preserve-3d;\n  }\n\n  .rotate-3d {\n    transform: rotate3d(1%, 1, 1, 45deg);\n    transition: transform 0.3s ease;\n  }\n\n  .rotate-3d:hover {\n    transform: rotate3d(1%, 1, 1, 90deg);\n  }\n\n  .rotate-3d-x {\n    transform: rotateX(45deg);\n    transition: transform 0.3s ease;\n  }\n\n  .rotate-3d-x:hover {\n    transform: rotateX(90deg);\n  }\n\n  .rotate-3d-y {\n    transform: rotateY(45deg);\n    transition: transform 0.3s ease;\n  }\n\n  .rotate-3d-y:hover {\n    transform: rotateY(90deg);\n  }\n\n  .rotate-3d-z {\n    transform: rotateZ(45deg);\n    transition: transform 0.3s ease;\n  }\n\n  .rotate-3d-z:hover {\n    transform: rotateZ(90deg);\n  }\n\n  .flip-3d {\n    transform-style: preserve-3d;\n    transition: transform 0.6s;\n  }\n\n  .flip-3d:hover {\n    transform: rotateY(180deg);\n  }\n\n  .flip-3d-front,\n  .flip-3d-back {\n    backface-visibility: hidden;\n    height: 100%;\n    left: 0%;\n    position: absolute;\n    top: 0%;\n    width: 100%;\n  }\n\n  .flip-3d-back {\n    transform: rotateY(180deg);\n  }\n\n  .scale-3d {\n    transform: scale3d(1%, 1, 1);\n    transition: transform 0.3s ease;\n  }\n\n  .scale-3d:hover {\n    transform: scale3d(1.2%, 1.2, 1.2);\n  }\n\n  .translate-3d {\n    transform: translate3d(0%, 0, 0);\n    transition: transform 0.3s ease;\n  }\n\n  .translate-3d:hover {\n    transform: translate3d(var(--spacing-5), var(--spacing-5), var(--spacing-5));\n  }\n\n  .skew-3d {\n    transform: skew(10deg, 10deg);\n    transition: transform 0.3s ease;\n  }\n\n  .skew-3d:hover {\n    transform: skew(20deg, 20deg);\n  }\n\n  .perspective-3d {\n    perspective: var(--space-large-1000);\n  }\n\n  .perspective-3d-sm {\n    perspective: 500px;\n  }\n\n  .perspective-3d-lg {\n    perspective: 2000px;\n  }\n\n  .origin-3d {\n    transform-origin: center center;\n  }\n\n  .origin-3d-top {\n    transform-origin: center top;\n  }\n\n  .origin-3d-bottom {\n    transform-origin: center bottom;\n  }\n\n  .origin-3d-left {\n    transform-origin: left center;\n  }\n\n  .origin-3d-right {\n    transform-origin: right center;\n  }\n\n  .origin-3d-top-left {\n    transform-origin: left top;\n  }\n\n  .origin-3d-top-right {\n    transform-origin: right top;\n  }\n\n  .origin-3d-bottom-left {\n    transform-origin: left bottom;\n  }\n\n  .origin-3d-bottom-right {\n    transform-origin: right bottom;\n  }\n}\n\n/* Reduzierte Bewegung */\n@media (prefers-reduced-motion: reduce) {\n  @layer components {\n    .rotate-3d,\n    .rotate-3d-x,\n    .rotate-3d-y,\n    .rotate-3d-z,\n    .flip-3d,\n    .scale-3d,\n    .translate-3d,\n    .skew-3d {\n      transition: var(--transition-none);\n    }\n\n    .rotate-3d:hover,\n    .rotate-3d-x:hover,\n    .rotate-3d-y:hover,\n    .rotate-3d-z:hover,\n    .flip-3d:hover,\n    .scale-3d:hover,\n    .translate-3d:hover,\n    .skew-3d:hover {\n      transform: var(--transform-none);\n    }\n  }\n}\n\n/* Datei: effects/particles/triangles.css */\n/**\n* Triangles Partikel-Effekt\n*\n* Dreieckige Partikel mit geometrischen Bewegungen – für moderne, abstrakte Designs.\n* Dieser Effekt ist performant optimiert und berücksichtigt reduzierte Bewegung.\n*/\n\n@keyframes triangles-float {\n  0% {\n    opacity: var(--opacity-0);\n    transform: translate(0%, 0%) rotate(0deg);\n  }\n\n  20% {\n    opacity: var(--opacity-100);\n    transform: translate(var(--spacing-5), calc(-1 * var(--spacing-5))) rotate(30deg);\n  }\n\n  50% {\n    transform: translate(50px, calc(-1 * var(--spacing-2-5))) rotate(90deg);\n  }\n\n  80% {\n    opacity: var(--opacity-100);\n    transform: translate(80px, calc(-1 * var(--spacing-5))) rotate(150deg);\n  }\n\n  100% {\n    opacity: var(--opacity-0);\n    transform: translate(100px, 0%) rotate(180deg);\n  }\n}\n\n@keyframes triangles-float-alt {\n  0% {\n    opacity: var(--opacity-0);\n    transform: translate(0%, 0%) rotate(0deg);\n  }\n\n  20% {\n    opacity: var(--opacity-100);\n    transform: translate(-var(--spacing-5), calc(-1 * var(--spacing-5))) rotate(-30deg);\n  }\n\n  50% {\n    transform: translate(-50px, calc(-1 * var(--spacing-2-5))) rotate(-90deg);\n  }\n\n  80% {\n    opacity: var(--opacity-100);\n    transform: translate(-80px, calc(-1 * var(--spacing-5))) rotate(-150deg);\n  }\n\n  100% {\n    opacity: var(--opacity-0);\n    transform: translate(-100px, 0%) rotate(-180deg);\n  }\n}\n\n@layer components {\n  .triangles {\n    overflow: hidden;\n    position: relative;\n  }\n\n  .triangles::before,\n  .triangles::after {\n    animation: triangles-float 8s var(--easing-smooth) infinite;\n    background: var(--triangles-color, rgb(120 90 255 / 70%));\n    clip-path: polygon(50% 0%, 0% 100%, 100% 100%);\n    content: '';\n    height: var(--spacing-1)(--spacing-1);\n    position: absolute;\n    width: var(--spacing-1)(--spacing-1);\n  }\n\n  .triangles::before {\n    left: 3%0%;\n    top: 3%0%;\n  }\n\n  .triangles::after {\n    animation-delay: var(--animation-duration-slowest);\n    animation-name: triangles-float-alt;\n    left: 6%0%;\n    top: 5%0%;\n  }\n\n/* Viele Dreiecke */\n  .triangles-many {\n    position: relative;\n  }\n\n  .triangles-many::before,\n  .triangles-many::after {\n    animation: triangles-float 8s var(--easing-smooth) infinite;\n    background: var(--triangles-color, rgb(120 90 255 / 70%));\n    clip-path: polygon(50% 0%, 0% 100%, 100% 100%);\n    content: '';\n    height: var(--spacing-1)(--spacing-1);\n    position: absolute;\n    width: var(--spacing-1)(--spacing-1);\n  }\n\n  .triangles-many::before {\n    animation-delay: var(--animation-duration-slow);\n    left: 2%0%;\n    top: 4%0%;\n  }\n\n  .triangles-many::after {\n    animation-delay: var(--animation-duration-ultra-slow);\n    animation-name: triangles-float-alt;\n    left: 7%0%;\n    top: 6%0%;\n  }\n\n  .triangles-many .triangle {\n    animation: triangles-float 8s var(--easing-smooth) infinite;\n    animation-delay: var(--animation-duration-slower);\n    background: var(--triangles-color, rgb(120 90 255 / 70%));\n    clip-path: polygon(50% 0%, 0% 100%, 100% 100%);\n    height: var(--spacing-1)(--spacing-1);\n    left: 5%0%;\n    position: absolute;\n    top: 2%0%;\n    width: var(--spacing-1)(--spacing-1);\n  }\n\n  .triangles-many .triangle-alt {\n    animation: triangles-float-alt 8s var(--easing-smooth) infinite;\n    animation-delay: 3.5s;\n    background: var(--triangles-color, rgb(120 90 255 / 70%));\n    clip-path: polygon(50% 0%, 0% 100%, 100% 100%);\n    height: var(--spacing-1)(--spacing-1);\n    left: 4%0%;\n    position: absolute;\n    top: 7%0%;\n    width: var(--spacing-1)(--spacing-1);\n  }\n\n/* Größenvarianten */\n  .triangles-sm::before,\n  .triangles-sm::after,\n  .triangles-sm .triangle,\n  .triangles-sm .triangle-alt {\n    height: var(--spacing-2-5);\n    width: var(--spacing-2-5);\n  }\n\n  .triangles-lg::before,\n  .triangles-lg::after,\n  .triangles-lg .triangle,\n  .triangles-lg .triangle-alt {\n    height: var(--spacing-5);\n    width: var(--spacing-5);\n  }\n\n/* Geschwindigkeitsvarianten */\n  .triangles-slow::before,\n  .triangles-slow::after,\n  .triangles-slow .triangle,\n  .triangles-slow .triangle-alt {\n    animation-duration: var(--animation-duration-ultra-slow);\n  }\n\n  .triangles-fast::before,\n  .triangles-fast::after,\n  .triangles-fast .triangle,\n  .triangles-fast .triangle-alt {\n    animation-duration: var(--animation-duration-ultra-slow);\n  }\n\n/* Farbvarianten */\n  .triangles-purple {\n    --triangles-color: rgb(120 90 255 / 70%);\n  }\n\n  .triangles-blue {\n    --triangles-color: rgb(90 150 255 / 70%);\n  }\n\n  .triangles-teal {\n    --triangles-color: rgb(90 220 220 / 70%);\n  }\n\n  .triangles-pink {\n    --triangles-color: rgb(255 120 220 / 70%);\n  }\n\n  .triangles-orange {\n    --triangles-color: rgb(255 150 90 / 70%);\n  }\n\n/* Verschiedene Formen */\n  .triangles-inverted::before,\n  .triangles-inverted::after,\n  .triangles-inverted .triangle,\n  .triangles-inverted .triangle-alt {\n    clip-path: polygon(50% 100%, 0% 0%, 100% 0%);\n  }\n\n  .triangles-right::before,\n  .triangles-right::after,\n  .triangles-right .triangle,\n  .triangles-right .triangle-alt {\n    clip-path: polygon(0% 0%, 0% 100%, 100% 50%);\n  }\n\n  .triangles-left::before,\n  .triangles-left::after,\n  .triangles-left .triangle,\n  .triangles-left .triangle-alt {\n    clip-path: polygon(100% 0%, 100% 100%, 0% 50%);\n  }\n}\n\n/* Reduzierte Bewegung */\n@media (prefers-reduced-motion: reduce) {\n  @layer components {\n    .triangles::before,\n    .triangles::after,\n    .triangles-many::before,\n    .triangles-many::after,\n    .triangles-many .triangle,\n    .triangles-many .triangle-alt {\n      animation: var(--animation-none);\n      opacity: var(--opacity-0);\n    }\n  }\n}\n\n/* Datei: effects/particles/stars.css */\n/**\n* Stars Partikel-Effekt\n*\n* Funkelnde Sterne, die langsam über den Bildschirm ziehen – für einen Nachthimmel-Effekt.\n* Dieser Effekt ist performant optimiert und berücksichtigt reduzierte Bewegung.\n*/\n\n@keyframes stars-twinkle {\n  0, 100% {\n    opacity: var(--opacity-30);\n    transform: scale(0.8);\n  }\n\n  50% {\n    opacity: var(--opacity-100);\n    transform: var(--transform-scale-100);\n  }\n}\n\n@keyframes stars-drift {\n  0% {\n    transform: translateX(0%) translateY(0%);\n  }\n\n  25% {\n    transform: translateX(var(--spacing-1)) translateY(var(--border-width));\n  }\n\n  50% {\n    transform: translateX(var(--spacing-1)) translateY(0%);\n  }\n\n  75% {\n    transform: translateX(var(--spacing-1)) translateY(calc(-1 * var(--border-width)));\n  }\n\n  100% {\n    transform: translateX(0%) translateY(0%);\n  }\n}\n\n@layer components {\n  .stars {\n    overflow: hidden;\n    position: relative;\n  }\n\n  .stars::before,\n  .stars::after,\n  .stars .star {\n    animation:\n    stars-twinkle 4s var(--easing-smooth) infinite,\n    stars-drift 20s linear infinite;\n    background: var(--stars-color, rgb(255 255 200));\n    border-radius: 5px;\n    box-shadow: 0 0 var(--spacing-1) var(--border-width) var(--stars-glow, rgb(255 255 200 / 70%));\n    content: '';\n    height: var(--spacing-1);\n    position: absolute;\n    width: var(--spacing-1);\n  }\n\n  .stars::before {\n    right: 2%0%;\n    top: 3%0%;\n  }\n\n  .stars::after {\n    animation-delay: var(--animation-duration-slow), 5s;\n    right: 5%0%;\n    top: 6%0%;\n  }\n\n  .stars .star {\n    animation-delay: var(--animation-duration-slowest), 10s;\n    right: 8%0%;\n    top: 2%0%;\n  }\n\n  .stars .star-alt {\n    animation:\n    stars-twinkle 4s var(--easing-smooth) infinite,\n    stars-drift 20s linear infinite;\n    animation-delay: var(--animation-duration-ultra-slow), 15s;\n    background: var(--stars-color, rgb(255 255 200));\n    border-radius: 5px;\n    box-shadow: 0 0 var(--spacing-1) var(--border-width) var(--stars-glow, rgb(255 255 200 / 70%));\n    height: var(--spacing-1);\n    position: absolute;\n    right: 3%0%;\n    top: 7%0%;\n    width: var(--spacing-1);\n  }\n\n/* Dichte Sterne */\n  .stars-dense {\n    position: relative;\n  }\n\n  .stars-dense::before,\n  .stars-dense::after,\n  .stars-dense .star,\n  .stars-dense .star-alt,\n  .stars-dense .star-extra,\n  .stars-dense .star-extra-alt {\n    animation:\n    stars-twinkle 4s var(--easing-smooth) infinite,\n    stars-drift 20s linear infinite;\n    background: var(--stars-color, rgb(255 255 200));\n    border-radius: 5px;\n    box-shadow: 0 0 var(--spacing-1) var(--border-width) var(--stars-glow, rgb(255 255 200 / 70%));\n    content: '';\n    height: var(--spacing-1);\n    position: absolute;\n    width: var(--spacing-1);\n  }\n\n  .stars-dense .star-extra {\n    animation-delay: var(--animation-duration-slower), 8s;\n    right: 1%0%;\n    top: 4%0%;\n  }\n\n  .stars-dense .star-extra-alt {\n    animation-delay: 2.5s, 12s;\n    right: 7%0%;\n    top: 5%0%;\n  }\n\n/* Größenvarianten */\n  .stars-sm::before,\n  .stars-sm::after,\n  .stars-sm .star,\n  .stars-sm .star-alt,\n  .stars-sm .star-extra,\n  .stars-sm .star-extra-alt {\n    box-shadow: 0 0 var(--border-width-thick) 0.5 var(--spacing-1) var(--stars-glow, rgb(255 255 200 / 70%));\n    height: var(--border-width-thick);\n    width: var(--border-width-thick);\n  }\n\n  .stars-lg::before,\n  .stars-lg::after,\n  .stars-lg .star,\n  .stars-lg .star-alt,\n  .stars-lg .star-extra,\n  .stars-lg .star-extra-alt {\n    box-shadow: 0 0 6px var(--border-width-thick) var(--stars-glow, rgb(255 255 200 / 70%));\n    height: var(--spacing-1);\n    width: var(--spacing-1);\n  }\n\n/* Animationsvarianten */\n  .stars-slow::before,\n  .stars-slow::after,\n  .stars-slow .star,\n  .stars-slow .star-alt,\n  .stars-slow .star-extra,\n  .stars-slow .star-extra-alt {\n    animation-duration: var(--animation-duration-ultra-slow), 30s;\n  }\n\n  .stars-fast::before,\n  .stars-fast::after,\n  .stars-fast .star,\n  .stars-fast .star-alt,\n  .stars-fast .star-extra,\n  .stars-fast .star-extra-alt {\n    animation-duration: var(--animation-duration-slowest), 15s;\n  }\n\n/* Farbvarianten */\n  .stars-white {\n    --stars-color: rgb(255 255 255);\n    --stars-glow: rgb(255 255 255 / 70%);\n  }\n\n  .stars-blue {\n    --stars-color: rgb(200 220 255);\n    --stars-glow: rgb(200 220 255 / 70%);\n  }\n\n  .stars-gold {\n    --stars-color: rgb(255 215 0);\n    --stars-glow: rgb(255 215 0 / 70%);\n  }\n\n  .stars-multi .star {\n    --stars-color: rgb(255 150 150);\n    --stars-glow: rgb(255 150 150 / 70%);\n  }\n\n  .stars-multi .star-alt {\n    --stars-color: rgb(150 255 150);\n    --stars-glow: rgb(150 255 150 / 70%);\n  }\n\n  .stars-multi .star-extra {\n    --stars-color: rgb(150 150 255);\n    --stars-glow: rgb(150 150 255 / 70%);\n  }\n\n  .stars-multi .star-extra-alt {\n    --stars-color: rgb(255 255 150);\n    --stars-glow: rgb(255 255 150 / 70%);\n  }\n}\n\n/* Reduzierte Bewegung */\n@media (prefers-reduced-motion: reduce) {\n  @layer components {\n    .stars::before,\n    .stars::after,\n    .stars .star,\n    .stars .star-alt,\n    .stars-dense .star-extra,\n    .stars-dense .star-extra-alt {\n      animation: var(--animation-none);\n      opacity: var(--opacity-70);\n      transform: var(--transform-scale-100);\n    }\n  }\n}\n\n/* Datei: effects/particles/snow.css */\n/**\n* Snow Partikel-Effekt\n*\n* Herabfallende Schneeflocken – ideal für winterliche Szenarien.\n* Dieser Effekt ist performant optimiert und berücksichtigt reduzierte Bewegung.\n*/\n\n@keyframes snow-fall-1 {\n  0% {\n    opacity: var(--opacity-0);\n    transform: translateY(calc(-1% * var(--spacing-5))) translateX(0%);\n  }\n\n  20% {\n    opacity: var(--opacity-100);\n    transform: translateX(0%) translateX(var(--spacing-2-5));\n  }\n\n  40% {\n    transform: translateY(var(--spacing-5)) translateX(0%);\n  }\n\n  60% {\n    transform: translateY(40px) translateX(calc(-1 * var(--spacing-2-5)));\n  }\n\n  80% {\n    transform: translateY(60px) translateX(0%);\n  }\n\n  100% {\n    opacity: var(--opacity-0);\n    transform: translateY(80px) translateX(var(--spacing-2-5));\n  }\n}\n\n@keyframes snow-fall-2 {\n  0% {\n    opacity: var(--opacity-0);\n    transform: translateY(calc(-1% * var(--spacing-5))) translateX(0%);\n  }\n\n  20% {\n    opacity: var(--opacity-100);\n    transform: translateX(0%) translateX(calc(-1 * var(--spacing-2-5)));\n  }\n\n  40% {\n    transform: translateY(var(--spacing-5)) translateX(0%);\n  }\n\n  60% {\n    transform: translateY(40px) translateX(var(--spacing-2-5));\n  }\n\n  80% {\n    transform: translateY(60px) translateX(0%);\n  }\n\n  100% {\n    opacity: var(--opacity-0);\n    transform: translateY(80px) translateX(calc(-1 * var(--spacing-2-5)));\n  }\n}\n\n@layer components {\n  .snow {\n    overflow: hidden;\n    position: relative;\n  }\n\n  .snow::before,\n  .snow::after {\n    animation: snow-fall-1 6s linear infinite;\n    background: var(--snow-color, rgb(255 255 255 / 90%));\n    border-radius: 5px;\n    content: '';\n    height: var(--spacing-1-5);\n    position: absolute;\n    top: -6px;\n    width: var(--spacing-1-5);\n  }\n\n  .snow::before {\n    left: 3%0%;\n  }\n\n  .snow::after {\n    animation-delay: var(--animation-duration-slowest);\n    animation-name: snow-fall-2;\n    left: 6%0%;\n  }\n\n/* Snow mit mehreren Flocken */\n  .snow-many {\n    position: relative;\n  }\n\n  .snow-many::before,\n  .snow-many::after {\n    animation: snow-fall-1 6s linear infinite;\n    background: var(--snow-color, rgb(255 255 255 / 90%));\n    border-radius: 5px;\n    content: '';\n    height: var(--spacing-1-5);\n    position: absolute;\n    top: -6px;\n    width: var(--spacing-1-5);\n  }\n\n  .snow-many::before {\n    animation-delay: var(--animation-duration-slow);\n    left: 1%0%;\n  }\n\n  .snow-many::after {\n    animation-delay: var(--animation-duration-ultra-slow);\n    animation-name: snow-fall-2;\n    left: 5%0%;\n  }\n\n  .snow-many .flake {\n    animation: snow-fall-1 6s linear infinite;\n    animation-delay: var(--animation-duration-medium);\n    background: var(--snow-color, rgb(255 255 255 / 90%));\n    border-radius: 5px;\n    height: var(--spacing-1-5);\n    left: 7%0%;\n    position: absolute;\n    top: -6px;\n    width: var(--spacing-1-5);\n  }\n\n  .snow-many .flake-alt {\n    animation: snow-fall-2 6s linear infinite;\n    animation-delay: var(--animation-duration-slower);\n    background: var(--snow-color, rgb(255 255 255 / 90%));\n    border-radius: 5px;\n    height: var(--spacing-1-5);\n    left: 9%0%;\n    position: absolute;\n    top: -6px;\n    width: var(--spacing-1-5);\n  }\n\n/* Größenvarianten */\n  .snow-sm::before,\n  .snow-sm::after,\n  .snow-sm .flake,\n  .snow-sm .flake-alt {\n    height: var(--spacing-1);\n    width: var(--spacing-1);\n  }\n\n  .snow-lg::before,\n  .snow-lg::after,\n  .snow-lg .flake,\n  .snow-lg .flake-alt {\n    height: var(--spacing-2);\n    width: var(--spacing-2);\n  }\n\n/* Geschwindigkeitsvarianten */\n  .snow-slow::before,\n  .snow-slow::after,\n  .snow-slow .flake,\n  .snow-slow .flake-alt {\n    animation-duration: var(--animation-duration-ultra-slow);\n  }\n\n  .snow-fast::before,\n  .snow-fast::after,\n  .snow-fast .flake,\n  .snow-fast .flake-alt {\n    animation-duration: var(--animation-duration-ultra-slow);\n  }\n\n/* Farb-Varianten */\n  .snow-blue {\n    --snow-color: rgb(230 240 255 / 90%);\n  }\n\n  .snow-silver {\n    --snow-color: rgb(220 220 230 / 90%);\n  }\n\n  .snow-crystal {\n    --snow-color: rgb(240 255 255 / 90%);\n  }\n\n/* Schneekristalle statt runder Flocken */\n  .snow-crystal::before,\n  .snow-crystal::after,\n  .snow-crystal .flake,\n  .snow-crystal .flake-alt {\n    clip-path: polygon(\n    50% 0%, 61% 35%, 98% 35%, 68% 57%, 79% 91%,\n    50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%\n    );\n    height: var(--spacing-2-5);\n    width: var(--spacing-2-5);\n  }\n}\n\n/* Reduzierte Bewegung */\n@media (prefers-reduced-motion: reduce) {\n  @layer components {\n    .snow::before,\n    .snow::after,\n    .snow-many::before,\n    .snow-many::after,\n    .snow-many .flake,\n    .snow-many .flake-alt {\n      animation: var(--animation-none);\n      opacity: var(--opacity-0);\n    }\n  }\n}\n\n/* Datei: effects/particles/sea-anemone.css */\n/**\n* Sea Anemone Partikel-Effekt\n*\n* Bewegungen, die an Seeanemonen erinnern – für organische, fließende Effekte.\n* Dieser Effekt ist performant optimiert und berücksichtigt reduzierte Bewegung.\n*/\n\n@keyframes sea-anemone-tentacle {\n  0, 100% {\n    height: 5%0px;\n    transform: rotate(-5deg);\n  }\n\n  25% {\n    height: var(--spacing-15);\n    transform: rotate(3deg);\n  }\n\n  50% {\n    height: var(--spacing-5)(--spacing-1);\n    transform: rotate(5deg);\n  }\n\n  75% {\n    height: var(--spacing-4)(--spacing-1);\n    transform: rotate(-3deg);\n  }\n}\n\n@keyframes sea-anemone-tentacle-alt {\n  0, 100% {\n    height: var(--spacing-10);\n    transform: rotate(5deg);\n  }\n\n  25% {\n    height: var(--spacing-3)(--spacing-1);\n    transform: rotate(-3deg);\n  }\n\n  50% {\n    height: var(--spacing-4)(--spacing-1);\n    transform: rotate(-5deg);\n  }\n\n  75% {\n    height: 5%0px;\n    transform: rotate(3deg);\n  }\n}\n\n@layer components {\n  .sea-anemone {\n    display: flex;\n    justify-content: center;\n    min-height: 7%0px;\n    overflow: hidden;\n    position: relative;\n    width: 100%;\n  }\n\n  .sea-anemone::before,\n  .sea-anemone::after,\n  .sea-anemone .tentacle {\n    animation: sea-anemone-tentacle 8s var(--easing-smooth) infinite;\n    background: linear-gradient(to bottom, var(--anemone-color, rgb(50 150 230 / 70%)), transparent);\n    border-radius: 5%0px;\n    bottom: 0%;\n    content: '';\n    position: absolute;\n    width: var(--spacing-1);\n  }\n\n  .sea-anemone::before {\n    left: calc(50% - var(--spacing-1)(--spacing-1));\n  }\n\n  .sea-anemone::after {\n    animation: sea-anemone-tentacle-alt 8s var(--easing-smooth) infinite;\n    animation-delay: var(--animation-duration-normal);\n    left: calc(50% - var(--spacing-1));\n  }\n\n  .sea-anemone .tentacle {\n    animation-delay: 0.6s;\n    left: calc(50% + var(--spacing-1));\n  }\n\n  .sea-anemone .tentacle-alt {\n    animation: sea-anemone-tentacle-alt 8s var(--easing-smooth) infinite;\n    animation-delay: 0.9s;\n    background: linear-gradient(to bottom, var(--anemone-color, rgb(50 150 230 / 70%)), transparent);\n    border-radius: 5%0px;\n    bottom: 0%;\n    content: '';\n    left: calc(50% + var(--spacing-1)(--spacing-1));\n    position: absolute;\n    width: var(--spacing-1);\n  }\n\n/* Varianten */\n  .sea-anemone-sm::before,\n  .sea-anemone-sm::after,\n  .sea-anemone-sm .tentacle,\n  .sea-anemone-sm .tentacle-alt {\n    width: var(--spacing-1);\n  }\n\n  .sea-anemone-lg::before,\n  .sea-anemone-lg::after,\n  .sea-anemone-lg .tentacle,\n  .sea-anemone-lg .tentacle-alt {\n    width: var(--spacing-1-5);\n  }\n\n  .sea-anemone-slow::before,\n  .sea-anemone-slow::after,\n  .sea-anemone-slow .tentacle,\n  .sea-anemone-slow .tentacle-alt {\n    animation-duration: var(--animation-duration-ultra-slow);\n  }\n\n  .sea-anemone-fast::before,\n  .sea-anemone-fast::after,\n  .sea-anemone-fast .tentacle,\n  .sea-anemone-fast .tentacle-alt {\n    animation-duration: var(--animation-duration-ultra-slow);\n  }\n\n/* Viele Tentakel */\n  .sea-anemone-many::before {\n    left: calc(50% - var(--spacing-2)(--spacing-1));\n  }\n\n  .sea-anemone-many::after {\n    left: calc(50% - var(--spacing-1)(--spacing-1));\n  }\n\n  .sea-anemone-many .tentacle {\n    left: calc(50% - var(--spacing-1));\n  }\n\n  .sea-anemone-many .tentacle-alt {\n    left: calc(50% + var(--spacing-1));\n  }\n\n  .sea-anemone-many .tentacle-extra {\n    animation: sea-anemone-tentacle 8s var(--easing-smooth) infinite;\n    animation-delay: 1.2s;\n    background: linear-gradient(to bottom, var(--anemone-color, rgb(50 150 230 / 70%)), transparent);\n    border-radius: 5%0px;\n    bottom: 0%;\n    content: '';\n    left: calc(50% + var(--spacing-1)(--spacing-1));\n    position: absolute;\n    width: var(--spacing-1);\n  }\n\n  .sea-anemone-many .tentacle-extra-alt {\n    animation: sea-anemone-tentacle-alt 8s var(--easing-smooth) infinite;\n    animation-delay: var(--animation-duration-slower);\n    background: linear-gradient(to bottom, var(--anemone-color, rgb(50 150 230 / 70%)), transparent);\n    border-radius: 5%0px;\n    bottom: 0%;\n    content: '';\n    left: calc(50% + var(--spacing-2)(--spacing-1));\n    position: absolute;\n    width: var(--spacing-1);\n  }\n\n/* Farbvarianten */\n  .sea-anemone-blue {\n    --anemone-color: rgb(50 150 230 / 70%);\n  }\n\n  .sea-anemone-teal {\n    --anemone-color: rgb(50 220 200 / 70%);\n  }\n\n  .sea-anemone-purple {\n    --anemone-color: rgb(180 120 230 / 70%);\n  }\n\n  .sea-anemone-pink {\n    --anemone-color: rgb(230 120 180 / 70%);\n  }\n\n  .sea-anemone-green {\n    --anemone-color: rgb(120 200 120 / 70%);\n  }\n}\n\n/* Reduzierte Bewegung */\n@media (prefers-reduced-motion: reduce) {\n  @layer components {\n    .sea-anemone::before,\n    .sea-anemone::after,\n    .sea-anemone .tentacle,\n    .sea-anemone .tentacle-alt,\n    .sea-anemone-many .tentacle-extra,\n    .sea-anemone-many .tentacle-extra-alt {\n      animation: var(--animation-none);\n      height: var(--spacing-10);\n      transform: rotate(0deg);\n    }\n  }\n}\n\n/* Datei: effects/particles/particles.css */\n/**\n* Partikel-Effekte\n*\n* Diese Datei enthält verschiedene Partikel-Effekte für moderne UIs.\n* Die Effekte sind performant optimiert und berücksichtigen reduzierte Bewegung.\n*/\n\n@keyframes particles-float {\n  0% {\n    opacity: var(--opacity-0);\n    transform: translate(0%, 0%);\n  }\n\n  50% {\n    opacity: var(--opacity-100);\n  }\n\n  100% {\n    opacity: var(--opacity-0);\n    transform: translate(100px, -100px);\n  }\n}\n\n@keyframes particles-dots {\n  0% {\n    opacity: var(--opacity-0);\n    transform: translate(0%, 0%);\n  }\n\n  50% {\n    opacity: var(--opacity-100);\n  }\n\n  100% {\n    opacity: var(--opacity-0);\n    transform: translate(-100px, 100px);\n  }\n}\n\n@keyframes particles-lines {\n  0% {\n    opacity: var(--opacity-0);\n    transform: translate(0%, 0%) rotate(0deg);\n  }\n\n  50% {\n    opacity: var(--opacity-100);\n  }\n\n  100% {\n    opacity: var(--opacity-0);\n    transform: translate(100px, 100px) rotate(360deg);\n  }\n}\n\n@layer components {\n  .particles {\n    overflow: hidden;\n    position: relative;\n  }\n\n  .particles::before,\n  .particles::after {\n    animation: particles-float 3s infinite;\n    background: var(--particle-color, rgb(255 255 255 / 50%));\n    border-radius: 5px;\n    content: '';\n    height: var(--spacing-1);\n    position: absolute;\n    width: var(--spacing-1);\n  }\n\n  .particles::after {\n    animation-delay: var(--animation-duration-slower);\n  }\n\n  .particles-sm::before,\n  .particles-sm::after {\n    height: var(--border-width-thick);\n    width: var(--border-width-thick);\n  }\n\n  .particles-lg::before,\n  .particles-lg::after {\n    height: var(--spacing-1-5);\n    width: var(--spacing-1-5);\n  }\n\n  .particles-slow::before,\n  .particles-slow::after {\n    animation-duration: var(--animation-duration-ultra-slow);\n  }\n\n  .particles-fast::before,\n  .particles-fast::after {\n    animation-duration: var(--animation-duration-slowest);\n  }\n\n  .particles-dots {\n    overflow: hidden;\n    position: relative;\n  }\n\n  .particles-dots::before,\n  .particles-dots::after {\n    animation: particles-dots 3s infinite;\n    background: var(--particle-dots-color, rgb(255 255 255 / 50%));\n    border-radius: 5px;\n    content: '';\n    height: var(--spacing-1);\n    position: absolute;\n    width: var(--spacing-1);\n  }\n\n  .particles-dots::after {\n    animation-delay: var(--animation-duration-slower);\n  }\n\n  .particles-dots-sm::before,\n  .particles-dots-sm::after {\n    height: var(--border-width-thick);\n    width: var(--border-width-thick);\n  }\n\n  .particles-dots-lg::before,\n  .particles-dots-lg::after {\n    height: var(--spacing-1-5);\n    width: var(--spacing-1-5);\n  }\n\n  .particles-dots-slow::before,\n  .particles-dots-slow::after {\n    animation-duration: var(--animation-duration-ultra-slow);\n  }\n\n  .particles-dots-fast::before,\n  .particles-dots-fast::after {\n    animation-duration: var(--animation-duration-slowest);\n  }\n\n  .particles-lines {\n    overflow: hidden;\n    position: relative;\n  }\n\n  .particles-lines::before,\n  .particles-lines::after {\n    animation: particles-lines 3s infinite;\n    background: var(--particle-lines-color, rgb(255 255 255 / 50%));\n    content: '';\n    height: var(--spacing-5);\n    position: absolute;\n    width: var(--border-width-thick);\n  }\n\n  .particles-lines::after {\n    animation-delay: var(--animation-duration-slower);\n  }\n\n  .particles-lines-sm::before,\n  .particles-lines-sm::after {\n    height: var(--spacing-2-5);\n    width: var(--border-width);\n  }\n\n  .particles-lines-lg::before,\n  .particles-lines-lg::after {\n    height: var(--spacing-7-5);\n    width: var(--spacing-1);\n  }\n\n  .particles-lines-slow::before,\n  .particles-lines-slow::after {\n    animation-duration: var(--animation-duration-ultra-slow);\n  }\n\n  .particles-lines-fast::before,\n  .particles-lines-fast::after {\n    animation-duration: var(--animation-duration-slowest);\n  }\n\n  .particles-color-primary::before,\n  .particles-color-primary::after {\n    background: var(--particle-primary, rgb(59 130 246 / 50%));\n  }\n\n  .particles-color-secondary::before,\n  .particles-color-secondary::after {\n    background: var(--particle-secondary, rgb(107 114 128 / 50%));\n  }\n\n  .particles-color-success::before,\n  .particles-color-success::after {\n    background: var(--particle-success, rgb(16 185 129 / 50%));\n  }\n\n  .particles-color-error::before,\n  .particles-color-error::after {\n    background: var(--particle-error, rgb(239 68 68 / 50%));\n  }\n\n  .particles-color-warning::before,\n  .particles-color-warning::after {\n    background: var(--particle-warning, rgb(245 158 11 / 50%));\n  }\n\n  .particles-color-info::before,\n  .particles-color-info::after {\n    background: var(--particle-info, rgb(6 182 212 / 50%));\n  }\n}\n\n/* Reduzierte Bewegung */\n@media (prefers-reduced-motion: reduce) {\n  @layer components {\n    .particles::before,\n    .particles::after,\n    .particles-dots::before,\n    .particles-dots::after,\n    .particles-lines::before,\n    .particles-lines::after {\n      animation: var(--animation-none);\n      opacity: var(--opacity-0);\n    }\n  }\n}\n\n/* Datei: effects/particles/links.css */\n/**\n* Links Partikel-Effekt\n*\n* Partikel, die durch Linien miteinander verbunden sind – erzeugt ein Netz- oder Molekül-Design.\n* Dieser Effekt ist performant optimiert und berücksichtigt reduzierte Bewegung.\n*/\n\n@keyframes links-node-1 {\n  0%, 100% {\n    transform: translate(0%, 0%);\n  }\n\n  25% {\n    transform: translate(var(--spacing-5), calc(-1 * var(--spacing-2-5)));\n  }\n\n  50% {\n    transform: translate(40px, 0%);\n  }\n\n  75% {\n    transform: translate(var(--spacing-5), var(--spacing-2-5));\n  }\n}\n\n@keyframes links-node-2 {\n  0%, 100% {\n    transform: translate(0%, 0%);\n  }\n\n  25% {\n    transform: translate(calc(-1 * var(--spacing-2-5)), var(--spacing-5));\n  }\n\n  50% {\n    transform: translate(0%, 40px);\n  }\n\n  75% {\n    transform: translate(var(--spacing-2-5), var(--spacing-5));\n  }\n}\n\n@keyframes links-node-3 {\n  0%, 100% {\n    transform: translate(0%, 0%);\n  }\n\n  25% {\n    transform: translate(-var(--spacing-5), calc(-1 * var(--spacing-2-5)));\n  }\n\n  50% {\n    transform: translate(-40px, 0%);\n  }\n\n  75% {\n    transform: translate(calc(-1 * var(--spacing-5)), var(--spacing-2-5));\n  }\n}\n\n@layer components {\n  .links {\n    min-height: var(--spacing-25);\n    min-width: var(--spacing-25);\n    position: relative;\n  }\n\n  .links::before,\n  .links::after,\n  .links .node {\n    background: var(--links-node-color, rgb(80 120 255));\n    border-radius: 5px;\n    content: '';\n    height: var(--spacing-2);\n    position: absolute;\n    width: var(--spacing-2);\n  }\n\n  .links::before {\n    animation: links-node-1 8s infinite var(--easing-smooth);\n    left: 3%0%;\n    top: 3%0%;\n  }\n\n  .links::after {\n    animation: links-node-2 8s infinite var(--easing-smooth);\n    left: 5%0%;\n    top: 5%0%;\n  }\n\n  .links .node {\n    animation: links-node-3 8s infinite var(--easing-smooth);\n    left: 7%0%;\n    top: 3%0%;\n  }\n\n/* Verbindungslinien zwischen den Knoten */\n  .links {\n    background:\n    linear-gradient(\n    to bottom right,\n    transparent calc(50% - var(--border-width)),\n    var(--links-line-color, rgb(80 120 255 / 0.6)) calc(50%),\n    transparent calc(50% + var(--border-width))\n    ),\n    linear-gradient(\n    to bottom left,\n    transparent calc(50% - var(--border-width)),\n    var(--links-line-color, rgb(80 120 255 / 0.6)) calc(50%),\n    transparent calc(50% + var(--border-width))\n    );\n    background-position: center;\n    background-repeat: no-repeat;\n    background-size: 100% 100;\n  }\n\n/* Varianten */\n  .links-sm::before,\n  .links-sm::after,\n  .links-sm .node {\n    height: var(--spacing-1);\n    width: var(--spacing-1);\n  }\n\n  .links-lg::before,\n  .links-lg::after,\n  .links-lg .node {\n    height: var(--spacing-1)(--border-width-thick);\n    width: var(--spacing-1)(--border-width-thick);\n  }\n\n  .links-slow::before,\n  .links-slow::after,\n  .links-slow .node {\n    animation-duration: var(--animation-duration-ultra-slow);\n  }\n\n  .links-fast::before,\n  .links-fast::after,\n  .links-fast .node {\n    animation-duration: var(--animation-duration-ultra-slow);\n  }\n\n/* Farb-Varianten */\n  .links-blue {\n    --links-node-color: rgb(30 144 255);\n    --links-line-color: rgb(30 144 255 / 0.6);\n  }\n\n  .links-green {\n    --links-node-color: rgb(46 204 113);\n    --links-line-color: rgb(46 204 113 / 0.6);\n  }\n\n  .links-purple {\n    --links-node-color: rgb(155 89 182);\n    --links-line-color: rgb(155 89 182 / 0.6);\n  }\n\n  .links-teal {\n    --links-node-color: rgb(26 188 156);\n    --links-line-color: rgb(26 188 156 / 0.6);\n  }\n\n  .links-orange {\n    --links-node-color: rgb(230 126 34);\n    --links-line-color: rgb(230 126 34 / 0.6);\n  }\n}\n\n/* Reduzierte Bewegung */\n@media (prefers-reduced-motion: reduce) {\n  @layer components {\n    .links::before,\n    .links::after,\n    .links .node {\n      animation: var(--animation-none);\n    }\n  }\n}\n\n/* Datei: effects/particles/fountain.css */\n/**\n* Fountain Partikel-Effekt\n*\n* Partikel, die wie ein Springbrunnen nach oben schießen und dann herabfallen.\n* Dieser Effekt ist performant optimiert und berücksichtigt reduzierte Bewegung.\n*/\n\n@keyframes fountain-shoot {\n  0% {\n    opacity: var(--opacity-0);\n    transform: translateX(0%) scale(1);\n  }\n\n  20% {\n    opacity: var(--opacity-100);\n    transform: translateY(-70px) scale(1);\n  }\n\n  40% {\n    transform: translateY(-90px) scale(0.9);\n  }\n\n  70% {\n    opacity: var(--opacity-80);\n    transform: translateY(-40px) scale(0.8);\n  }\n\n  100% {\n    opacity: var(--opacity-0);\n    transform: translateX(0%) scale(0.7);\n  }\n}\n\n@keyframes fountain-shoot-alt {\n  0% {\n    opacity: var(--opacity-0);\n    transform: translateX(0%) translateX(0%) scale(1);\n  }\n\n  20% {\n    opacity: var(--opacity-100);\n    transform: translateY(-60px) translateX(var(--spacing-1)(--spacing-1)) scale(1);\n  }\n\n  40% {\n    transform: translateY(-80px) translateX(var(--spacing-5)) scale(0.9);\n  }\n\n  70% {\n    opacity: var(--opacity-80);\n    transform: translateY(-30px) translateX(var(--spacing-2-5)) scale(0.8);\n  }\n\n  100% {\n    opacity: var(--opacity-0);\n    transform: translateX(0%) translateX(0%) scale(0.7);\n  }\n}\n\n@layer components {\n  .fountain {\n    overflow: hidden;\n    position: relative;\n  }\n\n  .fountain::before,\n  .fountain::after {\n    animation: fountain-shoot 2.5s var(--easing-decelerate) infinite;\n    background: var(--fountain-color, rgb(180 220 255 / 0.8));\n    border-radius: 5px;\n    bottom: 0%;\n    content: '';\n    height: var(--spacing-1-5);\n    position: absolute;\n    width: var(--spacing-1-5);\n  }\n\n  .fountain::before {\n    left: calc(50% - var(--spacing-1));\n  }\n\n  .fountain::after {\n    animation-delay: var(--animation-duration-medium);\n    animation-name: fountain-shoot-alt;\n    left: calc(50% + var(--spacing-1));\n  }\n\n/* Varianten */\n  .fountain-sm::before,\n  .fountain-sm::after {\n    height: var(--spacing-1);\n    width: var(--spacing-1);\n  }\n\n  .fountain-lg::before,\n  .fountain-lg::after {\n    height: var(--spacing-2);\n    width: var(--spacing-2);\n  }\n\n  .fountain-slow::before,\n  .fountain-slow::after {\n    animation-duration: var(--animation-duration-ultra-slow);\n  }\n\n  .fountain-fast::before,\n  .fountain-fast::after {\n    animation-duration: var(--animation-duration-slower);\n  }\n\n/* Mehrere Partikel */\n  .fountain-many {\n    position: relative;\n  }\n\n  .fountain-many::before,\n  .fountain-many::after {\n    animation: fountain-shoot 2.5s var(--easing-decelerate) infinite;\n    background: var(--fountain-color, rgb(180 220 255 / 0.8));\n    border-radius: 5px;\n    bottom: 0%;\n    content: '';\n    height: var(--spacing-1-5);\n    position: absolute;\n    width: var(--spacing-1-5);\n  }\n\n  .fountain-many::before {\n    animation-delay: var(--animation-duration-slow);\n    left: calc(50% - var(--spacing-1)(--spacing-1));\n  }\n\n  .fountain-many::after {\n    animation-delay: var(--animation-duration-slower);\n    animation-name: fountain-shoot-alt;\n    left: calc(50% + var(--spacing-1)(--spacing-1));\n  }\n\n/* Farbvarianten */\n  .fountain-blue {\n    --fountain-color: rgb(100 180 255 / 0.8);\n  }\n\n  .fountain-cyan {\n    --fountain-color: rgb(100 240 255 / 0.8);\n  }\n\n  .fountain-white {\n    --fountain-color: rgb(240 240 255 / 0.8);\n  }\n\n  .fountain-rainbow::before {\n    --fountain-color: rgb(255 100 100 / 0.8);\n  }\n\n  .fountain-rainbow::after {\n    --fountain-color: rgb(100 255 100 / 0.8);\n  }\n\n  .fountain-rainbow.fountain-many::before {\n    --fountain-color: rgb(255 255 100 / 0.8);\n  }\n\n  .fountain-rainbow.fountain-many::after {\n    --fountain-color: rgb(100 100 255 / 0.8);\n  }\n}\n\n/* Reduzierte Bewegung */\n@media (prefers-reduced-motion: reduce) {\n  @layer components {\n    .fountain::before,\n    .fountain::after,\n    .fountain-many::before,\n    .fountain-many::after {\n      animation: var(--animation-none);\n      opacity: var(--opacity-0);\n    }\n  }\n}\n\n/* Datei: effects/particles/fireworks.css */\n/**\n* Fireworks Partikel-Effekt\n*\n* Partikel, die wie Feuerwerkskörper explodieren – für festliche Anlässe.\n* Dieser Effekt ist performant optimiert und berücksichtigt reduzierte Bewegung.\n*/\n\n@keyframes firework-rise {\n  0% {\n    opacity: var(--opacity-0);\n    transform: translateX(100%);\n  }\n\n  50% {\n    opacity: var(--opacity-100);\n  }\n\n  75%, 100% {\n    opacity: var(--opacity-0);\n    transform: translateX(0%);\n  }\n}\n\n@keyframes firework-explode {\n  0% {\n    box-shadow:\n    0 0 0 0 var(--firework-color-1, rgb(255 50 50 / 90%)),\n    0 0 0 0 var(--firework-color-2, rgb(50 255 50 / 90%)),\n    0 0 0 0 var(--firework-color-3, rgb(50 50 255 / 90%));\n    opacity: var(--opacity-100);\n    transform: scale(0.01);\n  }\n\n  30% {\n    box-shadow:\n    -50px -50px 0 0 var(--firework-color-1, rgb(255 50 50 / 0%)),\n    50px -40px 0 0 var(--firework-color-2, rgb(50 255 50 / 0%)),\n    0 60px 0 0 var(--firework-color-3, rgb(50 50 255 / 0%));\n    opacity: var(--opacity-100);\n    transform: scale(0.7);\n  }\n\n  70% {\n    box-shadow:\n    -100px -100px 0 0 var(--firework-color-1, rgb(255 50 50 / 0%)),\n    100px -80px 0 0 var(--firework-color-2, rgb(50 255 50 / 0%)),\n    0 var(--spacing-1)(--spacing-5) 0 0 var(--firework-color-3, rgb(50 50 255 / 0%));\n    opacity: var(--opacity-30);\n  }\n\n  100% {\n    box-shadow:\n    -var(--spacing-1)(--spacing-5) -var(--spacing-1)(--spacing-5) 0 0 var(--firework-color-1, rgb(255 50 50 / 0%)),\n    var(--spacing-1)(--spacing-5) -100px 0 0 var(--firework-color-2, rgb(50 255 50 / 0%)),\n    0 140px 0 0 var(--firework-color-3, rgb(50 50 255 / 0%));\n    opacity: var(--opacity-0);\n    transform: var(--transform-scale-100);\n  }\n}\n\n@layer components {\n  .fireworks {\n    overflow: hidden;\n    position: relative;\n  }\n\n  .fireworks::before,\n  .fireworks::after {\n    background: var(--firework-base-color, rgb(255 220 180));\n    border-radius: 5px;\n    content: '';\n    height: var(--spacing-1);\n    position: absolute;\n    width: var(--spacing-1);\n  }\n\n  .fireworks::before {\n    animation:\n    firework-rise 2.5s var(--easing-decelerate) forwards,\n    firework-explode 0.5s var(--easing-decelerate) 1.2s forwards;\n    bottom: 0%;\n    left: 4%0%;\n  }\n\n  .fireworks::after {\n    animation:\n    firework-rise 2.5s var(--easing-decelerate) 1s forwards,\n    firework-explode 0.5s var(--easing-decelerate) 2.2s forwards;\n    bottom: 0%;\n    left: 6%0%;\n  }\n\n/* Varianten */\n  .fireworks-sm::before,\n  .fireworks-sm::after {\n    height: var(--border-width-thick);\n    width: var(--border-width-thick);\n\n    --firework-size-multiplier: 0.7;\n  }\n\n  .fireworks-lg::before,\n  .fireworks-lg::after {\n    height: var(--spacing-1-5);\n    width: var(--spacing-1-5);\n\n    --firework-size-multiplier: 1.5;\n  }\n\n  .fireworks-slow::before {\n    animation:\n    firework-rise 4s var(--easing-decelerate) forwards,\n    firework-explode 1s var(--easing-decelerate) 2s forwards;\n  }\n\n  .fireworks-slow::after {\n    animation:\n    firework-rise 4s var(--easing-decelerate) 1.5s forwards,\n    firework-explode 1s var(--easing-decelerate) 3.5s forwards;\n  }\n\n  .fireworks-fast::before {\n    animation:\n    firework-rise 1.5s var(--easing-decelerate) forwards,\n    firework-explode 0.3s var(--easing-decelerate) 0.7s forwards;\n  }\n\n  .fireworks-fast::after {\n    animation:\n    firework-rise 1.5s var(--easing-decelerate) 0.5s forwards,\n    firework-explode 0.3s var(--easing-decelerate) 1.2s forwards;\n  }\n\n/* Farbvarianten */\n  .fireworks-red {\n    --firework-base-color: rgb(255 150 150);\n    --firework-color-1: rgb(255 50 50 / 90%);\n    --firework-color-2: rgb(255 100 50 / 90%);\n    --firework-color-3: rgb(255 50 100 / 90%);\n  }\n\n  .fireworks-blue {\n    --firework-base-color: rgb(150 150 255);\n    --firework-color-1: rgb(50 50 255 / 90%);\n    --firework-color-2: rgb(50 100 255 / 90%);\n    --firework-color-3: rgb(100 50 255 / 90%);\n  }\n\n  .fireworks-green {\n    --firework-base-color: rgb(150 255 150);\n    --firework-color-1: rgb(50 255 50 / 90%);\n    --firework-color-2: rgb(100 255 50 / 90%);\n    --firework-color-3: rgb(50 255 100 / 90%);\n  }\n\n  .fireworks-gold {\n    --firework-base-color: rgb(255 230 150);\n    --firework-color-1: rgb(255 215 0 / 90%);\n    --firework-color-2: rgb(255 200 50 / 90%);\n    --firework-color-3: rgb(255 180 0 / 90%);\n  }\n}\n\n/* Reduzierte Bewegung */\n@media (prefers-reduced-motion: reduce) {\n  @layer components {\n    .fireworks::before,\n    .fireworks::after {\n      animation: var(--animation-none);\n      opacity: var(--opacity-0);\n    }\n  }\n}\n\n/* Datei: effects/particles/firefly.css */\n/**\n* Firefly Partikel-Effekt\n*\n* Leuchtende Punkte mit sanften Bewegungen – simulieren Glühwürmchen.\n* Dieser Effekt ist performant optimiert und berücksichtigt reduzierte Bewegung.\n*/\n\n@keyframes firefly-float {\n  0% {\n    opacity: var(--opacity-0);\n    transform: translate(0%, 0%);\n  }\n\n  20% {\n    opacity: var(--opacity-80);\n  }\n\n  40% {\n    opacity: var(--opacity-30);\n    transform: translate(30px, calc(-1 * var(--spacing-5)));\n  }\n\n  60% {\n    opacity: var(--opacity-100);\n    transform: translate(60px, 0%);\n  }\n\n  80% {\n    opacity: var(--opacity-40);\n    transform: translate(30px, var(--spacing-5));\n  }\n\n  100% {\n    opacity: var(--opacity-0);\n    transform: translate(0%, 0%);\n  }\n}\n\n@keyframes firefly-glow {\n  0, 100% {\n    box-shadow: 0 0 var(--spacing-2) var(--border-width-thick) var(--firefly-glow-color, rgb(255 255 180 / 70%));\n  }\n\n  50% {\n    box-shadow: 0 0 var(--spacing-1)(--border-width-thick) var(--spacing-1) var(--firefly-glow-color, rgb(255 255 180 / 90%));\n  }\n}\n\n@layer components {\n  .firefly {\n    overflow: hidden;\n    position: relative;\n  }\n\n  .firefly::before,\n  .firefly::after {\n    animation:\n    firefly-float 8s infinite var(--easing-smooth),\n    firefly-glow 2s infinite var(--easing-smooth);\n    background: var(--firefly-color, rgb(255 255 180));\n    border-radius: 5px;\n    content: '';\n    height: var(--spacing-1);\n    position: absolute;\n    width: var(--spacing-1);\n  }\n\n  .firefly::before {\n    bottom: 2%0%;\n    left: 1%0%;\n  }\n\n  .firefly::after {\n    animation-delay: var(--animation-duration-slowest), 0.5s;\n    bottom: 4%0%;\n    left: 6%0%;\n  }\n\n/* Zusätzliche Fireflies */\n  .firefly-many {\n    position: relative;\n  }\n\n  .firefly-many::before,\n  .firefly-many::after {\n    animation:\n    firefly-float 8s infinite var(--easing-smooth),\n    firefly-glow 2s infinite var(--easing-smooth);\n    background: var(--firefly-color, rgb(255 255 180));\n    border-radius: 5px;\n    content: '';\n    height: var(--spacing-1);\n    position: absolute;\n    width: var(--spacing-1);\n  }\n\n  .firefly-many::before {\n    animation-delay: var(--animation-duration-ultra-slow), 1s;\n    bottom: 3%0%;\n    left: 3%0%;\n  }\n\n  .firefly-many::after {\n    animation-delay: var(--animation-duration-ultra-slow), 1.5s;\n    bottom: 7%0%;\n    left: 4%0%;\n  }\n\n/* Größenvarianten */\n  .firefly-sm::before,\n  .firefly-sm::after {\n    height: var(--border-width-thick);\n    width: var(--border-width-thick);\n  }\n\n  .firefly-lg::before,\n  .firefly-lg::after {\n    height: var(--spacing-1-5);\n    width: var(--spacing-1-5);\n  }\n\n/* Geschwindigkeitsvarianten */\n  .firefly-slow::before,\n  .firefly-slow::after {\n    animation-duration: var(--animation-duration-ultra-slow), 3s;\n  }\n\n  .firefly-fast::before,\n  .firefly-fast::after {\n    animation-duration: var(--animation-duration-ultra-slow), 1s;\n  }\n\n/* Farbvarianten */\n  .firefly-green::before,\n  .firefly-green::after {\n    --firefly-color: rgb(180 255 180);\n    --firefly-glow-color: rgb(180 255 180 / 70%);\n  }\n\n  .firefly-blue::before,\n  .firefly-blue::after {\n    --firefly-color: rgb(180 180 255);\n    --firefly-glow-color: rgb(180 180 255 / 70%);\n  }\n\n  .firefly-purple::before,\n  .firefly-purple::after {\n    --firefly-color: rgb(220 180 255);\n    --firefly-glow-color: rgb(220 180 255 / 70%);\n  }\n\n  .firefly-red::before,\n  .firefly-red::after {\n    --firefly-color: rgb(255 180 180);\n    --firefly-glow-color: rgb(255 180 180 / 70%);\n  }\n}\n\n/* Reduzierte Bewegung */\n@media (prefers-reduced-motion: reduce) {\n  @layer components {\n    .firefly::before,\n    .firefly::after,\n    .firefly-many::before,\n    .firefly-many::after {\n      animation: var(--animation-none);\n      opacity: var(--opacity-0);\n    }\n  }\n}\n\n/* Datei: effects/particles/fire.css */\n/**\n* Fire Partikel-Effekt\n*\n* Flammenähnliche Partikelbewegungen – erzeugt einen feurigen Effekt.\n* Dieser Effekt ist performant optimiert und berücksichtigt reduzierte Bewegung.\n*/\n\n@keyframes fire-flame {\n  0% {\n    opacity: var(--opacity-0);\n    transform: translateX(0%) scale(1);\n  }\n\n  25% {\n    opacity: var(--opacity-100);\n    transform: translateY(-40px) scale(1.2);\n  }\n\n  50% {\n    transform: translateY(-80px) scale(1.1) rotate(5deg);\n  }\n\n  75% {\n    transform: translateY(calc(-1 * var(--spacing-15))) scale(0.9) rotate(-5deg);\n  }\n\n  100% {\n    opacity: var(--opacity-0);\n    transform: translateY(-160px) scale(0.5) rotate(0deg);\n  }\n}\n\n@keyframes fire-flame-alt {\n  0% {\n    opacity: var(--opacity-0);\n    transform: translateX(0%) scale(1);\n  }\n\n  25% {\n    opacity: var(--opacity-100);\n    transform: translateY(-30px) scale(1.1) rotate(-5deg);\n  }\n\n  50% {\n    transform: translateY(-60px) scale(1.0) rotate(5deg);\n  }\n\n  75% {\n    transform: translateY(-90px) scale(0.8) rotate(-2deg);\n  }\n\n  100% {\n    opacity: var(--opacity-0);\n    transform: translateY(calc(-1 * var(--spacing-15))) scale(0.5) rotate(0deg);\n  }\n}\n\n@layer components {\n  .fire {\n    overflow: hidden;\n    position: relative;\n  }\n\n  .fire::before,\n  .fire::after {\n    animation: fire-flame 3s var(--easing-decelerate) infinite;\n    background: var(--fire-color, rgb(255 160 0 / 70%));\n    border-radius: 5px 50px 20px 20px;\n    bottom: calc(-1 * var(--spacing-1));\n    content: '';\n    filter: blur(var(--spacing-1));\n    height: var(--spacing-7-5);\n    position: absolute;\n    width: var(--spacing-5);\n  }\n\n  .fire::before {\n    left: calc(50% - var(--spacing-1));\n  }\n\n  .fire::after {\n    animation-delay: var(--animation-duration-medium);\n    animation-name: fire-flame-alt;\n    background: var(--fire-color-alt, rgb(255 90 0 / 70%));\n    left: calc(50% - var(--spacing-1));\n  }\n\n/* Feuer-Varianten */\n  .fire-sm::before,\n  .fire-sm::after {\n    filter: blur(var(--border-width-thick));\n    height: var(--spacing-5);\n    width: calc(var(--spacing-1) + var(--border-width-thick));\n  }\n\n  .fire-lg::before,\n  .fire-lg::after {\n    filter: var(--filter-blur-xl);\n    height: 50px;\n    width: var(--spacing-7-5);\n  }\n\n  .fire-slow::before,\n  .fire-slow::after {\n    animation-duration: var(--animation-duration-ultra-slow);\n  }\n\n  .fire-fast::before,\n  .fire-fast::after {\n    animation-duration: var(--animation-duration-slowest);\n  }\n\n/* Farbvarianten */\n  .fire-red::before {\n    background: var(--fire-red, rgb(255 50 0 / 70%));\n  }\n\n  .fire-red::after {\n    background: var(--fire-red-alt, rgb(255 100 0 / 70%));\n  }\n\n  .fire-blue::before {\n    background: var(--fire-blue, rgb(0 150 255 / 70%));\n  }\n\n  .fire-blue::after {\n    background: var(--fire-blue-alt, rgb(100 200 255 / 70%));\n  }\n\n  .fire-green::before {\n    background: var(--fire-green, rgb(0 200 100 / 70%));\n  }\n\n  .fire-green::after {\n    background: var(--fire-green-alt, rgb(100 255 150 / 70%));\n  }\n\n  .fire-purple::before {\n    background: var(--fire-purple, rgb(150 0 255 / 70%));\n  }\n\n  .fire-purple::after {\n    background: var(--fire-purple-alt, rgb(200 100 255 / 70%));\n  }\n}\n\n/* Reduzierte Bewegung */\n@media (prefers-reduced-motion: reduce) {\n  @layer components {\n    .fire::before,\n    .fire::after {\n      animation: var(--animation-none);\n      opacity: var(--opacity-0);\n    }\n  }\n}\n\n/* Datei: effects/particles/confetti.css */\n/**\n* Confetti Partikel-Effekt\n*\n* Bunte Konfetti-Explosionen – perfekt für Feierlichkeiten oder Erfolge.\n* Dieser Effekt ist performant optimiert und berücksichtigt reduzierte Bewegung.\n*/\n\n@keyframes confetti-fall {\n  0% {\n    opacity: var(--opacity-0);\n    transform: translateY(-50px) rotate(0deg);\n  }\n\n  10% {\n    opacity: var(--opacity-100);\n  }\n\n  90% {\n    opacity: var(--opacity-100);\n  }\n\n  100% {\n    opacity: var(--opacity-0);\n    transform: translateY(var(--space-large-200)) rotate(720deg);\n  }\n}\n\n@keyframes confetti-fall-2 {\n  0% {\n    opacity: var(--opacity-0);\n    transform: translateY(-50px) rotate(0deg);\n  }\n\n  10% {\n    opacity: var(--opacity-100);\n  }\n\n  90% {\n    opacity: var(--opacity-100);\n  }\n\n  100% {\n    opacity: var(--opacity-0);\n    transform: translateY(180px) rotate(-720deg);\n  }\n}\n\n@layer components {\n  .confetti {\n    overflow: hidden;\n    position: relative;\n  }\n\n  .confetti::before,\n  .confetti::after {\n    animation: confetti-fall 4s var(--easing-decelerate) forwards;\n    background: var(--confetti-primary, rgb(59 130 246));\n    content: '';\n    height: var(--spacing-2);\n    position: absolute;\n    top: 0%;\n    width: var(--spacing-2);\n    z-index: var(--z-index-1)0;\n  }\n\n  .confetti::before {\n    animation-name: confetti-fall;\n    left: 3%0%;\n    shape-rendering: crispedges;\n  }\n\n  .confetti::after {\n    animation-delay: var(--animation-duration-medium);\n    animation-name: confetti-fall-2;\n    background: var(--confetti-secondary, rgb(239 68 68));\n    left: 6%0%;\n  }\n\n/* Konfetti-Varianten */\n  .confetti-multi {\n    position: relative;\n  }\n\n  .confetti-multi::before,\n  .confetti-multi::after {\n    content: '';\n    height: var(--spacing-2);\n    position: absolute;\n    top: 0%;\n    width: var(--spacing-2);\n    z-index: var(--z-index-1)0;\n  }\n\n  .confetti-multi::before {\n    animation: confetti-fall 4s var(--easing-decelerate) forwards;\n    background: var(--confetti-primary, rgb(59 130 246));\n    left: 3%0%;\n  }\n\n  .confetti-multi::after {\n    animation: confetti-fall-2 4.5s var(--easing-decelerate) forwards;\n    background: var(--confetti-secondary, rgb(239 68 68));\n    left: 6%0%;\n  }\n\n  .confetti-multi::before {\n    animation-delay: var(--animation-duration-fast);\n    background: var(--confetti-success, rgb(16 185 129));\n    left: var(--percentage-45);\n  }\n\n  .confetti-multi::after {\n    animation-delay: var(--animation-duration-slow);\n    background: var(--confetti-warning, rgb(245 158 11));\n    left: var(--percentage-75);\n  }\n\n/* Größenvarianten */\n  .confetti-sm::before,\n  .confetti-sm::after {\n    height: var(--spacing-1);\n    width: var(--spacing-1);\n  }\n\n  .confetti-lg::before,\n  .confetti-lg::after {\n    height: var(--spacing-1)(--border-width-thick);\n    width: var(--spacing-1)(--border-width-thick);\n  }\n\n/* Geschwindigkeitsvarianten */\n  .confetti-slow::before,\n  .confetti-slow::after {\n    animation-duration: var(--animation-duration-ultra-slow);\n  }\n\n  .confetti-fast::before,\n  .confetti-fast::after {\n    animation-duration: var(--animation-duration-ultra-slow);\n  }\n\n/* Verschiedene Formen */\n  .confetti-squares::before,\n  .confetti-squares::after {\n    border-radius: 0%;\n  }\n\n  .confetti-circles::before,\n  .confetti-circles::after {\n    border-radius: 5px;\n  }\n\n  .confetti-triangles::before,\n  .confetti-triangles::after {\n    clip-path: polygon(50% 0%, 0% 100%, 100% 100%);\n    height: var(--spacing-2-5);\n    width: var(--spacing-2-5);\n  }\n}\n\n/* Reduzierte Bewegung */\n@media (prefers-reduced-motion: reduce) {\n  @layer components {\n    .confetti::before,\n    .confetti::after,\n    .confetti-multi::before,\n    .confetti-multi::after {\n      animation: var(--animation-none);\n      opacity: var(--opacity-0);\n    }\n  }\n}\n\n/* Datei: effects/particles/bubbles.css */\n/**\n* Bubbles Partikel-Effekt\n*\n* Blasenartige Partikel, die aufsteigen – ideal für Wasser- oder Seifenblasen-Effekte.\n* Dieser Effekt ist performant optimiert und berücksichtigt reduzierte Bewegung.\n*/\n\n@keyframes bubbles-rise {\n  0% {\n    opacity: var(--opacity-0);\n    transform: translate(0%, 100%);\n  }\n\n  20% {\n    opacity: var(--opacity-80);\n  }\n\n  80% {\n    opacity: var(--opacity-60);\n  }\n\n  100% {\n    opacity: var(--opacity-0);\n    transform: translate(var(--bubbles-drift, 30px), -100%);\n  }\n}\n\n@layer components {\n  .bubbles {\n    overflow: hidden;\n    position: relative;\n  }\n\n  .bubbles::before,\n  .bubbles::after {\n    animation: bubbles-rise 6s infinite;\n    background: var(--bubbles-color, rgb(255 255 255 / 0.4));\n    border-radius: 5px;\n    bottom: calc(-1 * var(--spacing-5));\n    content: '';\n    height: var(--spacing-5);\n    position: absolute;\n    width: var(--spacing-5);\n  }\n\n  .bubbles::before {\n    left: 2%0%;\n  }\n\n  .bubbles::after {\n    animation-delay: var(--animation-duration-slowest);\n    left: 6%0%;\n  }\n\n  .bubbles-sm::before,\n  .bubbles-sm::after {\n    height: var(--spacing-1)(--border-width-thick);\n    width: var(--spacing-1)(--border-width-thick);\n  }\n\n  .bubbles-lg::before,\n  .bubbles-lg::after {\n    height: var(--spacing-7-5);\n    width: var(--spacing-7-5);\n  }\n\n  .bubbles-slow::before,\n  .bubbles-slow::after {\n    animation-duration: var(--animation-duration-ultra-slow);\n  }\n\n  .bubbles-fast::before,\n  .bubbles-fast::after {\n    animation-duration: var(--animation-duration-ultra-slow);\n  }\n\n  .bubbles-many::before {\n    animation-delay: var(--animation-duration-slow);\n    left: 3%0%;\n  }\n\n  .bubbles-many::after {\n    animation-delay: var(--animation-duration-ultra-slow);\n    left: 7%0%;\n  }\n\n  .bubbles-color-primary::before,\n  .bubbles-color-primary::after {\n    background: var(--bubbles-primary, rgb(59 130 246 / 0.4));\n  }\n\n  .bubbles-color-secondary::before,\n  .bubbles-color-secondary::after {\n    background: var(--bubbles-secondary, rgb(107 114 128 / 0.4));\n  }\n\n  .bubbles-color-success::before,\n  .bubbles-color-success::after {\n    background: var(--bubbles-success, rgb(16 185 129 / 0.4));\n  }\n\n  .bubbles-color-error::before,\n  .bubbles-color-error::after {\n    background: var(--bubbles-error, rgb(239 68 68 / 0.4));\n  }\n\n  .bubbles-color-warning::before,\n  .bubbles-color-warning::after {\n    background: var(--bubbles-warning, rgb(245 158 11 / 0.4));\n  }\n\n  .bubbles-color-info::before,\n  .bubbles-color-info::after {\n    background: var(--bubbles-info, rgb(6 182 212 / 0.4));\n  }\n}\n\n/* Reduzierte Bewegung */\n@media (prefers-reduced-motion: reduce) {\n  @layer components {\n    .bubbles::before,\n    .bubbles::after {\n      animation: var(--animation-none);\n      opacity: var(--opacity-0);\n    }\n  }\n}\n\n/* Datei: effects/particles/big-circles.css */\n/**\n* Big Circles Partikel-Effekt\n*\n* Große, langsam bewegende Kreise für einen ruhigen Hintergrund.\n* Dieser Effekt ist performant optimiert und berücksichtigt reduzierte Bewegung.\n*/\n\n@keyframes big-circles-float {\n  0% {\n    opacity: var(--opacity-0);\n    transform: translate(0%, 0%);\n  }\n\n  50% {\n    opacity: var(--opacity-70);\n  }\n\n  100% {\n    opacity: var(--opacity-0);\n    transform: translate(var(--spacing-1)(--spacing-5), calc(-1 * var(--spacing-1))(--spacing-5));\n  }\n}\n\n@layer components {\n  .big-circles {\n    overflow: hidden;\n    position: relative;\n  }\n\n  .big-circles::before,\n  .big-circles::after {\n    animation: big-circles-float 8s infinite;\n    background: var(--big-circles-color, rgb(255 255 255 / 30%));\n    border-radius: 5px;\n    content: '';\n    height: var(--spacing-15);\n    position: absolute;\n    width: var(--spacing-15);\n  }\n\n  .big-circles::after {\n    animation-delay: var(--animation-duration-ultra-slow);\n    left: 4%0%;\n  }\n\n  .big-circles::before {\n    left: 1%0%;\n    top: 2%0%;\n  }\n\n  .big-circles-sm::before,\n  .big-circles-sm::after {\n    height: var(--spacing-10);\n    width: var(--spacing-10);\n  }\n\n  .big-circles-lg::before,\n  .big-circles-lg::after {\n    height: var(--spacing-25);\n    width: var(--spacing-25);\n  }\n\n  .big-circles-slow::before,\n  .big-circles-slow::after {\n    animation-duration: var(--animation-duration-ultra-slow);\n  }\n\n  .big-circles-fast::before,\n  .big-circles-fast::after {\n    animation-duration: var(--animation-duration-ultra-slow);\n  }\n\n  .big-circles-color-primary::before,\n  .big-circles-color-primary::after {\n    background: var(--big-circles-primary, rgb(59 130 246 / 30%));\n  }\n\n  .big-circles-color-secondary::before,\n  .big-circles-color-secondary::after {\n    background: var(--big-circles-secondary, rgb(107 114 128 / 30%));\n  }\n\n  .big-circles-color-success::before,\n  .big-circles-color-success::after {\n    background: var(--big-circles-success, rgb(16 185 129 / 30%));\n  }\n\n  .big-circles-color-error::before,\n  .big-circles-color-error::after {\n    background: var(--big-circles-error, rgb(239 68 68 / 30%));\n  }\n\n  .big-circles-color-warning::before,\n  .big-circles-color-warning::after {\n    background: var(--big-circles-warning, rgb(245 158 11 / 30%));\n  }\n\n  .big-circles-color-info::before,\n  .big-circles-color-info::after {\n    background: var(--big-circles-info, rgb(6 182 212 / 30%));\n  }\n}\n\n/* Reduzierte Bewegung */\n@media (prefers-reduced-motion: reduce) {\n  @layer components {\n    .big-circles::before,\n    .big-circles::after {\n      animation: var(--animation-none);\n      opacity: var(--opacity-0);\n    }\n  }\n}\n\n/* Datei: effects/motion/typing.css */\n/**\n* Typing-Effekte\n*\n* Diese Datei enthält verschiedene Typing-Effekte 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 typing-cursor {\n  0, 100% {\n    opacity: var(--opacity-100);\n  }\n\n  50% {\n    opacity: var(--opacity-0);\n  }\n}\n\n@keyframes typing-text {\n  from {\n    width: 0%;\n  }\n\n  to {\n    width: 100%;\n  }\n}\n\n@keyframes typing-blink {\n  0, 100% {\n    opacity: var(--opacity-100);\n  }\n\n  50% {\n    opacity: var(--opacity-0);\n  }\n}\n\n/* Komponenten-Styles */\n@layer components {\n  .typing {\n    display: inline-block;\n    position: relative;\n  }\n\n  .typing::after {\n    content: '|';\n    position: absolute;\n    right: -0.5em;\n  }\n\n  .typing-sm::after {\n    font-size: 0.875em;\n  }\n\n  .typing-lg::after {\n    font-size: 1.25em;\n  }\n\n  .typing-text {\n    display: inline-block;\n    overflow: hidden;\n    white-space: nowrap;\n  }\n\n  .typing-text-sm {\n    font-size: 0.875em;\n  }\n\n  .typing-text-lg {\n    font-size: 1.25em;\n  }\n\n  .typing-blink {\n    display: inline-block;\n    position: relative;\n  }\n\n  .typing-blink::after {\n    content: '|';\n    position: absolute;\n    right: -0.5em;\n  }\n\n  .typing-blink-sm::after {\n    font-size: 0.875em;\n  }\n\n  .typing-blink-lg::after {\n    font-size: 1.25em;\n  }\n\n  .typing-color-primary::after {\n    color: var(--typing-primary, #3b82f6);\n  }\n\n  .typing-color-secondary::after {\n    color: var(--typing-secondary, #6b7280);\n  }\n\n  .typing-color-success::after {\n    color: var(--typing-success, #10b981);\n  }\n\n  .typing-color-error::after {\n    color: var(--typing-error, #ef4444);\n  }\n\n  .typing-color-warning::after {\n    color: var(--typing-warning, #f59e0b);\n  }\n\n  .typing-color-info::after {\n    color: var(--typing-info, #06b6d4);\n  }\n}\n\n/* Animations-Styles */\n@layer animations {\n  .typing::after {\n    animation: typing-cursor 1s var(--easing-step) infinite;\n  }\n\n  .typing-slow::after {\n    animation-duration: var(--animation-duration-slower);\n  }\n\n  .typing-fast::after {\n    animation-duration: var(--animation-duration-medium);\n  }\n\n  .typing-text {\n    animation: typing-text 3s var(--easing-typewriter);\n  }\n\n  .typing-text-sm {\n    animation-duration: var(--animation-duration-slowest);\n  }\n\n  .typing-text-lg {\n    animation-duration: var(--animation-duration-ultra-slow);\n  }\n\n  .typing-text-slow {\n    animation-duration: var(--animation-duration-ultra-slow);\n  }\n\n  .typing-text-fast {\n    animation-duration: var(--animation-duration-slowest);\n  }\n\n  .typing-blink::after {\n    animation: typing-blink 1s var(--easing-step) infinite;\n  }\n\n  .typing-blink-slow::after {\n    animation-duration: var(--animation-duration-slower);\n  }\n\n  .typing-blink-fast::after {\n    animation-duration: var(--animation-duration-medium);\n  }\n}\n\n/* Barrierefreiheit - reduzierte Bewegung */\n@media (prefers-reduced-motion: reduce) {\n  @layer animations {\n    .typing::after,\n    .typing-text,\n    .typing-blink::after {\n      animation: var(--animation-none);\n    }\n  }\n\n  @layer components {\n    .typing::after,\n    .typing-blink::after {\n      opacity: var(--opacity-100);\n    }\n\n    .typing-text {\n      width: 100%;\n    }\n  }\n}\n\n/* Datei: effects/motion/transitions.css */\n/**\n* Transition-Effekte\n*\n* Diese Datei enthält verschiedene Transition-Effekte für moderne UIs.\n* Die Effekte sind performant optimiert und berücksichtigen reduzierte Bewegung.\n*/\n\n/* Transition-Styles */\n@layer utilities {\n  .transition-all {\n    transition-duration: 150ms;\n    transition-property: all;\n    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);\n  }\n\n  .transition-transform {\n    transition-duration: 150ms;\n    transition-property: transform;\n    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);\n  }\n\n  .transition-opacity {\n    transition-duration: 150ms;\n    transition-property: opacity;\n    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);\n  }\n\n  .transition-colors {\n    transition-duration: 150ms;\n    transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;\n    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);\n  }\n\n  .transition-shadow {\n    transition-duration: 150ms;\n    transition-property: box-shadow;\n    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);\n  }\n\n  .transition-width {\n    transition-duration: 150ms;\n    transition-property: width;\n    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);\n  }\n\n  .transition-height {\n    transition-duration: 150ms;\n    transition-property: height;\n    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);\n  }\n\n  .transition-spacing {\n    transition-duration: 150ms;\n    transition-property: margin, padding;\n    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);\n  }\n\n  .transition-fast {\n    transition-duration: 75ms;\n  }\n\n  .transition-normal {\n    transition-duration: 150ms;\n  }\n\n  .transition-slow {\n    transition-duration: 300ms;\n  }\n\n  .transition-slower {\n    transition-duration: 500ms;\n  }\n\n  .transition-slowest {\n    transition-duration: 1000ms;\n  }\n\n  .transition-ease {\n    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);\n  }\n\n  .transition-linear {\n    transition-timing-function: linear;\n  }\n\n  .transition-ease-in {\n    transition-timing-function: cubic-bezier(0.4, 0, 1, 1);\n  }\n\n  .transition-ease-out {\n    transition-timing-function: cubic-bezier(0, 0, 0.2, 1);\n  }\n\n  .transition-ease-smooth {\n    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);\n  }\n}\n\n/* View Transition API */\n@layer components {\n/* Basis-Konfiguration für View Transitions */\n  :root {\n    view-transition-name: none;\n  }\n\n/* Element-basierte View Transitions */\n  .view-transition-basic {\n    view-transition-name: auto;\n  }\n\n/* Benannte View Transitions für spezifische Elemente */\n  .view-transition-hero {\n    view-transition-name: hero;\n  }\n\n  .view-transition-card {\n    view-transition-name: card;\n  }\n\n  .view-transition-header {\n    view-transition-name: header;\n  }\n\n  .view-transition-content {\n    view-transition-name: content;\n  }\n\n  .view-transition-poster {\n    view-transition-name: poster;\n  }\n\n/* View Transition Animations-Anpassungen */\n  ::view-transition-old(root) {\n    animation: 300ms cubic-bezier(0.4, 0, 0.2, 1) both fade-out;\n  }\n\n  ::view-transition-new(root) {\n    animation: 300ms cubic-bezier(0.4, 0, 0.2, 1) both fade-in;\n  }\n\n/* Poster Transition Anpassungen */\n  ::view-transition-old(poster),\n  ::view-transition-new(poster) {\n    animation: var(--animation-none);\n    height: 100%;\n    mix-blend-mode: normal;\n  }\n\n  .poster-cover ::view-transition-new(poster) {\n    object-fit: cover;\n  }\n\n  .poster-contain ::view-transition-new(poster) {\n    object-fit: contain;\n  }\n\n  .poster-zoom-in ::view-transition-old(poster) {\n    animation: 400ms cubic-bezier(0.4, 0, 0.2, 1) both zoom-out;\n  }\n\n  .poster-zoom-in ::view-transition-new(poster) {\n    animation: 400ms cubic-bezier(0.4, 0, 0.2, 1) both zoom-in;\n  }\n\n  .poster-flip ::view-transition-old(poster) {\n    animation: 400ms cubic-bezier(0.4, 0, 0.2, 1) both flip-out;\n  }\n\n  .poster-flip ::view-transition-new(poster) {\n    animation: 400ms cubic-bezier(0.4, 0, 0.2, 1) both flip-in;\n  }\n\n  .poster-reveal ::view-transition-old(poster) {\n    animation: 400ms cubic-bezier(0.4, 0, 0.2, 1) both circle-out;\n    clip-path: circle(100% at center);\n  }\n\n  .poster-reveal ::view-transition-new(poster) {\n    animation: 400ms cubic-bezier(0.4, 0, 0.2, 1) both circle-in;\n    clip-path: circle(0% at center);\n  }\n\n/* Cross-Document Transitions */\n  .cross-fade {\n    animation: cross-fade 300ms cubic-bezier(0.4, 0, 0.2, 1);\n  }\n\n  .cross-slide-left {\n    animation: cross-slide-left 300ms cubic-bezier(0.4, 0, 0.2, 1);\n  }\n\n  .cross-slide-right {\n    animation: cross-slide-right 300ms cubic-bezier(0.4, 0, 0.2, 1);\n  }\n\n  .cross-scale {\n    animation: cross-scale 300ms cubic-bezier(0.4, 0, 0.2, 1);\n  }\n\n/* Weitere spezifische Transitions für einzelne Elemente */\n  ::view-transition-old(hero) {\n    animation: 300ms cubic-bezier(0.4, 0, 0.2, 1) both scale-down-fade-out;\n  }\n\n  ::view-transition-new(hero) {\n    animation: 300ms cubic-bezier(0.4, 0, 0.2, 1) both scale-up-fade-in;\n  }\n\n  ::view-transition-old(card) {\n    animation: 300ms cubic-bezier(0.4, 0, 0.2, 1) both slide-left-fade-out;\n  }\n\n  ::view-transition-new(card) {\n    animation: 300ms cubic-bezier(0.4, 0, 0.2, 1) both slide-right-fade-in;\n  }\n\n/* Animations-Keyframes */\n  @keyframes fade-out {\n    from { opacity: var(--opacity-100); }\n\n    to { opacity: var(--opacity-0); }\n  }\n\n  @keyframes fade-in {\n    from { opacity: var(--opacity-0); }\n\n    to { opacity: var(--opacity-100); }\n  }\n\n  @keyframes scale-down-fade-out {\n    from { opacity: var(--opacity-100); transform: var(--transform-scale-100); }\n\n    to { opacity: var(--opacity-0); transform: scale(0.8); }\n  }\n\n  @keyframes scale-up-fade-in {\n    from { opacity: var(--opacity-0); transform: scale(0.8); }\n\n    to { opacity: var(--opacity-100); transform: var(--transform-scale-100); }\n  }\n\n  @keyframes slide-left-fade-out {\n    from { opacity: var(--opacity-100); transform: translateX(0%); }\n\n    to { opacity: var(--opacity-0); transform: translateX(-30px); }\n  }\n\n  @keyframes slide-right-fade-in {\n    from { opacity: var(--opacity-0); transform: translateX(30px); }\n\n    to { opacity: var(--opacity-100); transform: translateX(0%); }\n  }\n\n  @keyframes cross-fade {\n    from { opacity: var(--opacity-0); }\n\n    to { opacity: var(--opacity-100); }\n  }\n\n  @keyframes cross-slide-left {\n    from { transform: translateX(100%); }\n\n    to { transform: translateX(0%); }\n  }\n\n  @keyframes cross-slide-right {\n    from { transform: translateX(-100%); }\n\n    to { transform: translateX(0%); }\n  }\n\n  @keyframes cross-scale {\n    from { opacity: var(--opacity-0); transform: var(--transform-scale-90); }\n\n    to { opacity: var(--opacity-100); transform: var(--transform-scale-100); }\n  }\n\n  @keyframes zoom-out {\n    from { opacity: var(--opacity-100); transform: var(--transform-scale-100); }\n\n    to { opacity: var(--opacity-0); transform: scale(1.2); }\n  }\n\n  @keyframes zoom-in {\n    from { opacity: var(--opacity-0); transform: scale(0.8); }\n\n    to { opacity: var(--opacity-100); transform: var(--transform-scale-100); }\n  }\n\n  @keyframes flip-out {\n    from { opacity: var(--opacity-100); transform: perspective(800px) rotateY(0deg); }\n\n    to { opacity: var(--opacity-0); transform: perspective(800px) rotateY(-90deg); }\n  }\n\n  @keyframes flip-in {\n    from { opacity: var(--opacity-0); transform: perspective(800px) rotateY(90deg); }\n\n    to { opacity: var(--opacity-100); transform: perspective(800px) rotateY(0deg); }\n  }\n\n  @keyframes circle-out {\n    from { clip-path: circle(100% at center); }\n\n    to { clip-path: circle(0% at center); }\n  }\n\n  @keyframes circle-in {\n    from { clip-path: circle(0% at center); }\n\n    to { clip-path: circle(100% at center); }\n  }\n}\n\n/* Reduzierte Bewegung */\n@media (prefers-reduced-motion: reduce) {\n  @layer utilities {\n    .transition-all,\n    .transition-transform,\n    .transition-opacity,\n    .transition-colors,\n    .transition-shadow,\n    .transition-width,\n    .transition-height,\n    .transition-spacing {\n      transition: var(--transition-none);\n    }\n  }\n\n  @layer components {\n    ::view-transition-old(root),\n    ::view-transition-new(root),\n    ::view-transition-old(hero),\n    ::view-transition-new(hero),\n    ::view-transition-old(card),\n    ::view-transition-new(card),\n    .cross-fade,\n    .cross-slide-left,\n    .cross-slide-right,\n    .cross-scale {\n      animation: var(--animation-none);\n    }\n  }\n}\n\n/* Datei: effects/motion/scroll.css */\n/**\n* Scroll-Effekte\n*\n* Diese Datei enthält verschiedene Scroll-Effekte für moderne UIs.\n* Die Effekte sind performant optimiert und berücksichtigen reduzierte Bewegung.\n*/\n\n@layer utilities {\n  .scroll-smooth {\n    scroll-behavior: smooth;\n  }\n\n  .scroll-snap-x {\n    scroll-snap-type: x mandatory;\n  }\n\n  .scroll-snap-y {\n    scroll-snap-type: y mandatory;\n  }\n\n  .scroll-snap-start {\n    scroll-snap-align: start;\n  }\n\n  .scroll-snap-center {\n    scroll-snap-align: center;\n  }\n\n  .scroll-snap-end {\n    scroll-snap-align: end;\n  }\n\n  .scroll-hide {\n    -ms-overflow-style: none;\n    scrollbar-width: none;\n  }\n\n  .scroll-hide::-webkit-scrollbar {\n    display: none;\n  }\n\n  .scroll-thin {\n    scrollbar-width: thin;\n  }\n\n  .scroll-thin::-webkit-scrollbar {\n    height: var(--spacing-1-5);\n    width: var(--spacing-1-5);\n  }\n\n  .scroll-thin::-webkit-scrollbar-track {\n    background: var(--scroll-track-color, transparent);\n  }\n\n  .scroll-thin::-webkit-scrollbar-thumb {\n    background: var(--scroll-thumb-color, rgb(0 0 0 / 20%));\n    border-radius: var(--spacing-1);\n  }\n}\n\n/* Reduzierte Bewegung */\n@media (prefers-reduced-motion: reduce) {\n  @layer utilities {\n    .scroll-smooth {\n      scroll-behavior: auto;\n    }\n  }\n}\n\n/* Datei: effects/motion/ripple.css */\n/**\n* Ripple-Effekte\n*\n* Diese Datei enthält verschiedene Ripple-Effekte für moderne UIs.\n* Die Effekte sind performant optimiert und berücksichtigen reduzierte Bewegung.\n*/\n\n@layer components {\n  .ripple {\n    overflow: hidden;\n    position: relative;\n  }\n\n  .ripple::after {\n    background-image: radial-gradient(circle, var(--ripple-color, rgb(255 255 255 / 30%)) 10, transparent 10.01%);\n    background-position: 50%;\n    background-repeat: no-repeat;\n    content: '';\n    height: 100%;\n    left: 0%;\n    opacity: var(--opacity-0);\n    pointer-events: none;\n    position: absolute;\n    top: 0%;\n    transform: scale(10, 10);\n    transition: transform 0.5s, opacity 0.5s;\n    width: 100%;\n  }\n\n  .ripple:active::after {\n    opacity: var(--opacity-30);\n    transform: scale(0, 0);\n    transition: 0s;\n  }\n\n  .ripple-sm::after {\n    background-image: radial-gradient(circle, var(--ripple-color-sm, rgb(255 255 255 / 20%)) 5%, transparent 5.01%);\n  }\n\n  .ripple-lg::after {\n    background-image: radial-gradient(circle, var(--ripple-color-lg, rgb(255 255 255 / 40%)) 15%, transparent 15.01%);\n  }\n\n  .ripple-slow::after {\n    transition: transform 0.8s, opacity 0.8s;\n  }\n\n  .ripple-fast::after {\n    transition: transform 0.3s, opacity 0.3s;\n  }\n\n  .ripple-color-primary::after {\n    background-image: radial-gradient(circle, var(--ripple-primary, rgb(59 130 246 / 30%)) 10, transparent 10.01%);\n  }\n\n  .ripple-color-secondary::after {\n    background-image: radial-gradient(circle, var(--ripple-secondary, rgb(107 114 128 / 30%)) 10, transparent 10.01%);\n  }\n\n  .ripple-color-success::after {\n    background-image: radial-gradient(circle, var(--ripple-success, rgb(16 185 129 / 30%)) 10, transparent 10.01%);\n  }\n\n  .ripple-color-error::after {\n    background-image: radial-gradient(circle, var(--ripple-error, rgb(239 68 68 / 30%)) 10, transparent 10.01%);\n  }\n\n  .ripple-color-warning::after {\n    background-image: radial-gradient(circle, var(--ripple-warning, rgb(245 158 11 / 30%)) 10, transparent 10.01%);\n  }\n\n  .ripple-color-info::after {\n    background-image: radial-gradient(circle, var(--ripple-info, rgb(6 182 212 / 30%)) 10, transparent 10.01%);\n  }\n\n  .ripple-outline {\n    overflow: hidden;\n    position: relative;\n  }\n\n  .ripple-outline::after {\n    border: var(--border-width-thick) solid var(--ripple-outline-color, rgb(255 255 255 / 30%));\n    border-radius: inherit;\n    content: '';\n    height: 100%;\n    left: 0%;\n    opacity: var(--opacity-0);\n    pointer-events: none;\n    position: absolute;\n    top: 0%;\n    transform: scale(1.5);\n    transition: transform 0.5s, opacity 0.5s;\n    width: 100%;\n  }\n\n  .ripple-outline:active::after {\n    opacity: var(--opacity-30);\n    transform: var(--transform-scale-100);\n    transition: 0s;\n  }\n}\n\n/* Reduzierte Bewegung */\n@media (prefers-reduced-motion: reduce) {\n  @layer components {\n    .ripple::after,\n    .ripple-outline::after {\n      transition: var(--transition-none);\n    }\n  }\n}\n\n/* Datei: effects/motion/morph.css */\n/**\n* Morphing-Effekte\n*\n* Diese Datei enthält verschiedene Morphing-Effekte für moderne UIs.\n* Die Effekte sind performant optimiert und berücksichtigen reduzierte Bewegung.\n*/\n\n@keyframes morph-pulse {\n  0, 100% {\n    border-radius: 3px 70 70 30 / 30 30 70 70;\n  }\n\n  50% {\n    border-radius: 7px 30 30 70 / 70 70 30 30;\n  }\n}\n\n@keyframes morph-pulse-sm {\n  0, 100% {\n    border-radius: 2px 80 80 20 / 20 20 80 80;\n  }\n\n  50% {\n    border-radius: 8px 20 20 80 / 80 80 20 20;\n  }\n}\n\n@keyframes morph-pulse-lg {\n  0, 100% {\n    border-radius: 4px 60 60 40 / 40 40 60 60;\n  }\n\n  50% {\n    border-radius: 6px 40 40 60 / 60 60 40 40;\n  }\n}\n\n@layer components {\n  .morph {\n    transition: all 0.3s var(--easing-smooth);\n  }\n\n  .morph:hover {\n    border-radius: 3px 70 70 30 / 30 30 70 70;\n  }\n\n  .morph-sm:hover {\n    border-radius: 2px 80 80 20 / 20 20 80 80;\n  }\n\n  .morph-lg:hover {\n    border-radius: 4px 60 60 40 / 40 40 60 60;\n  }\n\n  .morph-slow {\n    transition-duration: var(--animation-duration-medium);\n  }\n\n  .morph-fast {\n    transition-duration: var(--animation-duration-fast);\n  }\n\n  .morph-blob {\n    transition: all 0.3s var(--easing-smooth);\n  }\n\n  .morph-blob:hover {\n    border-radius: 6px 40 30 70 / 60 30 70 40;\n  }\n\n  .morph-blob-sm:hover {\n    border-radius: 5px 50 20 80 / 50 20 80 50;\n  }\n\n  .morph-blob-lg:hover {\n    border-radius: 7px 30 40 60 / 70 40 60 30;\n  }\n\n  .morph-wave {\n    transition: all 0.3s var(--easing-smooth);\n  }\n\n  .morph-wave:hover {\n    border-radius: 3px 70 30 70 / 30 70 30 70;\n  }\n\n  .morph-wave-sm:hover {\n    border-radius: 2px 80 20 80 / 20 80 20 80;\n  }\n\n  .morph-wave-lg:hover {\n    border-radius: 4px 60 40 60 / 40 60 40 60;\n  }\n\n  .morph-pulse {\n    animation: morph-pulse 2s infinite;\n  }\n\n  .morph-pulse-sm {\n    animation: morph-pulse-sm 2s infinite;\n  }\n\n  .morph-pulse-lg {\n    animation: morph-pulse-lg 2s infinite;\n  }\n\n  .morph-color-primary {\n    background: var(--morph-primary, #3b82f6);\n  }\n\n  .morph-color-secondary {\n    background: var(--morph-secondary, #6b7280);\n  }\n\n  .morph-color-success {\n    background: var(--morph-success, #10b981);\n  }\n\n  .morph-color-error {\n    background: var(--morph-error, #ef4444);\n  }\n\n  .morph-color-warning {\n    background: var(--morph-warning, #f59e0b);\n  }\n\n  .morph-color-info {\n    background: var(--morph-info, #06b6d4);\n  }\n}\n\n/* Reduzierte Bewegung */\n@media (prefers-reduced-motion: reduce) {\n  @layer components {\n    .morph,\n    .morph-blob,\n    .morph-wave,\n    .morph-pulse,\n    .morph-pulse-sm,\n    .morph-pulse-lg {\n      animation: var(--animation-none);\n      transition: var(--transition-none);\n    }\n  }\n}\n\n/* Datei: effects/motion/loading.css */\n/**\n* Ladeeffekte\n*\n* Diese Datei enthält verschiedene Ladeeffekte 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 loading-spin {\n  to {\n    transform: var(--transform-rotate-360%);\n  }\n}\n\n@keyframes loading-pulse {\n  0, 100% {\n    opacity: var(--opacity-50);\n    transform: scale(0.8);\n  }\n\n  50% {\n    opacity: var(--opacity-100);\n    transform: var(--transform-scale-100);\n  }\n}\n\n@keyframes loading-dots {\n  0, 100% {\n    opacity: var(--opacity-50);\n    transform: scale(0.7);\n  }\n\n  50% {\n    opacity: var(--opacity-100);\n    transform: var(--transform-scale-100);\n  }\n}\n\n@keyframes loading-progress {\n  0% {\n    transform: translateX(-100%);\n  }\n\n  100% {\n    transform: translateX(100%);\n  }\n}\n\n@keyframes loading-skeleton {\n  0% {\n    background-position: 100% 0;\n  }\n\n  100% {\n    background-position: -100 0;\n  }\n}\n\n@keyframes loading-shimmer {\n  100% {\n    transform: translateX(100%);\n  }\n}\n\n/* Komponenten-Styles */\n@layer components {\n  .loading-spinner {\n    border: var(--spacing-1) solid var(--loading-color, rgb(0 0 0 / 10%));\n    border-left-color: var(--loading-spinner-color, #3b82f6);\n    border-radius: 5px;\n    height: var(--spacing-10);\n    width: var(--spacing-10);\n  }\n\n  .loading-spinner-sm {\n    border-width: var(--border-width-thick);\n    height: var(--spacing-5);\n    width: var(--spacing-5);\n  }\n\n  .loading-spinner-lg {\n    border-width: var(--spacing-1-5);\n    height: var(--spacing-15);\n    width: var(--spacing-15);\n  }\n\n  .loading-pulse {\n    background: var(--loading-pulse-color, #3b82f6);\n    border-radius: 5px;\n    height: var(--spacing-10);\n    width: var(--spacing-10);\n  }\n\n  .loading-pulse-sm {\n    height: var(--spacing-5);\n    width: var(--spacing-5);\n  }\n\n  .loading-pulse-lg {\n    height: var(--spacing-15);\n    width: var(--spacing-15);\n  }\n\n  .loading-dots {\n    display: flex;\n    gap: var(--spacing-1);\n  }\n\n  .loading-dots::before,\n  .loading-dots::after {\n    background: var(--loading-dots-color, #3b82f6);\n    border-radius: 5px;\n    content: '';\n    height: var(--spacing-2);\n    width: var(--spacing-2);\n  }\n\n  .loading-dots-sm::before,\n  .loading-dots-sm::after {\n    height: var(--spacing-1);\n    width: var(--spacing-1);\n  }\n\n  .loading-dots-lg::before,\n  .loading-dots-lg::after {\n    height: var(--spacing-1)(--border-width-thick);\n    width: var(--spacing-1)(--border-width-thick);\n  }\n\n  .loading-progress {\n    background: var(--loading-progress-bg, rgb(0 0 0 / 10%));\n    border-radius: var(--border-width-thick);\n    height: var(--spacing-1);\n    overflow: hidden;\n    width: 100%;\n  }\n\n  .loading-progress::after {\n    background: var(--loading-progress-color, #3b82f6);\n    content: '';\n    display: block;\n    height: 100%;\n    width: 4%0;\n  }\n\n  .loading-progress-sm {\n    height: var(--border-width-thick);\n  }\n\n  .loading-progress-lg {\n    height: var(--spacing-1-5);\n  }\n\n  .loading-skeleton {\n    background: linear-gradient(\n    90deg,\n    var(--loading-skeleton-start, rgb(0 0 0 / 10%)) 0,\n    var(--loading-skeleton-end, rgb(0 0 0 / 20%)) 50,\n    var(--loading-skeleton-start, rgb(0 0 0 / 10%)) 100\n    );\n    background-size: 200% 100;\n  }\n\n  .loading-skeleton-sm {\n    background-size: 150px 100;\n  }\n\n  .loading-skeleton-lg {\n    background-size: 300px 100%;\n  }\n\n  .loading-shimmer {\n    overflow: hidden;\n    position: relative;\n  }\n\n  .loading-shimmer::after {\n    background: linear-gradient(\n    90deg,\n    transparent 0,\n    var(--loading-shimmer-color, rgb(255 255 255 / 20%)) 50,\n    transparent 100\n    );\n    content: '';\n    height: 100%;\n    left: 0%;\n    position: absolute;\n    top: 0%;\n    width: 100%;\n  }\n\n  .loading-color-primary {\n    --loading-spinner-color: var(--loading-primary, #3b82f6);\n    --loading-pulse-color: var(--loading-primary, #3b82f6);\n    --loading-dots-color: var(--loading-primary, #3b82f6);\n    --loading-progress-color: var(--loading-primary, #3b82f6);\n  }\n\n  .loading-color-secondary {\n    --loading-spinner-color: var(--loading-secondary, #6b7280);\n    --loading-pulse-color: var(--loading-secondary, #6b7280);\n    --loading-dots-color: var(--loading-secondary, #6b7280);\n    --loading-progress-color: var(--loading-secondary, #6b7280);\n  }\n\n  .loading-color-success {\n    --loading-spinner-color: var(--loading-success, #10b981);\n    --loading-pulse-color: var(--loading-success, #10b981);\n    --loading-dots-color: var(--loading-success, #10b981);\n    --loading-progress-color: var(--loading-success, #10b981);\n  }\n\n  .loading-color-error {\n    --loading-spinner-color: var(--loading-error, #ef4444);\n    --loading-pulse-color: var(--loading-error, #ef4444);\n    --loading-dots-color: var(--loading-error, #ef4444);\n    --loading-progress-color: var(--loading-error, #ef4444);\n  }\n\n  .loading-color-warning {\n    --loading-spinner-color: var(--loading-warning, #f59e0b);\n    --loading-pulse-color: var(--loading-warning, #f59e0b);\n    --loading-dots-color: var(--loading-warning, #f59e0b);\n    --loading-progress-color: var(--loading-warning, #f59e0b);\n  }\n\n  .loading-color-info {\n    --loading-spinner-color: var(--loading-info, #06b6d4);\n    --loading-pulse-color: var(--loading-info, #06b6d4);\n    --loading-dots-color: var(--loading-info, #06b6d4);\n    --loading-progress-color: var(--loading-info, #06b6d4);\n  }\n}\n\n/* Animations-Styles */\n@layer animations {\n  .loading-spinner {\n    animation: loading-spin 1s linear infinite;\n  }\n\n  .loading-pulse {\n    animation: loading-pulse 1s var(--easing-smooth) infinite;\n  }\n\n  .loading-dots::before,\n  .loading-dots::after {\n    animation: loading-dots 1s var(--easing-smooth) infinite;\n  }\n\n  .loading-dots::after {\n    animation-delay: var(--animation-duration-medium);\n  }\n\n  .loading-progress::after {\n    animation: loading-progress 1s var(--easing-smooth) infinite;\n  }\n\n  .loading-skeleton {\n    animation: loading-skeleton 1.5s var(--easing-smooth) infinite;\n  }\n\n  .loading-skeleton-sm {\n    animation-duration: var(--animation-duration-slow);\n  }\n\n  .loading-skeleton-lg {\n    animation-duration: var(--animation-duration-slowest);\n  }\n\n  .loading-shimmer::after {\n    animation: loading-shimmer 1.5s var(--easing-smooth) infinite;\n  }\n}\n\n/* Barrierefreiheit - reduzierte Bewegung */\n@media (prefers-reduced-motion: reduce) {\n  @layer animations {\n    .loading-spinner,\n    .loading-pulse,\n    .loading-dots::before,\n    .loading-dots::after,\n    .loading-progress::after,\n    .loading-skeleton,\n    .loading-shimmer::after {\n      animation: var(--animation-none) !important;\n    }\n  }\n}\n\n/* Datei: effects/motion/animations.css */\n/**\n* Animation-Effekte\n*\n* Diese Datei enthält verschiedene Animation-Effekte für moderne UIs.\n* Die Effekte sind performant optimiert und berücksichtigen reduzierte Bewegung.\n*\n* Includes shared UI animations for common use across components (fadeIn, slideIn, spin, pulse, etc.)\n* Previously separate shared-ui-animations.css has been merged into this file.\n*/\n\n/* Basis-Keyframes */\n@keyframes fade-in {\n  from { opacity: var(--opacity-0); }\n\n  to { opacity: var(--opacity-100); }\n}\n\n@keyframes fade-out {\n  from { opacity: var(--opacity-100); }\n\n  to { opacity: var(--opacity-0); }\n}\n\n@keyframes scale-in {\n  from {\n    opacity: var(--opacity-0);\n    transform: scale(var(--scale-sm, 0.95));\n  }\n\n  to {\n    opacity: var(--opacity-100);\n    transform: var(--transform-scale-100);\n  }\n}\n\n@keyframes slide-in-up {\n  from {\n    opacity: var(--opacity-0);\n    transform: translateY(var(--slide-distance, var(--move-md, var(--spacing-4))));\n  }\n\n  to {\n    opacity: var(--opacity-100);\n    transform: translateX(0%);\n  }\n}\n\n@keyframes slide-in-down {\n  from {\n    opacity: var(--opacity-0);\n    transform: translateY(calc(-1 * var(--slide-distance, var(--move-md, var(--spacing-4)))));\n  }\n\n  to {\n    opacity: var(--opacity-100);\n    transform: translateX(0%);\n  }\n}\n\n@keyframes slide-in-left {\n  from {\n    opacity: var(--opacity-0);\n    transform: translateX(calc(-1 * var(--slide-distance, var(--move-md, var(--spacing-4)))));\n  }\n\n  to {\n    opacity: var(--opacity-100);\n    transform: translateX(0%);\n  }\n}\n\n@keyframes slide-in-right {\n  from {\n    opacity: var(--opacity-0);\n    transform: translateX(var(--slide-distance, var(--move-md, var(--spacing-4))));\n  }\n\n  to {\n    opacity: var(--opacity-100);\n    transform: translateX(0%);\n  }\n}\n\n@keyframes bounce {\n  0%, 20%, 50%, 80%, 100% {\n    transform: translateX(0%);\n  }\n\n  40% {\n    transform: translateY(calc(-1 * var(--bounce-height, 25%)));\n  }\n\n  60% {\n    transform: translateY(calc(-1 * var(--bounce-height, 25%) / 2));\n  }\n}\n\n@keyframes pulse {\n  0%, 100% {\n    opacity: var(--opacity-100);\n  }\n\n  50% {\n    opacity: var(--pulse-opacity-min, 0.5);\n  }\n}\n\n@keyframes spin {\n  from {\n    transform: rotate(0deg);\n  }\n\n  to {\n    transform: rotate(360deg);\n  }\n}\n\n@keyframes ping {\n  0% {\n    opacity: var(--opacity-100);\n    transform: var(--transform-scale-100);\n  }\n\n  75%, 100% {\n    opacity: var(--opacity-0);\n    transform: scale(var(--ping-scale, 2));\n  }\n}\n\n@keyframes wiggle {\n  0%, 100% {\n    transform: rotate(0deg);\n  }\n\n  25% {\n    transform: rotate(var(--wiggle-angle, 3deg));\n  }\n\n  75% {\n    transform: rotate(calc(-1 * var(--wiggle-angle, 3deg)));\n  }\n}\n\n@keyframes float {\n  0%, 100% {\n    transform: translateX(0%);\n  }\n\n  50% {\n    transform: translateY(calc(-1 * var(--float-distance, var(--spacing-2-5))));\n  }\n}\n\n@keyframes shake {\n  0%, 100% {\n    transform: translateX(0%);\n  }\n\n  10%, 30%, 50%, 70%, 90% {\n    transform: translateX(calc(-1 * var(--shake-distance, var(--shake-distance-sm, var(--border-width)))));\n  }\n\n  20%, 40%, 60%, 80% {\n    transform: translateX(var(--shake-distance, var(--shake-distance-sm, var(--border-width))));\n  }\n}\n\n@keyframes heartbeat {\n  0%, 100% {\n    transform: var(--transform-scale-100);\n  }\n\n  14% {\n    transform: scale(var(--heartbeat-scale, 1.3));\n  }\n\n  28% {\n    transform: var(--transform-scale-100);\n  }\n\n  42% {\n    transform: scale(var(--heartbeat-scale, 1.3));\n  }\n\n  70% {\n    transform: var(--transform-scale-100);\n  }\n}\n\n@keyframes elastic {\n  0% {\n    transform: scale(1, 1);\n  }\n\n  12.5% {\n    transform: scale(var(--elastic-scale-x-large, 1.25), var(--elastic-scale-y-small, 0.75));\n  }\n\n  25% {\n    transform: scale(var(--elastic-scale-x-small, 0.75), var(--elastic-scale-y-large, 1.25));\n  }\n\n  37.5% {\n    transform: scale(var(--elastic-scale-x-medium, 1.15), var(--elastic-scale-y-medium, 0.85));\n  }\n\n  50% {\n    transform: scale(var(--elastic-scale-x-tiny, 0.95), var(--elastic-scale-y-tiny, 1.05));\n  }\n\n  62.5% {\n    transform: scale(var(--elastic-scale-x-mini, 1.05), var(--elastic-scale-y-mini, 0.95));\n  }\n\n  75% {\n    transform: scale(0.985, 1.015);\n  }\n\n  87.5% {\n    transform: scale(1.01, 0.99);\n  }\n\n  100% {\n    transform: scale(1, 1);\n  }\n}\n\n@keyframes dialog-enter {\n  from {\n    opacity: var(--opacity-0);\n    transform: var(--transform-scale-95) translateY(var(--dialog-offset, calc(-1 * var(--spacing-5))));\n  }\n\n  to {\n    opacity: var(--opacity-100);\n    transform: var(--transform-scale-100) translateY(0%);\n  }\n}\n\n@keyframes dialog-exit {\n  from {\n    opacity: var(--opacity-100);\n    transform: var(--transform-scale-100);\n  }\n\n  to {\n    opacity: var(--opacity-0);\n    transform: var(--transform-scale-95) translateY(var(--dialog-offset, calc(-1 * var(--spacing-5))));\n  }\n}\n\n@keyframes focus-pulse {\n  0% {\n    box-shadow: 0 0 0 0 var(--focus-color, rgb(66 153 225 / 60%));\n  }\n\n  70% {\n    box-shadow: 0 0 0 var(--focus-ring-size, var(--spacing-1)) transparent;\n  }\n\n  100% {\n    box-shadow: 0 0 0 0 transparent;\n  }\n}\n\n@layer animations {\n  :root {\n/* Durations */\n    --animation-duration-fastest: 100ms;\n    --animation-duration-fast: 150ms;\n    --animation-duration-normal: 300ms;\n    --animation-duration-slow: 500ms;\n    --animation-duration-slower: 750ms;\n    --animation-duration-slowest: 1000ms;\n\n/* Timing Functions */\n    --ease-linear: linear;\n    --ease-in: cubic-bezier(0.4, 0, 1, 1);\n    --easing-decelerate: cubic-bezier(0, 0, 0.2, 1);\n    --easing-smooth: cubic-bezier(0.4, 0, 0.2, 1);\n    --easing-smooth-cubic: cubic-bezier(0.645, 0.045, 0.355, 1);\n    --ease-bounce: cubic-bezier(0.68, -0.55, 0.265, 1.55);\n    --ease-spring: cubic-bezier(0.68, -0.6, 0.32, 1.6);\n\n/* Movement */\n    --move-xs: var(--spacing-1);\n    --move-sm: var(--spacing-2);\n    --move-md: var(--spacing-4);\n    --move-lg: calc(var(--spacing-2) + var(--spacing-1));\n    --move-xl: 36px;\n\n/* Animation-spezifische Parameter */\n    --slide-distance: var(--move-md);\n    --scroll-slide-distance: var(--spacing-7-5);\n    --scroll-slide-from-edge: 100;\n\n/* Scale */\n    --scale-xs: 0.98;\n    --scale-sm: 0.95;\n    --scale-md: 0.9;\n    --scale-lg: 1.05;\n    --scale-xl: 1.1;\n\n/* Delay */\n    --delay-xs: 50ms;\n    --delay-sm: 100ms;\n    --delay-md: 200ms;\n    --delay-lg: 300ms;\n    --delay-xl: 500ms;\n\n/* Iterations */\n    --iteration-once: 1;\n    --iteration-twice: 2;\n    --iteration-thrice: 3;\n    --iteration-infinite: infinite;\n\n/* Animation-spezifische Parameter */\n    --bounce-height: var(--percentage-25);\n    --pulse-opacity-min: 0.5;\n    --ping-scale: 2;\n    --wiggle-angle: 3deg;\n    --float-distance: var(--spacing-2-5);\n    --shake-distance-sm: var(--border-width);\n    --shake-distance-md: var(--border-width-thick);\n    --shake-distance-lg: var(--spacing-1);\n    --heartbeat-scale: 1.3;\n    --elastic-scale-x-large: 1.25;\n    --elastic-scale-y-small: 0.75;\n    --elastic-scale-x-small: 0.75;\n    --elastic-scale-y-large: 1.25;\n    --elastic-scale-x-medium: 1.15;\n    --elastic-scale-y-medium: 0.85;\n    --elastic-scale-x-tiny: 0.95;\n    --elastic-scale-y-tiny: 1.05;\n    --elastic-scale-x-mini: 1.05;\n    --elastic-scale-y-mini: 0.95;\n\n/* Dialog-Animation Parameter */\n    --dialog-offset: -var(--spacing-5);\n    --dialog-duration: 250ms;\n    --dialog-backdrop-opacity: var(--opacity-0).5;\n\n/* Fokus-Animation Parameter */\n    --focus-color: rgb(66 153 225 / 60%);\n    --focus-ring-size: var(--spacing-1);\n    --focus-animation-duration: var(--animation-duration-slower);\n\n/* Gestaffelte Animationen */\n    --stagger-base-delay: 50ms;\n    --stagger-increment: 50ms;\n    --stagger-max-delay: 1000ms;\n\n/* Backdrop Parameter */\n    --backdrop-opacity: var(--opacity-0).75;\n    --backdrop-blur: 0;\n    --backdrop-bg-color: rgb(0 0 0 / var(--backdrop-opacity));\n    --backdrop-animation-duration: var(--animation-duration-normal);\n\n/* Aktiviert Interpolation zwischen Keywords wie small, medium, large */\n    interpolate-size: allow-keywords;\n  }\n\n/**\n  * ==========================================\n  * Animation Utility-Klassen\n  * ==========================================\n  */\n\n/* Animation Basis-Utility */\n  @layer animation-base {\n    .animate {\n      animation-duration: var(--animation-duration-normal);\n      animation-fill-mode: both;\n      animation-timing-function: var(--easing-smooth);\n    }\n  }\n\n/* Animation Richtungs-Utilities */\n  @layer animation-direction {\n    .direction-normal { animation-direction: normal; }\n\n    .direction-reverse { animation-direction: reverse; }\n\n    .direction-alternate { animation-direction: alternate; }\n\n    .direction-alternate-reverse { animation-direction: alternate-reverse; }\n  }\n\n/* Animation Fill-Mode Utilities */\n  @layer animation-fill {\n    .fill-none { animation-fill-mode: none; }\n\n    .fill-forwards { animation-fill-mode: forwards; }\n\n    .fill-backwards { animation-fill-mode: backwards; }\n\n    .fill-both { animation-fill-mode: both; }\n  }\n\n/* Animation Iterations-Utilities */\n  @layer animation-iterations {\n    .iteration-once, .once { animation-iteration-count: var(--iteration-once); }\n\n    .iteration-twice, .twice { animation-iteration-count: var(--iteration-twice); }\n\n    .iteration-thrice, .thrice { animation-iteration-count: var(--iteration-thrice); }\n\n    .iteration-infinite, .infinite { animation-iteration-count: var(--iteration-infinite); }\n  }\n\n/* Animation Delay-Utilities */\n  @layer animation-delay {\n    .delay-xs { animation-delay: var(--delay-xs); }\n\n    .delay-sm { animation-delay: var(--delay-sm); }\n\n    .delay-md { animation-delay: var(--delay-md); }\n\n    .delay-lg { animation-delay: var(--delay-lg); }\n\n    .delay-xl { animation-delay: var(--delay-xl); }\n  }\n\n/* Animation Duration-Utilities */\n  @layer animation-duration {\n    .duration-fastest { animation-duration: var(--animation-duration-fastest); }\n\n    .duration-fast { animation-duration: var(--animation-duration-fast); }\n\n    .duration-normal { animation-duration: var(--animation-duration-normal); }\n\n    .duration-slow { animation-duration: var(--animation-duration-slow); }\n\n    .duration-slower { animation-duration: var(--animation-duration-slower); }\n\n    .duration-slowest { animation-duration: var(--animation-duration-slowest); }\n  }\n\n/**\n  * ==========================================\n  * Barrierefreiheit Motion-Utilities\n  * ==========================================\n  */\n  @layer motion-preferences {\n/* Aktiviert Animationen nur, wenn keine reduzierten Bewegungen bevorzugt werden */\n    .motion-safe {\n/* Standardmäßig keine Animationen/Übergänge */\n      animation: var(--animation-none) !important;\n      transition: var(--transition-none) !important;\n    }\n\n/* Für reduzierte Bewegung optimierte Stile */\n    .motion-reduce {\n/* Deaktiviert in Standardmodus */\n      display: none;\n    }\n\n/* Bei aktivierter Bewegung: motion-safe aktivieren, motion-reduce deaktivieren */\n    @media (prefers-reduced-motion: no-preference) {\n      .motion-safe {\n/* Animation- und Transition-Eigenschaften wiederherstellen */\n        animation: unset !important;\n        transition: unset !important;\n      }\n\n      .motion-reduce {\n        display: none;\n      }\n    }\n\n/* Bei reduzierter Bewegung: motion-safe deaktivieren, motion-reduce aktivieren */\n    @media (prefers-reduced-motion: reduce) {\n      .motion-safe {\n/* Animation- und Transition-Eigenschaften deaktivieren */\n        animation: var(--animation-none) !important;\n        transition: var(--transition-none) !important;\n      }\n\n      .motion-reduce {\n        display: revert;\n      }\n    }\n  }\n\n/**\n  * ==========================================\n  * Effekt-Animationen\n  * ==========================================\n  */\n\n/* Einblend-Animationen */\n  @layer fade-animations {\n    .fade-in {\n      animation-name: fade-in;\n    }\n\n    .fade-out {\n      animation-name: fade-out;\n    }\n  }\n\n/* Slide-Animationen */\n  @layer slide-animations {\n    .slide-in-up {\n      animation-name: slide-in-up;\n    }\n\n    .slide-in-down {\n      animation-name: slide-in-down;\n    }\n\n    .slide-in-left {\n      animation-name: slide-in-left;\n    }\n\n    .slide-in-right {\n      animation-name: slide-in-right;\n    }\n  }\n\n/* Scale-Animationen */\n  @layer scale-animations {\n    .scale-in {\n      animation-name: scale-in;\n    }\n\n    .scale-out {\n      animation-direction: reverse;\n      animation-name: scale-in;\n    }\n  }\n\n/* Scroll-Animationen */\n  @layer scroll-animations {\n    .scroll-fade-in {\n      animation: fade-in var(--animation-duration-normal) var(--easing-decelerate) forwards;\n      animation-range: entry 10 cover 30;\n      animation-timeline: view();\n      opacity: var(--opacity-0);\n      will-change: opacity;\n    }\n\n    .scroll-slide-in-up {\n      animation: slide-in-up var(--animation-duration-normal) var(--easing-decelerate) forwards;\n      animation-range: entry 10 cover 30;\n      animation-timeline: view();\n      opacity: var(--opacity-0);\n      transform: translateY(var(--scroll-slide-distance));\n      will-change: transform, opacity;\n    }\n\n    .scroll-slide-in-left {\n      animation: slide-in-left var(--animation-duration-normal) var(--easing-decelerate) forwards;\n      animation-range: entry 10 cover 30;\n      animation-timeline: view();\n      opacity: var(--opacity-0);\n      transform: translateX(calc(-1 * var(--scroll-slide-distance)));\n      will-change: transform, opacity;\n    }\n\n    .scroll-slide-in-right {\n      animation: slide-in-right var(--animation-duration-normal) var(--easing-decelerate) forwards;\n      animation-range: entry 10 cover 30;\n      animation-timeline: view();\n      opacity: var(--opacity-0);\n      transform: translateX(var(--scroll-slide-distance));\n      will-change: transform, opacity;\n    }\n  }\n\n/* Interaktions-Animationen */\n  @layer interaction-animations {\n    .interaction-scale {\n      transition: transform var(--animation-duration-fast) var(--easing-decelerate);\n    }\n\n    .interaction-scale:active {\n      transform: scale(var(--scale-xs));\n    }\n\n    .hover-glow {\n      transition: box-shadow var(--animation-duration-normal) var(--easing-decelerate);\n    }\n\n    .hover-glow:hover {\n      box-shadow: 0 0 var(--spacing-2-5) var(--color-primary-500, rgb(0 123 255 / 50%));\n    }\n\n    .tap-feedback {\n      overflow: hidden;\n      position: relative;\n    }\n\n    .tap-feedback:active::after {\n      background-color: currentColor;\n      content: \"\";\n      height: 100%;\n      left: 0%;\n      opacity: var(--opacity-10);\n      pointer-events: none;\n      position: absolute;\n      top: 0%;\n      width: 100%;\n    }\n  }\n\n/* Transition-Utilities */\n  @layer transition-utilities {\n    .transition-opacity {\n      transition-duration: var(--animation-duration-normal);\n      transition-property: opacity;\n      transition-timing-function: var(--easing-smooth);\n    }\n\n    .transition-transform {\n      transition-duration: var(--animation-duration-normal);\n      transition-property: transform;\n      transition-timing-function: var(--easing-smooth);\n    }\n\n    .transition-shadow {\n      transition-duration: var(--animation-duration-normal);\n      transition-property: box-shadow;\n      transition-timing-function: var(--easing-smooth);\n    }\n\n    .transition-colors {\n      transition-duration: var(--animation-duration-normal);\n      transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;\n      transition-timing-function: var(--easing-smooth);\n    }\n\n    .transition-all {\n      transition-duration: var(--animation-duration-normal);\n      transition-property: all;\n      transition-timing-function: var(--easing-smooth);\n    }\n  }\n\n/* Komplexe Animationen */\n  @layer complex-animations {\n    .animate-bounce {\n      animation: bounce var(--animation-duration-slow) var(--easing-smooth) infinite;\n    }\n\n    .animate-pulse {\n      animation: pulse var(--animation-duration-slower) var(--easing-smooth) infinite;\n    }\n\n    .animate-spin {\n      animation: spin var(--animation-duration-slowest) var(--ease-linear) infinite;\n    }\n\n    .animate-ping {\n      animation: ping var(--animation-duration-slow) var(--easing-decelerate) infinite;\n    }\n\n    .animate-wiggle {\n      animation: wiggle var(--animation-duration-normal) var(--easing-smooth) infinite;\n    }\n\n    .animate-float {\n      animation: float var(--animation-duration-slower) var(--easing-smooth) infinite;\n    }\n\n    .animate-shake {\n      animation: shake var(--animation-duration-fast) var(--easing-smooth) var(--iteration-twice);\n    }\n\n    .animate-heartbeat {\n      animation: heartbeat var(--animation-duration-slow) var(--easing-smooth) infinite;\n    }\n\n    .animate-elastic {\n      animation: elastic var(--animation-duration-slow) var(--easing-decelerate) var(--iteration-once);\n    }\n  }\n\n/**\n  * ==========================================\n  * Experimentelles Feature: Animation Composition\n  * ==========================================\n  *\n  * HINWEIS: Diese Funktion ist experimentell und hat derzeit eingeschränkte Browserunterstützung.\n  * Nur in modernsten Browsern verwenden oder mit entsprechenden Fallbacks.\n  *\n  * animation-composition bestimmt, wie Animationen miteinander kombiniert werden:\n  * - replace: Animation ersetzt bestehende Animationen (Standard)\n  * - add: Animation wird zu bestehenden Animationen hinzugefügt\n  * - accumulate: Animation wird zu bestehenden Animationen hinzugerechnet\n  */\n  @layer animation-composition {\n/* Animation-Composition Utilities */\n    .composition-replace {\n      animation-composition: replace;\n    }\n\n    .composition-add {\n      animation-composition: add;\n    }\n\n    .composition-accumulate {\n      animation-composition: accumulate;\n    }\n\n/* Experimentelle Präsets mit composition */\n    .animate-combined-bounce {\n      animation-composition: accumulate;\n      animation-duration: var(--animation-duration-slow), var(--animation-duration-normal);\n      animation-name: bounce, fade-in;\n    }\n\n    .animate-combined-shake {\n      animation-composition: accumulate;\n      animation-duration: var(--animation-duration-fast), var(--animation-duration-normal);\n      animation-name: shake, fade-in;\n    }\n\n/* Kombinierte Bewegungen mit accumulate */\n    .animate-path {\n      animation:\n      slide-in-right var(--animation-duration-slow) var(--easing-decelerate),\n      slide-in-up var(--animation-duration-normal) var(--easing-decelerate) var(--delay-sm);\n      animation-composition: accumulate;\n      animation-fill-mode: both;\n    }\n\n    .animate-zoom-bounce {\n      animation:\n      scale-in var(--animation-duration-normal) var(--easing-decelerate),\n      bounce var(--animation-duration-slow) var(--ease-bounce) var(--delay-sm);\n      animation-composition: accumulate;\n      animation-fill-mode: both;\n    }\n  }\n\n/**\n  * ==========================================\n  * Dialog-Animationen\n  * ==========================================\n  */\n  @layer dialog-animations {\n/* Dialog-Animationen für <dialog> Element und modale Fenster */\n    .dialog-animated {\n      animation-duration: var(--dialog-duration);\n      animation-fill-mode: both;\n      animation-timing-function: var(--easing-decelerate);\n      transform-origin: center top;\n      will-change: transform, opacity;\n    }\n\n/* Einblenden mit Scale und Slide */\n    .dialog-enter {\n      animation-name: dialog-enter;\n    }\n\n/* Ausblenden mit Scale und Slide */\n    .dialog-exit {\n      animation-name: dialog-exit;\n    }\n\n/* Backdrop-Animationen */\n    .dialog-backdrop-animated::backdrop {\n      animation: fade-in var(--dialog-duration) var(--easing-decelerate);\n      animation-fill-mode: both;\n      background-color: rgb(0 0 0 / var(--dialog-backdrop-opacity));\n      will-change: opacity;\n    }\n\n/* Direkte Anwendung auf <dialog>-Element */\n    dialog.animated {\n      animation: dialog-enter var(--dialog-duration) var(--easing-decelerate);\n      animation-fill-mode: both;\n      will-change: transform, opacity;\n    }\n\n    dialog.animated::backdrop {\n      animation: fade-in var(--dialog-duration) var(--easing-decelerate);\n      animation-fill-mode: both;\n      background-color: rgb(0 0 0 / var(--dialog-backdrop-opacity));\n      will-change: opacity;\n    }\n\n    dialog.animated[closing] {\n      animation: dialog-exit var(--dialog-duration) var(--easing-smooth);\n      will-change: transform, opacity;\n    }\n\n    dialog.animated[closing]::backdrop {\n      animation: fade-out var(--dialog-duration) var(--easing-smooth);\n      will-change: opacity;\n    }\n  }\n\n/**\n  * ==========================================\n  * Fokus-Animationen\n  * ==========================================\n  */\n  @layer focus-animations {\n/* Animierter Fokus-Ring für verbesserte Barrierefreiheit */\n    .focus-ring-animated {\n      outline: none;\n      position: relative;\n      transition: box-shadow var(--animation-duration-normal) var(--easing-decelerate);\n    }\n\n    .focus-ring-animated:focus-visible {\n      animation: focus-pulse var(--focus-animation-duration) var(--easing-decelerate) infinite;\n      box-shadow: 0 0 0 var(--focus-ring-size) var(--focus-color);\n    }\n\n/* Varianten für unterschiedliche Farben */\n    .focus-ring-animated.primary:focus-visible {\n      --focus-color: var(--color-primary-500, rgb(66 153 225 / 60%));\n    }\n\n    .focus-ring-animated.warning:focus-visible {\n      --focus-color: var(--color-warning-500, rgb(237 137 54 / 0.6));\n    }\n\n    .focus-ring-animated.error:focus-visible {\n      --focus-color: var(--color-error-500, rgb(245 101 101 / 0.6));\n    }\n\n/* Verstärkter Fokus-Ring für Screenreader-Nutzer */\n    .sr-focus-style {\n      display: none;\n    }\n\n    @media screen and (forced-colors: active) {\n      .focus-ring-animated:focus-visible {\n        animation: var(--animation-none);\n        box-shadow: none;\n        outline: var(--spacing-1) solid CanvasText;\n      }\n\n      .sr-focus-style {\n        border: var(--spacing-1) solid CanvasText;\n        display: block;\n        height: calc(100 + var(--spacing-2-5));\n        left: calc(-1 * var(--spacing-1));\n        pointer-events: none;\n        position: absolute;\n        top: calc(-1 * var(--spacing-1));\n        width: calc(100 + var(--spacing-2-5));\n        z-index: var(--z-index-1);\n      }\n    }\n\n    @media (prefers-contrast: more) {\n      .focus-ring-animated {\n        animation: var(--animation-none);\n        outline: var(--border-width-thick) solid var(--focus-color, currentColor);\n      }\n    }\n  }\n\n/**\n  * ==========================================\n  * Gestaffelte Animationen (Staggered)\n  * ==========================================\n  */\n  @layer staggered-animations {\n/* Container für gestaffelte Animationen */\n    .staggered-container > * {\n      animation-fill-mode: both;\n      opacity: var(--opacity-0);\n    }\n\n/* Gestaffelte Einblendanimation */\n    .staggered-fade-in > * {\n      animation-duration: var(--animation-duration-normal);\n      animation-name: fade-in;\n      animation-timing-function: var(--easing-decelerate);\n    }\n\n/* Gestaffelte Slide-Up-Animation */\n    .staggered-slide-in-up > * {\n      animation-duration: var(--animation-duration-normal);\n      animation-name: slide-in-up;\n      animation-timing-function: var(--easing-decelerate);\n    }\n\n/* Gestaffelte Slide-Down-Animation */\n    .staggered-slide-in-down > * {\n      animation-duration: var(--animation-duration-normal);\n      animation-name: slide-in-down;\n      animation-timing-function: var(--easing-decelerate);\n    }\n\n/* Gestaffelte Slide-Left-Animation */\n    .staggered-slide-in-left > * {\n      animation-duration: var(--animation-duration-normal);\n      animation-name: slide-in-left;\n      animation-timing-function: var(--easing-decelerate);\n    }\n\n/* Gestaffelte Slide-Right-Animation */\n    .staggered-slide-in-right > * {\n      animation-duration: var(--animation-duration-normal);\n      animation-name: slide-in-right;\n      animation-timing-function: var(--easing-decelerate);\n    }\n\n/* Automatische Verzögerungen basierend auf nth-child */\n    .staggered-container > *:nth-child(1) { animation-delay: calc(var(--stagger-base-delay)); }\n\n    .staggered-container > *:nth-child(2) { animation-delay: calc(var(--stagger-base-delay) + var(--stagger-increment) * 1); }\n\n    .staggered-container > *:nth-child(3) { animation-delay: calc(var(--stagger-base-delay) + var(--stagger-increment) * 2); }\n\n    .staggered-container > *:nth-child(4) { animation-delay: calc(var(--stagger-base-delay) + var(--stagger-increment) * 3); }\n\n    .staggered-container > *:nth-child(5) { animation-delay: calc(var(--stagger-base-delay) + var(--stagger-increment) * 4); }\n\n    .staggered-container > *:nth-child(6) { animation-delay: calc(var(--stagger-base-delay) + var(--stagger-increment) * 5); }\n\n    .staggered-container > *:nth-child(7) { animation-delay: calc(var(--stagger-base-delay) + var(--stagger-increment) * 6); }\n\n    .staggered-container > *:nth-child(8) { animation-delay: calc(var(--stagger-base-delay) + var(--stagger-increment) * 7); }\n\n    .staggered-container > *:nth-child(9) { animation-delay: calc(var(--stagger-base-delay) + var(--stagger-increment) * 8); }\n\n    .staggered-container > *:nth-child(10) { animation-delay: calc(var(--stagger-base-delay) + var(--stagger-increment) * 9); }\n\n    .staggered-container > *:nth-child(n+11) { animation-delay: min(calc(var(--stagger-base-delay) + var(--stagger-increment) * 10), var(--stagger-max-delay)); }\n\n/* Verzögerungsgruppen */\n    .stagger-group-1 > * { --stagger-base-delay: 0ms; }\n\n    .stagger-group-2 > * { --stagger-base-delay: 100ms; }\n\n    .stagger-group-3 > * { --stagger-base-delay: 200ms; }\n\n/* Verzögerungsinkremente */\n    .stagger-increment-small > * { --stagger-increment: 25ms; }\n\n    .stagger-increment-normal > * { --stagger-increment: 50ms; }\n\n    .stagger-increment-large > * { --stagger-increment: 100ms; }\n\n/* Richtung der Staffelung ändern (umkehren) */\n    .stagger-reverse {\n      counter-reset: section;\n    }\n\n    .stagger-reverse > * {\n      counter-increment: section;\n    }\n\n    .stagger-reverse > *:nth-child(1) { animation-delay: calc(var(--stagger-base-delay) + var(--stagger-increment) * 9); }\n\n    .stagger-reverse > *:nth-child(2) { animation-delay: calc(var(--stagger-base-delay) + var(--stagger-increment) * 8); }\n\n    .stagger-reverse > *:nth-child(3) { animation-delay: calc(var(--stagger-base-delay) + var(--stagger-increment) * 7); }\n\n    .stagger-reverse > *:nth-child(4) { animation-delay: calc(var(--stagger-base-delay) + var(--stagger-increment) * 6); }\n\n    .stagger-reverse > *:nth-child(5) { animation-delay: calc(var(--stagger-base-delay) + var(--stagger-increment) * 5); }\n\n    .stagger-reverse > *:nth-child(6) { animation-delay: calc(var(--stagger-base-delay) + var(--stagger-increment) * 4); }\n\n    .stagger-reverse > *:nth-child(7) { animation-delay: calc(var(--stagger-base-delay) + var(--stagger-increment) * 3); }\n\n    .stagger-reverse > *:nth-child(8) { animation-delay: calc(var(--stagger-base-delay) + var(--stagger-increment) * 2); }\n\n    .stagger-reverse > *:nth-child(9) { animation-delay: calc(var(--stagger-base-delay) + var(--stagger-increment) * 1); }\n\n    .stagger-reverse > *:nth-child(10) { animation-delay: calc(var(--stagger-base-delay)); }\n  }\n\n/**\n  * ==========================================\n  * Transition-Behavior Utilities\n  * ==========================================\n  *\n  * Diese Utilities erlauben Übergänge zwischen normalerweise\n  * nicht-interpolierbaren Eigenschaften (wie display, visibility, etc.)\n  */\n  @layer transition-behavior {\n/* Erlaubt Übergänge zwischen diskreten Werten */\n    .transition-allow-discrete {\n      transition-behavior: allow-discrete;\n    }\n\n/* Anwendung auf spezifische Elemente/Eigenschaften */\n    .fade-discrete {\n      transition-behavior: allow-discrete;\n      transition-duration: var(--animation-duration-normal);\n      transition-property: opacity, visibility;\n      transition-timing-function: var(--easing-decelerate);\n    }\n\n/* Element, das beim Ausblenden auch aus dem DOM-Fluss entfernt wird */\n    .fade-remove {\n      transition-behavior: allow-discrete;\n      transition-duration: var(--animation-duration-normal);\n      transition-property: opacity, visibility, display;\n      transition-timing-function: var(--easing-decelerate);\n    }\n\n/* Erlaubt Übergang bei aria-hidden ohne Sprung/Ruckeln */\n    .transition-aria-state {\n      transition-behavior: allow-discrete;\n      transition-duration: var(--animation-duration-normal);\n      transition-property: opacity, transform, aria-hidden;\n      transition-timing-function: var(--easing-decelerate);\n    }\n\n/* Anwendungsklasse für Visibility-Wechsel */\n    .animate-visibility {\n      transition: opacity var(--animation-duration-normal) var(--easing-decelerate),\n      visibility 0s linear var(--animation-duration-normal);\n      transition-behavior: allow-discrete;\n    }\n\n    .animate-visibility.visible {\n      opacity: var(--opacity-100);\n      transition: opacity var(--animation-duration-normal) var(--easing-decelerate),\n      visibility 0s linear 0s;\n      visibility: visible;\n    }\n\n    .animate-visibility:not(.visible) {\n      opacity: var(--opacity-0);\n      visibility: hidden;\n    }\n  }\n\n/**\n  * ==========================================\n  * Backdrops (Overlays)\n  * ==========================================\n  *\n  * Halbdurchsichtige Hintergrundebenen für Dialoge, Popover, etc.\n  */\n  @layer backdrop {\n/* Basis-Backdrop mit Animation */\n    .backdrop {\n      animation: fade-in var(--backdrop-animation-duration) var(--easing-decelerate) forwards;\n      background-color: var(--backdrop-bg-color);\n      inset: 0;\n      pointer-events: auto;\n      position: fixed;\n      z-index: var(--z-index-backdrop, 1000);\n    }\n\n/* Backdrop mit Unschärfe-Effekt */\n    .backdrop-blur {\n      backdrop-filter: blur(var(--backdrop-blur, var(--spacing-1)));\n    }\n\n/* Backdrop-Varianten */\n    .backdrop-light {\n      --backdrop-opacity: var(--opacity-0).25;\n      --backdrop-bg-color: rgb(255 255 255 / var(--backdrop-opacity));\n    }\n\n    .backdrop-dark {\n      --backdrop-opacity: var(--opacity-0).75;\n      --backdrop-bg-color: rgb(0 0 0 / var(--backdrop-opacity));\n    }\n\n    .backdrop-medium {\n      --backdrop-opacity: var(--opacity-0).5;\n    }\n\n    .backdrop-strong {\n      --backdrop-opacity: var(--opacity-0).85;\n    }\n\n/* Backdrop mit transition-behavior für smootheren Exit */\n    .backdrop-transition {\n      opacity: var(--opacity-100);\n      transition: opacity var(--backdrop-animation-duration) var(--easing-decelerate),\n      visibility 0s linear;\n      transition-behavior: allow-discrete;\n      visibility: visible;\n    }\n\n    .backdrop-transition.exit {\n      opacity: var(--opacity-0);\n      transition: opacity var(--backdrop-animation-duration) var(--ease-in),\n      visibility 0s linear var(--backdrop-animation-duration);\n      visibility: hidden;\n    }\n\n/* Backdrop bei reduzierter Bewegung */\n    @media (prefers-reduced-motion: reduce) {\n      .backdrop {\n        animation: var(--animation-none);\n        opacity: var(--opacity-100);\n      }\n\n      .backdrop-transition,\n      .backdrop-transition.exit {\n        transition: var(--transition-none);\n      }\n    }\n\n/* Backdrop bei erhöhtem Kontrast */\n    @media (prefers-contrast: more) {\n      .backdrop,\n      .backdrop-light,\n      .backdrop-dark {\n        --backdrop-opacity: var(--opacity-0).9;\n\n        backdrop-filter: none;\n      }\n    }\n  }\n\n/**\n  * ==========================================\n  * Flüssige Interpolation mit Keywords\n  * ==========================================\n  *\n  * Diese Klassen verwenden CSS-Schlüsselwörter für Größen, die dank\n  * 'interpolate-size: allow-keywords' flüssig interpoliert werden.\n  */\n  @layer keyword-animations {\n/* Animation-Klasse mit flüssiger Interpolation zwischen Schlüsselwörtern */\n    .animate-keyword-size {\n/* flüssige Interpolation zwischen Schlüsselwörtern */\n      interpolate-size: allow-keywords;\n      transition-duration: var(--animation-duration-normal);\n      transition-property: font-size;\n      transition-timing-function: var(--easing-decelerate);\n    }\n\n/* Schlüsselwort-basierte Größenvarianten */\n    .keyword-size-xs { font-size: x-small; }\n\n    .keyword-size-sm { font-size: small; }\n\n    .keyword-size-md { font-size: medium; }\n\n    .keyword-size-lg { font-size: large; }\n\n    .keyword-size-xl { font-size: x-large; }\n\n/* Flüssige Animation, die zwischen Keywords basiert auf Hoverzustand interpoliert */\n    .hover-grow {\n      font-size: medium;\n      interpolate-size: allow-keywords;\n      transition: font-size var(--animation-duration-normal) var(--easing-decelerate);\n    }\n\n    .hover-grow:hover {\n      font-size: large;\n    }\n\n/* Kombinierte Animation mit flüssiger Interpolation */\n    .animate-grow-fade {\n      animation: grow-fade var(--animation-duration-slow) var(--easing-decelerate);\n      interpolate-size: allow-keywords;\n    }\n\n/* Keyframes mit Schlüsselwörtern */\n    @keyframes grow-fade {\n      0% {\n        font-size: x-small;\n        opacity: var(--opacity-0);\n      }\n\n      100% {\n        font-size: large;\n        opacity: var(--opacity-100);\n      }\n    }\n  }\n}\n\n/**\n* ==========================================\n* Animations-Kontexte\n* ==========================================\n*\n* Diese Klassen ermöglichen es, Animation-Parameter für einen Container und alle seine\n* Kindelemente zu überschreiben, ohne die globalen Werte zu ändern.\n*/\n@layer animation-contexts {\n/* Geschwindigkeits-Kontexte */\n  .animation-context-fastest {\n    --animation-duration-fastest: 80ms;\n    --animation-duration-fast: 120ms;\n    --animation-duration-normal: 200ms;\n    --animation-duration-slow: 350ms;\n    --animation-duration-slower: 500ms;\n    --animation-duration-slowest: 750ms;\n  }\n\n  .animation-context-fast {\n    --animation-duration-fastest: 100ms;\n    --animation-duration-fast: 150ms;\n    --animation-duration-normal: 250ms;\n    --animation-duration-slow: 400ms;\n    --animation-duration-slower: 600ms;\n    --animation-duration-slowest: 800ms;\n  }\n\n  .animation-context-slow {\n    --animation-duration-fastest: 150ms;\n    --animation-duration-fast: 250ms;\n    --animation-duration-normal: 450ms;\n    --animation-duration-slow: 700ms;\n    --animation-duration-slower: 1000ms;\n    --animation-duration-slowest: 1500ms;\n  }\n\n/* Skalierungs-Kontexte */\n  .scale-context-xs {\n    --scale-xs: 0.99;\n    --scale-sm: 0.97;\n    --scale-md: 0.95;\n    --scale-lg: 1.03;\n    --scale-xl: 1.05;\n  }\n\n  .scale-context-sm {\n    --scale-xs: 0.98;\n    --scale-sm: 0.95;\n    --scale-md: 0.9;\n    --scale-lg: 1.05;\n    --scale-xl: 1.1;\n  }\n\n  .scale-context-md {\n    --scale-xs: 0.96;\n    --scale-sm: 0.92;\n    --scale-md: 0.85;\n    --scale-lg: 1.08;\n    --scale-xl: 1.15;\n  }\n\n  .scale-context-lg {\n    --scale-xs: 0.94;\n    --scale-sm: 0.88;\n    --scale-md: 0.8;\n    --scale-lg: 1.12;\n    --scale-xl: 1.2;\n  }\n\n/* Bewegungs-Kontexte */\n  .move-context-small {\n    --move-xs: var(--border-width-thick);\n    --move-sm: var(--spacing-1);\n    --move-md: var(--spacing-2);\n    --move-lg: var(--spacing-4);\n    --move-xl: calc(var(--spacing-2) + var(--spacing-1));\n    --slide-distance: var(--move-md);\n  }\n\n  .move-context-medium {\n    --move-xs: var(--spacing-1);\n    --move-sm: var(--spacing-2);\n    --move-md: var(--spacing-4);\n    --move-lg: calc(var(--spacing-2) + var(--spacing-1));\n    --move-xl: 36px;\n    --slide-distance: var(--move-md);\n  }\n\n  .move-context-large {\n    --move-xs: var(--spacing-2);\n    --move-sm: var(--spacing-4);\n    --move-md: var(--spacing-3)(--border-width-thick);\n    --move-lg: var(--spacing-4)(--spacing-2);\n    --move-xl: var(--spacing-6)(--spacing-1);\n    --slide-distance: var(--move-md);\n  }\n\n/* Verzögerungs-Kontexte */\n  .delay-context-short {\n    --delay-xs: 25ms;\n    --delay-sm: 50ms;\n    --delay-md: 100ms;\n    --delay-lg: 200ms;\n    --delay-xl: 300ms;\n    --stagger-base-delay: 30ms;\n    --stagger-increment: 30ms;\n  }\n\n  .delay-context-medium {\n    --delay-xs: 50ms;\n    --delay-sm: 100ms;\n    --delay-md: 200ms;\n    --delay-lg: 300ms;\n    --delay-xl: 500ms;\n    --stagger-base-delay: 50ms;\n    --stagger-increment: 50ms;\n  }\n\n  .delay-context-long {\n    --delay-xs: 100ms;\n    --delay-sm: 200ms;\n    --delay-md: 400ms;\n    --delay-lg: 600ms;\n    --delay-xl: 800ms;\n    --stagger-base-delay: 100ms;\n    --stagger-increment: 100ms;\n  }\n\n/* Animations-Präset-Kontexte */\n  .animation-context-energetic {\n    --animation-duration-normal: 250ms;\n    --move-md: calc(var(--spacing-2) + var(--spacing-1));\n    --scale-sm: 0.9;\n    --scale-lg: 1.1;\n    --easing-decelerate: cubic-bezier(0.11, 0.5, 0.24, 1);\n    --ease-bounce: cubic-bezier(0.25, -0.25, 0.1, 1.3);\n    --stagger-increment: 30ms;\n  }\n\n  .animation-context-subtle {\n    --animation-duration-normal: 400ms;\n    --move-md: var(--spacing-2);\n    --scale-sm: 0.98;\n    --scale-lg: 1.02;\n    --easing-decelerate: cubic-bezier(0.22, 0.61, 0.36, 1);\n    --easing-smooth: cubic-bezier(0.42, 0, 0.58, 1);\n    --stagger-increment: 70ms;\n  }\n\n  .animation-context-playful {\n    --animation-duration-normal: 350ms;\n    --move-md: var(--spacing-5);\n    --scale-sm: 0.85;\n    --scale-lg: 1.15;\n    --ease-bounce: cubic-bezier(0.68, -0.55, 0.265, 1.55);\n    --ease-spring: cubic-bezier(0.68, -0.6, 0.32, 1.6);\n    --wiggle-angle: 4deg;\n    --bounce-height: var(--percentage-35);\n    --stagger-increment: 40ms;\n  }\n\n/* Automatische Anwendung der Kontextparameter auf Kindelemente */\n\n/* Geschwindigkeits-Kontexte auf Animationen */\n  :where(.animation-context-fastest *) {\n    animation-duration: var(--animation-duration-normal);\n  }\n\n  :where(.animation-context-fast *) {\n    animation-duration: var(--animation-duration-normal);\n  }\n\n  :where(.animation-context-slow *) {\n    animation-duration: var(--animation-duration-normal);\n  }\n\n/* Automatische Anwendung auf spezifische Animationstypen */\n  :where(.animation-context-fastest *).animate-fade-in,\n  :where(.animation-context-fastest *).fade-in {\n    animation-duration: var(--animation-duration-fast);\n  }\n\n  :where(.animation-context-fastest *).animate-slide-in-up,\n  :where(.animation-context-fastest *).slide-in-up {\n    animation-duration: var(--animation-duration-normal);\n  }\n\n/* Skalierungs-Kontexte auf transform-basierte Animationen */\n  :where(.scale-context-xs *).scale-in,\n  :where(.scale-context-xs *).scale-out {\n    --scale-sm: var(--scale-sm);\n  }\n\n  :where(.scale-context-sm *).scale-in,\n  :where(.scale-context-sm *).scale-out {\n    --scale-sm: var(--scale-sm);\n  }\n\n  :where(.scale-context-md *).scale-in,\n  :where(.scale-context-md *).scale-out {\n    --scale-sm: var(--scale-sm);\n  }\n\n  :where(.scale-context-lg *).scale-in,\n  :where(.scale-context-lg *).scale-out {\n    --scale-sm: var(--scale-sm);\n  }\n\n/* Bewegungs-Kontexte auf Slide-Animationen */\n  :where(.move-context-small *).slide-in-up,\n  :where(.move-context-small *).slide-in-down,\n  :where(.move-context-small *).slide-in-left,\n  :where(.move-context-small *).slide-in-right {\n    --slide-distance: var(--move-md);\n  }\n\n  :where(.move-context-medium *).slide-in-up,\n  :where(.move-context-medium *).slide-in-down,\n  :where(.move-context-medium *).slide-in-left,\n  :where(.move-context-medium *).slide-in-right {\n    --slide-distance: var(--move-md);\n  }\n\n  :where(.move-context-large *).slide-in-up,\n  :where(.move-context-large *).slide-in-down,\n  :where(.move-context-large *).slide-in-left,\n  :where(.move-context-large *).slide-in-right {\n    --slide-distance: var(--move-md);\n  }\n\n/* Verzögerungs-Kontexte auf gestaffelte Animationen */\n  :where(.delay-context-short *).staggered-container > * {\n    --stagger-increment: var(--stagger-increment);\n  }\n\n  :where(.delay-context-medium *).staggered-container > * {\n    --stagger-increment: var(--stagger-increment);\n  }\n\n  :where(.delay-context-long *).staggered-container > * {\n    --stagger-increment: var(--stagger-increment);\n  }\n\n/* Animationspräsets automatisch auf alle Animationstypen anwenden */\n  :where(.animation-context-energetic *) {\n    animation-duration: var(--animation-duration-normal);\n    animation-timing-function: var(--easing-decelerate);\n  }\n\n  :where(.animation-context-subtle *) {\n    animation-duration: var(--animation-duration-normal);\n    animation-timing-function: var(--easing-decelerate);\n  }\n\n  :where(.animation-context-playful *) {\n    animation-duration: var(--animation-duration-normal);\n    animation-timing-function: var(--ease-bounce);\n  }\n\n/* Spezifische Animationstypen in Präsets anpassen */\n  :where(.animation-context-playful *).animate-bounce,\n  :where(.animation-context-playful *).bounce {\n    --bounce-height: var(--bounce-height);\n  }\n}\n\n/* Reduzierte Bewegung für alle Animation-Klassen */\n@media (prefers-reduced-motion: reduce) {\n  .animate,\n  .fade-in,\n  .fade-out,\n  .slide-in-up,\n  .slide-in-down,\n  .slide-in-left,\n  .slide-in-right,\n  .scale-in,\n  .scale-out,\n  .scroll-fade-in,\n  .scroll-slide-in-up,\n  .scroll-slide-in-left,\n  .scroll-slide-in-right,\n  .animate-bounce,\n  .animate-pulse,\n  .animate-spin,\n  .animate-ping,\n  .animate-wiggle,\n  .animate-float,\n  .animate-shake,\n  .animate-heartbeat,\n  .animate-elastic,\n  .interaction-scale,\n  .hover-glow,\n  .tap-feedback,\n  .dialog-enter,\n  .dialog-exit,\n  .dialog-backdrop-animated,\n  .focus-ring-animated,\n  .staggered-container > *,\n  .staggered-fade-in > *,\n  .staggered-slide-in-up > *,\n  .staggered-slide-in-down > *,\n  .staggered-slide-in-left > *,\n  .staggered-slide-in-right > *,\n  .backdrop,\n  .backdrop-transition {\n    animation: var(--animation-none) !important;\n    transition: var(--transition-none) !important;\n  }\n}\n\n/* Erhöhter Kontrast für alle Animation-Klassen */\n@media (prefers-contrast: more) {\n/* Grundlegende Änderungen für alle Elemente mit Animation */\n  .animate,\n  .fade-in,\n  .fade-out,\n  .slide-in-up,\n  .slide-in-down,\n  .slide-in-left,\n  .slide-in-right,\n  .scale-in,\n  .scale-out,\n  .scroll-fade-in,\n  .scroll-slide-in-up,\n  .scroll-slide-in-left,\n  .scroll-slide-in-right,\n  .backdrop,\n  .backdrop-transition {\n/* Vereinfachte Animationen beibehalten, aber mit erhöhtem Kontrast arbeiten */\n    --animation-duration-normal: 200ms; /* Schnellere Animationen */\n    --animation-duration-slow: 300ms;\n    --backdrop-animation-duration: 150ms;\n\n    animation-timing-function: linear; /* Vereinfachte Timing-Funktion */\n  }\n\n/* Komplexe Animationen deaktivieren oder vereinfachen */\n  .animate-bounce,\n  .animate-pulse,\n  .animate-spin,\n  .animate-ping,\n  .animate-wiggle,\n  .animate-float,\n  .animate-shake,\n  .animate-heartbeat,\n  .animate-elastic {\n    animation: var(--animation-none) !important; /* Komplexe Animationen vollständig deaktivieren */\n  }\n\n/* Interaktionen vereinfachen */\n  .interaction-scale:active,\n  .hover-glow:hover {\n    box-shadow: 0 0 0 var(--border-width-thick) currentColor !important;\n    transform: var(--transform-none) !important;\n  }\n\n/* Feedback-Effekte durch höheren Kontrast ersetzen */\n  .tap-feedback:active::after {\n    opacity: var(--opacity-30) !important; /* Erhöhter Kontrast für Tap-Feedback */\n  }\n\n/* Dialog-Animationen vereinfachen */\n  .dialog-enter,\n  .dialog-exit,\n  .dialog-backdrop-animated,\n  dialog.animated,\n  dialog.animated::backdrop {\n    animation-duration: 150ms !important;\n    animation-timing-function: linear !important;\n  }\n\n/* Gestaffelte Animationen vereinfachen */\n  .staggered-container > * {\n    --stagger-increment: 30ms; /* Kürzere Verzögerung zwischen Elementen */\n  }\n\n/* Bessere Sichtbarkeit für fokussierte Elemente */\n  button:focus-visible,\n  a:focus-visible,\n  input:focus-visible,\n  select:focus-visible,\n  textarea:focus-visible {\n    outline: var(--border-width-thick) solid currentColor !important;\n    outline-offset: var(--border-width-thick) !important;\n  }\n}\n\n/* ================= SHARED UI ANIMATIONS ================= */\n\n/* Common keyframe animations used across multiple UI components */\n\n/* Previously in separate shared-ui-animations.css - now consolidated */\n\n/* UI-SPECIFIC LOADING ANIMATIONS */\n@keyframes loading {\n  0% {\n    transform: translateX(-100%);\n  }\n\n  100% {\n    transform: translateX(100%);\n  }\n}\n\n/* UI-SPECIFIC FADE ANIMATIONS (simpler versions for components) */\n@keyframes fadeIn {\n  from {\n    opacity: 0;\n  }\n\n  to {\n    opacity: 1;\n  }\n}\n\n@keyframes fadeOut {\n  from {\n    opacity: 1;\n  }\n\n  to {\n    opacity: 0;\n  }\n}\n\n/* UI-SPECIFIC SLIDE ANIMATIONS */\n@keyframes slideIn {\n  from {\n    opacity: 0;\n    transform: translateY(-10px);\n  }\n\n  to {\n    opacity: 1;\n    transform: translateY(0);\n  }\n}\n\n@keyframes slideOut {\n  from {\n    opacity: 1;\n    transform: translateY(0);\n  }\n\n  to {\n    opacity: 0;\n    transform: translateY(-10px);\n  }\n}\n\n@keyframes slideUp {\n  from {\n    opacity: 0;\n    transform: translateY(20px);\n  }\n\n  to {\n    opacity: 1;\n    transform: translateY(0);\n  }\n}\n\n/* UI-SPECIFIC PROGRESS ANIMATIONS */\n@keyframes progressIndeterminate {\n  0% {\n    transform: translateX(-100%);\n  }\n\n  100% {\n    transform: translateX(100%);\n  }\n}\n\n@keyframes progressStripes {\n  from {\n    background-position: 40px 0;\n  }\n\n  to {\n    background-position: 0 0;\n  }\n}\n\n/* Datei: effects/layout-effects/transforms.css */\n/**\n* Transform-Effekte\n*\n* Diese Datei enthält verschiedene Transform-Effekte für moderne UIs.\n* Die Effekte sind performant optimiert und berücksichtigen reduzierte Bewegung.\n*/\n\n@layer utilities {\n  .transform-none {\n    transform: var(--transform-none);\n  }\n\n  .transform-scale-sm {\n    transform: var(--transform-scale-95);\n  }\n\n  .transform-scale-md {\n    transform: scale(1.05);\n  }\n\n  .transform-scale-lg {\n    transform: var(--transform-scale-110);\n  }\n\n  .transform-rotate-sm {\n    transform: rotate(5deg);\n  }\n\n  .transform-rotate-md {\n    transform: rotate(15deg);\n  }\n\n  .transform-rotate-lg {\n    transform: var(--transform-rotate-45deg);\n  }\n\n  .transform-skew-sm {\n    transform: skew(5deg);\n  }\n\n  .transform-skew-md {\n    transform: skew(15deg);\n  }\n\n  .transform-skew-lg {\n    transform: skew(45deg);\n  }\n\n  .transform-translate-x-sm {\n    transform: translateX(0.25rem);\n  }\n\n  .transform-translate-x-md {\n    transform: translateX(0.5rem);\n  }\n\n  .transform-translate-x-lg {\n    transform: translateX(var(--spacing-4));\n  }\n\n  .transform-translate-y-sm {\n    transform: translateY(0.25rem);\n  }\n\n  .transform-translate-y-md {\n    transform: translateY(0.5rem);\n  }\n\n  .transform-translate-y-lg {\n    transform: translateY(var(--spacing-4));\n  }\n\n  .transform-origin-center {\n    transform-origin: center;\n  }\n\n  .transform-origin-top {\n    transform-origin: top;\n  }\n\n  .transform-origin-bottom {\n    transform-origin: bottom;\n  }\n\n  .transform-origin-left {\n    transform-origin: left;\n  }\n\n  .transform-origin-right {\n    transform-origin: right;\n  }\n\n  .transform-origin-top-left {\n    transform-origin: top left;\n  }\n\n  .transform-origin-top-right {\n    transform-origin: top right;\n  }\n\n  .transform-origin-bottom-left {\n    transform-origin: bottom left;\n  }\n\n  .transform-origin-bottom-right {\n    transform-origin: bottom right;\n  }\n}\n\n/* Reduzierte Bewegung */\n@media (prefers-reduced-motion: reduce) {\n  @layer utilities {\n    .transform-scale-sm,\n    .transform-scale-md,\n    .transform-scale-lg,\n    .transform-rotate-sm,\n    .transform-rotate-md,\n    .transform-rotate-lg,\n    .transform-skew-sm,\n    .transform-skew-md,\n    .transform-skew-lg,\n    .transform-translate-x-sm,\n    .transform-translate-x-md,\n    .transform-translate-x-lg,\n    .transform-translate-y-sm,\n    .transform-translate-y-md,\n    .transform-translate-y-lg {\n      transition: var(--transition-none);\n    }\n  }\n}\n\n/* Datei: effects/layout-effects/skeleton.css */\n/**\n* Skeleton-Effekte\n*\n* Diese Datei enthält verschiedene Skeleton-Effekte für moderne UIs.\n* Die Effekte sind performant optimiert und berücksichtigen reduzierte Bewegung.\n*/\n\n@keyframes skeleton-loading {\n  0% {\n    background-position: 200% 0;\n  }\n\n  100% {\n    background-position: -200 0;\n  }\n}\n\n@layer components {\n  .skeleton {\n    animation: skeleton-loading 1.5s var(--easing-smooth) infinite;\n    background: linear-gradient(\n    90deg,\n    var(--skeleton-start, rgb(0 0 0 / 10%)) 0,\n    var(--skeleton-end, rgb(0 0 0 / 20%)) 50,\n    var(--skeleton-start, rgb(0 0 0 / 10%)) 100\n    );\n    background-size: 200% 100;\n  }\n\n  .skeleton-sm {\n    animation-duration: var(--animation-duration-slow);\n    background-size: 150px 100;\n  }\n\n  .skeleton-lg {\n    animation-duration: var(--animation-duration-slowest);\n    background-size: 300px 100%;\n  }\n\n  .skeleton-text {\n    border-radius: 0%.25em;\n    height: var(--spacing-relative-1);\n  }\n\n  .skeleton-text-sm {\n    height: 0%.75em;\n  }\n\n  .skeleton-text-lg {\n    height: 1%.5em;\n  }\n\n  .skeleton-circle {\n    aspect-ratio: 1;\n    border-radius: 5px;\n  }\n\n  .skeleton-circle-sm {\n    width: var(--spacing-8);\n  }\n\n  .skeleton-circle-lg {\n    width: var(--spacing-16);\n  }\n\n  .skeleton-square {\n    aspect-ratio: 1;\n  }\n\n  .skeleton-square-sm {\n    width: var(--spacing-8);\n  }\n\n  .skeleton-square-lg {\n    width: var(--spacing-16);\n  }\n\n  .skeleton-image {\n    aspect-ratio: 16/9;\n    border-radius: 0%.5em;\n  }\n\n  .skeleton-image-sm {\n    max-width: var(--space-large-200);\n  }\n\n  .skeleton-image-lg {\n    max-width: var(--space-large-400);\n  }\n\n  .skeleton-card {\n    border-radius: 0%.5em;\n    display: flex;\n    flex-direction: column;\n    gap: var(--spacing-4);\n    padding: var(--spacing-4);\n  }\n\n  .skeleton-card-sm {\n    gap: 0.5rem;\n    padding: 0.5rem;\n  }\n\n  .skeleton-card-lg {\n    gap: var(--spacing-8);\n    padding: var(--spacing-8);\n  }\n\n  .skeleton-list {\n    display: flex;\n    flex-direction: column;\n    gap: 0.5rem;\n  }\n\n  .skeleton-list-sm {\n    gap: 0.25rem;\n  }\n\n  .skeleton-list-lg {\n    gap: var(--spacing-4);\n  }\n\n  .skeleton-grid {\n    display: grid;\n    gap: var(--spacing-4);\n    grid-template-columns: repeat(auto-fit, minmax(var(--space-large-200), 1fr));\n  }\n\n  .skeleton-grid-sm {\n    gap: 0.5rem;\n    grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));\n  }\n\n  .skeleton-grid-lg {\n    gap: var(--spacing-8);\n    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));\n  }\n}\n\n/* Reduzierte Bewegung */\n@media (prefers-reduced-motion: reduce) {\n  @layer components {\n    .skeleton,\n    .skeleton-sm,\n    .skeleton-lg {\n      animation: var(--animation-none);\n      background: var(--skeleton-start, rgb(0 0 0 / 10%));\n    }\n  }\n}\n\n/* Datei: effects/layout-effects/overlays.css */\n/**\n* Overlay-Effekte\n*\n* Diese Datei enthält verschiedene Overlay-Effekte für moderne UIs.\n* Die Effekte sind performant optimiert und berücksichtigen reduzierte Bewegung.\n*/\n\n@layer components {\n  .overlay {\n    position: relative;\n  }\n\n  .overlay::after {\n    background: var(--overlay-color, rgb(0 0 0 / 50%));\n    content: '';\n    inset: 0;\n    opacity: var(--opacity-0);\n    position: absolute;\n    transition: opacity var(--transition-normal);\n  }\n\n  .overlay:hover::after {\n    opacity: var(--opacity-100);\n  }\n\n  .overlay-gradient::after {\n    background: linear-gradient(\n    to bottom,\n    transparent,\n    var(--overlay-color, rgb(0 0 0 / 70%))\n    );\n  }\n\n  .overlay-blur::after {\n    backdrop-filter: blur(var(--spacing-1));\n    background: var(--overlay-color, rgb(0 0 0 / 30%));\n  }\n\n  .overlay-shine::after {\n    background: linear-gradient(\n    45deg,\n    transparent,\n    var(--overlay-color, rgb(255 255 255 / 20%)),\n    transparent\n    );\n  }\n\n  .overlay-texture::after {\n    background-blend-mode: overlay;\n    background-color: var(--overlay-color, rgb(0 0 0 / 50%));\n    background-image: url(\"data:image/svg+xml,%3Csvg viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100' height='100' filter='url(%23noise)'/%3E%3C/svg%3E\");\n  }\n\n  .overlay-gradient-horizontal::after {\n    background: linear-gradient(\n    to right,\n    transparent,\n    var(--overlay-color, rgb(0 0 0 / 70%))\n    );\n  }\n\n  .overlay-gradient-diagonal::after {\n    background: linear-gradient(\n    135deg,\n    transparent,\n    var(--overlay-color, rgb(0 0 0 / 70%))\n    );\n  }\n\n  .overlay-gradient-radial::after {\n    background: radial-gradient(\n    circle at center,\n    transparent,\n    var(--overlay-color, rgb(0 0 0 / 70%))\n    );\n  }\n\n  .overlay-gradient-multi::after {\n    background: linear-gradient(\n    to bottom,\n    transparent,\n    rgb(100 0 200 / 0.4),\n    var(--overlay-color, rgb(0 0 0 / 70%))\n    );\n  }\n\n  .overlay-gradient-conic::after {\n    background: conic-gradient(\n    from 0deg at 50 50,\n    transparent,\n    var(--overlay-color, rgb(0 0 0 / 30%)),\n    transparent\n    );\n  }\n}\n\n/* Reduzierte Bewegung */\n@media (prefers-reduced-motion: reduce) {\n  @layer components {\n    .overlay::after,\n    .overlay-gradient::after,\n    .overlay-blur::after,\n    .overlay-shine::after,\n    .overlay-texture::after,\n    .overlay-gradient-horizontal::after,\n    .overlay-gradient-diagonal::after,\n    .overlay-gradient-radial::after,\n    .overlay-gradient-multi::after,\n    .overlay-gradient-conic::after {\n      transition: var(--transition-none);\n    }\n  }\n}\n\n/* Datei: effects/layout-effects/outlines.css */\n/**\n* Outline-Effekte\n*\n* Diese Datei enthält verschiedene Outline-Effekte für moderne UIs.\n* Die Effekte sind performant optimiert und berücksichtigen reduzierte Bewegung.\n*/\n\n@layer utilities {\n  .outline-none {\n    outline: none;\n  }\n\n  .outline {\n    outline: var(--border-width-thick) solid var(--outline-color, currentColor);\n    outline-offset: var(--border-width-thick);\n  }\n\n  .outline-dashed {\n    outline: var(--border-width-thick) dashed var(--outline-color, currentColor);\n    outline-offset: var(--border-width-thick);\n  }\n\n  .outline-dotted {\n    outline: var(--border-width-thick) dotted var(--outline-color, currentColor);\n    outline-offset: var(--border-width-thick);\n  }\n\n  .outline-double {\n    outline: var(--spacing-1) double var(--outline-color, currentColor);\n    outline-offset: var(--border-width-thick);\n  }\n\n  .outline-thin {\n    outline: var(--border-width) solid var(--outline-color, currentColor);\n    outline-offset: var(--border-width);\n  }\n\n  .outline-thick {\n    outline: var(--spacing-1) solid var(--outline-color, currentColor);\n    outline-offset: var(--spacing-1);\n  }\n\n  .outline-offset-none {\n    outline-offset: 0;\n  }\n\n  .outline-offset-sm {\n    outline-offset: var(--border-width-thick);\n  }\n\n  .outline-offset-md {\n    outline-offset: var(--spacing-1);\n  }\n\n  .outline-offset-lg {\n    outline-offset: var(--spacing-2);\n  }\n\n  .outline-focus:focus {\n    outline: var(--border-width-thick) solid var(--outline-focus-color, var(--color-primary));\n    outline-offset: var(--border-width-thick);\n  }\n}\n\n/* Reduzierte Bewegung */\n@media (prefers-reduced-motion: reduce) {\n  @layer utilities {\n    .outline-focus:focus {\n      transition: var(--transition-none);\n    }\n  }\n}\n\n/* Datei: effects/layout-effects/masks.css */\n/**\n* Maskeneffekte\n*\n* Diese Datei enthält verschiedene Maskeneffekte für moderne UIs.\n* Die Effekte sind performant optimiert und berücksichtigen reduzierte Bewegung.\n*/\n\n@layer utilities {\n  .mask-circle {\n    mask-image: radial-gradient(circle, black 50, transparent 100);\n  }\n\n  .mask-diamond {\n    mask-image: linear-gradient(45deg, transparent 25%, black 25%, black 75%, transparent 75%);\n  }\n\n  .mask-hexagon {\n    clip-path: polygon(50% 0%, 100% 2%5%, 100% 7%5%, 50% 100%, 0% 7%5%, 0% 2%5%);\n  }\n\n  .mask-wave {\n    mask-image: url(\"data:image/svg+xml,%3Csvg viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M0,50 C20,40 40,60 60,50 C80,40 100,60 100,50 L100,100 L0,100 Z'/%3E%3C/svg%3E\");\n  }\n\n  .mask-gradient {\n    mask-image: linear-gradient(to bottom, black 0, transparent 100);\n  }\n\n  .mask-blur {\n    mask-image: url(\"data:image/svg+xml,%3Csvg viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='blur'%3E%3CfeGaussianBlur stdDeviation='5'/%3E%3C/filter%3E%3Crect width='100' height='100' filter='url(%23blur)'/%3E%3C/svg%3E\");\n  }\n\n  .mask-noise {\n    mask-image: url(\"data:image/svg+xml,%3Csvg viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100' height='100' filter='url(%23noise)'/%3E%3C/svg%3E\");\n  }\n\n  .mask-hover:hover {\n    mask-image: var(--mask-hover-image);\n    transition: mask-image var(--transition-normal),\n    -webkit-mask-image var(--transition-normal);\n  }\n}\n\n/* Reduzierte Bewegung */\n@media (prefers-reduced-motion: reduce) {\n  @layer utilities {\n    .mask-hover:hover {\n      transition: var(--transition-none);\n    }\n  }\n}\n\n/* Datei: effects/layout-effects/clip-path.css */\n/**\n* Clip-Path Effekte\n*\n* Diese Datei enthält verschiedene Clip-Path-Effekte für moderne UIs.\n* Die Effekte sind performant optimiert und berücksichtigen reduzierte Bewegung.\n*/\n\n@layer utilities {\n  .clip-circle {\n    clip-path: circle(50% at 50 50);\n  }\n\n  .clip-polygon {\n    clip-path: polygon(50% 0%, 100% 2%5%, 100% 7%5%, 50% 100%, 0% 7%5%, 0% 2%5%);\n  }\n\n  .clip-star {\n    clip-path: polygon(50% 0%, 6%1% 3%5%, 9%8% 3%5%, 6%8% 5%7%, 7%9% 9%1%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%);\n  }\n\n  .clip-wave {\n    clip-path: path('M0,50% C20,40 40,60 60,50 C80,40 100,60 100,50 L100,100 L0,100 Z');\n  }\n\n  .clip-arrow {\n    clip-path: polygon(0% 20%, 60% 20%, 60% 0%, 100% 50%, 60% 100%, 60% 80%, 0% 80%);\n  }\n\n  .clip-chat {\n    clip-path: polygon(0% 0%, 100% 0%, 100% 7%5%, 7%5% 7%5%, 7%5% 100%, 50% 7%5%, 0% 7%5%);\n  }\n\n  .clip-hover:hover {\n    clip-path: var(--clip-hover-path);\n    transition: clip-path var(--transition-normal);\n  }\n}\n\n/* Reduzierte Bewegung */\n@media (prefers-reduced-motion: reduce) {\n  @layer utilities {\n    .clip-hover:hover {\n      transition: var(--transition-none);\n    }\n  }\n}\n\n/* Datei: effects/layout-effects/backdrops.css */\n/**\n* Backdrop-Effekte\n*\n* Diese Datei enthält verschiedene Backdrop-Effekte für moderne UIs.\n* Die Effekte sind performant optimiert und berücksichtigen reduzierte Bewegung.\n*/\n\n@layer utilities {\n  .backdrop-blur-sm {\n    backdrop-filter: blur(var(--spacing-1));\n  }\n\n  .backdrop-blur-md {\n    backdrop-filter: blur(var(--spacing-2));\n  }\n\n  .backdrop-blur-lg {\n    backdrop-filter: blur(var(--spacing-1)(--border-width-thick));\n  }\n\n  .backdrop-brightness {\n    backdrop-filter: brightness(var(--backdrop-brightness, 0.8));\n  }\n\n  .backdrop-contrast {\n    backdrop-filter: contrast(var(--backdrop-contrast, 1.2));\n  }\n\n  .backdrop-grayscale {\n    backdrop-filter: grayscale(var(--backdrop-grayscale, 0.5));\n  }\n\n  .backdrop-hue-rotate {\n    backdrop-filter: hue-rotate(var(--backdrop-hue-rotate, 90deg));\n  }\n\n  .backdrop-invert {\n    backdrop-filter: invert(var(--backdrop-invert, 0.5));\n  }\n\n  .backdrop-opacity {\n    backdrop-filter: opacity(var(--backdrop-opacity, 0.5));\n  }\n\n  .backdrop-saturate {\n    backdrop-filter: saturate(var(--backdrop-saturate, 1.5));\n  }\n\n  .backdrop-sepia {\n    backdrop-filter: sepia(var(--backdrop-sepia, 0.5));\n  }\n\n  .backdrop-multiple {\n    backdrop-filter:\n    blur(var(--spacing-2))\n    brightness(0.8)\n    contrast(1.2)\n    saturate(1.5);\n  }\n}\n\n/* Reduzierte Bewegung */\n@media (prefers-reduced-motion: reduce) {\n  @layer utilities {\n    .backdrop-blur-sm,\n    .backdrop-blur-md,\n    .backdrop-blur-lg,\n    .backdrop-brightness,\n    .backdrop-contrast,\n    .backdrop-grayscale,\n    .backdrop-hue-rotate,\n    .backdrop-invert,\n    .backdrop-opacity,\n    .backdrop-saturate,\n    .backdrop-sepia,\n    .backdrop-multiple {\n      transition: var(--transition-none);\n    }\n  }\n}\n\n/* Datei: effects/interaction/warning.css */\n/**\n* Warning-Effekte\n*\n* Diese Datei enthält verschiedene Warning-Effekte für moderne UIs.\n* Die Effekte sind performant optimiert und berücksichtigen reduzierte Bewegung.\n*/\n\n@keyframes warning-pulse {\n  0%, 100% {\n    opacity: var(--opacity-100);\n  }\n\n  50% {\n    opacity: var(--opacity-70);\n  }\n}\n\n@keyframes warning-pulse-sm {\n  0%, 100% {\n    opacity: var(--opacity-100);\n  }\n\n  50% {\n    opacity: var(--opacity-80);\n  }\n}\n\n@keyframes warning-pulse-lg {\n  0%, 100% {\n    opacity: var(--opacity-100);\n  }\n\n  50% {\n    opacity: var(--opacity-60);\n  }\n}\n\n@keyframes warning-flash {\n  0%, 100% {\n    opacity: var(--opacity-100);\n  }\n\n  50% {\n    opacity: var(--opacity-50);\n  }\n}\n\n@keyframes warning-flash-sm {\n  0%, 100% {\n    opacity: var(--opacity-100);\n  }\n\n  50% {\n    opacity: var(--opacity-70);\n  }\n}\n\n@keyframes warning-flash-lg {\n  0%, 100% {\n    opacity: var(--opacity-100);\n  }\n\n  50% {\n    opacity: var(--opacity-30);\n  }\n}\n\n@layer components {\n  .warning-pulse {\n    animation: warning-pulse 2s infinite;\n  }\n\n  .warning-pulse-sm {\n    animation: warning-pulse-sm 2s infinite;\n  }\n\n  .warning-pulse-lg {\n    animation: warning-pulse-lg 2s infinite;\n  }\n\n  .warning-border {\n    animation: warning-pulse 2s infinite;\n    border: var(--border-width-thick) solid var(--warning-color, #f59e0b);\n  }\n\n  .warning-border-sm {\n    border-width: var(--border-width);\n  }\n\n  .warning-border-lg {\n    border-width: var(--spacing-1);\n  }\n\n  .warning-bg {\n    animation: warning-pulse 2s infinite;\n    background-color: var(--warning-bg, rgb(245 158 11 / 10%));\n  }\n\n  .warning-bg-sm {\n    background-color: var(--warning-bg-sm, rgb(245 158 11 / 5%));\n  }\n\n  .warning-bg-lg {\n    background-color: var(--warning-bg-lg, rgb(245 158 11 / 20%));\n  }\n\n  .warning-text {\n    color: var(--warning-text, #f59e0b);\n  }\n\n  .warning-text-sm {\n    color: var(--warning-text-sm, #fbbf24);\n  }\n\n  .warning-text-lg {\n    color: var(--warning-text-lg, #d97706);\n  }\n\n  .warning-glow {\n    animation: warning-pulse 2s infinite;\n    box-shadow: 0 0 var(--spacing-2-5) var(--warning-glow, rgb(245 158 11 / 50%));\n  }\n\n  .warning-glow-sm {\n    box-shadow: 0 0 var(--spacing-1) var(--warning-glow-sm, rgb(245 158 11 / 30%));\n  }\n\n  .warning-glow-lg {\n    box-shadow: 0 0 var(--spacing-1)(--spacing-1) var(--warning-glow-lg, rgb(245 158 11 / 70%));\n  }\n\n  .warning-flash {\n    animation: warning-flash 1s infinite;\n  }\n\n  .warning-flash-sm {\n    animation: warning-flash-sm 1s infinite;\n  }\n\n  .warning-flash-lg {\n    animation: warning-flash-lg 1s infinite;\n  }\n}\n\n/* Reduzierte Bewegung */\n@media (prefers-reduced-motion: reduce) {\n  @layer components {\n    .warning-pulse,\n    .warning-pulse-sm,\n    .warning-pulse-lg,\n    .warning-border,\n    .warning-bg,\n    .warning-glow,\n    .warning-flash,\n    .warning-flash-sm,\n    .warning-flash-lg {\n      animation: var(--animation-none);\n    }\n  }\n}\n\n/* Datei: effects/interaction/success.css */\n/**\n* Success-Effekte\n*\n* Diese Datei enthält verschiedene Success-Effekte für moderne UIs.\n* Die Effekte sind performant optimiert und berücksichtigen reduzierte Bewegung.\n*/\n\n@keyframes success-bounce {\n  0%, 20%, 50%, 80%, 100% {\n    transform: translateX(0%);\n  }\n\n  40% {\n    transform: translateY(calc(-1% * var(--spacing-2-5)));\n  }\n\n  60% {\n    transform: translateY(calc(-1% * var(--spacing-1)));\n  }\n}\n\n@keyframes success-bounce-sm {\n  0%, 20%, 50%, 80%, 100% {\n    transform: translateX(0%);\n  }\n\n  40% {\n    transform: translateY(calc(-1% * var(--spacing-1)));\n  }\n\n  60% {\n    transform: translateY(calc(-1 * var(--border-width-thick)));\n  }\n}\n\n@keyframes success-bounce-lg {\n  0%, 20%, 50%, 80%, 100% {\n    transform: translateX(0%);\n  }\n\n  40% {\n    transform: translateY(calc(-1% * var(--spacing-5)));\n  }\n\n  60% {\n    transform: translateY(calc(-1% * var(--spacing-2-5)));\n  }\n}\n\n@keyframes success-pulse {\n  0%, 100% {\n    opacity: var(--opacity-100);\n  }\n\n  50% {\n    opacity: var(--opacity-70);\n  }\n}\n\n@keyframes success-check {\n  0% {\n    opacity: var(--opacity-0);\n    transform: translate(-50%, -50%) scale(0);\n  }\n\n  50% {\n    opacity: var(--opacity-100);\n    transform: translate(-50%, -50%) scale(1.2);\n  }\n\n  100% {\n    opacity: var(--opacity-100);\n    transform: translate(-50%, -50%) scale(1);\n  }\n}\n\n@layer components {\n  .success-bounce {\n    animation: success-bounce 0.5s var(--easing-bounce) both;\n  }\n\n  .success-bounce-sm {\n    animation: success-bounce-sm 0.5s var(--easing-bounce) both;\n  }\n\n  .success-bounce-lg {\n    animation: success-bounce-lg 0.5s var(--easing-bounce) both;\n  }\n\n  .success-border {\n    animation: success-pulse 2s infinite;\n    border: var(--border-width-thick) solid var(--success-color, #10b981);\n  }\n\n  .success-border-sm {\n    border-width: var(--border-width);\n  }\n\n  .success-border-lg {\n    border-width: var(--spacing-1);\n  }\n\n  .success-bg {\n    animation: success-pulse 2s infinite;\n    background-color: var(--success-bg, rgb(16 185 129 / 10%));\n  }\n\n  .success-bg-sm {\n    background-color: var(--success-bg-sm, rgb(16 185 129 / 5%));\n  }\n\n  .success-bg-lg {\n    background-color: var(--success-bg-lg, rgb(16 185 129 / 20%));\n  }\n\n  .success-text {\n    color: var(--success-text, #10b981);\n  }\n\n  .success-text-sm {\n    color: var(--success-text-sm, #34d399);\n  }\n\n  .success-text-lg {\n    color: var(--success-text-lg, #059669);\n  }\n\n  .success-glow {\n    animation: success-pulse 2s infinite;\n    box-shadow: 0 0 var(--spacing-2-5) var(--success-glow, rgb(16 185 129 / 50%));\n  }\n\n  .success-glow-sm {\n    box-shadow: 0 0 var(--spacing-1) var(--success-glow-sm, rgb(16 185 129 / 30%));\n  }\n\n  .success-glow-lg {\n    box-shadow: 0 0 var(--spacing-1)(--spacing-1) var(--success-glow-lg, rgb(16 185 129 / 70%));\n  }\n\n  .success-check {\n    position: relative;\n  }\n\n  .success-check::after {\n    animation: success-check 0.5s var(--easing-smooth);\n    color: var(--success-color, #10b981);\n    content: '✓';\n    font-size: 1.5em;\n    left: 5%0%;\n    position: absolute;\n    top: 5%0%;\n    transform: translate(-50%, -50%);\n  }\n}\n\n/* Reduzierte Bewegung */\n@media (prefers-reduced-motion: reduce) {\n  @layer components {\n    .success-bounce,\n    .success-bounce-sm,\n    .success-bounce-lg,\n    .success-border,\n    .success-bg,\n    .success-glow,\n    .success-check::after {\n      animation: var(--animation-none);\n    }\n  }\n}\n\n/* Datei: effects/interaction/interactions.css */\n/**\n* Interaktions-Effekte\n*\n* Diese Datei enthält verschiedene Interaktions-Effekte für moderne UIs.\n* Die Effekte sind performant optimiert und berücksichtigen reduzierte Bewegung.\n*\n* Verwendung:\n*\n* 1. Drag & Drop:\n* <div class=\"draggable\">Ziehbares Element</div>\n* <div class=\"drop-target\">Ablageziel</div>\n*\n* 2. Swipe-Gesten:\n* <div class=\"swipe-container\">\n*   <div class=\"swipe-content\">Swipe-bare Inhalte</div>\n* </div>\n*\n* 3. Touch-Feedback:\n* <button class=\"touch-feedback\">Touch-Button</button>\n*\n* 4. Fokus-Ringe:\n* <button class=\"focus-ring\">Fokusierbarer Button</button>\n*\n* 5. Deaktivierte Elemente:\n* <button class=\"disabled\" disabled>Deaktivierter Button</button>\n*\n* 6. Ladezustände:\n* <div class=\"loading\">Ladeanimation</div>\n*\n* 7. 3D-Transformationen:\n* <div class=\"card-flip\">\n*   <div class=\"card-flip-inner\">\n*     <div class=\"card-flip-front\">Vorderseite</div>\n*     <div class=\"card-flip-back\">Rückseite</div>\n*   </div>\n* </div>\n*\n* 8. Cursor-Effekte:\n* <div class=\"cursor-follow\">Folgt dem Cursor</div>\n*\n* 9. Touch-Ripple-Effekt:\n* <button class=\"touch-ripple\">Ripple Button</button>\n*\n* Technische Details:\n* - Verwendet CSS-Variablen für Farben und Größen\n* - Optimiert mit will-change und transform\n* - Responsive Anpassungen für mobile Geräte\n* - Reduzierte Bewegung wird berücksichtigt\n*\n* Performance-Hinweise:\n* - Interaktionen sind hardware-beschleunigt\n* - Touch-Feedback wird auf mobilen Geräten optimiert\n* - Reduzierte Bewegung wird automatisch berücksichtigt\n*/\n\n/* Animationen - außerhalb von @layer definieren */\n@keyframes loading {\n  0% {\n    transform: translateX(-100%);\n  }\n\n  100% {\n    transform: translateX(100%);\n  }\n}\n\n@keyframes ripple {\n  0% {\n    opacity: var(--opacity-100);\n    transform: var(--transform-scale-0%);\n  }\n\n  100% {\n    opacity: var(--opacity-0);\n    transform: scale(3%);\n  }\n}\n\n/* Effekte und Interaktionen */\n@layer effects {\n/* Basis-Interaktionen */\n  .interactive {\n    cursor: pointer;\n    transition: all 0.3s ease;\n  }\n\n  .interactive:active {\n    transform: var(--transform-scale-98);\n  }\n\n  .interactive:disabled {\n    cursor: not-allowed;\n    opacity: var(--opacity-60);\n  }\n\n/* Click Effects */\n  .click-ripple {\n    overflow: hidden;\n    position: relative;\n  }\n\n  .click-ripple::after {\n    background-image: radial-gradient(circle, #fff 10%, transparent 10.01%);\n    background-position: 5%0;\n    background-repeat: no-repeat;\n    content: '';\n    height: 100%;\n    left: 0%;\n    opacity: var(--opacity-0);\n    pointer-events: none;\n    position: absolute;\n    top: 0%;\n    transform: scale(10, 10);\n    transition: transform 0.5s, opacity 1s;\n    width: 100%;\n  }\n\n  .click-ripple:active::after {\n    opacity: var(--opacity-30);\n    transform: scale(0, 0);\n    transition: 0s;\n  }\n\n/* Drag-Effekte */\n  .draggable {\n    cursor: grab;\n    user-select: none;\n  }\n\n  .draggable:active {\n    cursor: grabbing;\n  }\n\n  .drag-feedback {\n    transition: transform 0.2s ease, box-shadow 0.2s ease;\n  }\n\n  .drag-feedback:active {\n    box-shadow: 0 var(--spacing-1) var(--spacing-2) rgb(0 0 0 / 10%);\n    transform: scale(1.02);\n  }\n\n/* Scroll-Effekte */\n  .scroll-smooth {\n    scroll-behavior: smooth;\n  }\n\n  .scroll-snap {\n    -webkit-overflow-scrolling: touch;\n    overflow-x: auto;\n    scroll-snap-type: x mandatory;\n  }\n\n  .scroll-snap-item {\n    scroll-snap-align: start;\n  }\n\n/* Touch-Effekte */\n  .touch-feedback {\n    -webkit-tap-highlight-color: transparent;\n  }\n\n  .touch-feedback:active {\n    background-color: rgb(0 0 0 / 10%);\n  }\n\n/* Hover-Effekte */\n  .hover-lift {\n    transition: transform 0.3s ease, box-shadow 0.3s ease;\n  }\n\n  .hover-lift:hover {\n    box-shadow: 0 var(--spacing-1) var(--spacing-2) rgb(0 0 0 / 10%);\n    transform: translateY(calc(-1 * var(--border-width-thick)));\n  }\n\n  .hover-scale {\n    transition: transform 0.3s ease;\n  }\n\n  .hover-scale:hover {\n    transform: scale(1.05);\n  }\n\n/* Fokus-Effekte */\n  .focus-visible {\n    outline: none;\n  }\n\n  .focus-visible:focus-visible {\n    box-shadow: 0 0 0 var(--spacing-1) rgb(59 130 246 / 50%);\n  }\n\n/* Aktive Zustände */\n  .active-press {\n    transition: transform 0.1s ease;\n  }\n\n  .active-press:active {\n    transform: var(--transform-scale-95);\n  }\n\n  .active-feedback {\n    transition: background-color 0.2s ease;\n  }\n\n  .active-feedback:active {\n    background-color: rgb(0 0 0 / 10%);\n  }\n\n/* Deaktivierte Zustände */\n  .disabled {\n    cursor: not-allowed;\n    opacity: var(--opacity-60);\n    pointer-events: none;\n  }\n\n  .disabled-feedback {\n    filter: var(--filter-grayscale-100);\n    opacity: var(--opacity-70);\n  }\n\n/* Drag & Drop */\n  .drop-target {\n    transition: background-color 0.2s ease;\n    will-change: background-color;\n  }\n\n  .drop-target.drag-over {\n    background-color: var(--color-primary-light);\n  }\n\n/* Swipe-Gesten */\n  .swipe-container {\n    overflow: hidden;\n    position: relative;\n    will-change: transform;\n  }\n\n  .swipe-content {\n    touch-action: pan-x pan-y;\n    will-change: transform;\n  }\n\n/* Ladezustände */\n  .loading {\n    background: linear-gradient(\n    90deg,\n    var(--color-gray-100),\n    var(--color-gray-200),\n    var(--color-gray-100)\n    );\n    background-size: 200% 100;\n    overflow: hidden;\n    position: relative;\n  }\n\n  .loading::after {\n    animation: loading 1.5s infinite;\n    background: linear-gradient(\n    90deg,\n    transparent,\n    var(--color-gray-50),\n    transparent\n    );\n    content: '';\n    height: 100%;\n    left: 0%;\n    position: absolute;\n    top: 0%;\n    width: 100%;\n  }\n\n/* Weitere Interaktionen - Sub-Layer */\n  .touch-feedback::after {\n    background-color: var(--color-ripple, rgb(0 0 0 / 10%));\n  }\n\n  .focus-ring:focus-visible {\n    box-shadow: 0 0 0 var(--spacing-1) var(--color-focus-ring, rgb(59 130 246 / 50%));\n    outline: none;\n  }\n\n  .drag-handle {\n    cursor: move;\n    touch-action: none;\n  }\n\n  .drag-item {\n    user-select: none;\n  }\n\n  .swipeable {\n    touch-action: pan-x;\n  }\n\n  .touch-area {\n    position: relative;\n    -webkit-tap-highlight-color: transparent;\n    touch-action: manipulation;\n  }\n\n/* Hover-Interaktionen */\n  .hover-effect {\n    transition: transform 0.3s var(--easing-decelerate),\n    box-shadow 0.3s var(--easing-decelerate);\n  }\n\n  .hover-rotate {\n    transition: transform 0.3s var(--easing-decelerate);\n  }\n\n  .hover-rotate:hover {\n    transform: rotate(var(--rotate-angle, 5deg));\n  }\n\n  .hover-shadow {\n    transition: box-shadow 0.3s var(--easing-decelerate);\n  }\n\n  .hover-shadow:hover {\n    box-shadow: var(--shadow-hover, 0 var(--spacing-2-5) var(--spacing-1)(--spacing-1) -var(--spacing-1) rgb(0 0 0 / 10%));\n  }\n\n  .hover-text-mask {\n    color: var(--color-text, inherit);\n    position: relative;\n  }\n\n  .hover-text-mask::before {\n    background-color: currentColor;\n    content: '';\n    height: 100%;\n    left: 0%;\n    opacity: var(--opacity-10);\n    position: absolute;\n    top: 0%;\n    transform: scaleX(0%);\n    transform-origin: left;\n    transition: transform 0.3s var(--easing-decelerate);\n    width: 100%;\n    z-index: -1;\n  }\n\n  .hover-text-mask:hover::before {\n    transform: scaleX(1%);\n  }\n\n/* 3D-Transformationen */\n  .card-flip {\n    perspective: var(--space-large-1000);\n  }\n\n  .card-flip-inner {\n    height: 100%;\n    position: relative;\n    transform: rotateY(var(--initial-rotate, 0deg));\n    transform-style: preserve-3d;\n    transition: transform 0.6s;\n    width: 100%;\n  }\n\n  .card-flip:hover .card-flip-inner {\n    transform: rotateY(180deg);\n  }\n\n  .card-flip-front, .card-flip-back {\n    backface-visibility: hidden;\n    height: 100%;\n    position: absolute;\n    width: 100%;\n  }\n\n  .card-flip-back {\n    transform: rotateY(180deg);\n  }\n\n/* Tiefenschicht-Effekte */\n  .depth-shift {\n    transition: transform 0.3s var(--easing-decelerate);\n  }\n\n  .depth-shift:hover {\n    transform: translateZ(var(--depth, var(--spacing-5)));\n    transform-style: preserve-3d;\n  }\n\n/* Cursor-Interaktionen */\n  .cursor-follow {\n    transform: translate(calc(var(--cursor-x, 0%) * 0.var(--border-width)), calc(var(--cursor-y, 0) * 0.var(--border-width)));\n    transition: transform 0.1s var(--easing-decelerate);\n  }\n\n  .touch-ripple {\n    overflow: hidden;\n    position: relative;\n  }\n\n  .touch-ripple::after {\n    background-image: radial-gradient(\n    circle,\n    var(--color-ripple, #fff) 10,\n    transparent 10.01%\n    );\n    background-position: 5%0;\n    background-repeat: no-repeat;\n    content: '';\n    height: 100%;\n    left: 0%;\n    opacity: var(--opacity-0);\n    pointer-events: none;\n    position: absolute;\n    top: 0%;\n    transform: scale(10, 10);\n    transition: transform 0.5s, opacity 1s;\n    width: 100%;\n  }\n\n  .touch-ripple:active::after {\n    opacity: var(--opacity-30);\n    transform: scale(0, 0);\n    transition: 0s;\n  }\n\n/* Textmasken-Effekte */\n  .text-mask {\n    background: var(--text-mask-bg, linear-gradient(90deg, #333, #555));\n    background-clip: text;\n    color: transparent;\n    transition: background 0.3s var(--easing-decelerate);\n  }\n\n  .text-mask:hover {\n    background: var(--text-mask-hover, linear-gradient(90deg, #555, #777));\n  }\n\n/* Fokusringe */\n  .focus-ring {\n    outline: none;\n  }\n\n  .focus-ring:focus-visible {\n    box-shadow: 0 0 0 var(--border-width-thick) var(--color-bg, white),\n    0 0 0 var(--spacing-1) var(--color-focus, rgb(59 130 246));\n  }\n\n/* Klapp-Effekte */\n  .fold-reveal {\n    max-height: var(--fold-height, 100px);\n    overflow: hidden;\n    transition: max-height 0.6s var(--easing-decelerate);\n  }\n\n  .fold-reveal-content {\n    opacity: var(--fold-opacity, 60%);\n    transform: translateY(var(--fold-translate, calc(-1 * var(--spacing-5))));\n    transition: opacity 0.6s var(--easing-decelerate),\n    transform 0.6s var(--easing-decelerate);\n  }\n\n  .fold-reveal.unfolded {\n    max-height: var(--fold-max-height, var(--space-large-1000));\n  }\n\n  .fold-reveal.unfolded .fold-reveal-content {\n    opacity: var(--opacity-100);\n    transform: translateX(0%);\n  }\n}\n\n/* Allgemeine Rückmeldungs-Effekte */\n@layer effects {\n  .feedback-ripple {\n    overflow: hidden;\n    position: relative;\n  }\n\n  .feedback-ripple::after {\n    background: var(--ripple-color, rgb(255 255 255 / 70%));\n    border-radius: 1pxpx0;\n    content: '';\n    height: var(--spacing-1);\n    left: 5%0%;\n    opacity: var(--opacity-0);\n    position: absolute;\n    top: 5%0%;\n    transform: scale(1%, 1) translate(-50, -50%);\n    transform-origin: 50% 50;\n    width: var(--spacing-1);\n  }\n\n  .feedback-ripple:active::after {\n    animation: ripple 0.4s var(--easing-decelerate);\n    opacity: var(--opacity-0);\n  }\n}\n\n/* Extra Layer für UI-Controls */\n@layer utilities {\n  .slider-handle {\n    cursor: ew-resize;\n    touch-action: pan-x;\n    user-select: none;\n  }\n\n  .slider-handle:active {\n    cursor: grabbing;\n  }\n\n  @media (prefers-reduced-motion: reduce) {\n    .slider-handle:active {\n      transition: var(--transition-none);\n    }\n  }\n}\n\n/* Barrierefreiheits-Anpassungen */\n@media (prefers-reduced-motion: reduce) {\n  @layer utilities {\n    .interactive,\n    .click-ripple,\n    .drag-feedback,\n    .scroll-smooth,\n    .hover-lift,\n    .hover-scale,\n    .active-press,\n    .active-feedback {\n      transition: var(--transition-none);\n    }\n\n    .click-ripple::after {\n      transition: var(--transition-none);\n    }\n\n    .feedback-ripple:active::after {\n      animation: var(--animation-none);\n    }\n  }\n}\n\n/* Container Queries ersetzen Media Queries */\n@container (width < 640px) {\n  @layer effects {\n    .touch-feedback::after {\n      height: 150px;\n      width: 150px;\n    }\n\n    .focus-ring:focus-visible {\n      box-shadow: 0 0 0 var(--border-width) var(--color-primary);\n    }\n  }\n}\n\n/* Mobile Anpassungen */\n@container root (width <= 640px) {\n  @layer effects {\n/* Anpassungen für Touch-Interaktionen auf kleinen Displays */\n    .drag-handle {\n      height: var(--spacing-3)(--border-width-thick);\n      width: var(--spacing-3)(--border-width-thick);\n    }\n\n    .drag-item {\n      padding: var(--spacing-1)(--border-width-thick);\n    }\n\n    .swipeable {\n      -webkit-overflow-scrolling: touch;\n    }\n\n    .touch-area {\n      min-height: var(--spacing-4)(--spacing-1);\n      min-width: var(--spacing-4)(--spacing-1);\n      padding: var(--spacing-1)(--border-width-thick);\n    }\n\n/* Visuelles Feedback für Hover-Effekte deaktivieren */\n    .hover-effect {\n      display: none;\n    }\n  }\n}\n\n@layer components {\n/* Hover Effects */\n  .hover-rotate {\n    transition: var(--transition-transform);\n  }\n\n  .hover-rotate:hover {\n    transform: rotate(3deg);\n  }\n\n  .hover-shadow {\n    transition: var(--transition-shadow);\n  }\n\n  .hover-shadow:hover {\n    box-shadow: var(--shadow-hover);\n  }\n\n  .hover-text-mask {\n    overflow: hidden;\n    position: relative;\n  }\n\n  .hover-text-mask::before {\n    background: var(--color-gradient);\n    block-size: 100%;\n    content: '';\n    inline-size: 100%;\n    inset-block-start: 0%;\n    inset-inline-start: 0;\n    position: absolute;\n    transform: translateX(-100%);\n    transition: transform 0.3s ease;\n    will-change: transform;\n  }\n\n  .hover-text-mask:hover::before {\n    transform: translateX(0%);\n  }\n\n/* 3D-Transformationen */\n  .card-flip {\n    perspective: var(--space-large-1000);\n  }\n\n  .card-flip-inner {\n    block-size: 100%;\n    inline-size: 100%;\n    position: relative;\n    transform-style: preserve-3d;\n    transition: transform 0.6s;\n    will-change: transform;\n  }\n\n  .card-flip:hover .card-flip-inner {\n    transform: rotateY(180deg);\n  }\n\n  .card-flip-front, .card-flip-back {\n    backface-visibility: hidden;\n    block-size: 100%;\n    inline-size: 100%;\n    position: absolute;\n  }\n\n  .card-flip-back {\n    transform: rotateY(180deg);\n  }\n}\n\n\n\n\n\n/* Datei: effects/interaction/hover.css */\n/**\n* Hover Effects\n*\n* This file contains various hover effects for modern UIs.\n* The effects are optimized for performance and consider reduced motion.\n*/\n\n/* Component Styles */\n@layer components {\n  .hover-scale {\n    transition: transform 0.3s ease;\n  }\n\n  .hover-scale:hover {\n    transform: scale(1.05);\n  }\n\n  .hover-scale-sm {\n    transition: transform 0.3s ease;\n  }\n\n  .hover-scale-sm:hover {\n    transform: scale(1.02);\n  }\n\n  .hover-scale-lg {\n    transition: transform 0.3s ease;\n  }\n\n  .hover-scale-lg:hover {\n    transform: var(--transform-scale-110);\n  }\n\n  .hover-lift {\n    transition: transform 0.3s ease, box-shadow 0.3s ease;\n  }\n\n  .hover-lift:hover {\n    box-shadow: 0 var(--spacing-2-5) var(--spacing-5) rgb(0 0 0 / 10%);\n    transform: translateY(calc(-1% * var(--spacing-1)));\n  }\n\n  .hover-lift-sm {\n    transition: transform 0.3s ease, box-shadow 0.3s ease;\n  }\n\n  .hover-lift-sm:hover {\n    box-shadow: 0 var(--spacing-1) var(--spacing-2-5) rgb(0 0 0 / 10%);\n    transform: translateY(calc(-1 * var(--border-width-thick)));\n  }\n\n  .hover-lift-lg {\n    transition: transform 0.3s ease, box-shadow 0.3s ease;\n  }\n\n  .hover-lift-lg:hover {\n    box-shadow: 0 var(--spacing-5) 40px rgb(0 0 0 / 10%);\n    transform: translateY(calc(-1% * var(--spacing-2-5)));\n  }\n\n  .hover-tilt {\n    perspective: var(--space-large-1000);\n    transform-style: preserve-3d;\n    transition: transform 0.3s ease;\n  }\n\n  .hover-tilt:hover {\n    transform: rotateX(10deg) rotateY(10deg);\n  }\n\n  .hover-tilt-sm {\n    perspective: var(--space-large-1000);\n    transform-style: preserve-3d;\n    transition: transform 0.3s ease;\n  }\n\n  .hover-tilt-sm:hover {\n    transform: rotateX(5deg) rotateY(5deg);\n  }\n\n  .hover-tilt-lg {\n    perspective: var(--space-large-1000);\n    transform-style: preserve-3d;\n    transition: transform 0.3s ease;\n  }\n\n  .hover-tilt-lg:hover {\n    transform: rotateX(15deg) rotateY(15deg);\n  }\n\n  .hover-glow {\n    transition: box-shadow 0.3s ease;\n  }\n\n  .hover-glow:hover {\n    box-shadow: 0 0 var(--spacing-5) var(--hover-glow-color, rgb(59 130 246 / 50%));\n  }\n\n  .hover-glow-sm {\n    transition: box-shadow 0.3s ease;\n  }\n\n  .hover-glow-sm:hover {\n    box-shadow: 0 0 var(--spacing-2-5) var(--hover-glow-color, rgb(59 130 246 / 50%));\n  }\n\n  .hover-glow-lg {\n    transition: box-shadow 0.3s ease;\n  }\n\n  .hover-glow-lg:hover {\n    box-shadow: 0 0 30px var(--hover-glow-color, rgb(59 130 246 / 50%));\n  }\n\n  .hover-border {\n    position: relative;\n    transition: border-color 0.3s ease;\n  }\n\n  .hover-border::after {\n    background: var(--hover-border-color, #3b82f6);\n    bottom: 0%;\n    content: '';\n    height: var(--border-width-thick);\n    left: 0%;\n    position: absolute;\n    transition: width 0.3s ease;\n    width: 0%;\n  }\n\n  .hover-border:hover::after {\n    width: 100%;\n  }\n\n  .hover-border-sm::after {\n    height: var(--border-width);\n  }\n\n  .hover-border-lg::after {\n    height: var(--spacing-1);\n  }\n\n  .hover-bg {\n    transition: background-color 0.3s ease;\n  }\n\n  .hover-bg:hover {\n    background-color: var(--hover-bg-color, rgb(59 130 246 / 10%));\n  }\n\n  .hover-bg-sm:hover {\n    background-color: var(--hover-bg-color-sm, rgb(59 130 246 / 5%));\n  }\n\n  .hover-bg-lg:hover {\n    background-color: var(--hover-bg-color-lg, rgb(59 130 246 / 20%));\n  }\n\n  .hover-color-primary {\n    --hover-glow-color: var(--hover-primary, rgb(59 130 246 / 50%));\n    --hover-border-color: var(--hover-primary, #3b82f6);\n    --hover-bg-color: var(--hover-primary-bg, rgb(59 130 246 / 10%));\n  }\n\n  .hover-color-secondary {\n    --hover-glow-color: var(--hover-secondary, rgb(107 114 128 / 50%));\n    --hover-border-color: var(--hover-secondary, #6b7280);\n    --hover-bg-color: var(--hover-secondary-bg, rgb(107 114 128 / 10%));\n  }\n\n  .hover-color-success {\n    --hover-glow-color: var(--hover-success, rgb(16 185 129 / 50%));\n    --hover-border-color: var(--hover-success, #10b981);\n    --hover-bg-color: var(--hover-success-bg, rgb(16 185 129 / 10%));\n  }\n\n  .hover-color-error {\n    --hover-glow-color: var(--hover-error, rgb(239 68 68 / 50%));\n    --hover-border-color: var(--hover-error, #ef4444);\n    --hover-bg-color: var(--hover-error-bg, rgb(239 68 68 / 10%));\n  }\n\n  .hover-color-warning {\n    --hover-glow-color: var(--hover-warning, rgb(245 158 11 / 50%));\n    --hover-border-color: var(--hover-warning, #f59e0b);\n    --hover-bg-color: var(--hover-warning-bg, rgb(245 158 11 / 10%));\n  }\n\n  .hover-color-info {\n    --hover-glow-color: var(--hover-info, rgb(6 182 212 / 50%));\n    --hover-border-color: var(--hover-info, #06b6d4);\n    --hover-bg-color: var(--hover-info-bg, rgb(6 182 212 / 10%));\n  }\n}\n\n/* Accessibility - Reduced Motion */\n@media (prefers-reduced-motion: reduce) {\n  @layer components {\n    .hover-scale,\n    .hover-scale-sm,\n    .hover-scale-lg,\n    .hover-lift,\n    .hover-lift-sm,\n    .hover-lift-lg,\n    .hover-tilt,\n    .hover-tilt-sm,\n    .hover-tilt-lg,\n    .hover-glow,\n    .hover-glow-sm,\n    .hover-glow-lg,\n    .hover-border,\n    .hover-border-sm,\n    .hover-border-lg,\n    .hover-bg,\n    .hover-bg-sm,\n    .hover-bg-lg {\n      transition: var(--transition-none);\n    }\n\n    .hover-scale:hover,\n    .hover-scale-sm:hover,\n    .hover-scale-lg:hover,\n    .hover-lift:hover,\n    .hover-lift-sm:hover,\n    .hover-lift-lg:hover,\n    .hover-tilt:hover,\n    .hover-tilt-sm:hover,\n    .hover-tilt-lg:hover {\n      transform: var(--transform-none);\n    }\n\n    .hover-border::after {\n      transition: var(--transition-none);\n    }\n  }\n}\n\n/* Datei: effects/interaction/focus.css */\n/**\n* Focus Effects\n*\n* This file contains various focus effects for modern UIs.\n* The effects are optimized for performance and consider reduced motion.\n*/\n\n@layer components {\n  .focus-ring {\n    transition: box-shadow 0.2s ease;\n  }\n\n  .focus-ring:focus {\n    box-shadow: 0 0 0 var(--spacing-1) var(--focus-ring-color, rgb(59 130 246 / 50%));\n    outline: none;\n  }\n\n  .focus-ring-sm {\n    transition: box-shadow 0.2s ease;\n  }\n\n  .focus-ring-sm:focus {\n    box-shadow: 0 0 0 var(--border-width-thick) var(--focus-ring-color, rgb(59 130 246 / 50%));\n    outline: none;\n  }\n\n  .focus-ring-lg {\n    transition: box-shadow 0.2s ease;\n  }\n\n  .focus-ring-lg:focus {\n    box-shadow: 0 0 0 var(--spacing-1) var(--focus-ring-color, rgb(59 130 246 / 50%));\n    outline: none;\n  }\n\n  .focus-outline {\n    transition: outline 0.2s ease;\n  }\n\n  .focus-outline:focus {\n    outline: var(--border-width-thick) solid var(--focus-outline-color, #3b82f6);\n    outline-offset: var(--border-width-thick);\n  }\n\n  .focus-outline-sm:focus {\n    outline-offset: var(--border-width);\n    outline-width: var(--border-width);\n  }\n\n  .focus-outline-lg:focus {\n    outline-offset: var(--spacing-1);\n    outline-width: var(--spacing-1);\n  }\n\n  .focus-bg {\n    transition: background-color 0.2s ease;\n  }\n\n  .focus-bg:focus {\n    background-color: var(--focus-bg-color, rgb(59 130 246 / 10%));\n  }\n\n  .focus-bg-sm:focus {\n    background-color: var(--focus-bg-color-sm, rgb(59 130 246 / 5%));\n  }\n\n  .focus-bg-lg:focus {\n    background-color: var(--focus-bg-color-lg, rgb(59 130 246 / 20%));\n  }\n\n  .focus-color-primary {\n    --focus-ring-color: var(--focus-primary, rgb(59 130 246 / 50%));\n    --focus-outline-color: var(--focus-primary, #3b82f6);\n    --focus-bg-color: var(--focus-primary-bg, rgb(59 130 246 / 10%));\n  }\n\n  .focus-color-secondary {\n    --focus-ring-color: var(--focus-secondary, rgb(107 114 128 / 50%));\n    --focus-outline-color: var(--focus-secondary, #6b7280);\n    --focus-bg-color: var(--focus-secondary-bg, rgb(107 114 128 / 10%));\n  }\n\n  .focus-color-success {\n    --focus-ring-color: var(--focus-success, rgb(16 185 129 / 50%));\n    --focus-outline-color: var(--focus-success, #10b981);\n    --focus-bg-color: var(--focus-success-bg, rgb(16 185 129 / 10%));\n  }\n\n  .focus-color-error {\n    --focus-ring-color: var(--focus-error, rgb(239 68 68 / 50%));\n    --focus-outline-color: var(--focus-error, #ef4444);\n    --focus-bg-color: var(--focus-error-bg, rgb(239 68 68 / 10%));\n  }\n\n  .focus-color-warning {\n    --focus-ring-color: var(--focus-warning, rgb(245 158 11 / 50%));\n    --focus-outline-color: var(--focus-warning, #f59e0b);\n    --focus-bg-color: var(--focus-warning-bg, rgb(245 158 11 / 10%));\n  }\n\n  .focus-color-info {\n    --focus-ring-color: var(--focus-info, rgb(6 182 212 / 50%));\n    --focus-outline-color: var(--focus-info, #06b6d4);\n    --focus-bg-color: var(--focus-info-bg, rgb(6 182 212 / 10%));\n  }\n}\n\n/* Reduced Motion */\n@media (prefers-reduced-motion: reduce) {\n  @layer components {\n    .focus-ring,\n    .focus-ring-sm,\n    .focus-ring-lg,\n    .focus-outline,\n    .focus-outline-sm,\n    .focus-outline-lg,\n    .focus-bg,\n    .focus-bg-sm,\n    .focus-bg-lg {\n      transition: var(--transition-none);\n    }\n  }\n}\n\n/* Datei: effects/interaction/error.css */\n/**\n* Error Effects\n*\n* This file contains various error effects for modern UIs.\n* The effects are optimized for performance and consider reduced motion.\n*/\n\n@keyframes error-shake {\n  10%, 90% {\n    transform: translate3d(calc(-1 * var(--border-width)), 0%, 0);\n  }\n\n  20%, 80% {\n    transform: translate3d(var(--border-width-thick), 0%, 0);\n  }\n\n  30%, 50%, 70% {\n    transform: translate3d(calc(-1 * var(--spacing-1)), 0, 0);\n  }\n\n  40%, 60% {\n    transform: translate3d(var(--spacing-1), 0, 0);\n  }\n}\n\n@keyframes error-shake-sm {\n  10%, 90% {\n    transform: translate3d(-0.5 var(--spacing-1), 0, 0);\n  }\n\n  20%, 80% {\n    transform: translate3d(var(--border-width), 0%, 0);\n  }\n\n  30%, 50%, 70% {\n    transform: translate3d(calc(-1 * var(--border-width-thick)), 0%, 0);\n  }\n\n  40%, 60% {\n    transform: translate3d(var(--border-width-thick), 0%, 0);\n  }\n}\n\n@keyframes error-shake-lg {\n  10%, 90% {\n    transform: translate3d(calc(-1 * var(--border-width-thick)), 0%, 0);\n  }\n\n  20%, 80% {\n    transform: translate3d(var(--spacing-1), 0, 0);\n  }\n\n  30%, 50%, 70% {\n    transform: translate3d(calc(-1 * var(--spacing-2)), 0, 0);\n  }\n\n  40%, 60% {\n    transform: translate3d(var(--spacing-2), 0, 0);\n  }\n}\n\n@keyframes error-pulse {\n  0%, 100% {\n    opacity: var(--opacity-100);\n  }\n\n  50% {\n    opacity: var(--opacity-70);\n  }\n}\n\n@layer components {\n  .error-shake {\n    animation: error-shake 0.5s var(--easing-bounce) both;\n  }\n\n  .error-shake-sm {\n    animation: error-shake-sm 0.5s var(--easing-bounce) both;\n  }\n\n  .error-shake-lg {\n    animation: error-shake-lg 0.5s var(--easing-bounce) both;\n  }\n\n  .error-border {\n    animation: error-pulse 2s infinite;\n    border: var(--border-width-thick) solid var(--error-color, #ef4444);\n  }\n\n  .error-border-sm {\n    border-width: var(--border-width);\n  }\n\n  .error-border-lg {\n    border-width: var(--spacing-1);\n  }\n\n  .error-bg {\n    animation: error-pulse 2s infinite;\n    background-color: var(--error-bg, rgb(239 68 68 / 10%));\n  }\n\n  .error-bg-sm {\n    background-color: var(--error-bg-sm, rgb(239 68 68 / 5%));\n  }\n\n  .error-bg-lg {\n    background-color: var(--error-bg-lg, rgb(239 68 68 / 20%));\n  }\n\n  .error-text {\n    color: var(--error-text, #ef4444);\n  }\n\n  .error-text-sm {\n    color: var(--error-text-sm, #f87171);\n  }\n\n  .error-text-lg {\n    color: var(--error-text-lg, #dc2626);\n  }\n\n  .error-glow {\n    animation: error-pulse 2s infinite;\n    box-shadow: 0 0 var(--spacing-2-5) var(--error-glow, rgb(239 68 68 / 50%));\n  }\n\n  .error-glow-sm {\n    box-shadow: 0 0 var(--spacing-1) var(--error-glow-sm, rgb(239 68 68 / 30%));\n  }\n\n  .error-glow-lg {\n    box-shadow: 0 0 var(--spacing-1)(--spacing-1) var(--error-glow-lg, rgb(239 68 68 / 70%));\n  }\n}\n\n/* Reduced Motion */\n@media (prefers-reduced-motion: reduce) {\n  @layer components {\n    .error-shake,\n    .error-shake-sm,\n    .error-shake-lg,\n    .error-border,\n    .error-bg,\n    .error-glow {\n      animation: var(--animation-none);\n    }\n  }\n}\n\n/* Datei: effects/interaction/disabled.css */\n/**\n* Disabled Effects\n*\n* This file contains various disabled state effects for modern UIs.\n* The effects are optimized for performance and consider reduced motion.\n*/\n\n@layer components {\n  .disabled {\n    cursor: not-allowed;\n    opacity: var(--opacity-50);\n    pointer-events: none;\n    user-select: none;\n  }\n\n  .disabled-sm {\n    opacity: var(--opacity-70);\n  }\n\n  .disabled-lg {\n    opacity: var(--opacity-30);\n  }\n\n  .disabled-blur {\n    cursor: not-allowed;\n    filter: blur(var(--border-width));\n    pointer-events: none;\n    user-select: none;\n  }\n\n  .disabled-blur-sm {\n    filter: blur(0.5 var(--spacing-1));\n  }\n\n  .disabled-blur-lg {\n    filter: blur(var(--border-width-thick));\n  }\n\n  .disabled-grayscale {\n    cursor: not-allowed;\n    filter: var(--filter-grayscale-100);\n    pointer-events: none;\n    user-select: none;\n  }\n\n  .disabled-grayscale-sm {\n    filter: var(--filter-grayscale-50);\n  }\n\n  .disabled-grayscale-lg {\n    filter: var(--filter-grayscale-100) brightness(0.8);\n  }\n\n  .disabled-border {\n    border-style: dashed;\n    cursor: not-allowed;\n    pointer-events: none;\n    user-select: none;\n  }\n\n  .disabled-border-sm {\n    border-width: var(--border-width);\n  }\n\n  .disabled-border-lg {\n    border-width: var(--spacing-1);\n  }\n\n  .disabled-bg {\n    background-color: var(--disabled-bg, rgb(0 0 0 / 5%));\n    cursor: not-allowed;\n    pointer-events: none;\n    user-select: none;\n  }\n\n  .disabled-bg-sm {\n    background-color: var(--disabled-bg-sm, rgb(0 0 0 / 2%));\n  }\n\n  .disabled-bg-lg {\n    background-color: var(--disabled-bg-lg, rgb(0 0 0 / 10%));\n  }\n\n  .disabled-text {\n    color: var(--disabled-text, rgb(0 0 0 / 50%));\n    cursor: not-allowed;\n    pointer-events: none;\n    user-select: none;\n  }\n\n  .disabled-text-sm {\n    color: var(--disabled-text-sm, rgb(0 0 0 / 70%));\n  }\n\n  .disabled-text-lg {\n    color: var(--disabled-text-lg, rgb(0 0 0 / 30%));\n  }\n}\n\n/* Reduced Motion */\n@media (prefers-reduced-motion: reduce) {\n  @layer components {\n    .disabled,\n    .disabled-blur,\n    .disabled-grayscale,\n    .disabled-border,\n    .disabled-bg,\n    .disabled-text {\n      transition: var(--transition-none);\n    }\n  }\n}\n\n/* Datei: effects/interaction/cursors.css */\n/**\n* Cursor-Effekte\n*\n* Diese Datei enthält verschiedene Cursor-Effekte für moderne UIs.\n* Die Effekte sind performant optimiert und berücksichtigen reduzierte Bewegung.\n*/\n\n@layer utilities {\n  .cursor-auto {\n    cursor: auto;\n  }\n\n  .cursor-default {\n    cursor: default;\n  }\n\n  .cursor-pointer {\n    cursor: pointer;\n  }\n\n  .cursor-wait {\n    cursor: wait;\n  }\n\n  .cursor-text {\n    cursor: text;\n  }\n\n  .cursor-move {\n    cursor: move;\n  }\n\n  .cursor-help {\n    cursor: help;\n  }\n\n  .cursor-not-allowed {\n    cursor: not-allowed;\n  }\n\n  .cursor-none {\n    cursor: none;\n  }\n\n  .cursor-context-menu {\n    cursor: context-menu;\n  }\n\n  .cursor-progress {\n    cursor: progress;\n  }\n\n  .cursor-cell {\n    cursor: cell;\n  }\n\n  .cursor-crosshair {\n    cursor: crosshair;\n  }\n\n  .cursor-vertical-text {\n    cursor: vertical-text;\n  }\n\n  .cursor-alias {\n    cursor: alias;\n  }\n\n  .cursor-copy {\n    cursor: copy;\n  }\n\n  .cursor-no-drop {\n    cursor: no-drop;\n  }\n\n  .cursor-grab {\n    cursor: grab;\n  }\n\n  .cursor-grabbing {\n    cursor: grabbing;\n  }\n\n  .cursor-all-scroll {\n    cursor: all-scroll;\n  }\n\n  .cursor-col-resize {\n    cursor: col-resize;\n  }\n\n  .cursor-row-resize {\n    cursor: row-resize;\n  }\n\n  .cursor-n-resize {\n    cursor: n-resize;\n  }\n\n  .cursor-e-resize {\n    cursor: e-resize;\n  }\n\n  .cursor-s-resize {\n    cursor: s-resize;\n  }\n\n  .cursor-w-resize {\n    cursor: w-resize;\n  }\n\n  .cursor-ne-resize {\n    cursor: ne-resize;\n  }\n\n  .cursor-nw-resize {\n    cursor: nw-resize;\n  }\n\n  .cursor-se-resize {\n    cursor: se-resize;\n  }\n\n  .cursor-sw-resize {\n    cursor: sw-resize;\n  }\n\n  .cursor-ew-resize {\n    cursor: ew-resize;\n  }\n\n  .cursor-ns-resize {\n    cursor: ns-resize;\n  }\n\n  .cursor-nesw-resize {\n    cursor: nesw-resize;\n  }\n\n  .cursor-nwse-resize {\n    cursor: nwse-resize;\n  }\n\n  .cursor-zoom-in {\n    cursor: zoom-in;\n  }\n\n  .cursor-zoom-out {\n    cursor: zoom-out;\n  }\n}\n\n/* Datei: effects/interaction/active.css */\n/**\n* Active Effects\n*\n* This file contains various active state effects for modern UIs.\n* The effects are optimized for performance and consider reduced motion.\n*/\n\n/* Component Styles */\n@layer components {\n  .active-scale {\n    transition: transform 0.2s ease;\n  }\n\n  .active-scale:active {\n    transform: var(--transform-scale-95);\n  }\n\n  .active-scale-sm {\n    transition: transform 0.2s ease;\n  }\n\n  .active-scale-sm:active {\n    transform: var(--transform-scale-98);\n  }\n\n  .active-scale-lg {\n    transition: transform 0.2s ease;\n  }\n\n  .active-scale-lg:active {\n    transform: var(--transform-scale-90);\n  }\n\n  .active-lift {\n    transition: transform 0.2s ease, box-shadow 0.2s ease;\n  }\n\n  .active-lift:active {\n    box-shadow: 0 var(--border-width-thick) var(--spacing-1) rgb(0 0 0 / 10%);\n    transform: translateY(var(--border-width-thick));\n  }\n\n  .active-lift-sm {\n    transition: transform 0.2s ease, box-shadow 0.2s ease;\n  }\n\n  .active-lift-sm:active {\n    box-shadow: 0 var(--border-width) var(--border-width-thick) rgb(0 0 0 / 10%);\n    transform: translateY(var(--border-width));\n  }\n\n  .active-lift-lg {\n    transition: transform 0.2s ease, box-shadow 0.2s ease;\n  }\n\n  .active-lift-lg:active {\n    box-shadow: 0 var(--spacing-1) var(--spacing-2) rgb(0 0 0 / 10%);\n    transform: translateY(var(--spacing-1));\n  }\n\n  .active-tilt {\n    perspective: var(--space-large-1000);\n    transform-style: preserve-3d;\n    transition: transform 0.2s ease;\n  }\n\n  .active-tilt:active {\n    transform: rotateX(-5deg) rotateY(-5deg);\n  }\n\n  .active-tilt-sm {\n    perspective: var(--space-large-1000);\n    transform-style: preserve-3d;\n    transition: transform 0.2s ease;\n  }\n\n  .active-tilt-sm:active {\n    transform: rotateX(-2deg) rotateY(-2deg);\n  }\n\n  .active-tilt-lg {\n    perspective: var(--space-large-1000);\n    transform-style: preserve-3d;\n    transition: transform 0.2s ease;\n  }\n\n  .active-tilt-lg:active {\n    transform: rotateX(-10deg) rotateY(-10deg);\n  }\n\n  .active-glow {\n    transition: box-shadow 0.2s ease;\n  }\n\n  .active-glow:active {\n    box-shadow: 0 0 var(--spacing-2-5) var(--active-glow-color, rgb(59 130 246 / 30%));\n  }\n\n  .active-glow-sm {\n    transition: box-shadow 0.2s ease;\n  }\n\n  .active-glow-sm:active {\n    box-shadow: 0 0 var(--spacing-1) var(--active-glow-color, rgb(59 130 246 / 30%));\n  }\n\n  .active-glow-lg {\n    transition: box-shadow 0.2s ease;\n  }\n\n  .active-glow-lg:active {\n    box-shadow: 0 0 var(--spacing-1)(--spacing-1) var(--active-glow-color, rgb(59 130 246 / 30%));\n  }\n\n  .active-border {\n    position: relative;\n    transition: border-color 0.2s ease;\n  }\n\n  .active-border::after {\n    background: var(--active-border-color, #3b82f6);\n    bottom: 0%;\n    content: '';\n    height: var(--border-width-thick);\n    left: 0%;\n    opacity: var(--opacity-0);\n    position: absolute;\n    transition: opacity 0.2s ease;\n    width: 100%;\n  }\n\n  .active-border:active::after {\n    opacity: var(--opacity-100);\n  }\n\n  .active-border-sm::after {\n    height: var(--border-width);\n  }\n\n  .active-border-lg::after {\n    height: var(--spacing-1);\n  }\n\n  .active-bg {\n    transition: background-color 0.2s ease;\n  }\n\n  .active-bg:active {\n    background-color: var(--active-bg-color, rgb(59 130 246 / 20%));\n  }\n\n  .active-bg-sm:active {\n    background-color: var(--active-bg-color-sm, rgb(59 130 246 / 10%));\n  }\n\n  .active-bg-lg:active {\n    background-color: var(--active-bg-color-lg, rgb(59 130 246 / 30%));\n  }\n\n  .active-color-primary {\n    --active-glow-color: var(--active-primary, rgb(59 130 246 / 30%));\n    --active-border-color: var(--active-primary, #3b82f6);\n    --active-bg-color: var(--active-primary-bg, rgb(59 130 246 / 20%));\n  }\n\n  .active-color-secondary {\n    --active-glow-color: var(--active-secondary, rgb(107 114 128 / 30%));\n    --active-border-color: var(--active-secondary, #6b7280);\n    --active-bg-color: var(--active-secondary-bg, rgb(107 114 128 / 20%));\n  }\n\n  .active-color-success {\n    --active-glow-color: var(--active-success, rgb(16 185 129 / 30%));\n    --active-border-color: var(--active-success, #10b981);\n    --active-bg-color: var(--active-success-bg, rgb(16 185 129 / 20%));\n  }\n\n  .active-color-error {\n    --active-glow-color: var(--active-error, rgb(239 68 68 / 30%));\n    --active-border-color: var(--active-error, #ef4444);\n    --active-bg-color: var(--active-error-bg, rgb(239 68 68 / 20%));\n  }\n\n  .active-color-warning {\n    --active-glow-color: var(--active-warning, rgb(245 158 11 / 30%));\n    --active-border-color: var(--active-warning, #f59e0b);\n    --active-bg-color: var(--active-warning-bg, rgb(245 158 11 / 20%));\n  }\n\n  .active-color-info {\n    --active-glow-color: var(--active-info, rgb(6 182 212 / 30%));\n    --active-border-color: var(--active-info, #06b6d4);\n    --active-bg-color: var(--active-info-bg, rgb(6 182 212 / 20%));\n  }\n}\n\n/* Accessibility - Reduced Motion */\n@media (prefers-reduced-motion: reduce) {\n  @layer components {\n    .active-scale,\n    .active-scale-sm,\n    .active-scale-lg,\n    .active-lift,\n    .active-lift-sm,\n    .active-lift-lg,\n    .active-tilt,\n    .active-tilt-sm,\n    .active-tilt-lg,\n    .active-glow,\n    .active-glow-sm,\n    .active-glow-lg,\n    .active-border,\n    .active-border-sm,\n    .active-border-lg,\n    .active-bg,\n    .active-bg-sm,\n    .active-bg-lg {\n      transition: var(--transition-none);\n    }\n\n    .active-scale:active,\n    .active-scale-sm:active,\n    .active-scale-lg:active,\n    .active-lift:active,\n    .active-lift-sm:active,\n    .active-lift-lg:active,\n    .active-tilt:active,\n    .active-tilt-sm:active,\n    .active-tilt-lg:active {\n      transform: var(--transform-none);\n    }\n\n    .active-border::after {\n      transition: var(--transition-none);\n    }\n  }\n}\n"],"names":[]}