{"version":3,"sourceRoot":null,"mappings":"AAWA,aCmBI,2CAAA,iDAAA,gDAOA,iGAOA,yCAIA,4SAUA,sBAIA,gDAMA,uEAOA,sHAUA,sBAIA,yBAKA,2DAMA,uCACE,0BAIA,+GAAA,qHAAA,sHD9FN,cuBAE,mFAMA,qFAMA,kFAOA,4FAMA,8FAMA,2FAOA,4LAMA,2LAMA,gMAOA,gMAOA,kFAMA,qFAMA,yFAMA,0FAMA,yFAMA,6FAOA,+MAMA,uHAMA,mHAMA,qHAMA,4GiB7HA,mFAMA,qFAMA,kFAOA,4FAMA,8FAMA,2FAOA,4LAMA,2LAMA,gMAOA,gMAOA,kFAMA,qFAMA,yFAMA,0FAMA,yFAMA,6FAOA,+MAMA,uHAMA,mHAMA,qHAMA,4GN/CA,0iDA0DE,unBAAA,inBAiBA,8kBAAA,wkBAgBA,4fAAA,sfgBvGF,o4BAgCE,0SAAA,oSAUA,2RAAA,qRAUA,iUAAA,4TlDtHJ,yDAAA,0BMgBE,2BAIA,oCAIA,qOAAA,gOAKA,qIAQA,gKAOA,4OAAA,uOAIA,2OAAA,oOAKA,0CAKA,0DAKA,0CAIA,sCAKA,iHAOA,4RAAA,uRAIA,2RAAA,oRAIA,6EAIA,+EAKA,+EAIA,qZAAA,mZAKA,uZAAA,6YAKA,+YAAA,yYAKA,8ZAAA,wZAMA,uOAAA,kOAIA,sOAAA,+NAIA,oBAIA,0BAKA,gCAIA,4BAIA,gCAIA,4BAKA,6BAIA,6BAIA,4BAIA,4BAKA,mFAMA,mFAMA,mFAOA,yCAIA,yCAIA,yCAIA,yCAIA,2CAIA,2CAIA,2CAIA,2CAIA,0CAIA,0CAIA,0CAIA,0CAIA,4CAIA,4CAIA,4CAIA,4CAKA,6CAIA,6CAIA,6CAIA,6CAIA,8CAIA,8CAIA,8CAIA,8CAIA,+PAAA,0PAIA,+PAAA,0PAIA,+PAAA,0PAIA,+PAAA,0PAIA,8PAAA,uPAIA,8PAAA,uPAIA,8PAAA,uPAIA,8PAAA,uPAIA,8CAIA,8CAIA,8CAIA,8CAIA,+CAIA,+CAIA,+CAIA,+CAIA,gQAAA,2PAIA,gQAAA,2PAIA,gQAAA,2PAIA,gQAAA,2PAIA,+PAAA,wPAIA,+PAAA,wPAIA,+PAAA,wPAIA,+PAAA,wPAKA,sCAIA,oCAKA,wBAAA,wBAAA,wBAAA,wBAQA,oJAOA,4PAAA,qPAIA,8CAAA,6OAAA,wOAMA,mQAAA,sOAAA,iOAWA,8EAAA,+OAAA,0OAOA,oMAOA,4IAMA,mIAOA,oPAAA,+OAIA,0CAKA,2CAIA,yDAKA,uNASA,sLAOA,wPAAA,iPAKA,2CAKA,mJAAA,0OAAA,0OAAA,qOAAA,qOASA,mFAKA,6HAMA,yDAKA,4IAAA,kRAAA,6QAOA,uQAAA,kQAIA,0QAAA,qQAKA,2CAKA,kDAKA,oIAOA,0DAKA,2GAQA,iPAUA,6IAMA,+LAUA,yBACE,qDAKA,8DAAA,0OAAA,qOAMA,kEAQF,yCAIA,0CAKA,2EAAA,2EAAA,2EAQA,0BAAA,0BAMA,uIAOA,+JAOA,iGAAA,+RAAA,wRAOA,2FAMA,6FAAA,4RAAA,uRAOA,4JAQA,yBACE,yHAQA,4BAKF,yBACE,6EAQA,6BAQA,4CAIA,oDAIA,oCAIA,2DAOF,yBACE,+EAKA,4EAKA,gQAAA,4PAMF,yBACE,qEAMA,2CAAA,2PAAA,wPNrvBJ,qBsBJA,qBASE,oBAKA,4HAeA,6HAAA,8HAAA,gIAAA,8HAAA,qIAWA,4GAOA,2FAAA,2FAAA,gGAAA,8FASA,iEAIA,6EAUA,sLAWA,0dAwBA,mCAIA,iDAKA,iCAWA,kGAAA,yFAAA,8FAAA,6FAAA,8FAAA,gGgBjHA,iNAAA,yNAkBA,qHAkBA,0CAKA,2EAOA,qGAMA,2DAaA,yBACE,2MAoBF,8BAKA,sHAMA,kCAWA,sGAMA,sHOzHA,0uBAoCA,shCA2CA,4HAOA,qMAOA,iHAAA,iHAOA,2GAMA,iFAAA,iFAOA,4EAKA,8JAMA,mFAMA,sEUhIA,kPAAA,uPAYA,8CAMA,uFAKA,6IAQA,iJAMA,0CAKA,qSAWA,8DAKA,kEAAA,kEAMA,+CAMA,gCAKA,oTAYA,6OAAA,8OAAA,2OAUA,kDAIA,qDAmBA,2FAAA,2FAAA,+FAAA,2FAAA,2FAUA,oGAMA,gDAKA,gFnDtIA,uCACE,2GAQA,8IAAA,oJAAA,oJASF,qHAME,8JAAA,oKAAA,mKASF,6BAKA,8CAAA,6BASA,wCAOA,oEAAA,yEAAA,yEAAA,yEAAA,yEJlEF,cSUI,ojtBAAA,8BAAA,y3qCA+8BA,slDA8BA,+tBTv/BJ,iBELE,qnoCFKF,kByDEE,ySAOA,YACE,2IAOA,oBAEA,uDAEA,6BAEA,4CAEA,wBAEA,yNAQA,yOAUF,gBACE,8JAEA,8JAEA,iKAEA,gKAEA,gKAEA,mKAGF,YACE,+BAEA,0HAEA,wMASA,2LASA,mQAYA,4JAAA,4JAWF,iBACE,uCAEA,uCAEA,2CAEA,uCAEA,uCAEA,yCAEA,yCAEA,yCAEA,yCAEA,mDAEA,mDAEA,uDAEA,+CAEA,kDAEA,oDAEA,kDAEA,sDAEA,wDAEA,oDAEA,+BAEA,2BAEA,6BAMA,gCAEA,8BAEA,oCAEA,oCAEA,sCAEA,iCAEA,oEAMA,qEAKA,kDAKF,kBACE,+BACE,uEAKA,kCAEA,kCAEA,iCAEA,oCAIA,qCAIJ,aAEE,0GAME,+EAIA,8EAIA,8EAIA,+EAIA,6EAMF,0CAIE,0BAA+B,yCAI/B,0BAA+B,yCAMjC,oIAOA,8NAUA,6IAQA,oCAGE,0CAIA,6CAIA,2CAIA,gDzD/RN,yIAAA,cO0BE,sVP1BF,mGAAA,iB2BwOE,sUAWA,kEAKA,gIAOA,wHHw5DA,oGAQA,2HAOA,uFAAA,8EAAA,yEAaA,gFAMA,oEAKA,uCAIA,6EAUA,+CAIA,uEAUA,qCAKE,iCAIA,+DAKA,0DAAA,yDAMA,sDAMA,kCAIA,oCAIA,kCAIA,sCAOI,gEAIA,yEAAA,wEAaN,wFAIE,0EAIA,kGAIA,gGAAA,+FAKA,6EAIA,0BACE,2DAKF,0BACE,yDAGE,+EAcN,gDACE,8SAAA,2GAAA,0GAsBA,8FAcF,+BACE,+BAIA,mCAIA,kCAAA,8OAAA,yOAKA,0EAKA,oCAIA,oCAAA,+OAAA,0OAKA,uGAMA,oHAOA,uKAYF,yDAAA,yDAAA,8EAOA,8CAAA,8CAAA,mEAMA,+CAAA,+CAAA,oEAMA,gDAAA,gDAAA,qEAOA,oEAIA,gIAKA,4HAoBA,qCAMA,yEAOA,4aAaA,sIAOA,sLAYA,wYAiBA,8GAMA,2bAgBA,qCAKA,gJAQA,0EAAA,wEAMA,6GAOA,2CAKA,oIAMA,6JASA,kNAQA,kRAWA,yHAOA,6JASA,8KAKA,0EAWA,0OAMA,wXAYA,6WAWA,4FAKA,6DAIA,sTAcA,sHAMA,yIAMA,mEAMA,wIAMA,sEAOA,yBACE,sKAOA,mJxBtuFJ,kFAAA,kBwBwDE,ufAkBA,uEAKA,wEAIA,sEAKA,uEAIA,oHAMA,6EAIA,0EAKA,mEAIA,uFAKA,mEAIA,uEAKA,gEAIA,oEAKA,6DAIA,kHAOA,kFAMA,qGAMA,6GAMA,4GAMA,qGAMA,qGAOA,6DAAA,8DAMA,uDAKA,sCAIA,4DAMA,yDAKA,oDAKA,0XAkBA,uaAWE,uJAMA,8HAKA,8GAMA,uDAKA,yDAIA,yDAIA,yDAIA,+CAKA,qFAKA,6EAOF,iEAKE,kDAIA,iHAYF,waAYE,0JAMA,4HAQA,0FAMA,kFAOA,iJAIE,uGAKF,uJAIE,2GAKF,wEAKA,wCAMF,iDAIE,wKASA,2EASF,gkBAiBE,wJAMA,0HAQA,gKAOA,uJAQA,+IAIE,qGAKF,qJAIE,yGAMF,+DAIE,oJAIE,iHAOJ,uFA2HF,sHAOE,8PAUE,yHAIE,uNAaF,yGAKA,+IAKE,wFAQJ,wCAGE,6DAMF,+CAGE,2DAIE,uEAQN,mEAKE,0DAsVF,yuDAAA,mCAAA,0DAqDE,mCAAqC,8VA4CvC,yJAUA,0FAOA,gFAOA,iGAOA,wCAKA,2DAMA,oCAaA,yKASA,qGAMA,kFAMA,6HAQA,kEAaA,wgBAkBA,gIAOA,sEAMA,8FAAA,+FAgBA,iGAIA,gIAAA,yIAMA,mGAIA,8HAAA,uIAYA,sHAKA,mKAOA,8IAKA,2LAQA,kJAOA,gHAKA,wMAQA,sIAMA,gCACE,mGAKA,gJAOA,mGAKA,iJASF,6IAQA,6IASA,+DAIA,+DAKA,iEAAA,qEAAA,qDAAA,yDAgBA,gOAQA,yNAeA,0QAWA,6KAOA,yHAMA,0HAaA,sDAaA,kMAQA,wCAKA,wFAOA,wfAaA,yHAMA,qHAKA,sHAKA,+CAKA,iIAOA,0IAMA,yKAQA,sKAQA,qFAMA,sFAMA,sDAaA,qEAIA,gGAMA,8YAWA,+FAYA,6BAKA,6GAUA,gVAcA,4OAWA,gEAMA,ycAWA,wPAcA,qGAOA,mDAIA,0BA0CA,sSASE,+IAQA,4QAYA,2JAQE,wJAOF,oOAQE,0CAIA,wEAMF,qOAUA,oKAOE,uUAKA,0UAQA,wHAKA,gEAAA,iEAKA,2EAMA,yHAKA,+DAAA,gEAKA,4EAMF,8HAMA,+DAGE,gIAOF,mEAGE,sIAOF,mEAGE,sIAOF,gLAME,oHAAA,qHAAA,qHASJ,0QAkBA,gGAMA,iHAOA,kFAAA,kFAMA,sCAIA,6LAQA,4FAAA,2FAAA,4FAAA,iGAAA,mGAiBA,kEAMA,0DAIA,wIAMA,4KAUA,oPAUA,gOASA,uGAIA,mGAKA,uCAAA,iDAAA,wCAAA,uCAAA,uCASA,mCAIA,0JAUA,gCAIA,0SAWA,kFAgBA,wFAAA,wFAQA,udAAA,udAAA,sdAeA,qIAAA,oIAOA,sEAAA,qEAKA,qIAMA,yHAMA,sEAQA,gCAKA,+DAMA,wHsBlmEA,mpBA4BA,6NAWE,0HAME,mCAIA,qCAVF,0HAME,mCAIA,qCAVF,0HAME,mCAIA,qCAVF,0HAME,mCAIA,qCAVF,0HAME,mCAIA,qCAVF,0HAME,mCAIA,qCAKF,6FAKE,0BAA6B,oCAI7B,0BAA6B,oCAK/B,0FAKE,0BAA6B,oCAI7B,0BAA6B,mCAK/B,0FAKE,0BAA6B,mCAI7B,0BAA6B,mCAK/B,yFAKE,0BAA6B,mCAK/B,yFAKE,0BAA6B,qCAK/B,oHAME,0BAA6B,2CAM/B,8CAGE,oCAIA,sGAKE,0BAA6B,yCAK/B,+CAGE,0BAA6B,+CAOjC,wHAOE,8EAAA,8EAMA,0EAOF,2EAIE,+CAGE,wCAIA,gEAAA,gEAMF,qCAjBF,2EAIE,+CAGE,wCAIA,gEAAA,gEAMF,qCAKF,8BAGE,mCAGE,sCAMJ,iCAGE,wCAGE,2CAOJ,+CAGE,wGAKE,sCAKF,oEAIE,wCAOJ,uKAOE,0BAA6B,yGAM7B,+CAIA,oJAOE,4CAOJ,wNAQA,qUAWE,0BAA6B,yFAM7B,wEASF,uEAKE,0BAA6B,qEAK7B,wGAKE,0BAA6B,uCAL/B,wGAKE,0BAA6B,uCAK/B,6FAKA,4EAMF,qCAIE,wGAIA,6CAKF,oCAGE,0BAA6B,qCAI7B,6CAKA,sJAOE,0BAA6B,yDAOjC,2GAKE,0BAA6B,iCAM/B,0DAIA,uDAIA,0BAIA,iCAIA,kDAGE,8CAEA,wEAEA,wEAEA,6CAEA,gDAEA,yCAEA,2CAEA,4CAEA,wCAGF,oDAGE,+CAEA,0EAEA,yEAEA,8CAEA,iDAEA,0CAEA,4CAEA,6CAEA,0CAGF,2BAKA,0BAA6B,4EAI3B,mDAIA,qDAKF,0BAA6B,4EAI3B,qCAAA,qCAIA,sDAIA,4CAGE,sCAAA,uCAQN,mCACE,uLAME,oGAME,6DAAA,6DAIA,iEAIA,qFAKF,oEAIA,2DAIA,gEAOJ,2CACE,yBACE,4EAIE,mCAEA,mCAEA,kCAEA,kCAEA,oCAEA,0CAEA,wCAEA,8CAEA,wGAMA,wFAMA,oEAIE,sCAAA,sCAKF,oCAGE,wDAKF,gCAIA,mDAIA,qDAMJ,yBACE,4EAIE,mCAEA,kCAEA,kCAEA,qCAAA,qCAIA,sDAIA,4CAGE,sCAAA,wCASR,aACE,+FAME,iFAAA,iFAAA,iFAAA,iFAAA,iFAAA,iFAKA,2BAAA,4BAKA,yCAAA,kCAAA,oCAAA,qCAIA,mFAKA,mKAMA,mHAQJ,+BAEI,kCAKE,gCAAA,gCAKF,uCAIA,6BAOJ,uCAEI,yBZnhBJ,2dAqBE,yIAKA,uLAMA,gKAIA,4JAMF,kKAUE,mEAKE,oEAOF,yFAME,uFAQA,qLAQE,2DAIA,kGAOA,0BAA6B,yCAOjC,gGAQA,yDAKE,8BAMF,6BAGE,0BAA6B,wFAU/B,qJAUA,yEAIE,6DAGE,0DAMJ,uDAIA,+DAGE,0DAGE,uDAOJ,0BAA6B,6CAG3B,mCAIA,0BAIA,uCAaF,mPAWF,2DAKE,oHAAA,oHAWA,sGASA,iCAIA,0UAWE,gGAKA,mGAOF,oIAOA,iEAAA,gEAMA,gZAgBA,gGAAA,+FAOA,qDAKA,+LAQA,2EAKA,iDAMA,2PAYA,iFAAA,gFAKA,oFAMA,iLAQA,0EAKA,sGAOF,oFAQA,qKASE,0BAA6B,8BAK/B,gCAKA,mNAWE,0BAA6B,8BAK/B,qCAIA,8FASA,+DAIA,6KASA,yDAIA,gGAKA,qFAMA,iEAIA,iEAKA,wDAIA,mFAKA,+DAME,+DAOA,wEAKA,oCAIA,mCAIA,sDAQA,4DAIA,gDAIA,mCAIA,+CAOA,2FAMA,2CAKE,gGAMA,oDAQF,wDAIA,gDAOA,+KAQA,uEAIA,iEAKA,0HAOF,2BAII,2GAKA,6EAIA,+EAIA,oFAAA,oFAKA,uGAIA,yHAIA,2HAQJ,0BAII,2GAKA,2EAIA,+EAIA,oFAAA,oFAKA,uGAIA,0HgB5rBJ,gSAeE,6OAAA,6OAAA,6OAAA,6OAAA,6OAAA,6OAAA,mPAQA,uHAGE,wHAMF,qMAOE,2JAAA,2JAMA,0JAbF,yMAOE,+JAAA,+JAMA,8JAOF,gIAME,6HAGE,4HATJ,gIAME,6HAGE,4HATJ,oIAME,iIAGE,gIAOJ,8JAOA,wIAIA,0IAKA,mHAIA,+GAIA,iHAMF,4JASE,iCAGE,+CAOF,wGAQA,uEAOA,iMAWA,sFAOA,gDAIE,sRAWE,4FAQJ,+CAIE,2EAIE,sDAOJ,uDAIA,+DAGE,oDAIA,0DAAA,6DAIA,wDAIA,uEAIA,+DAAA,6DAIA,mHAMF,4FAIE,uDAIA,6DAAA,gEAIA,0DAIA,0EAIA,0DAAA,wDAIA,6GAMF,qFAKE,uHAQF,0BACE,oDAKA,0EAMF,0BACE,2EAMA,yDAMF,0BACE,4CAYF,oKASA,kIAOE,0BAA6B,sGAO/B,4DAIE,0BAA6B,gEAS/B,kIAKE,2BAA8B,qEAI9B,0BAA6B,iFAM/B,0CAGE,0BACE,kEAMJ,0CAGE,2BACE,4EAKF,0BACE,kEAMJ,0CAGE,2BACE,4EAKF,0BACE,kEAOF,mIAUF,2GAME,gHAIE,kFAOJ,gFAKE,0BAA6B,iEAS/B,4FAKE,0BAA6B,6FAO/B,iFAKE,0BAA6B,+CAK/B,kFAKE,0BAA6B,gDAK/B,2DAIE,0BAA6B,+DAQjC,+GAKE,8FAKE,0BAA6B,4FAO/B,6DAIE,0BAA6B,iEAa/B,sLAIE,uIAAA,uIAAA,uIAAA,uIAAA,uIAAA,uIAIA,8HAGE,oIAAA,oIAMF,6KAIA,8JAIA,oLAKF,iLAIE,iIAAA,iIAAA,iIAAA,iIAAA,iIAAA,iIAIA,iIAGE,sIAAA,sIAMF,gLAIA,iKAIA,uLAKF,4JAIE,0IAAA,0IAAA,0IAAA,0IAAA,0IAAA,0IAIA,yIAGE,+IAAA,+IAMF,gLAIA,iKAIA,uLQxsBJ,yIAOE,qIAKE,oIASF,oEAKE,8GASA,2IAOE,6DAIA,mGAQJ,wGAUA,0BAII,6KASJ,gQAQE,8GAOF,+IAQE,8FAOF,wEAME,yBAA2B,gCAM7B,6BAKA,mCAIA,uBAIA,wDAIA,uGAIE,mDAIA,2DAGE,0GAMF,4GAOA,yBACE,2CAIA,2CAGE,kDAQN,iCAAsC,sC1BrLxC,iHAOA,mDAIA,oDAIA,qEAMA,wEAKA,yDgBeA,qKASE,0HAAA,0HAAA,0HAMA,yCAIA,gJAMA,mNAAA,oNAQA,gDAGE,+FAMA,wIAQA,8DAKF,iDAIA,oGAIE,wEAQF,mGAOF,oPAQE,wEAKA,4DAMA,qFAME,+FAMA,wGAMA,2IAME,0DAQN,qGAOA,gKAOE,oEAIE,4CAKF,iEAKA,+DAOF,sCAGE,iGAMA,qDAKA,uQAUE,0EAIA,4EAIA,4EAIA,qCgB1NJ,yVAeE,6DAKA,8BAKA,sGAKA,4GAKA,sGAKA,sGAKA,iGAKA,6FAMA,6DAIA,sDAIA,4DAIE,6DAMF,8CAKA,0CAMA,oHASA,yTAkBE,mDAQJ,iDZnHA,yRAUA,4XAaE,mBAIA,6CAMA,8EAKE,2LAUF,kJAMA,0IAMA,sJAKE,qGAUA,kEAEA,yDAEA,oFAEA,6DAEA,yDAKJ,kCAGE,wYAcE,4HAMF,6CE/GF,iQAQE,qNAQE,8FAMA,yDAIE,sQASE,gIAQN,qCAIA,oNASA,0DAGE,iFAMF,sDAGE,6EAMF,qGAIE,oHAMF,wHAKE,4HAKA,gKASA,wDAGE,2DAKF,wCAIA,wFAOA,wDAGE,mDAKF,wCAIA,wDAKF,wBAKA,6CAME,qCAAA,uCAIA,6CAKF,uISvJF,kJAKE,6DAIA,qGAIA,4DAMA,sFAMA,gIAOA,iDAMA,6BAIA,yBAIA,4BAKA,yCAKA,wCAKA,8CAKA,yCAKA,0BAMF,yPASA,+C/D1IF,YAAA,kBsDqNI,gQSnEF,mIAIE,yIAIA,8Q/D1JJ,kCAAA,qBY4BE,4OAaA,kGAMA,kGAMA,uJAOA,wMAWA,kLAOA,mGAMA,gEAKA,gFAIA,6CAIA,yEAKA,yHAMA,wDAMA,4EAKA,+BAKA,8FAMA,mDAMA,yEAKA,uDAMA,8CAEA,8CAEA,4CAEA,+CAGA,mGAMA,qDAMA,4HAOA,kDAEA,mDAEA,mDAEA,mDAEA,mDAEA,2DAMA,gIASA,kMAYA,kdAmBA,wDAKA,mHAMA,kGAOA,+PAUA,sFAMA,+IAOA,qGAOA,uCAEE,+TAAA,oKAwBF,yBACE,+CAKA,4FAKF,yBAEE,yDAEA,yDAEA,0DAGF,yBACE,+DAMF,0BACE,uEAMF,uCACE,6BAIA,iIAAA,mFZxVJ,aakBE,mJASA,8DAKA,8DAKA,8DAKA,8DAKA,8DAKA,iEAKA,iEAMA,iCAEA,6CAEA,iDAEA,yCAEA,yCAEA,qCAEA,mCAEA,yCE/ED,yBAEC,gFAMA,gFAOA,4FAMA,yFAMA,6FAOA,iGAMA,mGAOA,kFAMA,uFAMA,qFAMA,qFAMA,mFAMA,+EAMA,qFAOA,kFAMA,wFAMA,uFAOA,qFAMA,qFAMA,2FAOA,oFAMA,2FAOA,6FAMA,6FAMA,6FASA,wFAMA,yFAMA,yFAMA,yFAMA,yFAMA,yFAMA,yFAMA,yFAMA,yFAMA,yFAOA,0FAMA,2FAMA,2FAMA,2FAMA,2FAMA,2FAMA,2FAMA,2FAMA,2FAMA,2FAOA,wFAMA,yFAMA,yFAMA,yFAMA,yFAMA,yFAMA,yFAMA,yFAMA,yFAMA,yFAOA,wFAMA,yFAMA,yFAMA,yFAMA,yFAMA,yFAMA,yFAMA,yFAMA,yFAMA,yFAOA,sFAMA,uFAMA,uFAMA,uFAMA,uFAMA,uFAMA,uFAMA,uFAMA,uFAMA,uFAOA,qFAMA,sFAMA,sFAMA,sFAMA,sFAMA,sFAMA,sFAMA,sFAMA,sFAMA,sFAOA,wFAMA,yFAMA,yFAMA,yFAMA,yFAMA,yFAMA,yFAMA,yFAMA,yFAMA,yFAOA,qFAMA,sFAMA,sFAMA,sFAMA,sFAMA,sFAMA,sFAMA,sFAMA,sFAMA,sFAOA,qFAMA,sFAMA,sFAMA,sFAMA,sFAMA,sFAMA,sFAMA,sFAMA,sFAMA,sFAOA,wFAMA,yFAMA,sFAMA,yFAOA,uFAMA,wFAMA,wFAMA,wFehvBA,0EAMA,6EAMA,+EAMA,8EAMA,+EAMA,6EAMA,gFAMA,+EAMA,gFAMA,6EAMA,gFAMA,gFAMA,iFAMA,8EAMA,gFAMA,8EAMA,8EAMA,8EAMA,8EAMA,8EAMA,8EAMA,+EAMA,+EAMA,+EAMA,+EAMA,+EAMA,+EAMA,+EAMA,+EAMA,+EAMA,+EAOA,sFAMA,wFAMA,sFAOA,gFAMA,+EAMA,8EAMA,gFAMA,8EAMA,+EAMA,+EAOA,4FAMA,6FAMA,0FAMA,oFAMA,uFAMA,2FAMA,2FAOA,oFAMA,mFAMA,kFAMA,oFAMA,kFAOA,6FAMA,oFAMA,oFAOA,8FAMA,6FAMA,0FClWA,oFAMA,qFAMA,oFAMA,sFAMA,qFAMA,qFAMA,uFAMA,sFAMA,mFAMA,mFAOA,+EAMA,gFAMA,+EAMA,iFAMA,gFAMA,gFAOA,uFAMA,uFAMA,uFAMA,0FAMA,oFAOA,qFAMA,2FAMA,sFAMA,uFAMA,uFAMA,yFAMA,qFAMA,0FAMA,sFAOA,+EAMA,gFAMA,gFAMA,kFAMA,8EASA,8FAMA,6FAMA,wFAMA,2FAMA,2FAMA,2FAOA,0FAMA,2FAMA,4FgB1QA,8EAMA,kFAMA,iFAMA,kFAMA,gFAMA,iFAMA,gFAMA,kFAMA,8FAOA,sFAMA,kFAMA,qFAMA,oFAMA,oFAMA,4FAOA,mFAMA,qFAOA,0FAMA,8FY/GA,8DAMA,mFAMA,mFAMA,mHAMA,qHAMA,sHAMA,0FAMA,4FAOA,kHAMA,yHAMA,2HAMA,wHAMA,uFAMA,6HlC/EA,iFAMA,sFAMA,qFAMA,sFAMA,sFAOA,4FAMA,6FAMA,2FAOA,oFAMA,iFAMA,mFAOA,mFAMA,6FAMA,uFAOA,mFAMA,wFAOA,4FAMA,0FAOA,0GAMA,sGAMA,oFL3HA,mFAMA,uFAMA,yFAMA,iFAMA,0FAOA,wFAMA,sFAMA,uFAMA,sFAMA,0FAMA,0FAMA,2FAMA,wFAOA,kFAMA,2FAMA,gFAMA,mFAMA,0FAOA,wFAMA,uFAMA,uFAMA,sFAMA,wFAMA,sFAOA,qFAMA,oFAMA,uFAOA,qFAMA,iGAMA,iGAMA,sFAOA,0FAMA,0FAOA,sFAMA,oFAMA,sFAMA,oFAMA,oFAOA,sFAMA,wFAMA,uFAOA,sFAMA,0FAMA,0FAOA,qFAMA,uFAMA,qFAMA,yFAOA,mGAMA,8FAOA,iFAMA,qFAOA,mFAMA,sFAOA,4FAMA,sFAOA,iFAMA,2FAMA,6EAMA,sFAMA,uFAMA,uFAOA,yFAMA,oFAMA,uFAMA,wFAOA,oFAMA,2FAMA,yFAMA,6FAMA,qFAMA,wFAMA,yFAMA,2FAOA,uFAMA,8FAMA,4FAMA,sFAMA,0FAMA,yFAMA,2FAMA,kGAOA,uFAMA,8FAMA,4FAMA,sFAMA,0FAMA,yFAMA,2FAMA,kGAMA,wFAOA,2FAOA,oFAMA,uFAMA,wFASA,oFAMA,4FAMA,oGAOA,qFAMA,uFAMA,mFAMA,yFAMA,0GAOA,kFAMA,0FAMA,qFAOA,2FAMA,yFAMA,2FAMA,4FAOA,0FAMA,wFAMA,0FAMA,+FAOA,qFAMA,sFAMA,sFASA,sFAMA,sFAMA,sFAMA,qFAMA,uFAMA,4FAMA,2FAMA,+FAOA,kFAMA,uFAMA,uFAOA,sFAMA,4FAMA,2FAMA,qFAMA,6FAMA,8FAOA,wFiB10BA,gFAMA,gFAOA,4FAMA,yFAMA,6FAOA,iGAMA,mGAOA,kFAMA,uFAMA,qFAMA,qFAMA,mFAMA,+EAMA,qFAOA,kFAMA,wFAMA,uFAOA,qFAMA,qFAMA,2FAOA,oFAMA,2FAOA,6FAMA,6FAMA,6FASA,wFAMA,yFAMA,yFAMA,yFAMA,yFAMA,yFAMA,yFAMA,yFAMA,yFAMA,yFAOA,0FAMA,2FAMA,2FAMA,2FAMA,2FAMA,2FAMA,2FAMA,2FAMA,2FAMA,2FAOA,wFAMA,yFAMA,yFAMA,yFAMA,yFAMA,yFAMA,yFAMA,yFAMA,yFAMA,yFAOA,wFAMA,yFAMA,yFAMA,yFAMA,yFAMA,yFAMA,yFAMA,yFAMA,yFAMA,yFAOA,sFAMA,uFAMA,uFAMA,uFAMA,uFAMA,uFAMA,uFAMA,uFAMA,uFAMA,uFAOA,qFAMA,sFAMA,sFAMA,sFAMA,sFAMA,sFAMA,sFAMA,sFAMA,sFAMA,sFAOA,wFAMA,yFAMA,yFAMA,yFAMA,yFAMA,yFAMA,yFAMA,yFAMA,yFAMA,yFAOA,qFAMA,sFAMA,sFAMA,sFAMA,sFAMA,sFAMA,sFAMA,sFAMA,sFAMA,sFAOA,qFAMA,sFAMA,sFAMA,sFAMA,sFAMA,sFAMA,sFAMA,sFAMA,sFAMA,sFAOA,wFAMA,yFAMA,sFAMA,yFAOA,uFAMA,wFAMA,wFAMA,wFgBhvBA,0EAMA,6EAMA,+EAMA,8EAMA,+EAMA,6EAMA,gFAMA,+EAMA,gFAMA,6EAMA,gFAMA,gFAMA,iFAMA,8EAMA,gFAMA,8EAMA,8EAMA,8EAMA,8EAMA,8EAMA,8EAMA,+EAMA,+EAMA,+EAMA,+EAMA,+EAMA,+EAMA,+EAMA,+EAMA,+EAMA,+EAOA,sFAMA,wFAMA,sFAOA,gFAMA,+EAMA,8EAMA,gFAMA,8EAMA,+EAMA,+EAOA,4FAMA,6FAMA,0FAMA,oFAMA,uFAMA,2FAMA,2FAOA,oFAMA,mFAMA,kFAMA,oFAMA,kFAOA,6FAMA,oFAMA,oFAOA,8FAMA,6FAMA,0FAOA,86BYzWA,oFAMA,qFAMA,oFAMA,sFAMA,qFAMA,qFAMA,uFAMA,sFAMA,mFAMA,mFAOA,+EAMA,gFAMA,+EAMA,iFAMA,gFAMA,gFAOA,uFAMA,uFAMA,uFAMA,0FAMA,oFAOA,qFAMA,2FAMA,sFAMA,uFAMA,uFAMA,yFAMA,qFAMA,0FAMA,sFAOA,+EAMA,gFAMA,gFAMA,kFAMA,8EASA,8FAMA,6FAMA,wFAMA,2FAMA,2FAMA,2FAOA,0FAMA,2FAMA,4FI1QA,8EAMA,kFAMA,iFAMA,kFAMA,gFAMA,iFAMA,gFAMA,kFAMA,8FAOA,sFAMA,kFAMA,qFAMA,oFAMA,oFAMA,4FAOA,mFAMA,qFAOA,0FAMA,8FAOA,otBCtHA,8DAMA,mFAMA,mFAMA,mHAMA,qHAMA,sHAMA,0FAMA,4FAOA,kHAMA,yHAMA,2HAMA,wHAMA,uFAMA,6H/BxFA,gDESA,iFAMA,sFAMA,qFAMA,sFAMA,sFAOA,4FAMA,6FAMA,2FAOA,oFAMA,iFAMA,mFAOA,mFAMA,6FAMA,uFAOA,mFAMA,wFAOA,4FAMA,0FAOA,0GAMA,sGAMA,oFU3HA,mFAMA,uFAMA,yFAMA,iFAMA,0FAOA,wFAMA,sFAMA,uFAMA,sFAMA,0FAMA,0FAMA,2FAMA,wFAOA,kFAMA,2FAMA,gFAMA,mFAMA,0FAOA,wFAMA,uFAMA,uFAMA,sFAMA,wFAMA,sFAOA,qFAMA,oFAMA,uFAOA,qFAMA,iGAMA,iGAMA,sFAOA,0FAMA,0FAOA,sFAMA,oFAMA,sFAMA,oFAMA,oFAOA,sFAMA,wFAMA,uFAOA,sFAMA,0FAMA,0FAOA,qFAMA,uFAMA,qFAMA,yFAOA,mGAMA,8FAOA,iFAMA,qFAOA,mFAMA,sFAOA,4FAMA,sFAOA,iFAMA,2FAMA,6EAMA,sFAMA,uFAMA,uFAOA,yFAMA,oFAMA,uFAMA,wFAOA,oFAMA,2FAMA,yFAMA,6FAMA,qFAMA,wFAMA,yFAMA,2FAOA,uFAMA,8FAMA,4FAMA,sFAMA,0FAMA,yFAMA,2FAMA,kGAOA,uFAMA,8FAMA,4FAMA,sFAMA,0FAMA,yFAMA,2FAMA,kGAMA,wFAOA,2FAOA,oFAMA,uFAMA,wFASA,oFAMA,4FAMA,oGAOA,qFAMA,uFAMA,mFAMA,yFAMA,0GAOA,kFAMA,0FAMA,qFAOA,2FAMA,yFAMA,2FAMA,4FAOA,0FAMA,wFAMA,0FAMA,+FAOA,qFAMA,sFAMA,sFASA,sFAMA,sFAMA,sFAMA,qFAMA,uFAMA,4FAMA,2FAMA,+FAOA,kFAMA,uFAMA,uFAOA,sFAMA,4FAMA,2FAMA,qFAMA,6FAMA,8FAOA,yFjC30BF,qBAIE,qFAMA,2FAMA,4FAMA,uFAMA,6FAMA,8FAOA,qFAMA,+FAMA,qFAMA,2FAMA,0FAOA,kFAMA,wFAMA,yFAMA,uFAMA,0FAOA,oFAMA,2FAMA,2FAMA,0FASA,uFAMA,4FAMA,2FAMA,4FAMA,4FAOA,wFAMA,wFAMA,2FAMA,4FAOA,mFAMA,wFAOA,4FAMA,0FAMA,6FASA,uFAMA,uFAOA,wFAMA,uFAOA,0FASA,yFAMA,2FAMA,wFAOA,4GAMA,2GAMA,gHASA,qFAMA,wFAMA,4FAOA,qFAMA,wFAMA,4FAOA,mFAMA,sFAMA,0FAOA,kFAMA,qFAMA,yFASA,2FAMA,gGAOA,6FAMA,+FAOA,8FAMA,gGwBjZA,qFAMA,2FAMA,4FAMA,uFAMA,6FAMA,8FAOA,qFAMA,+FAMA,qFAMA,2FAMA,0FAOA,kFAMA,wFAMA,yFAMA,uFAMA,0FAOA,oFAMA,2FAMA,2FAMA,0FASA,uFAMA,4FAMA,2FAMA,4FAMA,4FAOA,wFAMA,wFAMA,2FAMA,4FAOA,mFAMA,wFAOA,4FAMA,0FAMA,6FASA,uFAMA,uFAOA,wFAMA,uFAOA,0FASA,yFAMA,2FAMA,wFAOA,4GAMA,2GAMA,gHASA,qFAMA,wFAMA,4FAOA,qFAMA,wFAMA,4FAOA,mFAMA,sFAMA,0FAOA,kFAMA,qFAMA,yFASA,2FAMA,gGAOA,6FAMA,+FAOA,8FAMA,iGzB3ZF,qB2BCE,qZzCQF,sB8BFE,wwJ9BEF,mBuBHE,0sBCAA,wtBxBGF,0BwCFE,0OAUA,sPAUA,mCACE,kDAMF,6JAOA,gUAUA,yUAWA,+RASA,8LAOA,gKAMA,iIAMA,2FAIA,yBASA,uCACE,sIASA,kCN8oBJ,kuH4BteA,goDK3LA,knB9B8CA,i1BW6sBA,yzFxBhyBA,uzBAyBA,mCACE,whCA4BF,uhCA0BA,kgCA0BA,myBA0BA,6/BAyBA,k8BfjMA,iIDZA,2B6CNA,2BACE,swDkBAA,g6BCAA,g0CPAA,wsEzDWF,wB8DZA,wBAEE,yFAMA,+GAMA,gHAMA,iHAMA,2FAOA,4FAMA,kHAMA,4FAOA,uEAMA,qFAMA,sFAMA,uFAMA,qEF1EA,2QAMA,0QAMA,yQAOA,sLAMA,kLAMA,yNAMA,oLAOA,gJAOA,kJAOA,sJAOA,0JCjEA,wHAMA,4IAMA,8IAOA,2DAKA,iEAKA,uFAMA,+FAMA,6FAMA,sFAOA,uGAOA,2DAKA,qDAMA,uIAOA,6EAMA,6EAMA,6EAMA,6EAMA,iF7DtFF,yBkDnBA,yBAIE,4BAEA,8BAEA,4BAEA,4BAEA,4BAEA,4BAEA,4BAEA,4BAEA,4BAEA,8BAEA,8BAEA,8BAEA,8BAEA,8BAEA,8BAEA,8BAEA,8BAEA,8BAEA,8BAGA,iCAEA,mCAEA,iCAEA,iCAEA,iCAEA,iCAEA,iCAEA,iCAEA,iCAEA,mCAEA,mCAEA,mCAEA,mCAEA,mCAEA,mCAEA,mCAEA,mCAEA,mCAEA,mCAGA,mCAEA,qCAIA,oCAEA,sCAIA,kCAEA,oCAKA,+DAEA,kEAEA,+DAKA,+DAEA,kEAEA,+DAOA,2BAEA,6BAEA,2BAEA,2BAEA,2BAEA,2BAEA,2BAEA,2BAEA,2BAEA,6BAEA,6BAEA,6BAEA,6BAEA,6BAEA,6BAEA,6BAEA,6BAEA,6BAEA,6BAGA,gCAEA,kCAIA,kCAEA,oCAIA,mCAEA,qCAIA,iCAEA,mCAKA,6DAEA,gEAGA,4CAGA,6DAEA,gEAGA,4CAGA,qCAEA,qCe1MA,qBAEA,uBAEA,mCAEA,qBAEA,mBAEA,iCAEA,mBAEA,iCAGA,4BAEA,6BAGA,wBAEA,4BAEA,4BAEA,sBAEA,wBAGA,eAEA,iBAEA,iBAEA,iBAEA,iBAEA,iBAEA,qBAGA,6BAEA,iCAEA,mCAEA,iCAEA,iCAEA,qCAEA,uCAEA,qCAEA,iCAEA,qCAEA,uCAEA,qCAGA,4IAYA,qHCrFA,uCAEA,uCAEA,2CAEA,uCAEA,uCAEA,yCAEA,yCAEA,yCAEA,yCAGA,mDAEA,mDAEA,uDAEA,+CAGA,kDAEA,oDAEA,kDAEA,sDAEA,wDAEA,oDAGA,+BAEA,2BAEA,6BAEA,iCAGA,gCAEA,8BAEA,sCAEA,sCAEA,gCAEA,0CAEA,0CAGA,oCAEA,oCAEA,sCAEA,iCAGA,qCAEA,mCAEA,2CAGA,oEAMA,sCAEA,8BAGA,0BAEA,8BAGA,iCf1FA,sBAEA,oBAEA,oBAEA,oBAEA,wBAEA,wBAGA,uBAEA,qBAEA,qBAEA,qBAGA,uBAEA,qBAEA,qBAEA,qBAGA,uBAEA,qBAEA,qBAEA,qBAGA,mBAEA,0BAIA,sBAEA,sBAEA,mBAEA,mBAEA,kBAEA,kBAEA,kBAEA,kBAEA,sBAEA,sBAGA,cAEA,gBAEA,mBAEA,yBAEA,yBAEA,yBAGA,kBAEA,oBAEA,oBAEA,oBAEA,oBAEA,oBAEA,oBAEA,oBAEA,oBAEA,oBAEA,oBAEA,oBAEA,oBAEA,oBAEA,sBAGA,gEAEA,qEAEA,qEAEA,sEAEA,sEASA,sBAIA,qBAEA,qBAEA,yBAEA,yBAGA,wBAEA,sBAEA,sBAEA,sBAGA,wBAEA,sBAEA,sBAEA,sBAGA,wBAEA,sBAEA,sBAEA,sBAGA,oBAEA,2BAIA,uBAEA,uBAEA,oBAEA,oBAEA,mBAEA,mBAEA,mBAEA,mBAEA,uBAEA,uBAGA,eAEA,iBAEA,oBAEA,0BAEA,0BAEA,0BAGA,mBAEA,qBAEA,qBAEA,qBAEA,qBAEA,qBAEA,qBAEA,qBAEA,qBAEA,qBAEA,qBAEA,qBAEA,qBAGA,2CAEA,2CAEA,2CAOA,sBAEA,2BAEA,4BAEA,4BAEA,4BAEA,4BAGA,2BAEA,8BAEA,2BAEA,4BAEA,4BAEA,4BAEA,4BAEA,4BAEA,4BAEA,4BAEA,8BAEA,8BAGA,uBAEA,0CAIA,6BAEA,6BAEA,6BAEA,6BAEA,6BAGA,0CAIA,4BAEA,6BAEA,6BAEA,6BAEA,6BAEA,6BAEA,6BAKA,+BAEA,8BAEA,gCAEA,mCAEA,iCAEA,6BAEA,+BnD7TF,2BwDzBA,2BAEE,8tFA2DA,8DAKA,+DAKA,6DAKA,0KD1EA,gFAIA,uCAIA,uDAIA,iDAKA,uCAIA,qDAIA,yDAIA,wFAMA,8IAMA,yFAKA,yGAOA,yDAIA,+JAOA,kGAMA,iGAMA,wBAIA,wCAKA,6CAIA,gDAIA,qDAKA,uPAkBA,yF1D3HF,2BoDIA,2BAEE,8JAQA,8JAQA,iKAQA,gKAQA,gKAQA,kKASA,kNASA,qNASA,uOASA,oMAUA,gDAIA,oDAIA,6CpDlGF,uBAAyB,6BDiBzB,mBY8EA,mBAII,+GAOA,4FAMA,4FAMA,4FAMA,4FAOA,iJASA,yDAKA,qDAQA,mBAEA,iDAEA,iDAEA,iDAEA,iDAEA,iDAEA,mDAEA,iGAEA,oGAGA,+BAEA,+BAEA,+BAEA,+BAEA,+BAEA,iCAEA,gCAGA,8CAEA,8CAEA,8CAEA,8CAEA,8CAEA,8CAGA,4BAEA,4BAEA,4BAEA,4BAEA,4BAEA,4BAEA,+BZlMJ,mB4B2HA,mBAGI,4EAOA,6EAMA,mFAOA,+GAOA,uGAUA,mBAEA,iCAGA,6BAEA,gCAEA,0BAEA,8BAGA,oCAEA,iCAEA,gCAEA,mCAEA,qCAEA,0CAEA,uCAEA,sCAEA,+CAEA,6CAEA,6CAGA,mBAEA,qBAEA,qBAEA,0BAGA,+BAEA,oCAEA,oCAEA,+BAEA,+BAEA,+BAEA,+BAEA,+BAEA,+BAGA,uBAEA,yBAEA,2BAEA,6BAGA,2BAEA,kCAEA,+BAEA,8BAEA,mC5BpPJ,yB6BqIA,yBAII,4LAUA,sJASA,uLASA,uLASA,wLASA,wLASA,0LAYA,4CAKA,0CAIA,8CAKA,2JAQA,yBACI,2DAKJ,yBACI,2DAKJ,0BACI,4DAKJ,0BACI,4DAKJ,0BACI,6DAQJ,gCAIA,sCAIA,sCAIA,sEAOA,uFAUA,kUAQA,2EAIA,iIAIA,8EAIA,0IAMA,kIAQA,8MAeA,6XAaA,0UAUA,8YAYA,yaAYA,4MAUA,2MAUA,+KAWA,qKAcA,eAEA,iBAEA,iBAEA,iBAEA,iBAEA,iBAEA,qBAGA,2CAEA,uCAEA,uCAEA,yCAEA,yCAEA,yCAEA,qCAEA,yCAEA,uC7BzcJ,yB0C4HA,yBAII,qBAEA,mCAEA,uBAEA,mBAEA,iCAEA,mBAEA,iCAEA,qBAEA,+BAEA,6BAEA,qBAKA,4BAEA,6BAGA,qIAYA,2JAeA,yBACI,yBAEA,uCAEA,2BAEA,uBAEA,qCAEA,uBAEA,qCAEA,yBAEA,mCAEA,iCAEA,yBAEA,gCAEA,kCAIJ,yBACI,yBAEA,uCAEA,2BAEA,uBAEA,qCAEA,uBAEA,qCAEA,yBAEA,mCAEA,iCAEA,yBAEA,gCAEA,kCAIJ,0BACI,yBAEA,uCAEA,2BAEA,uBAEA,qCAEA,uBAEA,qCAEA,yBAEA,mCAEA,iCAEA,yBAEA,gCAEA,kCAIJ,0BACI,yBAEA,uCAEA,2BAEA,uBAEA,qCAEA,uBAEA,qCAEA,yBAEA,mCAEA,iCAEA,yBAEA,gCAEA,kCAIJ,0BACI,6BAEA,2CAEA,+BAEA,2BAEA,yCAEA,2BAEA,yCAEA,6BAEA,uCAEA,qCAEA,6BAEA,oCAEA,sCAMJ,aACI,sCAEA,oDAEA,wCAEA,sCAEA,6CAEA,iD1CtVR,mCqBqIA,mCAII,yBACI,qDAEA,qDAEA,qDAEA,qDAEA,qDAEA,uDAEA,4EAEA,8EAEA,mCAEA,mCAEA,mCAEA,mCAEA,mCAEA,qCAEA,oCAEA,gCAEA,gCAEA,gCAEA,gCAEA,gCAEA,gCAEA,kCAIJ,yBACI,qDAEA,qDAEA,qDAEA,qDAEA,qDAEA,uDAEA,4EAEA,8EAEA,mCAEA,mCAEA,mCAEA,mCAEA,mCAEA,qCAEA,oCAEA,gCAEA,gCAEA,gCAEA,gCAEA,gCAEA,gCAEA,kCAIJ,0BACI,qDAEA,qDAEA,qDAEA,qDAEA,qDAEA,uDAEA,4EAEA,8EAEA,mCAEA,mCAEA,mCAEA,mCAEA,mCAEA,qCAEA,oCAEA,gCAEA,gCAEA,gCAEA,gCAEA,gCAEA,gCAEA,kCAIJ,0BACI,qDAEA,qDAEA,qDAEA,qDAEA,qDAEA,uDAEA,4EAEA,8EAEA,mCAEA,mCAEA,mCAEA,mCAEA,mCAEA,qCAEA,oCAEA,gCAEA,gCAEA,gCAEA,gCAEA,gCAEA,gCAEA,kCAIJ,0BACI,yDAEA,yDAEA,yDAEA,yDAEA,yDAEA,2DAEA,gFAEA,kFAEA,uCAEA,uCAEA,uCAEA,uCAEA,uCAEA,yCAEA,wCAEA,oCAEA,oCAEA,oCAEA,oCAEA,oCAEA,oCAEA,wCrB/WR,sBsBhBA,sBAII,4BAEA,gCAEA,iCAEA,gCAEA,iCAEA,+BAEA,kCAEA,iCAEA,kCAEA,+BAEA,kCAEA,mCAEA,oCAEA,iCAEA,mCAEA,iCAEA,iCAEA,iCAEA,iCAEA,iCAEA,iCAEA,kCAEA,kCAEA,kCAEA,kCAEA,kCAEA,kCAEA,kCAEA,kCAEA,kCAEA,kCAGA,mCAEA,oCAEA,oCAEA,oCAEA,iCAEA,mCAEA,mCAGA,qCAEA,yCAEA,0CAEA,yCAEA,0CAEA,wCAEA,2CAEA,0CAEA,wCAEA,4CAEA,0CAEA,0CAEA,0CAEA,0CAEA,0CAGA,kCAEA,sCAEA,uCAEA,sCAEA,uCAEA,qCAEA,wCAEA,uCAEA,qCAEA,yCAEA,uCAEA,uCAEA,uCAEA,uCAEA,uCAKA,6BAEA,iCAEA,kCAEA,iCAEA,kCAEA,gCAEA,mCAEA,kCAEA,gCAEA,oCAEA,kCAEA,kCAEA,kCAEA,kCAEA,kCAEA,oBAGA,iEAEA,wEAEA,2EAEA,yEAEA,2EAEA,uEAEA,6EAEA,2EAEA,uEAEA,8EAEA,0EAEA,0EAEA,0EAEA,0EAEA,0EAEA,4CAGA,iEAEA,wEAEA,2EAEA,yEAEA,2EAEA,uEAEA,6EAEA,2EAEA,uEAEA,8EAEA,0EAEA,0EAEA,0EAEA,0EAEA,0EAEA,4CAGA,kCAEA,sCAEA,uCAEA,sCAEA,uCAEA,qCAEA,wCAEA,uCAEA,qCAEA,yCAEA,uCAEA,uCAEA,uCAEA,uCAEA,uCAEA,yBAEA,oCAEA,wCAEA,yCAEA,wCAEA,yCAEA,uCAEA,0CAEA,yCAEA,uCAEA,2CAEA,yCAEA,yCAEA,yCAEA,yCAEA,yCAEA,2BAEA,qCAEA,yCAEA,0CAEA,yCAEA,0CAEA,wCAEA,2CAEA,0CAEA,wCAEA,4CAEA,0CAEA,0CAEA,0CAEA,0CAEA,0CAEA,4BAEA,mCAEA,uCAEA,wCAEA,uCAEA,wCAEA,sCAEA,yCAEA,wCAEA,sCAEA,0CAEA,wCAEA,wCAEA,wCAEA,wCAEA,wCAEA,0BAKA,4CAEA,2CAEA,4CAEA,0CAEA,6CAEA,4CAEA,0CAEA,8CAEA,4CAEA,4CAEA,4CAEA,4CAEA,4CAKA,8BAEA,kCAEA,mCAEA,kCAEA,mCAEA,iCAEA,oCAEA,mCAEA,iCAEA,qCAEA,mCAEA,mCAEA,mCAEA,mCAEA,mCAGA,mEAEA,0EAEA,6EAEA,2EAEA,6EAEA,yEAEA,+EAEA,6EAEA,yEAEA,gFAEA,4EAEA,4EAEA,4EAEA,4EAEA,4EAGA,mEAEA,0EAEA,6EAEA,2EAEA,6EAEA,yEAEA,+EAEA,6EAEA,yEAEA,gFAEA,4EAEA,4EAEA,4EAEA,4EAEA,4EAGA,mCAEA,uCAEA,wCAEA,uCAEA,wCAEA,sCAEA,yCAEA,wCAEA,sCAEA,0CAEA,wCAEA,wCAEA,wCAEA,wCAEA,wCAEA,qCAEA,yCAEA,0CAEA,yCAEA,0CAEA,wCAEA,2CAEA,0CAEA,wCAEA,4CAEA,0CAEA,0CAEA,0CAEA,0CAEA,0CAEA,sCAEA,0CAEA,2CAEA,0CAEA,2CAEA,yCAEA,4CAEA,2CAEA,yCAEA,6CAEA,2CAEA,2CAEA,2CAEA,2CAEA,2CAEA,oCAEA,wCAEA,yCAEA,wCAEA,yCAEA,uCAEA,0CAEA,yCAEA,uCAEA,2CAEA,yCAEA,yCAEA,yCAEA,yCAEA,2CtBzjBJ,wBAEE,mBAEA,oBAEA,8BAEA,8BAEA,2BAGA,4CAEA,4CAGA,qBAEA,uBAEA,mCAEA,qBAGA,iCAEA,6BAEA,iCAEA,kCOpFF,wBACE,u7DA+CA,+CAEA,iDAEA,+CAGA,iDAEA,iDAEA,2DAEA,iDAEA,qDAEA,iDAEA,yDAEA,iDAEA,+DAEA,+CAEA,2DAEA,iDAEA,yDAEA,mDAEA,yDAEA,mDAEA,qDAEA,qDAEA,yDAEA,qDAEA,mDAEA,uEAEA,qEAEA,+CAEA,iEAEA,mDAEA,yDAGA,+DAEA,uEAGA,6DAGA,yDAGA,mDAEA,8DAEA,yDAEA,yDAGA,iDAEA,gEAEA,yDU0WF,gBACE,sIASA,0QAYA,yGAKA,sKAYA,sFAKA,6FAKA,4EAIA,uKAOA,0FAMA,sDAKA,yEAOA,qDAIA,oDAKA,yEAOA,gDAKA,sEAMA,8DAoGA,mGAQA,8DAOA,qSAUA,gXAYA,oFAKA,gFAIA,2IAIA,0GAKA,uHAMA,wGAIA,sFAMA,qDAKA,mDAIA,2DAKA,4DAKA,8CAKA,yFAIA,6FAIA,yFAIA,yFAIA,sFAQA,mOAWA,8RAYA,sRAYA,0DAIA,sDAKA,2BAIA,kFAIA,8EAKA,6BAIA,iEAKA,6DAKA,6BAIA,iEAKA,6DAMA,iFAIA,6EAIA,qFAIA,iFAIA,iFAIA,6EAIA,8EAIA,0EAIA,iFAIA,6EAKA,uFAOA,mKAQA,+KASA,8EAOA,uGASA,gEAIA,4DAIA,2NQx+BA,qCAIA,2EAKA,uCASA,iBE+zBF,2CACE,0BACE,sIAOA,gGAMA,6BAIA,mDAKA,qDAIA,wEAKF,yBACE,mCAIA,0BAIA,sCAIA,sIAOA,8FAMA,6BAIA,mDAKA,qDAIA,yEAOJ,aACE,8RAaE,wLAKA,iJAAA,iJAKA,+IAOJ,+BACE,8HASE,wIAOJ,uCAQI,6HAAA,0IAAA,sIgB3OJ,2CACE,0BACE,4EAKF,0BACE,4GASF,yBACE,qGAMA,kIAQA,+KAOA,4FAMA,0EAKA,6FASJ,aACE,sNAUE,uKAKA,6HAGE,gIAQN,+BACE,0GAQE,sHAIA,8IAOJ,uCAOI,6GapzBJ,kBAUA","sources":["Users/jseidel/GitHub/dragonfly/index.css","Users/jseidel/GitHub/dragonfly/core/reset.css","Users/jseidel/GitHub/dragonfly/tokens/index.css","Users/jseidel/GitHub/dragonfly/layout/index.css","Users/jseidel/GitHub/dragonfly/core/color-mix.css","Users/jseidel/GitHub/dragonfly/themes/index.css","Users/jseidel/GitHub/dragonfly/core/accessibility/index.css","Users/jseidel/GitHub/dragonfly/core/logical-properties.css","Users/jseidel/GitHub/dragonfly/ui/index.css","Users/jseidel/GitHub/dragonfly/tokens/transitions.css","Users/jseidel/GitHub/dragonfly/tokens/effects.css","Users/jseidel/GitHub/dragonfly/themes/light-mode.css","Users/jseidel/GitHub/dragonfly/icons/index.css","Users/jseidel/GitHub/dragonfly/layout/responsive-utilities.css","Users/jseidel/GitHub/dragonfly/tokens/colors.css","Users/jseidel/GitHub/dragonfly/tokens/layout.css","Users/jseidel/GitHub/dragonfly/tokens/icons.css","Users/jseidel/GitHub/dragonfly/fonts/fonts.css","Users/jseidel/GitHub/dragonfly/tokens/themes.css","Users/jseidel/GitHub/dragonfly/layout/grid-system.css","Users/jseidel/GitHub/dragonfly/tokens/components.css","Users/jseidel/GitHub/dragonfly/themes/../tokens/index.css","Users/jseidel/GitHub/dragonfly/core/accessibility/keyboard.css","Users/jseidel/GitHub/dragonfly/core/colors.css","Users/jseidel/GitHub/dragonfly/themes/../tokens/layout.css","Users/jseidel/GitHub/dragonfly/themes/../tokens/transitions.css","Users/jseidel/GitHub/dragonfly/themes/../tokens/effects.css","Users/jseidel/GitHub/dragonfly/themes/dark-mode.css","Users/jseidel/GitHub/dragonfly/core/smooth-scroll.css","Users/jseidel/GitHub/dragonfly/layout/spacing.css","Users/jseidel/GitHub/dragonfly/tokens/spacing.css","Users/jseidel/GitHub/dragonfly/tokens/typography.css","Users/jseidel/GitHub/dragonfly/ui/content.css","Users/jseidel/GitHub/dragonfly/themes/aliases.css","Users/jseidel/GitHub/dragonfly/ui/regions/header.css","Users/jseidel/GitHub/dragonfly/layout/flex-layouts.css","Users/jseidel/GitHub/dragonfly/themes/../tokens/components.css","Users/jseidel/GitHub/dragonfly/themes/../tokens/colors.css","Users/jseidel/GitHub/dragonfly/core/accessibility/screenreader.css","Users/jseidel/GitHub/dragonfly/ui/forms.css","Users/jseidel/GitHub/dragonfly/utilities/index.css","Users/jseidel/GitHub/dragonfly/typography/index.css","Users/jseidel/GitHub/dragonfly/core/accessibility/aria.css","Users/jseidel/GitHub/dragonfly/themes/theme-transitions.css","Users/jseidel/GitHub/dragonfly/themes/../tokens/icons.css","Users/jseidel/GitHub/dragonfly/core/accessibility/contrast.css","Users/jseidel/GitHub/dragonfly/ui/regions/main-content.css","Users/jseidel/GitHub/dragonfly/tokens/radius.css","Users/jseidel/GitHub/dragonfly/ui/patterns/blog.css","Users/jseidel/GitHub/dragonfly/layout/responsive.css","Users/jseidel/GitHub/dragonfly/ui/regions/footer.css","Users/jseidel/GitHub/dragonfly/layout/containers.css","Users/jseidel/GitHub/dragonfly/ui/patterns/code.css","Users/jseidel/GitHub/dragonfly/themes/../tokens/spacing.css","Users/jseidel/GitHub/dragonfly/ui/patterns/widget.css","Users/jseidel/GitHub/dragonfly/themes/../tokens/themes.css","Users/jseidel/GitHub/dragonfly/utilities/mixins/transitions.css","Users/jseidel/GitHub/dragonfly/utilities/mixins/layout.css","Users/jseidel/GitHub/dragonfly/utilities/mixins/responsive.css","Users/jseidel/GitHub/dragonfly/utilities/variables/spacing.css","Users/jseidel/GitHub/dragonfly/utilities/variables/typography.css","Users/jseidel/GitHub/dragonfly/utilities/helpers/spacing.css","Users/jseidel/GitHub/dragonfly/utilities/helpers/text.css","Users/jseidel/GitHub/dragonfly/ui/patterns/skeleton.css","Users/jseidel/GitHub/dragonfly/ui/patterns/tags.css","Users/jseidel/GitHub/dragonfly/themes/../tokens/typography.css","Users/jseidel/GitHub/dragonfly/utilities/customize/component-overrides.css","Users/jseidel/GitHub/dragonfly/utilities/customize/theme-generator.css","Users/jseidel/GitHub/dragonfly/utilities/variables/shared.css","Users/jseidel/GitHub/dragonfly/themes/../tokens/radius.css","Users/jseidel/GitHub/dragonfly/themes/../tokens/shadows.css","Users/jseidel/GitHub/dragonfly/utilities/variables/colors.css","Users/jseidel/GitHub/dragonfly/typography/typography.css","Users/jseidel/GitHub/dragonfly/ui/regions/sidebar.css","Users/jseidel/GitHub/dragonfly/tokens/shadows.css","Users/jseidel/GitHub/dragonfly/typography/hierarchy/headings.css","Users/jseidel/GitHub/dragonfly/utilities/helpers/display.css","Users/jseidel/GitHub/dragonfly/utilities/helpers/dimensions.css"],"sourcesContent":["/**\n * Casoon UI Design System - Core CSS\n * \n * Dieses Stylesheet definiert die Layer-Struktur und importiert\n * alle benötigten CSS-Module.\n */\n\n/* \n * Definition der globalen Layer-Reihenfolge\n * Sorgt für konsistente Spezifität über alle Komponenten hinweg\n */\n@layer reset,        /* CSS-Reset und Normalisierung */\n       tokens,       /* Design-Tokens und Variablen */\n       themes,       /* Theme-System */\n       themes-base,  /* Basis-Theme-Definitionen */\n       themes-mode,  /* Light/Dark-Theme-Definitionen */\n       themes-custom, /* Benutzerdefinierte Themes */\n       base,         /* Grundlegende Elementstile */\n       logical-properties, /* Logische Eigenschaften für RTL/LTR Support */\n       accessibility, /* Barrierefreiheits-bezogene Stile */\n       colors,       /* Farbdefinitionen und Schema */\n       color-mix,    /* Farb-Mischungen und -Transformationen */\n       typography,   /* Typografie-System */\n       typography-headings, /* Überschriften-Stile */\n       typography-weights, /* Schriftgewichte */\n       typography-baseline, /* Baseline-Grid */\n       typography-base, /* Basis-Typografie */\n       typography-text, /* Text-Element-Stile */\n       typography-responsive, /* Responsive Typografie */\n       typography-fluid, /* Fluid Typografie */\n       layout,       /* Layout-System */\n       layout-grid,  /* Grid-System */\n       layout-flex,  /* Flex-Layouts */\n       layout-containers, /* Container-System */\n       layout-spacing, /* Abstandsregeln */\n       layout-responsive, /* Responsive Layouts */\n       layout-utilities, /* Layout-Utilities */\n       utilities,    /* Hilfsstilklassen */\n       utilities-variables, /* Variablen für Utilities */\n       utilities-mixins, /* Mixins für Utilities */\n       utilities-helpers, /* Hilfsklassen */\n       utilities-customize, /* Anpassungen */\n       components,   /* Komponentenstile */\n       form,         /* Formular-bezogene Stile */\n       animations,   /* Animationsdefinitionen */\n       animation-contexts, /* Kontextbezogene Animationen */\n       effects,      /* Visuelle Effekte */\n       smooth-scroll, /* Scrolling-Verhalten und -Effekte */\n       icons;        /* Icon-System */\n\n\n/*\n * Import der Layer-Definitionen\n * Importreihenfolge entspricht der Layer-Hierarchie\n */\n\n/* =================== GRUNDLEGENDE LAYER =================== */\n@import url(\"core/reset.css\"); /* layer(reset) */\n@import url(\"tokens/index.css\"); /* layer(tokens) */\n@import url(\"themes/index.css\"); /* layer(themes) und vereinfachte Theme-Layer */\n\n/* =================== BASISSTILE & PROPERTIES =================== */\n@import url(\"core/logical-properties.css\"); /* layer(logical-properties) */\n@import url(\"core/accessibility/index.css\"); /* layer(accessibility) */\n@import url(\"core/colors.css\"); /* layer(colors) */\n@import url(\"core/color-mix.css\"); /* layer(color-mix) */\n@import url(\"core/smooth-scroll.css\"); /* layer(smooth-scroll) */\n\n/* =================== UTILITY & STYLING LAYER =================== */\n@import url(\"utilities/index.css\"); /* layer(utilities) und utilities-* Layer */\n@import url(\"typography/index.css\"); /* layer(typography) und typography-* Layer */\n@import url(\"layout/index.css\"); /* layer(layout) und layout-* Layer */\n\n/* Schriftarten aus dem neuen Pfad importieren */\n@import url(\"fonts/fonts.css\"); /* Basis-Schriften-Definitionen */\n\n/* =================== KOMPONENTEN & ICONS =================== */\n@import url(\"icons/index.css\"); /* layer(icons) */\n@import url(\"ui/index.css\"); /* UI-System mit Regionen, Komponenten und Formularen */\n\n/* =================== EFFECTS & UI COMPONENTS =================== */\n\n/* \n * Effects und UI-Components/Patterns werden nicht automatisch importiert.\n * Diese müssen vom Verwender einzeln nach dem Laden der Haupt-CSS importiert werden, z.B.:\n * \n * @import url(\"pfad/zur/ui-lib/effects/animation.css\");\n * @import url(\"pfad/zur/ui-lib/ui/components/button.css\");\n * @import url(\"pfad/zur/ui-lib/ui/patterns/card.css\");\n */\n\n\n","/**\n * @casoon/dragonfly – Reset CSS\n *\n * This file provides a clean, consistent baseline across all browsers to ensure\n * reliable styling for components and layouts.\n *\n * ➤ Modern reset principles are applied without over-normalizing.\n * ➤ Accessibility, performance, and logical defaults are prioritized.\n * ➤ All rules are scoped within @layer reset to prevent specificity conflicts.\n *\n * 🚨 Important: This file must be imported first before any other styles,\n * especially tokens, themes, and components.\n *\n * Recommended Import Order:\n *   1. @import \"@casoon/dragonfly/core/reset.css\";\n *   2. @import \"@casoon/dragonfly/tokens/index.css\";\n *   3. @import \"@casoon/dragonfly/themes/index.css\";\n *   4. @import \"@casoon/dragonfly/ui/index.css\";\n *\n * Accessibility:\n * - Includes support for `prefers-reduced-motion`\n * - Uses system fonts and semantic defaults\n *\n * Compatibility:\n * - Optimized for modern browsers (Chrome, Firefox, Safari, Edge)\n * - Progressive enhancement for older ones\n */\n\n @layer reset {\n    /* 1. Box-Sizing + Margin-Reset */\n    *, *::before, *::after {\n      box-sizing: border-box;\n      margin: 0;\n      padding: 0;\n    }\n  \n    /* 2. Core Root Defaults */\n    html {\n      -webkit-font-smoothing: antialiased;\n      height: 100;\n      scroll-behavior: smooth;\n      text-size-adjust: 100;\n    }\n  \n    html:focus-within {\n      scroll-behavior: smooth;\n    }\n  \n    body {\n      background-color: var(--color-background, var(--color-white));\n      color: var(--color-foreground, var(--color-black));\n      font-family: system-ui, sans-serif;\n      line-height: 1.5;\n      min-height: 100;\n      text-rendering: optimizespeed;\n    }\n  \n    /* 3. List & Table */\n    ul, ol {\n      list-style: none;\n    }\n  \n    table {\n      border-collapse: collapse;\n      border-spacing: 0;\n    }\n  \n    /* 4. Media */\n    img, picture, video, canvas, svg {\n      display: block;\n      height: auto;\n      max-width: 100;\n    }\n  \n    /* 5. Forms & Buttons */\n    input, button, textarea, select {\n      appearance: none;\n      background: none;\n      border: none;\n      color: inherit;\n      font: inherit;\n      margin: 0;\n      padding: 0;\n    }\n  \n    button {\n      cursor: pointer;\n    }\n  \n    textarea {\n      resize: vertical;\n    }\n  \n    /* 6. Links */\n    a:not([class]) {\n      color: inherit;\n      text-decoration-skip-ink: auto;\n    }\n  \n    /* 7. Accessibility: Motion Reduce */\n    @media (prefers-reduced-motion: reduce) {\n      html {\n        scroll-behavior: auto;\n      }\n\n      *, *::before, *::after {\n        animation-duration: 0.01ms !important;\n        animation-iteration-count: 1 !important;\n        transition-duration: 0.01ms !important;\n      }\n    }\n  }\n  ","/**\n * Design Token Index\n * \n * Zentraler Import aller Design Tokens für das Dragonfly Design System.\n * Diese Datei importiert alle Token-Kategorien in der richtigen Reihenfolge.\n * \n * @layer tokens\n * @version 2.0.0\n * @author Dragonfly Design System\n */\n\n/* Core Design Tokens */\n@import url('./colors.css');\n@import url('./spacing.css');\n@import url('./typography.css');\n@import url('./radius.css');\n@import url('./shadows.css');\n@import url('./layout.css');\n@import url('./transitions.css');\n@import url('./effects.css');\n@import url('./themes.css');\n@import url('./icons.css');\n\n/* Component-Specific Tokens */\n@import url('./components.css'); ","/**\n * Layout System Index\n * \n * Konsolidiertes Layout-System mit optimierter Struktur:\n * \n * CORE LAYOUT SYSTEMS:\n * - Grid System: Utility-basiertes 12-Spalten-Grid (.grid, .grid-cols-*, .col-span-*)\n * - Flex System: Flexbox-Utilities (.flex, .flex-row, .items-center, etc.)\n * - Container System: Container-Größen und -Eigenschaften (.container, .container-md, etc.)\n * \n * RESPONSIVE & UTILITIES:\n * - Responsive: Container Queries + Media Query Fallbacks (.sm:block, .md:hidden, etc.)\n * - Responsive Utilities: Responsive Grid/Flex-Utilities (.sm:grid-cols-2, .md:flex-row, etc.)\n * - Spacing: Gap-, Margin-, Padding-Utilities (.gap-4, .mx-auto, .p-6, etc.)\n * \n * HINWEIS: \n * - Page-Layouts sind in core/logical-properties.css verfügbar (.layout)\n * - Sidebar-Komponenten sind in ui/regions/sidebar.css und ui/menu/sidebar.css verfügbar\n */\n\n/* ================= CORE LAYOUT SYSTEMS ================= */\n@import url('./grid-system.css') layer(layout.grid);\n@import url('./flex-layouts.css') layer(layout.flex);\n@import url('./containers.css') layer(layout.containers);\n\n/* ================= RESPONSIVE & UTILITIES ================= */\n@import url('./responsive.css') layer(layout.responsive);\n@import url('./responsive-utilities.css') layer(layout.responsive-utilities);\n@import url('./spacing.css') layer(layout.spacing);\n\n/* ================= LAYOUT FOUNDATION ================= */\n\n/* \n * Basis-Layout-Definitionen\n * Enthält grundlegende Variablen und Konfigurationen für das Layout-System\n */\n@layer layout {\n  :root {\n    /* Raster-Konfiguration für grid-system.css */\n    --grid-columns: 12;\n    --grid-gutter: var(--space-4, 1rem);\n    --grid-gutter-sm: var(--space-2, 0.5rem);\n    --grid-gutter-md: var(--space-4, 1rem);\n    --grid-gutter-lg: var(--space-6, 1.5rem);\n    --grid-gutter-xl: var(--space-8, 2rem);\n    \n    /* Container-Abstände für containers.css */\n    --container-padding-sm: var(--space-2, 0.5rem);\n    --container-padding-md: var(--space-4, 1rem);\n    --container-padding-lg: var(--space-6, 1.5rem);\n  }\n}\n\n/* ================= LAYOUT UTILITIES ================= */\n\n/* \n * Layout-Utilities \n * Häufig benötigte Hilfsklassen für Layout-Anpassungen\n */\n@layer layout.utilities {\n  /* Dimension-Utilities */\n  .w-full { width: 100%; }\n\n  .h-full { height: 100%; }\n\n  .min-h-screen { min-height: 100%; }\n\n  .min-h-dvh { min-height: 100%dvh; }\n\n  .max-w-full { max-width: 100%; }\n\n  /* Positionierung */\n  .mx-auto { margin-inline: auto; }\n\n  .my-auto { margin-block: auto; }\n\n  /* Display */\n  .block { display: block; }\n\n  .inline { display: inline; }\n\n  .inline-block { display: inline-block; }\n\n  .hidden { display: none; }\n\n  /* Overflow */\n  .overflow-hidden { overflow: hidden; }\n\n  .overflow-auto { overflow: auto; }\n\n  .overflow-x-auto { overflow-x: auto; }\n\n  .overflow-y-auto { overflow-y: auto; }\n} ","/**\n * Auto-generiert mit generateColorMixes.js\n * base/colors.css\n */\n\n@layer color-mix {\n  :root {\n    /* blue */\n    --blue-lightest: color-mix(in srgb, var(--color-blue-500) 20, var(--color-white));\n    --blue-lighter: color-mix(in srgb, var(--color-blue-500) 40, var(--color-white));\n    --blue-light: color-mix(in srgb, var(--color-blue-500) 70, var(--color-white));\n    --blue: var(--color-blue-500);\n    --blue-dark: color-mix(in srgb, var(--color-blue-500) 70, var(--color-black));\n    --blue-darker: color-mix(in srgb, var(--color-blue-500) 40, var(--color-black));\n    --blue-darkest: color-mix(in srgb, var(--color-blue-500) 20, var(--color-black));\n\n    /* sky */\n    --sky-lightest: color-mix(in srgb, var(--color-sky-500) 20, var(--color-white));\n    --sky-lighter: color-mix(in srgb, var(--color-sky-500) 40, var(--color-white));\n    --sky-light: color-mix(in srgb, var(--color-sky-500) 70, var(--color-white));\n    --sky: var(--color-sky-500);\n    --sky-dark: color-mix(in srgb, var(--color-sky-500) 70, var(--color-black));\n    --sky-darker: color-mix(in srgb, var(--color-sky-500) 40, var(--color-black));\n    --sky-darkest: color-mix(in srgb, var(--color-sky-500) 20, var(--color-black));\n\n    /* cyan */\n    --cyan-lightest: color-mix(in srgb, var(--color-cyan-500) 20, var(--color-white));\n    --cyan-lighter: color-mix(in srgb, var(--color-cyan-500) 40, var(--color-white));\n    --cyan-light: color-mix(in srgb, var(--color-cyan-500) 70, var(--color-white));\n    --cyan: var(--color-cyan-500);\n    --cyan-dark: color-mix(in srgb, var(--color-cyan-500) 70, var(--color-black));\n    --cyan-darker: color-mix(in srgb, var(--color-cyan-500) 40, var(--color-black));\n    --cyan-darkest: color-mix(in srgb, var(--color-cyan-500) 20, var(--color-black));\n\n    /* mint */\n    --mint-lightest: color-mix(in srgb, var(--color-mint-500) 20, var(--color-white));\n    --mint-lighter: color-mix(in srgb, var(--color-mint-500) 40, var(--color-white));\n    --mint-light: color-mix(in srgb, var(--color-mint-500) 70, var(--color-white));\n    --mint: var(--color-mint-500);\n    --mint-dark: color-mix(in srgb, var(--color-mint-500) 70, var(--color-black));\n    --mint-darker: color-mix(in srgb, var(--color-mint-500) 40, var(--color-black));\n    --mint-darkest: color-mix(in srgb, var(--color-mint-500) 20, var(--color-black));\n\n    /* green */\n    --green-lightest: color-mix(in srgb, var(--color-green-500) 20, var(--color-white));\n    --green-lighter: color-mix(in srgb, var(--color-green-500) 40, var(--color-white));\n    --green-light: color-mix(in srgb, var(--color-green-500) 70, var(--color-white));\n    --green: var(--color-green-500);\n    --green-dark: color-mix(in srgb, var(--color-green-500) 70, var(--color-black));\n    --green-darker: color-mix(in srgb, var(--color-green-500) 40, var(--color-black));\n    --green-darkest: color-mix(in srgb, var(--color-green-500) 20, var(--color-black));\n\n    /* lime */\n    --lime-lightest: color-mix(in srgb, var(--color-lime-500) 20, var(--color-white));\n    --lime-lighter: color-mix(in srgb, var(--color-lime-500) 40, var(--color-white));\n    --lime-light: color-mix(in srgb, var(--color-lime-500) 70, var(--color-white));\n    --lime: var(--color-lime-500);\n    --lime-dark: color-mix(in srgb, var(--color-lime-500) 70, var(--color-black));\n    --lime-darker: color-mix(in srgb, var(--color-lime-500) 40, var(--color-black));\n    --lime-darkest: color-mix(in srgb, var(--color-lime-500) 20, var(--color-black));\n\n    /* yellow */\n    --yellow-lightest: color-mix(in srgb, var(--color-yellow-500) 20, var(--color-white));\n    --yellow-lighter: color-mix(in srgb, var(--color-yellow-500) 40, var(--color-white));\n    --yellow-light: color-mix(in srgb, var(--color-yellow-500) 70, var(--color-white));\n    --yellow: var(--color-yellow-500);\n    --yellow-dark: color-mix(in srgb, var(--color-yellow-500) 70, var(--color-black));\n    --yellow-darker: color-mix(in srgb, var(--color-yellow-500) 40, var(--color-black));\n    --yellow-darkest: color-mix(in srgb, var(--color-yellow-500) 20, var(--color-black));\n\n    /* gold */\n    --gold-lightest: color-mix(in srgb, var(--color-gold-500) 20, var(--color-white));\n    --gold-lighter: color-mix(in srgb, var(--color-gold-500) 40, var(--color-white));\n    --gold-light: color-mix(in srgb, var(--color-gold-500) 70, var(--color-white));\n    --gold: var(--color-gold-500);\n    --gold-dark: color-mix(in srgb, var(--color-gold-500) 70, var(--color-black));\n    --gold-darker: color-mix(in srgb, var(--color-gold-500) 40, var(--color-black));\n    --gold-darkest: color-mix(in srgb, var(--color-gold-500) 20, var(--color-black));\n\n    /* orange */\n    --orange-lightest: color-mix(in srgb, var(--color-orange-500) 20, var(--color-white));\n    --orange-lighter: color-mix(in srgb, var(--color-orange-500) 40, var(--color-white));\n    --orange-light: color-mix(in srgb, var(--color-orange-500) 70, var(--color-white));\n    --orange: var(--color-orange-500);\n    --orange-dark: color-mix(in srgb, var(--color-orange-500) 70, var(--color-black));\n    --orange-darker: color-mix(in srgb, var(--color-orange-500) 40, var(--color-black));\n    --orange-darkest: color-mix(in srgb, var(--color-orange-500) 20, var(--color-black));\n\n    /* coral */\n    --coral-lightest: color-mix(in srgb, var(--color-coral-500) 20, var(--color-white));\n    --coral-lighter: color-mix(in srgb, var(--color-coral-500) 40, var(--color-white));\n    --coral-light: color-mix(in srgb, var(--color-coral-500) 70, var(--color-white));\n    --coral: var(--color-coral-500);\n    --coral-dark: color-mix(in srgb, var(--color-coral-500) 70, var(--color-black));\n    --coral-darker: color-mix(in srgb, var(--color-coral-500) 40, var(--color-black));\n    --coral-darkest: color-mix(in srgb, var(--color-coral-500) 20, var(--color-black));\n\n    /* red */\n    --red-lightest: color-mix(in srgb, var(--color-red-500) 20, var(--color-white));\n    --red-lighter: color-mix(in srgb, var(--color-red-500) 40, var(--color-white));\n    --red-light: color-mix(in srgb, var(--color-red-500) 70, var(--color-white));\n    --red: var(--color-red-500);\n    --red-dark: color-mix(in srgb, var(--color-red-500) 70, var(--color-black));\n    --red-darker: color-mix(in srgb, var(--color-red-500) 40, var(--color-black));\n    --red-darkest: color-mix(in srgb, var(--color-red-500) 20, var(--color-black));\n\n    /* pink */\n    --pink-lightest: color-mix(in srgb, var(--color-pink-500) 20, var(--color-white));\n    --pink-lighter: color-mix(in srgb, var(--color-pink-500) 40, var(--color-white));\n    --pink-light: color-mix(in srgb, var(--color-pink-500) 70, var(--color-white));\n    --pink: var(--color-pink-500);\n    --pink-dark: color-mix(in srgb, var(--color-pink-500) 70, var(--color-black));\n    --pink-darker: color-mix(in srgb, var(--color-pink-500) 40, var(--color-black));\n    --pink-darkest: color-mix(in srgb, var(--color-pink-500) 20, var(--color-black));\n\n    /* rose */\n    --rose-lightest: color-mix(in srgb, var(--color-rose-500) 20, var(--color-white));\n    --rose-lighter: color-mix(in srgb, var(--color-rose-500) 40, var(--color-white));\n    --rose-light: color-mix(in srgb, var(--color-rose-500) 70, var(--color-white));\n    --rose: var(--color-rose-500);\n    --rose-dark: color-mix(in srgb, var(--color-rose-500) 70, var(--color-black));\n    --rose-darker: color-mix(in srgb, var(--color-rose-500) 40, var(--color-black));\n    --rose-darkest: color-mix(in srgb, var(--color-rose-500) 20, var(--color-black));\n\n    /* purple */\n    --purple-lightest: color-mix(in srgb, var(--color-purple-500) 20, var(--color-white));\n    --purple-lighter: color-mix(in srgb, var(--color-purple-500) 40, var(--color-white));\n    --purple-light: color-mix(in srgb, var(--color-purple-500) 70, var(--color-white));\n    --purple: var(--color-purple-500);\n    --purple-dark: color-mix(in srgb, var(--color-purple-500) 70, var(--color-black));\n    --purple-darker: color-mix(in srgb, var(--color-purple-500) 40, var(--color-black));\n    --purple-darkest: color-mix(in srgb, var(--color-purple-500) 20, var(--color-black));\n\n    /* indigo */\n    --indigo-lightest: color-mix(in srgb, var(--color-indigo-500) 20, var(--color-white));\n    --indigo-lighter: color-mix(in srgb, var(--color-indigo-500) 40, var(--color-white));\n    --indigo-light: color-mix(in srgb, var(--color-indigo-500) 70, var(--color-white));\n    --indigo: var(--color-indigo-500);\n    --indigo-dark: color-mix(in srgb, var(--color-indigo-500) 70, var(--color-black));\n    --indigo-darker: color-mix(in srgb, var(--color-indigo-500) 40, var(--color-black));\n    --indigo-darkest: color-mix(in srgb, var(--color-indigo-500) 20, var(--color-black));\n\n    /* gray */\n    --gray-lightest: color-mix(in srgb, var(--color-gray-500) 20, var(--color-white));\n    --gray-lighter: color-mix(in srgb, var(--color-gray-500) 40, var(--color-white));\n    --gray-light: color-mix(in srgb, var(--color-gray-500) 70, var(--color-white));\n    --gray: var(--color-gray-500);\n    --gray-dark: color-mix(in srgb, var(--color-gray-500) 70, var(--color-black));\n    --gray-darker: color-mix(in srgb, var(--color-gray-500) 40, var(--color-black));\n    --gray-darkest: color-mix(in srgb, var(--color-gray-500) 20, var(--color-black));\n\n    /* warm-gray */\n    --warm-gray-lightest: color-mix(in srgb, var(--color-warm-gray-500) 20, var(--color-white));\n    --warm-gray-lighter: color-mix(in srgb, var(--color-warm-gray-500) 40, var(--color-white));\n    --warm-gray-light: color-mix(in srgb, var(--color-warm-gray-500) 70, var(--color-white));\n    --warm-gray: var(--color-warm-gray-500);\n    --warm-gray-dark: color-mix(in srgb, var(--color-warm-gray-500) 70, var(--color-black));\n    --warm-gray-darker: color-mix(in srgb, var(--color-warm-gray-500) 40, var(--color-black));\n    --warm-gray-darkest: color-mix(in srgb, var(--color-warm-gray-500) 20, var(--color-black));\n\n    /* cool-gray */\n    --cool-gray-lightest: color-mix(in srgb, var(--color-cool-gray-500) 20, var(--color-white));\n    --cool-gray-lighter: color-mix(in srgb, var(--color-cool-gray-500) 40, var(--color-white));\n    --cool-gray-light: color-mix(in srgb, var(--color-cool-gray-500) 70, var(--color-white));\n    --cool-gray: var(--color-cool-gray-500);\n    --cool-gray-dark: color-mix(in srgb, var(--color-cool-gray-500) 70, var(--color-black));\n    --cool-gray-darker: color-mix(in srgb, var(--color-cool-gray-500) 40, var(--color-black));\n    --cool-gray-darkest: color-mix(in srgb, var(--color-cool-gray-500) 20, var(--color-black));\n\n    /* azure */\n    --azure-lightest: color-mix(in srgb, var(--color-azure-500) 20, var(--color-white));\n    --azure-lighter: color-mix(in srgb, var(--color-azure-500) 40, var(--color-white));\n    --azure-light: color-mix(in srgb, var(--color-azure-500) 70, var(--color-white));\n    --azure: var(--color-azure-500);\n    --azure-dark: color-mix(in srgb, var(--color-azure-500) 70, var(--color-black));\n    --azure-darker: color-mix(in srgb, var(--color-azure-500) 40, var(--color-black));\n    --azure-darkest: color-mix(in srgb, var(--color-azure-500) 20, var(--color-black));\n\n    /* teal */\n    --teal-lightest: color-mix(in srgb, var(--color-teal-500) 20, var(--color-white));\n    --teal-lighter: color-mix(in srgb, var(--color-teal-500) 40, var(--color-white));\n    --teal-light: color-mix(in srgb, var(--color-teal-500) 70, var(--color-white));\n    --teal: var(--color-teal-500);\n    --teal-dark: color-mix(in srgb, var(--color-teal-500) 70, var(--color-black));\n    --teal-darker: color-mix(in srgb, var(--color-teal-500) 40, var(--color-black));\n    --teal-darkest: color-mix(in srgb, var(--color-teal-500) 20, var(--color-black));\n\n    /* emerald */\n    --emerald-lightest: color-mix(in srgb, var(--color-emerald-500) 20, var(--color-white));\n    --emerald-lighter: color-mix(in srgb, var(--color-emerald-500) 40, var(--color-white));\n    --emerald-light: color-mix(in srgb, var(--color-emerald-500) 70, var(--color-white));\n    --emerald: var(--color-emerald-500);\n    --emerald-dark: color-mix(in srgb, var(--color-emerald-500) 70, var(--color-black));\n    --emerald-darker: color-mix(in srgb, var(--color-emerald-500) 40, var(--color-black));\n    --emerald-darkest: color-mix(in srgb, var(--color-emerald-500) 20, var(--color-black));\n\n    /* olive */\n    --olive-lightest: color-mix(in srgb, var(--color-olive-500) 20, var(--color-white));\n    --olive-lighter: color-mix(in srgb, var(--color-olive-500) 40, var(--color-white));\n    --olive-light: color-mix(in srgb, var(--color-olive-500) 70, var(--color-white));\n    --olive: var(--color-olive-500);\n    --olive-dark: color-mix(in srgb, var(--color-olive-500) 70, var(--color-black));\n    --olive-darker: color-mix(in srgb, var(--color-olive-500) 40, var(--color-black));\n    --olive-darkest: color-mix(in srgb, var(--color-olive-500) 20, var(--color-black));\n\n    /* amber */\n    --amber-lightest: color-mix(in srgb, var(--color-amber-500) 20, var(--color-white));\n    --amber-lighter: color-mix(in srgb, var(--color-amber-500) 40, var(--color-white));\n    --amber-light: color-mix(in srgb, var(--color-amber-500) 70, var(--color-white));\n    --amber: var(--color-amber-500);\n    --amber-dark: color-mix(in srgb, var(--color-amber-500) 70, var(--color-black));\n    --amber-darker: color-mix(in srgb, var(--color-amber-500) 40, var(--color-black));\n    --amber-darkest: color-mix(in srgb, var(--color-amber-500) 20, var(--color-black));\n\n    /* copper */\n    --copper-lightest: color-mix(in srgb, var(--color-copper-500) 20, var(--color-white));\n    --copper-lighter: color-mix(in srgb, var(--color-copper-500) 40, var(--color-white));\n    --copper-light: color-mix(in srgb, var(--color-copper-500) 70, var(--color-white));\n    --copper: var(--color-copper-500);\n    --copper-dark: color-mix(in srgb, var(--color-copper-500) 70, var(--color-black));\n    --copper-darker: color-mix(in srgb, var(--color-copper-500) 40, var(--color-black));\n    --copper-darkest: color-mix(in srgb, var(--color-copper-500) 20, var(--color-black));\n\n    /* cherry */\n    --cherry-lightest: color-mix(in srgb, var(--color-cherry-500) 20, var(--color-white));\n    --cherry-lighter: color-mix(in srgb, var(--color-cherry-500) 40, var(--color-white));\n    --cherry-light: color-mix(in srgb, var(--color-cherry-500) 70, var(--color-white));\n    --cherry: var(--color-cherry-500);\n    --cherry-dark: color-mix(in srgb, var(--color-cherry-500) 70, var(--color-black));\n    --cherry-darker: color-mix(in srgb, var(--color-cherry-500) 40, var(--color-black));\n    --cherry-darkest: color-mix(in srgb, var(--color-cherry-500) 20, var(--color-black));\n\n    /* magenta */\n    --magenta-lightest: color-mix(in srgb, var(--color-magenta-500) 20, var(--color-white));\n    --magenta-lighter: color-mix(in srgb, var(--color-magenta-500) 40, var(--color-white));\n    --magenta-light: color-mix(in srgb, var(--color-magenta-500) 70, var(--color-white));\n    --magenta: var(--color-magenta-500);\n    --magenta-dark: color-mix(in srgb, var(--color-magenta-500) 70, var(--color-black));\n    --magenta-darker: color-mix(in srgb, var(--color-magenta-500) 40, var(--color-black));\n    --magenta-darkest: color-mix(in srgb, var(--color-magenta-500) 20, var(--color-black));\n\n    /* lavender */\n    --lavender-lightest: color-mix(in srgb, var(--color-lavender-500) 20, var(--color-white));\n    --lavender-lighter: color-mix(in srgb, var(--color-lavender-500) 40, var(--color-white));\n    --lavender-light: color-mix(in srgb, var(--color-lavender-500) 70, var(--color-white));\n    --lavender: var(--color-lavender-500);\n    --lavender-dark: color-mix(in srgb, var(--color-lavender-500) 70, var(--color-black));\n    --lavender-darker: color-mix(in srgb, var(--color-lavender-500) 40, var(--color-black));\n    --lavender-darkest: color-mix(in srgb, var(--color-lavender-500) 20, var(--color-black));\n\n    /* bronze */\n    --bronze-lightest: color-mix(in srgb, var(--color-bronze-500) 20, var(--color-white));\n    --bronze-lighter: color-mix(in srgb, var(--color-bronze-500) 40, var(--color-white));\n    --bronze-light: color-mix(in srgb, var(--color-bronze-500) 70, var(--color-white));\n    --bronze: var(--color-bronze-500);\n    --bronze-dark: color-mix(in srgb, var(--color-bronze-500) 70, var(--color-black));\n    --bronze-darker: color-mix(in srgb, var(--color-bronze-500) 40, var(--color-black));\n    --bronze-darkest: color-mix(in srgb, var(--color-bronze-500) 20, var(--color-black));\n\n    /* pearl */\n    --pearl-lightest: color-mix(in srgb, var(--color-pearl-500) 20, var(--color-white));\n    --pearl-lighter: color-mix(in srgb, var(--color-pearl-500) 40, var(--color-white));\n    --pearl-light: color-mix(in srgb, var(--color-pearl-500) 70, var(--color-white));\n    --pearl: var(--color-pearl-500);\n    --pearl-dark: color-mix(in srgb, var(--color-pearl-500) 70, var(--color-black));\n    --pearl-darker: color-mix(in srgb, var(--color-pearl-500) 40, var(--color-black));\n    --pearl-darkest: color-mix(in srgb, var(--color-pearl-500) 20, var(--color-black));\n\n    /* champagne */\n    --champagne-lightest: color-mix(in srgb, var(--color-champagne-500) 20, var(--color-white));\n    --champagne-lighter: color-mix(in srgb, var(--color-champagne-500) 40, var(--color-white));\n    --champagne-light: color-mix(in srgb, var(--color-champagne-500) 70, var(--color-white));\n    --champagne: var(--color-champagne-500);\n    --champagne-dark: color-mix(in srgb, var(--color-champagne-500) 70, var(--color-black));\n    --champagne-darker: color-mix(in srgb, var(--color-champagne-500) 40, var(--color-black));\n    --champagne-darkest: color-mix(in srgb, var(--color-champagne-500) 20, var(--color-black));\n\n    /* taupe */\n    --taupe-lightest: color-mix(in srgb, var(--color-taupe-500) 20, var(--color-white));\n    --taupe-lighter: color-mix(in srgb, var(--color-taupe-500) 40, var(--color-white));\n    --taupe-light: color-mix(in srgb, var(--color-taupe-500) 70, var(--color-white));\n    --taupe: var(--color-taupe-500);\n    --taupe-dark: color-mix(in srgb, var(--color-taupe-500) 70, var(--color-black));\n    --taupe-darker: color-mix(in srgb, var(--color-taupe-500) 40, var(--color-black));\n    --taupe-darkest: color-mix(in srgb, var(--color-taupe-500) 20, var(--color-black));\n\n    /* beige */\n    --beige-lightest: color-mix(in srgb, var(--color-beige-500) 20, var(--color-white));\n    --beige-lighter: color-mix(in srgb, var(--color-beige-500) 40, var(--color-white));\n    --beige-light: color-mix(in srgb, var(--color-beige-500) 70, var(--color-white));\n    --beige: var(--color-beige-500);\n    --beige-dark: color-mix(in srgb, var(--color-beige-500) 70, var(--color-black));\n    --beige-darker: color-mix(in srgb, var(--color-beige-500) 40, var(--color-black));\n    --beige-darkest: color-mix(in srgb, var(--color-beige-500) 20, var(--color-black));\n\n    /* khaki */\n    --khaki-lightest: color-mix(in srgb, var(--color-khaki-500) 20, var(--color-white));\n    --khaki-lighter: color-mix(in srgb, var(--color-khaki-500) 40, var(--color-white));\n    --khaki-light: color-mix(in srgb, var(--color-khaki-500) 70, var(--color-white));\n    --khaki: var(--color-khaki-500);\n    --khaki-dark: color-mix(in srgb, var(--color-khaki-500) 70, var(--color-black));\n    --khaki-darker: color-mix(in srgb, var(--color-khaki-500) 40, var(--color-black));\n    --khaki-darkest: color-mix(in srgb, var(--color-khaki-500) 20, var(--color-black));\n\n    /* terracotta */\n    --terracotta-lightest: color-mix(in srgb, var(--color-terracotta-500) 20, var(--color-white));\n    --terracotta-lighter: color-mix(in srgb, var(--color-terracotta-500) 40, var(--color-white));\n    --terracotta-light: color-mix(in srgb, var(--color-terracotta-500) 70, var(--color-white));\n    --terracotta: var(--color-terracotta-500);\n    --terracotta-dark: color-mix(in srgb, var(--color-terracotta-500) 70, var(--color-black));\n    --terracotta-darker: color-mix(in srgb, var(--color-terracotta-500) 40, var(--color-black));\n    --terracotta-darkest: color-mix(in srgb, var(--color-terracotta-500) 20, var(--color-black));\n\n    /* burgundy */\n    --burgundy-lightest: color-mix(in srgb, var(--color-burgundy-500) 20, var(--color-white));\n    --burgundy-lighter: color-mix(in srgb, var(--color-burgundy-500) 40, var(--color-white));\n    --burgundy-light: color-mix(in srgb, var(--color-burgundy-500) 70, var(--color-white));\n    --burgundy: var(--color-burgundy-500);\n    --burgundy-dark: color-mix(in srgb, var(--color-burgundy-500) 70, var(--color-black));\n    --burgundy-darker: color-mix(in srgb, var(--color-burgundy-500) 40, var(--color-black));\n    --burgundy-darkest: color-mix(in srgb, var(--color-burgundy-500) 20, var(--color-black));\n\n    /* silver */\n    --silver-lightest: color-mix(in srgb, var(--color-silver-500) 20, var(--color-white));\n    --silver-lighter: color-mix(in srgb, var(--color-silver-500) 40, var(--color-white));\n    --silver-light: color-mix(in srgb, var(--color-silver-500) 70, var(--color-white));\n    --silver: var(--color-silver-500);\n    --silver-dark: color-mix(in srgb, var(--color-silver-500) 70, var(--color-black));\n    --silver-darker: color-mix(in srgb, var(--color-silver-500) 40, var(--color-black));\n    --silver-darkest: color-mix(in srgb, var(--color-silver-500) 20, var(--color-black));\n\n    /* platinum */\n    --platinum-lightest: color-mix(in srgb, var(--color-platinum-500) 20, var(--color-white));\n    --platinum-lighter: color-mix(in srgb, var(--color-platinum-500) 40, var(--color-white));\n    --platinum-light: color-mix(in srgb, var(--color-platinum-500) 70, var(--color-white));\n    --platinum: var(--color-platinum-500);\n    --platinum-dark: color-mix(in srgb, var(--color-platinum-500) 70, var(--color-black));\n    --platinum-darker: color-mix(in srgb, var(--color-platinum-500) 40, var(--color-black));\n    --platinum-darkest: color-mix(in srgb, var(--color-platinum-500) 20, var(--color-black));\n\n    /* graphite */\n    --graphite-lightest: color-mix(in srgb, var(--color-graphite-500) 20, var(--color-white));\n    --graphite-lighter: color-mix(in srgb, var(--color-graphite-500) 40, var(--color-white));\n    --graphite-light: color-mix(in srgb, var(--color-graphite-500) 70, var(--color-white));\n    --graphite: var(--color-graphite-500);\n    --graphite-dark: color-mix(in srgb, var(--color-graphite-500) 70, var(--color-black));\n    --graphite-darker: color-mix(in srgb, var(--color-graphite-500) 40, var(--color-black));\n    --graphite-darkest: color-mix(in srgb, var(--color-graphite-500) 20, var(--color-black));\n\n    /* moss */\n    --moss-lightest: color-mix(in srgb, var(--color-moss-500) 20, var(--color-white));\n    --moss-lighter: color-mix(in srgb, var(--color-moss-500) 40, var(--color-white));\n    --moss-light: color-mix(in srgb, var(--color-moss-500) 70, var(--color-white));\n    --moss: var(--color-moss-500);\n    --moss-dark: color-mix(in srgb, var(--color-moss-500) 70, var(--color-black));\n    --moss-darker: color-mix(in srgb, var(--color-moss-500) 40, var(--color-black));\n    --moss-darkest: color-mix(in srgb, var(--color-moss-500) 20, var(--color-black));\n\n    /* jade */\n    --jade-lightest: color-mix(in srgb, var(--color-jade-500) 20, var(--color-white));\n    --jade-lighter: color-mix(in srgb, var(--color-jade-500) 40, var(--color-white));\n    --jade-light: color-mix(in srgb, var(--color-jade-500) 70, var(--color-white));\n    --jade: var(--color-jade-500);\n    --jade-dark: color-mix(in srgb, var(--color-jade-500) 70, var(--color-black));\n    --jade-darker: color-mix(in srgb, var(--color-jade-500) 40, var(--color-black));\n    --jade-darkest: color-mix(in srgb, var(--color-jade-500) 20, var(--color-black));\n\n    /* sapphire */\n    --sapphire-lightest: color-mix(in srgb, var(--color-sapphire-500) 20, var(--color-white));\n    --sapphire-lighter: color-mix(in srgb, var(--color-sapphire-500) 40, var(--color-white));\n    --sapphire-light: color-mix(in srgb, var(--color-sapphire-500) 70, var(--color-white));\n    --sapphire: var(--color-sapphire-500);\n    --sapphire-dark: color-mix(in srgb, var(--color-sapphire-500) 70, var(--color-black));\n    --sapphire-darker: color-mix(in srgb, var(--color-sapphire-500) 40, var(--color-black));\n    --sapphire-darkest: color-mix(in srgb, var(--color-sapphire-500) 20, var(--color-black));\n\n    /* ruby */\n    --ruby-lightest: color-mix(in srgb, var(--color-ruby-500) 20, var(--color-white));\n    --ruby-lighter: color-mix(in srgb, var(--color-ruby-500) 40, var(--color-white));\n    --ruby-light: color-mix(in srgb, var(--color-ruby-500) 70, var(--color-white));\n    --ruby: var(--color-ruby-500);\n    --ruby-dark: color-mix(in srgb, var(--color-ruby-500) 70, var(--color-black));\n    --ruby-darker: color-mix(in srgb, var(--color-ruby-500) 40, var(--color-black));\n    --ruby-darkest: color-mix(in srgb, var(--color-ruby-500) 20, var(--color-black));\n\n    /* amethyst */\n    --amethyst-lightest: color-mix(in srgb, var(--color-amethyst-500) 20, var(--color-white));\n    --amethyst-lighter: color-mix(in srgb, var(--color-amethyst-500) 40, var(--color-white));\n    --amethyst-light: color-mix(in srgb, var(--color-amethyst-500) 70, var(--color-white));\n    --amethyst: var(--color-amethyst-500);\n    --amethyst-dark: color-mix(in srgb, var(--color-amethyst-500) 70, var(--color-black));\n    --amethyst-darker: color-mix(in srgb, var(--color-amethyst-500) 40, var(--color-black));\n    --amethyst-darkest: color-mix(in srgb, var(--color-amethyst-500) 20, var(--color-black));\n\n    /* topaz */\n    --topaz-lightest: color-mix(in srgb, var(--color-topaz-500) 20, var(--color-white));\n    --topaz-lighter: color-mix(in srgb, var(--color-topaz-500) 40, var(--color-white));\n    --topaz-light: color-mix(in srgb, var(--color-topaz-500) 70, var(--color-white));\n    --topaz: var(--color-topaz-500);\n    --topaz-dark: color-mix(in srgb, var(--color-topaz-500) 70, var(--color-black));\n    --topaz-darker: color-mix(in srgb, var(--color-topaz-500) 40, var(--color-black));\n    --topaz-darkest: color-mix(in srgb, var(--color-topaz-500) 20, var(--color-black));\n\n    /* citrine */\n    --citrine-lightest: color-mix(in srgb, var(--color-citrine-500) 20, var(--color-white));\n    --citrine-lighter: color-mix(in srgb, var(--color-citrine-500) 40, var(--color-white));\n    --citrine-light: color-mix(in srgb, var(--color-citrine-500) 70, var(--color-white));\n    --citrine: var(--color-citrine-500);\n    --citrine-dark: color-mix(in srgb, var(--color-citrine-500) 70, var(--color-black));\n    --citrine-darker: color-mix(in srgb, var(--color-citrine-500) 40, var(--color-black));\n    --citrine-darkest: color-mix(in srgb, var(--color-citrine-500) 20, var(--color-black));\n\n    /* peridot */\n    --peridot-lightest: color-mix(in srgb, var(--color-peridot-500) 20, var(--color-white));\n    --peridot-lighter: color-mix(in srgb, var(--color-peridot-500) 40, var(--color-white));\n    --peridot-light: color-mix(in srgb, var(--color-peridot-500) 70, var(--color-white));\n    --peridot: var(--color-peridot-500);\n    --peridot-dark: color-mix(in srgb, var(--color-peridot-500) 70, var(--color-black));\n    --peridot-darker: color-mix(in srgb, var(--color-peridot-500) 40, var(--color-black));\n    --peridot-darkest: color-mix(in srgb, var(--color-peridot-500) 20, var(--color-black));\n\n    /* opal */\n    --opal-lightest: color-mix(in srgb, var(--color-opal-500) 20, var(--color-white));\n    --opal-lighter: color-mix(in srgb, var(--color-opal-500) 40, var(--color-white));\n    --opal-light: color-mix(in srgb, var(--color-opal-500) 70, var(--color-white));\n    --opal: var(--color-opal-500);\n    --opal-dark: color-mix(in srgb, var(--color-opal-500) 70, var(--color-black));\n    --opal-darker: color-mix(in srgb, var(--color-opal-500) 40, var(--color-black));\n    --opal-darkest: color-mix(in srgb, var(--color-opal-500) 20, var(--color-black));\n\n    /* garnet */\n    --garnet-lightest: color-mix(in srgb, var(--color-garnet-500) 20, var(--color-white));\n    --garnet-lighter: color-mix(in srgb, var(--color-garnet-500) 40, var(--color-white));\n    --garnet-light: color-mix(in srgb, var(--color-garnet-500) 70, var(--color-white));\n    --garnet: var(--color-garnet-500);\n    --garnet-dark: color-mix(in srgb, var(--color-garnet-500) 70, var(--color-black));\n    --garnet-darker: color-mix(in srgb, var(--color-garnet-500) 40, var(--color-black));\n    --garnet-darkest: color-mix(in srgb, var(--color-garnet-500) 20, var(--color-black));\n\n    /* onyx */\n    --onyx-lightest: color-mix(in srgb, var(--color-onyx-500) 20, var(--color-white));\n    --onyx-lighter: color-mix(in srgb, var(--color-onyx-500) 40, var(--color-white));\n    --onyx-light: color-mix(in srgb, var(--color-onyx-500) 70, var(--color-white));\n    --onyx: var(--color-onyx-500);\n    --onyx-dark: color-mix(in srgb, var(--color-onyx-500) 70, var(--color-black));\n    --onyx-darker: color-mix(in srgb, var(--color-onyx-500) 40, var(--color-black));\n    --onyx-darkest: color-mix(in srgb, var(--color-onyx-500) 20, var(--color-black));\n\n    /* malachite */\n    --malachite-lightest: color-mix(in srgb, var(--color-malachite-500) 20, var(--color-white));\n    --malachite-lighter: color-mix(in srgb, var(--color-malachite-500) 40, var(--color-white));\n    --malachite-light: color-mix(in srgb, var(--color-malachite-500) 70, var(--color-white));\n    --malachite: var(--color-malachite-500);\n    --malachite-dark: color-mix(in srgb, var(--color-malachite-500) 70, var(--color-black));\n    --malachite-darker: color-mix(in srgb, var(--color-malachite-500) 40, var(--color-black));\n    --malachite-darkest: color-mix(in srgb, var(--color-malachite-500) 20, var(--color-black));\n\n    /* lapis */\n    --lapis-lightest: color-mix(in srgb, var(--color-lapis-500) 20, var(--color-white));\n    --lapis-lighter: color-mix(in srgb, var(--color-lapis-500) 40, var(--color-white));\n    --lapis-light: color-mix(in srgb, var(--color-lapis-500) 70, var(--color-white));\n    --lapis: var(--color-lapis-500);\n    --lapis-dark: color-mix(in srgb, var(--color-lapis-500) 70, var(--color-black));\n    --lapis-darker: color-mix(in srgb, var(--color-lapis-500) 40, var(--color-black));\n    --lapis-darkest: color-mix(in srgb, var(--color-lapis-500) 20, var(--color-black));\n\n    /* turquoise */\n    --turquoise-lightest: color-mix(in srgb, var(--color-turquoise-500) 20, var(--color-white));\n    --turquoise-lighter: color-mix(in srgb, var(--color-turquoise-500) 40, var(--color-white));\n    --turquoise-light: color-mix(in srgb, var(--color-turquoise-500) 70, var(--color-white));\n    --turquoise: var(--color-turquoise-500);\n    --turquoise-dark: color-mix(in srgb, var(--color-turquoise-500) 70, var(--color-black));\n    --turquoise-darker: color-mix(in srgb, var(--color-turquoise-500) 40, var(--color-black));\n    --turquoise-darkest: color-mix(in srgb, var(--color-turquoise-500) 20, var(--color-black));\n\n    /* coral */\n    --coral-lightest: color-mix(in srgb, var(--color-coral-500) 20, var(--color-white));\n    --coral-lighter: color-mix(in srgb, var(--color-coral-500) 40, var(--color-white));\n    --coral-light: color-mix(in srgb, var(--color-coral-500) 70, var(--color-white));\n    --coral: var(--color-coral-500);\n    --coral-dark: color-mix(in srgb, var(--color-coral-500) 70, var(--color-black));\n    --coral-darker: color-mix(in srgb, var(--color-coral-500) 40, var(--color-black));\n    --coral-darkest: color-mix(in srgb, var(--color-coral-500) 20, var(--color-black));\n\n    /* mother-of-pearl */\n    --mother-of-pearl-lightest: color-mix(in srgb, var(--color-mother-of-pearl-500) 20, var(--color-white));\n    --mother-of-pearl-lighter: color-mix(in srgb, var(--color-mother-of-pearl-500) 40, var(--color-white));\n    --mother-of-pearl-light: color-mix(in srgb, var(--color-mother-of-pearl-500) 70, var(--color-white));\n    --mother-of-pearl: var(--color-mother-of-pearl-500);\n    --mother-of-pearl-dark: color-mix(in srgb, var(--color-mother-of-pearl-500) 70, var(--color-black));\n    --mother-of-pearl-darker: color-mix(in srgb, var(--color-mother-of-pearl-500) 40, var(--color-black));\n    --mother-of-pearl-darkest: color-mix(in srgb, var(--color-mother-of-pearl-500) 20, var(--color-black));\n\n    /* obsidian */\n    --obsidian-lightest: color-mix(in srgb, var(--color-obsidian-500) 20, var(--color-white));\n    --obsidian-lighter: color-mix(in srgb, var(--color-obsidian-500) 40, var(--color-white));\n    --obsidian-light: color-mix(in srgb, var(--color-obsidian-500) 70, var(--color-white));\n    --obsidian: var(--color-obsidian-500);\n    --obsidian-dark: color-mix(in srgb, var(--color-obsidian-500) 70, var(--color-black));\n    --obsidian-darker: color-mix(in srgb, var(--color-obsidian-500) 40, var(--color-black));\n    --obsidian-darkest: color-mix(in srgb, var(--color-obsidian-500) 20, var(--color-black));\n\n    /* jadeite */\n    --jadeite-lightest: color-mix(in srgb, var(--color-jadeite-500) 20, var(--color-white));\n    --jadeite-lighter: color-mix(in srgb, var(--color-jadeite-500) 40, var(--color-white));\n    --jadeite-light: color-mix(in srgb, var(--color-jadeite-500) 70, var(--color-white));\n    --jadeite: var(--color-jadeite-500);\n    --jadeite-dark: color-mix(in srgb, var(--color-jadeite-500) 70, var(--color-black));\n    --jadeite-darker: color-mix(in srgb, var(--color-jadeite-500) 40, var(--color-black));\n    --jadeite-darkest: color-mix(in srgb, var(--color-jadeite-500) 20, var(--color-black));\n\n    /* emerald */\n    --emerald-lightest: color-mix(in srgb, var(--color-emerald-500) 20, var(--color-white));\n    --emerald-lighter: color-mix(in srgb, var(--color-emerald-500) 40, var(--color-white));\n    --emerald-light: color-mix(in srgb, var(--color-emerald-500) 70, var(--color-white));\n    --emerald: var(--color-emerald-500);\n    --emerald-dark: color-mix(in srgb, var(--color-emerald-500) 70, var(--color-black));\n    --emerald-darker: color-mix(in srgb, var(--color-emerald-500) 40, var(--color-black));\n    --emerald-darkest: color-mix(in srgb, var(--color-emerald-500) 20, var(--color-black));\n\n    /* aquamarine */\n    --aquamarine-lightest: color-mix(in srgb, var(--color-aquamarine-500) 20, var(--color-white));\n    --aquamarine-lighter: color-mix(in srgb, var(--color-aquamarine-500) 40, var(--color-white));\n    --aquamarine-light: color-mix(in srgb, var(--color-aquamarine-500) 70, var(--color-white));\n    --aquamarine: var(--color-aquamarine-500);\n    --aquamarine-dark: color-mix(in srgb, var(--color-aquamarine-500) 70, var(--color-black));\n    --aquamarine-darker: color-mix(in srgb, var(--color-aquamarine-500) 40, var(--color-black));\n    --aquamarine-darkest: color-mix(in srgb, var(--color-aquamarine-500) 20, var(--color-black));\n\n    /* topaz */\n    --topaz-lightest: color-mix(in srgb, var(--color-topaz-500) 20, var(--color-white));\n    --topaz-lighter: color-mix(in srgb, var(--color-topaz-500) 40, var(--color-white));\n    --topaz-light: color-mix(in srgb, var(--color-topaz-500) 70, var(--color-white));\n    --topaz: var(--color-topaz-500);\n    --topaz-dark: color-mix(in srgb, var(--color-topaz-500) 70, var(--color-black));\n    --topaz-darker: color-mix(in srgb, var(--color-topaz-500) 40, var(--color-black));\n    --topaz-darkest: color-mix(in srgb, var(--color-topaz-500) 20, var(--color-black));\n\n    /* citrine */\n    --citrine-lightest: color-mix(in srgb, var(--color-citrine-500) 20, var(--color-white));\n    --citrine-lighter: color-mix(in srgb, var(--color-citrine-500) 40, var(--color-white));\n    --citrine-light: color-mix(in srgb, var(--color-citrine-500) 70, var(--color-white));\n    --citrine: var(--color-citrine-500);\n    --citrine-dark: color-mix(in srgb, var(--color-citrine-500) 70, var(--color-black));\n    --citrine-darker: color-mix(in srgb, var(--color-citrine-500) 40, var(--color-black));\n    --citrine-darkest: color-mix(in srgb, var(--color-citrine-500) 20, var(--color-black));\n\n    /* peridot */\n    --peridot-lightest: color-mix(in srgb, var(--color-peridot-500) 20, var(--color-white));\n    --peridot-lighter: color-mix(in srgb, var(--color-peridot-500) 40, var(--color-white));\n    --peridot-light: color-mix(in srgb, var(--color-peridot-500) 70, var(--color-white));\n    --peridot: var(--color-peridot-500);\n    --peridot-dark: color-mix(in srgb, var(--color-peridot-500) 70, var(--color-black));\n    --peridot-darker: color-mix(in srgb, var(--color-peridot-500) 40, var(--color-black));\n    --peridot-darkest: color-mix(in srgb, var(--color-peridot-500) 20, var(--color-black));\n\n    /* opal */\n    --opal-lightest: color-mix(in srgb, var(--color-opal-500) 20, var(--color-white));\n    --opal-lighter: color-mix(in srgb, var(--color-opal-500) 40, var(--color-white));\n    --opal-light: color-mix(in srgb, var(--color-opal-500) 70, var(--color-white));\n    --opal: var(--color-opal-500);\n    --opal-dark: color-mix(in srgb, var(--color-opal-500) 70, var(--color-black));\n    --opal-darker: color-mix(in srgb, var(--color-opal-500) 40, var(--color-black));\n    --opal-darkest: color-mix(in srgb, var(--color-opal-500) 20, var(--color-black));\n\n    /* moonstone */\n    --moonstone-lightest: color-mix(in srgb, var(--color-moonstone-500) 20, var(--color-white));\n    --moonstone-lighter: color-mix(in srgb, var(--color-moonstone-500) 40, var(--color-white));\n    --moonstone-light: color-mix(in srgb, var(--color-moonstone-500) 70, var(--color-white));\n    --moonstone: var(--color-moonstone-500);\n    --moonstone-dark: color-mix(in srgb, var(--color-moonstone-500) 70, var(--color-black));\n    --moonstone-darker: color-mix(in srgb, var(--color-moonstone-500) 40, var(--color-black));\n    --moonstone-darkest: color-mix(in srgb, var(--color-moonstone-500) 20, var(--color-black));\n\n    /* labradorite */\n    --labradorite-lightest: color-mix(in srgb, var(--color-labradorite-500) 20, var(--color-white));\n    --labradorite-lighter: color-mix(in srgb, var(--color-labradorite-500) 40, var(--color-white));\n    --labradorite-light: color-mix(in srgb, var(--color-labradorite-500) 70, var(--color-white));\n    --labradorite: var(--color-labradorite-500);\n    --labradorite-dark: color-mix(in srgb, var(--color-labradorite-500) 70, var(--color-black));\n    --labradorite-darker: color-mix(in srgb, var(--color-labradorite-500) 40, var(--color-black));\n    --labradorite-darkest: color-mix(in srgb, var(--color-labradorite-500) 20, var(--color-black));\n\n    /* fluorite */\n    --fluorite-lightest: color-mix(in srgb, var(--color-fluorite-500) 20, var(--color-white));\n    --fluorite-lighter: color-mix(in srgb, var(--color-fluorite-500) 40, var(--color-white));\n    --fluorite-light: color-mix(in srgb, var(--color-fluorite-500) 70, var(--color-white));\n    --fluorite: var(--color-fluorite-500);\n    --fluorite-dark: color-mix(in srgb, var(--color-fluorite-500) 70, var(--color-black));\n    --fluorite-darker: color-mix(in srgb, var(--color-fluorite-500) 40, var(--color-black));\n    --fluorite-darkest: color-mix(in srgb, var(--color-fluorite-500) 20, var(--color-black));\n\n    /* pastel-pink */\n    --pastel-pink-lightest: color-mix(in srgb, var(--color-pastel-pink-500) 20, var(--color-white));\n    --pastel-pink-lighter: color-mix(in srgb, var(--color-pastel-pink-500) 40, var(--color-white));\n    --pastel-pink-light: color-mix(in srgb, var(--color-pastel-pink-500) 70, var(--color-white));\n    --pastel-pink: var(--color-pastel-pink-500);\n    --pastel-pink-dark: color-mix(in srgb, var(--color-pastel-pink-500) 70, var(--color-black));\n    --pastel-pink-darker: color-mix(in srgb, var(--color-pastel-pink-500) 40, var(--color-black));\n    --pastel-pink-darkest: color-mix(in srgb, var(--color-pastel-pink-500) 20, var(--color-black));\n\n    /* pastel-blue */\n    --pastel-blue-lightest: color-mix(in srgb, var(--color-pastel-blue-500) 20, var(--color-white));\n    --pastel-blue-lighter: color-mix(in srgb, var(--color-pastel-blue-500) 40, var(--color-white));\n    --pastel-blue-light: color-mix(in srgb, var(--color-pastel-blue-500) 70, var(--color-white));\n    --pastel-blue: var(--color-pastel-blue-500);\n    --pastel-blue-dark: color-mix(in srgb, var(--color-pastel-blue-500) 70, var(--color-black));\n    --pastel-blue-darker: color-mix(in srgb, var(--color-pastel-blue-500) 40, var(--color-black));\n    --pastel-blue-darkest: color-mix(in srgb, var(--color-pastel-blue-500) 20, var(--color-black));\n\n    /* pastel-green */\n    --pastel-green-lightest: color-mix(in srgb, var(--color-pastel-green-500) 20, var(--color-white));\n    --pastel-green-lighter: color-mix(in srgb, var(--color-pastel-green-500) 40, var(--color-white));\n    --pastel-green-light: color-mix(in srgb, var(--color-pastel-green-500) 70, var(--color-white));\n    --pastel-green: var(--color-pastel-green-500);\n    --pastel-green-dark: color-mix(in srgb, var(--color-pastel-green-500) 70, var(--color-black));\n    --pastel-green-darker: color-mix(in srgb, var(--color-pastel-green-500) 40, var(--color-black));\n    --pastel-green-darkest: color-mix(in srgb, var(--color-pastel-green-500) 20, var(--color-black));\n\n    /* pastel-yellow */\n    --pastel-yellow-lightest: color-mix(in srgb, var(--color-pastel-yellow-500) 20, var(--color-white));\n    --pastel-yellow-lighter: color-mix(in srgb, var(--color-pastel-yellow-500) 40, var(--color-white));\n    --pastel-yellow-light: color-mix(in srgb, var(--color-pastel-yellow-500) 70, var(--color-white));\n    --pastel-yellow: var(--color-pastel-yellow-500);\n    --pastel-yellow-dark: color-mix(in srgb, var(--color-pastel-yellow-500) 70, var(--color-black));\n    --pastel-yellow-darker: color-mix(in srgb, var(--color-pastel-yellow-500) 40, var(--color-black));\n    --pastel-yellow-darkest: color-mix(in srgb, var(--color-pastel-yellow-500) 20, var(--color-black));\n\n    /* pastel-purple */\n    --pastel-purple-lightest: color-mix(in srgb, var(--color-pastel-purple-500) 20, var(--color-white));\n    --pastel-purple-lighter: color-mix(in srgb, var(--color-pastel-purple-500) 40, var(--color-white));\n    --pastel-purple-light: color-mix(in srgb, var(--color-pastel-purple-500) 70, var(--color-white));\n    --pastel-purple: var(--color-pastel-purple-500);\n    --pastel-purple-dark: color-mix(in srgb, var(--color-pastel-purple-500) 70, var(--color-black));\n    --pastel-purple-darker: color-mix(in srgb, var(--color-pastel-purple-500) 40, var(--color-black));\n    --pastel-purple-darkest: color-mix(in srgb, var(--color-pastel-purple-500) 20, var(--color-black));\n\n    /* neon-pink */\n    --neon-pink-lightest: color-mix(in srgb, var(--color-neon-pink-500) 20, var(--color-white));\n    --neon-pink-lighter: color-mix(in srgb, var(--color-neon-pink-500) 40, var(--color-white));\n    --neon-pink-light: color-mix(in srgb, var(--color-neon-pink-500) 70, var(--color-white));\n    --neon-pink: var(--color-neon-pink-500);\n    --neon-pink-dark: color-mix(in srgb, var(--color-neon-pink-500) 70, var(--color-black));\n    --neon-pink-darker: color-mix(in srgb, var(--color-neon-pink-500) 40, var(--color-black));\n    --neon-pink-darkest: color-mix(in srgb, var(--color-neon-pink-500) 20, var(--color-black));\n\n    /* neon-blue */\n    --neon-blue-lightest: color-mix(in srgb, var(--color-neon-blue-500) 20, var(--color-white));\n    --neon-blue-lighter: color-mix(in srgb, var(--color-neon-blue-500) 40, var(--color-white));\n    --neon-blue-light: color-mix(in srgb, var(--color-neon-blue-500) 70, var(--color-white));\n    --neon-blue: var(--color-neon-blue-500);\n    --neon-blue-dark: color-mix(in srgb, var(--color-neon-blue-500) 70, var(--color-black));\n    --neon-blue-darker: color-mix(in srgb, var(--color-neon-blue-500) 40, var(--color-black));\n    --neon-blue-darkest: color-mix(in srgb, var(--color-neon-blue-500) 20, var(--color-black));\n\n    /* neon-green */\n    --neon-green-lightest: color-mix(in srgb, var(--color-neon-green-500) 20, var(--color-white));\n    --neon-green-lighter: color-mix(in srgb, var(--color-neon-green-500) 40, var(--color-white));\n    --neon-green-light: color-mix(in srgb, var(--color-neon-green-500) 70, var(--color-white));\n    --neon-green: var(--color-neon-green-500);\n    --neon-green-dark: color-mix(in srgb, var(--color-neon-green-500) 70, var(--color-black));\n    --neon-green-darker: color-mix(in srgb, var(--color-neon-green-500) 40, var(--color-black));\n    --neon-green-darkest: color-mix(in srgb, var(--color-neon-green-500) 20, var(--color-black));\n\n    /* neon-yellow */\n    --neon-yellow-lightest: color-mix(in srgb, var(--color-neon-yellow-500) 20, var(--color-white));\n    --neon-yellow-lighter: color-mix(in srgb, var(--color-neon-yellow-500) 40, var(--color-white));\n    --neon-yellow-light: color-mix(in srgb, var(--color-neon-yellow-500) 70, var(--color-white));\n    --neon-yellow: var(--color-neon-yellow-500);\n    --neon-yellow-dark: color-mix(in srgb, var(--color-neon-yellow-500) 70, var(--color-black));\n    --neon-yellow-darker: color-mix(in srgb, var(--color-neon-yellow-500) 40, var(--color-black));\n    --neon-yellow-darkest: color-mix(in srgb, var(--color-neon-yellow-500) 20, var(--color-black));\n\n    /* neon-orange */\n    --neon-orange-lightest: color-mix(in srgb, var(--color-neon-orange-500) 20, var(--color-white));\n    --neon-orange-lighter: color-mix(in srgb, var(--color-neon-orange-500) 40, var(--color-white));\n    --neon-orange-light: color-mix(in srgb, var(--color-neon-orange-500) 70, var(--color-white));\n    --neon-orange: var(--color-neon-orange-500);\n    --neon-orange-dark: color-mix(in srgb, var(--color-neon-orange-500) 70, var(--color-black));\n    --neon-orange-darker: color-mix(in srgb, var(--color-neon-orange-500) 40, var(--color-black));\n    --neon-orange-darkest: color-mix(in srgb, var(--color-neon-orange-500) 20, var(--color-black));\n\n    /* neon-purple */\n    --neon-purple-lightest: color-mix(in srgb, var(--color-neon-purple-500) 20, var(--color-white));\n    --neon-purple-lighter: color-mix(in srgb, var(--color-neon-purple-500) 40, var(--color-white));\n    --neon-purple-light: color-mix(in srgb, var(--color-neon-purple-500) 70, var(--color-white));\n    --neon-purple: var(--color-neon-purple-500);\n    --neon-purple-dark: color-mix(in srgb, var(--color-neon-purple-500) 70, var(--color-black));\n    --neon-purple-darker: color-mix(in srgb, var(--color-neon-purple-500) 40, var(--color-black));\n    --neon-purple-darkest: color-mix(in srgb, var(--color-neon-purple-500) 20, var(--color-black));\n\n  }\n}","/**\n * Themes Index\n * \n * Main theme system entry point. Includes only base themes and modes.\n * Theme variants must be loaded separately via CSS import or loadThemeVariant().\n * \n * Layer Structure:\n * - tokens: Base design tokens (@property definitions)\n * - themes.aliases: Semantic component aliases\n * - themes.mode: Light/dark mode definitions\n * - themes.transitions: Theme transition utilities\n */\n\n@layer tokens, themes.aliases, themes.mode, themes.transitions;\n\n/* Import base design tokens */\n@import url(\"../tokens/index.css\");\n\n/* Import semantic aliases */\n@import url(\"./aliases.css\");\n\n/* Import light/dark modes */\n@import url(\"./light-mode.css\");\n@import url(\"./dark-mode.css\");\n\n/* Import theme transitions */\n@import url(\"./theme-transitions.css\"); ","/*\n * Accessibility System\n *\n * Hauptdatei für das Accessibility-System der UI-Bibliothek.\n * Importiert und organisiert alle Accessibility-Module.\n */\n\n/* \n * Accessibility-Modul-Struktur:\n * \n * Diese Datei importiert alle Accessibility-bezogenen CSS-Module\n * und stellt sicher, dass sie in der richtigen Reihenfolge geladen werden.\n */\n\n/* Import der Accessibility-Module */\n@import url('./keyboard.css') layer(accessibility);\n@import url('./screenreader.css') layer(accessibility);\n@import url('./contrast.css') layer(accessibility);\n@import url('./aria.css') layer(accessibility);\n\n/* Reduzierte Bewegung (Reduced Motion) für Benutzer, die weniger Animation bevorzugen */\n@layer accessibility {\n  /* Wenn der Benutzer reduzierte Bewegung im System eingestellt hat */\n  @media (prefers-reduced-motion: reduce) {\n    :root {\n      /* Alle Animationen deaktivieren oder verlangsamen */\n      --transition-duration-fast: 0.01ms;\n      --transition-duration-normal: 0.01ms;\n      --transition-duration-slow: 0.01ms;\n    }\n    \n    /* Alle Animationen deaktivieren */\n    *, *::before, *::after {\n      animation-duration: 0.01ms !important;\n      animation-iteration-count: 1 !important;\n      scroll-behavior: auto !important;\n      transition-duration: 0.01ms !important;\n    }\n  }\n  \n  /* Klasse für explizit reduzierte Bewegung */\n  .reduced-motion {\n    /* Alle Animationen deaktivieren oder verlangsamen */\n    --transition-duration-fast: 0.01ms;\n    --transition-duration-normal: 0.01ms;\n    --transition-duration-slow: 0.01ms;\n    \n    & *, & *::before, & *::after {\n      animation-duration: 0.01ms !important;\n      animation-iteration-count: 1 !important;\n      scroll-behavior: auto !important;\n      transition-duration: 0.01ms !important;\n    }\n  }\n  \n  /* Basis-Einstellungen für Fokussierbarkeit */\n  [tabindex=\"-1\"] {\n    outline: none;\n  }\n  \n  /* Visuelle Hinweise für Interaktivität */\n  button, \n  [role=\"button\"], \n  input, \n  select, \n  textarea, \n  a {\n    cursor: pointer;\n  }\n  \n  [disabled] {\n    cursor: not-allowed !important;\n  }\n  \n  /* [aria-disabled=\"true\"] bereits in screenreader.css definiert */\n  \n  /* Globale Einstellungen für Tap-Targets */\n  a, button, [role=\"button\"], [type=\"button\"], [type=\"submit\"], [type=\"reset\"] {\n    min-height: 4%var(--spacing-1); /* Mindesthöhe für Touch-Targets */\n    min-width: 4%var(--spacing-1);  /* Mindestbreite für Touch-Targets */\n  }\n} ","/**\n * Logische CSS-Eigenschaften für Internationalisierung\n * \n * Diese Datei implementiert logische CSS-Eigenschaften, die eine richtungsunabhängige\n * Gestaltung von Layouts ermöglichen. Sie unterstützt mehrsprachige Anwendungen durch\n * Vermeidung von richtungsspezifischen Eigenschaften wie left/right und top/bottom.\n * \n * Stattdessen werden Eigenschaften verwendet, die unabhängig von der Schreibrichtung (RTL/LTR) sind:\n * - block-start/block-end (ersetzt top/bottom)\n * - inline-start/inline-end (ersetzt left/right)\n * - margin-inline, padding-block usw.\n * \n * Hauptvorteile:\n * - Unterstützung für bidirektionale (RTL/LTR) Layouts ohne Codeänderungen\n * - Bessere Wartbarkeit durch eine einzige Codebasis für alle Sprachen\n * - Verbesserte Barrierefreiheit und Unterstützung für internationale Standards\n * \n * @hinweis Diese Datei sollte früh im Stylesheet-Laden eingebunden werden.\n * @wichtig Beim Erstellen neuer Komponenten immer logische Eigenschaften verwenden.\n */\n\n/* \n * Logische CSS Properties für Internationalisierung\n */\n\n@layer logical-properties {\n  /* Basisklassen für Schreibrichtung */\n  :root {\n    --text-direction: ltr;\n  }\n\n  :root[dir=\"rtl\"] {\n    --text-direction: rtl;\n  }\n\n  html {\n    text-align: start;\n  }\n\n  /* Standardabstände nutzen logische Properties */\n  .spacing {\n    margin-block: var(--spacing-4);\n    margin-inline: var(--spacing-2);\n    padding-block: var(--spacing-3);\n    padding-inline: var(--spacing-2);\n  }\n\n  /* Überschriften verwenden logische Properties */\n  h1, h2, h3, h4, h5, h6 {\n    border-block-end: var(--border-width) solid var(--color-surface-300);\n    margin-block: var(--spacing-6) var(--spacing-4);\n    padding-block-end: var(--spacing-2);\n  }\n\n  /* Textausrichtung für RTL/LTR Support */\n  .text-start {\n    text-align: start;\n  }\n\n  .text-end {\n    text-align: end;\n  }\n\n  /* Flexbox mit logischen Properties */\n  .flex-row {\n    display: flex;\n    flex-direction: row;\n  }\n\n  .flex-row-reverse {\n    display: flex;\n    flex-direction: row-reverse;\n  }\n\n  .justify-start {\n    justify-content: flex-start;\n  }\n\n  .justify-end {\n    justify-content: flex-end;\n  }\n\n  /* Container-Abstände */\n  .container {\n    margin-inline: auto;\n    max-inline-size: var(--space-large-80rem);\n    padding-inline: var(--spacing-4);\n  }\n\n  /* Ränder mit logischen Properties */\n  .border-start {\n    border-inline-start: var(--border-width) solid var(--color-surface-300);\n  }\n\n  .border-end {\n    border-inline-end: var(--border-width) solid var(--color-surface-300);\n  }\n\n  .border-block {\n    border-block: var(--border-width) solid var(--color-surface-300);\n  }\n\n  .border-inline {\n    border-inline: var(--border-width) solid var(--color-surface-300);\n  }\n\n  /* Abgerundete Ecken mit logischen Properties */\n  .rounded {\n    border-radius: var(--spacing-1);\n  }\n\n  .rounded-start {\n    border-end-start-radius: var(--spacing-1);\n    border-start-start-radius: var(--spacing-1);\n  }\n\n  .rounded-end {\n    border-end-end-radius: var(--spacing-1);\n    border-start-end-radius: var(--spacing-1);\n  }\n\n  .rounded-top {\n    border-start-end-radius: var(--spacing-1);\n    border-start-start-radius: var(--spacing-1);\n  }\n\n  .rounded-bottom {\n    border-end-end-radius: var(--spacing-1);\n    border-end-start-radius: var(--spacing-1);\n  }\n\n  /* Positionierung mit logischen Properties */\n  .position-start {\n    inset-inline-start: 0;\n  }\n  \n  .position-end {\n    inset-inline-end: 0;\n  }\n\n  .position-top {\n    inset-block-start: 0;\n  }\n\n  .position-bottom {\n    inset-block-end: 0;\n  }\n\n  /* Float mit logischen Properties */\n  .float-start {\n    float: inline-start;\n  }\n\n  .float-end {\n    float: inline-end;\n  }\n\n  .clear-start {\n    clear: inline-start;\n  }\n\n  .clear-end {\n    clear: inline-end;\n  }\n\n  /* Größen mit logischen Properties */\n  .inline-size-full {\n    inline-size: 100%;\n  }\n\n  .block-size-full {\n    block-size: 100%;\n  }\n\n  .inline-size-half {\n    inline-size: 50%;\n  }\n\n  .block-size-half {\n    block-size: 50%;\n  }\n\n  /* Grid mit logischen Properties */\n  .grid-cols-2 {\n    display: grid;\n    gap: var(--spacing-4);\n    grid-template-columns: repeat(2, 1fr);\n  }\n\n  .grid-cols-3 {\n    display: grid;\n    gap: var(--spacing-4);\n    grid-template-columns: repeat(3, 1fr);\n  }\n\n  .grid-cols-4 {\n    display: grid;\n    gap: var(--spacing-4);\n    grid-template-columns: repeat(4, 1fr);\n  }\n\n  /* Abstände Utility-Klassen */\n  .m-block-1 {\n    margin-block: var(--spacing-1);\n  }\n\n  .m-block-2 {\n    margin-block: var(--spacing-2);\n  }\n\n  .m-block-3 {\n    margin-block: var(--spacing-3);\n  }\n\n  .m-block-4 {\n    margin-block: var(--spacing-4);\n  }\n\n  .m-inline-1 {\n    margin-inline: var(--spacing-1);\n  }\n\n  .m-inline-2 {\n    margin-inline: var(--spacing-2);\n  }\n\n  .m-inline-3 {\n    margin-inline: var(--spacing-3);\n  }\n\n  .m-inline-4 {\n    margin-inline: var(--spacing-4);\n  }\n\n  .p-block-1 {\n    padding-block: var(--spacing-1);\n  }\n\n  .p-block-2 {\n    padding-block: var(--spacing-2);\n  }\n\n  .p-block-3 {\n    padding-block: var(--spacing-3);\n  }\n\n  .p-block-4 {\n    padding-block: var(--spacing-4);\n  }\n\n  .p-inline-1 {\n    padding-inline: var(--spacing-1);\n  }\n\n  .p-inline-2 {\n    padding-inline: var(--spacing-2);\n  }\n\n  .p-inline-3 {\n    padding-inline: var(--spacing-3);\n  }\n\n  .p-inline-4 {\n    padding-inline: var(--spacing-4);\n  }\n\n  /* Richtungsspezifische Abstände */\n  .m-block-start-1 {\n    margin-block-start: var(--spacing-1);\n  }\n\n  .m-block-start-2 {\n    margin-block-start: var(--spacing-2);\n  }\n\n  .m-block-start-3 {\n    margin-block-start: var(--spacing-3);\n  }\n\n  .m-block-start-4 {\n    margin-block-start: var(--spacing-4);\n  }\n\n  .m-block-end-1 {\n    margin-block-end: var(--spacing-1);\n  }\n\n  .m-block-end-2 {\n    margin-block-end: var(--spacing-2);\n  }\n\n  .m-block-end-3 {\n    margin-block-end: var(--spacing-3);\n  }\n\n  .m-block-end-4 {\n    margin-block-end: var(--spacing-4);\n  }\n\n  .m-inline-start-1 {\n    margin-inline-start: var(--spacing-1);\n  }\n\n  .m-inline-start-2 {\n    margin-inline-start: var(--spacing-2);\n  }\n\n  .m-inline-start-3 {\n    margin-inline-start: var(--spacing-3);\n  }\n\n  .m-inline-start-4 {\n    margin-inline-start: var(--spacing-4);\n  }\n\n  .m-inline-end-1 {\n    margin-inline-end: var(--spacing-1);\n  }\n\n  .m-inline-end-2 {\n    margin-inline-end: var(--spacing-2);\n  }\n\n  .m-inline-end-3 {\n    margin-inline-end: var(--spacing-3);\n  }\n\n  .m-inline-end-4 {\n    margin-inline-end: var(--spacing-4);\n  }\n\n  .p-block-start-1 {\n    padding-block-start: var(--spacing-1);\n  }\n\n  .p-block-start-2 {\n    padding-block-start: var(--spacing-2);\n  }\n\n  .p-block-start-3 {\n    padding-block-start: var(--spacing-3);\n  }\n\n  .p-block-start-4 {\n    padding-block-start: var(--spacing-4);\n  }\n\n  .p-block-end-1 {\n    padding-block-end: var(--spacing-1);\n  }\n\n  .p-block-end-2 {\n    padding-block-end: var(--spacing-2);\n  }\n\n  .p-block-end-3 {\n    padding-block-end: var(--spacing-3);\n  }\n\n  .p-block-end-4 {\n    padding-block-end: var(--spacing-4);\n  }\n\n  .p-inline-start-1 {\n    padding-inline-start: var(--spacing-1);\n  }\n\n  .p-inline-start-2 {\n    padding-inline-start: var(--spacing-2);\n  }\n\n  .p-inline-start-3 {\n    padding-inline-start: var(--spacing-3);\n  }\n\n  .p-inline-start-4 {\n    padding-inline-start: var(--spacing-4);\n  }\n\n  .p-inline-end-1 {\n    padding-inline-end: var(--spacing-1);\n  }\n\n  .p-inline-end-2 {\n    padding-inline-end: var(--spacing-2);\n  }\n\n  .p-inline-end-3 {\n    padding-inline-end: var(--spacing-3);\n  }\n\n  .p-inline-end-4 {\n    padding-inline-end: var(--spacing-4);\n  }\n\n  /* Scrollen mit logischen Properties */\n  .overflow-inline {\n    overflow-inline: auto;\n  }\n\n  .overflow-block {\n    overflow-block: auto;\n  }\n\n  /* Übersetzte Layouts unterstützen */\n  [lang=\"ar\"],\n  [lang=\"he\"],\n  [lang=\"fa\"],\n  [lang=\"ur\"] {\n    direction: rtl;\n  }\n\n  /* Komponenten für internationalisierte UIs */\n  .navbar {\n    border-block-end: var(--border-width) solid var(--color-surface-300);\n    display: flex;\n    padding-block: var(--spacing-3);\n    padding-inline: var(--spacing-4);\n  }\n\n  .navbar-brand {\n    margin-inline-end: var(--spacing-4);\n  }\n\n  .navbar-nav {\n    display: flex;\n    gap: var(--spacing-4);\n    margin-inline-start: auto;\n  }\n\n  .dropdown-menu {\n    border: var(--border-width) solid var(--color-surface-300);\n    border-radius: var(--spacing-1);\n    inset-block-start: 100%;\n    inset-inline-start: 0;\n    min-inline-size: var(--spacing-40);\n    padding-block: var(--spacing-2);\n    padding-inline: 0;\n    position: absolute;\n  }\n\n  .dropdown-item {\n    padding-block: var(--spacing-1);\n    padding-inline: var(--spacing-3);\n    text-align: start;\n  }\n\n  /* Karten-Komponente mit logischen Properties */\n  .card {\n    border: var(--border-width) solid var(--color-surface-300);\n    border-radius: var(--spacing-2);\n    padding-block: var(--spacing-4);\n    padding-inline: var(--spacing-4);\n  }\n\n  .card-header {\n    border-block-end: var(--border-width) solid var(--color-surface-200);\n    margin-block-end: var(--spacing-3);\n    padding-block-end: var(--spacing-2);\n  }\n\n  .card-footer {\n    border-block-start: var(--border-width) solid var(--color-surface-200);\n    margin-block-start: var(--spacing-3);\n    padding-block-start: var(--spacing-2);\n  }\n\n  /* Listen mit logischen Properties */\n  .list {\n    padding-inline-start: var(--spacing-4);\n  }\n\n  .list-item {\n    margin-block-end: var(--spacing-2);\n  }\n\n  /* Formular-Elemente mit logischen Properties */\n  .form-group {\n    margin-block-end: var(--spacing-3);\n  }\n\n  .form-label {\n    display: block;\n    margin-block-end: var(--spacing-1);\n  }\n\n  .form-control {\n    border: var(--border-width) solid var(--color-surface-300);\n    border-radius: var(--spacing-1);\n    inline-size: 100%;\n    padding-block: var(--spacing-2);\n    padding-inline: var(--spacing-3);\n  }\n\n  /* Buttons mit logischen Properties */\n  .btn {\n    border: var(--border-width) solid transparent;\n    border-radius: var(--spacing-1);\n    padding-block: var(--spacing-2);\n    padding-inline: var(--spacing-4);\n  }\n\n  .btn-icon {\n    margin-inline-end: var(--spacing-2);\n  }\n\n  /* Tabellen mit logischen Properties */\n  .table {\n    border-collapse: collapse;\n    inline-size: 100%;\n  }\n\n  .table th,\n  .table td {\n    border-block-end: var(--border-width) solid var(--color-surface-300);\n    padding-block: var(--spacing-2);\n    padding-inline: var(--spacing-3);\n    text-align: start;\n  }\n\n  /* Navigations-Tabs mit logischen Properties */\n  .tabs {\n    border-block-end: var(--border-width) solid var(--color-surface-300);\n    display: flex;\n  }\n\n  .tab {\n    border-block-end: var(--border-width-thick) solid transparent;\n    padding-block: var(--spacing-2);\n    padding-inline: var(--spacing-4);\n  }\n\n  .tab.active {\n    border-block-end-color: var(--color-primary-500);\n  }\n\n  /* Alert-Komponente mit logischen Properties */\n  .alert {\n    border-inline-start: var(--spacing-1) solid var(--color-primary-500);\n    border-radius: var(--spacing-1);\n    padding-block: var(--spacing-3);\n    padding-inline: var(--spacing-4);\n  }\n\n  .alert-danger {\n    border-inline-start-color: var(--color-error-500);\n  }\n\n  .alert-success {\n    border-inline-start-color: var(--color-success-500);\n  }\n\n  /* Abstand-Automatisierung */\n  .text-flow > * + * {\n    margin-block-start: var(--spacing-3);\n  }\n\n  /* Benutzeroberflächenführungen */\n  .steps {\n    display: flex;\n    margin-block: var(--spacing-4);\n  }\n\n  .step {\n    border-block-end: var(--border-width-thick) solid var(--color-surface-300);\n    flex: 1;\n    padding-block: var(--spacing-2);\n    text-align: center;\n  }\n\n  .step.active {\n    border-block-end-color: var(--color-primary-500);\n  }\n\n  /* Dialog/Modal */\n  .modal {\n    align-items: center;\n    display: flex;\n    inset: 0;\n    justify-content: center;\n    position: fixed;\n  }\n\n  .modal-dialog {\n    background: var(--color-white);\n    border-radius: var(--spacing-2);\n    max-block-size: 90%;\n    max-inline-size: 90%;\n    min-inline-size: var(--space-large-30rem);\n    padding-block: var(--spacing-4);\n    padding-inline: var(--spacing-4);\n  }\n\n  .modal-header {\n    border-block-end: var(--border-width) solid var(--color-surface-300);\n    margin-block-end: var(--spacing-3);\n    padding-block-end: var(--spacing-2);\n  }\n\n  .modal-footer {\n    border-block-start: var(--border-width) solid var(--color-surface-300);\n    display: flex;\n    gap: var(--spacing-2);\n    justify-content: flex-end;\n    margin-block-start: var(--spacing-3);\n    padding-block-start: var(--spacing-2);\n  }\n\n  /* Responsives Layout mit logischen Properties */\n  @media (max-width: 768px) {\n    .navbar {\n      align-items: flex-start;\n      flex-direction: column;\n    }\n\n    .navbar-nav {\n      flex-direction: column;\n      margin-block-start: var(--spacing-3);\n      margin-inline-start: 0;\n    }\n\n    .grid-cols-2,\n    .grid-cols-3,\n    .grid-cols-4 {\n      grid-template-columns: 1fr;\n    }\n  }\n\n  /* RTL spezifische Anpassungen */\n  [dir=\"rtl\"] .btn-icon {\n    transform: scaleX(-1);\n  }\n\n  [dir=\"rtl\"] .dropdown-menu {\n    text-align: right;\n  }\n\n  /* Lang-spezifische Anpassungen */\n  [lang=\"ja\"],\n  [lang=\"zh\"],\n  [lang=\"ko\"] {\n    font-feature-settings: \"palt\";\n    line-break: strict;\n    word-break: normal;\n  }\n\n  [lang=\"th\"],\n  [lang=\"my\"] {\n    line-height: 1.8;\n  }\n\n  /* Komplette Layout-Anordnung, unabhängig von der Schreibrichtung */\n  .layout {\n    display: grid;\n    grid-template:\n      \"header header header\" auto \"sidebar main aside\" 1fr \"footer footer footer\" auto / 200px 1fr 200px;\n    min-block-size: 100%;\n  }\n\n  .layout-header {\n    border-block-end: var(--border-width) solid var(--color-surface-300);\n    grid-area: header;\n    padding-block: var(--spacing-3);\n    padding-inline: var(--spacing-4);\n  }\n\n  .layout-sidebar {\n    border-inline-end: var(--border-width) solid var(--color-surface-300);\n    grid-area: sidebar;\n    padding-block: var(--spacing-4);\n    padding-inline: var(--spacing-3);\n  }\n\n  .layout-main {\n    grid-area: main;\n    padding-block: var(--spacing-4);\n    padding-inline: var(--spacing-4);\n  }\n\n  .layout-aside {\n    border-inline-start: var(--border-width) solid var(--color-surface-300);\n    grid-area: aside;\n    padding-block: var(--spacing-4);\n    padding-inline: var(--spacing-3);\n  }\n\n  .layout-footer {\n    border-block-start: var(--border-width) solid var(--color-surface-300);\n    grid-area: footer;\n    padding-block: var(--spacing-3);\n    padding-inline: var(--spacing-4);\n  }\n\n  /* Responsives Layout */\n  @media (max-width: 990px) {\n    .layout {\n      grid-template-areas:\n        \"header header\"\n        \"sidebar main\"\n        \"footer footer\";\n      grid-template-columns: var(--space-large-200) 1fr;\n    }\n\n    .layout-aside {\n      display: none;\n    }\n  }\n\n  @media (max-width: 768px) {\n    .layout {\n      grid-template-areas:\n        \"header\"\n        \"main\"\n        \"footer\";\n      grid-template-columns: 1fr;\n    }\n\n    .layout-sidebar {\n      display: none;\n    }\n  }\n\n  /* Responsive Anpassungen für logische Eigenschaften */\n  @media (max-width: 768px) {\n    /* Anpassungen für kleinere Bildschirme */\n    .block-spacer {\n      margin-block: var(--spacing-4);\n    }\n    \n    .inline-spacer {\n      margin-inline: 0.5rem;\n    }\n    \n    .flow-spacing > * + * {\n      margin-block-start: 0.75rem;\n    }\n    \n    .center-content {\n      align-items: center;\n      justify-content: center;\n    }\n  }\n  \n  /* Tablet-Anpassungen */\n  @media (max-width: 990px) {\n    .tablet-padding {\n      padding-block: var(--spacing-4);\n      padding-inline: var(--spacing-6);\n    }\n    \n    .tablet-margin {\n      margin-block: var(--spacing-4);\n      margin-inline: var(--spacing-6);\n    }\n    \n    .tablet-spacing > * + * {\n      margin-inline-start: var(--spacing-4);\n    }\n  }\n  \n  /* Mobile vertikale Ausrichtung */\n  @media (max-width: 768px) {\n    .logical-stack {\n      display: flex;\n      flex-direction: column;\n      gap: var(--space-4);\n    }\n    \n    .logical-stack > * {\n      margin-block-start: var(--space-0);\n      margin-inline-start: var(--space-0);\n    }\n  }\n}\n","/**\n * UI Components System\n * \n * This file imports all UI components in the correct order.\n * Components are organized by type in subdirectories.\n */\n\n/* UI Elements */\n@import url('./forms.css');\n\n/* Page Regions */\n@import url('./regions/main-content.css');\n@import url('./regions/header.css');\n@import url('./regions/footer.css');\n@import url('./regions/sidebar.css');\n@import url('./content.css');\n\n/* UI Patterns */\n@import url('./patterns/blog.css');\n@import url('./patterns/tags.css');\n@import url('./patterns/code.css');\n@import url('./patterns/widget.css');\n@import url('./patterns/skeleton.css');\n","/**\n * Transition Tokens\n * \n * @property definitions for smooth theme transitions and animations.\n * These properties enable smooth interpolation between theme values.\n * \n * @layer tokens\n */\n\n@layer tokens {\n  /* Transition Duration Properties */\n  @property --transition-fast {\n    inherits: true;\n    initial-value: 150ms;\n    syntax: '<time>';\n  }\n  \n  @property --transition-normal {\n    inherits: true;\n    initial-value: 250ms;\n    syntax: '<time>';\n  }\n  \n  @property --transition-slow {\n    inherits: true;\n    initial-value: 400ms;\n    syntax: '<time>';\n  }\n\n  /* Extended Duration Properties (für Kompatibilität) */\n  @property --transition-duration-fast {\n    inherits: true;\n    initial-value: 150ms;\n    syntax: '<time>';\n  }\n  \n  @property --transition-duration-normal {\n    inherits: true;\n    initial-value: 250ms;\n    syntax: '<time>';\n  }\n  \n  @property --transition-duration-slow {\n    inherits: true;\n    initial-value: 400ms;\n    syntax: '<time>';\n  }\n  \n  /* Transition Easing Properties */\n  @property --transition-ease-out {\n    inherits: true;\n    initial-value: cubic-bezier(0, 0, 0.2, 1);\n    syntax: '<custom-ident> | ease | ease-in | ease-out | ease-in-out | linear | step-start | step-end';\n  }\n  \n  @property --transition-ease-in {\n    inherits: true;\n    initial-value: cubic-bezier(0.4, 0, 1, 1);\n    syntax: '<custom-ident> | ease | ease-in | ease-out | ease-in-out | linear | step-start | step-end';\n  }\n  \n  @property --transition-ease-in-out {\n    inherits: true;\n    initial-value: cubic-bezier(0.4, 0, 0.2, 1);\n    syntax: '<custom-ident> | ease | ease-in | ease-out | ease-in-out | linear | step-start | step-end';\n  }\n\n  /* Timing Function Aliases */\n  @property --transition-timing-ease {\n    inherits: true;\n    initial-value: cubic-bezier(0.4, 0, 0.2, 1);\n    syntax: '<custom-ident> | ease | ease-in | ease-out | ease-in-out | linear | step-start | step-end';\n  }\n  \n  /* Animatable Color Properties for Theme Transitions */\n  @property --transition-bg {\n    inherits: true;\n    initial-value: #fff;\n    syntax: '<color>';\n  }\n  \n  @property --transition-fg {\n    inherits: true;\n    initial-value: #1f2937;\n    syntax: '<color>';\n  }\n  \n  @property --transition-border {\n    inherits: true;\n    initial-value: #e5e7eb;\n    syntax: '<color>';\n  }\n  \n  @property --transition-surface {\n    inherits: true;\n    initial-value: #f9fafb;\n    syntax: '<color>';\n  }\n  \n  @property --transition-accent {\n    inherits: true;\n    initial-value: #3b82f6;\n    syntax: '<color>';\n  }\n  \n  @property --transition-shadow-opacity {\n    inherits: true;\n    initial-value: 0.1;\n    syntax: '<number>';\n  }\n  \n  /* Component-Specific Transition Properties */\n  @property --transition-colors {\n    inherits: true;\n    initial-value: background-color 250ms var(--transition-ease-out), color 250ms var(--transition-ease-out), border-color 250ms var(--transition-ease-out);\n    syntax: '*';\n  }\n  \n  @property --transition-transform {\n    inherits: true;\n    initial-value: transform 200ms var(--transition-ease-out);\n    syntax: '*';\n  }\n  \n  @property --transition-opacity {\n    inherits: true;\n    initial-value: opacity 200ms var(--transition-ease-out);\n    syntax: '*';\n  }\n  \n  @property --transition-shadow {\n    inherits: true;\n    initial-value: box-shadow 200ms var(--transition-ease-out);\n    syntax: '*';\n  }\n  \n  @property --transition-all {\n    inherits: true;\n    initial-value: all 250ms var(--transition-ease-out);\n    syntax: '*';\n  }\n}\n\n/* Fallback Values für Transition-Tokens */\n:root {\n  /* Duration Tokens */\n  --transition-fast: 150ms;\n  --transition-normal: 250ms;\n  --transition-slow: 400ms;\n  --transition-duration-fast: var(--transition-fast);\n  --transition-duration-normal: var(--transition-normal);\n  --transition-duration-slow: var(--transition-slow);\n  \n  /* Timing Functions */\n  --transition-ease-out: ease-out;\n  --transition-ease-in: ease-in;\n  --transition-ease-in-out: ease-in-out;\n  --transition-timing-ease: var(--transition-ease-in-out);\n  \n  /* Combined Transition Properties */\n  --transition-colors: background-color var(--transition-normal) var(--transition-ease-out), \n                      color var(--transition-normal) var(--transition-ease-out), \n                      border-color var(--transition-normal) var(--transition-ease-out);\n  --transition-transform: transform 200ms var(--transition-ease-out);\n  --transition-opacity: opacity 200ms var(--transition-ease-out);\n  --transition-shadow: box-shadow 200ms var(--transition-ease-out);\n  --transition-all: all var(--transition-normal) var(--transition-ease-out);\n} ","/**\n * Effects Properties with @property Definitions\n * \n * Typed CSS custom properties for visual effects using @property.\n * This enables better tooling support, autocomplete, and animation capabilities.\n * \n * @layer tokens.properties\n */\n\n@layer tokens.properties {\n  /* Shadow Properties */\n  @property --shadow-color {\n    inherits: true;\n    initial-value: rgb(0 0 0);\n    syntax: '<color>';\n  }\n  \n  @property --shadow-opacity-sm {\n    inherits: true;\n    initial-value: 0.05;\n    syntax: '<number>';\n  }\n  \n  @property --shadow-opacity-md {\n    inherits: true;\n    initial-value: 0.1;\n    syntax: '<number>';\n  }\n  \n  @property --shadow-opacity-lg {\n    inherits: true;\n    initial-value: 0.15;\n    syntax: '<number>';\n  }\n  \n  @property --shadow-opacity-xl {\n    inherits: true;\n    initial-value: 0.25;\n    syntax: '<number>';\n  }\n  \n  /* Transition Duration Properties */\n  @property --transition-duration-fast {\n    inherits: true;\n    initial-value: 150ms;\n    syntax: '<time>';\n  }\n  \n  @property --transition-duration-normal {\n    inherits: true;\n    initial-value: 300ms;\n    syntax: '<time>';\n  }\n  \n  @property --transition-duration-slow {\n    inherits: true;\n    initial-value: 500ms;\n    syntax: '<time>';\n  }\n  \n  /* Opacity Properties */\n  @property --opacity-disabled {\n    inherits: true;\n    initial-value: 0.5;\n    syntax: '<number>';\n  }\n  \n  @property --opacity-hover {\n    inherits: true;\n    initial-value: 0.8;\n    syntax: '<number>';\n  }\n  \n  @property --opacity-overlay {\n    inherits: true;\n    initial-value: 0.5;\n    syntax: '<number>';\n  }\n  \n  /* Backdrop Properties */\n  @property --color-backdrop {\n    inherits: true;\n    initial-value: rgb(0 0 0 / 5000%);\n    syntax: '<color>';\n  }\n  \n  @property --color-tooltip-background {\n    inherits: true;\n    initial-value: rgb(0 0 0 / 8000%);\n    syntax: '<color>';\n  }\n  \n  @property --color-tooltip-text {\n    inherits: true;\n    initial-value: #fff;\n    syntax: '<color>';\n  }\n  \n  /* Focus Properties */\n  @property --color-focus {\n    inherits: true;\n    initial-value: #4f46e5;\n    syntax: '<color>';\n  }\n  \n  @property --color-focus-glow {\n    inherits: true;\n    initial-value: rgb(79 70 229 / 3000%);\n    syntax: '<color>';\n  }\n  \n  /* Gradient Properties */\n  @property --color-gradient-start {\n    inherits: true;\n    initial-value: #4f46e5;\n    syntax: '<color>';\n  }\n  \n  @property --color-gradient-end {\n    inherits: true;\n    initial-value: #3b82f6;\n    syntax: '<color>';\n  }\n  \n  /* Background Effect Properties */\n  @property --color-background-subtle {\n    inherits: true;\n    initial-value: rgb(84 53 53 / 2%);\n    syntax: '<color>';\n  }\n  \n  @property --color-background-muted {\n    inherits: true;\n    initial-value: rgb(0 0 0 / 5%);\n    syntax: '<color>';\n  }\n  \n  @property --color-status {\n    inherits: true;\n    initial-value: #4f46e5;\n    syntax: '<color>';\n  }\n} ","/**\n * Light Mode Theme\n * \n * Light mode definitions with [data-theme=\"light\"] scope.\n * Only overrides base tokens, aliases remain stable.\n * \n * @layer themes.mode\n */\n\n@layer themes.mode {\n  [data-theme=\"light\"] {\n    /* Color Scheme */\n    color-scheme: light;\n    \n    /* Base Color Tokens - Only override what's needed for light mode */\n    --color-background: #fff;\n    --color-surface: #f9fafb;\n    --color-surface-elevated: #fff;\n    --color-text: #1f2937;\n    --color-text-muted: #6b7280;\n    --color-text-inverse: #fff;\n    --color-border: #e5e7eb;\n    --color-border-strong: #d1d5db;\n    \n    /* Primary Colors - Light Mode Values */\n    --color-primary: #06f;\n    --color-primary-50: #e6f0ff;\n    --color-primary-100: #cce0ff;\n    --color-primary-500: #06f;\n    --color-primary-600: #0052cc;\n    --color-primary-900: #001433;\n    \n    /* Secondary Colors - Light Mode Values */\n    --color-secondary: #5333ff;\n    --color-secondary-50: #eeeaff;\n    --color-secondary-500: #5333ff;\n    --color-secondary-900: #110a33;\n    \n    /* Gray Colors - Light Mode Values */\n    --color-gray-50: #f9f9fa;\n    --color-gray-100: #f3f3f5;\n    --color-gray-500: #8f96a8;\n    --color-gray-900: #1d1f24;\n    \n    /* Focus and Interactive States */\n    --color-focus: #4f46e5;\n    --color-focus-glow: rgb(79 70 229 / 3000%);\n  }\n} ","/*\n * Icon System\n *\n * Hauptdatei für das Icon-System der UI-Bibliothek.\n * Definiert das Basissystem für Icons und ihre Varianten.\n */\n\n/* \n * Modulare Icon-Imports\n * Aktuell auskommentiert, da die Dateien noch nicht existieren.\n * Sollten mit expliziten Layer-Angaben versehen werden.\n */\n\n/* Geplante Icon-Module (derzeit nicht implementiert) */\n\n/* @import url('./basic/basic-icons.css') layer(icons.basic); */\n\n/* @import url('./brands/brand-icons.css') layer(icons.brands); */\n\n/* @import url('./functional/functional-icons.css') layer(icons.functional); */\n\n/* @import url('./illustrations/illustration-icons.css') layer(icons.illustrations); */\n\n/**\n * Basis-Icon-System\n * Definiert Größen, Farben und Grundstile für alle Icons\n */\n@layer icons {\n  /* Basis-Icon-Klasse */\n  .icon {\n    display: var(--display-inline-block);\n    flex-shrink: 0;\n    height: var(--icon-size-md);\n    vertical-align: var(--position-middle);\n    width: var(--icon-size-md);\n  }\n  \n  /* Icon-Größenvarianten */\n  .icon-xs { \n    height: var(--icon-size-xs); \n    width: var(--icon-size-xs); \n  }\n  \n  .icon-sm { \n    height: var(--icon-size-sm); \n    width: var(--icon-size-sm); \n  }\n  \n  .icon-md { \n    height: var(--icon-size-md); \n    width: var(--icon-size-md); \n  }\n  \n  .icon-lg { \n    height: var(--icon-size-lg); \n    width: var(--icon-size-lg); \n  }\n  \n  .icon-xl { \n    height: var(--icon-size-xl); \n    width: var(--icon-size-xl); \n  }\n  \n  .icon-2xl { \n    height: var(--icon-size-2xl); \n    width: var(--icon-size-2xl); \n  }\n  \n  .icon-3xl { \n    height: var(--icon-size-3xl); \n    width: var(--icon-size-3xl); \n  }\n  \n  /* Icon-Farbvarianten - entsprechen den globalen Farbvariablen */\n  .icon-current { color: currentColor; }\n\n  .icon-primary { color: var(--color-primary-500); }\n\n  .icon-secondary { color: var(--color-secondary-500); }\n\n  .icon-success { color: var(--color-success); }\n\n  .icon-warning { color: var(--color-warning); }\n\n  .icon-error { color: var(--color-error); }\n\n  .icon-info { color: var(--color-info); }\n\n  .icon-muted { color: var(--color-gray-400); }\n} ","/**\n * Responsive Layout Utilities\n * \n * Advanced responsive utilities specifically designed for grid and flex layouts.\n * This system provides responsive variants of layout-specific properties that\n * complement the base grid and flex systems with breakpoint-aware functionality.\n * \n * @layer layout.responsive-utilities\n * @version 2.0\n * @author Design System Team\n * \n * FEATURES:\n * - Responsive grid column and row utilities\n * - Responsive flexbox direction and alignment\n * - Responsive gap and spacing controls\n * - Mobile-first responsive design approach\n * - Consistent breakpoint system across all utilities\n * - Optimized CSS output with minimal redundancy\n * - Semantic class naming for better maintainability\n * - Performance-optimized media queries\n * \n * BREAKPOINT SYSTEM:\n * - Base: 0 and up (mobile-first)\n * - sm: 640px and up (small tablets)\n * - md: 768px and up (tablets)\n * - lg: 1024px and up (laptops)\n * - xl: 1280px and up (desktops)\n * - 2xl: 1536px and up (large desktops)\n * \n * RESPONSIVE GRID UTILITIES:\n * - sm:grid-cols-{1-12}: Responsive grid columns\n * - md:col-span-{1-12}: Responsive column spans\n * - lg:row-span-{1-6}: Responsive row spans\n * - xl:grid-auto-fit: Responsive auto-fit layouts\n * - 2xl:grid-subgrid: Responsive subgrid layouts\n * \n * RESPONSIVE FLEX UTILITIES:\n * - sm:flex-row: Responsive flex direction\n * - md:flex-col: Responsive flex direction\n * - lg:items-center: Responsive item alignment\n * - xl:justify-between: Responsive content justification\n * - 2xl:flex-wrap: Responsive flex wrapping\n * \n * RESPONSIVE SPACING:\n * - sm:gap-{size}: Responsive gap utilities\n * - md:space-x-{size}: Responsive horizontal spacing\n * - lg:space-y-{size}: Responsive vertical spacing\n * \n * USAGE EXAMPLES:\n * \n * Responsive Grid Layout:\n * <div class=\"grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4\">\n *   <!-- 1 column on mobile, 2 on tablet, 3 on laptop, 4 on desktop -->\n *   <div>Item 1</div>\n *   <div>Item 2</div>\n *   <div>Item 3</div>\n *   <div>Item 4</div>\n * </div>\n * \n * Responsive Flex Direction:\n * <div class=\"flex flex-col md:flex-row gap-4\">\n *   <!-- Vertical on mobile, horizontal on tablet+ -->\n *   <main class=\"flex-1\">Main content</main>\n *   <aside class=\"md:w-64\">Sidebar</aside>\n * </div>\n * \n * Responsive Column Spans:\n * <div class=\"grid grid-cols-12 gap-4\">\n *   <div class=\"col-span-12 md:col-span-8 lg:col-span-9\">\n *     <!-- Full width on mobile, 8/12 on tablet, 9/12 on laptop -->\n *     Main content\n *   </div>\n *   <div class=\"col-span-12 md:col-span-4 lg:col-span-3\">\n *     <!-- Full width on mobile, 4/12 on tablet, 3/12 on laptop -->\n *     Sidebar\n *   </div>\n * </div>\n * \n * Responsive Alignment:\n * <div class=\"flex flex-col items-start md:flex-row md:items-center lg:justify-between\">\n *   <!-- Different alignment at each breakpoint -->\n *   <h1>Title</h1>\n *   <nav>Navigation</nav>\n * </div>\n * \n * Responsive Card Grid:\n * <div class=\"grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-4 lg:gap-6\">\n *   <!-- Responsive columns with responsive gaps -->\n *   <div class=\"card\">Card 1</div>\n *   <div class=\"card\">Card 2</div>\n *   <div class=\"card\">Card 3</div>\n * </div>\n * \n * Complex Responsive Layout:\n * <div class=\"grid grid-cols-1 lg:grid-cols-4 gap-6\">\n *   <header class=\"col-span-1 lg:col-span-4\">Header</header>\n *   <main class=\"col-span-1 lg:col-span-3\">Main</main>\n *   <aside class=\"col-span-1\">Sidebar</aside>\n *   <footer class=\"col-span-1 lg:col-span-4\">Footer</footer>\n * </div>\n * \n * BROWSER SUPPORT:\n * - CSS Grid: All modern browsers (IE 11+ with -ms- prefix)\n * - Flexbox: All modern browsers (IE 11+ with -ms- prefix)\n * - Media Queries: All modern browsers (IE 9+)\n * - Gap Property: Chrome 84+, Firefox 63+, Safari 14.1+\n * - Subgrid: Firefox 71+, Safari 16+, Chrome 117+\n * \n * PERFORMANCE NOTES:\n * - Mobile-first approach reduces CSS payload for mobile devices\n * - Uses min-width media queries for optimal performance\n * - Consolidated media queries reduce CSS file size\n * - Efficient selector specificity prevents cascade conflicts\n * - Gap properties are more performant than margin utilities\n * \n * ACCESSIBILITY:\n * - Responsive layouts maintain semantic HTML structure\n * - Grid and flex layouts preserve document flow for screen readers\n * - Responsive changes don't affect keyboard navigation order\n * - Visual layout changes don't impact assistive technology\n * - Ensure content remains accessible at all breakpoints\n * \n * INTEGRATION:\n * - Extends layout/grid-system.css with responsive variants\n * - Complements layout/flex-layouts.css with responsive variants\n * - Works with layout/spacing.css for responsive spacing\n * - Compatible with layout/containers.css for responsive containers\n * - Enhanced by layout/responsive.css for display utilities\n * \n * BEST PRACTICES:\n * - Start with mobile-first design approach\n * - Use semantic breakpoint names (sm, md, lg, xl, 2xl)\n * - Test layouts across all target breakpoints\n * - Combine grid and flex utilities for complex layouts\n * - Use consistent spacing scales across breakpoints\n * - Avoid excessive responsive variants that create maintenance overhead\n * - Consider performance impact of complex responsive layouts\n * \n * DEBUGGING:\n * Add responsive debug utilities:\n * .debug-responsive::before {\n *   content: 'mobile';\n *   position: fixed;\n *   top: 0%;\n *   right: 0%;\n *   background: red;\n *   color: white;\n *   padding: 0.25rem;\n * }\n * @media (min-width: 640px) {\n *   .debug-responsive::before { content: 'sm'; }\n * }\n * \n * MIGRATION:\n * From older responsive systems:\n * - .col-md-6 → .col-span-6.md:col-span-6\n * - .flex-sm-row → .flex-col.sm:flex-row\n * - .d-lg-block → .hidden.lg:block\n */\n\n@layer layout.responsive-utilities {\n    /* ================= RESPONSIVE GRID UTILITIES ================= */\n\n    /* Small screens (640px and up) */\n    @media (min-width: 640px) {\n        .sm\\:grid-cols-1 { grid-template-columns: repeat(1, 1fr); }\n\n        .sm\\:grid-cols-2 { grid-template-columns: repeat(2, 1fr); }\n\n        .sm\\:grid-cols-3 { grid-template-columns: repeat(3, 1fr); }\n\n        .sm\\:grid-cols-4 { grid-template-columns: repeat(4, 1fr); }\n\n        .sm\\:grid-cols-6 { grid-template-columns: repeat(6, 1fr); }\n\n        .sm\\:grid-cols-12 { grid-template-columns: repeat(12, 1fr); }\n\n        .sm\\:grid-auto-fit { grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); }\n\n        .sm\\:grid-auto-fill { grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); }\n\n        .sm\\:col-span-1 { grid-column: span 1; }\n\n        .sm\\:col-span-2 { grid-column: span 2; }\n\n        .sm\\:col-span-3 { grid-column: span 3; }\n\n        .sm\\:col-span-4 { grid-column: span 4; }\n\n        .sm\\:col-span-6 { grid-column: span 6; }\n\n        .sm\\:col-span-12 { grid-column: span 12; }\n\n        .sm\\:col-span-full { grid-column: 1 / -1; }\n\n        .sm\\:row-span-1 { grid-row: span 1; }\n\n        .sm\\:row-span-2 { grid-row: span 2; }\n\n        .sm\\:row-span-3 { grid-row: span 3; }\n\n        .sm\\:row-span-4 { grid-row: span 4; }\n\n        .sm\\:row-span-5 { grid-row: span 5; }\n\n        .sm\\:row-span-6 { grid-row: span 6; }\n\n        .sm\\:row-span-full { grid-row: 1 / -1; }\n    }\n\n    /* Medium screens (768px and up) */\n    @media (min-width: 768px) {\n        .md\\:grid-cols-1 { grid-template-columns: repeat(1, 1fr); }\n\n        .md\\:grid-cols-2 { grid-template-columns: repeat(2, 1fr); }\n\n        .md\\:grid-cols-3 { grid-template-columns: repeat(3, 1fr); }\n\n        .md\\:grid-cols-4 { grid-template-columns: repeat(4, 1fr); }\n\n        .md\\:grid-cols-6 { grid-template-columns: repeat(6, 1fr); }\n\n        .md\\:grid-cols-12 { grid-template-columns: repeat(12, 1fr); }\n\n        .md\\:grid-auto-fit { grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); }\n\n        .md\\:grid-auto-fill { grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); }\n\n        .md\\:col-span-1 { grid-column: span 1; }\n\n        .md\\:col-span-2 { grid-column: span 2; }\n\n        .md\\:col-span-3 { grid-column: span 3; }\n\n        .md\\:col-span-4 { grid-column: span 4; }\n\n        .md\\:col-span-6 { grid-column: span 6; }\n\n        .md\\:col-span-12 { grid-column: span 12; }\n\n        .md\\:col-span-full { grid-column: 1 / -1; }\n\n        .md\\:row-span-1 { grid-row: span 1; }\n\n        .md\\:row-span-2 { grid-row: span 2; }\n\n        .md\\:row-span-3 { grid-row: span 3; }\n\n        .md\\:row-span-4 { grid-row: span 4; }\n\n        .md\\:row-span-5 { grid-row: span 5; }\n\n        .md\\:row-span-6 { grid-row: span 6; }\n\n        .md\\:row-span-full { grid-row: 1 / -1; }\n    }\n\n    /* Large screens (1024px and up) */\n    @media (min-width: 1024px) {\n        .lg\\:grid-cols-1 { grid-template-columns: repeat(1, 1fr); }\n\n        .lg\\:grid-cols-2 { grid-template-columns: repeat(2, 1fr); }\n\n        .lg\\:grid-cols-3 { grid-template-columns: repeat(3, 1fr); }\n\n        .lg\\:grid-cols-4 { grid-template-columns: repeat(4, 1fr); }\n\n        .lg\\:grid-cols-6 { grid-template-columns: repeat(6, 1fr); }\n\n        .lg\\:grid-cols-12 { grid-template-columns: repeat(12, 1fr); }\n\n        .lg\\:grid-auto-fit { grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); }\n\n        .lg\\:grid-auto-fill { grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); }\n\n        .lg\\:col-span-1 { grid-column: span 1; }\n\n        .lg\\:col-span-2 { grid-column: span 2; }\n\n        .lg\\:col-span-3 { grid-column: span 3; }\n\n        .lg\\:col-span-4 { grid-column: span 4; }\n\n        .lg\\:col-span-6 { grid-column: span 6; }\n\n        .lg\\:col-span-12 { grid-column: span 12; }\n\n        .lg\\:col-span-full { grid-column: 1 / -1; }\n\n        .lg\\:row-span-1 { grid-row: span 1; }\n\n        .lg\\:row-span-2 { grid-row: span 2; }\n\n        .lg\\:row-span-3 { grid-row: span 3; }\n\n        .lg\\:row-span-4 { grid-row: span 4; }\n\n        .lg\\:row-span-5 { grid-row: span 5; }\n\n        .lg\\:row-span-6 { grid-row: span 6; }\n\n        .lg\\:row-span-full { grid-row: 1 / -1; }\n    }\n\n    /* Extra large screens (1280px and up) */\n    @media (width >= 1280px) {\n        .xl\\:grid-cols-1 { grid-template-columns: repeat(1, 1fr); }\n\n        .xl\\:grid-cols-2 { grid-template-columns: repeat(2, 1fr); }\n\n        .xl\\:grid-cols-3 { grid-template-columns: repeat(3, 1fr); }\n\n        .xl\\:grid-cols-4 { grid-template-columns: repeat(4, 1fr); }\n\n        .xl\\:grid-cols-6 { grid-template-columns: repeat(6, 1fr); }\n\n        .xl\\:grid-cols-12 { grid-template-columns: repeat(12, 1fr); }\n\n        .xl\\:grid-auto-fit { grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); }\n\n        .xl\\:grid-auto-fill { grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); }\n\n        .xl\\:col-span-1 { grid-column: span 1; }\n\n        .xl\\:col-span-2 { grid-column: span 2; }\n\n        .xl\\:col-span-3 { grid-column: span 3; }\n\n        .xl\\:col-span-4 { grid-column: span 4; }\n\n        .xl\\:col-span-6 { grid-column: span 6; }\n\n        .xl\\:col-span-12 { grid-column: span 12; }\n\n        .xl\\:col-span-full { grid-column: 1 / -1; }\n\n        .xl\\:row-span-1 { grid-row: span 1; }\n\n        .xl\\:row-span-2 { grid-row: span 2; }\n\n        .xl\\:row-span-3 { grid-row: span 3; }\n\n        .xl\\:row-span-4 { grid-row: span 4; }\n\n        .xl\\:row-span-5 { grid-row: span 5; }\n\n        .xl\\:row-span-6 { grid-row: span 6; }\n\n        .xl\\:row-span-full { grid-row: 1 / -1; }\n    }\n\n    /* 2X large screens (1536px and up) */\n    @media (width >= 1536px) {\n        .\\32xl\\:grid-cols-1 { grid-template-columns: repeat(1, 1fr); }\n\n        .\\32xl\\:grid-cols-2 { grid-template-columns: repeat(2, 1fr); }\n\n        .\\32xl\\:grid-cols-3 { grid-template-columns: repeat(3, 1fr); }\n\n        .\\32xl\\:grid-cols-4 { grid-template-columns: repeat(4, 1fr); }\n\n        .\\32xl\\:grid-cols-6 { grid-template-columns: repeat(6, 1fr); }\n\n        .\\32xl\\:grid-cols-12 { grid-template-columns: repeat(12, 1fr); }\n\n        .\\32xl\\:grid-auto-fit { grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); }\n\n        .\\32xl\\:grid-auto-fill { grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); }\n\n        .\\32xl\\:col-span-1 { grid-column: span 1; }\n\n        .\\32xl\\:col-span-2 { grid-column: span 2; }\n\n        .\\32xl\\:col-span-3 { grid-column: span 3; }\n\n        .\\32xl\\:col-span-4 { grid-column: span 4; }\n\n        .\\32xl\\:col-span-6 { grid-column: span 6; }\n\n        .\\32xl\\:col-span-12 { grid-column: span 12; }\n\n        .\\32xl\\:col-span-full { grid-column: 1 / -1; }\n\n        .\\32xl\\:row-span-1 { grid-row: span 1; }\n\n        .\\32xl\\:row-span-2 { grid-row: span 2; }\n\n        .\\32xl\\:row-span-3 { grid-row: span 3; }\n\n        .\\32xl\\:row-span-4 { grid-row: span 4; }\n\n        .\\32xl\\:row-span-5 { grid-row: span 5; }\n\n        .\\32xl\\:row-span-6 { grid-row: span 6; }\n\n        .\\32xl\\:row-span-full { grid-row: 1 / -1; }\n    }\n}\n","/**\n * Optimierte Color Properties mit @property\n * \n * Enthält nur semantische und animierbare Farb-Tokens.\n * Alle Abstufungen (z. B. -100 bis -900) werden im `@layer colors` gepflegt.\n * \n * @layer tokens.properties\n */\n\n @layer tokens.properties {\n  /* Base Colors */\n  @property --color-white {\n    inherits: true;\n    initial-value: #fff;\n    syntax: '<color>';\n  }\n\n  @property --color-black {\n    inherits: true;\n    initial-value: #000;\n    syntax: '<color>';\n  }\n\n  /* Accessibility-specific colors */\n  @property --color-gray-very-dark {\n    inherits: true;\n    initial-value: #1a1a1a;\n    syntax: '<color>';\n  }\n\n  @property --color-gray-medium {\n    inherits: true;\n    initial-value: #6b6b6b;\n    syntax: '<color>';\n  }\n\n  @property --color-gray-very-light {\n    inherits: true;\n    initial-value: #f2f2f2;\n    syntax: '<color>';\n  }\n\n  /* Opacity-based colors */\n  @property --color-overlay-dark {\n    inherits: true;\n    initial-value: rgb(0 0 0 / 80%);\n    syntax: '<color>';\n  }\n\n  @property --color-overlay-medium {\n    inherits: true;\n    initial-value: rgb(0 0 0 / 60%);\n    syntax: '<color>';\n  }\n\n  /* Basis-Farbtokens */\n  @property --color-primary {\n    inherits: true;\n    initial-value: #06f;\n    syntax: '<color>';\n  }\n\n  @property --color-secondary {\n    inherits: true;\n    initial-value: #5333ff;\n    syntax: '<color>';\n  }\n\n  @property --color-success {\n    inherits: true;\n    initial-value: #10b981;\n    syntax: '<color>';\n  }\n\n  @property --color-warning {\n    inherits: true;\n    initial-value: #f59e0b;\n    syntax: '<color>';\n  }\n\n  @property --color-error {\n    inherits: true;\n    initial-value: #ef4444;\n    syntax: '<color>';\n  }\n\n  @property --color-info {\n    inherits: true;\n    initial-value: #06f;\n    syntax: '<color>';\n  }\n\n  @property --color-neutral {\n    inherits: true;\n    initial-value: #6b7280;\n    syntax: '<color>';\n  }\n\n  /* Textfarben */\n  @property --color-text {\n    inherits: true;\n    initial-value: #1f2937;\n    syntax: '<color>';\n  }\n\n  @property --color-text-muted {\n    inherits: true;\n    initial-value: #6b7280;\n    syntax: '<color>';\n  }\n\n  @property --color-text-inverse {\n    inherits: true;\n    initial-value: #fff;\n    syntax: '<color>';\n  }\n\n  /* Oberflächenfarben */\n  @property --color-background {\n    inherits: true;\n    initial-value: #fff;\n    syntax: '<color>';\n  }\n\n  @property --color-surface {\n    inherits: true;\n    initial-value: #f9fafb;\n    syntax: '<color>';\n  }\n\n  @property --color-surface-elevated {\n    inherits: true;\n    initial-value: #fff;\n    syntax: '<color>';\n  }\n\n  /* Rahmenfarben */\n  @property --color-border {\n    inherits: true;\n    initial-value: #e5e7eb;\n    syntax: '<color>';\n  }\n\n  @property --color-border-strong {\n    inherits: true;\n    initial-value: #d1d5db;\n    syntax: '<color>';\n  }\n\n  /* Für animierbare Transitions */\n  @property --color-transition-primary {\n    inherits: true;\n    initial-value: #06f;\n    syntax: '<color>';\n  }\n\n  @property --color-transition-surface {\n    inherits: true;\n    initial-value: #fff;\n    syntax: '<color>';\n  }\n\n  @property --color-transition-text {\n    inherits: true;\n    initial-value: #1f2937;\n    syntax: '<color>';\n  }\n\n  /* Erweiterte Farbabstufungen für Komponenten */\n  \n  /* Primary Color Scale */\n  @property --color-primary-50 {\n    inherits: true;\n    initial-value: #eff6ff;\n    syntax: '<color>';\n  }\n  \n  @property --color-primary-100 {\n    inherits: true;\n    initial-value: #dbeafe;\n    syntax: '<color>';\n  }\n  \n  @property --color-primary-200 {\n    inherits: true;\n    initial-value: #bfdbfe;\n    syntax: '<color>';\n  }\n  \n  @property --color-primary-300 {\n    inherits: true;\n    initial-value: #93c5fd;\n    syntax: '<color>';\n  }\n  \n  @property --color-primary-400 {\n    inherits: true;\n    initial-value: #60a5fa;\n    syntax: '<color>';\n  }\n  \n  @property --color-primary-500 {\n    inherits: true;\n    initial-value: #3b82f6;\n    syntax: '<color>';\n  }\n  \n  @property --color-primary-600 {\n    inherits: true;\n    initial-value: #2563eb;\n    syntax: '<color>';\n  }\n  \n  @property --color-primary-700 {\n    inherits: true;\n    initial-value: #1d4ed8;\n    syntax: '<color>';\n  }\n  \n  @property --color-primary-800 {\n    inherits: true;\n    initial-value: #1e40af;\n    syntax: '<color>';\n  }\n  \n  @property --color-primary-900 {\n    inherits: true;\n    initial-value: #1e3a8a;\n    syntax: '<color>';\n  }\n\n  /* Secondary Color Scale */\n  @property --color-secondary-50 {\n    inherits: true;\n    initial-value: #f8fafc;\n    syntax: '<color>';\n  }\n  \n  @property --color-secondary-100 {\n    inherits: true;\n    initial-value: #f1f5f9;\n    syntax: '<color>';\n  }\n  \n  @property --color-secondary-200 {\n    inherits: true;\n    initial-value: #e2e8f0;\n    syntax: '<color>';\n  }\n  \n  @property --color-secondary-300 {\n    inherits: true;\n    initial-value: #cbd5e1;\n    syntax: '<color>';\n  }\n  \n  @property --color-secondary-400 {\n    inherits: true;\n    initial-value: #94a3b8;\n    syntax: '<color>';\n  }\n  \n  @property --color-secondary-500 {\n    inherits: true;\n    initial-value: #64748b;\n    syntax: '<color>';\n  }\n  \n  @property --color-secondary-600 {\n    inherits: true;\n    initial-value: #475569;\n    syntax: '<color>';\n  }\n  \n  @property --color-secondary-700 {\n    inherits: true;\n    initial-value: #334155;\n    syntax: '<color>';\n  }\n  \n  @property --color-secondary-800 {\n    inherits: true;\n    initial-value: #1e293b;\n    syntax: '<color>';\n  }\n  \n  @property --color-secondary-900 {\n    inherits: true;\n    initial-value: #0f172a;\n    syntax: '<color>';\n  }\n\n  /* Success Color Scale */\n  @property --color-success-50 {\n    inherits: true;\n    initial-value: #ecfdf5;\n    syntax: '<color>';\n  }\n  \n  @property --color-success-100 {\n    inherits: true;\n    initial-value: #d1fae5;\n    syntax: '<color>';\n  }\n  \n  @property --color-success-200 {\n    inherits: true;\n    initial-value: #a7f3d0;\n    syntax: '<color>';\n  }\n  \n  @property --color-success-300 {\n    inherits: true;\n    initial-value: #6ee7b7;\n    syntax: '<color>';\n  }\n  \n  @property --color-success-400 {\n    inherits: true;\n    initial-value: #34d399;\n    syntax: '<color>';\n  }\n  \n  @property --color-success-500 {\n    inherits: true;\n    initial-value: #10b981;\n    syntax: '<color>';\n  }\n  \n  @property --color-success-600 {\n    inherits: true;\n    initial-value: #059669;\n    syntax: '<color>';\n  }\n  \n  @property --color-success-700 {\n    inherits: true;\n    initial-value: #047857;\n    syntax: '<color>';\n  }\n  \n  @property --color-success-800 {\n    inherits: true;\n    initial-value: #065f46;\n    syntax: '<color>';\n  }\n  \n  @property --color-success-900 {\n    inherits: true;\n    initial-value: #064e3b;\n    syntax: '<color>';\n  }\n\n  /* Warning Color Scale */\n  @property --color-warning-50 {\n    inherits: true;\n    initial-value: #fffbeb;\n    syntax: '<color>';\n  }\n  \n  @property --color-warning-100 {\n    inherits: true;\n    initial-value: #fef3c7;\n    syntax: '<color>';\n  }\n  \n  @property --color-warning-200 {\n    inherits: true;\n    initial-value: #fde68a;\n    syntax: '<color>';\n  }\n  \n  @property --color-warning-300 {\n    inherits: true;\n    initial-value: #fcd34d;\n    syntax: '<color>';\n  }\n  \n  @property --color-warning-400 {\n    inherits: true;\n    initial-value: #fbbf24;\n    syntax: '<color>';\n  }\n  \n  @property --color-warning-500 {\n    inherits: true;\n    initial-value: #f59e0b;\n    syntax: '<color>';\n  }\n  \n  @property --color-warning-600 {\n    inherits: true;\n    initial-value: #d97706;\n    syntax: '<color>';\n  }\n  \n  @property --color-warning-700 {\n    inherits: true;\n    initial-value: #b45309;\n    syntax: '<color>';\n  }\n  \n  @property --color-warning-800 {\n    inherits: true;\n    initial-value: #92400e;\n    syntax: '<color>';\n  }\n  \n  @property --color-warning-900 {\n    inherits: true;\n    initial-value: #78350f;\n    syntax: '<color>';\n  }\n\n  /* Error Color Scale */\n  @property --color-error-50 {\n    inherits: true;\n    initial-value: #fef2f2;\n    syntax: '<color>';\n  }\n  \n  @property --color-error-100 {\n    inherits: true;\n    initial-value: #fee2e2;\n    syntax: '<color>';\n  }\n  \n  @property --color-error-200 {\n    inherits: true;\n    initial-value: #fecaca;\n    syntax: '<color>';\n  }\n  \n  @property --color-error-300 {\n    inherits: true;\n    initial-value: #fca5a5;\n    syntax: '<color>';\n  }\n  \n  @property --color-error-400 {\n    inherits: true;\n    initial-value: #f87171;\n    syntax: '<color>';\n  }\n  \n  @property --color-error-500 {\n    inherits: true;\n    initial-value: #ef4444;\n    syntax: '<color>';\n  }\n  \n  @property --color-error-600 {\n    inherits: true;\n    initial-value: #dc2626;\n    syntax: '<color>';\n  }\n  \n  @property --color-error-700 {\n    inherits: true;\n    initial-value: #b91c1c;\n    syntax: '<color>';\n  }\n  \n  @property --color-error-800 {\n    inherits: true;\n    initial-value: #991b1b;\n    syntax: '<color>';\n  }\n  \n  @property --color-error-900 {\n    inherits: true;\n    initial-value: #7f1d1d;\n    syntax: '<color>';\n  }\n\n  /* Info Color Scale */\n  @property --color-info-50 {\n    inherits: true;\n    initial-value: #f0f9ff;\n    syntax: '<color>';\n  }\n  \n  @property --color-info-100 {\n    inherits: true;\n    initial-value: #e0f2fe;\n    syntax: '<color>';\n  }\n  \n  @property --color-info-200 {\n    inherits: true;\n    initial-value: #bae6fd;\n    syntax: '<color>';\n  }\n  \n  @property --color-info-300 {\n    inherits: true;\n    initial-value: #7dd3fc;\n    syntax: '<color>';\n  }\n  \n  @property --color-info-400 {\n    inherits: true;\n    initial-value: #38bdf8;\n    syntax: '<color>';\n  }\n  \n  @property --color-info-500 {\n    inherits: true;\n    initial-value: #0ea5e9;\n    syntax: '<color>';\n  }\n  \n  @property --color-info-600 {\n    inherits: true;\n    initial-value: #0284c7;\n    syntax: '<color>';\n  }\n  \n  @property --color-info-700 {\n    inherits: true;\n    initial-value: #0369a1;\n    syntax: '<color>';\n  }\n  \n  @property --color-info-800 {\n    inherits: true;\n    initial-value: #075985;\n    syntax: '<color>';\n  }\n  \n  @property --color-info-900 {\n    inherits: true;\n    initial-value: #0c4a6e;\n    syntax: '<color>';\n  }\n\n  /* Neutral Color Scale */\n  @property --color-neutral-50 {\n    inherits: true;\n    initial-value: #f9fafb;\n    syntax: '<color>';\n  }\n  \n  @property --color-neutral-100 {\n    inherits: true;\n    initial-value: #f3f4f6;\n    syntax: '<color>';\n  }\n  \n  @property --color-neutral-200 {\n    inherits: true;\n    initial-value: #e5e7eb;\n    syntax: '<color>';\n  }\n  \n  @property --color-neutral-300 {\n    inherits: true;\n    initial-value: #d1d5db;\n    syntax: '<color>';\n  }\n  \n  @property --color-neutral-400 {\n    inherits: true;\n    initial-value: #9ca3af;\n    syntax: '<color>';\n  }\n  \n  @property --color-neutral-500 {\n    inherits: true;\n    initial-value: #6b7280;\n    syntax: '<color>';\n  }\n  \n  @property --color-neutral-600 {\n    inherits: true;\n    initial-value: #4b5563;\n    syntax: '<color>';\n  }\n  \n  @property --color-neutral-700 {\n    inherits: true;\n    initial-value: #374151;\n    syntax: '<color>';\n  }\n  \n  @property --color-neutral-800 {\n    inherits: true;\n    initial-value: #1f2937;\n    syntax: '<color>';\n  }\n  \n  @property --color-neutral-900 {\n    inherits: true;\n    initial-value: #111827;\n    syntax: '<color>';\n  }\n\n  /* Gray Color Scale (alias für neutral) */\n  @property --color-gray-50 {\n    inherits: true;\n    initial-value: #f9fafb;\n    syntax: '<color>';\n  }\n  \n  @property --color-gray-100 {\n    inherits: true;\n    initial-value: #f3f4f6;\n    syntax: '<color>';\n  }\n  \n  @property --color-gray-200 {\n    inherits: true;\n    initial-value: #e5e7eb;\n    syntax: '<color>';\n  }\n  \n  @property --color-gray-300 {\n    inherits: true;\n    initial-value: #d1d5db;\n    syntax: '<color>';\n  }\n  \n  @property --color-gray-400 {\n    inherits: true;\n    initial-value: #9ca3af;\n    syntax: '<color>';\n  }\n  \n  @property --color-gray-500 {\n    inherits: true;\n    initial-value: #6b7280;\n    syntax: '<color>';\n  }\n  \n  @property --color-gray-600 {\n    inherits: true;\n    initial-value: #4b5563;\n    syntax: '<color>';\n  }\n  \n  @property --color-gray-700 {\n    inherits: true;\n    initial-value: #374151;\n    syntax: '<color>';\n  }\n  \n  @property --color-gray-800 {\n    inherits: true;\n    initial-value: #1f2937;\n    syntax: '<color>';\n  }\n  \n  @property --color-gray-900 {\n    inherits: true;\n    initial-value: #111827;\n    syntax: '<color>';\n  }\n\n  /* Text Color Scale */\n  @property --color-text-50 {\n    inherits: true;\n    initial-value: #f9fafb;\n    syntax: '<color>';\n  }\n  \n  @property --color-text-100 {\n    inherits: true;\n    initial-value: #f3f4f6;\n    syntax: '<color>';\n  }\n  \n  @property --color-text-200 {\n    inherits: true;\n    initial-value: #e5e7eb;\n    syntax: '<color>';\n  }\n  \n  @property --color-text-300 {\n    inherits: true;\n    initial-value: #d1d5db;\n    syntax: '<color>';\n  }\n  \n  @property --color-text-400 {\n    inherits: true;\n    initial-value: #9ca3af;\n    syntax: '<color>';\n  }\n  \n  @property --color-text-500 {\n    inherits: true;\n    initial-value: #6b7280;\n    syntax: '<color>';\n  }\n  \n  @property --color-text-600 {\n    inherits: true;\n    initial-value: #4b5563;\n    syntax: '<color>';\n  }\n  \n  @property --color-text-700 {\n    inherits: true;\n    initial-value: #374151;\n    syntax: '<color>';\n  }\n  \n  @property --color-text-800 {\n    inherits: true;\n    initial-value: #1f2937;\n    syntax: '<color>';\n  }\n  \n  @property --color-text-900 {\n    inherits: true;\n    initial-value: #111827;\n    syntax: '<color>';\n  }\n\n  /* Surface Color Scale */\n  @property --color-surface-50 {\n    inherits: true;\n    initial-value: #fafafa;\n    syntax: '<color>';\n  }\n  \n  @property --color-surface-100 {\n    inherits: true;\n    initial-value: #f5f5f5;\n    syntax: '<color>';\n  }\n  \n  @property --color-surface-200 {\n    inherits: true;\n    initial-value: #eee;\n    syntax: '<color>';\n  }\n  \n  @property --color-surface-300 {\n    inherits: true;\n    initial-value: #e0e0e0;\n    syntax: '<color>';\n  }\n\n  /* Border Color Scale */\n  @property --color-border-50 {\n    inherits: true;\n    initial-value: #fafafa;\n    syntax: '<color>';\n  }\n  \n  @property --color-border-100 {\n    inherits: true;\n    initial-value: #f4f4f5;\n    syntax: '<color>';\n  }\n  \n  @property --color-border-200 {\n    inherits: true;\n    initial-value: #e4e4e7;\n    syntax: '<color>';\n  }\n  \n  @property --color-border-300 {\n    inherits: true;\n    initial-value: #d4d4d8;\n    syntax: '<color>';\n  }\n}\n\n/* Fallback Values für alle Farbabstufungen */\n:root {\n  /* Primary Scale */\n  --color-primary-50: #eff6ff;\n  --color-primary-100: #dbeafe;\n  --color-primary-200: #bfdbfe;\n  --color-primary-300: #93c5fd;\n  --color-primary-400: #60a5fa;\n  --color-primary-500: #3b82f6;\n  --color-primary-600: #2563eb;\n  --color-primary-700: #1d4ed8;\n  --color-primary-800: #1e40af;\n  --color-primary-900: #1e3a8a;\n\n  /* Secondary Scale */\n  --color-secondary-50: #f8fafc;\n  --color-secondary-100: #f1f5f9;\n  --color-secondary-200: #e2e8f0;\n  --color-secondary-300: #cbd5e1;\n  --color-secondary-400: #94a3b8;\n  --color-secondary-500: #64748b;\n  --color-secondary-600: #475569;\n  --color-secondary-700: #334155;\n  --color-secondary-800: #1e293b;\n  --color-secondary-900: #0f172a;\n\n  /* Success Scale */\n  --color-success-50: #ecfdf5;\n  --color-success-100: #d1fae5;\n  --color-success-200: #a7f3d0;\n  --color-success-300: #6ee7b7;\n  --color-success-400: #34d399;\n  --color-success-500: #10b981;\n  --color-success-600: #059669;\n  --color-success-700: #047857;\n  --color-success-800: #065f46;\n  --color-success-900: #064e3b;\n\n  /* Warning Scale */\n  --color-warning-50: #fffbeb;\n  --color-warning-100: #fef3c7;\n  --color-warning-200: #fde68a;\n  --color-warning-300: #fcd34d;\n  --color-warning-400: #fbbf24;\n  --color-warning-500: #f59e0b;\n  --color-warning-600: #d97706;\n  --color-warning-700: #b45309;\n  --color-warning-800: #92400e;\n  --color-warning-900: #78350f;\n\n  /* Error Scale */\n  --color-error-50: #fef2f2;\n  --color-error-100: #fee2e2;\n  --color-error-200: #fecaca;\n  --color-error-300: #fca5a5;\n  --color-error-400: #f87171;\n  --color-error-500: #ef4444;\n  --color-error-600: #dc2626;\n  --color-error-700: #b91c1c;\n  --color-error-800: #991b1b;\n  --color-error-900: #7f1d1d;\n\n  /* Info Scale */\n  --color-info-50: #f0f9ff;\n  --color-info-100: #e0f2fe;\n  --color-info-200: #bae6fd;\n  --color-info-300: #7dd3fc;\n  --color-info-400: #38bdf8;\n  --color-info-500: #0ea5e9;\n  --color-info-600: #0284c7;\n  --color-info-700: #0369a1;\n  --color-info-800: #075985;\n  --color-info-900: #0c4a6e;\n\n  /* Neutral/Gray Scale */\n  --color-neutral-50: #f9fafb;\n  --color-neutral-100: #f3f4f6;\n  --color-neutral-200: #e5e7eb;\n  --color-neutral-300: #d1d5db;\n  --color-neutral-400: #9ca3af;\n  --color-neutral-500: #6b7280;\n  --color-neutral-600: #4b5563;\n  --color-neutral-700: #374151;\n  --color-neutral-800: #1f2937;\n  --color-neutral-900: #111827;\n  --color-gray-50: var(--color-neutral-50);\n  --color-gray-100: var(--color-neutral-100);\n  --color-gray-200: var(--color-neutral-200);\n  --color-gray-300: var(--color-neutral-300);\n  --color-gray-400: var(--color-neutral-400);\n  --color-gray-500: var(--color-neutral-500);\n  --color-gray-600: var(--color-neutral-600);\n  --color-gray-700: var(--color-neutral-700);\n  --color-gray-800: var(--color-neutral-800);\n  --color-gray-900: var(--color-neutral-900);\n\n  /* Text Scale */\n  --color-text-50: var(--color-neutral-50);\n  --color-text-100: var(--color-neutral-100);\n  --color-text-200: var(--color-neutral-200);\n  --color-text-300: var(--color-neutral-300);\n  --color-text-400: var(--color-neutral-400);\n  --color-text-500: var(--color-neutral-500);\n  --color-text-600: var(--color-neutral-600);\n  --color-text-700: var(--color-neutral-700);\n  --color-text-800: var(--color-neutral-800);\n  --color-text-900: var(--color-neutral-900);\n\n  /* Surface Scale */\n  --color-surface-50: #fafafa;\n  --color-surface-100: #f5f5f5;\n  --color-surface-200: #eee;\n  --color-surface-300: #e0e0e0;\n\n  /* Border Scale */\n  --color-border-50: #fafafa;\n  --color-border-100: #f4f4f5;\n  --color-border-200: #e4e4e7;\n  --color-border-300: #d4d4d8;\n\n  /* Basic Utility Colors */\n  --color-white: #fff;\n  --color-black: #000;\n  --color-transparent: transparent;\n\n  /* Semantic Color Aliases */\n  --color-danger: var(--color-error);\n  --color-danger-50: var(--color-error-50);\n  --color-danger-100: var(--color-error-100);\n  --color-danger-200: var(--color-error-200);\n  --color-danger-300: var(--color-error-300);\n  --color-danger-400: var(--color-error-400);\n  --color-danger-500: var(--color-error-500);\n  --color-danger-600: var(--color-error-600);\n  --color-danger-700: var(--color-error-700);\n  --color-danger-800: var(--color-error-800);\n  --color-danger-900: var(--color-error-900);\n\n  /* Social Media Brand Colors */\n  --color-twitter: #1da1f2;\n  --color-facebook: #4267b2;\n  --color-linkedin: #0077b5;\n  --color-github: #181717;\n  --color-youtube: #f00;\n  --color-instagram: #e4405f;\n\n  /* Additional utility colors */\n  --color-gray-very-dark: #1a1a1a;\n  --color-gray-medium: #6b6b6b;\n  --color-gray-very-light: #f2f2f2;\n  --color-overlay-dark: rgb(0 0 0 / 80%);\n  --color-overlay-medium: rgb(0 0 0 / 60%);\n}\n","/* Clean Layout Tokens */\n@layer tokens.properties {\n  :root {\n    --container-sm: 640px;\n    --container-md: 768px;\n  }\n}\n","/**\n * Icon Tokens\n */\n\n@layer tokens.values {\n  :root {\n    --icon-size-xs: 0.75rem;\n    --icon-size-sm: 1rem;\n    --icon-size-md: 1.25rem;\n    --icon-size-lg: 1.5rem;\n    --icon-size-xl: 2rem;\n    --icon-size-2xl: 2.5rem;\n    --icon-size-3xl: 3rem;\n    --icon-size-relative-xs: 0.5em;\n    --icon-size-relative-sm: 0.75em;\n    --icon-size-relative-md: 1em;\n    --icon-size-relative-lg: 1.25em;\n    --icon-size-relative-xl: 1.5em;\n    --icon-size-relative-2xl: 2em;\n    --icon-animation-duration-normal: 1s;\n    --icon-animation-duration-slow: 2s;\n  }\n}\n","/**\n * @casoon/dragonfly Schriftarten\n * \n * Diese Datei enthält Referenzen zu allen verfügbaren Schriftarten.\n * Importieren Sie diese Datei, um alle Schriftvariablen und Utility-Klassen zu verwenden,\n * ohne die Schriftarten selbst zu laden.\n */\n\n@layer typography.fonts {\n  :root {\n    /* Basis-Schriftfamilien */\n    --font-family-sans: system-ui, -apple-system, blinkmacsystemfont, \"segoe ui\", roboto, \"helvetica neue\", arial, sans-serif;\n    --font-family-serif: georgia, cambria, \"times new roman\", times, serif;\n    --font-family-mono: ui-monospace, sfmono-regular, menlo, monaco, consolas, \"liberation mono\", \"courier new\", monospace;\n    \n    /* Sans-Serif Schriftarten */\n    --font-family-anton: 'Anton', Impact, sans-serif;\n    --font-family-arimo: 'Arimo', system-ui, sans-serif;\n    --font-family-bebas-neue: 'Bebas Neue', sans-serif;\n    --font-family-cabin: 'Cabin', system-ui, sans-serif;\n    --font-family-dm-sans: 'DM Sans', system-ui, sans-serif;\n    --font-family-dosis: 'Dosis', system-ui, sans-serif;\n    --font-family-fira-sans: 'Fira Sans', system-ui, sans-serif;\n    --font-family-inter: 'Inter', system-ui, sans-serif;\n    --font-family-josefin-sans: 'Josefin Sans', system-ui, sans-serif;\n    --font-family-lato: 'Lato', system-ui, sans-serif;\n    --font-family-montserrat: 'Montserrat', system-ui, sans-serif;\n    --font-family-mukta: 'Mukta', system-ui, sans-serif;\n    --font-family-noto-sans: 'Noto Sans', system-ui, sans-serif;\n    --font-family-nunito: 'Nunito', system-ui, sans-serif;\n    --font-family-open-sans: 'Open Sans', system-ui, sans-serif;\n    --font-family-oswald: 'Oswald', system-ui, sans-serif;\n    --font-family-poppins: 'Poppins', system-ui, sans-serif;\n    --font-family-pt-sans: 'PT Sans', system-ui, sans-serif;\n    --font-family-quicksand: 'Quicksand', system-ui, sans-serif;\n    --font-family-raleway: 'Raleway', system-ui, sans-serif;\n    --font-family-roboto: 'Roboto', system-ui, sans-serif;\n    --font-family-roboto-condensed: 'Roboto Condensed', system-ui, sans-serif;\n    --font-family-source-sans-pro: 'Source Sans Pro', system-ui, sans-serif;\n    --font-family-teko: 'Teko', system-ui, sans-serif;\n    --font-family-titillium-web: 'Titillium Web', system-ui, sans-serif;\n    --font-family-ubuntu: 'Ubuntu', system-ui, sans-serif;\n    --font-family-work-sans: 'Work Sans', system-ui, sans-serif;\n    \n    /* Serif Schriftarten */\n    --font-family-merriweather: 'Merriweather', serif;\n    --font-family-playfair-display: 'Playfair Display', serif;\n    \n    /* Monospace Schriftarten */\n    --font-family-inconsolata: 'Inconsolata', monospace;\n    \n    /* Variable Schriftarten */\n    --font-family-inter-var: 'Inter Variable', system-ui, sans-serif;\n  }\n  \n  /* Basis-Schriftarten Utility-Klassen */\n  .font-sans { font-family: var(--font-family-sans); }\n\n  .font-serif { font-family: var(--font-family-serif); }\n\n  .font-mono { font-family: var(--font-family-mono); }\n  \n  /* Sans-Serif Utility-Klassen */\n  .font-anton { font-family: var(--font-family-anton); }\n\n  .font-arimo { font-family: var(--font-family-arimo); }\n\n  .font-bebas-neue { font-family: var(--font-family-bebas-neue); }\n\n  .font-cabin { font-family: var(--font-family-cabin); }\n\n  .font-dm-sans { font-family: var(--font-family-dm-sans); }\n\n  .font-dosis { font-family: var(--font-family-dosis); }\n\n  .font-fira-sans { font-family: var(--font-family-fira-sans); }\n\n  .font-inter { font-family: var(--font-family-inter); }\n\n  .font-josefin-sans { font-family: var(--font-family-josefin-sans); }\n\n  .font-lato { font-family: var(--font-family-lato); }\n\n  .font-montserrat { font-family: var(--font-family-montserrat); }\n\n  .font-mukta { font-family: var(--font-family-mukta); }\n\n  .font-noto-sans { font-family: var(--font-family-noto-sans); }\n\n  .font-nunito { font-family: var(--font-family-nunito); }\n\n  .font-open-sans { font-family: var(--font-family-open-sans); }\n\n  .font-oswald { font-family: var(--font-family-oswald); }\n\n  .font-poppins { font-family: var(--font-family-poppins); }\n\n  .font-pt-sans { font-family: var(--font-family-pt-sans); }\n\n  .font-quicksand { font-family: var(--font-family-quicksand); }\n\n  .font-raleway { font-family: var(--font-family-raleway); }\n\n  .font-roboto { font-family: var(--font-family-roboto); }\n\n  .font-roboto-condensed { font-family: var(--font-family-roboto-condensed); }\n\n  .font-source-sans-pro { font-family: var(--font-family-source-sans-pro); }\n\n  .font-teko { font-family: var(--font-family-teko); }\n\n  .font-titillium-web { font-family: var(--font-family-titillium-web); }\n\n  .font-ubuntu { font-family: var(--font-family-ubuntu); }\n\n  .font-work-sans { font-family: var(--font-family-work-sans); }\n  \n  /* Serif Utility-Klassen */\n  .font-merriweather { font-family: var(--font-family-merriweather); }\n\n  .font-playfair-display { font-family: var(--font-family-playfair-display); }\n  \n  /* Monospace Utility-Klassen */\n  .font-inconsolata { font-family: var(--font-family-inconsolata); }\n  \n  /* Variable Fonts Utility-Klassen */\n  .font-inter-var { font-family: var(--font-family-inter-var); }\n  \n  /* Font-Feature-Settings für erweiterte Typografie */\n  .font-features-normal { font-feature-settings: normal; }\n\n  .font-features-nums { font-feature-settings: \"tnum\" on, \"lnum\" on; }\n\n  .font-features-fractions { font-feature-settings: \"frac\" on; }\n\n  .font-features-stylistic { font-feature-settings: \"salt\" on; }\n  \n  /* Font-Varianten */\n  .font-variant-small-caps { font-variant: small-caps; }\n\n  .font-variant-ligatures { font-variant-ligatures: common-ligatures; }\n\n  .font-variant-numeric { font-variant-numeric: tabular-nums; }\n}\n\n/*\n * Um eine einzelne Schriftart zu laden, importieren Sie die entsprechende CSS-Datei:\n * \n * @import '@casoon/dragonfly/fonts/roboto/index.css';\n * \n * Oder für ein bestimmtes Gewicht:\n * \n * @import '@casoon/dragonfly/fonts/roboto/400.css';\n */ ","/**\n * Theme Tokens\n * \n * Comprehensive theme-specific tokens that extend the base design tokens.\n * These tokens provide a semantic layer for theme variants and enable\n * consistent theming across all components.\n * \n * @layer tokens.themes\n */\n\n@layer tokens.themes {\n  /* ================= THEME COLOR TOKENS ================= */\n  \n  /* Primary Theme Colors */\n  @property --theme-primary {\n    inherits: true;\n    initial-value: #4f46e5;\n    syntax: '<color>';\n  }\n  \n  @property --theme-primary-hover {\n    inherits: true;\n    initial-value: #4338ca;\n    syntax: '<color>';\n  }\n  \n  @property --theme-primary-active {\n    inherits: true;\n    initial-value: #3730a3;\n    syntax: '<color>';\n  }\n  \n  @property --theme-secondary {\n    inherits: true;\n    initial-value: #7c3aed;\n    syntax: '<color>';\n  }\n  \n  @property --theme-secondary-hover {\n    inherits: true;\n    initial-value: #6d28d9;\n    syntax: '<color>';\n  }\n  \n  @property --theme-secondary-active {\n    inherits: true;\n    initial-value: #5b21b6;\n    syntax: '<color>';\n  }\n  \n  /* Theme Surface Colors */\n  @property --theme-background {\n    inherits: true;\n    initial-value: #fff;\n    syntax: '<color>';\n  }\n  \n  @property --theme-background-subtle {\n    inherits: true;\n    initial-value: #f8fafc;\n    syntax: '<color>';\n  }\n  \n  @property --theme-surface {\n    inherits: true;\n    initial-value: #f1f5f9;\n    syntax: '<color>';\n  }\n  \n  @property --theme-surface-elevated {\n    inherits: true;\n    initial-value: #fff;\n    syntax: '<color>';\n  }\n  \n  @property --theme-surface-overlay {\n    inherits: true;\n    initial-value: rgb(255 255 255 / 9000%);\n    syntax: '<color>';\n  }\n  \n  /* Theme Text Colors */\n  @property --theme-text {\n    inherits: true;\n    initial-value: #1e293b;\n    syntax: '<color>';\n  }\n  \n  @property --theme-text-muted {\n    inherits: true;\n    initial-value: #64748b;\n    syntax: '<color>';\n  }\n  \n  @property --theme-text-subtle {\n    inherits: true;\n    initial-value: #94a3b8;\n    syntax: '<color>';\n  }\n  \n  @property --theme-text-inverse {\n    inherits: true;\n    initial-value: #fff;\n    syntax: '<color>';\n  }\n  \n  @property --theme-text-on-primary {\n    inherits: true;\n    initial-value: #fff;\n    syntax: '<color>';\n  }\n  \n  /* Theme Border Colors */\n  @property --theme-border {\n    inherits: true;\n    initial-value: #e2e8f0;\n    syntax: '<color>';\n  }\n  \n  @property --theme-border-strong {\n    inherits: true;\n    initial-value: #cbd5e1;\n    syntax: '<color>';\n  }\n  \n  @property --theme-border-subtle {\n    inherits: true;\n    initial-value: #f1f5f9;\n    syntax: '<color>';\n  }\n  \n  @property --theme-border-focus {\n    inherits: true;\n    initial-value: #4f46e5;\n    syntax: '<color>';\n  }\n  \n  /* ================= THEME EFFECT TOKENS ================= */\n  \n  /* Theme Shadows */\n  @property --theme-shadow-color {\n    inherits: true;\n    initial-value: rgb(0 0 0);\n    syntax: '<color>';\n  }\n  \n  @property --theme-shadow-opacity-sm {\n    inherits: true;\n    initial-value: 0.05;\n    syntax: '<number>';\n  }\n  \n  @property --theme-shadow-opacity-md {\n    inherits: true;\n    initial-value: 0.1;\n    syntax: '<number>';\n  }\n  \n  @property --theme-shadow-opacity-lg {\n    inherits: true;\n    initial-value: 0.15;\n    syntax: '<number>';\n  }\n  \n  @property --theme-shadow-opacity-xl {\n    inherits: true;\n    initial-value: 0.25;\n    syntax: '<number>';\n  }\n  \n  /* Theme Focus Effects */\n  @property --theme-focus-ring {\n    inherits: true;\n    initial-value: #4f46e5;\n    syntax: '<color>';\n  }\n  \n  @property --theme-focus-glow {\n    inherits: true;\n    initial-value: rgb(79 70 229 / 3000%);\n    syntax: '<color>';\n  }\n  \n  @property --theme-focus-ring-width {\n    inherits: true;\n    initial-value: 2px;\n    syntax: '<length>';\n  }\n  \n  @property --theme-focus-ring-offset {\n    inherits: true;\n    initial-value: 2px;\n    syntax: '<length>';\n  }\n  \n  /* Theme Backdrop Effects */\n  @property --theme-backdrop {\n    inherits: true;\n    initial-value: rgb(0 0 0 / 5000%);\n    syntax: '<color>';\n  }\n  \n  @property --theme-backdrop-blur {\n    inherits: true;\n    initial-value: 8px;\n    syntax: '<length>';\n  }\n  \n  /* Theme Gradient Colors */\n  @property --theme-gradient-start {\n    inherits: true;\n    initial-value: #4f46e5;\n    syntax: '<color>';\n  }\n  \n  @property --theme-gradient-end {\n    inherits: true;\n    initial-value: #7c3aed;\n    syntax: '<color>';\n  }\n  \n  @property --theme-gradient-accent {\n    inherits: true;\n    initial-value: #3b82f6;\n    syntax: '<color>';\n  }\n  \n  /* ================= THEME INTERACTION TOKENS ================= */\n  \n  /* Theme Hover States */\n  @property --theme-hover-opacity {\n    inherits: true;\n    initial-value: 0.8;\n    syntax: '<number>';\n  }\n  \n  @property --theme-hover-scale {\n    inherits: true;\n    initial-value: 1.05;\n    syntax: '<number>';\n  }\n  \n  /* Theme Active States */\n  @property --theme-active-opacity {\n    inherits: true;\n    initial-value: 0.9;\n    syntax: '<number>';\n  }\n  \n  @property --theme-active-scale {\n    inherits: true;\n    initial-value: 0.95;\n    syntax: '<number>';\n  }\n  \n  /* Theme Disabled States */\n  @property --theme-disabled-opacity {\n    inherits: true;\n    initial-value: 0.5;\n    syntax: '<number>';\n  }\n  \n  /* ================= THEME TRANSITION TOKENS ================= */\n  \n  /* Theme Transition Durations */\n  @property --theme-transition-fast {\n    inherits: true;\n    initial-value: 150ms;\n    syntax: '<time>';\n  }\n  \n  @property --theme-transition-normal {\n    inherits: true;\n    initial-value: 250ms;\n    syntax: '<time>';\n  }\n  \n  @property --theme-transition-slow {\n    inherits: true;\n    initial-value: 400ms;\n    syntax: '<time>';\n  }\n  \n  /* Theme Transition Easings */\n  @property --theme-ease-out {\n    inherits: true;\n    initial-value: cubic-bezier(0, 0, 0.2, 1);\n    syntax: '<custom-ident>';\n  }\n  \n  @property --theme-ease-in {\n    inherits: true;\n    initial-value: cubic-bezier(0.4, 0, 1, 1);\n    syntax: '<custom-ident>';\n  }\n  \n  @property --theme-ease-in-out {\n    inherits: true;\n    initial-value: cubic-bezier(0.4, 0, 0.2, 1);\n    syntax: '<custom-ident>';\n  }\n  \n  /* ================= THEME STATUS TOKENS ================= */\n  \n  /* Success Theme Colors */\n  @property --theme-success {\n    inherits: true;\n    initial-value: #10b981;\n    syntax: '<color>';\n  }\n  \n  @property --theme-success-bg {\n    inherits: true;\n    initial-value: #ecfdf5;\n    syntax: '<color>';\n  }\n  \n  @property --theme-success-border {\n    inherits: true;\n    initial-value: #a7f3d0;\n    syntax: '<color>';\n  }\n  \n  /* Warning Theme Colors */\n  @property --theme-warning {\n    inherits: true;\n    initial-value: #f59e0b;\n    syntax: '<color>';\n  }\n  \n  @property --theme-warning-bg {\n    inherits: true;\n    initial-value: #fffbeb;\n    syntax: '<color>';\n  }\n  \n  @property --theme-warning-border {\n    inherits: true;\n    initial-value: #fed7aa;\n    syntax: '<color>';\n  }\n  \n  /* Error Theme Colors */\n  @property --theme-error {\n    inherits: true;\n    initial-value: #ef4444;\n    syntax: '<color>';\n  }\n  \n  @property --theme-error-bg {\n    inherits: true;\n    initial-value: #fef2f2;\n    syntax: '<color>';\n  }\n  \n  @property --theme-error-border {\n    inherits: true;\n    initial-value: #fecaca;\n    syntax: '<color>';\n  }\n  \n  /* Info Theme Colors */\n  @property --theme-info {\n    inherits: true;\n    initial-value: #3b82f6;\n    syntax: '<color>';\n  }\n  \n  @property --theme-info-bg {\n    inherits: true;\n    initial-value: #eff6ff;\n    syntax: '<color>';\n  }\n  \n  @property --theme-info-border {\n    inherits: true;\n    initial-value: #bfdbfe;\n    syntax: '<color>';\n  }\n  \n  /* ================= THEME VARIANT TOKENS ================= */\n  \n  /* Light Theme Variant */\n  @property --theme-variant-light-bg {\n    inherits: true;\n    initial-value: #fff;\n    syntax: '<color>';\n  }\n  \n  @property --theme-variant-light-text {\n    inherits: true;\n    initial-value: #1e293b;\n    syntax: '<color>';\n  }\n  \n  /* Dark Theme Variant */\n  @property --theme-variant-dark-bg {\n    inherits: true;\n    initial-value: #1e293b;\n    syntax: '<color>';\n  }\n  \n  @property --theme-variant-dark-text {\n    inherits: true;\n    initial-value: #f1f5f9;\n    syntax: '<color>';\n  }\n  \n  /* High Contrast Theme Variant */\n  @property --theme-variant-contrast-bg {\n    inherits: true;\n    initial-value: #000;\n    syntax: '<color>';\n  }\n  \n  @property --theme-variant-contrast-text {\n    inherits: true;\n    initial-value: #fff;\n    syntax: '<color>';\n  }\n}\n","/**\n * Grid Layout System\n * \n * A comprehensive 12-column grid system with utility classes for modern web layouts.\n * This system provides flexible grid layouts using CSS Grid with semantic class names\n * and responsive capabilities.\n * \n * @layer layout.grid\n * @version 2.0\n * @author Design System Team\n * \n * FEATURES:\n * - 12-column grid system with flexible column spans\n * - Auto-fit and auto-fill grid layouts for responsive cards\n * - Subgrid support for nested layouts\n * - Semantic utility classes (.grid, .grid-cols-*, .col-span-*)\n * - CSS Grid native implementation (no flexbox fallbacks)\n * - Works with spacing.css for gap utilities\n * - Compatible with responsive-utilities.css for breakpoint variants\n * \n * GRID CLASSES:\n * - .grid: Base grid container\n * - .grid-cols-{1-12}: Define number of columns\n * - .col-span-{1-12}: Span multiple columns\n * - .col-span-full: Span all available columns\n * - .row-span-{1-6}: Span multiple rows\n * - .grid-auto-fit: Auto-fit responsive layout\n * - .grid-auto-fill: Auto-fill responsive layout\n * \n * LAYOUT VARIANTS:\n * - .layout-grid: Semantic grid with default gutter\n * - .layout-grid-{2,3,4,6}: Predefined column layouts\n * - .layout-grid-auto-fit: Responsive card layouts\n * \n * SUBGRID SUPPORT:\n * - .grid-subgrid: Inherit parent grid columns\n * - .row-subgrid: Inherit parent grid rows\n * \n * USAGE EXAMPLES:\n * \n * Basic Grid:\n * <div class=\"grid grid-cols-3 gap-4\">\n *   <div>Item 1</div>\n *   <div>Item 2</div>\n *   <div>Item 3</div>\n * </div>\n * \n * Responsive Card Layout:\n * <div class=\"grid-auto-fit gap-6\">\n *   <div class=\"card\">Card 1</div>\n *   <div class=\"card\">Card 2</div>\n *   <div class=\"card\">Card 3</div>\n * </div>\n * \n * Complex Layout:\n * <div class=\"grid grid-cols-12 gap-4\">\n *   <div class=\"col-span-8\">Main content</div>\n *   <div class=\"col-span-4\">Sidebar</div>\n *   <div class=\"col-span-full\">Footer</div>\n * </div>\n * \n * Subgrid Example:\n * <div class=\"grid grid-cols-4 gap-4\">\n *   <div class=\"col-span-2 grid-subgrid gap-2\">\n *     <div>Nested 1</div>\n *     <div>Nested 2</div>\n *   </div>\n * </div>\n * \n * RESPONSIVE USAGE:\n * Use with responsive-utilities.css for breakpoint-specific layouts:\n * <div class=\"grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4\">\n *   <!-- Responsive grid that adapts to screen size -->\n * </div>\n * \n * BROWSER SUPPORT:\n * - CSS Grid: All modern browsers (IE 11+ with -ms- prefix)\n * - Subgrid: Firefox 71+, Safari 16+, Chrome 117+\n * - Container Queries: Chrome 105+, Firefox 110+, Safari 16+\n * \n * PERFORMANCE NOTES:\n * - CSS Grid is highly optimized for layout performance\n * - Subgrid reduces layout recalculations\n * - Auto-fit/auto-fill are efficient for responsive designs\n * - Use gap properties instead of margins for better performance\n * \n * ACCESSIBILITY:\n * - Grid layouts maintain document flow for screen readers\n * - Use semantic HTML elements within grid containers\n * - Ensure logical tab order is preserved\n * - Test with keyboard navigation\n * \n * INTEGRATION:\n * - Works seamlessly with layout/containers.css for container sizing\n * - Combines with layout/spacing.css for gap utilities\n * - Enhanced by layout/responsive-utilities.css for responsive variants\n * - Compatible with layout/flex-layouts.css for hybrid layouts\n */\n\n@layer layout.grid {\n    /* ================= GRID-LAYOUT-SYSTEM ================= */\n\n    /* Basierend auf dem 12-Spalten-Grid-System, mit einheitlichen Abständen */\n    .layout-grid {\n        display: grid;\n        gap: var(--grid-gutter, 1rem);\n        grid-template-columns: repeat(var(--grid-columns, 12), 1fr);\n    }\n    \n    /* Varianten mit unterschiedlichen Spaltenanzahlen */\n    .layout-grid-2 {\n        display: grid;\n        gap: var(--grid-gutter, 1rem);\n        grid-template-columns: repeat(2, 1fr);\n    }\n    \n    .layout-grid-3 {\n        display: grid;\n        gap: var(--grid-gutter, 1rem);\n        grid-template-columns: repeat(3, 1fr);\n    }\n    \n    .layout-grid-4 {\n        display: grid;\n        gap: var(--grid-gutter, 1rem);\n        grid-template-columns: repeat(4, 1fr);\n    }\n    \n    .layout-grid-6 {\n        display: grid;\n        gap: var(--grid-gutter, 1rem);\n        grid-template-columns: repeat(6, 1fr);\n    }\n    \n    /* Auto-Fit Grid für responsive Karten-Layouts */\n    .layout-grid-auto-fit {\n        display: grid;\n        gap: var(--grid-gutter, 1rem);\n        grid-template-columns: repeat(auto-fit, minmax(var(--grid-auto-fit-min, 200px), 1fr));\n    }\n\n    /* ================= SUBGRID / NESTED ================= */\n\n    /* Komponenten für verschachtelte Grid-Layouts mit Subgrid */\n    .grid-subgrid {\n        display: grid;\n        grid-template-columns: subgrid;\n    }\n\n    .row-subgrid {\n        display: grid;\n        grid-template-rows: subgrid;\n    }\n\n    /* ================= GRID UTILITIES ================= */\n\n    /* Grid-Spalten */\n    .grid { display: grid; }\n    \n    .grid-cols-1 { grid-template-columns: repeat(1, 1fr); }\n    \n    .grid-cols-2 { grid-template-columns: repeat(2, 1fr); }\n    \n    .grid-cols-3 { grid-template-columns: repeat(3, 1fr); }\n    \n    .grid-cols-4 { grid-template-columns: repeat(4, 1fr); }\n    \n    .grid-cols-6 { grid-template-columns: repeat(6, 1fr); }\n    \n    .grid-cols-12 { grid-template-columns: repeat(12, 1fr); }\n    \n    .grid-auto-fit { grid-template-columns: repeat(auto-fit, minmax(var(--grid-auto-fit-min, 200px), 1fr)); }\n    \n    .grid-auto-fill { grid-template-columns: repeat(auto-fill, minmax(var(--grid-auto-fill-min, 200px), 1fr)); }\n\n    /* Spaltenspannen für Grid-Items */\n    .col-span-1 { grid-column: span 1; }\n    \n    .col-span-2 { grid-column: span 2; }\n    \n    .col-span-3 { grid-column: span 3; }\n    \n    .col-span-4 { grid-column: span 4; }\n    \n    .col-span-6 { grid-column: span 6; }\n    \n    .col-span-12 { grid-column: span 12; }\n    \n    .col-span-full { grid-column: 1 / -1; }\n\n    /* Grid-Zeilen */\n    .grid-rows-1 { grid-template-rows: repeat(1, 1fr); }\n\n    .grid-rows-2 { grid-template-rows: repeat(2, 1fr); }\n\n    .grid-rows-3 { grid-template-rows: repeat(3, 1fr); }\n\n    .grid-rows-4 { grid-template-rows: repeat(4, 1fr); }\n\n    .grid-rows-5 { grid-template-rows: repeat(5, 1fr); }\n\n    .grid-rows-6 { grid-template-rows: repeat(6, 1fr); }\n\n    /* Zeilen-Span */\n    .row-span-1 { grid-row: span 1; }\n\n    .row-span-2 { grid-row: span 2; }\n\n    .row-span-3 { grid-row: span 3; }\n\n    .row-span-4 { grid-row: span 4; }\n\n    .row-span-5 { grid-row: span 5; }\n\n    .row-span-6 { grid-row: span 6; }\n\n    .row-span-full { grid-row: 1 / -1; }\n} ","/**\n * Component-Specific Tokens\n * \n * Semantische Tokens für UI-Komponenten mit @property Definitionen.\n * Diese Tokens werden speziell für Komponenten verwendet und erweitern\n * die Basis-Token um komponentenspezifische Werte.\n * \n * @layer tokens.properties\n * @version 1.0.0\n * @author Dragonfly Design System\n */\n\n@layer tokens.properties {\n  /* Alert Component Tokens */\n  @property --alert-padding {\n    inherits: true;\n    initial-value: 1rem;\n    syntax: '<length>';\n  }\n  \n  @property --alert-padding-sm {\n    inherits: true;\n    initial-value: 0.5rem;\n    syntax: '<length>';\n  }\n  \n  @property --alert-padding-lg {\n    inherits: true;\n    initial-value: 1.25rem;\n    syntax: '<length>';\n  }\n  \n  @property --alert-gap {\n    inherits: true;\n    initial-value: 0.75rem;\n    syntax: '<length>';\n  }\n  \n  @property --alert-border-radius {\n    inherits: true;\n    initial-value: 0.5rem;\n    syntax: '<length>';\n  }\n  \n  /* Badge Component Tokens */\n  @property --badge-padding-xs {\n    inherits: true;\n    initial-value: 0.15rem 0.35rem;\n    syntax: '*';\n  }\n  \n  @property --badge-padding-sm {\n    inherits: true;\n    initial-value: 0.2rem 0.4rem;\n    syntax: '*';\n  }\n  \n  @property --badge-padding-md {\n    inherits: true;\n    initial-value: 0.25rem 0.5rem;\n    syntax: '*';\n  }\n  \n  @property --badge-padding-lg {\n    inherits: true;\n    initial-value: 0.3rem 0.6rem;\n    syntax: '*';\n  }\n  \n  @property --badge-min-width-xs {\n    inherits: true;\n    initial-value: 1.2rem;\n    syntax: '<length>';\n  }\n  \n  @property --badge-min-width-sm {\n    inherits: true;\n    initial-value: 1.5rem;\n    syntax: '<length>';\n  }\n  \n  @property --badge-min-width-md {\n    inherits: true;\n    initial-value: 1.75rem;\n    syntax: '<length>';\n  }\n  \n  @property --badge-min-width-lg {\n    inherits: true;\n    initial-value: 2rem;\n    syntax: '<length>';\n  }\n  \n  /* Card Component Tokens */\n  @property --card-padding {\n    inherits: true;\n    initial-value: 1rem;\n    syntax: '<length>';\n  }\n  \n  @property --card-padding-fluid {\n    inherits: true;\n    initial-value: 1.25rem;\n    syntax: '<length>';\n  }\n  \n  @property --card-gap {\n    inherits: true;\n    initial-value: 0.75rem;\n    syntax: '<length>';\n  }\n  \n  @property --card-grid-gap {\n    inherits: true;\n    initial-value: 1rem;\n    syntax: '<length>';\n  }\n  \n  @property --card-grid-min-width {\n    inherits: true;\n    initial-value: 250px;\n    syntax: '<length>';\n  }\n  \n  /* Button Component Tokens */\n  @property --button-padding-sm {\n    inherits: true;\n    initial-value: 0.5rem 0.75rem;\n    syntax: '*';\n  }\n  \n  @property --button-padding-md {\n    inherits: true;\n    initial-value: 0.75rem 1rem;\n    syntax: '*';\n  }\n  \n  @property --button-padding-lg {\n    inherits: true;\n    initial-value: 1rem 1.5rem;\n    syntax: '*';\n  }\n  \n  @property --button-height-sm {\n    inherits: true;\n    initial-value: 2rem;\n    syntax: '<length>';\n  }\n  \n  @property --button-height-md {\n    inherits: true;\n    initial-value: 2.5rem;\n    syntax: '<length>';\n  }\n  \n  @property --button-height-lg {\n    inherits: true;\n    initial-value: 3rem;\n    syntax: '<length>';\n  }\n  \n  /* Input Component Tokens */\n  @property --input-padding {\n    inherits: true;\n    initial-value: 0.75rem;\n    syntax: '<length>';\n  }\n  \n  @property --input-height {\n    inherits: true;\n    initial-value: 2.5rem;\n    syntax: '<length>';\n  }\n  \n  @property --input-border-width {\n    inherits: true;\n    initial-value: 1px;\n    syntax: '<length>';\n  }\n  \n  /* Modal Component Tokens */\n  @property --modal-padding {\n    inherits: true;\n    initial-value: 1.5rem;\n    syntax: '<length>';\n  }\n  \n  @property --modal-header-padding {\n    inherits: true;\n    initial-value: 1.5rem 1.5rem 1rem;\n    syntax: '*';\n  }\n  \n  @property --modal-footer-padding {\n    inherits: true;\n    initial-value: 1rem 1.5rem 1.5rem;\n    syntax: '*';\n  }\n  \n  @property --modal-max-width {\n    inherits: true;\n    initial-value: 32rem;\n    syntax: '<length>';\n  }\n  \n  /* Table Component Tokens */\n  @property --table-cell-padding {\n    inherits: true;\n    initial-value: 0.75rem;\n    syntax: '<length>';\n  }\n  \n  @property --table-header-padding {\n    inherits: true;\n    initial-value: 1rem 0.75rem;\n    syntax: '*';\n  }\n  \n  /* Avatar Component Tokens */\n  @property --avatar-size-xs {\n    inherits: true;\n    initial-value: 1.5rem;\n    syntax: '<length>';\n  }\n  \n  @property --avatar-size-sm {\n    inherits: true;\n    initial-value: 2rem;\n    syntax: '<length>';\n  }\n  \n  @property --avatar-size-md {\n    inherits: true;\n    initial-value: 2.5rem;\n    syntax: '<length>';\n  }\n  \n  @property --avatar-size-lg {\n    inherits: true;\n    initial-value: 3rem;\n    syntax: '<length>';\n  }\n  \n  @property --avatar-size-xl {\n    inherits: true;\n    initial-value: 4rem;\n    syntax: '<length>';\n  }\n  \n  /* Tooltip Component Tokens */\n  @property --tooltip-padding {\n    inherits: true;\n    initial-value: 0.5rem 0.75rem;\n    syntax: '*';\n  }\n  \n  @property --tooltip-max-width {\n    inherits: true;\n    initial-value: 200px;\n    syntax: '<length>';\n  }\n  \n  @property --tooltip-arrow-size {\n    inherits: true;\n    initial-value: 4px;\n    syntax: '<length>';\n  }\n  \n  /* Progress Component Tokens */\n  @property --progress-height {\n    inherits: true;\n    initial-value: 0.5rem;\n    syntax: '<length>';\n  }\n  \n  @property --progress-height-sm {\n    inherits: true;\n    initial-value: 0.25rem;\n    syntax: '<length>';\n  }\n  \n  @property --progress-height-lg {\n    inherits: true;\n    initial-value: 0.75rem;\n    syntax: '<length>';\n  }\n  \n  /* Spinner Component Tokens */\n  @property --spinner-size-sm {\n    inherits: true;\n    initial-value: 1rem;\n    syntax: '<length>';\n  }\n  \n  @property --spinner-size-md {\n    inherits: true;\n    initial-value: 1.5rem;\n    syntax: '<length>';\n  }\n  \n  @property --spinner-size-lg {\n    inherits: true;\n    initial-value: 2rem;\n    syntax: '<length>';\n  }\n  \n  @property --spinner-border-width {\n    inherits: true;\n    initial-value: 2px;\n    syntax: '<length>';\n  }\n  \n  /* Breadcrumb Component Tokens */\n  @property --breadcrumb-separator-spacing {\n    inherits: true;\n    initial-value: 0.5rem;\n    syntax: '<length>';\n  }\n  \n  @property --breadcrumb-item-padding {\n    inherits: true;\n    initial-value: 0.25rem 0.5rem;\n    syntax: '*';\n  }\n  \n  /* Tab Component Tokens */\n  @property --tab-padding {\n    inherits: true;\n    initial-value: 0.75rem 1rem;\n    syntax: '*';\n  }\n  \n  @property --tab-border-width {\n    inherits: true;\n    initial-value: 2px;\n    syntax: '<length>';\n  }\n  \n  /* Drawer Component Tokens */\n  @property --drawer-width {\n    inherits: true;\n    initial-value: 20rem;\n    syntax: '<length>';\n  }\n  \n  @property --drawer-padding {\n    inherits: true;\n    initial-value: 1.5rem;\n    syntax: '<length>';\n  }\n  \n  /* Pagination Component Tokens */\n  @property --pagination-item-size {\n    inherits: true;\n    initial-value: 2.5rem;\n    syntax: '<length>';\n  }\n  \n  @property --pagination-gap {\n    inherits: true;\n    initial-value: 0.25rem;\n    syntax: '<length>';\n  }\n  \n  /* Navigation/Menu Component Tokens */\n  @property --nav-padding {\n    inherits: true;\n    initial-value: 1rem;\n    syntax: '<length>';\n  }\n  \n  @property --nav-padding-compact {\n    inherits: true;\n    initial-value: 0.75rem;\n    syntax: '<length>';\n  }\n  \n  @property --nav-gap {\n    inherits: true;\n    initial-value: 1rem;\n    syntax: '<length>';\n  }\n  \n  @property --nav-gap-compact {\n    inherits: true;\n    initial-value: 0.5rem;\n    syntax: '<length>';\n  }\n  \n  @property --nav-item-padding {\n    inherits: true;\n    initial-value: 0.5rem 0.75rem;\n    syntax: '*';\n  }\n  \n  @property --nav-section-gap {\n    inherits: true;\n    initial-value: 1.5rem;\n    syntax: '<length>';\n  }\n  \n  /* Topbar specific tokens */\n  @property --topbar-min-height {\n    inherits: true;\n    initial-value: 3.5rem;\n    syntax: '<length>';\n  }\n  \n  @property --topbar-z-index {\n    inherits: true;\n    initial-value: 100;\n    syntax: '<integer>';\n  }\n  \n  @property --topbar-line-height {\n    inherits: true;\n    initial-value: 1.5;\n    syntax: '<number>';\n  }\n  \n  @property --topbar-transition {\n    inherits: true;\n    initial-value: all 0.2s ease;\n    syntax: '*';\n  }\n  \n  /* Sidebar specific tokens */\n  @property --sidebar-width {\n    inherits: true;\n    initial-value: 16rem;\n    syntax: '<length>';\n  }\n  \n  @property --sidebar-width-narrow {\n    inherits: true;\n    initial-value: 12rem;\n    syntax: '<length>';\n  }\n  \n  @property --sidebar-width-wide {\n    inherits: true;\n    initial-value: 20rem;\n    syntax: '<length>';\n  }\n  \n  @property --sidebar-width-collapsed {\n    inherits: true;\n    initial-value: 4rem;\n    syntax: '<length>';\n  }\n  \n  @property --sidebar-z-index {\n    inherits: true;\n    initial-value: 200;\n    syntax: '<integer>';\n  }\n  \n  @property --sidebar-line-height {\n    inherits: true;\n    initial-value: 1.5;\n    syntax: '<number>';\n  }\n  \n  @property --sidebar-shadow {\n    inherits: true;\n    initial-value: 0 1px 3px 0 rgb(0 0 0 / 1000%);\n    syntax: '*';\n  }\n  \n  @property --sidebar-transition {\n    inherits: true;\n    initial-value: width 0.3s ease;\n    syntax: '*';\n  }\n  \n  /* Mobile Navigation specific tokens */\n  @property --mobile-nav-width {\n    inherits: true;\n    initial-value: 20rem;\n    syntax: '<length>';\n  }\n  \n  @property --mobile-nav-width-narrow {\n    inherits: true;\n    initial-value: 16rem;\n    syntax: '<length>';\n  }\n  \n  @property --mobile-nav-width-wide {\n    inherits: true;\n    initial-value: 24rem;\n    syntax: '<length>';\n  }\n  \n  @property --mobile-nav-height {\n    inherits: true;\n    initial-value: 100;\n    syntax: '<length>';\n  }\n  \n  @property --mobile-nav-max-height {\n    inherits: true;\n    initial-value: 100;\n    syntax: '<length>';\n  }\n  \n  @property --mobile-nav-z-index {\n    inherits: true;\n    initial-value: 1000;\n    syntax: '<integer>';\n  }\n  \n  @property --mobile-nav-line-height {\n    inherits: true;\n    initial-value: 1.5;\n    syntax: '<number>';\n  }\n  \n  @property --mobile-nav-transition {\n    inherits: true;\n    initial-value: transform 0.3s ease;\n    syntax: '*';\n  }\n  \n  /* Off-canvas specific tokens */\n  @property --off-canvas-width {\n    inherits: true;\n    initial-value: 20rem;\n    syntax: '<length>';\n  }\n  \n  @property --off-canvas-width-narrow {\n    inherits: true;\n    initial-value: 16rem;\n    syntax: '<length>';\n  }\n  \n  @property --off-canvas-width-wide {\n    inherits: true;\n    initial-value: 24rem;\n    syntax: '<length>';\n  }\n  \n  @property --off-canvas-height {\n    inherits: true;\n    initial-value: 100;\n    syntax: '<length>';\n  }\n  \n  @property --off-canvas-max-height {\n    inherits: true;\n    initial-value: 100;\n    syntax: '<length>';\n  }\n  \n  @property --off-canvas-z-index {\n    inherits: true;\n    initial-value: 1000;\n    syntax: '<integer>';\n  }\n  \n  @property --off-canvas-line-height {\n    inherits: true;\n    initial-value: 1.5;\n    syntax: '<number>';\n  }\n  \n  @property --off-canvas-transition {\n    inherits: true;\n    initial-value: transform 0.3s ease;\n    syntax: '*';\n  }\n  \n  @property --off-canvas-backdrop {\n    inherits: true;\n    initial-value: rgb(0 0 0 / 5000%);\n    syntax: '<color>';\n  }\n  \n  /* Breadcrumb specific tokens */\n  @property --breadcrumb-line-height {\n    inherits: true;\n    initial-value: 1.5;\n    syntax: '<number>';\n  }\n  \n  /* Container and Header tokens that are referenced */\n  @property --container-7xl {\n    inherits: true;\n    initial-value: 80rem;\n    syntax: '<length>';\n  }\n  \n  @property --header-max-width {\n    inherits: true;\n    initial-value: 80rem;\n    syntax: '<length>';\n  }\n  \n  @property --header-transition {\n    inherits: true;\n    initial-value: all 0.2s ease;\n    syntax: '*';\n  }\n  \n  /* Pattern Component Tokens */\n  \n  /* Blog Pattern Tokens */\n  @property --blog-max-width {\n    inherits: true;\n    initial-value: 65ch;\n    syntax: '<length>';\n  }\n  \n  @property --blog-content-spacing {\n    inherits: true;\n    initial-value: 1.5rem;\n    syntax: '<length>';\n  }\n  \n  @property --blog-card-hover-transform {\n    inherits: true;\n    initial-value: translateY(-4px);\n    syntax: '*';\n  }\n  \n  /* Tag Pattern Tokens */\n  @property --tag-padding-sm {\n    inherits: true;\n    initial-value: 0.25rem 0.5rem;\n    syntax: '*';\n  }\n  \n  @property --tag-padding-md {\n    inherits: true;\n    initial-value: 0.375rem 0.75rem;\n    syntax: '*';\n  }\n  \n  @property --tag-padding-lg {\n    inherits: true;\n    initial-value: 0.5rem 1rem;\n    syntax: '*';\n  }\n  \n  @property --tag-border-radius {\n    inherits: true;\n    initial-value: 9999px;\n    syntax: '<length>';\n  }\n  \n  @property --tag-transition {\n    inherits: true;\n    initial-value: background-color 150ms ease-in-out;\n    syntax: '*';\n  }\n  \n  /* Code Pattern Tokens */\n  @property --code-padding {\n    inherits: true;\n    initial-value: 1rem;\n    syntax: '<length>';\n  }\n  \n  @property --code-inline-padding {\n    inherits: true;\n    initial-value: 0.25rem 0.5rem;\n    syntax: '*';\n  }\n  \n  @property --code-line-height {\n    inherits: true;\n    initial-value: 1.4;\n    syntax: '<number>';\n  }\n  \n  /* Widget Pattern Tokens */\n  @property --widget-header-padding {\n    inherits: true;\n    initial-value: 0.75rem 1rem;\n    syntax: '*';\n  }\n  \n  @property --widget-body-padding {\n    inherits: true;\n    initial-value: 1rem;\n    syntax: '<length>';\n  }\n  \n  @property --widget-footer-padding {\n    inherits: true;\n    initial-value: 0.75rem 1rem;\n    syntax: '*';\n  }\n  \n  @property --widget-action-padding {\n    inherits: true;\n    initial-value: 0.25rem 0.5rem;\n    syntax: '*';\n  }\n  \n  /* Skeleton Pattern Tokens */\n  @property --skeleton-height-sm {\n    inherits: true;\n    initial-value: 0.75rem;\n    syntax: '<length>';\n  }\n  \n  @property --skeleton-height-md {\n    inherits: true;\n    initial-value: 1rem;\n    syntax: '<length>';\n  }\n  \n  @property --skeleton-height-lg {\n    inherits: true;\n    initial-value: 1.5rem;\n    syntax: '<length>';\n  }\n  \n  @property --skeleton-animation-duration {\n    inherits: true;\n    initial-value: 1.5s;\n    syntax: '<time>';\n  }\n  \n  /* Social Media Brand Colors */\n  @property --color-twitter {\n    inherits: true;\n    initial-value: #1DA1F2;\n    syntax: '<color>';\n  }\n  \n  @property --color-facebook {\n    inherits: true;\n    initial-value: #4267B2;\n    syntax: '<color>';\n  }\n  \n  @property --color-linkedin {\n    inherits: true;\n    initial-value: #0077B5;\n    syntax: '<color>';\n  }\n\n  /* Region Component Tokens */\n  \n  /* Header Region Tokens */\n  @property --header-height-sm {\n    inherits: true;\n    initial-value: 48px;\n    syntax: '<length>';\n  }\n  \n  @property --header-height-md {\n    inherits: true;\n    initial-value: 64px;\n    syntax: '<length>';\n  }\n  \n  @property --header-height-lg {\n    inherits: true;\n    initial-value: 80px;\n    syntax: '<length>';\n  }\n  \n  @property --header-z-index {\n    inherits: true;\n    initial-value: 1000;\n    syntax: '<integer>';\n  }\n  \n  @property --header-line-height {\n    inherits: true;\n    initial-value: 1.5;\n    syntax: '<number>';\n  }\n  \n  @property --header-logo-max-height {\n    inherits: true;\n    initial-value: 40px;\n    syntax: '<length>';\n  }\n  \n  @property --header-hamburger-size {\n    inherits: true;\n    initial-value: 24px;\n    syntax: '<length>';\n  }\n  \n  @property --header-mobile-breakpoint {\n    inherits: true;\n    initial-value: 768px;\n    syntax: '<length>';\n  }\n  \n  /* Footer Region Tokens */\n  @property --footer-columns {\n    inherits: true;\n    initial-value: 4;\n    syntax: '<integer>';\n  }\n  \n  @property --footer-column-gap {\n    inherits: true;\n    initial-value: 2rem;\n    syntax: '<length>';\n  }\n  \n  @property --footer-line-height {\n    inherits: true;\n    initial-value: 1.6;\n    syntax: '<number>';\n  }\n  \n  /* Main Content Region Tokens */\n  @property --main-max-width {\n    inherits: true;\n    initial-value: 1200px;\n    syntax: '<length>';\n  }\n  \n  @property --main-max-width-narrow {\n    inherits: true;\n    initial-value: 800px;\n    syntax: '<length>';\n  }\n  \n  @property --main-max-width-wide {\n    inherits: true;\n    initial-value: 1400px;\n    syntax: '<length>';\n  }\n  \n  @property --main-line-height {\n    inherits: true;\n    initial-value: 1.6;\n    syntax: '<number>';\n  }\n  \n  @property --main-mobile-breakpoint {\n    inherits: true;\n    initial-value: 768px;\n    syntax: '<length>';\n  }\n  \n  @property --main-tablet-breakpoint {\n    inherits: true;\n    initial-value: 1024px;\n    syntax: '<length>';\n  }\n  \n  /* Sidebar Region Tokens */\n  @property --sidebar-grid-columns {\n    inherits: true;\n    initial-value: 3;\n    syntax: '<integer>';\n  }\n}\n\n/* Fallback Values for Component Tokens */\n:root {\n  /* Alert */\n  --alert-padding: var(--space-4);\n  --alert-padding-sm: var(--space-2);\n  --alert-padding-lg: var(--space-5);\n  --alert-gap: var(--space-3);\n  --alert-border-radius: var(--radius-md);\n  \n  /* Badge */\n  --badge-padding-xs: 0.15rem 0.35rem;\n  --badge-padding-sm: 0.2rem 0.4rem;\n  --badge-padding-md: 0.25rem 0.5rem;\n  --badge-padding-lg: 0.3rem 0.6rem;\n  --badge-min-width-xs: 1.2rem;\n  --badge-min-width-sm: 1.5rem;\n  --badge-min-width-md: 1.75rem;\n  --badge-min-width-lg: 2rem;\n  \n  /* Card */\n  --card-padding: var(--space-4);\n  --card-padding-fluid: var(--space-5);\n  --card-gap: var(--space-3);\n  --card-grid-gap: var(--space-4);\n  --card-grid-min-width: 250px;\n  \n  /* Button */\n  --button-padding-sm: 0.5rem 0.75rem;\n  --button-padding-md: 0.75rem 1rem;\n  --button-padding-lg: 1rem 1.5rem;\n  --button-height-sm: 2rem;\n  --button-height-md: 2.5rem;\n  --button-height-lg: 3rem;\n  \n  /* Input */\n  --input-padding: var(--space-3);\n  --input-height: 2.5rem;\n  --input-border-width: 1px;\n  \n  /* Modal */\n  --modal-padding: var(--space-6);\n  --modal-header-padding: 1.5rem 1.5rem 1rem;\n  --modal-footer-padding: 1rem 1.5rem 1.5rem;\n  --modal-max-width: 32rem;\n  \n  /* Table */\n  --table-cell-padding: var(--space-3);\n  --table-header-padding: 1rem 0.75rem;\n  \n  /* Avatar */\n  --avatar-size-xs: 1.5rem;\n  --avatar-size-sm: 2rem;\n  --avatar-size-md: 2.5rem;\n  --avatar-size-lg: 3rem;\n  --avatar-size-xl: 4rem;\n  \n  /* Tooltip */\n  --tooltip-padding: 0.5rem 0.75rem;\n  --tooltip-max-width: 200px;\n  --tooltip-arrow-size: 4px;\n  \n  /* Progress */\n  --progress-height: 0.5rem;\n  --progress-height-sm: 0.25rem;\n  --progress-height-lg: 0.75rem;\n  \n  /* Spinner */\n  --spinner-size-sm: 1rem;\n  --spinner-size-md: 1.5rem;\n  --spinner-size-lg: 2rem;\n  --spinner-border-width: 2px;\n  \n  /* Breadcrumb */\n  --breadcrumb-separator-spacing: 0.5rem;\n  --breadcrumb-item-padding: 0.25rem 0.5rem;\n  \n  /* Tab */\n  --tab-padding: 0.75rem 1rem;\n  --tab-border-width: 2px;\n  \n  /* Drawer */\n  --drawer-width: 20rem;\n  --drawer-padding: var(--space-6);\n  \n  /* Pagination */\n  --pagination-item-size: 2.5rem;\n  --pagination-gap: 0.25rem;\n  \n  /* Pattern Components */\n  \n  /* Blog Pattern */\n  --blog-max-width: 65ch;\n  --blog-content-spacing: var(--space-6);\n  --blog-card-hover-transform: translateY(-4px);\n  \n  /* Tag Pattern */\n  --tag-padding-sm: 0.25rem 0.5rem;\n  --tag-padding-md: 0.375rem 0.75rem;\n  --tag-padding-lg: 0.5rem 1rem;\n  --tag-border-radius: 9999px;\n  --tag-transition: background-color 150ms ease-in-out;\n  \n  /* Code Pattern */\n  --code-padding: var(--space-4);\n  --code-inline-padding: var(--space-1) var(--space-2);\n  --code-line-height: 1.4;\n  \n  /* Widget Pattern */\n  --widget-header-padding: var(--space-3) var(--space-4);\n  --widget-body-padding: var(--space-4);\n  --widget-footer-padding: var(--space-3) var(--space-4);\n  --widget-action-padding: var(--space-1) var(--space-2);\n  \n  /* Skeleton Pattern */\n  --skeleton-height-sm: 0.75rem;\n  --skeleton-height-md: 1rem;\n  --skeleton-height-lg: 1.5rem;\n  --skeleton-animation-duration: 1.5s;\n  \n  /* Social Media Brand Colors */\n  --color-twitter: #1DA1F2;\n  --color-facebook: #4267B2;\n  --color-linkedin: #0077B5;\n  \n  /* Region Components */\n  \n  /* Header Region */\n  --header-height-sm: 48px;\n  --header-height-md: 64px;\n  --header-height-lg: 80px;\n  --header-z-index: 1000;\n  --header-line-height: 1.5;\n  --header-logo-max-height: 40px;\n  --header-hamburger-size: 24px;\n  --header-mobile-breakpoint: 768px;\n  \n  /* Footer Region */\n  --footer-columns: 4;\n  --footer-column-gap: var(--space-8);\n  --footer-line-height: 1.6;\n  \n  /* Main Content Region */\n  --main-max-width: 1200px;\n  --main-max-width-narrow: 800px;\n  --main-max-width-wide: 1400px;\n  --main-line-height: 1.6;\n  --main-mobile-breakpoint: 768px;\n  --main-tablet-breakpoint: 1024px;\n  \n  /* Sidebar Region */\n  --sidebar-grid-columns: 3;\n} ","/**\n * Design Token Index\n * \n * Zentraler Import aller Design Tokens für das Dragonfly Design System.\n * Diese Datei importiert alle Token-Kategorien in der richtigen Reihenfolge.\n * \n * @layer tokens\n * @version 2.0.0\n * @author Dragonfly Design System\n */\n\n/* Core Design Tokens */\n@import url('./colors.css');\n@import url('./spacing.css');\n@import url('./typography.css');\n@import url('./radius.css');\n@import url('./shadows.css');\n@import url('./layout.css');\n@import url('./transitions.css');\n@import url('./effects.css');\n@import url('./themes.css');\n@import url('./icons.css');\n\n/* Component-Specific Tokens */\n@import url('./components.css'); ","/*\n * Accessibility - Keyboard Navigation\n *\n * Styles und Utilities für verbesserte Keyboard-Navigation und Fokus-Management.\n * Diese Datei enthält Definitionen für konsistente Fokus-Ringe und Keyboard-Navigation.\n */\n\n@layer accessibility {\n  /*\n   * Globale Fokus-Stile\n   * \n   * Diese Fokus-Stile werden auf alle fokussierbaren Elemente angewendet.\n   * Der Fokus-Ring ist nur sichtbar, wenn das Element per Tastatur fokussiert wird.\n   */\n  \n  /* Default-Fokus entfernen, um eigene Stile zu verwenden */\n  :focus {\n    outline: none;\n  }\n  \n  /* Fokus-Ring nur anzeigen, wenn per Tastatur navigiert wird */\n  :focus-visible {\n    outline: var(--focus-ring);\n    outline-offset: var(--focus-ring-offset);\n    position: relative;\n    z-index: var(--z-index-2);\n  }\n  \n  /* \n   * Visuelles Feedback optimieren\n   * \n   * Verbessert die Sichtbarkeit von fokussierten Elementen\n   * in verschiedenen Bereichen der Benutzeroberfläche.\n   */\n  \n  /* Angepasster Fokus-Ring für Formular-Elemente */\n  input:focus-visible,\n  select:focus-visible,\n  textarea:focus-visible,\n  button:focus-visible,\n  [role=\"button\"]:focus-visible {\n    border-color: var(--color-border-focus);\n    outline: var(--focus-ring);\n    outline-offset: var(--focus-ring-offset);\n  }\n  \n  /* Angepasster Fokus-Ring für Links */\n  a:focus-visible {\n    outline: var(--focus-ring);\n    outline-offset: var(--focus-ring-offset);\n    text-decoration: underline;\n  }\n  \n  /* Angepasster Fokus-Ring für interaktive Container */\n  [tabindex]:focus-visible,\n  [role=\"tab\"]:focus-visible,\n  [role=\"menuitem\"]:focus-visible,\n  [role=\"option\"]:focus-visible {\n    outline: var(--focus-ring);\n    outline-offset: var(--focus-ring-offset);\n  }\n  \n  /* Utility-Klassen für fokussierbare Elemente */\n  .focus-ring-inset {\n    --focus-ring-offset: -var(--border-width-thick);\n  }\n  \n  .focus-ring-large {\n    --focus-ring: 0 0 0 var(--spacing-1) var(--color-focus-ring);\n  }\n  \n  /* \n   * Skip-Links für Keyboard-Navigation \n   *\n   * Links, die es Tastatur-Benutzern ermöglichen, direkt zum Hauptinhalt zu springen.\n   * Normalerweise versteckt, aber sichtbar, wenn sie fokussiert werden.\n   */\n  .skip-link {\n    clip: rect(0 0 0 0);\n    height: var(--border-width);\n    margin: calc(-1 * var(--border-width));\n    overflow: hidden;\n    padding: 0;\n    position: absolute;\n    white-space: nowrap;\n    width: var(--border-width);\n  }\n  \n  .skip-link:focus-visible {\n    background-color: var(--color-surface);\n    border: var(--border-width) solid var(--color-border);\n    border-radius: var(--border-radius-md);\n    box-shadow: var(--shadow-md);\n    clip: auto;\n    color: var(--color-text-primary);\n    font-weight: var(--font-weight-semibold);\n    height: auto;\n    left: var(--spacing-2);\n    padding: 1var(--border-width-thick) var(--spacing-4);\n    top: var(--spacing-2);\n    white-space: normal;\n    width: auto;\n    z-index: var(--z-index-toast);\n  }\n  \n  /*\n   * Keyboard-Navigation-Helfer\n   * \n   * Helfer-Klassen zur Verbesserung der Tastatur-Navigation.\n   */\n  \n  /* Für Elemente, die nur visuell angeklickt werden können, aber per Tastatur fokussierbar sein sollten */\n  .keyboard-focusable {\n    cursor: pointer;\n  }\n  \n  .keyboard-focusable:not([tabindex]) {\n    tabindex: \"0\";\n  }\n  \n  /* Für Elemente, die per Tastatur nicht fokussierbar sein sollten */\n  .keyboard-no-focus {\n    tabindex: \"-1\";\n  }\n  \n  /* \n   * Tastatur-Modifikator-Erkennung\n   * \n   * Diese Klasse wird automatisch vom Theme-Helper-Script zum <html>-Element hinzugefügt,\n   * wenn der Benutzer per Tastatur navigiert. Dies ermöglicht gezieltes Styling nur für\n   * Tastatur-Benutzer.\n   */\n  .keyboard-user [tabindex]:focus,\n  .keyboard-user a:focus,\n  .keyboard-user button:focus,\n  .keyboard-user input:focus,\n  .keyboard-user select:focus,\n  .keyboard-user textarea:focus {\n    outline: var(--focus-ring);\n    outline-offset: var(--focus-ring-offset);\n  }\n} ","/**\n * Farbsystem\n * \n * Diese Datei definiert die komplette Farbpalette des Designsystems mit \n * modernen OKLCH-Farbwerten für optimale Farbwiedergabe und -konsistenz.\n * \n * Das Farbsystem besteht aus:\n * - Hauptfarbpaletten (Blau, Grün, Rot, etc.) mit jeweils 10 Abstufungen\n * - Neutrale Farbpaletten (Grau, Warm-Grau) für UI-Elemente\n * - Utility-Klassen für Text- und Hintergrundfarben\n * \n * Alle Farben sind im OKLCH-Farbraum definiert, der folgende Vorteile bietet:\n * - Perceptive Gleichmäßigkeit der Farbabstufungen\n * - Erweiterten Farbraum verglichen mit RGB/sRGB\n * - Bessere Barrierefreiheit durch vorhersagbare Kontraste\n * \n * @hinweis Diese Datei wird vor color-mix.css geladen und stellt die Basis-Farbwerte bereit\n * @technisch Verwendet den modernen OKLCH-Farbraum für optimale Farbwiedergabe\n */\n\n@layer colors {\n    :root {\n        /* Blautöne */\n        --color-blue-50: oklch(95% 0.05 250deg);\n        --color-blue-100: oklch(90% 0.1 250deg);\n        --color-blue-200: oklch(85% 0.15 250deg);\n        --color-blue-300: oklch(80% 0.2 250deg);\n        --color-blue-400: oklch(75% 0.25 250deg);\n        --color-blue-500: oklch(70% 0.3 250deg);\n        --color-blue-600: oklch(65% 0.35 250deg);\n        --color-blue-700: oklch(60% 0.4 250deg);\n        --color-blue-800: oklch(55% 0.45 250deg);\n        --color-blue-900: oklch(50% 0.5 250deg);\n\n        /* Hellblautöne */\n        --color-sky-50: oklch(95% 0.05 230deg);\n        --color-sky-100: oklch(90% 0.1 230deg);\n        --color-sky-200: oklch(85% 0.15 230deg);\n        --color-sky-300: oklch(80% 0.2 230deg);\n        --color-sky-400: oklch(75% 0.25 230deg);\n        --color-sky-500: oklch(70% 0.3 230deg);\n        --color-sky-600: oklch(65% 0.35 230deg);\n        --color-sky-700: oklch(60% 0.4 230deg);\n        --color-sky-800: oklch(55% 0.45 230deg);\n        --color-sky-900: oklch(50% 0.5 230deg);\n\n        /* Türkistöne */\n        --color-cyan-50: oklch(95% 0.05 200deg);\n        --color-cyan-100: oklch(90% 0.1 200deg);\n        --color-cyan-200: oklch(85% 0.15 200deg);\n        --color-cyan-300: oklch(80% 0.2 200deg);\n        --color-cyan-400: oklch(75% 0.25 200deg);\n        --color-cyan-500: oklch(70% 0.3 200deg);\n        --color-cyan-600: oklch(65% 0.35 200deg);\n        --color-cyan-700: oklch(60% 0.4 200deg);\n        --color-cyan-800: oklch(55% 0.45 200deg);\n        --color-cyan-900: oklch(50% 0.5 200deg);\n\n        /* Minttöne */\n        --color-mint-50: oklch(95% 0.05 170deg);\n        --color-mint-100: oklch(90% 0.1 170deg);\n        --color-mint-200: oklch(85% 0.15 170deg);\n        --color-mint-300: oklch(80% 0.2 170deg);\n        --color-mint-400: oklch(75% 0.25 170deg);\n        --color-mint-500: oklch(70% 0.3 170deg);\n        --color-mint-600: oklch(65% 0.35 170deg);\n        --color-mint-700: oklch(60% 0.4 170deg);\n        --color-mint-800: oklch(55% 0.45 170deg);\n        --color-mint-900: oklch(50% 0.5 170deg);\n\n        /* Grüntöne */\n        --color-green-50: oklch(95% 0.05 150deg);\n        --color-green-100: oklch(90% 0.1 150deg);\n        --color-green-200: oklch(85% 0.15 150deg);\n        --color-green-300: oklch(80% 0.2 150deg);\n        --color-green-400: oklch(75% 0.25 150deg);\n        --color-green-500: oklch(70% 0.3 150deg);\n        --color-green-600: oklch(65% 0.35 150deg);\n        --color-green-700: oklch(60% 0.4 150deg);\n        --color-green-800: oklch(55% 0.45 150deg);\n        --color-green-900: oklch(50% 0.5 150deg);\n\n        /* Limettöne */\n        --color-lime-50: oklch(95% 0.05 120deg);\n        --color-lime-100: oklch(90% 0.1 120deg);\n        --color-lime-200: oklch(85% 0.15 120deg);\n        --color-lime-300: oklch(80% 0.2 120deg);\n        --color-lime-400: oklch(75% 0.25 120deg);\n        --color-lime-500: oklch(70% 0.3 120deg);\n        --color-lime-600: oklch(65% 0.35 120deg);\n        --color-lime-700: oklch(60% 0.4 120deg);\n        --color-lime-800: oklch(55% 0.45 120deg);\n        --color-lime-900: oklch(50% 0.5 120deg);\n\n        /* Gelbtöne */\n        --color-yellow-50: oklch(95% 0.1 80deg);\n        --color-yellow-100: oklch(90% 0.15 80deg);\n        --color-yellow-200: oklch(85% 0.2 80deg);\n        --color-yellow-300: oklch(80% 0.25 80deg);\n        --color-yellow-400: oklch(75% 0.3 80deg);\n        --color-yellow-500: oklch(70% 0.35 80deg);\n        --color-yellow-600: oklch(65% 0.4 80deg);\n        --color-yellow-700: oklch(60% 0.45 80deg);\n        --color-yellow-800: oklch(55% 0.5 80deg);\n        --color-yellow-900: oklch(50% 0.55 80deg);\n\n        /* Goldtöne */\n        --color-gold-50: oklch(95% 0.1 65deg);\n        --color-gold-100: oklch(90% 0.15 65deg);\n        --color-gold-200: oklch(85% 0.2 65deg);\n        --color-gold-300: oklch(80% 0.25 65deg);\n        --color-gold-400: oklch(75% 0.3 65deg);\n        --color-gold-500: oklch(70% 0.35 65deg);\n        --color-gold-600: oklch(65% 0.4 65deg);\n        --color-gold-700: oklch(60% 0.45 65deg);\n        --color-gold-800: oklch(55% 0.5 65deg);\n        --color-gold-900: oklch(50% 0.55 65deg);\n\n        /* Orangetöne */\n        --color-orange-50: oklch(95% 0.1 50deg);\n        --color-orange-100: oklch(90% 0.15 50deg);\n        --color-orange-200: oklch(85% 0.2 50deg);\n        --color-orange-300: oklch(80% 0.25 50deg);\n        --color-orange-400: oklch(75% 0.3 50deg);\n        --color-orange-500: oklch(70% 0.35 50deg);\n        --color-orange-600: oklch(65% 0.4 50deg);\n        --color-orange-700: oklch(60% 0.45 50deg);\n        --color-orange-800: oklch(55% 0.5 50deg);\n        --color-orange-900: oklch(50% 0.55 50deg);\n\n        /* Koralltöne */\n        --color-coral-50: oklch(95% 0.1 40deg);\n        --color-coral-100: oklch(90% 0.15 40deg);\n        --color-coral-200: oklch(85% 0.2 40deg);\n        --color-coral-300: oklch(80% 0.25 40deg);\n        --color-coral-400: oklch(75% 0.3 40deg);\n        --color-coral-500: oklch(70% 0.35 40deg);\n        --color-coral-600: oklch(65% 0.4 40deg);\n        --color-coral-700: oklch(60% 0.45 40deg);\n        --color-coral-800: oklch(55% 0.5 40deg);\n        --color-coral-900: oklch(50% 0.55 40deg);\n\n        /* Rottöne */\n        --color-red-50: oklch(95% 0.1 30deg);\n        --color-red-100: oklch(90% 0.15 30deg);\n        --color-red-200: oklch(85% 0.2 30deg);\n        --color-red-300: oklch(80% 0.25 30deg);\n        --color-red-400: oklch(75% 0.3 30deg);\n        --color-red-500: oklch(70% 0.35 30deg);\n        --color-red-600: oklch(65% 0.4 30deg);\n        --color-red-700: oklch(60% 0.45 30deg);\n        --color-red-800: oklch(55% 0.5 30deg);\n        --color-red-900: oklch(50% 0.55 30deg);\n\n        /* Pinktöne */\n        --color-pink-50: oklch(95% 0.1 0deg);\n        --color-pink-100: oklch(90% 0.15 0deg);\n        --color-pink-200: oklch(85% 0.2 0deg);\n        --color-pink-300: oklch(80% 0.25 0deg);\n        --color-pink-400: oklch(75% 0.3 0deg);\n        --color-pink-500: oklch(70% 0.35 0deg);\n        --color-pink-600: oklch(65% 0.4 0deg);\n        --color-pink-700: oklch(60% 0.45 0deg);\n        --color-pink-800: oklch(55% 0.5 0deg);\n        --color-pink-900: oklch(50% 0.55 0deg);\n\n        /* Rosatöne */\n        --color-rose-50: oklch(95% 0.1 10deg);\n        --color-rose-100: oklch(90% 0.15 10deg);\n        --color-rose-200: oklch(85% 0.2 10deg);\n        --color-rose-300: oklch(80% 0.25 10deg);\n        --color-rose-400: oklch(75% 0.3 10deg);\n        --color-rose-500: oklch(70% 0.35 10deg);\n        --color-rose-600: oklch(65% 0.4 10deg);\n        --color-rose-700: oklch(60% 0.45 10deg);\n        --color-rose-800: oklch(55% 0.5 10deg);\n        --color-rose-900: oklch(50% 0.55 10deg);\n\n        /* Violetttöne */\n        --color-purple-50: oklch(95% 0.05 350deg);\n        --color-purple-100: oklch(90% 0.1 350deg);\n        --color-purple-200: oklch(85% 0.15 350deg);\n        --color-purple-300: oklch(80% 0.2 350deg);\n        --color-purple-400: oklch(75% 0.25 350deg);\n        --color-purple-500: oklch(70% 0.3 350deg);\n        --color-purple-600: oklch(65% 0.35 350deg);\n        --color-purple-700: oklch(60% 0.4 350deg);\n        --color-purple-800: oklch(55% 0.45 350deg);\n        --color-purple-900: oklch(50% 0.5 350deg);\n\n        /* Indigotöne */\n        --color-indigo-50: oklch(95% 0.05 300deg);\n        --color-indigo-100: oklch(90% 0.1 300deg);\n        --color-indigo-200: oklch(85% 0.15 300deg);\n        --color-indigo-300: oklch(80% 0.2 300deg);\n        --color-indigo-400: oklch(75% 0.25 300deg);\n        --color-indigo-500: oklch(70% 0.3 300deg);\n        --color-indigo-600: oklch(65% 0.35 300deg);\n        --color-indigo-700: oklch(60% 0.4 300deg);\n        --color-indigo-800: oklch(55% 0.45 300deg);\n        --color-indigo-900: oklch(50% 0.5 300deg);\n\n        /* Grautöne */\n        --color-gray-50: oklch(98% 0.02 250deg);\n        --color-gray-100: oklch(95% 0.02 250deg);\n        --color-gray-200: oklch(90% 0.02 250deg);\n        --color-gray-300: oklch(85% 0.02 250deg);\n        --color-gray-400: oklch(80% 0.02 250deg);\n        --color-gray-500: oklch(75% 0.02 250deg);\n        --color-gray-600: oklch(70% 0.02 250deg);\n        --color-gray-700: oklch(65% 0.02 250deg);\n        --color-gray-800: oklch(60% 0.02 250deg);\n        --color-gray-900: oklch(55% 0.02 250deg);\n        \n        /* System-Grautöne (mit Hue-Berechnung) */\n        --color-gray-hue: 262;\n        --color-system-gray-100: oklch(98.7% 0.003 var(--color-gray-hue));\n        --color-system-gray-200: oklch(97.4% 0.004 var(--color-gray-hue));\n        --color-system-gray-300: oklch(94.2% 0.006 var(--color-gray-hue));\n        --color-system-gray-400: oklch(89% 0.01 var(--color-gray-hue));\n        --color-system-gray-500: oklch(81% 0.014 var(--color-gray-hue));\n        --color-system-gray-600: oklch(68% 0.018 var(--color-gray-hue));\n        --color-system-gray-700: oklch(54% 0.02 var(--color-gray-hue));\n        --color-system-gray-800: oklch(36% 0.015 var(--color-gray-hue));\n        --color-system-gray-900: oklch(22% 0.01 var(--color-gray-hue));\n\n        /* Warme Grautöne */\n        --color-warm-gray-50: oklch(98% 0.02 30deg);\n        --color-warm-gray-100: oklch(95% 0.02 30deg);\n        --color-warm-gray-200: oklch(90% 0.02 30deg);\n        --color-warm-gray-300: oklch(85% 0.02 30deg);\n        --color-warm-gray-400: oklch(80% 0.02 30deg);\n        --color-warm-gray-500: oklch(75% 0.02 30deg);\n        --color-warm-gray-600: oklch(70% 0.02 30deg);\n        --color-warm-gray-700: oklch(65% 0.02 30deg);\n        --color-warm-gray-800: oklch(60% 0.02 30deg);\n        --color-warm-gray-900: oklch(55% 0.02 30deg);\n\n        /* Kalte Grautöne */\n        --color-cool-gray-50: oklch(98% 0.02 270deg);\n        --color-cool-gray-100: oklch(95% 0.02 270deg);\n        --color-cool-gray-200: oklch(90% 0.02 270deg);\n        --color-cool-gray-300: oklch(85% 0.02 270deg);\n        --color-cool-gray-400: oklch(80% 0.02 270deg);\n        --color-cool-gray-500: oklch(75% 0.02 270deg);\n        --color-cool-gray-600: oklch(70% 0.02 270deg);\n        --color-cool-gray-700: oklch(65% 0.02 270deg);\n        --color-cool-gray-800: oklch(60% 0.02 270deg);\n        --color-cool-gray-900: oklch(55% 0.02 270deg);\n\n        /* Reines Weiß und Schwarz */\n        --color-white: oklch(100% 0 0deg);\n        --color-black: oklch(0 0 0deg);\n\n        /* Alias für häufig verwendete Farben */\n        --color-text: var(--color-gray-900);\n        --color-text-secondary: var(--color-gray-600);\n        --color-background: var(--color-gray-50);\n        --color-background-secondary: var(--color-gray-100);\n        --color-background-tertiary: var(--color-gray-200);\n        --color-border: var(--color-gray-300);\n\n        /* Azurtöne */\n        --color-azure-50: oklch(95% 0.05 240deg);\n        --color-azure-100: oklch(90% 0.1 240deg);\n        --color-azure-200: oklch(85% 0.15 240deg);\n        --color-azure-300: oklch(80% 0.2 240deg);\n        --color-azure-400: oklch(75% 0.25 240deg);\n        --color-azure-500: oklch(70% 0.3 240deg);\n        --color-azure-600: oklch(65% 0.35 240deg);\n        --color-azure-700: oklch(60% 0.4 240deg);\n        --color-azure-800: oklch(55% 0.45 240deg);\n        --color-azure-900: oklch(50% 0.5 240deg);\n\n        /* Tealtöne */\n        --color-teal-50: oklch(95% 0.05 190deg);\n        --color-teal-100: oklch(90% 0.1 190deg);\n        --color-teal-200: oklch(85% 0.15 190deg);\n        --color-teal-300: oklch(80% 0.2 190deg);\n        --color-teal-400: oklch(75% 0.25 190deg);\n        --color-teal-500: oklch(70% 0.3 190deg);\n        --color-teal-600: oklch(65% 0.35 190deg);\n        --color-teal-700: oklch(60% 0.4 190deg);\n        --color-teal-800: oklch(55% 0.45 190deg);\n        --color-teal-900: oklch(50% 0.5 190deg);\n\n        /* Smaragdtöne */\n        --color-emerald-50: oklch(95% 0.1 165deg);\n        --color-emerald-100: oklch(90% 0.15 165deg);\n        --color-emerald-200: oklch(85% 0.2 165deg);\n        --color-emerald-300: oklch(80% 0.25 165deg);\n        --color-emerald-400: oklch(75% 0.3 165deg);\n        --color-emerald-500: oklch(70% 0.35 165deg);\n        --color-emerald-600: oklch(65% 0.4 165deg);\n        --color-emerald-700: oklch(60% 0.45 165deg);\n        --color-emerald-800: oklch(55% 0.5 165deg);\n        --color-emerald-900: oklch(50% 0.55 165deg);\n\n        /* Olivtöne */\n        --color-olive-50: oklch(95% 0.05 110deg);\n        --color-olive-100: oklch(90% 0.1 110deg);\n        --color-olive-200: oklch(85% 0.15 110deg);\n        --color-olive-300: oklch(80% 0.2 110deg);\n        --color-olive-400: oklch(75% 0.25 110deg);\n        --color-olive-500: oklch(70% 0.3 110deg);\n        --color-olive-600: oklch(65% 0.35 110deg);\n        --color-olive-700: oklch(60% 0.4 110deg);\n        --color-olive-800: oklch(55% 0.45 110deg);\n        --color-olive-900: oklch(50% 0.5 110deg);\n\n        /* Bernstein */\n        --color-amber-50: oklch(95% 0.1 70deg);\n        --color-amber-100: oklch(90% 0.15 70deg);\n        --color-amber-200: oklch(85% 0.2 70deg);\n        --color-amber-300: oklch(80% 0.25 70deg);\n        --color-amber-400: oklch(75% 0.3 70deg);\n        --color-amber-500: oklch(70% 0.35 70deg);\n        --color-amber-600: oklch(65% 0.4 70deg);\n        --color-amber-700: oklch(60% 0.45 70deg);\n        --color-amber-800: oklch(55% 0.5 70deg);\n        --color-amber-900: oklch(50% 0.55 70deg);\n\n        /* Kupfertöne */\n        --color-copper-50: oklch(95% 0.1 45deg);\n        --color-copper-100: oklch(90% 0.15 45deg);\n        --color-copper-200: oklch(85% 0.2 45deg);\n        --color-copper-300: oklch(80% 0.25 45deg);\n        --color-copper-400: oklch(75% 0.3 45deg);\n        --color-copper-500: oklch(70% 0.35 45deg);\n        --color-copper-600: oklch(65% 0.4 45deg);\n        --color-copper-700: oklch(60% 0.45 45deg);\n        --color-copper-800: oklch(55% 0.5 45deg);\n        --color-copper-900: oklch(50% 0.55 45deg);\n\n        /* Kirschtöne */\n        --color-cherry-50: oklch(95% 0.1 20deg);\n        --color-cherry-100: oklch(90% 0.15 20deg);\n        --color-cherry-200: oklch(85% 0.2 20deg);\n        --color-cherry-300: oklch(80% 0.25 20deg);\n        --color-cherry-400: oklch(75% 0.3 20deg);\n        --color-cherry-500: oklch(70% 0.35 20deg);\n        --color-cherry-600: oklch(65% 0.4 20deg);\n        --color-cherry-700: oklch(60% 0.45 20deg);\n        --color-cherry-800: oklch(55% 0.5 20deg);\n        --color-cherry-900: oklch(50% 0.55 20deg);\n\n        /* Magentatöne */\n        --color-magenta-50: oklch(95% 0.1 340deg);\n        --color-magenta-100: oklch(90% 0.15 340deg);\n        --color-magenta-200: oklch(85% 0.2 340deg);\n        --color-magenta-300: oklch(80% 0.25 340deg);\n        --color-magenta-400: oklch(75% 0.3 340deg);\n        --color-magenta-500: oklch(70% 0.35 340deg);\n        --color-magenta-600: oklch(65% 0.4 340deg);\n        --color-magenta-700: oklch(60% 0.45 340deg);\n        --color-magenta-800: oklch(55% 0.5 340deg);\n        --color-magenta-900: oklch(50% 0.55 340deg);\n\n        /* Lavendeltöne */\n        --color-lavender-50: oklch(95% 0.05 320deg);\n        --color-lavender-100: oklch(90% 0.1 320deg);\n        --color-lavender-200: oklch(85% 0.15 320deg);\n        --color-lavender-300: oklch(80% 0.2 320deg);\n        --color-lavender-400: oklch(75% 0.25 320deg);\n        --color-lavender-500: oklch(70% 0.3 320deg);\n        --color-lavender-600: oklch(65% 0.35 320deg);\n        --color-lavender-700: oklch(60% 0.4 320deg);\n        --color-lavender-800: oklch(55% 0.45 320deg);\n        --color-lavender-900: oklch(50% 0.5 320deg);\n\n        /* Bronzetöne */\n        --color-bronze-50: oklch(95% 0.1 40deg);\n        --color-bronze-100: oklch(90% 0.15 40deg);\n        --color-bronze-200: oklch(85% 0.2 40deg);\n        --color-bronze-300: oklch(80% 0.25 40deg);\n        --color-bronze-400: oklch(75% 0.3 40deg);\n        --color-bronze-500: oklch(70% 0.35 40deg);\n        --color-bronze-600: oklch(65% 0.4 40deg);\n        --color-bronze-700: oklch(60% 0.45 40deg);\n        --color-bronze-800: oklch(55% 0.5 40deg);\n        --color-bronze-900: oklch(50% 0.55 40deg);\n\n        /* Perltöne */\n        --color-pearl-50: oklch(98% 0.01 0deg);\n        --color-pearl-100: oklch(95% 0.01 0deg);\n        --color-pearl-200: oklch(92% 0.01 0deg);\n        --color-pearl-300: oklch(89% 0.01 0deg);\n        --color-pearl-400: oklch(86% 0.01 0deg);\n        --color-pearl-500: oklch(83% 0.01 0deg);\n        --color-pearl-600: oklch(80% 0.01 0deg);\n        --color-pearl-700: oklch(77% 0.01 0deg);\n        --color-pearl-800: oklch(74% 0.01 0deg);\n        --color-pearl-900: oklch(71% 0.01 0deg);\n\n        /* Champagnertöne */\n        --color-champagne-50: oklch(98% 0.02 60deg);\n        --color-champagne-100: oklch(95% 0.02 60deg);\n        --color-champagne-200: oklch(92% 0.02 60deg);\n        --color-champagne-300: oklch(89% 0.02 60deg);\n        --color-champagne-400: oklch(86% 0.02 60deg);\n        --color-champagne-500: oklch(83% 0.02 60deg);\n        --color-champagne-600: oklch(80% 0.02 60deg);\n        --color-champagne-700: oklch(77% 0.02 60deg);\n        --color-champagne-800: oklch(74% 0.02 60deg);\n        --color-champagne-900: oklch(71% 0.02 60deg);\n\n        /* Tauptöne */\n        --color-taupe-50: oklch(95% 0.02 20deg);\n        --color-taupe-100: oklch(90% 0.02 20deg);\n        --color-taupe-200: oklch(85% 0.02 20deg);\n        --color-taupe-300: oklch(80% 0.02 20deg);\n        --color-taupe-400: oklch(75% 0.02 20deg);\n        --color-taupe-500: oklch(70% 0.02 20deg);\n        --color-taupe-600: oklch(65% 0.02 20deg);\n        --color-taupe-700: oklch(60% 0.02 20deg);\n        --color-taupe-800: oklch(55% 0.02 20deg);\n        --color-taupe-900: oklch(50% 0.02 20deg);\n\n        /* Beigetöne */\n        --color-beige-50: oklch(98% 0.02 80deg);\n        --color-beige-100: oklch(95% 0.02 80deg);\n        --color-beige-200: oklch(92% 0.02 80deg);\n        --color-beige-300: oklch(89% 0.02 80deg);\n        --color-beige-400: oklch(86% 0.02 80deg);\n        --color-beige-500: oklch(83% 0.02 80deg);\n        --color-beige-600: oklch(80% 0.02 80deg);\n        --color-beige-700: oklch(77% 0.02 80deg);\n        --color-beige-800: oklch(74% 0.02 80deg);\n        --color-beige-900: oklch(71% 0.02 80deg);\n\n        /* Khakitöne */\n        --color-khaki-50: oklch(95% 0.05 100deg);\n        --color-khaki-100: oklch(90% 0.05 100deg);\n        --color-khaki-200: oklch(85% 0.05 100deg);\n        --color-khaki-300: oklch(80% 0.05 100deg);\n        --color-khaki-400: oklch(75% 0.05 100deg);\n        --color-khaki-500: oklch(70% 0.05 100deg);\n        --color-khaki-600: oklch(65% 0.05 100deg);\n        --color-khaki-700: oklch(60% 0.05 100deg);\n        --color-khaki-800: oklch(55% 0.05 100deg);\n        --color-khaki-900: oklch(50% 0.05 100deg);\n\n        /* Terrakottatöne */\n        --color-terracotta-50: oklch(95% 0.1 25deg);\n        --color-terracotta-100: oklch(90% 0.15 25deg);\n        --color-terracotta-200: oklch(85% 0.2 25deg);\n        --color-terracotta-300: oklch(80% 0.25 25deg);\n        --color-terracotta-400: oklch(75% 0.3 25deg);\n        --color-terracotta-500: oklch(70% 0.35 25deg);\n        --color-terracotta-600: oklch(65% 0.4 25deg);\n        --color-terracotta-700: oklch(60% 0.45 25deg);\n        --color-terracotta-800: oklch(55% 0.5 25deg);\n        --color-terracotta-900: oklch(50% 0.55 25deg);\n\n        /* Burgundertöne */\n        --color-burgundy-50: oklch(95% 0.1 350deg);\n        --color-burgundy-100: oklch(90% 0.15 350deg);\n        --color-burgundy-200: oklch(85% 0.2 350deg);\n        --color-burgundy-300: oklch(80% 0.25 350deg);\n        --color-burgundy-400: oklch(75% 0.3 350deg);\n        --color-burgundy-500: oklch(70% 0.35 350deg);\n        --color-burgundy-600: oklch(65% 0.4 350deg);\n        --color-burgundy-700: oklch(60% 0.45 350deg);\n        --color-burgundy-800: oklch(55% 0.5 350deg);\n        --color-burgundy-900: oklch(50% 0.55 350deg);\n\n        /* Silbertöne */\n        --color-silver-50: oklch(98% 0.01 250deg);\n        --color-silver-100: oklch(95% 0.01 250deg);\n        --color-silver-200: oklch(92% 0.01 250deg);\n        --color-silver-300: oklch(89% 0.01 250deg);\n        --color-silver-400: oklch(86% 0.01 250deg);\n        --color-silver-500: oklch(83% 0.01 250deg);\n        --color-silver-600: oklch(80% 0.01 250deg);\n        --color-silver-700: oklch(77% 0.01 250deg);\n        --color-silver-800: oklch(74% 0.01 250deg);\n        --color-silver-900: oklch(71% 0.01 250deg);\n\n        /* Platinatöne */\n        --color-platinum-50: oklch(98% 0.01 270deg);\n        --color-platinum-100: oklch(95% 0.01 270deg);\n        --color-platinum-200: oklch(92% 0.01 270deg);\n        --color-platinum-300: oklch(89% 0.01 270deg);\n        --color-platinum-400: oklch(86% 0.01 270deg);\n        --color-platinum-500: oklch(83% 0.01 270deg);\n        --color-platinum-600: oklch(80% 0.01 270deg);\n        --color-platinum-700: oklch(77% 0.01 270deg);\n        --color-platinum-800: oklch(74% 0.01 270deg);\n        --color-platinum-900: oklch(71% 0.01 270deg);\n\n        /* Graphittöne */\n        --color-graphite-50: oklch(95% 0.02 280deg);\n        --color-graphite-100: oklch(90% 0.02 280deg);\n        --color-graphite-200: oklch(85% 0.02 280deg);\n        --color-graphite-300: oklch(80% 0.02 280deg);\n        --color-graphite-400: oklch(75% 0.02 280deg);\n        --color-graphite-500: oklch(70% 0.02 280deg);\n        --color-graphite-600: oklch(65% 0.02 280deg);\n        --color-graphite-700: oklch(60% 0.02 280deg);\n        --color-graphite-800: oklch(55% 0.02 280deg);\n        --color-graphite-900: oklch(50% 0.02 280deg);\n\n        /* Moostöne */\n        --color-moss-50: oklch(95% 0.05 140deg);\n        --color-moss-100: oklch(90% 0.05 140deg);\n        --color-moss-200: oklch(85% 0.05 140deg);\n        --color-moss-300: oklch(80% 0.05 140deg);\n        --color-moss-400: oklch(75% 0.05 140deg);\n        --color-moss-500: oklch(70% 0.05 140deg);\n        --color-moss-600: oklch(65% 0.05 140deg);\n        --color-moss-700: oklch(60% 0.05 140deg);\n        --color-moss-800: oklch(55% 0.05 140deg);\n        --color-moss-900: oklch(50% 0.05 140deg);\n\n        /* Jade */\n        --color-jade-50: oklch(95% 0.1 150deg);\n        --color-jade-100: oklch(90% 0.15 150deg);\n        --color-jade-200: oklch(85% 0.2 150deg);\n        --color-jade-300: oklch(80% 0.25 150deg);\n        --color-jade-400: oklch(75% 0.3 150deg);\n        --color-jade-500: oklch(70% 0.35 150deg);\n        --color-jade-600: oklch(65% 0.4 150deg);\n        --color-jade-700: oklch(60% 0.45 150deg);\n        --color-jade-800: oklch(55% 0.5 150deg);\n        --color-jade-900: oklch(50% 0.55 150deg);\n\n        /* Saphir */\n        --color-sapphire-50: oklch(95% 0.1 260deg);\n        --color-sapphire-100: oklch(90% 0.15 260deg);\n        --color-sapphire-200: oklch(85% 0.2 260deg);\n        --color-sapphire-300: oklch(80% 0.25 260deg);\n        --color-sapphire-400: oklch(75% 0.3 260deg);\n        --color-sapphire-500: oklch(70% 0.35 260deg);\n        --color-sapphire-600: oklch(65% 0.4 260deg);\n        --color-sapphire-700: oklch(60% 0.45 260deg);\n        --color-sapphire-800: oklch(55% 0.5 260deg);\n        --color-sapphire-900: oklch(50% 0.55 260deg);\n\n        /* Rubin */\n        --color-ruby-50: oklch(95% 0.1 0deg);\n        --color-ruby-100: oklch(90% 0.15 0deg);\n        --color-ruby-200: oklch(85% 0.2 0deg);\n        --color-ruby-300: oklch(80% 0.25 0deg);\n        --color-ruby-400: oklch(75% 0.3 0deg);\n        --color-ruby-500: oklch(70% 0.35 0deg);\n        --color-ruby-600: oklch(65% 0.4 0deg);\n        --color-ruby-700: oklch(60% 0.45 0deg);\n        --color-ruby-800: oklch(55% 0.5 0deg);\n        --color-ruby-900: oklch(50% 0.55 0deg);\n\n        /* Amethyst */\n        --color-amethyst-50: oklch(95% 0.1 310deg);\n        --color-amethyst-100: oklch(90% 0.15 310deg);\n        --color-amethyst-200: oklch(85% 0.2 310deg);\n        --color-amethyst-300: oklch(80% 0.25 310deg);\n        --color-amethyst-400: oklch(75% 0.3 310deg);\n        --color-amethyst-500: oklch(70% 0.35 310deg);\n        --color-amethyst-600: oklch(65% 0.4 310deg);\n        --color-amethyst-700: oklch(60% 0.45 310deg);\n        --color-amethyst-800: oklch(55% 0.5 310deg);\n        --color-amethyst-900: oklch(50% 0.55 310deg);\n\n        /* Topas */\n        --color-topaz-50: oklch(95% 0.1 65deg);\n        --color-topaz-100: oklch(90% 0.15 65deg);\n        --color-topaz-200: oklch(85% 0.2 65deg);\n        --color-topaz-300: oklch(80% 0.25 65deg);\n        --color-topaz-400: oklch(75% 0.3 65deg);\n        --color-topaz-500: oklch(70% 0.35 65deg);\n        --color-topaz-600: oklch(65% 0.4 65deg);\n        --color-topaz-700: oklch(60% 0.45 65deg);\n        --color-topaz-800: oklch(55% 0.5 65deg);\n        --color-topaz-900: oklch(50% 0.55 65deg);\n\n        /* Zitrin */\n        --color-citrine-50: oklch(95% 0.1 85deg);\n        --color-citrine-100: oklch(90% 0.15 85deg);\n        --color-citrine-200: oklch(85% 0.2 85deg);\n        --color-citrine-300: oklch(80% 0.25 85deg);\n        --color-citrine-400: oklch(75% 0.3 85deg);\n        --color-citrine-500: oklch(70% 0.35 85deg);\n        --color-citrine-600: oklch(65% 0.4 85deg);\n        --color-citrine-700: oklch(60% 0.45 85deg);\n        --color-citrine-800: oklch(55% 0.5 85deg);\n        --color-citrine-900: oklch(50% 0.55 85deg);\n\n        /* Peridot */\n        --color-peridot-50: oklch(95% 0.1 135deg);\n        --color-peridot-100: oklch(90% 0.15 135deg);\n        --color-peridot-200: oklch(85% 0.2 135deg);\n        --color-peridot-300: oklch(80% 0.25 135deg);\n        --color-peridot-400: oklch(75% 0.3 135deg);\n        --color-peridot-500: oklch(70% 0.35 135deg);\n        --color-peridot-600: oklch(65% 0.4 135deg);\n        --color-peridot-700: oklch(60% 0.45 135deg);\n        --color-peridot-800: oklch(55% 0.5 135deg);\n        --color-peridot-900: oklch(50% 0.55 135deg);\n\n        /* Opal */\n        --color-opal-50: oklch(98% 0.01 205deg);\n        --color-opal-100: oklch(95% 0.01 205deg);\n        --color-opal-200: oklch(92% 0.01 205deg);\n        --color-opal-300: oklch(89% 0.01 205deg);\n        --color-opal-400: oklch(86% 0.01 205deg);\n        --color-opal-500: oklch(83% 0.01 205deg);\n        --color-opal-600: oklch(80% 0.01 205deg);\n        --color-opal-700: oklch(77% 0.01 205deg);\n        --color-opal-800: oklch(74% 0.01 205deg);\n        --color-opal-900: oklch(71% 0.01 205deg);\n\n        /* Granat */\n        --color-garnet-50: oklch(95% 0.1 5deg);\n        --color-garnet-100: oklch(90% 0.15 5deg);\n        --color-garnet-200: oklch(85% 0.2 5deg);\n        --color-garnet-300: oklch(80% 0.25 5deg);\n        --color-garnet-400: oklch(75% 0.3 5deg);\n        --color-garnet-500: oklch(70% 0.35 5deg);\n        --color-garnet-600: oklch(65% 0.4 5deg);\n        --color-garnet-700: oklch(60% 0.45 5deg);\n        --color-garnet-800: oklch(55% 0.5 5deg);\n        --color-garnet-900: oklch(50% 0.55 5deg);\n\n        /* Onyx */\n        --color-onyx-50: oklch(95% 0.01 280deg);\n        --color-onyx-100: oklch(90% 0.01 280deg);\n        --color-onyx-200: oklch(85% 0.01 280deg);\n        --color-onyx-300: oklch(80% 0.01 280deg);\n        --color-onyx-400: oklch(75% 0.01 280deg);\n        --color-onyx-500: oklch(70% 0.01 280deg);\n        --color-onyx-600: oklch(65% 0.01 280deg);\n        --color-onyx-700: oklch(60% 0.01 280deg);\n        --color-onyx-800: oklch(55% 0.01 280deg);\n        --color-onyx-900: oklch(50% 0.01 280deg);\n\n        /* Malachit */\n        --color-malachite-50: oklch(95% 0.1 170deg);\n        --color-malachite-100: oklch(90% 0.15 170deg);\n        --color-malachite-200: oklch(85% 0.2 170deg);\n        --color-malachite-300: oklch(80% 0.25 170deg);\n        --color-malachite-400: oklch(75% 0.3 170deg);\n        --color-malachite-500: oklch(70% 0.35 170deg);\n        --color-malachite-600: oklch(65% 0.4 170deg);\n        --color-malachite-700: oklch(60% 0.45 170deg);\n        --color-malachite-800: oklch(55% 0.5 170deg);\n        --color-malachite-900: oklch(50% 0.55 170deg);\n\n        /* Lapislazuli */\n        --color-lapis-50: oklch(95% 0.1 270deg);\n        --color-lapis-100: oklch(90% 0.15 270deg);\n        --color-lapis-200: oklch(85% 0.2 270deg);\n        --color-lapis-300: oklch(80% 0.25 270deg);\n        --color-lapis-400: oklch(75% 0.3 270deg);\n        --color-lapis-500: oklch(70% 0.35 270deg);\n        --color-lapis-600: oklch(65% 0.4 270deg);\n        --color-lapis-700: oklch(60% 0.45 270deg);\n        --color-lapis-800: oklch(55% 0.5 270deg);\n        --color-lapis-900: oklch(50% 0.55 270deg);\n\n        /* Türkis */\n        --color-turquoise-50: oklch(95% 0.1 200deg);\n        --color-turquoise-100: oklch(90% 0.15 200deg);\n        --color-turquoise-200: oklch(85% 0.2 200deg);\n        --color-turquoise-300: oklch(80% 0.25 200deg);\n        --color-turquoise-400: oklch(75% 0.3 200deg);\n        --color-turquoise-500: oklch(70% 0.35 200deg);\n        --color-turquoise-600: oklch(65% 0.4 200deg);\n        --color-turquoise-700: oklch(60% 0.45 200deg);\n        --color-turquoise-800: oklch(55% 0.5 200deg);\n        --color-turquoise-900: oklch(50% 0.55 200deg);\n\n        /* Koralle */\n        --color-coral-50: oklch(95% 0.1 20deg);\n        --color-coral-100: oklch(90% 0.15 20deg);\n        --color-coral-200: oklch(85% 0.2 20deg);\n        --color-coral-300: oklch(80% 0.25 20deg);\n        --color-coral-400: oklch(75% 0.3 20deg);\n        --color-coral-500: oklch(70% 0.35 20deg);\n        --color-coral-600: oklch(65% 0.4 20deg);\n        --color-coral-700: oklch(60% 0.45 20deg);\n        --color-coral-800: oklch(55% 0.5 20deg);\n        --color-coral-900: oklch(50% 0.55 20deg);\n\n        /* Perlmutt */\n        --color-mother-of-pearl-50: oklch(98% 0.01 0deg);\n        --color-mother-of-pearl-100: oklch(95% 0.01 0deg);\n        --color-mother-of-pearl-200: oklch(92% 0.01 0deg);\n        --color-mother-of-pearl-300: oklch(89% 0.01 0deg);\n        --color-mother-of-pearl-400: oklch(86% 0.01 0deg);\n        --color-mother-of-pearl-500: oklch(83% 0.01 0deg);\n        --color-mother-of-pearl-600: oklch(80% 0.01 0deg);\n        --color-mother-of-pearl-700: oklch(77% 0.01 0deg);\n        --color-mother-of-pearl-800: oklch(74% 0.01 0deg);\n        --color-mother-of-pearl-900: oklch(71% 0.01 0deg);\n\n        /* Obsidian */\n        --color-obsidian-50: oklch(95% 0.01 290deg);\n        --color-obsidian-100: oklch(90% 0.01 290deg);\n        --color-obsidian-200: oklch(85% 0.01 290deg);\n        --color-obsidian-300: oklch(80% 0.01 290deg);\n        --color-obsidian-400: oklch(75% 0.01 290deg);\n        --color-obsidian-500: oklch(70% 0.01 290deg);\n        --color-obsidian-600: oklch(65% 0.01 290deg);\n        --color-obsidian-700: oklch(60% 0.01 290deg);\n        --color-obsidian-800: oklch(55% 0.01 290deg);\n        --color-obsidian-900: oklch(50% 0.01 290deg);\n\n        /* Jadeit */\n        --color-jadeite-50: oklch(95% 0.1 155deg);\n        --color-jadeite-100: oklch(90% 0.15 155deg);\n        --color-jadeite-200: oklch(85% 0.2 155deg);\n        --color-jadeite-300: oklch(80% 0.25 155deg);\n        --color-jadeite-400: oklch(75% 0.3 155deg);\n        --color-jadeite-500: oklch(70% 0.35 155deg);\n        --color-jadeite-600: oklch(65% 0.4 155deg);\n        --color-jadeite-700: oklch(60% 0.45 155deg);\n        --color-jadeite-800: oklch(55% 0.5 155deg);\n        --color-jadeite-900: oklch(50% 0.55 155deg);\n\n        /* Smaragd */\n        --color-emerald-50: oklch(95% 0.1 165deg);\n        --color-emerald-100: oklch(90% 0.15 165deg);\n        --color-emerald-200: oklch(85% 0.2 165deg);\n        --color-emerald-300: oklch(80% 0.25 165deg);\n        --color-emerald-400: oklch(75% 0.3 165deg);\n        --color-emerald-500: oklch(70% 0.35 165deg);\n        --color-emerald-600: oklch(65% 0.4 165deg);\n        --color-emerald-700: oklch(60% 0.45 165deg);\n        --color-emerald-800: oklch(55% 0.5 165deg);\n        --color-emerald-900: oklch(50% 0.55 165deg);\n\n        /* Aquamarin */\n        --color-aquamarine-50: oklch(95% 0.1 195deg);\n        --color-aquamarine-100: oklch(90% 0.15 195deg);\n        --color-aquamarine-200: oklch(85% 0.2 195deg);\n        --color-aquamarine-300: oklch(80% 0.25 195deg);\n        --color-aquamarine-400: oklch(75% 0.3 195deg);\n        --color-aquamarine-500: oklch(70% 0.35 195deg);\n        --color-aquamarine-600: oklch(65% 0.4 195deg);\n        --color-aquamarine-700: oklch(60% 0.45 195deg);\n        --color-aquamarine-800: oklch(55% 0.5 195deg);\n        --color-aquamarine-900: oklch(50% 0.55 195deg);\n\n        /* Topas */\n        --color-topaz-50: oklch(95% 0.1 65deg);\n        --color-topaz-100: oklch(90% 0.15 65deg);\n        --color-topaz-200: oklch(85% 0.2 65deg);\n        --color-topaz-300: oklch(80% 0.25 65deg);\n        --color-topaz-400: oklch(75% 0.3 65deg);\n        --color-topaz-500: oklch(70% 0.35 65deg);\n        --color-topaz-600: oklch(65% 0.4 65deg);\n        --color-topaz-700: oklch(60% 0.45 65deg);\n        --color-topaz-800: oklch(55% 0.5 65deg);\n        --color-topaz-900: oklch(50% 0.55 65deg);\n\n        /* Zitrin */\n        --color-citrine-50: oklch(95% 0.1 85deg);\n        --color-citrine-100: oklch(90% 0.15 85deg);\n        --color-citrine-200: oklch(85% 0.2 85deg);\n        --color-citrine-300: oklch(80% 0.25 85deg);\n        --color-citrine-400: oklch(75% 0.3 85deg);\n        --color-citrine-500: oklch(70% 0.35 85deg);\n        --color-citrine-600: oklch(65% 0.4 85deg);\n        --color-citrine-700: oklch(60% 0.45 85deg);\n        --color-citrine-800: oklch(55% 0.5 85deg);\n        --color-citrine-900: oklch(50% 0.55 85deg);\n\n        /* Peridot */\n        --color-peridot-50: oklch(95% 0.1 135deg);\n        --color-peridot-100: oklch(90% 0.15 135deg);\n        --color-peridot-200: oklch(85% 0.2 135deg);\n        --color-peridot-300: oklch(80% 0.25 135deg);\n        --color-peridot-400: oklch(75% 0.3 135deg);\n        --color-peridot-500: oklch(70% 0.35 135deg);\n        --color-peridot-600: oklch(65% 0.4 135deg);\n        --color-peridot-700: oklch(60% 0.45 135deg);\n        --color-peridot-800: oklch(55% 0.5 135deg);\n        --color-peridot-900: oklch(50% 0.55 135deg);\n\n        /* Opal */\n        --color-opal-50: oklch(98% 0.01 205deg);\n        --color-opal-100: oklch(95% 0.01 205deg);\n        --color-opal-200: oklch(92% 0.01 205deg);\n        --color-opal-300: oklch(89% 0.01 205deg);\n        --color-opal-400: oklch(86% 0.01 205deg);\n        --color-opal-500: oklch(83% 0.01 205deg);\n        --color-opal-600: oklch(80% 0.01 205deg);\n        --color-opal-700: oklch(77% 0.01 205deg);\n        --color-opal-800: oklch(74% 0.01 205deg);\n        --color-opal-900: oklch(71% 0.01 205deg);\n\n        /* Mondstein */\n        --color-moonstone-50: oklch(98% 0.01 220deg);\n        --color-moonstone-100: oklch(95% 0.01 220deg);\n        --color-moonstone-200: oklch(92% 0.01 220deg);\n        --color-moonstone-300: oklch(89% 0.01 220deg);\n        --color-moonstone-400: oklch(86% 0.01 220deg);\n        --color-moonstone-500: oklch(83% 0.01 220deg);\n        --color-moonstone-600: oklch(80% 0.01 220deg);\n        --color-moonstone-700: oklch(77% 0.01 220deg);\n        --color-moonstone-800: oklch(74% 0.01 220deg);\n        --color-moonstone-900: oklch(71% 0.01 220deg);\n\n        /* Labradorit */\n        --color-labradorite-50: oklch(95% 0.1 240deg);\n        --color-labradorite-100: oklch(90% 0.15 240deg);\n        --color-labradorite-200: oklch(85% 0.2 240deg);\n        --color-labradorite-300: oklch(80% 0.25 240deg);\n        --color-labradorite-400: oklch(75% 0.3 240deg);\n        --color-labradorite-500: oklch(70% 0.35 240deg);\n        --color-labradorite-600: oklch(65% 0.4 240deg);\n        --color-labradorite-700: oklch(60% 0.45 240deg);\n        --color-labradorite-800: oklch(55% 0.5 240deg);\n        --color-labradorite-900: oklch(50% 0.55 240deg);\n\n        /* Fluorit */\n        --color-fluorite-50: oklch(95% 0.1 280deg);\n        --color-fluorite-100: oklch(90% 0.15 280deg);\n        --color-fluorite-200: oklch(85% 0.2 280deg);\n        --color-fluorite-300: oklch(80% 0.25 280deg);\n        --color-fluorite-400: oklch(75% 0.3 280deg);\n        --color-fluorite-500: oklch(70% 0.35 280deg);\n        --color-fluorite-600: oklch(65% 0.4 280deg);\n        --color-fluorite-700: oklch(60% 0.45 280deg);\n        --color-fluorite-800: oklch(55% 0.5 280deg);\n        --color-fluorite-900: oklch(50% 0.55 280deg);\n\n        /* Pastelltöne */\n        --color-pastel-pink-50: oklch(95% 0.05 0deg);\n        --color-pastel-pink-100: oklch(90% 0.1 0deg);\n        --color-pastel-pink-200: oklch(85% 0.15 0deg);\n        --color-pastel-pink-300: oklch(80% 0.2 0deg);\n        --color-pastel-pink-400: oklch(75% 0.25 0deg);\n        --color-pastel-pink-500: oklch(70% 0.3 0deg);\n        --color-pastel-pink-600: oklch(65% 0.35 0deg);\n        --color-pastel-pink-700: oklch(60% 0.4 0deg);\n        --color-pastel-pink-800: oklch(55% 0.45 0deg);\n        --color-pastel-pink-900: oklch(50% 0.5 0deg);\n        --color-pastel-blue-50: oklch(95% 0.05 250deg);\n        --color-pastel-blue-100: oklch(90% 0.1 250deg);\n        --color-pastel-blue-200: oklch(85% 0.15 250deg);\n        --color-pastel-blue-300: oklch(80% 0.2 250deg);\n        --color-pastel-blue-400: oklch(75% 0.25 250deg);\n        --color-pastel-blue-500: oklch(70% 0.3 250deg);\n        --color-pastel-blue-600: oklch(65% 0.35 250deg);\n        --color-pastel-blue-700: oklch(60% 0.4 250deg);\n        --color-pastel-blue-800: oklch(55% 0.45 250deg);\n        --color-pastel-blue-900: oklch(50% 0.5 250deg);\n        --color-pastel-green-50: oklch(95% 0.05 150deg);\n        --color-pastel-green-100: oklch(90% 0.1 150deg);\n        --color-pastel-green-200: oklch(85% 0.15 150deg);\n        --color-pastel-green-300: oklch(80% 0.2 150deg);\n        --color-pastel-green-400: oklch(75% 0.25 150deg);\n        --color-pastel-green-500: oklch(70% 0.3 150deg);\n        --color-pastel-green-600: oklch(65% 0.35 150deg);\n        --color-pastel-green-700: oklch(60% 0.4 150deg);\n        --color-pastel-green-800: oklch(55% 0.45 150deg);\n        --color-pastel-green-900: oklch(50% 0.5 150deg);\n        --color-pastel-yellow-50: oklch(95% 0.05 80deg);\n        --color-pastel-yellow-100: oklch(90% 0.1 80deg);\n        --color-pastel-yellow-200: oklch(85% 0.15 80deg);\n        --color-pastel-yellow-300: oklch(80% 0.2 80deg);\n        --color-pastel-yellow-400: oklch(75% 0.25 80deg);\n        --color-pastel-yellow-500: oklch(70% 0.3 80deg);\n        --color-pastel-yellow-600: oklch(65% 0.35 80deg);\n        --color-pastel-yellow-700: oklch(60% 0.4 80deg);\n        --color-pastel-yellow-800: oklch(55% 0.45 80deg);\n        --color-pastel-yellow-900: oklch(50% 0.5 80deg);\n        --color-pastel-purple-50: oklch(95% 0.05 300deg);\n        --color-pastel-purple-100: oklch(90% 0.1 300deg);\n        --color-pastel-purple-200: oklch(85% 0.15 300deg);\n        --color-pastel-purple-300: oklch(80% 0.2 300deg);\n        --color-pastel-purple-400: oklch(75% 0.25 300deg);\n        --color-pastel-purple-500: oklch(70% 0.3 300deg);\n        --color-pastel-purple-600: oklch(65% 0.35 300deg);\n        --color-pastel-purple-700: oklch(60% 0.4 300deg);\n        --color-pastel-purple-800: oklch(55% 0.45 300deg);\n        --color-pastel-purple-900: oklch(50% 0.5 300deg);\n\n        /* Neontöne */\n        --color-neon-pink-50: oklch(95% 0.3 0deg);\n        --color-neon-pink-100: oklch(90% 0.35 0deg);\n        --color-neon-pink-200: oklch(85% 0.4 0deg);\n        --color-neon-pink-300: oklch(80% 0.45 0deg);\n        --color-neon-pink-400: oklch(75% 0.5 0deg);\n        --color-neon-pink-500: oklch(70% 0.55 0deg);\n        --color-neon-pink-600: oklch(65% 0.6 0deg);\n        --color-neon-pink-700: oklch(60% 0.65 0deg);\n        --color-neon-pink-800: oklch(55% 0.7 0deg);\n        --color-neon-pink-900: oklch(50% 0.75 0deg);\n        --color-neon-blue-50: oklch(95% 0.3 250deg);\n        --color-neon-blue-100: oklch(90% 0.35 250deg);\n        --color-neon-blue-200: oklch(85% 0.4 250deg);\n        --color-neon-blue-300: oklch(80% 0.45 250deg);\n        --color-neon-blue-400: oklch(75% 0.5 250deg);\n        --color-neon-blue-500: oklch(70% 0.55 250deg);\n        --color-neon-blue-600: oklch(65% 0.6 250deg);\n        --color-neon-blue-700: oklch(60% 0.65 250deg);\n        --color-neon-blue-800: oklch(55% 0.7 250deg);\n        --color-neon-blue-900: oklch(50% 0.75 250deg);\n        --color-neon-green-50: oklch(95% 0.3 150deg);\n        --color-neon-green-100: oklch(90% 0.35 150deg);\n        --color-neon-green-200: oklch(85% 0.4 150deg);\n        --color-neon-green-300: oklch(80% 0.45 150deg);\n        --color-neon-green-400: oklch(75% 0.5 150deg);\n        --color-neon-green-500: oklch(70% 0.55 150deg);\n        --color-neon-green-600: oklch(65% 0.6 150deg);\n        --color-neon-green-700: oklch(60% 0.65 150deg);\n        --color-neon-green-800: oklch(55% 0.7 150deg);\n        --color-neon-green-900: oklch(50% 0.75 150deg);\n        --color-neon-yellow-50: oklch(95% 0.3 80deg);\n        --color-neon-yellow-100: oklch(90% 0.35 80deg);\n        --color-neon-yellow-200: oklch(85% 0.4 80deg);\n        --color-neon-yellow-300: oklch(80% 0.45 80deg);\n        --color-neon-yellow-400: oklch(75% 0.5 80deg);\n        --color-neon-yellow-500: oklch(70% 0.55 80deg);\n        --color-neon-yellow-600: oklch(65% 0.6 80deg);\n        --color-neon-yellow-700: oklch(60% 0.65 80deg);\n        --color-neon-yellow-800: oklch(55% 0.7 80deg);\n        --color-neon-yellow-900: oklch(50% 0.75 80deg);\n        --color-neon-orange-50: oklch(95% 0.3 50deg);\n        --color-neon-orange-100: oklch(90% 0.35 50deg);\n        --color-neon-orange-200: oklch(85% 0.4 50deg);\n        --color-neon-orange-300: oklch(80% 0.45 50deg);\n        --color-neon-orange-400: oklch(75% 0.5 50deg);\n        --color-neon-orange-500: oklch(70% 0.55 50deg);\n        --color-neon-orange-600: oklch(65% 0.6 50deg);\n        --color-neon-orange-700: oklch(60% 0.65 50deg);\n        --color-neon-orange-800: oklch(55% 0.7 50deg);\n        --color-neon-orange-900: oklch(50% 0.75 50deg);\n        --color-neon-purple-50: oklch(95% 0.3 300deg);\n        --color-neon-purple-100: oklch(90% 0.35 300deg);\n        --color-neon-purple-200: oklch(85% 0.4 300deg);\n        --color-neon-purple-300: oklch(80% 0.45 300deg);\n        --color-neon-purple-400: oklch(75% 0.5 300deg);\n        --color-neon-purple-500: oklch(70% 0.55 300deg);\n        --color-neon-purple-600: oklch(65% 0.6 300deg);\n        --color-neon-purple-700: oklch(60% 0.65 300deg);\n        --color-neon-purple-800: oklch(55% 0.7 300deg);\n        --color-neon-purple-900: oklch(50% 0.75 300deg);\n\n        /* Moderne Farbfunktionen mit color-mix() */\n        \n        /* Farbvarianten mit Alpha-Werten */\n        --blue-transparent-10: color-mix(in srgb, var(--color-blue-500) 10, transparent);\n        --blue-transparent-20: color-mix(in srgb, var(--color-blue-500) 20, transparent);\n        --blue-transparent-30: color-mix(in srgb, var(--color-blue-500) 30, transparent);\n        --blue-transparent-40: color-mix(in srgb, var(--color-blue-500) 40, transparent);\n        --blue-transparent-50: color-mix(in srgb, var(--color-blue-500) 50, transparent);\n        \n        /* Farbvarianten mit Schwarz/Weiß für Schatten und Highlights */\n        --blue-tint-10: color-mix(in srgb, var(--color-blue-500) 90, var(--color-white));\n        --blue-tint-20: color-mix(in srgb, var(--color-blue-500) 80, var(--color-white));\n        --blue-tint-30: color-mix(in srgb, var(--color-blue-500) 70, var(--color-white));\n        --blue-shade-10: color-mix(in srgb, var(--color-blue-500) 90, var(--color-black));\n        --blue-shade-20: color-mix(in srgb, var(--color-blue-500) 80, var(--color-black));\n        --blue-shade-30: color-mix(in srgb, var(--color-blue-500) 70, var(--color-black));\n        \n        /* Farbvarianten für Hover- und aktive Zustände */\n        --blue-hover: color-mix(in srgb, var(--color-blue-500) 90, var(--color-white));\n        --blue-active: color-mix(in srgb, var(--color-blue-500) 90, var(--color-black));\n        \n        /* Kontrastierende Farben */\n        --blue-contrast-light: color-mix(in srgb, var(--color-blue-500) 10, var(--color-white));\n        --blue-contrast-dark: color-mix(in srgb, var(--color-blue-900) 90, var(--color-black));\n        \n        /* Farbkombinationen für spezielle Effekte */\n        --primary-secondary-mix: color-mix(in lch, var(--color-blue-500) 50, var(--color-indigo-500));\n        --primary-accent-mix: color-mix(in lch, var(--color-blue-500) 50, var(--color-cyan-500));\n        --secondary-accent-mix: color-mix(in lch, var(--color-indigo-500) 50, var(--color-cyan-500));\n        \n        /* Farben für Status-Indikatoren */\n        --success-hover: color-mix(in srgb, var(--color-green-500) 90, var(--color-white));\n        --success-active: color-mix(in srgb, var(--color-green-500) 90, var(--color-black));\n        --error-hover: color-mix(in srgb, var(--color-red-500) 90, var(--color-white));\n        --error-active: color-mix(in srgb, var(--color-red-500) 90, var(--color-black));\n        --warning-hover: color-mix(in srgb, var(--color-amber-500) 90, var(--color-white));\n        --warning-active: color-mix(in srgb, var(--color-amber-500) 90, var(--color-black));\n        \n        /* Farbkombinationen für Theme-Variationen */\n        --theme-gradient-start: var(--color-blue-500);\n        --theme-gradient-end: var(--color-cyan-500);\n        --theme-gradient-mid: color-mix(in lch, var(--theme-gradient-start) 50, var(--theme-gradient-end));\n        \n        /* Farbschemata für Hell-/Dunkelmodus */\n        --light-surface: color-mix(in srgb, var(--color-gray-50) 98%, var(--color-blue-500));\n        --light-surface-hover: color-mix(in srgb, var(--color-gray-100) 95%, var(--color-blue-500));\n        --dark-surface: color-mix(in srgb, var(--color-gray-900) 98%, var(--color-blue-500));\n        --dark-surface-hover: color-mix(in srgb, var(--color-gray-800) 95%, var(--color-blue-500));\n        \n        /* Textfarben mit erhöhtem Kontrast für Barrierefreiheit */\n        --text-high-contrast: color-mix(in srgb, var(--color-gray-900) 95%, var(--color-blue-900));\n        --text-medium-contrast: color-mix(in srgb, var(--color-gray-700) 95%, var(--color-blue-700));\n        --text-low-contrast: color-mix(in srgb, var(--color-gray-500) 95%, var(--color-blue-500));\n    }\n\n    /* Dynamische Farbvarianten für alle Basisfarben */\n    .dynamic-color-variants {\n        /* Primärfarben */\n        --primary-lightest: color-mix(in srgb, var(--color-primary-500) 20, var(--color-white));\n        --primary-lighter: color-mix(in srgb, var(--color-primary-500) 40, var(--color-white));\n        --primary-light: color-mix(in srgb, var(--color-primary-500) 70, var(--color-white));\n        --primary: var(--color-primary-500);\n        --primary-dark: color-mix(in srgb, var(--color-primary-500) 70, var(--color-black));\n        --primary-darker: color-mix(in srgb, var(--color-primary-500) 40, var(--color-black));\n        --primary-darkest: color-mix(in srgb, var(--color-primary-500) 20, var(--color-black));\n        \n        /* Sekundärfarben */\n        --secondary-lightest: color-mix(in srgb, var(--color-secondary-500) 20, var(--color-white));\n        --secondary-lighter: color-mix(in srgb, var(--color-secondary-500) 40, var(--color-white));\n        --secondary-light: color-mix(in srgb, var(--color-secondary-500) 70, var(--color-white));\n        --secondary: var(--color-secondary-500);\n        --secondary-dark: color-mix(in srgb, var(--color-secondary-500) 70, var(--color-black));\n        --secondary-darker: color-mix(in srgb, var(--color-secondary-500) 40, var(--color-black));\n        --secondary-darkest: color-mix(in srgb, var(--color-secondary-500) 20, var(--color-black));\n        \n        /* Akzentfarben */\n        --accent-lightest: color-mix(in srgb, var(--color-accent-500) 20, var(--color-white));\n        --accent-lighter: color-mix(in srgb, var(--color-accent-500) 40, var(--color-white));\n        --accent-light: color-mix(in srgb, var(--color-accent-500) 70, var(--color-white));\n        --accent: var(--color-accent-500);\n        --accent-dark: color-mix(in srgb, var(--color-accent-500) 70, var(--color-black));\n        --accent-darker: color-mix(in srgb, var(--color-accent-500) 40, var(--color-black));\n        --accent-darkest: color-mix(in srgb, var(--color-accent-500) 20, var(--color-black));\n    }\n    \n    /* Farbschemata für Nutzerinteraktionen */\n    .interactive-colors {\n        /* Hover-Zustände */\n        --btn-primary-hover: color-mix(in srgb, var(--color-primary-500) 90, var(--color-white));\n        --btn-primary-active: color-mix(in srgb, var(--color-primary-500) 90, var(--color-black));\n        --btn-secondary-hover: color-mix(in srgb, var(--color-secondary-500) 90, var(--color-white));\n        --btn-secondary-active: color-mix(in srgb, var(--color-secondary-500) 90, var(--color-black));\n        \n        /* Link-Farben */\n        --link-default: var(--color-primary-600);\n        --link-hover: color-mix(in srgb, var(--color-primary-600) 80, var(--color-black));\n        --link-visited: color-mix(in lch, var(--color-primary-600) 70, var(--color-purple-600));\n        \n        /* Fokus-Indikator */\n        --focus-ring: color-mix(in srgb, var(--color-primary-500) 80, var(--color-white));\n        --focus-ring-inset: color-mix(in srgb, var(--color-primary-500) 20, var(--color-white));\n    }\n}\n","/* Clean Layout Tokens */\n@layer tokens.properties {\n  :root {\n    --container-sm: 640px;\n    --container-md: 768px;\n  }\n}\n","/**\n * Transition Tokens\n * \n * @property definitions for smooth theme transitions and animations.\n * These properties enable smooth interpolation between theme values.\n * \n * @layer tokens\n */\n\n@layer tokens {\n  /* Transition Duration Properties */\n  @property --transition-fast {\n    inherits: true;\n    initial-value: 150ms;\n    syntax: '<time>';\n  }\n  \n  @property --transition-normal {\n    inherits: true;\n    initial-value: 250ms;\n    syntax: '<time>';\n  }\n  \n  @property --transition-slow {\n    inherits: true;\n    initial-value: 400ms;\n    syntax: '<time>';\n  }\n\n  /* Extended Duration Properties (für Kompatibilität) */\n  @property --transition-duration-fast {\n    inherits: true;\n    initial-value: 150ms;\n    syntax: '<time>';\n  }\n  \n  @property --transition-duration-normal {\n    inherits: true;\n    initial-value: 250ms;\n    syntax: '<time>';\n  }\n  \n  @property --transition-duration-slow {\n    inherits: true;\n    initial-value: 400ms;\n    syntax: '<time>';\n  }\n  \n  /* Transition Easing Properties */\n  @property --transition-ease-out {\n    inherits: true;\n    initial-value: cubic-bezier(0, 0, 0.2, 1);\n    syntax: '<custom-ident> | ease | ease-in | ease-out | ease-in-out | linear | step-start | step-end';\n  }\n  \n  @property --transition-ease-in {\n    inherits: true;\n    initial-value: cubic-bezier(0.4, 0, 1, 1);\n    syntax: '<custom-ident> | ease | ease-in | ease-out | ease-in-out | linear | step-start | step-end';\n  }\n  \n  @property --transition-ease-in-out {\n    inherits: true;\n    initial-value: cubic-bezier(0.4, 0, 0.2, 1);\n    syntax: '<custom-ident> | ease | ease-in | ease-out | ease-in-out | linear | step-start | step-end';\n  }\n\n  /* Timing Function Aliases */\n  @property --transition-timing-ease {\n    inherits: true;\n    initial-value: cubic-bezier(0.4, 0, 0.2, 1);\n    syntax: '<custom-ident> | ease | ease-in | ease-out | ease-in-out | linear | step-start | step-end';\n  }\n  \n  /* Animatable Color Properties for Theme Transitions */\n  @property --transition-bg {\n    inherits: true;\n    initial-value: #fff;\n    syntax: '<color>';\n  }\n  \n  @property --transition-fg {\n    inherits: true;\n    initial-value: #1f2937;\n    syntax: '<color>';\n  }\n  \n  @property --transition-border {\n    inherits: true;\n    initial-value: #e5e7eb;\n    syntax: '<color>';\n  }\n  \n  @property --transition-surface {\n    inherits: true;\n    initial-value: #f9fafb;\n    syntax: '<color>';\n  }\n  \n  @property --transition-accent {\n    inherits: true;\n    initial-value: #3b82f6;\n    syntax: '<color>';\n  }\n  \n  @property --transition-shadow-opacity {\n    inherits: true;\n    initial-value: 0.1;\n    syntax: '<number>';\n  }\n  \n  /* Component-Specific Transition Properties */\n  @property --transition-colors {\n    inherits: true;\n    initial-value: background-color 250ms var(--transition-ease-out), color 250ms var(--transition-ease-out), border-color 250ms var(--transition-ease-out);\n    syntax: '*';\n  }\n  \n  @property --transition-transform {\n    inherits: true;\n    initial-value: transform 200ms var(--transition-ease-out);\n    syntax: '*';\n  }\n  \n  @property --transition-opacity {\n    inherits: true;\n    initial-value: opacity 200ms var(--transition-ease-out);\n    syntax: '*';\n  }\n  \n  @property --transition-shadow {\n    inherits: true;\n    initial-value: box-shadow 200ms var(--transition-ease-out);\n    syntax: '*';\n  }\n  \n  @property --transition-all {\n    inherits: true;\n    initial-value: all 250ms var(--transition-ease-out);\n    syntax: '*';\n  }\n}\n\n/* Fallback Values für Transition-Tokens */\n:root {\n  /* Duration Tokens */\n  --transition-fast: 150ms;\n  --transition-normal: 250ms;\n  --transition-slow: 400ms;\n  --transition-duration-fast: var(--transition-fast);\n  --transition-duration-normal: var(--transition-normal);\n  --transition-duration-slow: var(--transition-slow);\n  \n  /* Timing Functions */\n  --transition-ease-out: ease-out;\n  --transition-ease-in: ease-in;\n  --transition-ease-in-out: ease-in-out;\n  --transition-timing-ease: var(--transition-ease-in-out);\n  \n  /* Combined Transition Properties */\n  --transition-colors: background-color var(--transition-normal) var(--transition-ease-out), \n                      color var(--transition-normal) var(--transition-ease-out), \n                      border-color var(--transition-normal) var(--transition-ease-out);\n  --transition-transform: transform 200ms var(--transition-ease-out);\n  --transition-opacity: opacity 200ms var(--transition-ease-out);\n  --transition-shadow: box-shadow 200ms var(--transition-ease-out);\n  --transition-all: all var(--transition-normal) var(--transition-ease-out);\n} ","/**\n * Effects Properties with @property Definitions\n * \n * Typed CSS custom properties for visual effects using @property.\n * This enables better tooling support, autocomplete, and animation capabilities.\n * \n * @layer tokens.properties\n */\n\n@layer tokens.properties {\n  /* Shadow Properties */\n  @property --shadow-color {\n    inherits: true;\n    initial-value: rgb(0 0 0);\n    syntax: '<color>';\n  }\n  \n  @property --shadow-opacity-sm {\n    inherits: true;\n    initial-value: 0.05;\n    syntax: '<number>';\n  }\n  \n  @property --shadow-opacity-md {\n    inherits: true;\n    initial-value: 0.1;\n    syntax: '<number>';\n  }\n  \n  @property --shadow-opacity-lg {\n    inherits: true;\n    initial-value: 0.15;\n    syntax: '<number>';\n  }\n  \n  @property --shadow-opacity-xl {\n    inherits: true;\n    initial-value: 0.25;\n    syntax: '<number>';\n  }\n  \n  /* Transition Duration Properties */\n  @property --transition-duration-fast {\n    inherits: true;\n    initial-value: 150ms;\n    syntax: '<time>';\n  }\n  \n  @property --transition-duration-normal {\n    inherits: true;\n    initial-value: 300ms;\n    syntax: '<time>';\n  }\n  \n  @property --transition-duration-slow {\n    inherits: true;\n    initial-value: 500ms;\n    syntax: '<time>';\n  }\n  \n  /* Opacity Properties */\n  @property --opacity-disabled {\n    inherits: true;\n    initial-value: 0.5;\n    syntax: '<number>';\n  }\n  \n  @property --opacity-hover {\n    inherits: true;\n    initial-value: 0.8;\n    syntax: '<number>';\n  }\n  \n  @property --opacity-overlay {\n    inherits: true;\n    initial-value: 0.5;\n    syntax: '<number>';\n  }\n  \n  /* Backdrop Properties */\n  @property --color-backdrop {\n    inherits: true;\n    initial-value: rgb(0 0 0 / 5000%);\n    syntax: '<color>';\n  }\n  \n  @property --color-tooltip-background {\n    inherits: true;\n    initial-value: rgb(0 0 0 / 8000%);\n    syntax: '<color>';\n  }\n  \n  @property --color-tooltip-text {\n    inherits: true;\n    initial-value: #fff;\n    syntax: '<color>';\n  }\n  \n  /* Focus Properties */\n  @property --color-focus {\n    inherits: true;\n    initial-value: #4f46e5;\n    syntax: '<color>';\n  }\n  \n  @property --color-focus-glow {\n    inherits: true;\n    initial-value: rgb(79 70 229 / 3000%);\n    syntax: '<color>';\n  }\n  \n  /* Gradient Properties */\n  @property --color-gradient-start {\n    inherits: true;\n    initial-value: #4f46e5;\n    syntax: '<color>';\n  }\n  \n  @property --color-gradient-end {\n    inherits: true;\n    initial-value: #3b82f6;\n    syntax: '<color>';\n  }\n  \n  /* Background Effect Properties */\n  @property --color-background-subtle {\n    inherits: true;\n    initial-value: rgb(84 53 53 / 2%);\n    syntax: '<color>';\n  }\n  \n  @property --color-background-muted {\n    inherits: true;\n    initial-value: rgb(0 0 0 / 5%);\n    syntax: '<color>';\n  }\n  \n  @property --color-status {\n    inherits: true;\n    initial-value: #4f46e5;\n    syntax: '<color>';\n  }\n} ","/**\n * Dark Mode Theme\n * \n * Dark mode definitions with [data-theme=\"dark\"] scope.\n * Only overrides base tokens, aliases remain stable.\n * \n * @layer themes.mode\n */\n\n@layer themes.mode {\n  [data-theme=\"dark\"] {\n    /* Color Scheme */\n    color-scheme: dark;\n    \n    /* Base Color Tokens - Only override what's needed for dark mode */\n    --color-background: #1d1f24;\n    --color-surface: #262830;\n    --color-surface-elevated: #30333c;\n    --color-text: #f3f3f5;\n    --color-text-muted: #8f96a8;\n    --color-text-inverse: #1d1f24;\n    --color-border: #4a4e5c;\n    --color-border-strong: #6c7285;\n    \n    /* Primary Colors - Dark Mode Values */\n    --color-primary: #4a90e2;\n    --color-primary-50: #001433;\n    --color-primary-100: #002966;\n    --color-primary-500: #4a90e2;\n    --color-primary-600: #66a3ff;\n    --color-primary-900: #e6f0ff;\n    \n    /* Secondary Colors - Dark Mode Values */\n    --color-secondary: #8b7cf6;\n    --color-secondary-50: #110a33;\n    --color-secondary-500: #8b7cf6;\n    --color-secondary-900: #eeeaff;\n    \n    /* Gray Colors - Dark Mode Values */\n    --color-gray-50: #1d1f24;\n    --color-gray-100: #262830;\n    --color-gray-500: #8f96a8;\n    --color-gray-900: #f9f9fa;\n    \n    /* Focus and Interactive States */\n    --color-focus: #6366f1;\n    --color-focus-glow: rgb(99 102 241 / 4000%);\n  }\n}\n\n/**\n * Dark Mode Theme\n * \n * Diese Datei definiert das Dark Mode Theme.\n * Die Farben orientieren sich an den Variablen aus colors.css.\n * Das Theme wird über die Klasse \"theme-dark-mode\" aktiviert.\n * \n * Unterstützt sowohl modernen light-dark() Syntax als auch Fallbacks für ältere Browser.\n */\n\n/* Gemeinsame Dark Mode Variablen für Wiederverwendung */\n:root {\n  --dark-mode-text: var(--color-gray-100);\n  --dark-mode-text-muted: var(--color-gray-400);\n  --dark-mode-text-light: var(--color-gray-600);\n  --dark-mode-text-inverted: var(--color-gray-900);\n  --dark-mode-background: var(--color-gray-900);\n  --dark-mode-background-alt: var(--color-gray-800);\n\n  /* Dunklerer Wert für besseren Kontrast bei elevated Elementen */\n  --dark-mode-background-elevated: var(--color-gray-780);\n  --dark-mode-background-inverted: var(--color-gray-50);\n  --dark-mode-border: var(--color-gray-700);\n  --dark-mode-border-hover: var(--color-gray-600);\n  --dark-mode-border-focus: var(--color-primary-400);\n  --dark-mode-border-error: var(--color-error-400);\n  --dark-mode-shadow-sm: rgb(0 0 0 / 2000%);\n  --dark-mode-shadow-md: rgb(0 0 0 / 3000%);\n  --dark-mode-shadow-lg: rgb(0 0 0 / 4000%);\n  --dark-mode-shadow-xl: rgb(0 0 0 / 5000%);\n  --dark-mode-focus-ring: var(--color-primary-400);\n  --dark-mode-focus-ring-offset: var(--color-gray-900);\n  --dark-mode-outline: var(--color-primary-400);\n}\n\n/* Dark Mode im Theme-Präferenz-System */\n@media (prefers-color-scheme: dark) {\n  :root[style*=\"--theme-preference:\\\"auto\\\"\"] {\n    /* Auto-Modus verwendet die Systempräferenz */\n    color-scheme: dark;\n    \n    /* Überschreibe Light Mode Variablen mit Dark Mode Äquivalenten */\n    --color-text: var(--dark-mode-text);\n    --color-text-muted: var(--dark-mode-text-muted);\n    --color-text-light: var(--dark-mode-text-light);\n    --color-text-inverted: var(--dark-mode-text-inverted);\n    --color-background: var(--dark-mode-background);\n    --color-background-alt: var(--dark-mode-background-alt);\n    --color-background-elevated: var(--dark-mode-background-elevated);\n    --color-background-inverted: var(--dark-mode-background-inverted);\n    --color-border: var(--dark-mode-border);\n    --color-border-hover: var(--dark-mode-border-hover);\n    --color-border-focus: var(--dark-mode-border-focus);\n    --color-border-error: var(--dark-mode-border-error);\n    --color-shadow-sm: var(--dark-mode-shadow-sm);\n    --color-shadow-md: var(--dark-mode-shadow-md);\n    --color-shadow-lg: var(--dark-mode-shadow-lg);\n    --color-shadow-xl: var(--dark-mode-shadow-xl);\n    --color-focus-ring: var(--dark-mode-focus-ring);\n    --color-focus-ring-offset: var(--dark-mode-focus-ring-offset);\n    --color-outline: var(--dark-mode-outline);\n  }\n}\n\n/* Explizites Dark Mode über CSS-Variablen */\n:root[style*=\"--theme-preference:\\\"dark\\\"\"] {\n  color-scheme: dark;\n  \n  /* Überschreibe Light Mode Variablen mit Dark Mode Äquivalenten */\n  --color-text: var(--dark-mode-text);\n  --color-text-muted: var(--dark-mode-text-muted);\n  --color-text-light: var(--dark-mode-text-light);\n  --color-text-inverted: var(--dark-mode-text-inverted);\n  --color-background: var(--dark-mode-background);\n  --color-background-alt: var(--dark-mode-background-alt);\n  --color-background-elevated: var(--dark-mode-background-elevated);\n  --color-background-inverted: var(--dark-mode-background-inverted);\n  --color-border: var(--dark-mode-border);\n  --color-border-hover: var(--dark-mode-border-hover);\n  --color-border-focus: var(--dark-mode-border-focus);\n  --color-border-error: var(--dark-mode-border-error);\n  --color-shadow-sm: var(--dark-mode-shadow-sm);\n  --color-shadow-md: var(--dark-mode-shadow-md);\n  --color-shadow-lg: var(--dark-mode-shadow-lg);\n  --color-shadow-xl: var(--dark-mode-shadow-xl);\n  --color-focus-ring: var(--dark-mode-focus-ring);\n  --color-focus-ring-offset: var(--dark-mode-focus-ring-offset);\n  --color-outline: var(--dark-mode-outline);\n}\n\n/* Dark Mode über HTML Attribute */\nhtml[data-theme=\"dark\"] {\n  color-scheme: dark;\n  \n  /* Überschreibe Light Mode Variablen mit Dark Mode Äquivalenten */\n  --color-text: var(--dark-mode-text);\n  --color-text-muted: var(--dark-mode-text-muted);\n  --color-text-light: var(--dark-mode-text-light);\n  --color-text-inverted: var(--dark-mode-text-inverted);\n  --color-background: var(--dark-mode-background);\n  --color-background-alt: var(--dark-mode-background-alt);\n  --color-background-elevated: var(--dark-mode-background-elevated);\n  --color-background-inverted: var(--dark-mode-background-inverted);\n  --color-border: var(--dark-mode-border);\n  --color-border-hover: var(--dark-mode-border-hover);\n  --color-border-focus: var(--dark-mode-border-focus);\n  --color-border-error: var(--dark-mode-border-error);\n  --color-shadow-sm: var(--dark-mode-shadow-sm);\n  --color-shadow-md: var(--dark-mode-shadow-md);\n  --color-shadow-lg: var(--dark-mode-shadow-lg);\n  --color-shadow-xl: var(--dark-mode-shadow-xl);\n  --color-focus-ring: var(--dark-mode-focus-ring);\n  --color-focus-ring-offset: var(--dark-mode-focus-ring-offset);\n  --color-outline: var(--dark-mode-outline);\n}\n\n/* Light Mode Theme-Klassen-Implementierung für konsistente Schnittstelle */\n.theme-light-mode {\n  color-scheme: light;\n  \n  /* Grundlegende Light Mode Variablen */\n  --color-text: var(--color-gray-900);\n  --color-text-muted: var(--color-gray-600);\n  --color-text-light: var(--color-gray-400);\n  --color-text-inverted: var(--color-gray-100);\n  --color-background: white;\n  --color-background-alt: var(--color-gray-50);\n  --color-background-elevated: white;\n  --color-background-inverted: var(--color-gray-900);\n  --color-border: var(--color-gray-200);\n  --color-border-hover: var(--color-gray-300);\n  --color-border-focus: var(--color-primary-500);\n  --color-border-error: var(--color-error-500);\n  --color-shadow-sm: rgb(0 0 0 / 5%);\n  --color-shadow-md: rgb(0 0 0 / 1000%);\n  --color-shadow-lg: rgb(0 0 0 / 15%);\n  --color-shadow-xl: rgb(0 0 0 / 2000%);\n  --color-focus-ring: var(--color-primary-500);\n  --color-focus-ring-offset: white;\n  --color-outline: var(--color-primary-500);\n}\n\n/* Dark Mode Theme-Klassen-Implementierung */\n.theme-dark-mode {\n  color-scheme: dark;\n  \n  /* Verwendung der gemeinsamen Dark Mode Variablen */\n  --color-text: var(--dark-mode-text);\n  --color-text-muted: var(--dark-mode-text-muted);\n  --color-text-light: var(--dark-mode-text-light);\n  --color-text-inverted: var(--dark-mode-text-inverted);\n  --color-background: var(--dark-mode-background);\n  --color-background-alt: var(--dark-mode-background-alt);\n  --color-background-elevated: var(--dark-mode-background-elevated);\n  --color-background-inverted: var(--dark-mode-background-inverted);\n  --color-border: var(--dark-mode-border);\n  --color-border-hover: var(--dark-mode-border-hover);\n  --color-border-focus: var(--dark-mode-border-focus);\n  --color-border-error: var(--dark-mode-border-error);\n  --color-shadow-sm: var(--dark-mode-shadow-sm);\n  --color-shadow-md: var(--dark-mode-shadow-md);\n  --color-shadow-lg: var(--dark-mode-shadow-lg);\n  --color-shadow-xl: var(--dark-mode-shadow-xl);\n  --color-focus-ring: var(--dark-mode-focus-ring);\n  --color-focus-ring-offset: var(--dark-mode-focus-ring-offset);\n  --color-outline: var(--dark-mode-outline);\n}\n\n.theme-dark-mode.dark-mode {\n  /* Verwendung der gemeinsamen Dark Mode Variablen */\n  --color-text: var(--dark-mode-text);\n  --color-text-muted: var(--dark-mode-text-muted);\n  --color-text-light: var(--dark-mode-text-light);\n  --color-text-inverted: var(--dark-mode-text-inverted);\n  --color-background: var(--dark-mode-background);\n  --color-background-alt: var(--dark-mode-background-alt);\n  --color-background-elevated: var(--dark-mode-background-elevated);\n  --color-background-inverted: var(--dark-mode-background-inverted);\n  --color-border: var(--dark-mode-border);\n  --color-border-hover: var(--dark-mode-border-hover);\n  --color-border-focus: var(--dark-mode-border-focus);\n  --color-border-error: var(--dark-mode-border-error);\n  --color-shadow-sm: var(--dark-mode-shadow-sm);\n  --color-shadow-md: var(--dark-mode-shadow-md);\n  --color-shadow-lg: var(--dark-mode-shadow-lg);\n  --color-shadow-xl: var(--dark-mode-shadow-xl);\n  --color-focus-ring: var(--dark-mode-focus-ring);\n  --color-focus-ring-offset: var(--dark-mode-focus-ring-offset);\n  --color-outline: var(--dark-mode-outline);\n}\n\n@layer utilities {\n  /* Dark Mode Toggle Utilities */\n  .dark-mode-toggle {\n    align-items: center;\n    background-color: var(--color-bg-secondary);\n    border-radius: var(--border-radius-full);\n    cursor: pointer;\n    display: inline-flex;\n    justify-content: center;\n    padding: var(--space-2);\n    transition: background-color var(--transition-normal) var(--ease-in-out-cubic);\n  }\n  \n  .dark-mode-toggle:hover {\n    background-color: var(--color-bg-tertiary);\n  }\n  \n  /* Dark Mode nur für bestimmte Container */\n  .dark-theme-container {\n    background-color: var(--color-bg-primary);\n    border-color: var(--color-border);\n    color: var(--color-text-primary);\n  }\n  \n  /* Inverse Farben für Hell/Dunkel-Kontrast */\n  .inverse-colors {\n    filter: invert(1) hue-rotate(180deg);\n  }\n  \n  /* Spezifische inverse Farben für Light Mode */\n  .light-theme .inverse-colors--light {\n    filter: invert(1) hue-rotate(180deg);\n  }\n  \n  /* Spezifische inverse Farben für Dark Mode */\n  .dark-theme .inverse-colors--dark {\n    filter: invert(1) hue-rotate(180deg);\n  }\n} ","/**\n * Smooth Scroll CSS-Komponente\n * ---------------------------\n * Diese Datei enthält Stile für erweiterte Scroll-Funktionalitäten und -Effekte.\n *\n * Eigenschaften:\n * - Sanftes Scrollen (smooth-scroll) für eine verbesserte Benutzererfahrung\n * - Scroll-Snap für präzises Positionieren von Elementen beim Scrollen\n * - Fortschrittsanzeigen für die Visualisierung der Scroll-Position\n * - Parallax-Effekte für tiefenwirksame Layouts\n * - Scroll-Animation-Effekte (fade, scale, slide, rotate)\n * - Gestaffelte Scroll-Animationen für Gruppen von Elementen\n * - Scroll-zu-Top-Funktionalität\n * - Scroll-Spy für Navigation\n * - Barrierefreiheitsanpassungen für reduzierte Bewegung\n *\n * Verwendung:\n * Fügen Sie die entsprechenden Klassen zu Ihren HTML-Elementen hinzu,\n * um die verschiedenen Scroll-Effekte und -Funktionen zu aktivieren.\n *\n * @layer core - Grundlegende Scroll-Funktionalitäten und -Effekte\n * @layer components - Wiederverwendbare Scroll-Komponenten\n */\n\n/* Animationen */\n@keyframes scroll-timeline-fade {\n    0% {\n        opacity: 0;\n        transform: translateY(var(--spacing-5, 1.25rem));\n    }\n\n    100% {\n        opacity: 1;\n        transform: translateX(0);\n    }\n}\n\n@layer smooth-scroll {\n  /* Smooth Scroll Variables */\n  :root {\n    --scroll-behavior: smooth;\n    --scroll-padding-top: 0;\n    --scroll-snap-type: none;\n    --scroll-snap-align: none;\n    --scroll-snap-stop: always;\n    --scroll-margin: 0;\n    --scroll-timeline-name: none;\n    --scroll-timeline-axis: block;\n    --scroll-timeline-view-offset: 0;\n  }\n\n  /* Base Smooth Scroll */\n  html {\n    scroll-behavior: var(--scroll-behavior, smooth);\n    scroll-padding-top: var(--scroll-padding-top, 0);\n  }\n\n  /* Scroll Snap */\n  .scroll-snap-container {\n    height: 100vh;\n    overflow-y: auto;\n    scroll-snap-type: var(--scroll-snap-type, none);\n  }\n\n  .scroll-snap-item {\n    scroll-margin: var(--scroll-margin, 0);\n    scroll-snap-align: var(--scroll-snap-align, none);\n    scroll-snap-stop: var(--scroll-snap-stop, normal);\n  }\n\n  /* Scroll Progress */\n  .scroll-progress {\n    background: linear-gradient(to right, var(--color-primary, #3b82f6) var(--scroll), transparent 0);\n    height: var(--spacing-1, 0.25rem);\n    left: 0;\n    position: fixed;\n    top: 0;\n    width: 100%;\n    z-index: var(--z-50);\n  }\n\n  /* Scroll Timeline */\n  .scroll-timeline {\n    scroll-timeline-axis: var(--scroll-timeline-axis);\n    scroll-timeline-name: var(--scroll-timeline-name);\n    scroll-timeline-view-offset: var(--scroll-timeline-view-offset);\n  }\n\n  /* Parallax Scrolling */\n  .parallax-container {\n    height: 100vh;\n    overflow: hidden auto;\n    perspective: var(--border-width);\n  }\n\n  .parallax-layer {\n    inset: 0;\n    position: absolute;\n  }\n\n  .parallax-layer-back {\n    transform: translateZ(calc(-1 * var(--border-width))) scale(2);\n  }\n\n  .parallax-layer-base {\n    transform: translateZ(0);\n  }\n\n  .parallax-layer-front {\n    transform: translateZ(var(--border-width)) scale(0.5);\n  }\n\n  /* Scroll Reveal */\n  .scroll-reveal {\n    opacity: 0;\n    transform: translateY(var(--spacing-5, 1.25rem));\n    transition: all var(--transition-normal, 200ms ease);\n  }\n\n  .scroll-reveal.visible {\n    opacity: 1;\n    transform: translateX(0);\n  }\n\n  /* Scroll Fade */\n  .scroll-fade {\n    opacity: 0;\n    transition: opacity var(--transition-normal, 200ms ease);\n  }\n\n  .scroll-fade.visible {\n    opacity: 1;\n  }\n\n  /* Scroll Scale */\n  .scroll-scale {\n    opacity: 0;\n    transform: scale(0.95);\n    transition: all var(--transition-normal, 200ms ease);\n  }\n\n  .scroll-scale.visible {\n    opacity: 1;\n    transform: scale(1);\n  }\n\n  /* Scroll Slide - Konsolidierte Version */\n  .scroll-slide {\n    opacity: 0;\n    transition: all var(--transition-normal, 200ms ease);\n  }\n\n  .scroll-slide.visible {\n    opacity: 1;\n    transform: translate(0, 0);\n  }\n\n  /* Scroll Slide Richtungs-Varianten */\n  .scroll-slide-left { transform: translateX(-50px); }\n\n  .scroll-slide-right { transform: translateX(50px); }\n\n  .scroll-slide-up { transform: translateY(50px); }\n\n  .scroll-slide-down { transform: translateY(-50px); }\n\n  /* Scroll Rotate */\n  .scroll-rotate {\n    opacity: 0;\n    transform: rotate(-15deg);\n    transition: all var(--transition-normal, 200ms ease);\n  }\n\n  .scroll-rotate.visible {\n    opacity: 1;\n    transform: rotate(0);\n  }\n\n  /* Scroll Stagger */\n  .scroll-stagger > * {\n    opacity: 0;\n    transform: translateY(var(--spacing-5, 1.25rem));\n    transition: all var(--transition-normal, 200ms ease);\n  }\n\n  /* Stagger Delays - Kompakte Version */\n  .scroll-stagger > *:nth-child(1) { transition-delay: 0.1s; }\n\n  .scroll-stagger > *:nth-child(2) { transition-delay: 0.2s; }\n\n  .scroll-stagger > *:nth-child(3) { transition-delay: 0.3s; }\n\n  .scroll-stagger > *:nth-child(4) { transition-delay: 0.4s; }\n\n  .scroll-stagger > *:nth-child(5) { transition-delay: 0.5s; }\n\n  .scroll-stagger.visible > * {\n    opacity: 1;\n    transform: translateX(0);\n  }\n\n  /* Scroll Progress Bar */\n  .scroll-progress-bar {\n    background: var(--slider-track-color);\n    height: var(--spacing-1, 0.25rem);\n    left: 0;\n    position: fixed;\n    top: 0;\n    width: 100%;\n  }\n\n  .scroll-progress-bar::before {\n    background: var(--color-primary, #3b82f6);\n    content: '';\n    height: 100vh;\n    left: 0;\n    position: absolute;\n    top: 0;\n    transition: width var(--transition-normal, 200ms ease);\n    width: var(--scroll);\n  }\n\n  /* Scroll to Top Button */\n  .scroll-to-top {\n    align-items: center;\n    background: var(--color-primary, #3b82f6);\n    border-radius: 5px;\n    bottom: var(--spacing-5, 1.25rem);\n    color: var(--color-white, #fff);\n    cursor: pointer;\n    display: flex;\n    height: var(--spacing-10, 2.5rem);\n    justify-content: center;\n    opacity: 0;\n    position: fixed;\n    right: var(--spacing-5, 1.25rem);\n    transform: translateY(var(--spacing-5, 1.25rem));\n    transition: all var(--transition-normal, 200ms ease);\n    width: var(--spacing-10, 2.5rem);\n    z-index: var(--z-50);\n  }\n\n  .scroll-to-top.visible {\n    opacity: 1;\n    transform: translateX(0);\n  }\n\n  .scroll-to-top:hover {\n    background: var(--color-primary-dark);\n    transform: translateY(calc(-1 * var(--border-width-thick)));\n  }\n\n  /* Scroll Spy Navigation */\n  .scroll-spy-nav {\n    position: fixed;\n    right: var(--spacing-5, 1.25rem);\n    top: 50;\n    transform: translateX(-50);\n  }\n\n  .scroll-spy-nav a {\n    background: var(--slider-track-color);\n    border-radius: 5px;\n    display: block;\n    height: var(--space-small-10px);\n    margin: var(--space-small-10px) 0;\n    transition: all var(--transition-normal, 200ms ease);\n    width: var(--space-small-10px);\n  }\n\n  .scroll-spy-nav a.active {\n    background: var(--color-primary, #3b82f6);\n    transform: scale(1.2);\n  }\n\n  /* Scroll Timeline Animation */\n  .scroll-timeline-animation {\n    animation: scroll-timeline-fade 1s ease-out forwards;\n    animation-range: entry 10 cover 30;\n    animation-timeline: view();\n  }\n\n  /* Scroll Performance */\n  .scroll-performance {\n    backface-visibility: hidden;\n    transform: translateZ(0);\n    will-change: transform, opacity;\n  }\n\n  /* Respektiere Nutzereinstellung für reduzierte Bewegung */\n  @media (prefers-reduced-motion: reduce) {\n    /* Deaktiviere alle Scroll-Animationen */\n    html,\n    body,\n    .scroll-smooth,\n    .scroll-behavior-smooth,\n    .scroll-mt,\n    .scroll-mb,\n    .scroll-ms,\n    .scroll-me,\n    .scroll-pt,\n    .scroll-pb,\n    .scroll-ps,\n    .scroll-pe,\n    [data-scroll-trigger],\n    .scroll-snap-container,\n    .scroll-snap-item {\n      animation: none !important;\n      scroll-behavior: auto !important;\n      scroll-padding: 0 !important;\n      scroll-snap-type: none !important;\n      transition: none !important;\n    }\n  }\n\n  /* Responsive Anpassungen */\n  @media (max-width: 640px) {\n    .touch-feedback::after {\n        block-size: 150;\n        inline-size: 150;\n    }\n    \n    .focus-ring:focus-visible {\n        box-shadow: 0 0 0 var(--border-width) var(--color-primary, #3b82f6);\n    }\n  }\n\n  @media (min-width: 640px) {\n    /* Fade Stagger Delays - Kompakte Version */\n    .scroll-fade-staggered > *:nth-child(2) { animation-delay: 0.1s; }\n\n    .scroll-fade-staggered > *:nth-child(3) { animation-delay: 0.2s; }\n\n    .scroll-fade-staggered > *:nth-child(4) { animation-delay: 0.3s; }\n  }\n\n  @media (min-width: 768px) {\n    .scroll-to-top {\n      bottom: var(--spacing-8);\n      right: var(--spacing-8);\n    }\n  }\n\n  @media (min-width: 1024px) {\n    .scroll-parallax {\n      transform: translateY(calc(var(--scroll-offset) * 0.15));\n    }\n  }\n\n  /* Reduzierte Bewegung für Barrierefreiheit */\n  @media (prefers-reduced-motion: reduce) {\n    :root {\n      --scroll-behavior: auto;\n    }\n    \n    .scroll-fade,\n    .scroll-scale,\n    .scroll-slide,\n    .scroll-rotate,\n    .scroll-parallax,\n    .scroll-fade-staggered > * {\n      animation: none;\n      opacity: 1;\n      transform: none;\n      transition: none;\n    }\n  }\n}","/**\n * Spacing Utilities System - Token-Based Version\n * \n * A comprehensive spacing system using design tokens for consistent gap, margin, \n * and padding utilities. This version uses CSS custom properties from tokens/spacing.css\n * for better maintainability and consistency.\n * \n * @layer layout.spacing\n * @version 3.0\n * @author Design System Team\n */\n\n@layer layout.spacing {\n    /* ================= GAP UTILITIES ================= */\n\n    /* Gap für Grid- und Flex-Layouts */\n    .gap-0 { gap: var(--space-0, 0); }\n\n    .gap-px { gap: var(--space-px, 1px); }\n\n    .gap-1 { gap: var(--space-1, 0.25rem); }\n\n    .gap-2 { gap: var(--space-2, 0.5rem); }\n\n    .gap-3 { gap: var(--space-3, 0.75rem); }\n\n    .gap-4 { gap: var(--space-4, 1rem); }\n\n    .gap-5 { gap: var(--space-5, 1.25rem); }\n\n    .gap-6 { gap: var(--space-6, 1.5rem); }\n\n    .gap-7 { gap: var(--space-7, 1.75rem); }\n\n    .gap-8 { gap: var(--space-8, 2rem); }\n\n    .gap-9 { gap: var(--space-9, 2.25rem); }\n\n    .gap-10 { gap: var(--space-10, 2.5rem); }\n\n    .gap-11 { gap: var(--space-11, 2.75rem); }\n\n    .gap-12 { gap: var(--space-12, 3rem); }\n\n    .gap-14 { gap: var(--space-14, 3.5rem); }\n\n    .gap-16 { gap: var(--space-16, 4rem); }\n\n    .gap-20 { gap: var(--space-20, 5rem); }\n\n    .gap-24 { gap: var(--space-24, 6rem); }\n\n    .gap-28 { gap: var(--space-28, 7rem); }\n\n    .gap-32 { gap: var(--space-32, 8rem); }\n\n    .gap-36 { gap: var(--space-36, 9rem); }\n\n    .gap-40 { gap: var(--space-40, 10rem); }\n\n    .gap-44 { gap: var(--space-44, 11rem); }\n\n    .gap-48 { gap: var(--space-48, 12rem); }\n\n    .gap-52 { gap: var(--space-52, 13rem); }\n\n    .gap-56 { gap: var(--space-56, 14rem); }\n\n    .gap-60 { gap: var(--space-60, 15rem); }\n\n    .gap-64 { gap: var(--space-64, 16rem); }\n\n    .gap-72 { gap: var(--space-72, 18rem); }\n\n    .gap-80 { gap: var(--space-80, 20rem); }\n\n    .gap-96 { gap: var(--space-96, 24rem); }\n\n    /* Semantic Gap Utilities */\n    .gap-xs { gap: var(--space-xs, 0.75rem); }\n\n    .gap-sm { gap: var(--space-sm, 1.25rem); }\n\n    .gap-md { gap: var(--space-md, 1.75rem); }\n\n    .gap-lg { gap: var(--space-lg, 2.25rem); }\n\n    .gap-xl { gap: var(--space-xl, 3rem); }\n\n    .gap-2xl { gap: var(--space-2xl, 4rem); }\n\n    .gap-3xl { gap: var(--space-3xl, 5rem); }\n\n    /* Horizontale Gaps (column-gap) */\n    .gap-x-0 { column-gap: var(--space-0, 0); }\n\n    .gap-x-px { column-gap: var(--space-px, 1px); }\n\n    .gap-x-1 { column-gap: var(--space-1, 0.25rem); }\n\n    .gap-x-2 { column-gap: var(--space-2, 0.5rem); }\n\n    .gap-x-3 { column-gap: var(--space-3, 0.75rem); }\n\n    .gap-x-4 { column-gap: var(--space-4, 1rem); }\n\n    .gap-x-5 { column-gap: var(--space-5, 1.25rem); }\n\n    .gap-x-6 { column-gap: var(--space-6, 1.5rem); }\n\n    .gap-x-8 { column-gap: var(--space-8, 2rem); }\n\n    .gap-x-10 { column-gap: var(--space-10, 2.5rem); }\n\n    .gap-x-12 { column-gap: var(--space-12, 3rem); }\n\n    .gap-x-16 { column-gap: var(--space-16, 4rem); }\n\n    .gap-x-20 { column-gap: var(--space-20, 5rem); }\n\n    .gap-x-24 { column-gap: var(--space-24, 6rem); }\n\n    .gap-x-32 { column-gap: var(--space-32, 8rem); }\n\n    /* Vertikale Gaps (row-gap) */\n    .gap-y-0 { row-gap: var(--space-0, 0); }\n\n    .gap-y-px { row-gap: var(--space-px, 1px); }\n\n    .gap-y-1 { row-gap: var(--space-1, 0.25rem); }\n\n    .gap-y-2 { row-gap: var(--space-2, 0.5rem); }\n\n    .gap-y-3 { row-gap: var(--space-3, 0.75rem); }\n\n    .gap-y-4 { row-gap: var(--space-4, 1rem); }\n\n    .gap-y-5 { row-gap: var(--space-5, 1.25rem); }\n\n    .gap-y-6 { row-gap: var(--space-6, 1.5rem); }\n\n    .gap-y-8 { row-gap: var(--space-8, 2rem); }\n\n    .gap-y-10 { row-gap: var(--space-10, 2.5rem); }\n\n    .gap-y-12 { row-gap: var(--space-12, 3rem); }\n\n    .gap-y-16 { row-gap: var(--space-16, 4rem); }\n\n    .gap-y-20 { row-gap: var(--space-20, 5rem); }\n\n    .gap-y-24 { row-gap: var(--space-24, 6rem); }\n\n    .gap-y-32 { row-gap: var(--space-32, 8rem); }\n\n    /* ================= MARGIN UTILITIES ================= */\n\n    /* Margin in alle Richtungen */\n    .m-0 { margin: var(--space-0, 0); }\n\n    .m-px { margin: var(--space-px, 1px); }\n\n    .m-1 { margin: var(--space-1, 0.25rem); }\n\n    .m-2 { margin: var(--space-2, 0.5rem); }\n\n    .m-3 { margin: var(--space-3, 0.75rem); }\n\n    .m-4 { margin: var(--space-4, 1rem); }\n\n    .m-5 { margin: var(--space-5, 1.25rem); }\n\n    .m-6 { margin: var(--space-6, 1.5rem); }\n\n    .m-8 { margin: var(--space-8, 2rem); }\n\n    .m-10 { margin: var(--space-10, 2.5rem); }\n\n    .m-12 { margin: var(--space-12, 3rem); }\n\n    .m-16 { margin: var(--space-16, 4rem); }\n\n    .m-20 { margin: var(--space-20, 5rem); }\n\n    .m-24 { margin: var(--space-24, 6rem); }\n\n    .m-32 { margin: var(--space-32, 8rem); }\n\n    .m-auto { margin: auto; }\n\n    /* Horizontale Margins */\n    .mx-0 { margin-left: var(--space-0, 0); margin-right: var(--space-0, 0); }\n\n    .mx-px { margin-left: var(--space-px, 1px); margin-right: var(--space-px, 1px); }\n\n    .mx-1 { margin-left: var(--space-1, 0.25rem); margin-right: var(--space-1, 0.25rem); }\n\n    .mx-2 { margin-left: var(--space-2, 0.5rem); margin-right: var(--space-2, 0.5rem); }\n\n    .mx-3 { margin-left: var(--space-3, 0.75rem); margin-right: var(--space-3, 0.75rem); }\n\n    .mx-4 { margin-left: var(--space-4, 1rem); margin-right: var(--space-4, 1rem); }\n\n    .mx-5 { margin-left: var(--space-5, 1.25rem); margin-right: var(--space-5, 1.25rem); }\n\n    .mx-6 { margin-left: var(--space-6, 1.5rem); margin-right: var(--space-6, 1.5rem); }\n\n    .mx-8 { margin-left: var(--space-8, 2rem); margin-right: var(--space-8, 2rem); }\n\n    .mx-10 { margin-left: var(--space-10, 2.5rem); margin-right: var(--space-10, 2.5rem); }\n\n    .mx-12 { margin-left: var(--space-12, 3rem); margin-right: var(--space-12, 3rem); }\n\n    .mx-16 { margin-left: var(--space-16, 4rem); margin-right: var(--space-16, 4rem); }\n\n    .mx-20 { margin-left: var(--space-20, 5rem); margin-right: var(--space-20, 5rem); }\n\n    .mx-24 { margin-left: var(--space-24, 6rem); margin-right: var(--space-24, 6rem); }\n\n    .mx-32 { margin-left: var(--space-32, 8rem); margin-right: var(--space-32, 8rem); }\n\n    .mx-auto { margin-left: auto; margin-right: auto; }\n\n    /* Vertikale Margins */\n    .my-0 { margin-bottom: var(--space-0, 0); margin-top: var(--space-0, 0); }\n\n    .my-px { margin-bottom: var(--space-px, 1px); margin-top: var(--space-px, 1px); }\n\n    .my-1 { margin-bottom: var(--space-1, 0.25rem); margin-top: var(--space-1, 0.25rem); }\n\n    .my-2 { margin-bottom: var(--space-2, 0.5rem); margin-top: var(--space-2, 0.5rem); }\n\n    .my-3 { margin-bottom: var(--space-3, 0.75rem); margin-top: var(--space-3, 0.75rem); }\n\n    .my-4 { margin-bottom: var(--space-4, 1rem); margin-top: var(--space-4, 1rem); }\n\n    .my-5 { margin-bottom: var(--space-5, 1.25rem); margin-top: var(--space-5, 1.25rem); }\n\n    .my-6 { margin-bottom: var(--space-6, 1.5rem); margin-top: var(--space-6, 1.5rem); }\n\n    .my-8 { margin-bottom: var(--space-8, 2rem); margin-top: var(--space-8, 2rem); }\n\n    .my-10 { margin-bottom: var(--space-10, 2.5rem); margin-top: var(--space-10, 2.5rem); }\n\n    .my-12 { margin-bottom: var(--space-12, 3rem); margin-top: var(--space-12, 3rem); }\n\n    .my-16 { margin-bottom: var(--space-16, 4rem); margin-top: var(--space-16, 4rem); }\n\n    .my-20 { margin-bottom: var(--space-20, 5rem); margin-top: var(--space-20, 5rem); }\n\n    .my-24 { margin-bottom: var(--space-24, 6rem); margin-top: var(--space-24, 6rem); }\n\n    .my-32 { margin-bottom: var(--space-32, 8rem); margin-top: var(--space-32, 8rem); }\n\n    .my-auto { margin-bottom: auto; margin-top: auto; }\n\n    /* Einzelne Margin-Richtungen */\n    .mt-0 { margin-top: var(--space-0, 0); }\n\n    .mt-px { margin-top: var(--space-px, 1px); }\n\n    .mt-1 { margin-top: var(--space-1, 0.25rem); }\n\n    .mt-2 { margin-top: var(--space-2, 0.5rem); }\n\n    .mt-3 { margin-top: var(--space-3, 0.75rem); }\n\n    .mt-4 { margin-top: var(--space-4, 1rem); }\n\n    .mt-5 { margin-top: var(--space-5, 1.25rem); }\n\n    .mt-6 { margin-top: var(--space-6, 1.5rem); }\n\n    .mt-8 { margin-top: var(--space-8, 2rem); }\n\n    .mt-10 { margin-top: var(--space-10, 2.5rem); }\n\n    .mt-12 { margin-top: var(--space-12, 3rem); }\n\n    .mt-16 { margin-top: var(--space-16, 4rem); }\n\n    .mt-20 { margin-top: var(--space-20, 5rem); }\n\n    .mt-24 { margin-top: var(--space-24, 6rem); }\n\n    .mt-32 { margin-top: var(--space-32, 8rem); }\n\n    .mt-auto { margin-top: auto; }\n\n    .mr-0 { margin-right: var(--space-0, 0); }\n\n    .mr-px { margin-right: var(--space-px, 1px); }\n\n    .mr-1 { margin-right: var(--space-1, 0.25rem); }\n\n    .mr-2 { margin-right: var(--space-2, 0.5rem); }\n\n    .mr-3 { margin-right: var(--space-3, 0.75rem); }\n\n    .mr-4 { margin-right: var(--space-4, 1rem); }\n\n    .mr-5 { margin-right: var(--space-5, 1.25rem); }\n\n    .mr-6 { margin-right: var(--space-6, 1.5rem); }\n\n    .mr-8 { margin-right: var(--space-8, 2rem); }\n\n    .mr-10 { margin-right: var(--space-10, 2.5rem); }\n\n    .mr-12 { margin-right: var(--space-12, 3rem); }\n\n    .mr-16 { margin-right: var(--space-16, 4rem); }\n\n    .mr-20 { margin-right: var(--space-20, 5rem); }\n\n    .mr-24 { margin-right: var(--space-24, 6rem); }\n\n    .mr-32 { margin-right: var(--space-32, 8rem); }\n\n    .mr-auto { margin-right: auto; }\n\n    .mb-0 { margin-bottom: var(--space-0, 0); }\n\n    .mb-px { margin-bottom: var(--space-px, 1px); }\n\n    .mb-1 { margin-bottom: var(--space-1, 0.25rem); }\n\n    .mb-2 { margin-bottom: var(--space-2, 0.5rem); }\n\n    .mb-3 { margin-bottom: var(--space-3, 0.75rem); }\n\n    .mb-4 { margin-bottom: var(--space-4, 1rem); }\n\n    .mb-5 { margin-bottom: var(--space-5, 1.25rem); }\n\n    .mb-6 { margin-bottom: var(--space-6, 1.5rem); }\n\n    .mb-8 { margin-bottom: var(--space-8, 2rem); }\n\n    .mb-10 { margin-bottom: var(--space-10, 2.5rem); }\n\n    .mb-12 { margin-bottom: var(--space-12, 3rem); }\n\n    .mb-16 { margin-bottom: var(--space-16, 4rem); }\n\n    .mb-20 { margin-bottom: var(--space-20, 5rem); }\n\n    .mb-24 { margin-bottom: var(--space-24, 6rem); }\n\n    .mb-32 { margin-bottom: var(--space-32, 8rem); }\n\n    .mb-auto { margin-bottom: auto; }\n\n    .ml-0 { margin-left: var(--space-0, 0); }\n\n    .ml-px { margin-left: var(--space-px, 1px); }\n\n    .ml-1 { margin-left: var(--space-1, 0.25rem); }\n\n    .ml-2 { margin-left: var(--space-2, 0.5rem); }\n\n    .ml-3 { margin-left: var(--space-3, 0.75rem); }\n\n    .ml-4 { margin-left: var(--space-4, 1rem); }\n\n    .ml-5 { margin-left: var(--space-5, 1.25rem); }\n\n    .ml-6 { margin-left: var(--space-6, 1.5rem); }\n\n    .ml-8 { margin-left: var(--space-8, 2rem); }\n\n    .ml-10 { margin-left: var(--space-10, 2.5rem); }\n\n    .ml-12 { margin-left: var(--space-12, 3rem); }\n\n    .ml-16 { margin-left: var(--space-16, 4rem); }\n\n    .ml-20 { margin-left: var(--space-20, 5rem); }\n\n    .ml-24 { margin-left: var(--space-24, 6rem); }\n\n    .ml-32 { margin-left: var(--space-32, 8rem); }\n\n    .ml-auto { margin-left: auto; }\n\n    /* ================= NEGATIVE MARGINS ================= */\n\n    /* Negative Margins für Overlapping-Layouts */\n    .-m-1 { margin: calc(-1 * var(--space-1, 0.25rem)); }\n\n    .-m-2 { margin: calc(-1 * var(--space-2, 0.5rem)); }\n\n    .-m-3 { margin: calc(-1 * var(--space-3, 0.75rem)); }\n\n    .-m-4 { margin: calc(-1 * var(--space-4, 1rem)); }\n\n    .-m-5 { margin: calc(-1 * var(--space-5, 1.25rem)); }\n\n    .-m-6 { margin: calc(-1 * var(--space-6, 1.5rem)); }\n\n    .-m-8 { margin: calc(-1 * var(--space-8, 2rem)); }\n\n    .-m-10 { margin: calc(-1 * var(--space-10, 2.5rem)); }\n\n    .-m-12 { margin: calc(-1 * var(--space-12, 3rem)); }\n\n    .-m-16 { margin: calc(-1 * var(--space-16, 4rem)); }\n\n    .-m-20 { margin: calc(-1 * var(--space-20, 5rem)); }\n\n    .-m-24 { margin: calc(-1 * var(--space-24, 6rem)); }\n\n    .-m-32 { margin: calc(-1 * var(--space-32, 8rem)); }\n\n    /* ================= PADDING UTILITIES ================= */\n\n    /* Padding in alle Richtungen */\n    .p-0 { padding: var(--space-0, 0); }\n\n    .p-px { padding: var(--space-px, 1px); }\n\n    .p-1 { padding: var(--space-1, 0.25rem); }\n\n    .p-2 { padding: var(--space-2, 0.5rem); }\n\n    .p-3 { padding: var(--space-3, 0.75rem); }\n\n    .p-4 { padding: var(--space-4, 1rem); }\n\n    .p-5 { padding: var(--space-5, 1.25rem); }\n\n    .p-6 { padding: var(--space-6, 1.5rem); }\n\n    .p-8 { padding: var(--space-8, 2rem); }\n\n    .p-10 { padding: var(--space-10, 2.5rem); }\n\n    .p-12 { padding: var(--space-12, 3rem); }\n\n    .p-16 { padding: var(--space-16, 4rem); }\n\n    .p-20 { padding: var(--space-20, 5rem); }\n\n    .p-24 { padding: var(--space-24, 6rem); }\n\n    .p-32 { padding: var(--space-32, 8rem); }\n\n    /* Horizontales Padding */\n    .px-0 { padding-left: var(--space-0, 0); padding-right: var(--space-0, 0); }\n\n    .px-px { padding-left: var(--space-px, 1px); padding-right: var(--space-px, 1px); }\n\n    .px-1 { padding-left: var(--space-1, 0.25rem); padding-right: var(--space-1, 0.25rem); }\n\n    .px-2 { padding-left: var(--space-2, 0.5rem); padding-right: var(--space-2, 0.5rem); }\n\n    .px-3 { padding-left: var(--space-3, 0.75rem); padding-right: var(--space-3, 0.75rem); }\n\n    .px-4 { padding-left: var(--space-4, 1rem); padding-right: var(--space-4, 1rem); }\n\n    .px-5 { padding-left: var(--space-5, 1.25rem); padding-right: var(--space-5, 1.25rem); }\n\n    .px-6 { padding-left: var(--space-6, 1.5rem); padding-right: var(--space-6, 1.5rem); }\n\n    .px-8 { padding-left: var(--space-8, 2rem); padding-right: var(--space-8, 2rem); }\n\n    .px-10 { padding-left: var(--space-10, 2.5rem); padding-right: var(--space-10, 2.5rem); }\n\n    .px-12 { padding-left: var(--space-12, 3rem); padding-right: var(--space-12, 3rem); }\n\n    .px-16 { padding-left: var(--space-16, 4rem); padding-right: var(--space-16, 4rem); }\n\n    .px-20 { padding-left: var(--space-20, 5rem); padding-right: var(--space-20, 5rem); }\n\n    .px-24 { padding-left: var(--space-24, 6rem); padding-right: var(--space-24, 6rem); }\n\n    .px-32 { padding-left: var(--space-32, 8rem); padding-right: var(--space-32, 8rem); }\n\n    /* Vertikales Padding */\n    .py-0 { padding-bottom: var(--space-0, 0); padding-top: var(--space-0, 0); }\n\n    .py-px { padding-bottom: var(--space-px, 1px); padding-top: var(--space-px, 1px); }\n\n    .py-1 { padding-bottom: var(--space-1, 0.25rem); padding-top: var(--space-1, 0.25rem); }\n\n    .py-2 { padding-bottom: var(--space-2, 0.5rem); padding-top: var(--space-2, 0.5rem); }\n\n    .py-3 { padding-bottom: var(--space-3, 0.75rem); padding-top: var(--space-3, 0.75rem); }\n\n    .py-4 { padding-bottom: var(--space-4, 1rem); padding-top: var(--space-4, 1rem); }\n\n    .py-5 { padding-bottom: var(--space-5, 1.25rem); padding-top: var(--space-5, 1.25rem); }\n\n    .py-6 { padding-bottom: var(--space-6, 1.5rem); padding-top: var(--space-6, 1.5rem); }\n\n    .py-8 { padding-bottom: var(--space-8, 2rem); padding-top: var(--space-8, 2rem); }\n\n    .py-10 { padding-bottom: var(--space-10, 2.5rem); padding-top: var(--space-10, 2.5rem); }\n\n    .py-12 { padding-bottom: var(--space-12, 3rem); padding-top: var(--space-12, 3rem); }\n\n    .py-16 { padding-bottom: var(--space-16, 4rem); padding-top: var(--space-16, 4rem); }\n\n    .py-20 { padding-bottom: var(--space-20, 5rem); padding-top: var(--space-20, 5rem); }\n\n    .py-24 { padding-bottom: var(--space-24, 6rem); padding-top: var(--space-24, 6rem); }\n\n    .py-32 { padding-bottom: var(--space-32, 8rem); padding-top: var(--space-32, 8rem); }\n\n    /* Einzelne Padding-Richtungen */\n    .pt-0 { padding-top: var(--space-0, 0); }\n\n    .pt-px { padding-top: var(--space-px, 1px); }\n\n    .pt-1 { padding-top: var(--space-1, 0.25rem); }\n\n    .pt-2 { padding-top: var(--space-2, 0.5rem); }\n\n    .pt-3 { padding-top: var(--space-3, 0.75rem); }\n\n    .pt-4 { padding-top: var(--space-4, 1rem); }\n\n    .pt-5 { padding-top: var(--space-5, 1.25rem); }\n\n    .pt-6 { padding-top: var(--space-6, 1.5rem); }\n\n    .pt-8 { padding-top: var(--space-8, 2rem); }\n\n    .pt-10 { padding-top: var(--space-10, 2.5rem); }\n\n    .pt-12 { padding-top: var(--space-12, 3rem); }\n\n    .pt-16 { padding-top: var(--space-16, 4rem); }\n\n    .pt-20 { padding-top: var(--space-20, 5rem); }\n\n    .pt-24 { padding-top: var(--space-24, 6rem); }\n\n    .pt-32 { padding-top: var(--space-32, 8rem); }\n\n    .pr-0 { padding-right: var(--space-0, 0); }\n\n    .pr-px { padding-right: var(--space-px, 1px); }\n\n    .pr-1 { padding-right: var(--space-1, 0.25rem); }\n\n    .pr-2 { padding-right: var(--space-2, 0.5rem); }\n\n    .pr-3 { padding-right: var(--space-3, 0.75rem); }\n\n    .pr-4 { padding-right: var(--space-4, 1rem); }\n\n    .pr-5 { padding-right: var(--space-5, 1.25rem); }\n\n    .pr-6 { padding-right: var(--space-6, 1.5rem); }\n\n    .pr-8 { padding-right: var(--space-8, 2rem); }\n\n    .pr-10 { padding-right: var(--space-10, 2.5rem); }\n\n    .pr-12 { padding-right: var(--space-12, 3rem); }\n\n    .pr-16 { padding-right: var(--space-16, 4rem); }\n\n    .pr-20 { padding-right: var(--space-20, 5rem); }\n\n    .pr-24 { padding-right: var(--space-24, 6rem); }\n\n    .pr-32 { padding-right: var(--space-32, 8rem); }\n\n    .pb-0 { padding-bottom: var(--space-0, 0); }\n\n    .pb-px { padding-bottom: var(--space-px, 1px); }\n\n    .pb-1 { padding-bottom: var(--space-1, 0.25rem); }\n\n    .pb-2 { padding-bottom: var(--space-2, 0.5rem); }\n\n    .pb-3 { padding-bottom: var(--space-3, 0.75rem); }\n\n    .pb-4 { padding-bottom: var(--space-4, 1rem); }\n\n    .pb-5 { padding-bottom: var(--space-5, 1.25rem); }\n\n    .pb-6 { padding-bottom: var(--space-6, 1.5rem); }\n\n    .pb-8 { padding-bottom: var(--space-8, 2rem); }\n\n    .pb-10 { padding-bottom: var(--space-10, 2.5rem); }\n\n    .pb-12 { padding-bottom: var(--space-12, 3rem); }\n\n    .pb-16 { padding-bottom: var(--space-16, 4rem); }\n\n    .pb-20 { padding-bottom: var(--space-20, 5rem); }\n\n    .pb-24 { padding-bottom: var(--space-24, 6rem); }\n\n    .pb-32 { padding-bottom: var(--space-32, 8rem); }\n\n    .pl-0 { padding-left: var(--space-0, 0); }\n\n    .pl-px { padding-left: var(--space-px, 1px); }\n\n    .pl-1 { padding-left: var(--space-1, 0.25rem); }\n\n    .pl-2 { padding-left: var(--space-2, 0.5rem); }\n\n    .pl-3 { padding-left: var(--space-3, 0.75rem); }\n\n    .pl-4 { padding-left: var(--space-4, 1rem); }\n\n    .pl-5 { padding-left: var(--space-5, 1.25rem); }\n\n    .pl-6 { padding-left: var(--space-6, 1.5rem); }\n\n    .pl-8 { padding-left: var(--space-8, 2rem); }\n\n    .pl-10 { padding-left: var(--space-10, 2.5rem); }\n\n    .pl-12 { padding-left: var(--space-12, 3rem); }\n\n    .pl-16 { padding-left: var(--space-16, 4rem); }\n\n    .pl-20 { padding-left: var(--space-20, 5rem); }\n\n    .pl-24 { padding-left: var(--space-24, 6rem); }\n\n    .pl-32 { padding-left: var(--space-32, 8rem); }\n} ","/**\n * Spacing Properties with @property Definitions\n * \n * Typed CSS custom properties for spacing using @property.\n * This enables better tooling support, autocomplete, and animation capabilities.\n * \n * @layer tokens.properties\n */\n\n@layer tokens.properties {\n  /* Base Spacing Properties - Complete Scale */\n  @property --space-0 {\n    inherits: true;\n    initial-value: 0;\n    syntax: '<length>';\n  }\n  \n  @property --space-px {\n    inherits: true;\n    initial-value: 1px;\n    syntax: '<length>';\n  }\n  \n  @property --space-1 {\n    inherits: true;\n    initial-value: 0.25rem;\n    syntax: '<length>';\n  }\n  \n  @property --space-2 {\n    inherits: true;\n    initial-value: 0.5rem;\n    syntax: '<length>';\n  }\n  \n  @property --space-3 {\n    inherits: true;\n    initial-value: 0.75rem;\n    syntax: '<length>';\n  }\n  \n  @property --space-4 {\n    inherits: true;\n    initial-value: 1rem;\n    syntax: '<length>';\n  }\n  \n  @property --space-5 {\n    inherits: true;\n    initial-value: 1.25rem;\n    syntax: '<length>';\n  }\n  \n  @property --space-6 {\n    inherits: true;\n    initial-value: 1.5rem;\n    syntax: '<length>';\n  }\n  \n  @property --space-7 {\n    inherits: true;\n    initial-value: 1.75rem;\n    syntax: '<length>';\n  }\n  \n  @property --space-8 {\n    inherits: true;\n    initial-value: 2rem;\n    syntax: '<length>';\n  }\n  \n  @property --space-9 {\n    inherits: true;\n    initial-value: 2.25rem;\n    syntax: '<length>';\n  }\n  \n  @property --space-10 {\n    inherits: true;\n    initial-value: 2.5rem;\n    syntax: '<length>';\n  }\n  \n  @property --space-11 {\n    inherits: true;\n    initial-value: 2.75rem;\n    syntax: '<length>';\n  }\n  \n  @property --space-12 {\n    inherits: true;\n    initial-value: 3rem;\n    syntax: '<length>';\n  }\n  \n  @property --space-14 {\n    inherits: true;\n    initial-value: 3.5rem;\n    syntax: '<length>';\n  }\n  \n  @property --space-16 {\n    inherits: true;\n    initial-value: 4rem;\n    syntax: '<length>';\n  }\n  \n  @property --space-20 {\n    inherits: true;\n    initial-value: 5rem;\n    syntax: '<length>';\n  }\n  \n  @property --space-24 {\n    inherits: true;\n    initial-value: 6rem;\n    syntax: '<length>';\n  }\n  \n  @property --space-28 {\n    inherits: true;\n    initial-value: 7rem;\n    syntax: '<length>';\n  }\n  \n  @property --space-32 {\n    inherits: true;\n    initial-value: 8rem;\n    syntax: '<length>';\n  }\n  \n  @property --space-36 {\n    inherits: true;\n    initial-value: 9rem;\n    syntax: '<length>';\n  }\n  \n  @property --space-40 {\n    inherits: true;\n    initial-value: 10rem;\n    syntax: '<length>';\n  }\n  \n  @property --space-44 {\n    inherits: true;\n    initial-value: 11rem;\n    syntax: '<length>';\n  }\n  \n  @property --space-48 {\n    inherits: true;\n    initial-value: 12rem;\n    syntax: '<length>';\n  }\n  \n  @property --space-52 {\n    inherits: true;\n    initial-value: 13rem;\n    syntax: '<length>';\n  }\n  \n  @property --space-56 {\n    inherits: true;\n    initial-value: 14rem;\n    syntax: '<length>';\n  }\n  \n  @property --space-60 {\n    inherits: true;\n    initial-value: 15rem;\n    syntax: '<length>';\n  }\n  \n  @property --space-64 {\n    inherits: true;\n    initial-value: 16rem;\n    syntax: '<length>';\n  }\n  \n  @property --space-72 {\n    inherits: true;\n    initial-value: 18rem;\n    syntax: '<length>';\n  }\n  \n  @property --space-80 {\n    inherits: true;\n    initial-value: 20rem;\n    syntax: '<length>';\n  }\n  \n  @property --space-96 {\n    inherits: true;\n    initial-value: 24rem;\n    syntax: '<length>';\n  }\n  \n  /* Large spacing for special cases */\n  @property --space-large-200 {\n    inherits: true;\n    initial-value: 200px;\n    syntax: '<length>';\n  }\n\n  @property --space-large-30rem {\n    inherits: true;\n    initial-value: 30rem;\n    syntax: '<length>';\n  }\n\n  @property --space-small-10px {\n    inherits: true;\n    initial-value: 10px;\n    syntax: '<length>';\n  }\n  \n  /* Semantic Spacing Aliases */\n  @property --space-xs {\n    inherits: true;\n    initial-value: 0.25rem;\n    syntax: '<length>';\n  }\n  \n  @property --space-sm {\n    inherits: true;\n    initial-value: 0.5rem;\n    syntax: '<length>';\n  }\n  \n  @property --space-md {\n    inherits: true;\n    initial-value: 1rem;\n    syntax: '<length>';\n  }\n  \n  @property --space-lg {\n    inherits: true;\n    initial-value: 1.5rem;\n    syntax: '<length>';\n  }\n  \n  @property --space-xl {\n    inherits: true;\n    initial-value: 2rem;\n    syntax: '<length>';\n  }\n  \n  @property --space-2xl {\n    inherits: true;\n    initial-value: 3rem;\n    syntax: '<length>';\n  }\n  \n  @property --space-3xl {\n    inherits: true;\n    initial-value: 4rem;\n    syntax: '<length>';\n  }\n  \n  /* Component-Specific Spacing Properties */\n  @property --space-button-padding-x {\n    inherits: true;\n    initial-value: 1rem;\n    syntax: '<length>';\n  }\n  \n  @property --space-button-padding-y {\n    inherits: true;\n    initial-value: 0.5rem;\n    syntax: '<length>';\n  }\n  \n  @property --space-card-padding {\n    inherits: true;\n    initial-value: 1.5rem;\n    syntax: '<length>';\n  }\n  \n  @property --space-form-gap {\n    inherits: true;\n    initial-value: 1rem;\n    syntax: '<length>';\n  }\n  \n  @property --space-section-gap {\n    inherits: true;\n    initial-value: 3rem;\n    syntax: '<length>';\n  }\n  \n  @property --space-input-padding {\n    inherits: true;\n    initial-value: 0.75rem;\n    syntax: '<length>';\n  }\n  \n  @property --space-modal-padding {\n    inherits: true;\n    initial-value: 1.5rem;\n    syntax: '<length>';\n  }\n  \n  /* Gap Properties */\n  @property --space-gap-xs {\n    inherits: true;\n    initial-value: 0.25rem;\n    syntax: '<length>';\n  }\n  \n  @property --space-gap-sm {\n    inherits: true;\n    initial-value: 0.5rem;\n    syntax: '<length>';\n  }\n  \n  @property --space-gap-md {\n    inherits: true;\n    initial-value: 1rem;\n    syntax: '<length>';\n  }\n  \n  @property --space-gap-lg {\n    inherits: true;\n    initial-value: 1.5rem;\n    syntax: '<length>';\n  }\n  \n  @property --space-gap-xl {\n    inherits: true;\n    initial-value: 2rem;\n    syntax: '<length>';\n  }\n  \n  /* Layout Spacing Properties */\n  @property --space-container-padding {\n    inherits: true;\n    initial-value: 1rem;\n    syntax: '<length>';\n  }\n  \n  @property --space-grid-gap {\n    inherits: true;\n    initial-value: 1rem;\n    syntax: '<length>';\n  }\n  \n  @property --space-flex-gap {\n    inherits: true;\n    initial-value: 1rem;\n    syntax: '<length>';\n  }\n  \n  /* Animatable Spacing Properties */\n  @property --space-transition-padding {\n    inherits: true;\n    initial-value: 1rem;\n    syntax: '<length>';\n  }\n  \n  @property --space-transition-margin {\n    inherits: true;\n    initial-value: 1rem;\n    syntax: '<length>';\n  }\n  \n  @property --space-transition-gap {\n    inherits: true;\n    initial-value: 1rem;\n    syntax: '<length>';\n  }\n  \n  /* Initial Value Definitions */\n  :root {\n    /* Base Spacing Scale */\n    --space-0: 0;\n    --space-px: 1px;\n    --space-1: 0.25rem;\n    --space-2: 0.5rem;\n    --space-3: 0.75rem;\n    --space-4: 1rem;\n    --space-5: 1.25rem;\n    --space-6: 1.5rem;\n    --space-7: 1.75rem;\n    --space-8: 2rem;\n    --space-9: 2.25rem;\n    --space-10: 2.5rem;\n    --space-11: 2.75rem;\n    --space-12: 3rem;\n    --space-14: 3.5rem;\n    --space-16: 4rem;\n    --space-20: 5rem;\n    --space-24: 6rem;\n    --space-28: 7rem;\n    --space-32: 8rem;\n    --space-36: 9rem;\n    --space-40: 10rem;\n    --space-44: 11rem;\n    --space-48: 12rem;\n    --space-52: 13rem;\n    --space-56: 14rem;\n    --space-60: 15rem;\n    --space-64: 16rem;\n    --space-72: 18rem;\n    --space-80: 20rem;\n    --space-96: 24rem;\n    \n    /* Component Spacing */\n    --space-button-padding-x: var(--space-md);\n    --space-button-padding-y: var(--space-sm);\n    --space-card-padding: var(--space-lg);\n    --space-form-gap: var(--space-md);\n    --space-section-gap: var(--space-3xl);\n    \n    /* Layout Spacing */\n    --space-container-padding: var(--space-md);\n    --space-grid-gap: var(--space-md);\n    --space-flex-gap: var(--space-md);\n    \n    /* Transition Spacing */\n    --space-transition-padding: var(--space-md);\n    --space-transition-margin: var(--space-md);\n    --space-transition-gap: var(--space-md);\n  }\n} ","/**\n * Typography Properties with @property Definitions\n * \n * Typed CSS custom properties for typography using @property.\n * This enables better tooling support, autocomplete, and animation capabilities.\n * \n * @layer tokens.properties\n */\n\n@layer tokens.properties {\n  /* Font Size Properties */\n  @property --font-size-xs {\n    inherits: true;\n    initial-value: 0.75rem;\n    syntax: '<length>';\n  }\n  \n  @property --font-size-sm {\n    inherits: true;\n    initial-value: 0.875rem;\n    syntax: '<length>';\n  }\n  \n  @property --font-size-base {\n    inherits: true;\n    initial-value: 1rem;\n    syntax: '<length>';\n  }\n  \n  @property --font-size-lg {\n    inherits: true;\n    initial-value: 1.125rem;\n    syntax: '<length>';\n  }\n  \n  @property --font-size-xl {\n    inherits: true;\n    initial-value: 1.25rem;\n    syntax: '<length>';\n  }\n  \n  @property --font-size-2xl {\n    inherits: true;\n    initial-value: 1.5rem;\n    syntax: '<length>';\n  }\n  \n  @property --font-size-3xl {\n    inherits: true;\n    initial-value: 1.875rem;\n    syntax: '<length>';\n  }\n  \n  @property --font-size-4xl {\n    inherits: true;\n    initial-value: 2.25rem;\n    syntax: '<length>';\n  }\n  \n  @property --font-size-5xl {\n    inherits: true;\n    initial-value: 3rem;\n    syntax: '<length>';\n  }\n\n  @property --font-size-6xl {\n    inherits: true;\n    initial-value: 4rem;\n    syntax: '<length>';\n  }\n\n  /* Text Size Aliases (für Komponenten-Kompatibilität) */\n  @property --text-xs {\n    inherits: true;\n    initial-value: 0.75rem;\n    syntax: '<length>';\n  }\n  \n  @property --text-sm {\n    inherits: true;\n    initial-value: 0.875rem;\n    syntax: '<length>';\n  }\n  \n  @property --text-base {\n    inherits: true;\n    initial-value: 1rem;\n    syntax: '<length>';\n  }\n  \n  @property --text-lg {\n    inherits: true;\n    initial-value: 1.125rem;\n    syntax: '<length>';\n  }\n  \n  @property --text-xl {\n    inherits: true;\n    initial-value: 1.25rem;\n    syntax: '<length>';\n  }\n\n  @property --text-2xl {\n    inherits: true;\n    initial-value: 1.5rem;\n    syntax: '<length>';\n  }\n\n  /* Line Height Properties */\n  @property --line-height-tight {\n    inherits: true;\n    initial-value: 1.25;\n    syntax: '<number>';\n  }\n  \n  @property --line-height-snug {\n    inherits: true;\n    initial-value: 1.375;\n    syntax: '<number>';\n  }\n  \n  @property --line-height-normal {\n    inherits: true;\n    initial-value: 1.5;\n    syntax: '<number>';\n  }\n  \n  @property --line-height-relaxed {\n    inherits: true;\n    initial-value: 1.625;\n    syntax: '<number>';\n  }\n  \n  @property --line-height-loose {\n    inherits: true;\n    initial-value: 2;\n    syntax: '<number>';\n  }\n  \n  /* Font Weight Properties */\n  @property --font-weight-thin {\n    inherits: true;\n    initial-value: 100;\n    syntax: '<number>';\n  }\n  \n  @property --font-weight-extralight {\n    inherits: true;\n    initial-value: 200;\n    syntax: '<number>';\n  }\n  \n  @property --font-weight-light {\n    inherits: true;\n    initial-value: 300;\n    syntax: '<number>';\n  }\n  \n  @property --font-weight-normal {\n    inherits: true;\n    initial-value: 400;\n    syntax: '<number>';\n  }\n  \n  @property --font-weight-medium {\n    inherits: true;\n    initial-value: 500;\n    syntax: '<number>';\n  }\n  \n  @property --font-weight-semibold {\n    inherits: true;\n    initial-value: 600;\n    syntax: '<number>';\n  }\n  \n  @property --font-weight-bold {\n    inherits: true;\n    initial-value: 700;\n    syntax: '<number>';\n  }\n\n  @property --font-weight-extrabold {\n    inherits: true;\n    initial-value: 800;\n    syntax: '<number>';\n  }\n\n  @property --font-weight-black {\n    inherits: true;\n    initial-value: 900;\n    syntax: '<number>';\n  }\n\n  /* Font Weight Aliases (für Komponenten-Kompatibilität) */\n  @property --font-light {\n    inherits: true;\n    initial-value: 300;\n    syntax: '<number>';\n  }\n  \n  @property --font-normal {\n    inherits: true;\n    initial-value: 400;\n    syntax: '<number>';\n  }\n  \n  @property --font-medium {\n    inherits: true;\n    initial-value: 500;\n    syntax: '<number>';\n  }\n  \n  @property --font-semibold {\n    inherits: true;\n    initial-value: 600;\n    syntax: '<number>';\n  }\n  \n  @property --font-bold {\n    inherits: true;\n    initial-value: 700;\n    syntax: '<number>';\n  }\n\n  /* Font Family Properties - Defined only in :root for better performance */\n  \n  /* Letter Spacing Properties */\n  @property --letter-spacing-tighter {\n    inherits: true;\n    initial-value: -0.05em;\n    syntax: '<length>';\n  }\n  \n  @property --letter-spacing-tight {\n    inherits: true;\n    initial-value: -0.025em;\n    syntax: '<length>';\n  }\n  \n  @property --letter-spacing-normal {\n    inherits: true;\n    initial-value: 0;\n    syntax: '<length>';\n  }\n  \n  @property --letter-spacing-wide {\n    inherits: true;\n    initial-value: 0.025em;\n    syntax: '<length>';\n  }\n  \n  @property --letter-spacing-wider {\n    inherits: true;\n    initial-value: 0.05em;\n    syntax: '<length>';\n  }\n\n  @property --letter-spacing-widest {\n    inherits: true;\n    initial-value: 0.1em;\n    syntax: '<length>';\n  }\n  \n  /* Animatable Typography Properties */\n  @property --font-size-transition {\n    inherits: true;\n    initial-value: 1rem;\n    syntax: '<length>';\n  }\n  \n  @property --line-height-transition {\n    inherits: true;\n    initial-value: 1.5;\n    syntax: '<number>';\n  }\n  \n  @property --letter-spacing-transition {\n    inherits: true;\n    initial-value: 0;\n    syntax: '<length>';\n  }\n}\n\n/* Initial Value Definitions */\n:root {\n  /* Font Sizes */\n  --font-size-xs: 0.75rem;\n  --font-size-sm: 0.875rem;\n  --font-size-base: 1rem;\n  --font-size-lg: 1.125rem;\n  --font-size-xl: 1.25rem;\n  --font-size-2xl: 1.5rem;\n  --font-size-3xl: 1.875rem;\n  --font-size-4xl: 2.25rem;\n  --font-size-5xl: 3rem;\n  --font-size-6xl: 4rem;\n  \n  /* Text Size Aliases */\n  --text-xs: var(--font-size-xs);\n  --text-sm: var(--font-size-sm);\n  --text-base: var(--font-size-base);\n  --text-lg: var(--font-size-lg);\n  --text-xl: var(--font-size-xl);\n  --text-2xl: var(--font-size-2xl);\n  \n  /* Line Heights */\n  --line-height-tight: 1.25;\n  --line-height-snug: 1.375;\n  --line-height-normal: 1.5;\n  --line-height-relaxed: 1.625;\n  --line-height-loose: 2;\n  \n  /* Font Weights */\n  --font-weight-thin: 100;\n  --font-weight-extralight: 200;\n  --font-weight-light: 300;\n  --font-weight-normal: 400;\n  --font-weight-medium: 500;\n  --font-weight-semibold: 600;\n  --font-weight-bold: 700;\n  --font-weight-extrabold: 800;\n  --font-weight-black: 900;\n  \n  /* Font Weight Aliases */\n  --font-light: var(--font-weight-light);\n  --font-normal: var(--font-weight-normal);\n  --font-medium: var(--font-weight-medium);\n  --font-semibold: var(--font-weight-semibold);\n  --font-bold: var(--font-weight-bold);\n  \n  /* Font Families */\n  --font-family-sans: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, \"Helvetica Neue\", Arial, \"Noto Sans\", sans-serif;\n  --font-family-serif: ui-serif, Georgia, Cambria, \"Times New Roman\", Times, serif;\n  --font-family-mono: ui-monospace, SFMono-Regular, \"SF Mono\", Consolas, \"Liberation Mono\", Menlo, monospace;\n  \n  /* Font Family Aliases (kurze Versionen für Komponenten) */\n  --font-sans: var(--font-family-sans);\n  --font-serif: var(--font-family-serif);\n  --font-mono: var(--font-family-mono);\n  \n  /* Letter Spacing */\n  --letter-spacing-tight: -0.025em;\n  --letter-spacing-normal: 0;\n  --letter-spacing-wide: 0.025em;\n  --letter-spacing-wider: 0.05em;\n  \n  /* Transition Properties */\n  --font-size-transition: var(--font-size-base);\n  --line-height-transition: var(--line-height-normal);\n  --letter-spacing-transition: var(--letter-spacing-normal);\n}","/* Content Module */\n\n@layer elements {\n  a {\n    color: var(--color-primary, #3b82f6);\n  }\n\n  a:hover {\n    color: var(--color-primary-hover, #2563eb);\n    text-decoration: underline;\n  }\n\n  h1,\n  h2,\n  h3,\n  h4,\n  h5,\n  h6 {\n    margin: 1.5rem 0 1rem;\n  }\n\n  p {\n    margin: 1rem 0;\n  }\n}\n\n@layer components {\n  .content {\n    color: var(--color-gray-900, #111827);\n    font-size: var(--font-size-base, 1rem);\n    line-height: 1.6;\n    max-width: 65ch;\n  }\n\n  .content h1 {\n    font-size: var(--font-size-4xl, 2.25rem);\n  }\n\n  .content h2 {\n    font-size: var(--font-size-3xl, 1.875rem);\n  }\n\n  .content p {\n    line-height: 1.6;\n    margin-bottom: var(--space-4);\n    margin-top: 0;\n  }\n\n  .content a {\n    color: var(--color-primary, #3b82f6);\n    text-decoration: underline;\n  }\n\n  .content a:hover {\n    color: var(--color-primary-dark, #1e40af);\n  }\n}\n","/**\n * Semantic Alias Tokens\n * \n * This file defines semantic aliases that reference the base design tokens.\n * Components should use these aliases instead of direct token references.\n * This provides a semantic layer that can be easily themed and maintained.\n * \n * @layer themes.aliases\n */\n\n@layer themes.aliases {\n  :root {\n    /* Button Aliases */\n    --btn-bg: var(--color-primary);\n    --btn-bg-hover: var(--color-primary-600);\n    --btn-bg-active: var(--color-primary-700);\n    --btn-bg-disabled: var(--color-gray-300);\n    --btn-text: var(--color-text-inverse);\n    --btn-text-disabled: var(--color-text-muted);\n    --btn-border: var(--color-primary);\n    --btn-border-hover: var(--color-primary-600);\n    --btn-radius: var(--radius-button);\n    --btn-padding-x: var(--space-button-padding-x);\n    --btn-padding-y: var(--space-button-padding-y);\n    --btn-font-size: var(--font-size-base);\n    --btn-font-weight: var(--font-weight-medium);\n    \n    /* Button Secondary */\n    --btn-secondary-bg: var(--color-secondary);\n    --btn-secondary-bg-hover: var(--color-secondary-600);\n    --btn-secondary-text: var(--color-text-inverse);\n    --btn-secondary-border: var(--color-secondary);\n    \n    /* Button Outline */\n    --btn-outline-bg: transparent;\n    --btn-outline-bg-hover: var(--color-primary);\n    --btn-outline-text: var(--color-primary);\n    --btn-outline-text-hover: var(--color-text-inverse);\n    --btn-outline-border: var(--color-primary);\n    \n    /* Card Aliases */\n    --card-bg: var(--color-surface-elevated);\n    --card-bg-hover: var(--color-surface);\n    --card-border: var(--color-border);\n    --card-border-hover: var(--color-border-strong);\n    --card-radius: var(--radius-card);\n    --card-padding: var(--space-card-padding);\n    --card-shadow: 0 1px 3px 0 rgb(0 0 0 / 1000%), 0 1px 2px -1px rgb(0 0 0 / 1000%);\n    --card-shadow-hover: 0 4px 6px -1px rgb(0 0 0 / 1000%), 0 2px 4px -2px rgb(0 0 0 / 1000%);\n    \n    /* Form Aliases */\n    --form-bg: var(--color-surface-elevated);\n    --form-border: var(--color-border);\n    --form-border-focus: var(--color-primary);\n    --form-border-error: var(--color-error);\n    --form-text: var(--color-text);\n    --form-text-placeholder: var(--color-text-muted);\n    --form-radius: var(--radius-input);\n    --form-padding-x: var(--space-sm);\n    --form-padding-y: var(--space-sm);\n    --form-gap: var(--space-form-gap);\n    --form-font-size: var(--font-size-base);\n    \n    /* Form Error States */\n    --form-error-color: var(--color-error);\n    --form-error-bg: var(--color-error-50);\n    --form-error-border: var(--color-error);\n    \n    /* Form Success States */\n    --form-success-color: var(--color-success);\n    --form-success-bg: var(--color-success-50);\n    --form-success-border: var(--color-success);\n    \n    /* Navigation Aliases */\n    --nav-bg: var(--color-surface-elevated);\n    --nav-border: var(--color-border);\n    --nav-text: var(--color-text);\n    --nav-text-hover: var(--color-primary);\n    --nav-text-active: var(--color-primary);\n    --nav-link-padding-x: var(--space-md);\n    --nav-link-padding-y: var(--space-sm);\n    \n    /* Header Aliases */\n    --header-bg: var(--color-surface-elevated);\n    --header-border: var(--color-border);\n    --header-text: var(--color-text);\n    --header-height: 4rem;\n    --header-padding: var(--space-md);\n    \n    /* Footer Aliases */\n    --footer-bg: var(--color-surface);\n    --footer-border: var(--color-border);\n    --footer-text: var(--color-text-muted);\n    --footer-text-hover: var(--color-text);\n    --footer-padding: var(--space-xl);\n    \n    /* Modal Aliases */\n    --modal-bg: var(--color-surface-elevated);\n    --modal-overlay-bg: rgb(0 0 0 / 5000%);\n    --modal-border: var(--color-border);\n    --modal-radius: var(--radius-modal);\n    --modal-padding: var(--space-xl);\n    --modal-shadow: 0 20px 25px -5px rgb(0 0 0 / 1000%), 0 8px 10px -6px rgb(0 0 0 / 1000%);\n    \n    /* Badge Aliases */\n    --badge-bg: var(--color-gray-100);\n    --badge-text: var(--color-gray-800);\n    --badge-radius: var(--radius-badge);\n    --badge-padding-x: var(--space-xs);\n    --badge-padding-y: var(--space-0-5);\n    --badge-font-size: var(--font-size-xs);\n    --badge-font-weight: var(--font-weight-medium);\n    \n    /* Badge Primary */\n    --badge-primary-bg: var(--color-primary-100);\n    --badge-primary-text: var(--color-primary-800);\n    \n    /* Badge Success */\n    --badge-success-bg: var(--color-success-100);\n    --badge-success-text: var(--color-success-800);\n    \n    /* Badge Warning */\n    --badge-warning-bg: var(--color-warning-100);\n    --badge-warning-text: var(--color-warning-800);\n    \n    /* Badge Error */\n    --badge-error-bg: var(--color-error-100);\n    --badge-error-text: var(--color-error-800);\n    \n    /* Alert Aliases */\n    --alert-info-bg: var(--color-primary-50);\n    --alert-info-border: var(--color-primary-200);\n    --alert-info-text: var(--color-primary-800);\n    --alert-info-icon: var(--color-primary-600);\n    --alert-success-bg: var(--color-success-50);\n    --alert-success-border: var(--color-success-200);\n    --alert-success-text: var(--color-success-800);\n    --alert-success-icon: var(--color-success-600);\n    --alert-warning-bg: var(--color-warning-50);\n    --alert-warning-border: var(--color-warning-200);\n    --alert-warning-text: var(--color-warning-800);\n    --alert-warning-icon: var(--color-warning-600);\n    --alert-error-bg: var(--color-error-50);\n    --alert-error-border: var(--color-error-200);\n    --alert-error-text: var(--color-error-800);\n    --alert-error-icon: var(--color-error-600);\n    \n    /* Layout Aliases */\n    --layout-container-max-width: 120%0px;\n    --layout-container-padding: var(--space-container-padding);\n    --layout-section-gap: var(--space-section-gap);\n    --layout-grid-gap: var(--space-grid-gap);\n    --layout-flex-gap: var(--space-flex-gap);\n    \n    /* Typography Aliases */\n    --text-heading-color: var(--color-text);\n    --text-body-color: var(--color-text);\n    --text-muted-color: var(--color-text-muted);\n    --text-link-color: var(--color-primary);\n    --text-link-hover-color: var(--color-primary-600);\n    \n    /* Focus Aliases */\n    --focus-ring-color: var(--color-primary);\n    --focus-ring-width: 2px;\n    --focus-ring-offset: 2px;\n    --focus-ring-style: solid;\n    \n    /* Transition Aliases */\n    --transition-fast: 150ms ease;\n    --transition-normal: 250ms ease;\n    --transition-slow: 350ms ease;\n    --transition-colors: color 150ms ease, background-color 150ms ease, border-color 150ms ease;\n    --transition-transform: transform 150ms ease;\n    --transition-opacity: opacity 150ms ease;\n    --transition-shadow: box-shadow 150ms ease;\n  }\n} ","/*\n * Header Module\n *\n * Layout rules for the header area. Supports Subgrid, Container Queries and responsive behavior.\n * Combines traditional Grid layouts with modern CSS features and Design Tokens.\n */\n\n/**\n * Header Component\n * \n * Header components for websites and applications.\n * The header serves as a navigation area and important orientation point for users.\n * \n * Header Types:\n * - .header: Standard Subgrid-Layout (original)\n * - .header-standard: Logo left, nav center, actions right\n * - .header-center: Centered navigation\n * - .header-split: Logo center, nav split left/right\n * - .header-stacked: Logo above nav (both centered)\n * - .header-left: Logo and nav left-aligned\n * - .header-bottom-bar: Two-tier layout\n * \n * @layer components.header\n * \n * Basic Usage:\n * <header class=\"header\">\n *   <div class=\"logo\">\n *     <img src=\"logo.png\" alt=\"Logo\">\n *   </div>\n *   <nav class=\"nav\">\n *     <ul class=\"links\">\n *       <li><a href=\"#\" class=\"link\">Home</a></li>\n *       <li><a href=\"#\" class=\"link\">Products</a></li>\n *       <li><a href=\"#\" class=\"link\">About</a></li>\n *       <li><a href=\"#\" class=\"link\">Contact</a></li>\n *     </ul>\n *   </nav>\n *   <button class=\"toggle\" aria-label=\"Toggle navigation\">\n *     <span></span>\n *     <span></span>\n *     <span></span>\n *   </button>\n * </header>\n * \n * New Header Types:\n * <header class=\"header-standard\">\n *   <div class=\"header-content\">\n *     <div class=\"header-logo\">...</div>\n *     <nav class=\"header-nav\">...</nav>\n *     <div class=\"header-actions\">...</div>\n *   </div>\n * </header>\n * \n * Fixed Header:\n * <header class=\"header fixed\">...</header>\n * \n * Sticky Header (remains visible while scrolling):\n * <header class=\"header sticky\">...</header>\n * \n * Transparent Header (for Hero sections):\n * <header class=\"header transparent\">...</header>\n * \n * Variants:\n * <header class=\"header light\">...</header>\n * <header class=\"header dark\">...</header>\n * <header class=\"header primary\">...</header>\n * \n * With Search Function:\n * <header class=\"header\">\n *   <!-- ... -->\n *   <div class=\"search\">\n *     <input type=\"search\" class=\"input\" placeholder=\"Search...\">\n *     <button class=\"button icon-only\">\n *       <span class=\"icon\">🔍</span>\n *     </button>\n *   </div>\n * </header>\n * \n * Responsive with Hamburger Menu:\n * <header class=\"header\">\n *   <div class=\"logo\">Logo</div>\n *   <button class=\"toggle hamburger\" aria-label=\"Open menu\"></button>\n *   <nav class=\"nav mobile-hidden\">\n *     <!-- Menu items -->\n *   </nav>\n * </header>\n */\n\n@layer tokens {\n  :root {\n    /* Header spacing */\n    --header-padding: var(--space-4) var(--space-6);\n    --header-padding-compact: var(--space-3) var(--space-4);\n    --header-padding-spacious: var(--space-6) var(--space-8);\n    --header-gap: var(--space-6);\n    --header-gap-compact: var(--space-4);\n    --header-gap-spacious: var(--space-8);\n    \n    /* Header colors */\n    --header-bg: var(--color-white, #fff);\n    --header-text: var(--color-neutral-700, #374151);\n    --header-link: var(--color-neutral-600);\n    --header-link-hover: var(--color-primary-600, #2563eb);\n    --header-link-active: var(--color-primary-700, #1d4ed8);\n    --header-border: var(--color-neutral-200, #e5e7eb);\n    --header-shadow: var(--shadow-sm, 0 1px 2px 0 rgb(0 0 0 / 0.05));\n    \n    /* Header typography */\n    --header-font-size: var(--text-base);\n    --header-font-weight: var(--font-medium, 500);\n    --header-line-height: 1.5;\n    --header-logo-size: var(--text-xl);\n    --header-logo-weight: var(--font-bold);\n    \n    /* Header layout */\n    --header-height: 6%4px;\n    --header-height-compact: 48px;\n    --header-height-large: 80px;\n    --header-max-width: var(--container-7xl);\n    --header-z-index: 1000;\n    \n    /* Header navigation */\n    --nav-link-color: var(--color-neutral-600);\n    --nav-link-color-hover: var(--color-primary-600, #2563eb);\n    --nav-link-color-active: var(--color-primary-700, #1d4ed8);\n    --nav-link-bg-hover: var(--color-neutral-100, #f3f4f6);\n    --nav-link-bg-active: var(--color-primary-100, #dbeafe);\n    --menu-gap: var(--space-6);\n    --menu-item-padding-x: var(--space-3);\n    --menu-item-padding-y: var(--space-2);\n    --menu-transition: all 0.2s ease;\n    \n    /* Header dropdown */\n    --mobile-menu-bg: var(--color-white, #fff);\n    --mobile-menu-border-radius: var(--radius-lg, 0.5rem);\n    --mobile-menu-shadow: var(--shadow-lg);\n    --mobile-menu-z-index: 1001;\n    \n    /* Header mobile */\n    --header-mobile-breakpoint: 768px;\n    --header-hamburger-size: 24px;\n    \n    /* Logo settings */\n    --logo-max-height: 4%0px;\n    --logo-max-width: 20%0px;\n    \n    /* Header themes */\n    &[data-theme=\"dark\"],\n    &.theme-dark {\n      --header-bg: var(--color-neutral-900, #111827);\n      --header-text: var(--color-neutral-100, #f3f4f6);\n      --header-link: var(--color-neutral-300, #d1d5db);\n      --header-link-hover: var(--color-primary-400);\n      --header-link-active: var(--color-primary-300);\n      --header-border: var(--color-neutral-700, #374151);\n      --header-shadow: var(--shadow-md);\n      --nav-link-color: var(--color-neutral-300, #d1d5db);\n      --nav-link-color-hover: var(--color-primary-400);\n      --nav-link-color-active: var(--color-primary-300);\n      --nav-link-bg-hover: var(--color-neutral-800, #1f2937);\n      --nav-link-bg-active: var(--color-primary-900);\n      --mobile-menu-bg: var(--color-neutral-800, #1f2937);\n    }\n    \n    &[data-theme=\"primary\"],\n    &.theme-primary {\n      --header-bg: var(--color-primary-600, #2563eb);\n      --header-text: var(--color-white, #fff);\n      --header-link: var(--color-primary-100, #dbeafe);\n      --header-link-hover: var(--color-white, #fff);\n      --header-link-active: var(--color-primary-200);\n      --header-border: var(--color-primary-500);\n      --nav-link-color: var(--color-primary-100, #dbeafe);\n      --nav-link-color-hover: var(--color-white, #fff);\n      --nav-link-color-active: var(--color-primary-200);\n      --nav-link-bg-hover: var(--color-primary-700, #1d4ed8);\n      --nav-link-bg-active: var(--color-primary-800, #1e40af);\n      --mobile-menu-bg: var(--color-primary-700, #1d4ed8);\n    }\n    \n    &[data-theme=\"transparent\"],\n    &.theme-transparent {\n      --header-bg: transparent;\n      --header-text: var(--color-neutral-800, #1f2937);\n      --header-link: var(--color-neutral-700, #374151);\n      --header-link-hover: var(--color-primary-600, #2563eb);\n      --header-link-active: var(--color-primary-700, #1d4ed8);\n      --header-border: transparent;\n      --header-shadow: none;\n      --nav-link-color: var(--color-neutral-700, #374151);\n      --nav-link-color-hover: var(--color-primary-600, #2563eb);\n      --nav-link-color-active: var(--color-primary-700, #1d4ed8);\n      --mobile-menu-bg: var(--color-white, #fff);\n    }\n  }\n}\n\n@layer components {\n  /* Base header styles for all header types */\n  .header,\n  .header-standard,\n  .header-center,\n  .header-split,\n  .header-stacked,\n  .header-left,\n  .header-bottom-bar {\n    background-color: var(--header-bg);\n    border-bottom: 1px solid var(--header-border);\n    box-shadow: var(--header-shadow);\n    color: var(--header-text);\n    container-type: inline-size;\n    font-size: var(--header-font-size);\n    font-weight: var(--header-font-weight);\n    line-height: var(--header-line-height, 1.5);\n    min-height: var(--header-height, 4rem);\n    position: relative;\n    width: 100%;\n    z-index: var(--header-z-index);\n    \n    /* Header modifiers */\n    &.sticky {\n      position: sticky;\n      top: 0%;\n    }\n    \n    &.transparent {\n      background-color: transparent;\n      border-bottom: none;\n      box-shadow: none;\n    }\n    \n    &.compact {\n      min-height: var(--header-height-compact, 3rem);\n    }\n    \n    &.large {\n      min-height: var(--header-height-large, 5rem);\n    }\n  }\n\n  /* Original Subgrid Header Layout */\n  .header {\n    align-items: center;\n    display: grid;\n    gap: var(--space-4);\n    grid-column: span 12;\n    grid-template-columns: subgrid;\n    grid-template-rows: auto;\n    padding-block: var(--space-4);\n    \n    /* Logo area */\n    & .logo {\n      align-items: center;\n      display: flex;\n      grid-column: 1 / span 3;\n      \n      & img {\n        max-height: var(--logo-max-height, 2rem);\n        width: auto;\n      }\n    }\n    \n    /* Navigation area */\n    & .nav {\n      display: flex;\n      gap: var(--space-4);\n      grid-column: 4 / span 6;\n      justify-content: center;\n      \n      & .links {\n        display: flex;\n        gap: var(--space-4);\n        list-style: none;\n        margin: 0;\n        padding: 0;\n      }\n      \n      & .link {\n        color: var(--nav-link-color);\n        display: inline-block;\n        font-weight: var(--font-medium, 500);\n        padding: var(--space-2);\n        text-decoration: none;\n        transition: var(--menu-transition);\n        \n        &:hover {\n          color: var(--nav-link-color-hover);\n        }\n        \n        &.active {\n          color: var(--nav-link-color-active);\n          font-weight: var(--font-semibold, 600);\n        }\n      }\n      \n      &.mobile-hidden {\n        @container (width <= 768px) {\n          display: none;\n        }\n      }\n    }\n    \n    /* Actions area (buttons, etc.) */\n    & .actions {\n      display: flex;\n      gap: var(--space-2);\n      grid-column: 10 / span 3;\n      justify-content: flex-end;\n    }\n    \n    /* Search area */\n    & .search {\n      display: flex;\n      max-width: 30%0px;\n      width: 100%;\n      \n      & .input {\n        flex: 1;\n      }\n    }\n    \n    /* Toggle button for mobile navigation */\n    & .toggle {\n      display: none;\n      \n      @container (width <= 768px) {\n        background: none;\n        border: none;\n        cursor: pointer;\n        display: block;\n        grid-column: 12;\n      }\n    }\n    \n    /* Theme variants for original header */\n    &.fixed {\n      background-color: var(--header-bg);\n      box-shadow: var(--header-shadow);\n      left: 0%;\n      position: fixed;\n      right: 0%;\n      top: 0%;\n      z-index: var(--header-z-index);\n    }\n    \n    &.primary {\n      background-color: var(--color-primary, #3b82f6);\n      color: white;\n      \n      & .link {\n        color: var(--color-primary-100, #dbeafe);\n        \n        &:hover {\n          color: var(--color-white, #fff);\n        }\n      }\n    }\n    \n    &.light {\n      background-color: var(--color-white, #fff);\n    }\n    \n    &.dark {\n      background-color: var(--color-neutral-900, #111827);\n      \n      & .link {\n        color: var(--color-neutral-300, #d1d5db);\n        \n        &:hover {\n          color: var(--color-white, #fff);\n        }\n      }\n    }\n    \n    /* Container Queries for original header */\n    @container (width <= 768px) {\n      grid-template-columns: repeat(12, 1fr);\n      \n      & .logo {\n        grid-column: 1 / span 6;\n      }\n      \n      & .nav {\n        display: none;\n      }\n      \n      & .actions {\n        grid-column: 7 / span 5;\n      }\n    }\n  }\n  \n  /* Header content wrapper for new header types */\n  .header-standard,\n  .header-center,\n  .header-split,\n  .header-stacked,\n  .header-left,\n  .header-bottom-bar {\n    & .header-content {\n      align-items: center;\n      display: flex;\n      margin: 0 auto;\n      max-width: var(--header-max-width, 1280px);\n      padding: var(--header-padding);\n      width: 100%;\n    }\n  }\n  \n  /* Logo component for new header types */\n  .header-logo {\n    align-items: center;\n    display: flex;\n    flex-shrink: 0;\n    \n    & img,\n    & svg {\n      height: auto;\n      max-height: var(--logo-max-height, 2rem);\n      max-width: var(--logo-max-width, 8rem);\n      width: auto;\n    }\n  }\n  \n  /* Navigation component for new header types */\n  .header-nav {\n    & ul {\n      align-items: center;\n      display: flex;\n      gap: var(--menu-gap);\n      list-style: none;\n      margin: 0;\n      padding: 0;\n    }\n    \n    & li {\n      position: relative;\n    }\n    \n    & a {\n      align-items: center;\n      border-radius: var(--radius-md, 0.375rem);\n      color: var(--nav-link-color);\n      display: flex;\n      font-weight: var(--font-medium, 500);\n      gap: var(--space-1);\n      padding: var(--menu-item-padding-y) var(--menu-item-padding-x);\n      text-decoration: none;\n      transition: var(--menu-transition);\n      \n      &:hover {\n        background-color: var(--nav-link-bg-hover);\n        color: var(--nav-link-color-hover);\n      }\n      \n      &.active {\n        background-color: var(--nav-link-bg-active);\n        color: var(--nav-link-color-active);\n      }\n    }\n    \n    /* Dropdown indicator */\n    & .has-dropdown > a::after {\n      content: \"▼\";\n      font-size: var(--text-xs, 0.75rem);\n      margin-left: var(--space-1);\n      transition: transform 0.2s ease;\n    }\n    \n    & .has-dropdown:hover > a::after,\n    & .has-dropdown.open > a::after {\n      transform: rotate(180deg);\n    }\n    \n    /* Dropdown menu */\n    & .dropdown {\n      background-color: var(--mobile-menu-bg);\n      border-radius: var(--mobile-menu-border-radius);\n      box-shadow: var(--mobile-menu-shadow);\n      left: 0%;\n      min-width: 20%0px;\n      opacity: 0%;\n      padding: var(--space-2);\n      position: absolute;\n      top: 100%;\n      transform: translateY(-10px);\n      transition: var(--menu-transition);\n      visibility: hidden;\n      z-index: var(--mobile-menu-z-index);\n    }\n    \n    & .has-dropdown:hover .dropdown,\n    & .has-dropdown.open .dropdown {\n      opacity: 1;\n      transform: translateY(0%);\n      visibility: visible;\n    }\n    \n    & .dropdown ul {\n      flex-direction: column;\n      gap: 0;\n    }\n    \n    & .dropdown a {\n      border-radius: var(--radius-sm, 0.125rem);\n      font-size: var(--text-sm, 0.875rem);\n      padding: var(--space-2) var(--space-3);\n      width: 100%;\n    }\n    \n    /* Nested dropdowns */\n    & .dropdown .has-dropdown > a::after {\n      content: \"▶\";\n      margin-left: auto;\n    }\n    \n    & .dropdown .dropdown {\n      left: 100%;\n      top: 0%;\n    }\n    \n    /* Megamenu */\n    & .has-megamenu .dropdown {\n      display: grid;\n      gap: var(--space-6);\n      grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));\n      left: 50%;\n      max-width: 9%0vw;\n      min-width: 60%0px;\n      padding: var(--space-6);\n      transform: translateX(-50%) translateY(-10px);\n      width: max-content;\n    }\n    \n    & .has-megamenu:hover .dropdown,\n    & .has-megamenu.open .dropdown {\n      transform: translateX(-50%) translateY(0);\n    }\n    \n    & .megamenu-section {\n      display: flex;\n      flex-direction: column;\n      gap: var(--space-3);\n    }\n    \n    & .megamenu-title {\n      color: var(--header-text);\n      font-size: var(--text-sm, 0.875rem);\n      font-weight: var(--font-semibold, 600);\n      margin-bottom: var(--space-2);\n      text-transform: uppercase;\n    }\n    \n    & .megamenu-section ul {\n      flex-direction: column;\n      gap: var(--space-1);\n    }\n    \n    & .megamenu-section a {\n      font-size: var(--text-sm, 0.875rem);\n      padding: var(--space-1) var(--space-2);\n    }\n  }\n  \n  /* Actions component */\n  .header-actions {\n    align-items: center;\n    display: flex;\n    gap: var(--space-2);\n    margin-left: auto;\n  }\n  \n  /* Toggle button for mobile */\n  .header-toggle {\n    background: none;\n    border: none;\n    cursor: pointer;\n    display: none;\n    height: var(--header-hamburger-size, 1.5rem);\n    padding: 0;\n    width: var(--header-hamburger-size, 1.5rem);\n    \n    @container (width <= 768px) {\n      display: block;\n    }\n  }\n  \n  .header-toggle:hover {\n    opacity: 0.7;\n  }\n  \n  /* Mobile menu */\n  .header-mobile {\n    background-color: var(--mobile-menu-bg);\n    border-top: 1px solid var(--header-border);\n    display: none;\n    left: 0%;\n    padding: var(--space-4);\n    position: absolute;\n    right: 0%;\n    top: 100%;\n    z-index: var(--mobile-menu-z-index);\n    \n    @container (width <= 768px) {\n      display: block;\n    }\n  }\n  \n  .header-mobile.visible {\n    display: block;\n  }\n  \n  .header-mobile ul {\n    display: flex;\n    flex-direction: column;\n    gap: 0;\n    list-style: none;\n    margin: 0;\n    padding: 0;\n  }\n  \n  .header-mobile li {\n    border-bottom: 1px solid var(--header-border);\n  }\n  \n  .header-mobile a {\n    color: var(--nav-link-color);\n    display: block;\n    font-weight: var(--font-medium, 500);\n    padding: var(--space-3) 0;\n    text-decoration: none;\n    transition: var(--menu-transition);\n  }\n  \n  .header-mobile a:hover {\n    color: var(--nav-link-color-hover);\n  }\n  \n  .header-mobile a.active {\n    color: var(--nav-link-color-active);\n    font-weight: var(--font-semibold, 600);\n  }\n  \n  .header-mobile .has-submenu > a::after {\n    content: \"+\";\n    float: right;\n    transition: transform 0.2s ease;\n  }\n  \n  .header-mobile .has-submenu.open > a::after {\n    transform: rotate(45deg);\n  }\n  \n  .header-mobile .submenu {\n    display: none;\n    padding-left: var(--space-4);\n  }\n  \n  .header-mobile .has-submenu.open .submenu {\n    display: block;\n  }\n  \n  .header-mobile .submenu a {\n    font-size: var(--text-sm, 0.875rem);\n    padding: var(--space-2) 0;\n  }\n  \n  .header-mobile .submenu .submenu a {\n    padding-left: var(--space-4);\n  }\n  \n  /* Header Type: Standard */\n  .header-standard {\n    & .header-content {\n      justify-content: space-between;\n    }\n  }\n  \n  /* Header Type: Center */\n  .header-center {\n    & .header-content {\n      flex-direction: column;\n      gap: var(--space-4);\n    }\n    \n    & .header-logo {\n      order: 1;\n    }\n    \n    & .header-nav {\n      order: 2;\n    }\n    \n    & .header-actions {\n      margin-left: 0%;\n      order: 3;\n    }\n  }\n  \n  /* Header Type: Split */\n  .header-split {\n    & .header-content {\n      justify-content: space-between;\n    }\n    \n    & .header-nav:first-of-type {\n      order: 1;\n    }\n    \n    & .header-logo {\n      order: 2;\n    }\n    \n    & .header-nav:last-of-type {\n      order: 3;\n    }\n  }\n  \n  /* Header Type: Stacked */\n  .header-stacked {\n    & .header-content {\n      flex-direction: column;\n      gap: var(--space-4);\n      text-align: center;\n    }\n    \n    & .header-nav {\n      margin-left: 0%;\n    }\n    \n    &.inline {\n      & .header-content {\n        align-items: center;\n        flex-direction: row;\n        gap: var(--space-6);\n      }\n      \n      & .header-nav {\n        margin-left: auto;\n      }\n    }\n  }\n  \n  /* Header Type: Left */\n  .header-left {\n    & .header-content {\n      justify-content: flex-start;\n    }\n    \n    & .header-content {\n      gap: var(--space-6);\n    }\n  }\n  \n  /* Header Type: Bottom Bar */\n  .header-bottom-bar {\n    & .header-top {\n      align-items: center;\n      border-bottom: 1px solid var(--header-border);\n      display: flex;\n      justify-content: space-between;\n      padding: var(--space-2) var(--space-6);\n    }\n    \n    & .header-bottom {\n      padding: var(--space-4) var(--space-6);\n    }\n    \n    & .header-nav {\n      justify-content: center;\n      width: 100%;\n    }\n    \n    &.transparent .header-bottom {\n      background-color: var(--header-bg);\n      border-top: 1px solid var(--header-border);\n    }\n  }\n  \n  /* Container Queries for new header types */\n  @container (width <= 1024px) {\n    .header-center,\n    .header-split,\n    .header-stacked {\n      & .header-content {\n        flex-direction: column;\n        gap: var(--space-4);\n      }\n      \n      & .header-nav {\n        margin-left: 0%;\n      }\n      \n      & .header-toggle {\n        display: block;\n      }\n      \n      & .header-logo img,\n      & .header-logo svg {\n        max-height: 3%2px;\n      }\n      \n      & .header {\n        min-height: var(--header-height-compact, 3rem);\n      }\n      \n      & .header-bottom-bar .header-bottom {\n        padding: var(--space-3) var(--space-4);\n      }\n      \n      & .header-nav .dropdown {\n        position: static;\n        transform: none;\n        visibility: visible;\n      }\n    }\n  }\n  \n  @container (width <= 768px) {\n    .header-center,\n    .header-split,\n    .header-stacked {\n      & .header-content {\n        flex-direction: column;\n        gap: var(--space-3);\n      }\n      \n      & .header-nav {\n        display: none;\n      }\n      \n      & .header-toggle {\n        display: block;\n      }\n      \n      & .header-logo img,\n      & .header-logo svg {\n        max-height: 2%8px;\n      }\n      \n      & .header {\n        min-height: var(--header-height-compact, 3rem);\n      }\n      \n      & .header-bottom-bar .header-bottom {\n        padding: var(--space-2) var(--space-3);\n      }\n    }\n  }\n}\n\n/* Fallback support for browsers without Container Queries */\n@supports not (container-type: inline-size) {\n  @media (width <= 1024px) {\n    .header-center .header-content,\n    .header-split .header-content,\n    .header-stacked .header-content {\n      flex-direction: column;\n      gap: var(--space-4);\n    }\n    \n    .header-center .header-nav,\n    .header-split .header-nav,\n    .header-stacked .header-nav {\n      margin-left: 0%;\n    }\n    \n    .header-toggle {\n      display: block;\n    }\n    \n    .header-logo img,\n    .header-logo svg {\n      max-height: 3%2px;\n    }\n    \n    .header {\n      min-height: var(--header-height-compact, 3rem);\n    }\n    \n    .header-bottom-bar .header-bottom {\n      padding: var(--space-3) var(--space-4);\n    }\n  }\n  \n  @media (max-width: 768px) {\n    .header .logo {\n      grid-column: 1 / span 6;\n    }\n    \n    .header .nav {\n      display: none;\n    }\n    \n    .header .actions {\n      grid-column: 7 / span 5;\n    }\n    \n    .header-center .header-content,\n    .header-split .header-content,\n    .header-stacked .header-content {\n      flex-direction: column;\n      gap: var(--space-3);\n    }\n    \n    .header-center .header-nav,\n    .header-split .header-nav,\n    .header-stacked .header-nav {\n      display: none;\n    }\n    \n    .header-toggle {\n      display: block;\n    }\n    \n    .header-logo img,\n    .header-logo svg {\n      max-height: 2%8px;\n    }\n    \n    .header {\n      min-height: var(--header-height-compact, 3rem);\n    }\n    \n    .header-bottom-bar .header-bottom {\n      padding: var(--space-2) var(--space-3);\n    }\n  }\n}\n\n/* Print styles */\n@media print {\n  .header,\n  .header-standard,\n  .header-center,\n  .header-split,\n  .header-stacked,\n  .header-left,\n  .header-bottom-bar {\n    background: white !important;\n    border-bottom: 1px solid var(--color-neutral-900, #111827);\n    box-shadow: none !important;\n    color: var(--color-neutral-900, #111827) !important;\n    position: static !important;\n    \n    & a {\n      color: var(--color-neutral-900, #111827) !important;\n      text-decoration: underline;\n    }\n    \n    & .header-toggle,\n    & .header-mobile {\n      display: none !important;\n    }\n    \n    & .header-nav {\n      display: flex !important;\n    }\n  }\n}\n\n/* High contrast mode */\n@media (prefers-contrast: more) {\n  .header,\n  .header-standard,\n  .header-center,\n  .header-split,\n  .header-stacked,\n  .header-left,\n  .header-bottom-bar {\n    border-bottom-width: 2px;\n    \n    & a {\n      text-decoration: underline;\n    }\n  }\n}\n\n/* Reduced motion */\n@media (prefers-reduced-motion: reduce) {\n  .header,\n  .header-standard,\n  .header-center,\n  .header-split,\n  .header-stacked,\n  .header-left,\n  .header-bottom-bar {\n    & a,\n    & .header-toggle,\n    & .dropdown {\n      transition: none;\n    }\n  }\n}\n\n\n  ","/**\n * Flex Layout System\n * \n * A comprehensive flexbox-based layout system providing flexible and responsive\n * layout utilities for modern web applications. This system offers semantic\n * flexbox classes with intuitive naming conventions.\n * \n * @layer layout.flex\n * @version 2.0\n * @author Design System Team\n * \n * FEATURES:\n * - Complete flexbox utility system\n * - Semantic layout components (.layout-flex-*)\n * - Direction, wrapping, and alignment utilities\n * - Flexible item sizing with flex-basis utilities\n * - Self-alignment controls for individual items\n * - Grow and shrink utilities for dynamic layouts\n * - Works seamlessly with CSS Grid system\n * - Responsive-ready with breakpoint variants\n * \n * FLEX CONTAINER CLASSES:\n * - .flex: Base flex container\n * - .inline-flex: Inline flex container\n * - .flex-row: Horizontal direction (default)\n * - .flex-col: Vertical direction\n * - .flex-wrap: Allow wrapping\n * - .flex-nowrap: Prevent wrapping\n * \n * ALIGNMENT CLASSES:\n * - .items-start: Align items to start\n * - .items-center: Center align items\n * - .items-end: Align items to end\n * - .items-stretch: Stretch items to fill\n * - .items-baseline: Baseline alignment\n * - .justify-start: Justify content to start\n * - .justify-center: Center justify content\n * - .justify-end: Justify content to end\n * - .justify-between: Space between items\n * - .justify-around: Space around items\n * - .justify-evenly: Even space distribution\n * \n * FLEX ITEM CLASSES:\n * - .flex-1: Grow and shrink equally\n * - .flex-auto: Grow and shrink based on content\n * - .flex-none: Don't grow or shrink\n * - .flex-initial: Initial flex value\n * - .flex-grow: Allow growing\n * - .flex-shrink: Allow shrinking\n * \n * FLEX BASIS UTILITIES:\n * - .flex-basis-1-2: 50 basis\n * - .flex-basis-1-3: 33.33% basis\n * - .flex-basis-2-3: 66.67% basis\n * - .flex-basis-1-4: 25% basis\n * - .flex-basis-3-4: 75% basis\n * - .flex-basis-1-5: 20 basis\n * - .flex-basis-2-5: 40 basis\n * - .flex-basis-3-5: 60 basis\n * - .flex-basis-4-5: 80 basis\n * \n * SELF-ALIGNMENT:\n * - .self-auto: Auto alignment\n * - .self-start: Align self to start\n * - .self-center: Center align self\n * - .self-end: Align self to end\n * - .self-stretch: Stretch self\n * \n * LAYOUT COMPONENTS:\n * - .layout-flex: Semantic flex column with gap\n * - .layout-flex-row: Semantic flex row with gap\n * - .layout-flex-column: Semantic flex column with gap\n * - .layout-flex-between: Space-between layout\n * - .layout-flex-center: Centered layout\n * \n * USAGE EXAMPLES:\n * \n * Basic Flex Layout:\n * <div class=\"flex items-center justify-between\">\n *   <div>Logo</div>\n *   <nav class=\"flex gap-4\">\n *     <a href=\"#\">Home</a>\n *     <a href=\"#\">About</a>\n *   </nav>\n * </div>\n * \n * Card Layout:\n * <div class=\"flex flex-col gap-4\">\n *   <h2>Card Title</h2>\n *   <p class=\"flex-1\">Card content that grows</p>\n *   <button>Action</button>\n * </div>\n * \n * Responsive Layout:\n * <div class=\"flex flex-col md:flex-row gap-6\">\n *   <main class=\"flex-1\">Main content</main>\n *   <aside class=\"flex-basis-1-3\">Sidebar</aside>\n * </div>\n * \n * Complex Alignment:\n * <div class=\"flex flex-wrap items-start justify-center gap-4\">\n *   <div class=\"flex-basis-1-3 self-stretch\">Item 1</div>\n *   <div class=\"flex-basis-1-3 self-center\">Item 2</div>\n *   <div class=\"flex-basis-1-3 self-end\">Item 3</div>\n * </div>\n * \n * RESPONSIVE USAGE:\n * Use with responsive-utilities.css for breakpoint-specific layouts:\n * <div class=\"flex-col sm:flex-row items-center sm:items-start\">\n *   <!-- Responsive flex direction and alignment -->\n * </div>\n * \n * BROWSER SUPPORT:\n * - Flexbox: All modern browsers (IE 11+ with -ms- prefix)\n * - Gap property: Chrome 84+, Firefox 63+, Safari 14.1+\n * - Fallback: Use margin utilities for older browsers\n * \n * PERFORMANCE NOTES:\n * - Flexbox is highly optimized for one-dimensional layouts\n * - Use CSS Grid for two-dimensional layouts\n * - Gap property is more performant than margins\n * - Avoid deep nesting of flex containers\n * \n * ACCESSIBILITY:\n * - Flex layouts maintain document flow for screen readers\n * - Use semantic HTML elements within flex containers\n * - Be careful with flex-direction: column and tab order\n * - Test with keyboard navigation\n * - Consider using order property sparingly\n * \n * INTEGRATION:\n * - Complements layout/grid-system.css for hybrid layouts\n * - Works with layout/spacing.css for gap utilities\n * - Enhanced by layout/responsive-utilities.css for responsive variants\n * - Compatible with layout/containers.css for container sizing\n * \n * BEST PRACTICES:\n * - Use flexbox for one-dimensional layouts (rows or columns)\n * - Use CSS Grid for two-dimensional layouts\n * - Prefer gap over margins for spacing\n * - Use semantic layout components for common patterns\n * - Test responsive behavior across breakpoints\n * - Ensure accessibility with proper HTML structure\n */\n\n@layer layout.flex {\n    /* ================= FLEX-LAYOUT-SYSTEM ================= */\n\n    .layout-flex {\n        display: flex;\n        flex-direction: column;\n        gap: var(--grid-gutter, 1rem);\n    }\n    \n    /* Typische Flex-Layouts */\n    .layout-flex-row {\n        display: flex;\n        flex-direction: row;\n        gap: var(--grid-gutter, 1rem);\n    }\n    \n    .layout-flex-column {\n        display: flex;\n        flex-direction: column;\n        gap: var(--grid-gutter, 1rem);\n    }\n    \n    /* Verteilte Layouts */\n    .layout-flex-between {\n        display: flex;\n        flex-direction: row;\n        gap: var(--grid-gutter, 1rem);\n        justify-content: space-between;\n    }\n    \n    .layout-flex-center {\n        align-items: center;\n        display: flex;\n        gap: var(--grid-gutter, 1rem);\n        justify-content: center;\n    }\n\n    /* ================= FLEX UTILITIES ================= */\n\n    /* Display-Typen */\n    .flex { display: flex; }\n\n    .inline-flex { display: inline-flex; }\n\n    /* Flex-Richtung und Umbruchverhalten */\n    .flex-row { flex-direction: row; }\n\n    .flex-col { flex-direction: column; }\n\n    .flex-wrap { flex-wrap: wrap; }\n\n    .flex-nowrap { flex-wrap: nowrap; }\n\n    /* Ausrichtung von Flex-Items */\n    .items-start { align-items: flex-start; }\n\n    .items-center { align-items: center; }\n\n    .items-end { align-items: flex-end; }\n\n    .items-stretch { align-items: stretch; }\n\n    .items-baseline { align-items: baseline; }\n\n    .justify-start { justify-content: flex-start; }\n\n    .justify-center { justify-content: center; }\n\n    .justify-end { justify-content: flex-end; }\n\n    .justify-between { justify-content: space-between; }\n\n    .justify-around { justify-content: space-around; }\n\n    .justify-evenly { justify-content: space-evenly; }\n\n    /* Flex-Eigenschaften */\n    .flex-1 { flex: 1 1 0; }\n\n    .flex-auto { flex: 1 1 auto; }\n\n    .flex-none { flex: none; }\n\n    .flex-initial { flex: 0 1 auto; }\n\n    /* Flex-Basis für flexible Layouts */\n    .flex-basis-1-2 { flex-basis: 50%; }\n\n    .flex-basis-1-3 { flex-basis: 33.3333%; }\n\n    .flex-basis-2-3 { flex-basis: 66.6667%; }\n\n    .flex-basis-1-4 { flex-basis: 25%; }\n\n    .flex-basis-3-4 { flex-basis: 75%; }\n\n    .flex-basis-1-5 { flex-basis: 20%; }\n\n    .flex-basis-2-5 { flex-basis: 40%; }\n\n    .flex-basis-3-5 { flex-basis: 60%; }\n\n    .flex-basis-4-5 { flex-basis: 80%; }\n\n    /* Flex-Grow und Flex-Shrink */\n    .flex-grow { flex-grow: 1; }\n\n    .flex-grow-0 { flex-grow: 0; }\n\n    .flex-shrink { flex-shrink: 1; }\n\n    .flex-shrink-0 { flex-shrink: 0; }\n\n    /* Self-Alignment */\n    .self-auto { align-self: auto; }\n\n    .self-start { align-self: flex-start; }\n\n    .self-center { align-self: center; }\n\n    .self-end { align-self: flex-end; }\n\n    .self-stretch { align-self: stretch; }\n} ","/**\n * Component-Specific Tokens\n * \n * Semantische Tokens für UI-Komponenten mit @property Definitionen.\n * Diese Tokens werden speziell für Komponenten verwendet und erweitern\n * die Basis-Token um komponentenspezifische Werte.\n * \n * @layer tokens.properties\n * @version 1.0.0\n * @author Dragonfly Design System\n */\n\n@layer tokens.properties {\n  /* Alert Component Tokens */\n  @property --alert-padding {\n    inherits: true;\n    initial-value: 1rem;\n    syntax: '<length>';\n  }\n  \n  @property --alert-padding-sm {\n    inherits: true;\n    initial-value: 0.5rem;\n    syntax: '<length>';\n  }\n  \n  @property --alert-padding-lg {\n    inherits: true;\n    initial-value: 1.25rem;\n    syntax: '<length>';\n  }\n  \n  @property --alert-gap {\n    inherits: true;\n    initial-value: 0.75rem;\n    syntax: '<length>';\n  }\n  \n  @property --alert-border-radius {\n    inherits: true;\n    initial-value: 0.5rem;\n    syntax: '<length>';\n  }\n  \n  /* Badge Component Tokens */\n  @property --badge-padding-xs {\n    inherits: true;\n    initial-value: 0.15rem 0.35rem;\n    syntax: '*';\n  }\n  \n  @property --badge-padding-sm {\n    inherits: true;\n    initial-value: 0.2rem 0.4rem;\n    syntax: '*';\n  }\n  \n  @property --badge-padding-md {\n    inherits: true;\n    initial-value: 0.25rem 0.5rem;\n    syntax: '*';\n  }\n  \n  @property --badge-padding-lg {\n    inherits: true;\n    initial-value: 0.3rem 0.6rem;\n    syntax: '*';\n  }\n  \n  @property --badge-min-width-xs {\n    inherits: true;\n    initial-value: 1.2rem;\n    syntax: '<length>';\n  }\n  \n  @property --badge-min-width-sm {\n    inherits: true;\n    initial-value: 1.5rem;\n    syntax: '<length>';\n  }\n  \n  @property --badge-min-width-md {\n    inherits: true;\n    initial-value: 1.75rem;\n    syntax: '<length>';\n  }\n  \n  @property --badge-min-width-lg {\n    inherits: true;\n    initial-value: 2rem;\n    syntax: '<length>';\n  }\n  \n  /* Card Component Tokens */\n  @property --card-padding {\n    inherits: true;\n    initial-value: 1rem;\n    syntax: '<length>';\n  }\n  \n  @property --card-padding-fluid {\n    inherits: true;\n    initial-value: 1.25rem;\n    syntax: '<length>';\n  }\n  \n  @property --card-gap {\n    inherits: true;\n    initial-value: 0.75rem;\n    syntax: '<length>';\n  }\n  \n  @property --card-grid-gap {\n    inherits: true;\n    initial-value: 1rem;\n    syntax: '<length>';\n  }\n  \n  @property --card-grid-min-width {\n    inherits: true;\n    initial-value: 250px;\n    syntax: '<length>';\n  }\n  \n  /* Button Component Tokens */\n  @property --button-padding-sm {\n    inherits: true;\n    initial-value: 0.5rem 0.75rem;\n    syntax: '*';\n  }\n  \n  @property --button-padding-md {\n    inherits: true;\n    initial-value: 0.75rem 1rem;\n    syntax: '*';\n  }\n  \n  @property --button-padding-lg {\n    inherits: true;\n    initial-value: 1rem 1.5rem;\n    syntax: '*';\n  }\n  \n  @property --button-height-sm {\n    inherits: true;\n    initial-value: 2rem;\n    syntax: '<length>';\n  }\n  \n  @property --button-height-md {\n    inherits: true;\n    initial-value: 2.5rem;\n    syntax: '<length>';\n  }\n  \n  @property --button-height-lg {\n    inherits: true;\n    initial-value: 3rem;\n    syntax: '<length>';\n  }\n  \n  /* Input Component Tokens */\n  @property --input-padding {\n    inherits: true;\n    initial-value: 0.75rem;\n    syntax: '<length>';\n  }\n  \n  @property --input-height {\n    inherits: true;\n    initial-value: 2.5rem;\n    syntax: '<length>';\n  }\n  \n  @property --input-border-width {\n    inherits: true;\n    initial-value: 1px;\n    syntax: '<length>';\n  }\n  \n  /* Modal Component Tokens */\n  @property --modal-padding {\n    inherits: true;\n    initial-value: 1.5rem;\n    syntax: '<length>';\n  }\n  \n  @property --modal-header-padding {\n    inherits: true;\n    initial-value: 1.5rem 1.5rem 1rem;\n    syntax: '*';\n  }\n  \n  @property --modal-footer-padding {\n    inherits: true;\n    initial-value: 1rem 1.5rem 1.5rem;\n    syntax: '*';\n  }\n  \n  @property --modal-max-width {\n    inherits: true;\n    initial-value: 32rem;\n    syntax: '<length>';\n  }\n  \n  /* Table Component Tokens */\n  @property --table-cell-padding {\n    inherits: true;\n    initial-value: 0.75rem;\n    syntax: '<length>';\n  }\n  \n  @property --table-header-padding {\n    inherits: true;\n    initial-value: 1rem 0.75rem;\n    syntax: '*';\n  }\n  \n  /* Avatar Component Tokens */\n  @property --avatar-size-xs {\n    inherits: true;\n    initial-value: 1.5rem;\n    syntax: '<length>';\n  }\n  \n  @property --avatar-size-sm {\n    inherits: true;\n    initial-value: 2rem;\n    syntax: '<length>';\n  }\n  \n  @property --avatar-size-md {\n    inherits: true;\n    initial-value: 2.5rem;\n    syntax: '<length>';\n  }\n  \n  @property --avatar-size-lg {\n    inherits: true;\n    initial-value: 3rem;\n    syntax: '<length>';\n  }\n  \n  @property --avatar-size-xl {\n    inherits: true;\n    initial-value: 4rem;\n    syntax: '<length>';\n  }\n  \n  /* Tooltip Component Tokens */\n  @property --tooltip-padding {\n    inherits: true;\n    initial-value: 0.5rem 0.75rem;\n    syntax: '*';\n  }\n  \n  @property --tooltip-max-width {\n    inherits: true;\n    initial-value: 200px;\n    syntax: '<length>';\n  }\n  \n  @property --tooltip-arrow-size {\n    inherits: true;\n    initial-value: 4px;\n    syntax: '<length>';\n  }\n  \n  /* Progress Component Tokens */\n  @property --progress-height {\n    inherits: true;\n    initial-value: 0.5rem;\n    syntax: '<length>';\n  }\n  \n  @property --progress-height-sm {\n    inherits: true;\n    initial-value: 0.25rem;\n    syntax: '<length>';\n  }\n  \n  @property --progress-height-lg {\n    inherits: true;\n    initial-value: 0.75rem;\n    syntax: '<length>';\n  }\n  \n  /* Spinner Component Tokens */\n  @property --spinner-size-sm {\n    inherits: true;\n    initial-value: 1rem;\n    syntax: '<length>';\n  }\n  \n  @property --spinner-size-md {\n    inherits: true;\n    initial-value: 1.5rem;\n    syntax: '<length>';\n  }\n  \n  @property --spinner-size-lg {\n    inherits: true;\n    initial-value: 2rem;\n    syntax: '<length>';\n  }\n  \n  @property --spinner-border-width {\n    inherits: true;\n    initial-value: 2px;\n    syntax: '<length>';\n  }\n  \n  /* Breadcrumb Component Tokens */\n  @property --breadcrumb-separator-spacing {\n    inherits: true;\n    initial-value: 0.5rem;\n    syntax: '<length>';\n  }\n  \n  @property --breadcrumb-item-padding {\n    inherits: true;\n    initial-value: 0.25rem 0.5rem;\n    syntax: '*';\n  }\n  \n  /* Tab Component Tokens */\n  @property --tab-padding {\n    inherits: true;\n    initial-value: 0.75rem 1rem;\n    syntax: '*';\n  }\n  \n  @property --tab-border-width {\n    inherits: true;\n    initial-value: 2px;\n    syntax: '<length>';\n  }\n  \n  /* Drawer Component Tokens */\n  @property --drawer-width {\n    inherits: true;\n    initial-value: 20rem;\n    syntax: '<length>';\n  }\n  \n  @property --drawer-padding {\n    inherits: true;\n    initial-value: 1.5rem;\n    syntax: '<length>';\n  }\n  \n  /* Pagination Component Tokens */\n  @property --pagination-item-size {\n    inherits: true;\n    initial-value: 2.5rem;\n    syntax: '<length>';\n  }\n  \n  @property --pagination-gap {\n    inherits: true;\n    initial-value: 0.25rem;\n    syntax: '<length>';\n  }\n  \n  /* Navigation/Menu Component Tokens */\n  @property --nav-padding {\n    inherits: true;\n    initial-value: 1rem;\n    syntax: '<length>';\n  }\n  \n  @property --nav-padding-compact {\n    inherits: true;\n    initial-value: 0.75rem;\n    syntax: '<length>';\n  }\n  \n  @property --nav-gap {\n    inherits: true;\n    initial-value: 1rem;\n    syntax: '<length>';\n  }\n  \n  @property --nav-gap-compact {\n    inherits: true;\n    initial-value: 0.5rem;\n    syntax: '<length>';\n  }\n  \n  @property --nav-item-padding {\n    inherits: true;\n    initial-value: 0.5rem 0.75rem;\n    syntax: '*';\n  }\n  \n  @property --nav-section-gap {\n    inherits: true;\n    initial-value: 1.5rem;\n    syntax: '<length>';\n  }\n  \n  /* Topbar specific tokens */\n  @property --topbar-min-height {\n    inherits: true;\n    initial-value: 3.5rem;\n    syntax: '<length>';\n  }\n  \n  @property --topbar-z-index {\n    inherits: true;\n    initial-value: 100;\n    syntax: '<integer>';\n  }\n  \n  @property --topbar-line-height {\n    inherits: true;\n    initial-value: 1.5;\n    syntax: '<number>';\n  }\n  \n  @property --topbar-transition {\n    inherits: true;\n    initial-value: all 0.2s ease;\n    syntax: '*';\n  }\n  \n  /* Sidebar specific tokens */\n  @property --sidebar-width {\n    inherits: true;\n    initial-value: 16rem;\n    syntax: '<length>';\n  }\n  \n  @property --sidebar-width-narrow {\n    inherits: true;\n    initial-value: 12rem;\n    syntax: '<length>';\n  }\n  \n  @property --sidebar-width-wide {\n    inherits: true;\n    initial-value: 20rem;\n    syntax: '<length>';\n  }\n  \n  @property --sidebar-width-collapsed {\n    inherits: true;\n    initial-value: 4rem;\n    syntax: '<length>';\n  }\n  \n  @property --sidebar-z-index {\n    inherits: true;\n    initial-value: 200;\n    syntax: '<integer>';\n  }\n  \n  @property --sidebar-line-height {\n    inherits: true;\n    initial-value: 1.5;\n    syntax: '<number>';\n  }\n  \n  @property --sidebar-shadow {\n    inherits: true;\n    initial-value: 0 1px 3px 0 rgb(0 0 0 / 1000%);\n    syntax: '*';\n  }\n  \n  @property --sidebar-transition {\n    inherits: true;\n    initial-value: width 0.3s ease;\n    syntax: '*';\n  }\n  \n  /* Mobile Navigation specific tokens */\n  @property --mobile-nav-width {\n    inherits: true;\n    initial-value: 20rem;\n    syntax: '<length>';\n  }\n  \n  @property --mobile-nav-width-narrow {\n    inherits: true;\n    initial-value: 16rem;\n    syntax: '<length>';\n  }\n  \n  @property --mobile-nav-width-wide {\n    inherits: true;\n    initial-value: 24rem;\n    syntax: '<length>';\n  }\n  \n  @property --mobile-nav-height {\n    inherits: true;\n    initial-value: 100;\n    syntax: '<length>';\n  }\n  \n  @property --mobile-nav-max-height {\n    inherits: true;\n    initial-value: 100;\n    syntax: '<length>';\n  }\n  \n  @property --mobile-nav-z-index {\n    inherits: true;\n    initial-value: 1000;\n    syntax: '<integer>';\n  }\n  \n  @property --mobile-nav-line-height {\n    inherits: true;\n    initial-value: 1.5;\n    syntax: '<number>';\n  }\n  \n  @property --mobile-nav-transition {\n    inherits: true;\n    initial-value: transform 0.3s ease;\n    syntax: '*';\n  }\n  \n  /* Off-canvas specific tokens */\n  @property --off-canvas-width {\n    inherits: true;\n    initial-value: 20rem;\n    syntax: '<length>';\n  }\n  \n  @property --off-canvas-width-narrow {\n    inherits: true;\n    initial-value: 16rem;\n    syntax: '<length>';\n  }\n  \n  @property --off-canvas-width-wide {\n    inherits: true;\n    initial-value: 24rem;\n    syntax: '<length>';\n  }\n  \n  @property --off-canvas-height {\n    inherits: true;\n    initial-value: 100;\n    syntax: '<length>';\n  }\n  \n  @property --off-canvas-max-height {\n    inherits: true;\n    initial-value: 100;\n    syntax: '<length>';\n  }\n  \n  @property --off-canvas-z-index {\n    inherits: true;\n    initial-value: 1000;\n    syntax: '<integer>';\n  }\n  \n  @property --off-canvas-line-height {\n    inherits: true;\n    initial-value: 1.5;\n    syntax: '<number>';\n  }\n  \n  @property --off-canvas-transition {\n    inherits: true;\n    initial-value: transform 0.3s ease;\n    syntax: '*';\n  }\n  \n  @property --off-canvas-backdrop {\n    inherits: true;\n    initial-value: rgb(0 0 0 / 5000%);\n    syntax: '<color>';\n  }\n  \n  /* Breadcrumb specific tokens */\n  @property --breadcrumb-line-height {\n    inherits: true;\n    initial-value: 1.5;\n    syntax: '<number>';\n  }\n  \n  /* Container and Header tokens that are referenced */\n  @property --container-7xl {\n    inherits: true;\n    initial-value: 80rem;\n    syntax: '<length>';\n  }\n  \n  @property --header-max-width {\n    inherits: true;\n    initial-value: 80rem;\n    syntax: '<length>';\n  }\n  \n  @property --header-transition {\n    inherits: true;\n    initial-value: all 0.2s ease;\n    syntax: '*';\n  }\n  \n  /* Pattern Component Tokens */\n  \n  /* Blog Pattern Tokens */\n  @property --blog-max-width {\n    inherits: true;\n    initial-value: 65ch;\n    syntax: '<length>';\n  }\n  \n  @property --blog-content-spacing {\n    inherits: true;\n    initial-value: 1.5rem;\n    syntax: '<length>';\n  }\n  \n  @property --blog-card-hover-transform {\n    inherits: true;\n    initial-value: translateY(-4px);\n    syntax: '*';\n  }\n  \n  /* Tag Pattern Tokens */\n  @property --tag-padding-sm {\n    inherits: true;\n    initial-value: 0.25rem 0.5rem;\n    syntax: '*';\n  }\n  \n  @property --tag-padding-md {\n    inherits: true;\n    initial-value: 0.375rem 0.75rem;\n    syntax: '*';\n  }\n  \n  @property --tag-padding-lg {\n    inherits: true;\n    initial-value: 0.5rem 1rem;\n    syntax: '*';\n  }\n  \n  @property --tag-border-radius {\n    inherits: true;\n    initial-value: 9999px;\n    syntax: '<length>';\n  }\n  \n  @property --tag-transition {\n    inherits: true;\n    initial-value: background-color 150ms ease-in-out;\n    syntax: '*';\n  }\n  \n  /* Code Pattern Tokens */\n  @property --code-padding {\n    inherits: true;\n    initial-value: 1rem;\n    syntax: '<length>';\n  }\n  \n  @property --code-inline-padding {\n    inherits: true;\n    initial-value: 0.25rem 0.5rem;\n    syntax: '*';\n  }\n  \n  @property --code-line-height {\n    inherits: true;\n    initial-value: 1.4;\n    syntax: '<number>';\n  }\n  \n  /* Widget Pattern Tokens */\n  @property --widget-header-padding {\n    inherits: true;\n    initial-value: 0.75rem 1rem;\n    syntax: '*';\n  }\n  \n  @property --widget-body-padding {\n    inherits: true;\n    initial-value: 1rem;\n    syntax: '<length>';\n  }\n  \n  @property --widget-footer-padding {\n    inherits: true;\n    initial-value: 0.75rem 1rem;\n    syntax: '*';\n  }\n  \n  @property --widget-action-padding {\n    inherits: true;\n    initial-value: 0.25rem 0.5rem;\n    syntax: '*';\n  }\n  \n  /* Skeleton Pattern Tokens */\n  @property --skeleton-height-sm {\n    inherits: true;\n    initial-value: 0.75rem;\n    syntax: '<length>';\n  }\n  \n  @property --skeleton-height-md {\n    inherits: true;\n    initial-value: 1rem;\n    syntax: '<length>';\n  }\n  \n  @property --skeleton-height-lg {\n    inherits: true;\n    initial-value: 1.5rem;\n    syntax: '<length>';\n  }\n  \n  @property --skeleton-animation-duration {\n    inherits: true;\n    initial-value: 1.5s;\n    syntax: '<time>';\n  }\n  \n  /* Social Media Brand Colors */\n  @property --color-twitter {\n    inherits: true;\n    initial-value: #1DA1F2;\n    syntax: '<color>';\n  }\n  \n  @property --color-facebook {\n    inherits: true;\n    initial-value: #4267B2;\n    syntax: '<color>';\n  }\n  \n  @property --color-linkedin {\n    inherits: true;\n    initial-value: #0077B5;\n    syntax: '<color>';\n  }\n\n  /* Region Component Tokens */\n  \n  /* Header Region Tokens */\n  @property --header-height-sm {\n    inherits: true;\n    initial-value: 48px;\n    syntax: '<length>';\n  }\n  \n  @property --header-height-md {\n    inherits: true;\n    initial-value: 64px;\n    syntax: '<length>';\n  }\n  \n  @property --header-height-lg {\n    inherits: true;\n    initial-value: 80px;\n    syntax: '<length>';\n  }\n  \n  @property --header-z-index {\n    inherits: true;\n    initial-value: 1000;\n    syntax: '<integer>';\n  }\n  \n  @property --header-line-height {\n    inherits: true;\n    initial-value: 1.5;\n    syntax: '<number>';\n  }\n  \n  @property --header-logo-max-height {\n    inherits: true;\n    initial-value: 40px;\n    syntax: '<length>';\n  }\n  \n  @property --header-hamburger-size {\n    inherits: true;\n    initial-value: 24px;\n    syntax: '<length>';\n  }\n  \n  @property --header-mobile-breakpoint {\n    inherits: true;\n    initial-value: 768px;\n    syntax: '<length>';\n  }\n  \n  /* Footer Region Tokens */\n  @property --footer-columns {\n    inherits: true;\n    initial-value: 4;\n    syntax: '<integer>';\n  }\n  \n  @property --footer-column-gap {\n    inherits: true;\n    initial-value: 2rem;\n    syntax: '<length>';\n  }\n  \n  @property --footer-line-height {\n    inherits: true;\n    initial-value: 1.6;\n    syntax: '<number>';\n  }\n  \n  /* Main Content Region Tokens */\n  @property --main-max-width {\n    inherits: true;\n    initial-value: 1200px;\n    syntax: '<length>';\n  }\n  \n  @property --main-max-width-narrow {\n    inherits: true;\n    initial-value: 800px;\n    syntax: '<length>';\n  }\n  \n  @property --main-max-width-wide {\n    inherits: true;\n    initial-value: 1400px;\n    syntax: '<length>';\n  }\n  \n  @property --main-line-height {\n    inherits: true;\n    initial-value: 1.6;\n    syntax: '<number>';\n  }\n  \n  @property --main-mobile-breakpoint {\n    inherits: true;\n    initial-value: 768px;\n    syntax: '<length>';\n  }\n  \n  @property --main-tablet-breakpoint {\n    inherits: true;\n    initial-value: 1024px;\n    syntax: '<length>';\n  }\n  \n  /* Sidebar Region Tokens */\n  @property --sidebar-grid-columns {\n    inherits: true;\n    initial-value: 3;\n    syntax: '<integer>';\n  }\n}\n\n/* Fallback Values for Component Tokens */\n:root {\n  /* Alert */\n  --alert-padding: var(--space-4);\n  --alert-padding-sm: var(--space-2);\n  --alert-padding-lg: var(--space-5);\n  --alert-gap: var(--space-3);\n  --alert-border-radius: var(--radius-md);\n  \n  /* Badge */\n  --badge-padding-xs: 0.15rem 0.35rem;\n  --badge-padding-sm: 0.2rem 0.4rem;\n  --badge-padding-md: 0.25rem 0.5rem;\n  --badge-padding-lg: 0.3rem 0.6rem;\n  --badge-min-width-xs: 1.2rem;\n  --badge-min-width-sm: 1.5rem;\n  --badge-min-width-md: 1.75rem;\n  --badge-min-width-lg: 2rem;\n  \n  /* Card */\n  --card-padding: var(--space-4);\n  --card-padding-fluid: var(--space-5);\n  --card-gap: var(--space-3);\n  --card-grid-gap: var(--space-4);\n  --card-grid-min-width: 250px;\n  \n  /* Button */\n  --button-padding-sm: 0.5rem 0.75rem;\n  --button-padding-md: 0.75rem 1rem;\n  --button-padding-lg: 1rem 1.5rem;\n  --button-height-sm: 2rem;\n  --button-height-md: 2.5rem;\n  --button-height-lg: 3rem;\n  \n  /* Input */\n  --input-padding: var(--space-3);\n  --input-height: 2.5rem;\n  --input-border-width: 1px;\n  \n  /* Modal */\n  --modal-padding: var(--space-6);\n  --modal-header-padding: 1.5rem 1.5rem 1rem;\n  --modal-footer-padding: 1rem 1.5rem 1.5rem;\n  --modal-max-width: 32rem;\n  \n  /* Table */\n  --table-cell-padding: var(--space-3);\n  --table-header-padding: 1rem 0.75rem;\n  \n  /* Avatar */\n  --avatar-size-xs: 1.5rem;\n  --avatar-size-sm: 2rem;\n  --avatar-size-md: 2.5rem;\n  --avatar-size-lg: 3rem;\n  --avatar-size-xl: 4rem;\n  \n  /* Tooltip */\n  --tooltip-padding: 0.5rem 0.75rem;\n  --tooltip-max-width: 200px;\n  --tooltip-arrow-size: 4px;\n  \n  /* Progress */\n  --progress-height: 0.5rem;\n  --progress-height-sm: 0.25rem;\n  --progress-height-lg: 0.75rem;\n  \n  /* Spinner */\n  --spinner-size-sm: 1rem;\n  --spinner-size-md: 1.5rem;\n  --spinner-size-lg: 2rem;\n  --spinner-border-width: 2px;\n  \n  /* Breadcrumb */\n  --breadcrumb-separator-spacing: 0.5rem;\n  --breadcrumb-item-padding: 0.25rem 0.5rem;\n  \n  /* Tab */\n  --tab-padding: 0.75rem 1rem;\n  --tab-border-width: 2px;\n  \n  /* Drawer */\n  --drawer-width: 20rem;\n  --drawer-padding: var(--space-6);\n  \n  /* Pagination */\n  --pagination-item-size: 2.5rem;\n  --pagination-gap: 0.25rem;\n  \n  /* Pattern Components */\n  \n  /* Blog Pattern */\n  --blog-max-width: 65ch;\n  --blog-content-spacing: var(--space-6);\n  --blog-card-hover-transform: translateY(-4px);\n  \n  /* Tag Pattern */\n  --tag-padding-sm: 0.25rem 0.5rem;\n  --tag-padding-md: 0.375rem 0.75rem;\n  --tag-padding-lg: 0.5rem 1rem;\n  --tag-border-radius: 9999px;\n  --tag-transition: background-color 150ms ease-in-out;\n  \n  /* Code Pattern */\n  --code-padding: var(--space-4);\n  --code-inline-padding: var(--space-1) var(--space-2);\n  --code-line-height: 1.4;\n  \n  /* Widget Pattern */\n  --widget-header-padding: var(--space-3) var(--space-4);\n  --widget-body-padding: var(--space-4);\n  --widget-footer-padding: var(--space-3) var(--space-4);\n  --widget-action-padding: var(--space-1) var(--space-2);\n  \n  /* Skeleton Pattern */\n  --skeleton-height-sm: 0.75rem;\n  --skeleton-height-md: 1rem;\n  --skeleton-height-lg: 1.5rem;\n  --skeleton-animation-duration: 1.5s;\n  \n  /* Social Media Brand Colors */\n  --color-twitter: #1DA1F2;\n  --color-facebook: #4267B2;\n  --color-linkedin: #0077B5;\n  \n  /* Region Components */\n  \n  /* Header Region */\n  --header-height-sm: 48px;\n  --header-height-md: 64px;\n  --header-height-lg: 80px;\n  --header-z-index: 1000;\n  --header-line-height: 1.5;\n  --header-logo-max-height: 40px;\n  --header-hamburger-size: 24px;\n  --header-mobile-breakpoint: 768px;\n  \n  /* Footer Region */\n  --footer-columns: 4;\n  --footer-column-gap: var(--space-8);\n  --footer-line-height: 1.6;\n  \n  /* Main Content Region */\n  --main-max-width: 1200px;\n  --main-max-width-narrow: 800px;\n  --main-max-width-wide: 1400px;\n  --main-line-height: 1.6;\n  --main-mobile-breakpoint: 768px;\n  --main-tablet-breakpoint: 1024px;\n  \n  /* Sidebar Region */\n  --sidebar-grid-columns: 3;\n} ","/**\n * Optimierte Color Properties mit @property\n * \n * Enthält nur semantische und animierbare Farb-Tokens.\n * Alle Abstufungen (z. B. -100 bis -900) werden im `@layer colors` gepflegt.\n * \n * @layer tokens.properties\n */\n\n @layer tokens.properties {\n  /* Base Colors */\n  @property --color-white {\n    inherits: true;\n    initial-value: #fff;\n    syntax: '<color>';\n  }\n\n  @property --color-black {\n    inherits: true;\n    initial-value: #000;\n    syntax: '<color>';\n  }\n\n  /* Accessibility-specific colors */\n  @property --color-gray-very-dark {\n    inherits: true;\n    initial-value: #1a1a1a;\n    syntax: '<color>';\n  }\n\n  @property --color-gray-medium {\n    inherits: true;\n    initial-value: #6b6b6b;\n    syntax: '<color>';\n  }\n\n  @property --color-gray-very-light {\n    inherits: true;\n    initial-value: #f2f2f2;\n    syntax: '<color>';\n  }\n\n  /* Opacity-based colors */\n  @property --color-overlay-dark {\n    inherits: true;\n    initial-value: rgb(0 0 0 / 80%);\n    syntax: '<color>';\n  }\n\n  @property --color-overlay-medium {\n    inherits: true;\n    initial-value: rgb(0 0 0 / 60%);\n    syntax: '<color>';\n  }\n\n  /* Basis-Farbtokens */\n  @property --color-primary {\n    inherits: true;\n    initial-value: #06f;\n    syntax: '<color>';\n  }\n\n  @property --color-secondary {\n    inherits: true;\n    initial-value: #5333ff;\n    syntax: '<color>';\n  }\n\n  @property --color-success {\n    inherits: true;\n    initial-value: #10b981;\n    syntax: '<color>';\n  }\n\n  @property --color-warning {\n    inherits: true;\n    initial-value: #f59e0b;\n    syntax: '<color>';\n  }\n\n  @property --color-error {\n    inherits: true;\n    initial-value: #ef4444;\n    syntax: '<color>';\n  }\n\n  @property --color-info {\n    inherits: true;\n    initial-value: #06f;\n    syntax: '<color>';\n  }\n\n  @property --color-neutral {\n    inherits: true;\n    initial-value: #6b7280;\n    syntax: '<color>';\n  }\n\n  /* Textfarben */\n  @property --color-text {\n    inherits: true;\n    initial-value: #1f2937;\n    syntax: '<color>';\n  }\n\n  @property --color-text-muted {\n    inherits: true;\n    initial-value: #6b7280;\n    syntax: '<color>';\n  }\n\n  @property --color-text-inverse {\n    inherits: true;\n    initial-value: #fff;\n    syntax: '<color>';\n  }\n\n  /* Oberflächenfarben */\n  @property --color-background {\n    inherits: true;\n    initial-value: #fff;\n    syntax: '<color>';\n  }\n\n  @property --color-surface {\n    inherits: true;\n    initial-value: #f9fafb;\n    syntax: '<color>';\n  }\n\n  @property --color-surface-elevated {\n    inherits: true;\n    initial-value: #fff;\n    syntax: '<color>';\n  }\n\n  /* Rahmenfarben */\n  @property --color-border {\n    inherits: true;\n    initial-value: #e5e7eb;\n    syntax: '<color>';\n  }\n\n  @property --color-border-strong {\n    inherits: true;\n    initial-value: #d1d5db;\n    syntax: '<color>';\n  }\n\n  /* Für animierbare Transitions */\n  @property --color-transition-primary {\n    inherits: true;\n    initial-value: #06f;\n    syntax: '<color>';\n  }\n\n  @property --color-transition-surface {\n    inherits: true;\n    initial-value: #fff;\n    syntax: '<color>';\n  }\n\n  @property --color-transition-text {\n    inherits: true;\n    initial-value: #1f2937;\n    syntax: '<color>';\n  }\n\n  /* Erweiterte Farbabstufungen für Komponenten */\n  \n  /* Primary Color Scale */\n  @property --color-primary-50 {\n    inherits: true;\n    initial-value: #eff6ff;\n    syntax: '<color>';\n  }\n  \n  @property --color-primary-100 {\n    inherits: true;\n    initial-value: #dbeafe;\n    syntax: '<color>';\n  }\n  \n  @property --color-primary-200 {\n    inherits: true;\n    initial-value: #bfdbfe;\n    syntax: '<color>';\n  }\n  \n  @property --color-primary-300 {\n    inherits: true;\n    initial-value: #93c5fd;\n    syntax: '<color>';\n  }\n  \n  @property --color-primary-400 {\n    inherits: true;\n    initial-value: #60a5fa;\n    syntax: '<color>';\n  }\n  \n  @property --color-primary-500 {\n    inherits: true;\n    initial-value: #3b82f6;\n    syntax: '<color>';\n  }\n  \n  @property --color-primary-600 {\n    inherits: true;\n    initial-value: #2563eb;\n    syntax: '<color>';\n  }\n  \n  @property --color-primary-700 {\n    inherits: true;\n    initial-value: #1d4ed8;\n    syntax: '<color>';\n  }\n  \n  @property --color-primary-800 {\n    inherits: true;\n    initial-value: #1e40af;\n    syntax: '<color>';\n  }\n  \n  @property --color-primary-900 {\n    inherits: true;\n    initial-value: #1e3a8a;\n    syntax: '<color>';\n  }\n\n  /* Secondary Color Scale */\n  @property --color-secondary-50 {\n    inherits: true;\n    initial-value: #f8fafc;\n    syntax: '<color>';\n  }\n  \n  @property --color-secondary-100 {\n    inherits: true;\n    initial-value: #f1f5f9;\n    syntax: '<color>';\n  }\n  \n  @property --color-secondary-200 {\n    inherits: true;\n    initial-value: #e2e8f0;\n    syntax: '<color>';\n  }\n  \n  @property --color-secondary-300 {\n    inherits: true;\n    initial-value: #cbd5e1;\n    syntax: '<color>';\n  }\n  \n  @property --color-secondary-400 {\n    inherits: true;\n    initial-value: #94a3b8;\n    syntax: '<color>';\n  }\n  \n  @property --color-secondary-500 {\n    inherits: true;\n    initial-value: #64748b;\n    syntax: '<color>';\n  }\n  \n  @property --color-secondary-600 {\n    inherits: true;\n    initial-value: #475569;\n    syntax: '<color>';\n  }\n  \n  @property --color-secondary-700 {\n    inherits: true;\n    initial-value: #334155;\n    syntax: '<color>';\n  }\n  \n  @property --color-secondary-800 {\n    inherits: true;\n    initial-value: #1e293b;\n    syntax: '<color>';\n  }\n  \n  @property --color-secondary-900 {\n    inherits: true;\n    initial-value: #0f172a;\n    syntax: '<color>';\n  }\n\n  /* Success Color Scale */\n  @property --color-success-50 {\n    inherits: true;\n    initial-value: #ecfdf5;\n    syntax: '<color>';\n  }\n  \n  @property --color-success-100 {\n    inherits: true;\n    initial-value: #d1fae5;\n    syntax: '<color>';\n  }\n  \n  @property --color-success-200 {\n    inherits: true;\n    initial-value: #a7f3d0;\n    syntax: '<color>';\n  }\n  \n  @property --color-success-300 {\n    inherits: true;\n    initial-value: #6ee7b7;\n    syntax: '<color>';\n  }\n  \n  @property --color-success-400 {\n    inherits: true;\n    initial-value: #34d399;\n    syntax: '<color>';\n  }\n  \n  @property --color-success-500 {\n    inherits: true;\n    initial-value: #10b981;\n    syntax: '<color>';\n  }\n  \n  @property --color-success-600 {\n    inherits: true;\n    initial-value: #059669;\n    syntax: '<color>';\n  }\n  \n  @property --color-success-700 {\n    inherits: true;\n    initial-value: #047857;\n    syntax: '<color>';\n  }\n  \n  @property --color-success-800 {\n    inherits: true;\n    initial-value: #065f46;\n    syntax: '<color>';\n  }\n  \n  @property --color-success-900 {\n    inherits: true;\n    initial-value: #064e3b;\n    syntax: '<color>';\n  }\n\n  /* Warning Color Scale */\n  @property --color-warning-50 {\n    inherits: true;\n    initial-value: #fffbeb;\n    syntax: '<color>';\n  }\n  \n  @property --color-warning-100 {\n    inherits: true;\n    initial-value: #fef3c7;\n    syntax: '<color>';\n  }\n  \n  @property --color-warning-200 {\n    inherits: true;\n    initial-value: #fde68a;\n    syntax: '<color>';\n  }\n  \n  @property --color-warning-300 {\n    inherits: true;\n    initial-value: #fcd34d;\n    syntax: '<color>';\n  }\n  \n  @property --color-warning-400 {\n    inherits: true;\n    initial-value: #fbbf24;\n    syntax: '<color>';\n  }\n  \n  @property --color-warning-500 {\n    inherits: true;\n    initial-value: #f59e0b;\n    syntax: '<color>';\n  }\n  \n  @property --color-warning-600 {\n    inherits: true;\n    initial-value: #d97706;\n    syntax: '<color>';\n  }\n  \n  @property --color-warning-700 {\n    inherits: true;\n    initial-value: #b45309;\n    syntax: '<color>';\n  }\n  \n  @property --color-warning-800 {\n    inherits: true;\n    initial-value: #92400e;\n    syntax: '<color>';\n  }\n  \n  @property --color-warning-900 {\n    inherits: true;\n    initial-value: #78350f;\n    syntax: '<color>';\n  }\n\n  /* Error Color Scale */\n  @property --color-error-50 {\n    inherits: true;\n    initial-value: #fef2f2;\n    syntax: '<color>';\n  }\n  \n  @property --color-error-100 {\n    inherits: true;\n    initial-value: #fee2e2;\n    syntax: '<color>';\n  }\n  \n  @property --color-error-200 {\n    inherits: true;\n    initial-value: #fecaca;\n    syntax: '<color>';\n  }\n  \n  @property --color-error-300 {\n    inherits: true;\n    initial-value: #fca5a5;\n    syntax: '<color>';\n  }\n  \n  @property --color-error-400 {\n    inherits: true;\n    initial-value: #f87171;\n    syntax: '<color>';\n  }\n  \n  @property --color-error-500 {\n    inherits: true;\n    initial-value: #ef4444;\n    syntax: '<color>';\n  }\n  \n  @property --color-error-600 {\n    inherits: true;\n    initial-value: #dc2626;\n    syntax: '<color>';\n  }\n  \n  @property --color-error-700 {\n    inherits: true;\n    initial-value: #b91c1c;\n    syntax: '<color>';\n  }\n  \n  @property --color-error-800 {\n    inherits: true;\n    initial-value: #991b1b;\n    syntax: '<color>';\n  }\n  \n  @property --color-error-900 {\n    inherits: true;\n    initial-value: #7f1d1d;\n    syntax: '<color>';\n  }\n\n  /* Info Color Scale */\n  @property --color-info-50 {\n    inherits: true;\n    initial-value: #f0f9ff;\n    syntax: '<color>';\n  }\n  \n  @property --color-info-100 {\n    inherits: true;\n    initial-value: #e0f2fe;\n    syntax: '<color>';\n  }\n  \n  @property --color-info-200 {\n    inherits: true;\n    initial-value: #bae6fd;\n    syntax: '<color>';\n  }\n  \n  @property --color-info-300 {\n    inherits: true;\n    initial-value: #7dd3fc;\n    syntax: '<color>';\n  }\n  \n  @property --color-info-400 {\n    inherits: true;\n    initial-value: #38bdf8;\n    syntax: '<color>';\n  }\n  \n  @property --color-info-500 {\n    inherits: true;\n    initial-value: #0ea5e9;\n    syntax: '<color>';\n  }\n  \n  @property --color-info-600 {\n    inherits: true;\n    initial-value: #0284c7;\n    syntax: '<color>';\n  }\n  \n  @property --color-info-700 {\n    inherits: true;\n    initial-value: #0369a1;\n    syntax: '<color>';\n  }\n  \n  @property --color-info-800 {\n    inherits: true;\n    initial-value: #075985;\n    syntax: '<color>';\n  }\n  \n  @property --color-info-900 {\n    inherits: true;\n    initial-value: #0c4a6e;\n    syntax: '<color>';\n  }\n\n  /* Neutral Color Scale */\n  @property --color-neutral-50 {\n    inherits: true;\n    initial-value: #f9fafb;\n    syntax: '<color>';\n  }\n  \n  @property --color-neutral-100 {\n    inherits: true;\n    initial-value: #f3f4f6;\n    syntax: '<color>';\n  }\n  \n  @property --color-neutral-200 {\n    inherits: true;\n    initial-value: #e5e7eb;\n    syntax: '<color>';\n  }\n  \n  @property --color-neutral-300 {\n    inherits: true;\n    initial-value: #d1d5db;\n    syntax: '<color>';\n  }\n  \n  @property --color-neutral-400 {\n    inherits: true;\n    initial-value: #9ca3af;\n    syntax: '<color>';\n  }\n  \n  @property --color-neutral-500 {\n    inherits: true;\n    initial-value: #6b7280;\n    syntax: '<color>';\n  }\n  \n  @property --color-neutral-600 {\n    inherits: true;\n    initial-value: #4b5563;\n    syntax: '<color>';\n  }\n  \n  @property --color-neutral-700 {\n    inherits: true;\n    initial-value: #374151;\n    syntax: '<color>';\n  }\n  \n  @property --color-neutral-800 {\n    inherits: true;\n    initial-value: #1f2937;\n    syntax: '<color>';\n  }\n  \n  @property --color-neutral-900 {\n    inherits: true;\n    initial-value: #111827;\n    syntax: '<color>';\n  }\n\n  /* Gray Color Scale (alias für neutral) */\n  @property --color-gray-50 {\n    inherits: true;\n    initial-value: #f9fafb;\n    syntax: '<color>';\n  }\n  \n  @property --color-gray-100 {\n    inherits: true;\n    initial-value: #f3f4f6;\n    syntax: '<color>';\n  }\n  \n  @property --color-gray-200 {\n    inherits: true;\n    initial-value: #e5e7eb;\n    syntax: '<color>';\n  }\n  \n  @property --color-gray-300 {\n    inherits: true;\n    initial-value: #d1d5db;\n    syntax: '<color>';\n  }\n  \n  @property --color-gray-400 {\n    inherits: true;\n    initial-value: #9ca3af;\n    syntax: '<color>';\n  }\n  \n  @property --color-gray-500 {\n    inherits: true;\n    initial-value: #6b7280;\n    syntax: '<color>';\n  }\n  \n  @property --color-gray-600 {\n    inherits: true;\n    initial-value: #4b5563;\n    syntax: '<color>';\n  }\n  \n  @property --color-gray-700 {\n    inherits: true;\n    initial-value: #374151;\n    syntax: '<color>';\n  }\n  \n  @property --color-gray-800 {\n    inherits: true;\n    initial-value: #1f2937;\n    syntax: '<color>';\n  }\n  \n  @property --color-gray-900 {\n    inherits: true;\n    initial-value: #111827;\n    syntax: '<color>';\n  }\n\n  /* Text Color Scale */\n  @property --color-text-50 {\n    inherits: true;\n    initial-value: #f9fafb;\n    syntax: '<color>';\n  }\n  \n  @property --color-text-100 {\n    inherits: true;\n    initial-value: #f3f4f6;\n    syntax: '<color>';\n  }\n  \n  @property --color-text-200 {\n    inherits: true;\n    initial-value: #e5e7eb;\n    syntax: '<color>';\n  }\n  \n  @property --color-text-300 {\n    inherits: true;\n    initial-value: #d1d5db;\n    syntax: '<color>';\n  }\n  \n  @property --color-text-400 {\n    inherits: true;\n    initial-value: #9ca3af;\n    syntax: '<color>';\n  }\n  \n  @property --color-text-500 {\n    inherits: true;\n    initial-value: #6b7280;\n    syntax: '<color>';\n  }\n  \n  @property --color-text-600 {\n    inherits: true;\n    initial-value: #4b5563;\n    syntax: '<color>';\n  }\n  \n  @property --color-text-700 {\n    inherits: true;\n    initial-value: #374151;\n    syntax: '<color>';\n  }\n  \n  @property --color-text-800 {\n    inherits: true;\n    initial-value: #1f2937;\n    syntax: '<color>';\n  }\n  \n  @property --color-text-900 {\n    inherits: true;\n    initial-value: #111827;\n    syntax: '<color>';\n  }\n\n  /* Surface Color Scale */\n  @property --color-surface-50 {\n    inherits: true;\n    initial-value: #fafafa;\n    syntax: '<color>';\n  }\n  \n  @property --color-surface-100 {\n    inherits: true;\n    initial-value: #f5f5f5;\n    syntax: '<color>';\n  }\n  \n  @property --color-surface-200 {\n    inherits: true;\n    initial-value: #eee;\n    syntax: '<color>';\n  }\n  \n  @property --color-surface-300 {\n    inherits: true;\n    initial-value: #e0e0e0;\n    syntax: '<color>';\n  }\n\n  /* Border Color Scale */\n  @property --color-border-50 {\n    inherits: true;\n    initial-value: #fafafa;\n    syntax: '<color>';\n  }\n  \n  @property --color-border-100 {\n    inherits: true;\n    initial-value: #f4f4f5;\n    syntax: '<color>';\n  }\n  \n  @property --color-border-200 {\n    inherits: true;\n    initial-value: #e4e4e7;\n    syntax: '<color>';\n  }\n  \n  @property --color-border-300 {\n    inherits: true;\n    initial-value: #d4d4d8;\n    syntax: '<color>';\n  }\n}\n\n/* Fallback Values für alle Farbabstufungen */\n:root {\n  /* Primary Scale */\n  --color-primary-50: #eff6ff;\n  --color-primary-100: #dbeafe;\n  --color-primary-200: #bfdbfe;\n  --color-primary-300: #93c5fd;\n  --color-primary-400: #60a5fa;\n  --color-primary-500: #3b82f6;\n  --color-primary-600: #2563eb;\n  --color-primary-700: #1d4ed8;\n  --color-primary-800: #1e40af;\n  --color-primary-900: #1e3a8a;\n\n  /* Secondary Scale */\n  --color-secondary-50: #f8fafc;\n  --color-secondary-100: #f1f5f9;\n  --color-secondary-200: #e2e8f0;\n  --color-secondary-300: #cbd5e1;\n  --color-secondary-400: #94a3b8;\n  --color-secondary-500: #64748b;\n  --color-secondary-600: #475569;\n  --color-secondary-700: #334155;\n  --color-secondary-800: #1e293b;\n  --color-secondary-900: #0f172a;\n\n  /* Success Scale */\n  --color-success-50: #ecfdf5;\n  --color-success-100: #d1fae5;\n  --color-success-200: #a7f3d0;\n  --color-success-300: #6ee7b7;\n  --color-success-400: #34d399;\n  --color-success-500: #10b981;\n  --color-success-600: #059669;\n  --color-success-700: #047857;\n  --color-success-800: #065f46;\n  --color-success-900: #064e3b;\n\n  /* Warning Scale */\n  --color-warning-50: #fffbeb;\n  --color-warning-100: #fef3c7;\n  --color-warning-200: #fde68a;\n  --color-warning-300: #fcd34d;\n  --color-warning-400: #fbbf24;\n  --color-warning-500: #f59e0b;\n  --color-warning-600: #d97706;\n  --color-warning-700: #b45309;\n  --color-warning-800: #92400e;\n  --color-warning-900: #78350f;\n\n  /* Error Scale */\n  --color-error-50: #fef2f2;\n  --color-error-100: #fee2e2;\n  --color-error-200: #fecaca;\n  --color-error-300: #fca5a5;\n  --color-error-400: #f87171;\n  --color-error-500: #ef4444;\n  --color-error-600: #dc2626;\n  --color-error-700: #b91c1c;\n  --color-error-800: #991b1b;\n  --color-error-900: #7f1d1d;\n\n  /* Info Scale */\n  --color-info-50: #f0f9ff;\n  --color-info-100: #e0f2fe;\n  --color-info-200: #bae6fd;\n  --color-info-300: #7dd3fc;\n  --color-info-400: #38bdf8;\n  --color-info-500: #0ea5e9;\n  --color-info-600: #0284c7;\n  --color-info-700: #0369a1;\n  --color-info-800: #075985;\n  --color-info-900: #0c4a6e;\n\n  /* Neutral/Gray Scale */\n  --color-neutral-50: #f9fafb;\n  --color-neutral-100: #f3f4f6;\n  --color-neutral-200: #e5e7eb;\n  --color-neutral-300: #d1d5db;\n  --color-neutral-400: #9ca3af;\n  --color-neutral-500: #6b7280;\n  --color-neutral-600: #4b5563;\n  --color-neutral-700: #374151;\n  --color-neutral-800: #1f2937;\n  --color-neutral-900: #111827;\n  --color-gray-50: var(--color-neutral-50);\n  --color-gray-100: var(--color-neutral-100);\n  --color-gray-200: var(--color-neutral-200);\n  --color-gray-300: var(--color-neutral-300);\n  --color-gray-400: var(--color-neutral-400);\n  --color-gray-500: var(--color-neutral-500);\n  --color-gray-600: var(--color-neutral-600);\n  --color-gray-700: var(--color-neutral-700);\n  --color-gray-800: var(--color-neutral-800);\n  --color-gray-900: var(--color-neutral-900);\n\n  /* Text Scale */\n  --color-text-50: var(--color-neutral-50);\n  --color-text-100: var(--color-neutral-100);\n  --color-text-200: var(--color-neutral-200);\n  --color-text-300: var(--color-neutral-300);\n  --color-text-400: var(--color-neutral-400);\n  --color-text-500: var(--color-neutral-500);\n  --color-text-600: var(--color-neutral-600);\n  --color-text-700: var(--color-neutral-700);\n  --color-text-800: var(--color-neutral-800);\n  --color-text-900: var(--color-neutral-900);\n\n  /* Surface Scale */\n  --color-surface-50: #fafafa;\n  --color-surface-100: #f5f5f5;\n  --color-surface-200: #eee;\n  --color-surface-300: #e0e0e0;\n\n  /* Border Scale */\n  --color-border-50: #fafafa;\n  --color-border-100: #f4f4f5;\n  --color-border-200: #e4e4e7;\n  --color-border-300: #d4d4d8;\n\n  /* Basic Utility Colors */\n  --color-white: #fff;\n  --color-black: #000;\n  --color-transparent: transparent;\n\n  /* Semantic Color Aliases */\n  --color-danger: var(--color-error);\n  --color-danger-50: var(--color-error-50);\n  --color-danger-100: var(--color-error-100);\n  --color-danger-200: var(--color-error-200);\n  --color-danger-300: var(--color-error-300);\n  --color-danger-400: var(--color-error-400);\n  --color-danger-500: var(--color-error-500);\n  --color-danger-600: var(--color-error-600);\n  --color-danger-700: var(--color-error-700);\n  --color-danger-800: var(--color-error-800);\n  --color-danger-900: var(--color-error-900);\n\n  /* Social Media Brand Colors */\n  --color-twitter: #1da1f2;\n  --color-facebook: #4267b2;\n  --color-linkedin: #0077b5;\n  --color-github: #181717;\n  --color-youtube: #f00;\n  --color-instagram: #e4405f;\n\n  /* Additional utility colors */\n  --color-gray-very-dark: #1a1a1a;\n  --color-gray-medium: #6b6b6b;\n  --color-gray-very-light: #f2f2f2;\n  --color-overlay-dark: rgb(0 0 0 / 80%);\n  --color-overlay-medium: rgb(0 0 0 / 60%);\n}\n","/*\n * Accessibility - Screenreader Support\n *\n * Styles und Utilities für verbesserte Screenreader-Unterstützung.\n * Diese Datei enthält Definitionen für versteckte Texte und ARIA-Unterstützung.\n */\n\n@layer accessibility {\n  /*\n   * Screenreader-only Elemente\n   * \n   * Diese Klassen machen Inhalte für Screenreader zugänglich,\n   * während sie visuell versteckt bleiben.\n   */\n  \n  /* \n   * Versteckt Elemente nur visuell, aber hält sie für Screenreader zugänglich.\n   * Konsolidierte Definitionen für alle sr-only Varianten.\n   */\n  .sr-only,\n  .sr-only-focusable:not(:focus),\n  .sr-announcer {\n    border-width: 0;\n    clip: rect(0, 0, 0, 0);\n    height: var(--border-width);\n    margin: calc(-1 * var(--border-width));\n    overflow: hidden;\n    padding: 0;\n    position: absolute;\n    white-space: nowrap;\n    width: var(--border-width);\n  }\n  \n  /* \n   * Macht ein sr-only-Element wieder sichtbar.\n   * Nützlich für Elemente, die nur unter bestimmten Bedingungen sichtbar sein sollen.\n   */\n  .not-sr-only {\n    clip: auto;\n    height: auto;\n    margin: 0;\n    overflow: visible;\n    padding: 0;\n    position: static;\n    white-space: normal;\n    width: auto;\n  }\n  \n  /*\n   * Hilfsklassen für ARIA-Zustände\n   * \n   * Visuelle Darstellung von ARIA-Zuständen für bessere Zugänglichkeit.\n   */\n  \n  /* Elemente mit aria-hidden=\"true\" vollständig ausblenden */\n  [aria-hidden=\"true\"] {\n    display: none !important;\n  }\n  \n  /* Elemente mit aria-disabled=\"true\" als deaktiviert darstellen */\n  [aria-disabled=\"true\"] {\n    cursor: not-allowed;\n    opacity: 500000;\n    pointer-events: none;\n  }\n  \n  /* Visuelle Darstellung für ausgewählte Elemente */\n  [aria-selected=\"true\"] {\n    background-color: var(--color-primary-100);\n    border-color: var(--color-primary-500);\n  }\n  \n  /* Visuelle Darstellung für erweiterte Elemente */\n  [aria-expanded=\"true\"] .icon-expand {\n    transform: rotate(180deg);\n  }\n  \n  /*\n   * Hilfsklassen für Screenreader-Text\n   * \n   * Spezifische Klassen für häufig benötigte Screenreader-Texte.\n   */\n  \n  /* Für Text, der nur bei Hover/Fokus angezeigt werden soll - bereits in konsolidierter Definition enthalten */\n  \n  /* Für Text, der nur auf kleinen Bildschirmen ausgeblendet werden soll */\n  @media (max-width: 640px) {\n    .sr-only-mobile {\n      border-width: 0;\n      clip: rect(0, 0, 0, 0);\n      height: var(--border-width);\n      margin: calc(-1 * var(--border-width));\n      overflow: hidden;\n      padding: 0;\n      position: absolute;\n      white-space: nowrap;\n      width: var(--border-width);\n    }\n  }\n  \n  /*\n   * Live-Region Support\n   * \n   * Stile für ARIA-Live-Regionen, die dynamisch aktualisierte Inhalte enthalten.\n   */\n  \n  /* Basis-Stil für Live-Regionen */\n  [aria-live] {\n    position: relative;\n  }\n  \n  /* Live-Region mit visueller Markierung für Entwicklungszwecke */\n  .debug [aria-live] {\n    outline: var(--border-width-thick) dashed var(--color-info);\n    outline-offset: var(--border-width-thick);\n  }\n  \n  /* Container für Benachrichtigungen, die für Screenreader bestimmt sind - bereits in konsolidierter Definition enthalten */\n  .sr-announcer {\n    pointer-events: none; /* Zusätzliche Eigenschaft nur für Announcer */\n  }\n  \n  /*\n   * Kontrasthilfen\n   * \n   * Erhöht den Kontrast für Benutzer mit Sehbehinderungen.\n   */\n  \n  /* Erhöht den Kontrast von Text */\n  .high-contrast-text {\n    color: var(--color-text-primary) !important;\n    text-shadow: 0 0 var(--border-width) rgb(0 0 0 / 500000);\n  }\n  \n  /* Anpassung der Hintergrundfarbe für besseren Kontrast */\n  .high-contrast-bg {\n    background-color: var(--color-surface) !important;\n    border: var(--border-width) solid var(--color-border);\n  }\n} ","/*\n * Forms Module - Complete Form System\n *\n * Comprehensive form elements and controls for user input and interaction.\n * This module combines all form-related components and provides both simple\n * utility classes and advanced form system features.\n * \n * CONTENTS:\n * \n * 1. BASIC FORM ELEMENTS (Simple utility classes):\n *    - Buttons (interactive form controls)\n *    - Input fields (text, email, password, etc.)\n *    - Textarea (multi-line text input)\n *    - Select dropdowns (single and multiple selection)\n *    - Checkboxes (multiple selection)\n *    - Radio buttons (single selection from group)\n *    - Switches (toggle controls)\n *    - Sliders (range input controls)\n * \n * 2. ADVANCED FORM SYSTEM (Bootstrap-style components):\n *    - Form containers and layouts (.form, .form-group, .form-row)\n *    - Form controls (.form-control, .form-select, .form-check)\n *    - Labels and feedback (.form-label, .form-text, .feedback)\n *    - Validation states and feedback mechanisms\n *    - Input groups (.input-group, .input-group-text)\n *    - Responsive and adaptive layouts\n *    - RTL support and accessibility features\n * \n * @layer components.forms\n * \n * Accessibility Features:\n * - Semantic HTML elements as foundation\n * - Proper focus management and keyboard navigation\n * - ARIA attributes where needed\n * - High contrast focus indicators\n * - Screen reader friendly labels and descriptions\n */\n\n/**\n * Form Elements Collection\n * \n * This file contains all form-related components:\n * - Buttons (interactive form controls)\n * - Input fields (text, email, password, etc.)\n * - Textarea (multi-line text input)\n * - Select dropdowns (single and multiple selection)\n * - Checkboxes (multiple selection)\n * - Radio buttons (single selection from group)\n * - Switches (toggle controls)\n * - Sliders (range input controls)\n * \n * @layer components.forms\n * \n * Accessibility Features:\n * - Semantic HTML elements as foundation\n * - Proper focus management and keyboard navigation\n * - ARIA attributes where needed\n * - High contrast focus indicators\n * - Screen reader friendly labels and descriptions\n */\n\n/* =================== ANIMATIONS =================== */\n\n/* =================== BUTTONS =================== */\n\n@layer components {\n  /* Base Button Style */\n  .button {\n    align-items: center;\n    border: none;\n    border-radius: var(--radius-md, 0.5rem);\n    cursor: pointer;\n    display: inline-flex;\n    font-size: var(--font-size-sm, 0.875rem);\n    font-weight: var(--font-weight-medium, 500);\n    justify-content: center;\n    line-height: 1.25;\n    padding-block: var(--space-2, 0.5rem);\n    padding-inline: var(--space-4, 1rem);\n    position: relative;\n    text-decoration: none;\n    transition: background-color var(--transition-duration-fast, 150ms) var(--transition-timing-ease, cubic-bezier(0.4, 0, 0.2, 1));\n  }\n\n  /* Button Variants */\n  .button--primary {\n    background-color: var(--color-primary, #06c);\n    color: white;\n  }\n  \n  .button--primary:hover {\n    background-color: var(--color-primary-hover, #05a);\n  }\n\n  .button--secondary {\n    background-color: var(--color-secondary);\n    color: white;\n  }\n  \n  .button--secondary:hover {\n    background-color: var(--color-secondary-hover);\n  }\n\n  .button--tertiary {\n    background-color: transparent;\n    border: 1px solid var(--color-border, #e5e7eb);\n    color: var(--color-text);\n  }\n  \n  .button--tertiary:hover {\n    background-color: var(--color-background-alt, #f9fafb);\n  }\n\n  .button--success {\n    background-color: var(--color-success, #10b981);\n    color: white;\n  }\n  \n  .button--success:hover {\n    background-color: var(--color-success-hover);\n  }\n\n  .button--warning {\n    background-color: var(--color-warning, #f59e0b);\n    color: var(--color-text);\n  }\n  \n  .button--warning:hover {\n    background-color: var(--color-warning-hover);\n  }\n\n  .button--danger {\n    background-color: var(--color-error, #ef4444);\n    color: white;\n  }\n  \n  .button--danger:hover {\n    background-color: var(--color-error-hover);\n  }\n\n  .button--info {\n    background-color: var(--color-info, #3b82f6);\n    color: white;\n  }\n  \n  .button--info:hover {\n    background-color: var(--color-info-hover);\n  }\n  \n  .button--link {\n    background-color: transparent;\n    color: var(--color-primary, #3b82f6);\n    padding: 0;\n    text-decoration: underline;\n  }\n  \n  .button--link:hover {\n    color: var(--color-primary-hover, #2563eb);\n    text-decoration: none;\n  }\n\n  /* Button Sizes */\n  .button--xs {\n    font-size: var(--font-size-xs);\n    padding-block: var(--space-1);\n    padding-inline: var(--space-2);\n  }\n\n  .button--sm {\n    font-size: var(--font-size-sm, 0.875rem);\n    padding-block: var(--space-1);\n    padding-inline: var(--space-3);\n  }\n  \n  .button--md {\n    font-size: var(--font-size-base, 1rem);\n    padding-block: var(--space-2);\n    padding-inline: var(--space-4);\n  }\n\n  .button--lg {\n    font-size: var(--font-size-lg);\n    padding-block: var(--space-3);\n    padding-inline: var(--space-6);\n  }\n  \n  .button--xl {\n    font-size: var(--font-size-xl);\n    padding-block: var(--space-4);\n    padding-inline: var(--space-8);\n  }\n\n  /* Button States */\n  button:disabled,\n  .button:disabled {\n    cursor: not-allowed;\n    opacity: var(--opacity-50);\n  }\n\n  .button--loading {\n    color: transparent;\n    pointer-events: none;\n  }\n\n  .button--with-icon {\n    gap: var(--space-2);\n  }\n\n  .button--with-icon .icon {\n    flex-shrink: 0;\n    height: 1em;\n    width: 1em;\n  }\n\n  .button--icon-only {\n    aspect-ratio: 1;\n    padding: var(--space-2);\n  }\n\n  .button--icon-only .icon {\n    height: 1.25em;\n    width: 1.25em;\n  }\n\n  .button--loading::after {\n    animation: var(--ui-spin-animation, spin var(--animation-duration-slowest, 1000ms) var(--ease-linear, linear) infinite);\n    border: 2px solid transparent;\n    border-radius: var(--radius-full, 9999px);\n    border-top-color: currentColor;\n    content: \"\";\n    height: 1em;\n    left: 50%;\n    position: absolute;\n    top: 50%;\n    transform: translate(-50%, -50%);\n    width: 1em;\n  }\n}\n\n/* =================== INPUT FIELDS =================== */\n\n@layer components {\n  .input {\n    background-color: var(--color-white, #fff);\n    border: 1px solid var(--color-gray-300, #d1d5db);\n    border-radius: var(--radius-md, 0.375rem);\n    color: var(--color-gray-900, #111827);\n    display: block;\n    font-size: var(--font-size-base, 1rem);\n    padding: var(--space-2) var(--space-3);\n    transition: border-color var(--transition-fast, 150ms ease), background-color var(--transition-fast, 150ms ease);\n    width: 100%;\n\n    &:focus {\n      border-color: var(--color-primary, #3b82f6);\n      box-shadow: 0 0 0 2px color-mix(in srgb, var(--color-primary, #3b82f6) 50, transparent);\n      outline: none;\n    }\n\n    &.invalid {\n      background-color: color-mix(in srgb, var(--color-error, #ef4444) 5%, white);\n      border-color: var(--color-error, #ef4444);\n    }\n\n    &:disabled {\n      background-color: var(--color-gray-100, #f3f4f6);\n      color: var(--color-gray-500);\n      cursor: not-allowed;\n    }\n\n    &:read-only {\n      background-color: var(--color-gray-50);\n    }\n\n    /* Input Variants */\n    &.primary {\n      border-color: var(--color-primary, #3b82f6);\n    }\n\n    &.success {\n      border-color: var(--color-success, #10b981);\n    }\n\n    &.warning {\n      border-color: var(--color-warning, #f59e0b);\n    }\n\n    &.danger {\n      border-color: var(--color-danger);\n    }\n\n    /* Input Sizes */\n    &.sm {\n      font-size: var(--font-size-sm, 0.875rem);\n      padding: var(--space-1) var(--space-2);\n    }\n\n    &.lg {\n      font-size: var(--font-size-lg);\n      padding: var(--space-3) var(--space-4);\n    }\n  }\n\n  /* Input with Icon */\n  .input-wrapper {\n    align-items: center;\n    display: flex;\n    position: relative;\n\n    .input {\n      padding-left: var(--space-8);\n    }\n\n    .input-icon {\n      color: var(--color-gray-400);\n      left: var(--space-3);\n      pointer-events: none;\n      position: absolute;\n    }\n  }\n}\n\n/* =================== TEXTAREA =================== */\n\n@layer components {\n  .textarea {\n    background-color: var(--color-white, #fff);\n    border: 1px solid var(--color-gray-300, #d1d5db);\n    border-radius: var(--radius-md, 0.375rem);\n    color: var(--color-gray-900, #111827);\n    font-size: var(--font-size-base, 1rem);\n    min-height: 6rem;\n    padding: var(--space-3);\n    resize: vertical;\n    transition: border-color var(--transition-fast, 150ms ease), box-shadow var(--transition-fast, 150ms ease);\n    width: 100%;\n    \n    &:focus {\n      border-color: var(--color-primary, #3b82f6);\n      box-shadow: 0 0 0 2px color-mix(in srgb, var(--color-primary, #3b82f6) 50, transparent);\n      outline: none;\n    }\n    \n    &:disabled {\n      background-color: var(--color-gray-100, #f3f4f6);\n      color: var(--color-gray-500);\n      cursor: not-allowed;\n      opacity: 0.7;\n    }\n    \n    /* Textarea Sizes */\n    &.sm {\n      font-size: var(--font-size-sm, 0.875rem);\n      min-height: 4rem;\n      padding: var(--space-2);\n    }\n    \n    &.lg {\n      font-size: var(--font-size-lg);\n      min-height: 8rem;\n      padding: var(--space-4);\n    }\n    \n    /* Textarea States */\n    &.error {\n      background-color: color-mix(in srgb, var(--color-error, #ef4444) 3%, var(--color-white, #fff));\n      border-color: var(--color-error, #ef4444);\n      \n      &:focus {\n        box-shadow: 0 0 0 2px color-mix(in srgb, var(--color-error, #ef4444) 30, transparent);\n      }\n    }\n    \n    &.success {\n      background-color: color-mix(in srgb, var(--color-success, #10b981) 3%, var(--color-white, #fff));\n      border-color: var(--color-success, #10b981);\n      \n      &:focus {\n        box-shadow: 0 0 0 2px color-mix(in srgb, var(--color-success, #10b981) 30, transparent);\n      }\n    }\n    \n    &.readonly {\n      background-color: var(--color-gray-50);\n      cursor: default;\n    }\n    \n    &.auto-resize {\n      overflow-y: hidden;\n    }\n  }\n  \n  /* Textarea with Counter */\n  .textarea-container {\n    position: relative;\n    width: 100%;\n    \n    .counter {\n      bottom: var(--space-2);\n      color: var(--color-gray-500);\n      font-size: var(--font-size-xs);\n      pointer-events: none;\n      position: absolute;\n      right: var(--space-3);\n    }\n    \n    .textarea {\n      padding-bottom: calc(var(--space-3) + 1.5rem);\n    }\n  }\n}\n\n/* =================== SELECT DROPDOWNS =================== */\n\n@layer components {\n  .select {\n    appearance: none;\n    background-color: var(--color-white, #fff);\n    background-image: url(\"data:image/svg+xml,%3Csvg viewBox='0 0 20 20' fill='none' stroke='%23666' stroke-width='2' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M6 8l4 4 4-4'/%3E%3C/svg%3E\");\n    background-position: right var(--space-3) center;\n    background-repeat: no-repeat;\n    background-size: 1rem;\n    border: 1px solid var(--color-gray-300, #d1d5db);\n    border-radius: var(--radius-md, 0.375rem);\n    color: var(--color-gray-900, #111827);\n    cursor: pointer;\n    display: block;\n    font-size: var(--font-size-base, 1rem);\n    padding: var(--space-2) var(--space-3);\n    transition: border-color var(--transition-fast, 150ms ease), box-shadow var(--transition-fast, 150ms ease);\n    width: 100%;\n    \n    &:focus {\n      border-color: var(--color-primary, #3b82f6);\n      box-shadow: 0 0 0 2px color-mix(in srgb, var(--color-primary, #3b82f6) 50, transparent);\n      outline: none;\n    }\n    \n    &:disabled {\n      background-color: var(--color-gray-100, #f3f4f6);\n      color: var(--color-gray-500);\n      cursor: not-allowed;\n      opacity: 0.7;\n    }\n    \n    /* Select Sizes */\n    &.sm {\n      background-position: right var(--space-2) center;\n      background-size: 0%.875rem;\n      font-size: var(--font-size-sm, 0.875rem);\n      padding: var(--space-1) var(--space-2);\n    }\n    \n    &.lg {\n      background-position: right var(--space-4) center;\n      background-size: 1%.25rem;\n      font-size: var(--font-size-lg);\n      padding: var(--space-3) var(--space-4);\n    }\n    \n    /* Select States */\n    &.error {\n      background-color: color-mix(in srgb, var(--color-error, #ef4444) 3%, var(--color-white, #fff));\n      border-color: var(--color-error, #ef4444);\n      \n      &:focus {\n        box-shadow: 0 0 0 2px color-mix(in srgb, var(--color-error, #ef4444) 30, transparent);\n      }\n    }\n    \n    &.success {\n      background-color: color-mix(in srgb, var(--color-success, #10b981) 3%, var(--color-white, #fff));\n      border-color: var(--color-success, #10b981);\n      \n      &:focus {\n        box-shadow: 0 0 0 2px color-mix(in srgb, var(--color-success, #10b981) 30, transparent);\n      }\n    }\n    \n    /* Multiple Selection */\n    &[multiple] {\n      background-image: none;\n      padding: var(--space-1);\n      \n      option {\n        border-radius: var(--radius-sm, 0.125rem);\n        padding: var(--space-1) var(--space-2);\n        \n        &:checked {\n          background-color: color-mix(in srgb, var(--color-primary, #3b82f6) 15%, transparent);\n        }\n      }\n    }\n    \n    /* Option Groups */\n    optgroup {\n      color: var(--color-gray-700);\n      font-weight: var(--font-weight-medium, 500);\n    }\n  }\n}\n\n/* =================== CHECKBOXES =================== */\n\n@layer elements {\n  .checkbox {\n    align-items: center;\n    cursor: pointer;\n    display: inline-flex;\n    font-size: var(--text-sm, 0.875rem);\n    gap: var(--space-2);\n    position: relative;\n  }\n  \n  .checkbox .input {\n    appearance: none;\n    background-color: white;\n    border: 1px solid var(--color-neutral-400, #9ca3af);\n    border-radius: var(--radius-sm, 0.125rem);\n    cursor: pointer;\n    height: 1rem;\n    position: relative;\n    transition: all 0.2s;\n    width: 1rem;\n  }\n  \n  .checkbox .input:checked {\n    background-color: var(--color-primary-500);\n    border-color: var(--color-primary-500);\n  }\n  \n  .checkbox .input:checked::after {\n    border: solid white;\n    border-width: 0% 2px 2px 0;\n    content: \"\";\n    height: 6px;\n    left: 4px;\n    position: absolute;\n    top: 1px;\n    transform: rotate(45deg);\n    width: 3px;\n  }\n  \n  .checkbox .label {\n    color: var(--color-text-700, #374151);\n    font-size: var(--text-sm, 0.875rem);\n  }\n  \n  .checkbox .input:focus-visible {\n    outline: 2px solid var(--color-primary-300);\n    outline-offset: 2px;\n  }\n  \n  .checkbox .input:hover:not(:disabled) {\n    border-color: var(--color-primary-500);\n  }\n  \n  .checkbox .input:disabled {\n    background-color: var(--color-neutral-100, #f3f4f6);\n    border-color: var(--color-neutral-300, #d1d5db);\n    cursor: not-allowed;\n    opacity: var(--opacity-50);\n  }\n  \n  .checkbox .input:disabled ~ .checkbox .label {\n    color: var(--color-text-400);\n    cursor: not-allowed;\n  }\n  \n  /* Checkbox Sizes */\n  .checkbox--sm .input {\n    height: 0%.875rem;\n    width: 0%.875rem;\n  }\n  \n  .checkbox--sm .input:checked::after {\n    height: 5px;\n    left: 3px;\n    top: 1px;\n    width: 2px;\n  }\n  \n  .checkbox--sm .label {\n    font-size: var(--text-xs, 0.75rem);\n  }\n  \n  .checkbox--lg .input {\n    height: 1%.25rem;\n    width: 1%.25rem;\n  }\n  \n  .checkbox--lg .input:checked::after {\n    height: 8px;\n    left: 5px;\n    top: 2px;\n    width: 4px;\n  }\n  \n  .checkbox--lg .label {\n    font-size: var(--text-base);\n  }\n  \n  /* Checkbox Groups */\n  .checkbox-group {\n    display: flex;\n    flex-direction: column;\n    gap: var(--space-3);\n  }\n  \n  .checkbox-group--horizontal {\n    flex-flow: row wrap;\n    gap: var(--space-4);\n  }\n}\n\n/* =================== RADIO BUTTONS =================== */\n\n@layer components {\n  .radio {\n    align-items: center;\n    cursor: pointer;\n    display: inline-flex;\n    font-size: var(--font-size-sm, 0.875rem);\n    gap: var(--space-2);\n    \n    input[type=\"radio\"] {\n      appearance: none;\n      background-color: var(--color-white, #fff);\n      border: 2px solid var(--color-gray-400);\n      border-radius: 9px;\n      height: 1rem;\n      position: relative;\n      transition: all var(--transition-fast, 150ms ease);\n      width: 1rem;\n      \n      &:checked {\n        background-color: var(--color-primary, #3b82f6);\n        border-color: var(--color-primary, #3b82f6);\n        \n        &::after {\n          background-color: white;\n          border-radius: 9px;\n          content: \"\";\n          height: 0%.375rem;\n          left: 50%;\n          position: absolute;\n          top: 50%;\n          transform: translate(-50%, -50%);\n          width: 0%.375rem;\n        }\n      }\n      \n      &:focus-visible {\n        outline: 2px solid var(--color-primary, #3b82f6);\n        outline-offset: 2px;\n      }\n      \n      &:disabled {\n        background-color: var(--color-gray-100, #f3f4f6);\n        border-color: var(--color-gray-300, #d1d5db);\n        cursor: not-allowed;\n        \n        & ~ .label {\n          color: var(--color-gray-400);\n          cursor: not-allowed;\n        }\n      }\n    }\n    \n    /* Radio Sizes */\n    &.sm {\n      font-size: var(--font-size-xs);\n      \n      input[type=\"radio\"] {\n        height: 0%.875rem;\n        width: 0%.875rem;\n      }\n    }\n    \n    &.lg {\n      font-size: var(--font-size-base, 1rem);\n      \n      input[type=\"radio\"] {\n        height: 1%.25rem;\n        width: 1%.25rem;\n        \n        &:checked::after {\n          height: 0%.5rem;\n          width: 0%.5rem;\n        }\n      }\n    }\n  }\n  \n  .radio-group {\n    display: flex;\n    flex-direction: column;\n    gap: var(--space-2);\n    \n    &.horizontal {\n      align-items: center;\n      flex-flow: row wrap;\n    }\n  }\n}\n\n/* =================== SWITCHES =================== */\n\n@layer elements {\n  .switch {\n    align-items: center;\n    cursor: pointer;\n    display: inline-flex;\n    gap: var(--space-2);\n    position: relative;\n  }\n  \n  .switch .input {\n    height: 0%;\n    opacity: 0%;\n    position: absolute;\n    width: 0%;\n  }\n  \n  .switch .track {\n    background-color: var(--color-neutral-300, #d1d5db);\n    border-radius: var(--radius-full, 9999px);\n    display: inline-block;\n    height: var(--switch-height, 1.25rem);\n    position: relative;\n    transition: background-color 0.2s;\n    width: var(--switch-width, 2.5rem);\n  }\n  \n  .switch .thumb {\n    background-color: white;\n    border-radius: var(--radius-full, 9999px);\n    box-shadow: 0 1px 2px rgb(0 0 0 / 1000%);\n    height: calc(var(--switch-height, 1.25rem) * 0.8);\n    left: calc(var(--switch-height, 1.25rem) * 0.1);\n    position: absolute;\n    top: calc(var(--switch-height, 1.25rem) * 0.1);\n    transition: transform 0.2s;\n    width: calc(var(--switch-height, 1.25rem) * 0.8);\n  }\n  \n  .switch .label {\n    color: var(--color-text-700, #374151);\n    font-size: var(--text-sm, 0.875rem);\n  }\n  \n  .switch .input:checked + .switch .track {\n    background-color: var(--color-primary-500);\n  }\n  \n  .switch .input:checked + .switch .track .switch .thumb {\n    transform: translateX(calc(var(--switch-width, 2.5rem) - var(--switch-height, 1.25rem)));\n  }\n  \n  .switch .input:focus-visible + .switch .track {\n    outline: 2px solid var(--color-primary-500);\n    outline-offset: 2px;\n  }\n  \n  .switch .input:disabled + .switch .track {\n    background-color: var(--color-neutral-200, #e5e7eb);\n    cursor: not-allowed;\n    opacity: 0.7;\n  }\n  \n  .switch .input:disabled + .switch .track .switch .thumb {\n    background-color: var(--color-neutral-400, #9ca3af);\n  }\n  \n  .switch .input:disabled ~ .switch .label {\n    color: var(--color-text-400);\n    cursor: not-allowed;\n  }\n  \n  /* Switch Sizes */\n  .switch--sm {\n    --switch-width: 2rem;\n    --switch-height: 1rem;\n  }\n  \n  .switch--sm .label {\n    font-size: var(--text-xs, 0.75rem);\n  }\n  \n  .switch--md {\n    --switch-width: 2.5rem;\n    --switch-height: 1%.25rem;\n  }\n  \n  .switch--lg {\n    --switch-width: 3%.5rem;\n    --switch-height: 1%.75rem;\n  }\n  \n  .switch--lg .label {\n    font-size: var(--text-base);\n  }\n  \n  /* Switch Color Variants */\n  .switch--primary .input:checked + .switch .track {\n    background-color: var(--color-primary-500);\n  }\n  \n  .switch--secondary .input:checked + .switch .track {\n    background-color: var(--color-secondary-500);\n  }\n  \n  .switch--success .input:checked + .switch .track {\n    background-color: var(--color-success-500);\n  }\n  \n  .switch--warning .input:checked + .switch .track {\n    background-color: var(--color-warning-500);\n  }\n  \n  .switch--danger .input:checked + .switch .track {\n    background-color: var(--color-error-500);\n  }\n}\n\n/* =================== SLIDERS =================== */\n\n@layer elements {\n  .slider {\n    appearance: none;\n    background-color: var(--color-neutral-200, #e5e7eb);\n    border-radius: var(--radius-full, 9999px);\n    cursor: pointer;\n    height: 0%.25rem;\n    margin: var(--space-2) 0;\n    width: 100%;\n  }\n  \n  /* Slider Thumb - WebKit */\n  .slider::-webkit-slider-thumb {\n    appearance: none;\n    background-color: var(--color-primary-500);\n    border-radius: var(--radius-full, 9999px);\n    box-shadow: 0 1px 3px rgb(0 0 0 / 1000%);\n    cursor: pointer;\n    height: 1rem;\n    transition: transform 0.2s, background-color 0.2s;\n    width: 1rem;\n  }\n  \n  /* Slider Thumb - Firefox */\n  .slider::-moz-range-thumb {\n    background-color: var(--color-primary-500);\n    border: none;\n    border-radius: var(--radius-full, 9999px);\n    box-shadow: 0 1px 3px rgb(0 0 0 / 1000%);\n    cursor: pointer;\n    height: 1rem;\n    transition: transform 0.2s, background-color 0.2s;\n    width: 1rem;\n  }\n  \n  /* Slider Hover */\n  .slider:hover::-webkit-slider-thumb {\n    transform: scale(1.1%);\n  }\n  \n  .slider:hover::-moz-range-thumb {\n    transform: scale(1.1%);\n  }\n  \n  /* Slider Focus */\n  .slider:focus {\n    outline: none;\n  }\n  \n  .slider:focus::-webkit-slider-thumb {\n    box-shadow: 0 0 0 3px var(--color-primary-200);\n  }\n  \n  .slider:focus::-moz-range-thumb {\n    box-shadow: 0 0 0 3px var(--color-primary-200);\n  }\n  \n  /* Slider Sizes */\n  .slider--sm {\n    height: 0%.125rem;\n  }\n  \n  .slider--sm::-webkit-slider-thumb {\n    height: 0%.75rem;\n    width: 0%.75rem;\n  }\n  \n  .slider--sm::-moz-range-thumb {\n    height: 0%.75rem;\n    width: 0%.75rem;\n  }\n  \n  .slider--lg {\n    height: 0%.375rem;\n  }\n  \n  .slider--lg::-webkit-slider-thumb {\n    height: 1%.25rem;\n    width: 1%.25rem;\n  }\n  \n  .slider--lg::-moz-range-thumb {\n    height: 1%.25rem;\n    width: 1%.25rem;\n  }\n  \n  /* Slider Color Variants */\n  .slider--primary::-webkit-slider-thumb {\n    background-color: var(--color-primary-500);\n  }\n  \n  .slider--primary::-moz-range-thumb {\n    background-color: var(--color-primary-500);\n  }\n  \n  .slider--secondary::-webkit-slider-thumb {\n    background-color: var(--color-secondary-500);\n  }\n  \n  .slider--secondary::-moz-range-thumb {\n    background-color: var(--color-secondary-500);\n  }\n  \n  .slider--success::-webkit-slider-thumb {\n    background-color: var(--color-success-500);\n  }\n  \n  .slider--success::-moz-range-thumb {\n    background-color: var(--color-success-500);\n  }\n  \n  .slider--danger::-webkit-slider-thumb {\n    background-color: var(--color-error-500);\n  }\n  \n  .slider--danger::-moz-range-thumb {\n    background-color: var(--color-error-500);\n  }\n  \n  .slider--warning::-webkit-slider-thumb {\n    background-color: var(--color-warning-500);\n  }\n  \n  .slider--warning::-moz-range-thumb {\n    background-color: var(--color-warning-500);\n  }\n  \n  /* Slider Container */\n  .slider-container {\n    display: flex;\n    flex-direction: column;\n    margin: var(--space-3) 0;\n    width: 100%;\n  }\n  \n  .slider-container .labels {\n    color: var(--color-text-500, #6b7280);\n    display: flex;\n    font-size: var(--text-xs, 0.75rem);\n    justify-content: space-between;\n    margin-top: var(--space-1);\n  }\n  \n  .slider-container .value {\n    align-self: flex-end;\n    color: var(--color-text-700, #374151);\n    font-size: var(--text-sm, 0.875rem);\n    font-weight: var(--font-medium, 500);\n    margin-top: var(--space-1);\n  }\n  \n  /* Range Slider (dual thumbs) */\n  .slider-range {\n    height: 2rem;\n    margin: var(--space-3) 0;\n    position: relative;\n    width: 100%;\n  }\n  \n  .slider-range .slider {\n    background: none;\n    pointer-events: none;\n    position: absolute;\n    top: 0%;\n    width: 100%;\n    z-index: 1;\n  }\n  \n  .slider-range .slider::-webkit-slider-thumb {\n    pointer-events: auto;\n  }\n  \n  .slider-range .slider::-moz-range-thumb {\n    pointer-events: auto;\n  }\n  \n  .slider-range .fill {\n    background-color: var(--color-primary-500);\n    border-radius: var(--radius-full, 9999px);\n    height: 0%.25rem;\n    position: absolute;\n    top: 50%;\n    transform: translateY(-50%);\n  }\n} /**\n * Formular-Styling-System\n * \n * Diese Datei bietet ein umfassendes System für das Styling von Formularelementen,\n * einschließlich Textfeldern, Auswahlfeldern, Checkboxen, Radios und mehr.\n * Das System ist darauf ausgelegt, konsistente, zugängliche und responsive Formulare zu erzeugen.\n * \n * Hauptmerkmale:\n * - Variablensystem für konsistentes Styling und einfache Anpassung\n * - Flexible Layout-Optionen (vertikal, horizontal, mehrspaltig)\n * - Validierungszustände und Feedback-Mechanismen\n * - Umfangreiche Barrierefreiheit und Tastatur-Navigation\n * - Responsive Anpassung für verschiedene Bildschirmgrößen\n * - Kompatibilität mit dem Container-Query-System aus layout.css\n * - Unterstützung für interpolate-size: allow-keywords mit fluid und adaptive Klassen\n * - Optionale field-sizing: content für natürlichere Eingabefelder\n * - Umfassende Unterstützung für alle HTML5 Input-Typen\n * - RTL-Unterstützung für mehrsprachige Anwendungen\n * \n * @layer components\n */\n\n@layer components {\n  /**\n   * Form Variables\n   * \n   * CSS-Variablen die das Formular-Styling steuern. \n   * Diese Variablen ermöglichen eine konsistente Darstellung und einfache Anpassung.\n   * Die Variablen basieren auf den globalen Design-Tokens aus tokens.css.\n   */\n  :root {\n    /* Grundlegende Formular-Variablen */\n    --form-gap: var(--spacing-4);        /* Abstand zwischen Formularelementen */\n    --form-padding: var(--spacing-4);    /* Innenabstand des Formulars */\n    --form-padding-y: var(--spacing-2);  /* Vertikaler Innenabstand */\n    --form-padding-x: var(--spacing-3);  /* Horizontaler Innenabstand */\n    --form-font-size: var(--font-size-base, 1rem); /* Basisschriftgröße */\n    --form-line-height: var(--line-height-base, 1.5); /* Basiszeilenhöhe */\n    --form-color: var(--color-text-primary); /* Textfarbe */\n    --form-background: var(--color-background); /* Hintergrundfarbe */\n    --form-border-color: var(--color-border, #e5e7eb); /* Rahmenfarbe */\n    --form-border-radius: var(--border-radius-md); /* Rahmenradius */\n    --form-box-shadow: var(--shadow-sm, 0 1px 2px 0 rgb(0 0 0 / 0.05)); /* Schatten */\n    --form-transition: all var(--transition-normal); /* Übergangsanimation */\n    \n    /* Input-spezifische Variablen */\n    --input-padding-y: var(--spacing-2);  /* Vertikaler Innenabstand für Inputs */\n    --input-padding-x: var(--spacing-3);  /* Horizontaler Innenabstand für Inputs */\n    --input-height: 2.5rem;               /* Höhe von Eingabefeldern */\n    --input-font-size: var(--font-size-base, 1rem); /* Schriftgröße von Eingabefeldern */\n    --input-bg: var(--color-background);  /* Hintergrundfarbe von Eingabefeldern */\n    --input-color: var(--color-text-primary); /* Textfarbe von Eingabefeldern */\n    --input-border-color: var(--color-border, #e5e7eb); /* Rahmenfarbe von Eingabefeldern */\n    --input-border-width: 1px;            /* Rahmenstärke von Eingabefeldern */\n    --input-border-radius: var(--border-radius-md); /* Rahmenradius von Eingabefeldern */\n    \n    /* Select-spezifische Variablen */\n    --select-padding-right: 2.5rem;       /* Rechter Innenabstand für Dropdown-Pfeil */\n    --select-indicator-padding: 1.75rem;  /* Abstand des Dropdown-Pfeils vom Rand */\n    --select-indicator-size: 0.75rem;     /* Größe des Dropdown-Pfeils */\n    --select-indicator-color: var(--color-text-secondary); /* Farbe des Dropdown-Pfeils */\n    \n    /* Checkbox/Radio-spezifische Variablen */\n    --control-indicator-size: 1.25rem;    /* Größe von Checkboxen und Radios */\n    --control-indicator-bg: var(--color-background); /* Hintergrundfarbe */\n    --control-indicator-border-color: var(--color-border, #e5e7eb); /* Rahmenfarbe */\n    --control-indicator-checked-bg: var(--color-primary-500); /* Hintergrundfarbe bei Auswahl */\n    --control-indicator-checked-border-color: var(--color-primary-500); /* Rahmenfarbe bei Auswahl */\n    --control-indicator-checked-color: var(--color-white, #fff); /* Symbol-Farbe bei Auswahl */\n    \n    /* Dark Mode Unterstützung */\n    color-scheme: light dark;\n\n    /* Dark Mode Fallback-Variablen */\n    --form-disabled-bg: var(--color-gray-100, #f3f4f6);\n    --form-group-text-bg: var(--color-gray-100, #f3f4f6);\n    --form-range-bg: var(--color-gray-200);\n    --form-file-button-bg: var(--color-gray-200);\n    --form-file-button-hover-bg: var(--color-gray-300, #d1d5db);\n    --form-button-bg: var(--color-gray-200);\n    --form-button-border: var(--color-gray-300, #d1d5db);\n    --form-button-hover-bg: var(--color-gray-300, #d1d5db);\n\n    @media (prefers-color-scheme: dark) {\n      --form-disabled-bg: var(--color-gray-800);\n      --form-group-text-bg: var(--color-gray-700);\n      --form-range-bg: var(--color-gray-700);\n      --form-file-button-bg: var(--color-gray-700);\n      --form-file-button-hover-bg: var(--color-gray-600);\n      --form-button-bg: var(--color-gray-700);\n      --form-button-border: var(--color-gray-600);\n      --form-button-hover-bg: var(--color-gray-600);\n    }\n  }\n\n  /**\n   * Modulare Komponenten-Hinweis\n   * \n   * Dieses Kommentar informiert über die verfügbaren spezialisierten Module,\n   * die erweiterte Funktionen für bestimmte Formularelemente bieten.\n   * Diese Module können zusammen mit dieser Basisdatei verwendet werden.\n   */\n\n  /**\n   * Hinweis zu modularen Komponenten:\n   * Einige Formularkomponenten sind auch als separate Module verfügbar:\n   * - input.module.css - Für Input-Felder mit erweiterten Funktionen und Varianten\n   * - select.module.css - Für Select-Felder mit Suchfunktion, Mehrfachauswahl und mehr\n   * - checkbox.module.css - Für Checkboxen mit verschiedenen Stilen und Animationen\n   * - radio.module.css - Für Radio-Buttons mit anpassbaren Stilen\n   * - textarea.module.css - Für mehrzeilige Texteingaben mit automatischer Größenanpassung\n   * - switch.module.css - Für Toggle-Schalter mit verschiedenen Größen und Stilen\n   * - file.module.css - Für Datei-Upload-Felder mit Drag & Drop und Vorschau\n   * - input-group.module.css - Für Eingabegruppen mit Buttons/Icons und mehr\n   * \n   * Die Module bieten umfangreichere Funktionen und Varianten, \n   * während diese globalen Klassen für einfache Formulare ausreichen.\n   */\n\n  /**\n   * Basis-Formularstile\n   * \n   * Definiert grundlegende Container und Layout-Optionen für Formulare.\n   * Verschiedene Klassen ermöglichen flexible Formularstrukturen.\n   */\n\n  /* Form Base - Vertikales Layout */\n  .form {\n    background-color: var(--form-background);\n    color: var(--form-color);\n    display: flex;\n    flex-direction: column;\n    gap: var(--form-gap);\n    padding: var(--form-padding);\n  }\n\n  /* Form Inline - Horizontales Layout */\n  .form-layout-inline {\n    align-items: flex-end;\n    display: flex;\n    flex-flow: row wrap;\n    gap: var(--spacing-4);\n  }\n\n  .form-layout-inline .form-group {\n    flex: 1 0 auto;\n    margin-bottom: 0%;\n    min-width: 25%0px;\n  }\n\n  /* Form Group - Gruppierung zusammengehöriger Elemente */\n  .form-group {\n    display: flex;\n    flex-direction: column;\n    gap: var(--space-2);\n    margin-bottom: var(--spacing-4);\n  }\n\n  .form-group:last-child {\n    margin-bottom: 0%;\n  }\n\n  /* Form Row - Mehrspaltiges Layout innerhalb eines Formulars */\n  .form-row {\n    display: flex;\n    flex-wrap: wrap;\n    gap: var(--spacing-4);\n  }\n\n  .form-row > * {\n    flex: 1;\n    min-width: 20%0px;\n  }\n\n  /**\n   * Formular-Labels und Hilfstexte\n   * \n   * Definiert Stile für Beschriftungen, Pflichtfeldmarkierungen und Hilfstexte.\n   * Diese Elemente verbessern die Benutzererfahrung und Barrierefreiheit.\n   */\n\n  /* Standard-Label */\n  .form-label {\n    color: var(--color-text-primary);\n    display: block;\n    font-size: var(--font-size-sm, 0.875rem);\n    font-weight: var(--font-weight-medium, 500);\n    margin-bottom: var(--spacing-1);\n  }\n\n  /* Pflichtfeld-Markierung mit Sternchen */\n  .form-label.required::after {\n    color: var(--color-error, #ef4444);\n    content: \"*\";\n    margin-left: var(--spacing-1);\n  }\n\n  [dir=\"rtl\"] .form-label.required::after {\n    margin-left: 0%;\n    margin-right: var(--spacing-1);\n  }\n\n  /* Hilfetext unterhalb von Formularfeldern */\n  .form-text {\n    color: var(--color-text-secondary);\n    display: block;\n    font-size: var(--font-size-sm, 0.875rem);\n    margin-top: var(--spacing-1);\n  }\n\n  /* Feedback für Validierung */\n  .feedback {\n    font-size: var(--font-size-xs);\n    margin-top: var(--space-1);\n  }\n\n  /**\n   * Basis-Eingabefelder\n   * \n   * .form-control ist die Hauptklasse für Eingabefelder wie Input, Select, Textarea.\n   * Definiert Grundstil und verschiedene Zustände (Fokus, Deaktiviert, etc.).\n   */\n\n  /* Basis-Eingabefeld */\n  .form-control {\n    background-color: var(--input-bg, #fff);\n    border: var(--input-border-width, 1px) solid var(--input-border-color, #d1d5db);\n    border-radius: var(--input-border-radius, 0.375rem);\n    box-shadow: var(--form-box-shadow);\n    color: var(--input-color);\n    display: block;\n    \n    /* Experimentelle Eigenschaft für natürlichere Feldgrößen */\n    field-sizing: content; /* Optionale Eigenschaft */\n    font-size: var(--input-font-size, 0.875rem);\n    line-height: var(--form-line-height, 1.5);\n    padding: var(--input-padding-y, 0.5rem) var(--input-padding-x, 0.75rem);\n    transition: var(--form-transition);\n    width: 100%;\n  }\n\n  /* Fokus-Zustand mit hervorgehobener Umrandung */\n  .form-control:focus {\n    border-color: var(--color-primary-500);\n    box-shadow: 0 0 0 0.2rem rgb(var(--color-primary-rgb), 0.25);\n    outline: none;\n  }\n\n  /* Platzhaltertext in Eingabefeldern */\n  .form-control::placeholder {\n    color: var(--color-text-tertiary);\n    opacity: 1;\n  }\n\n  /* Deaktivierte und schreibgeschützte Eingabefelder */\n  .form-control:disabled,\n  .form-control[readonly] {\n    background-color: var(--form-disabled-bg); /* Fallback */\n    cursor: not-allowed;\n    opacity: 0.7;\n  }\n\n  /**\n   * Formular-Validierung\n   * \n   * Definiert Stile für gültige und ungültige Eingabefelder,\n   * sowie die zugehörigen Feedback-Meldungen.\n   * Kann sowohl manuell als auch mit .was-validated aktiviert werden.\n   */\n\n  /* Gültiger Zustand */\n  .form-control.is-valid, .form-group.valid .form-control {\n    border-color: var(--color-success, #10b981);\n  }\n\n  .form-control.is-valid:focus, .form-group.valid .form-control:focus {\n    border-color: var(--color-success, #10b981);\n    box-shadow: 0 0 0 0.2rem rgb(var(--color-success-rgb), 0.25);\n  }\n\n  /* Ungültiger Zustand */\n  .form-control.is-invalid, .form-group.invalid .form-control {\n    border-color: var(--color-error, #ef4444);\n  }\n\n  .form-control.is-invalid:focus, .form-group.invalid .form-control:focus {\n    border-color: var(--color-error, #ef4444);\n    box-shadow: 0 0 0 0.2rem rgb(var(--color-error-rgb), 0.25);\n  }\n\n  /**\n   * Moderne Validierungsstile mit :has()\n   * \n   * Nutzt den modernen :has()-Selektor, um Validierungszustände\n   * auf Elternebene basierend auf dem Zustand der Kind-Inputs anzuzeigen.\n   * Bietet visuelle Indikatoren für Valid/Invalid ohne zusätzliche Klassen.\n   */\n  .form-group:has(.form-control:invalid) {\n    border-left: 4px solid var(--color-error, #ef4444);\n    padding-left: var(--spacing-3);\n  }\n\n  [dir=\"rtl\"] .form-group:has(.form-control:invalid) {\n    border-left: none;\n    border-right: 4px solid var(--color-error, #ef4444);\n    padding-left: 0%;\n    padding-right: var(--spacing-3);\n  }\n\n  .form-group:has(.form-control:valid:not(:placeholder-shown)) {\n    border-left: 4px solid var(--color-success, #10b981);\n    padding-left: var(--spacing-3);\n  }\n\n  [dir=\"rtl\"] .form-group:has(.form-control:valid:not(:placeholder-shown)) {\n    border-left: none;\n    border-right: 4px solid var(--color-success, #10b981);\n    padding-left: 0%;\n    padding-right: var(--spacing-3);\n  }\n\n  /* Visuelle Indikatoren neben den Eingabefeldern */\n  .form-group:has(.form-control:invalid) .form-label::after {\n    content: \"⚠️\";\n    display: inline-block;\n    margin-left: var(--spacing-2);\n    vertical-align: middle;\n  }\n  \n  [dir=\"rtl\"] .form-group:has(.form-control:invalid) .form-label::after {\n    margin-left: 0%;\n    margin-right: var(--spacing-2);\n  }\n\n  .form-group:has(.form-control:valid:not(:placeholder-shown)) .form-label::after {\n    color: var(--color-success, #10b981);\n    content: \"✓\";\n    display: inline-block;\n    margin-left: var(--spacing-2);\n    vertical-align: middle;\n  }\n  \n  [dir=\"rtl\"] .form-group:has(.form-control:valid:not(:placeholder-shown)) .form-label::after {\n    margin-left: 0%;\n    margin-right: var(--spacing-2);\n  }\n\n  /* Fallback für Browser ohne :has() Unterstützung */\n  @supports not (selector(:has(*))) {\n    .form-group.invalid {\n      border-left: 4px solid var(--color-error, #ef4444);\n      padding-left: var(--spacing-3);\n    }\n    \n    [dir=\"rtl\"] .form-group.invalid {\n      border-left: none;\n      border-right: 4px solid var(--color-error, #ef4444);\n      padding-left: 0%;\n      padding-right: var(--spacing-3);\n    }\n    \n    .form-group.valid {\n      border-left: 4px solid var(--color-success, #10b981);\n      padding-left: var(--spacing-3);\n    }\n    \n    [dir=\"rtl\"] .form-group.valid {\n      border-left: none;\n      border-right: 4px solid var(--color-success, #10b981);\n      padding-left: 0%;\n      padding-right: var(--spacing-3);\n    }\n  }\n\n  /* Feedback-Container für Validierungsmeldungen */\n  .valid-feedback {\n    color: var(--color-success, #10b981);\n    display: none;\n    font-size: var(--font-size-sm, 0.875rem);\n    margin-top: var(--spacing-1);\n    width: 100%;\n  }\n\n  .invalid-feedback {\n    color: var(--color-error, #ef4444);\n    display: none;\n    font-size: var(--font-size-sm, 0.875rem);\n    margin-top: var(--spacing-1);\n    width: 100%;\n  }\n\n  /* Feedback in der modularen Formularstruktur */\n  .form-group.valid .feedback {\n    color: var(--color-success, #10b981);\n  }\n  \n  .form-group.invalid .feedback {\n    color: var(--color-error, #ef4444);\n  }\n\n  /* Anzeigen von Feedback-Meldungen bei Validierung */\n  .was-validated .form-control:valid ~ .valid-feedback,\n  .was-validated .form-control:invalid ~ .invalid-feedback,\n  .form-control.is-valid ~ .valid-feedback,\n  .form-control.is-invalid ~ .invalid-feedback {\n    display: block;\n  }\n\n  /**\n   * Größenvarianten für Eingabefelder\n   * \n   * Bietet verschiedene Größen für Eingabefelder:\n   * - Small (sm): kompakte Größe für platzsparende Layouts\n   * - Large (lg): größere Variante für bessere Lesbarkeit oder Touch-Bedienung\n   */\n\n  /* Kleine Eingabefelder */\n  .form-control-sm {\n    border-radius: var(--border-radius-sm);\n    font-size: var(--font-size-sm, 0.875rem);\n    height: calc(var(--input-height, 2.5rem) * 0.85);\n    padding: var(--spacing-1) var(--spacing-2);\n  }\n\n  /* Große Eingabefelder */\n  .form-control-lg {\n    border-radius: var(--border-radius-lg);\n    font-size: var(--font-size-lg);\n    height: calc(var(--input-height, 2.5rem) * 1.15);\n    padding: var(--spacing-3) var(--spacing-4);\n  }\n\n  /**\n   * Select-Felder\n   * \n   * Angepasste Styles für Dropdown-Auswahlfelder mit eigenem Dropdown-Pfeil.\n   * Basiert auf .form-control mit zusätzlichen Select-spezifischen Anpassungen.\n   */\n\n  /* Basis-Select mit angepasstem Dropdown-Pfeil */\n  .form-select {\n    appearance: none;\n    background-image: url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='none' stroke='%23343a40' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M2 5l6 6 6-6'/%3E%3C/svg%3E\");\n    background-position: right var(--input-padding-x, 0.75rem) center;\n    background-repeat: no-repeat;\n    background-size: var(--select-indicator-size);\n    display: block;\n    padding-right: var(--select-indicator-padding);\n    width: 100%;\n  }\n\n  [dir=\"rtl\"] .form-select {\n    background-position: left var(--input-padding-x, 0.75rem) center;\n    padding-left: var(--select-indicator-padding);\n    padding-right: var(--input-padding-x, 0.75rem);\n  }\n\n  /* Kleine Select-Variante */\n  .form-select-sm {\n    background-position: right var(--spacing-2) center;\n    padding-right: calc(var(--select-indicator-padding) * 0.85);\n  }\n\n  /* Große Select-Variante */\n  .form-select-lg {\n    background-position: right var(--spacing-4) center;\n    padding-right: calc(var(--select-indicator-padding) * 1.15);\n  }\n\n  /**\n   * Textarea-Felder\n   * \n   * Mehrzeilige Textfelder mit angepassten Eigenschaften.\n   * Basiert auf .form-control mit spezifischen Textarea-Anpassungen.\n   */\n\n  /* Mehrzeiliges Textfeld mit vertikaler Größenanpassung */\n  textarea.form-control {\n    min-height: 6rem;\n    resize: vertical;\n  }\n\n  /**\n   * Checkboxen und Radio-Buttons\n   * \n   * Angepasstes Styling für Checkboxen und Radio-Buttons mit SVG-Icons.\n   * Ermöglicht konsistentes Aussehen über verschiedene Browser hinweg.\n   */\n\n  /* Container für Checkbox/Radio */\n  .form-check {\n    display: block;\n    margin-bottom: var(--spacing-2);\n    min-height: var(--control-indicator-size, 1rem);\n    padding-left: calc(var(--control-indicator-size, 1rem) + var(--spacing-2));\n    position: relative;\n  }\n\n  .form-check:last-child {\n    margin-bottom: 0%;\n  }\n\n  /* Inline-Variante für horizontale Anordnung */\n  .form-check-inline {\n    align-items: center;\n    display: inline-flex;\n    margin-right: var(--spacing-4);\n  }\n\n  /* Checkbox/Radio Input-Element */\n  .form-check-input {\n    appearance: none;\n    background-color: var(--control-indicator-bg);\n    border: var(--input-border-width, 1px) solid var(--control-indicator-border-color);\n    height: var(--control-indicator-size, 1rem);\n    margin-left: calc(-1 * (var(--control-indicator-size, 1rem) + var(--spacing-2)));\n    margin-top: calc((var(--form-line-height, 1.5) * var(--form-font-size) - var(--control-indicator-size, 1rem)) / 2);\n    position: absolute;\n    print-color-adjust: exact;\n    transition: var(--form-transition);\n    width: var(--control-indicator-size, 1rem);\n  }\n\n  [dir=\"rtl\"] .form-check-input {\n    margin-left: 0%;\n    margin-right: calc(-1 * (var(--control-indicator-size, 1rem) + var(--spacing-2)));\n  }\n\n  /* Checkbox-spezifische Styles */\n  .form-check-input[type=\"checkbox\"] {\n    border-radius: var(--border-radius-sm);\n  }\n\n  /* Radio-Button-spezifische Styles */\n  .form-check-input[type=\"radio\"] {\n    border-radius: var(--radius-full, 9999px);\n  }\n\n  /* Aktiver Zustand (bei Mausklick) */\n  .form-check-input:active {\n    filter: brightness(90);\n  }\n\n  /* Fokus-Zustand */\n  .form-check-input:focus {\n    border-color: var(--color-primary-500);\n    box-shadow: 0 0 0 0.2rem rgb(var(--color-primary-rgb), 0.25);\n    outline: 0;\n  }\n\n  /* Ausgewählter Zustand */\n  .form-check-input:checked {\n    background-color: var(--control-indicator-checked-bg);\n    border-color: var(--control-indicator-checked-border-color);\n  }\n\n  /* SVG-Icon für ausgewählte Checkbox */\n  .form-check-input:checked[type=\"checkbox\"] {\n    background-image: url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='white' d='M13.854 3.646a.5.5 0 0 1 0 .708l-7 7a.5.5 0 0 1-.708 0l-3.5-3.5a.5.5 0 1 1 .708-.708L6.5 10.293l6.646-6.647a.5.5 0 0 1 .708 0z'/%3E%3C/svg%3E\");\n    background-position: center;\n    background-repeat: no-repeat;\n    background-size: var(--select-indicator-size);\n  }\n\n  /* SVG-Icon für ausgewählten Radio-Button */\n  .form-check-input:checked[type=\"radio\"] {\n    background-image: url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Ccircle r='4' fill='white' cx='8' cy='8'/%3E%3C/svg%3E\");\n    background-position: center;\n    background-repeat: no-repeat;\n    background-size: var(--select-indicator-size);\n  }\n\n  /* Deaktivierter Zustand */\n  .form-check-input:disabled {\n    filter: none;\n    opacity: var(--opacity-50);\n    pointer-events: none;\n  }\n\n  .form-check-input:disabled ~ .form-check-label {\n    cursor: default;\n    opacity: var(--opacity-50);\n  }\n\n  /* Beschriftung für Checkbox/Radio */\n  .form-check-label {\n    cursor: pointer;\n    display: inline-block;\n  }\n\n  /**\n   * Toggle-Schalter (Switch)\n   * \n   * Moderne Alternative zu Checkboxen für Ein/Aus-Optionen.\n   * Basiert auf .form-check, mit angepasstem Styling für Schalteroptik.\n   */\n\n  /* Container für Toggle-Schalter */\n  .form-switch {\n    padding-left: calc(var(--control-indicator-size, 1rem) * 2);\n  }\n\n  [dir=\"rtl\"] .form-switch {\n    padding-left: 0%;\n    padding-right: calc(var(--control-indicator-size, 1rem) * 2);\n  }\n\n  /* Toggle-Schalter-Input mit Schieberegler */\n  .form-switch .form-check-input {\n    background-image: url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Ccircle r='3' fill='rgb(0 0 0 / 0.25)' cx='3' cy='8'/%3E%3C/svg%3E\");\n    background-position: left center;\n    background-repeat: no-repeat;\n    border-radius: calc(var(--control-indicator-size, 1rem) * 0.85);\n    height: calc(var(--control-indicator-size, 1rem) * 0.85);\n    transition: background-position var(--transition-normal);\n    width: calc(var(--control-indicator-size, 1rem) * 1.75);\n  }\n\n  /* Ausgewählter Zustand des Toggle-Schalters */\n  .form-switch .form-check-input:checked {\n    background-image: url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Ccircle r='3' fill='%23fff' cx='13' cy='8'/%3E%3C/svg%3E\");\n    background-position: right center;\n  }\n\n  /**\n   * Datei-Upload\n   * \n   * Angepasste Darstellung für Datei-Upload-Felder mit benutzerdefiniertem Styling.\n   */\n\n  /* Container für Datei-Upload */\n  .form-file {\n    position: relative;\n  }\n\n  /* Verstecktes natürliches File-Input */\n  .form-file-input {\n    height: var(--input-height, 2.5rem);\n    margin: 0;\n    opacity: 0%;\n    position: relative;\n    width: 100%;\n    z-index: 2;\n  }\n\n  /* Sichtbares Label für Datei-Upload */\n  .form-file-label {\n    background-color: var(--input-bg, #fff);\n    border: var(--input-border-width, 1px) solid var(--input-border-color, #d1d5db);\n    border-radius: var(--input-border-radius, 0.375rem);\n    display: flex;\n    height: var(--input-height, 2.5rem);\n    left: 0%;\n    position: absolute;\n    right: 0%;\n    top: 0%;\n    z-index: 1;\n  }\n\n  /* Textbereich für Dateipfad-Anzeige */\n  .form-file-text {\n    background-color: var(--input-bg, #fff);\n    border-right: none;\n    color: var(--color-text-tertiary);\n    flex: 1;\n    overflow: hidden;\n    padding: var(--input-padding-y, 0.5rem) var(--input-padding-x, 0.75rem);\n    text-overflow: ellipsis;\n    white-space: nowrap;\n  }\n\n  [dir=\"rtl\"] .form-file-text {\n    border-left: none;\n    border-right: initial;\n  }\n\n  /* Button für Dateiauswahl */\n  .form-file-button {\n    background-color: var(--color-gray-200);\n    border-bottom-right-radius: var(--input-border-radius, 0.375rem);\n    border-left: inherit;\n    border-top-right-radius: var(--input-border-radius, 0.375rem);\n    color: var(--color-text-primary);\n    display: block;\n    padding: var(--input-padding-y, 0.5rem) var(--input-padding-x, 0.75rem);\n    z-index: 3;\n  }\n\n  [dir=\"rtl\"] .form-file-button {\n    border-left: none;\n    border-radius: var(--input-border-radius, 0.375rem) 0 0 var(--input-border-radius, 0.375rem);\n    border-right: inherit;\n  }\n\n  /**\n   * Formular-Aktionen\n   * \n   * Container für Formular-Schaltflächen (Absenden, Abbrechen, etc.)\n   * Mit flexiblen Layout-Optionen für verschiedene Anordnungen.\n   */\n\n  /* Container für Formular-Aktionsschaltflächen */\n  .form-actions {\n    display: flex;\n    gap: var(--spacing-3);\n    justify-content: flex-end;\n    margin-top: var(--spacing-6);\n  }\n\n  [dir=\"rtl\"] .form-actions {\n    justify-content: flex-start;\n  }\n\n  .form-actions > * {\n    flex: 0 0 auto;\n  }\n\n  /**\n   * Input-Gruppen\n   * \n   * Ermöglicht die Kombination von Eingabefeldern mit Text oder Buttons.\n   * Nützlich für Währungsangaben, Suchfelder mit Buttons, etc.\n   */\n\n  /**\n   * Input Groups - Enhanced Version\n   * \n   * Gruppierte Eingabeelemente für zusammengehörende Formularfelder.\n   * Input-Groups ermöglichen die Kombination von Eingabefeldern mit Addons, Buttons oder Labels.\n   * \n   * Grundlegende Verwendung:\n   * <div class=\"input-group\">\n   *   <span class=\"addon\">https://</span>\n   *   <input type=\"text\" class=\"input\" placeholder=\"example.com\">\n   * </div>\n   * \n   * Mit Button:\n   * <div class=\"input-group\">\n   *   <input type=\"text\" class=\"input\" placeholder=\"Suchen...\">\n   *   <button class=\"button\">Suchen</button>\n   * </div>\n   * \n   * Mit Icon:\n   * <div class=\"input-group\">\n   *   <span class=\"icon\"><!-- Icon hier --></span>\n   *   <input type=\"text\" class=\"input\" placeholder=\"Benutzername\">\n   * </div>\n   * \n   * Größenvarianten:\n   * <div class=\"input-group sm\">...</div>\n   * <div class=\"input-group md\">...</div>\n   * <div class=\"input-group lg\">...</div>\n   */\n\n  /* Container für Input-Gruppe */\n  .input-group {\n    align-items: stretch;\n    border: var(--input-border-width, 1px) solid var(--color-border, var(--color-neutral-300, #d1d5db));\n    border-radius: var(--radius-input, var(--radius-md, 0.375rem));\n    display: flex;\n    overflow: hidden;\n    width: 100%;\n    \n    /* Allgemeine Styles für alle Kinder-Elemente */\n    > * {\n      border: none;\n      font-size: var(--text-sm, var(--font-size-sm, 0.875rem));\n      outline: none;\n      padding: var(--space-2, 0.5rem) var(--space-3, 0.75rem);\n    }\n    \n    /* Addon-Elemente */\n    .addon {\n      align-items: center;\n      background-color: var(--color-neutral-100, #f3f4f6);\n      color: var(--color-neutral-700, #374151);\n      display: flex;\n      font-size: var(--text-sm, var(--font-size-sm, 0.875rem));\n      justify-content: center;\n      padding: 0 var(--space-3, 0.75rem);\n      white-space: nowrap;\n    }\n    \n    /* Icon-Elemente */\n    .icon {\n      align-items: center;\n      background-color: transparent;\n      color: var(--color-neutral-500, #6b7280);\n      display: flex;\n      justify-content: center;\n      width: 2.5rem;\n      \n      &:hover {\n        color: var(--color-neutral-700, #374151);\n        transition: color var(--transition-duration-fast, 150ms) var(--transition-timing-ease, ease);\n      }\n    }\n    \n    /* Input innerhalb der Gruppe */\n    .input {\n      background-color: var(--color-background, #fff);\n      color: var(--color-text, var(--color-neutral-900, #111827));\n      flex: 1;\n      height: var(--input-height, 2.5rem);\n      min-width: 0%;\n      padding: var(--input-padding, var(--space-3, 0.75rem));\n      \n      &:focus {\n        box-shadow: none;\n      }\n      \n      &::placeholder {\n        color: var(--color-neutral-400, #9ca3af);\n      }\n    }\n    \n    /* Select innerhalb der Gruppe */\n    .select {\n      background-color: var(--color-background, #fff);\n      color: var(--color-text, var(--color-neutral-900, #111827));\n      flex: 1;\n      height: var(--input-height, 2.5rem);\n      min-width: 0%;\n      padding: var(--input-padding, var(--space-3, 0.75rem));\n    }\n    \n    /* Button innerhalb der Gruppe */\n    .button {\n      align-items: center;\n      border-radius: 0;\n      display: flex;\n      justify-content: center;\n      padding: var(--space-2, 0.5rem) var(--space-4, 1rem);\n      \n      &:first-child {\n        border-bottom-left-radius: var(--radius-input, var(--radius-md, 0.375rem));\n        border-top-left-radius: var(--radius-input, var(--radius-md, 0.375rem));\n      }\n      \n      &:last-child {\n        border-bottom-right-radius: var(--radius-input, var(--radius-md, 0.375rem));\n        border-top-right-radius: var(--radius-input, var(--radius-md, 0.375rem));\n      }\n    }\n    \n    /* Größenvarianten */\n    &.sm {\n      > * {\n        font-size: var(--text-xs, var(--font-size-xs, 0.75rem));\n        padding: var(--space-1, 0.25rem) var(--space-2, 0.5rem);\n      }\n      \n      .input, .select {\n        height: 2rem;\n        padding: var(--space-2, 0.5rem);\n      }\n      \n      .button {\n        padding: var(--space-1, 0.25rem) var(--space-3, 0.75rem);\n      }\n    }\n    \n    &.lg {\n      > * {\n        font-size: var(--text-base, var(--font-size-base, 1rem));\n        padding: var(--space-3, 0.75rem) var(--space-4, 1rem);\n      }\n      \n      .input, .select {\n        height: 3rem;\n        padding: var(--space-4, 1rem);\n      }\n      \n      .button {\n        padding: var(--space-3, 0.75rem) var(--space-5, 1.25rem);\n      }\n    }\n    \n    /* Zustände */\n    &:focus-within {\n      border-color: var(--color-primary-500, #3b82f6);\n      box-shadow: 0 0 0 2px var(--color-primary-200, #bfdbfe);\n    }\n    \n    /* Error State */\n    &.error {\n      border-color: var(--color-error-500, #ef4444);\n      \n      &:focus-within {\n        border-color: var(--color-error-500, #ef4444);\n        box-shadow: 0 0 0 2px var(--color-error-200, #fecaca);\n      }\n    }\n    \n    /* Success State */\n    &.success {\n      border-color: var(--color-success-500, #10b981);\n      \n      &:focus-within {\n        border-color: var(--color-success-500, #10b981);\n        box-shadow: 0 0 0 2px var(--color-success-200, #a7f3d0);\n      }\n    }\n    \n    /* Warning State */\n    &.warning {\n      border-color: var(--color-warning-500, #f59e0b);\n      \n      &:focus-within {\n        border-color: var(--color-warning-500, #f59e0b);\n        box-shadow: 0 0 0 2px var(--color-warning-200, #fde68a);\n      }\n    }\n    \n    /* Disabled State */\n    &.disabled {\n      background-color: var(--color-neutral-100, #f3f4f6);\n      border-color: var(--color-neutral-200, #e5e7eb);\n      color: var(--color-neutral-400, #9ca3af);\n      cursor: not-allowed;\n      \n      .input, .select, .button {\n        background-color: transparent;\n        color: var(--color-neutral-400, #9ca3af);\n        cursor: not-allowed;\n      }\n    }\n  }\n\n  /* Legacy compatibility for existing .input-group-text */\n  .input-group-text {\n    align-items: center;\n    background-color: var(--color-neutral-100, #f3f4f6);\n    color: var(--color-neutral-700, #374151);\n    display: flex;\n    font-size: var(--text-sm, var(--font-size-sm, 0.875rem));\n    justify-content: center;\n    padding: 0 var(--space-3, 0.75rem);\n    white-space: nowrap;\n  }\n\n  /**\n   * Horizontales Layout für Formulare\n   *\n   * Ermöglicht eine horizontale Anordnung von Labels und Eingabefeldern.\n   */\n  \n  /* Horizontales Layout */\n  .form.horizontal .form-group,\n  .form-horizontal .form-group {\n    align-items: center;\n    flex-direction: row;\n  }\n  \n  .form.horizontal .form-label,\n  .form-horizontal .form-label {\n    margin-bottom: 0%;\n    margin-right: var(--space-4);\n    width: 30%;\n  }\n  \n  [dir=\"rtl\"] .form.horizontal .form-label,\n  [dir=\"rtl\"] .form-horizontal .form-label {\n    margin-left: var(--space-4);\n    margin-right: 0%;\n  }\n  \n  .form.horizontal .form-control {\n    flex: 1;\n  }\n  \n  .form.horizontal .form-text, \n  .form.horizontal .feedback,\n  .form-horizontal .form-text,\n  .form-horizontal .valid-feedback,\n  .form-horizontal .invalid-feedback {\n    margin-left: calc(30 + var(--space-4));\n  }\n  \n  [dir=\"rtl\"] .form.horizontal .form-text, \n  [dir=\"rtl\"] .form.horizontal .feedback,\n  [dir=\"rtl\"] .form-horizontal .form-text,\n  [dir=\"rtl\"] .form-horizontal .valid-feedback,\n  [dir=\"rtl\"] .form-horizontal .invalid-feedback {\n    margin-left: 0%;\n    margin-right: calc(30 + var(--space-4));\n  }\n\n  /**\n   * Spezifische Input-Typen\n   * \n   * Angepasste Styles für verschiedene HTML5 Input-Typen.\n   * Stellt sicher, dass alle Input-Typen ein konsistentes und ansprechendes Aussehen haben.\n   */\n\n  /* Color-Picker Input */\n  input[type=\"color\"] {\n    cursor: pointer;\n    min-height: 2.5rem;\n    padding: 0.25rem;\n  }\n\n  input[type=\"color\"]::-webkit-color-swatch-wrapper {\n    padding: 0;\n  }\n  \n  input[type=\"color\"]::-webkit-color-swatch {\n    border: none;\n    border-radius: var(--border-radius-sm);\n  }\n\n  /* Range Slider */\n  input[type=\"range\"] {\n    appearance: none;\n    background-color: var(--form-range-bg); /* Fallback */\n    border-radius: 1rem;\n    height: 0%.5rem;\n    margin: 0.5rem 0;\n    outline: none;\n    width: 100%;\n  }\n\n  input[type=\"range\"]::-webkit-slider-thumb {\n    appearance: none;\n    background-color: var(--color-primary-500);\n    border: none;\n    border-radius: var(--radius-full, 9999px);\n    cursor: pointer;\n    height: 1%.25rem;\n    width: 1%.25rem;\n  }\n\n  input[type=\"range\"]::-moz-range-thumb {\n    background-color: var(--color-primary-500);\n    border: none;\n    border-radius: var(--radius-full, 9999px);\n    cursor: pointer;\n    height: 1%.25rem;\n    width: 1%.25rem;\n  }\n\n  input[type=\"range\"]:focus::-webkit-slider-thumb {\n    box-shadow: 0 0 0 0.2rem rgb(var(--color-primary-rgb), 0.25);\n  }\n\n  input[type=\"range\"]:focus::-moz-range-thumb {\n    box-shadow: 0 0 0 0.2rem rgb(var(--color-primary-rgb), 0.25);\n  }\n\n  /* Date, Time, DateTime Inputs */\n  input[type=\"date\"],\n  input[type=\"datetime-local\"],\n  input[type=\"month\"],\n  input[type=\"time\"],\n  input[type=\"week\"] {\n    padding-right: 0%.5rem;\n  }\n\n  /* Search Input */\n  input[type=\"search\"] {\n    appearance: none;\n  }\n\n  input[type=\"search\"]::-webkit-search-cancel-button {\n    appearance: none;\n    background-image: url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%236B7280'%3E%3Cpath d='M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z'/%3E%3C/svg%3E\");\n    cursor: pointer;\n    height: 1rem;\n    margin-left: 0%.5rem;\n    width: 1rem;\n  }\n\n  /* File Input - Erweitert die bestehende form-file Klasse */\n  input[type=\"file\"] {\n    cursor: pointer;\n  }\n\n  input[type=\"file\"]::file-selector-button {\n    background-color: var(--form-file-button-bg); /* Fallback */\n    border: none;\n    border-radius: var(--border-radius-sm);\n    color: var(--color-text-primary);\n    cursor: pointer;\n    margin-right: 1rem;\n    padding: 0.25rem 0.75rem;\n    transition: background-color 0.2s;\n  }\n\n  [dir=\"rtl\"] input[type=\"file\"]::file-selector-button {\n    margin-left: 1rem;\n    margin-right: 0%;\n  }\n\n  /* URL, Email, Tel und andere Text-basierte Inputs */\n  input[type=\"url\"],\n  input[type=\"email\"],\n  input[type=\"tel\"],\n  input[type=\"password\"],\n  input[type=\"text\"],\n  input[type=\"number\"] {\n    /* Diese erben bereits die Basis-Stile von .form-control */\n  }\n\n  /* Number Input Spinner */\n  input[type=\"number\"]::-webkit-inner-spin-button,\n  input[type=\"number\"]::-webkit-outer-spin-button {\n    height: auto;\n    margin-left: 0%.5rem;\n    opacity: 1;\n  }\n\n  /* Button-artige Inputs */\n  input[type=\"button\"],\n  input[type=\"submit\"],\n  input[type=\"reset\"] {\n    border-radius: var(--input-border-radius, 0.375rem);\n    cursor: pointer;\n    display: inline-block;\n    font-weight: var(--font-weight-medium, 500);\n    padding: var(--input-padding-y, 0.5rem) var(--input-padding-x, 0.75rem);\n    text-align: center;\n    transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;\n    user-select: none;\n    vertical-align: middle;\n    white-space: nowrap;\n  }\n\n  input[type=\"button\"],\n  input[type=\"reset\"] {\n    background-color: var(--form-button-bg); /* Fallback */\n    border: 1px solid var(--form-button-border); /* Fallback */\n    color: var(--color-text-primary);\n  }\n\n  input[type=\"button\"]:hover,\n  input[type=\"reset\"]:hover {\n    background-color: var(--form-button-hover-bg); /* Fallback */\n  }\n\n  input[type=\"submit\"] {\n    background-color: var(--color-primary-500);\n    border: 1px solid var(--color-primary-500);\n    color: var(--color-white, #fff);\n  }\n\n  input[type=\"submit\"]:hover {\n    background-color: var(--color-primary-600, #2563eb);\n    border-color: var(--color-primary-600, #2563eb);\n  }\n\n  /* Image Input */\n  input[type=\"image\"] {\n    background: none;\n    border: none;\n    cursor: pointer;\n    padding: 0;\n  }\n\n  /* Hidden Input */\n  input[type=\"hidden\"] {\n    display: none;\n  }\n\n  /* Input Placeholder Styling */\n  input::placeholder {\n    color: var(--color-text-tertiary);\n    opacity: 0.7;\n  }\n\n  /* Fokus-Zustand für alle Input-Typen */\n  input:focus {\n    border-color: var(--color-primary-500);\n    box-shadow: 0 0 0 0.2rem rgb(var(--color-primary-rgb), 0.25);\n    outline: none;\n  }\n}\n\n/**\n * Form-Komponente - Legacy Unterstützung\n * \n * Unterstützt die bestehende modulare Struktur der .form-Komponente.\n * Diese Layer-Definition stellt die Kompatibilität mit bestehenden Komponenten sicher.\n */\n@layer form {\n  /* Vorhandene Stile aus components/form.css werden automatisch durch die oben definierten Klassen unterstützt */\n} \n\n/**\n * Formular-Utilities\n * \n * Stellt Utility-Klassen für Formulare bereit, die verwendet werden können,\n * um das Verhalten und Aussehen von Formularen anzupassen.\n */\n@layer utilities {\n  /**\n   * Inline Layout für Checkboxen/Radios\n   *\n   * Ermöglicht eine horizontale Anordnung von Checkboxen und Radios.\n   */\n  .form-inline-controls,\n  .form-inline,\n  .inline {\n    align-items: center;\n    flex-direction: row;\n    gap: var(--space-3);\n  }\n  \n  .form-inline-controls .form-label,\n  .form-inline .form-label,\n  .inline .form-label {\n    margin-bottom: 0%;\n    margin-left: var(--space-2);\n  }\n  \n  [dir=\"rtl\"] .form-inline-controls .form-label,\n  [dir=\"rtl\"] .form-inline .form-label,\n  [dir=\"rtl\"] .inline .form-label {\n    margin-left: 0%;\n    margin-right: var(--space-2);\n  }\n\n  /**\n   * Gestapeltes Layout (Stacked)\n   *\n   * Explizites vertikales Layout für Formulare, bei dem Labels über den Eingabefeldern stehen.\n   * Dies ist das Standardverhalten, aber diese Klasse kann für Konsistenz verwendet werden.\n   */\n  .form-stacked .form-group {\n    display: flex;\n    flex-direction: column;\n    gap: var(--space-2);\n  }\n  \n  .form-stacked .form-label {\n    margin-bottom: var(--spacing-1);\n    width: 100%;\n  }\n  \n  .form-stacked .form-control {\n    width: 100%;\n  }\n  \n  .form-stacked .form-text,\n  .form-stacked .feedback {\n    margin-top: var(--spacing-1);\n  }\n\n  /**\n   * Kompaktes Layout\n   *\n   * Reduziert Abstände für platzsparende Formulare.\n   */\n  .form.compact, .form-compact {\n    gap: var(--space-2);\n  }\n  \n  .form.compact .form-group,\n  .form-compact .form-group {\n    gap: var(--space-1);\n  }\n\n  /**\n   * Flüssige Größenanpassung mit interpolate-size: allow-keywords\n   *\n   * Ermöglicht Formulare mit flüssiger Größenanpassung basierend auf CSS-Schlüsselwörtern.\n   */\n  .form.fluid {\n    /* Nutzt CSS-Schlüsselwörter für Größen - funktioniert mit interpolate-size: allow-keywords */\n    font-size: medium; /* Basis-Größe für Skalierungsfaktor */\n    gap: 1em;\n    \n    .form-group {\n      gap: 00.5em;\n    }\n    \n    .form-label {\n      font-size: 0.875em;\n      margin-bottom: 0%.25em;\n    }\n    \n    .form-text,\n    .feedback {\n      font-size: 0.75em;\n      margin-top: 0%.25em;\n    }\n    \n    .form-actions {\n      gap: 0.75em;\n      margin-top: 00%.5em;\n    }\n    \n    /* Größenvarianten mit CSS-Schlüsselwörtern */\n    &.small {\n      font-size: small;\n    }\n    \n    &.medium {\n      font-size: medium;\n    }\n    \n    &.large {\n      font-size: large;\n    }\n    \n    &.x-large {\n      font-size: x-large;\n    }\n    \n    /* Horizontales Layout für flüssige Formen */\n    &.horizontal {\n      .form-group {\n        .form-label {\n          margin-right: 1em;\n        }\n        \n        .form-text,\n        .feedback {\n          margin-left: calc(30 + 1em);\n        }\n      }\n    }\n  }\n  \n  /**\n   * Container-adaptive Größenanpassung\n   *\n   * Ermöglicht Formulare, die sich automatisch an die Container-Größe anpassen.\n   */\n  .form.adaptive {\n    container-type: inline-size;\n    gap: clamp(var(--space-2), 1cqi, var(--space-6));\n    \n    .form-group {\n      gap: clamp(var(--space-1), 0.5cqi, var(--space-3));\n    }\n    \n    .form-label {\n      font-size: clamp(var(--font-size-xs), 1.5cqi, var(--font-size-base, 1rem));\n    }\n    \n    .form-text,\n    .feedback {\n      font-size: clamp(var(--font-size-xs), 1cqi, var(--font-size-sm, 0.875rem));\n    }\n    \n    .form-actions {\n      gap: clamp(var(--space-2), 0.75cqi, var(--space-4));\n    }\n    \n    @container (min-width: 400px) {\n      &:not(.horizontal) .form-group {\n        max-width: 80%;\n      }\n    }\n    \n    @container (min-width: 600px) {\n      &.horizontal .form-group {\n        flex-direction: row;\n        \n        .form-label {\n          margin-bottom: 0%;\n          width: 2%5%;\n        }\n      }\n    }\n  }\n\n  /**\n   * Barrierefreiheit\n   * \n   * Verbesserte Barrierefreiheit für Nutzer mit speziellen Bedürfnissen.\n   * Beachtet Einstellungen wie reduzierte Bewegung.\n   */\n  @container root (prefers-reduced-motion: reduce) {\n    .form-element,\n    .form-input,\n    .form-select,\n    .form-textarea,\n    .form-checkbox,\n    .form-radio,\n    .form-switch,\n    .form-range,\n    .form-field,\n    .form-label,\n    .form-feedback,\n    button,\n    .button,\n    .input-animate-label .input-label,\n    .form-element-validated::before,\n    .form-element-validated::after,\n    .input-float-label .input-label {\n      animation: none !important;\n      transform: none !important;\n      transition: none !important;\n    }\n    \n    .input-spinner,\n    .form-loading,\n    .submit-processing,\n    .form-validation-icon {\n      display: none !important;\n    }\n  }\n\n  /**\n   * Responsive Anpassungen\n   * \n   * Spezifische Anpassungen für verschiedene Bildschirmgrößen.\n   * Optimiert die Formulardarstellung auf mobilen Geräten.\n   */\n  @container root (width <= 768px) {\n    .form-field {\n      margin-block-end: 1rem;\n    }\n    \n    .input-group {\n      flex-direction: column;\n    }\n    \n    .input-group > * + * {\n      margin-block-start: 0.5rem;\n      margin-inline-start: 0;\n    }\n    \n    .checkbox-group, .radio-group {\n      align-items: flex-start;\n      flex-direction: column;\n    }\n    \n    .form-actions {\n      flex-direction: column;\n    }\n    \n    .form-actions > * + * {\n      margin-block-start: 0.75rem;\n      margin-inline-start: 0;\n    }\n    \n    .form.horizontal .form-group,\n    .form-horizontal .form-group {\n      align-items: flex-start;\n      flex-direction: column;\n    }\n    \n    .form.horizontal .form-label,\n    .form-horizontal .form-label {\n      margin-bottom: var(--spacing-1);\n      margin-right: 0%;\n      width: 100%;\n    }\n    \n    .form.horizontal .form-text, \n    .form.horizontal .feedback,\n    .form-horizontal .form-text,\n    .form-horizontal .valid-feedback,\n    .form-horizontal .invalid-feedback {\n      margin-left: 0%;\n    }\n  }\n\n  /**\n   * Unterstützung für flüssige Größenanpassung bei speziellen Input-Typen\n   */\n  .form.fluid input[type=\"color\"],\n  .form.fluid input[type=\"range\"],\n  .form.fluid input[type=\"file\"]::file-selector-button {\n    scale: 1;\n    transform-origin: left center;\n  }\n\n  .form.fluid.small input[type=\"color\"],\n  .form.fluid.small input[type=\"range\"],\n  .form.fluid.small input[type=\"file\"]::file-selector-button {\n    scale: 0.85;\n  }\n\n  .form.fluid.large input[type=\"color\"],\n  .form.fluid.large input[type=\"range\"],\n  .form.fluid.large input[type=\"file\"]::file-selector-button {\n    scale: 1.15;\n  }\n\n  .form.fluid.x-large input[type=\"color\"],\n  .form.fluid.x-large input[type=\"range\"],\n  .form.fluid.x-large input[type=\"file\"]::file-selector-button {\n    scale: 1.3;\n  }\n\n  /* Container-adaptive Anpassungen für spezielle Input-Typen */\n  .form.adaptive input[type=\"range\"] {\n    height: clamp(0.4rem, 0.4cqi, 0.6rem);\n  }\n\n  .form.adaptive input[type=\"range\"]::-webkit-slider-thumb {\n    height: clamp(1rem, 1.25cqi, 1.5rem);\n    width: clamp(1rem, 1.25cqi, 1.5rem);\n  }\n\n  .form.adaptive input[type=\"range\"]::-moz-range-thumb {\n    height: clamp(1rem, 1.25cqi, 1.5rem);\n    width: clamp(1rem, 1.25cqi, 1.5rem);\n  }\n\n  /**\n   * Search Components\n   * \n   * Search components allow users to find content by entering queries and \n   * displaying relevant results. They can include features like autocomplete,\n   * suggestions, and advanced filtering options.\n   * \n   * Accessibility:\n   * - Use appropriate roles (e.g., combobox, listbox)\n   * - Implement keyboard navigation for results\n   * - Announce search result count\n   * - Provide clear focus states for all interactive elements\n   */\n\n  /* Search container */\n  .search {\n    position: relative;\n    width: 100%;\n  }\n  \n  /* Search input wrapper */\n  .search .input-wrapper {\n    align-items: center;\n    display: flex;\n    position: relative;\n  }\n  \n  /* Search input */\n  .search .input {\n    background-color: var(--color-neutral-50, #f9fafb);\n    border: 1px solid var(--color-neutral-200, #e5e7eb);\n    border-radius: var(--radius-md, 0.375rem);\n    color: var(--color-neutral-900, #111827);\n    font-size: var(--text-sm, 0.875rem);\n    line-height: 1.5;\n    padding: var(--space-2, 0.5rem) var(--space-3, 0.75rem);\n    padding-left: var(--space-9, 2.25rem);\n    transition: border-color 0.2s, box-shadow 0.2s;\n    width: 100%;\n  }\n  \n  .search .input:focus {\n    border-color: var(--color-primary-300, #93c5fd);\n    box-shadow: 0 0 0 3px var(--color-primary-100, #dbeafe);\n    outline: none;\n  }\n  \n  /* Search icon */\n  .search .icon {\n    color: var(--color-neutral-400, #9ca3af);\n    height: 1.25rem;\n    left: var(--space-3, 0.75rem);\n    pointer-events: none;\n    position: absolute;\n    top: 50%;\n    transform: translateY(-50%);\n    width: 1.25rem;\n  }\n  \n  /* Clear button */\n  .search .clear {\n    align-items: center;\n    background: none;\n    border: none;\n    border-radius: var(--radius-full, 9999px);\n    color: var(--color-neutral-400, #9ca3af);\n    cursor: pointer;\n    display: flex;\n    justify-content: center;\n    padding: var(--space-1, 0.25rem);\n    position: absolute;\n    right: var(--space-3, 0.75rem);\n    top: 50%;\n    transform: translateY(-50%);\n    transition: color 0.2s, background-color 0.2s;\n  }\n  \n  .search .clear:hover {\n    background-color: var(--color-neutral-200, #e5e7eb);\n    color: var(--color-neutral-600, #4b5563);\n  }\n  \n  /* Search dropdown results */\n  .search .results {\n    background-color: var(--color-neutral-100, #f3f4f6);\n    border: 1px solid var(--color-neutral-200, #e5e7eb);\n    border-radius: var(--radius-md, 0.375rem);\n    box-shadow: var(--shadow-lg, 0 10px 15px -3px rgb(0 0 0 / 10%), 0 4px 6px -4px rgb(0 0 0 / 10%));\n    display: none;\n    left: 0;\n    margin-top: var(--space-1, 0.25rem);\n    max-height: 300px;\n    overflow-y: auto;\n    position: absolute;\n    right: 0;\n    top: 100%;\n    z-index: var(--z-dropdown, 50);\n  }\n  \n  .search--open .results {\n    display: block;\n  }\n  \n  /* Search result items */\n  .search .result {\n    align-items: center;\n    cursor: pointer;\n    display: flex;\n    padding: var(--space-3, 0.75rem) var(--space-4, 1rem);\n    transition: background-color 0.2s;\n  }\n  \n  .search .result:hover,\n  .search .result--active {\n    background-color: var(--color-neutral-200, #e5e7eb);\n  }\n  \n  /* Result icon */\n  .search .result-icon {\n    color: var(--color-neutral-500, #6b7280);\n    flex-shrink: 0;\n    margin-right: var(--space-3, 0.75rem);\n  }\n  \n  /* Result content */\n  .search .result-content {\n    flex: 1;\n    min-width: 0;\n  }\n  \n  .search .result-title {\n    color: var(--color-neutral-900, #111827);\n    font-weight: var(--font-medium, 500);\n    margin-bottom: var(--space-1, 0.25rem);\n  }\n  \n  .search .result-description {\n    color: var(--color-neutral-500, #6b7280);\n    font-size: var(--text-xs, 0.75rem);\n    overflow: hidden;\n    text-overflow: ellipsis;\n    white-space: nowrap;\n  }\n  \n  /* Highlight matching text */\n  .search .highlight {\n    background-color: var(--color-warning-100, #fef3c7);\n    border-radius: var(--radius-sm, 0.125rem);\n    color: var(--color-warning-800, #92400e);\n    padding: 0 0.15em;\n  }\n  \n  /* Group heading */\n  .search .group-heading {\n    background-color: var(--color-neutral-50, #f9fafb);\n    color: var(--color-neutral-500, #6b7280);\n    font-size: var(--text-xs, 0.75rem);\n    font-weight: var(--font-semibold, 600);\n    letter-spacing: 0.05em;\n    padding: var(--space-2, 0.5rem) var(--space-4, 1rem);\n    text-transform: uppercase;\n  }\n  \n  /* Empty results state */\n  .search .empty {\n    color: var(--color-neutral-500, #6b7280);\n    padding: var(--space-6, 1.5rem) var(--space-4, 1rem);\n    text-align: center;\n  }\n  \n  /* Loading state */\n  .search .loading {\n    align-items: center;\n    color: var(--color-neutral-500, #6b7280);\n    display: flex;\n    justify-content: center;\n    padding: var(--space-4, 1rem);\n    text-align: center;\n  }\n  \n  .search .spinner {\n    animation: var(--ui-search-spin-animation, searchSpin var(--animation-duration-slowest, 1000ms) var(--ease-linear, linear) infinite);\n    margin-right: var(--space-2, 0.5rem);\n  }\n  \n  @keyframes searchSpin {\n    0% {\n      transform: rotate(0deg);\n    }\n\n    100% {\n      transform: rotate(360deg);\n    }\n  }\n  \n  /* Search with filters */\n  .search--with-filters .input-wrapper {\n    border-bottom: 1px solid var(--color-neutral-100, #f3f4f6);\n    border-radius: var(--radius-md, 0.375rem) var(--radius-md, 0.375rem) 0 0;\n  }\n  \n  /* Filters area */\n  .search .filters {\n    background-color: var(--color-neutral-50, #f9fafb);\n    border: 1px solid var(--color-neutral-200, #e5e7eb);\n    border-radius: 0 0 var(--radius-md, 0.375rem) var(--radius-md, 0.375rem);\n    border-top: none;\n    display: flex;\n    flex-wrap: wrap;\n    gap: var(--space-2, 0.5rem);\n    padding: var(--space-3, 0.75rem) var(--space-4, 1rem);\n  }\n  \n  /* Filter chip */\n  .search .filter {\n    align-items: center;\n    background-color: var(--color-neutral-100, #f3f4f6);\n    border: 1px solid var(--color-neutral-200, #e5e7eb);\n    border-radius: var(--radius-full, 9999px);\n    color: var(--color-neutral-700, #374151);\n    display: inline-flex;\n    font-size: var(--text-xs, 0.75rem);\n    padding: var(--space-1, 0.25rem) var(--space-3, 0.75rem);\n  }\n  \n  .search .filter-label {\n    font-weight: var(--font-medium, 500);\n    margin-right: var(--space-1, 0.25rem);\n  }\n  \n  .search .filter-value {\n    color: var(--color-neutral-900, #111827);\n  }\n  \n  .search .filter-remove {\n    align-items: center;\n    background: none;\n    border: none;\n    border-radius: var(--radius-full, 9999px);\n    color: var(--color-neutral-500, #6b7280);\n    cursor: pointer;\n    display: inline-flex;\n    height: 16px;\n    justify-content: center;\n    margin-left: var(--space-2, 0.5rem);\n    width: 16px;\n  }\n  \n  .search .filter-remove:hover {\n    background-color: var(--color-neutral-200, #e5e7eb);\n    color: var(--color-neutral-700, #374151);\n  }\n  \n  /* Search sizes */\n  .search--sm .input {\n    font-size: var(--text-xs, 0.75rem);\n    padding: var(--space-1, 0.25rem) var(--space-2, 0.5rem);\n    padding-left: var(--space-7, 1.75rem);\n  }\n  \n  .search--sm .icon {\n    height: 1rem;\n    left: var(--space-2, 0.5rem);\n    width: 1rem;\n  }\n  \n  .search--lg .input {\n    font-size: var(--text-base, 1rem);\n    padding: var(--space-3, 0.75rem) var(--space-4, 1rem);\n    padding-left: var(--space-10, 2.5rem);\n  }\n  \n  .search--lg .icon {\n    height: 1.5rem;\n    left: var(--space-4, 1rem);\n    width: 1.5rem;\n  }\n  \n  /* Search fullwidth modal on mobile */\n  @media (max-width: 640px) {\n    .search--modal .results {\n      inset: var(--space-16, 4rem) var(--space-4, 1rem) var(--space-4, 1rem) var(--space-4, 1rem);\n      max-height: none;\n      position: fixed;\n      z-index: var(--z-modal, 100);\n    }\n    \n    .search--modal::before {\n      background-color: rgb(0 0 0 / 50%);\n      content: \"\";\n      inset: 0;\n      position: fixed;\n      z-index: var(--z-modal-backdrop, 90);\n    }\n  }\n}","/**\n * Utilities System\n * \n * Hauptdatei für alle Hilfsklassen und Utilities der UI-Bibliothek.\n * Organisiert die Importe nach ihrer Funktion und Layer-Zugehörigkeit.\n */\n\n/**\n * Modulare Imports mit expliziter Layer-Angabe\n * Konsistentes Pattern für alle externen Importe\n */\n\n/* Variablen und Tokens für Utilities */\n@import url('./variables/colors.css') layer(utilities.variables);\n@import url('./variables/spacing.css') layer(utilities.variables);\n@import url('./variables/typography.css') layer(utilities.variables);\n@import url('./variables/shared.css') layer(utilities.variables);\n\n/* Mixins für wiederverwendbare Stile */\n@import url('./mixins/responsive.css') layer(utilities.mixins);\n@import url('./mixins/transitions.css') layer(utilities.mixins);\n@import url('./mixins/layout.css') layer(utilities.mixins);\n\n/* Hinweis: typography.css existiert nicht im mixins-Verzeichnis */\n\n/* Hilfsklassen für häufige Styling-Aufgaben */\n@import url('./helpers/spacing.css') layer(utilities.helpers);\n@import url('./helpers/display.css') layer(utilities.helpers);\n@import url('./helpers/text.css') layer(utilities.helpers);\n@import url('./helpers/dimensions.css') layer(utilities.helpers);\n\n/* Anpassungsmöglichkeiten und Theming */\n@import url('./customize/theme-generator.css') layer(utilities.customize);\n@import url('./customize/component-overrides.css') layer(utilities.customize);\n\n/**\n * Globale Utility-Definitionen\n * Für Stile, die direkt im Haupt-Utilities-Layer definiert werden sollen\n */\n@layer utilities {\n  /* \n   * Globale Utility-Klassen, die keinem Sublayer zugeordnet sind \n   * Hier können bei Bedarf weitere direkte Definitionen erfolgen\n   */\n} ","/* Clean Typography Index */\n@import url('./typography.css');\n@import url('./hierarchy/headings.css') layer(typography.headings);\n\n@layer typography.base { body { font-family: sans-serif; } }\n","/*\n * Accessibility - ARIA Support\n *\n * Styles und Utilities für ARIA-Rollen und -Attribute.\n * Diese Datei enthält Definitionen für konsistentes Styling von ARIA-Rollen.\n */\n\n@layer accessibility {\n  /*\n   * ARIA-Rollen Styling\n   * \n   * Konsistentes Styling für verschiedene ARIA-Rollen,\n   * um die visuelle Darstellung mit der semantischen Bedeutung in Einklang zu bringen.\n   */\n  \n  /* Dialog und Modal-Dialoge */\n  [role=\"dialog\"],\n  [role=\"alertdialog\"] {\n    background-color: var(--color-surface);\n    border-radius: var(--border-radius-lg);\n    box-shadow: var(--shadow-xl);\n    max-height: 9%0;\n    overflow-y: auto;\n    position: relative;\n    z-index: var(--z-index-modal);\n  }\n  \n  /* Navigation */\n  [role=\"navigation\"] {\n    display: flex;\n    flex-wrap: wrap;\n  }\n  \n  /* Tabs */\n  [role=\"tablist\"] {\n    border-bottom: var(--border-width) solid var(--color-border);\n    display: flex;\n  }\n  \n  [role=\"tab\"] {\n    background: none;\n    border: none;\n    border-bottom: var(--border-width-thick) solid transparent;\n    cursor: pointer;\n    padding: 0.5rem var(--spacing-4);\n  }\n  \n  [role=\"tab\"][aria-selected=\"true\"] {\n    border-bottom-color: var(--color-primary-500);\n    color: var(--color-primary-600);\n    font-weight: var(--font-weight-medium); /* Konsolidiert von separater Definition */\n  }\n  \n  [role=\"tabpanel\"] {\n    padding: var(--spacing-4) 0;\n  }\n  \n  /* Menüs */\n  [role=\"menu\"] {\n    background-color: var(--color-surface);\n    border: var(--border-width) solid var(--color-border);\n    border-radius: var(--border-radius-md);\n    box-shadow: var(--shadow-md);\n    display: flex;\n    flex-direction: column;\n    min-width: var(--spacing-40);\n    padding: 0.5rem 0;\n  }\n  \n  [role=\"menuitem\"] {\n    cursor: pointer;\n    padding: 0.5rem var(--spacing-4);\n  }\n  \n  [role=\"menuitem\"]:hover,\n  [role=\"menuitem\"]:focus {\n    background-color: var(--color-surface-hover);\n  }\n  \n  /* Listen */\n  [role=\"list\"] {\n    list-style: none;\n    margin: 0;\n    padding: 0;\n  }\n  \n  [role=\"listitem\"] {\n    padding: 0.5rem 0;\n  }\n  \n  /* Tooltips */\n  [role=\"tooltip\"] {\n    background-color: var(--color-surface);\n    border: var(--border-width) solid var(--color-border);\n    border-radius: var(--border-radius-sm);\n    box-shadow: var(--shadow-md);\n    max-width: var(--spacing-80);\n    padding: 0.5rem;\n    position: absolute;\n    z-index: var(--z-index-tooltip);\n  }\n  \n  /* Alert und Benachrichtigungen */\n  [role=\"alert\"],\n  [role=\"status\"],\n  [role=\"log\"] {\n    background-color: var(--color-surface);\n    border-left: var(--spacing-1) solid var(--color-info);\n    border-radius: var(--border-radius-md);\n    margin: var(--spacing-4) 0;\n    padding: var(--spacing-4);\n  }\n  \n  [role=\"alert\"] {\n    border-left-color: var(--color-error);\n  }\n  \n  [role=\"status\"] {\n    border-left-color: var(--color-success);\n  }\n  \n  /*\n   * ARIA-Attribute Styling\n   * \n   * Visuelles Feedback für verschiedene ARIA-Attribute,\n   * um Zustandsänderungen deutlicher zu machen.\n   */\n  \n  /* Erweiterte Elemente */\n  [aria-expanded=\"true\"] {\n    /* Zusätzliche Stile für erweiterte Elemente */\n  }\n  \n  /* Ausgewählte Elemente - bereits in [role=\"tab\"][aria-selected=\"true\"] konsolidiert */\n  \n  /* Aktive Elemente */\n  [aria-current=\"page\"],\n  [aria-current=\"step\"],\n  [aria-current=\"location\"],\n  [aria-current=\"date\"],\n  [aria-current=\"time\"] {\n    color: var(--color-primary-700);\n    font-weight: var(--font-weight-semibold);\n  }\n  \n  /* Gedrückte Elemente */\n  [aria-pressed=\"true\"] {\n    background-color: var(--color-primary-200);\n    border-color: var(--color-primary-400);\n  }\n  \n  /* Kontrollierte Elemente */\n  [aria-controls]:focus {\n    outline: var(--focus-ring);\n  }\n  \n  /* Beschriebene Elemente */\n  [aria-describedby] {\n    /* Subtile Markierung für Elemente mit Beschreibung */\n    border-bottom: var(--border-width) dotted var(--color-border);\n  }\n} ","/**\n * Theme Transition Utilities\n * \n * Theme-specific transition adjustments and utility classes.\n * The @property definitions are in tokens/transitions.css.\n * \n * @layer themes.transitions\n */\n\n@layer themes.transitions {\n  /* Theme Transition Values - Light Mode */\n  :root {\n    --transition-bg: var(--color-background);\n    --transition-fg: var(--color-text);\n    --transition-border: var(--color-border);\n    --transition-surface: var(--color-surface);\n    --transition-accent: var(--color-primary);\n    --transition-shadow-opacity: 0.1;\n  }\n  \n  /* Theme Transition Values - Dark Mode */\n  [data-theme=\"dark\"] {\n    --transition-bg: var(--color-background);\n    --transition-fg: var(--color-text);\n    --transition-border: var(--color-border);\n    --transition-surface: var(--color-surface);\n    --transition-accent: var(--color-primary);\n    --transition-shadow-opacity: 0.3;\n  }\n  \n  /* Auto Theme - System Preference */\n  @media (prefers-color-scheme: dark) {\n    [data-theme=\"auto\"] {\n      --transition-shadow-opacity: 0.3;\n    }\n  }\n  \n  /* Base Transition Utility Classes */\n  .theme-transition {\n    background-color: var(--transition-bg);\n    border-color: var(--transition-border);\n    color: var(--transition-fg);\n    transition: var(--transition-colors);\n  }\n  \n  .theme-transition-fast {\n    background-color: var(--transition-bg);\n    border-color: var(--transition-border);\n    color: var(--transition-fg);\n    transition: \n      background-color var(--transition-fast) var(--transition-ease-out),\n      color var(--transition-fast) var(--transition-ease-out),\n      border-color var(--transition-fast) var(--transition-ease-out);\n  }\n  \n  .theme-transition-slow {\n    background-color: var(--transition-bg);\n    border-color: var(--transition-border);\n    color: var(--transition-fg);\n    transition: \n      background-color var(--transition-slow) var(--transition-ease-in-out),\n      color var(--transition-slow) var(--transition-ease-in-out),\n      border-color var(--transition-slow) var(--transition-ease-in-out);\n  }\n  \n  /* Component-Specific Transition Classes */\n  .card-transition {\n    background-color: var(--transition-surface);\n    border-color: var(--transition-border);\n    box-shadow: \n      0 1px 3px 0 rgb(0 0 0 / var(--transition-shadow-opacity)),\n      0 1px 2px -1px rgb(0 0 0 / var(--transition-shadow-opacity));\n    transition: var(--transition-colors), var(--transition-shadow);\n  }\n  \n  .button-transition {\n    background-color: var(--transition-accent);\n    border-color: var(--transition-accent);\n    color: var(--transition-fg);\n    transition: var(--transition-colors), var(--transition-transform);\n  }\n  \n  .input-transition {\n    background-color: var(--transition-surface);\n    border-color: var(--transition-border);\n    transition: var(--transition-colors), var(--transition-shadow);\n  }\n  \n  .input-transition:focus {\n    border-color: var(--transition-accent);\n    box-shadow: 0 0 0 2px rgb(from var(--transition-accent) r g b / 2000%);\n  }\n  \n  /* Theme Switch Animation */\n  .theme-switching {\n    animation: theme-switch var(--transition-normal) var(--transition-ease-out);\n  }\n  \n  @keyframes theme-switch {\n    0 { opacity: 1; }\n\n    50 { opacity: 95%; }\n\n    100 { opacity: 1; }\n  }\n  \n  /* Disable Transitions for Reduced Motion */\n  @media (prefers-reduced-motion: reduce) {\n    .theme-transition,\n    .theme-transition-fast,\n    .theme-transition-slow,\n    .card-transition,\n    .button-transition,\n    .input-transition {\n      transition: none;\n    }\n    \n    .theme-switching {\n      animation: none;\n    }\n  }\n} ","/**\n * Icon Tokens\n */\n\n@layer tokens.values {\n  :root {\n    --icon-size-xs: 0.75rem;\n    --icon-size-sm: 1rem;\n    --icon-size-md: 1.25rem;\n    --icon-size-lg: 1.5rem;\n    --icon-size-xl: 2rem;\n    --icon-size-2xl: 2.5rem;\n    --icon-size-3xl: 3rem;\n    --icon-size-relative-xs: 0.5em;\n    --icon-size-relative-sm: 0.75em;\n    --icon-size-relative-md: 1em;\n    --icon-size-relative-lg: 1.25em;\n    --icon-size-relative-xl: 1.5em;\n    --icon-size-relative-2xl: 2em;\n    --icon-animation-duration-normal: 1s;\n    --icon-animation-duration-slow: 2s;\n  }\n}\n","/*\n * Accessibility - Contrast\n *\n * Styles und Utilities für verbesserten Farbkontrast.\n * Diese Datei enthält Definitionen für kontrastreiche Farben und Kontrastprüfung.\n */\n\n@layer accessibility {\n  /*\n   * Kontrastreiche Farbvariablen\n   * \n   * Diese Variablen bieten Farben mit hohem Kontrast für eine bessere Zugänglichkeit.\n   * Sie erfüllen mindestens die WCAG 2.1 AA-Anforderungen (Kontrastverhältnis ≥ 4.5:1).\n   */\n  :root {\n    /* Primäre Kontrastfarben */\n    --color-a11y-primary: var(--color-blue-600); /* Dunkleres Blau für besseren Kontrast auf weißem Hintergrund */\n    --color-a11y-primary-hover: var(--color-blue-700); /* Noch dunkleres Blau für Hover-Zustände */\n    --color-a11y-primary-text: var(--color-white); /* Weißer Text auf dunklerem Blau */\n    \n    /* Sekundäre Kontrastfarben */\n    --color-a11y-secondary: var(--color-gray-600); /* Dunkleres Grau für besseren Kontrast */\n    --color-a11y-secondary-hover: var(--color-gray-700); /* Noch dunkleres Grau für Hover-Zustände */\n    --color-a11y-secondary-text: var(--color-white); /* Weißer Text auf dunklerem Grau */\n    \n    /* Statusfarben mit hohem Kontrast */\n    --color-a11y-success: var(--color-green-600); /* Dunkleres Grün für besseren Kontrast */\n    --color-a11y-warning: var(--color-orange-600); /* Dunkleres Orange für besseren Kontrast */\n    --color-a11y-error: var(--color-red-600); /* Dunkleres Rot für besseren Kontrast */\n    --color-a11y-info: var(--color-blue-600); /* Dunkleres Blau für besseren Kontrast */\n    \n    /* Text-Farben mit hohem Kontrast */\n    --color-a11y-text-primary: var(--color-gray-very-dark); /* Fast schwarzer Text auf hellem Hintergrund */\n    --color-a11y-text-secondary: var(--color-gray-600); /* Dunkleres Grau für sekundären Text */\n    --color-a11y-text-tertiary: var(--color-gray-medium); /* Dunkleres Grau für tertiären Text */\n    \n    /* Hintergrundfarben mit hohem Kontrast */\n    --color-a11y-background: var(--color-white); /* Weißer Hintergrund */\n    --color-a11y-surface: var(--color-gray-very-light); /* Hellgraue Oberfläche */\n    \n    /* Randfarben mit hohem Kontrast */\n    --color-a11y-border: var(--color-gray-600); /* Dunklerer Rahmen für besseren Kontrast */\n  }\n  \n  /* \n   * Kontrast-Modus \n   * \n   * Diese Klasse kann auf body oder :root angewendet werden,\n   * um einen Hochkontrast-Modus zu aktivieren.\n   */\n  .high-contrast-mode {\n    /* Überschreibe Standard-Farbvariablen mit Hochkontrast-Versionen */\n    --color-primary-500: var(--color-a11y-primary);\n    --color-primary-600: var(--color-a11y-primary-hover);\n    --color-primary-700: var(--color-a11y-primary-hover);\n    --color-secondary-500: var(--color-a11y-secondary);\n    --color-secondary-600: var(--color-a11y-secondary-hover);\n    --color-secondary-700: var(--color-a11y-secondary-hover);\n    --color-success: var(--color-a11y-success);\n    --color-warning: var(--color-a11y-warning);\n    --color-error: var(--color-a11y-error);\n    --color-info: var(--color-a11y-info);\n    --color-text-primary: var(--color-a11y-text-primary);\n    --color-text-secondary: var(--color-a11y-text-secondary);\n    --color-text-tertiary: var(--color-a11y-text-tertiary);\n    --color-background: var(--color-a11y-background);\n    --color-surface: var(--color-a11y-surface);\n    --color-border: var(--color-a11y-border);\n    \n    /* Erhöhter Kontrast durch verstärkte Schattierungen */\n    --shadow-sm: 0 var(--border-width) 3px 0 rgb(0 0 0 / 300000);\n    --shadow-md: 0 var(--spacing-1) 6px 0 rgb(0 0 0 / 300000);\n    --shadow-lg: 0 10px 15px 0 rgb(0 0 0 / 300000);\n    \n    /* Verstärkte Fokus-Indikatoren */\n    --focus-ring: 0 0 0 3px rgb(0 82 204 / 800000);\n    \n    /* Erhöhte Textlesbarkeit */\n    --line-height-normal: 1.6;\n    \n    /* Entfernung subtiler Transparenz-Effekte */\n    --color-overlay: var(--color-overlay-dark);\n    --color-overlay-light: var(--color-overlay-medium);\n  }\n  \n  /* \n   * Kontrast-Klassen für einzelne Elemente\n   * \n   * Diese Klassen können auf einzelne Elemente angewendet werden,\n   * um ihren Kontrast zu verbessern, ohne den gesamten Modus zu aktivieren.\n   */\n  \n  /* Verbesserte Textlesbarkeit */\n  .a11y-text {\n    color: var(--color-a11y-text-primary);\n    font-weight: var(--font-weight-medium);\n    line-height: var(--line-height-none).6;\n  }\n  \n  /* Kontrastreiche Buttons */\n  .a11y-button {\n    background-color: var(--color-a11y-primary);\n    border: var(--border-width-thick) solid var(--color-a11y-primary);\n    color: var(--color-a11y-primary-text);\n    font-weight: var(--font-weight-semibold);\n  }\n  \n  .a11y-button:hover,\n  .a11y-button:focus {\n    background-color: var(--color-a11y-primary-hover);\n    border-color: var(--color-a11y-primary-hover);\n  }\n  \n  /* Kontrastreiche Links */\n  .a11y-link {\n    color: var(--color-a11y-primary);\n    font-weight: var(--font-weight-medium);\n    text-decoration: underline;\n  }\n  \n  .a11y-link:hover,\n  .a11y-link:focus {\n    color: var(--color-a11y-primary-hover);\n    text-decoration: underline;\n  }\n  \n  /* Kontrastreiche Rahmen */\n  .a11y-border {\n    border: var(--border-width-thick) solid var(--color-a11y-border);\n  }\n  \n  /* Kontrastreiche Formular-Elemente */\n  .a11y-input {\n    background-color: var(--color-a11y-background);\n    border: var(--border-width-thick) solid var(--color-a11y-border);\n    color: var(--color-a11y-text-primary);\n  }\n  \n  .a11y-input:focus {\n    border-color: var(--color-a11y-primary);\n    outline: var(--focus-ring);\n  }\n  \n  /* Kontrastreiche Icons */\n  .a11y-icon {\n    color: var(--color-a11y-primary);\n    height: 1%.5em;\n    width: 1%.5em;\n  }\n} ","/**\n * Main Content Region\n * \n * Central content layout with consistent spacing, max-width, and responsive behavior.\n * Part of the page regions system - defines the main content area styling.\n * Uses CSS Nesting and Container Queries for modern responsive design.\n * \n * @layer: components\n * @location: ui/regions/main-content.css\n * \n * Main Classes:\n * - .main: Base main content wrapper\n * - .main-narrow: 800 max width\n * - .main-wide: 1400 max width  \n * - .main-full: Full width\n * \n * Utility Classes:\n * - .centered: Center alignment\n * - .compact: Reduced padding\n * - .spacious: Increased padding\n * - .no-padding: Remove padding\n * \n * Container Queries:\n * - Responsive typography\n * - Mobile-first approach\n * - Automatic layout adjustments\n * \n * Integration:\n * - Works with layout-system.css for grid positioning\n * - Complements header.css, footer.css, sidebar.css\n * - Provides content styling within the main grid area\n */\n\n@layer components {\n  /* Main content tokens */\n  :root {\n    /* Main dimensions */\n    --main-max-width: 120%0px;\n    --main-max-width-narrow: 800;\n    --main-max-width-wide: 1400;\n    --main-padding: var(--space-6) var(--space-4);\n    --main-padding-compact: var(--space-4) var(--space-3);\n    --main-padding-spacious: var(--space-8) var(--space-6);\n    \n    /* Main typography */\n    --main-font-size: var(--text-base);\n    --main-line-height: 1%.6;\n    --main-color: var(--color-neutral-900, #111827);\n    --main-heading-color: var(--color-neutral-900, #111827);\n    --main-link-color: var(--color-primary-600, #2563eb);\n    --main-link-hover: var(--color-primary-700, #1d4ed8);\n    \n    /* Main spacing */\n    --main-section-gap: var(--space-8);\n    --main-paragraph-gap: var(--space-4);\n    --main-list-gap: var(--space-2);\n    \n    /* Main responsive breakpoints */\n    --main-mobile-breakpoint: 768px;\n    --main-tablet-breakpoint: 1024px;\n  }\n  \n  /* Base main content wrapper */\n  .main {\n    color: var(--main-color);\n    container-type: inline-size;\n    font-size: var(--main-font-size);\n    line-height: var(--main-line-height, 1.6);\n    margin: 0 auto;\n    max-width: var(--main-max-width, 1200px);\n    padding: var(--main-padding);\n    width: 100%;\n    \n    /* Typography hierarchy */\n    & h1, & h2, & h3, & h4, & h5, & h6 {\n      color: var(--main-heading-color);\n      font-weight: var(--font-semibold, 600);\n      line-height: 1%.2;\n      margin: 0 0 var(--space-4) 0;\n      \n      &:first-child {\n        margin-top: 0%;\n      }\n      \n      &:last-child {\n        margin-bottom: 0%;\n      }\n    }\n    \n    & h1 {\n      font-size: var(--text-4xl);\n      font-weight: var(--font-bold);\n      margin-bottom: var(--space-6);\n      \n      @container (width <= 768px) {\n        font-size: var(--text-3xl);\n      }\n      \n      @container (width <= 480px) {\n        font-size: var(--text-2xl);\n      }\n    }\n    \n    & h2 {\n      font-size: var(--text-3xl);\n      margin-bottom: var(--space-5);\n      margin-top: var(--space-8);\n      \n      @container (width <= 768px) {\n        font-size: var(--text-2xl);\n      }\n      \n      @container (width <= 480px) {\n        font-size: var(--text-xl);\n      }\n    }\n    \n    & h3 {\n      font-size: var(--text-2xl);\n      margin-bottom: var(--space-4);\n      margin-top: var(--space-6);\n      \n      @container (width <= 768px) {\n        font-size: var(--text-xl);\n      }\n      \n      @container (width <= 480px) {\n        font-size: var(--text-lg);\n      }\n    }\n    \n    & h4 {\n      font-size: var(--text-xl);\n      margin-bottom: var(--space-3);\n      margin-top: var(--space-5);\n      \n      @container (width <= 768px) {\n        font-size: var(--text-lg);\n      }\n    }\n    \n    & h5 {\n      font-size: var(--text-lg);\n      margin-bottom: var(--space-3);\n      margin-top: var(--space-4);\n      \n      @container (width <= 768px) {\n        font-size: var(--text-base);\n      }\n    }\n    \n    & h6 {\n      font-size: var(--text-base);\n      margin-bottom: var(--space-2);\n      margin-top: var(--space-4);\n      text-transform: uppercase;\n      \n      @container (width <= 768px) {\n        font-size: var(--text-sm, 0.875rem);\n      }\n    }\n    \n    /* Paragraphs and text */\n    & p {\n      margin: 0 0 var(--main-paragraph-gap) 0;\n      \n      &:last-child {\n        margin-bottom: 0%;\n      }\n      \n      &.lead {\n        font-size: var(--text-lg);\n        font-weight: var(--font-medium, 500);\n        margin-bottom: var(--space-6);\n        \n        @container (width <= 768px) {\n          font-size: var(--text-base);\n        }\n      }\n      \n      &.small {\n        font-size: var(--text-sm, 0.875rem);\n        \n        @container (width <= 768px) {\n          font-size: var(--text-xs, 0.75rem);\n        }\n      }\n    }\n    \n    /* Links */\n    & a {\n      color: var(--main-link-color);\n      text-decoration: underline;\n      text-decoration-color: transparent;\n      text-underline-offset: 2px;\n      transition: all 0.2s ease;\n      \n      &:hover,\n      &:focus {\n        color: var(--main-link-hover);\n        text-decoration-color: currentColor;\n      }\n      \n      &:focus {\n        outline: 2px solid var(--main-link-color);\n        outline-offset: 2px;\n      }\n    }\n    \n    /* Lists */\n    & ul, & ol {\n      margin: 0 0 var(--main-paragraph-gap) 0;\n      padding-left: var(--space-6);\n      \n      & li {\n        margin-bottom: var(--main-list-gap);\n        \n        &:last-child {\n          margin-bottom: 0%;\n        }\n        \n        & ul, & ol {\n          margin-bottom: 0%;\n          margin-top: var(--main-list-gap);\n        }\n      }\n      \n      &:last-child {\n        margin-bottom: 0%;\n      }\n    }\n    \n    & ul {\n      list-style-type: disc;\n      \n      & ul {\n        list-style-type: circle;\n        \n        & ul {\n          list-style-type: square;\n        }\n      }\n    }\n    \n    & ol {\n      list-style-type: decimal;\n      \n      & ol {\n        list-style-type: lower-alpha;\n        \n        & ol {\n          list-style-type: lower-roman;\n        }\n      }\n    }\n    \n    /* Definition lists */\n    & dl {\n      margin: 0 0 var(--main-paragraph-gap) 0;\n      \n      & dt {\n        font-weight: var(--font-semibold, 600);\n        margin-bottom: var(--space-1);\n        margin-top: var(--space-3);\n        \n        &:first-child {\n          margin-top: 0%;\n        }\n      }\n      \n      & dd {\n        margin-bottom: var(--space-2);\n        margin-left: var(--space-4);\n        \n        &:last-child {\n          margin-bottom: 0%;\n        }\n      }\n    }\n    \n    /* Blockquotes */\n    & blockquote {\n      border-left: 4px solid var(--color-primary-200);\n      font-size: var(--text-lg);\n      font-style: italic;\n      margin: var(--space-6) 0;\n      padding: var(--space-4) var(--space-6);\n      \n      @container (width <= 768px) {\n        font-size: var(--text-base);\n        margin: var(--space-4) 0;\n        padding: var(--space-3) var(--space-4);\n      }\n      \n      & p:last-child {\n        margin-bottom: 0%;\n      }\n      \n      & cite {\n        display: block;\n        font-size: var(--text-sm, 0.875rem);\n        font-style: normal;\n        font-weight: var(--font-medium, 500);\n        margin-top: var(--space-2);\n        \n        &::before {\n          content: \"— \";\n        }\n      }\n    }\n    \n    /* Code */\n    & code {\n      background-color: var(--color-neutral-100, #f3f4f6);\n      border-radius: var(--radius-sm, 0.125rem);\n      font-family: var(--font-mono);\n      font-size: 0.875em;\n      padding: 0.125em 0010.25em;\n    }\n    \n    & pre {\n      background-color: var(--color-neutral-900, #111827);\n      border-radius: var(--radius-md, 0.375rem);\n      color: var(--color-neutral-100, #f3f4f6);\n      font-family: var(--font-mono);\n      font-size: var(--text-sm, 0.875rem);\n      line-height: 1.5;\n      margin: var(--space-6) 0;\n      overflow-x: auto;\n      padding: var(--space-4);\n      \n      @container (width <= 768px) {\n        font-size: var(--text-xs, 0.75rem);\n        margin: var(--space-4) 0;\n        padding: var(--space-3);\n      }\n      \n      & code {\n        background: none;\n        color: inherit;\n        font-size: inherit;\n        padding: 0;\n      }\n    }\n    \n    /* Tables */\n    & table {\n      border-collapse: collapse;\n      margin: var(--space-6) 0;\n      width: 100%;\n      \n      @container (width <= 768px) {\n        font-size: var(--text-sm, 0.875rem);\n        margin: var(--space-4) 0;\n      }\n      \n      & th, & td {\n        border: 1px solid var(--color-neutral-200, #e5e7eb);\n        padding: var(--space-3);\n        text-align: left;\n        \n        @container (width <= 768px) {\n          padding: var(--space-2);\n        }\n      }\n      \n      & th {\n        background-color: var(--color-neutral-50);\n        font-weight: var(--font-semibold, 600);\n      }\n      \n      & tbody tr:nth-child(even) {\n        background-color: var(--color-neutral-25);\n      }\n    }\n    \n    /* Images and media */\n    & img {\n      height: auto;\n      max-width: 100%;\n      \n      &.rounded {\n        border-radius: var(--radius-md, 0.375rem);\n      }\n      \n      &.shadow {\n        box-shadow: var(--shadow-lg);\n      }\n    }\n    \n    & figure {\n      margin: var(--space-6) 0;\n      \n      @container (width <= 768px) {\n        margin: var(--space-4) 0;\n      }\n      \n      & img {\n        display: block;\n        margin: 0 auto;\n      }\n      \n      & figcaption {\n        color: var(--color-neutral-600);\n        font-size: var(--text-sm, 0.875rem);\n        font-style: italic;\n        margin-top: var(--space-2);\n        text-align: center;\n        \n        @container (width <= 768px) {\n          font-size: var(--text-xs, 0.75rem);\n        }\n      }\n    }\n    \n    /* Horizontal rules */\n    & hr {\n      border: none;\n      border-top: 1px solid var(--color-neutral-200, #e5e7eb);\n      margin: var(--main-section-gap) 0;\n      \n      @container (width <= 768px) {\n        margin: var(--space-6) 0;\n      }\n    }\n    \n    /* Utility modifiers */\n    &.narrow {\n      max-width: var(--main-max-width-narrow, 768px);\n    }\n    \n    &.wide {\n      max-width: var(--main-max-width-wide, 1440px);\n    }\n    \n    &.full {\n      max-width: none;\n    }\n    \n    &.centered {\n      text-align: center;\n    }\n    \n    &.compact {\n      padding: var(--main-padding-compact);\n      \n      & h1 { margin-bottom: var(--space-4); }\n\n      & h2 { margin-bottom: var(--space-3); margin-top: var(--space-6); }\n\n      & h3 { margin-bottom: var(--space-3); margin-top: var(--space-4); }\n\n      & p { margin-bottom: var(--space-3); }\n\n      & blockquote { margin: var(--space-4) 0; }\n\n      & pre { margin: var(--space-4) 0; }\n\n      & table { margin: var(--space-4) 0; }\n\n      & figure { margin: var(--space-4) 0; }\n\n      & hr { margin: var(--space-6) 0; }\n    }\n    \n    &.spacious {\n      padding: var(--main-padding-spacious);\n      \n      & h1 { margin-bottom: var(--space-8); }\n\n      & h2 { margin-bottom: var(--space-6); margin-top: var(--space-12); }\n\n      & h3 { margin-bottom: var(--space-5); margin-top: var(--space-8); }\n\n      & p { margin-bottom: var(--space-5); }\n\n      & blockquote { margin: var(--space-8) 0; }\n\n      & pre { margin: var(--space-8) 0; }\n\n      & table { margin: var(--space-8) 0; }\n\n      & figure { margin: var(--space-8) 0; }\n\n      & hr { margin: var(--space-12) 0; }\n    }\n    \n    &.no-padding {\n      padding: 0;\n    }\n    \n    /* Container query responsive adjustments */\n    @container (width <= 768px) {\n      font-size: var(--text-sm, 0.875rem);\n      padding: var(--space-4) var(--space-3);\n      \n      &.compact {\n        padding: var(--space-3) var(--space-2);\n      }\n      \n      &.spacious {\n        padding: var(--space-6) var(--space-4);\n      }\n    }\n    \n    @container (width <= 480px) {\n      font-size: var(--text-sm, 0.875rem);\n      padding: var(--space-3) var(--space-2);\n      \n      & ul, & ol {\n        padding-left: var(--space-4);\n      }\n      \n      & blockquote {\n        padding: var(--space-2) var(--space-3);\n      }\n      \n      & table {\n        font-size: var(--text-xs, 0.75rem);\n        \n        & th, & td {\n          padding: var(--space-1);\n        }\n      }\n    }\n  }\n  \n  /* Dark mode support */\n  @media (prefers-color-scheme: dark) {\n    .main {\n      --main-color: var(--color-neutral-100, #f3f4f6);\n      --main-heading-color: var(--color-neutral-50);\n      --main-link-color: var(--color-primary-400);\n      --main-link-hover: var(--color-primary-300);\n      \n      & code {\n        background-color: var(--color-neutral-800, #1f2937);\n        color: var(--color-neutral-200, #e5e7eb);\n      }\n      \n      & table {\n        & th, & td {\n          border-color: var(--color-neutral-700, #374151);\n        }\n        \n        & th {\n          background-color: var(--color-neutral-800, #1f2937);\n        }\n        \n        & tbody tr:nth-child(even) {\n          background-color: var(--color-neutral-900, #111827);\n        }\n      }\n      \n      & blockquote {\n        border-left-color: var(--color-primary-600, #2563eb);\n      }\n      \n      & hr {\n        border-top-color: var(--color-neutral-700, #374151);\n      }\n      \n      & figure figcaption {\n        color: var(--color-neutral-400, #9ca3af);\n      }\n    }\n  }\n  \n  /* Fallback media queries for browsers without container query support */\n  @supports not (container-type: inline-size) {\n    @media (max-width: 768px) {\n      .main {\n        font-size: var(--text-sm, 0.875rem);\n        padding: var(--space-4) var(--space-3);\n        \n        & h1 { font-size: var(--text-3xl); }\n\n        & h2 { font-size: var(--text-2xl); }\n\n        & h3 { font-size: var(--text-xl); }\n\n        & h4 { font-size: var(--text-lg); }\n\n        & h5 { font-size: var(--text-base); }\n\n        & h6 { font-size: var(--text-sm, 0.875rem); }\n        \n        & p.lead { font-size: var(--text-base); }\n\n        & p.small { font-size: var(--text-xs, 0.75rem); }\n        \n        & blockquote {\n          font-size: var(--text-base);\n          margin: var(--space-4) 0;\n          padding: var(--space-3) var(--space-4);\n        }\n        \n        & pre {\n          font-size: var(--text-xs, 0.75rem);\n          margin: var(--space-4) 0;\n          padding: var(--space-3);\n        }\n        \n        & table {\n          font-size: var(--text-sm, 0.875rem);\n          margin: var(--space-4) 0;\n          \n          & th, & td {\n            padding: var(--space-2);\n          }\n        }\n        \n        & figure {\n          margin: var(--space-4) 0;\n          \n          & figcaption {\n            font-size: var(--text-xs, 0.75rem);\n          }\n        }\n        \n        & hr {\n          margin: var(--space-6) 0;\n        }\n        \n        &.compact {\n          padding: var(--space-3) var(--space-2);\n        }\n        \n        &.spacious {\n          padding: var(--space-6) var(--space-4);\n        }\n      }\n    }\n    \n    @media (width <= 480px) {\n      .main {\n        font-size: var(--text-sm, 0.875rem);\n        padding: var(--space-3) var(--space-2);\n        \n        & h1 { font-size: var(--text-2xl); }\n\n        & h2 { font-size: var(--text-xl); }\n\n        & h3 { font-size: var(--text-lg); }\n        \n        & ul, & ol {\n          padding-left: var(--space-4);\n        }\n        \n        & blockquote {\n          padding: var(--space-2) var(--space-3);\n        }\n        \n        & table {\n          font-size: var(--text-xs, 0.75rem);\n          \n          & th, & td {\n            padding: var(--space-1);\n          }\n        }\n      }\n    }\n  }\n  \n  /* Print styles */\n  @media print {\n    .main {\n      color: var(--color-neutral-900, #111827) !important;\n      font-size: 12pt;\n      max-width: none;\n      padding: 0;\n      \n      & h1, & h2, & h3, & h4, & h5, & h6 {\n        color: var(--color-neutral-900, #111827) !important;\n        page-break-after: avoid;\n      }\n      \n      & p, & li {\n        orphans: 3;\n        widows: 3;\n      }\n      \n      & blockquote, & pre, & table, & figure {\n        page-break-inside: avoid;\n      }\n      \n      & a {\n        color: var(--color-neutral-900, #111827) !important;\n        text-decoration: underline;\n      }\n      \n      & pre {\n        background: var(--color-neutral-100, #f3f4f6) !important;\n        border: 1px solid var(--color-neutral-300, #d1d5db);\n        color: var(--color-neutral-900, #111827) !important;\n      }\n      \n      & code {\n        background: var(--color-neutral-100, #f3f4f6) !important;\n        color: var(--color-neutral-900, #111827) !important;\n      }\n    }\n  }\n  \n  /* High contrast mode */\n  @media (prefers-contrast: more) {\n    .main {\n      & a {\n        text-decoration: underline;\n      }\n      \n      & table {\n        & th, & td {\n          border: 2px solid;\n        }\n      }\n      \n      & blockquote {\n        border-left-width: 6px;\n      }\n      \n      & code {\n        border: 1px solid;\n      }\n    }\n  }\n  \n  /* Reduced motion */\n  @media (prefers-reduced-motion: reduce) {\n    .main {\n      & a {\n        transition: none;\n      }\n    }\n  }\n} ","/**\n * Border Radius Properties with @property Definitions\n * \n * Typed CSS custom properties for border-radius using @property.\n * This enables better tooling support, autocomplete, and animation capabilities.\n * \n * @layer tokens.properties\n */\n\n@layer tokens.properties {\n  /* Base Radius Properties */\n  @property --radius-none {\n    inherits: true;\n    initial-value: 0;\n    syntax: '<length>';\n  }\n  \n  @property --radius-xs {\n    inherits: true;\n    initial-value: 0.125rem;\n    syntax: '<length>';\n  }\n  \n  @property --radius-sm {\n    inherits: true;\n    initial-value: 0.25rem;\n    syntax: '<length>';\n  }\n  \n  @property --radius-md {\n    inherits: true;\n    initial-value: 0.375rem;\n    syntax: '<length>';\n  }\n  \n  @property --radius-lg {\n    inherits: true;\n    initial-value: 0.5rem;\n    syntax: '<length>';\n  }\n  \n  @property --radius-xl {\n    inherits: true;\n    initial-value: 0.75rem;\n    syntax: '<length>';\n  }\n  \n  @property --radius-2xl {\n    inherits: true;\n    initial-value: 1rem;\n    syntax: '<length>';\n  }\n  \n  @property --radius-3xl {\n    inherits: true;\n    initial-value: 1.5rem;\n    syntax: '<length>';\n  }\n  \n  @property --radius-full {\n    inherits: true;\n    initial-value: 9999px;\n    syntax: '<length-percentage>';\n  }\n  \n  /* Component-Specific Radius Properties */\n  @property --radius-button {\n    inherits: true;\n    initial-value: 0.375rem;\n    syntax: '<length>';\n  }\n  \n  @property --radius-card {\n    inherits: true;\n    initial-value: 0.5rem;\n    syntax: '<length>';\n  }\n  \n  @property --radius-input {\n    inherits: true;\n    initial-value: 0.375rem;\n    syntax: '<length>';\n  }\n  \n  @property --radius-modal {\n    inherits: true;\n    initial-value: 0.75rem;\n    syntax: '<length>';\n  }\n  \n  @property --radius-badge {\n    inherits: true;\n    initial-value: 0.25rem;\n    syntax: '<length>';\n  }\n  \n  @property --radius-avatar {\n    inherits: true;\n    initial-value: 50;\n    syntax: '<length-percentage>';\n  }\n  \n  /* Interactive Radius Properties */\n  @property --radius-hover {\n    inherits: true;\n    initial-value: 0.5rem;\n    syntax: '<length>';\n  }\n  \n  @property --radius-focus {\n    inherits: true;\n    initial-value: 0.375rem;\n    syntax: '<length>';\n  }\n  \n  /* Animatable Radius Properties */\n  @property --radius-transition {\n    inherits: true;\n    initial-value: 0.375rem;\n    syntax: '<length>';\n  }\n  \n  @property --radius-transition-hover {\n    inherits: true;\n    initial-value: 0.5rem;\n    syntax: '<length>';\n  }\n  \n  /* Initial Value Definitions */\n  :root {\n    /* Base Radius Scale */\n    --radius-none: 0;\n    --radius-xs: 0.125rem;\n    --radius-sm: 0.25rem;\n    --radius-md: 0.375rem;\n    --radius-lg: 0.5rem;\n    --radius-xl: 0.75rem;\n    --radius-2xl: 1rem;\n    --radius-3xl: 1.5rem;\n    --radius-full: 9999px;\n    \n    /* Component Radius */\n    --radius-button: var(--radius-md);\n    --radius-card: var(--radius-lg);\n    --radius-input: var(--radius-md);\n    --radius-modal: var(--radius-xl);\n    --radius-badge: var(--radius-sm);\n    --radius-avatar: 50;\n    \n    /* Interactive Radius */\n    --radius-hover: var(--radius-lg);\n    --radius-focus: var(--radius-md);\n    \n    /* Transition Radius */\n    --radius-transition: var(--radius-md);\n    --radius-transition-hover: var(--radius-lg);\n    \n    /* Border-Radius Aliases (für Kompatibilität mit Typography-System) */\n    --border-radius-none: var(--radius-none);\n    --border-radius-sm: var(--radius-sm);\n    --border-radius-md: var(--radius-md);\n    --border-radius-lg: var(--radius-lg);\n    --border-radius-xl: var(--radius-xl);\n    --border-radius-full: var(--radius-full);\n  }\n} ","/*\n * Blog-Komponente\n *\n * Struktur und Layout für Blogbeiträge mit Fokus auf Lesbarkeit.\n */\n\n/**\n * Blog-Komponente\n * \n * Blogartikel-Layouts und -Komponenten für Inhalts- und Publikationsdarstellung.\n * Das Blog-Modul bietet spezialisierte Komponenten für Blogseiten, Artikel und Nachrichtenauflistungen.\n * \n * @layer components\n * \n * Grundlegende Verwendung:\n * <article class=\"blog-post\">\n *   <header class=\"header\">\n *     <h2 class=\"title\">Artikel-Titel</h2>\n *     <div class=\"meta\">\n *       <time datetime=\"2023-10-15\">15. Oktober 2023</time>\n *       <span class=\"author\">Von Max Mustermann</span>\n *     </div>\n *   </header>\n *   <div class=\"content\">\n *     <p>Artikel-Inhalt...</p>\n *   </div>\n *   <footer class=\"footer\">\n *     <div class=\"tags\">\n *       <span class=\"tag\">Design</span>\n *       <span class=\"tag\">CSS</span>\n *     </div>\n *   </footer>\n * </article>\n * \n * Blog-Liste:\n * <div class=\"blog-list\">\n *   <article class=\"blog-card\">\n *     <img class=\"image\" src=\"thumbnail.jpg\" alt=\"Artikel-Bild\">\n *     <div class=\"content\">\n *       <h3 class=\"title\">Artikel-Titel</h3>\n *       <p class=\"excerpt\">Kurze Beschreibung des Artikels...</p>\n *       <a class=\"link\" href=\"#\">Weiterlesen</a>\n *     </div>\n *   </article>\n * </div>\n * \n * Hervorgehobener Artikel:\n * <article class=\"blog-post featured\">...</article>\n * \n * Blog-Navigation:\n * <nav class=\"blog-nav\">\n *   <a class=\"prev\" href=\"#\">&larr; Vorheriger Artikel</a>\n *   <a class=\"next\" href=\"#\">Nächster Artikel &rarr;</a>\n * </nav>\n * \n * Teilen-Optionen:\n * <div class=\"blog-share\">\n *   <span class=\"label\">Teilen:</span>\n *   <div class=\"buttons\">\n *     <a href=\"#\" class=\"button twitter\">Twitter</a>\n *     <a href=\"#\" class=\"button facebook\">Facebook</a>\n *     <a href=\"#\" class=\"button linkedin\">LinkedIn</a>\n *   </div>\n * </div>\n */\n\n@layer components {\n  /* Blog-Post */\n  .blog-post {\n    font-size: var(--text-base);\n    line-height: 1%.6;\n    margin-inline: auto;\n    max-width: 65%ch;\n    padding-block: var(--space-6);\n    padding-inline: var(--space-4);\n    \n    /* Standard-Elemente im Blogpost */\n    h1, h2, h3 {\n      font-family: var(--font-sans);\n      font-weight: var(--font-semibold, 600);\n      margin-block: var(--space-4) var(--space-2);\n    }\n    \n    p {\n      margin-block: var(--space-3);\n    }\n    \n    img {\n      border-radius: var(--radius-md, 0.375rem);\n      margin-block: var(--space-4);\n      max-width: 100%;\n    }\n    \n    pre, code {\n      background: var(--color-neutral-100, #f3f4f6);\n      border-radius: var(--radius-sm, 0.125rem);\n      font-family: var(--font-mono);\n      padding: var(--space-1) var(--space-2);\n    }\n    \n    /* Strukturelemente */\n    .header {\n      margin-bottom: var(--space-6);\n      \n      .title {\n        font-size: var(--text-2xl);\n        margin-bottom: var(--space-2);\n        margin-top: 0%;\n      }\n      \n      .meta {\n        color: var(--color-neutral-600);\n        display: flex;\n        flex-wrap: wrap;\n        font-size: var(--text-sm, 0.875rem);\n        gap: var(--space-3);\n      }\n      \n      .author {\n        font-weight: var(--font-medium, 500);\n      }\n    }\n    \n    .content {\n      margin-bottom: var(--space-6);\n    }\n    \n    .footer {\n      border-top: 1px solid var(--color-neutral-200, #e5e7eb);\n      padding-top: var(--space-4);\n      \n      .tags {\n        display: flex;\n        flex-wrap: wrap;\n        gap: var(--space-2);\n      }\n    }\n    \n    /* Zustände */\n    &.featured {\n      border-left: 4px solid var(--color-primary, #3b82f6);\n      padding-left: var(--space-6);\n    }\n  }\n  \n  /* Blog-Karte */\n  .blog-card {\n    border-radius: var(--radius-md, 0.375rem);\n    box-shadow: var(--shadow-sm, 0 1px 2px 0 rgb(0 0 0 / 0.05));\n    display: flex;\n    flex-direction: column;\n    overflow: hidden;\n    transition: transform 0.2s, box-shadow 0.2s;\n    \n    &:hover {\n      box-shadow: var(--shadow-md);\n      transform: translateY(-4px);\n    }\n    \n    .image {\n      height: 20%0px;\n      object-fit: cover;\n      width: 100%;\n    }\n    \n    .content {\n      display: flex;\n      flex: 1;\n      flex-direction: column;\n      padding: var(--space-4);\n      \n      .title {\n        font-size: var(--text-lg);\n        margin-bottom: var(--space-2);\n        margin-top: 0%;\n      }\n      \n      .excerpt {\n        color: var(--color-neutral-700, #374151);\n        flex: 1;\n        margin-bottom: var(--space-4);\n      }\n      \n      .link {\n        align-self: flex-start;\n        color: var(--color-primary, #3b82f6);\n        font-weight: var(--font-medium, 500);\n        text-decoration: none;\n        \n        &:hover {\n          text-decoration: underline;\n        }\n      }\n    }\n  }\n  \n  /* Blog-Liste */\n  .blog-list {\n    display: grid;\n    gap: var(--space-6);\n    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));\n  }\n  \n  /* Blog-Navigation */\n  .blog-nav {\n    border-top: 1px solid var(--color-neutral-200, #e5e7eb);\n    display: flex;\n    justify-content: space-between;\n    margin-top: var(--space-8);\n    padding-top: var(--space-4);\n    \n    a {\n      color: var(--color-primary, #3b82f6);\n      text-decoration: none;\n      \n      &:hover {\n        text-decoration: underline;\n      }\n    }\n    \n    .prev::before {\n      content: \"←\";\n      margin-right: var(--space-1);\n    }\n    \n    .next::after {\n      content: \"→\";\n      margin-left: var(--space-1);\n    }\n  }\n  \n  /* Blog-Share */\n  .blog-share {\n    margin-top: var(--space-6);\n    \n    .label {\n      display: block;\n      font-weight: var(--font-medium, 500);\n      margin-bottom: var(--space-2);\n    }\n    \n    .buttons {\n      display: flex;\n      gap: var(--space-2);\n    }\n    \n    .button {\n      align-items: center;\n      border-radius: var(--radius-md, 0.375rem);\n      color: white;\n      display: flex;\n      font-size: var(--text-sm, 0.875rem);\n      justify-content: center;\n      padding: var(--space-2) var(--space-3);\n      text-decoration: none;\n      \n      &.twitter {\n        background-color: var(--color-twitter, #1DA1F2);\n      }\n      \n      &.facebook {\n        background-color: var(--color-facebook, #4267B2);\n      }\n      \n      &.linkedin {\n        background-color: var(--color-linkedin, #0077B5);\n      }\n      \n      &:hover {\n        opacity: 9000%;\n      }\n    }\n  }\n}","/**\n * Responsive Display & Visibility System\n * \n * A comprehensive responsive utility system for controlling element visibility,\n * display properties, and responsive behavior across different screen sizes.\n * This system provides mobile-first responsive design utilities with semantic\n * class names and consistent breakpoint management.\n * \n * @layer layout.responsive\n * @version 2.0\n * @author Design System Team\n * \n * FEATURES:\n * - Mobile-first responsive design approach\n * - Display utilities for all CSS display values\n * - Visibility controls for showing/hiding elements\n * - Responsive variants for all major breakpoints\n * - Print-specific utilities for print media\n * - Screen reader utilities for accessibility\n * - Consistent breakpoint system across all utilities\n * - Performance-optimized CSS with minimal specificity\n * \n * BREAKPOINT SYSTEM:\n * - Base: 0 and up (mobile-first)\n * - sm: 640px and up (small tablets)\n * - md: 768px and up (tablets)\n * - lg: 1024px and up (laptops)\n * - xl: 1280px and up (desktops)\n * - 2xl: 1536px and up (large desktops)\n * \n * DISPLAY UTILITIES:\n * - .block: Block-level element\n * - .inline-block: Inline block element\n * - .inline: Inline element\n * - .flex: Flexbox container\n * - .inline-flex: Inline flexbox container\n * - .grid: CSS Grid container\n * - .inline-grid: Inline grid container\n * - .table: Table display\n * - .table-cell: Table cell display\n * - .table-row: Table row display\n * - .hidden: Hide element (display: none)\n * \n * VISIBILITY UTILITIES:\n * - .visible: Element is visible\n * - .invisible: Element is invisible but takes space\n * - .sr-only: Screen reader only (visually hidden)\n * - .not-sr-only: Remove screen reader only styling\n * \n * RESPONSIVE VARIANTS:\n * All display utilities are available with responsive prefixes:\n * - sm:block, md:flex, lg:grid, xl:hidden, etc.\n * - Example: .hidden.md:block (hidden on mobile, block on tablet+)\n * \n * PRINT UTILITIES:\n * - .print:block: Show as block in print\n * - .print:hidden: Hide in print\n * - .print:inline: Show as inline in print\n * \n * USAGE EXAMPLES:\n * \n * Responsive Navigation:\n * <nav class=\"hidden md:block\">\n *   <!-- Hidden on mobile, visible on tablet+ -->\n *   <ul>Navigation items</ul>\n * </nav>\n * \n * Mobile Menu Toggle:\n * <button class=\"block md:hidden\">\n *   <!-- Visible on mobile, hidden on tablet+ -->\n *   Menu Toggle\n * </button>\n * \n * Responsive Layout:\n * <div class=\"block lg:flex\">\n *   <!-- Block layout on mobile/tablet, flex on desktop -->\n *   <main class=\"lg:flex-1\">Content</main>\n *   <aside class=\"lg:flex-none\">Sidebar</aside>\n * </div>\n * \n * Progressive Enhancement:\n * <div class=\"grid-fallback block sm:grid\">\n *   <!-- Block fallback, grid on small screens+ -->\n *   <div>Item 1</div>\n *   <div>Item 2</div>\n * </div>\n * \n * Accessibility:\n * <span class=\"sr-only\">\n *   Screen reader description\n * </span>\n * <button aria-describedby=\"description\">\n *   <span class=\"sr-only\">Close dialog</span>\n *   ×\n * </button>\n * \n * Print Optimization:\n * <div class=\"print:hidden\">\n *   <!-- Hidden when printing -->\n *   <button>Interactive element</button>\n * </div>\n * \n * <div class=\"hidden print:block\">\n *   <!-- Only visible when printing -->\n *   <p>Print-specific content</p>\n * </div>\n * \n * BROWSER SUPPORT:\n * - CSS Grid: All modern browsers (IE 11+ with -ms- prefix)\n * - Flexbox: All modern browsers (IE 11+ with -ms- prefix)\n * - Media Queries: All modern browsers (IE 9+)\n * - CSS Custom Properties: All modern browsers (IE 11+ with fallbacks)\n * \n * PERFORMANCE NOTES:\n * - Mobile-first approach reduces CSS payload for mobile devices\n * - Uses min-width media queries for better performance\n * - Minimal CSS specificity prevents cascade conflicts\n * - Print styles are separated to avoid render blocking\n * \n * ACCESSIBILITY:\n * - .sr-only provides content for screen readers while hiding visually\n * - Maintains semantic HTML structure regardless of display changes\n * - Responsive visibility changes don't affect tab order\n * - Print utilities ensure important content is available in print\n * \n * INTEGRATION:\n * - Works seamlessly with layout/grid-system.css\n * - Compatible with layout/flex-layouts.css\n * - Enhanced by layout/responsive-utilities.css for layout-specific responsive variants\n * - Supports layout/containers.css responsive containers\n * \n * BEST PRACTICES:\n * - Use mobile-first approach: start with mobile styles, enhance for larger screens\n * - Combine with semantic HTML for better accessibility\n * - Test responsive behavior across all target breakpoints\n * - Use .sr-only for important context that should be available to screen readers\n * - Consider print styles for content-heavy applications\n * - Avoid excessive responsive variants that create maintenance overhead\n * \n * DEBUGGING:\n * Add temporary borders to debug responsive layouts:\n * .debug * { border: 1px solid red !important; }\n * \n * MIGRATION:\n * From older responsive systems:\n * - .show-sm → .hidden.sm:block\n * - .hide-md → .block.md:hidden\n * - .visible-lg → .hidden.lg:block\n */\n\n@layer layout.responsive {\n    /* ================= DISPLAY UTILITIES ================= */\n\n    /* Basis-Display-Eigenschaften */\n    .block { display: block; }\n\n    .inline-block { display: inline-block; }\n\n    .inline { display: inline; }\n\n    .flex { display: flex; }\n\n    .inline-flex { display: inline-flex; }\n\n    .grid { display: grid; }\n\n    .inline-grid { display: inline-grid; }\n\n    .table { display: table; }\n\n    .table-cell { display: table-cell; }\n\n    .table-row { display: table-row; }\n\n    .hidden { display: none; }\n\n    /* ================= VISIBILITY UTILITIES ================= */\n\n    /* Sichtbarkeits-Kontrollen */\n    .visible { visibility: visible; }\n\n    .invisible { visibility: hidden; }\n\n    /* Screen Reader Only - für Barrierefreiheit */\n    .sr-only {\n        border: 0;\n        clip: rect(0, 0, 0, 0);\n        height: 1px;\n        margin: -1px;\n        overflow: hidden;\n        padding: 0;\n        position: absolute;\n        white-space: nowrap;\n        width: 1px;\n    }\n\n    .not-sr-only {\n        border: initial;\n        clip: initial;\n        height: initial;\n        margin: initial;\n        overflow: initial;\n        padding: initial;\n        position: initial;\n        white-space: initial;\n        width: initial;\n    }\n\n    /* ================= RESPONSIVE BREAKPOINTS ================= */\n\n    /* Small screens (640px and up) */\n    @media (min-width: 640px) {\n        .sm\\:block { display: block; }\n\n        .sm\\:inline-block { display: inline-block; }\n\n        .sm\\:inline { display: inline; }\n\n        .sm\\:flex { display: flex; }\n\n        .sm\\:inline-flex { display: inline-flex; }\n\n        .sm\\:grid { display: grid; }\n\n        .sm\\:inline-grid { display: inline-grid; }\n\n        .sm\\:table { display: table; }\n\n        .sm\\:table-cell { display: table-cell; }\n\n        .sm\\:table-row { display: table-row; }\n\n        .sm\\:hidden { display: none; }\n        \n        .sm\\:visible { visibility: visible; }\n\n        .sm\\:invisible { visibility: hidden; }\n    }\n\n    /* Medium screens (768px and up) */\n    @media (min-width: 768px) {\n        .md\\:block { display: block; }\n\n        .md\\:inline-block { display: inline-block; }\n\n        .md\\:inline { display: inline; }\n\n        .md\\:flex { display: flex; }\n\n        .md\\:inline-flex { display: inline-flex; }\n\n        .md\\:grid { display: grid; }\n\n        .md\\:inline-grid { display: inline-grid; }\n\n        .md\\:table { display: table; }\n\n        .md\\:table-cell { display: table-cell; }\n\n        .md\\:table-row { display: table-row; }\n\n        .md\\:hidden { display: none; }\n        \n        .md\\:visible { visibility: visible; }\n\n        .md\\:invisible { visibility: hidden; }\n    }\n\n    /* Large screens (1024px and up) */\n    @media (min-width: 1024px) {\n        .lg\\:block { display: block; }\n\n        .lg\\:inline-block { display: inline-block; }\n\n        .lg\\:inline { display: inline; }\n\n        .lg\\:flex { display: flex; }\n\n        .lg\\:inline-flex { display: inline-flex; }\n\n        .lg\\:grid { display: grid; }\n\n        .lg\\:inline-grid { display: inline-grid; }\n\n        .lg\\:table { display: table; }\n\n        .lg\\:table-cell { display: table-cell; }\n\n        .lg\\:table-row { display: table-row; }\n\n        .lg\\:hidden { display: none; }\n        \n        .lg\\:visible { visibility: visible; }\n\n        .lg\\:invisible { visibility: hidden; }\n    }\n\n    /* Extra large screens (1280px and up) */\n    @media (width >= 1280px) {\n        .xl\\:block { display: block; }\n\n        .xl\\:inline-block { display: inline-block; }\n\n        .xl\\:inline { display: inline; }\n\n        .xl\\:flex { display: flex; }\n\n        .xl\\:inline-flex { display: inline-flex; }\n\n        .xl\\:grid { display: grid; }\n\n        .xl\\:inline-grid { display: inline-grid; }\n\n        .xl\\:table { display: table; }\n\n        .xl\\:table-cell { display: table-cell; }\n\n        .xl\\:table-row { display: table-row; }\n\n        .xl\\:hidden { display: none; }\n        \n        .xl\\:visible { visibility: visible; }\n\n        .xl\\:invisible { visibility: hidden; }\n    }\n\n    /* 2X large screens (1536px and up) */\n    @media (width >= 1536px) {\n        .\\32xl\\:block { display: block; }\n\n        .\\32xl\\:inline-block { display: inline-block; }\n\n        .\\32xl\\:inline { display: inline; }\n\n        .\\32xl\\:flex { display: flex; }\n\n        .\\32xl\\:inline-flex { display: inline-flex; }\n\n        .\\32xl\\:grid { display: grid; }\n\n        .\\32xl\\:inline-grid { display: inline-grid; }\n\n        .\\32xl\\:table { display: table; }\n\n        .\\32xl\\:table-cell { display: table-cell; }\n\n        .\\32xl\\:table-row { display: table-row; }\n\n        .\\32xl\\:hidden { display: none; }\n        \n        .\\32xl\\:visible { visibility: visible; }\n\n        .\\32xl\\:invisible { visibility: hidden; }\n    }\n\n    /* ================= PRINT UTILITIES ================= */\n\n    /* Print-spezifische Stile */\n    @media print {\n        .print\\:block { display: block !important; }\n\n        .print\\:inline-block { display: inline-block !important; }\n\n        .print\\:inline { display: inline !important; }\n\n        .print\\:hidden { display: none !important; }\n        \n        .print\\:visible { visibility: visible !important; }\n\n        .print\\:invisible { visibility: hidden !important; }\n    }\n} ","/*\n * Footer Module\n *\n * Layout rules for the footer area. Supports Subgrid, Container Queries and responsive behavior.\n * Combines traditional Grid layouts with modern CSS features and Design Tokens.\n */\n\n/**\n * Footer Component\n * \n * Footer components for websites and applications.\n * The footer contains additional navigation elements, contact information and legal notices.\n * \n * @layer components.footer\n * \n * Footer Types:\n * - .footer: Standard Subgrid-Layout (original)\n * - .footer-simple: Basic single-row footer\n * - .footer-columns: Multi-column layout\n * - .footer-stacked: Vertical stacking\n * - .footer-split: Left/right split layout\n * - .footer-minimal: Minimal single-line footer\n * \n * Basic Usage:\n * <footer class=\"footer\">\n *   <div class=\"logo\">\n *     <img src=\"logo.png\" alt=\"Logo\">\n *   </div>\n *   <div class=\"content\">\n *     <div class=\"section\">\n *       <h4 class=\"heading\">About Us</h4>\n *       <p>Brief company description</p>\n *     </div>\n *     <div class=\"section\">\n *       <h4 class=\"heading\">Links</h4>\n *       <ul class=\"links\">\n *         <li><a href=\"#\" class=\"link\">Home</a></li>\n *         <li><a href=\"#\" class=\"link\">Products</a></li>\n *         <li><a href=\"#\" class=\"link\">About</a></li>\n *         <li><a href=\"#\" class=\"link\">Contact</a></li>\n *       </ul>\n *     </div>\n *     <div class=\"section\">\n *       <h4 class=\"heading\">Contact</h4>\n *       <address class=\"address\">\n *         123 Example Street<br>\n *         12345 Example City<br>\n *         info@example.com\n *       </address>\n *     </div>\n *   </div>\n *   <div class=\"bottom\">\n *     <p class=\"copyright\">&copy; 2023 Company. All rights reserved.</p>\n *     <div class=\"social\">\n *       <a href=\"#\" class=\"social-link\"><!-- Social Icon 1 --></a>\n *       <a href=\"#\" class=\"social-link\"><!-- Social Icon 2 --></a>\n *     </div>\n *   </div>\n * </footer>\n * \n * Variants:\n * <footer class=\"footer light\">...</footer>\n * <footer class=\"footer dark\">...</footer>\n * <footer class=\"footer primary\">...</footer>\n * \n * Minimal Footer:\n * <footer class=\"footer minimal\">\n *   <p class=\"copyright\">&copy; 2023 Company</p>\n *   <ul class=\"legal\">\n *     <li><a href=\"#\">Imprint</a></li>\n *     <li><a href=\"#\">Privacy</a></li>\n *     <li><a href=\"#\">Terms</a></li>\n *   </ul>\n * </footer>\n */\n\n@layer tokens {\n  :root {\n    /* Footer spacing */\n    --footer-padding: var(--space-8) var(--space-4);\n    --footer-padding-compact: var(--space-6) var(--space-3);\n    --footer-padding-spacious: var(--space-12) var(--space-6);\n    --footer-gap: var(--space-6);\n    --footer-gap-compact: var(--space-4);\n    --footer-gap-spacious: var(--space-8);\n    --footer-section-gap: var(--space-4);\n    \n    /* Footer colors */\n    --footer-bg: var(--color-neutral-50);\n    --footer-text: var(--color-neutral-700, #374151);\n    --footer-heading: var(--color-neutral-900, #111827);\n    --footer-link: var(--color-primary-600, #2563eb);\n    --footer-link-hover: var(--color-primary-700, #1d4ed8);\n    --footer-border: var(--color-neutral-200, #e5e7eb);\n    \n    /* Footer typography */\n    --footer-font-size: var(--text-sm, 0.875rem);\n    --footer-line-height: 1%.6;\n    --footer-heading-size: var(--text-base);\n    --footer-heading-weight: var(--font-semibold, 600);\n    --footer-link-weight: var(--font-medium, 500);\n    \n    /* Footer layout */\n    --footer-max-width: var(--container-7xl);\n    --footer-columns: 4;\n    --footer-column-gap: var(--space-8);\n    --footer-min-height: auto;\n    \n    /* Footer themes */\n    &[data-theme=\"dark\"],\n    &.theme-dark {\n      --footer-bg: var(--color-neutral-900, #111827);\n      --footer-text: var(--color-neutral-300, #d1d5db);\n      --footer-heading: var(--color-neutral-100, #f3f4f6);\n      --footer-link: var(--color-primary-400);\n      --footer-link-hover: var(--color-primary-300);\n      --footer-border: var(--color-neutral-700, #374151);\n    }\n    \n    &[data-theme=\"primary\"],\n    &.theme-primary {\n      --footer-bg: var(--color-primary-900);\n      --footer-text: var(--color-primary-100, #dbeafe);\n      --footer-heading: var(--color-white, #fff);\n      --footer-link: var(--color-primary-200);\n      --footer-link-hover: var(--color-white, #fff);\n      --footer-border: var(--color-primary-700, #1d4ed8);\n    }\n    \n    &[data-theme=\"minimal\"],\n    &.theme-minimal {\n      --footer-bg: transparent;\n      --footer-text: var(--color-neutral-600);\n      --footer-heading: var(--color-neutral-800, #1f2937);\n      --footer-link: var(--color-neutral-700, #374151);\n      --footer-link-hover: var(--color-neutral-900, #111827);\n      --footer-border: var(--color-neutral-300, #d1d5db);\n      --footer-padding: var(--space-4) 0;\n    }\n  }\n}\n\n@layer components {\n  /* Base footer styles for all footer types */\n  .footer,\n  .footer-simple,\n  .footer-columns,\n  .footer-stacked,\n  .footer-split,\n  .footer-minimal {\n    background-color: var(--footer-bg);\n    color: var(--footer-text);\n    container-type: inline-size;\n    font-size: var(--footer-font-size);\n    line-height: var(--footer-line-height, 1.5);\n    padding: var(--footer-padding);\n    width: 100%;\n    \n    /* Typography */\n    & h1, & h2, & h3, & h4, & h5, & h6,\n    & .heading {\n      color: var(--footer-heading);\n      font-size: var(--footer-heading-size);\n      font-weight: var(--footer-heading-weight);\n      margin: 0 0 var(--footer-section-gap) 0;\n    }\n    \n    & p {\n      margin: 0 0 var(--space-3) 0;\n      \n      &:last-child {\n        margin-bottom: 0%;\n      }\n    }\n    \n    /* Links */\n    & a,\n    & .link {\n      color: var(--footer-link);\n      font-weight: var(--footer-link-weight);\n      text-decoration: none;\n      transition: color 0.2s ease;\n      \n      &:hover,\n      &:focus {\n        color: var(--footer-link-hover);\n        text-decoration: underline;\n      }\n      \n      &:focus {\n        outline: 2px solid var(--footer-link);\n        outline-offset: 2px;\n      }\n    }\n    \n    /* Lists */\n    & ul, & ol,\n    & .links {\n      list-style: none;\n      margin: 0;\n      padding: 0;\n      \n      & li {\n        margin-bottom: var(--space-2);\n        \n        &:last-child {\n          margin-bottom: 0%;\n        }\n      }\n    }\n    \n    /* Address */\n    & .address {\n      color: var(--footer-text);\n      font-style: normal;\n      line-height: 1.5;\n    }\n    \n    /* Utility modifiers */\n    &.compact {\n      padding: var(--footer-padding-compact);\n    }\n    \n    &.spacious {\n      padding: var(--footer-padding-spacious);\n    }\n    \n    /* Text alignment utilities */\n    &.center {\n      text-align: center;\n    }\n    \n    &.left {\n      text-align: left;\n    }\n    \n    &.right {\n      text-align: right;\n    }\n  }\n\n  /* Original Subgrid Footer Layout */\n  .footer {\n    border-top: 1px solid var(--footer-border);\n    display: grid;\n    gap: var(--space-4);\n    grid-column: span 12;\n    grid-template-columns: subgrid;\n    grid-template-rows: auto;\n    \n    /* Logo area */\n    & .logo {\n      grid-column: span 3;\n      \n      & img {\n        height: auto;\n        max-width: 15%0px;\n      }\n    }\n    \n    /* Content areas */\n    & .content {\n      display: grid;\n      gap: var(--space-6);\n      grid-column: span 9;\n      grid-template-columns: repeat(3, 1fr);\n    }\n    \n    /* Sections */\n    & .section {\n      display: flex;\n      flex-direction: column;\n      gap: var(--space-2);\n    }\n    \n    /* Bottom area */\n    & .bottom {\n      align-items: center;\n      border-top: 1px solid var(--footer-border);\n      display: flex;\n      grid-column: span 12;\n      justify-content: space-between;\n      margin-top: var(--space-4);\n      padding-top: var(--space-4);\n    }\n    \n    /* Copyright */\n    & .copyright {\n      color: var(--footer-text);\n      font-size: var(--text-sm, 0.875rem);\n      margin: 0;\n    }\n    \n    /* Social Media */\n    & .social {\n      display: flex;\n      gap: var(--space-3);\n      \n      & .social-link {\n        align-items: center;\n        background-color: var(--color-neutral-100, #f3f4f6);\n        border-radius: 50px;\n        color: var(--color-neutral-600);\n        display: flex;\n        height: 2rem;\n        justify-content: center;\n        transition: background-color 150ms ease, color 150ms ease;\n        width: 2rem;\n        \n        &:hover {\n          background-color: var(--color-primary, #3b82f6);\n          color: white;\n        }\n      }\n    }\n    \n    /* Legal links */\n    & .legal {\n      display: flex;\n      gap: var(--space-4);\n      \n      & a {\n        color: var(--footer-text);\n        font-size: var(--text-sm, 0.875rem);\n        \n        &:hover {\n          color: var(--footer-link-hover);\n        }\n      }\n    }\n    \n    /* Theme variants for original footer */\n    &.light {\n      background-color: var(--color-white, #fff);\n    }\n    \n    &.dark {\n      background-color: var(--color-neutral-900, #111827);\n      \n      & .heading {\n        color: var(--color-white, #fff);\n      }\n      \n      & .link, & .address {\n        color: var(--color-neutral-300, #d1d5db);\n      }\n      \n      & .link:hover {\n        color: var(--color-primary-400);\n      }\n      \n      & .bottom {\n        border-top-color: var(--color-neutral-700, #374151);\n      }\n      \n      & .copyright, & .legal a {\n        color: var(--color-neutral-400, #9ca3af);\n      }\n      \n      & .social-link {\n        background-color: var(--color-neutral-700, #374151);\n        color: var(--color-neutral-300, #d1d5db);\n      }\n    }\n    \n    &.primary {\n      background-color: var(--color-primary, #3b82f6);\n      color: var(--color-white, #fff);\n      \n      & .heading {\n        color: var(--color-white, #fff);\n      }\n      \n      & .link, & .address {\n        color: var(--color-primary-100, #dbeafe);\n      }\n      \n      & .link:hover {\n        color: var(--color-white, #fff);\n      }\n      \n      & .bottom {\n        border-top-color: var(--color-primary-600, #2563eb);\n      }\n      \n      & .copyright, & .legal a {\n        color: var(--color-primary-200);\n      }\n      \n      & .social-link {\n        background-color: var(--color-primary-600, #2563eb);\n        color: var(--color-white, #fff);\n      }\n    }\n    \n    &.minimal {\n      background-color: transparent;\n      border-top: none;\n      padding: var(--space-4) 0;\n      \n      & .bottom {\n        border-top: 1px solid var(--color-neutral-200, #e5e7eb);\n        margin-top: 0%;\n        padding-top: var(--space-4);\n      }\n    }\n    \n    /* Container Queries for original footer */\n    @container (width <= 992px) {\n      & .logo {\n        grid-column: span 12;\n        text-align: center;\n      }\n      \n      & .content {\n        grid-column: span 12;\n        grid-template-columns: repeat(2, 1fr);\n      }\n    }\n    \n    @container (width <= 768px) {\n      & .bottom {\n        flex-direction: column;\n        gap: var(--space-4);\n        text-align: center;\n      }\n      \n      & .legal {\n        flex-direction: column;\n        gap: var(--space-2);\n      }\n    }\n    \n    @container (width <= 576px) {\n      & .content {\n        grid-template-columns: 1fr;\n      }\n    }\n  }\n  \n  /* Footer content wrapper for new footer types */\n  .footer-simple,\n  .footer-columns,\n  .footer-stacked,\n  .footer-split,\n  .footer-minimal {\n    & .footer-content {\n      margin: 0 auto;\n      max-width: var(--footer-max-width, 1280px);\n      width: 100%;\n    }\n  }\n  \n  /* Footer Type: Simple */\n  .footer-simple {\n    & .footer-content {\n      align-items: center;\n      display: flex;\n      flex-wrap: wrap;\n      gap: var(--footer-gap);\n      justify-content: space-between;\n      \n      @container (width <= 768px) {\n        flex-direction: column;\n        gap: var(--footer-gap-compact);\n        text-align: center;\n      }\n    }\n    \n    & nav ul {\n      flex-direction: row;\n      gap: var(--space-4);\n      \n      @container (width <= 768px) {\n        flex-direction: column;\n        gap: var(--space-2);\n      }\n    }\n  }\n  \n  /* Footer Type: Columns */\n  .footer-columns {\n    & .footer-content {\n      display: grid;\n      gap: var(--footer-column-gap);\n      grid-template-columns: repeat(var(--footer-columns), 1fr);\n      \n      @container (width <= 1024px) {\n        grid-template-columns: repeat(2, 1fr);\n      }\n      \n      @container (width <= 768px) {\n        gap: var(--footer-gap);\n        grid-template-columns: 1fr;\n      }\n    }\n    \n    &.cols-2 {\n      --footer-columns: 2;\n      \n      @container (width <= 768px) {\n        & .footer-content {\n          grid-template-columns: 1fr;\n        }\n      }\n    }\n    \n    &.cols-3 {\n      --footer-columns: 3;\n      \n      @container (width <= 1024px) {\n        & .footer-content {\n          grid-template-columns: repeat(2, 1fr);\n        }\n      }\n      \n      @container (width <= 768px) {\n        & .footer-content {\n          grid-template-columns: 1fr;\n        }\n      }\n    }\n    \n    &.cols-4 {\n      --footer-columns: 4;\n      \n      @container (width <= 1024px) {\n        & .footer-content {\n          grid-template-columns: repeat(2, 1fr);\n        }\n      }\n      \n      @container (width <= 768px) {\n        & .footer-content {\n          grid-template-columns: 1fr;\n        }\n      }\n    }\n    \n    & section {\n      & h4 {\n        border-bottom: 2px solid var(--footer-border);\n        margin-bottom: var(--space-3);\n        padding-bottom: var(--space-2);\n      }\n    }\n  }\n  \n  /* Footer Type: Stacked */\n  .footer-stacked {\n    & .footer-content {\n      display: flex;\n      flex-direction: column;\n      gap: var(--footer-gap);\n      text-align: center;\n      \n      & > * {\n        border-bottom: 1px solid var(--footer-border);\n        padding-bottom: var(--footer-gap);\n        \n        &:last-child {\n          border-bottom: none;\n          padding-bottom: 0%;\n        }\n      }\n    }\n    \n    & nav ul {\n      flex-flow: row wrap;\n      gap: var(--space-4);\n      justify-content: center;\n      \n      @container (width <= 768px) {\n        flex-direction: column;\n        gap: var(--space-2);\n      }\n    }\n  }\n  \n  /* Footer Type: Split */\n  .footer-split {\n    & .footer-content {\n      align-items: center;\n      display: flex;\n      justify-content: space-between;\n      \n      @container (width <= 768px) {\n        flex-direction: column;\n        gap: var(--footer-gap);\n        text-align: center;\n      }\n    }\n    \n    & .footer-left {\n      display: flex;\n      flex-direction: column;\n      gap: var(--space-2);\n      \n      @container (width <= 768px) {\n        align-items: center;\n      }\n    }\n    \n    & .footer-right {\n      display: flex;\n      flex-direction: column;\n      gap: var(--space-2);\n      \n      @container (width <= 768px) {\n        align-items: center;\n      }\n    }\n    \n    & nav ul {\n      flex-direction: row;\n      gap: var(--space-4);\n      \n      @container (width <= 768px) {\n        flex-direction: column;\n        gap: var(--space-2);\n      }\n    }\n  }\n  \n  /* Footer Type: Minimal */\n  .footer-minimal {\n    background-color: transparent;\n    border-top: 1px solid var(--footer-border);\n    padding: var(--space-4) 0;\n    \n    & .footer-content {\n      align-items: center;\n      display: flex;\n      justify-content: space-between;\n      \n      @container (width <= 768px) {\n        flex-direction: column;\n        gap: var(--space-3);\n        text-align: center;\n      }\n    }\n    \n    & nav ul {\n      flex-direction: row;\n      gap: var(--space-4);\n      \n      @container (width <= 768px) {\n        flex-direction: column;\n        gap: var(--space-2);\n      }\n    }\n  }\n  \n  /* Theme variants for all footer types */\n  .footer-simple,\n  .footer-columns,\n  .footer-stacked,\n  .footer-split,\n  .footer-minimal {\n    &.theme-dark {\n      background-color: var(--color-neutral-900, #111827);\n      color: var(--color-neutral-300, #d1d5db);\n      \n      & h1, & h2, & h3, & h4, & h5, & h6 {\n        color: var(--color-neutral-100, #f3f4f6);\n      }\n      \n      & a {\n        color: var(--color-primary-400);\n        \n        &:hover,\n        &:focus {\n          color: var(--color-primary-300);\n        }\n      }\n      \n      & .footer-content section h4 {\n        border-bottom-color: var(--color-neutral-700, #374151);\n      }\n      \n      &.footer-minimal {\n        border-top-color: var(--color-neutral-700, #374151);\n      }\n      \n      & .footer-stacked .footer-content > * {\n        border-bottom-color: var(--color-neutral-700, #374151);\n      }\n    }\n    \n    &.theme-primary {\n      background-color: var(--color-primary-900);\n      color: var(--color-primary-100, #dbeafe);\n      \n      & h1, & h2, & h3, & h4, & h5, & h6 {\n        color: var(--color-white, #fff);\n      }\n      \n      & a {\n        color: var(--color-primary-200);\n        \n        &:hover,\n        &:focus {\n          color: var(--color-white, #fff);\n        }\n      }\n      \n      & .footer-content section h4 {\n        border-bottom-color: var(--color-primary-700, #1d4ed8);\n      }\n      \n      &.footer-minimal {\n        border-top-color: var(--color-primary-700, #1d4ed8);\n      }\n      \n      & .footer-stacked .footer-content > * {\n        border-bottom-color: var(--color-primary-700, #1d4ed8);\n      }\n    }\n    \n    &.theme-minimal {\n      background-color: transparent;\n      color: var(--color-neutral-600);\n      \n      & h1, & h2, & h3, & h4, & h5, & h6 {\n        color: var(--color-neutral-800, #1f2937);\n      }\n      \n      & a {\n        color: var(--color-neutral-700, #374151);\n        \n        &:hover,\n        &:focus {\n          color: var(--color-neutral-900, #111827);\n        }\n      }\n      \n      & .footer-content section h4 {\n        border-bottom-color: var(--color-neutral-300, #d1d5db);\n      }\n      \n      &.footer-minimal {\n        border-top-color: var(--color-neutral-300, #d1d5db);\n      }\n      \n      & .footer-stacked .footer-content > * {\n        border-bottom-color: var(--color-neutral-300, #d1d5db);\n      }\n    }\n  }\n}\n\n/* Fallback support for browsers without Container Queries */\n@supports not (container-type: inline-size) {\n  @media (max-width: 1200px) {\n    .footer-columns.cols-4 .footer-content {\n      grid-template-columns: repeat(2, 1fr);\n    }\n  }\n  \n  @media (width <= 1024px) {\n    .footer-columns .footer-content {\n      grid-template-columns: repeat(2, 1fr);\n    }\n    \n    .footer-columns.cols-3 .footer-content {\n      grid-template-columns: repeat(2, 1fr);\n    }\n  }\n  \n  @media (max-width: 768px) {\n    .footer-simple .footer-content {\n      flex-direction: column;\n      gap: var(--footer-gap-compact);\n      text-align: center;\n    }\n    \n    .footer-simple nav ul,\n    .footer-stacked nav ul,\n    .footer-split nav ul,\n    .footer-minimal nav ul {\n      flex-direction: column;\n      gap: var(--space-2);\n    }\n    \n    .footer-columns .footer-content,\n    .footer-columns.cols-2 .footer-content,\n    .footer-columns.cols-3 .footer-content,\n    .footer-columns.cols-4 .footer-content {\n      grid-template-columns: 1fr;\n    }\n    \n    .footer-split .footer-content {\n      flex-direction: column;\n      gap: var(--footer-gap);\n      text-align: center;\n    }\n    \n    .footer-split .footer-left,\n    .footer-split .footer-right {\n      align-items: center;\n    }\n    \n    .footer-minimal .footer-content {\n      flex-direction: column;\n      gap: var(--space-3);\n      text-align: center;\n    }\n  }\n}\n\n/* Print styles */\n@media print {\n  .footer,\n  .footer-simple,\n  .footer-columns,\n  .footer-stacked,\n  .footer-split,\n  .footer-minimal {\n    background: white !important;\n    border-top: 1px solid var(--color-neutral-900, #111827);\n    color: var(--color-neutral-900, #111827) !important;\n    \n    & a {\n      color: var(--color-neutral-900, #111827) !important;\n      text-decoration: underline;\n    }\n    \n    & .footer-content {\n      gap: var(--space-4);\n      \n      & > * {\n        break-inside: avoid;\n      }\n    }\n  }\n}\n\n/* High contrast mode */\n@media (prefers-contrast: more) {\n  .footer,\n  .footer-simple,\n  .footer-columns,\n  .footer-stacked,\n  .footer-split,\n  .footer-minimal {\n    border-top: 2px solid;\n    \n    & a {\n      text-decoration: underline;\n    }\n    \n    & .footer-content section h4 {\n      border-bottom-width: 3px;\n    }\n  }\n}\n\n/* Reduced motion */\n@media (prefers-reduced-motion: reduce) {\n  .footer,\n  .footer-simple,\n  .footer-columns,\n  .footer-stacked,\n  .footer-split,\n  .footer-minimal {\n    & a {\n      transition: none;\n    }\n  }\n}\n\n","/**\n * Container Layout System\n * \n * A comprehensive container system providing responsive width constraints,\n * positioning utilities, and specialized container types for modern web layouts.\n * This system consolidates all container-related functionality into a unified\n * and maintainable solution.\n * \n * @layer layout.containers\n * @version 2.0\n * @author Design System Team\n * \n * FEATURES:\n * - Responsive container system with breakpoint-based max-widths\n * - Fluid containers that adapt to viewport width\n * - Positioned containers for overlays and modals\n * - Visual containers with styling and effects\n * - Functional containers for specific UI patterns\n * - Z-index management system for layering\n * - CSS custom properties for easy customization\n * - Mobile-first responsive design approach\n * \n * CONTAINER TYPES:\n * \n * BASE CONTAINERS:\n * - .container: Responsive container with max-width constraints\n * - .container-fluid: Full-width container without max-width\n * - .container-sm: Small container (max-width: 64%0px)\n * - .container-md: Medium container (max-width: 768px)\n * - .container-lg: Large container (max-width: 102%4px)\n * - .container-xl: Extra large container (max-width: 128%0px)\n * - .container-2xl: 2X large container (max-width: 153%6px)\n * \n * RESPONSIVE CONTAINERS:\n * - .container-responsive: Adapts max-width at each breakpoint\n * - Automatically adjusts width based on screen size\n * - Includes horizontal padding for mobile spacing\n * \n * POSITIONED CONTAINERS:\n * - .container-fixed: Fixed positioning container\n * - .container-absolute: Absolute positioning container\n * - .container-relative: Relative positioning container\n * - .container-sticky: Sticky positioning container\n * - .container-centered: Centered positioning with transforms\n * \n * VISUAL CONTAINERS:\n * - .container-card: Card-style container with shadow and border\n * - .container-bordered: Container with border styling\n * - .container-rounded: Container with rounded corners\n * - .container-shadow: Container with drop shadow\n * - .container-elevated: Container with elevation effect\n * \n * FUNCTIONAL CONTAINERS:\n * - .container-modal: Modal dialog container\n * - .container-toast: Toast notification container\n * - .container-dropdown: Dropdown menu container\n * - .container-tooltip: Tooltip container\n * - .container-popover: Popover container\n * - .container-sidebar: Sidebar container\n * - .container-header: Header container\n * - .container-footer: Footer container\n * \n * RESPONSIVE BREAKPOINTS:\n * - sm: 640px and up\n * - md: 768px and up\n * - lg: 1024px and up\n * - xl: 1280px and up\n * - 2xl: 1536px and up\n * \n * USAGE EXAMPLES:\n * \n * Basic Container:\n * <div class=\"container\">\n *   <h1>Page Title</h1>\n *   <p>Content with responsive width constraints</p>\n * </div>\n * \n * Responsive Container:\n * <div class=\"container-responsive\">\n *   <!-- Adapts width at each breakpoint -->\n *   <main>Main content</main>\n * </div>\n * \n * Modal Container:\n * <div class=\"container-modal\">\n *   <div class=\"container-card\">\n *     <h2>Modal Title</h2>\n *     <p>Modal content</p>\n *   </div>\n * </div>\n * \n * Card Layout:\n * <div class=\"container-card container-rounded\">\n *   <h3>Card Title</h3>\n *   <p>Card content with styling</p>\n * </div>\n * \n * Sidebar Layout:\n * <aside class=\"container-sidebar\">\n *   <nav>Navigation items</nav>\n * </aside>\n * \n * CUSTOMIZATION:\n * Override CSS custom properties to customize containers:\n * \n * :root {\n *   --container-padding: 1rem;\n *   --container-max-width: 120%0px;\n *   --container-border-radius: 0.5rem;\n *   --container-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);\n * }\n * \n * BROWSER SUPPORT:\n * - CSS Custom Properties: All modern browsers (IE 11+ with fallbacks)\n * - CSS Grid: All modern browsers (IE 11+ with -ms- prefix)\n * - Container Queries: Chrome 105+, Firefox 110+, Safari 16+\n * - Backdrop Filter: Chrome 76+, Firefox 103+, Safari 9+\n * \n * PERFORMANCE NOTES:\n * - Use container queries for component-based responsive design\n * - Backdrop filters can impact performance on mobile devices\n * - Z-index values are optimized to prevent stacking conflicts\n * - CSS custom properties enable efficient theming\n * \n * ACCESSIBILITY:\n * - Containers maintain semantic HTML structure\n * - Modal containers include proper ARIA attributes\n * - Focus management for overlay containers\n * - Keyboard navigation support\n * - Screen reader compatibility\n * \n * INTEGRATION:\n * - Works with layout/grid-system.css for grid layouts\n * - Compatible with layout/flex-layouts.css for flex layouts\n * - Enhanced by layout/spacing.css for margin/padding utilities\n * - Supports layout/responsive-utilities.css for responsive variants\n * \n * Z-INDEX SYSTEM:\n * - Base content: 1-10\n * - Dropdowns: 1000-1010\n * - Sticky elements: 1020-1030\n * - Fixed headers: 1040-1050\n * - Overlays: 1060-1070\n * - Modals: 1080-1090\n * - Tooltips: 1100-1110\n * - Toasts: 1120-1130\n * \n * BEST PRACTICES:\n * - Use semantic container classes for specific UI patterns\n * - Combine container types for complex layouts\n * - Test responsive behavior across all breakpoints\n * - Ensure proper z-index layering for overlays\n * - Maintain accessibility standards for interactive containers\n * - Use CSS custom properties for consistent theming\n */\n\n@layer layout.containers {\n    /* ================= BASE CONTAINERS ================= */\n\n    /* Standard-Container mit maximaler Breite */\n    .container {\n        margin-left: auto;\n        margin-right: auto;\n        max-width: var(--container-max-width, 1200px);\n        padding-left: var(--container-padding, 1rem);\n        padding-right: var(--container-padding, 1rem);\n        width: 100%;\n    }\n\n    /* Fluid-Container ohne maximale Breite */\n    .container-fluid {\n        margin-left: auto;\n        margin-right: auto;\n        padding-left: var(--container-padding, 1rem);\n        padding-right: var(--container-padding, 1rem);\n        width: 100%;\n    }\n\n    /* Container mit festen Größen */\n    .container-sm {\n        margin-left: auto;\n        margin-right: auto;\n        max-width: var(--container-sm, 640px);\n        padding-left: var(--container-padding, 1rem);\n        padding-right: var(--container-padding, 1rem);\n        width: 100%;\n    }\n\n    .container-md {\n        margin-left: auto;\n        margin-right: auto;\n        max-width: var(--container-md, 768px);\n        padding-left: var(--container-padding, 1rem);\n        padding-right: var(--container-padding, 1rem);\n        width: 100%;\n    }\n\n    .container-lg {\n        margin-left: auto;\n        margin-right: auto;\n        max-width: var(--container-lg, 1024px);\n        padding-left: var(--container-padding, 1rem);\n        padding-right: var(--container-padding, 1rem);\n        width: 100%;\n    }\n\n    .container-xl {\n        margin-left: auto;\n        margin-right: auto;\n        max-width: var(--container-xl, 1280px);\n        padding-left: var(--container-padding, 1rem);\n        padding-right: var(--container-padding, 1rem);\n        width: 100%;\n    }\n\n    .container-2xl {\n        margin-left: auto;\n        margin-right: auto;\n        max-width: var(--container-2xl, 1536px);\n        padding-left: var(--container-padding, 1rem);\n        padding-right: var(--container-padding, 1rem);\n        width: 100%;\n    }\n\n    /* ================= RESPONSIVE CONTAINERS ================= */\n\n    /* Container Query Support */\n    .container-query {\n        container-name: main;\n        container-type: inline-size;\n    }\n\n    .container-query-size {\n        container-type: size;\n    }\n\n    .container-query-normal {\n        container-type: normal;\n    }\n\n    /* Responsive Container mit anpassbarer maximaler Breite */\n    .container-responsive {\n        margin-left: auto;\n        margin-right: auto;\n        padding-left: var(--container-padding, 1rem);\n        padding-right: var(--container-padding, 1rem);\n        width: 100%;\n    }\n\n    @media (min-width: 640px) {\n        .container-responsive {\n            max-width: var(--container-sm, 640px);\n        }\n    }\n\n    @media (min-width: 768px) {\n        .container-responsive {\n            max-width: var(--container-md, 768px);\n        }\n    }\n\n    @media (min-width: 1024px) {\n        .container-responsive {\n            max-width: var(--container-lg, 1024px);\n        }\n    }\n\n    @media (width >= 1280px) {\n        .container-responsive {\n            max-width: var(--container-xl, 1280px);\n        }\n    }\n\n    @media (width >= 1536px) {\n        .container-responsive {\n            max-width: var(--container-2xl, 1536px);\n        }\n    }\n\n    /* ================= POSITIONED CONTAINERS ================= */\n\n    /* Container mit verschiedenen Positionierungen */\n    .container-fixed {\n        position: fixed;\n    }\n\n    .container-absolute {\n        position: absolute;\n    }\n\n    .container-relative {\n        position: relative;\n    }\n\n    .container-sticky {\n        position: sticky;\n        top: 0%;\n        z-index: var(--z-sticky, 1020);\n    }\n\n    /* Zentrierter Container */\n    .container-centered {\n        left: 50%;\n        position: absolute;\n        top: 50%;\n        transform: translate(-50%, -50);\n    }\n\n    /* ================= VISUAL CONTAINERS ================= */\n\n    /* Container mit visuellen Stilen */\n    .container-card {\n        background: var(--container-bg, #fff);\n        border: 1px solid var(--container-border-color, #e5e7eb);\n        border-radius: var(--container-border-radius, 0.5rem);\n        box-shadow: var(--container-shadow, 0 1px 3px rgb(0 0 0 / 0.1));\n        padding: var(--container-card-padding, 1.5rem);\n    }\n\n    .container-bordered {\n        border: 1px solid var(--container-border-color, #e5e7eb);\n    }\n\n    .container-rounded {\n        border-radius: var(--container-border-radius, 0.5rem);\n    }\n\n    .container-shadow {\n        box-shadow: var(--container-shadow, 0 4px 6px rgb(0 0 0 / 0.1));\n    }\n\n    .container-elevated {\n        box-shadow: var(--container-elevated-shadow, 0 10px 25px rgb(0 0 0 / 15%));\n        transform: translateY(-2px);\n        transition: all 0.3s ease;\n    }\n\n    .container-elevated:hover {\n        box-shadow: var(--container-elevated-hover-shadow, 0 20px 40px rgb(0 0 0 / 0.2));\n        transform: translateY(-4px);\n    }\n\n    /* ================= FUNCTIONAL CONTAINERS ================= */\n\n    /* Modal-Container */\n    .container-modal {\n        align-items: center;\n        backdrop-filter: blur(4px);\n        background: rgb(0 0 0 / 0.5);\n        display: flex;\n        height: 100%;\n        justify-content: center;\n        left: 0%;\n        position: fixed;\n        top: 0%;\n        width: 100vw;\n        z-index: var(--z-modal, 1060);\n    }\n\n    /* Toast-Container */\n    .container-toast {\n        background: var(--container-bg, #fff);\n        border-radius: var(--container-border-radius, 0.5rem);\n        box-shadow: var(--container-elevated-shadow, 0 10px 15px rgb(0 0 0 / 0.1));\n        max-width: var(--modal-max-width, 32rem);\n        padding: var(--container-card-padding, 1.5rem);\n        position: fixed;\n        right: 1rem;\n        top: 1rem;\n        z-index: var(--z-toast, 1080);\n    }\n\n    /* Dropdown-Container */\n    .container-dropdown {\n        background: var(--container-bg, #fff);\n        border: 1px solid var(--container-border-color, #e5e7eb);\n        border-radius: var(--container-border-radius, 0.5rem);\n        box-shadow: var(--container-shadow, 0 1px 3px rgb(0 0 0 / 0.1));\n        position: absolute;\n        z-index: var(--z-dropdown, 1000);\n    }\n\n    /* Tooltip-Container */\n    .container-tooltip {\n        background: var(--container-bg, #fff);\n        border: 1px solid var(--container-border-color, #e5e7eb);\n        border-radius: var(--container-border-radius, 0.5rem);\n        box-shadow: var(--container-shadow, 0 1px 3px rgb(0 0 0 / 0.1));\n        max-width: var(--tooltip-max-width, 20rem);\n        padding: var(--space-2, 0.5rem);\n        position: absolute;\n        z-index: var(--z-tooltip, 1070);\n    }\n\n    /* Popover-Container */\n    .container-popover {\n        background: var(--container-bg, #fff);\n        border: 1px solid var(--container-border-color, #e5e7eb);\n        border-radius: var(--container-border-radius, 0.5rem);\n        box-shadow: var(--container-elevated-shadow, 0 10px 15px rgb(0 0 0 / 0.1));\n        max-width: var(--popover-max-width, 24rem);\n        padding: var(--container-card-padding, 1.5rem);\n        position: absolute;\n        z-index: var(--z-popover, 1040);\n    }\n\n    /* Sidebar-Container */\n    .container-sidebar {\n        background: var(--container-bg, #fff);\n        border-right: 1px solid var(--container-border-color, #e5e7eb);\n        height: 100%;\n        position: fixed;\n        width: var(--sidebar-width, 16rem);\n        z-index: var(--z-fixed, 1000);\n    }\n\n    /* Header-Container */\n    .container-header {\n        background: var(--container-bg, #fff);\n        border-bottom: 1px solid var(--container-border-color, #e5e7eb);\n        height: var(--header-height, 4rem);\n        position: fixed;\n        width: 100%;\n        z-index: var(--z-fixed, 1000);\n    }\n\n    /* Footer-Container */\n    .container-footer {\n        background: var(--container-bg, #fff);\n        border-top: 1px solid var(--container-border-color, #e5e7eb);\n        height: var(--footer-height, 4rem);\n        position: relative;\n        width: 100%;\n    }\n\n    /* ================= Z-INDEX MANAGEMENT ================= */\n\n    /* Z-Index-Variablen für konsistente Layering */\n    :root {\n        --z-base: 1;\n        --z-dropdown: 1000;\n        --z-sticky: 1020;\n        --z-header: 1050;\n        --z-sidebar: 1040;\n        --z-popover: 1060;\n        --z-overlay: 1070;\n        --z-modal: 1080;\n        --z-tooltip: 1100;\n        --z-toast: 1120;\n    }\n\n    /* Z-Index Utilities */\n    .z-0 { z-index: 0; }\n\n    .z-10 { z-index: 10; }\n\n    .z-20 { z-index: 20; }\n\n    .z-30 { z-index: 30; }\n\n    .z-40 { z-index: 40; }\n\n    .z-50 { z-index: 50; }\n\n    .z-auto { z-index: auto; }\n\n    /* Spezielle Z-Index-Klassen */\n    .z-dropdown { z-index: var(--z-dropdown, 1000); }\n\n    .z-sticky { z-index: var(--z-sticky, 1010); }\n\n    .z-header { z-index: var(--z-header, 1020); }\n\n    .z-sidebar { z-index: var(--z-sidebar, 1030); }\n\n    .z-popover { z-index: var(--z-popover, 1040); }\n\n    .z-overlay { z-index: var(--z-overlay, 1050); }\n\n    .z-modal { z-index: var(--z-modal, 1060); }\n\n    .z-tooltip { z-index: var(--z-tooltip, 1070); }\n\n    .z-toast { z-index: var(--z-toast, 1080); }\n}\n","/**\n * Code-Komponente\n * \n * Formatierung für Code-Blöcke und Inline-Code-Elemente.\n * Code-Komponenten stellen Quellcode und Code-Schnipsel übersichtlich dar.\n * \n * @layer components.code\n * \n * Grundlegende Verwendung:\n * <pre class=\"code\">\n *   <code>function example() {\n *     return \"Hello World\";\n *   }</code>\n * </pre>\n * \n * Inline-Code:\n * <p>Verwenden Sie <code class=\"code-inline\">console.log()</code> zum Debuggen.</p>\n * \n * Mit Syntax-Hervorhebung (erfordert zusätzliches JS):\n * <pre class=\"code highlighted\">\n *   <code class=\"language-javascript\">\n *     function example() {\n *       return \"Hello World\";\n *     }\n *   </code>\n * </pre>\n * \n * Mit Zeilennummern:\n * <pre class=\"code numbered\">\n *   <div class=\"line-numbers\">1</div>\n *   <code>function example() {</code>\n *   <div class=\"line-numbers\">2</div>\n *   <code>  return \"Hello World\";</code>\n *   <div class=\"line-numbers\">3</div>\n *   <code>}</code>\n * </pre>\n * \n * Varianten:\n * <pre class=\"code dark\">Dunkles Theme</pre>\n * <pre class=\"code light\">Helles Theme</pre>\n * \n * Mit Kopierknopf:\n * <div class=\"code-container\">\n *   <pre class=\"code\">...</pre>\n *   <button class=\"copy-button\">Kopieren</button>\n * </div>\n * \n * Terminal-Output:\n * <pre class=\"code terminal\">\n *   <code>$ npm install @casoon/ui-lib</code>\n * </pre>\n */\n\n@layer components {\n  /* Inline-Code */\n  .code-inline {\n    background: var(--color-neutral-100, #f3f4f6);\n    border-radius: var(--radius-sm, 0.125rem);\n    color: var(--color-primary-700, #1d4ed8);\n    font-family: var(--font-mono);\n    font-size: var(--text-sm, 0.875rem);\n    padding: var(--space-1) var(--space-2);\n  }\n  \n  /* Code-Block */\n  .code {\n    background: var(--color-neutral-100, #f3f4f6);\n    border: 1px solid var(--color-neutral-200, #e5e7eb);\n    border-radius: var(--radius-md, 0.375rem);\n    color: var(--color-neutral-800, #1f2937);\n    display: block;\n    font-family: var(--font-mono);\n    font-size: var(--text-sm, 0.875rem);\n    line-height: 1%.4;\n    margin: var(--space-4) 0;\n    overflow-x: auto;\n    padding: var(--space-4);\n    \n    pre {\n      margin: 0;\n    }\n    \n    code {\n      display: block;\n      font-family: inherit;\n    }\n    \n    /* Zeilennummern */\n    &.numbered {\n      display: grid;\n      gap: var(--space-4);\n      grid-template-columns: auto 1fr;\n      \n      .line-numbers {\n        border-right: 1px solid var(--color-neutral-300, #d1d5db);\n        color: var(--color-neutral-500, #6b7280);\n        padding-right: var(--space-2);\n        text-align: right;\n        user-select: none;\n      }\n    }\n    \n    /* Varianten */\n    &.dark {\n      background-color: var(--color-neutral-900, #111827);\n      border-color: var(--color-neutral-800, #1f2937);\n      color: var(--color-neutral-100, #f3f4f6);\n    }\n    \n    &.light {\n      background-color: var(--color-white, #fff);\n      border-color: var(--color-neutral-200, #e5e7eb);\n      color: var(--color-neutral-900, #111827);\n    }\n    \n    &.terminal {\n      background-color: var(--color-neutral-900, #111827);\n      border-color: var(--color-neutral-800, #1f2937);\n      color: var(--color-neutral-100, #f3f4f6);\n      \n      &::before {\n        color: var(--color-neutral-500, #6b7280);\n        content: '>';\n        margin-right: var(--space-2);\n      }\n    }\n    \n    &.highlighted {\n      /* Beispielfarben für Syntax-Hervorhebung - diese würden normalerweise\n         durch eine JavaScript-Bibliothek wie Prism.js oder Highlight.js gesetzt */\n      .keyword { color: var(--color-primary-600, #2563eb); }\n\n      .string { color: var(--color-success-600); }\n\n      .comment { color: var(--color-neutral-500, #6b7280); font-style: italic; }\n\n      .function { color: var(--color-secondary-600); }\n\n      .number { color: var(--color-warning-600); }\n    }\n  }\n  \n  /* Container mit Kopierknopf */\n  .code-container {\n    position: relative;\n    \n    .copy-button {\n      background-color: var(--color-neutral-200, #e5e7eb);\n      border: none;\n      border-radius: var(--radius-sm, 0.125rem);\n      color: var(--color-neutral-700, #374151);\n      cursor: pointer;\n      font-size: var(--text-xs, 0.75rem);\n      opacity: 0%;\n      padding: var(--space-1) var(--space-2);\n      position: absolute;\n      right: var(--space-2);\n      top: var(--space-2);\n      transition: opacity 150ms ease;\n      \n      &:hover {\n        background-color: var(--color-neutral-300, #d1d5db);\n        color: var(--color-neutral-900, #111827);\n      }\n    }\n    \n    &:hover .copy-button {\n      opacity: 1;\n    }\n  }\n}\n\n\n","/**\n * Spacing Properties with @property Definitions\n * \n * Typed CSS custom properties for spacing using @property.\n * This enables better tooling support, autocomplete, and animation capabilities.\n * \n * @layer tokens.properties\n */\n\n@layer tokens.properties {\n  /* Base Spacing Properties - Complete Scale */\n  @property --space-0 {\n    inherits: true;\n    initial-value: 0;\n    syntax: '<length>';\n  }\n  \n  @property --space-px {\n    inherits: true;\n    initial-value: 1px;\n    syntax: '<length>';\n  }\n  \n  @property --space-1 {\n    inherits: true;\n    initial-value: 0.25rem;\n    syntax: '<length>';\n  }\n  \n  @property --space-2 {\n    inherits: true;\n    initial-value: 0.5rem;\n    syntax: '<length>';\n  }\n  \n  @property --space-3 {\n    inherits: true;\n    initial-value: 0.75rem;\n    syntax: '<length>';\n  }\n  \n  @property --space-4 {\n    inherits: true;\n    initial-value: 1rem;\n    syntax: '<length>';\n  }\n  \n  @property --space-5 {\n    inherits: true;\n    initial-value: 1.25rem;\n    syntax: '<length>';\n  }\n  \n  @property --space-6 {\n    inherits: true;\n    initial-value: 1.5rem;\n    syntax: '<length>';\n  }\n  \n  @property --space-7 {\n    inherits: true;\n    initial-value: 1.75rem;\n    syntax: '<length>';\n  }\n  \n  @property --space-8 {\n    inherits: true;\n    initial-value: 2rem;\n    syntax: '<length>';\n  }\n  \n  @property --space-9 {\n    inherits: true;\n    initial-value: 2.25rem;\n    syntax: '<length>';\n  }\n  \n  @property --space-10 {\n    inherits: true;\n    initial-value: 2.5rem;\n    syntax: '<length>';\n  }\n  \n  @property --space-11 {\n    inherits: true;\n    initial-value: 2.75rem;\n    syntax: '<length>';\n  }\n  \n  @property --space-12 {\n    inherits: true;\n    initial-value: 3rem;\n    syntax: '<length>';\n  }\n  \n  @property --space-14 {\n    inherits: true;\n    initial-value: 3.5rem;\n    syntax: '<length>';\n  }\n  \n  @property --space-16 {\n    inherits: true;\n    initial-value: 4rem;\n    syntax: '<length>';\n  }\n  \n  @property --space-20 {\n    inherits: true;\n    initial-value: 5rem;\n    syntax: '<length>';\n  }\n  \n  @property --space-24 {\n    inherits: true;\n    initial-value: 6rem;\n    syntax: '<length>';\n  }\n  \n  @property --space-28 {\n    inherits: true;\n    initial-value: 7rem;\n    syntax: '<length>';\n  }\n  \n  @property --space-32 {\n    inherits: true;\n    initial-value: 8rem;\n    syntax: '<length>';\n  }\n  \n  @property --space-36 {\n    inherits: true;\n    initial-value: 9rem;\n    syntax: '<length>';\n  }\n  \n  @property --space-40 {\n    inherits: true;\n    initial-value: 10rem;\n    syntax: '<length>';\n  }\n  \n  @property --space-44 {\n    inherits: true;\n    initial-value: 11rem;\n    syntax: '<length>';\n  }\n  \n  @property --space-48 {\n    inherits: true;\n    initial-value: 12rem;\n    syntax: '<length>';\n  }\n  \n  @property --space-52 {\n    inherits: true;\n    initial-value: 13rem;\n    syntax: '<length>';\n  }\n  \n  @property --space-56 {\n    inherits: true;\n    initial-value: 14rem;\n    syntax: '<length>';\n  }\n  \n  @property --space-60 {\n    inherits: true;\n    initial-value: 15rem;\n    syntax: '<length>';\n  }\n  \n  @property --space-64 {\n    inherits: true;\n    initial-value: 16rem;\n    syntax: '<length>';\n  }\n  \n  @property --space-72 {\n    inherits: true;\n    initial-value: 18rem;\n    syntax: '<length>';\n  }\n  \n  @property --space-80 {\n    inherits: true;\n    initial-value: 20rem;\n    syntax: '<length>';\n  }\n  \n  @property --space-96 {\n    inherits: true;\n    initial-value: 24rem;\n    syntax: '<length>';\n  }\n  \n  /* Large spacing for special cases */\n  @property --space-large-200 {\n    inherits: true;\n    initial-value: 200px;\n    syntax: '<length>';\n  }\n\n  @property --space-large-30rem {\n    inherits: true;\n    initial-value: 30rem;\n    syntax: '<length>';\n  }\n\n  @property --space-small-10px {\n    inherits: true;\n    initial-value: 10px;\n    syntax: '<length>';\n  }\n  \n  /* Semantic Spacing Aliases */\n  @property --space-xs {\n    inherits: true;\n    initial-value: 0.25rem;\n    syntax: '<length>';\n  }\n  \n  @property --space-sm {\n    inherits: true;\n    initial-value: 0.5rem;\n    syntax: '<length>';\n  }\n  \n  @property --space-md {\n    inherits: true;\n    initial-value: 1rem;\n    syntax: '<length>';\n  }\n  \n  @property --space-lg {\n    inherits: true;\n    initial-value: 1.5rem;\n    syntax: '<length>';\n  }\n  \n  @property --space-xl {\n    inherits: true;\n    initial-value: 2rem;\n    syntax: '<length>';\n  }\n  \n  @property --space-2xl {\n    inherits: true;\n    initial-value: 3rem;\n    syntax: '<length>';\n  }\n  \n  @property --space-3xl {\n    inherits: true;\n    initial-value: 4rem;\n    syntax: '<length>';\n  }\n  \n  /* Component-Specific Spacing Properties */\n  @property --space-button-padding-x {\n    inherits: true;\n    initial-value: 1rem;\n    syntax: '<length>';\n  }\n  \n  @property --space-button-padding-y {\n    inherits: true;\n    initial-value: 0.5rem;\n    syntax: '<length>';\n  }\n  \n  @property --space-card-padding {\n    inherits: true;\n    initial-value: 1.5rem;\n    syntax: '<length>';\n  }\n  \n  @property --space-form-gap {\n    inherits: true;\n    initial-value: 1rem;\n    syntax: '<length>';\n  }\n  \n  @property --space-section-gap {\n    inherits: true;\n    initial-value: 3rem;\n    syntax: '<length>';\n  }\n  \n  @property --space-input-padding {\n    inherits: true;\n    initial-value: 0.75rem;\n    syntax: '<length>';\n  }\n  \n  @property --space-modal-padding {\n    inherits: true;\n    initial-value: 1.5rem;\n    syntax: '<length>';\n  }\n  \n  /* Gap Properties */\n  @property --space-gap-xs {\n    inherits: true;\n    initial-value: 0.25rem;\n    syntax: '<length>';\n  }\n  \n  @property --space-gap-sm {\n    inherits: true;\n    initial-value: 0.5rem;\n    syntax: '<length>';\n  }\n  \n  @property --space-gap-md {\n    inherits: true;\n    initial-value: 1rem;\n    syntax: '<length>';\n  }\n  \n  @property --space-gap-lg {\n    inherits: true;\n    initial-value: 1.5rem;\n    syntax: '<length>';\n  }\n  \n  @property --space-gap-xl {\n    inherits: true;\n    initial-value: 2rem;\n    syntax: '<length>';\n  }\n  \n  /* Layout Spacing Properties */\n  @property --space-container-padding {\n    inherits: true;\n    initial-value: 1rem;\n    syntax: '<length>';\n  }\n  \n  @property --space-grid-gap {\n    inherits: true;\n    initial-value: 1rem;\n    syntax: '<length>';\n  }\n  \n  @property --space-flex-gap {\n    inherits: true;\n    initial-value: 1rem;\n    syntax: '<length>';\n  }\n  \n  /* Animatable Spacing Properties */\n  @property --space-transition-padding {\n    inherits: true;\n    initial-value: 1rem;\n    syntax: '<length>';\n  }\n  \n  @property --space-transition-margin {\n    inherits: true;\n    initial-value: 1rem;\n    syntax: '<length>';\n  }\n  \n  @property --space-transition-gap {\n    inherits: true;\n    initial-value: 1rem;\n    syntax: '<length>';\n  }\n  \n  /* Initial Value Definitions */\n  :root {\n    /* Base Spacing Scale */\n    --space-0: 0;\n    --space-px: 1px;\n    --space-1: 0.25rem;\n    --space-2: 0.5rem;\n    --space-3: 0.75rem;\n    --space-4: 1rem;\n    --space-5: 1.25rem;\n    --space-6: 1.5rem;\n    --space-7: 1.75rem;\n    --space-8: 2rem;\n    --space-9: 2.25rem;\n    --space-10: 2.5rem;\n    --space-11: 2.75rem;\n    --space-12: 3rem;\n    --space-14: 3.5rem;\n    --space-16: 4rem;\n    --space-20: 5rem;\n    --space-24: 6rem;\n    --space-28: 7rem;\n    --space-32: 8rem;\n    --space-36: 9rem;\n    --space-40: 10rem;\n    --space-44: 11rem;\n    --space-48: 12rem;\n    --space-52: 13rem;\n    --space-56: 14rem;\n    --space-60: 15rem;\n    --space-64: 16rem;\n    --space-72: 18rem;\n    --space-80: 20rem;\n    --space-96: 24rem;\n    \n    /* Component Spacing */\n    --space-button-padding-x: var(--space-md);\n    --space-button-padding-y: var(--space-sm);\n    --space-card-padding: var(--space-lg);\n    --space-form-gap: var(--space-md);\n    --space-section-gap: var(--space-3xl);\n    \n    /* Layout Spacing */\n    --space-container-padding: var(--space-md);\n    --space-grid-gap: var(--space-md);\n    --space-flex-gap: var(--space-md);\n    \n    /* Transition Spacing */\n    --space-transition-padding: var(--space-md);\n    --space-transition-margin: var(--space-md);\n    --space-transition-gap: var(--space-md);\n  }\n} ","/*\n * Widget-Komponente\n *\n * Flexible Boxen für Dashboards und Seitenlayouts.\n */\n\n/**\n * Widget-Komponente\n * \n * Wiederverwendbare UI-Widgets für modulare Benutzeroberflächen.\n * Widgets sind eigenständige Komponenten, die bestimmte Funktionen oder Inhalte kapseln.\n * \n * @layer components.widget\n * \n * Grundlegende Verwendung:\n * <div class=\"widget\">\n *   <div class=\"header\">Widget-Titel</div>\n *   <div class=\"body\">Widget-Inhalt</div>\n *   <div class=\"footer\">Widget-Fußzeile</div>\n * </div>\n * \n * Varianten:\n * <div class=\"widget primary\">Primär-Widget</div>\n * <div class=\"widget secondary\">Sekundär-Widget</div>\n * <div class=\"widget light\">Helles Widget</div>\n * <div class=\"widget dark\">Dunkles Widget</div>\n * \n * Größen:\n * <div class=\"widget sm\">Klein</div>\n * <div class=\"widget md\">Mittel (Standard)</div>\n * <div class=\"widget lg\">Groß</div>\n * <div class=\"widget full\">Volle Breite</div>\n * \n * Zustände:\n * <div class=\"widget loading\">Ladend</div>\n * <div class=\"widget collapsed\">Eingeklappt</div>\n * <div class=\"widget expanded\">Ausgeklappt</div>\n * \n * Widget mit Aktionsbuttons:\n * <div class=\"widget\">\n *   <div class=\"header\">\n *     <h3 class=\"title\">Statistik</h3>\n *     <div class=\"actions\">\n *       <button class=\"action\">Aktualisieren</button>\n *       <button class=\"action\">Einklappen</button>\n *     </div>\n *   </div>\n *   <div class=\"body\">...</div>\n * </div>\n */\n\n/* Animation - außerhalb von @layer definieren */\n\n/* Komponenten-Styles */\n@layer components {\n  .widget {\n    background-color: var(--color-white, #fff);\n    border: 1px solid var(--color-neutral-200, #e5e7eb);\n    border-radius: var(--radius-md, 0.375rem);\n    box-shadow: var(--shadow-sm, 0 1px 2px 0 rgb(0 0 0 / 0.05));\n    overflow: hidden;\n    \n    /* Strukturelemente */\n    .header {\n      align-items: center;\n      background-color: var(--color-neutral-50);\n      border-bottom: 1px solid var(--color-neutral-200, #e5e7eb);\n      display: flex;\n      justify-content: space-between;\n      padding: var(--space-3) var(--space-4);\n      \n      .title {\n        font-size: var(--text-base);\n        font-weight: var(--font-medium, 500);\n        margin: 0;\n      }\n      \n      .actions {\n        display: flex;\n        gap: var(--space-2);\n        \n        .action {\n          background: none;\n          border: none;\n          border-radius: var(--radius-sm, 0.125rem);\n          color: var(--color-neutral-600);\n          cursor: pointer;\n          font-size: var(--text-sm, 0.875rem);\n          padding: var(--space-1) var(--space-2);\n          \n          &:hover {\n            background-color: var(--color-neutral-200, #e5e7eb);\n            color: var(--color-neutral-800, #1f2937);\n          }\n        }\n      }\n    }\n    \n    .body {\n      padding: var(--space-4);\n    }\n    \n    .footer {\n      background-color: var(--color-neutral-50);\n      border-top: 1px solid var(--color-neutral-200, #e5e7eb);\n      color: var(--color-neutral-600);\n      font-size: var(--text-sm, 0.875rem);\n      padding: var(--space-3) var(--space-4);\n    }\n    \n    /* Farbvarianten */\n    &.primary {\n      border-color: var(--color-primary, #3b82f6);\n      \n      .header {\n        background-color: var(--color-primary, #3b82f6);\n        color: white;\n      }\n    }\n    \n    &.secondary {\n      border-color: var(--color-secondary);\n      \n      .header {\n        background-color: var(--color-secondary);\n        color: white;\n      }\n    }\n    \n    &.light {\n      background-color: var(--color-white, #fff);\n      border-color: var(--color-neutral-100, #f3f4f6);\n      \n      .header {\n        background-color: var(--color-white, #fff);\n        border-bottom-color: var(--color-neutral-100, #f3f4f6);\n      }\n    }\n    \n    &.dark {\n      background-color: var(--color-neutral-800, #1f2937);\n      border-color: var(--color-neutral-700, #374151);\n      color: white;\n      \n      .header {\n        background-color: var(--color-neutral-900, #111827);\n        border-bottom-color: var(--color-neutral-700, #374151);\n      }\n      \n      .footer {\n        background-color: var(--color-neutral-900, #111827);\n        border-top-color: var(--color-neutral-700, #374151);\n        color: var(--color-neutral-300, #d1d5db);\n      }\n    }\n    \n    /* Größenvarianten */\n    &.sm {\n      .header {\n        padding: var(--space-2) var(--space-3);\n        \n        .title {\n          font-size: var(--text-sm, 0.875rem);\n        }\n      }\n      \n      .body {\n        padding: var(--space-3);\n      }\n      \n      .footer {\n        font-size: var(--text-xs, 0.75rem);\n        padding: var(--space-2) var(--space-3);\n      }\n    }\n    \n    &.lg {\n      .header {\n        padding: var(--space-4) var(--space-5);\n        \n        .title {\n          font-size: var(--text-lg);\n        }\n      }\n      \n      .body {\n        padding: var(--space-5);\n      }\n      \n      .footer {\n        padding: var(--space-4) var(--space-5);\n      }\n    }\n    \n    &.full {\n      width: 100%;\n    }\n    \n    /* Zustände */\n    &.loading {\n      opacity: 0.7;\n      position: relative;\n    }\n    \n    &.collapsed {\n      .body, .footer {\n        display: none;\n      }\n      \n      .header {\n        border-bottom: none;\n      }\n    }\n    \n    &.highlight {\n      background-color: color-mix(in oklab, var(--color-primary, #3b82f6), white 90);\n      border-color: var(--color-primary, #3b82f6);\n    }\n  }\n}\n\n/* Animations-Styles */\n@layer animations {\n  .widget {\n    &.loading::after {\n      animation: var(--ui-loading-animation, loading var(--animation-duration-slowest, 1500ms) infinite);\n      background: linear-gradient(90deg, var(--color-primary, #3b82f6), transparent);\n      content: \"\";\n      height: 3px;\n      left: 0%;\n      position: absolute;\n      top: 0%;\n      width: 100%;\n    }\n  }\n}","/**\n * Theme Tokens\n * \n * Comprehensive theme-specific tokens that extend the base design tokens.\n * These tokens provide a semantic layer for theme variants and enable\n * consistent theming across all components.\n * \n * @layer tokens.themes\n */\n\n@layer tokens.themes {\n  /* ================= THEME COLOR TOKENS ================= */\n  \n  /* Primary Theme Colors */\n  @property --theme-primary {\n    inherits: true;\n    initial-value: #4f46e5;\n    syntax: '<color>';\n  }\n  \n  @property --theme-primary-hover {\n    inherits: true;\n    initial-value: #4338ca;\n    syntax: '<color>';\n  }\n  \n  @property --theme-primary-active {\n    inherits: true;\n    initial-value: #3730a3;\n    syntax: '<color>';\n  }\n  \n  @property --theme-secondary {\n    inherits: true;\n    initial-value: #7c3aed;\n    syntax: '<color>';\n  }\n  \n  @property --theme-secondary-hover {\n    inherits: true;\n    initial-value: #6d28d9;\n    syntax: '<color>';\n  }\n  \n  @property --theme-secondary-active {\n    inherits: true;\n    initial-value: #5b21b6;\n    syntax: '<color>';\n  }\n  \n  /* Theme Surface Colors */\n  @property --theme-background {\n    inherits: true;\n    initial-value: #fff;\n    syntax: '<color>';\n  }\n  \n  @property --theme-background-subtle {\n    inherits: true;\n    initial-value: #f8fafc;\n    syntax: '<color>';\n  }\n  \n  @property --theme-surface {\n    inherits: true;\n    initial-value: #f1f5f9;\n    syntax: '<color>';\n  }\n  \n  @property --theme-surface-elevated {\n    inherits: true;\n    initial-value: #fff;\n    syntax: '<color>';\n  }\n  \n  @property --theme-surface-overlay {\n    inherits: true;\n    initial-value: rgb(255 255 255 / 9000%);\n    syntax: '<color>';\n  }\n  \n  /* Theme Text Colors */\n  @property --theme-text {\n    inherits: true;\n    initial-value: #1e293b;\n    syntax: '<color>';\n  }\n  \n  @property --theme-text-muted {\n    inherits: true;\n    initial-value: #64748b;\n    syntax: '<color>';\n  }\n  \n  @property --theme-text-subtle {\n    inherits: true;\n    initial-value: #94a3b8;\n    syntax: '<color>';\n  }\n  \n  @property --theme-text-inverse {\n    inherits: true;\n    initial-value: #fff;\n    syntax: '<color>';\n  }\n  \n  @property --theme-text-on-primary {\n    inherits: true;\n    initial-value: #fff;\n    syntax: '<color>';\n  }\n  \n  /* Theme Border Colors */\n  @property --theme-border {\n    inherits: true;\n    initial-value: #e2e8f0;\n    syntax: '<color>';\n  }\n  \n  @property --theme-border-strong {\n    inherits: true;\n    initial-value: #cbd5e1;\n    syntax: '<color>';\n  }\n  \n  @property --theme-border-subtle {\n    inherits: true;\n    initial-value: #f1f5f9;\n    syntax: '<color>';\n  }\n  \n  @property --theme-border-focus {\n    inherits: true;\n    initial-value: #4f46e5;\n    syntax: '<color>';\n  }\n  \n  /* ================= THEME EFFECT TOKENS ================= */\n  \n  /* Theme Shadows */\n  @property --theme-shadow-color {\n    inherits: true;\n    initial-value: rgb(0 0 0);\n    syntax: '<color>';\n  }\n  \n  @property --theme-shadow-opacity-sm {\n    inherits: true;\n    initial-value: 0.05;\n    syntax: '<number>';\n  }\n  \n  @property --theme-shadow-opacity-md {\n    inherits: true;\n    initial-value: 0.1;\n    syntax: '<number>';\n  }\n  \n  @property --theme-shadow-opacity-lg {\n    inherits: true;\n    initial-value: 0.15;\n    syntax: '<number>';\n  }\n  \n  @property --theme-shadow-opacity-xl {\n    inherits: true;\n    initial-value: 0.25;\n    syntax: '<number>';\n  }\n  \n  /* Theme Focus Effects */\n  @property --theme-focus-ring {\n    inherits: true;\n    initial-value: #4f46e5;\n    syntax: '<color>';\n  }\n  \n  @property --theme-focus-glow {\n    inherits: true;\n    initial-value: rgb(79 70 229 / 3000%);\n    syntax: '<color>';\n  }\n  \n  @property --theme-focus-ring-width {\n    inherits: true;\n    initial-value: 2px;\n    syntax: '<length>';\n  }\n  \n  @property --theme-focus-ring-offset {\n    inherits: true;\n    initial-value: 2px;\n    syntax: '<length>';\n  }\n  \n  /* Theme Backdrop Effects */\n  @property --theme-backdrop {\n    inherits: true;\n    initial-value: rgb(0 0 0 / 5000%);\n    syntax: '<color>';\n  }\n  \n  @property --theme-backdrop-blur {\n    inherits: true;\n    initial-value: 8px;\n    syntax: '<length>';\n  }\n  \n  /* Theme Gradient Colors */\n  @property --theme-gradient-start {\n    inherits: true;\n    initial-value: #4f46e5;\n    syntax: '<color>';\n  }\n  \n  @property --theme-gradient-end {\n    inherits: true;\n    initial-value: #7c3aed;\n    syntax: '<color>';\n  }\n  \n  @property --theme-gradient-accent {\n    inherits: true;\n    initial-value: #3b82f6;\n    syntax: '<color>';\n  }\n  \n  /* ================= THEME INTERACTION TOKENS ================= */\n  \n  /* Theme Hover States */\n  @property --theme-hover-opacity {\n    inherits: true;\n    initial-value: 0.8;\n    syntax: '<number>';\n  }\n  \n  @property --theme-hover-scale {\n    inherits: true;\n    initial-value: 1.05;\n    syntax: '<number>';\n  }\n  \n  /* Theme Active States */\n  @property --theme-active-opacity {\n    inherits: true;\n    initial-value: 0.9;\n    syntax: '<number>';\n  }\n  \n  @property --theme-active-scale {\n    inherits: true;\n    initial-value: 0.95;\n    syntax: '<number>';\n  }\n  \n  /* Theme Disabled States */\n  @property --theme-disabled-opacity {\n    inherits: true;\n    initial-value: 0.5;\n    syntax: '<number>';\n  }\n  \n  /* ================= THEME TRANSITION TOKENS ================= */\n  \n  /* Theme Transition Durations */\n  @property --theme-transition-fast {\n    inherits: true;\n    initial-value: 150ms;\n    syntax: '<time>';\n  }\n  \n  @property --theme-transition-normal {\n    inherits: true;\n    initial-value: 250ms;\n    syntax: '<time>';\n  }\n  \n  @property --theme-transition-slow {\n    inherits: true;\n    initial-value: 400ms;\n    syntax: '<time>';\n  }\n  \n  /* Theme Transition Easings */\n  @property --theme-ease-out {\n    inherits: true;\n    initial-value: cubic-bezier(0, 0, 0.2, 1);\n    syntax: '<custom-ident>';\n  }\n  \n  @property --theme-ease-in {\n    inherits: true;\n    initial-value: cubic-bezier(0.4, 0, 1, 1);\n    syntax: '<custom-ident>';\n  }\n  \n  @property --theme-ease-in-out {\n    inherits: true;\n    initial-value: cubic-bezier(0.4, 0, 0.2, 1);\n    syntax: '<custom-ident>';\n  }\n  \n  /* ================= THEME STATUS TOKENS ================= */\n  \n  /* Success Theme Colors */\n  @property --theme-success {\n    inherits: true;\n    initial-value: #10b981;\n    syntax: '<color>';\n  }\n  \n  @property --theme-success-bg {\n    inherits: true;\n    initial-value: #ecfdf5;\n    syntax: '<color>';\n  }\n  \n  @property --theme-success-border {\n    inherits: true;\n    initial-value: #a7f3d0;\n    syntax: '<color>';\n  }\n  \n  /* Warning Theme Colors */\n  @property --theme-warning {\n    inherits: true;\n    initial-value: #f59e0b;\n    syntax: '<color>';\n  }\n  \n  @property --theme-warning-bg {\n    inherits: true;\n    initial-value: #fffbeb;\n    syntax: '<color>';\n  }\n  \n  @property --theme-warning-border {\n    inherits: true;\n    initial-value: #fed7aa;\n    syntax: '<color>';\n  }\n  \n  /* Error Theme Colors */\n  @property --theme-error {\n    inherits: true;\n    initial-value: #ef4444;\n    syntax: '<color>';\n  }\n  \n  @property --theme-error-bg {\n    inherits: true;\n    initial-value: #fef2f2;\n    syntax: '<color>';\n  }\n  \n  @property --theme-error-border {\n    inherits: true;\n    initial-value: #fecaca;\n    syntax: '<color>';\n  }\n  \n  /* Info Theme Colors */\n  @property --theme-info {\n    inherits: true;\n    initial-value: #3b82f6;\n    syntax: '<color>';\n  }\n  \n  @property --theme-info-bg {\n    inherits: true;\n    initial-value: #eff6ff;\n    syntax: '<color>';\n  }\n  \n  @property --theme-info-border {\n    inherits: true;\n    initial-value: #bfdbfe;\n    syntax: '<color>';\n  }\n  \n  /* ================= THEME VARIANT TOKENS ================= */\n  \n  /* Light Theme Variant */\n  @property --theme-variant-light-bg {\n    inherits: true;\n    initial-value: #fff;\n    syntax: '<color>';\n  }\n  \n  @property --theme-variant-light-text {\n    inherits: true;\n    initial-value: #1e293b;\n    syntax: '<color>';\n  }\n  \n  /* Dark Theme Variant */\n  @property --theme-variant-dark-bg {\n    inherits: true;\n    initial-value: #1e293b;\n    syntax: '<color>';\n  }\n  \n  @property --theme-variant-dark-text {\n    inherits: true;\n    initial-value: #f1f5f9;\n    syntax: '<color>';\n  }\n  \n  /* High Contrast Theme Variant */\n  @property --theme-variant-contrast-bg {\n    inherits: true;\n    initial-value: #000;\n    syntax: '<color>';\n  }\n  \n  @property --theme-variant-contrast-text {\n    inherits: true;\n    initial-value: #fff;\n    syntax: '<color>';\n  }\n}\n","/*\n * Transitions Mixins\n *\n * Mixins für Übergänge und Animationen.\n * Diese Mixins können in anderen CSS-Dateien verwendet werden.\n */\n\n@layer utilities.mixins {\n  /* Transition-Mixins */\n  @define-mixin transition-base {\n    transition-duration: var(--transition-normal, 300ms);\n    transition-property: color, background-color, border-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter;\n    transition-timing-function: var(--transition-timing-ease, ease);\n  }\n\n  @define-mixin transition-fast {\n    transition-duration: var(--transition-fast, 150ms);\n    transition-property: color, background-color, border-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter;\n    transition-timing-function: var(--transition-timing-ease, ease);\n  }\n\n  @define-mixin transition-slow {\n    transition-duration: var(--transition-slow, 500ms);\n    transition-property: color, background-color, border-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter;\n    transition-timing-function: var(--transition-timing-ease, ease);\n  }\n\n  /* Spezifische Transition-Mixins */\n  @define-mixin transition-transform {\n    transition-duration: var(--transition-normal, 300ms);\n    transition-property: transform;\n    transition-timing-function: var(--transition-timing-ease, ease);\n  }\n\n  @define-mixin transition-opacity {\n    transition-duration: var(--transition-normal, 300ms);\n    transition-property: opacity;\n    transition-timing-function: var(--transition-timing-ease, ease);\n  }\n\n  @define-mixin transition-colors {\n    transition-duration: var(--transition-normal, 300ms);\n    transition-property: color, background-color, border-color, fill, stroke;\n    transition-timing-function: var(--transition-timing-ease, ease);\n  }\n\n  @define-mixin transition-shadow {\n    transition-duration: var(--transition-normal, 300ms);\n    transition-property: box-shadow;\n    transition-timing-function: var(--transition-timing-ease, ease);\n  }\n\n  /* Animation-Mixins */\n  @define-mixin animation-fadeIn {\n    animation-duration: 300ms;\n    animation-fill-mode: both;\n    animation-name: fadeIn;\n    animation-timing-function: ease-out;\n  }\n\n  @define-mixin animation-scaleIn {\n    animation-duration: 300ms;\n    animation-fill-mode: both;\n    animation-name: scaleIn;\n    animation-timing-function: ease-out;\n  }\n\n  @define-mixin animation-slideInUp {\n    animation-duration: 300ms;\n    animation-fill-mode: both;\n    animation-name: slideInUp;\n    animation-timing-function: ease-out;\n  }\n\n  @define-mixin animation-pulse {\n    animation-duration: 2s;\n    animation-iteration-count: infinite;\n    animation-name: pulse;\n    animation-timing-function: ease-in-out;\n  }\n} ","/*\n * Layout Mixins\n *\n * Mixins für Layout-Strukturen und -Muster.\n * Diese Mixins können in anderen CSS-Dateien verwendet werden.\n */\n\n@layer utilities.mixins {\n  /* Grid-Mixins */\n  @define-mixin grid-columns $columns {\n    display: grid;\n    gap: var(--grid-gutter);\n    grid-template-columns: repeat($columns, 1fr);\n  }\n\n  @define-mixin grid-auto-fit $minWidth {\n    display: grid;\n    gap: var(--grid-gutter);\n    grid-template-columns: repeat(auto-fit, minmax($minWidth, 1fr));\n  }\n\n  @define-mixin grid-auto-fill $minWidth {\n    display: grid;\n    gap: var(--grid-gutter);\n    grid-template-columns: repeat(auto-fill, minmax($minWidth, 1fr));\n  }\n\n  /* Flex-Mixins */\n  @define-mixin flex-row {\n    display: flex;\n    flex-direction: row;\n  }\n\n  @define-mixin flex-column {\n    display: flex;\n    flex-direction: column;\n  }\n\n  @define-mixin flex-center {\n    align-items: center;\n    display: flex;\n    justify-content: center;\n  }\n\n  @define-mixin flex-between {\n    align-items: center;\n    display: flex;\n    justify-content: space-between;\n  }\n\n  @define-mixin flex-around {\n    align-items: center;\n    display: flex;\n    justify-content: space-around;\n  }\n\n  @define-mixin flex-end {\n    align-items: center;\n    display: flex;\n    justify-content: flex-end;\n  }\n\n  /* Positionierungs-Mixins */\n  @define-mixin absolute-center {\n    left: 50%;\n    position: absolute;\n    top: 50%;\n    transform: translate(-50%, -50);\n  }\n\n  @define-mixin absolute-cover {\n    inset: 0;\n    position: absolute;\n  }\n\n  @define-mixin fixed-cover {\n    inset: 0;\n    position: fixed;\n  }\n\n  /* Container-Mixins */\n  @define-mixin container {\n    margin-inline: auto;\n    max-width: var(--container-lg);\n    padding-inline: var(--container-padding-md);\n    width: 100%;\n  }\n\n  @define-mixin container-sm {\n    @mixin container;\n\n    max-width: var(--container-sm);\n  }\n\n  @define-mixin container-md {\n    @mixin container;\n\n    max-width: var(--container-md);\n  }\n\n  @define-mixin container-lg {\n    @mixin container;\n\n    max-width: var(--container-lg);\n  }\n\n  @define-mixin container-xl {\n    @mixin container;\n\n    max-width: var(--container-xl);\n  }\n\n  @define-mixin container-2xl {\n    @mixin container;\n\n    max-width: var(--container-2xl);\n  }\n} ","/*\n * Responsive Mixins\n *\n * Mixins für responsive Design-Anpassungen.\n * Diese Mixins können in anderen CSS-Dateien verwendet werden.\n */\n\n@layer utilities.mixins {\n  /* Container-Query-Mixins */\n  @define-mixin container-query-sm {\n    @container layout (max-width: 640px) {\n      @mixin-content;\n    }\n  }\n\n  @define-mixin container-query-md {\n    @container layout (min-width: 641px) and (max-width: 768px) {\n      @mixin-content;\n    }\n  }\n\n  @define-mixin container-query-lg {\n    @container layout (min-width: 769px) and (max-width: 1024px) {\n      @mixin-content;\n    }\n  }\n\n  @define-mixin container-query-xl {\n    @container layout (min-width: 1025px) and (max-width: 1280px) {\n      @mixin-content;\n    }\n  }\n\n  @define-mixin container-query-2xl {\n    @container layout (min-width: 1281px) {\n      @mixin-content;\n    }\n  }\n\n  /* Komponent-Query-Mixins */\n  @define-mixin component-query-sm {\n    @container component (max-width: 400px) {\n      @mixin-content;\n    }\n  }\n\n  @define-mixin component-query-md {\n    @container component (min-width: 401px) and (max-width: 600px) {\n      @mixin-content;\n    }\n  }\n\n  @define-mixin component-query-lg {\n    @container component (min-width: 601px) {\n      @mixin-content;\n    }\n  }\n\n  /* Viewport-Media-Query-Mixins */\n  @define-mixin viewport-sm {\n    @media (max-width: 640px) {\n      @mixin-content;\n    }\n  }\n\n  @define-mixin viewport-md {\n    @media (width >= 641px) and (width <= 768px) {\n      @mixin-content;\n    }\n  }\n\n  @define-mixin viewport-lg {\n    @media (width >= 769px) and (width <= 1024px) {\n      @mixin-content;\n    }\n  }\n\n  @define-mixin viewport-xl {\n    @media (width >= 1025px) and (width <= 1280px) {\n      @mixin-content;\n    }\n  }\n\n  @define-mixin viewport-2xl {\n    @media (width >= 1281px) {\n      @mixin-content;\n    }\n  }\n} ","/*\n * Spacing Variables\n *\n * Abstandsvariablen für die Utilities.\n * Diese Variables ermöglichen eine konsistente Verwendung von Abständen in den Utility-Klassen.\n */\n\n@layer utilities.variables {\n  :root {\n    /* Basis-Abstände */\n    --util-space-0: var(--space-0);\n    --util-space-px: var(--space-px);\n    --util-space-1: var(--space-1);\n    --util-space-2: var(--space-2);\n    --util-space-3: var(--space-3);\n    --util-space-4: var(--space-4);\n    --util-space-5: var(--space-5);\n    --util-space-6: var(--space-6);\n    --util-space-8: var(--space-8);\n    --util-space-10: var(--space-10);\n    --util-space-12: var(--space-12);\n    --util-space-16: var(--space-16);\n    --util-space-20: var(--space-20);\n    --util-space-24: var(--space-24);\n    --util-space-32: var(--space-32);\n    --util-space-40: var(--space-40);\n    --util-space-48: var(--space-48);\n    --util-space-56: var(--space-56);\n    --util-space-64: var(--space-64);\n    \n    /* Komponentenspezifische Abstände */\n    --util-card-padding: var(--space-4);\n    --util-button-padding-x: var(--space-4);\n    --util-button-padding-y: var(--space-2);\n    --util-input-padding: var(--space-3);\n    --util-modal-padding: var(--space-6);\n    \n    /* Gaps */\n    --util-gap-xs: var(--space-1);\n    --util-gap-sm: var(--space-2);\n    --util-gap-md: var(--space-4);\n    --util-gap-lg: var(--space-6);\n    --util-gap-xl: var(--space-8);\n  }\n} ","/*\n * Typography Variables\n *\n * Typografie-Variablen für die Utilities.\n * Diese Variables ermöglichen eine konsistente Verwendung von Typografie in den Utility-Klassen.\n */\n\n@layer utilities.variables {\n  :root {\n    /* Schriftgrößen */\n    --util-font-size-xs: var(--font-size-xs);\n    --util-font-size-sm: var(--font-size-sm);\n    --util-font-size-base: var(--font-size-base);\n    --util-font-size-lg: var(--font-size-lg);\n    --util-font-size-xl: var(--font-size-xl);\n    --util-font-size-2xl: var(--font-size-2xl);\n    --util-font-size-3xl: var(--font-size-3xl);\n    --util-font-size-4xl: var(--font-size-4xl);\n    --util-font-size-5xl: var(--font-size-5xl);\n    \n    /* Schriftgewichte */\n    --util-font-weight-normal: var(--font-weight-normal);\n    --util-font-weight-medium: var(--font-weight-medium);\n    --util-font-weight-semibold: var(--font-weight-semibold);\n    --util-font-weight-bold: var(--font-weight-bold);\n    \n    /* Zeilenhöhen */\n    --util-line-height-none: var(--line-height-none);\n    --util-line-height-tight: var(--line-height-tight);\n    --util-line-height-snug: var(--line-height-snug);\n    --util-line-height-normal: var(--line-height-normal);\n    --util-line-height-relaxed: var(--line-height-relaxed);\n    --util-line-height-loose: var(--line-height-loose);\n    \n    /* Schriftfamilien */\n    --util-font-family-sans: var(--font-family-sans);\n    --util-font-family-serif: var(--font-family-serif);\n    --util-font-family-mono: var(--font-family-mono);\n    \n    /* Buchstabenabstände */\n    --util-letter-spacing-tight: var(--letter-spacing-tight, -0.025em);\n    --util-letter-spacing-normal: var(--letter-spacing-normal, 0);\n    --util-letter-spacing-wide: var(--letter-spacing-wide, 0.025em);\n    --util-letter-spacing-wider: var(--letter-spacing-wider, 0.05em);\n    --util-letter-spacing-widest: var(--letter-spacing-widest, 0.1em);\n  }\n} ","/*\n * Spacing Utilities\n *\n * Atomare CSS-Klassen für Padding und Margin.\n * Basiert auf den Design-Tokens aus :root für volle Konsistenz.\n */\n\n@layer utilities.helpers {\n  /* ================= PADDING ================= */\n  \n  /* Padding - All sides */\n  .p-0  { padding: var(--space-0); }\n\n  .p-px { padding: var(--space-px); }\n\n  .p-1  { padding: var(--space-1); }\n\n  .p-2  { padding: var(--space-2); }\n\n  .p-3  { padding: var(--space-3); }\n\n  .p-4  { padding: var(--space-4); }\n\n  .p-5  { padding: var(--space-5); }\n\n  .p-6  { padding: var(--space-6); }\n\n  .p-8  { padding: var(--space-8); }\n\n  .p-10 { padding: var(--space-10); }\n\n  .p-12 { padding: var(--space-12); }\n\n  .p-16 { padding: var(--space-16); }\n\n  .p-20 { padding: var(--space-20); }\n\n  .p-24 { padding: var(--space-24); }\n\n  .p-32 { padding: var(--space-32); }\n\n  .p-40 { padding: var(--space-40); }\n\n  .p-48 { padding: var(--space-48); }\n\n  .p-56 { padding: var(--space-56); }\n\n  .p-64 { padding: var(--space-64); }\n\n  /* Padding - Directions (top, right, bottom, left) */\n  .pt-0  { padding-top: var(--space-0); }\n\n  .pt-px { padding-top: var(--space-px); }\n\n  .pt-1  { padding-top: var(--space-1); }\n\n  .pt-2  { padding-top: var(--space-2); }\n\n  .pt-3  { padding-top: var(--space-3); }\n\n  .pt-4  { padding-top: var(--space-4); }\n\n  .pt-5  { padding-top: var(--space-5); }\n\n  .pt-6  { padding-top: var(--space-6); }\n\n  .pt-8  { padding-top: var(--space-8); }\n\n  .pt-10 { padding-top: var(--space-10); }\n\n  .pt-12 { padding-top: var(--space-12); }\n\n  .pt-16 { padding-top: var(--space-16); }\n\n  .pt-20 { padding-top: var(--space-20); }\n\n  .pt-24 { padding-top: var(--space-24); }\n\n  .pt-32 { padding-top: var(--space-32); }\n\n  .pt-40 { padding-top: var(--space-40); }\n\n  .pt-48 { padding-top: var(--space-48); }\n\n  .pt-56 { padding-top: var(--space-56); }\n\n  .pt-64 { padding-top: var(--space-64); }\n\n  /* Padding rechts, unten, links ähnlich definiert... */\n  .pr-0  { padding-right: var(--space-0); }\n\n  .pr-px { padding-right: var(--space-px); }\n\n  /* ... weitere pr-Klassen ... */\n\n  .pb-0  { padding-bottom: var(--space-0); }\n\n  .pb-px { padding-bottom: var(--space-px); }\n\n  /* ... weitere pb-Klassen ... */\n\n  .pl-0  { padding-left: var(--space-0); }\n\n  .pl-px { padding-left: var(--space-px); }\n\n  /* ... weitere pl-Klassen ... */\n\n  /* Padding - X-Achse (links und rechts) */\n  .px-0  { padding-left: var(--space-0); padding-right: var(--space-0); }\n\n  .px-px { padding-left: var(--space-px); padding-right: var(--space-px); }\n\n  .px-1  { padding-left: var(--space-1); padding-right: var(--space-1); }\n\n  /* ... weitere px-Klassen ... */\n\n  /* Padding - Y-Achse (oben und unten) */\n  .py-0  { padding-bottom: var(--space-0); padding-top: var(--space-0); }\n\n  .py-px { padding-bottom: var(--space-px); padding-top: var(--space-px); }\n\n  .py-1  { padding-bottom: var(--space-1); padding-top: var(--space-1); }\n\n  /* ... weitere py-Klassen ... */\n\n  /* ================= MARGIN ================= */\n  \n  /* Margin - All sides */\n  .m-0  { margin: var(--space-0); }\n\n  .m-px { margin: var(--space-px); }\n\n  .m-1  { margin: var(--space-1); }\n\n  .m-2  { margin: var(--space-2); }\n\n  .m-3  { margin: var(--space-3); }\n\n  .m-4  { margin: var(--space-4); }\n\n  .m-5  { margin: var(--space-5); }\n\n  .m-6  { margin: var(--space-6); }\n\n  .m-8  { margin: var(--space-8); }\n\n  .m-10 { margin: var(--space-10); }\n\n  .m-12 { margin: var(--space-12); }\n\n  .m-16 { margin: var(--space-16); }\n\n  .m-20 { margin: var(--space-20); }\n\n  .m-24 { margin: var(--space-24); }\n\n  .m-32 { margin: var(--space-32); }\n\n  .m-40 { margin: var(--space-40); }\n\n  .m-48 { margin: var(--space-48); }\n\n  .m-56 { margin: var(--space-56); }\n\n  .m-64 { margin: var(--space-64); }\n\n  /* Margin - Directions (top, right, bottom, left) */\n  .mt-0  { margin-top: var(--space-0); }\n\n  .mt-px { margin-top: var(--space-px); }\n\n  /* ... weitere mt-Klassen ... */\n\n  .mr-0  { margin-right: var(--space-0); }\n\n  .mr-px { margin-right: var(--space-px); }\n\n  /* ... weitere mr-Klassen ... */\n\n  .mb-0  { margin-bottom: var(--space-0); }\n\n  .mb-px { margin-bottom: var(--space-px); }\n\n  /* ... weitere mb-Klassen ... */\n\n  .ml-0  { margin-left: var(--space-0); }\n\n  .ml-px { margin-left: var(--space-px); }\n\n  /* ... weitere ml-Klassen ... */\n\n  /* Margin - X-Achse (links und rechts) */\n  .mx-0  { margin-left: var(--space-0); margin-right: var(--space-0); }\n\n  .mx-px { margin-left: var(--space-px); margin-right: var(--space-px); }\n\n  /* ... weitere mx-Klassen ... */\n  .mx-auto { margin-left: auto; margin-right: auto; }\n\n  /* Margin - Y-Achse (oben und unten) */\n  .my-0  { margin-bottom: var(--space-0); margin-top: var(--space-0); }\n\n  .my-px { margin-bottom: var(--space-px); margin-top: var(--space-px); }\n\n  /* ... weitere my-Klassen ... */\n  .my-auto { margin-bottom: auto; margin-top: auto; }\n\n  /* Negative Margins */\n  .m-n1  { margin: calc(var(--space-1) * -1); }\n\n  .m-n2  { margin: calc(var(--space-2) * -1); }\n\n  /* ... weitere negative margin-Klassen ... */\n} ","/*\n * Text Utilities\n *\n * Atomare CSS-Klassen für Textformatierung, Schriftgröße, -gewicht, etc.\n */\n\n@layer utilities.helpers {\n  /* ================= FONT SIZE ================= */\n  .text-xs { font-size: var(--font-size-xs); }\n\n  .text-sm { font-size: var(--font-size-sm); }\n\n  .text-base { font-size: var(--font-size-base); }\n\n  .text-lg { font-size: var(--font-size-lg); }\n\n  .text-xl { font-size: var(--font-size-xl); }\n\n  .text-2xl { font-size: var(--font-size-2xl); }\n\n  .text-3xl { font-size: var(--font-size-3xl); }\n\n  .text-4xl { font-size: var(--font-size-4xl); }\n\n  .text-5xl { font-size: var(--font-size-5xl); }\n\n  /* ================= FONT WEIGHT ================= */\n  .font-normal { font-weight: var(--font-weight-normal); }\n\n  .font-medium { font-weight: var(--font-weight-medium); }\n\n  .font-semibold { font-weight: var(--font-weight-semibold); }\n\n  .font-bold { font-weight: var(--font-weight-bold); }\n\n  /* ================= LINE HEIGHT ================= */\n  .leading-none { line-height: var(--line-height-none); }\n\n  .leading-tight { line-height: var(--line-height-tight); }\n\n  .leading-snug { line-height: var(--line-height-snug); }\n\n  .leading-normal { line-height: var(--line-height-normal); }\n\n  .leading-relaxed { line-height: var(--line-height-relaxed); }\n\n  .leading-loose { line-height: var(--line-height-loose); }\n\n  /* ================= TEXT ALIGNMENT ================= */\n  .text-center { text-align: center; }\n\n  .text-left { text-align: left; }\n\n  .text-right { text-align: right; }\n\n  .text-justify { text-align: justify; }\n\n  /* ================= TEXT WRAPPING ================= */\n  .text-balance { text-wrap: balance; }\n\n  .text-pretty { text-wrap: pretty; }\n\n  .whitespace-normal { white-space: normal; }\n\n  .whitespace-nowrap { white-space: nowrap; }\n\n  .whitespace-pre { white-space: pre; }\n\n  .whitespace-pre-line { white-space: pre-line; }\n\n  .whitespace-pre-wrap { white-space: pre-wrap; }\n\n  /* ================= TEXT TRANSFORM ================= */\n  .uppercase { text-transform: uppercase; }\n\n  .lowercase { text-transform: lowercase; }\n\n  .capitalize { text-transform: capitalize; }\n\n  .normal-case { text-transform: none; }\n\n  /* ================= TEXT DECORATION ================= */\n  .underline { text-decoration: underline; }\n\n  .no-underline { text-decoration: none; }\n\n  .line-through { text-decoration: line-through; }\n\n  /* ================= TEXT OVERFLOW ================= */\n  .truncate {\n    overflow: hidden;\n    text-overflow: ellipsis;\n    white-space: nowrap;\n  }\n\n  .text-ellipsis { text-overflow: ellipsis; }\n\n  .text-clip { text-overflow: clip; }\n\n  /* ================= FONT STYLE ================= */\n  .italic { font-style: italic; }\n\n  .not-italic { font-style: normal; }\n\n  /* ================= TEXT COLOR ================= */\n  .text-current { color: currentColor; }\n} ","/**\n * Skeleton-Komponente\n * \n * Ladezustands-Platzhalter für Inhalte, die noch geladen werden.\n * Skeleton-Loader verbessern die wahrgenommene Performance und verhindern Layout-Shifts.\n * \n * Grundlegende Verwendung:\n * <div class=\"skeleton\"></div>\n * \n * Formen:\n * <div class=\"skeleton text\">Textzeile</div>\n * <div class=\"skeleton circle\">Kreis</div>\n * <div class=\"skeleton rect\">Rechteck</div>\n * <div class=\"skeleton avatar\">Avatar</div>\n * <div class=\"skeleton button\">Button</div>\n * \n * Varianten:\n * <div class=\"skeleton pulse\">Mit Pulsieren</div>\n * <div class=\"skeleton wave\">Mit Wellenbewegung</div>\n * \n * Größen:\n * <div class=\"skeleton text sm\">Klein</div>\n * <div class=\"skeleton text md\">Mittel</div>\n * <div class=\"skeleton text lg\">Groß</div>\n * \n * Komplexe Layoutbeispiele:\n * <div class=\"skeleton-card\">\n *   <div class=\"skeleton rect image\"></div>\n *   <div class=\"skeleton text title\"></div>\n *   <div class=\"skeleton text\"></div>\n *   <div class=\"skeleton text\"></div>\n *   <div class=\"skeleton text short\"></div>\n * </div>\n * \n * Artikel-Ladeansicht:\n * <div class=\"skeleton-article\">\n *   <div class=\"skeleton text heading\"></div>\n *   <div class=\"skeleton text subheading\"></div>\n *   <div class=\"skeleton text\"></div>\n *   <div class=\"skeleton text\"></div>\n *   <div class=\"skeleton text\"></div>\n * </div>\n */\n\n/* Animationen - außerhalb von @layer definieren */\n@keyframes pulse {\n  0, 100 {\n    opacity: 1;\n  }\n\n  50 {\n    opacity: 4000%;\n  }\n}\n\n@keyframes wave {\n  100 {\n    transform: translateX(100%);\n  }\n}\n\n/* Komponenten-Styles */\n@layer components {\n  .skeleton {\n    background-color: var(--color-neutral-200, #e5e7eb);\n    border-radius: var(--radius-sm, 0.125rem);\n    \n    /* Formvarianten */\n    &.circle {\n      border-radius: 9px;\n    }\n    \n    &.rect {\n      border-radius: var(--radius-md, 0.375rem);\n    }\n    \n    &.text {\n      height: 1rem;\n      margin-bottom: 0%.5rem;\n      width: 100%;\n    }\n    \n    &.avatar {\n      border-radius: 50px;\n      height: 3rem;\n      width: 3rem;\n    }\n    \n    &.button {\n      border-radius: var(--radius-md, 0.375rem);\n      height: 2.5rem;\n      width: 8rem;\n    }\n    \n    /* Animationsvorbereitung für Wave-Effekt */\n    &.wave {\n      overflow: hidden;\n      position: relative;\n    }\n    \n    /* Größenvarianten */\n    &.sm {\n      height: 0%.75rem;\n    }\n    \n    &.md {\n      height: 1rem;\n    }\n    \n    &.lg {\n      height: 1%.5rem;\n    }\n    \n    /* Spezifische Stile für verschiedene Layouts */\n    &.title {\n      height: 1%.5rem;\n      width: 70%;\n    }\n    \n    &.heading {\n      height: 2rem;\n      width: 90%;\n    }\n    \n    &.subheading {\n      height: 1%.5rem;\n      width: 70%;\n    }\n    \n    &.image {\n      height: 1%2rem;\n      width: 100%;\n    }\n    \n    &.short {\n      width: 60%;\n    }\n  }\n  \n  /* Skeleton-Kontainer */\n  .skeleton-card {\n    background-color: var(--color-white, #fff);\n    border-radius: var(--radius-md, 0.375rem);\n    box-shadow: var(--shadow-sm, 0 1px 2px 0 rgb(0 0 0 / 0.05));\n    max-width: 2%4rem;\n    padding: var(--space-4);\n    width: 100%;\n  }\n  \n  .skeleton-article {\n    max-width: 4%0rem;\n    width: 100%;\n  }\n}\n\n/* Animations-Styles */\n@layer animations {\n  .skeleton {\n    animation: var(--ui-pulse-animation, pulse var(--animation-duration-slowest, 1500ms) var(--easing-smooth, ease-in-out) infinite);\n    \n    /* Animationstypen */\n    &.pulse {\n      animation: var(--ui-pulse-animation, pulse var(--animation-duration-slowest, 1500ms) var(--easing-smooth, ease-in-out) infinite);\n    }\n    \n    &.wave::after {\n      animation: wave var(--animation-duration-slowest, 2000ms) infinite;\n      background-image: linear-gradient(\n        90deg,\n        rgb(255 255 255 / 0%) 0,\n        rgb(255 255 255 / 2000%) 20,\n        rgb(255 255 255 / 5000%) 60,\n        rgb(255 255 255 / 0%)\n      );\n      content: '';\n      inset: 0;\n      position: absolute;\n      transform: translateX(-100%);\n    }\n  }\n}\n\n","/**\n * Tags-Komponente\n * \n * Tag-Elemente für Kategorisierung, Filterung und Kennzeichnung von Inhalten.\n * Tags bieten eine kompakte Darstellung von Kategorien, Eigenschaften oder Status.\n * \n * @layer components.tags\n * \n * Grundlegende Verwendung:\n * <span class=\"tag\">Standard-Tag</span>\n * \n * Farbvarianten:\n * <span class=\"tag primary\">Primär</span>\n * <span class=\"tag secondary\">Sekundär</span>\n * <span class=\"tag success\">Erfolg</span>\n * <span class=\"tag warning\">Warnung</span>\n * <span class=\"tag danger\">Gefahr</span>\n * <span class=\"tag info\">Info</span>\n * \n * Größenvarianten:\n * <span class=\"tag sm\">Klein</span>\n * <span class=\"tag md\">Mittel (Standard)</span>\n * <span class=\"tag lg\">Groß</span>\n * \n * Stiloptionen:\n * <span class=\"tag outlined\">Umriss</span>\n * <span class=\"tag rounded\">Abgerundet</span>\n * <span class=\"tag pill\">Pill-Form</span>\n * \n * Mit Icon:\n * <span class=\"tag with-icon\">\n *   <span class=\"icon\"><!-- Icon hier --></span>\n *   Tag mit Icon\n * </span>\n * \n * Entfernbare Tags:\n * <span class=\"tag removable\">\n *   Entfernbar\n *   <button class=\"remove\">&times;</button>\n * </span>\n * \n * Tag-Gruppe:\n * <div class=\"tag-group\">\n *   <span class=\"tag\">Tag 1</span>\n *   <span class=\"tag\">Tag 2</span>\n *   <span class=\"tag\">Tag 3</span>\n * </div>\n */\n\n@layer components {\n  .tag {\n    align-items: center;\n    background-color: var(--color-neutral-100, #f3f4f6);\n    border-radius: 9px;\n    color: var(--color-neutral-900, #111827);\n    cursor: default;\n    display: inline-flex;\n    font-size: 0.875rem;\n    font-weight: 500;\n    line-height: 1%;\n    padding: 0.375rem 0.75rem;\n    transition: background-color 150ms ease-in-out;\n    user-select: none;\n    white-space: nowrap;\n    \n    &:hover {\n      background-color: var(--color-neutral-200, #e5e7eb);\n    }\n    \n    /* Varianten */\n    &.clickable {\n      cursor: pointer;\n    }\n    \n    /* Farbvarianten */\n    &.primary {\n      background-color: var(--color-primary-100, #dbeafe);\n      color: var(--color-primary-800, #1e40af);\n    }\n    \n    &.secondary {\n      background-color: var(--color-secondary-100, #f1f5f9);\n      color: var(--color-secondary-800, #1e293b);\n    }\n    \n    &.success {\n      background-color: var(--color-success-100, #d1fae5);\n      color: var(--color-success-800, #065f46);\n    }\n    \n    &.warning {\n      background-color: var(--color-warning-100, #fef3c7);\n      color: var(--color-warning-800, #92400e);\n    }\n    \n    &.danger {\n      background-color: var(--color-error-100, #fee2e2);\n      color: var(--color-error-800, #991b1b);\n    }\n    \n    &.info {\n      background-color: var(--color-info-100, #dbeafe);\n      color: var(--color-info-800, #1e40af);\n    }\n    \n    /* Form-Varianten */\n    &.rounded {\n      border-radius: 0.5rem;\n    }\n    \n    &.pill {\n      border-radius: 9px;\n    }\n    \n    &.outlined {\n      background-color: transparent;\n      border: 1px solid currentcolor;\n      \n      &.primary {\n        color: var(--color-primary-600, #2563eb);\n      }\n    }\n    \n    /* Größenvarianten */\n    &.sm {\n      font-size: 0.75rem;\n      padding: 0.25rem 0.5rem;\n    }\n    \n    &.lg {\n      font-size: 1rem;\n      padding: 0.5rem 1rem;\n    }\n    \n    /* Elemente */\n    .icon {\n      align-items: center;\n      display: inline-flex;\n      height: 1em;\n      justify-content: center;\n      margin-right: 0%.25rem;\n      width: 1em;\n    }\n    \n    .remove {\n      align-items: center;\n      background: transparent;\n      border: none;\n      border-radius: 50px;\n      color: currentcolor;\n      cursor: pointer;\n      display: inline-flex;\n      height: 1%.25em;\n      justify-content: center;\n      line-height: 1%;\n      margin-left: 0%.25rem;\n      margin-right: -0.25rem;\n      opacity: 0.7;\n      padding: 0;\n      transition: opacity 150ms ease;\n      width: 1%.25em;\n      \n      &:hover {\n        background-color: rgb(0 0 0 / 1000%);\n        opacity: 1;\n      }\n    }\n  }\n  \n  /* Tag-Gruppe */\n  .tag-group {\n    display: flex;\n    flex-wrap: wrap;\n    gap: 0.5rem;\n  }\n}\n\n\n  ","/**\n * Typography Properties with @property Definitions\n * \n * Typed CSS custom properties for typography using @property.\n * This enables better tooling support, autocomplete, and animation capabilities.\n * \n * @layer tokens.properties\n */\n\n@layer tokens.properties {\n  /* Font Size Properties */\n  @property --font-size-xs {\n    inherits: true;\n    initial-value: 0.75rem;\n    syntax: '<length>';\n  }\n  \n  @property --font-size-sm {\n    inherits: true;\n    initial-value: 0.875rem;\n    syntax: '<length>';\n  }\n  \n  @property --font-size-base {\n    inherits: true;\n    initial-value: 1rem;\n    syntax: '<length>';\n  }\n  \n  @property --font-size-lg {\n    inherits: true;\n    initial-value: 1.125rem;\n    syntax: '<length>';\n  }\n  \n  @property --font-size-xl {\n    inherits: true;\n    initial-value: 1.25rem;\n    syntax: '<length>';\n  }\n  \n  @property --font-size-2xl {\n    inherits: true;\n    initial-value: 1.5rem;\n    syntax: '<length>';\n  }\n  \n  @property --font-size-3xl {\n    inherits: true;\n    initial-value: 1.875rem;\n    syntax: '<length>';\n  }\n  \n  @property --font-size-4xl {\n    inherits: true;\n    initial-value: 2.25rem;\n    syntax: '<length>';\n  }\n  \n  @property --font-size-5xl {\n    inherits: true;\n    initial-value: 3rem;\n    syntax: '<length>';\n  }\n\n  @property --font-size-6xl {\n    inherits: true;\n    initial-value: 4rem;\n    syntax: '<length>';\n  }\n\n  /* Text Size Aliases (für Komponenten-Kompatibilität) */\n  @property --text-xs {\n    inherits: true;\n    initial-value: 0.75rem;\n    syntax: '<length>';\n  }\n  \n  @property --text-sm {\n    inherits: true;\n    initial-value: 0.875rem;\n    syntax: '<length>';\n  }\n  \n  @property --text-base {\n    inherits: true;\n    initial-value: 1rem;\n    syntax: '<length>';\n  }\n  \n  @property --text-lg {\n    inherits: true;\n    initial-value: 1.125rem;\n    syntax: '<length>';\n  }\n  \n  @property --text-xl {\n    inherits: true;\n    initial-value: 1.25rem;\n    syntax: '<length>';\n  }\n\n  @property --text-2xl {\n    inherits: true;\n    initial-value: 1.5rem;\n    syntax: '<length>';\n  }\n\n  /* Line Height Properties */\n  @property --line-height-tight {\n    inherits: true;\n    initial-value: 1.25;\n    syntax: '<number>';\n  }\n  \n  @property --line-height-snug {\n    inherits: true;\n    initial-value: 1.375;\n    syntax: '<number>';\n  }\n  \n  @property --line-height-normal {\n    inherits: true;\n    initial-value: 1.5;\n    syntax: '<number>';\n  }\n  \n  @property --line-height-relaxed {\n    inherits: true;\n    initial-value: 1.625;\n    syntax: '<number>';\n  }\n  \n  @property --line-height-loose {\n    inherits: true;\n    initial-value: 2;\n    syntax: '<number>';\n  }\n  \n  /* Font Weight Properties */\n  @property --font-weight-thin {\n    inherits: true;\n    initial-value: 100;\n    syntax: '<number>';\n  }\n  \n  @property --font-weight-extralight {\n    inherits: true;\n    initial-value: 200;\n    syntax: '<number>';\n  }\n  \n  @property --font-weight-light {\n    inherits: true;\n    initial-value: 300;\n    syntax: '<number>';\n  }\n  \n  @property --font-weight-normal {\n    inherits: true;\n    initial-value: 400;\n    syntax: '<number>';\n  }\n  \n  @property --font-weight-medium {\n    inherits: true;\n    initial-value: 500;\n    syntax: '<number>';\n  }\n  \n  @property --font-weight-semibold {\n    inherits: true;\n    initial-value: 600;\n    syntax: '<number>';\n  }\n  \n  @property --font-weight-bold {\n    inherits: true;\n    initial-value: 700;\n    syntax: '<number>';\n  }\n\n  @property --font-weight-extrabold {\n    inherits: true;\n    initial-value: 800;\n    syntax: '<number>';\n  }\n\n  @property --font-weight-black {\n    inherits: true;\n    initial-value: 900;\n    syntax: '<number>';\n  }\n\n  /* Font Weight Aliases (für Komponenten-Kompatibilität) */\n  @property --font-light {\n    inherits: true;\n    initial-value: 300;\n    syntax: '<number>';\n  }\n  \n  @property --font-normal {\n    inherits: true;\n    initial-value: 400;\n    syntax: '<number>';\n  }\n  \n  @property --font-medium {\n    inherits: true;\n    initial-value: 500;\n    syntax: '<number>';\n  }\n  \n  @property --font-semibold {\n    inherits: true;\n    initial-value: 600;\n    syntax: '<number>';\n  }\n  \n  @property --font-bold {\n    inherits: true;\n    initial-value: 700;\n    syntax: '<number>';\n  }\n\n  /* Font Family Properties - Defined only in :root for better performance */\n  \n  /* Letter Spacing Properties */\n  @property --letter-spacing-tighter {\n    inherits: true;\n    initial-value: -0.05em;\n    syntax: '<length>';\n  }\n  \n  @property --letter-spacing-tight {\n    inherits: true;\n    initial-value: -0.025em;\n    syntax: '<length>';\n  }\n  \n  @property --letter-spacing-normal {\n    inherits: true;\n    initial-value: 0;\n    syntax: '<length>';\n  }\n  \n  @property --letter-spacing-wide {\n    inherits: true;\n    initial-value: 0.025em;\n    syntax: '<length>';\n  }\n  \n  @property --letter-spacing-wider {\n    inherits: true;\n    initial-value: 0.05em;\n    syntax: '<length>';\n  }\n\n  @property --letter-spacing-widest {\n    inherits: true;\n    initial-value: 0.1em;\n    syntax: '<length>';\n  }\n  \n  /* Animatable Typography Properties */\n  @property --font-size-transition {\n    inherits: true;\n    initial-value: 1rem;\n    syntax: '<length>';\n  }\n  \n  @property --line-height-transition {\n    inherits: true;\n    initial-value: 1.5;\n    syntax: '<number>';\n  }\n  \n  @property --letter-spacing-transition {\n    inherits: true;\n    initial-value: 0;\n    syntax: '<length>';\n  }\n}\n\n/* Initial Value Definitions */\n:root {\n  /* Font Sizes */\n  --font-size-xs: 0.75rem;\n  --font-size-sm: 0.875rem;\n  --font-size-base: 1rem;\n  --font-size-lg: 1.125rem;\n  --font-size-xl: 1.25rem;\n  --font-size-2xl: 1.5rem;\n  --font-size-3xl: 1.875rem;\n  --font-size-4xl: 2.25rem;\n  --font-size-5xl: 3rem;\n  --font-size-6xl: 4rem;\n  \n  /* Text Size Aliases */\n  --text-xs: var(--font-size-xs);\n  --text-sm: var(--font-size-sm);\n  --text-base: var(--font-size-base);\n  --text-lg: var(--font-size-lg);\n  --text-xl: var(--font-size-xl);\n  --text-2xl: var(--font-size-2xl);\n  \n  /* Line Heights */\n  --line-height-tight: 1.25;\n  --line-height-snug: 1.375;\n  --line-height-normal: 1.5;\n  --line-height-relaxed: 1.625;\n  --line-height-loose: 2;\n  \n  /* Font Weights */\n  --font-weight-thin: 100;\n  --font-weight-extralight: 200;\n  --font-weight-light: 300;\n  --font-weight-normal: 400;\n  --font-weight-medium: 500;\n  --font-weight-semibold: 600;\n  --font-weight-bold: 700;\n  --font-weight-extrabold: 800;\n  --font-weight-black: 900;\n  \n  /* Font Weight Aliases */\n  --font-light: var(--font-weight-light);\n  --font-normal: var(--font-weight-normal);\n  --font-medium: var(--font-weight-medium);\n  --font-semibold: var(--font-weight-semibold);\n  --font-bold: var(--font-weight-bold);\n  \n  /* Font Families */\n  --font-family-sans: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, \"Helvetica Neue\", Arial, \"Noto Sans\", sans-serif;\n  --font-family-serif: ui-serif, Georgia, Cambria, \"Times New Roman\", Times, serif;\n  --font-family-mono: ui-monospace, SFMono-Regular, \"SF Mono\", Consolas, \"Liberation Mono\", Menlo, monospace;\n  \n  /* Font Family Aliases (kurze Versionen für Komponenten) */\n  --font-sans: var(--font-family-sans);\n  --font-serif: var(--font-family-serif);\n  --font-mono: var(--font-family-mono);\n  \n  /* Letter Spacing */\n  --letter-spacing-tight: -0.025em;\n  --letter-spacing-normal: 0;\n  --letter-spacing-wide: 0.025em;\n  --letter-spacing-wider: 0.05em;\n  \n  /* Transition Properties */\n  --font-size-transition: var(--font-size-base);\n  --line-height-transition: var(--line-height-normal);\n  --letter-spacing-transition: var(--letter-spacing-normal);\n}","/*\n * Component Override Utilities\n *\n * Utilities zum Anpassen von Komponenten ohne direkte Änderung an den Komponenten selbst.\n * Diese Datei enthält Utility-Klassen, die vorhandene Komponenten überschreiben können.\n */\n\n@layer utilities.customize {\n  /* Button-Overrides */\n  .button-rounded {\n    border-radius: 9px !important;\n  }\n  \n  .button-flat {\n    box-shadow: none !important;\n  }\n  \n  .button-elevated {\n    box-shadow: var(--shadow-lg) !important;\n  }\n  \n  .button-outline-thick {\n    border-width: 2px !important;\n  }\n  \n  /* Card-Overrides */\n  .card-borderless {\n    border: none !important;\n  }\n  \n  .card-elevated {\n    box-shadow: var(--shadow-lg) !important;\n  }\n  \n  .card-hover-lift {\n    transition: transform 0.2s ease, box-shadow 0.2s ease;\n  }\n  \n  .card-hover-lift:hover {\n    box-shadow: var(--shadow-xl) !important;\n    transform: translateY(-5px);\n  }\n  \n  /* Form-Element-Overrides */\n  .input-rounded {\n    border-radius: 9px !important;\n    padding-left: 1%.25em !important;\n    padding-right: 1%.25em !important;\n  }\n  \n  .input-borderless {\n    background-color: var(--color-gray-100) !important;\n    border: none !important;\n  }\n  \n  .input-large {\n    font-size: 1.125rem !important;\n    padding-bottom: 0%.75em !important;\n    padding-top: 0%.75em !important;\n  }\n  \n  /* Text-Element-Overrides */\n  .heading-accent {\n    color: var(--color-primary-600) !important;\n  }\n  \n  .text-gradient {\n    background-clip: text;\n    background-image: linear-gradient(to right, var(--color-primary-500), var(--color-secondary-500));\n    color: transparent !important;\n  }\n  \n  /* Layout-Overrides */\n  .section-narrow {\n    margin-left: auto !important;\n    margin-right: auto !important;\n    max-width: 80%0px !important;\n  }\n  \n  .section-wide {\n    margin-left: auto !important;\n    margin-right: auto !important;\n    max-width: 140%0px !important;\n  }\n  \n  .no-gap {\n    gap: 0 !important;\n  }\n  \n  .extra-gap {\n    gap: var(--space-8) !important;\n  }\n  \n  /* Interactive-Element-Overrides */\n  .interactive-scale {\n    transition: transform 0.15s ease;\n  }\n  \n  .interactive-scale:hover {\n    transform: scale(1.05%);\n  }\n  \n  .interactive-shine {\n    overflow: hidden;\n    position: relative;\n  }\n  \n  .interactive-shine::after {\n    background: linear-gradient(\n      to right,\n      rgb(255 255 255 / 0%) 0,\n      rgb(255 255 255 / 3000%) 50,\n      rgb(255 255 255 / 0%) 100\n    );\n    content: '';\n    height: 200%;\n    left: -50%;\n    opacity: 0%;\n    position: absolute;\n    top: -50%;\n    transform: rotate(30deg);\n    transition: transform 0.5s ease;\n    width: 200%;\n  }\n  \n  .interactive-shine:hover::after {\n    opacity: 1;\n    transform: rotate(30deg) translate(100%, -100);\n  }\n} ","/*\n * Theme Generator Utilities\n *\n * Utilities zum automatischen Generieren von Themes basierend auf Basisfarben.\n * Diese Datei stellt die Grundlage für das Token-Generator-Tool bereit.\n */\n\n@layer utilities.customize {\n  /* Theme Generator - mit einer Basisfarbe ein komplettes Farbschema generieren */\n  .theme-generator {\n    /* Primärfarbe übergeben, alle Abstufungen werden automatisch generiert */\n    --theme-primary-500: var(--theme-primary, #3b82f6);\n    --theme-primary-50: color-mix(in srgb, var(--theme-primary-500), white 90);\n    --theme-primary-100: color-mix(in srgb, var(--theme-primary-500), white 80);\n    --theme-primary-200: color-mix(in srgb, var(--theme-primary-500), white 60);\n    --theme-primary-300: color-mix(in srgb, var(--theme-primary-500), white 40);\n    --theme-primary-400: color-mix(in srgb, var(--theme-primary-500), white 20);\n    --theme-primary-600: color-mix(in srgb, var(--theme-primary-500), black 10);\n    --theme-primary-700: color-mix(in srgb, var(--theme-primary-500), black 20);\n    --theme-primary-800: color-mix(in srgb, var(--theme-primary-500), black 30);\n    --theme-primary-900: color-mix(in srgb, var(--theme-primary-500), black 40);\n    \n    /* Sekundärfarbe (kann übergeben oder automatisch abgeleitet werden) */\n    --theme-secondary-500: var(--theme-secondary, color-mix(in hsl, var(--theme-primary-500), hsl(60deg 100 50) 50));\n    --theme-secondary-50: color-mix(in srgb, var(--theme-secondary-500), white 90);\n    --theme-secondary-100: color-mix(in srgb, var(--theme-secondary-500), white 80);\n    --theme-secondary-200: color-mix(in srgb, var(--theme-secondary-500), white 60);\n    --theme-secondary-300: color-mix(in srgb, var(--theme-secondary-500), white 40);\n    --theme-secondary-400: color-mix(in srgb, var(--theme-secondary-500), white 20);\n    --theme-secondary-600: color-mix(in srgb, var(--theme-secondary-500), black 10);\n    --theme-secondary-700: color-mix(in srgb, var(--theme-secondary-500), black 20);\n    --theme-secondary-800: color-mix(in srgb, var(--theme-secondary-500), black 30);\n    --theme-secondary-900: color-mix(in srgb, var(--theme-secondary-500), black 40);\n    \n    /* Ableitung semantischer Farben */\n    --theme-success: var(--theme-success-custom, #10b981);\n    --theme-warning: var(--theme-warning-custom, #f59e0b);\n    --theme-error: var(--theme-error-custom, #ef4444);\n    --theme-info: var(--theme-info-custom, #3b82f6);\n    \n    /* Zuweisung der generierten Farben zu den Design-System-Tokens */\n    --color-primary-50: var(--theme-primary-50);\n    --color-primary-100: var(--theme-primary-100);\n    --color-primary-200: var(--theme-primary-200);\n    --color-primary-300: var(--theme-primary-300);\n    --color-primary-400: var(--theme-primary-400);\n    --color-primary-500: var(--theme-primary-500);\n    --color-primary-600: var(--theme-primary-600);\n    --color-primary-700: var(--theme-primary-700);\n    --color-primary-800: var(--theme-primary-800);\n    --color-primary-900: var(--theme-primary-900);\n    --color-secondary-50: var(--theme-secondary-50);\n    --color-secondary-100: var(--theme-secondary-100);\n    --color-secondary-200: var(--theme-secondary-200);\n    --color-secondary-300: var(--theme-secondary-300);\n    --color-secondary-400: var(--theme-secondary-400);\n    --color-secondary-500: var(--theme-secondary-500);\n    --color-secondary-600: var(--theme-secondary-600);\n    --color-secondary-700: var(--theme-secondary-700);\n    --color-secondary-800: var(--theme-secondary-800);\n    --color-secondary-900: var(--theme-secondary-900);\n    --color-success: var(--theme-success);\n    --color-warning: var(--theme-warning);\n    --color-error: var(--theme-error);\n    --color-info: var(--theme-info);\n  }\n  \n  /* Verwendungsbeispiele für vordefinierte Themes */\n  .theme-blue {\n    --theme-primary: #3b82f6;\n    --theme-secondary: #8b5cf6;\n  }\n  \n  .theme-green {\n    --theme-primary: #10b981;\n    --theme-secondary: #6366f1;\n  }\n  \n  .theme-red {\n    --theme-primary: #ef4444;\n    --theme-secondary: #f97316;\n  }\n  \n  .theme-dark {\n    --theme-primary: #6366f1;\n    --theme-secondary: #ec4899;\n    --color-background: #121212;\n    --color-surface: #1e1e1e;\n    --color-text-primary: #fff;\n    --color-text-secondary: #a0a0a0;\n  }\n} ","/**\n * Gemeinsam genutzte Utility-Variablen\n * \n * Zentrale Referenz zu den Design-Tokens für die Utility-Klassen.\n * Verweist direkt auf die Design-Tokens, aber mit utility-spezifischen Namen.\n */\n\n@layer utilities.variables {\n  :root {\n    /* Direkter Verweis auf die Design-Tokens */\n    --util-space-0: var(--space-0);\n    --util-space-px: var(--space-px);\n    --util-space-0\\.5: var(--space-0\\.5);\n    --util-space-1: var(--space-1);\n    --util-space-1\\.5: var(--space-1\\.5);\n    --util-space-2: var(--space-2);\n    --util-space-2\\.5: var(--space-2\\.5);\n    --util-space-3: var(--space-3);\n    --util-space-3\\.5: var(--space-3\\.5);\n    --util-space-4: var(--space-4);\n    --util-space-5: var(--space-5);\n    --util-space-6: var(--space-6);\n    --util-space-8: var(--space-8);\n    --util-space-10: var(--space-10);\n    --util-space-12: var(--space-12);\n    --util-space-16: var(--space-16);\n    --util-space-20: var(--space-20);\n    --util-space-24: var(--space-24);\n    --util-space-32: var(--space-32);\n    --util-space-40: var(--space-40);\n    --util-space-48: var(--space-48);\n    --util-space-56: var(--space-56);\n    --util-space-64: var(--space-64);\n    \n    /* Komponenten-spezifische Abstände */\n    --util-card-padding: var(--space-card-padding);\n    --util-button-padding-x: var(--space-button-padding-x);\n    --util-button-padding-y: var(--space-button-padding-y);\n    --util-input-padding: var(--space-input-padding);\n    --util-modal-padding: var(--space-modal-padding);\n    \n    /* Gaps für Layout */\n    --util-gap-xs: var(--space-gap-xs);\n    --util-gap-sm: var(--space-gap-sm);\n    --util-gap-md: var(--space-gap-md);\n    --util-gap-lg: var(--space-gap-lg);\n    --util-gap-xl: var(--space-gap-xl);\n    \n    /* Typografie-Verweise */\n    --util-font-family-base: var(--font-family-base);\n    --util-font-family-mono: var(--font-family-mono);\n    --util-font-family-heading: var(--font-family-heading);\n    --util-font-size-xs: var(--font-size-xs);\n    --util-font-size-sm: var(--font-size-sm);\n    --util-font-size-base: var(--font-size-base);\n    --util-font-size-lg: var(--font-size-lg);\n    --util-font-size-xl: var(--font-size-xl);\n    --util-font-size-2xl: var(--font-size-2xl);\n    --util-font-size-3xl: var(--font-size-3xl);\n    --util-font-size-4xl: var(--font-size-4xl);\n    --util-font-weight-light: var(--font-weight-light);\n    --util-font-weight-normal: var(--font-weight-normal);\n    --util-font-weight-medium: var(--font-weight-medium);\n    --util-font-weight-semibold: var(--font-weight-semibold);\n    --util-font-weight-bold: var(--font-weight-bold);\n    \n    /* Radius-Verweise */\n    --util-radius-sm: var(--radius-sm);\n    --util-radius-md: var(--radius-md);\n    --util-radius-lg: var(--radius-lg);\n    --util-radius-xl: var(--radius-xl);\n    --util-radius-full: var(--radius-full);\n    \n    /* Shadow-Verweise */\n    --util-shadow-sm: var(--shadow-sm);\n    --util-shadow-md: var(--shadow-md);\n    --util-shadow-lg: var(--shadow-lg);\n    --util-shadow-xl: var(--shadow-xl);\n    --util-shadow-2xl: var(--shadow-2xl);\n  }\n} ","/**\n * Border Radius Properties with @property Definitions\n * \n * Typed CSS custom properties for border-radius using @property.\n * This enables better tooling support, autocomplete, and animation capabilities.\n * \n * @layer tokens.properties\n */\n\n@layer tokens.properties {\n  /* Base Radius Properties */\n  @property --radius-none {\n    inherits: true;\n    initial-value: 0;\n    syntax: '<length>';\n  }\n  \n  @property --radius-xs {\n    inherits: true;\n    initial-value: 0.125rem;\n    syntax: '<length>';\n  }\n  \n  @property --radius-sm {\n    inherits: true;\n    initial-value: 0.25rem;\n    syntax: '<length>';\n  }\n  \n  @property --radius-md {\n    inherits: true;\n    initial-value: 0.375rem;\n    syntax: '<length>';\n  }\n  \n  @property --radius-lg {\n    inherits: true;\n    initial-value: 0.5rem;\n    syntax: '<length>';\n  }\n  \n  @property --radius-xl {\n    inherits: true;\n    initial-value: 0.75rem;\n    syntax: '<length>';\n  }\n  \n  @property --radius-2xl {\n    inherits: true;\n    initial-value: 1rem;\n    syntax: '<length>';\n  }\n  \n  @property --radius-3xl {\n    inherits: true;\n    initial-value: 1.5rem;\n    syntax: '<length>';\n  }\n  \n  @property --radius-full {\n    inherits: true;\n    initial-value: 9999px;\n    syntax: '<length-percentage>';\n  }\n  \n  /* Component-Specific Radius Properties */\n  @property --radius-button {\n    inherits: true;\n    initial-value: 0.375rem;\n    syntax: '<length>';\n  }\n  \n  @property --radius-card {\n    inherits: true;\n    initial-value: 0.5rem;\n    syntax: '<length>';\n  }\n  \n  @property --radius-input {\n    inherits: true;\n    initial-value: 0.375rem;\n    syntax: '<length>';\n  }\n  \n  @property --radius-modal {\n    inherits: true;\n    initial-value: 0.75rem;\n    syntax: '<length>';\n  }\n  \n  @property --radius-badge {\n    inherits: true;\n    initial-value: 0.25rem;\n    syntax: '<length>';\n  }\n  \n  @property --radius-avatar {\n    inherits: true;\n    initial-value: 50;\n    syntax: '<length-percentage>';\n  }\n  \n  /* Interactive Radius Properties */\n  @property --radius-hover {\n    inherits: true;\n    initial-value: 0.5rem;\n    syntax: '<length>';\n  }\n  \n  @property --radius-focus {\n    inherits: true;\n    initial-value: 0.375rem;\n    syntax: '<length>';\n  }\n  \n  /* Animatable Radius Properties */\n  @property --radius-transition {\n    inherits: true;\n    initial-value: 0.375rem;\n    syntax: '<length>';\n  }\n  \n  @property --radius-transition-hover {\n    inherits: true;\n    initial-value: 0.5rem;\n    syntax: '<length>';\n  }\n  \n  /* Initial Value Definitions */\n  :root {\n    /* Base Radius Scale */\n    --radius-none: 0;\n    --radius-xs: 0.125rem;\n    --radius-sm: 0.25rem;\n    --radius-md: 0.375rem;\n    --radius-lg: 0.5rem;\n    --radius-xl: 0.75rem;\n    --radius-2xl: 1rem;\n    --radius-3xl: 1.5rem;\n    --radius-full: 9999px;\n    \n    /* Component Radius */\n    --radius-button: var(--radius-md);\n    --radius-card: var(--radius-lg);\n    --radius-input: var(--radius-md);\n    --radius-modal: var(--radius-xl);\n    --radius-badge: var(--radius-sm);\n    --radius-avatar: 50;\n    \n    /* Interactive Radius */\n    --radius-hover: var(--radius-lg);\n    --radius-focus: var(--radius-md);\n    \n    /* Transition Radius */\n    --radius-transition: var(--radius-md);\n    --radius-transition-hover: var(--radius-lg);\n    \n    /* Border-Radius Aliases (für Kompatibilität mit Typography-System) */\n    --border-radius-none: var(--radius-none);\n    --border-radius-sm: var(--radius-sm);\n    --border-radius-md: var(--radius-md);\n    --border-radius-lg: var(--radius-lg);\n    --border-radius-xl: var(--radius-xl);\n    --border-radius-full: var(--radius-full);\n  }\n} ","/**\n * Shadow Properties with @property Definitions\n * \n * Typed CSS custom properties for shadows using @property.\n * This enables better tooling support, autocomplete, and animation capabilities.\n * \n * @layer tokens.properties\n */\n\n@layer tokens.properties {\n  /* Base Shadow Properties */\n  @property --shadow-none {\n    inherits: false;\n    initial-value: none;\n    \n  }\n  \n  @property --shadow-xs {\n    inherits: false;\n    initial-value: 0 1px 2px 0 rgb(0 0 0 / 5%);\n    \n  }\n  \n  @property --shadow-sm {\n    inherits: false;\n    initial-value: 0 1px 2px 0 rgb(0 0 0 / 5%);\n    \n  }\n  \n  @property --shadow-md {\n    inherits: false;\n    initial-value: 0 4px 6px -1px rgb(0 0 0 / 10%), 0 2px 4px -2px rgb(0 0 0 / 10%);\n    \n  }\n  \n  @property --shadow-lg {\n    inherits: false;\n    initial-value: 0 10px 15px -3px rgb(0 0 0 / 10%), 0 4px 6px -4px rgb(0 0 0 / 10%);\n    \n  }\n  \n  @property --shadow-xl {\n    inherits: false;\n    initial-value: 0 20px 25px -5px rgb(0 0 0 / 10%), 0 8px 10px -6px rgb(0 0 0 / 10%);\n    \n  }\n  \n  @property --shadow-2xl {\n    inherits: false;\n    initial-value: 0 25px 50px -12px rgb(0 0 0 / 25%);\n    \n  }\n  \n  @property --shadow-inner {\n    inherits: false;\n    initial-value: inset 0 2px 4px 0 rgb(0 0 0 / 5%);\n    \n  }\n  \n  /* Component-Specific Shadow Properties */\n  @property --shadow-card {\n    inherits: false;\n    initial-value: 0 1px 3px 0 rgb(0 0 0 / 10%), 0 1px 2px -1px rgb(0 0 0 / 10%);\n    \n  }\n  \n  @property --shadow-modal {\n    inherits: false;\n    initial-value: 0 20px 25px -5px rgb(0 0 0 / 10%), 0 8px 10px -6px rgb(0 0 0 / 10%);\n    \n  }\n  \n  @property --shadow-dropdown {\n    inherits: false;\n    initial-value: 0 10px 15px -3px rgb(0 0 0 / 10%), 0 4px 6px -4px rgb(0 0 0 / 10%);\n    \n  }\n  \n  @property --shadow-tooltip {\n    inherits: false;\n    initial-value: 0 4px 6px -1px rgb(0 0 0 / 10%), 0 2px 4px -2px rgb(0 0 0 / 10%);\n    \n  }\n  \n  @property --shadow-button {\n    inherits: false;\n    initial-value: 0 1px 2px 0 rgb(0 0 0 / 5%);\n    \n  }\n  \n  @property --shadow-button-hover {\n    inherits: false;\n    initial-value: 0 4px 6px -1px rgb(0 0 0 / 10%), 0 2px 4px -2px rgb(0 0 0 / 10%);\n    \n  }\n}\n\n/* Fallback Values für alle Shadow-Definitionen */\n:root {\n  /* Base Shadow Scale */\n  --shadow-none: none;\n  --shadow-xs: 0 1px 2px 0 rgb(0 0 0 / 5%);\n  --shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 5%);\n  --shadow-md: 0 4px 6px -1px rgb(0 0 0 / 10%), 0 2px 4px -2px rgb(0 0 0 / 10%);\n  --shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 10%), 0 4px 6px -4px rgb(0 0 0 / 10%);\n  --shadow-xl: 0 20px 25px -5px rgb(0 0 0 / 10%), 0 8px 10px -6px rgb(0 0 0 / 10%);\n  --shadow-2xl: 0 25px 50px -12px rgb(0 0 0 / 25%);\n  --shadow-inner: inset 0 2px 4px 0 rgb(0 0 0 / 5%);\n  \n  /* Component Shadows */\n  --shadow-card: var(--shadow-sm);\n  --shadow-modal: var(--shadow-xl);\n  --shadow-dropdown: var(--shadow-lg);\n  --shadow-tooltip: var(--shadow-md);\n  --shadow-button: var(--shadow-xs);\n  --shadow-button-hover: var(--shadow-md);\n} ","/*\n * Color Variables\n *\n * Farbvariablen für die Utilities.\n * Diese Variables ermöglichen eine konsistente Farbverwendung in den Utility-Klassen.\n */\n\n@layer utilities.variables {\n  :root {\n    /* Primäre Farbpalette */\n    --util-color-primary-50: var(--color-primary-50);\n    --util-color-primary-100: var(--color-primary-100);\n    --util-color-primary-200: var(--color-primary-200);\n    --util-color-primary-300: var(--color-primary-300);\n    --util-color-primary-400: var(--color-primary-400);\n    --util-color-primary-500: var(--color-primary-500);\n    --util-color-primary-600: var(--color-primary-600);\n    --util-color-primary-700: var(--color-primary-700);\n    --util-color-primary-800: var(--color-primary-800);\n    --util-color-primary-900: var(--color-primary-900);\n    \n    /* Sekundäre Farbpalette */\n    --util-color-secondary-50: var(--color-secondary-50);\n    --util-color-secondary-100: var(--color-secondary-100);\n    --util-color-secondary-200: var(--color-secondary-200);\n    --util-color-secondary-300: var(--color-secondary-300);\n    --util-color-secondary-400: var(--color-secondary-400);\n    --util-color-secondary-500: var(--color-secondary-500);\n    --util-color-secondary-600: var(--color-secondary-600);\n    --util-color-secondary-700: var(--color-secondary-700);\n    --util-color-secondary-800: var(--color-secondary-800);\n    --util-color-secondary-900: var(--color-secondary-900);\n    \n    /* Grau-Farbpalette */\n    --util-color-gray-50: var(--color-gray-50);\n    --util-color-gray-100: var(--color-gray-100);\n    --util-color-gray-200: var(--color-gray-200);\n    --util-color-gray-300: var(--color-gray-300);\n    --util-color-gray-400: var(--color-gray-400);\n    --util-color-gray-500: var(--color-gray-500);\n    --util-color-gray-600: var(--color-gray-600);\n    --util-color-gray-700: var(--color-gray-700);\n    --util-color-gray-800: var(--color-gray-800);\n    --util-color-gray-900: var(--color-gray-900);\n    \n    /* Semantische Farben */\n    --util-color-success: var(--color-success);\n    --util-color-warning: var(--color-warning);\n    --util-color-error: var(--color-error);\n    --util-color-info: var(--color-info);\n    \n    /* Statusfarben */\n    --util-color-active: var(--color-active);\n    --util-color-focus: var(--color-focus);\n    --util-color-hover: var(--color-hover);\n    --util-color-disabled: var(--color-disabled);\n  }\n} ","/*\n * Typografie\n *\n * @layer tokens         → Schriftarten und Grundwerte\n * @layer base           → body, p, a, code, etc.\n * @layer headings       → h1–h6 und .h1–.h6\n * @layer text           → blockquote, figcaption, pull-quote, etc.\n * @layer utilities      → text-, font-, spacing- und alignment-Utilities\n * @layer responsive     → container queries und responsive Textklassen\n * @layer fluid          → flüssige Typografie mit interpolate-size\n */\n\n@layer typography {\n  :root {\n    --font-family-sans: system-ui, -apple-system, blinkmacsystemfont, \"segoe ui\", roboto, \"helvetica neue\", arial, sans-serif;\n    --font-family-serif: georgia, cambria, \"times new roman\", times, serif;\n    --font-family-mono: ui-monospace, sfmono-regular, menlo, monaco, consolas, \"liberation mono\", \"courier new\", monospace;\n  }\n\n\n  @layer base {\n    body {\n      color: var(--color-gray-900);\n      font-family: var(--font-family-sans);\n      font-size: var(--font-size-base);\n      line-height: var(--line-height-normal);\n    }\n\n    p { margin-bottom: 1em; }\n\n    a { color: var(--color-primary); text-decoration: underline; }\n\n    a:hover { text-decoration: none; }\n\n    ul, ol { margin-bottom: 1em; padding-left: 1%.5em; }\n\n    li { margin-bottom: 0%.5em; }\n\n    code {\n      background-color: var(--color-gray-100);\n      border-radius: var(--border-radius-sm);\n      font-family: var(--font-family-mono);\n      font-size: var(--font-size-sm);\n      padding: var(--space-1);\n    }\n\n    pre {\n      background-color: var(--color-gray-100);\n      border-radius: var(--border-radius-md);\n      font-family: var(--font-family-mono);\n      font-size: var(--font-size-sm);\n      overflow-x: auto;\n      padding: var(--space-4);\n    }\n  }\n\n  @layer headings {\n    h1, .h1 { font-size: var(--font-size-4xl); font-weight: var(--font-weight-bold); line-height: var(--line-height-tight); margin-bottom: var(--space-4); text-wrap: balance; }\n\n    h2, .h2 { font-size: var(--font-size-3xl); font-weight: var(--font-weight-bold); line-height: var(--line-height-tight); margin-bottom: var(--space-3); text-wrap: balance; }\n\n    h3, .h3 { font-size: var(--font-size-2xl); font-weight: var(--font-weight-semibold); line-height: var(--line-height-snug); margin-bottom: var(--space-3); text-wrap: balance; }\n\n    h4, .h4 { font-size: var(--font-size-xl); font-weight: var(--font-weight-semibold); line-height: var(--line-height-snug); margin-bottom: var(--space-2); text-wrap: balance; }\n\n    h5, .h5 { font-size: var(--font-size-lg); font-weight: var(--font-weight-medium); line-height: var(--line-height-normal); margin-bottom: var(--space-2); text-wrap: balance; }\n\n    h6, .h6 { font-size: var(--font-size-base); font-weight: var(--font-weight-medium); line-height: var(--line-height-normal); margin-bottom: var(--space-2); text-wrap: balance; }\n  }\n\n  @layer text {\n    em, i, .italic { font-style: italic; }\n\n    figcaption, .caption { color: var(--color-gray-600); font-size: var(--font-size-sm); font-style: italic; margin-top: var(--space-2); }\n\n    blockquote, .blockquote {\n      border-left: 4px solid var(--color-gray-200);\n      color: var(--color-gray-700);\n      font-size: var(--font-size-lg);\n      font-style: italic;\n      margin-bottom: var(--space-6);\n      padding-left: var(--space-4);\n    }\n\n    blockquote cite, .blockquote-cite {\n      color: var(--color-gray-600);\n      display: block;\n      font-size: var(--font-size-sm);\n      font-style: normal;\n      font-weight: var(--font-weight-medium);\n      margin-top: var(--space-2);\n    }\n\n    .pull-quote {\n      color: var(--color-primary);\n      font-size: var(--font-size-2xl);\n      font-style: italic;\n      font-weight: var(--font-weight-medium);\n      line-height: var(--line-height-tight);\n      margin: var(--space-8) 0;\n      padding: var(--space-6) var(--space-8);\n      position: relative;\n      text-align: center;\n    }\n\n    .pull-quote::before, .pull-quote::after {\n      background-repeat: no-repeat;\n      background-size: contain;\n      content: \"\";\n      height: var(--space-12);\n      opacity: 2000%;\n      position: absolute;\n      width: var(--space-12);\n    }\n  }\n\n  @layer utilities {\n    .text-xs { font-size: var(--font-size-xs); }\n\n    .text-sm { font-size: var(--font-size-sm); }\n\n    .text-base { font-size: var(--font-size-base); }\n\n    .text-lg { font-size: var(--font-size-lg); }\n\n    .text-xl { font-size: var(--font-size-xl); }\n\n    .text-2xl { font-size: var(--font-size-2xl); }\n\n    .text-3xl { font-size: var(--font-size-3xl); }\n\n    .text-4xl { font-size: var(--font-size-4xl); }\n\n    .text-5xl { font-size: var(--font-size-5xl); }\n\n    .font-normal { font-weight: var(--font-weight-normal); }\n\n    .font-medium { font-weight: var(--font-weight-medium); }\n\n    .font-semibold { font-weight: var(--font-weight-semibold); }\n\n    .font-bold { font-weight: var(--font-weight-bold); }\n\n    .leading-none { line-height: var(--line-height-none); }\n\n    .leading-tight { line-height: var(--line-height-tight); }\n\n    .leading-snug { line-height: var(--line-height-snug); }\n\n    .leading-normal { line-height: var(--line-height-normal); }\n\n    .leading-relaxed { line-height: var(--line-height-relaxed); }\n\n    .leading-loose { line-height: var(--line-height-loose); }\n\n    .text-center { text-align: center; }\n\n    .text-left { text-align: left; }\n\n    .text-right { text-align: right; }\n\n    /* Text-Wrap Utilities \n     * - balance: Optimiert Zeilenumbrüche für gleiche Zeilenlängen, ideal für Überschriften\n     * - pretty: Optimiert Zeilenumbrüche für bessere Lesbarkeit, ideal für längere Texte\n     */\n    .text-balance { text-wrap: balance; }\n\n    .text-pretty { text-wrap: pretty; }\n\n    .uppercase { text-transform: uppercase; }\n\n    .lowercase { text-transform: lowercase; }\n\n    .capitalize { text-transform: capitalize; }\n\n    .normal-case { text-transform: none; }\n\n    .truncate {\n      overflow: hidden;\n      text-overflow: ellipsis;\n      white-space: nowrap;\n    }\n\n    .hover-underline {\n      text-decoration: none;\n      transition: text-decoration 0.2s ease;\n    }\n\n    .hover-underline:hover {\n      text-decoration: underline;\n    }\n  }\n\n  @layer responsive {\n    @container root (max-width: 640px) {\n      body {\n        font-size: var(--font-size-sm);\n        line-height: var(--line-height-snug);\n      }\n\n      h1 { font-size: var(--font-size-3xl); }\n\n      h2 { font-size: var(--font-size-2xl); }\n\n      h3 { font-size: var(--font-size-xl); }\n\n      h4 { font-size: var(--font-size-lg); }\n\n      h5 { font-size: var(--font-size-lg); }\n\n      h6 { font-size: var(--font-size-base); }\n    }\n  }\n  \n  @layer fluid {\n    /* Flüssige Überschriften */\n    .fluid-heading {\n      font-weight: var(--font-weight-bold);\n      line-height: var(--line-height-tight);\n      text-wrap: balance;\n      \n      /* Interpoliert flüssig zwischen Größen abhängig vom Container/Viewport */\n      &.xxl {\n        font-size: clamp(var(--text-2xl), 5vw + 1rem, var(--text-4xl));\n      }\n      \n      &.xl {\n        font-size: clamp(var(--text-xl), 4vw + 0.5rem, var(--text-3xl));\n      }\n      \n      &.lg {\n        font-size: clamp(var(--text-lg), 3vw + 0.5rem, var(--text-2xl));\n      }\n      \n      &.md {\n        font-size: clamp(var(--text-base), 2vw + 0.5rem, var(--text-xl));\n      }\n      \n      &.sm {\n        font-size: clamp(var(--text-sm), 1vw + 0.5rem, var(--text-lg));\n      }\n    }\n    \n    /* Container-adaptive Textgrößen */\n    .adaptive-text {\n      /* Nutzt Container-Queries für präzisere Größenanpassungen */\n      font-size: var(--text-base);\n      \n      @container (min-width: 400px) {\n        font-size: var(--text-lg);\n      }\n      \n      @container (min-width: 600px) {\n        font-size: var(--text-xl);\n      }\n    }\n    \n    /* Responsive Absätze mit optimaler Lesbarkeit */\n    .fluid-paragraph {\n      font-size: clamp(var(--text-sm), 1vw + 0.5rem, var(--text-base));\n      line-height: var(--line-height-normal);\n      max-width: 70%ch; /* Optimale Lesbarkeit */\n    }\n    \n    /* Blockzitate mit flüssiger Größenanpassung */\n    .fluid-quote {\n      border-left: 4px solid var(--color-primary);\n      font-size: clamp(var(--text-lg), 2vw + 0.5rem, var(--text-2xl));\n      font-style: italic;\n      line-height: var(--line-height-tight);\n      margin: var(--space-6) 0;\n      padding-left: var(--space-4);\n    }\n    \n    /* Beschriftungen mit Größenanpassung */\n    .fluid-caption {\n      color: var(--color-gray-600);\n      font-size: clamp(var(--text-xs), 0.8vw + 0.2rem, var(--text-sm));\n      line-height: var(--line-height-normal);\n    }\n    \n    /* Nutzt interpolate-size: allow-keywords für flüssige Interpolation \n       zwischen Schlüsselwörtern wie large und medium */\n    .size-keyword-text {\n      font-size: medium; /* Wird mit interpolate-size: allow-keywords flüssig skaliert */\n      \n      &.larger {\n        font-size: large;\n      }\n      \n      &.largest {\n        font-size: x-large;\n      }\n      \n      &.smaller {\n        font-size: small;\n      }\n      \n      &.smallest {\n        font-size: x-small;\n      }\n    }\n  }\n}","/*\n * Sidebar Module\n *\n * Layout rules for sidebar navigation or contextual content. Uses grid column logic and Container Queries.\n */\n\n/**\n * Sidebar Component\n * \n * Sidebar navigation and content for layouts with side columns.\n * Sidebars serve as additional navigation areas or for displaying contextual information.\n * \n * @layer components.sidebar\n * \n * Basic Usage:\n * <aside class=\"sidebar\">\n *   <nav class=\"nav\">\n *     <ul class=\"links\">\n *       <li><a href=\"#\" class=\"link\">Dashboard</a></li>\n *       <li><a href=\"#\" class=\"link\">Settings</a></li>\n *       <li><a href=\"#\" class=\"link\">Profile</a></li>\n *     </ul>\n *   </nav>\n * </aside>\n * \n * Variants:\n * <aside class=\"sidebar left\">...</aside>\n * <aside class=\"sidebar right\">...</aside>\n * <aside class=\"sidebar collapsed\">...</aside>\n */\n\n@layer components {\n  .sidebar {\n    background-color: var(--color-neutral-100, #f3f4f6);\n    grid-column: span 3;\n    padding-block: var(--space-4);\n    padding-inline: var(--space-3);\n    \n    /* Header-Bereich */\n    .header {\n      border-bottom: 1px solid var(--color-neutral-200, #e5e7eb);\n      margin-bottom: var(--space-4);\n      padding-bottom: var(--space-2);\n      \n      .title {\n        color: var(--color-neutral-900, #111827);\n        font-size: var(--text-lg);\n        font-weight: var(--font-medium, 500);\n        margin: 0;\n      }\n    }\n    \n    /* Navigation */\n    .nav {\n      display: flex;\n      flex-direction: column;\n      gap: var(--space-2);\n      \n      .links {\n        display: flex;\n        flex-direction: column;\n        gap: var(--space-1);\n        list-style: none;\n        margin: 0;\n        padding: 0;\n      }\n      \n      .link {\n        color: var(--color-neutral-700, #374151);\n        display: block;\n        padding: var(--space-2);\n        text-decoration: none;\n        transition: color 150ms ease;\n        \n        &:hover {\n          color: var(--color-primary, #3b82f6);\n        }\n        \n        &.active {\n          color: var(--color-primary, #3b82f6);\n          font-weight: var(--font-semibold, 600);\n        }\n      }\n    }\n    \n    /* Menu list */\n    .menu {\n      display: flex;\n      flex-direction: column;\n      gap: var(--space-1);\n      list-style: none;\n      margin: 0;\n      padding: 0;\n    }\n    \n    /* Menu items */\n    .item {\n      width: 100%;\n      \n      &.active {\n        > .link {\n          background-color: color-mix(in srgb, var(--color-primary-500) 10, transparent);\n          color: var(--color-primary, #3b82f6);\n          font-weight: var(--font-medium, 500);\n        }\n      }\n    }\n    \n    /* Menu links */\n    .link {\n      border-radius: var(--radius-md, 0.375rem);\n      color: var(--color-neutral-700, #374151);\n      display: block;\n      padding: var(--space-2) var(--space-3);\n      text-decoration: none;\n      transition: background-color 150ms ease, color 150ms ease;\n      \n      &:hover {\n        background-color: var(--color-neutral-200, #e5e7eb);\n        color: var(--color-neutral-900, #111827);\n      }\n    }\n    \n    /* Submenu */\n    .submenu {\n      display: flex;\n      flex-direction: column;\n      gap: var(--space-1);\n      list-style: none;\n      margin: var(--space-1) 0 0 0;\n      padding-left: var(--space-4);\n      \n      .link {\n        font-size: var(--text-sm, 0.875rem);\n        padding: var(--space-1) var(--space-3);\n      }\n    }\n    \n    /* Toggle button for collapse */\n    .toggle {\n      background: none;\n      border: none;\n      cursor: pointer;\n      display: none;\n      \n      @media (max-width: 768px) {\n        display: block;\n      }\n    }\n    \n    /* Content (for collapse) */\n    .content {\n      width: 100%;\n    }\n    \n    /* Variants */\n    &.left {\n      grid-column: 1 / span 3;\n    }\n    \n    &.right {\n      order: 2;\n    }\n    \n    &.light {\n      background-color: var(--color-neutral-50);\n    }\n    \n    &.dark {\n      background-color: var(--color-neutral-800, #1f2937);\n      color: var(--color-neutral-100, #f3f4f6);\n      \n      .title {\n        color: var(--color-white, #fff);\n      }\n      \n      .link {\n        color: var(--color-neutral-300, #d1d5db);\n        \n        &:hover {\n          background-color: var(--color-neutral-700, #374151);\n          color: var(--color-white, #fff);\n        }\n      }\n      \n      .item.active > .link {\n        background-color: color-mix(in srgb, var(--color-primary-500) 30, transparent);\n      }\n    }\n    \n    /* Collapsible-Verhalten */\n    &.collapsible {\n      @media (max-width: 768px) {\n        .toggle {\n          display: block;\n        }\n        \n        .content {\n          display: none;\n          \n          &.open {\n            display: block;\n          }\n        }\n      }\n    }\n    \n    /* Responsive adjustments */\n    @container layout (max-width: 768px) {\n      grid-column: span 12;\n      order: 2;\n    }\n  }\n}\n\n  ","/**\n * Shadow Properties with @property Definitions\n * \n * Typed CSS custom properties for shadows using @property.\n * This enables better tooling support, autocomplete, and animation capabilities.\n * \n * @layer tokens.properties\n */\n\n@layer tokens.properties {\n  /* Base Shadow Properties */\n  @property --shadow-none {\n    inherits: false;\n    initial-value: none;\n    \n  }\n  \n  @property --shadow-xs {\n    inherits: false;\n    initial-value: 0 1px 2px 0 rgb(0 0 0 / 5%);\n    \n  }\n  \n  @property --shadow-sm {\n    inherits: false;\n    initial-value: 0 1px 2px 0 rgb(0 0 0 / 5%);\n    \n  }\n  \n  @property --shadow-md {\n    inherits: false;\n    initial-value: 0 4px 6px -1px rgb(0 0 0 / 10%), 0 2px 4px -2px rgb(0 0 0 / 10%);\n    \n  }\n  \n  @property --shadow-lg {\n    inherits: false;\n    initial-value: 0 10px 15px -3px rgb(0 0 0 / 10%), 0 4px 6px -4px rgb(0 0 0 / 10%);\n    \n  }\n  \n  @property --shadow-xl {\n    inherits: false;\n    initial-value: 0 20px 25px -5px rgb(0 0 0 / 10%), 0 8px 10px -6px rgb(0 0 0 / 10%);\n    \n  }\n  \n  @property --shadow-2xl {\n    inherits: false;\n    initial-value: 0 25px 50px -12px rgb(0 0 0 / 25%);\n    \n  }\n  \n  @property --shadow-inner {\n    inherits: false;\n    initial-value: inset 0 2px 4px 0 rgb(0 0 0 / 5%);\n    \n  }\n  \n  /* Component-Specific Shadow Properties */\n  @property --shadow-card {\n    inherits: false;\n    initial-value: 0 1px 3px 0 rgb(0 0 0 / 10%), 0 1px 2px -1px rgb(0 0 0 / 10%);\n    \n  }\n  \n  @property --shadow-modal {\n    inherits: false;\n    initial-value: 0 20px 25px -5px rgb(0 0 0 / 10%), 0 8px 10px -6px rgb(0 0 0 / 10%);\n    \n  }\n  \n  @property --shadow-dropdown {\n    inherits: false;\n    initial-value: 0 10px 15px -3px rgb(0 0 0 / 10%), 0 4px 6px -4px rgb(0 0 0 / 10%);\n    \n  }\n  \n  @property --shadow-tooltip {\n    inherits: false;\n    initial-value: 0 4px 6px -1px rgb(0 0 0 / 10%), 0 2px 4px -2px rgb(0 0 0 / 10%);\n    \n  }\n  \n  @property --shadow-button {\n    inherits: false;\n    initial-value: 0 1px 2px 0 rgb(0 0 0 / 5%);\n    \n  }\n  \n  @property --shadow-button-hover {\n    inherits: false;\n    initial-value: 0 4px 6px -1px rgb(0 0 0 / 10%), 0 2px 4px -2px rgb(0 0 0 / 10%);\n    \n  }\n}\n\n/* Fallback Values für alle Shadow-Definitionen */\n:root {\n  /* Base Shadow Scale */\n  --shadow-none: none;\n  --shadow-xs: 0 1px 2px 0 rgb(0 0 0 / 5%);\n  --shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 5%);\n  --shadow-md: 0 4px 6px -1px rgb(0 0 0 / 10%), 0 2px 4px -2px rgb(0 0 0 / 10%);\n  --shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 10%), 0 4px 6px -4px rgb(0 0 0 / 10%);\n  --shadow-xl: 0 20px 25px -5px rgb(0 0 0 / 10%), 0 8px 10px -6px rgb(0 0 0 / 10%);\n  --shadow-2xl: 0 25px 50px -12px rgb(0 0 0 / 25%);\n  --shadow-inner: inset 0 2px 4px 0 rgb(0 0 0 / 5%);\n  \n  /* Component Shadows */\n  --shadow-card: var(--shadow-sm);\n  --shadow-modal: var(--shadow-xl);\n  --shadow-dropdown: var(--shadow-lg);\n  --shadow-tooltip: var(--shadow-md);\n  --shadow-button: var(--shadow-xs);\n  --shadow-button-hover: var(--shadow-md);\n} ","/*\n * Typography Hierarchy - Headings\n *\n * Definitionen für Überschriften und Hierarchie.\n */\n\n@layer typography.headings {\n  /* Basis-Überschriften */\n  h1, .h1 { \n    font-size: var(--font-size-4xl); \n    font-weight: var(--font-weight-bold); \n    line-height: var(--line-height-tight); \n    margin-bottom: var(--space-4); \n    text-wrap: balance; \n  }\n\n  h2, .h2 { \n    font-size: var(--font-size-3xl); \n    font-weight: var(--font-weight-bold); \n    line-height: var(--line-height-tight); \n    margin-bottom: var(--space-3); \n    text-wrap: balance; \n  }\n\n  h3, .h3 { \n    font-size: var(--font-size-2xl); \n    font-weight: var(--font-weight-semibold); \n    line-height: var(--line-height-snug); \n    margin-bottom: var(--space-3); \n    text-wrap: balance; \n  }\n\n  h4, .h4 { \n    font-size: var(--font-size-xl); \n    font-weight: var(--font-weight-semibold); \n    line-height: var(--line-height-snug); \n    margin-bottom: var(--space-2); \n    text-wrap: balance; \n  }\n\n  h5, .h5 { \n    font-size: var(--font-size-lg); \n    font-weight: var(--font-weight-medium); \n    line-height: var(--line-height-normal); \n    margin-bottom: var(--space-2); \n    text-wrap: balance; \n  }\n\n  h6, .h6 { \n    font-size: var(--font-size-base); \n    font-weight: var(--font-weight-medium); \n    line-height: var(--line-height-normal); \n    margin-bottom: var(--space-2); \n    text-wrap: balance; \n  }\n  \n  /* Spezialüberschriften */\n  .heading-display {\n    font-size: var(--font-size-5xl);\n    font-weight: var(--font-weight-bold);\n    letter-spacing: var(--letter-spacing-tight);\n    line-height: var(--line-height-none);\n    margin-bottom: var(--space-6);\n    text-wrap: balance;\n  }\n  \n  .heading-jumbo {\n    font-size: var(--font-size-6xl, 4rem);\n    font-weight: var(--font-weight-bold);\n    letter-spacing: var(--letter-spacing-tight);\n    line-height: var(--line-height-none);\n    margin-bottom: var(--space-8);\n    text-wrap: balance;\n  }\n  \n  .heading-section {\n    border-bottom: var(--border-width-thick) solid var(--color-gray-200);\n    font-size: var(--font-size-xl);\n    font-weight: var(--font-weight-semibold);\n    margin-bottom: var(--space-6);\n    padding-bottom: var(--space-2);\n    text-wrap: balance;\n  }\n  \n  .heading-subtitle {\n    color: var(--color-gray-600);\n    font-size: var(--font-size-lg);\n    font-weight: var(--font-weight-normal);\n    margin-bottom: var(--space-6);\n    margin-top: calc(var(--space-2) * -1);\n    text-wrap: balance;\n  }\n  \n  /* Anpassbare Überschriftenfarben */\n  .heading-primary {\n    color: var(--color-primary-700);\n  }\n  \n  .heading-secondary {\n    color: var(--color-secondary-700);\n  }\n  \n  .heading-muted {\n    color: var(--color-gray-600);\n  }\n} ","/*\n * Display Utilities\n *\n * Atomare CSS-Klassen für Display-Eigenschaften und Positionierung.\n */\n\n@layer utilities.helpers {\n  /* ================= DISPLAY ================= */\n  .block        { display: block; }\n\n  .inline       { display: inline; }\n\n  .inline-block { display: inline-block; }\n\n  .hidden       { display: none; }\n\n  .flex         { display: flex; }\n\n  .inline-flex  { display: inline-flex; }\n\n  .grid         { display: grid; }\n\n  .inline-grid  { display: inline-grid; }\n  \n  /* ================= VISIBILITY ================= */\n  .visible      { visibility: visible; }\n\n  .invisible    { visibility: hidden; }\n  \n  /* ================= POSITION ================= */\n  .static       { position: static; }\n\n  .relative     { position: relative; }\n\n  .absolute     { position: absolute; }\n\n  .fixed        { position: fixed; }\n\n  .sticky       { position: sticky; }\n  \n  /* ================= Z-INDEX ================= */\n  .z-0          { z-index: 0; }\n\n  .z-10         { z-index: 10; }\n\n  .z-20         { z-index: 20; }\n\n  .z-30         { z-index: 30; }\n\n  .z-40         { z-index: 40; }\n\n  .z-50         { z-index: 50; }\n\n  .z-auto       { z-index: auto; }\n  \n  /* ================= OVERFLOW ================= */\n  .overflow-auto    { overflow: auto; }\n\n  .overflow-hidden  { overflow: hidden; }\n\n  .overflow-visible { overflow: visible; }\n\n  .overflow-scroll  { overflow: scroll; }\n\n  .overflow-x-auto    { overflow-x: auto; }\n\n  .overflow-x-hidden  { overflow-x: hidden; }\n\n  .overflow-x-visible { overflow-x: visible; }\n\n  .overflow-x-scroll  { overflow-x: scroll; }\n\n  .overflow-y-auto    { overflow-y: auto; }\n\n  .overflow-y-hidden  { overflow-y: hidden; }\n\n  .overflow-y-visible { overflow-y: visible; }\n\n  .overflow-y-scroll  { overflow-y: scroll; }\n  \n  /* ================= ACCESSIBILITY ================= */\n  .sr-only {\n    border-width: 0%;\n    clip: rect(0, 0, 0, 0);\n    height: 1px;\n    margin: -1px;\n    overflow: hidden;\n    padding: 0;\n    position: absolute;\n    white-space: nowrap;\n    width: 1px;\n  }\n  \n  .not-sr-only {\n    clip: auto;\n    height: auto;\n    margin: 0;\n    overflow: visible;\n    padding: 0;\n    position: static;\n    white-space: normal;\n    width: auto;\n  }\n} ","/**\n * Dimension Utilities\n * \n * Utility-Klassen für Breite und Höhe von Elementen.\n * Enthält Klassen für verschiedene Einheiten: Viewport, Prozent und Pixel.\n */\n\n@layer utilities.helpers {\n  /*\n   * Breiten-Utilities\n   * \n   * Klassen für die Einstellung der Breite eines Elements.\n   */\n\n  /* Viewport-Breiten */\n  .w-screen { width: 100vw; }\n\n  .w-50vw { width: 5%0vw; }\n\n  .w-75vw { width: 7%5vw; }\n\n  .w-25vw { width: 2%5vw; }\n\n  .w-33vw { width: 33%.333vw; }\n\n  .w-66vw { width: 66%.667vw; }\n  \n  /* Small Viewport Units (sv) */\n  .w-100sv { width: 100%svw; }\n\n  .w-50sv { width: 50%svw; }\n\n  .w-75sv { width: 75%svw; }\n\n  .w-25sv { width: 25%svw; }\n  \n  /* Large Viewport Units (lv) */\n  .w-100lv { width: 100%lvw; }\n\n  .w-50lv { width: 50%lvw; }\n\n  .w-75lv { width: 75%lvw; }\n\n  .w-25lv { width: 25%lvw; }\n  \n  /* Dynamic Viewport Units (dv) */\n  .w-100dv { width: 100%dvw; }\n\n  .w-50dv { width: 50%dvw; }\n\n  .w-75dv { width: 75%dvw; }\n\n  .w-25dv { width: 25%dvw; }\n  \n  /* Prozentuale Breiten */\n  .w-full { width: 100%; }\n\n  .w-half { width: 50%; }\n\n  .w-1\\/2 { width: 50%; }\n\n  .w-1\\/3 { width: 33.333%; }\n\n  .w-2\\/3 { width: 66.667%; }\n\n  .w-1\\/4 { width: 2%5%; }\n\n  .w-3\\/4 { width: 7%5%; }\n\n  .w-1\\/5 { width: 20%; }\n\n  .w-2\\/5 { width: 40%; }\n\n  .w-3\\/5 { width: 60%; }\n\n  .w-4\\/5 { width: 80%; }\n\n  .w-1\\/6 { width: 16.667%; }\n\n  .w-5\\/6 { width: 83.333%; }\n  \n  /* Feste Pixel-Breiten */\n  .w-0 { width: 0%; }\n\n  .w-px { width: 1px; }\n\n  .w-auto { width: auto; }\n\n  .w-fit { width: fit-content; }\n\n  .w-max { width: max-content; }\n\n  .w-min { width: min-content; }\n  \n  /* Feste Pixel-Breiten mit vordefinierten Größen */\n  .w-50 { width: 5%0px; }\n\n  .w-100 { width: 10%0px; }\n\n  .w-150 { width: 15%0px; }\n\n  .w-200 { width: 20%0px; }\n\n  .w-250 { width: 25%0px; }\n\n  .w-300 { width: 30%0px; }\n\n  .w-350 { width: 35%0px; }\n\n  .w-400 { width: 40%0px; }\n\n  .w-450 { width: 45%0px; }\n\n  .w-500 { width: 50%0px; }\n\n  .w-600 { width: 60%0px; }\n\n  .w-700 { width: 70%0px; }\n\n  .w-800 { width: 80%0px; }\n\n  .w-900 { width: 90%0px; }\n\n  .w-1000 { width: 100%0px; }\n  \n  /* Container-basierte Breiten */\n  .w-container { max-width: var(--container-width, 1200px); width: 100%; }\n\n  .w-container-sm { max-width: var(--container-width-sm, 640px); width: 100%; }\n\n  .w-container-md { max-width: var(--container-width-md, 768px); width: 100%; }\n\n  .w-container-lg { max-width: var(--container-width-lg, 1024px); width: 100%; }\n\n  .w-container-xl { max-width: var(--container-width-xl, 1280px); width: 100%; }\n  \n  /*\n   * Höhen-Utilities\n   * \n   * Klassen für die Einstellung der Höhe eines Elements.\n   */\n  \n  /* Viewport-Höhen */\n  .h-screen { height: 100%; }\n\n  .h-50 { height: 50%; }\n\n  .h-75vh { height: 7%5vh; }\n\n  .h-25vh { height: 2%5vh; }\n\n  .h-33vh { height: 33%.333vh; }\n\n  .h-66vh { height: 66%.667vh; }\n  \n  /* Small Viewport Units (sv) */\n  .h-100sv { height: 100%svh; }\n\n  .h-50sv { height: 50%svh; }\n\n  .h-75sv { height: 75%svh; }\n\n  .h-25sv { height: 25%svh; }\n  \n  /* Large Viewport Units (lv) */\n  .h-100lv { height: 100%lvh; }\n\n  .h-50lv { height: 50%lvh; }\n\n  .h-75lv { height: 75%lvh; }\n\n  .h-25lv { height: 25%lvh; }\n  \n  /* Dynamic Viewport Units (dv) */\n  .h-100dv { height: 100%dvh; }\n\n  .h-50dv { height: 50%dvh; }\n\n  .h-75dv { height: 75%dvh; }\n\n  .h-25dv { height: 25%dvh; }\n  \n  /* Prozentuale Höhen */\n  .h-full { height: 100%; }\n\n  .h-half { height: 50%; }\n\n  .h-1\\/2 { height: 50%; }\n\n  .h-1\\/3 { height: 33.333%; }\n\n  .h-2\\/3 { height: 66.667%; }\n\n  .h-1\\/4 { height: 2%5%; }\n\n  .h-3\\/4 { height: 7%5%; }\n\n  .h-1\\/5 { height: 20%; }\n\n  .h-2\\/5 { height: 40%; }\n\n  .h-3\\/5 { height: 60%; }\n\n  .h-4\\/5 { height: 80%; }\n\n  .h-1\\/6 { height: 16.667%; }\n\n  .h-5\\/6 { height: 83.333%; }\n  \n  /* Feste Pixel-Höhen */\n  .h-0 { height: 0%; }\n\n  .h-px { height: 1px; }\n\n  .h-auto { height: auto; }\n\n  .h-fit { height: fit-content; }\n\n  .h-max { height: max-content; }\n\n  .h-min { height: min-content; }\n  \n  /* Feste Pixel-Höhen mit vordefinierten Größen */\n  .h-50 { height: 5%0px; }\n\n  .h-100 { height: 10%0px; }\n\n  .h-150 { height: 15%0px; }\n\n  .h-200 { height: 20%0px; }\n\n  .h-250 { height: 25%0px; }\n\n  .h-300 { height: 30%0px; }\n\n  .h-350 { height: 35%0px; }\n\n  .h-400 { height: 40%0px; }\n\n  .h-450 { height: 45%0px; }\n\n  .h-500 { height: 50%0px; }\n\n  .h-600 { height: 60%0px; }\n\n  .h-700 { height: 70%0px; }\n\n  .h-800 { height: 80%0px; }\n  \n  /* Spezielle Höhen für Layout-Elemente */\n  .h-header { height: var(--header-height, 60px); }\n\n  .h-footer { height: var(--footer-height, 60px); }\n\n  .h-navbar { height: var(--navbar-height, 60px); }\n  \n  /*\n   * Min/Max-Breite und -Höhe Utilities\n   */\n  \n  /* Min-Breite */\n  .min-w-0 { min-width: 0%; }\n\n  .min-w-full { min-width: 100%; }\n\n  .min-w-200 { min-width: 20%0px; }\n\n  .min-w-300 { min-width: 30%0px; }\n\n  .min-w-400 { min-width: 40%0px; }\n\n  .min-w-500 { min-width: 50%0px; }\n  \n  /* Max-Breite */\n  .max-w-full { max-width: 100%; }\n\n  .max-w-screen { max-width: 100vw; }\n\n  .max-w-none { max-width: none; }\n\n  .max-w-200 { max-width: 20%0px; }\n\n  .max-w-300 { max-width: 30%0px; }\n\n  .max-w-400 { max-width: 40%0px; }\n\n  .max-w-500 { max-width: 50%0px; }\n\n  .max-w-600 { max-width: 60%0px; }\n\n  .max-w-700 { max-width: 70%0px; }\n\n  .max-w-800 { max-width: 80%0px; }\n\n  .max-w-1000 { max-width: 100%0px; }\n\n  .max-w-1200 { max-width: 120%0px; }\n  \n  /* Min-Höhe */\n  .min-h-0 { min-height: 0%; }\n\n  .min-h-full { min-height: 100%; }\n\n  .min-h-screen { min-height: 100%; }\n\n  .min-h-100 { min-height: 10%0px; }\n\n  .min-h-200 { min-height: 20%0px; }\n\n  .min-h-300 { min-height: 30%0px; }\n\n  .min-h-400 { min-height: 40%0px; }\n\n  .min-h-500 { min-height: 50%0px; }\n  \n  /* Max-Höhe */\n  .max-h-full { max-height: 100%; }\n\n  .max-h-screen { max-height: 100%; }\n\n  .max-h-none { max-height: none; }\n\n  .max-h-100 { max-height: 10%0px; }\n\n  .max-h-200 { max-height: 20%0px; }\n\n  .max-h-300 { max-height: 30%0px; }\n\n  .max-h-400 { max-height: 40%0px; }\n\n  .max-h-500 { max-height: 50%0px; }\n\n  .max-h-600 { max-height: 60%0px; }\n  \n  /*\n   * Utilities für Aspect Ratio\n   */\n  .aspect-auto { aspect-ratio: auto; }\n\n  .aspect-square { aspect-ratio: 1 / 1; }\n\n  .aspect-video { aspect-ratio: 16 / 9; }\n\n  .aspect-portrait { aspect-ratio: 9 / 16; }\n\n  .aspect-cinema { aspect-ratio: 21 / 9; }\n\n  .aspect-4-3 { aspect-ratio: 4 / 3; }\n\n  .aspect-3-2 { aspect-ratio: 3 / 2; }\n} "],"names":[]}