{"version":3,"sourceRoot":null,"mappings":"AA2EA,kBAiLE,wXAWE,kJAMA,yHAKA,yGAMA,kDAKA,oDAIA,oDAIA,oDAIA,0CAKA,gFAKA,yEAOF,iEAKE,qCAIA,qGAYF,yXAYE,kJAMA,oHAQA,kFAMA,0EAOA,yIAIE,0FAKF,+IAIE,4FAKF,gEAKA,iCAMF,iDAIE,sJASA,0DASF,irBAiBE,kJAMA,oHAQA,0JAOA,iJAQA,yIAIE,0FAKF,+IAIE,4FAMF,yDAIE,qFAIE,4FAOJ,kFA2HF,sHAOE,+NAUE,kGAIE,+JAaF,kFAKA,wHAKE,0DAQJ,mCAGE,sDAMF,0CAGE,mDAIE,gDAQN,mEAKE,gDAsVA,grDAqDE,mCAAqC,wVAyQvC,gCACE,mGAKA,gJAOA,mGAKA,iJAqYF,mOASE,oIAQA,iQAYA,0IAQE,wIAOF,yNAQE,wBAIA,uDAMF,0NAUA,iIAOE,yJAKA,2JAOF,KACE,0GAKA,4DAKA,8DAKF,KACE,2GAKA,2DAKA,+DAMF,mHAMA,oDAGE,gHAOF,wDAGE,oHAOF,wDAGE,oHAOF,qKAME,gHAi7BJ,6NAWE,+IAME,4BAIA,+BAKF,yFAKE,0BAA6B,0BAI7B,0BAA6B,2BAK/B,sFAKE,0BAA6B,0BAI7B,0BAA6B,0BAK/B,sFAKE,0BAA6B,yBAI7B,0BAA6B,0BAK/B,qFAKE,0BAA6B,0BAK/B,qFAKE,0BAA6B,4BAK/B,gHAME,0BAA6B,kCAM/B,0CAGE,8BAIA,gGAKE,0BAA6B,4BAK/B,yCAGE,0BAA6B,kCAOjC,8GAOE,gFAMA,qEAOF,4EAIE,wCAGE,8BAIA,4DAMF,+BAKF,0BAGE,4BAGE,8BAMJ,6BAGE,iCAGE,mCAOJ,2CAGE,iGAKE,6BAKF,6DAIE,gCAOJ,mKAOE,0BAA6B,uFAM7B,gCAIA,qIAOE,0BAOJ,qKAQA,kRAWE,0BAA6B,8EAM7B,iEASF,mEAKE,0BAA6B,wDAK7B,mGAKE,0BAA6B,wBAK/B,mFAKA,mEAMF,iCAIE,iDAIA,sCAKF,gCAGE,0BAA6B,uBAI7B,kCAKA,2IAOE,0BAA6B,kCAOjC,uGAKE,0BAA6B,wBAM/B,sDAIA,mDAIA,sBAIA,6BAIA,8CAGE,kCAEA,4DAEA,4DAEA,iCAEA,2DAQA,6BAGF,gDAGE,kCAEA,6DAEA,4DAEA,iCAEA,2DAQA,8BAGF,uBAKA,0BAA6B,qEAI3B,+CAIA,iDAKF,0BAA6B,qEAI3B,sCAIA,kDAIA,wCAGE,oCAQN,mCACE,uLAME,gGAKA,QACE,wDAIA,uDAIA,4EAKF,gEAIA,uDAIA,6DAOJ,2CACE,sBACE,4EAIE,+BAEA,+BAEA,8BAEA,8BAEA,gCAEA,sCAEA,oCAEA,0CAEA,oGAMA,oFAMA,gEAIE,kCAKF,gCAGE,8CAKF,4BAIA,+CAIA,kDAMJ,sBACE,4EAIE,+BAEA,8BAEA,8BAEA,sCAIA,kDAIA,wCAGE,qCASR,aACE,+FAME,sGAKA,4BAKA,4DAIA,+EAKA,+JAMA,gHAQJ,+BACE,MACE,8BAIA,QACE,4BAKF,mCAIA,0BAOJ,uCACE,MACE,sBA+MJ,2dAqBE,gCAKA,wEAMA,uDAIA,oDAMF,kKAUE,6DAKE,yDAOF,mFAME,4EAQA,0KAQE,0CAIA,kFAMF,gBACE,0BAA6B,eAOjC,0FAQA,mDAKE,iBAMF,uBAGE,0BAA6B,wEAU/B,+IAUA,mEAIE,+CAGE,wCAMJ,iDAIA,yDAGE,+CAGE,wCAOJ,0BAA6B,oCAG3B,6BAIA,oBAIA,kCAOJ,8FAME,mJAWF,2DAKE,gHAUF,YACE,4FASA,uBAIA,iRAWE,oFAKA,wFAOF,0HAOA,oFAMA,+UAgBA,qHAOA,2CAKA,sIAQA,iEAKA,uCAMA,iPAYA,sGAKA,0EAMA,uKAQA,gEAKA,6FAeF,qKASE,0BAA6B,eAU/B,mNAWE,0BAA6B,eAqE/B,iBACE,iDAMF,eACE,2DAKA,uBAIA,sBAIA,0CAOF,cACE,gDAIA,oCAIA,uBAIA,oCAMF,gBACE,6EAMA,6BAIA,SACE,2EAMA,iCAOJ,aACE,iEAUF,mBACE,8JAQA,sDAIA,gDAKA,0GAOF,2BACE,6CAGE,2DAKA,6BAIA,+BAIA,uDAKA,uDAIA,yEAIA,4EAQJ,0BACE,6CAGE,2DAKA,2BAIA,+BAIA,uDAKA,uDAIA,2EA2SJ,gSAeE,yLAQA,+BAGE,+BAMF,qHAOE,yEAMA,iEAOF,sDAME,kCAGE,gCAOJ,sEAOA,gDAIA,kDAKA,2BAIA,uBAIA,0BAMF,4JASE,2BAGE,oCAOF,kGAQA,iEAOA,2LAWA,gFAOA,0CAIE,6OAWE,mEAQJ,yCAIE,8DAIE,yCAOJ,iDAIA,yDAGE,yCAIA,0DAIA,6CAIA,4DAIA,+DAIA,yGAMF,sFAIE,yCAIA,0DAIA,4CAIA,4DAIA,uDAIA,gGAMF,yEAKE,0GAQF,0BACE,8CAKA,oEAMF,0BACE,qEAMA,mDAMF,0BACE,uCAOJ,6EAKE,qFAQF,eACE,qHAOE,0BAA6B,uEAO/B,+CAIE,0BAA6B,2CAQjC,gBACE,oHAKE,2BAA8B,oCAI9B,0BAA6B,iDAM/B,4BAGE,0BACE,8CAMJ,4BAGE,2BACE,uDAKF,0BACE,8CAMJ,4BAGE,2BACE,uDAKF,0BACE,8CAMJ,UACE,+GASJ,gBACE,6FAME,kFAIE,oDAOJ,kEAKE,0BAA6B,2CAQjC,cACE,gFAKE,0BAA6B,+DAO/B,qEAKE,0BAA6B,oBAK/B,sEAKE,0BAA6B,oBAK/B,+CAIE,0BAA6B,2CAQjC,yGAKE,gFAKE,0BAA6B,4DAO/B,+CAIE,0BAA6B,2CAQjC,6EAKE,sGAIE,qEAIA,mCAGE,gDAMF,kFAIA,mEAIA,0FAKF,iGAIE,4DAIA,mCAGE,+CAMF,kFAIA,mEAIA,0FAKF,sEAIE,qEAIA,2CAGE,wDAMF,kFAIA,mEAIA,2FAkKJ,yIAOE,8HAKE,sHASF,6DAKE,kGASA,+HAOE,2CAIA,mFAQJ,iGAUA,mBAGE,SACE,2JASJ,0MAQE,kGAOF,wIAQE,+EAOF,iEAME,sBAA2B,eAM7B,sBAKA,4BAIA,gBAIA,iDAIA,gGAIE,uCAIA,+CAGE,yFAMF,iGAMF,cACE,sBACE,wBAIA,wBAGE,wBAQN,iCAAsC,6BA4IxC,qJASE,2HAMA,gCAIA,wFAMA,kKAQA,uCAGE,8EAMA,uHAQA,8CAKF,wCAIA,2FAIE,wDAQF,2FAOF,+LAQE,+DAKA,mDAMA,4EAME,6EAMA,sFAMA,yHAME,qCAeN,gKAOE,4DAIE,mCAKF,yDAKA,wDAOF,sCAGE,uFAMA,2CAKA,8MAUE,wDAIA,0DAIA,0DAIA,qBA0DJ,+TAeE,0DAKA,2BAKA,mGAKA,yGAKA,mGAKA,mGAKA,8FAKA,0FAMA,8BAIA,yBAIA,mDAIE,kDAMF,2CAKA,uCAMA,iHASA,2RAkBE,0CAoFA,6UAaE,eAIA,yCAMA,0EAKE,+KAUF,8IAMA,sIAMA,kJAKE,yFAOF,cAGE,kDAEA,yCAEA,oEAEA,6CAEA,2CAKJ,kCAGE,2UAcE,kGAMF,gCAiEF,4MAQE,+MAQE,gFAMA,2CAIE,gMASE,oGAQN,+BAIA,8MASA,oDAGE,oEAMF,gDAGE,8DAMF,+FAIE,yGAMF,kHAKE,iHAKA,sJAQF,KACE,+CAGE,2CAKF,+BAIA,gFAMF,KACE,+CAGE,mCAKF,+BAIA,gDAKF,kBAKA,uCAKA,YACE,+BAIA,8BAKF,kIAuFF,mGAKE,2BAIA,8CAIA,oDAMA,mDAMA,yEAOA,yCAMA,qBAIA,iBAIA,oBAKA,iCAKA,gCAKA,sCAKA,iCAKA,mBAwHF,0cAkBA,uEAKA,wEAIA,sEAKA,uEAIA,8GAMA,6EAIA,0EAKA,mEAIA,uFAKA,mEAIA,uEAKA,gEAIA,oEAKA,6DAIA,4GAOA,kFAMA,qGAMA,6GAMA,4GAMA,qGAMA,qGAOA,8EAMA,iDAKA,sCAIA,4DAMA,yDAKA,oDAKA,wPAkBA,wXAWE,kJAMA,yHAKA,yGAMA,kDAKA,oDAIA,oDAIA,oDAIA,0CAKA,gFAKA,yEAOF,iEAKE,qCAIA,qGAYF,yXAYE,kJAMA,oHAQA,kFAMA,0EAOA,yIAIE,0FAKF,+IAIE,4FAKF,gEAKA,iCAMF,iDAIE,sJASA,0DASF,irBAiBE,kJAMA,oHAQA,0JAOA,iJAQA,yIAIE,0FAKF,+IAIE,4FAMF,yDAIE,qFAIE,4FAOJ,kFA2HF,sHAOE,+NAUE,kGAIE,+JAaF,kFAKA,wHAKE,0DAQJ,mCAGE,sDAMF,0CAGE,mDAIE,gDAQN,mEAKE,gDAsVA,grDAqDE,mCAAqC,wVA4CvC,yJAUA,0FAOA,gFAOA,iGAOA,wCAKA,2DAMA,oCAaA,yKASA,qGAMA,kFAMA,6HAQA,kEAaA,+cAkBA,gIAOA,sEAMA,sHAgBA,iGAIA,sKAMA,mGAIA,sKAYA,sHAKA,mKAOA,8IAKA,2LAQA,kJAOA,gHAKA,wMAQA,sIAMA,gCACE,mGAKA,gJAOA,mGAKA,iJASF,6IAQA,6IASA,+DAIA,+DAKA,0MAgBA,kLAQA,2KAeA,4dAWA,6KAOA,yHAMA,0HAaA,sDAaA,kMAQA,wCAKA,wFAOA,wfAaA,yHAMA,uEAKA,sEAKA,+CAKA,iIAOA,0IAMA,2ZAQA,2SAQA,qFAMA,sFAMA,sDAaA,qEAIA,gGAMA,4dAWA,sOAYA,6BAKA,6GAUA,uRAcA,4OAWA,gEAMA,gUAWA,yJAcA,qGAOA,mDAIA,0BA0CA,mOASE,oIAQA,iQAYA,0IAQE,wIAOF,yNAQE,wBAIA,uDAMF,0NAUA,iIAOE,yJAKA,2JAOF,KACE,0GAKA,4DAKA,8DAKF,KACE,2GAKA,2DAKA,+DAMF,mHAMA,oDAGE,gHAOF,wDAGE,oHAOF,wDAGE,oHAOF,qKAME,gHASJ,0QAkBA,gGAMA,iHAOA,yHAMA,sCAIA,6LAQA,+PAiBA,kEAMA,0DAIA,0FAMA,iJAUA,oMAUA,gLASA,uGAIA,mGAKA,sHASA,mCAIA,uXAUA,gCAIA,4PAWA,kFAgBA,sIAQA,mcAeA,uJAOA,8FAKA,qIAMA,yHAMA,sEAQA,gCAKA,+DAMA,wHAkpBA,iHAOA,mDAIA,oDAIA,qEAMA,wEAKA,yDA0HA,sBACE,wHAOA,+DAsQF,sBACE,6CAKA,4FAIA,mGAIA,+IAmNF,wTAUE,4CAKA,yEAOA,mCAKE,qBAIA,qBAKA,+BAAoC,sBAGlC,uBAIA,qBAKF,+BAAoC,sBAGlC,wBAIA,wBAOJ,mEAKA,gDAIA,gEAMA,mDAIE,kCAOF,qEAIE,iEAg2dA,4BArkdJ,sBACE,iEAqNF,sBACE,sCAIA,oCAyRF,sBACE,4EAMA,wDAOF,sBACE,+CAIA,4HAMA,yGAOA,qJAsMF,sBACE,iEAKA,sDA4PF,sBACE,yCAsDF,oKAWE,gKAUA,SACE,2DAIA,+BAIA,+DAMF,OACE,SACE,4DAKA,+BAIA,kEAOJ,UACE,SACE,2DAIA,0CAIA,gEAMJ,QACE,SACE,mFAKA,+BAIA,wFAQJ,8BAIE,oBAKF,8BAIE,oBAMF,uDAIA,4DAIA,+DAsEF,uHASE,6FAQA,maAgBA,8GAME,kMAOA,iOAUE,iDAOJ,4JAQA,gJASA,oCAIA,2DAIA,oCAIA,8EAQA,yBA4BE,uDAMA,kCAIA,sBAIA,sCAMA,wBAGE,8BAKF,0BAGE,8BAKF,wBAGE,8BAKF,4BAGE,+BAOJ,uCAIE,4GAKA,oFAIA,6EAKA,gCACE,yCAOJ,mDAKA,6BAGE,8CAKF,8BAGE,kDAyFJ,mUAaE,mEAKA,+DAKA,mEAKA,6DAMA,sEAQA,kBAGE,gFAKA,qCAOF,oNAaE,mBAMF,qEAOA,8EASA,kIASA,4BAKA,0BAKA,kCAKA,gCAKA,gDAOF,+JASE,kDAMA,gDAMA,wDAMA,uDAyEF,gBACE,0DAmIF,kFAiPA,yCAKE,wIAOA,wXAUE,sKAMA,4DAIA,2EAKA,qEAIE,iDAOJ,qDAKA,sBAGE,wBAMF,QACE,mDAKA,+FAIE,oHAMA,yEAMJ,YACE,wDAIE,gEAMJ,QACE,gCAKA,qOAOE,qFAOF,uMAYF,qDAIE,wNASA,qDAKE,wGASJ,KACE,8GAKA,0CAKF,KACE,gHAKA,2CAMF,kHAKA,kHAKA,4GAKA,yHAsEF,gGAME,0DAIA,wJAOA,+KAMA,oEAKA,mFAIA,gLAKA,kGAKA,uDAMA,yBAIE,yCAKA,6CAKA,wBAIA,0BAIA,wBAIA,6BAMF,6EAGE,wEAIA,0BACE,+DAKF,0BACE,0CAOF,0BACE,+EAMJ,aACE,sBAA2B,kDAQ7B,wBAIA,4BAIA,0BAKA,oGAKA,oGAKA,gGAoEF,kQAaE,kBAIA,wCAKA,2HAUE,mBAMF,wDAIA,oDAIA,mEAKA,kDAKA,qIAQE,4BAKA,0BAKA,kCAKA,kCAsFJ,gDAIE,+CAKA,mlBAkBA,wEAOA,kHAOA,8GAOA,8GAOA,gHAQA,oHAKA,wJAQA,+LAMA,wGAKA,2GAKA,2GAKA,4GAKA,uGAMA,yBAIE,6FAUA,wBAIA,0BAIA,wBAIA,6BAMF,sCAGE,2PAQA,gFAOF,+MAWA,wFAMA,wFAMA,wFAMA,yFAoEF,yEAOE,sHAQE,gKAaF,6LAaE,uXAkBA,2IAQA,oHAQA,SACE,gHAMA,uFAMF,YACE,gHAME,uBAMF,8JAWA,iCAKF,QACE,4GAMA,2CAKF,0CAOF,yJAQA,gFAME,gCAMF,qDAIE,4GAOE,0EAQF,2IAOE,4BAKA,oFAQF,mBAMF,gBACE,2JAOE,sGA4CN,yIAOE,8HAKE,sHASF,6DAKE,kGASA,+HAOE,2CAIA,mFAQJ,iGAUA,mBAGE,SACE,2JASJ,0MAQE,kGAOF,wIAQE,+EAOF,iEAME,sBAA2B,eAM7B,sBAKA,4BAIA,gBAIA,iDAIA,gGAIE,uCAIA,+CAGE,yFAMF,iGAMF,cACE,sBACE,wBAIA,wBAGE,wBAQN,iCAAsC,6BA6CxC,mpBA4BA,6NAWE,+IAME,4BAIA,+BAKF,yFAKE,0BAA6B,0BAI7B,0BAA6B,2BAK/B,sFAKE,0BAA6B,0BAI7B,0BAA6B,0BAK/B,sFAKE,0BAA6B,yBAI7B,0BAA6B,0BAK/B,qFAKE,0BAA6B,0BAK/B,qFAKE,0BAA6B,4BAK/B,gHAME,0BAA6B,kCAM/B,0CAGE,8BAIA,gGAKE,0BAA6B,4BAK/B,yCAGE,0BAA6B,kCAOjC,8GAOE,gFAMA,qEAOF,4EAIE,wCAGE,8BAIA,4DAMF,+BAKF,0BAGE,4BAGE,8BAMJ,6BAGE,iCAGE,mCAOJ,2CAGE,iGAKE,6BAKF,6DAIE,gCAOJ,mKAOE,0BAA6B,uFAM7B,gCAIA,qIAOE,0BAOJ,qKAQA,kRAWE,0BAA6B,8EAM7B,iEASF,mEAKE,0BAA6B,wDAK7B,mGAKE,0BAA6B,wBAK/B,mFAKA,mEAMF,iCAIE,iDAIA,sCAKF,gCAGE,0BAA6B,uBAI7B,kCAKA,2IAOE,0BAA6B,kCAOjC,uGAKE,0BAA6B,wBAM/B,sDAIA,mDAIA,sBAIA,6BAIA,8CAGE,kCAEA,4DAEA,4DAEA,iCAEA,2DAQA,6BAGF,gDAGE,kCAEA,6DAEA,4DAEA,iCAEA,2DAQA,8BAGF,uBAKA,0BAA6B,qEAI3B,+CAIA,iDAKF,0BAA6B,qEAI3B,sCAIA,kDAIA,wCAGE,oCAQN,mCACE,uLAME,gGAKA,QACE,wDAIA,uDAIA,4EAKF,gEAIA,uDAIA,6DAOJ,2CACE,sBACE,4EAIE,+BAEA,+BAEA,8BAEA,8BAEA,gCAEA,sCAEA,oCAEA,0CAEA,oGAMA,oFAMA,gEAIE,kCAKF,gCAGE,8CAKF,4BAIA,+CAIA,kDAMJ,sBACE,4EAIE,+BAEA,8BAEA,8BAEA,sCAIA,kDAIA,wCAGE,qCASR,aACE,+FAME,sGAKA,4BAKA,4DAIA,+EAKA,+JAMA,gHAQJ,+BACE,MACE,8BAIA,QACE,4BAKF,mCAIA,0BAOJ,uCACE,MACE,sBA+MJ,2dAqBE,gCAKA,wEAMA,uDAIA,oDAMF,kKAUE,6DAKE,yDAOF,mFAME,4EAQA,0KAQE,0CAIA,kFAMF,gBACE,0BAA6B,eAOjC,0FAQA,mDAKE,iBAMF,uBAGE,0BAA6B,wEAU/B,+IAUA,mEAIE,+CAGE,wCAMJ,iDAIA,yDAGE,+CAGE,wCAOJ,0BAA6B,oCAG3B,6BAIA,oBAIA,kCAOJ,8FAME,mJAWF,2DAKE,gHAUF,YACE,4FASA,uBAIA,iRAWE,oFAKA,wFAOF,0HAOA,oFAMA,+UAgBA,qHAOA,2CAKA,sIAQA,iEAKA,uCAMA,iPAYA,sGAKA,0EAMA,uKAQA,gEAKA,6FAOF,oFAQA,qKASE,0BAA6B,eAK/B,gCAKA,mNAWE,0BAA6B,eAK/B,qCAIA,8FASA,+DAIA,6KASA,yDAIA,gGAKA,qFAMA,iEAIA,iEAKA,wDAIA,mFAKA,+DAKA,iBACE,iDAMF,eACE,2DAKA,uBAIA,sBAIA,0CAOF,cACE,gDAIA,oCAIA,uBAIA,oCAMF,gBACE,6EAMA,6BAIA,SACE,2EAMA,iCAOJ,aACE,iEAUF,mBACE,8JAQA,sDAIA,gDAKA,0GAOF,2BACE,6CAGE,2DAKA,6BAIA,+BAIA,uDAKA,uDAIA,yEAIA,4EAQJ,0BACE,6CAGE,2DAKA,2BAIA,+BAIA,uDAKA,uDAIA,2EA2SJ,gSAeE,yLAQA,+BAGE,+BAMF,qHAOE,yEAMA,iEAOF,sDAME,kCAGE,gCAOJ,sEAOA,gDAIA,kDAKA,2BAIA,uBAIA,0BAMF,4JASE,2BAGE,oCAOF,kGAQA,iEAOA,2LAWA,gFAOA,0CAIE,6OAWE,mEAQJ,yCAIE,8DAIE,yCAOJ,iDAIA,yDAGE,yCAIA,0DAIA,6CAIA,4DAIA,+DAIA,yGAMF,sFAIE,yCAIA,0DAIA,4CAIA,4DAIA,uDAIA,gGAMF,yEAKE,0GAQF,0BACE,8CAKA,oEAMF,0BACE,qEAMA,mDAMF,0BACE,uCAOJ,6EAKE,qFAQF,eACE,qHAOE,0BAA6B,uEAO/B,+CAIE,0BAA6B,2CAQjC,gBACE,oHAKE,2BAA8B,oCAI9B,0BAA6B,iDAM/B,4BAGE,0BACE,8CAMJ,4BAGE,2BACE,uDAKF,0BACE,8CAMJ,4BAGE,2BACE,uDAKF,0BACE,8CAMJ,UACE,+GASJ,gBACE,6FAME,kFAIE,oDAOJ,kEAKE,0BAA6B,2CAQjC,cACE,gFAKE,0BAA6B,+DAO/B,qEAKE,0BAA6B,oBAK/B,sEAKE,0BAA6B,oBAK/B,+CAIE,0BAA6B,2CAQjC,yGAKE,gFAKE,0BAA6B,4DAO/B,+CAIE,0BAA6B,2CAQjC,6EAKE,sGAIE,qEAIA,mCAGE,gDAMF,kFAIA,mEAIA,0FAKF,iGAIE,4DAIA,mCAGE,+CAMF,kFAIA,mEAIA,0FAKF,sEAIE,qEAIA,2CAGE,wDAMF,kFAIA,mEAIA,2FAyLJ,4MAQE,+MAQE,gFAMA,2CAIE,gMASE,oGAQN,+BAIA,8MASA,oDAGE,oEAMF,gDAGE,8DAMF,+FAIE,yGAMF,kHAKE,iHAKA,sJAQF,KACE,+CAGE,2CAKF,+BAIA,gFAMF,KACE,+CAGE,mCAKF,+BAIA,gDAKF,kBAKA,uCAKA,YACE,+BAIA,8BAKF,kIA0EF,+TAeE,0DAKA,2BAKA,mGAKA,yGAKA,mGAKA,mGAKA,8FAKA,0FAMA,8BAIA,yBAIA,mDAIE,kDAMF,2CAKA,uCAMA,iHASA,2RAkBE,0CAQJ,iDA0EA,mGAKE,2BAIA,8CAIA,oDAMA,mDAMA,yEAOA,yCAMA,qBAIA,iBAIA,oBAKA,iCAKA,gCAKA,sCAKA,iCAKA,mBAMF,oMASA,8CA2FI,0OAUA,6UAaE,eAIA,yCAMA,0EAKE,+KAUF,8IAMA,sIAMA,kJAKE,yFAOF,cAGE,kDAEA,yCAEA,oEAEA,6CAEA,2CAKJ,kCAGE,2UAcE,kGAMF,gCA8EF,qJASE,2HAMA,gCAIA,wFAMA,kKAQA,uCAGE,8EAMA,uHAQA,8CAKF,wCAIA,2FAIE,wDAQF,2FAOF,+LAQE,+DAKA,mDAMA,4EAME,6EAMA,sFAMA,yHAME,qCAQN,qGAOA,gKAOE,4DAIE,mCAKF,yDAKA,wDAOF,sCAGE,uFAMA,2CAKA,8MAUE,wDAIA,0DAIA,0DAIA,qBAuCJ,knBA6BA,+XAeE,gIAUA,sBAGE,cAMF,wEAKE,yEAMA,iEAOF,mFAME,2RAaE,gHAMA,kEAQJ,uCAGE,oUAgBE,wCAKE,KACE,yGAME,8DAQR,mGASF,uEAKE,sDAKE,mDAIA,kDAIA,mDAOJ,mEAKE,kDAMA,gDAGE,0BAA6B,eAOjC,kIAQE,+CAKA,iEAOF,gCAKA,+DAIE,iDAKF,cACE,+CAIA,0FASF,0BAA6B,oEAI3B,qCAIA,qCAGE,sCAMJ,0BACE,+CAIA,kBACE,uCASN,yvBAyBA,qIAQA,4CAKA,yGASA,2CAKA,8KAQA,uGAKA,0NAWA,4GAMA,sDAKA,4DAIA,iFAQA,sDAKA,qFAMA,8EAKA,6DAIA,uDAKA,mKAOA,oKAQA,0QAQA,mGAKA,0JAMA,iPAQA,yGAMA,4HAOA,gFAMA,+FASA,uCAIA,8PAeA,2DAIA,gCAKA,mCAIA,2EAMA,gGAMA,gFAIA,+SAcA,6DAIA,kEAKA,wEAOA,kEAMA,sFAOA,2EAIA,0EAIA,4EAKA,gEAMA,4DAMA,qDAKA,0BACE,yDAKA,+EAKA,iDAKA,+FAOA,oCAMF,sBACE,yDAKA,+EAKA,iDAKA,+FAMA,oCAMF,aACE,sBAMF,uCACE,wFAwCF,o3BAsCA,+hBAoBE,2HAKE,8GASF,aAGE,kGAQE,uBAGE,gNAWE,kGAMA,uEAKA,uJASF,mDAOA,oPAgBN,oEAIE,wBAGE,4EAIE,6FAUN,0EAIE,4BAIA,sMAWF,wGAKE,0FAME,kDAMA,iCAIE,yDAKA,gGAUN,iDAGE,oDAKF,8EAMA,iDAIA,6CAKA,0BAA6B,yCAI3B,iCAOJ,qBACE,sDAGE,qGAOA,4DAKA,wBAKA,8BAGE,8UAmBJ,uKAUE,gDAKA,yEAQJ,2DAIE,+BAKA,8IAaA,yBAMF,cACE,kFAKA,0EAIA,0BACE,iCAOJ,SACE,4UASE,cACE,kEAKA,yEAMF,4FAWJ,2CACE,sBACE,mDAIE,gCAKF,6CAOJ,aACE,uBAMF,+BACE,0BAGE,qCAGE,sDAUN,uCACE,yBAGE,+BAKF,mEAmCF,0+BAwCA,mjBAsBE,+LAQE,mHAMA,2IAQE,mDAKA,4EAQJ,6CAMA,MACE,8FAQE,uBAGE,sNAWE,qGAMA,0EAKA,0JASF,mDAOA,oPAgBN,kEAGE,8BAIA,oLAWF,8GAKE,kDAIE,oUAaE,gHAMA,0EAKA,qHAKE,oHAWR,qCAMA,oDAIA,gDAIA,+CAGE,gFAKA,mDAIA,oDAMF,0BAA6B,iDAK7B,uDACE,gFAKA,mDAIA,qDAOJ,qDAIE,0DAMA,uGAQA,qHASA,+BAGE,mDAOF,kKAaA,yBAMF,oDAIE,0DAMA,+BAIA,yCAIA,yEAIA,8FAIA,uFAIA,oFAMF,uGAOE,2SAcA,kEAMF,8EAIE,oEAKA,eAGE,iCAMF,2CAIA,+DAIA,sFAMA,4EAMF,YACE,4VASE,cACE,kEAKA,yEAMF,gEAIA,0NAME,2GAUN,iBACE,8HAUF,2CACE,sBACE,8DAMF,mDACE,YACE,gFAKA,mDAIA,sDAQN,aACE,0BAMF,+BACE,6BAGE,qCAGE,sDAUN,uCACE,4BAGE,mDAMF,iFAsCF,0+BAwCA,kjBAsBE,+LAQE,mBACE,mEAOA,oGAMF,2IAQE,mDAKA,4EAQJ,6CAMA,iEAGE,2NAQE,+DAKA,wDAOJ,MACE,iFAQE,wEAIE,gCAIA,6MAWE,qGAMA,2EAKA,0JASF,iDAOA,gOAYA,8EAMA,sDAQN,4GAME,yBAIA,6BAGE,wBAGE,0EAIE,8FAWR,kEAGE,8BAIA,oLAWF,8GAKE,gGAME,sDAMA,iCAIE,2DAKA,yFAQJ,kDAIE,oUAaE,gHAMA,0EAKA,qHAKE,oHAWR,qCAMA,oDAIA,gDAKA,0BAA6B,WAG3B,qGAMF,uDACE,gFAKA,mDAIA,qDAOJ,qDAIE,0DAMA,+BAKA,kKAaA,yBAMF,uGAOE,2SAcA,kEAMF,oDAIE,0DAMA,+BAIA,yCAIA,yEAIA,+FAMF,qGAOE,wLAWA,iEAMF,YACE,4VASE,0KAKE,uDAKF,cACE,kEAKA,yEAMF,6DAIA,gEAIA,qBACE,qDAIA,oLAME,4GAWR,iBACE,oJAWF,2CACE,sBACE,wBAGE,sGAOJ,mDACE,YACE,gFAKA,mDAIA,sDAQN,aACE,0BAMF,+BACE,6BAGE,qCAGE,oDAOF,sDAOJ,uCACE,4BAGE,8DAOF,gDAoDF,0jBAuBA,6RAYE,8HASE,yFAME,8FAMA,0FAQJ,2HAME,sCAOF,gIAME,6EAMA,0EAKA,oIASF,sFAMA,6CAIE,kCAOF,YACE,qCAGE,6DAOF,yLAUF,kCAGE,qCAIA,oCAKF,2DAIE,qCAIA,kDAKF,kDAIE,0CAMF,0BAA6B,+BAG3B,qCAGE,gCAGE,2CAMJ,mCAKA,iBACE,+HAMA,wIAMA,oLAUJ,0BACE,iBACE,kBACE,sFAKA,6GAmBR,mBACE,sGAIE,kEAKA,wEAKF,gGAQF,oBACE,wBAGE,uFAKE,sDAIE,+OAeF,iQAcA,+DAGE,+DAON,kDAMF,mBACE,6HAUF,aACE,6RAOE,kGAIE,kEAKA,gEAKF,qBACE,0EAKE,uGAQA,uDAGE,yDAUV,2CACE,sBACE,6CAGE,qCAGE,gCAGE,2CAMJ,mCAKA,iBACE,+HAMA,wIAMA,qLAWN,sBACE,4BACE,kBACE,sFAKA,6GAWR,aACE,wBAGE,iDAKA,+FASJ,+BACE,aACE,mCAIA,sHAUJ,uCACE,aACE,8BAiEJ,yEAOE,sHAQE,gKAaF,6LAaE,uXAkBA,2IAQA,oHAQA,SACE,gHAMA,uFAMF,YACE,gHAME,uBAMF,8JAWA,iCAKF,QACE,4GAMA,2CAKF,0CAOF,yJAQA,gFAME,gCAMF,qDAIE,4GAOE,0EAQF,2IAOE,4BAKA,oFAQF,mBAMF,gBACE,2JAOE,sGAiFN,gDAIE,+CAKA,mlBAkBA,wEAOA,kHAOA,8GAOA,8GAOA,gHAQA,oHAKA,wJAQA,+LAMA,wGAKA,2GAKA,2GAKA,4GAKA,uGAMA,yBAIE,6FAUA,wBAIA,0BAIA,wBAIA,6BAMF,sCAGE,2PAQA,gFAOF,+MAWA,wFAMA,wFAMA,wFAMA,yFAsEF,kQAaE,kBAIA,wCAKA,2HAUE,mBAMF,wDAIA,oDAIA,mEAKA,kDAKA,qIAQE,4BAKA,0BAKA,kCAKA,kCA+CJ,gVAgBA,6EAMA,kDAKA,4CAKA,qEAOA,qDAIA,oDAKA,mFASA,+TAmBA,+CAMA,uGAKA,6GAKA,uGAKA,kGAKA,uGAKA,8FAMA,8EAKA,kFAKA,8EAKA,2EAKA,kGAKA,wEAMA,sFAMA,mEAIA,+DAIA,2DAIA,wDAIA,2DAIA,qDAKA,2GAMA,0EAIA,mFAMA,oEAKA,uEAKA,6CAKA,8CAKA,iIASA,wPAeA,qDAOA,gCAIA,kFAOA,sBACE,sEAKA,iCA+DF,yCAKE,wIAOA,wXAUE,sKAMA,4DAIA,2EAKA,qEAIE,iDAOJ,qDAKA,sBAGE,wBAMF,QACE,mDAKA,+FAIE,oHAMA,yEAMJ,YACE,wDAIE,gEAMJ,QACE,gCAKA,qOAOE,qFAOF,uMAYF,qDAIE,wNASA,qDAKE,wGASJ,KACE,8GAKA,0CAKF,KACE,gHAKA,2CAMF,kHAKA,kHAKA,4GAKA,yHA8FF,gGAME,0DAIA,wJAOA,+KAMA,oEAKA,mFAIA,gLAKA,kGAKA,uDAMA,yBAIE,yCAKA,6CAKA,wBAIA,0BAIA,wBAIA,6BAMF,6EAGE,wEAIA,0BACE,+DAKF,0BACE,0CAOF,0BACE,+EAMJ,aACE,sBAA2B,kDAQ7B,wBAIA,4BAIA,0BAKA,oGAKA,oGAKA,gGA8KF,qLAUA,wOAWA,0DAKA,2MAQA,sEAIA,2CAKA,8BAIA,+BAIA,kDAIA,8BAIA,0BAKA,kFASA,6EAIA,iFAIA,6EAIA,0EAIA,6EAIA,uEAKA,kIAQA,gPAQA,qEAIA,kEAIA,kFAKA,gEAIA,gHAOA,mNAUA,6HAMA,sHAOA,6JAcA,yEAKA,+CAIA,oPAYA,yCAIA,0OAUA,oCAKA,gIAQA,kJAQA,kJAQA,6IAsCA,8WAcA,gBACE,0DAMF,gFAWA,yRAkDA,2HASA,2EASA,4BAKA,+YAgBA,6FAKA,yEAMA,+IAOA,uHAMA,oEAOA,uDAMA,iDAMA,kDAMA,oKAWA,2FAMA,sFAOA,2CAIA,2EAMA,+EAKA,wMAgBA,2OAYA,wEAKA,qGAOA,iFAMA,oJAKA,qJAMA,mEAKA,gFAIA,kIAMA,qEAKA,8EAMA,sBACE,8DASA,iCA0EF,mUAaE,mEAKA,+DAKA,mEAKA,6DAMA,sEAQA,kBAGE,gFAKA,qCAOF,oNAaE,mBAMF,qEAOA,8EASA,kIASA,4BAKA,0BAKA,kCAKA,gCAKA,gDAOF,+JASE,kDAMA,gDAMA,wDAMA,uDA4FF,uHASE,6FAQA,maAgBA,8GAME,kMAOA,iOAUE,iDAOJ,4JAQA,gJASA,oCAIA,2DAIA,oCAIA,8EAQA,yBA4BE,uDAMA,kCAIA,sBAIA,sCAMA,wBAGE,8BAKF,0BAGE,8BAKF,wBAGE,8BAKF,4BAGE,+BAOJ,uCAIE,4GAKA,oFAIA,6EAKA,gCACE,yCAOJ,mDAKA,6BAGE,8CAKF,8BAGE,kDA0MJ,oKAWE,gKAUA,SACE,2DAIA,+BAIA,+DAMF,OACE,SACE,4DAKA,+BAIA,kEAOJ,UACE,SACE,2DAIA,0CAIA,gEAMJ,QACE,SACE,mFAKA,+BAIA,wFAQJ,8BAIE,oBAKF,8BAIE,oBAMF,uDAIA,4DAIA,+DA6BF,4JAQA,gEAIA,sCAKA,uOAaA,0DAIA,2EAMA,uFAOA,qEAKA,+DAKA,0EAMA,+CAIA,kCAKA,kJAMA,yDAOA,yJASA,oEAOA,qEAOA,mEAOA,wEAQA,gEAKA,gEAKA,gEAKA,iEAKA,iEAKA,iEAMA,wCAKA,oKAUA,uDAcA,uDAyBA,uEAOA,+IASA,sBACE,yCA4BF,4NAaA,uDAMA,kUAgBA,oDAMA,6BAIA,6BAIA,8BAIA,0FASA,qKAQA,oHAQA,yPAcA,6FAMA,sDAOA,yNAWA,8FAKA,0FAKA,mGAKA,mGAMA,6CAIA,2DAIA,gDAIA,6DAIA,oCAIA,iDAKA,qFAMA,sBACE,iEAKA,sDA0BF,2LASA,kGAQA,0OAUA,mGAKA,kLAUA,sFAMA,iFAKA,sJASA,wHAKA,gFAKA,0DAIA,uCAIA,uDAIA,qGAMA,0DAIA,yEAKA,kCAIA,mEAOA,sFAOA,6MAUA,yDAKA,oLAQA,oHASA,iJASA,gEAKA,8SAaA,qFAOA,+CAKA,6DAKA,uBAKA,iEAMA,8GAMA,gTAaA,oGAKA,sDAKA,kHAOA,4HAQA,gJAOA,sBACE,4EAMA,wDAOF,sBACE,+CAIA,4HAMA,yGAOA,qJA4BF,qGAOA,iEAMA,sIAUA,+BAMA,wFAOA,+GAMA,4EAMA,sOAWA,0GAKA,6GAMA,mGAQA,6IAcA,uFAQA,qRAkBA,2CAKA,4FAMA,6IAOA,oLAWA,8BAIA,oNAeA,2GAOA,+DAIA,6BAIA,wEAMA,sBACE,sCAIA,oCAqDF,sTAYA,sZAaA,6FAOA,2CAMA,mRAaA,8IAMA,2DAKA,uFAQA,sDAKA,yDAOA,sOAYA,uJAQA,8IAQA,mDAIA,iDAIA,qDAIA,iDAIA,qEAKA,qDAIA,2DAIA,2CAIA,uDAKA,oKAWA,+FAMA,oDAKA,sPAYA,sCAKA,2ZAgBA,mGAKA,oKAKA,yQAOA,sBACE,4CAIA,mDAIA,iDAmPF,sNAYA,yLAQA,wHAQA,eAIA,0FAMA,8GAOA,kIAQA,sEAIA,+EAIA,oGAMA,yFASA,8CAIA,yDAKA,+DAMA,2IAQA,kHAMA,8IAOA,sGAQA,yPAYA,wIAQA,uDAKA,gLAUA,+CAIA,+CAaA,wIAMA,qDAKA,mPAYA,wHAMA,2QAeA,gEAIA,sFAMA,uLAUA,8DAKA,uKAYA,sBACE,iEAsEF,qJAMA,wTAUE,4CAKA,yEAOA,mCAKE,qBAIA,qBAKA,+BAAoC,sBAGlC,uBAIA,qBAKF,+BAAoC,sBAGlC,wBAIA,wBAOJ,mEAKA,gDAIA,gEAMA,mDAIE,kCAOF,qEAIE,iEA6BJ,sIASA,qDAMA,kDAMA,oDAMA,gCAIA,mCAIA,+BAKA,4GAQA,+GAOA,yEAMA,gFAKA,mDAKA,mGAKA,uHAOA,oFAMA,oPAYA,uFAKA,qDAKA,+CAuBA,gKAUA,0FAUA,wCAMA,wGAQA,gDAMA,iFAMA,+EAMA,kFAMA,6CAIA,sJAOA,2HAOA,sBACE,6CAKA,4FAIA,mGAIA,+IAyDF,+UAeA,6JAOA,0IAMA,6IAMA,uKAQA,uDAIA,sDAKA,kEAOA,uDAKA,qDAMA,4DAMA,iCAIA,0CAKA,gGAKA,oGAKA,gGAKA,6FAKA,yFAKA,0FAKA,wGAMA,8GAKA,oHAKA,8GAKA,yGAKA,8GAKA,qGAKA,8GAMA,wDAKA,6FAKA,mGAKA,6FAKA,wFAKA,6FAKA,oFAKA,6GAMA,mCAIA,gEAMA,8DAMA,sEAMA,oEAOA,+DAIA,0CAKA,oCAwBA,kNAYA,4EAOA,4RAeA,6FAKA,0CAIA,4FAMA,iCAMA,sEAKA,uGAOA,sEAKA,8EAIA,oFAIA,yGAIA,kFAIA,wFAIA,6GAKA,+EAKA,uFAIA,yDAMA,oDAKA,kDAKA,oDAKA,kDAMA,mDAIA,gIAUA,sLAWA,sBACE,wDAKA,mCAKA,iCAKA,+CAsRF,ySAWA,8GAMA,uHAMA,uHAMA,iHAOA,oHAKA,wHAMA,qDAIA,uEAOA,wDAKA,sBAIA,+OAaA,+BA+BA,8MAWA,kHASA,wTAeA,gDAKA,wFAQA,wGAQA,kGAQA,0JASA,6DAKA,mEAMA,6EAMA,sBACE,wHAOA,gEA15zBhB,gBA4mNQ,sIASA,2NAYA,yGAKA,sKAYA,sFAKA,6FAKA,4EAIA,uKAOA,0FAMA,sDAKA,yEAOA,qDAIA,oDAKA,yEAOA,gDAKA,sEAMA,8DAoGA,mGAQA,8DAOA,qPAUA,gUAYA,oFAKA,gFAIA,2IAIA,0GAKA,uHAMA,wGAIA,sFAMA,qDAKA,mDAIA,2DAKA,4DAKA,8CAKA,yFAIA,6FAIA,yFAIA,yFAIA,sFAQA,mLAWA,8OAYA,sOAYA,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,2KAoxDE,qCAIA,2EAKA,uCASA,gBA8oYI,wDAMA,kFAMA,wDA0OA,6SAWA,qDAMA,6DAMA,iGAMA,qDAMA,qDAOA,oEAIA,wEAIA,oEAIA,oEAIA,iEAIA,8DAKA,uFAMA,kIAMA,iLAWA,4EAGE,uDAMF,uDAIE,kCAMA,uEASF,2IA4pCA,6GAgBA,yKAOA,iFAIE,+BAMF,iFAIE,0FAUF,0BAIA,0BAIA,4BAIA,4BAIA,4BAYA,4HAMA,sIAOA,+BAIA,4JAMA,kIAOA,gDAKA,mGAQA,+CAIA,gDAmpCA,+FAMA,sHAQA,0CA4RA,iUAcA,gEAKA,gCAIA,0DAMA,wGAKA,8GAKA,wGAKA,wGAKA,mGAKA,+FAMA,kEAKA,gFAKA,oFAKA,gFAKA,oGAKA,6EAKA,0EAMA,uDAMA,+DAQA,2QAiBA,gDAMA,+FASA,kCAIA,2EAIA,oFAMA,mJAMA,gEAKA,8CAKA,6CAKA,kDAMA,wCAIA,4CA4sBA,8IAOA,2BAohBA,mSAeA,yEAMA,oEAMA,8DAMA,4DAMA,4DAOA,sDAIA,uDAKA,iDAOA,sRAeA,4DAIA,wDAIA,0DAIA,qEAKA,kCAIA,4FAKA,iDAKA,iJAOA,0GAKA,gHAKA,0GAKA,0GAKA,qGAKA,kGAr+vBZ,YAUA,iBAyEE,qCAKE,uBAIA,qDAKA,4DAMA,4CAMA,wBAIA,0BAIA,wBAIA,4BAKA,aACE,cACE,+BAIA,uDAaN,wFAIE,6DAIA,qFAIA,+FAKA,gEAIA,0BACE,8CAKF,0BACE,4CAGE,6CAcN,gDACE,2WAsBA,8FAcF,+BACE,kCAIA,mCAIA,gEAKA,0EAKA,oCAIA,kEAKA,uGAMA,oHAOA,uKAw1NI,0EA7gNN,sBACE,sKAOA,uHA4hMI,oGAQA,2HAOA,wJAaA,gFAMA,oEAKA,uCAIA,6EAUA,+CAIA,uEAUA,qCAKE,uBAIA,qDAKA,4DAMA,4CAMA,wBAIA,0BAIA,wBAIA,4BAKA,aACE,cACE,+BAIA,uDAaN,wFAIE,6DAIA,qFAIA,+FAKA,gEAIA,0BACE,8CAKF,0BACE,4CAGE,6CAcN,gDACE,2WAsBA,8FAcF,+BACE,kCAIA,mCAIA,gEAKA,0EAKA,oCAIA,kEAKA,uGAMA,oHAOA,uKAYF,0IAOA,2IAMA,4IAMA,iJAOA,iEAIA,0HAKA,sHAoBA,qCAMA,yEAOA,6XAaA,sIAOA,sLAYA,wVAiBA,8GAMA,kYAgBA,qCAKA,gJAQA,gGAMA,6GAOA,2CAKA,oIAMA,6JASA,mKAQA,kRAWA,yHAOA,6JASA,2FAgBA,gKAMA,6SAYA,6TAWA,4FAKA,6DAIA,sQAcA,sHAMA,yIAMA,mEAMA,wIAMA,sEAOA,sBACE,sKAOA,wHApyLV,cACE,oiDA0DE,goBAiBA,0lBAgBA,6gBAg4BF,o4BAgCE,mTAUA,uSAUA,8UA+/TI,oiDA0DE,goBAiBA,0lBAgBA,6gBAg4BF,o4BAgCE,mTAUA,uSAUA,+UAlyWV,2CACE,uBACE,sIAOA,gGAMA,6BAIA,mDAKA,qDAIA,wEAKF,sBACE,mCAIA,0BAIA,sCAIA,sIAOA,8FAMA,6BAIA,mDAKA,qDAIA,yEAOJ,aACE,8RAaE,+EAKA,yDAKA,uCAOJ,+BACE,8HASE,gCAOJ,uCACE,sGAOE,mDA4vBJ,2CACE,uBACE,4EAKF,uBACE,4GASF,sBACE,qGAMA,kIAQA,+KAOA,4FAMA,0EAKA,6FASJ,aACE,sNAUE,+EAKA,qCAGE,0BAQN,+BACE,0GAQE,8BAIA,uDAOJ,uCACE,qFAME,sBAwnCA,kBACE,QACE,8LA2KF,oDAIE,kDAIA,8KA6tKA,OACE,gDAIA,mDAgPF,cACE,8FAMA,4HAOA,0DAy+IF,QACE,8LAgWF,oDAIE,kDAIA,8KA4kIE,sCAivDA,cACE,8FAMA,4HAOA,0DA6SF,OACE,gDAIA,mDAoxGF,iGAzgTN,kBAUA,iBA8vLI,yDA/4UJ,mCACE,kBACE,mIAMA,0GAkrGJ,2CACE,uBACE,sIAOA,gGAMA,6BAIA,mDAKA,qDAIA,wEAKF,sBACE,mCAIA,0BAIA,sCAIA,sIAOA,8FAMA,6BAIA,mDAKA,qDAIA,yEAOJ,aACE,8RAaE,+EAKA,yDAKA,uCAOJ,+BACE,8HASE,gCAOJ,uCACE,sGAOE,mDA4vBJ,2CACE,uBACE,4EAKF,uBACE,4GASF,sBACE,qGAMA,kIAQA,+KAOA,4FAMA,0EAKA,6FASJ,aACE,sNAUE,+EAKA,qCAGE,0BAQN,+BACE,0GAQE,8BAIA,uDAOJ,uCACE,qFAME,sBAi6LA,mCACE,kBACE,mIAMA","sources":["Users/jseidel/GitHub/dragonfly/dist/temp/ui-temp-combined.css"],"sourcesContent":["/* Datei: ui/index.css */\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/* Importierte Datei: ui/forms.css */\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: spin 1s 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: searchSpin 1s 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\n\n/* Page Regions */\n/* Importierte Datei: ui/regions/main-content.css */\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\n/* Importierte Datei: ui/regions/header.css */\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\n/* Importierte Datei: ui/regions/footer.css */\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\n/* Importierte Datei: ui/regions/sidebar.css */\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\n/* Importierte Datei: ui/content.css */\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\n\n/* UI Patterns */\n/* Importierte Datei: ui/patterns/blog.css */\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\n/* Importierte Datei: ui/patterns/tags.css */\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\n/* Importierte Datei: ui/patterns/code.css */\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\n/* Importierte Datei: ui/patterns/widget.css */\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: loading 1.5s 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\n/* Importierte Datei: ui/patterns/skeleton.css */\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: pulse 1.5s ease-in-out infinite;\n\n/* Animationstypen */\n          &.pulse {\n            animation: pulse 1.5s ease-in-out infinite;\n          }\n\n          &.wave::after {\n            animation: wave 2s 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\n\n\n/* Datei: ui/forms.css */\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: spin 1s 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: searchSpin 1s 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\n/* Datei: ui/content.css */\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\n/* Datei: ui/components.css */\n/**\n        * UI Components\n        *\n        * Diese Datei importiert die komplexeren UI-Komponenten.\n        * Form-Komponenten sind jetzt in ui/forms.css konsolidiert.\n        */\n\n/* UI Components */\n/* Importierte Datei: ui/components/action-bar.css */\n/**\n        * Action Bar/Sheet\n        *\n        * An action bar or sheet provides quick access to common actions or navigation options,\n        * typically displayed at the bottom of the screen (mobile) or as a popover menu.\n        *\n        * @layer: components\n        *\n        * Accessibility:\n        * - Ensure all interactive elements are keyboard accessible\n        * - Use appropriate ARIA roles (e.g., menu, menuitem)\n        * - Provide clear focus states\n        */\n\n        @layer components {\n/* Base action bar */\n          .action-bar {\n            align-items: center;\n            background-color: var(--color-surface-100, #f3f4f6);\n            box-shadow: var(--shadow-md);\n            display: flex;\n            justify-content: space-between;\n            padding: var(--space-4);\n            z-index: var(--z-action-bar, 40);\n          }\n\n/* Fixed position at bottom */\n          .action-bar--fixed {\n            border-top: 1px solid var(--color-border-200, #e5e7eb);\n            bottom: 0%;\n            left: 0%;\n            position: fixed;\n            right: 0%;\n          }\n\n/* Action sheet (full-width expandable panel) */\n          .action-sheet {\n            background-color: var(--color-surface-100, #f3f4f6);\n            border-top-left-radius: var(--radius-lg, 0.5rem);\n            border-top-right-radius: var(--radius-lg, 0.5rem);\n            bottom: 0%;\n            box-shadow: var(--shadow-lg);\n            left: 0%;\n            position: fixed;\n            right: 0%;\n            transform: translateY(100%);\n            transition: transform 0.3s ease;\n            z-index: var(--z-action-sheet, 50);\n          }\n\n/* Visible state */\n          .action-sheet--visible {\n            transform: translateY(0%);\n          }\n\n/* Sheet header with drag indicator */\n          & .header {\n            align-items: center;\n            display: flex;\n            justify-content: center;\n            padding: var(--space-2);\n          }\n\n/* Drag indicator */\n          & .indicator {\n            background-color: var(--color-neutral-300, #d1d5db);\n            border-radius: 2px;\n            height: 4px;\n            width: 3%6px;\n          }\n\n/* Sheet content */\n          & .content {\n            max-height: 80%;\n            -webkit-overflow-scrolling: touch;\n            overflow-y: auto;\n            padding: var(--space-4);\n          }\n\n/* Action items */\n          .action-item {\n            align-items: center;\n            border-radius: var(--radius-md, 0.375rem);\n            cursor: pointer;\n            display: flex;\n            padding: var(--space-3);\n            transition: background-color 0.2s ease;\n          }\n\n          .action-item:hover {\n            background-color: var(--color-surface-200);\n          }\n\n/* Action item with icon */\n          & .icon {\n            color: var(--color-primary-500);\n            margin-right: var(--space-3);\n          }\n\n/* Action item label */\n          & .label {\n            font-size: var(--text-sm, 0.875rem);\n            font-weight: var(--font-medium, 500);\n          }\n\n/* Responsive adjustments */\n          @media (min-width: 768px) {\n            .action-sheet {\n              border-radius: var(--radius-lg, 0.5rem);\n              left: 50%;\n              max-width: 48%0px;\n              transform: translateX(-50%) translateY(100);\n            }\n\n            .action-sheet--visible {\n              transform: translateX(-50%) translateY(0);\n            }\n          }\n        }\n\n/* Importierte Datei: ui/components/alert.css */\n/*\n        * Alert Component\n        *\n        * Visual cues for success, warning, error, or information messages.\n        */\n\n/**\n        * Alert Component\n        *\n        * Information and warning messages for important notifications to users.\n        * Alerts can be used to display success, error, warning, or informative messages.\n        *\n        * @layer: components\n        *\n        * Compatibility:\n        * - Full support in modern browsers\n        * - Fallbacks for CSS variables\n        * - Uses CSS animation with standard keyframes\n        *\n        * Usage:\n        * <div class=\"alert\">Standard alert</div>\n        *\n        * Variants:\n        * <div class=\"alert-info\">Info alert</div>\n        * <div class=\"alert-success\">Success alert</div>\n        * <div class=\"alert-warning\">Warning alert</div>\n        * <div class=\"alert-error\">Error alert</div>\n        *\n        * Sizes:\n        * <div class=\"alert-info alert--sm\">Small alert</div>\n        * <div class=\"alert-info\">Default size alert</div>\n        * <div class=\"alert-info alert--lg\">Large alert</div>\n        *\n        * With Icon:\n        * <div class=\"alert-info alert--with-icon\">\n        *   <span class=\"icon\"><!-- Icon here --></span>\n        *   <div class=\"alert-content\">Alert with icon</div>\n        * </div>\n        *\n        * Dismissible:\n        * <div class=\"alert-info alert--dismissible\">\n        *   <div class=\"alert-content\">Dismissible alert</div>\n        *   <button class=\"alert-close\">×</button>\n        * </div>\n        */\n\n/**\n        * Alert Component Structure:\n        *\n        * <div class=\"alert alert--info\" role=\"alert\">\n        *   <div class=\"alert-icon\"><!-- Icon --></div>\n        *   <div class=\"alert-content\">\n        *     <div class=\"alert-title\">Alert Title</div>\n        *     <div class=\"alert-message\">Alert message content</div>\n        *   </div>\n        *   <button class=\"alert-close\" aria-label=\"Close\">&times;</button>\n        * </div>\n        *\n        * Types: .alert--info, .alert--success, .alert--warning, .alert--error\n        * Modifiers: .alert--dismissible, .alert--compact\n        */\n\n/* Animations - defined outside of @layer */\n\n/* Component styles */\n        @layer components {\n/* Base component style */\n          .alert {\n            align-items: start;\n            background-color: var(--color-neutral-100, #f3f4f6);\n            border-radius: var(--alert-border-radius, var(--radius-md, 0.5rem));\n            display: flex;\n            font-size: var(--text-sm, var(--font-size-sm, 0.875rem));\n            gap: var(--alert-gap, var(--space-3, 0.75rem));\n            padding: var(--alert-padding, var(--space-4, 1rem));\n          }\n\n/* Variants */\n          .alert-info {\n            background-color: var(--color-info-100, #e0f2fe);\n            color: var(--color-info-800, #1e40af);\n            composes: alert;\n          }\n\n          .alert-success {\n            background-color: var(--color-success-100, #dcfce7);\n            color: var(--color-success-800, #166534);\n            composes: alert;\n          }\n\n          .alert-warning {\n            background-color: var(--color-warning-100, #fef3c7);\n            color: var(--color-warning-800, #854d0e);\n            composes: alert;\n          }\n\n          .alert-error {\n            background-color: var(--color-error-100, #fee2e2);\n            color: var(--color-error-800, #991b1b);\n            composes: alert;\n          }\n\n/* Sizes */\n          .alert--sm {\n            font-size: var(--text-xs, var(--font-size-xs, 0.75rem));\n            padding: var(--alert-padding-sm, var(--space-2, 0.5rem));\n          }\n\n          .alert--lg {\n            font-size: var(--text-base, var(--font-size-base, 1rem));\n            padding: var(--alert-padding-lg, var(--space-5, 1.25rem));\n          }\n\n/* Icon integration */\n          .alert--with-icon {\n            padding-left: var(--space-3, 0.75rem);\n          }\n\n          .alert--with-icon .icon {\n            flex-shrink: 0;\n            font-size: 1.25rem;\n            line-height: 1%;\n          }\n\n/* Dismissible state */\n          .alert--dismissible {\n            padding-right: var(--space-3, 0.75rem);\n          }\n\n/* Internal elements */\n          .alert-content {\n            flex: 1;\n          }\n\n          .alert-close {\n            background: none;\n            border: none;\n            color: currentcolor;\n            cursor: pointer;\n            flex-shrink: 0;\n            font-size: 1.25rem;\n            line-height: 1%;\n            margin-left: auto;\n            opacity: 5000%;\n            transition: opacity var(--transition-duration-fast, 150ms) var(--transition-timing-ease, ease);\n          }\n\n          .alert-close:hover {\n            opacity: 75%;\n          }\n        }\n\n/* Animation styles */\n        @layer animations {\n          .alert--animate {\n            animation-duration: 0.3s;\n            animation-name: fadeIn;\n            animation-timing-function: ease-out;\n          }\n        }\n\n/* Importierte Datei: ui/components/breadcrumbs.css */\n/**\n        * Breadcrumbs\n        *\n        * Breadcrumbs show the hierarchical path to the current page, helping users\n        * understand their location within the site structure and navigate back to\n        * higher-level pages.\n        *\n        * @layer: components\n        *\n        * Accessibility:\n        * - Use nav element with aria-label=\"Breadcrumb\"\n        * - Use ordered list (ol) for the breadcrumb items\n        * - Current page should have aria-current=\"page\"\n        */\n\n        @layer components {\n/* Breadcrumbs container */\n          .breadcrumbs {\n            align-items: center;\n            color: var(--color-text-500, #6b7280);\n            display: flex;\n            font-size: var(--text-sm, 0.875rem);\n            margin: var(--space-2) 0;\n            padding: var(--space-2);\n          }\n\n/* Breadcrumbs list */\n          & .list {\n            align-items: center;\n            display: flex;\n            flex-wrap: wrap;\n            list-style: none;\n            margin: 0;\n            padding: 0;\n          }\n\n/* Breadcrumb item */\n          & .item {\n            align-items: center;\n            display: flex;\n          }\n\n/* Breadcrumb separator */\n          & .separator {\n            align-items: center;\n            color: var(--color-text-300);\n            display: inline-flex;\n            margin: 0 var(--space-2);\n          }\n\n/* Default separator icon (can be customized) */\n          & .separator::before {\n            content: \"/\";\n            font-size: 0.85em;\n          }\n\n/* Breadcrumb link */\n          & .link {\n            color: var(--color-primary-500);\n            text-decoration: none;\n            transition: color 0.2s ease;\n          }\n\n          & .link:hover {\n            color: var(--color-primary-700, #1d4ed8);\n            text-decoration: underline;\n          }\n\n/* Current page (last item) */\n          & .current {\n            color: var(--color-text-900, #111827);\n            font-weight: var(--font-medium, 500);\n          }\n\n/* Truncated breadcrumbs for narrow viewports */\n          .breadcrumbs--truncated & .item {\n            display: none;\n          }\n\n          .breadcrumbs--truncated & .item:first-child,\n          .breadcrumbs--truncated & .item:nth-last-child(2),\n          .breadcrumbs--truncated & .item:last-child {\n            display: flex;\n          }\n\n/* Ellipsis for truncated items */\n          .breadcrumbs--truncated & .item:nth-last-child(2)::before {\n            color: var(--color-text-300);\n            content: \"...\";\n            margin: 0 var(--space-2);\n          }\n\n/* Responsive adjustments */\n          @media (max-width: 640px) {\n            .breadcrumbs {\n              font-size: var(--text-xs, 0.75rem);\n            }\n\n/* Auto-truncate on mobile */\n            .breadcrumbs:not(.breadcrumbs--keep-all) & .item:not(:first-child, :last-child) {\n              display: none;\n            }\n\n            .breadcrumbs:not(.breadcrumbs--keep-all) & .item:first-child + & .item:not(:last-child) {\n              display: flex;\n            }\n\n            .breadcrumbs:not(.breadcrumbs--keep-all) & .item:first-child + & .item::before {\n              color: var(--color-text-300);\n              content: \"...\";\n              margin: 0 var(--space-2);\n            }\n          }\n        }\n\n/* Importierte Datei: ui/components/caption.css */\n/**\n        * Caption\n        *\n        * Captions provide additional contextual information for images, tables, figures,\n        * or other media content. They help users understand the content and provide\n        * necessary explanations or attributions.\n        *\n        * @layer: components\n        *\n        * Accessibility:\n        * - Use appropriate HTML semantics (figcaption with figure)\n        * - Maintain sufficient text contrast\n        * - Don't rely on captions alone for conveying critical information\n        */\n\n        @layer components {\n/* Base caption style */\n          .caption {\n            color: var(--color-text-500, #6b7280);\n            font-size: var(--text-xs, 0.75rem);\n            line-height: 1.5;\n            margin-top: var(--space-2);\n            max-width: 100%;\n          }\n\n/* Figure with caption */\n          .figure {\n            display: inline-block;\n            margin: 0;\n            max-width: 100%;\n          }\n\n          & .image {\n            display: block;\n            height: auto;\n            max-width: 100%;\n          }\n\n          & .caption {\n            padding: var(--space-2);\n            text-align: center;\n          }\n\n/* Caption alignments */\n          .caption--start {\n            text-align: left;\n          }\n\n          .caption--center {\n            text-align: center;\n          }\n\n          .caption--end {\n            text-align: right;\n          }\n\n/* Caption with attribution */\n          & .attribution {\n            color: var(--color-text-400);\n            display: inline-block;\n            font-style: italic;\n            margin-top: var(--space-1);\n          }\n\n/* Caption for tables */\n          .table-caption {\n            border-top: 1px solid var(--color-border-100, #f3f4f6);\n            caption-side: bottom;\n            padding: var(--space-2);\n          }\n\n/* Extended caption with title and description */\n          .caption--extended {\n            display: flex;\n            flex-direction: column;\n            gap: var(--space-1);\n          }\n\n          & .title {\n            color: var(--color-text-900, #111827);\n            font-weight: var(--font-medium, 500);\n          }\n\n          & .description {\n            color: var(--color-text-500, #6b7280);\n          }\n\n/* Variants */\n          .caption--bordered {\n            border-top: 1px solid var(--color-border-200, #e5e7eb);\n            padding-top: var(--space-2);\n          }\n\n          .caption--boxed {\n            background-color: var(--color-surface-50);\n            border-radius: var(--radius-sm, 0.125rem);\n            padding: var(--space-2);\n          }\n\n/* Caption with interaction (e.g., for expandable captions) */\n          .caption--interactive {\n            cursor: pointer;\n            padding-right: var(--space-6);\n            position: relative;\n          }\n\n          .caption--interactive::after {\n            border-color: var(--color-text-400) transparent transparent transparent;\n            border-style: solid;\n            border-width: 5px;\n            content: \"\";\n            position: absolute;\n            right: var(--space-2);\n            top: 50%;\n            transform: translateY(-50%);\n            transition: transform 0.2s ease;\n          }\n\n          .caption--interactive.caption--expanded::after {\n            transform: translateY(-50%) rotate(180deg);\n          }\n\n/* Expandable caption content */\n          & .expandable {\n            display: none;\n            margin-top: var(--space-2);\n          }\n\n          .caption--expanded & .expandable {\n            display: block;\n          }\n        }\n\n/* Importierte Datei: ui/components/card.css */\n/*\n        * Cards Module\n        *\n        * Layoutregeln für ein responsives Card-Grid. Nutzt Flexbox und Grid für flexible Layouts.\n        */\n\n/**\n        * Card-Modul\n        *\n        * Container für Inhaltsblöcke, die zusammengehörende Informationen präsentieren.\n        * Cards bieten eine visuelle Gruppierung von zusammengehörigen Inhalten und Aktionen.\n        *\n        * @layer components.card\n        *\n        * Grundlegende Verwendung:\n        * <div class=\"card\">\n        *   <h3>Kartentitel</h3>\n        *   <p>Karteninhalt</p>\n        * </div>\n        *\n        * Mit Grid-Layout:\n        * <div class=\"card-grid\">\n        *   <div class=\"card\">Karte 1</div>\n        *   <div class=\"card\">Karte 2</div>\n        *   <div class=\"card\">Karte 3</div>\n        * </div>\n        *\n        * Varianten (können mit Utility-Klassen kombiniert werden):\n        * <div class=\"card primary\">Primäre Karte</div>\n        * <div class=\"card surface\">Karte mit Hintergrundfarbe</div>\n        * <div class=\"card border\">Karte mit Rahmen</div>\n        * <div class=\"card shadow-lg\">Karte mit stärkerem Schatten</div>\n        * <div class=\"card p-6\">Karte mit mehr Padding</div>\n        *\n        * Flüssig skalierende Karte:\n        * <div class=\"card fluid\">\n        *   <h3>Adaptive Karte</h3>\n        *   <p>Diese Karte skaliert flüssig mit der Container-Größe</p>\n        * </div>\n        */\n\n\n/**\n        * Card Component Structure:\n        *\n        * <div class=\"card\">\n        *   <div class=\"card-header\">\n        *     <h3 class=\"card-title\">Card Title</h3>\n        *     <div class=\"card-actions\"><!-- Actions --></div>\n        *   </div>\n        *   <div class=\"card-content\">\n        *     <!-- Main card content -->\n        *   </div>\n        *   <div class=\"card-footer\">\n        *     <!-- Footer content -->\n        *   </div>\n        * </div>\n        *\n        * Modifiers: .card--bordered, .card--elevated, .card--compact\n        * Layout: .card--horizontal, .card--vertical\n        */\n        @layer components {\n          .card-grid {\n            display: grid;\n            gap: var(--card-grid-gap, var(--space-4, 1rem));\n            grid-template-columns: repeat(auto-fill, minmax(var(--card-min-width, 250px), 1fr));\n          }\n\n          .card {\n            background-color: var(--color-surface, var(--color-surface-elevated, #fff));\n            border-radius: var(--radius-card, var(--radius-md, 0.375rem));\n            box-shadow: var(--shadow-sm, 0 1px 2px 0 rgb(0 0 0 / 5%));\n            display: flex;\n            flex-direction: column;\n            gap: var(--card-gap, var(--space-3, 0.75rem));\n            padding: var(--card-padding, var(--space-4, 1rem));\n\n/* Element-Styling */\n            h3 {\n              font-size: var(--font-size-lg);\n              margin: 0;\n            }\n\n            img {\n              border-radius: var(--radius-sm, 0.125rem);\n              object-fit: cover;\n              width: 100%;\n            }\n\n/* Flüssig skalierende Karte mit interpolate-size */\n            &.fluid {\n              container-name: card;\n              container-type: inline-size;\n\n/* Font-Größen mit CSS-Schlüsselwörtern für flüssige Interpolation */\n              h3 {\n                font-size: large; /* Wird durch interpolate-size flüssiger */\n              }\n\n              p {\n                font-size: medium; /* Wird durch interpolate-size flüssiger */\n              }\n\n/* Flüssige Container-basierte Anpassungen */\n              @container card (min-width: 300px) {\n                padding: var(--space-5);\n\n                h3 {\n                  font-size: x-large;\n                }\n\n                p {\n                  font-size: large;\n                }\n              }\n\n              @container card (min-width: 400px) {\n                padding: var(--space-6);\n\n                h3 {\n                  font-size: xx-large;\n                }\n\n                p {\n                  font-size: x-large;\n                }\n              }\n            }\n\n/* Varianten */\n            &.primary {\n              background-color: var(--color-primary, #3b82f6);\n              color: white;\n            }\n\n            &.surface {\n              background-color: var(--color-surface);\n            }\n\n            &.border {\n              border: 1px solid var(--color-gray-200);\n              box-shadow: none;\n            }\n\n/* Layout-Varianten */\n            &.horizontal {\n              align-items: center;\n              flex-direction: row;\n\n              img {\n                height: 12%0px;\n                width: 12%0px;\n              }\n            }\n\n/* Interaktive Varianten */\n            &.interactive {\n              cursor: pointer;\n              transition: transform 0.2s ease, box-shadow 0.2s ease;\n\n              &:hover {\n                box-shadow: var(--shadow-md);\n                transform: translateY(-4px);\n              }\n            }\n          }\n        }\n\n\n\n\n/* Importierte Datei: ui/components/chat.css */\n/**\n        * Chat (Live)\n        *\n        * A live chat interface allows users to exchange messages in real-time.\n        * This component includes message bubbles, input area, and conversation layout,\n        * suitable for customer support chats, messaging applications, or community discussions.\n        *\n        * @layer: components\n        *\n        * Accessibility:\n        * - Ensure proper focus management for new messages\n        * - Provide clear visual distinctions between sent and received messages\n        * - Include proper ARIA roles and labels\n        * - Support keyboard navigation throughout the chat interface\n        */\n\n        @layer components {\n/* Chat container */\n          .chat {\n            background-color: var(--color-surface-50);\n            border: 1px solid var(--color-border-200, #e5e7eb);\n            border-radius: var(--radius-lg, 0.5rem);\n            display: flex;\n            flex-direction: column;\n            height: 100%;\n            max-height: 60%0px;\n            overflow: hidden;\n          }\n\n/* Chat header */\n          & .header {\n            align-items: center;\n            background-color: var(--color-surface-100, #f3f4f6);\n            border-bottom: 1px solid var(--color-border-200, #e5e7eb);\n            display: flex;\n            padding: var(--space-3) var(--space-4);\n          }\n\n          & .avatar {\n            border-radius: var(--radius-full, 9999px);\n            height: 3%6px;\n            margin-right: var(--space-3);\n            object-fit: cover;\n            width: 3%6px;\n          }\n\n          & .info {\n            flex: 1;\n          }\n\n          & .name {\n            color: var(--color-text-900, #111827);\n            font-weight: var(--font-semibold, 600);\n            margin: 0;\n          }\n\n          & .status {\n            align-items: center;\n            color: var(--color-text-500, #6b7280);\n            display: flex;\n            font-size: var(--text-xs, 0.75rem);\n          }\n\n          & .status-indicator {\n            border-radius: var(--radius-full, 9999px);\n            display: inline-block;\n            height: 8px;\n            margin-right: var(--space-1);\n            width: 8px;\n          }\n\n          & .status-indicator--online {\n            background-color: var(--color-success-500);\n          }\n\n          & .status-indicator--offline {\n            background-color: var(--color-neutral-400, #9ca3af);\n          }\n\n          & .status-indicator--typing {\n            animation: pulse 1.5s infinite;\n            background-color: var(--color-warning-500);\n          }\n\n/* Chat body - message container */\n          & .body {\n            display: flex;\n            flex: 1;\n            flex-direction: column;\n            overflow-y: auto;\n            padding: var(--space-4);\n          }\n\n/* Message groups */\n          & .message-group {\n            margin-bottom: var(--space-4);\n          }\n\n          & .message-group--sent {\n            align-self: flex-end;\n            max-width: 80%;\n          }\n\n          & .message-group--received {\n            align-self: flex-start;\n            max-width: 80%;\n          }\n\n/* Individual message */\n          & .message {\n            border-radius: var(--radius-lg, 0.5rem);\n            margin-bottom: var(--space-2);\n            padding: var(--space-3);\n            position: relative;\n            word-wrap: break-word;\n          }\n\n          & .message--sent {\n            background-color: var(--color-primary-500);\n            border-bottom-right-radius: var(--radius-xs);\n            color: white;\n          }\n\n          & .message--received {\n            background-color: var(--color-surface-200);\n            border-bottom-left-radius: var(--radius-xs);\n            color: var(--color-text-900, #111827);\n          }\n\n/* Message metadata */\n          & .message-time {\n            font-size: var(--text-xs, 0.75rem);\n            margin-top: var(--space-1);\n            opacity: 8000%;\n            text-align: right;\n          }\n\n/* System messages */\n          & .system-message {\n            align-self: center;\n            background-color: var(--color-surface-100, #f3f4f6);\n            border-radius: var(--radius-md, 0.375rem);\n            color: var(--color-text-400);\n            font-size: var(--text-xs, 0.75rem);\n            margin: var(--space-4) 0;\n            padding: var(--space-2);\n            text-align: center;\n          }\n\n/* Typing indicator */\n          & .typing {\n            align-items: center;\n            color: var(--color-text-500, #6b7280);\n            display: flex;\n            font-size: var(--text-xs, 0.75rem);\n            margin-top: var(--space-2);\n          }\n\n          & .typing-dots {\n            display: flex;\n            margin-left: var(--space-2);\n          }\n\n          & .typing-dot {\n            animation: typingAnimation 1.4s infinite;\n            animation-fill-mode: both;\n            background-color: var(--color-text-400);\n            border-radius: var(--radius-full, 9999px);\n            height: 6px;\n            margin-right: 3px;\n            width: 6px;\n          }\n\n          & .typing-dot:nth-child(2) {\n            animation-delay: 0.2s;\n          }\n\n          & .typing-dot:nth-child(3) {\n            animation-delay: 0.4s;\n          }\n\n          @keyframes typingAnimation {\n            0 { opacity: 4000%; transform: translateY(0%); }\n\n            50 { opacity: 1; transform: translateY(-4px); }\n\n            100 { opacity: 4000%; transform: translateY(0%); }\n          }\n\n/* Chat footer - input area */\n          & .footer {\n            background-color: var(--color-surface-100, #f3f4f6);\n            border-top: 1px solid var(--color-border-200, #e5e7eb);\n            padding: var(--space-3);\n          }\n\n          & .input-container {\n            align-items: flex-end;\n            display: flex;\n          }\n\n          & .input {\n            background-color: var(--color-surface-50);\n            border: 1px solid var(--color-border-200, #e5e7eb);\n            border-radius: var(--radius-lg, 0.5rem);\n            flex: 1;\n            max-height: 12%0px;\n            min-height: 4%4px;\n            overflow-y: auto;\n            padding: var(--space-2) var(--space-3);\n            resize: none;\n          }\n\n          & .input:focus {\n            border-color: var(--color-primary-300);\n            box-shadow: 0 0 0 2px var(--color-primary-100, #dbeafe);\n            outline: none;\n          }\n\n          & .send {\n            align-items: center;\n            background-color: var(--color-primary-500);\n            border: none;\n            border-radius: var(--radius-full, 9999px);\n            color: white;\n            cursor: pointer;\n            display: flex;\n            height: 4%0px;\n            justify-content: center;\n            margin-left: var(--space-2);\n            transition: background-color 0.2s;\n            width: 4%0px;\n          }\n\n          & .send:hover {\n            background-color: var(--color-primary-600, #2563eb);\n          }\n\n          & .send:disabled {\n            background-color: var(--color-neutral-300, #d1d5db);\n            cursor: not-allowed;\n          }\n\n/* Attachment button */\n          & .attachment {\n            background: none;\n            border: none;\n            border-radius: var(--radius-full, 9999px);\n            color: var(--color-text-500, #6b7280);\n            cursor: pointer;\n            margin-right: var(--space-2);\n            padding: var(--space-2);\n          }\n\n          & .attachment:hover {\n            background-color: var(--color-surface-200);\n          }\n\n/* Empty state */\n          & .empty {\n            align-items: center;\n            color: var(--color-text-400);\n            display: flex;\n            flex-direction: column;\n            height: 100%;\n            justify-content: center;\n            padding: var(--space-4);\n            text-align: center;\n          }\n\n/* Responsive adjustments */\n          @media (max-width: 640px) {\n            & .message-group--sent,\n            & .message-group--received {\n              max-width: 90%;\n            }\n          }\n        }\n\n/* Importierte Datei: ui/components/comment.css */\n/**\n        * Comments\n        *\n        * Comment components display user-generated responses, feedback, or discussions\n        * related to content. They typically include the commenter's information, content,\n        * timestamp, and interactive elements like reply or like buttons.\n        *\n        * @layer: components\n        *\n        * Accessibility:\n        * - Use proper heading structure for comment threads\n        * - Ensure adequate color contrast for all text\n        * - Use semantic HTML (article, header, footer) for comment structure\n        * - Make interactive elements keyboard accessible\n        */\n\n        @layer components {\n/* Comment container */\n          .comment {\n            border-bottom: 1px solid var(--color-border-100, #f3f4f6);\n            display: flex;\n            padding: var(--space-4);\n          }\n\n/* Nested comments */\n          & .replies {\n            margin-left: var(--space-10);\n            margin-top: var(--space-4);\n          }\n\n/* Comment avatar */\n          & .avatar {\n            border-radius: var(--radius-full, 9999px);\n            flex-shrink: 0;\n            height: 4%0px;\n            margin-right: var(--space-3);\n            object-fit: cover;\n            width: 4%0px;\n          }\n\n/* Comment content area */\n          & .content {\n            flex: 1;\n            min-width: 0%; /* Prevent flex item from overflowing */\n          }\n\n/* Comment header with author info */\n          & .header {\n            align-items: baseline;\n            display: flex;\n            flex-wrap: wrap;\n            margin-bottom: var(--space-2);\n          }\n\n          & .author {\n            color: var(--color-text-900, #111827);\n            font-weight: var(--font-semibold, 600);\n            margin-right: var(--space-2);\n          }\n\n          & .meta {\n            color: var(--color-text-500, #6b7280);\n            font-size: var(--text-xs, 0.75rem);\n          }\n\n/* Author badge for special users */\n          & .badge {\n            border-radius: var(--radius-full, 9999px);\n            display: inline-block;\n            font-size: var(--text-xs, 0.75rem);\n            font-weight: var(--font-medium, 500);\n            line-height: 1.5;\n            margin-left: var(--space-2);\n            padding: 0 var(--space-2);\n            text-transform: uppercase;\n          }\n\n          & .badge--author {\n            background-color: var(--color-primary-100, #dbeafe);\n            color: var(--color-primary-700, #1d4ed8);\n          }\n\n          & .badge--moderator {\n            background-color: var(--color-success-100, #d1fae5);\n            color: var(--color-success-700, #047857);\n          }\n\n/* Comment body */\n          & .body {\n            line-height: 1.5;\n            margin-bottom: var(--space-3);\n            overflow-wrap: break-word;\n            word-wrap: break-word;\n          }\n\n/* Comment attachment (image, link preview, etc.) */\n          & .attachment {\n            border: 1px solid var(--color-border-200, #e5e7eb);\n            border-radius: var(--radius-md, 0.375rem);\n            margin: var(--space-3) 0;\n            overflow: hidden;\n          }\n\n          & .image {\n            display: block;\n            height: auto;\n            max-width: 100%;\n          }\n\n/* Comment footer with actions */\n          & .footer {\n            align-items: center;\n            display: flex;\n            gap: var(--space-4);\n            margin-top: var(--space-2);\n          }\n\n/* Comment action button */\n          & .action {\n            align-items: center;\n            background: none;\n            border: none;\n            border-radius: var(--radius-md, 0.375rem);\n            color: var(--color-text-500, #6b7280);\n            cursor: pointer;\n            display: inline-flex;\n            font-size: var(--text-xs, 0.75rem);\n            padding: var(--space-1) var(--space-2);\n            transition: color 0.2s, background-color 0.2s;\n          }\n\n          & .action:hover {\n            background-color: var(--color-surface-100, #f3f4f6);\n            color: var(--color-text-700, #374151);\n          }\n\n          & .action-icon {\n            margin-right: var(--space-1);\n          }\n\n/* Comment action states */\n          & .action--active {\n            color: var(--color-primary-600, #2563eb);\n            font-weight: var(--font-medium, 500);\n          }\n\n/* Comment editor */\n          .comment-editor {\n            border: 1px solid var(--color-border-200, #e5e7eb);\n            border-radius: var(--radius-lg, 0.5rem);\n            margin: var(--space-4) 0;\n            overflow: hidden;\n          }\n\n          & .content {\n            border: none;\n            color: var(--color-text-900, #111827);\n            font-family: inherit;\n            font-size: var(--text-sm, 0.875rem);\n            min-height: 10%0px;\n            padding: var(--space-3);\n            resize: vertical;\n            width: 100%;\n          }\n\n          & .content:focus {\n            outline: none;\n          }\n\n          & .footer {\n            align-items: center;\n            background-color: var(--color-surface-100, #f3f4f6);\n            border-top: 1px solid var(--color-border-100, #f3f4f6);\n            display: flex;\n            justify-content: space-between;\n            padding: var(--space-2) var(--space-3);\n          }\n\n          & .actions {\n            display: flex;\n            gap: var(--space-2);\n          }\n\n/* Empty state */\n          .comments-empty {\n            color: var(--color-text-500, #6b7280);\n            padding: var(--space-8) var(--space-4);\n            text-align: center;\n          }\n\n/* Comment states */\n          .comment--highlighted {\n            background-color: var(--color-primary-50);\n          }\n\n          .comment--deleted {\n            opacity: 0.7;\n          }\n\n          .comment--deleted & .body {\n            color: var(--color-text-400);\n            font-style: italic;\n          }\n\n/* Responsive adjustments */\n          @media (max-width: 640px) {\n            & .replies {\n              margin-left: var(--space-6);\n            }\n\n            & .avatar {\n              height: 3%2px;\n              width: 3%2px;\n            }\n          }\n        }\n\n/* Importierte Datei: ui/components/data-table.css */\n/**\n        * Data Tables\n        *\n        * Data tables display structured data in rows and columns with advanced features\n        * like sorting, filtering, pagination, and row selection. They're designed for\n        * complex data sets that require user interaction and data manipulation.\n        *\n        * @layer: components\n        *\n        * Accessibility:\n        * - Use proper table semantics (th, caption, scope attributes)\n        * - Include ARIA attributes for interactive features\n        * - Support keyboard navigation for sorting, selection, etc.\n        * - Provide clear visual focus indicators\n        */\n\n        @layer components {\n/* Data table container */\n          .data-table-container {\n            background-color: var(--color-surface-100, #f3f4f6);\n            border: 1px solid var(--color-border-200, #e5e7eb);\n            border-radius: var(--radius-md, 0.375rem);\n            overflow-x: auto;\n            width: 100%;\n          }\n\n/* Data table */\n          .data-table {\n            border-collapse: separate;\n            border-spacing: 0;\n            font-size: var(--text-sm, 0.875rem);\n            width: 100%;\n          }\n\n/* Table caption */\n          & .caption {\n            background-color: var(--color-surface-50);\n            border-bottom: 1px solid var(--color-border-200, #e5e7eb);\n            color: var(--color-text-900, #111827);\n            font-weight: var(--font-semibold, 600);\n            padding: var(--space-3) var(--space-4);\n            text-align: left;\n          }\n\n/* Table header */\n          & .header {\n            background-color: var(--color-surface-50);\n            border-bottom: 2px solid var(--color-border-300);\n          }\n\n          & .header-cell {\n            color: var(--color-text-700, #374151);\n            font-weight: var(--font-semibold, 600);\n            padding: var(--space-3) var(--space-4);\n            position: relative;\n            text-align: left;\n            white-space: nowrap;\n          }\n\n/* Sortable header cells */\n          & .header-cell--sortable {\n            cursor: pointer;\n            padding-right: var(--space-8);\n            user-select: none;\n          }\n\n          & .header-cell--sortable:hover {\n            background-color: var(--color-surface-100, #f3f4f6);\n          }\n\n/* Sort indicators */\n          & .sort-icon {\n            color: var(--color-text-400);\n            position: absolute;\n            right: var(--space-3);\n            top: 50%;\n            transform: translateY(-50%);\n            transition: transform 0.2s, color 0.2s;\n          }\n\n          & .header-cell--sorted-asc & .sort-icon {\n            color: var(--color-primary-600, #2563eb);\n            transform: translateY(-50%) rotate(180deg);\n          }\n\n          & .header-cell--sorted-desc & .sort-icon {\n            color: var(--color-primary-600, #2563eb);\n          }\n\n/* Table body */\n          & .body {\n            background-color: var(--color-surface-100, #f3f4f6);\n          }\n\n          & .row {\n            transition: background-color 0.2s;\n          }\n\n          & .row:hover {\n            background-color: var(--color-surface-200);\n          }\n\n          & .cell {\n            border-bottom: 1px solid var(--color-border-100, #f3f4f6);\n            padding: var(--space-3) var(--space-4);\n          }\n\n/* Row states */\n          & .row--selected {\n            background-color: var(--color-primary-50);\n          }\n\n          & .row--selected:hover {\n            background-color: var(--color-primary-100, #dbeafe);\n          }\n\n/* Cell variants */\n          & .cell--numeric {\n            text-align: right;\n          }\n\n          & .cell--action {\n            padding: var(--space-2);\n            white-space: nowrap;\n            width: 1%;\n          }\n\n/* Empty state */\n          & .empty {\n            color: var(--color-text-500, #6b7280);\n            padding: var(--space-8);\n            text-align: center;\n          }\n\n/* Data table controls */\n          & .controls {\n            align-items: center;\n            background-color: var(--color-surface-50);\n            border-top: 1px solid var(--color-border-200, #e5e7eb);\n            display: flex;\n            justify-content: space-between;\n            padding: var(--space-3) var(--space-4);\n          }\n\n/* Search and filter */\n          & .search {\n            margin-bottom: var(--space-4);\n            position: relative;\n          }\n\n          & .search-input {\n            border: 1px solid var(--color-border-200, #e5e7eb);\n            border-radius: var(--radius-md, 0.375rem);\n            padding: var(--space-2) var(--space-3);\n            padding-left: var(--space-8);\n            width: 100%;\n          }\n\n          & .search-icon {\n            color: var(--color-text-400);\n            left: var(--space-3);\n            position: absolute;\n            top: 50%;\n            transform: translateY(-50%);\n          }\n\n/* Column filter button */\n          & .filter-button {\n            background: none;\n            border: none;\n            color: var(--color-text-500, #6b7280);\n            cursor: pointer;\n            margin-left: var(--space-1);\n            padding: var(--space-1);\n          }\n\n          & .filter-button--active {\n            color: var(--color-primary-600, #2563eb);\n          }\n\n/* Column visibility menu */\n          & .column-menu {\n            background-color: var(--color-surface-100, #f3f4f6);\n            border: 1px solid var(--color-border-200, #e5e7eb);\n            border-radius: var(--radius-md, 0.375rem);\n            box-shadow: var(--shadow-lg);\n            min-width: 18%0px;\n            padding: var(--space-2);\n            position: absolute;\n            right: var(--space-3);\n            top: calc(100 + var(--space-2));\n            z-index: 10;\n          }\n\n          & .column-item {\n            align-items: center;\n            cursor: pointer;\n            display: flex;\n            padding: var(--space-2);\n          }\n\n          & .column-checkbox {\n            margin-right: var(--space-2);\n          }\n\n/* Row selection */\n          & .select-cell {\n            padding: var(--space-2) var(--space-4);\n            width: 1%;\n          }\n\n          & .select-all {\n            margin: 0;\n          }\n\n/* Pagination */\n          & .pagination {\n            align-items: center;\n            display: flex;\n            gap: var(--space-2);\n          }\n\n          & .page-info {\n            color: var(--color-text-500, #6b7280);\n            font-size: var(--text-sm, 0.875rem);\n            margin-right: var(--space-4);\n          }\n\n          & .page-button {\n            align-items: center;\n            background-color: var(--color-surface-100, #f3f4f6);\n            border: 1px solid var(--color-border-200, #e5e7eb);\n            border-radius: var(--radius-md, 0.375rem);\n            cursor: pointer;\n            display: inline-flex;\n            height: 3%2px;\n            justify-content: center;\n            transition: background-color 0.2s, border-color 0.2s;\n            width: 3%2px;\n          }\n\n          & .page-button:hover {\n            background-color: var(--color-surface-200);\n            border-color: var(--color-border-300);\n          }\n\n          & .page-button:disabled {\n            cursor: not-allowed;\n            opacity: 5000%;\n          }\n\n          & .page-button--active {\n            background-color: var(--color-primary-500);\n            border-color: var(--color-primary-500);\n            color: white;\n          }\n\n/* Rows per page selector */\n          & .per-page {\n            align-items: center;\n            display: flex;\n            font-size: var(--text-sm, 0.875rem);\n            gap: var(--space-2);\n            margin-right: var(--space-4);\n          }\n\n          & .per-page-select {\n            border: 1px solid var(--color-border-200, #e5e7eb);\n            border-radius: var(--radius-md, 0.375rem);\n            padding: var(--space-1) var(--space-2);\n          }\n\n/* Responsive adjustments */\n          @media (max-width: 768px) {\n            & .controls {\n              align-items: flex-start;\n              flex-direction: column;\n              gap: var(--space-3);\n            }\n\n            & .pagination {\n              justify-content: space-between;\n              width: 100%;\n            }\n          }\n\n/* Collapsible table for mobile */\n          @media (max-width: 640px) {\n            .data-table--responsive & .header {\n              display: none;\n            }\n\n            .data-table--responsive & .row {\n              border-bottom: 1px solid var(--color-border-200, #e5e7eb);\n              display: block;\n              padding: var(--space-3);\n            }\n\n            .data-table--responsive & .cell {\n              border-bottom: none;\n              display: flex;\n              padding: var(--space-2) 0;\n              text-align: right;\n            }\n\n            .data-table--responsive & .cell::before {\n              content: attr(data-label);\n              font-weight: var(--font-semibold, 600);\n              margin-right: auto;\n              padding-right: var(--space-4);\n            }\n          }\n        }\n\n/* Importierte Datei: ui/components/dialog.css */\n/**\n        * Dialog\n        *\n        * Dialogs are overlays that require user interaction. They appear in front of\n        * app content to provide critical information or request input, and typically\n        * block interactions with the page until explicitly dismissed.\n        *\n        * @layer: components\n        *\n        * Accessibility:\n        * - Use role=\"dialog\" or role=\"alertdialog\" as appropriate\n        * - Set aria-modal=\"true\" for modal dialogs\n        * - Use aria-labelledby to reference the dialog title\n        * - Focus should be trapped inside the dialog when open\n        * - Return focus to the triggering element when closed\n        * - Support closing via Escape key\n        */\n\n        @layer components {\n/* Dialog overlay/backdrop */\n          .dialog-backdrop {\n            align-items: center;\n            background-color: rgb(0 0 0 / 5000%);\n            display: flex;\n            inset: 0;\n            justify-content: center;\n            opacity: 0%;\n            position: fixed;\n            transition: opacity 0.2s, visibility 0.2s;\n            visibility: hidden;\n            z-index: var(--z-dialog-backdrop, 100);\n          }\n\n          .dialog-backdrop--visible {\n            opacity: 1;\n            visibility: visible;\n          }\n\n/* Dialog container */\n          .dialog {\n            background-color: var(--color-surface-100, #f3f4f6);\n            border-radius: var(--radius-lg, 0.5rem);\n            box-shadow: var(--shadow-xl);\n            display: flex;\n            flex-direction: column;\n            max-height: calc(100 - 80px);\n            max-width: 50%0px;\n            opacity: 0%;\n            overflow: hidden;\n            position: relative;\n            transform: translateY(20px);\n            transition: transform 0.3s, opacity 0.3s;\n            width: 100%;\n          }\n\n          .dialog--visible {\n            opacity: 1;\n            transform: translateY(0%);\n          }\n\n/* Dialog sizes */\n          .dialog--sm {\n            max-width: 40%0px;\n          }\n\n          .dialog--lg {\n            max-width: 80%0px;\n          }\n\n          .dialog--xl {\n            max-width: 100%0px;\n          }\n\n          .dialog--fullscreen {\n            border-radius: 0;\n            height: 100%;\n            max-height: 100%;\n            max-width: none;\n            width: 100%;\n          }\n\n/* Dialog header */\n          & .header {\n            align-items: center;\n            border-bottom: 1px solid var(--color-border-200, #e5e7eb);\n            display: flex;\n            justify-content: space-between;\n            padding: var(--space-4) var(--space-5);\n          }\n\n          & .title {\n            color: var(--color-text-900, #111827);\n            font-size: var(--text-lg);\n            font-weight: var(--font-semibold, 600);\n            margin: 0;\n          }\n\n/* Dialog close button */\n          & .close {\n            align-items: center;\n            background: transparent;\n            border: none;\n            border-radius: var(--radius-full, 9999px);\n            color: var(--color-text-500, #6b7280);\n            cursor: pointer;\n            display: flex;\n            height: 3%2px;\n            justify-content: center;\n            transition: background-color 0.2s, color 0.2s;\n            width: 3%2px;\n          }\n\n          & .close:hover {\n            background-color: var(--color-surface-200);\n            color: var(--color-text-700, #374151);\n          }\n\n/* Dialog body */\n          & .body {\n            flex: 1;\n            overflow-y: auto;\n            padding: var(--space-5);\n          }\n\n/* Dialog footer */\n          & .footer {\n            align-items: center;\n            background-color: var(--color-surface-50);\n            border-top: 1px solid var(--color-border-200, #e5e7eb);\n            display: flex;\n            gap: var(--space-3);\n            justify-content: flex-end;\n            padding: var(--space-4) var(--space-5);\n          }\n\n/* Dialog variants */\n          .dialog--danger & .header {\n            background-color: var(--color-error-50);\n            color: var(--color-error-900);\n          }\n\n          .dialog--info & .header {\n            background-color: var(--color-info-50);\n            color: var(--color-info-900);\n          }\n\n          .dialog--warning & .header {\n            background-color: var(--color-warning-50);\n            color: var(--color-warning-900);\n          }\n\n          .dialog--success & .header {\n            background-color: var(--color-success-50);\n            color: var(--color-success-900);\n          }\n\n/* Dialog animations */\n          .dialog--slide-up {\n            transform: translateY(100%);\n          }\n\n          .dialog--slide-up.dialog--visible {\n            transform: translateY(0%);\n          }\n\n          .dialog--slide-down {\n            transform: translateY(-100%);\n          }\n\n          .dialog--slide-down.dialog--visible {\n            transform: translateY(0%);\n          }\n\n          .dialog--zoom {\n            transform: scale(0.9%);\n          }\n\n          .dialog--zoom.dialog--visible {\n            transform: scale(1);\n          }\n\n/* Simple confirmation dialog */\n          .dialog--confirmation & .body {\n            padding: var(--space-6) var(--space-5);\n            text-align: center;\n          }\n\n/* Responsive adjustments */\n          @media (max-width: 640px) {\n            .dialog {\n              max-height: calc(100 - 64px);\n              max-width: calc(100vw - 32px);\n            }\n\n            .dialog--lg,\n            .dialog--xl {\n              max-width: calc(100vw - 32px);\n            }\n          }\n        }\n\n/* Importierte Datei: ui/components/drawer.css */\n/**\n        * Drawer/Accordion\n        *\n        * Drawers and accordions are expandable containers that allow users to show\n        * or hide content sections. They help organize content, save screen space,\n        * and allow users to focus on specific information.\n        *\n        * @layer: components\n        *\n        * Accessibility:\n        * - Use appropriate ARIA attributes (aria-expanded, aria-controls)\n        * - Ensure keyboard operability\n        * - Headers should be properly labeled as buttons\n        * - Include focus states for interactive elements\n        */\n\n        @layer components {\n/* ===== Accordion ===== */\n\n/* Accordion container */\n          .accordion {\n            background-color: var(--color-surface-50);\n            border: 1px solid var(--color-border-200, #e5e7eb);\n            border-radius: var(--radius-md, 0.375rem);\n            overflow: hidden;\n          }\n\n/* Accordion item */\n          & .item {\n            border-bottom: 1px solid var(--color-border-200, #e5e7eb);\n          }\n\n          & .item:last-child {\n            border-bottom: none;\n          }\n\n/* Accordion header/trigger */\n          & .header {\n            align-items: center;\n            background-color: var(--color-surface-100, #f3f4f6);\n            border: none;\n            cursor: pointer;\n            display: flex;\n            justify-content: space-between;\n            padding: var(--space-4);\n            text-align: left;\n            transition: background-color 0.2s;\n            width: 100%;\n          }\n\n          & .header:hover {\n            background-color: var(--color-surface-200);\n          }\n\n          & .header:focus {\n            box-shadow: 0 0 0 2px var(--color-primary-200);\n            outline: none;\n          }\n\n/* Accordion title */\n          & .title {\n            color: var(--color-text-900, #111827);\n            flex: 1;\n            font-weight: var(--font-medium, 500);\n          }\n\n/* Accordion icon */\n          & .icon {\n            color: var(--color-text-500, #6b7280);\n            transition: transform 0.3s;\n          }\n\n          & .header[aria-expanded=\"true\"] & .icon {\n            transform: rotate(180deg);\n          }\n\n/* Accordion content panel */\n          & .panel {\n            max-height: 0%;\n            overflow: hidden;\n            transition: max-height 0.3s ease-out;\n          }\n\n          & .panel[aria-hidden=\"false\"] {\n            max-height: 100%0px; /* Arbitrary large value, will be controlled by JS */\n          }\n\n          & .content {\n            padding: var(--space-4);\n          }\n\n/* Accordion variations */\n          .accordion--bordered & .item {\n            border: 1px solid var(--color-border-200, #e5e7eb);\n            border-radius: var(--radius-md, 0.375rem);\n            margin-bottom: var(--space-3);\n          }\n\n          .accordion--bordered & .item:last-child {\n            margin-bottom: 0%;\n          }\n\n/* ===== Drawer ===== */\n\n/* Drawer container */\n          .drawer {\n            background-color: var(--color-surface-100, #f3f4f6);\n            box-shadow: var(--shadow-lg);\n            position: fixed;\n            transition: transform 0.3s ease;\n            z-index: var(--z-drawer, 90);\n          }\n\n/* Drawer positions */\n          .drawer--left {\n            height: 100%;\n            left: 0%;\n            top: 0%;\n            transform: translateX(-100%);\n          }\n\n          .drawer--right {\n            height: 100%;\n            right: 0%;\n            top: 0%;\n            transform: translateX(100%);\n          }\n\n          .drawer--top {\n            left: 0%;\n            top: 0%;\n            transform: translateY(-100%);\n            width: 100%;\n          }\n\n          .drawer--bottom {\n            bottom: 0%;\n            left: 0%;\n            transform: translateY(100%);\n            width: 100%;\n          }\n\n/* Drawer sizes */\n          .drawer--left.drawer--sm,\n          .drawer--right.drawer--sm {\n            width: 25%0px;\n          }\n\n          .drawer--left.drawer--md,\n          .drawer--right.drawer--md {\n            width: 35%0px;\n          }\n\n          .drawer--left.drawer--lg,\n          .drawer--right.drawer--lg {\n            width: 45%0px;\n          }\n\n          .drawer--top.drawer--sm,\n          .drawer--bottom.drawer--sm {\n            height: 20%0px;\n          }\n\n          .drawer--top.drawer--md,\n          .drawer--bottom.drawer--md {\n            height: 30%0px;\n          }\n\n          .drawer--top.drawer--lg,\n          .drawer--bottom.drawer--lg {\n            height: 40%0px;\n          }\n\n/* Opened state */\n          .drawer--opened {\n            transform: translate(0%);\n          }\n\n/* Drawer backdrop */\n          .drawer-backdrop {\n            background-color: rgb(0 0 0 / 5000%);\n            inset: 0;\n            opacity: 0%;\n            position: fixed;\n            transition: opacity 0.3s, visibility 0.3s;\n            visibility: hidden;\n            z-index: var(--z-drawer-backdrop, 80);\n          }\n\n          .drawer-backdrop--visible {\n            opacity: 1;\n            visibility: visible;\n          }\n\n/* Drawer header */\n          & .header {\n            align-items: center;\n            border-bottom: 1px solid var(--color-border-200, #e5e7eb);\n            display: flex;\n            justify-content: space-between;\n            padding: var(--space-4);\n          }\n\n          & .title {\n            font-weight: var(--font-semibold, 600);\n            margin: 0;\n          }\n\n          & .close {\n            align-items: center;\n            background: transparent;\n            border: none;\n            border-radius: var(--radius-full, 9999px);\n            color: var(--color-text-500, #6b7280);\n            cursor: pointer;\n            display: flex;\n            height: 3%2px;\n            justify-content: center;\n            transition: background-color 0.2s;\n            width: 3%2px;\n          }\n\n          & .close:hover {\n            background-color: var(--color-surface-200);\n            color: var(--color-text-700, #374151);\n          }\n\n/* Drawer body */\n          & .body {\n            height: calc(100 - 60px); /* Adjust based on header + footer height */\n            overflow-y: auto;\n            padding: var(--space-4);\n          }\n\n/* Drawer footer */\n          & .footer {\n            border-top: 1px solid var(--color-border-200, #e5e7eb);\n            display: flex;\n            gap: var(--space-3);\n            justify-content: flex-end;\n            padding: var(--space-4);\n          }\n\n/* Responsive adjustments */\n          @media (max-width: 640px) {\n            .drawer--left,\n            .drawer--right {\n              width: 100%;\n            }\n          }\n        }\n\n/* Importierte Datei: ui/components/hamburger.css */\n/*\n        * Hamburger-Komponente\n        *\n        * Hamburger-Menü-Icon mit Animation und Toggle-Zustand.\n        */\n\n/**\n        * Hamburger-Komponente\n        *\n        * Mobile Menü-Icons für Navigation auf kleinen Bildschirmen.\n        * Hamburger-Icons dienen als kompakte Schaltfläche für das Aus- und Einklappen von Navigationsmenüs.\n        *\n        * @layer components\n        *\n        * Grundlegende Verwendung:\n        * <button class=\"hamburger\" aria-label=\"Menü öffnen\">\n        *   <span class=\"line\"></span>\n        *   <span class=\"line\"></span>\n        *   <span class=\"line\"></span>\n        * </button>\n        *\n        * Aktiver Zustand (geöffnet):\n        * <button class=\"hamburger active\" aria-label=\"Menü schließen\">\n        *   <span class=\"line\"></span>\n        *   <span class=\"line\"></span>\n        *   <span class=\"line\"></span>\n        * </button>\n        *\n        * Varianten:\n        * <button class=\"hamburger spin\">...</button>      <!-- Drehanimation -->\n        * <button class=\"hamburger squeeze\">...</button>   <!-- Quetschanimation -->\n        * <button class=\"hamburger arrow\">...</button>     <!-- Pfeilanimation -->\n        * <button class=\"hamburger collapse\">...</button>  <!-- Einklappen -->\n        *\n        * Größen:\n        * <button class=\"hamburger sm\">...</button>  <!-- Klein -->\n        * <button class=\"hamburger md\">...</button>  <!-- Mittel (Standard) -->\n        * <button class=\"hamburger lg\">...</button>  <!-- Groß -->\n        *\n        * Farben:\n        * <button class=\"hamburger light\">...</button>  <!-- Heller Hintergrund -->\n        * <button class=\"hamburger dark\">...</button>   <!-- Dunkler Hintergrund -->\n        * <button class=\"hamburger primary\">...</button> <!-- Primärfarbe -->\n        */\n\n        @layer components {\n          .hamburger {\n            background: transparent;\n            border: none;\n            cursor: pointer;\n            display: inline-flex;\n            flex-direction: column;\n            height: 2%4px;\n            justify-content: space-between;\n            padding: 4px 0;\n            width: 2%4px;\n\n            .line {\n              background-color: var(--color-gray-800);\n              border-radius: 2px;\n              display: block;\n              height: 2px;\n              transition: all var(--transition-fast, 150ms ease) ease-in-out;\n              width: 100%;\n            }\n\n/* Aktiver Zustand */\n            &.active {\n              .line:nth-child(1) {\n                transform: translateY(8px) rotate(45deg);\n              }\n\n              .line:nth-child(2) {\n                opacity: 0%;\n              }\n\n              .line:nth-child(3) {\n                transform: translateY(-8px) rotate(-45deg);\n              }\n            }\n\n/* Varianten */\n            &.spin {\n              &.active {\n                .line:nth-child(1) {\n                  margin-top: 8px;\n                  transform: rotate(135deg);\n                }\n\n                .line:nth-child(2) {\n                  opacity: 0%;\n                }\n\n                .line:nth-child(3) {\n                  margin-top: -16px;\n                  transform: rotate(-135deg);\n                }\n              }\n            }\n\n            &.squeeze {\n              &.active {\n                .line:nth-child(1) {\n                  transform: translateY(8px) rotate(45deg);\n                }\n\n                .line:nth-child(2) {\n                  transform: scaleX(0%);\n                }\n\n                .line:nth-child(3) {\n                  transform: translateY(-8px) rotate(-45deg);\n                }\n              }\n            }\n\n            &.arrow {\n              &.active {\n                .line:nth-child(1) {\n                  transform: translateY(3px) translateX(6px) rotate(45deg);\n                  width: 50%;\n                }\n\n                .line:nth-child(2) {\n                  opacity: 1;\n                }\n\n                .line:nth-child(3) {\n                  transform: translateY(-3px) translateX(6px) rotate(-45deg);\n                  width: 50%;\n                }\n              }\n            }\n\n/* Größenvarianten */\n            &.sm {\n              height: 1%8px;\n              width: 1%8px;\n\n              .line {\n                height: 1px;\n              }\n            }\n\n            &.lg {\n              height: 3%0px;\n              width: 3%0px;\n\n              .line {\n                height: 3px;\n              }\n            }\n\n/* Farbvarianten */\n            &.light .line {\n              background-color: var(--color-white, #fff);\n            }\n\n            &.dark .line {\n              background-color: var(--color-gray-900, #111827);\n            }\n\n            &.primary .line {\n              background-color: var(--color-primary, #3b82f6);\n            }\n          }\n        }\n\n\n\n/* Importierte Datei: ui/components/modal.css */\n/*\n        * Modal Module\n        *\n        * Zentrale Komponente für modale Dialoge.\n        */\n\n/**\n        * Modal-Komponente\n        *\n        * Dialogfenster und Overlays für fokussierte Benutzerinteraktionen.\n        * Modals werden verwendet, um wichtige Informationen anzuzeigen oder Benutzerentscheidungen zu erfordern.\n        *\n        * @layer components.modal\n        *\n        * Grundlegende Verwendung:\n        * <div class=\"modal\">\n        *   <div class=\"backdrop\"></div>\n        *   <div class=\"container\">\n        *     <div class=\"header\">\n        *       <h3 class=\"title\">Modaltitel</h3>\n        *       <button class=\"close\">&times;</button>\n        *     </div>\n        *     <div class=\"body\">\n        *       Modalinhalt\n        *     </div>\n        *     <div class=\"footer\">\n        *       <button class=\"button\">Abbrechen</button>\n        *       <button class=\"button primary\">Bestätigen</button>\n        *     </div>\n        *   </div>\n        * </div>\n        *\n        * Größenvarianten:\n        * <div class=\"modal small\">...</div>\n        * <div class=\"modal medium\">...</div>\n        * <div class=\"modal large\">...</div>\n        * <div class=\"modal fullscreen\">...</div>\n        *\n        * Position:\n        * <div class=\"modal center\">...</div>\n        * <div class=\"modal top\">...</div>\n        * <div class=\"modal bottom\">...</div>\n        *\n        * Animation (erfordert JS):\n        * <div class=\"modal fade\">...</div>\n        * <div class=\"modal slide\">...</div>\n        *\n        * Flüssige Größenanpassung mit Schlüsselwörtern:\n        * <div class=\"modal fluid\">...</div>\n        * <div class=\"modal fluid small\">...</div>\n        * <div class=\"modal fluid medium\">...</div>\n        * <div class=\"modal fluid large\">...</div>\n        *\n        * Container-adaptive Größenanpassung:\n        * <div class=\"modal adaptive\">...</div>\n        */\n\n/* Animationen - außerhalb von @layer definieren */\n\n/* Komponenten-Styles */\n        @layer components {\n          .modal {\n            align-items: center;\n            display: flex;\n            inset: 0;\n            justify-content: center;\n            position: fixed;\n            z-index: var(--z-index-modal, 1000);\n\n/* Hintergrund-Overlay */\n            .backdrop {\n              background: rgb(0 0 0 / 5000%);\n              inset: 0;\n              position: fixed;\n              z-index: var(--z-index-modal-backdrop, 999);\n            }\n\n/* Modal-Container */\n            .container {\n              background: var(--color-background, var(--color-surface-elevated, #fff));\n              border-radius: var(--radius-modal, var(--radius-lg, 0.75rem));\n              box-shadow: var(--shadow-lg, 0 10px 15px -3px rgb(0 0 0 / 1000%));\n              display: flex;\n              flex-direction: column;\n              gap: var(--space-4, 1rem);\n              max-width: var(--modal-max-width, 32rem);\n              overflow: hidden;\n              padding: var(--modal-padding, var(--space-6, 1.5rem));\n              position: relative;\n              width: 100%;\n              z-index: var(--z-index-modal, 1000);\n            }\n\n/* Modal-Header */\n            .header {\n              align-items: center;\n              display: flex;\n              justify-content: space-between;\n              padding: var(--modal-header-padding, 0);\n\n              .title {\n                color: var(--color-text, var(--color-neutral-900, #111827));\n                font-size: var(--text-lg, var(--font-size-lg, 1.125rem));\n                font-weight: var(--font-semibold, var(--font-weight-semibold, 600));\n                margin: 0;\n              }\n\n              .close {\n                background: none;\n                border: none;\n                color: var(--color-neutral-500, #6b7280);\n                cursor: pointer;\n                font-size: 1.5rem;\n                line-height: 1%;\n                padding: 0.25rem;\n                transition: color var(--transition-duration-fast, 150ms) var(--transition-timing-ease, ease);\n\n                &:hover {\n                  color: var(--color-neutral-800, #1f2937);\n                }\n              }\n            }\n\n/* Modal-Inhalt */\n            .body {\n              color: var(--color-text-muted, var(--color-neutral-700, #374151));\n              font-size: var(--text-base, var(--font-size-base, 1rem));\n              max-height: 70%;\n              overflow-y: auto;\n            }\n\n/* Modal-Footer */\n            .footer {\n              display: flex;\n              gap: var(--space-3, 0.75rem);\n              justify-content: flex-end;\n              margin-top: var(--space-2, 0.5rem);\n              padding: var(--modal-footer-padding, 0);\n            }\n\n/* Größenvarianten */\n            &.small .container {\n              max-width: 2%4rem;\n            }\n\n            &.medium .container {\n              max-width: var(--modal-max-width, 32rem);\n            }\n\n            &.large .container {\n              max-width: 4%8rem;\n            }\n\n            &.fullscreen .container {\n              border-radius: 0;\n              height: 100%;\n              max-width: 100%;\n              width: 100%;\n            }\n\n/* Flüssige Größenanpassung mit interpolate-size: allow-keywords */\n            &.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\n\n/**\n              * Modal Component Structure:\n              *\n              * <div class=\"modal\" role=\"dialog\">\n              *   <div class=\"modal-overlay\"></div>\n              *   <div class=\"modal-container\">\n              *     <div class=\"modal-header\">\n              *       <h2 class=\"modal-title\">Title</h2>\n              *       <button class=\"modal-close\" aria-label=\"Close\">&times;</button>\n              *     </div>\n              *     <div class=\"modal-content\">\n              *       <!-- Modal body content -->\n              *     </div>\n              *     <div class=\"modal-footer\">\n              *       <button class=\"button button--secondary\">Cancel</button>\n              *       <button class=\"button button--primary\">Confirm</button>\n              *     </div>\n              *   </div>\n              * </div>\n              *\n              * Modifiers: .modal--sm, .modal--lg, .modal--fullscreen\n              * States: .modal--open, .modal--closing\n              */\n              .container {\n                border-radius: 0.75em;\n                gap: 1em;\n                padding: 1.5em;\n              }\n\n              .header .title {\n                font-size: 1.25em;\n              }\n\n              .body {\n                font-size: 1em;\n              }\n\n              .footer {\n                gap: 0.75em;\n                margin-top: 0%.5em;\n              }\n\n/* Größenvarianten mit CSS-Schlüsselwörtern */\n              &.small {\n                font-size: small;\n\n                .container {\n                  max-width: 2%4em;\n                }\n              }\n\n              &.medium {\n                font-size: medium;\n\n                .container {\n                  max-width: 3%2em;\n                }\n              }\n\n              &.large {\n                font-size: large;\n\n                .container {\n                  max-width: 4%8em;\n                }\n              }\n\n              &.x-large {\n                font-size: x-large;\n\n                .container {\n                  max-width: 6%4em;\n                }\n              }\n            }\n\n/* Container-adaptive Größenanpassung */\n            &.adaptive {\n              container-name: modal;\n              container-type: inline-size;\n\n              .container {\n                max-width: clamp(24rem, 80cqi, 48rem);\n                padding: clamp(var(--space-4, 1rem), 4cqi, var(--space-8, 2rem));\n              }\n\n              .header .title {\n                font-size: clamp(var(--text-base, 1rem), 3cqi, var(--text-xl, 1.25rem));\n              }\n\n              .body {\n                font-size: clamp(var(--text-sm, 0.875rem), 2.5cqi, var(--text-base, 1rem));\n              }\n\n/* Container-Query für größere Modals */\n              @container modal (min-width: 40rem) {\n                .container {\n                  gap: var(--space-6, 1.5rem);\n                }\n              }\n            }\n\n/* Positionierung */\n            &.center {\n              align-items: center;\n              justify-content: center;\n            }\n\n            &.top {\n              align-items: flex-start;\n\n              .container {\n                margin-top: var(--space-16, 4rem);\n              }\n            }\n\n            &.bottom {\n              align-items: flex-end;\n\n              .container {\n                margin-bottom: var(--space-16, 4rem);\n              }\n            }\n          }\n        }\n\n/* Animationen */\n        @layer animations {\n          .modal {\n            &.fade .container {\n              animation: fadeIn 0.2s ease-out;\n            }\n\n            &.slide .container {\n              animation: slideUp 0.3s ease-out;\n            }\n          }\n        }\n\n\n/* Importierte Datei: ui/components/notification.css */\n/*\n        * Notification Module\n        *\n        * Benachrichtigungen und Systemmeldungen (Toast/Messages).\n        */\n\n/**\n        * Notification-Komponente\n        *\n        * System- und Benutzermeldungen für wichtige Mitteilungen und Updates.\n        * Notifications informieren Benutzer über Ereignisse, Aktivitäten oder Statusänderungen.\n        *\n        * @layer components.notification\n        *\n        * Grundlegende Verwendung:\n        * <div class=\"notification\">\n        *   <div class=\"icon\"><!-- Icon hier --></div>\n        *   <div class=\"content\">\n        *     <div class=\"title\">Neue Nachricht</div>\n        *     <div class=\"message\">Sie haben eine neue Nachricht erhalten.</div>\n        *   </div>\n        *   <button class=\"close\">&times;</button>\n        * </div>\n        *\n        * Varianten:\n        * <div class=\"notification info\">Informativ</div>\n        * <div class=\"notification success\">Erfolg</div>\n        * <div class=\"notification warning\">Warnung</div>\n        * <div class=\"notification error\">Fehler</div>\n        *\n        * Positionen:\n        * <div class=\"notification top-right\">Oben rechts</div>\n        * <div class=\"notification top-left\">Oben links</div>\n        * <div class=\"notification bottom-right\">Unten rechts</div>\n        * <div class=\"notification bottom-left\">Unten links</div>\n        *\n        * Mit Aktionen:\n        * <div class=\"notification\">\n        *   <div class=\"content\">Neue Anfrage</div>\n        *   <div class=\"actions\">\n        *     <button class=\"button small primary\">Annehmen</button>\n        *     <button class=\"button small\">Ablehnen</button>\n        *   </div>\n        * </div>\n        *\n        * Mit Timer:\n        * <div class=\"notification with-timer\">\n        *   <div class=\"content\">Diese Meldung verschwindet in 5 Sekunden</div>\n        *   <div class=\"timer\"></div>\n        * </div>\n        *\n        * Gruppierte Benachrichtigungen:\n        * <div class=\"notification-center\">\n        *   <div class=\"notification\">Benachrichtigung 1</div>\n        *   <div class=\"notification\">Benachrichtigung 2</div>\n        * </div>\n        */\n\n/* Animationen - außerhalb von @layer definieren */\n        @keyframes notification-timer {\n          from { width: 100%; }\n\n          to { width: 0%; }\n        }\n\n/* Komponenten-Styles */\n        @layer components {\n          .notification {\n            align-items: start;\n            background-color: var(--color-gray-100, #f3f4f6);\n            border: 1px solid var(--color-gray-300, #d1d5db);\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            font-size: var(--font-size-sm, 0.875rem);\n            gap: var(--space-3);\n            max-width: 100%;\n            padding: var(--space-3);\n\n/* Varianten */\n            &.success {\n              background-color: var(--color-success, #10b981);\n              color: white;\n            }\n\n            &.error {\n              background-color: var(--color-error, #ef4444);\n              color: white;\n            }\n\n            &.warning {\n              background-color: var(--color-warning, #f59e0b);\n              color: black;\n            }\n\n            &.info {\n              background-color: var(--color-info, #3b82f6);\n              color: white;\n            }\n\n/* Icon */\n            .icon {\n              flex-shrink: 0;\n              font-size: 1.25rem;\n              line-height: 1%;\n              margin-top: 2px;\n            }\n\n/* Inhalt */\n            .content {\n              flex: 1;\n\n              .title {\n                font-weight: var(--font-weight-medium, 500);\n                margin-bottom: var(--space-1);\n              }\n\n              .message {\n                color: inherit;\n                opacity: 9000%;\n              }\n            }\n\n/* Schließen-Knopf */\n            .close {\n              background: none;\n              border: none;\n              color: currentcolor;\n              cursor: pointer;\n              flex-shrink: 0;\n              font-size: 1.25rem;\n              line-height: 1%;\n              margin-left: auto;\n              opacity: 0.7;\n              padding: 0.25rem;\n              transition: opacity var(--transition-fast, 150ms ease);\n\n              &:hover {\n                opacity: 1;\n              }\n            }\n\n/* Aktionen */\n            .actions {\n              display: flex;\n              gap: var(--space-2);\n              margin-top: var(--space-2);\n            }\n\n/* Timer */\n            .timer {\n              background-color: rgb(255 255 255 / 5000%);\n              bottom: 0%;\n              height: 3px;\n              left: 0%;\n              position: absolute;\n            }\n\n/* Positionen */\n            &.top-right,\n            &.top-left,\n            &.bottom-right,\n            &.bottom-left {\n              margin: var(--space-4);\n              position: fixed;\n              z-index: var(--z-index-notification, 1070);\n            }\n\n            &.top-right {\n              right: 0%;\n              top: 0%;\n            }\n\n            &.top-left {\n              left: 0%;\n              top: 0%;\n            }\n\n            &.bottom-right {\n              bottom: 0%;\n              right: 0%;\n            }\n\n            &.bottom-left {\n              bottom: 0%;\n              left: 0%;\n            }\n\n            &.with-timer {\n              overflow: hidden;\n              position: relative;\n            }\n          }\n\n/* Notification-Center */\n          .notification-center {\n            display: flex;\n            flex-direction: column;\n            gap: var(--space-2);\n            max-width: 100%;\n            position: fixed;\n            width: 35%0px;\n            z-index: var(--z-index-notification, 1070);\n\n            &.top-right {\n              margin: var(--space-4);\n              right: 0%;\n              top: 0%;\n            }\n\n            &.top-left {\n              left: 0%;\n              margin: var(--space-4);\n              top: 0%;\n            }\n\n            &.bottom-right {\n              bottom: 0%;\n              margin: var(--space-4);\n              right: 0%;\n            }\n\n            &.bottom-left {\n              bottom: 0%;\n              left: 0%;\n              margin: var(--space-4);\n            }\n          }\n        }\n\n/* Animations-Styles */\n        @layer animations {\n          .notification {\n            &.animate-in {\n              animation-duration: 0.3s;\n              animation-name: slideIn;\n              animation-timing-function: ease-out;\n            }\n\n            &.animate-out {\n              animation-duration: 0.3s;\n              animation-fill-mode: forwards;\n              animation-name: slideOut;\n              animation-timing-function: ease-in;\n            }\n\n            .timer {\n              animation: notification-timer 5s linear forwards;\n            }\n          }\n        }\n\n/* Importierte Datei: ui/components/popover.css */\n/**\n        * Popover-Komponente\n        *\n        * Eine Komponente zur Erstellung von Popover-Elementen mit der nativen HTML Popover API.\n        * Unterstützt Hover-Effekte, Animationen, Pfeile und Dark Mode.\n        *\n        * @nutzung\n        * <button popovertarget=\"myPopover\">Follow Me</button>\n        * <div id=\"myPopover\" popover class=\"popover\">Thank you for following me!</div>\n        *\n        * @eigenschaften\n        * - Automatische Positionierung unter dem Trigger-Element\n        * - Smooth Animation beim Öffnen/Schließen mit @starting-style\n        * - Pfeil-Element für visuelle Verbindung zum Trigger\n        * - Responsive Design (max-width: 9%0vw)\n        * - Unterstützung für Light/Dark Mode\n        *\n        * @browser-kompatibilität\n        * Die native HTML Popover API wird unterstützt in:\n        * - Chrome/Edge ab Version 114\n        * - Safari ab Version 16.4\n        * - Firefox ab Version 114 (mit Aktivierung über Flag)\n        *\n        * Für ältere Browser sollte ein Fallback-Mechanismus implementiert werden,\n        * z.B. mit JavaScript-basierten Popover-Lösungen.\n        */\n\n        @layer components {\n          .popover {\n            animation: slideIn var(--animation-duration-normal, 300ms) cubic-bezier(0.68, -0.6, 0.32, 1.6) forwards;\n            background: var(--color-background, #fff);\n            border: 1px solid var(--color-border, #e5e7eb);\n            border-radius: 0.5rem;\n            box-shadow: 0 8px 32px rgb(0 0 0 / 18%), 0 1.5px 4px rgb(0 0 0 / 8%);\n            color: var(--color-text, #222);\n            max-width: 9%0vw;\n            min-width: 20%0px;\n            padding: 1rem;\n            position: absolute;\n            z-index: 1000;\n          }\n\n          @starting-style {\n            .popover {\n              opacity: 0%;\n              transform: translateY(8px) scale(0.98%);\n            }\n          }\n\n          .popover[popover] {\n            display: block;\n\n/* Ermöglicht Styling für native Popover-API */\n            inset: unset;\n            left: 0%;\n            margin-top: 0%.5rem;\n            top: 100%;\n          }\n\n/* Optional: Arrow */\n          .popover::before {\n            background: var(--color-background, #fff);\n            border-left: 1px solid var(--color-border, #e5e7eb);\n            border-top: 1px solid var(--color-border, #e5e7eb);\n            clip-path: polygon(50% 0, 0 100, 100 100);\n            content: '';\n            height: 8px;\n            left: 2rem;\n            position: absolute;\n            top: -8px;\n            width: 1%6px;\n            z-index: 1;\n          }\n        }\n\n/* Darkmode Support */\n        @media (prefers-color-scheme: dark) {\n          @layer components {\n            .popover {\n              background: var(--color-background-dark, #222);\n              border-color: var(--color-border-dark, #444);\n              color: var(--color-text-dark, #fff);\n            }\n\n            .popover::before {\n              background: var(--color-background-dark, #222);\n              border-color: var(--color-border-dark, #444);\n            }\n          }\n        }\n\n/* Importierte Datei: ui/components/progress-bar.css */\n/**\n        * Progress Bar\n        *\n        * Progress bars visualize the completion status of a task or process, showing\n        * users how much has been completed and how much remains. They can include\n        * percentages, labels, and different visual styles.\n        *\n        * @layer: components\n        *\n        * Accessibility:\n        * - Use proper ARIA attributes (aria-valuemin, aria-valuemax, aria-valuenow)\n        * - Include text alternatives for screen readers\n        * - Ensure sufficient color contrast for all states\n        * - Consider color blind users when choosing colors\n        */\n\n        @layer components {\n/* Base progress bar container */\n          .progress {\n            background-color: var(--color-neutral-200, #e5e7eb);\n            border-radius: var(--radius-full, 9999px);\n            height: var(--progress-height, 0.5rem);\n            overflow: hidden;\n            position: relative;\n            width: 100%;\n          }\n\n/* Progress bar fill */\n          & .fill {\n            background-color: var(--color-primary-500, #3b82f6);\n            border-radius: var(--radius-full, 9999px);\n            height: 100%;\n            left: 0%;\n            position: absolute;\n            top: 0%;\n            transition: width var(--transition-duration-normal, 300ms) var(--transition-timing-ease, ease);\n          }\n\n/* Progress with label */\n          .progress--with-label {\n            margin-bottom: var(--space-1, 0.25rem);\n          }\n\n/* Progress label */\n          & .label {\n            color: var(--color-text-muted, var(--color-neutral-700, #374151));\n            display: flex;\n            font-size: var(--text-sm, var(--font-size-sm, 0.875rem));\n            justify-content: space-between;\n            margin-bottom: var(--space-2, 0.5rem);\n          }\n\n          & .title {\n            font-weight: var(--font-medium, var(--font-weight-medium, 500));\n          }\n\n          & .value {\n            font-variant-numeric: tabular-nums;\n          }\n\n/* Progress sizes */\n          .progress--xs {\n            height: 0%.25rem;\n          }\n\n          .progress--sm {\n            height: 0%.375rem;\n          }\n\n          .progress--md {\n            height: var(--progress-height, 0.5rem);\n          }\n\n          .progress--lg {\n            height: 0%.75rem;\n          }\n\n          .progress--xl {\n            height: 1rem;\n          }\n\n/* Progress shapes */\n          .progress--square {\n            border-radius: var(--radius-sm, 0.25rem);\n          }\n\n          .progress--square & .fill {\n            border-radius: var(--radius-sm, 0.25rem);\n          }\n\n/* Progress colors */\n          .progress--primary & .fill {\n            background-color: var(--color-primary-500, #3b82f6);\n          }\n\n          .progress--secondary & .fill {\n            background-color: var(--color-secondary-500, #6b7280);\n          }\n\n          .progress--success & .fill {\n            background-color: var(--color-success-500, #10b981);\n          }\n\n          .progress--danger & .fill {\n            background-color: var(--color-error-500, #ef4444);\n          }\n\n          .progress--warning & .fill {\n            background-color: var(--color-warning-500, #f59e0b);\n          }\n\n          .progress--info & .fill {\n            background-color: var(--color-info-500, #3b82f6);\n          }\n\n/* Progress with steps */\n          .progress--stepped {\n            background-color: transparent;\n            display: flex;\n            gap: var(--progress-step-gap, 4px);\n            height: auto;\n            justify-content: space-between;\n          }\n\n          & .step {\n            background-color: var(--color-neutral-200, #e5e7eb);\n            border-radius: var(--radius-full, 9999px);\n            flex: 1;\n            height: var(--progress-height, 0.5rem);\n            transition: background-color var(--transition-duration-fast, 150ms) var(--transition-timing-ease, ease);\n          }\n\n          & .step--completed {\n            background-color: var(--color-primary-500, #3b82f6);\n          }\n\n          & .step--active {\n            background-color: var(--color-primary-300, #93c5fd);\n          }\n\n          .progress--stepped.progress--square & .step {\n            border-radius: var(--radius-sm, 0.25rem);\n          }\n\n/* Progress with steps and labels */\n          .progress--with-step-labels {\n            margin-bottom: var(--space-6, 1.5rem);\n          }\n\n          & .steps-container {\n            display: flex;\n            justify-content: space-between;\n            margin-top: var(--space-2, 0.5rem);\n            position: relative;\n          }\n\n          & .step-label {\n            color: var(--color-neutral-500, #6b7280);\n            font-size: var(--text-xs, var(--font-size-xs, 0.75rem));\n            position: absolute;\n            text-align: center;\n            top: var(--space-2, 0.5rem);\n            transform: translateX(-50%);\n            white-space: nowrap;\n          }\n\n          & .step-label--completed {\n            color: var(--color-primary-600, #2563eb);\n            font-weight: var(--font-medium, var(--font-weight-medium, 500));\n          }\n\n/* Indeterminate progress animation */\n          .progress--indeterminate & .fill {\n            animation: progressIndeterminate 1.5s infinite;\n            transform-origin: left;\n            width: 40% !important;\n          }\n\n/* Progress with stripes */\n          .progress--striped & .fill {\n            background-image: linear-gradient(\n            45deg,\n            rgb(255 255 255 / 15%) 25%,\n            transparent 25%,\n            transparent 50,\n            rgb(255 255 255 / 15%) 50,\n            rgb(255 255 255 / 15%) 75%,\n            transparent 75%,\n            transparent\n            );\n            background-size: 1rem 1rem;\n          }\n\n          .progress--animated & .fill {\n            animation: progressStripes 1s linear infinite;\n          }\n\n/* Progress with value inside */\n          .progress--with-value-inside {\n            position: relative;\n          }\n\n          & .value-inside {\n            color: var(--color-text-inverse, white);\n            font-size: var(--text-xs, var(--font-size-xs, 0.75rem));\n            font-weight: var(--font-medium, var(--font-weight-medium, 500));\n            left: 50%;\n            position: absolute;\n            top: 50%;\n            transform: translate(-50%, -50);\n            z-index: 1;\n          }\n\n/* Buffer progress */\n          .progress--buffer {\n            background-color: transparent;\n          }\n\n          & .buffer {\n            background-color: var(--color-neutral-300, #d1d5db);\n            border-radius: var(--radius-full, 9999px);\n            height: 100%;\n            left: 0%;\n            position: absolute;\n            top: 0%;\n            transition: width var(--transition-duration-normal, 300ms) var(--transition-timing-ease, ease);\n          }\n\n          .progress--buffer & .fill {\n            z-index: 1;\n          }\n\n/* Gradient progress */\n          .progress--gradient & .fill {\n            background: linear-gradient(\n            90deg,\n            var(--color-primary-400, #60a5fa),\n            var(--color-primary-600, #2563eb)\n            );\n          }\n\n          .progress--gradient.progress--success & .fill {\n            background: linear-gradient(\n            90deg,\n            var(--color-success-400, #34d399),\n            var(--color-success-600, #059669)\n            );\n          }\n\n          .progress--gradient.progress--warning & .fill {\n            background: linear-gradient(\n            90deg,\n            var(--color-warning-400, #fbbf24),\n            var(--color-warning-600, #d97706)\n            );\n          }\n\n          .progress--gradient.progress--danger & .fill {\n            background: linear-gradient(\n            90deg,\n            var(--color-error-400, #f87171),\n            var(--color-error-600, #dc2626)\n            );\n          }\n        }\n\n/* Importierte Datei: ui/components/tabs.css */\n/**\n        * Tabs-Komponente\n        *\n        * Tab-Navigation für das Umschalten zwischen verschiedenen Inhaltsbereichen.\n        * Tabs ermöglichen ein platzsparendes Design für verschiedene Inhaltsgruppen.\n        *\n        * @layer components.tabs\n        *\n        * Grundlegende Verwendung:\n        * <div class=\"tabs\">\n        *   <div class=\"nav\">\n        *     <button class=\"tab active\">Tab 1</button>\n        *     <button class=\"tab\">Tab 2</button>\n        *     <button class=\"tab\">Tab 3</button>\n        *   </div>\n        *   <div class=\"content\">\n        *     <div class=\"panel active\">Inhalt Tab 1</div>\n        *     <div class=\"panel\">Inhalt Tab 2</div>\n        *     <div class=\"panel\">Inhalt Tab 3</div>\n        *   </div>\n        * </div>\n        *\n        * Varianten:\n        * <div class=\"tabs pills\">...</div>  <!-- Pill-Style Tabs -->\n        * <div class=\"tabs underline\">...</div>  <!-- Unterstrichene Tabs -->\n        * <div class=\"tabs boxed\">...</div>  <!-- Box-Style Tabs -->\n        *\n        * Ausrichtungen:\n        * <div class=\"tabs horizontal\">...</div>  <!-- Horizontal (Standard) -->\n        * <div class=\"tabs vertical\">...</div>  <!-- Vertikale Tabs -->\n        *\n        * Größen:\n        * <div class=\"tabs sm\">...</div>  <!-- Klein -->\n        * <div class=\"tabs md\">...</div>  <!-- Medium (Standard) -->\n        * <div class=\"tabs lg\">...</div>  <!-- Groß -->\n        */\n\n\n/**\n        * Tabs Component Structure:\n        *\n        * <div class=\"tabs\">\n        *   <div class=\"tabs-list\" role=\"tablist\">\n        *     <button class=\"tab-item\" role=\"tab\" aria-selected=\"true\">Tab 1</button>\n        *     <button class=\"tab-item\" role=\"tab\">Tab 2</button>\n        *   </div>\n        *   <div class=\"tab-panels\">\n        *     <div class=\"tab-panel\" role=\"tabpanel\">Panel 1 content</div>\n        *     <div class=\"tab-panel\" role=\"tabpanel\" hidden>Panel 2 content</div>\n        *   </div>\n        * </div>\n        *\n        * Variants: .tabs--vertical, .tabs--pills, .tabs--underlined\n        * Modifiers: .tabs--justify, .tabs--center\n        */\n        @layer components {\n          .tabs {\n            display: flex;\n            flex-direction: column;\n\n/* Tab-Navigation */\n            .nav {\n              border-bottom: 1px solid var(--color-border, var(--color-neutral-300, #d1d5db));\n              display: flex;\n              gap: var(--tab-gap, var(--space-4, 1rem));\n            }\n\n/* Tab-Buttons */\n            .tab {\n              background: none;\n              border: none;\n              color: var(--color-text-muted, var(--color-neutral-700, #374151));\n              cursor: pointer;\n              font-size: var(--text-base, var(--font-size-base, 1rem));\n              padding: var(--tab-padding, 0.5rem 1rem);\n              transition: color var(--transition-duration-fast, 150ms) var(--transition-timing-ease, ease),\n              border-color var(--transition-duration-fast, 150ms) var(--transition-timing-ease, ease);\n\n              &.active {\n                border-bottom: 2px solid var(--color-primary-500, #3b82f6);\n                color: var(--color-primary-600, #2563eb);\n                font-weight: var(--font-medium, var(--font-weight-medium, 500));\n              }\n\n              &:hover:not(.active) {\n                color: var(--color-primary-500, #3b82f6);\n              }\n\n              &:focus {\n                box-shadow: 0 0 0 2px var(--color-primary-200, #bfdbfe);\n                outline: none;\n              }\n\n              &:disabled {\n                color: var(--color-neutral-400, #9ca3af);\n                cursor: not-allowed;\n\n                &:hover {\n                  color: var(--color-neutral-400, #9ca3af);\n                }\n              }\n            }\n\n/* Inhaltsbereich */\n            .content {\n              padding: var(--tab-content-padding, 1rem 0);\n            }\n\n/* Panel (Inhaltsbereich je Tab) */\n            .panel {\n              display: none;\n\n              &.active {\n                display: block;\n              }\n            }\n\n/* Varianten */\n            &.pills {\n              .nav {\n                border-bottom: none;\n                gap: var(--space-2, 0.5rem);\n              }\n\n              .tab {\n                border-radius: var(--radius-full, 9999px);\n                padding: var(--space-2, 0.5rem) var(--space-4, 1rem);\n\n                &.active {\n                  background-color: var(--color-primary-500, #3b82f6);\n                  border-bottom: none;\n                  color: var(--color-text-inverse, white);\n                }\n\n                &:hover:not(.active) {\n                  background-color: var(--color-neutral-100, #f3f4f6);\n                }\n              }\n            }\n\n            &.underline {\n              .tab {\n                border-bottom: 2px solid transparent;\n                margin-bottom: -1px;\n\n                &.active {\n                  border-bottom-color: var(--color-primary-500, #3b82f6);\n                }\n              }\n            }\n\n            &.boxed {\n              .nav {\n                border-bottom: none;\n                gap: 0;\n              }\n\n              .tab {\n                background-color: var(--color-neutral-50, #f9fafb);\n                border: 1px solid var(--color-border, var(--color-neutral-300, #d1d5db));\n                border-bottom: none;\n                border-radius: var(--radius-md, 0.375rem) var(--radius-md, 0.375rem) 0 0;\n                margin-right: -1px;\n\n                &.active {\n                  background-color: var(--color-background, white);\n                  position: relative;\n                  z-index: 1;\n                }\n              }\n\n              .content {\n                border: 1px solid var(--color-border, var(--color-neutral-300, #d1d5db));\n                border-radius: 0 var(--radius-md, 0.375rem) var(--radius-md, 0.375rem) var(--radius-md, 0.375rem);\n                padding: var(--space-4, 1rem);\n              }\n            }\n\n/* Ausrichtungen */\n            &.horizontal {\n/* Standard (wie oben definiert) */\n            }\n\n            &.vertical {\n              align-items: flex-start;\n              flex-direction: row;\n\n              .nav {\n                border-bottom: none;\n                border-right: 1px solid var(--color-border, var(--color-neutral-300, #d1d5db));\n                flex-direction: column;\n                gap: var(--space-2, 0.5rem);\n                margin-right: var(--space-4, 1rem);\n                padding-right: var(--space-4, 1rem);\n              }\n\n              .tab {\n                border-bottom: none;\n                text-align: left;\n                width: 100%;\n\n                &.active {\n                  border-bottom: none;\n                  border-right: 2px solid var(--color-primary-500, #3b82f6);\n                  margin-right: -1px;\n                }\n              }\n            }\n\n/* Größenvarianten */\n            &.sm {\n              .tab {\n                font-size: var(--text-sm, var(--font-size-sm, 0.875rem));\n                padding: var(--space-1, 0.25rem) var(--space-2, 0.5rem);\n              }\n\n              .content {\n                padding: var(--space-2, 0.5rem) 0;\n              }\n            }\n\n            &.lg {\n              .tab {\n                font-size: var(--text-lg, var(--font-size-lg, 1.125rem));\n                padding: var(--space-3, 0.75rem) var(--space-6, 1.5rem);\n              }\n\n              .content {\n                padding: var(--space-6, 1.5rem) 0;\n              }\n            }\n\n/* Farbvarianten */\n            &.success .tab.active {\n              border-bottom-color: var(--color-success-500, #10b981);\n              color: var(--color-success-600, #059669);\n            }\n\n            &.warning .tab.active {\n              border-bottom-color: var(--color-warning-500, #f59e0b);\n              color: var(--color-warning-600, #d97706);\n            }\n\n            &.error .tab.active {\n              border-bottom-color: var(--color-error-500, #ef4444);\n              color: var(--color-error-600, #dc2626);\n            }\n\n            &.secondary .tab.active {\n              border-bottom-color: var(--color-secondary-500, #6b7280);\n              color: var(--color-secondary-600, #4b5563);\n            }\n          }\n        }\n\n\n\n/* Importierte Datei: ui/components/table.css */\n/*\n        * Table-Komponente\n        *\n        * Gestylte Tabellen mit responsivem Verhalten.\n        */\n\n/**\n        * Table-Komponente\n        *\n        * Tabellen und Datenraster für strukturierte Informationsdarstellung.\n        * Tabellen eignen sich für den Vergleich von Daten und die Darstellung von strukturierten Informationen.\n        *\n        * @layer components.table\n        *\n        * Grundlegende Verwendung:\n        * <table class=\"table\">\n        *   <thead>\n        *     <tr>\n        *       <th>Spalte 1</th>\n        *       <th>Spalte 2</th>\n        *     </tr>\n        *   </thead>\n        *   <tbody>\n        *     <tr>\n        *       <td>Zelle 1</td>\n        *       <td>Zelle 2</td>\n        *     </tr>\n        *   </tbody>\n        * </table>\n        *\n        * Varianten:\n        * <table class=\"table striped\">...</table>  <!-- Abwechselnd gefärbte Zeilen -->\n        * <table class=\"table bordered\">...</table>  <!-- Mit Rahmen -->\n        * <table class=\"table hoverable\">...</table> <!-- Hover-Effekt für Zeilen -->\n        * <table class=\"table compact\">...</table>   <!-- Kompaktes Layout -->\n        * <table class=\"table responsive\">...</table> <!-- Responsives Layout -->\n        *\n        * Zellenausrichtung:\n        * <td class=\"left\">Links ausgerichtet</td>\n        * <td class=\"center\">Zentriert</td>\n        * <td class=\"right\">Rechts ausgerichtet</td>\n        *\n        * Statuszeilen:\n        * <tr class=\"success\">...</tr>\n        * <tr class=\"warning\">...</tr>\n        * <tr class=\"danger\">...</tr>\n        *\n        * Flüssige Größenanpassung mit Schlüsselwörtern:\n        * <table class=\"table fluid\">...</table>\n        * <table class=\"table fluid small\">...</table>\n        * <table class=\"table fluid medium\">...</table>\n        * <table class=\"table fluid large\">...</table>\n        *\n        * Container-adaptive Tabelle:\n        * <div class=\"container-query\">\n        *   <table class=\"table adaptive\">...</table>\n        * </div>\n        */\n\n        @layer components {\n          .table {\n            border-collapse: collapse;\n            font-size: var(--text-sm, var(--font-size-sm, 0.875rem));\n            width: 100%;\n\n/* Basiselemente */\n            thead {\n              background-color: var(--color-neutral-100, #f3f4f6);\n            }\n\n            th,\n            td {\n              border: 1px solid var(--color-border, var(--color-neutral-300, #d1d5db));\n              padding: var(--table-cell-padding, var(--space-3, 0.75rem));\n              text-align: left;\n            }\n\n            th {\n              color: var(--color-text, var(--color-neutral-900, #111827));\n              font-weight: var(--font-semibold, var(--font-weight-semibold, 600));\n              padding: var(--table-header-padding, 1rem 0.75rem);\n            }\n\n            td {\n              color: var(--color-text-muted, var(--color-neutral-700, #374151));\n            }\n\n/* Tabellen-Varianten */\n            &.striped tbody tr:nth-child(odd) {\n              background-color: var(--color-neutral-50, #f9fafb);\n            }\n\n            &.hoverable tbody tr:hover {\n              background-color: var(--color-neutral-100, #f3f4f6);\n              transition: background-color var(--transition-duration-fast, 150ms) var(--transition-timing-ease, ease);\n            }\n\n            &.bordered th,\n            &.bordered td {\n              border: 1px solid var(--color-border, var(--color-neutral-300, #d1d5db));\n            }\n\n            &.compact th,\n            &.compact td {\n              padding: var(--space-2, 0.5rem);\n            }\n\n/* Flüssige Größenanpassung mit interpolate-size: allow-keywords */\n            &.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\n              th, td {\n                font-size: 0.875em;\n                padding: 0.75em;\n              }\n\n              thead {\n                font-weight: var(--font-semibold, 600);\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\n/* Container-adaptive Größenanpassung */\n            &.adaptive {\n              font-size: clamp(var(--text-xs, 0.75rem), 2cqi, var(--text-base, 1rem));\n\n              th, td {\n                padding: clamp(var(--space-1, 0.25rem), 1cqi, var(--space-4, 1rem));\n              }\n\n              @container (min-width: 300px) {\n                th {\n                  font-weight: var(--font-bold, var(--font-weight-bold, 700));\n                }\n              }\n\n              @container (min-width: 500px) {\n                thead {\n                  position: sticky;\n                  top: 0%;\n                  z-index: 1;\n                }\n              }\n\n              @container (min-width: 700px) {\n                &.hoverable tbody tr:hover {\n                  box-shadow: var(--shadow-sm, 0 1px 2px 0 rgb(0 0 0 / 5%));\n                }\n              }\n            }\n\n            &.responsive {\n              @media (max-width: 768px) {\n                display: block;\n                overflow-x: auto;\n                white-space: nowrap;\n              }\n            }\n\n/* Zellenausrichtungen */\n            .left {\n              text-align: left;\n            }\n\n            .center {\n              text-align: center;\n            }\n\n            .right {\n              text-align: right;\n            }\n\n/* Statuszeilen */\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        }\n\n\n\n/* Importierte Datei: ui/components/toast.css */\n/**\n        * Toast-Komponente\n        *\n        * Toast-Benachrichtigungen für temporäre Hinweise.\n        */\n\n/**\n        * Toast-Komponente\n        *\n        * Temporäre Benachrichtigungen, die automatisch verschwinden.\n        * Toasts eignen sich für Systembenachrichtigungen, die den Benutzerfluss nicht unterbrechen sollen.\n        *\n        * @layer components.toast\n        *\n        * Grundlegende Verwendung:\n        * <div class=\"toast\">\n        *   <div class=\"content\">Einfache Benachrichtigung</div>\n        * </div>\n        *\n        * Varianten:\n        * <div class=\"toast success\">Erfolg</div>\n        * <div class=\"toast error\">Fehler</div>\n        * <div class=\"toast warning\">Warnung</div>\n        * <div class=\"toast info\">Information</div>\n        *\n        * Mit Icon:\n        * <div class=\"toast\">\n        *   <div class=\"icon\"><!-- Icon hier --></div>\n        *   <div class=\"content\">Benachrichtigung mit Icon</div>\n        * </div>\n        *\n        * Schließbar:\n        * <div class=\"toast\">\n        *   <div class=\"content\">Schließbare Benachrichtigung</div>\n        *   <button class=\"close\">&times;</button>\n        * </div>\n        */\n\n/**\n        * Toast Component Structure:\n        *\n        * <div class=\"toast toast--success\" role=\"alert\">\n        *   <div class=\"toast-icon\"><!-- Icon --></div>\n        *   <div class=\"toast-content\">\n        *     <div class=\"toast-title\">Success!</div>\n        *     <div class=\"toast-message\">Operation completed</div>\n        *   </div>\n        *   <button class=\"toast-close\" aria-label=\"Close\">&times;</button>\n        * </div>\n        *\n        * Types: .toast--info, .toast--success, .toast--warning, .toast--error\n        * Positions: .toast--top-right, .toast--top-left, .toast--bottom-right, .toast--bottom-left\n        */\n\n/* Animation - außerhalb von @layer definieren */\n\n/* Komponenten-Styles */\n        @layer components {\n          .toast {\n            align-items: center;\n            background-color: var(--color-gray-800);\n            border-radius: var(--radius-md, 0.375rem);\n            box-shadow: var(--shadow-md);\n            color: white;\n            display: flex;\n            gap: var(--space-3);\n            margin-bottom: var(--space-3);\n            max-width: 2%4rem;\n            padding: var(--space-3) var(--space-4);\n\n/* Inhaltselemente */\n            .content {\n              flex: 1;\n            }\n\n            .icon {\n              flex-shrink: 0;\n              font-size: 1.25rem;\n            }\n\n            .close {\n              background: none;\n              border: none;\n              color: currentcolor;\n              cursor: pointer;\n              flex-shrink: 0;\n              font-size: 1.25rem;\n              opacity: 0.7;\n              padding: 0;\n\n              &:hover {\n                opacity: 1;\n              }\n            }\n\n/* Farbvarianten */\n            &.success {\n              background-color: var(--color-success, #10b981);\n            }\n\n            &.error {\n              background-color: var(--color-error, #ef4444);\n            }\n\n            &.warning {\n              background-color: var(--color-warning, #f59e0b);\n              color: black;\n            }\n\n            &.info {\n              background-color: var(--color-info, #3b82f6);\n            }\n\n/* Positionen (als zusätzliche Klasse auf einem Container) */\n            &-container {\n              display: flex;\n              flex-direction: column;\n              gap: var(--space-2);\n              padding: var(--space-4);\n              position: fixed;\n              z-index: var(--z-index-toast);\n\n              &.top-right {\n                right: 0%;\n                top: 0%;\n              }\n\n              &.top-left {\n                left: 0%;\n                top: 0%;\n              }\n\n              &.bottom-right {\n                bottom: 0%;\n                right: 0%;\n              }\n\n              &.bottom-left {\n                bottom: 0%;\n                left: 0%;\n              }\n            }\n          }\n        }\n\n/* Animations-Styles */\n        @layer animations {\n          .toast {\n            animation: slideIn 0.3s ease-out;\n          }\n        }\n\n/* Importierte Datei: ui/components/tooltip.css */\n/**\n        * Tooltip-Komponente\n        *\n        * Informations-Tooltips und Hinweistexte für UI-Elemente.\n        * Tooltips bieten zusätzliche Informationen oder Hilfestellungen zu Elementen.\n        *\n        * @layer components.tooltip\n        *\n        * Grundlegende Verwendung:\n        * <div class=\"tooltip\">\n        *   <button class=\"trigger\">Hover mich</button>\n        *   <div class=\"content\">Tooltip-Inhalt</div>\n        * </div>\n        *\n        * Positionsvarianten:\n        * <div class=\"tooltip top\">Oben</div>\n        * <div class=\"tooltip right\">Rechts</div>\n        * <div class=\"tooltip bottom\">Unten</div>\n        * <div class=\"tooltip left\">Links</div>\n        *\n        * Größenvarianten:\n        * <div class=\"tooltip sm\">Klein</div>\n        * <div class=\"tooltip md\">Mittel (Standard)</div>\n        * <div class=\"tooltip lg\">Groß</div>\n        *\n        * Varianten:\n        * <div class=\"tooltip light\">Heller Hintergrund</div>\n        * <div class=\"tooltip dark\">Dunkler Hintergrund (Standard)</div>\n        * <div class=\"tooltip primary\">Primärfarbe</div>\n        *\n        * Mit Pfeil:\n        * <div class=\"tooltip arrow\">\n        *   <button class=\"trigger\">Mit Pfeil</button>\n        *   <div class=\"content\">Tooltip mit Pfeil</div>\n        * </div>\n        *\n        * Mit HTML-Inhalt:\n        * <div class=\"tooltip\">\n        *   <button class=\"trigger\">Komplexer Inhalt</button>\n        *   <div class=\"content\">\n        *     <h4>Überschrift</h4>\n        *     <p>Mehrere Zeilen Text sind möglich.</p>\n        *   </div>\n        * </div>\n        *\n        * Flüssig skalierende Tooltips (nutzt interpolate-size):\n        * <div class=\"tooltip adaptive\">\n        *   <button class=\"trigger\">Adaptiver Tooltip</button>\n        *   <div class=\"content\">Dieser Tooltip skaliert flüssig mit der Container-Größe</div>\n        * </div>\n        *\n        * Mit Schlüsselwort-Größen:\n        * <div class=\"tooltip fluid small\">Klein</div>\n        * <div class=\"tooltip fluid medium\">Mittel</div>\n        * <div class=\"tooltip fluid large\">Groß</div>\n        */\n\n\n/**\n        * Tooltip Component Structure:\n        *\n        * <div class=\"tooltip\" role=\"tooltip\">\n        *   <div class=\"tooltip-content\">Tooltip text</div>\n        *   <div class=\"tooltip-arrow\"></div>\n        * </div>\n        *\n        * Positions: .tooltip--top, .tooltip--bottom, .tooltip--left, .tooltip--right\n        * Modifiers: .tooltip--sm, .tooltip--lg\n        */\n        @layer components {\n          .tooltip {\n            display: inline-block;\n            position: relative;\n\n            .trigger {\n              cursor: pointer;\n              display: inline-block;\n            }\n\n            .content {\n              background-color: var(--color-neutral-900, #111827);\n              border-radius: var(--radius-sm, 0.25rem);\n              box-shadow: var(--shadow-sm, 0 1px 2px 0 rgb(0 0 0 / 5%));\n              color: var(--color-text-inverse, white);\n              font-size: var(--text-xs, var(--font-size-xs, 0.75rem));\n              max-width: var(--tooltip-max-width, 200px);\n              opacity: 0%;\n              padding: var(--tooltip-padding, 0.5rem 0.75rem);\n              position: absolute;\n              transition: opacity var(--transition-duration-fast, 200ms) var(--transition-timing-ease, ease),\n              visibility var(--transition-duration-fast, 200ms) var(--transition-timing-ease, ease);\n              visibility: hidden;\n              white-space: nowrap;\n              z-index: var(--z-index-tooltip, 1000);\n            }\n\n/* Trigger-Interaktion */\n            &:hover .content,\n            .trigger:focus + .content {\n              opacity: 1;\n              visibility: visible;\n            }\n\n/* Positionsvarianten */\n            &.top .content {\n              bottom: 100%;\n              left: 50%;\n              margin-bottom: var(--space-1, 0.25rem);\n              transform: translateX(-50%) translateY(-8px);\n            }\n\n            &.right .content {\n              left: 100%;\n              margin-left: var(--space-1, 0.25rem);\n              top: 50%;\n              transform: translateY(-50%) translateX(8px);\n            }\n\n            &.bottom .content {\n              left: 50%;\n              margin-top: var(--space-1, 0.25rem);\n              top: 100%;\n              transform: translateX(-50%) translateY(8px);\n            }\n\n            &.left .content {\n              margin-right: var(--space-1, 0.25rem);\n              right: 100%;\n              top: 50%;\n              transform: translateY(-50%) translateX(-8px);\n            }\n\n/* Größenvarianten */\n            &.sm .content {\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            &.lg .content {\n              font-size: var(--text-sm, var(--font-size-sm, 0.875rem));\n              max-width: 25%0px;\n              padding: var(--space-3, 0.75rem) var(--space-4, 1rem);\n              white-space: normal;\n            }\n\n/* Farbvarianten */\n            &.light .content {\n              background-color: var(--color-background, white);\n              border: 1px solid var(--color-border, var(--color-neutral-200, #e5e7eb));\n              color: var(--color-text, var(--color-neutral-900, #111827));\n            }\n\n            &.dark .content {\n              background-color: var(--color-neutral-900, #111827);\n              color: var(--color-text-inverse, white);\n            }\n\n            &.primary .content {\n              background-color: var(--color-primary-500, #3b82f6);\n              color: var(--color-text-inverse, white);\n            }\n\n            &.success .content {\n              background-color: var(--color-success-500, #10b981);\n              color: var(--color-text-inverse, white);\n            }\n\n            &.warning .content {\n              background-color: var(--color-warning-500, #f59e0b);\n              color: var(--color-warning-900, #78350f);\n            }\n\n            &.error .content {\n              background-color: var(--color-error-500, #ef4444);\n              color: var(--color-text-inverse, white);\n            }\n\n/* Flüssig skalierende Tooltips mit interpolate-size: allow-keywords */\n            &.fluid {\n/* Basisgröße verwenden */\n              font-size: medium;\n\n              .content {\n                border-radius: 0.25em;\n                box-shadow: 0 0.1em 0.3em rgb(0 0 0 / 2000%);\n                font-size: 0.8em;\n\n/* em-Einheiten für flüssige Skalierung basierend auf font-size */\n                padding: 0.5em 0.75em;\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\n/* Container-adaptive Tooltips */\n            &.adaptive {\n              container-type: inline-size;\n\n              .content {\n                border-radius: clamp(var(--radius-sm, 0.25rem), 0.5cqi, var(--radius-md, 0.375rem));\n                font-size: clamp(var(--text-xs, 0.75rem), 2cqi, var(--text-base, 1rem));\n                max-width: 90%cqi; /* 90 der Container-Breite */\n                padding: clamp(var(--space-1, 0.25rem), 1cqi, var(--space-4, 1rem));\n                white-space: normal;\n              }\n\n              &.arrow .content::before {\n                height: clamp(6px, 1cqi, 12px);\n                width: clamp(6px, 1cqi, 12px);\n              }\n            }\n\n/* Mit Pfeil */\n            &.arrow .content::before {\n              background-color: inherit;\n              border: inherit;\n              border-width: 1px;\n              content: \"\";\n              height: var(--tooltip-arrow-size, 8px);\n              position: absolute;\n              transform: rotate(45deg);\n              width: var(--tooltip-arrow-size, 8px);\n            }\n\n            &.arrow.top .content::before {\n              bottom: -4px;\n              left: 50%;\n              transform: translateX(-50%) rotate(45deg);\n            }\n\n            &.arrow.right .content::before {\n              left: -4px;\n              top: 50%;\n              transform: translateY(-50%) rotate(45deg);\n            }\n\n            &.arrow.bottom .content::before {\n              left: 50%;\n              top: -4px;\n              transform: translateX(-50%) rotate(45deg);\n            }\n\n            &.arrow.left .content::before {\n              right: -4px;\n              top: 50%;\n              transform: translateY(-50%) rotate(45deg);\n            }\n          }\n        }\n\n\n\n\n/* Importierte Datei: ui/components/wizard.css */\n/*\n        * Wizard-Komponente\n        *\n        * Schrittweiser Navigationsablauf.\n        */\n\n/**\n        * Wizard-Komponente\n        *\n        * Schrittweise Navigationskomponenten für mehrstufige Prozesse.\n        * Wizards führen Benutzer durch komplexe Workflows wie Formulare oder Setups.\n        *\n        * @layer components.wizard\n        *\n        * Grundlegende Verwendung:\n        * <div class=\"wizard\">\n        *   <div class=\"steps\">\n        *     <div class=\"step completed\">\n        *       <span class=\"indicator\">1</span>\n        *       <span class=\"title\">Schritt 1</span>\n        *     </div>\n        *     <div class=\"step active\">\n        *       <span class=\"indicator\">2</span>\n        *       <span class=\"title\">Schritt 2</span>\n        *     </div>\n        *     <div class=\"step\">\n        *       <span class=\"indicator\">3</span>\n        *       <span class=\"title\">Schritt 3</span>\n        *     </div>\n        *   </div>\n        *   <div class=\"content\">\n        *     <!-- Aktuelle Schrittinhalte -->\n        *   </div>\n        *   <div class=\"actions\">\n        *     <button class=\"button\">Zurück</button>\n        *     <button class=\"button primary\">Weiter</button>\n        *   </div>\n        * </div>\n        *\n        * Varianten:\n        * <div class=\"wizard horizontal\">...</div>\n        * <div class=\"wizard vertical\">...</div>\n        *\n        * Stilvarianten:\n        * <div class=\"wizard numbered\">...</div>     <!-- Mit Nummern -->\n        * <div class=\"wizard with-icons\">...</div>        <!-- Mit Icons -->\n        * <div class=\"wizard with-progress\">...</div>     <!-- Mit Fortschrittsbalken -->\n        *\n        * Zustandsanzeige:\n        * <div class=\"step completed\">...</div>  <!-- Abgeschlossen -->\n        * <div class=\"step active\">...</div>     <!-- Aktiv -->\n        * <div class=\"step error\">...</div>      <!-- Mit Fehler -->\n        * <div class=\"step disabled\">...</div>   <!-- Deaktiviert -->\n        */\n\n        @layer components {\n          .wizard {\n            display: flex;\n            flex-direction: column;\n            gap: var(--space-4);\n            width: 100%;\n\n/* Schrittanzeige im Wizard */\n            .steps {\n              display: flex;\n              gap: var(--space-2);\n              justify-content: space-between;\n              margin-bottom: var(--space-6);\n              position: relative;\n\n/* Verbindungslinie zwischen Schritten */\n              &::before {\n                background-color: var(--color-gray-300, #d1d5db);\n                content: '';\n                height: 2px;\n                left: 0%;\n                position: absolute;\n                top: calc(var(--step-size, 2rem) / 2);\n                width: 100%;\n                z-index: 0;\n              }\n            }\n\n/* Einzelner Schritt */\n            .step {\n              --step-size: 2rem;\n\n              align-items: center;\n              display: flex;\n              flex: 1;\n              flex-direction: column;\n              padding-top: calc(var(--step-size, 2rem) + var(--space-2));\n              position: relative;\n              text-align: center;\n              z-index: 1;\n\n/* Schritt-Indikator (Kreis) */\n              .indicator {\n                align-items: center;\n                background-color: var(--color-white, #fff);\n                border: 2px solid var(--color-gray-300, #d1d5db);\n                border-radius: 50px;\n                color: var(--color-gray-600);\n                display: flex;\n                font-size: var(--font-size-sm, 0.875rem);\n                font-weight: var(--font-weight-medium, 500);\n                height: var(--step-size, 2rem);\n                justify-content: center;\n                position: absolute;\n                top: 0%;\n                width: var(--step-size, 2rem);\n                z-index: 2;\n              }\n\n/* Schritt-Titel */\n              .title {\n                color: var(--color-gray-700);\n                font-size: var(--font-size-sm, 0.875rem);\n                font-weight: var(--font-weight-normal);\n                margin-top: var(--space-1);\n              }\n\n/* Optionale Beschreibung */\n              .description {\n                color: var(--color-gray-600);\n                font-size: var(--font-size-xs);\n                margin-top: var(--space-1);\n                max-width: 14%0px;\n              }\n\n/* Schritt-Zustände */\n              &.active {\n                .indicator {\n                  background-color: var(--color-primary, #3b82f6);\n                  border-color: var(--color-primary, #3b82f6);\n                  color: white;\n                }\n\n                .title {\n                  color: var(--color-primary, #3b82f6);\n                  font-weight: var(--font-weight-medium, 500);\n                }\n              }\n\n              &.completed {\n                .indicator {\n                  background-color: var(--color-success, #10b981);\n                  border-color: var(--color-success, #10b981);\n                  color: white;\n\n/* Optional: Häkchen statt Nummer */\n                  &::after {\n                    content: '✓';\n                  }\n                }\n\n/* Verbindungslinie nach dem abgeschlossenen Schritt */\n                &::after {\n                  background-color: var(--color-success, #10b981);\n                  content: '';\n                  height: 2px;\n                  left: 50%;\n                  position: absolute;\n                  top: calc(var(--step-size, 2rem) / 2);\n                  width: 100%;\n                  z-index: 0;\n                }\n\n                &:last-child::after {\n                  display: none;\n                }\n              }\n\n              &.error {\n                .indicator {\n                  background-color: var(--color-error, #ef4444);\n                  border-color: var(--color-error, #ef4444);\n                  color: white;\n                }\n\n                .title {\n                  color: var(--color-error, #ef4444);\n                }\n              }\n\n              &.disabled {\n                cursor: not-allowed;\n                opacity: 5000%;\n              }\n            }\n\n/* Inhaltsbereich */\n            .content {\n              background-color: var(--color-white, #fff);\n              border: 1px solid var(--color-gray-200);\n              border-radius: var(--radius-md, 0.375rem);\n              padding: var(--space-6);\n            }\n\n/* Aktionsbuttons */\n            .actions {\n              display: flex;\n              justify-content: space-between;\n              margin-top: var(--space-4);\n\n/* Wenn nur ein Button (z.B. beim ersten Schritt) */\n              &.end {\n                justify-content: flex-end;\n              }\n            }\n\n/* Ausrichtungsvarianten */\n            &.vertical {\n              align-items: flex-start;\n              flex-direction: row;\n\n              .steps {\n                flex-direction: column;\n                gap: var(--space-6);\n                margin-bottom: 0%;\n                margin-right: var(--space-8);\n                width: 24%0px;\n\n                &::before {\n                  height: 100%;\n                  left: calc(var(--step-size, 2rem) / 2);\n                  top: 0%;\n                  width: 2px;\n                }\n              }\n\n              .step {\n                align-items: flex-start;\n                flex-direction: row;\n                padding-left: calc(var(--step-size, 2rem) + var(--space-4));\n                padding-top: 0%;\n                text-align: left;\n\n                .indicator {\n                  left: 0%;\n                  top: 0%;\n                }\n\n                &.completed::after {\n                  height: 100%;\n                  left: calc(var(--step-size, 2rem) / 2);\n                  top: 50%;\n                  width: 2px;\n                }\n              }\n\n              .content {\n                flex: 1;\n              }\n            }\n\n/* Mit Fortschrittsbalken */\n            &.with-progress {\n              .progress-bar {\n                background-color: var(--color-gray-200);\n                border-radius: var(--radius-full, 9999px);\n                height: 0%.5rem;\n                margin-bottom: var(--space-6);\n                overflow: hidden;\n\n                .fill {\n                  background-color: var(--color-primary, #3b82f6);\n                  height: 100%;\n                  transition: width 0.3s ease-in-out;\n                }\n              }\n            }\n          }\n        }\n\n\n/* Datei: ui/regions/sidebar.css */\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\n/* Datei: ui/regions/main-content.css */\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\n/* Datei: ui/regions/header.css */\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\n/* Datei: ui/regions/footer.css */\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\n/* Datei: ui/patterns/widget.css */\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: loading 1.5s 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\n/* Datei: ui/patterns/tags.css */\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\n/* Datei: ui/patterns/skeleton.css */\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: pulse 1.5s ease-in-out infinite;\n\n/* Animationstypen */\n            &.pulse {\n              animation: pulse 1.5s ease-in-out infinite;\n            }\n\n            &.wave::after {\n              animation: wave 2s 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\n/* Datei: ui/patterns/code.css */\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\n/* Datei: ui/patterns/blog.css */\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\n/* Datei: ui/menu/topbar.css */\n/**\n            * Topbar/Utility Bar Components\n            *\n            * Flexible topbar system with multiple layout types and utility classes.\n            * Uses CSS Nesting and Container Queries for modern responsive design.\n            *\n            * @layer: components\n            *\n            * Topbar Types:\n            * - .topbar-simple: Basic single-row topbar\n            * - .topbar-split: Left/right split layout\n            * - .topbar-center: Centered content\n            * - .topbar-announcement: Announcement bar style\n            * - .topbar-utility: Utility bar with actions\n            *\n            * Utility Classes:\n            * - .sticky: Sticky positioning\n            * - .dismissible: Can be dismissed\n            * - .compact: Reduced height\n            * - .theme-dark, .theme-primary: Color themes\n            *\n            * Container Queries:\n            * - Responsive content stacking\n            * - Mobile optimization\n            * - Automatic layout adjustments\n            */\n\n/* Note: header-tokens.css was removed - tokens are now defined inline */\n\n            @layer components {\n/* Topbar tokens */\n              :root {\n/* Topbar spacing */\n                --topbar-padding: var(--space-2) var(--space-4);\n                --topbar-padding-compact: var(--space-1) var(--space-3);\n                --topbar-gap: var(--space-4);\n                --topbar-gap-compact: var(--space-2);\n\n/* Topbar colors */\n                --topbar-bg: var(--color-neutral-100, #f3f4f6);\n                --topbar-text: var(--color-neutral-700, #374151);\n                --topbar-link: var(--color-primary-600, #2563eb);\n                --topbar-link-hover: var(--color-primary-700, #1d4ed8);\n                --topbar-border: var(--color-neutral-200, #e5e7eb);\n\n/* Topbar typography */\n                --topbar-font-size: var(--text-sm, 0.875rem);\n                --topbar-font-weight: var(--font-medium, 500);\n                --topbar-line-height: 1px.4;\n\n/* Topbar layout */\n                --topbar-height: auto;\n                --topbar-min-height: 4%0px;\n                --topbar-z-index: 1001;\n\n/* Topbar responsive breakpoints */\n                --topbar-mobile-breakpoint: 768px;\n              }\n\n/* Base topbar container */\n              .topbar {\n                background-color: var(--topbar-bg);\n                border-bottom: 1px solid var(--topbar-border);\n                color: var(--topbar-text);\n                container-type: inline-size;\n                font-size: var(--topbar-font-size);\n                font-weight: var(--topbar-font-weight);\n                line-height: var(--topbar-line-height, 1.5);\n                min-height: var(--topbar-min-height, 3rem);\n                padding: var(--topbar-padding);\n                position: relative;\n                width: 100%;\n                z-index: var(--topbar-z-index);\n\n/* Topbar content wrapper */\n                & .topbar-content {\n                  align-items: center;\n                  display: flex;\n                  gap: var(--topbar-gap);\n                  margin: 0 auto;\n                  max-width: var(--container-7xl);\n                  width: 100%;\n                }\n\n/* Topbar text */\n                & .topbar-text {\n                  flex: 1;\n\n                  & p {\n                    margin: 0;\n                  }\n                }\n\n/* Topbar links */\n                & a {\n                  color: var(--topbar-link);\n                  text-decoration: none;\n                  transition: color 01.2s ease;\n\n                  &:hover,\n                  &:focus {\n                    color: var(--topbar-link-hover);\n                    text-decoration: underline;\n                  }\n\n                  &:focus {\n                    outline: 2px solid var(--topbar-link);\n                    outline-offset: 2px;\n                  }\n                }\n\n/* Topbar actions */\n                & .topbar-actions {\n                  align-items: center;\n                  display: flex;\n                  flex-shrink: 0;\n                  gap: var(--space-3);\n\n                  & button, & a {\n                    align-items: center;\n                    background: none;\n                    border: 1px solid var(--topbar-border);\n                    border-radius: var(--radius-md, 0.375rem);\n                    cursor: pointer;\n                    display: flex;\n                    font-size: var(--topbar-font-size);\n                    gap: var(--space-1);\n                    padding: var(--space-1) var(--space-2);\n                    text-decoration: none;\n                    transition: all 01.2s ease;\n\n                    &:hover,\n                    &:focus {\n                      background-color: var(--color-neutral-200, #e5e7eb);\n                      border-color: var(--color-neutral-300, #d1d5db);\n                    }\n\n                    &:focus {\n                      outline: 2px solid var(--topbar-link);\n                      outline-offset: 2px;\n                    }\n                  }\n                }\n\n/* Language selector */\n                & .language-selector {\n                  position: relative;\n\n                  & .dropdown {\n                    background-color: var(--color-white, #fff);\n                    border: 1px solid var(--topbar-border);\n                    border-radius: var(--radius-md, 0.375rem);\n                    box-shadow: var(--shadow-lg);\n                    min-width: 12%0px;\n                    opacity: 0%;\n                    padding: var(--space-2);\n                    pointer-events: none;\n                    position: absolute;\n                    right: 0%;\n                    top: 100%;\n                    transform: translateY(-8px);\n                    transition: all 01.2s ease;\n                    z-index: 1000;\n\n                    & ul {\n                      list-style: none;\n                      margin: 0;\n                      padding: 0;\n\n                      & li {\n                        & a {\n                          border-radius: var(--radius-sm, 0.125rem);\n                          display: block;\n                          padding: var(--space-1) var(--space-2);\n                          width: 100%;\n\n                          &:hover {\n                            background-color: var(--color-neutral-100, #f3f4f6);\n                          }\n                        }\n                      }\n                    }\n                  }\n\n                  &:hover .dropdown,\n                  &:focus-within .dropdown {\n                    opacity: 1;\n                    pointer-events: auto;\n                    transform: translateY(0%);\n                  }\n                }\n\n/* Status indicators */\n                & .status-indicator {\n                  align-items: center;\n                  display: flex;\n                  gap: var(--space-2);\n\n                  & .status-dot {\n                    border-radius: 50px;\n                    height: 8px;\n                    width: 8px;\n\n                    &.online {\n                      background-color: var(--color-success-500);\n                    }\n\n                    &.offline {\n                      background-color: var(--color-error-500);\n                    }\n\n                    &.away {\n                      background-color: var(--color-warning-500);\n                    }\n                  }\n                }\n\n/* User profile */\n                & .user-profile {\n                  align-items: center;\n                  display: flex;\n                  gap: var(--space-2);\n\n                  & .avatar {\n                    border-radius: 50px;\n                    height: 4px;\n                    width: 4px;\n                  }\n\n                  & .user-name {\n                    font-weight: var(--font-medium, 500);\n\n                    @container (width <= 768px) {\n                      display: none;\n                    }\n                  }\n                }\n\n/* Dismiss button */\n                & .dismiss-btn {\n                  background: none;\n                  border: none;\n                  color: var(--topbar-text);\n                  cursor: pointer;\n                  font-size: var(--text-lg);\n                  padding: var(--space-1);\n\n                  &:hover,\n                  &:focus {\n                    color: var(--topbar-link-hover);\n                  }\n\n                  &:focus {\n                    outline: 2px solid var(--topbar-link);\n                    outline-offset: 2px;\n                  }\n                }\n\n/* Utility modifiers */\n                &.sticky {\n                  position: sticky;\n                  top: 0%;\n                }\n\n                &.compact {\n                  min-height: 3px;\n                  padding: var(--topbar-padding-compact);\n\n                  & .topbar-content {\n                    gap: var(--topbar-gap-compact);\n                  }\n                }\n\n                &.dismissible {\n                  & .topbar-content {\n                    padding-right: var(--space-8);\n                  }\n\n                  & .dismiss-btn {\n                    position: absolute;\n                    right: var(--space-2);\n                    top: 50%;\n                    transform: translateY(-50%);\n                  }\n                }\n\n/* Container query responsive behavior */\n                @container (width <= 768px) {\n                  font-size: var(--text-xs, 0.75rem);\n                  padding: var(--space-1) var(--space-3);\n\n                  & .topbar-content {\n                    gap: var(--space-2);\n                  }\n\n                  & .topbar-actions {\n                    gap: var(--space-2);\n\n                    & button, & a {\n                      padding: var(--space-1);\n                    }\n                  }\n                }\n\n                @container (width <= 480px) {\n                  & .topbar-text {\n                    font-size: var(--text-xs, 0.75rem);\n                  }\n\n                  & .topbar-actions {\n                    & button span,\n                    & a span {\n                      display: none;\n                    }\n                  }\n                }\n              }\n\n/* Topbar Type: Simple */\n              .topbar-simple {\n                --topbar-bg: var(--color-neutral-100, #f3f4f6);\n                --topbar-color: var(--color-neutral-600);\n                --topbar-link-color: var(--color-neutral-700, #374151);\n                --topbar-link-color-hover: var(--color-primary-600, #2563eb);\n                --topbar-border-color: var(--color-neutral-200, #e5e7eb);\n                --topbar-font-size: var(--text-xs, 0.75rem);\n                --topbar-line-height: 1px.4;\n                --topbar-padding: var(--space-2) var(--space-4);\n                --topbar-gap: var(--space-4);\n                --topbar-item-gap: var(--space-3);\n                --topbar-height: auto;\n                --topbar-z-index: 1000;\n\n                background-color: var(--topbar-bg);\n                border-bottom: 1px solid var(--topbar-border-color);\n                color: var(--topbar-color);\n                font-size: var(--topbar-font-size);\n                line-height: var(--topbar-line-height, 1.5);\n                padding: var(--topbar-padding);\n                position: relative;\n                width: 100%;\n                z-index: var(--topbar-z-index);\n              }\n\n              .topbar-content {\n                align-items: center;\n                display: flex;\n                justify-content: space-between;\n                margin: 0 auto;\n                max-width: var(--header-max-width, 1280px);\n              }\n\n              .topbar nav {\n                align-items: center;\n                display: flex;\n              }\n\n              .topbar ul {\n                align-items: center;\n                display: flex;\n                gap: var(--topbar-item-gap);\n                list-style: none;\n                margin: 0;\n                padding: 0;\n              }\n\n              .topbar li {\n                align-items: center;\n                display: flex;\n              }\n\n              .topbar a {\n                border-radius: var(--radius-sm, 0.125rem);\n                color: var(--topbar-link-color);\n                padding: var(--space-1) var(--space-2);\n                text-decoration: none;\n                transition: var(--header-transition);\n              }\n\n              .topbar a:hover {\n                background-color: var(--color-neutral-200, #e5e7eb);\n                color: var(--topbar-link-color-hover);\n              }\n\n              .topbar button {\n                background: none;\n                border: none;\n                border-radius: var(--radius-sm, 0.125rem);\n                color: var(--topbar-link-color);\n                cursor: pointer;\n                font-size: inherit;\n                padding: var(--space-1) var(--space-2);\n                transition: var(--header-transition);\n              }\n\n              .topbar button:hover {\n                background-color: var(--color-neutral-200, #e5e7eb);\n                color: var(--topbar-link-color-hover);\n              }\n\n/* Layout: Simple (single row) */\n              .topbar-simple .topbar-content {\n                justify-content: center;\n              }\n\n/* Layout: Split (left/right) */\n              .topbar-split .topbar-content {\n                justify-content: space-between;\n              }\n\n              .topbar-left,\n              .topbar-right {\n                align-items: center;\n                display: flex;\n                gap: var(--topbar-gap);\n              }\n\n/* Layout: Center */\n              .topbar-center .topbar-content {\n                justify-content: center;\n              }\n\n/* Layout: Announcement bar */\n              .topbar-announcement {\n                --topbar-padding: var(--space-3) var(--space-4);\n\n                text-align: center;\n              }\n\n              .topbar-announcement .topbar-content {\n                justify-content: center;\n                position: relative;\n              }\n\n              .topbar-announcement-text {\n                font-weight: var(--font-medium, 500);\n              }\n\n              .topbar-announcement-action {\n                margin-left: var(--space-3);\n              }\n\n/* Size variants */\n              .topbar--small {\n                --topbar-font-size: var(--text-xs, 0.75rem);\n                --topbar-padding: var(--space-1) var(--space-4);\n                --topbar-gap: var(--space-3);\n                --topbar-item-gap: var(--space-2);\n              }\n\n              .topbar--large {\n                --topbar-font-size: var(--text-sm, 0.875rem);\n                --topbar-padding: var(--space-3) var(--space-4);\n                --topbar-gap: var(--space-6);\n                --topbar-item-gap: var(--space-4);\n              }\n\n/* Color theme utilities */\n              .topbar--dark {\n                --topbar-bg: var(--color-neutral-900, #111827);\n                --topbar-color: var(--color-neutral-300, #d1d5db);\n                --topbar-link-color: var(--color-neutral-200, #e5e7eb);\n                --topbar-link-color-hover: var(--color-primary-400);\n                --topbar-border-color: var(--color-neutral-700, #374151);\n              }\n\n              .topbar--dark a:hover,\n              .topbar--dark button:hover {\n                background-color: var(--color-neutral-800, #1f2937);\n              }\n\n              .topbar--light {\n                --topbar-bg: var(--color-neutral-50);\n                --topbar-color: var(--color-neutral-700, #374151);\n                --topbar-border-color: var(--color-neutral-100, #f3f4f6);\n              }\n\n              .topbar--primary {\n                --topbar-bg: var(--color-primary-600, #2563eb);\n                --topbar-color: var(--color-primary-100, #dbeafe);\n                --topbar-link-color: var(--color-primary-50);\n                --topbar-link-color-hover: white;\n                --topbar-border-color: var(--color-primary-700, #1d4ed8);\n              }\n\n              .topbar--primary a:hover,\n              .topbar--primary button:hover {\n                background-color: var(--color-primary-700, #1d4ed8);\n              }\n\n/* Spacing utilities */\n              .topbar--compact {\n                --topbar-padding: var(--space-1) var(--space-4);\n                --topbar-gap: var(--space-2);\n                --topbar-item-gap: var(--space-2);\n              }\n\n/* Position utilities */\n              .topbar--sticky {\n                position: sticky;\n                top: 0%;\n                z-index: calc(var(--topbar-z-index) + 10);\n              }\n\n              .topbar--fixed {\n                left: 0%;\n                position: fixed;\n                right: 0%;\n                top: 0%;\n                z-index: calc(var(--topbar-z-index) + 10);\n              }\n\n/* Dismissible functionality */\n              .topbar--dismissible {\n                position: relative;\n              }\n\n              .topbar-dismiss {\n                background: none;\n                border: none;\n                color: var(--topbar-link-color);\n                cursor: pointer;\n                font-size: 1.2em;\n                line-height: 1px;\n                padding: var(--space-1);\n                position: absolute;\n                right: var(--space-4);\n                top: 50%;\n                transform: translateY(-50%);\n                transition: var(--header-transition);\n              }\n\n              .topbar-dismiss:hover {\n                color: var(--topbar-link-color-hover);\n              }\n\n              .topbar--dismissed {\n                display: none;\n              }\n\n/* Language selector */\n              .topbar-language {\n                position: relative;\n              }\n\n              .topbar-language-toggle {\n                align-items: center;\n                display: flex;\n                gap: var(--space-1);\n              }\n\n              .topbar-language-toggle::after {\n                content: \"▼\";\n                font-size: 0.75em;\n                transition: var(--header-transition);\n              }\n\n              .topbar-language.is-open .topbar-language-toggle::after {\n                transform: rotate(180deg);\n              }\n\n              .topbar-language-menu {\n                background-color: var(--color-neutral-50);\n                border: 1px solid var(--topbar-border-color);\n                border-radius: var(--radius-md, 0.375rem);\n                box-shadow: var(--shadow-lg);\n                display: none;\n                min-width: 12%0px;\n                padding: var(--space-2);\n                position: absolute;\n                right: 0%;\n                top: 100%;\n                z-index: calc(var(--topbar-z-index) + 1);\n              }\n\n              .topbar-language.is-open .topbar-language-menu {\n                display: block;\n              }\n\n              .topbar-language-menu ul {\n                flex-direction: column;\n                gap: var(--space-1);\n              }\n\n              .topbar-language-menu a {\n                display: block;\n                padding: var(--space-2);\n                width: 100%;\n              }\n\n/* Status indicators */\n              .topbar-status {\n                align-items: center;\n                display: flex;\n                gap: var(--space-2);\n              }\n\n              .topbar-status-indicator {\n                border-radius: 50px;\n                display: inline-block;\n                height: 8px;\n                width: 8px;\n              }\n\n              .topbar-status-indicator--online {\n                background-color: var(--color-success-500);\n              }\n\n              .topbar-status-indicator--offline {\n                background-color: var(--color-error-500);\n              }\n\n              .topbar-status-indicator--warning {\n                background-color: var(--color-warning-500);\n              }\n\n/* User menu */\n              .topbar-user {\n                align-items: center;\n                display: flex;\n                gap: var(--space-2);\n              }\n\n              .topbar-user-avatar {\n                border-radius: 50px;\n                height: 4px;\n                width: 4px;\n              }\n\n              .topbar-user-name {\n                font-weight: var(--font-medium, 500);\n              }\n\n/* Responsive behavior */\n              @container (width <= 768px) {\n                .topbar-content {\n                  flex-direction: column;\n                  gap: var(--space-2);\n                }\n\n                .topbar-split .topbar-content {\n                  flex-direction: row;\n                  justify-content: space-between;\n                }\n\n                .topbar ul {\n                  flex-wrap: wrap;\n                  justify-content: center;\n                }\n\n                .topbar-announcement .topbar-dismiss {\n                  margin-left: var(--space-2);\n                  position: static;\n                  transform: none;\n                }\n\n/* Hide less important items on mobile */\n                .topbar-mobile-hidden {\n                  display: none;\n                }\n              }\n\n/* Fallback media queries */\n              @media (max-width: 768px) {\n                .topbar-content {\n                  flex-direction: column;\n                  gap: var(--space-2);\n                }\n\n                .topbar-split .topbar-content {\n                  flex-direction: row;\n                  justify-content: space-between;\n                }\n\n                .topbar ul {\n                  flex-wrap: wrap;\n                  justify-content: center;\n                }\n\n                .topbar-announcement .topbar-dismiss {\n                  margin-left: var(--space-2);\n                  position: static;\n                  transform: none;\n                }\n\n                .topbar-mobile-hidden {\n                  display: none;\n                }\n              }\n\n/* Print styles */\n              @media print {\n                .topbar {\n                  display: none;\n                }\n              }\n\n/* Reduced motion */\n              @media (prefers-reduced-motion: reduce) {\n                .topbar a,\n                .topbar button,\n                .topbar-language-toggle::after,\n                .topbar-dismiss {\n                  transition: none;\n                }\n              }\n            }\n\n/* Datei: ui/menu/sidebar.css */\n/**\n            * Sidebar Navigation Components\n            *\n            * Flexible sidebar system with multiple layout types and utility classes.\n            * Uses CSS Nesting and Container Queries for modern responsive design.\n            *\n            * @layer: components\n            *\n            * Sidebar Types:\n            * - .sidebar: Base sidebar navigation\n            * - .sidebar-collapsible: Collapsible sidebar\n            * - .sidebar-overlay: Overlay sidebar for mobile\n            * - .sidebar-push: Push content sidebar\n            *\n            * Utility Classes:\n            * - .collapsed: Collapsed state\n            * - .sticky: Sticky positioning\n            * - .compact: Reduced spacing\n            * - .theme-dark: Dark theme\n            *\n            * Container Queries:\n            * - Responsive width adjustments\n            * - Mobile overlay behavior\n            * - Automatic layout changes\n            */\n\n/* Note: header-tokens.css was removed - tokens are now defined inline */\n\n            @layer components {\n/* Sidebar tokens */\n              :root {\n/* Sidebar dimensions */\n                --sidebar-width: 28%0px;\n                --sidebar-width-collapsed: 64px;\n                --sidebar-width-narrow: 240;\n                --sidebar-width-wide: 320;\n\n/* Sidebar spacing */\n                --sidebar-padding: var(--space-4);\n                --sidebar-padding-compact: var(--space-3);\n                --sidebar-gap: var(--space-2);\n                --sidebar-item-padding: var(--space-2) var(--space-3);\n\n/* Sidebar colors */\n                --sidebar-bg: var(--color-white, #fff);\n                --sidebar-text: var(--color-neutral-700, #374151);\n                --sidebar-link: var(--color-neutral-600);\n                --sidebar-link-hover: var(--color-primary-600, #2563eb);\n                --sidebar-link-active: var(--color-primary-700, #1d4ed8);\n                --sidebar-border: var(--color-neutral-200, #e5e7eb);\n                --sidebar-shadow: 0 1px 3px 0 rgb(0 0 0 / 1000%);\n\n/* Sidebar typography */\n                --sidebar-font-size: var(--text-sm, 0.875rem);\n                --sidebar-font-weight: var(--font-medium, 500);\n                --sidebar-line-height: 1.5;\n                --sidebar-heading-size: var(--text-xs, 0.75rem);\n                --sidebar-heading-weight: var(--font-semibold, 600);\n\n/* Sidebar layout */\n                --sidebar-z-index: 900;\n                --sidebar-transition: all 0.3s ease;\n\n/* Sidebar responsive breakpoints */\n                --sidebar-mobile-breakpoint: 768px;\n              }\n\n/* Base sidebar container */\n              .sidebar {\n                background-color: var(--sidebar-bg);\n                border-right: 1px solid var(--sidebar-border);\n                box-shadow: var(--sidebar-shadow, 0 1px 3px rgb(0 0 0 / 0.1));\n                color: var(--sidebar-text);\n                container-type: inline-size;\n                display: flex;\n                flex-direction: column;\n                font-size: var(--sidebar-font-size);\n                font-weight: var(--sidebar-font-weight);\n                height: 100%;\n                line-height: var(--sidebar-line-height, 1.5);\n                overflow-y: auto;\n                padding: var(--sidebar-padding);\n                position: relative;\n                transition: var(--sidebar-transition, all 0.3s ease);\n                width: var(--sidebar-width, 16rem);\n                z-index: var(--sidebar-z-index, 1000);\n\n/* Sidebar header */\n                & .sidebar-header {\n                  border-bottom: 1px solid var(--sidebar-border);\n                  margin-bottom: var(--space-4);\n                  padding-bottom: var(--space-3);\n\n                  & h2, & h3 {\n                    color: var(--sidebar-text);\n                    font-size: var(--text-base);\n                    font-weight: var(--font-semibold, 600);\n                    margin: 0;\n                  }\n                }\n\n/* Sidebar navigation */\n                & nav {\n                  flex: 1;\n\n                  & ul {\n                    display: flex;\n                    flex-direction: column;\n                    gap: var(--sidebar-gap);\n                    list-style: none;\n                    margin: 0;\n                    padding: 0;\n\n                    & li {\n                      position: relative;\n\n                      & a {\n                        align-items: center;\n                        border-radius: var(--radius-md, 0.375rem);\n                        color: var(--sidebar-link);\n                        display: flex;\n                        gap: var(--space-2);\n                        padding: var(--sidebar-item-padding);\n                        text-decoration: none;\n                        transition: all 01.2s ease;\n                        width: 100%;\n\n                        &:hover,\n                        &:focus {\n                          background-color: var(--color-neutral-100, #f3f4f6);\n                          color: var(--sidebar-link-hover);\n                        }\n\n                        &:focus {\n                          outline: 2px solid var(--sidebar-link-hover);\n                          outline-offset: 2px;\n                        }\n\n                        &.active,\n                        &[aria-current=\"page\"] {\n                          background-color: var(--color-primary-100, #dbeafe);\n                          color: var(--sidebar-link-active);\n                          font-weight: var(--font-semibold, 600);\n                        }\n                      }\n\n/* Icons */\n                      & .icon {\n                        flex-shrink: 0;\n                        height: 0%.25em;\n                        width: 0%.25em;\n                      }\n\n/* Badges/counters */\n                      & .badge {\n                        background-color: var(--color-primary-500);\n                        border-radius: var(--radius-full, 9999px);\n                        color: white;\n                        font-size: var(--text-xs, 0.75rem);\n                        font-weight: var(--font-medium, 500);\n                        margin-left: auto;\n                        min-width: 0%.5em;\n                        padding: 0.125em 0.5em;\n                        text-align: center;\n                      }\n                    }\n                  }\n                }\n\n/* Submenu/nested navigation */\n                & .submenu {\n                  margin-left: var(--space-6);\n                  margin-top: var(--sidebar-gap);\n\n                  & ul {\n                    gap: var(--space-1);\n\n                    & li a {\n                      font-size: var(--text-xs, 0.75rem);\n                      padding: var(--space-1) var(--space-2);\n\n                      &::before {\n                        color: var(--color-neutral-400, #9ca3af);\n                        content: \"•\";\n                        margin-right: var(--space-2);\n                      }\n                    }\n                  }\n                }\n\n/* Section headings */\n                & .sidebar-section {\n                  margin-bottom: var(--space-4);\n                  margin-top: var(--space-6);\n\n                  &:first-child {\n                    margin-top: 0%;\n                  }\n\n                  & h4 {\n                    color: var(--color-neutral-500, #6b7280);\n                    font-size: var(--sidebar-heading-size);\n                    font-weight: var(--sidebar-heading-weight);\n                    letter-spacing: 0.05em;\n                    margin: 0 0 var(--space-2) 0;\n                    text-transform: uppercase;\n                  }\n                }\n\n/* Sidebar footer */\n                & .sidebar-footer {\n                  border-top: 1px solid var(--sidebar-border);\n                  margin-top: auto;\n                  padding-top: var(--space-3);\n\n                  & .user-profile {\n                    align-items: center;\n                    display: flex;\n                    gap: var(--space-2);\n                    padding: var(--space-2);\n\n                    & .avatar {\n                      border-radius: 50px;\n                      height: 3px;\n                      width: 3px;\n                    }\n\n                    & .user-info {\n                      flex: 1;\n                      min-width: 0%;\n\n                      & .user-name {\n                        font-weight: var(--font-medium, 500);\n                        margin: 0;\n                      }\n\n                      & .user-role {\n                        color: var(--color-neutral-500, #6b7280);\n                        font-size: var(--text-xs, 0.75rem);\n                        margin: 0;\n                      }\n                    }\n                  }\n                }\n\n/* Utility modifiers */\n                &.compact {\n                  padding: var(--sidebar-padding-compact);\n\n                  & nav ul li a {\n                    padding: var(--space-1) var(--space-2);\n                  }\n                }\n\n                &.sticky {\n                  height: calc(100 - var(--space-4));\n                  position: sticky;\n                  top: var(--space-2);\n                }\n\n                &.narrow {\n                  width: var(--sidebar-width-narrow, 12rem);\n                }\n\n                &.wide {\n                  width: var(--sidebar-width-wide, 20rem);\n                }\n\n/* Container query responsive behavior */\n                @container (width <= 768px) {\n                  position: fixed;\n                  transform: translateX(-100%);\n\n                  &.open {\n                    transform: translateX(0%);\n                  }\n                }\n              }\n\n/* Sidebar Type: Collapsible */\n              .sidebar-collapsible {\n                &.collapsed {\n                  width: var(--sidebar-width-collapsed, 4rem);\n\n                  & .sidebar-header,\n                  & .sidebar-footer .user-info,\n                  & nav ul li a span,\n                  & .sidebar-section h4 {\n                    display: none;\n                  }\n\n                  & nav ul li a {\n                    justify-content: center;\n                    padding: var(--space-2);\n                  }\n\n                  & .submenu {\n                    display: none;\n                  }\n\n/* Tooltip on hover when collapsed */\n                  & nav ul li {\n                    position: relative;\n\n                    &:hover::after {\n                      background-color: var(--color-neutral-900, #111827);\n                      border-radius: var(--radius-md, 0.375rem);\n                      color: white;\n                      content: attr(data-tooltip);\n                      font-size: var(--text-xs, 0.75rem);\n                      left: 100%;\n                      margin-left: var(--space-2);\n                      padding: var(--space-1) var(--space-2);\n                      position: absolute;\n                      top: 50%;\n                      transform: translateY(-50%);\n                      white-space: nowrap;\n                      z-index: 1000;\n                    }\n                  }\n                }\n\n/* Toggle button */\n                & .sidebar-toggle {\n                  background: none;\n                  border: none;\n                  color: var(--sidebar-text);\n                  cursor: pointer;\n                  padding: var(--space-1);\n                  position: absolute;\n                  right: var(--space-2);\n                  top: var(--space-2);\n\n                  &:hover,\n                  &:focus {\n                    color: var(--sidebar-link-hover);\n                  }\n\n                  &:focus {\n                    outline: 2px solid var(--sidebar-link-hover);\n                    outline-offset: 2px;\n                  }\n                }\n              }\n\n/* Sidebar Type: Overlay */\n              .sidebar-overlay {\n                position: fixed;\n                transform: translateX(-100%);\n\n                &.open {\n                  transform: translateX(0%);\n                }\n\n/* Backdrop */\n                &::before {\n                  background-color: rgb(0 0 0 / 5000%);\n                  content: \"\";\n                  height: 100%;\n                  left: 100%;\n                  opacity: 0%;\n                  position: fixed;\n                  top: 0%;\n                  transition: opacity 0.3s ease;\n                  width: 100vw;\n                  z-index: -1;\n                }\n\n                &.open::before {\n                  opacity: 1;\n                }\n              }\n\n/* Sidebar Type: Push */\n              .sidebar-push {\n                & + .main-content {\n                  margin-left: var(--sidebar-width, 16rem);\n                  transition: margin-left 0.3s ease;\n                }\n\n                &.collapsed + .main-content {\n                  margin-left: var(--sidebar-width-collapsed, 4rem);\n                }\n\n                @container (width <= 768px) {\n                  & + .main-content {\n                    margin-left: 0%;\n                  }\n                }\n              }\n\n/* Theme variants */\n              .sidebar {\n                &.theme-dark {\n                  --sidebar-bg: var(--color-neutral-900, #111827);\n                  --sidebar-text: var(--color-neutral-100, #f3f4f6);\n                  --sidebar-link: var(--color-neutral-300, #d1d5db);\n                  --sidebar-link-hover: var(--color-primary-400);\n                  --sidebar-link-active: var(--color-primary-300);\n                  --sidebar-border: var(--color-neutral-700, #374151);\n                  --sidebar-shadow: 0 1px 3px 0 rgb(0 0 0 / 3000%);\n\n                  & nav ul li a {\n                    &:hover,\n                    &:focus {\n                      background-color: var(--color-neutral-800, #1f2937);\n                    }\n\n                    &.active,\n                    &[aria-current=\"page\"] {\n                      background-color: var(--color-primary-900);\n                    }\n                  }\n\n                  & .sidebar-section h4 {\n                    color: var(--color-neutral-400, #9ca3af);\n                  }\n\n                  & .sidebar-footer .user-role {\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                  .sidebar {\n                    position: fixed;\n                    transform: translateX(-100%);\n\n                    &.open {\n                      transform: translateX(0%);\n                    }\n                  }\n\n                  .sidebar-push + .main-content {\n                    margin-left: 0%;\n                  }\n                }\n              }\n\n/* Print styles */\n              @media print {\n                .sidebar {\n                  display: none;\n                }\n              }\n\n/* High contrast mode */\n              @media (prefers-contrast: more) {\n                .sidebar {\n                  border: 2px solid;\n\n                  & nav ul li a {\n                    border: 1px solid transparent;\n\n                    &:hover,\n                    &:focus,\n                    &.active {\n                      border-color: currentColor;\n                    }\n                  }\n                }\n              }\n\n/* Reduced motion */\n              @media (prefers-reduced-motion: reduce) {\n                .sidebar {\n                  transition: none;\n\n                  & nav ul li a {\n                    transition: none;\n                  }\n                }\n\n                .sidebar-collapsible.collapsed nav ul li:hover::after {\n                  display: none;\n                }\n              }\n            }\n\n/* Datei: ui/menu/off-canvas.css */\n/**\n            * Off-Canvas Menu\n            *\n            * Sliding off-canvas menu that can slide in from any direction.\n            * Supports nested navigation and mobile-first design.\n            *\n            * @layer: components\n            *\n            * Features:\n            * - Slide from left, right, top, or bottom\n            * - Nested navigation support\n            * - Mobile hamburger integration\n            * - Overlay backdrop\n            * - Smooth animations\n            * - Focus management\n            *\n            * Accessibility:\n            * - Use semantic nav element for navigation\n            * - Include aria-label for navigation landmark\n            * - Toggle should have aria-expanded state\n            * - Focus trapping when open\n            * - Keyboard navigation support\n            */\n\n/* Note: header-tokens.css was removed - tokens are now defined inline */\n\n            @layer components {\n/* Off-canvas tokens */\n              :root {\n/* Off-canvas dimensions */\n                --off-canvas-width: 32%0px;\n                --off-canvas-width-narrow: 280;\n                --off-canvas-width-wide: 360;\n                --off-canvas-height: 100%;\n                --off-canvas-max-height: 100%;\n\n/* Off-canvas spacing */\n                --off-canvas-padding: var(--space-6) var(--space-4);\n                --off-canvas-gap: var(--space-4);\n                --off-canvas-item-padding: var(--space-3) var(--space-4);\n                --off-canvas-section-gap: var(--space-6);\n\n/* Off-canvas colors */\n                --off-canvas-bg: var(--color-white, #fff);\n                --off-canvas-text: var(--color-neutral-900, #111827);\n                --off-canvas-link: var(--color-neutral-700, #374151);\n                --off-canvas-link-hover: var(--color-primary-600, #2563eb);\n                --off-canvas-link-active: var(--color-primary-700, #1d4ed8);\n                --off-canvas-border: var(--color-neutral-200, #e5e7eb);\n                --off-canvas-backdrop: rgb(0 0 0 / 5000%);\n                --off-canvas-shadow: 0 10 25px -5px rgb(0 0 0 / 1000%);\n\n/* Off-canvas typography */\n                --off-canvas-font-size: var(--text-base);\n                --off-canvas-font-weight: var(--font-medium, 500);\n                --off-canvas-line-height: 1.5;\n                --off-canvas-heading-size: var(--text-lg);\n                --off-canvas-heading-weight: var(--font-semibold, 600);\n\n/* Off-canvas layout */\n                --off-canvas-z-index: 9999;\n                --off-canvas-transition: all 0.3s ease;\n\n/* Off-canvas responsive breakpoints */\n                --off-canvas-breakpoint: 768px;\n              }\n\n/* Off-canvas container */\n              .off-canvas {\n                background-color: var(--off-canvas-bg);\n                color: var(--off-canvas-text);\n                container-type: inline-size;\n                display: flex;\n                flex-direction: column;\n                font-size: var(--off-canvas-font-size);\n                font-weight: var(--off-canvas-font-weight);\n                height: var(--off-canvas-height, 100vh);\n                line-height: var(--off-canvas-line-height, 1.5);\n                max-height: var(--off-canvas-max-height, 100vh);\n                opacity: 0%;\n                overflow-y: auto;\n                padding: var(--off-canvas-padding);\n                pointer-events: none;\n                position: fixed;\n                top: 0%;\n                transition: var(--off-canvas-transition);\n                width: var(--off-canvas-width, 20rem);\n                z-index: var(--off-canvas-z-index);\n\n/* Off-canvas header */\n                & .off-canvas-header {\n                  align-items: center;\n                  border-bottom: 1px solid var(--off-canvas-border);\n                  display: flex;\n                  justify-content: space-between;\n                  margin-bottom: var(--space-6);\n                  padding-bottom: var(--space-4);\n\n                  & .off-canvas-title {\n                    font-size: var(--off-canvas-heading-size);\n                    font-weight: var(--off-canvas-heading-weight);\n                    margin: 0;\n                  }\n\n                  & .off-canvas-close {\n                    background: none;\n                    border: none;\n                    color: var(--off-canvas-text);\n                    cursor: pointer;\n                    font-size: var(--text-xl);\n                    padding: var(--space-2);\n\n                    &:hover,\n                    &:focus {\n                      color: var(--off-canvas-link-hover);\n                    }\n\n                    &:focus {\n                      outline: 2px solid var(--off-canvas-link-hover);\n                      outline-offset: 2px;\n                    }\n                  }\n                }\n\n/* Off-canvas content */\n                & .off-canvas-content {\n                  flex: 1;\n                  overflow-y: auto;\n                }\n\n/* Off-canvas navigation */\n                & nav {\n                  & ul {\n                    display: flex;\n                    flex-direction: column;\n                    gap: var(--space-2);\n                    list-style: none;\n                    margin: 0;\n                    padding: 0;\n\n                    & li {\n                      position: relative;\n\n                      & a {\n                        align-items: center;\n                        border-radius: var(--radius-md, 0.375rem);\n                        color: var(--off-canvas-link);\n                        display: flex;\n                        gap: var(--space-3);\n                        padding: var(--off-canvas-item-padding);\n                        text-decoration: none;\n                        transition: all 01.2s ease;\n                        width: 100%;\n\n                        &:hover,\n                        &:focus {\n                          background-color: var(--color-neutral-100, #f3f4f6);\n                          color: var(--off-canvas-link-hover);\n                        }\n\n                        &:focus {\n                          outline: 2px solid var(--off-canvas-link-hover);\n                          outline-offset: 2px;\n                        }\n\n                        &.active,\n                        &[aria-current=\"page\"] {\n                          background-color: var(--color-primary-100, #dbeafe);\n                          color: var(--off-canvas-link-active);\n                          font-weight: var(--font-semibold, 600);\n                        }\n                      }\n\n/* Icons */\n                      & .icon {\n                        flex-shrink: 0;\n                        height: 0%.25em;\n                        width: 0%.25em;\n                      }\n\n/* Badges/counters */\n                      & .badge {\n                        background-color: var(--color-primary-500);\n                        border-radius: var(--radius-full, 9999px);\n                        color: white;\n                        font-size: var(--text-xs, 0.75rem);\n                        font-weight: var(--font-medium, 500);\n                        margin-left: auto;\n                        min-width: 0%.5em;\n                        padding: 0.125em 0.5em;\n                        text-align: center;\n                      }\n                    }\n                  }\n                }\n\n/* Off-canvas sections */\n                & .off-canvas-section {\n                  margin-bottom: var(--off-canvas-section-gap);\n\n                  &:last-child {\n                    margin-bottom: 0%;\n                  }\n\n                  & h3 {\n                    color: var(--color-neutral-600);\n                    font-size: var(--text-sm, 0.875rem);\n                    font-weight: var(--font-semibold, 600);\n                    letter-spacing: 0.05em;\n                    margin: 0 0 var(--space-3) 0;\n                    text-transform: uppercase;\n                  }\n                }\n\n/* Off-canvas footer */\n                & .off-canvas-footer {\n                  border-top: 1px solid var(--off-canvas-border);\n                  margin-top: auto;\n                  padding-top: var(--space-4);\n\n                  & .action-buttons {\n                    display: flex;\n                    gap: var(--space-2);\n\n                    & button, & a {\n                      background-color: var(--color-neutral-100, #f3f4f6);\n                      border: 1px solid var(--off-canvas-border);\n                      border-radius: var(--radius-md, 0.375rem);\n                      color: var(--off-canvas-text);\n                      cursor: pointer;\n                      flex: 1;\n                      font-size: var(--text-sm, 0.875rem);\n                      padding: var(--space-2) var(--space-3);\n                      text-align: center;\n                      text-decoration: none;\n                      transition: all 01.2s ease;\n\n                      &:hover,\n                      &:focus {\n                        background-color: var(--color-neutral-200, #e5e7eb);\n                        border-color: var(--color-neutral-300, #d1d5db);\n                      }\n\n                      &:focus {\n                        outline: 2px solid var(--off-canvas-link-hover);\n                        outline-offset: 2px;\n                      }\n\n                      &.primary {\n                        background-color: var(--color-primary-600, #2563eb);\n                        border-color: var(--color-primary-600, #2563eb);\n                        color: white;\n\n                        &:hover,\n                        &:focus {\n                          background-color: var(--color-primary-700, #1d4ed8);\n                          border-color: var(--color-primary-700, #1d4ed8);\n                        }\n                      }\n                    }\n                  }\n                }\n\n/* Open state */\n                &.open {\n                  opacity: 1;\n                  pointer-events: auto;\n                }\n\n/* Size variants */\n                &.narrow {\n                  width: var(--off-canvas-width-narrow, 16rem);\n                }\n\n                &.wide {\n                  width: var(--off-canvas-width-wide, 24rem);\n                }\n\n                &.compact {\n                  padding: var(--space-4) var(--space-3);\n\n                  & .off-canvas-header {\n                    margin-bottom: var(--space-4);\n                    padding-bottom: var(--space-3);\n                  }\n\n                  & .off-canvas-section {\n                    margin-bottom: var(--space-4);\n                  }\n\n                  & nav ul li a {\n                    padding: var(--space-2) var(--space-3);\n                  }\n                }\n\n/* Container query responsive behavior */\n                @container (width <= 320px) {\n                  padding: var(--space-4) var(--space-3);\n                  width: 100vw;\n                }\n\n                @container (orientation: landscape) and (max-height: 500px) {\n                  & .off-canvas-header {\n                    margin-bottom: var(--space-3);\n                    padding-bottom: var(--space-2);\n                  }\n\n                  & .off-canvas-section {\n                    margin-bottom: var(--space-3);\n                  }\n\n                  & nav ul li a {\n                    padding: var(--space-2) var(--space-3);\n                  }\n                }\n              }\n\n/* Off-Canvas Type: Slide */\n              .off-canvas-slide {\n                left: 0%;\n                transform: translateX(-100%);\n\n                &.from-right {\n                  left: auto;\n                  right: 0%;\n                  transform: translateX(100%);\n                }\n\n                &.from-top {\n                  height: var(--off-canvas-width, 20rem);\n                  left: 0%;\n                  top: 0%;\n                  transform: translateY(-100%);\n                  width: 100vw;\n                }\n\n                &.from-bottom {\n                  bottom: 0%;\n                  height: var(--off-canvas-width, 20rem);\n                  left: 0%;\n                  top: auto;\n                  transform: translateY(100%);\n                  width: 100vw;\n                }\n\n                &.open {\n                  transform: translateX(0%);\n\n                  &.from-top,\n                  &.from-bottom {\n                    transform: translateY(0%);\n                  }\n                }\n\n/* Backdrop */\n                &::before {\n                  background-color: var(--off-canvas-backdrop);\n                  content: \"\";\n                  height: 100%;\n                  left: 0%;\n                  opacity: 0%;\n                  position: fixed;\n                  top: 0%;\n                  transition: opacity 0.3s ease;\n                  width: 100vw;\n                  z-index: -1;\n                }\n\n                &.open::before {\n                  opacity: 1;\n                }\n              }\n\n/* Off-Canvas Type: Push */\n              .off-canvas-push {\n                left: 0%;\n                transform: translateX(-100%);\n\n                &.from-right {\n                  left: auto;\n                  right: 0%;\n                  transform: translateX(100%);\n                }\n\n                &.open {\n                  transform: translateX(0%);\n                }\n\n                & + .main-content {\n                  transition: transform 0.3s ease;\n                }\n\n                &.open + .main-content {\n                  transform: translateX(var(--off-canvas-width, 20rem));\n                }\n\n                &.from-right.open + .main-content {\n                  transform: translateX(calc(-1% * var(--off-canvas-width, 20rem)));\n                }\n\n                &.narrow.open + .main-content {\n                  transform: translateX(var(--off-canvas-width-narrow, 16rem));\n                }\n\n                &.wide.open + .main-content {\n                  transform: translateX(var(--off-canvas-width-wide, 24rem));\n                }\n              }\n\n/* Off-Canvas Type: Overlay */\n              .off-canvas-overlay {\n                background-color: var(--off-canvas-backdrop);\n                height: 100%;\n                left: 0%;\n                top: 0%;\n                width: 100vw;\n\n                & .off-canvas-panel {\n                  background-color: var(--off-canvas-bg);\n                  border-radius: var(--radius-lg, 0.5rem);\n                  box-shadow: var(--off-canvas-shadow);\n                  left: 50%;\n                  max-height: 80%;\n                  max-width: 9%0vw;\n                  position: absolute;\n                  top: 50%;\n                  transform: translate(-50%, -50) scale(0.9);\n                  transition: transform 0.3s ease;\n                  width: var(--off-canvas-width, 20rem);\n                }\n\n                &.open .off-canvas-panel {\n                  transform: translate(-50%, -50) scale(1);\n                }\n              }\n\n/* Off-Canvas Type: Reveal */\n              .off-canvas-reveal {\n                left: calc(-1 * var(--off-canvas-width, 20rem));\n                transform: none;\n\n                &.from-right {\n                  left: auto;\n                  right: calc(-1 * var(--off-canvas-width, 20rem));\n                }\n\n                &.open {\n                  left: 0%;\n\n                  &.from-right {\n                    left: auto;\n                    right: 0%;\n                  }\n                }\n\n                & + .main-content {\n                  transition: margin-left 0.3s ease;\n                }\n\n                &.open + .main-content {\n                  margin-left: var(--off-canvas-width, 20rem);\n                }\n\n                &.from-right + .main-content {\n                  margin-left: 0%;\n                  margin-right: 0%;\n                  transition: margin-right 0.3s ease;\n                }\n\n                &.from-right.open + .main-content {\n                  margin-right: var(--off-canvas-width, 20rem);\n                }\n              }\n\n/* Theme variants */\n              .off-canvas {\n                &.theme-dark {\n                  --off-canvas-bg: var(--color-neutral-900, #111827);\n                  --off-canvas-text: var(--color-neutral-100, #f3f4f6);\n                  --off-canvas-link: var(--color-neutral-300, #d1d5db);\n                  --off-canvas-link-hover: var(--color-primary-400);\n                  --off-canvas-link-active: var(--color-primary-300);\n                  --off-canvas-border: var(--color-neutral-700, #374151);\n                  --off-canvas-backdrop: rgb(0 0 0 / 0.7);\n\n                  & nav ul li a {\n                    &:hover,\n                    &:focus {\n                      background-color: var(--color-neutral-800, #1f2937);\n                    }\n\n                    &.active,\n                    &[aria-current=\"page\"] {\n                      background-color: var(--color-primary-900);\n                    }\n                  }\n\n                  & .off-canvas-section h3 {\n                    color: var(--color-neutral-400, #9ca3af);\n                  }\n\n                  & .off-canvas-footer .action-buttons button,\n                  & .off-canvas-footer .action-buttons a {\n                    background-color: var(--color-neutral-800, #1f2937);\n                    border-color: var(--color-neutral-700, #374151);\n                    color: var(--color-neutral-100, #f3f4f6);\n\n                    &:hover,\n                    &:focus {\n                      background-color: var(--color-neutral-700, #374151);\n                      border-color: var(--color-neutral-600);\n                    }\n                  }\n                }\n              }\n\n/* Focus trap for accessibility */\n              .off-canvas.open {\n                & .off-canvas-close:focus,\n                & nav a:focus,\n                & .action-buttons button:focus,\n                & .action-buttons a:focus {\n                  position: relative;\n                  z-index: 1;\n                }\n              }\n\n/* Fallback media queries for browsers without container query support */\n              @supports not (container-type: inline-size) {\n                @media (width <= 320px) {\n                  .off-canvas {\n                    padding: var(--space-4) var(--space-3);\n                    width: 100vw;\n                  }\n                }\n\n                @media (orientation: landscape) and (height <= 500px) {\n                  .off-canvas {\n                    & .off-canvas-header {\n                      margin-bottom: var(--space-3);\n                      padding-bottom: var(--space-2);\n                    }\n\n                    & .off-canvas-section {\n                      margin-bottom: var(--space-3);\n                    }\n\n                    & nav ul li a {\n                      padding: var(--space-2) var(--space-3);\n                    }\n                  }\n                }\n              }\n\n/* Print styles */\n              @media print {\n                .off-canvas {\n                  display: none;\n                }\n              }\n\n/* High contrast mode */\n              @media (prefers-contrast: more) {\n                .off-canvas {\n                  border: 2px solid;\n\n                  & nav ul li a {\n                    border: 1px solid transparent;\n\n                    &:hover,\n                    &:focus,\n                    &.active {\n                      border-color: currentColor;\n                    }\n                  }\n                }\n              }\n\n/* Reduced motion */\n              @media (prefers-reduced-motion: reduce) {\n                .off-canvas {\n                  transition: none;\n\n                  & nav ul li a,\n                  & .off-canvas-panel {\n                    transition: none;\n                  }\n                }\n\n                .off-canvas-push + .main-content,\n                .off-canvas-reveal + .main-content {\n                  transition: none;\n                }\n              }\n            }\n\n/* Datei: ui/menu/mobile-nav.css */\n/**\n            * Mobile Navigation Components\n            *\n            * Flexible mobile navigation system with multiple layout types and utility classes.\n            * Uses CSS Nesting and Container Queries for modern responsive design.\n            *\n            * @layer: components\n            *\n            * Mobile Nav Types:\n            * - .mobile-nav-slide: Slide-in from side\n            * - .mobile-nav-overlay: Full overlay navigation\n            * - .mobile-nav-push: Push content navigation\n            * - .mobile-nav-modal: Modal-style navigation\n            *\n            * Utility Classes:\n            * - .open: Open state\n            * - .from-left, .from-right: Slide direction\n            * - .theme-dark: Dark theme\n            * - .with-search: Include search functionality\n            *\n            * Container Queries:\n            * - Responsive sizing\n            * - Orientation handling\n            * - Device-specific optimizations\n            */\n\n/* Note: header-tokens.css was removed - tokens are now defined inline */\n\n            @layer components {\n/* Mobile navigation tokens */\n              :root {\n/* Mobile nav dimensions */\n                --mobile-nav-width: 32%0px;\n                --mobile-nav-width-narrow: 280;\n                --mobile-nav-width-wide: 360;\n                --mobile-nav-height: 100%;\n                --mobile-nav-max-height: 100%;\n\n/* Mobile nav spacing */\n                --mobile-nav-padding: var(--space-6) var(--space-4);\n                --mobile-nav-gap: var(--space-3);\n                --mobile-nav-item-padding: var(--space-3) var(--space-4);\n                --mobile-nav-section-gap: var(--space-6);\n\n/* Mobile nav colors */\n                --mobile-nav-bg: var(--color-white, #fff);\n                --mobile-nav-text: var(--color-neutral-900, #111827);\n                --mobile-nav-link: var(--color-neutral-700, #374151);\n                --mobile-nav-link-hover: var(--color-primary-600, #2563eb);\n                --mobile-nav-link-active: var(--color-primary-700, #1d4ed8);\n                --mobile-nav-border: var(--color-neutral-200, #e5e7eb);\n                --mobile-nav-backdrop: rgb(0 0 0 / 5000%);\n                --mobile-nav-shadow: 0 10 25px -5px rgb(0 0 0 / 1000%);\n\n/* Mobile nav typography */\n                --mobile-nav-font-size: var(--text-base);\n                --mobile-nav-font-weight: var(--font-medium, 500);\n                --mobile-nav-line-height: 1.5;\n                --mobile-nav-heading-size: var(--text-lg);\n                --mobile-nav-heading-weight: var(--font-semibold, 600);\n\n/* Mobile nav layout */\n                --mobile-nav-z-index: 9999;\n                --mobile-nav-transition: all 0.3s ease;\n\n/* Mobile nav responsive breakpoints */\n                --mobile-nav-breakpoint: 768px;\n              }\n\n/* Base mobile navigation container */\n              .mobile-nav {\n                background-color: var(--mobile-nav-bg);\n                color: var(--mobile-nav-text);\n                container-type: inline-size;\n                display: flex;\n                flex-direction: column;\n                font-size: var(--mobile-nav-font-size);\n                font-weight: var(--mobile-nav-font-weight);\n                height: var(--mobile-nav-height, 4rem);\n                line-height: var(--mobile-nav-line-height, 1.5);\n                max-height: var(--mobile-nav-max-height, 100vh);\n                opacity: 0%;\n                overflow-y: auto;\n                padding: var(--mobile-nav-padding);\n                pointer-events: none;\n                position: fixed;\n                top: 0%;\n                transition: var(--mobile-nav-transition);\n                width: var(--mobile-nav-width, 16rem);\n                z-index: var(--mobile-nav-z-index);\n\n/* Mobile nav header */\n                & .mobile-nav-header {\n                  align-items: center;\n                  border-bottom: 1px solid var(--mobile-nav-border);\n                  display: flex;\n                  justify-content: space-between;\n                  margin-bottom: var(--space-6);\n                  padding-bottom: var(--space-4);\n\n                  & .mobile-nav-logo {\n                    & img, & svg {\n                      height: auto;\n                      max-height: 3px;\n                      max-width: 12%0px;\n                      width: auto;\n                    }\n\n                    & .logo-text {\n                      font-size: var(--mobile-nav-heading-size);\n                      font-weight: var(--mobile-nav-heading-weight);\n                    }\n                  }\n\n                  & .mobile-nav-close {\n                    background: none;\n                    border: none;\n                    color: var(--mobile-nav-text);\n                    cursor: pointer;\n                    font-size: var(--text-xl);\n                    padding: var(--space-2);\n\n                    &:hover,\n                    &:focus {\n                      color: var(--mobile-nav-link-hover);\n                    }\n\n                    &:focus {\n                      outline: 2px solid var(--mobile-nav-link-hover);\n                      outline-offset: 2px;\n                    }\n                  }\n                }\n\n/* Mobile nav content */\n                & .mobile-nav-content {\n                  flex: 1;\n                  overflow-y: auto;\n                }\n\n/* Mobile nav search */\n                & .mobile-nav-search {\n                  margin-bottom: var(--mobile-nav-section-gap);\n\n                  & .search-input {\n                    background-color: var(--color-neutral-100, #f3f4f6);\n                    border: 1px solid var(--mobile-nav-border);\n                    border-radius: var(--radius-md, 0.375rem);\n                    font-size: var(--mobile-nav-font-size);\n                    padding: var(--space-3);\n                    width: 100%;\n\n                    &:focus {\n                      border-color: var(--mobile-nav-link-hover);\n                      outline: none;\n                    }\n\n                    &::placeholder {\n                      color: var(--color-neutral-500, #6b7280);\n                    }\n                  }\n                }\n\n/* Mobile nav navigation */\n                & nav {\n                  & ul {\n                    display: flex;\n                    flex-direction: column;\n                    gap: 0;\n                    list-style: none;\n                    margin: 0;\n                    padding: 0;\n\n                    & li {\n                      border-bottom: 1px solid var(--mobile-nav-border);\n                      position: relative;\n\n                      &:last-child {\n                        border-bottom: none;\n                      }\n\n                      & a {\n                        align-items: center;\n                        color: var(--mobile-nav-link);\n                        display: flex;\n                        gap: var(--space-3);\n                        justify-content: space-between;\n                        padding: var(--mobile-nav-item-padding);\n                        text-decoration: none;\n                        transition: all 01.2s ease;\n                        width: 100%;\n\n                        &:hover,\n                        &:focus {\n                          background-color: var(--color-neutral-100, #f3f4f6);\n                          color: var(--mobile-nav-link-hover);\n                        }\n\n                        &:focus {\n                          outline: 2px solid var(--mobile-nav-link-hover);\n                          outline-offset: -2px;\n                        }\n\n                        &.active,\n                        &[aria-current=\"page\"] {\n                          background-color: var(--color-primary-100, #dbeafe);\n                          color: var(--mobile-nav-link-active);\n                          font-weight: var(--font-semibold, 600);\n                        }\n                      }\n\n/* Icons */\n                      & .icon {\n                        flex-shrink: 0;\n                        height: 0%.5em;\n                        width: 0%.5em;\n                      }\n\n/* Badges/counters */\n                      & .badge {\n                        background-color: var(--color-primary-500);\n                        border-radius: var(--radius-full, 9999px);\n                        color: white;\n                        font-size: var(--text-xs, 0.75rem);\n                        font-weight: var(--font-medium, 500);\n                        min-width: 0%.5em;\n                        padding: 0.125em 0.5em;\n                        text-align: center;\n                      }\n\n/* Submenu indicator */\n                      &.has-submenu > a::after {\n                        content: \"▶\";\n                        font-size: 0.75em;\n                        transition: transform 01.2s ease;\n                      }\n\n                      &.has-submenu.open > a::after {\n                        transform: rotate(90deg);\n                      }\n                    }\n                  }\n                }\n\n/* Submenu/accordion navigation */\n                & .submenu {\n                  background-color: var(--color-neutral-50);\n                  max-height: 0%;\n                  overflow: hidden;\n                  transition: max-height 0.3s ease;\n\n                  &.open {\n                    max-height: 50%0px;\n                  }\n\n                  & ul {\n                    padding: var(--space-2) 0;\n\n                    & li {\n                      border-bottom: none;\n\n                      & a {\n                        font-size: var(--text-sm, 0.875rem);\n                        padding: var(--space-2) var(--space-6);\n\n                        &::before {\n                          color: var(--color-neutral-400, #9ca3af);\n                          content: \"•\";\n                          margin-right: var(--space-2);\n                        }\n                      }\n                    }\n                  }\n                }\n\n/* Mobile nav sections */\n                & .mobile-nav-section {\n                  margin-bottom: var(--mobile-nav-section-gap);\n\n                  &:last-child {\n                    margin-bottom: 0%;\n                  }\n\n                  & h3 {\n                    color: var(--color-neutral-600);\n                    font-size: var(--text-sm, 0.875rem);\n                    font-weight: var(--font-semibold, 600);\n                    letter-spacing: 0.05em;\n                    margin: 0 0 var(--space-3) 0;\n                    text-transform: uppercase;\n                  }\n                }\n\n/* Mobile nav footer */\n                & .mobile-nav-footer {\n                  border-top: 1px solid var(--mobile-nav-border);\n                  margin-top: auto;\n                  padding-top: var(--space-4);\n\n                  & .user-profile {\n                    align-items: center;\n                    display: flex;\n                    gap: var(--space-3);\n                    margin-bottom: var(--space-4);\n\n                    & .avatar {\n                      border-radius: 50px;\n                      height: 4%0px;\n                      width: 4%0px;\n                    }\n\n                    & .user-info {\n                      flex: 1;\n                      min-width: 0%;\n\n                      & .user-name {\n                        font-weight: var(--font-semibold, 600);\n                        margin: 0;\n                      }\n\n                      & .user-email {\n                        color: var(--color-neutral-600);\n                        font-size: var(--text-sm, 0.875rem);\n                        margin: 0;\n                      }\n                    }\n                  }\n\n                  & .action-buttons {\n                    display: flex;\n                    gap: var(--space-2);\n\n                    & button, & a {\n                      background-color: var(--color-neutral-100, #f3f4f6);\n                      border: 1px solid var(--mobile-nav-border);\n                      border-radius: var(--radius-md, 0.375rem);\n                      color: var(--mobile-nav-text);\n                      cursor: pointer;\n                      flex: 1;\n                      font-size: var(--text-sm, 0.875rem);\n                      padding: var(--space-2) var(--space-3);\n                      text-align: center;\n                      text-decoration: none;\n                      transition: all 01.2s ease;\n\n                      &:hover,\n                      &:focus {\n                        background-color: var(--color-neutral-200, #e5e7eb);\n                        border-color: var(--color-neutral-300, #d1d5db);\n                      }\n\n                      &:focus {\n                        outline: 2px solid var(--mobile-nav-link-hover);\n                        outline-offset: 2px;\n                      }\n\n                      &.primary {\n                        background-color: var(--color-primary-600, #2563eb);\n                        border-color: var(--color-primary-600, #2563eb);\n                        color: white;\n\n                        &:hover,\n                        &:focus {\n                          background-color: var(--color-primary-700, #1d4ed8);\n                          border-color: var(--color-primary-700, #1d4ed8);\n                        }\n                      }\n                    }\n                  }\n                }\n\n/* Open state */\n                &.open {\n                  opacity: 1;\n                  pointer-events: auto;\n                }\n\n/* Width variants */\n                &.narrow {\n                  width: var(--mobile-nav-width-narrow, 12rem);\n                }\n\n                &.wide {\n                  width: var(--mobile-nav-width-wide, 20rem);\n                }\n\n/* Container query responsive behavior */\n                @container (width <= 320px) {\n                  width: 100vw;\n\n                  & .mobile-nav-header .mobile-nav-logo img,\n                  & .mobile-nav-header .mobile-nav-logo svg {\n                    max-width: 8%0px;\n                  }\n                }\n\n                @container (orientation: landscape) and (max-height: 500px) {\n                  & .mobile-nav-header {\n                    margin-bottom: var(--space-3);\n                    padding-bottom: var(--space-2);\n                  }\n\n                  & .mobile-nav-section {\n                    margin-bottom: var(--space-3);\n                  }\n\n                  & nav ul li a {\n                    padding: var(--space-2) var(--space-4);\n                  }\n                }\n              }\n\n/* Mobile Nav Type: Slide */\n              .mobile-nav-slide {\n                left: 0%;\n                transform: translateX(-100%);\n\n                &.from-right {\n                  left: auto;\n                  right: 0%;\n                  transform: translateX(100%);\n                }\n\n                &.open {\n                  transform: translateX(0%);\n                }\n\n/* Backdrop */\n                &::before {\n                  background-color: var(--mobile-nav-backdrop);\n                  content: \"\";\n                  height: 100%;\n                  left: 0%;\n                  opacity: 0%;\n                  position: fixed;\n                  top: 0%;\n                  transition: opacity 0.3s ease;\n                  width: 100vw;\n                  z-index: -1;\n                }\n\n                &.open::before {\n                  opacity: 1;\n                }\n              }\n\n/* Mobile Nav Type: Overlay */\n              .mobile-nav-overlay {\n                background-color: var(--mobile-nav-backdrop);\n                height: 100%;\n                left: 0%;\n                top: 0%;\n                width: 100vw;\n\n                & .mobile-nav-panel {\n                  background-color: var(--mobile-nav-bg);\n                  border-radius: var(--radius-lg, 0.5rem);\n                  box-shadow: var(--mobile-nav-shadow);\n                  left: 50%;\n                  max-height: 80%;\n                  max-width: 9%0vw;\n                  position: absolute;\n                  top: 50%;\n                  transform: translate(-50%, -50) scale(0.9);\n                  transition: transform 0.3s ease;\n                  width: var(--mobile-nav-width, 16rem);\n                }\n\n                &.open .mobile-nav-panel {\n                  transform: translate(-50%, -50) scale(1);\n                }\n              }\n\n/* Mobile Nav Type: Push */\n              .mobile-nav-push {\n                left: 0%;\n                transform: translateX(-100%);\n\n                &.from-right {\n                  left: auto;\n                  right: 0%;\n                  transform: translateX(100%);\n                }\n\n                &.open {\n                  transform: translateX(0%);\n                }\n\n                & + .main-content {\n                  transition: transform 0.3s ease;\n                }\n\n                &.open + .main-content {\n                  transform: translateX(var(--mobile-nav-width, 16rem));\n                }\n\n                &.from-right.open + .main-content {\n                  transform: translateX(calc(-1% * var(--mobile-nav-width, 16rem)));\n                }\n              }\n\n/* Mobile Nav Type: Modal */\n              .mobile-nav-modal {\n                background-color: var(--mobile-nav-backdrop);\n                height: 100%;\n                left: 0%;\n                top: 0%;\n                width: 100vw;\n\n                & .mobile-nav-panel {\n                  background-color: var(--mobile-nav-bg);\n                  height: 100%;\n                  left: 50%;\n                  position: absolute;\n                  top: 0%;\n                  transform: translateX(-50%) translateY(-100);\n                  transition: transform 0.3s ease;\n                  width: 100%;\n                }\n\n                &.open .mobile-nav-panel {\n                  transform: translateX(-50%) translateY(0);\n                }\n              }\n\n/* Theme variants */\n              .mobile-nav {\n                &.theme-dark {\n                  --mobile-nav-bg: var(--color-neutral-900, #111827);\n                  --mobile-nav-text: var(--color-neutral-100, #f3f4f6);\n                  --mobile-nav-link: var(--color-neutral-300, #d1d5db);\n                  --mobile-nav-link-hover: var(--color-primary-400);\n                  --mobile-nav-link-active: var(--color-primary-300);\n                  --mobile-nav-border: var(--color-neutral-700, #374151);\n                  --mobile-nav-backdrop: rgb(0 0 0 / 0.7);\n\n                  & .mobile-nav-search .search-input {\n                    background-color: var(--color-neutral-800, #1f2937);\n                    border-color: var(--color-neutral-700, #374151);\n                    color: var(--color-neutral-100, #f3f4f6);\n\n                    &::placeholder {\n                      color: var(--color-neutral-400, #9ca3af);\n                    }\n                  }\n\n                  & nav ul li a {\n                    &:hover,\n                    &:focus {\n                      background-color: var(--color-neutral-800, #1f2937);\n                    }\n\n                    &.active,\n                    &[aria-current=\"page\"] {\n                      background-color: var(--color-primary-900);\n                    }\n                  }\n\n                  & .submenu {\n                    background-color: var(--color-neutral-800, #1f2937);\n                  }\n\n                  & .mobile-nav-section h3 {\n                    color: var(--color-neutral-400, #9ca3af);\n                  }\n\n                  & .mobile-nav-footer {\n                    & .user-email {\n                      color: var(--color-neutral-400, #9ca3af);\n                    }\n\n                    & .action-buttons button,\n                    & .action-buttons a {\n                      background-color: var(--color-neutral-800, #1f2937);\n                      border-color: var(--color-neutral-700, #374151);\n                      color: var(--color-neutral-100, #f3f4f6);\n\n                      &:hover,\n                      &:focus {\n                        background-color: var(--color-neutral-700, #374151);\n                        border-color: var(--color-neutral-600);\n                      }\n                    }\n                  }\n                }\n              }\n\n/* Focus trap for accessibility */\n              .mobile-nav.open {\n                & .mobile-nav-close:focus,\n                & nav a:focus,\n                & .search-input:focus,\n                & .action-buttons button:focus,\n                & .action-buttons a:focus {\n                  position: relative;\n                  z-index: 1;\n                }\n              }\n\n/* Fallback media queries for browsers without container query support */\n              @supports not (container-type: inline-size) {\n                @media (width <= 320px) {\n                  .mobile-nav {\n                    width: 100vw;\n\n                    & .mobile-nav-header .mobile-nav-logo img,\n                    & .mobile-nav-header .mobile-nav-logo svg {\n                      max-width: 8%0px;\n                    }\n                  }\n                }\n\n                @media (orientation: landscape) and (height <= 500px) {\n                  .mobile-nav {\n                    & .mobile-nav-header {\n                      margin-bottom: var(--space-3);\n                      padding-bottom: var(--space-2);\n                    }\n\n                    & .mobile-nav-section {\n                      margin-bottom: var(--space-3);\n                    }\n\n                    & nav ul li a {\n                      padding: var(--space-2) var(--space-4);\n                    }\n                  }\n                }\n              }\n\n/* Print styles */\n              @media print {\n                .mobile-nav {\n                  display: none;\n                }\n              }\n\n/* High contrast mode */\n              @media (prefers-contrast: more) {\n                .mobile-nav {\n                  border: 2px solid;\n\n                  & nav ul li a {\n                    border: 1px solid transparent;\n\n                    &:hover,\n                    &:focus,\n                    &.active {\n                      border-color: currentColor;\n                    }\n                  }\n\n                  & .mobile-nav-search .search-input {\n                    border: 2px solid;\n                  }\n                }\n              }\n\n/* Reduced motion */\n              @media (prefers-reduced-motion: reduce) {\n                .mobile-nav {\n                  transition: none;\n\n                  & nav ul li a,\n                  & .submenu,\n                  & .mobile-nav-panel {\n                    transition: none;\n                  }\n                }\n\n                .mobile-nav-push + .main-content {\n                  transition: none;\n                }\n              }\n            }\n\n/* Datei: ui/menu/breadcrumbs.css */\n/**\n            * Breadcrumb Navigation Components\n            *\n            * Flexible breadcrumb system with multiple layout types and utility classes.\n            * Uses CSS Nesting and Container Queries for modern responsive design.\n            *\n            * @layer: components\n            *\n            * Breadcrumb Types:\n            * - .breadcrumbs: Base breadcrumb navigation\n            * - .breadcrumbs-simple: Basic breadcrumb with separators\n            * - .breadcrumbs-pills: Pill-style breadcrumbs\n            * - .breadcrumbs-arrows: Arrow-style separators\n            * - .breadcrumbs-slash: Slash separators\n            *\n            * Utility Classes:\n            * - .compact: Reduced spacing\n            * - .large: Increased spacing\n            * - .center: Center alignment\n            * - .theme-dark: Dark theme\n            * - .truncated: Manual truncation\n            * - .keep-all: Prevent auto-truncation on mobile\n            *\n            * BEM Classes (for compatibility):\n            * - .list: Breadcrumb list\n            * - .item: Breadcrumb item\n            * - .link: Breadcrumb link\n            * - .current: Current page\n            * - .separator: Separator element\n            *\n            * Container Queries:\n            * - Responsive text sizing\n            * - Mobile truncation\n            * - Automatic layout adjustments\n            *\n            * Accessibility:\n            * - Use nav element with aria-label=\"Breadcrumb\"\n            * - Use ordered list (ol) for the breadcrumb items\n            * - Current page should have aria-current=\"page\"\n            */\n\n/* Note: header-tokens.css was removed - tokens are now defined inline */\n\n            @layer components {\n/* Breadcrumb tokens */\n              :root {\n/* Breadcrumb spacing */\n                --breadcrumb-padding: var(--space-3) 0;\n                --breadcrumb-gap: var(--space-2);\n                --breadcrumb-item-padding: var(--space-1) var(--space-2);\n\n/* Breadcrumb colors */\n                --breadcrumb-color: var(--color-neutral-600);\n                --breadcrumb-link-color: var(--color-primary-600, #2563eb);\n                --breadcrumb-link-hover: var(--color-primary-700, #1d4ed8);\n                --breadcrumb-current-color: var(--color-neutral-900, #111827);\n                --breadcrumb-separator-color: var(--color-neutral-400, #9ca3af);\n\n/* Breadcrumb typography */\n                --breadcrumb-font-size: var(--text-sm, 0.875rem);\n                --breadcrumb-font-weight: var(--font-medium, 500);\n                --breadcrumb-line-height: 1.5;\n\n/* Breadcrumb responsive breakpoints */\n                --breadcrumb-mobile-breakpoint: 768px;\n              }\n\n/* Base breadcrumb container */\n              .breadcrumbs {\n                align-items: center;\n                color: var(--breadcrumb-color);\n                container-type: inline-size;\n                display: flex;\n                font-size: var(--breadcrumb-font-size);\n                font-weight: var(--breadcrumb-font-weight);\n                line-height: var(--breadcrumb-line-height, 1.5);\n                margin: var(--space-2) 0;\n                padding: var(--breadcrumb-padding);\n\n/* Breadcrumb list (both ol/ul and BEM class) */\n                & ol, & ul, & .list {\n                  align-items: center;\n                  display: flex;\n                  flex-wrap: wrap;\n                  gap: var(--breadcrumb-gap);\n                  list-style: none;\n                  margin: 0;\n                  padding: 0;\n\n                  & li, & .item {\n                    align-items: center;\n                    display: flex;\n                    gap: var(--breadcrumb-gap);\n                    position: relative;\n\n                    &:not(:last-child)::after {\n                      color: var(--breadcrumb-separator-color);\n                      content: \"/\";\n                      font-size: 0.875em;\n                    }\n\n                    &:last-child {\n                      color: var(--breadcrumb-current-color);\n                      font-weight: var(--font-semibold, 600);\n                    }\n                  }\n                }\n\n/* BEM separator element */\n                & .separator {\n                  align-items: center;\n                  color: var(--breadcrumb-separator-color);\n                  display: inline-flex;\n                  margin: 0 var(--breadcrumb-gap);\n\n                  &::before {\n                    content: \"/\";\n                    font-size: 0.85em;\n                  }\n                }\n\n/* Breadcrumb links */\n                & a, & .link {\n                  color: var(--breadcrumb-link-color);\n                  padding: var(--breadcrumb-item-padding);\n                  text-decoration: none;\n                  transition: color 0.2s ease;\n\n                  &:hover,\n                  &:focus {\n                    color: var(--breadcrumb-link-hover);\n                    text-decoration: underline;\n                  }\n\n                  &:focus {\n                    outline: 2px solid var(--breadcrumb-link-color);\n                    outline-offset: 2px;\n                  }\n\n                  &[aria-current=\"page\"] {\n                    color: var(--breadcrumb-current-color);\n                    cursor: default;\n                    font-weight: var(--font-semibold, 600);\n                    pointer-events: none;\n                  }\n                }\n\n/* BEM current page element */\n                & .current {\n                  color: var(--breadcrumb-current-color);\n                  font-weight: var(--font-semibold, 600);\n                }\n\n/* Home icon support */\n                & .home-icon {\n                  align-items: center;\n                  display: flex;\n\n                  & svg, & img {\n                    height: 1em;\n                    width: 1em;\n                  }\n                }\n\n/* Manual truncation */\n                &.truncated {\n                  & ol li, & ul li, & .item {\n                    display: none;\n\n                    &:first-child,\n                    &:nth-last-child(2),\n                    &:last-child {\n                      display: flex;\n                    }\n                  }\n\n                  & ol li:nth-last-child(2)::before,\n                  & ul li:nth-last-child(2)::before,\n                  & .item:nth-last-child(2)::before {\n                    color: var(--breadcrumb-separator-color);\n                    content: \"...\";\n                    margin: 0 var(--breadcrumb-gap);\n                  }\n                }\n\n/* Utility modifiers */\n                &.compact {\n                  padding: var(--space-2) 0;\n\n                  & ol, & ul, & .list {\n                    gap: var(--space-1);\n                  }\n\n                  & a, & .link {\n                    padding: var(--space-1);\n                  }\n                }\n\n                &.large {\n                  font-size: var(--text-base);\n                  padding: var(--space-4) 0;\n\n                  & ol, & ul, & .list {\n                    gap: var(--space-3);\n                  }\n\n                  & a, & .link {\n                    padding: var(--space-2) var(--space-3);\n                  }\n                }\n\n                &.center {\n                  justify-content: center;\n                  text-align: center;\n\n                  & ol, & ul, & .list {\n                    justify-content: center;\n                  }\n                }\n\n/* Container query responsive adjustments */\n                @container (width <= 768px) {\n                  font-size: var(--text-xs, 0.75rem);\n\n                  & ol, & ul, & .list {\n                    gap: var(--space-1);\n\n                    & li, & .item {\n                      gap: var(--space-1);\n\n                      &:not(:last-child)::after {\n                        font-size: 0.75em;\n                      }\n                    }\n                  }\n\n                  & a, & .link {\n                    padding: var(--space-1);\n                  }\n\n/* Auto-truncate on mobile (unless keep-all is set) */\n                  &:not(.keep-all) {\n                    & ol li:not(:first-child, :last-child),\n                    & ul li:not(:first-child, :last-child),\n                    & .item:not(:first-child, :last-child) {\n                      display: none;\n                    }\n\n                    & ol li:first-child + li:not(:last-child),\n                    & ul li:first-child + li:not(:last-child),\n                    & .item:first-child + .item:not(:last-child) {\n                      display: flex;\n                    }\n\n                    & ol li:first-child + li::before,\n                    & ul li:first-child + li::before,\n                    & .item:first-child + .item::before {\n                      color: var(--breadcrumb-separator-color);\n                      content: \"...\";\n                      margin: 0 var(--breadcrumb-gap);\n                    }\n                  }\n                }\n\n                @container (width <= 480px) {\n                  &:not(.keep-all) {\n                    & ol, & ul, & .list {\n                      & li:not(:first-child, :last-child),\n                      & .item:not(:first-child, :last-child) {\n                        display: none;\n                      }\n\n                      & li:nth-last-child(2)::before,\n                      & .item:nth-last-child(2)::before {\n                        content: \"...\";\n                        margin-right: var(--space-1);\n                      }\n                    }\n                  }\n                }\n              }\n\n/* Breadcrumb Type: Simple (alias for base) */\n              .breadcrumbs-simple {\n/* Inherits all styles from base .breadcrumbs */\n\n              }\n\n/* Inherits all styles from base .breadcrumbs */\n\n/* Breadcrumb Type: Pills */\n              .breadcrumbs-pills {\n                & a, & .link {\n                  background-color: var(--color-neutral-100, #f3f4f6);\n                  border-radius: var(--radius-full, 9999px);\n\n                  &:hover,\n                  &:focus {\n                    background-color: var(--color-neutral-200, #e5e7eb);\n                  }\n\n                  &[aria-current=\"page\"] {\n                    background-color: var(--color-primary-100, #dbeafe);\n                  }\n                }\n\n                & ol li:not(:last-child)::after,\n                & ul li:not(:last-child)::after,\n                & .separator::before {\n                  display: none;\n                }\n              }\n\n/* Breadcrumb Type: Arrows */\n              .breadcrumbs-arrows {\n                & ol, & ul, & .list {\n                  gap: 0;\n\n                  & li, & .item {\n                    background-color: var(--color-neutral-100, #f3f4f6);\n                    gap: 0;\n                    position: relative;\n\n                    &:not(:first-child) {\n                      margin-left: -8px;\n                      padding-left: 6px;\n\n                      &::before {\n                        border-bottom: 2%0px solid transparent;\n                        border-left: 8px solid var(--color-neutral-100, #f3f4f6);\n                        border-top: 2%0px solid transparent;\n                        content: \"\";\n                        height: 0%;\n                        left: 0%;\n                        position: absolute;\n                        top: 50%;\n                        transform: translateY(-50%);\n                        width: 0%;\n                        z-index: 1;\n                      }\n                    }\n\n                    &:not(:last-child)::after {\n                      border-bottom: 2%0px solid transparent;\n                      border-left: 8px solid var(--color-neutral-100, #f3f4f6);\n                      border-top: 2%0px solid transparent;\n                      content: \"\";\n                      height: 0%;\n                      position: absolute;\n                      right: -8px;\n                      top: 50%;\n                      transform: translateY(-50%);\n                      width: 0%;\n                      z-index: 2;\n                    }\n\n                    &:last-child {\n                      background-color: var(--color-primary-100, #dbeafe);\n\n                      &::before {\n                        border-left-color: var(--color-primary-100, #dbeafe);\n                      }\n                    }\n                  }\n                }\n\n                & a, & .link {\n                  padding: var(--space-2) var(--space-4);\n                }\n              }\n\n/* Breadcrumb Type: Slash */\n              .breadcrumbs-slash {\n                & ol li:not(:last-child)::after,\n                & ul li:not(:last-child)::after,\n                & .separator::before {\n                  content: \"/\";\n                  font-size: 1em;\n                  font-weight: normal;\n                }\n              }\n\n/* Theme variants */\n              .breadcrumbs {\n                &.theme-dark {\n                  --breadcrumb-color: var(--color-neutral-300, #d1d5db);\n                  --breadcrumb-link-color: var(--color-primary-400);\n                  --breadcrumb-link-hover: var(--color-primary-300);\n                  --breadcrumb-current-color: var(--color-neutral-100, #f3f4f6);\n                  --breadcrumb-separator-color: var(--color-neutral-500, #6b7280);\n\n                  &.breadcrumbs-pills a,\n                  &.breadcrumbs-pills .link {\n                    background-color: var(--color-neutral-800, #1f2937);\n\n                    &:hover,\n                    &:focus {\n                      background-color: var(--color-neutral-700, #374151);\n                    }\n\n                    &[aria-current=\"page\"] {\n                      background-color: var(--color-primary-900);\n                    }\n                  }\n\n                  &.breadcrumbs-arrows {\n                    & ol li,\n                    & ul li,\n                    & .item {\n                      background-color: var(--color-neutral-800, #1f2937);\n\n                      &:not(:first-child)::before {\n                        border-left-color: var(--color-neutral-800, #1f2937);\n                      }\n\n                      &:not(:last-child)::after {\n                        border-left-color: var(--color-neutral-800, #1f2937);\n                      }\n\n                      &:last-child {\n                        background-color: var(--color-primary-900);\n\n                        &::before {\n                          border-left-color: var(--color-primary-900);\n                        }\n                      }\n                    }\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                  .breadcrumbs {\n                    font-size: var(--text-xs, 0.75rem);\n\n                    & ol, & ul, & .list {\n                      gap: var(--space-1);\n\n                      & li, & .item {\n                        gap: var(--space-1);\n\n                        &:not(:last-child)::after {\n                          font-size: 0.75em;\n                        }\n                      }\n                    }\n\n                    & a, & .link {\n                      padding: var(--space-1);\n                    }\n\n/* Auto-truncate on mobile (unless keep-all is set) */\n                    &:not(.keep-all) {\n                      & ol li:not(:first-child, :last-child),\n                      & ul li:not(:first-child, :last-child),\n                      & .item:not(:first-child, :last-child) {\n                        display: none;\n                      }\n\n                      & ol li:first-child + li:not(:last-child),\n                      & ul li:first-child + li:not(:last-child),\n                      & .item:first-child + .item:not(:last-child) {\n                        display: flex;\n                      }\n\n                      & ol li:first-child + li::before,\n                      & ul li:first-child + li::before,\n                      & .item:first-child + .item::before {\n                        color: var(--breadcrumb-separator-color);\n                        content: \"...\";\n                        margin: 0 var(--breadcrumb-gap);\n                      }\n                    }\n                  }\n                }\n\n                @media (width <= 480px) {\n                  .breadcrumbs:not(.keep-all) {\n                    & ol, & ul, & .list {\n                      & li:not(:first-child, :last-child),\n                      & .item:not(:first-child, :last-child) {\n                        display: none;\n                      }\n\n                      & li:nth-last-child(2)::before,\n                      & .item:nth-last-child(2)::before {\n                        content: \"...\";\n                        margin-right: var(--space-1);\n                      }\n                    }\n                  }\n                }\n              }\n\n/* Print styles */\n              @media print {\n                .breadcrumbs {\n                  color: black;\n\n                  & a, & .link {\n                    color: black;\n                    text-decoration: underline;\n                  }\n\n                  & ol li:not(:last-child)::after,\n                  & ul li:not(:last-child)::after,\n                  & .separator::before {\n                    color: black;\n                  }\n                }\n              }\n\n/* High contrast mode */\n              @media (prefers-contrast: more) {\n                .breadcrumbs {\n                  & a, & .link {\n                    border: 1px solid transparent;\n                  }\n\n                  &.breadcrumbs-pills a,\n                  &.breadcrumbs-pills .link,\n                  &.breadcrumbs-arrows li,\n                  &.breadcrumbs-arrows .item {\n                    border: 2px solid;\n                  }\n                }\n              }\n\n/* Reduced motion */\n              @media (prefers-reduced-motion: reduce) {\n                .breadcrumbs {\n                  & a, & .link {\n                    transition: none;\n                  }\n                }\n              }\n            }\n\n\n/* Datei: ui/components/wizard.css */\n/*\n            * Wizard-Komponente\n            *\n            * Schrittweiser Navigationsablauf.\n            */\n\n/**\n            * Wizard-Komponente\n            *\n            * Schrittweise Navigationskomponenten für mehrstufige Prozesse.\n            * Wizards führen Benutzer durch komplexe Workflows wie Formulare oder Setups.\n            *\n            * @layer components.wizard\n            *\n            * Grundlegende Verwendung:\n            * <div class=\"wizard\">\n            *   <div class=\"steps\">\n            *     <div class=\"step completed\">\n            *       <span class=\"indicator\">1</span>\n            *       <span class=\"title\">Schritt 1</span>\n            *     </div>\n            *     <div class=\"step active\">\n            *       <span class=\"indicator\">2</span>\n            *       <span class=\"title\">Schritt 2</span>\n            *     </div>\n            *     <div class=\"step\">\n            *       <span class=\"indicator\">3</span>\n            *       <span class=\"title\">Schritt 3</span>\n            *     </div>\n            *   </div>\n            *   <div class=\"content\">\n            *     <!-- Aktuelle Schrittinhalte -->\n            *   </div>\n            *   <div class=\"actions\">\n            *     <button class=\"button\">Zurück</button>\n            *     <button class=\"button primary\">Weiter</button>\n            *   </div>\n            * </div>\n            *\n            * Varianten:\n            * <div class=\"wizard horizontal\">...</div>\n            * <div class=\"wizard vertical\">...</div>\n            *\n            * Stilvarianten:\n            * <div class=\"wizard numbered\">...</div>     <!-- Mit Nummern -->\n            * <div class=\"wizard with-icons\">...</div>        <!-- Mit Icons -->\n            * <div class=\"wizard with-progress\">...</div>     <!-- Mit Fortschrittsbalken -->\n            *\n            * Zustandsanzeige:\n            * <div class=\"step completed\">...</div>  <!-- Abgeschlossen -->\n            * <div class=\"step active\">...</div>     <!-- Aktiv -->\n            * <div class=\"step error\">...</div>      <!-- Mit Fehler -->\n            * <div class=\"step disabled\">...</div>   <!-- Deaktiviert -->\n            */\n\n            @layer components {\n              .wizard {\n                display: flex;\n                flex-direction: column;\n                gap: var(--space-4);\n                width: 100%;\n\n/* Schrittanzeige im Wizard */\n                .steps {\n                  display: flex;\n                  gap: var(--space-2);\n                  justify-content: space-between;\n                  margin-bottom: var(--space-6);\n                  position: relative;\n\n/* Verbindungslinie zwischen Schritten */\n                  &::before {\n                    background-color: var(--color-gray-300, #d1d5db);\n                    content: '';\n                    height: 2px;\n                    left: 0%;\n                    position: absolute;\n                    top: calc(var(--step-size, 2rem) / 2);\n                    width: 100%;\n                    z-index: 0;\n                  }\n                }\n\n/* Einzelner Schritt */\n                .step {\n                  --step-size: 2rem;\n\n                  align-items: center;\n                  display: flex;\n                  flex: 1;\n                  flex-direction: column;\n                  padding-top: calc(var(--step-size, 2rem) + var(--space-2));\n                  position: relative;\n                  text-align: center;\n                  z-index: 1;\n\n/* Schritt-Indikator (Kreis) */\n                  .indicator {\n                    align-items: center;\n                    background-color: var(--color-white, #fff);\n                    border: 2px solid var(--color-gray-300, #d1d5db);\n                    border-radius: 50px;\n                    color: var(--color-gray-600);\n                    display: flex;\n                    font-size: var(--font-size-sm, 0.875rem);\n                    font-weight: var(--font-weight-medium, 500);\n                    height: var(--step-size, 2rem);\n                    justify-content: center;\n                    position: absolute;\n                    top: 0%;\n                    width: var(--step-size, 2rem);\n                    z-index: 2;\n                  }\n\n/* Schritt-Titel */\n                  .title {\n                    color: var(--color-gray-700);\n                    font-size: var(--font-size-sm, 0.875rem);\n                    font-weight: var(--font-weight-normal);\n                    margin-top: var(--space-1);\n                  }\n\n/* Optionale Beschreibung */\n                  .description {\n                    color: var(--color-gray-600);\n                    font-size: var(--font-size-xs);\n                    margin-top: var(--space-1);\n                    max-width: 14%0px;\n                  }\n\n/* Schritt-Zustände */\n                  &.active {\n                    .indicator {\n                      background-color: var(--color-primary, #3b82f6);\n                      border-color: var(--color-primary, #3b82f6);\n                      color: white;\n                    }\n\n                    .title {\n                      color: var(--color-primary, #3b82f6);\n                      font-weight: var(--font-weight-medium, 500);\n                    }\n                  }\n\n                  &.completed {\n                    .indicator {\n                      background-color: var(--color-success, #10b981);\n                      border-color: var(--color-success, #10b981);\n                      color: white;\n\n/* Optional: Häkchen statt Nummer */\n                      &::after {\n                        content: '✓';\n                      }\n                    }\n\n/* Verbindungslinie nach dem abgeschlossenen Schritt */\n                    &::after {\n                      background-color: var(--color-success, #10b981);\n                      content: '';\n                      height: 2px;\n                      left: 50%;\n                      position: absolute;\n                      top: calc(var(--step-size, 2rem) / 2);\n                      width: 100%;\n                      z-index: 0;\n                    }\n\n                    &:last-child::after {\n                      display: none;\n                    }\n                  }\n\n                  &.error {\n                    .indicator {\n                      background-color: var(--color-error, #ef4444);\n                      border-color: var(--color-error, #ef4444);\n                      color: white;\n                    }\n\n                    .title {\n                      color: var(--color-error, #ef4444);\n                    }\n                  }\n\n                  &.disabled {\n                    cursor: not-allowed;\n                    opacity: 5000%;\n                  }\n                }\n\n/* Inhaltsbereich */\n                .content {\n                  background-color: var(--color-white, #fff);\n                  border: 1px solid var(--color-gray-200);\n                  border-radius: var(--radius-md, 0.375rem);\n                  padding: var(--space-6);\n                }\n\n/* Aktionsbuttons */\n                .actions {\n                  display: flex;\n                  justify-content: space-between;\n                  margin-top: var(--space-4);\n\n/* Wenn nur ein Button (z.B. beim ersten Schritt) */\n                  &.end {\n                    justify-content: flex-end;\n                  }\n                }\n\n/* Ausrichtungsvarianten */\n                &.vertical {\n                  align-items: flex-start;\n                  flex-direction: row;\n\n                  .steps {\n                    flex-direction: column;\n                    gap: var(--space-6);\n                    margin-bottom: 0%;\n                    margin-right: var(--space-8);\n                    width: 24%0px;\n\n                    &::before {\n                      height: 100%;\n                      left: calc(var(--step-size, 2rem) / 2);\n                      top: 0%;\n                      width: 2px;\n                    }\n                  }\n\n                  .step {\n                    align-items: flex-start;\n                    flex-direction: row;\n                    padding-left: calc(var(--step-size, 2rem) + var(--space-4));\n                    padding-top: 0%;\n                    text-align: left;\n\n                    .indicator {\n                      left: 0%;\n                      top: 0%;\n                    }\n\n                    &.completed::after {\n                      height: 100%;\n                      left: calc(var(--step-size, 2rem) / 2);\n                      top: 50%;\n                      width: 2px;\n                    }\n                  }\n\n                  .content {\n                    flex: 1;\n                  }\n                }\n\n/* Mit Fortschrittsbalken */\n                &.with-progress {\n                  .progress-bar {\n                    background-color: var(--color-gray-200);\n                    border-radius: var(--radius-full, 9999px);\n                    height: 0%.5rem;\n                    margin-bottom: var(--space-6);\n                    overflow: hidden;\n\n                    .fill {\n                      background-color: var(--color-primary, #3b82f6);\n                      height: 100%;\n                      transition: width 0.3s ease-in-out;\n                    }\n                  }\n                }\n              }\n            }\n\n/* Datei: ui/components/tooltip.css */\n/**\n            * Tooltip-Komponente\n            *\n            * Informations-Tooltips und Hinweistexte für UI-Elemente.\n            * Tooltips bieten zusätzliche Informationen oder Hilfestellungen zu Elementen.\n            *\n            * @layer components.tooltip\n            *\n            * Grundlegende Verwendung:\n            * <div class=\"tooltip\">\n            *   <button class=\"trigger\">Hover mich</button>\n            *   <div class=\"content\">Tooltip-Inhalt</div>\n            * </div>\n            *\n            * Positionsvarianten:\n            * <div class=\"tooltip top\">Oben</div>\n            * <div class=\"tooltip right\">Rechts</div>\n            * <div class=\"tooltip bottom\">Unten</div>\n            * <div class=\"tooltip left\">Links</div>\n            *\n            * Größenvarianten:\n            * <div class=\"tooltip sm\">Klein</div>\n            * <div class=\"tooltip md\">Mittel (Standard)</div>\n            * <div class=\"tooltip lg\">Groß</div>\n            *\n            * Varianten:\n            * <div class=\"tooltip light\">Heller Hintergrund</div>\n            * <div class=\"tooltip dark\">Dunkler Hintergrund (Standard)</div>\n            * <div class=\"tooltip primary\">Primärfarbe</div>\n            *\n            * Mit Pfeil:\n            * <div class=\"tooltip arrow\">\n            *   <button class=\"trigger\">Mit Pfeil</button>\n            *   <div class=\"content\">Tooltip mit Pfeil</div>\n            * </div>\n            *\n            * Mit HTML-Inhalt:\n            * <div class=\"tooltip\">\n            *   <button class=\"trigger\">Komplexer Inhalt</button>\n            *   <div class=\"content\">\n            *     <h4>Überschrift</h4>\n            *     <p>Mehrere Zeilen Text sind möglich.</p>\n            *   </div>\n            * </div>\n            *\n            * Flüssig skalierende Tooltips (nutzt interpolate-size):\n            * <div class=\"tooltip adaptive\">\n            *   <button class=\"trigger\">Adaptiver Tooltip</button>\n            *   <div class=\"content\">Dieser Tooltip skaliert flüssig mit der Container-Größe</div>\n            * </div>\n            *\n            * Mit Schlüsselwort-Größen:\n            * <div class=\"tooltip fluid small\">Klein</div>\n            * <div class=\"tooltip fluid medium\">Mittel</div>\n            * <div class=\"tooltip fluid large\">Groß</div>\n            */\n\n\n/**\n            * Tooltip Component Structure:\n            *\n            * <div class=\"tooltip\" role=\"tooltip\">\n            *   <div class=\"tooltip-content\">Tooltip text</div>\n            *   <div class=\"tooltip-arrow\"></div>\n            * </div>\n            *\n            * Positions: .tooltip--top, .tooltip--bottom, .tooltip--left, .tooltip--right\n            * Modifiers: .tooltip--sm, .tooltip--lg\n            */\n            @layer components {\n              .tooltip {\n                display: inline-block;\n                position: relative;\n\n                .trigger {\n                  cursor: pointer;\n                  display: inline-block;\n                }\n\n                .content {\n                  background-color: var(--color-neutral-900, #111827);\n                  border-radius: var(--radius-sm, 0.25rem);\n                  box-shadow: var(--shadow-sm, 0 1px 2px 0 rgb(0 0 0 / 5%));\n                  color: var(--color-text-inverse, white);\n                  font-size: var(--text-xs, var(--font-size-xs, 0.75rem));\n                  max-width: var(--tooltip-max-width, 200px);\n                  opacity: 0%;\n                  padding: var(--tooltip-padding, 0.5rem 0.75rem);\n                  position: absolute;\n                  transition: opacity var(--transition-duration-fast, 200ms) var(--transition-timing-ease, ease),\n                  visibility var(--transition-duration-fast, 200ms) var(--transition-timing-ease, ease);\n                  visibility: hidden;\n                  white-space: nowrap;\n                  z-index: var(--z-index-tooltip, 1000);\n                }\n\n/* Trigger-Interaktion */\n                &:hover .content,\n                .trigger:focus + .content {\n                  opacity: 1;\n                  visibility: visible;\n                }\n\n/* Positionsvarianten */\n                &.top .content {\n                  bottom: 100%;\n                  left: 50%;\n                  margin-bottom: var(--space-1, 0.25rem);\n                  transform: translateX(-50%) translateY(-8px);\n                }\n\n                &.right .content {\n                  left: 100%;\n                  margin-left: var(--space-1, 0.25rem);\n                  top: 50%;\n                  transform: translateY(-50%) translateX(8px);\n                }\n\n                &.bottom .content {\n                  left: 50%;\n                  margin-top: var(--space-1, 0.25rem);\n                  top: 100%;\n                  transform: translateX(-50%) translateY(8px);\n                }\n\n                &.left .content {\n                  margin-right: var(--space-1, 0.25rem);\n                  right: 100%;\n                  top: 50%;\n                  transform: translateY(-50%) translateX(-8px);\n                }\n\n/* Größenvarianten */\n                &.sm .content {\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                &.lg .content {\n                  font-size: var(--text-sm, var(--font-size-sm, 0.875rem));\n                  max-width: 25%0px;\n                  padding: var(--space-3, 0.75rem) var(--space-4, 1rem);\n                  white-space: normal;\n                }\n\n/* Farbvarianten */\n                &.light .content {\n                  background-color: var(--color-background, white);\n                  border: 1px solid var(--color-border, var(--color-neutral-200, #e5e7eb));\n                  color: var(--color-text, var(--color-neutral-900, #111827));\n                }\n\n                &.dark .content {\n                  background-color: var(--color-neutral-900, #111827);\n                  color: var(--color-text-inverse, white);\n                }\n\n                &.primary .content {\n                  background-color: var(--color-primary-500, #3b82f6);\n                  color: var(--color-text-inverse, white);\n                }\n\n                &.success .content {\n                  background-color: var(--color-success-500, #10b981);\n                  color: var(--color-text-inverse, white);\n                }\n\n                &.warning .content {\n                  background-color: var(--color-warning-500, #f59e0b);\n                  color: var(--color-warning-900, #78350f);\n                }\n\n                &.error .content {\n                  background-color: var(--color-error-500, #ef4444);\n                  color: var(--color-text-inverse, white);\n                }\n\n/* Flüssig skalierende Tooltips mit interpolate-size: allow-keywords */\n                &.fluid {\n/* Basisgröße verwenden */\n                  font-size: medium;\n\n                  .content {\n                    border-radius: 0.25em;\n                    box-shadow: 0 0.1em 0.3em rgb(0 0 0 / 2000%);\n                    font-size: 0.8em;\n\n/* em-Einheiten für flüssige Skalierung basierend auf font-size */\n                    padding: 0.5em 0.75em;\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\n/* Container-adaptive Tooltips */\n                &.adaptive {\n                  container-type: inline-size;\n\n                  .content {\n                    border-radius: clamp(var(--radius-sm, 0.25rem), 0.5cqi, var(--radius-md, 0.375rem));\n                    font-size: clamp(var(--text-xs, 0.75rem), 2cqi, var(--text-base, 1rem));\n                    max-width: 90%cqi; /* 90 der Container-Breite */\n                    padding: clamp(var(--space-1, 0.25rem), 1cqi, var(--space-4, 1rem));\n                    white-space: normal;\n                  }\n\n                  &.arrow .content::before {\n                    height: clamp(6px, 1cqi, 12px);\n                    width: clamp(6px, 1cqi, 12px);\n                  }\n                }\n\n/* Mit Pfeil */\n                &.arrow .content::before {\n                  background-color: inherit;\n                  border: inherit;\n                  border-width: 1px;\n                  content: \"\";\n                  height: var(--tooltip-arrow-size, 8px);\n                  position: absolute;\n                  transform: rotate(45deg);\n                  width: var(--tooltip-arrow-size, 8px);\n                }\n\n                &.arrow.top .content::before {\n                  bottom: -4px;\n                  left: 50%;\n                  transform: translateX(-50%) rotate(45deg);\n                }\n\n                &.arrow.right .content::before {\n                  left: -4px;\n                  top: 50%;\n                  transform: translateY(-50%) rotate(45deg);\n                }\n\n                &.arrow.bottom .content::before {\n                  left: 50%;\n                  top: -4px;\n                  transform: translateX(-50%) rotate(45deg);\n                }\n\n                &.arrow.left .content::before {\n                  right: -4px;\n                  top: 50%;\n                  transform: translateY(-50%) rotate(45deg);\n                }\n              }\n            }\n\n\n\n\n/* Datei: ui/components/toast.css */\n/**\n            * Toast-Komponente\n            *\n            * Toast-Benachrichtigungen für temporäre Hinweise.\n            */\n\n/**\n            * Toast-Komponente\n            *\n            * Temporäre Benachrichtigungen, die automatisch verschwinden.\n            * Toasts eignen sich für Systembenachrichtigungen, die den Benutzerfluss nicht unterbrechen sollen.\n            *\n            * @layer components.toast\n            *\n            * Grundlegende Verwendung:\n            * <div class=\"toast\">\n            *   <div class=\"content\">Einfache Benachrichtigung</div>\n            * </div>\n            *\n            * Varianten:\n            * <div class=\"toast success\">Erfolg</div>\n            * <div class=\"toast error\">Fehler</div>\n            * <div class=\"toast warning\">Warnung</div>\n            * <div class=\"toast info\">Information</div>\n            *\n            * Mit Icon:\n            * <div class=\"toast\">\n            *   <div class=\"icon\"><!-- Icon hier --></div>\n            *   <div class=\"content\">Benachrichtigung mit Icon</div>\n            * </div>\n            *\n            * Schließbar:\n            * <div class=\"toast\">\n            *   <div class=\"content\">Schließbare Benachrichtigung</div>\n            *   <button class=\"close\">&times;</button>\n            * </div>\n            */\n\n/**\n            * Toast Component Structure:\n            *\n            * <div class=\"toast toast--success\" role=\"alert\">\n            *   <div class=\"toast-icon\"><!-- Icon --></div>\n            *   <div class=\"toast-content\">\n            *     <div class=\"toast-title\">Success!</div>\n            *     <div class=\"toast-message\">Operation completed</div>\n            *   </div>\n            *   <button class=\"toast-close\" aria-label=\"Close\">&times;</button>\n            * </div>\n            *\n            * Types: .toast--info, .toast--success, .toast--warning, .toast--error\n            * Positions: .toast--top-right, .toast--top-left, .toast--bottom-right, .toast--bottom-left\n            */\n\n/* Animation - außerhalb von @layer definieren */\n\n/* Komponenten-Styles */\n            @layer components {\n              .toast {\n                align-items: center;\n                background-color: var(--color-gray-800);\n                border-radius: var(--radius-md, 0.375rem);\n                box-shadow: var(--shadow-md);\n                color: white;\n                display: flex;\n                gap: var(--space-3);\n                margin-bottom: var(--space-3);\n                max-width: 2%4rem;\n                padding: var(--space-3) var(--space-4);\n\n/* Inhaltselemente */\n                .content {\n                  flex: 1;\n                }\n\n                .icon {\n                  flex-shrink: 0;\n                  font-size: 1.25rem;\n                }\n\n                .close {\n                  background: none;\n                  border: none;\n                  color: currentcolor;\n                  cursor: pointer;\n                  flex-shrink: 0;\n                  font-size: 1.25rem;\n                  opacity: 0.7;\n                  padding: 0;\n\n                  &:hover {\n                    opacity: 1;\n                  }\n                }\n\n/* Farbvarianten */\n                &.success {\n                  background-color: var(--color-success, #10b981);\n                }\n\n                &.error {\n                  background-color: var(--color-error, #ef4444);\n                }\n\n                &.warning {\n                  background-color: var(--color-warning, #f59e0b);\n                  color: black;\n                }\n\n                &.info {\n                  background-color: var(--color-info, #3b82f6);\n                }\n\n/* Positionen (als zusätzliche Klasse auf einem Container) */\n                &-container {\n                  display: flex;\n                  flex-direction: column;\n                  gap: var(--space-2);\n                  padding: var(--space-4);\n                  position: fixed;\n                  z-index: var(--z-index-toast);\n\n                  &.top-right {\n                    right: 0%;\n                    top: 0%;\n                  }\n\n                  &.top-left {\n                    left: 0%;\n                    top: 0%;\n                  }\n\n                  &.bottom-right {\n                    bottom: 0%;\n                    right: 0%;\n                  }\n\n                  &.bottom-left {\n                    bottom: 0%;\n                    left: 0%;\n                  }\n                }\n              }\n            }\n\n/* Animations-Styles */\n            @layer animations {\n              .toast {\n                animation: slideIn 0.3s ease-out;\n              }\n            }\n\n/* Datei: ui/components/tag.css */\n/**\n            * Tags / Chips / Pills\n            *\n            * Tags, chips, and pills are compact elements used to represent attributes,\n            * categories, or options. They often support interactions like removal,\n            * selection, or filtering. Common in form inputs, filters, and categorization.\n            *\n            * @layer: components\n            *\n            * Accessibility:\n            * - Include appropriate ARIA roles (e.g., option for selectable tags)\n            * - Ensure keyboard accessibility for interactive tags\n            * - Provide clear focus indicators\n            * - Associate tags with their purpose using aria-label when needed\n            */\n\n\n/**\n            * Tag Component Structure:\n            *\n            * <span class=\"tag tag--primary\">\n            *   <span class=\"tag-content\">Tag text</span>\n            *   <button class=\"tag-remove\" aria-label=\"Remove\">&times;</button>\n            * </span>\n            *\n            * Types: .tag--primary, .tag--secondary, .tag--success, .tag--warning, .tag--error\n            * Sizes: .tag--sm, .tag--md, .tag--lg\n            * Modifiers: .tag--removable, .tag--rounded\n            */\n            @layer components {\n/* Base tag styles */\n              .tag {\n                align-items: center;\n                background-color: var(--color-neutral-100, #f3f4f6);\n                border-radius: var(--radius-full, 9999px);\n                color: var(--color-neutral-800, #1f2937);\n                display: inline-flex;\n                font-size: var(--text-sm, 0.875rem);\n                font-weight: var(--font-medium, 500);\n                justify-content: center;\n                line-height: 1%;\n                max-width: 100%;\n                padding: 0.375rem 0.75rem;\n                white-space: nowrap;\n              }\n\n/* Tag sizes */\n              .tag--xs {\n                font-size: var(--text-xs, 0.75rem);\n                height: 1%.5rem;\n                padding: 0.25rem 0.5rem;\n              }\n\n              .tag--sm {\n                height: 1%.75rem;\n                padding: 0.3125rem 0.625rem;\n              }\n\n              .tag--md {\n                height: 2rem;\n                padding: 0.375rem 0.75rem;\n              }\n\n              .tag--lg {\n                font-size: var(--text-base);\n                height: 2.5rem;\n                padding: 0.5rem 1rem;\n              }\n\n/* Tag shapes */\n              .tag--rounded {\n                border-radius: var(--radius-md, 0.375rem);\n              }\n\n              .tag--square {\n                border-radius: var(--radius-sm, 0.125rem);\n              }\n\n/* Tag with icon */\n              & .icon {\n                display: inline-flex;\n                flex-shrink: 0;\n                height: 1em;\n                margin-right: 00%.5em;\n                width: 1em;\n              }\n\n/* Tag with dismiss/close button */\n              & .close {\n                align-items: center;\n                background: transparent;\n                border: none;\n                border-radius: var(--radius-full, 9999px);\n                color: currentColor;\n                cursor: pointer;\n                display: inline-flex;\n                flex-shrink: 0;\n                height: 1%.25em;\n                justify-content: center;\n                margin-left: 00%.5em;\n                margin-right: -0.25em;\n                opacity: 0.7;\n                padding: 0;\n                transition: opacity 0.2s, background-color 0.2s;\n                width: 1%.25em;\n              }\n\n              & .close:hover {\n                background-color: rgb(0 0 0 / 1000%);\n                opacity: 1;\n              }\n\n/* Tag color variants */\n              .tag--primary {\n                background-color: var(--color-primary-100, #dbeafe);\n                color: var(--color-primary-800, #1e40af);\n              }\n\n              .tag--secondary {\n                background-color: var(--color-secondary-100, #f1f5f9);\n                color: var(--color-secondary-800, #1e293b);\n              }\n\n              .tag--success {\n                background-color: var(--color-success-100, #d1fae5);\n                color: var(--color-success-800, #065f46);\n              }\n\n              .tag--danger {\n                background-color: var(--color-error-100, #fee2e2);\n                color: var(--color-error-800, #991b1b);\n              }\n\n              .tag--warning {\n                background-color: var(--color-warning-100, #fef3c7);\n                color: var(--color-warning-800, #92400e);\n              }\n\n              .tag--info {\n                background-color: var(--color-info-100, #dbeafe);\n                color: var(--color-info-800, #1e40af);\n              }\n\n/* Solid color tags */\n              .tag--solid.tag--primary {\n                background-color: var(--color-primary-500);\n                color: white;\n              }\n\n              .tag--solid.tag--secondary {\n                background-color: var(--color-secondary-500);\n                color: white;\n              }\n\n              .tag--solid.tag--success {\n                background-color: var(--color-success-500);\n                color: white;\n              }\n\n              .tag--solid.tag--danger {\n                background-color: var(--color-error-500);\n                color: white;\n              }\n\n              .tag--solid.tag--warning {\n                background-color: var(--color-warning-500);\n                color: var(--color-warning-900);\n              }\n\n              .tag--solid.tag--info {\n                background-color: var(--color-info-500);\n                color: white;\n              }\n\n/* Outlined tags */\n              .tag--outlined {\n                background-color: transparent;\n                border: 1px solid currentColor;\n                color: var(--color-neutral-600);\n              }\n\n              .tag--outlined.tag--primary {\n                color: var(--color-primary-600, #2563eb);\n              }\n\n              .tag--outlined.tag--secondary {\n                color: var(--color-secondary-600);\n              }\n\n              .tag--outlined.tag--success {\n                color: var(--color-success-600);\n              }\n\n              .tag--outlined.tag--danger {\n                color: var(--color-error-600);\n              }\n\n              .tag--outlined.tag--warning {\n                color: var(--color-warning-600);\n              }\n\n              .tag--outlined.tag--info {\n                color: var(--color-info-600);\n              }\n\n/* Interactive tags (chips) */\n              .tag--interactive {\n                cursor: pointer;\n                transition: background-color 0.2s, color 0.2s, box-shadow 0.2s;\n                user-select: none;\n              }\n\n              .tag--interactive:hover {\n                background-color: var(--color-neutral-200, #e5e7eb);\n              }\n\n              .tag--interactive:focus {\n                box-shadow: 0 0 0 2px var(--color-primary-200);\n                outline: none;\n              }\n\n/* Selected state */\n              .tag--selected {\n                background-color: var(--color-primary-500);\n                color: white;\n              }\n\n              .tag--selected:hover {\n                background-color: var(--color-primary-600, #2563eb);\n              }\n\n/* Disabled state */\n              .tag--disabled {\n                cursor: not-allowed;\n                opacity: 6000%;\n              }\n\n              .tag--disabled:hover {\n                background-color: inherit;\n              }\n\n/* Avatar tag */\n              .tag--avatar & .avatar {\n                border-radius: var(--radius-full, 9999px);\n                height: 1%.25em;\n                margin-right: 00%.5em;\n                object-fit: cover;\n                width: 1%.25em;\n              }\n\n/* Counter tag */\n              & .counter {\n                align-items: center;\n                background-color: rgb(0 0 0 / 1000%);\n                border-radius: var(--radius-full, 9999px);\n                display: inline-flex;\n                font-size: 0.85em;\n                font-weight: var(--font-bold);\n                height: 1%.25em;\n                justify-content: center;\n                margin-left: 00%.5em;\n                min-width: 1%.25em;\n                padding: 0 0.25em;\n              }\n\n/* Tag container (for multiple tags) */\n              .tag-container {\n                display: flex;\n                flex-wrap: wrap;\n                gap: 0.5rem;\n              }\n\n/* Responsive truncation for long tags */\n              .tag--truncate {\n                max-width: 16%0px;\n              }\n\n              .tag--truncate & .label {\n                overflow: hidden;\n                text-overflow: ellipsis;\n                white-space: nowrap;\n              }\n\n/* Responsive adjustments */\n              @media (max-width: 640px) {\n                .tag--responsive {\n                  font-size: var(--text-xs, 0.75rem);\n                  padding: 0.25rem 0.5rem;\n                }\n\n                .tag--truncate {\n                  max-width: 12%0px;\n                }\n              }\n            }\n\n/* Datei: ui/components/tabs.css */\n/**\n            * Tabs-Komponente\n            *\n            * Tab-Navigation für das Umschalten zwischen verschiedenen Inhaltsbereichen.\n            * Tabs ermöglichen ein platzsparendes Design für verschiedene Inhaltsgruppen.\n            *\n            * @layer components.tabs\n            *\n            * Grundlegende Verwendung:\n            * <div class=\"tabs\">\n            *   <div class=\"nav\">\n            *     <button class=\"tab active\">Tab 1</button>\n            *     <button class=\"tab\">Tab 2</button>\n            *     <button class=\"tab\">Tab 3</button>\n            *   </div>\n            *   <div class=\"content\">\n            *     <div class=\"panel active\">Inhalt Tab 1</div>\n            *     <div class=\"panel\">Inhalt Tab 2</div>\n            *     <div class=\"panel\">Inhalt Tab 3</div>\n            *   </div>\n            * </div>\n            *\n            * Varianten:\n            * <div class=\"tabs pills\">...</div>  <!-- Pill-Style Tabs -->\n            * <div class=\"tabs underline\">...</div>  <!-- Unterstrichene Tabs -->\n            * <div class=\"tabs boxed\">...</div>  <!-- Box-Style Tabs -->\n            *\n            * Ausrichtungen:\n            * <div class=\"tabs horizontal\">...</div>  <!-- Horizontal (Standard) -->\n            * <div class=\"tabs vertical\">...</div>  <!-- Vertikale Tabs -->\n            *\n            * Größen:\n            * <div class=\"tabs sm\">...</div>  <!-- Klein -->\n            * <div class=\"tabs md\">...</div>  <!-- Medium (Standard) -->\n            * <div class=\"tabs lg\">...</div>  <!-- Groß -->\n            */\n\n\n/**\n            * Tabs Component Structure:\n            *\n            * <div class=\"tabs\">\n            *   <div class=\"tabs-list\" role=\"tablist\">\n            *     <button class=\"tab-item\" role=\"tab\" aria-selected=\"true\">Tab 1</button>\n            *     <button class=\"tab-item\" role=\"tab\">Tab 2</button>\n            *   </div>\n            *   <div class=\"tab-panels\">\n            *     <div class=\"tab-panel\" role=\"tabpanel\">Panel 1 content</div>\n            *     <div class=\"tab-panel\" role=\"tabpanel\" hidden>Panel 2 content</div>\n            *   </div>\n            * </div>\n            *\n            * Variants: .tabs--vertical, .tabs--pills, .tabs--underlined\n            * Modifiers: .tabs--justify, .tabs--center\n            */\n            @layer components {\n              .tabs {\n                display: flex;\n                flex-direction: column;\n\n/* Tab-Navigation */\n                .nav {\n                  border-bottom: 1px solid var(--color-border, var(--color-neutral-300, #d1d5db));\n                  display: flex;\n                  gap: var(--tab-gap, var(--space-4, 1rem));\n                }\n\n/* Tab-Buttons */\n                .tab {\n                  background: none;\n                  border: none;\n                  color: var(--color-text-muted, var(--color-neutral-700, #374151));\n                  cursor: pointer;\n                  font-size: var(--text-base, var(--font-size-base, 1rem));\n                  padding: var(--tab-padding, 0.5rem 1rem);\n                  transition: color var(--transition-duration-fast, 150ms) var(--transition-timing-ease, ease),\n                  border-color var(--transition-duration-fast, 150ms) var(--transition-timing-ease, ease);\n\n                  &.active {\n                    border-bottom: 2px solid var(--color-primary-500, #3b82f6);\n                    color: var(--color-primary-600, #2563eb);\n                    font-weight: var(--font-medium, var(--font-weight-medium, 500));\n                  }\n\n                  &:hover:not(.active) {\n                    color: var(--color-primary-500, #3b82f6);\n                  }\n\n                  &:focus {\n                    box-shadow: 0 0 0 2px var(--color-primary-200, #bfdbfe);\n                    outline: none;\n                  }\n\n                  &:disabled {\n                    color: var(--color-neutral-400, #9ca3af);\n                    cursor: not-allowed;\n\n                    &:hover {\n                      color: var(--color-neutral-400, #9ca3af);\n                    }\n                  }\n                }\n\n/* Inhaltsbereich */\n                .content {\n                  padding: var(--tab-content-padding, 1rem 0);\n                }\n\n/* Panel (Inhaltsbereich je Tab) */\n                .panel {\n                  display: none;\n\n                  &.active {\n                    display: block;\n                  }\n                }\n\n/* Varianten */\n                &.pills {\n                  .nav {\n                    border-bottom: none;\n                    gap: var(--space-2, 0.5rem);\n                  }\n\n                  .tab {\n                    border-radius: var(--radius-full, 9999px);\n                    padding: var(--space-2, 0.5rem) var(--space-4, 1rem);\n\n                    &.active {\n                      background-color: var(--color-primary-500, #3b82f6);\n                      border-bottom: none;\n                      color: var(--color-text-inverse, white);\n                    }\n\n                    &:hover:not(.active) {\n                      background-color: var(--color-neutral-100, #f3f4f6);\n                    }\n                  }\n                }\n\n                &.underline {\n                  .tab {\n                    border-bottom: 2px solid transparent;\n                    margin-bottom: -1px;\n\n                    &.active {\n                      border-bottom-color: var(--color-primary-500, #3b82f6);\n                    }\n                  }\n                }\n\n                &.boxed {\n                  .nav {\n                    border-bottom: none;\n                    gap: 0;\n                  }\n\n                  .tab {\n                    background-color: var(--color-neutral-50, #f9fafb);\n                    border: 1px solid var(--color-border, var(--color-neutral-300, #d1d5db));\n                    border-bottom: none;\n                    border-radius: var(--radius-md, 0.375rem) var(--radius-md, 0.375rem) 0 0;\n                    margin-right: -1px;\n\n                    &.active {\n                      background-color: var(--color-background, white);\n                      position: relative;\n                      z-index: 1;\n                    }\n                  }\n\n                  .content {\n                    border: 1px solid var(--color-border, var(--color-neutral-300, #d1d5db));\n                    border-radius: 0 var(--radius-md, 0.375rem) var(--radius-md, 0.375rem) var(--radius-md, 0.375rem);\n                    padding: var(--space-4, 1rem);\n                  }\n                }\n\n/* Ausrichtungen */\n                &.horizontal {\n/* Standard (wie oben definiert) */\n                }\n\n                &.vertical {\n                  align-items: flex-start;\n                  flex-direction: row;\n\n                  .nav {\n                    border-bottom: none;\n                    border-right: 1px solid var(--color-border, var(--color-neutral-300, #d1d5db));\n                    flex-direction: column;\n                    gap: var(--space-2, 0.5rem);\n                    margin-right: var(--space-4, 1rem);\n                    padding-right: var(--space-4, 1rem);\n                  }\n\n                  .tab {\n                    border-bottom: none;\n                    text-align: left;\n                    width: 100%;\n\n                    &.active {\n                      border-bottom: none;\n                      border-right: 2px solid var(--color-primary-500, #3b82f6);\n                      margin-right: -1px;\n                    }\n                  }\n                }\n\n/* Größenvarianten */\n                &.sm {\n                  .tab {\n                    font-size: var(--text-sm, var(--font-size-sm, 0.875rem));\n                    padding: var(--space-1, 0.25rem) var(--space-2, 0.5rem);\n                  }\n\n                  .content {\n                    padding: var(--space-2, 0.5rem) 0;\n                  }\n                }\n\n                &.lg {\n                  .tab {\n                    font-size: var(--text-lg, var(--font-size-lg, 1.125rem));\n                    padding: var(--space-3, 0.75rem) var(--space-6, 1.5rem);\n                  }\n\n                  .content {\n                    padding: var(--space-6, 1.5rem) 0;\n                  }\n                }\n\n/* Farbvarianten */\n                &.success .tab.active {\n                  border-bottom-color: var(--color-success-500, #10b981);\n                  color: var(--color-success-600, #059669);\n                }\n\n                &.warning .tab.active {\n                  border-bottom-color: var(--color-warning-500, #f59e0b);\n                  color: var(--color-warning-600, #d97706);\n                }\n\n                &.error .tab.active {\n                  border-bottom-color: var(--color-error-500, #ef4444);\n                  color: var(--color-error-600, #dc2626);\n                }\n\n                &.secondary .tab.active {\n                  border-bottom-color: var(--color-secondary-500, #6b7280);\n                  color: var(--color-secondary-600, #4b5563);\n                }\n              }\n            }\n\n\n\n/* Datei: ui/components/tables.css */\n/**\n            * Tabellen-Element Styles\n            */\n\n            @layer elements {\n/* Tabellen */\n              table {\n                border-collapse: collapse;\n                margin: 1rem 0;\n                width: 100%;\n              }\n\n              th, td {\n                border: 1px solid var(--color-border, #e5e7eb);\n                padding: 0.75rem;\n                text-align: left;\n              }\n\n              th {\n                background-color: var(--color-background-alt, #f9fafb);\n              }\n            }\n\n/* Datei: ui/components/table.css */\n/*\n            * Table-Komponente\n            *\n            * Gestylte Tabellen mit responsivem Verhalten.\n            */\n\n/**\n            * Table-Komponente\n            *\n            * Tabellen und Datenraster für strukturierte Informationsdarstellung.\n            * Tabellen eignen sich für den Vergleich von Daten und die Darstellung von strukturierten Informationen.\n            *\n            * @layer components.table\n            *\n            * Grundlegende Verwendung:\n            * <table class=\"table\">\n            *   <thead>\n            *     <tr>\n            *       <th>Spalte 1</th>\n            *       <th>Spalte 2</th>\n            *     </tr>\n            *   </thead>\n            *   <tbody>\n            *     <tr>\n            *       <td>Zelle 1</td>\n            *       <td>Zelle 2</td>\n            *     </tr>\n            *   </tbody>\n            * </table>\n            *\n            * Varianten:\n            * <table class=\"table striped\">...</table>  <!-- Abwechselnd gefärbte Zeilen -->\n            * <table class=\"table bordered\">...</table>  <!-- Mit Rahmen -->\n            * <table class=\"table hoverable\">...</table> <!-- Hover-Effekt für Zeilen -->\n            * <table class=\"table compact\">...</table>   <!-- Kompaktes Layout -->\n            * <table class=\"table responsive\">...</table> <!-- Responsives Layout -->\n            *\n            * Zellenausrichtung:\n            * <td class=\"left\">Links ausgerichtet</td>\n            * <td class=\"center\">Zentriert</td>\n            * <td class=\"right\">Rechts ausgerichtet</td>\n            *\n            * Statuszeilen:\n            * <tr class=\"success\">...</tr>\n            * <tr class=\"warning\">...</tr>\n            * <tr class=\"danger\">...</tr>\n            *\n            * Flüssige Größenanpassung mit Schlüsselwörtern:\n            * <table class=\"table fluid\">...</table>\n            * <table class=\"table fluid small\">...</table>\n            * <table class=\"table fluid medium\">...</table>\n            * <table class=\"table fluid large\">...</table>\n            *\n            * Container-adaptive Tabelle:\n            * <div class=\"container-query\">\n            *   <table class=\"table adaptive\">...</table>\n            * </div>\n            */\n\n            @layer components {\n              .table {\n                border-collapse: collapse;\n                font-size: var(--text-sm, var(--font-size-sm, 0.875rem));\n                width: 100%;\n\n/* Basiselemente */\n                thead {\n                  background-color: var(--color-neutral-100, #f3f4f6);\n                }\n\n                th,\n                td {\n                  border: 1px solid var(--color-border, var(--color-neutral-300, #d1d5db));\n                  padding: var(--table-cell-padding, var(--space-3, 0.75rem));\n                  text-align: left;\n                }\n\n                th {\n                  color: var(--color-text, var(--color-neutral-900, #111827));\n                  font-weight: var(--font-semibold, var(--font-weight-semibold, 600));\n                  padding: var(--table-header-padding, 1rem 0.75rem);\n                }\n\n                td {\n                  color: var(--color-text-muted, var(--color-neutral-700, #374151));\n                }\n\n/* Tabellen-Varianten */\n                &.striped tbody tr:nth-child(odd) {\n                  background-color: var(--color-neutral-50, #f9fafb);\n                }\n\n                &.hoverable tbody tr:hover {\n                  background-color: var(--color-neutral-100, #f3f4f6);\n                  transition: background-color var(--transition-duration-fast, 150ms) var(--transition-timing-ease, ease);\n                }\n\n                &.bordered th,\n                &.bordered td {\n                  border: 1px solid var(--color-border, var(--color-neutral-300, #d1d5db));\n                }\n\n                &.compact th,\n                &.compact td {\n                  padding: var(--space-2, 0.5rem);\n                }\n\n/* Flüssige Größenanpassung mit interpolate-size: allow-keywords */\n                &.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\n                  th, td {\n                    font-size: 0.875em;\n                    padding: 0.75em;\n                  }\n\n                  thead {\n                    font-weight: var(--font-semibold, 600);\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\n/* Container-adaptive Größenanpassung */\n                &.adaptive {\n                  font-size: clamp(var(--text-xs, 0.75rem), 2cqi, var(--text-base, 1rem));\n\n                  th, td {\n                    padding: clamp(var(--space-1, 0.25rem), 1cqi, var(--space-4, 1rem));\n                  }\n\n                  @container (min-width: 300px) {\n                    th {\n                      font-weight: var(--font-bold, var(--font-weight-bold, 700));\n                    }\n                  }\n\n                  @container (min-width: 500px) {\n                    thead {\n                      position: sticky;\n                      top: 0%;\n                      z-index: 1;\n                    }\n                  }\n\n                  @container (min-width: 700px) {\n                    &.hoverable tbody tr:hover {\n                      box-shadow: var(--shadow-sm, 0 1px 2px 0 rgb(0 0 0 / 5%));\n                    }\n                  }\n                }\n\n                &.responsive {\n                  @media (max-width: 768px) {\n                    display: block;\n                    overflow-x: auto;\n                    white-space: nowrap;\n                  }\n                }\n\n/* Zellenausrichtungen */\n                .left {\n                  text-align: left;\n                }\n\n                .center {\n                  text-align: center;\n                }\n\n                .right {\n                  text-align: right;\n                }\n\n/* Statuszeilen */\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            }\n\n\n\n/* Datei: ui/components/spinner.css */\n/**\n            * Spinner\n            *\n            * Ladeanzeigen und Animationen für asynchrone Prozesse.\n            * Spinner zeigen Benutzern an, dass eine Operation im Hintergrund ausgeführt wird.\n            *\n            * @layer: elements\n            *\n            * Accessibility:\n            * - Verwende aria-busy für Container mit Ladezustand\n            * - Füge textuelle Beschreibungen für Screenreader hinzu\n            * - Vermeide blinkende Animationen, die Anfälle auslösen können\n            */\n\n/* Animationen */\n\n            @layer elements {\n/* Basis-Spinner */\n              .spinner {\n                animation: spin var(--spinner-duration, 0.6s) linear infinite;\n                border: var(--spinner-border-width, 2px) solid var(--color-neutral-200, #e5e7eb);\n                border-radius: 50px;\n                border-top-color: var(--color-primary-500, #3b82f6);\n                display: inline-block;\n                height: var(--spinner-size, 1.5rem);\n                width: var(--spinner-size, 1.5rem);\n              }\n\n/* Spinner Größen */\n              .spinner--xs {\n                border-width: 1px;\n                height: 1rem;\n                width: 1rem;\n              }\n\n              .spinner--sm {\n                border-width: 2px;\n                height: 1%.25rem;\n                width: 1%.25rem;\n              }\n\n              .spinner--md {\n                border-width: 2px;\n                height: var(--spinner-size, 1.5rem);\n                width: var(--spinner-size, 1.5rem);\n              }\n\n              .spinner--lg {\n                border-width: 3px;\n                height: 2rem;\n                width: 2rem;\n              }\n\n              .spinner--xl {\n                border-width: 4px;\n                height: 3rem;\n                width: 3rem;\n              }\n\n/* Spinner Varianten */\n              .spinner--primary {\n                border-top-color: var(--color-primary-500, #3b82f6);\n              }\n\n              .spinner--secondary {\n                border-top-color: var(--color-secondary-500, #6b7280);\n              }\n\n              .spinner--success {\n                border-top-color: var(--color-success-500, #10b981);\n              }\n\n              .spinner--warning {\n                border-top-color: var(--color-warning-500, #f59e0b);\n              }\n\n              .spinner--danger {\n                border-top-color: var(--color-error-500, #ef4444);\n              }\n\n              .spinner--info {\n                border-top-color: var(--color-info-500, #3b82f6);\n              }\n\n/* Container mit Spinner und Text */\n              .spinner-container {\n                align-items: center;\n                display: inline-flex;\n                gap: var(--spinner-gap, 0.5rem);\n              }\n\n              .spinner-text {\n                color: var(--color-text-muted, var(--color-neutral-600, #4b5563));\n                font-size: var(--text-sm, var(--font-size-sm, 0.875rem));\n              }\n\n/* Fullscreen-Overlay */\n              .spinner-overlay {\n                align-items: center;\n                background-color: var(--spinner-overlay-bg, rgb(255 255 255 / 8000%));\n                display: flex;\n                inset: 0;\n                justify-content: center;\n                position: fixed;\n                z-index: var(--z-index-overlay, 50);\n              }\n\n/* Dark Mode Overlay */\n              .spinner-overlay--dark {\n                background-color: var(--spinner-overlay-dark-bg, rgb(0 0 0 / 6000%));\n\n                .spinner-text {\n                  color: var(--color-text-inverse, white);\n                }\n              }\n\n/* Loading States für Buttons */\n              .button--loading {\n                pointer-events: none;\n                position: relative;\n\n                .spinner {\n                  height: 1rem;\n                  width: 1rem;\n                }\n\n/* Text ausblenden während Loading */\n                &::after {\n                  background-color: inherit;\n                  content: '';\n                  inset: 0;\n                  position: absolute;\n                }\n              }\n\n/* Pulse Animation als Alternative */\n              .spinner--pulse {\n                animation: pulse 1.5s ease-in-out infinite;\n                background-color: var(--color-primary-500, #3b82f6);\n                border: none;\n                border-radius: 50px;\n              }\n\n            }\n\n/* Datei: ui/components/progress-bar.css */\n/**\n            * Progress Bar\n            *\n            * Progress bars visualize the completion status of a task or process, showing\n            * users how much has been completed and how much remains. They can include\n            * percentages, labels, and different visual styles.\n            *\n            * @layer: components\n            *\n            * Accessibility:\n            * - Use proper ARIA attributes (aria-valuemin, aria-valuemax, aria-valuenow)\n            * - Include text alternatives for screen readers\n            * - Ensure sufficient color contrast for all states\n            * - Consider color blind users when choosing colors\n            */\n\n            @layer components {\n/* Base progress bar container */\n              .progress {\n                background-color: var(--color-neutral-200, #e5e7eb);\n                border-radius: var(--radius-full, 9999px);\n                height: var(--progress-height, 0.5rem);\n                overflow: hidden;\n                position: relative;\n                width: 100%;\n              }\n\n/* Progress bar fill */\n              & .fill {\n                background-color: var(--color-primary-500, #3b82f6);\n                border-radius: var(--radius-full, 9999px);\n                height: 100%;\n                left: 0%;\n                position: absolute;\n                top: 0%;\n                transition: width var(--transition-duration-normal, 300ms) var(--transition-timing-ease, ease);\n              }\n\n/* Progress with label */\n              .progress--with-label {\n                margin-bottom: var(--space-1, 0.25rem);\n              }\n\n/* Progress label */\n              & .label {\n                color: var(--color-text-muted, var(--color-neutral-700, #374151));\n                display: flex;\n                font-size: var(--text-sm, var(--font-size-sm, 0.875rem));\n                justify-content: space-between;\n                margin-bottom: var(--space-2, 0.5rem);\n              }\n\n              & .title {\n                font-weight: var(--font-medium, var(--font-weight-medium, 500));\n              }\n\n              & .value {\n                font-variant-numeric: tabular-nums;\n              }\n\n/* Progress sizes */\n              .progress--xs {\n                height: 0%.25rem;\n              }\n\n              .progress--sm {\n                height: 0%.375rem;\n              }\n\n              .progress--md {\n                height: var(--progress-height, 0.5rem);\n              }\n\n              .progress--lg {\n                height: 0%.75rem;\n              }\n\n              .progress--xl {\n                height: 1rem;\n              }\n\n/* Progress shapes */\n              .progress--square {\n                border-radius: var(--radius-sm, 0.25rem);\n              }\n\n              .progress--square & .fill {\n                border-radius: var(--radius-sm, 0.25rem);\n              }\n\n/* Progress colors */\n              .progress--primary & .fill {\n                background-color: var(--color-primary-500, #3b82f6);\n              }\n\n              .progress--secondary & .fill {\n                background-color: var(--color-secondary-500, #6b7280);\n              }\n\n              .progress--success & .fill {\n                background-color: var(--color-success-500, #10b981);\n              }\n\n              .progress--danger & .fill {\n                background-color: var(--color-error-500, #ef4444);\n              }\n\n              .progress--warning & .fill {\n                background-color: var(--color-warning-500, #f59e0b);\n              }\n\n              .progress--info & .fill {\n                background-color: var(--color-info-500, #3b82f6);\n              }\n\n/* Progress with steps */\n              .progress--stepped {\n                background-color: transparent;\n                display: flex;\n                gap: var(--progress-step-gap, 4px);\n                height: auto;\n                justify-content: space-between;\n              }\n\n              & .step {\n                background-color: var(--color-neutral-200, #e5e7eb);\n                border-radius: var(--radius-full, 9999px);\n                flex: 1;\n                height: var(--progress-height, 0.5rem);\n                transition: background-color var(--transition-duration-fast, 150ms) var(--transition-timing-ease, ease);\n              }\n\n              & .step--completed {\n                background-color: var(--color-primary-500, #3b82f6);\n              }\n\n              & .step--active {\n                background-color: var(--color-primary-300, #93c5fd);\n              }\n\n              .progress--stepped.progress--square & .step {\n                border-radius: var(--radius-sm, 0.25rem);\n              }\n\n/* Progress with steps and labels */\n              .progress--with-step-labels {\n                margin-bottom: var(--space-6, 1.5rem);\n              }\n\n              & .steps-container {\n                display: flex;\n                justify-content: space-between;\n                margin-top: var(--space-2, 0.5rem);\n                position: relative;\n              }\n\n              & .step-label {\n                color: var(--color-neutral-500, #6b7280);\n                font-size: var(--text-xs, var(--font-size-xs, 0.75rem));\n                position: absolute;\n                text-align: center;\n                top: var(--space-2, 0.5rem);\n                transform: translateX(-50%);\n                white-space: nowrap;\n              }\n\n              & .step-label--completed {\n                color: var(--color-primary-600, #2563eb);\n                font-weight: var(--font-medium, var(--font-weight-medium, 500));\n              }\n\n/* Indeterminate progress animation */\n              .progress--indeterminate & .fill {\n                animation: progressIndeterminate 1.5s infinite;\n                transform-origin: left;\n                width: 40% !important;\n              }\n\n/* Progress with stripes */\n              .progress--striped & .fill {\n                background-image: linear-gradient(\n                45deg,\n                rgb(255 255 255 / 15%) 25%,\n                transparent 25%,\n                transparent 50,\n                rgb(255 255 255 / 15%) 50,\n                rgb(255 255 255 / 15%) 75%,\n                transparent 75%,\n                transparent\n                );\n                background-size: 1rem 1rem;\n              }\n\n              .progress--animated & .fill {\n                animation: progressStripes 1s linear infinite;\n              }\n\n/* Progress with value inside */\n              .progress--with-value-inside {\n                position: relative;\n              }\n\n              & .value-inside {\n                color: var(--color-text-inverse, white);\n                font-size: var(--text-xs, var(--font-size-xs, 0.75rem));\n                font-weight: var(--font-medium, var(--font-weight-medium, 500));\n                left: 50%;\n                position: absolute;\n                top: 50%;\n                transform: translate(-50%, -50);\n                z-index: 1;\n              }\n\n/* Buffer progress */\n              .progress--buffer {\n                background-color: transparent;\n              }\n\n              & .buffer {\n                background-color: var(--color-neutral-300, #d1d5db);\n                border-radius: var(--radius-full, 9999px);\n                height: 100%;\n                left: 0%;\n                position: absolute;\n                top: 0%;\n                transition: width var(--transition-duration-normal, 300ms) var(--transition-timing-ease, ease);\n              }\n\n              .progress--buffer & .fill {\n                z-index: 1;\n              }\n\n/* Gradient progress */\n              .progress--gradient & .fill {\n                background: linear-gradient(\n                90deg,\n                var(--color-primary-400, #60a5fa),\n                var(--color-primary-600, #2563eb)\n                );\n              }\n\n              .progress--gradient.progress--success & .fill {\n                background: linear-gradient(\n                90deg,\n                var(--color-success-400, #34d399),\n                var(--color-success-600, #059669)\n                );\n              }\n\n              .progress--gradient.progress--warning & .fill {\n                background: linear-gradient(\n                90deg,\n                var(--color-warning-400, #fbbf24),\n                var(--color-warning-600, #d97706)\n                );\n              }\n\n              .progress--gradient.progress--danger & .fill {\n                background: linear-gradient(\n                90deg,\n                var(--color-error-400, #f87171),\n                var(--color-error-600, #dc2626)\n                );\n              }\n            }\n\n/* Datei: ui/components/popover.css */\n/**\n            * Popover-Komponente\n            *\n            * Eine Komponente zur Erstellung von Popover-Elementen mit der nativen HTML Popover API.\n            * Unterstützt Hover-Effekte, Animationen, Pfeile und Dark Mode.\n            *\n            * @nutzung\n            * <button popovertarget=\"myPopover\">Follow Me</button>\n            * <div id=\"myPopover\" popover class=\"popover\">Thank you for following me!</div>\n            *\n            * @eigenschaften\n            * - Automatische Positionierung unter dem Trigger-Element\n            * - Smooth Animation beim Öffnen/Schließen mit @starting-style\n            * - Pfeil-Element für visuelle Verbindung zum Trigger\n            * - Responsive Design (max-width: 9%0vw)\n            * - Unterstützung für Light/Dark Mode\n            *\n            * @browser-kompatibilität\n            * Die native HTML Popover API wird unterstützt in:\n            * - Chrome/Edge ab Version 114\n            * - Safari ab Version 16.4\n            * - Firefox ab Version 114 (mit Aktivierung über Flag)\n            *\n            * Für ältere Browser sollte ein Fallback-Mechanismus implementiert werden,\n            * z.B. mit JavaScript-basierten Popover-Lösungen.\n            */\n\n            @layer components {\n              .popover {\n                animation: slideIn var(--animation-duration-normal, 300ms) cubic-bezier(0.68, -0.6, 0.32, 1.6) forwards;\n                background: var(--color-background, #fff);\n                border: 1px solid var(--color-border, #e5e7eb);\n                border-radius: 0.5rem;\n                box-shadow: 0 8px 32px rgb(0 0 0 / 18%), 0 1.5px 4px rgb(0 0 0 / 8%);\n                color: var(--color-text, #222);\n                max-width: 9%0vw;\n                min-width: 20%0px;\n                padding: 1rem;\n                position: absolute;\n                z-index: 1000;\n              }\n\n              @starting-style {\n                .popover {\n                  opacity: 0%;\n                  transform: translateY(8px) scale(0.98%);\n                }\n              }\n\n              .popover[popover] {\n                display: block;\n\n/* Ermöglicht Styling für native Popover-API */\n                inset: unset;\n                left: 0%;\n                margin-top: 0%.5rem;\n                top: 100%;\n              }\n\n/* Optional: Arrow */\n              .popover::before {\n                background: var(--color-background, #fff);\n                border-left: 1px solid var(--color-border, #e5e7eb);\n                border-top: 1px solid var(--color-border, #e5e7eb);\n                clip-path: polygon(50% 0, 0 100, 100 100);\n                content: '';\n                height: 8px;\n                left: 2rem;\n                position: absolute;\n                top: -8px;\n                width: 1%6px;\n                z-index: 1;\n              }\n            }\n\n/* Darkmode Support */\n            @media (prefers-color-scheme: dark) {\n              @layer components {\n                .popover {\n                  background: var(--color-background-dark, #222);\n                  border-color: var(--color-border-dark, #444);\n                  color: var(--color-text-dark, #fff);\n                }\n\n                .popover::before {\n                  background: var(--color-background-dark, #222);\n                  border-color: var(--color-border-dark, #444);\n                }\n              }\n            }\n\n/* Datei: ui/components/pagination.css */\n/**\n            * Pagination\n            *\n            * Pagination components allow users to navigate between pages of content,\n            * indicating the current page, total number of pages, and providing navigation\n            * controls to move between pages.\n            *\n            * @layer: components\n            *\n            * Accessibility:\n            * - Use proper semantic markup (nav, ul, li)\n            * - Include proper ARIA attributes (aria-current=\"page\")\n            * - Ensure keyboard navigability\n            * - Include descriptive text for screen readers\n            */\n\n            @layer components {\n/* Pagination container */\n              .pagination {\n                align-items: center;\n                display: flex;\n                font-size: var(--text-sm, 0.875rem);\n                justify-content: center;\n                margin: var(--space-4) 0;\n              }\n\n/* Pagination list */\n              & .list {\n                display: flex;\n                gap: var(--space-1);\n                list-style: none;\n                margin: 0;\n                padding: 0;\n              }\n\n/* Pagination item */\n              & .item {\n                display: inline-flex;\n              }\n\n/* Pagination link/button */\n              & .link {\n                align-items: center;\n                background-color: var(--color-surface-100, #f3f4f6);\n                border: 1px solid var(--color-border-200, #e5e7eb);\n                border-radius: var(--radius-md, 0.375rem);\n                color: var(--color-text-700, #374151);\n                cursor: pointer;\n                display: inline-flex;\n                height: 2%.25rem;\n                justify-content: center;\n                min-width: 2%.25rem;\n                padding: 0 var(--space-2);\n                text-decoration: none;\n                transition: background-color 0.2s, border-color 0.2s, color 0.2s;\n              }\n\n              & .link:hover {\n                background-color: var(--color-surface-200);\n                border-color: var(--color-border-300);\n              }\n\n              & .link:focus {\n                box-shadow: 0 0 0 2px var(--color-primary-200);\n                outline: none;\n              }\n\n/* Current page */\n              & .link--current {\n                background-color: var(--color-primary-500);\n                border-color: var(--color-primary-500);\n                color: white;\n                font-weight: var(--font-medium, 500);\n              }\n\n              & .link--current:hover {\n                background-color: var(--color-primary-600, #2563eb);\n                border-color: var(--color-primary-600, #2563eb);\n              }\n\n/* Disabled state */\n              & .link--disabled {\n                cursor: not-allowed;\n                opacity: 5000%;\n                pointer-events: none;\n              }\n\n/* Previous/next buttons */\n              & .prev,\n              & .next {\n                align-items: center;\n                display: inline-flex;\n              }\n\n              & .prev-icon,\n              & .next-icon {\n                height: 1rem;\n                width: 1rem;\n              }\n\n              & .prev-text,\n              & .next-text {\n                margin: 0 var(--space-1);\n              }\n\n/* Pagination truncation (ellipsis) */\n              & .truncation {\n                align-items: center;\n                color: var(--color-text-500, #6b7280);\n                display: inline-flex;\n                height: 2%.25rem;\n                justify-content: center;\n                min-width: 2%.25rem;\n                user-select: none;\n              }\n\n/* Pagination sizes */\n              .pagination--sm & .link {\n                font-size: var(--text-xs, 0.75rem);\n                height: 1%.75rem;\n                min-width: 1%.75rem;\n              }\n\n              .pagination--lg & .link {\n                font-size: var(--text-base);\n                height: 2%.75rem;\n                min-width: 2%.75rem;\n              }\n\n/* Pagination with input */\n              .pagination--with-input {\n                gap: var(--space-3);\n              }\n\n              & .input-container {\n                align-items: center;\n                display: flex;\n                margin: 0 var(--space-2);\n              }\n\n              & .input-label {\n                color: var(--color-text-500, #6b7280);\n                margin-right: var(--space-2);\n              }\n\n              & .input {\n                border: 1px solid var(--color-border-200, #e5e7eb);\n                border-radius: var(--radius-md, 0.375rem);\n                font-size: var(--text-sm, 0.875rem);\n                height: 2%.25rem;\n                padding: 0 var(--space-2);\n                text-align: center;\n                width: 3rem;\n              }\n\n              & .input:focus {\n                border-color: var(--color-primary-300);\n                box-shadow: 0 0 0 2px var(--color-primary-100, #dbeafe);\n                outline: none;\n              }\n\n              & .input-submit {\n                background-color: var(--color-primary-500);\n                border: none;\n                border-radius: var(--radius-md, 0.375rem);\n                color: white;\n                cursor: pointer;\n                height: 2%.25rem;\n                margin-left: var(--space-2);\n                padding: 0 var(--space-3);\n                transition: background-color 0.2s;\n              }\n\n              & .input-submit:hover {\n                background-color: var(--color-primary-600, #2563eb);\n              }\n\n/* Pagination info */\n              & .info {\n                color: var(--color-text-500, #6b7280);\n                font-size: var(--text-sm, 0.875rem);\n                margin: 0 var(--space-3);\n              }\n\n/* Compact pagination */\n              .pagination--compact & .link {\n                border-radius: 0;\n                margin-left: -1px;\n                min-width: 1%.75rem;\n              }\n\n              .pagination--compact & .item:first-child & .link {\n                border-bottom-left-radius: var(--radius-md, 0.375rem);\n                border-top-left-radius: var(--radius-md, 0.375rem);\n              }\n\n              .pagination--compact & .item:last-child & .link {\n                border-bottom-right-radius: var(--radius-md, 0.375rem);\n                border-top-right-radius: var(--radius-md, 0.375rem);\n              }\n\n/* Borderless variant */\n              .pagination--borderless & .link {\n                background-color: transparent;\n                border: none;\n              }\n\n              .pagination--borderless & .link:hover {\n                background-color: var(--color-surface-200);\n              }\n\n              .pagination--borderless & .link--current {\n                background-color: var(--color-primary-100, #dbeafe);\n                color: var(--color-primary-700, #1d4ed8);\n              }\n\n/* Rounded variant */\n              .pagination--rounded & .link {\n                border-radius: var(--radius-full, 9999px);\n              }\n\n/* Circle variant */\n              .pagination--circle & .link {\n                border-radius: var(--radius-full, 9999px);\n                padding: 0;\n              }\n\n/* Responsive */\n              @media (max-width: 640px) {\n                & .prev-text,\n                & .next-text {\n                  display: none;\n                }\n\n                & .item--mobile-hidden {\n                  display: none;\n                }\n\n                & .info {\n                  margin: 0 var(--space-1);\n                }\n              }\n            }\n\n/* Datei: ui/components/notification.css */\n/*\n            * Notification Module\n            *\n            * Benachrichtigungen und Systemmeldungen (Toast/Messages).\n            */\n\n/**\n            * Notification-Komponente\n            *\n            * System- und Benutzermeldungen für wichtige Mitteilungen und Updates.\n            * Notifications informieren Benutzer über Ereignisse, Aktivitäten oder Statusänderungen.\n            *\n            * @layer components.notification\n            *\n            * Grundlegende Verwendung:\n            * <div class=\"notification\">\n            *   <div class=\"icon\"><!-- Icon hier --></div>\n            *   <div class=\"content\">\n            *     <div class=\"title\">Neue Nachricht</div>\n            *     <div class=\"message\">Sie haben eine neue Nachricht erhalten.</div>\n            *   </div>\n            *   <button class=\"close\">&times;</button>\n            * </div>\n            *\n            * Varianten:\n            * <div class=\"notification info\">Informativ</div>\n            * <div class=\"notification success\">Erfolg</div>\n            * <div class=\"notification warning\">Warnung</div>\n            * <div class=\"notification error\">Fehler</div>\n            *\n            * Positionen:\n            * <div class=\"notification top-right\">Oben rechts</div>\n            * <div class=\"notification top-left\">Oben links</div>\n            * <div class=\"notification bottom-right\">Unten rechts</div>\n            * <div class=\"notification bottom-left\">Unten links</div>\n            *\n            * Mit Aktionen:\n            * <div class=\"notification\">\n            *   <div class=\"content\">Neue Anfrage</div>\n            *   <div class=\"actions\">\n            *     <button class=\"button small primary\">Annehmen</button>\n            *     <button class=\"button small\">Ablehnen</button>\n            *   </div>\n            * </div>\n            *\n            * Mit Timer:\n            * <div class=\"notification with-timer\">\n            *   <div class=\"content\">Diese Meldung verschwindet in 5 Sekunden</div>\n            *   <div class=\"timer\"></div>\n            * </div>\n            *\n            * Gruppierte Benachrichtigungen:\n            * <div class=\"notification-center\">\n            *   <div class=\"notification\">Benachrichtigung 1</div>\n            *   <div class=\"notification\">Benachrichtigung 2</div>\n            * </div>\n            */\n\n/* Animationen - außerhalb von @layer definieren */\n            @keyframes notification-timer {\n              from { width: 100%; }\n\n              to { width: 0%; }\n            }\n\n/* Komponenten-Styles */\n            @layer components {\n              .notification {\n                align-items: start;\n                background-color: var(--color-gray-100, #f3f4f6);\n                border: 1px solid var(--color-gray-300, #d1d5db);\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                font-size: var(--font-size-sm, 0.875rem);\n                gap: var(--space-3);\n                max-width: 100%;\n                padding: var(--space-3);\n\n/* Varianten */\n                &.success {\n                  background-color: var(--color-success, #10b981);\n                  color: white;\n                }\n\n                &.error {\n                  background-color: var(--color-error, #ef4444);\n                  color: white;\n                }\n\n                &.warning {\n                  background-color: var(--color-warning, #f59e0b);\n                  color: black;\n                }\n\n                &.info {\n                  background-color: var(--color-info, #3b82f6);\n                  color: white;\n                }\n\n/* Icon */\n                .icon {\n                  flex-shrink: 0;\n                  font-size: 1.25rem;\n                  line-height: 1%;\n                  margin-top: 2px;\n                }\n\n/* Inhalt */\n                .content {\n                  flex: 1;\n\n                  .title {\n                    font-weight: var(--font-weight-medium, 500);\n                    margin-bottom: var(--space-1);\n                  }\n\n                  .message {\n                    color: inherit;\n                    opacity: 9000%;\n                  }\n                }\n\n/* Schließen-Knopf */\n                .close {\n                  background: none;\n                  border: none;\n                  color: currentcolor;\n                  cursor: pointer;\n                  flex-shrink: 0;\n                  font-size: 1.25rem;\n                  line-height: 1%;\n                  margin-left: auto;\n                  opacity: 0.7;\n                  padding: 0.25rem;\n                  transition: opacity var(--transition-fast, 150ms ease);\n\n                  &:hover {\n                    opacity: 1;\n                  }\n                }\n\n/* Aktionen */\n                .actions {\n                  display: flex;\n                  gap: var(--space-2);\n                  margin-top: var(--space-2);\n                }\n\n/* Timer */\n                .timer {\n                  background-color: rgb(255 255 255 / 5000%);\n                  bottom: 0%;\n                  height: 3px;\n                  left: 0%;\n                  position: absolute;\n                }\n\n/* Positionen */\n                &.top-right,\n                &.top-left,\n                &.bottom-right,\n                &.bottom-left {\n                  margin: var(--space-4);\n                  position: fixed;\n                  z-index: var(--z-index-notification, 1070);\n                }\n\n                &.top-right {\n                  right: 0%;\n                  top: 0%;\n                }\n\n                &.top-left {\n                  left: 0%;\n                  top: 0%;\n                }\n\n                &.bottom-right {\n                  bottom: 0%;\n                  right: 0%;\n                }\n\n                &.bottom-left {\n                  bottom: 0%;\n                  left: 0%;\n                }\n\n                &.with-timer {\n                  overflow: hidden;\n                  position: relative;\n                }\n              }\n\n/* Notification-Center */\n              .notification-center {\n                display: flex;\n                flex-direction: column;\n                gap: var(--space-2);\n                max-width: 100%;\n                position: fixed;\n                width: 35%0px;\n                z-index: var(--z-index-notification, 1070);\n\n                &.top-right {\n                  margin: var(--space-4);\n                  right: 0%;\n                  top: 0%;\n                }\n\n                &.top-left {\n                  left: 0%;\n                  margin: var(--space-4);\n                  top: 0%;\n                }\n\n                &.bottom-right {\n                  bottom: 0%;\n                  margin: var(--space-4);\n                  right: 0%;\n                }\n\n                &.bottom-left {\n                  bottom: 0%;\n                  left: 0%;\n                  margin: var(--space-4);\n                }\n              }\n            }\n\n/* Animations-Styles */\n            @layer animations {\n              .notification {\n                &.animate-in {\n                  animation-duration: 0.3s;\n                  animation-name: slideIn;\n                  animation-timing-function: ease-out;\n                }\n\n                &.animate-out {\n                  animation-duration: 0.3s;\n                  animation-fill-mode: forwards;\n                  animation-name: slideOut;\n                  animation-timing-function: ease-in;\n                }\n\n                .timer {\n                  animation: notification-timer 5s linear forwards;\n                }\n              }\n            }\n\n/* Datei: ui/components/modal.css */\n/*\n            * Modal Module\n            *\n            * Zentrale Komponente für modale Dialoge.\n            */\n\n/**\n            * Modal-Komponente\n            *\n            * Dialogfenster und Overlays für fokussierte Benutzerinteraktionen.\n            * Modals werden verwendet, um wichtige Informationen anzuzeigen oder Benutzerentscheidungen zu erfordern.\n            *\n            * @layer components.modal\n            *\n            * Grundlegende Verwendung:\n            * <div class=\"modal\">\n            *   <div class=\"backdrop\"></div>\n            *   <div class=\"container\">\n            *     <div class=\"header\">\n            *       <h3 class=\"title\">Modaltitel</h3>\n            *       <button class=\"close\">&times;</button>\n            *     </div>\n            *     <div class=\"body\">\n            *       Modalinhalt\n            *     </div>\n            *     <div class=\"footer\">\n            *       <button class=\"button\">Abbrechen</button>\n            *       <button class=\"button primary\">Bestätigen</button>\n            *     </div>\n            *   </div>\n            * </div>\n            *\n            * Größenvarianten:\n            * <div class=\"modal small\">...</div>\n            * <div class=\"modal medium\">...</div>\n            * <div class=\"modal large\">...</div>\n            * <div class=\"modal fullscreen\">...</div>\n            *\n            * Position:\n            * <div class=\"modal center\">...</div>\n            * <div class=\"modal top\">...</div>\n            * <div class=\"modal bottom\">...</div>\n            *\n            * Animation (erfordert JS):\n            * <div class=\"modal fade\">...</div>\n            * <div class=\"modal slide\">...</div>\n            *\n            * Flüssige Größenanpassung mit Schlüsselwörtern:\n            * <div class=\"modal fluid\">...</div>\n            * <div class=\"modal fluid small\">...</div>\n            * <div class=\"modal fluid medium\">...</div>\n            * <div class=\"modal fluid large\">...</div>\n            *\n            * Container-adaptive Größenanpassung:\n            * <div class=\"modal adaptive\">...</div>\n            */\n\n/* Animationen - außerhalb von @layer definieren */\n\n/* Komponenten-Styles */\n            @layer components {\n              .modal {\n                align-items: center;\n                display: flex;\n                inset: 0;\n                justify-content: center;\n                position: fixed;\n                z-index: var(--z-index-modal, 1000);\n\n/* Hintergrund-Overlay */\n                .backdrop {\n                  background: rgb(0 0 0 / 5000%);\n                  inset: 0;\n                  position: fixed;\n                  z-index: var(--z-index-modal-backdrop, 999);\n                }\n\n/* Modal-Container */\n                .container {\n                  background: var(--color-background, var(--color-surface-elevated, #fff));\n                  border-radius: var(--radius-modal, var(--radius-lg, 0.75rem));\n                  box-shadow: var(--shadow-lg, 0 10px 15px -3px rgb(0 0 0 / 1000%));\n                  display: flex;\n                  flex-direction: column;\n                  gap: var(--space-4, 1rem);\n                  max-width: var(--modal-max-width, 32rem);\n                  overflow: hidden;\n                  padding: var(--modal-padding, var(--space-6, 1.5rem));\n                  position: relative;\n                  width: 100%;\n                  z-index: var(--z-index-modal, 1000);\n                }\n\n/* Modal-Header */\n                .header {\n                  align-items: center;\n                  display: flex;\n                  justify-content: space-between;\n                  padding: var(--modal-header-padding, 0);\n\n                  .title {\n                    color: var(--color-text, var(--color-neutral-900, #111827));\n                    font-size: var(--text-lg, var(--font-size-lg, 1.125rem));\n                    font-weight: var(--font-semibold, var(--font-weight-semibold, 600));\n                    margin: 0;\n                  }\n\n                  .close {\n                    background: none;\n                    border: none;\n                    color: var(--color-neutral-500, #6b7280);\n                    cursor: pointer;\n                    font-size: 1.5rem;\n                    line-height: 1%;\n                    padding: 0.25rem;\n                    transition: color var(--transition-duration-fast, 150ms) var(--transition-timing-ease, ease);\n\n                    &:hover {\n                      color: var(--color-neutral-800, #1f2937);\n                    }\n                  }\n                }\n\n/* Modal-Inhalt */\n                .body {\n                  color: var(--color-text-muted, var(--color-neutral-700, #374151));\n                  font-size: var(--text-base, var(--font-size-base, 1rem));\n                  max-height: 70%;\n                  overflow-y: auto;\n                }\n\n/* Modal-Footer */\n                .footer {\n                  display: flex;\n                  gap: var(--space-3, 0.75rem);\n                  justify-content: flex-end;\n                  margin-top: var(--space-2, 0.5rem);\n                  padding: var(--modal-footer-padding, 0);\n                }\n\n/* Größenvarianten */\n                &.small .container {\n                  max-width: 2%4rem;\n                }\n\n                &.medium .container {\n                  max-width: var(--modal-max-width, 32rem);\n                }\n\n                &.large .container {\n                  max-width: 4%8rem;\n                }\n\n                &.fullscreen .container {\n                  border-radius: 0;\n                  height: 100%;\n                  max-width: 100%;\n                  width: 100%;\n                }\n\n/* Flüssige Größenanpassung mit interpolate-size: allow-keywords */\n                &.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\n\n/**\n                  * Modal Component Structure:\n                  *\n                  * <div class=\"modal\" role=\"dialog\">\n                  *   <div class=\"modal-overlay\"></div>\n                  *   <div class=\"modal-container\">\n                  *     <div class=\"modal-header\">\n                  *       <h2 class=\"modal-title\">Title</h2>\n                  *       <button class=\"modal-close\" aria-label=\"Close\">&times;</button>\n                  *     </div>\n                  *     <div class=\"modal-content\">\n                  *       <!-- Modal body content -->\n                  *     </div>\n                  *     <div class=\"modal-footer\">\n                  *       <button class=\"button button--secondary\">Cancel</button>\n                  *       <button class=\"button button--primary\">Confirm</button>\n                  *     </div>\n                  *   </div>\n                  * </div>\n                  *\n                  * Modifiers: .modal--sm, .modal--lg, .modal--fullscreen\n                  * States: .modal--open, .modal--closing\n                  */\n                  .container {\n                    border-radius: 0.75em;\n                    gap: 1em;\n                    padding: 1.5em;\n                  }\n\n                  .header .title {\n                    font-size: 1.25em;\n                  }\n\n                  .body {\n                    font-size: 1em;\n                  }\n\n                  .footer {\n                    gap: 0.75em;\n                    margin-top: 0%.5em;\n                  }\n\n/* Größenvarianten mit CSS-Schlüsselwörtern */\n                  &.small {\n                    font-size: small;\n\n                    .container {\n                      max-width: 2%4em;\n                    }\n                  }\n\n                  &.medium {\n                    font-size: medium;\n\n                    .container {\n                      max-width: 3%2em;\n                    }\n                  }\n\n                  &.large {\n                    font-size: large;\n\n                    .container {\n                      max-width: 4%8em;\n                    }\n                  }\n\n                  &.x-large {\n                    font-size: x-large;\n\n                    .container {\n                      max-width: 6%4em;\n                    }\n                  }\n                }\n\n/* Container-adaptive Größenanpassung */\n                &.adaptive {\n                  container-name: modal;\n                  container-type: inline-size;\n\n                  .container {\n                    max-width: clamp(24rem, 80cqi, 48rem);\n                    padding: clamp(var(--space-4, 1rem), 4cqi, var(--space-8, 2rem));\n                  }\n\n                  .header .title {\n                    font-size: clamp(var(--text-base, 1rem), 3cqi, var(--text-xl, 1.25rem));\n                  }\n\n                  .body {\n                    font-size: clamp(var(--text-sm, 0.875rem), 2.5cqi, var(--text-base, 1rem));\n                  }\n\n/* Container-Query für größere Modals */\n                  @container modal (min-width: 40rem) {\n                    .container {\n                      gap: var(--space-6, 1.5rem);\n                    }\n                  }\n                }\n\n/* Positionierung */\n                &.center {\n                  align-items: center;\n                  justify-content: center;\n                }\n\n                &.top {\n                  align-items: flex-start;\n\n                  .container {\n                    margin-top: var(--space-16, 4rem);\n                  }\n                }\n\n                &.bottom {\n                  align-items: flex-end;\n\n                  .container {\n                    margin-bottom: var(--space-16, 4rem);\n                  }\n                }\n              }\n            }\n\n/* Animationen */\n            @layer animations {\n              .modal {\n                &.fade .container {\n                  animation: fadeIn 0.2s ease-out;\n                }\n\n                &.slide .container {\n                  animation: slideUp 0.3s ease-out;\n                }\n              }\n            }\n\n\n/* Datei: ui/components/media.css */\n/**\n            * Medien-Element Styles\n            */\n\n            @layer elements {\n/* Bilder */\n              img {\n                border-radius: var(--radius-media, var(--radius-sm, 0.25rem));\n                display: block;\n                height: auto;\n                max-width: 100%;\n              }\n\n/* Videos */\n              video {\n                border-radius: var(--radius-media, var(--radius-sm, 0.25rem));\n                display: block;\n                height: auto;\n                max-width: 100%;\n              }\n\n/* Iframes */\n              iframe {\n                border: var(--border-width, 1px) solid var(--color-border, var(--color-neutral-200, #e5e7eb));\n                border-radius: var(--radius-media, var(--radius-sm, 0.25rem));\n                max-width: 100%;\n              }\n\n/* Media Container */\n              .media {\n                border-radius: var(--radius-media, var(--radius-sm, 0.25rem));\n                overflow: hidden;\n\n                img, video {\n                  border-radius: 0;\n                }\n              }\n\n/* Responsive Media */\n              .media--responsive {\n                aspect-ratio: var(--media-aspect-ratio, 16/9);\n                position: relative;\n\n                img, video, iframe {\n                  height: 100%;\n                  inset: 0;\n                  object-fit: cover;\n                  position: absolute;\n                  width: 100%;\n                }\n              }\n\n/* Media Sizes */\n              .media--xs {\n                max-width: 4rem;\n              }\n\n              .media--sm {\n                max-width: 8rem;\n              }\n\n              .media--md {\n                max-width: 1%6rem;\n              }\n\n              .media--lg {\n                max-width: 2%4rem;\n              }\n\n              .media--xl {\n                max-width: 3%2rem;\n              }\n            }\n\n/* Datei: ui/components/lists.css */\n/**\n            * Listen-Element Styles\n            */\n\n            @layer elements {\n/* Listen */\n              ul, ol {\n                color: var(--color-text, var(--color-neutral-900, #111827));\n                margin: var(--space-4, 1rem) 0;\n                padding-left: var(--space-8, 2rem);\n              }\n\n              li {\n                color: var(--color-text, var(--color-neutral-900, #111827));\n                line-height: var(--line-height-relaxed, 1.625);\n                margin: var(--space-2, 0.5rem) 0;\n              }\n\n/* Beschreibungslisten */\n              dl {\n                margin: var(--space-4, 1rem) 0;\n              }\n\n              dt {\n                color: var(--color-text, var(--color-neutral-900, #111827));\n                font-weight: var(--font-semibold, var(--font-weight-semibold, 600));\n                margin-top: var(--space-4, 1rem);\n              }\n\n              dd {\n                color: var(--color-text-muted, var(--color-neutral-700, #374151));\n                margin-left: var(--space-4, 1rem);\n                margin-top: var(--space-2, 0.5rem);\n              }\n\n/* List Variants */\n              .list--unstyled {\n                list-style: none;\n                padding-left: 0%;\n              }\n\n              .list--inline {\n                display: flex;\n                flex-wrap: wrap;\n                gap: var(--space-2, 0.5rem);\n                list-style: none;\n                padding-left: 0%;\n              }\n\n              .list--spaced li {\n                margin: var(--space-3, 0.75rem) 0;\n              }\n\n              .list--compact li {\n                margin: var(--space-1, 0.25rem) 0;\n              }\n            }\n\n/* Datei: ui/components/hamburger.css */\n/*\n            * Hamburger-Komponente\n            *\n            * Hamburger-Menü-Icon mit Animation und Toggle-Zustand.\n            */\n\n/**\n            * Hamburger-Komponente\n            *\n            * Mobile Menü-Icons für Navigation auf kleinen Bildschirmen.\n            * Hamburger-Icons dienen als kompakte Schaltfläche für das Aus- und Einklappen von Navigationsmenüs.\n            *\n            * @layer components\n            *\n            * Grundlegende Verwendung:\n            * <button class=\"hamburger\" aria-label=\"Menü öffnen\">\n            *   <span class=\"line\"></span>\n            *   <span class=\"line\"></span>\n            *   <span class=\"line\"></span>\n            * </button>\n            *\n            * Aktiver Zustand (geöffnet):\n            * <button class=\"hamburger active\" aria-label=\"Menü schließen\">\n            *   <span class=\"line\"></span>\n            *   <span class=\"line\"></span>\n            *   <span class=\"line\"></span>\n            * </button>\n            *\n            * Varianten:\n            * <button class=\"hamburger spin\">...</button>      <!-- Drehanimation -->\n            * <button class=\"hamburger squeeze\">...</button>   <!-- Quetschanimation -->\n            * <button class=\"hamburger arrow\">...</button>     <!-- Pfeilanimation -->\n            * <button class=\"hamburger collapse\">...</button>  <!-- Einklappen -->\n            *\n            * Größen:\n            * <button class=\"hamburger sm\">...</button>  <!-- Klein -->\n            * <button class=\"hamburger md\">...</button>  <!-- Mittel (Standard) -->\n            * <button class=\"hamburger lg\">...</button>  <!-- Groß -->\n            *\n            * Farben:\n            * <button class=\"hamburger light\">...</button>  <!-- Heller Hintergrund -->\n            * <button class=\"hamburger dark\">...</button>   <!-- Dunkler Hintergrund -->\n            * <button class=\"hamburger primary\">...</button> <!-- Primärfarbe -->\n            */\n\n            @layer components {\n              .hamburger {\n                background: transparent;\n                border: none;\n                cursor: pointer;\n                display: inline-flex;\n                flex-direction: column;\n                height: 2%4px;\n                justify-content: space-between;\n                padding: 4px 0;\n                width: 2%4px;\n\n                .line {\n                  background-color: var(--color-gray-800);\n                  border-radius: 2px;\n                  display: block;\n                  height: 2px;\n                  transition: all var(--transition-fast, 150ms ease) ease-in-out;\n                  width: 100%;\n                }\n\n/* Aktiver Zustand */\n                &.active {\n                  .line:nth-child(1) {\n                    transform: translateY(8px) rotate(45deg);\n                  }\n\n                  .line:nth-child(2) {\n                    opacity: 0%;\n                  }\n\n                  .line:nth-child(3) {\n                    transform: translateY(-8px) rotate(-45deg);\n                  }\n                }\n\n/* Varianten */\n                &.spin {\n                  &.active {\n                    .line:nth-child(1) {\n                      margin-top: 8px;\n                      transform: rotate(135deg);\n                    }\n\n                    .line:nth-child(2) {\n                      opacity: 0%;\n                    }\n\n                    .line:nth-child(3) {\n                      margin-top: -16px;\n                      transform: rotate(-135deg);\n                    }\n                  }\n                }\n\n                &.squeeze {\n                  &.active {\n                    .line:nth-child(1) {\n                      transform: translateY(8px) rotate(45deg);\n                    }\n\n                    .line:nth-child(2) {\n                      transform: scaleX(0%);\n                    }\n\n                    .line:nth-child(3) {\n                      transform: translateY(-8px) rotate(-45deg);\n                    }\n                  }\n                }\n\n                &.arrow {\n                  &.active {\n                    .line:nth-child(1) {\n                      transform: translateY(3px) translateX(6px) rotate(45deg);\n                      width: 50%;\n                    }\n\n                    .line:nth-child(2) {\n                      opacity: 1;\n                    }\n\n                    .line:nth-child(3) {\n                      transform: translateY(-3px) translateX(6px) rotate(-45deg);\n                      width: 50%;\n                    }\n                  }\n                }\n\n/* Größenvarianten */\n                &.sm {\n                  height: 1%8px;\n                  width: 1%8px;\n\n                  .line {\n                    height: 1px;\n                  }\n                }\n\n                &.lg {\n                  height: 3%0px;\n                  width: 3%0px;\n\n                  .line {\n                    height: 3px;\n                  }\n                }\n\n/* Farbvarianten */\n                &.light .line {\n                  background-color: var(--color-white, #fff);\n                }\n\n                &.dark .line {\n                  background-color: var(--color-gray-900, #111827);\n                }\n\n                &.primary .line {\n                  background-color: var(--color-primary, #3b82f6);\n                }\n              }\n            }\n\n\n\n/* Datei: ui/components/drawer.css */\n/**\n            * Drawer/Accordion\n            *\n            * Drawers and accordions are expandable containers that allow users to show\n            * or hide content sections. They help organize content, save screen space,\n            * and allow users to focus on specific information.\n            *\n            * @layer: components\n            *\n            * Accessibility:\n            * - Use appropriate ARIA attributes (aria-expanded, aria-controls)\n            * - Ensure keyboard operability\n            * - Headers should be properly labeled as buttons\n            * - Include focus states for interactive elements\n            */\n\n            @layer components {\n/* ===== Accordion ===== */\n\n/* Accordion container */\n              .accordion {\n                background-color: var(--color-surface-50);\n                border: 1px solid var(--color-border-200, #e5e7eb);\n                border-radius: var(--radius-md, 0.375rem);\n                overflow: hidden;\n              }\n\n/* Accordion item */\n              & .item {\n                border-bottom: 1px solid var(--color-border-200, #e5e7eb);\n              }\n\n              & .item:last-child {\n                border-bottom: none;\n              }\n\n/* Accordion header/trigger */\n              & .header {\n                align-items: center;\n                background-color: var(--color-surface-100, #f3f4f6);\n                border: none;\n                cursor: pointer;\n                display: flex;\n                justify-content: space-between;\n                padding: var(--space-4);\n                text-align: left;\n                transition: background-color 0.2s;\n                width: 100%;\n              }\n\n              & .header:hover {\n                background-color: var(--color-surface-200);\n              }\n\n              & .header:focus {\n                box-shadow: 0 0 0 2px var(--color-primary-200);\n                outline: none;\n              }\n\n/* Accordion title */\n              & .title {\n                color: var(--color-text-900, #111827);\n                flex: 1;\n                font-weight: var(--font-medium, 500);\n              }\n\n/* Accordion icon */\n              & .icon {\n                color: var(--color-text-500, #6b7280);\n                transition: transform 0.3s;\n              }\n\n              & .header[aria-expanded=\"true\"] & .icon {\n                transform: rotate(180deg);\n              }\n\n/* Accordion content panel */\n              & .panel {\n                max-height: 0%;\n                overflow: hidden;\n                transition: max-height 0.3s ease-out;\n              }\n\n              & .panel[aria-hidden=\"false\"] {\n                max-height: 100%0px; /* Arbitrary large value, will be controlled by JS */\n              }\n\n              & .content {\n                padding: var(--space-4);\n              }\n\n/* Accordion variations */\n              .accordion--bordered & .item {\n                border: 1px solid var(--color-border-200, #e5e7eb);\n                border-radius: var(--radius-md, 0.375rem);\n                margin-bottom: var(--space-3);\n              }\n\n              .accordion--bordered & .item:last-child {\n                margin-bottom: 0%;\n              }\n\n/* ===== Drawer ===== */\n\n/* Drawer container */\n              .drawer {\n                background-color: var(--color-surface-100, #f3f4f6);\n                box-shadow: var(--shadow-lg);\n                position: fixed;\n                transition: transform 0.3s ease;\n                z-index: var(--z-drawer, 90);\n              }\n\n/* Drawer positions */\n              .drawer--left {\n                height: 100%;\n                left: 0%;\n                top: 0%;\n                transform: translateX(-100%);\n              }\n\n              .drawer--right {\n                height: 100%;\n                right: 0%;\n                top: 0%;\n                transform: translateX(100%);\n              }\n\n              .drawer--top {\n                left: 0%;\n                top: 0%;\n                transform: translateY(-100%);\n                width: 100%;\n              }\n\n              .drawer--bottom {\n                bottom: 0%;\n                left: 0%;\n                transform: translateY(100%);\n                width: 100%;\n              }\n\n/* Drawer sizes */\n              .drawer--left.drawer--sm,\n              .drawer--right.drawer--sm {\n                width: 25%0px;\n              }\n\n              .drawer--left.drawer--md,\n              .drawer--right.drawer--md {\n                width: 35%0px;\n              }\n\n              .drawer--left.drawer--lg,\n              .drawer--right.drawer--lg {\n                width: 45%0px;\n              }\n\n              .drawer--top.drawer--sm,\n              .drawer--bottom.drawer--sm {\n                height: 20%0px;\n              }\n\n              .drawer--top.drawer--md,\n              .drawer--bottom.drawer--md {\n                height: 30%0px;\n              }\n\n              .drawer--top.drawer--lg,\n              .drawer--bottom.drawer--lg {\n                height: 40%0px;\n              }\n\n/* Opened state */\n              .drawer--opened {\n                transform: translate(0%);\n              }\n\n/* Drawer backdrop */\n              .drawer-backdrop {\n                background-color: rgb(0 0 0 / 5000%);\n                inset: 0;\n                opacity: 0%;\n                position: fixed;\n                transition: opacity 0.3s, visibility 0.3s;\n                visibility: hidden;\n                z-index: var(--z-drawer-backdrop, 80);\n              }\n\n              .drawer-backdrop--visible {\n                opacity: 1;\n                visibility: visible;\n              }\n\n/* Drawer header */\n              & .header {\n                align-items: center;\n                border-bottom: 1px solid var(--color-border-200, #e5e7eb);\n                display: flex;\n                justify-content: space-between;\n                padding: var(--space-4);\n              }\n\n              & .title {\n                font-weight: var(--font-semibold, 600);\n                margin: 0;\n              }\n\n              & .close {\n                align-items: center;\n                background: transparent;\n                border: none;\n                border-radius: var(--radius-full, 9999px);\n                color: var(--color-text-500, #6b7280);\n                cursor: pointer;\n                display: flex;\n                height: 3%2px;\n                justify-content: center;\n                transition: background-color 0.2s;\n                width: 3%2px;\n              }\n\n              & .close:hover {\n                background-color: var(--color-surface-200);\n                color: var(--color-text-700, #374151);\n              }\n\n/* Drawer body */\n              & .body {\n                height: calc(100 - 60px); /* Adjust based on header + footer height */\n                overflow-y: auto;\n                padding: var(--space-4);\n              }\n\n/* Drawer footer */\n              & .footer {\n                border-top: 1px solid var(--color-border-200, #e5e7eb);\n                display: flex;\n                gap: var(--space-3);\n                justify-content: flex-end;\n                padding: var(--space-4);\n              }\n\n/* Responsive adjustments */\n              @media (max-width: 640px) {\n                .drawer--left,\n                .drawer--right {\n                  width: 100%;\n                }\n              }\n            }\n\n/* Datei: ui/components/dialog.css */\n/**\n            * Dialog\n            *\n            * Dialogs are overlays that require user interaction. They appear in front of\n            * app content to provide critical information or request input, and typically\n            * block interactions with the page until explicitly dismissed.\n            *\n            * @layer: components\n            *\n            * Accessibility:\n            * - Use role=\"dialog\" or role=\"alertdialog\" as appropriate\n            * - Set aria-modal=\"true\" for modal dialogs\n            * - Use aria-labelledby to reference the dialog title\n            * - Focus should be trapped inside the dialog when open\n            * - Return focus to the triggering element when closed\n            * - Support closing via Escape key\n            */\n\n            @layer components {\n/* Dialog overlay/backdrop */\n              .dialog-backdrop {\n                align-items: center;\n                background-color: rgb(0 0 0 / 5000%);\n                display: flex;\n                inset: 0;\n                justify-content: center;\n                opacity: 0%;\n                position: fixed;\n                transition: opacity 0.2s, visibility 0.2s;\n                visibility: hidden;\n                z-index: var(--z-dialog-backdrop, 100);\n              }\n\n              .dialog-backdrop--visible {\n                opacity: 1;\n                visibility: visible;\n              }\n\n/* Dialog container */\n              .dialog {\n                background-color: var(--color-surface-100, #f3f4f6);\n                border-radius: var(--radius-lg, 0.5rem);\n                box-shadow: var(--shadow-xl);\n                display: flex;\n                flex-direction: column;\n                max-height: calc(100 - 80px);\n                max-width: 50%0px;\n                opacity: 0%;\n                overflow: hidden;\n                position: relative;\n                transform: translateY(20px);\n                transition: transform 0.3s, opacity 0.3s;\n                width: 100%;\n              }\n\n              .dialog--visible {\n                opacity: 1;\n                transform: translateY(0%);\n              }\n\n/* Dialog sizes */\n              .dialog--sm {\n                max-width: 40%0px;\n              }\n\n              .dialog--lg {\n                max-width: 80%0px;\n              }\n\n              .dialog--xl {\n                max-width: 100%0px;\n              }\n\n              .dialog--fullscreen {\n                border-radius: 0;\n                height: 100%;\n                max-height: 100%;\n                max-width: none;\n                width: 100%;\n              }\n\n/* Dialog header */\n              & .header {\n                align-items: center;\n                border-bottom: 1px solid var(--color-border-200, #e5e7eb);\n                display: flex;\n                justify-content: space-between;\n                padding: var(--space-4) var(--space-5);\n              }\n\n              & .title {\n                color: var(--color-text-900, #111827);\n                font-size: var(--text-lg);\n                font-weight: var(--font-semibold, 600);\n                margin: 0;\n              }\n\n/* Dialog close button */\n              & .close {\n                align-items: center;\n                background: transparent;\n                border: none;\n                border-radius: var(--radius-full, 9999px);\n                color: var(--color-text-500, #6b7280);\n                cursor: pointer;\n                display: flex;\n                height: 3%2px;\n                justify-content: center;\n                transition: background-color 0.2s, color 0.2s;\n                width: 3%2px;\n              }\n\n              & .close:hover {\n                background-color: var(--color-surface-200);\n                color: var(--color-text-700, #374151);\n              }\n\n/* Dialog body */\n              & .body {\n                flex: 1;\n                overflow-y: auto;\n                padding: var(--space-5);\n              }\n\n/* Dialog footer */\n              & .footer {\n                align-items: center;\n                background-color: var(--color-surface-50);\n                border-top: 1px solid var(--color-border-200, #e5e7eb);\n                display: flex;\n                gap: var(--space-3);\n                justify-content: flex-end;\n                padding: var(--space-4) var(--space-5);\n              }\n\n/* Dialog variants */\n              .dialog--danger & .header {\n                background-color: var(--color-error-50);\n                color: var(--color-error-900);\n              }\n\n              .dialog--info & .header {\n                background-color: var(--color-info-50);\n                color: var(--color-info-900);\n              }\n\n              .dialog--warning & .header {\n                background-color: var(--color-warning-50);\n                color: var(--color-warning-900);\n              }\n\n              .dialog--success & .header {\n                background-color: var(--color-success-50);\n                color: var(--color-success-900);\n              }\n\n/* Dialog animations */\n              .dialog--slide-up {\n                transform: translateY(100%);\n              }\n\n              .dialog--slide-up.dialog--visible {\n                transform: translateY(0%);\n              }\n\n              .dialog--slide-down {\n                transform: translateY(-100%);\n              }\n\n              .dialog--slide-down.dialog--visible {\n                transform: translateY(0%);\n              }\n\n              .dialog--zoom {\n                transform: scale(0.9%);\n              }\n\n              .dialog--zoom.dialog--visible {\n                transform: scale(1);\n              }\n\n/* Simple confirmation dialog */\n              .dialog--confirmation & .body {\n                padding: var(--space-6) var(--space-5);\n                text-align: center;\n              }\n\n/* Responsive adjustments */\n              @media (max-width: 640px) {\n                .dialog {\n                  max-height: calc(100 - 64px);\n                  max-width: calc(100vw - 32px);\n                }\n\n                .dialog--lg,\n                .dialog--xl {\n                  max-width: calc(100vw - 32px);\n                }\n              }\n            }\n\n/* Datei: ui/components/data-table.css */\n/**\n            * Data Tables\n            *\n            * Data tables display structured data in rows and columns with advanced features\n            * like sorting, filtering, pagination, and row selection. They're designed for\n            * complex data sets that require user interaction and data manipulation.\n            *\n            * @layer: components\n            *\n            * Accessibility:\n            * - Use proper table semantics (th, caption, scope attributes)\n            * - Include ARIA attributes for interactive features\n            * - Support keyboard navigation for sorting, selection, etc.\n            * - Provide clear visual focus indicators\n            */\n\n            @layer components {\n/* Data table container */\n              .data-table-container {\n                background-color: var(--color-surface-100, #f3f4f6);\n                border: 1px solid var(--color-border-200, #e5e7eb);\n                border-radius: var(--radius-md, 0.375rem);\n                overflow-x: auto;\n                width: 100%;\n              }\n\n/* Data table */\n              .data-table {\n                border-collapse: separate;\n                border-spacing: 0;\n                font-size: var(--text-sm, 0.875rem);\n                width: 100%;\n              }\n\n/* Table caption */\n              & .caption {\n                background-color: var(--color-surface-50);\n                border-bottom: 1px solid var(--color-border-200, #e5e7eb);\n                color: var(--color-text-900, #111827);\n                font-weight: var(--font-semibold, 600);\n                padding: var(--space-3) var(--space-4);\n                text-align: left;\n              }\n\n/* Table header */\n              & .header {\n                background-color: var(--color-surface-50);\n                border-bottom: 2px solid var(--color-border-300);\n              }\n\n              & .header-cell {\n                color: var(--color-text-700, #374151);\n                font-weight: var(--font-semibold, 600);\n                padding: var(--space-3) var(--space-4);\n                position: relative;\n                text-align: left;\n                white-space: nowrap;\n              }\n\n/* Sortable header cells */\n              & .header-cell--sortable {\n                cursor: pointer;\n                padding-right: var(--space-8);\n                user-select: none;\n              }\n\n              & .header-cell--sortable:hover {\n                background-color: var(--color-surface-100, #f3f4f6);\n              }\n\n/* Sort indicators */\n              & .sort-icon {\n                color: var(--color-text-400);\n                position: absolute;\n                right: var(--space-3);\n                top: 50%;\n                transform: translateY(-50%);\n                transition: transform 0.2s, color 0.2s;\n              }\n\n              & .header-cell--sorted-asc & .sort-icon {\n                color: var(--color-primary-600, #2563eb);\n                transform: translateY(-50%) rotate(180deg);\n              }\n\n              & .header-cell--sorted-desc & .sort-icon {\n                color: var(--color-primary-600, #2563eb);\n              }\n\n/* Table body */\n              & .body {\n                background-color: var(--color-surface-100, #f3f4f6);\n              }\n\n              & .row {\n                transition: background-color 0.2s;\n              }\n\n              & .row:hover {\n                background-color: var(--color-surface-200);\n              }\n\n              & .cell {\n                border-bottom: 1px solid var(--color-border-100, #f3f4f6);\n                padding: var(--space-3) var(--space-4);\n              }\n\n/* Row states */\n              & .row--selected {\n                background-color: var(--color-primary-50);\n              }\n\n              & .row--selected:hover {\n                background-color: var(--color-primary-100, #dbeafe);\n              }\n\n/* Cell variants */\n              & .cell--numeric {\n                text-align: right;\n              }\n\n              & .cell--action {\n                padding: var(--space-2);\n                white-space: nowrap;\n                width: 1%;\n              }\n\n/* Empty state */\n              & .empty {\n                color: var(--color-text-500, #6b7280);\n                padding: var(--space-8);\n                text-align: center;\n              }\n\n/* Data table controls */\n              & .controls {\n                align-items: center;\n                background-color: var(--color-surface-50);\n                border-top: 1px solid var(--color-border-200, #e5e7eb);\n                display: flex;\n                justify-content: space-between;\n                padding: var(--space-3) var(--space-4);\n              }\n\n/* Search and filter */\n              & .search {\n                margin-bottom: var(--space-4);\n                position: relative;\n              }\n\n              & .search-input {\n                border: 1px solid var(--color-border-200, #e5e7eb);\n                border-radius: var(--radius-md, 0.375rem);\n                padding: var(--space-2) var(--space-3);\n                padding-left: var(--space-8);\n                width: 100%;\n              }\n\n              & .search-icon {\n                color: var(--color-text-400);\n                left: var(--space-3);\n                position: absolute;\n                top: 50%;\n                transform: translateY(-50%);\n              }\n\n/* Column filter button */\n              & .filter-button {\n                background: none;\n                border: none;\n                color: var(--color-text-500, #6b7280);\n                cursor: pointer;\n                margin-left: var(--space-1);\n                padding: var(--space-1);\n              }\n\n              & .filter-button--active {\n                color: var(--color-primary-600, #2563eb);\n              }\n\n/* Column visibility menu */\n              & .column-menu {\n                background-color: var(--color-surface-100, #f3f4f6);\n                border: 1px solid var(--color-border-200, #e5e7eb);\n                border-radius: var(--radius-md, 0.375rem);\n                box-shadow: var(--shadow-lg);\n                min-width: 18%0px;\n                padding: var(--space-2);\n                position: absolute;\n                right: var(--space-3);\n                top: calc(100 + var(--space-2));\n                z-index: 10;\n              }\n\n              & .column-item {\n                align-items: center;\n                cursor: pointer;\n                display: flex;\n                padding: var(--space-2);\n              }\n\n              & .column-checkbox {\n                margin-right: var(--space-2);\n              }\n\n/* Row selection */\n              & .select-cell {\n                padding: var(--space-2) var(--space-4);\n                width: 1%;\n              }\n\n              & .select-all {\n                margin: 0;\n              }\n\n/* Pagination */\n              & .pagination {\n                align-items: center;\n                display: flex;\n                gap: var(--space-2);\n              }\n\n              & .page-info {\n                color: var(--color-text-500, #6b7280);\n                font-size: var(--text-sm, 0.875rem);\n                margin-right: var(--space-4);\n              }\n\n              & .page-button {\n                align-items: center;\n                background-color: var(--color-surface-100, #f3f4f6);\n                border: 1px solid var(--color-border-200, #e5e7eb);\n                border-radius: var(--radius-md, 0.375rem);\n                cursor: pointer;\n                display: inline-flex;\n                height: 3%2px;\n                justify-content: center;\n                transition: background-color 0.2s, border-color 0.2s;\n                width: 3%2px;\n              }\n\n              & .page-button:hover {\n                background-color: var(--color-surface-200);\n                border-color: var(--color-border-300);\n              }\n\n              & .page-button:disabled {\n                cursor: not-allowed;\n                opacity: 5000%;\n              }\n\n              & .page-button--active {\n                background-color: var(--color-primary-500);\n                border-color: var(--color-primary-500);\n                color: white;\n              }\n\n/* Rows per page selector */\n              & .per-page {\n                align-items: center;\n                display: flex;\n                font-size: var(--text-sm, 0.875rem);\n                gap: var(--space-2);\n                margin-right: var(--space-4);\n              }\n\n              & .per-page-select {\n                border: 1px solid var(--color-border-200, #e5e7eb);\n                border-radius: var(--radius-md, 0.375rem);\n                padding: var(--space-1) var(--space-2);\n              }\n\n/* Responsive adjustments */\n              @media (max-width: 768px) {\n                & .controls {\n                  align-items: flex-start;\n                  flex-direction: column;\n                  gap: var(--space-3);\n                }\n\n                & .pagination {\n                  justify-content: space-between;\n                  width: 100%;\n                }\n              }\n\n/* Collapsible table for mobile */\n              @media (max-width: 640px) {\n                .data-table--responsive & .header {\n                  display: none;\n                }\n\n                .data-table--responsive & .row {\n                  border-bottom: 1px solid var(--color-border-200, #e5e7eb);\n                  display: block;\n                  padding: var(--space-3);\n                }\n\n                .data-table--responsive & .cell {\n                  border-bottom: none;\n                  display: flex;\n                  padding: var(--space-2) 0;\n                  text-align: right;\n                }\n\n                .data-table--responsive & .cell::before {\n                  content: attr(data-label);\n                  font-weight: var(--font-semibold, 600);\n                  margin-right: auto;\n                  padding-right: var(--space-4);\n                }\n              }\n            }\n\n/* Datei: ui/components/comment.css */\n/**\n            * Comments\n            *\n            * Comment components display user-generated responses, feedback, or discussions\n            * related to content. They typically include the commenter's information, content,\n            * timestamp, and interactive elements like reply or like buttons.\n            *\n            * @layer: components\n            *\n            * Accessibility:\n            * - Use proper heading structure for comment threads\n            * - Ensure adequate color contrast for all text\n            * - Use semantic HTML (article, header, footer) for comment structure\n            * - Make interactive elements keyboard accessible\n            */\n\n            @layer components {\n/* Comment container */\n              .comment {\n                border-bottom: 1px solid var(--color-border-100, #f3f4f6);\n                display: flex;\n                padding: var(--space-4);\n              }\n\n/* Nested comments */\n              & .replies {\n                margin-left: var(--space-10);\n                margin-top: var(--space-4);\n              }\n\n/* Comment avatar */\n              & .avatar {\n                border-radius: var(--radius-full, 9999px);\n                flex-shrink: 0;\n                height: 4%0px;\n                margin-right: var(--space-3);\n                object-fit: cover;\n                width: 4%0px;\n              }\n\n/* Comment content area */\n              & .content {\n                flex: 1;\n                min-width: 0%; /* Prevent flex item from overflowing */\n              }\n\n/* Comment header with author info */\n              & .header {\n                align-items: baseline;\n                display: flex;\n                flex-wrap: wrap;\n                margin-bottom: var(--space-2);\n              }\n\n              & .author {\n                color: var(--color-text-900, #111827);\n                font-weight: var(--font-semibold, 600);\n                margin-right: var(--space-2);\n              }\n\n              & .meta {\n                color: var(--color-text-500, #6b7280);\n                font-size: var(--text-xs, 0.75rem);\n              }\n\n/* Author badge for special users */\n              & .badge {\n                border-radius: var(--radius-full, 9999px);\n                display: inline-block;\n                font-size: var(--text-xs, 0.75rem);\n                font-weight: var(--font-medium, 500);\n                line-height: 1.5;\n                margin-left: var(--space-2);\n                padding: 0 var(--space-2);\n                text-transform: uppercase;\n              }\n\n              & .badge--author {\n                background-color: var(--color-primary-100, #dbeafe);\n                color: var(--color-primary-700, #1d4ed8);\n              }\n\n              & .badge--moderator {\n                background-color: var(--color-success-100, #d1fae5);\n                color: var(--color-success-700, #047857);\n              }\n\n/* Comment body */\n              & .body {\n                line-height: 1.5;\n                margin-bottom: var(--space-3);\n                overflow-wrap: break-word;\n                word-wrap: break-word;\n              }\n\n/* Comment attachment (image, link preview, etc.) */\n              & .attachment {\n                border: 1px solid var(--color-border-200, #e5e7eb);\n                border-radius: var(--radius-md, 0.375rem);\n                margin: var(--space-3) 0;\n                overflow: hidden;\n              }\n\n              & .image {\n                display: block;\n                height: auto;\n                max-width: 100%;\n              }\n\n/* Comment footer with actions */\n              & .footer {\n                align-items: center;\n                display: flex;\n                gap: var(--space-4);\n                margin-top: var(--space-2);\n              }\n\n/* Comment action button */\n              & .action {\n                align-items: center;\n                background: none;\n                border: none;\n                border-radius: var(--radius-md, 0.375rem);\n                color: var(--color-text-500, #6b7280);\n                cursor: pointer;\n                display: inline-flex;\n                font-size: var(--text-xs, 0.75rem);\n                padding: var(--space-1) var(--space-2);\n                transition: color 0.2s, background-color 0.2s;\n              }\n\n              & .action:hover {\n                background-color: var(--color-surface-100, #f3f4f6);\n                color: var(--color-text-700, #374151);\n              }\n\n              & .action-icon {\n                margin-right: var(--space-1);\n              }\n\n/* Comment action states */\n              & .action--active {\n                color: var(--color-primary-600, #2563eb);\n                font-weight: var(--font-medium, 500);\n              }\n\n/* Comment editor */\n              .comment-editor {\n                border: 1px solid var(--color-border-200, #e5e7eb);\n                border-radius: var(--radius-lg, 0.5rem);\n                margin: var(--space-4) 0;\n                overflow: hidden;\n              }\n\n              & .content {\n                border: none;\n                color: var(--color-text-900, #111827);\n                font-family: inherit;\n                font-size: var(--text-sm, 0.875rem);\n                min-height: 10%0px;\n                padding: var(--space-3);\n                resize: vertical;\n                width: 100%;\n              }\n\n              & .content:focus {\n                outline: none;\n              }\n\n              & .footer {\n                align-items: center;\n                background-color: var(--color-surface-100, #f3f4f6);\n                border-top: 1px solid var(--color-border-100, #f3f4f6);\n                display: flex;\n                justify-content: space-between;\n                padding: var(--space-2) var(--space-3);\n              }\n\n              & .actions {\n                display: flex;\n                gap: var(--space-2);\n              }\n\n/* Empty state */\n              .comments-empty {\n                color: var(--color-text-500, #6b7280);\n                padding: var(--space-8) var(--space-4);\n                text-align: center;\n              }\n\n/* Comment states */\n              .comment--highlighted {\n                background-color: var(--color-primary-50);\n              }\n\n              .comment--deleted {\n                opacity: 0.7;\n              }\n\n              .comment--deleted & .body {\n                color: var(--color-text-400);\n                font-style: italic;\n              }\n\n/* Responsive adjustments */\n              @media (max-width: 640px) {\n                & .replies {\n                  margin-left: var(--space-6);\n                }\n\n                & .avatar {\n                  height: 3%2px;\n                  width: 3%2px;\n                }\n              }\n            }\n\n/* Datei: ui/components/code.css */\n/**\n            * Code-Element Styles\n            */\n\n            @layer elements {\n/* Code */\n              code {\n                background-color: var(--color-background-alt, #f9fafb);\n                border-radius: 3px;\n                padding: 01.2em 0.4em;\n              }\n\n              pre {\n                background-color: var(--color-background-alt, #f9fafb);\n                border-radius: 4px;\n                margin: 1rem 0;\n                overflow-x: auto;\n                padding: 1rem;\n              }\n\n              pre code {\n                background-color: transparent;\n                padding: 0;\n              }\n            }\n\n/* Datei: ui/components/code-block.css */\n/**\n            * Code Block\n            *\n            * Code blocks display programming code snippets with syntax highlighting,\n            * line numbers, and copy functionality. They help users understand and\n            * implement technical examples within documentation or tutorials.\n            *\n            * @layer: components\n            *\n            * Accessibility:\n            * - Use appropriate semantic elements (pre, code)\n            * - Ensure sufficient color contrast for syntax highlighting\n            * - Make copy functionality accessible via keyboard\n            * - Consider adding aria-label for language identification\n            */\n\n            @layer components {\n/* Code block container */\n              .code-block {\n                background-color: var(--color-code-bg, var(--color-neutral-900, #111827));\n                border-radius: var(--radius-md, 0.375rem);\n                color: var(--color-code-text, var(--color-neutral-100, #f3f4f6));\n                font-family: var(--font-family-mono);\n                font-size: var(--text-sm, 0.875rem);\n                margin: var(--space-4) 0;\n                overflow: hidden;\n                position: relative;\n              }\n\n/* Code block header with language label and actions */\n              & .header {\n                align-items: center;\n                background-color: var(--color-code-header-bg, var(--color-neutral-800, #1f2937));\n                border-bottom: 1px solid var(--color-code-border, var(--color-neutral-700, #374151));\n                color: var(--color-code-header-text, var(--color-neutral-300, #d1d5db));\n                display: flex;\n                font-family: var(--font-family-sans);\n                font-size: var(--text-xs, 0.75rem);\n                justify-content: space-between;\n                padding: var(--space-2) var(--space-4);\n              }\n\n/* Language label */\n              & .language {\n                font-weight: var(--font-medium, 500);\n                letter-spacing: 0.05em;\n                text-transform: uppercase;\n              }\n\n/* Header actions container */\n              & .actions {\n                display: flex;\n                gap: var(--space-2);\n              }\n\n/* Action button (e.g., copy, expand) */\n              & .action {\n                align-items: center;\n                background: transparent;\n                border: none;\n                border-radius: var(--radius-sm, 0.125rem);\n                color: var(--color-code-action, var(--color-neutral-400, #9ca3af));\n                cursor: pointer;\n                display: flex;\n                justify-content: center;\n                padding: var(--space-1);\n                transition: color 0.2s, background-color 0.2s;\n              }\n\n              & .action:hover {\n                background-color: var(--color-code-action-bg-hover, rgb(255 255 255 / 1000%));\n                color: var(--color-code-action-hover, var(--color-neutral-100, #f3f4f6));\n              }\n\n/* Copy success state */\n              & .action--copied {\n                color: var(--color-success-500) !important;\n              }\n\n/* Code content area */\n              & .content {\n                counter-reset: line;\n                overflow-x: auto;\n                padding: var(--space-4);\n                position: relative;\n              }\n\n/* Code with line numbers */\n              .code-block--numbered & .content {\n                padding-left: 3%.5rem;\n              }\n\n/* Code lines */\n              & .line {\n                display: block;\n                line-height: 1%.6;\n                position: relative;\n              }\n\n/* Line numbers */\n              .code-block--numbered & .line::before {\n                color: var(--color-code-line-number, var(--color-neutral-500, #6b7280));\n                content: counter(line);\n                counter-increment: line;\n                left: -2.5rem;\n                position: absolute;\n                text-align: right;\n                user-select: none;\n                width: 1%.5rem;\n              }\n\n/* Highlighted line */\n              & .line--highlighted {\n                background-color: var(--color-code-highlight-bg, rgb(255 255 255 / 1000%));\n                border-left: 2px solid var(--color-primary-500);\n                margin: 0 -1rem;\n                padding: 0 1rem;\n              }\n\n/* Line with error */\n              & .line--error {\n                background-color: var(--color-code-error-bg, rgb(220 38 38 / 2000%));\n                border-left: 2px solid var(--color-error-500);\n                margin: 0 -1rem;\n                padding: 0 1rem;\n              }\n\n/* Syntax highlighting - basic theme */\n              & .keyword {\n                color: var(--color-code-keyword, #c792ea);\n              }\n\n              & .string {\n                color: var(--color-code-string, #c3e88d);\n              }\n\n              & .function {\n                color: var(--color-code-function, #82aaff);\n              }\n\n              & .number {\n                color: var(--color-code-number, #f78c6c);\n              }\n\n              & .comment {\n                color: var(--color-code-comment, #676e95);\n                font-style: italic;\n              }\n\n              & .operator {\n                color: var(--color-code-operator, #89ddff);\n              }\n\n              & .punctuation {\n                color: var(--color-code-punctuation, #89ddff);\n              }\n\n              & .tag {\n                color: var(--color-code-tag, #f07178);\n              }\n\n              & .attribute {\n                color: var(--color-code-attribute, #ffcb6b);\n              }\n\n/* Code block variations */\n              .code-block--inline {\n                border-radius: var(--radius-sm, 0.125rem);\n                display: inline-block;\n                font-size: 0.9em;\n                margin: 0;\n                padding: 01.2em 0.4em;\n                vertical-align: middle;\n                white-space: nowrap;\n              }\n\n/* Expandable code block */\n              .code-block--expandable & .content {\n                max-height: 30%0px;\n                overflow-y: auto;\n                transition: max-height 0.3s ease;\n              }\n\n              .code-block--expanded & .content {\n                max-height: 100%0px;\n              }\n\n/* Fade effect for expandable code blocks */\n              .code-block--expandable::after {\n                background: linear-gradient(to bottom, transparent, var(--color-code-bg, var(--color-neutral-900, #111827)));\n                bottom: 0%;\n                content: \"\";\n                height: 6%0px;\n                left: 0%;\n                pointer-events: none;\n                position: absolute;\n                right: 0%;\n                transition: opacity 0.3s ease;\n              }\n\n              .code-block--expanded::after {\n                opacity: 0%;\n              }\n\n/* Expand toggle button */\n              & .expand-toggle {\n                background: var(--color-code-expand-bg, var(--color-neutral-700, #374151));\n                border: none;\n                border-radius: var(--radius-full, 9999px);\n                bottom: var(--space-2);\n                color: var(--color-code-expand-text, var(--color-neutral-200, #e5e7eb));\n                cursor: pointer;\n                font-size: var(--text-xs, 0.75rem);\n                left: 50%;\n                padding: var(--space-1) var(--space-3);\n                position: absolute;\n                transform: translateX(-50%);\n                transition: background-color 0.2s;\n                z-index: 1;\n              }\n\n              & .expand-toggle:hover {\n                background-color: var(--color-code-expand-hover-bg, var(--color-neutral-600));\n              }\n\n/* Light theme variation */\n              .code-block--light {\n                background-color: var(--color-code-light-bg, var(--color-neutral-100, #f3f4f6));\n                color: var(--color-code-light-text, var(--color-neutral-900, #111827));\n              }\n\n              .code-block--light & .header {\n                background-color: var(--color-code-light-header-bg, var(--color-neutral-200, #e5e7eb));\n                border-color: var(--color-code-light-border, var(--color-neutral-300, #d1d5db));\n                color: var(--color-code-light-header-text, var(--color-neutral-700, #374151));\n              }\n\n/* Responsive adjustments */\n              @media (max-width: 640px) {\n                .code-block {\n                  font-size: var(--text-xs, 0.75rem);\n                }\n\n                .code-block--numbered & .content {\n                  padding-left: 3rem;\n                }\n\n                .code-block--numbered & .line::before {\n                  left: -2rem;\n                }\n              }\n            }\n\n/* Datei: ui/components/chip.css */\n/*\n            * Chip-Komponente\n            *\n            * Interaktive Chips oder Tags, optional mit Remove-Button.\n            */\n\n/**\n            * Chips / Tags\n            *\n            * Kompakte Kennzeichnungselemente für Filterbedingungen, Auswahloptionen oder Status.\n            * Chips (auch bekannt als \"Tokens\") sind interaktive Elemente, die Auswahlen oder Eigenschaften darstellen.\n            *\n            * @layer: elements\n            *\n            * Accessibility:\n            * - Für auswählbare Chips role=\"option\" verwenden\n            * - Fokuszustände gut sichtbar gestalten\n            * - Bei löschbaren Chips beschreibende aria-label hinzufügen\n            * - Tastaturnavigation unterstützen\n            */\n\n            @layer elements {\n/* Basis-Chip */\n              .chip {\n                align-items: center;\n                background-color: var(--color-neutral-100, #f3f4f6);\n                border-radius: var(--radius-full, 9999px);\n                color: var(--color-neutral-800, #1f2937);\n                display: inline-flex;\n                font-size: var(--text-sm, 0.875rem);\n                font-weight: var(--font-medium, 500);\n                gap: 0.5rem;\n                padding: 0.25rem 0.75rem;\n                transition: background-color 0.2s, box-shadow 0.2s;\n              }\n\n/* Chip-Größen */\n              .chip--sm {\n                font-size: var(--text-xs, 0.75rem);\n                padding: 0.125rem 0.5rem;\n              }\n\n              .chip--md {\n                padding: 0.25rem 0.75rem;\n              }\n\n              .chip--lg {\n                font-size: var(--text-base);\n                padding: 0.375rem 1rem;\n              }\n\n/* Chip-Farben */\n              .chip--primary {\n                background-color: var(--color-primary-100, #dbeafe);\n                color: var(--color-primary-800, #1e40af);\n              }\n\n              .chip--secondary {\n                background-color: var(--color-secondary-100, #f1f5f9);\n                color: var(--color-secondary-800, #1e293b);\n              }\n\n              .chip--success {\n                background-color: var(--color-success-100, #d1fae5);\n                color: var(--color-success-800, #065f46);\n              }\n\n              .chip--warning {\n                background-color: var(--color-warning-100, #fef3c7);\n                color: var(--color-warning-800, #92400e);\n              }\n\n              .chip--danger {\n                background-color: var(--color-error-100, #fee2e2);\n                color: var(--color-error-800, #991b1b);\n              }\n\n              .chip--info {\n                background-color: var(--color-info-100, #dbeafe);\n                color: var(--color-info-800, #1e40af);\n              }\n\n/* Solid-Varianten */\n              .chip--solid {\n                background-color: var(--color-neutral-600);\n                color: white;\n              }\n\n              .chip--solid.chip--primary {\n                background-color: var(--color-primary-500);\n                color: white;\n              }\n\n              .chip--solid.chip--secondary {\n                background-color: var(--color-secondary-500);\n                color: white;\n              }\n\n              .chip--solid.chip--success {\n                background-color: var(--color-success-500);\n                color: white;\n              }\n\n              .chip--solid.chip--warning {\n                background-color: var(--color-warning-500);\n                color: var(--color-warning-900);\n              }\n\n              .chip--solid.chip--danger {\n                background-color: var(--color-error-500);\n                color: white;\n              }\n\n              .chip--solid.chip--info {\n                background-color: var(--color-info-500);\n                color: white;\n              }\n\n/* Outline-Varianten */\n              .chip--outline {\n                background-color: transparent;\n                border: 1px solid currentColor;\n              }\n\n/* Icon im Chip */\n              & .icon {\n                display: inline-flex;\n                font-size: 1em;\n                height: 1em;\n                width: 1em;\n              }\n\n/* Remove-Button */\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: 11%.2em;\n                justify-content: center;\n                margin-right: -0.25rem;\n                opacity: 0.7;\n                padding: 0;\n                transition: opacity 0.2s, background-color 0.2s;\n                width: 11%.2em;\n              }\n\n              & .remove:hover {\n                background-color: rgb(0 0 0 / 1000%);\n                opacity: 1;\n              }\n\n/* Avatar im Chip */\n              & .avatar {\n                border-radius: 50px;\n                height: 10%.5em;\n                margin-left: -0.25rem;\n                object-fit: cover;\n                width: 10%.5em;\n              }\n\n/* Interaktiver Chip */\n              .chip--interactive {\n                cursor: pointer;\n              }\n\n              .chip--interactive:hover {\n                background-color: var(--color-neutral-200, #e5e7eb);\n              }\n\n              .chip--interactive:focus {\n                box-shadow: 0 0 0 2px var(--color-primary-200);\n                outline: none;\n              }\n\n/* Ausgewählter Chip */\n              .chip--selected {\n                background-color: var(--color-primary-100, #dbeafe);\n                border: 1px solid var(--color-primary-300);\n                color: var(--color-primary-800, #1e40af);\n              }\n\n              .chip--selected:hover {\n                background-color: var(--color-primary-200);\n              }\n\n/* Deaktivierter Chip */\n              .chip--disabled {\n                cursor: not-allowed;\n                opacity: 5000%;\n              }\n\n              .chip--disabled & .remove {\n                cursor: not-allowed;\n              }\n\n/* Chip-Gruppe */\n              .chip-group {\n                display: flex;\n                flex-wrap: wrap;\n                gap: 0.5rem;\n              }\n\n              .chip-group--inline {\n                display: inline-flex;\n              }\n\n              .chip-group--vertical {\n                flex-direction: column;\n              }\n            }\n\n\n\n/* Datei: ui/components/chat.css */\n/**\n            * Chat (Live)\n            *\n            * A live chat interface allows users to exchange messages in real-time.\n            * This component includes message bubbles, input area, and conversation layout,\n            * suitable for customer support chats, messaging applications, or community discussions.\n            *\n            * @layer: components\n            *\n            * Accessibility:\n            * - Ensure proper focus management for new messages\n            * - Provide clear visual distinctions between sent and received messages\n            * - Include proper ARIA roles and labels\n            * - Support keyboard navigation throughout the chat interface\n            */\n\n            @layer components {\n/* Chat container */\n              .chat {\n                background-color: var(--color-surface-50);\n                border: 1px solid var(--color-border-200, #e5e7eb);\n                border-radius: var(--radius-lg, 0.5rem);\n                display: flex;\n                flex-direction: column;\n                height: 100%;\n                max-height: 60%0px;\n                overflow: hidden;\n              }\n\n/* Chat header */\n              & .header {\n                align-items: center;\n                background-color: var(--color-surface-100, #f3f4f6);\n                border-bottom: 1px solid var(--color-border-200, #e5e7eb);\n                display: flex;\n                padding: var(--space-3) var(--space-4);\n              }\n\n              & .avatar {\n                border-radius: var(--radius-full, 9999px);\n                height: 3%6px;\n                margin-right: var(--space-3);\n                object-fit: cover;\n                width: 3%6px;\n              }\n\n              & .info {\n                flex: 1;\n              }\n\n              & .name {\n                color: var(--color-text-900, #111827);\n                font-weight: var(--font-semibold, 600);\n                margin: 0;\n              }\n\n              & .status {\n                align-items: center;\n                color: var(--color-text-500, #6b7280);\n                display: flex;\n                font-size: var(--text-xs, 0.75rem);\n              }\n\n              & .status-indicator {\n                border-radius: var(--radius-full, 9999px);\n                display: inline-block;\n                height: 8px;\n                margin-right: var(--space-1);\n                width: 8px;\n              }\n\n              & .status-indicator--online {\n                background-color: var(--color-success-500);\n              }\n\n              & .status-indicator--offline {\n                background-color: var(--color-neutral-400, #9ca3af);\n              }\n\n              & .status-indicator--typing {\n                animation: pulse 1.5s infinite;\n                background-color: var(--color-warning-500);\n              }\n\n/* Chat body - message container */\n              & .body {\n                display: flex;\n                flex: 1;\n                flex-direction: column;\n                overflow-y: auto;\n                padding: var(--space-4);\n              }\n\n/* Message groups */\n              & .message-group {\n                margin-bottom: var(--space-4);\n              }\n\n              & .message-group--sent {\n                align-self: flex-end;\n                max-width: 80%;\n              }\n\n              & .message-group--received {\n                align-self: flex-start;\n                max-width: 80%;\n              }\n\n/* Individual message */\n              & .message {\n                border-radius: var(--radius-lg, 0.5rem);\n                margin-bottom: var(--space-2);\n                padding: var(--space-3);\n                position: relative;\n                word-wrap: break-word;\n              }\n\n              & .message--sent {\n                background-color: var(--color-primary-500);\n                border-bottom-right-radius: var(--radius-xs);\n                color: white;\n              }\n\n              & .message--received {\n                background-color: var(--color-surface-200);\n                border-bottom-left-radius: var(--radius-xs);\n                color: var(--color-text-900, #111827);\n              }\n\n/* Message metadata */\n              & .message-time {\n                font-size: var(--text-xs, 0.75rem);\n                margin-top: var(--space-1);\n                opacity: 8000%;\n                text-align: right;\n              }\n\n/* System messages */\n              & .system-message {\n                align-self: center;\n                background-color: var(--color-surface-100, #f3f4f6);\n                border-radius: var(--radius-md, 0.375rem);\n                color: var(--color-text-400);\n                font-size: var(--text-xs, 0.75rem);\n                margin: var(--space-4) 0;\n                padding: var(--space-2);\n                text-align: center;\n              }\n\n/* Typing indicator */\n              & .typing {\n                align-items: center;\n                color: var(--color-text-500, #6b7280);\n                display: flex;\n                font-size: var(--text-xs, 0.75rem);\n                margin-top: var(--space-2);\n              }\n\n              & .typing-dots {\n                display: flex;\n                margin-left: var(--space-2);\n              }\n\n              & .typing-dot {\n                animation: typingAnimation 1.4s infinite;\n                animation-fill-mode: both;\n                background-color: var(--color-text-400);\n                border-radius: var(--radius-full, 9999px);\n                height: 6px;\n                margin-right: 3px;\n                width: 6px;\n              }\n\n              & .typing-dot:nth-child(2) {\n                animation-delay: 0.2s;\n              }\n\n              & .typing-dot:nth-child(3) {\n                animation-delay: 0.4s;\n              }\n\n              @keyframes typingAnimation {\n                0 { opacity: 4000%; transform: translateY(0%); }\n\n                50 { opacity: 1; transform: translateY(-4px); }\n\n                100 { opacity: 4000%; transform: translateY(0%); }\n              }\n\n/* Chat footer - input area */\n              & .footer {\n                background-color: var(--color-surface-100, #f3f4f6);\n                border-top: 1px solid var(--color-border-200, #e5e7eb);\n                padding: var(--space-3);\n              }\n\n              & .input-container {\n                align-items: flex-end;\n                display: flex;\n              }\n\n              & .input {\n                background-color: var(--color-surface-50);\n                border: 1px solid var(--color-border-200, #e5e7eb);\n                border-radius: var(--radius-lg, 0.5rem);\n                flex: 1;\n                max-height: 12%0px;\n                min-height: 4%4px;\n                overflow-y: auto;\n                padding: var(--space-2) var(--space-3);\n                resize: none;\n              }\n\n              & .input:focus {\n                border-color: var(--color-primary-300);\n                box-shadow: 0 0 0 2px var(--color-primary-100, #dbeafe);\n                outline: none;\n              }\n\n              & .send {\n                align-items: center;\n                background-color: var(--color-primary-500);\n                border: none;\n                border-radius: var(--radius-full, 9999px);\n                color: white;\n                cursor: pointer;\n                display: flex;\n                height: 4%0px;\n                justify-content: center;\n                margin-left: var(--space-2);\n                transition: background-color 0.2s;\n                width: 4%0px;\n              }\n\n              & .send:hover {\n                background-color: var(--color-primary-600, #2563eb);\n              }\n\n              & .send:disabled {\n                background-color: var(--color-neutral-300, #d1d5db);\n                cursor: not-allowed;\n              }\n\n/* Attachment button */\n              & .attachment {\n                background: none;\n                border: none;\n                border-radius: var(--radius-full, 9999px);\n                color: var(--color-text-500, #6b7280);\n                cursor: pointer;\n                margin-right: var(--space-2);\n                padding: var(--space-2);\n              }\n\n              & .attachment:hover {\n                background-color: var(--color-surface-200);\n              }\n\n/* Empty state */\n              & .empty {\n                align-items: center;\n                color: var(--color-text-400);\n                display: flex;\n                flex-direction: column;\n                height: 100%;\n                justify-content: center;\n                padding: var(--space-4);\n                text-align: center;\n              }\n\n/* Responsive adjustments */\n              @media (max-width: 640px) {\n                & .message-group--sent,\n                & .message-group--received {\n                  max-width: 90%;\n                }\n              }\n            }\n\n/* Datei: ui/components/card.css */\n/*\n            * Cards Module\n            *\n            * Layoutregeln für ein responsives Card-Grid. Nutzt Flexbox und Grid für flexible Layouts.\n            */\n\n/**\n            * Card-Modul\n            *\n            * Container für Inhaltsblöcke, die zusammengehörende Informationen präsentieren.\n            * Cards bieten eine visuelle Gruppierung von zusammengehörigen Inhalten und Aktionen.\n            *\n            * @layer components.card\n            *\n            * Grundlegende Verwendung:\n            * <div class=\"card\">\n            *   <h3>Kartentitel</h3>\n            *   <p>Karteninhalt</p>\n            * </div>\n            *\n            * Mit Grid-Layout:\n            * <div class=\"card-grid\">\n            *   <div class=\"card\">Karte 1</div>\n            *   <div class=\"card\">Karte 2</div>\n            *   <div class=\"card\">Karte 3</div>\n            * </div>\n            *\n            * Varianten (können mit Utility-Klassen kombiniert werden):\n            * <div class=\"card primary\">Primäre Karte</div>\n            * <div class=\"card surface\">Karte mit Hintergrundfarbe</div>\n            * <div class=\"card border\">Karte mit Rahmen</div>\n            * <div class=\"card shadow-lg\">Karte mit stärkerem Schatten</div>\n            * <div class=\"card p-6\">Karte mit mehr Padding</div>\n            *\n            * Flüssig skalierende Karte:\n            * <div class=\"card fluid\">\n            *   <h3>Adaptive Karte</h3>\n            *   <p>Diese Karte skaliert flüssig mit der Container-Größe</p>\n            * </div>\n            */\n\n\n/**\n            * Card Component Structure:\n            *\n            * <div class=\"card\">\n            *   <div class=\"card-header\">\n            *     <h3 class=\"card-title\">Card Title</h3>\n            *     <div class=\"card-actions\"><!-- Actions --></div>\n            *   </div>\n            *   <div class=\"card-content\">\n            *     <!-- Main card content -->\n            *   </div>\n            *   <div class=\"card-footer\">\n            *     <!-- Footer content -->\n            *   </div>\n            * </div>\n            *\n            * Modifiers: .card--bordered, .card--elevated, .card--compact\n            * Layout: .card--horizontal, .card--vertical\n            */\n            @layer components {\n              .card-grid {\n                display: grid;\n                gap: var(--card-grid-gap, var(--space-4, 1rem));\n                grid-template-columns: repeat(auto-fill, minmax(var(--card-min-width, 250px), 1fr));\n              }\n\n              .card {\n                background-color: var(--color-surface, var(--color-surface-elevated, #fff));\n                border-radius: var(--radius-card, var(--radius-md, 0.375rem));\n                box-shadow: var(--shadow-sm, 0 1px 2px 0 rgb(0 0 0 / 5%));\n                display: flex;\n                flex-direction: column;\n                gap: var(--card-gap, var(--space-3, 0.75rem));\n                padding: var(--card-padding, var(--space-4, 1rem));\n\n/* Element-Styling */\n                h3 {\n                  font-size: var(--font-size-lg);\n                  margin: 0;\n                }\n\n                img {\n                  border-radius: var(--radius-sm, 0.125rem);\n                  object-fit: cover;\n                  width: 100%;\n                }\n\n/* Flüssig skalierende Karte mit interpolate-size */\n                &.fluid {\n                  container-name: card;\n                  container-type: inline-size;\n\n/* Font-Größen mit CSS-Schlüsselwörtern für flüssige Interpolation */\n                  h3 {\n                    font-size: large; /* Wird durch interpolate-size flüssiger */\n                  }\n\n                  p {\n                    font-size: medium; /* Wird durch interpolate-size flüssiger */\n                  }\n\n/* Flüssige Container-basierte Anpassungen */\n                  @container card (min-width: 300px) {\n                    padding: var(--space-5);\n\n                    h3 {\n                      font-size: x-large;\n                    }\n\n                    p {\n                      font-size: large;\n                    }\n                  }\n\n                  @container card (min-width: 400px) {\n                    padding: var(--space-6);\n\n                    h3 {\n                      font-size: xx-large;\n                    }\n\n                    p {\n                      font-size: x-large;\n                    }\n                  }\n                }\n\n/* Varianten */\n                &.primary {\n                  background-color: var(--color-primary, #3b82f6);\n                  color: white;\n                }\n\n                &.surface {\n                  background-color: var(--color-surface);\n                }\n\n                &.border {\n                  border: 1px solid var(--color-gray-200);\n                  box-shadow: none;\n                }\n\n/* Layout-Varianten */\n                &.horizontal {\n                  align-items: center;\n                  flex-direction: row;\n\n                  img {\n                    height: 12%0px;\n                    width: 12%0px;\n                  }\n                }\n\n/* Interaktive Varianten */\n                &.interactive {\n                  cursor: pointer;\n                  transition: transform 0.2s ease, box-shadow 0.2s ease;\n\n                  &:hover {\n                    box-shadow: var(--shadow-md);\n                    transform: translateY(-4px);\n                  }\n                }\n              }\n            }\n\n\n\n\n/* Datei: ui/components/caption.css */\n/**\n            * Caption\n            *\n            * Captions provide additional contextual information for images, tables, figures,\n            * or other media content. They help users understand the content and provide\n            * necessary explanations or attributions.\n            *\n            * @layer: components\n            *\n            * Accessibility:\n            * - Use appropriate HTML semantics (figcaption with figure)\n            * - Maintain sufficient text contrast\n            * - Don't rely on captions alone for conveying critical information\n            */\n\n            @layer components {\n/* Base caption style */\n              .caption {\n                color: var(--color-text-500, #6b7280);\n                font-size: var(--text-xs, 0.75rem);\n                line-height: 1.5;\n                margin-top: var(--space-2);\n                max-width: 100%;\n              }\n\n/* Figure with caption */\n              .figure {\n                display: inline-block;\n                margin: 0;\n                max-width: 100%;\n              }\n\n              & .image {\n                display: block;\n                height: auto;\n                max-width: 100%;\n              }\n\n              & .caption {\n                padding: var(--space-2);\n                text-align: center;\n              }\n\n/* Caption alignments */\n              .caption--start {\n                text-align: left;\n              }\n\n              .caption--center {\n                text-align: center;\n              }\n\n              .caption--end {\n                text-align: right;\n              }\n\n/* Caption with attribution */\n              & .attribution {\n                color: var(--color-text-400);\n                display: inline-block;\n                font-style: italic;\n                margin-top: var(--space-1);\n              }\n\n/* Caption for tables */\n              .table-caption {\n                border-top: 1px solid var(--color-border-100, #f3f4f6);\n                caption-side: bottom;\n                padding: var(--space-2);\n              }\n\n/* Extended caption with title and description */\n              .caption--extended {\n                display: flex;\n                flex-direction: column;\n                gap: var(--space-1);\n              }\n\n              & .title {\n                color: var(--color-text-900, #111827);\n                font-weight: var(--font-medium, 500);\n              }\n\n              & .description {\n                color: var(--color-text-500, #6b7280);\n              }\n\n/* Variants */\n              .caption--bordered {\n                border-top: 1px solid var(--color-border-200, #e5e7eb);\n                padding-top: var(--space-2);\n              }\n\n              .caption--boxed {\n                background-color: var(--color-surface-50);\n                border-radius: var(--radius-sm, 0.125rem);\n                padding: var(--space-2);\n              }\n\n/* Caption with interaction (e.g., for expandable captions) */\n              .caption--interactive {\n                cursor: pointer;\n                padding-right: var(--space-6);\n                position: relative;\n              }\n\n              .caption--interactive::after {\n                border-color: var(--color-text-400) transparent transparent transparent;\n                border-style: solid;\n                border-width: 5px;\n                content: \"\";\n                position: absolute;\n                right: var(--space-2);\n                top: 50%;\n                transform: translateY(-50%);\n                transition: transform 0.2s ease;\n              }\n\n              .caption--interactive.caption--expanded::after {\n                transform: translateY(-50%) rotate(180deg);\n              }\n\n/* Expandable caption content */\n              & .expandable {\n                display: none;\n                margin-top: var(--space-2);\n              }\n\n              .caption--expanded & .expandable {\n                display: block;\n              }\n            }\n\n/* Datei: ui/components/breadcrumbs.css */\n/**\n            * Breadcrumbs\n            *\n            * Breadcrumbs show the hierarchical path to the current page, helping users\n            * understand their location within the site structure and navigate back to\n            * higher-level pages.\n            *\n            * @layer: components\n            *\n            * Accessibility:\n            * - Use nav element with aria-label=\"Breadcrumb\"\n            * - Use ordered list (ol) for the breadcrumb items\n            * - Current page should have aria-current=\"page\"\n            */\n\n            @layer components {\n/* Breadcrumbs container */\n              .breadcrumbs {\n                align-items: center;\n                color: var(--color-text-500, #6b7280);\n                display: flex;\n                font-size: var(--text-sm, 0.875rem);\n                margin: var(--space-2) 0;\n                padding: var(--space-2);\n              }\n\n/* Breadcrumbs list */\n              & .list {\n                align-items: center;\n                display: flex;\n                flex-wrap: wrap;\n                list-style: none;\n                margin: 0;\n                padding: 0;\n              }\n\n/* Breadcrumb item */\n              & .item {\n                align-items: center;\n                display: flex;\n              }\n\n/* Breadcrumb separator */\n              & .separator {\n                align-items: center;\n                color: var(--color-text-300);\n                display: inline-flex;\n                margin: 0 var(--space-2);\n              }\n\n/* Default separator icon (can be customized) */\n              & .separator::before {\n                content: \"/\";\n                font-size: 0.85em;\n              }\n\n/* Breadcrumb link */\n              & .link {\n                color: var(--color-primary-500);\n                text-decoration: none;\n                transition: color 0.2s ease;\n              }\n\n              & .link:hover {\n                color: var(--color-primary-700, #1d4ed8);\n                text-decoration: underline;\n              }\n\n/* Current page (last item) */\n              & .current {\n                color: var(--color-text-900, #111827);\n                font-weight: var(--font-medium, 500);\n              }\n\n/* Truncated breadcrumbs for narrow viewports */\n              .breadcrumbs--truncated & .item {\n                display: none;\n              }\n\n              .breadcrumbs--truncated & .item:first-child,\n              .breadcrumbs--truncated & .item:nth-last-child(2),\n              .breadcrumbs--truncated & .item:last-child {\n                display: flex;\n              }\n\n/* Ellipsis for truncated items */\n              .breadcrumbs--truncated & .item:nth-last-child(2)::before {\n                color: var(--color-text-300);\n                content: \"...\";\n                margin: 0 var(--space-2);\n              }\n\n/* Responsive adjustments */\n              @media (max-width: 640px) {\n                .breadcrumbs {\n                  font-size: var(--text-xs, 0.75rem);\n                }\n\n/* Auto-truncate on mobile */\n                .breadcrumbs:not(.breadcrumbs--keep-all) & .item:not(:first-child, :last-child) {\n                  display: none;\n                }\n\n                .breadcrumbs:not(.breadcrumbs--keep-all) & .item:first-child + & .item:not(:last-child) {\n                  display: flex;\n                }\n\n                .breadcrumbs:not(.breadcrumbs--keep-all) & .item:first-child + & .item::before {\n                  color: var(--color-text-300);\n                  content: \"...\";\n                  margin: 0 var(--space-2);\n                }\n              }\n            }\n\n/* Datei: ui/components/blockquote.css */\n/**\n            * Blockquote-Element Styles\n            */\n\n            @layer elements {\n/* Zitate */\n              blockquote {\n                background-color: var(--color-background-alt, #f9fafb);\n                border-left: 4px solid var(--color-primary, #3b82f6);\n                margin: 1rem 0;\n                padding: 1rem;\n              }\n\n              q {\n                quotes: '\"' '\"' \"'\" \"'\";\n              }\n            }\n\n/* Datei: ui/components/badge.css */\n/**\n            * Badges\n            *\n            * Badges are small visual indicators typically used to display counts,\n            * status, or labels. They can highlight new or unread items, categorize\n            * content, or show the status of an item.\n            *\n            * @layer: components\n            *\n            * Accessibility:\n            * - Ensure sufficient color contrast\n            * - For status indicators, consider using aria-label to convey meaning\n            * - For count badges, ensure numbers are announced properly\n            */\n\n\n/**\n            * Badge Component Structure:\n            *\n            * <span class=\"badge badge--primary\">\n            *   <span class=\"badge-content\">Badge text</span>\n            * </span>\n            *\n            * Types: .badge--primary, .badge--secondary, .badge--success, .badge--warning, .badge--error\n            * Sizes: .badge--xs, .badge--sm, .badge--md, .badge--lg\n            * Shapes: .badge--rounded, .badge--pill\n            */\n            @layer components {\n/* Base badge styles */\n              .badge {\n                align-items: center;\n                background-color: var(--color-primary-500);\n                border-radius: var(--radius-full, 9999px);\n                color: var(--color-text-inverse, white);\n                display: inline-flex;\n                font-size: var(--text-xs, 0.75rem);\n                font-weight: var(--font-medium, 500);\n                justify-content: center;\n                line-height: 1%;\n                padding: var(--badge-padding-md, 0.25rem 0.5rem);\n                white-space: nowrap;\n              }\n\n/* Badge sizes */\n              .badge--xs {\n                font-size: 0.65rem;\n                height: var(--badge-min-width-xs, 1.2rem);\n                min-width: var(--badge-min-width-xs, 1.2rem);\n                padding: var(--badge-padding-xs, 0.15rem 0.35rem);\n              }\n\n              .badge--sm {\n                height: var(--badge-min-width-sm, 1.5rem);\n                min-width: var(--badge-min-width-sm, 1.5rem);\n                padding: var(--badge-padding-sm, 0.2rem 0.4rem);\n              }\n\n              .badge--md {\n                height: var(--badge-min-width-md, 1.75rem);\n                min-width: var(--badge-min-width-md, 1.75rem);\n                padding: var(--badge-padding-md, 0.25rem 0.5rem);\n              }\n\n              .badge--lg {\n                font-size: var(--text-sm, 0.875rem);\n                height: var(--badge-min-width-lg, 2rem);\n                min-width: var(--badge-min-width-lg, 2rem);\n                padding: var(--badge-padding-lg, 0.3rem 0.6rem);\n              }\n\n/* Badge shapes */\n              .badge--rounded {\n                border-radius: var(--radius-md, 0.375rem);\n              }\n\n              .badge--square {\n                border-radius: var(--radius-sm, 0.125rem);\n              }\n\n/* Dot variant (no content, just a colored dot) */\n              .badge--dot {\n                height: 0%.5rem;\n                min-width: auto;\n                padding: 0;\n                width: 0%.5rem;\n              }\n\n              .badge--dot.badge--sm {\n                height: 0%.375rem;\n                width: 0%.375rem;\n              }\n\n              .badge--dot.badge--lg {\n                height: 0%.75rem;\n                width: 0%.75rem;\n              }\n\n/* Badge with icon */\n              & .icon {\n                height: 0%.875em;\n                margin-right: 0%.25em;\n                width: 0%.875em;\n              }\n\n              .badge--icon-only {\n                padding: 0.25rem;\n              }\n\n              .badge--icon-only & .icon {\n                margin-right: 0%;\n              }\n\n/* Badge color variants */\n              .badge--primary {\n                background-color: var(--color-primary-500);\n                color: var(--color-text-inverse, white);\n              }\n\n              .badge--secondary {\n                background-color: var(--color-secondary-500);\n                color: var(--color-text-inverse, white);\n              }\n\n              .badge--success {\n                background-color: var(--color-success-500);\n                color: var(--color-text-inverse, white);\n              }\n\n              .badge--danger {\n                background-color: var(--color-error-500);\n                color: var(--color-text-inverse, white);\n              }\n\n              .badge--warning {\n                background-color: var(--color-warning-500);\n                color: var(--color-warning-900);\n              }\n\n              .badge--info {\n                background-color: var(--color-info-500);\n                color: var(--color-text-inverse, white);\n              }\n\n              .badge--neutral {\n                background-color: var(--color-neutral-500, #6b7280);\n                color: var(--color-text-inverse, white);\n              }\n\n/* Badge soft/pastel variants */\n              .badge--primary-soft {\n                background-color: var(--color-primary-100, #dbeafe);\n                color: var(--color-primary-800, #1e40af);\n              }\n\n              .badge--secondary-soft {\n                background-color: var(--color-secondary-100, #f1f5f9);\n                color: var(--color-secondary-800, #1e293b);\n              }\n\n              .badge--success-soft {\n                background-color: var(--color-success-100, #d1fae5);\n                color: var(--color-success-800, #065f46);\n              }\n\n              .badge--danger-soft {\n                background-color: var(--color-error-100, #fee2e2);\n                color: var(--color-error-800, #991b1b);\n              }\n\n              .badge--warning-soft {\n                background-color: var(--color-warning-100, #fef3c7);\n                color: var(--color-warning-800, #92400e);\n              }\n\n              .badge--info-soft {\n                background-color: var(--color-info-100, #dbeafe);\n                color: var(--color-info-800, #1e40af);\n              }\n\n              .badge--neutral-soft {\n                background-color: var(--color-neutral-100, #f3f4f6);\n                color: var(--color-neutral-800, #1f2937);\n              }\n\n/* Badge outline variants */\n              .badge--outline {\n                background-color: transparent;\n                border: 1px solid currentColor;\n              }\n\n              .badge--primary-outline {\n                border-color: var(--color-primary-500);\n                color: var(--color-primary-500);\n              }\n\n              .badge--secondary-outline {\n                border-color: var(--color-secondary-500);\n                color: var(--color-secondary-500);\n              }\n\n              .badge--success-outline {\n                border-color: var(--color-success-500);\n                color: var(--color-success-500);\n              }\n\n              .badge--danger-outline {\n                border-color: var(--color-error-500);\n                color: var(--color-error-500);\n              }\n\n              .badge--warning-outline {\n                border-color: var(--color-warning-500);\n                color: var(--color-warning-500);\n              }\n\n              .badge--info-outline {\n                border-color: var(--color-info-500);\n                color: var(--color-info-500);\n              }\n\n              .badge--neutral-outline {\n                border-color: var(--color-neutral-500, #6b7280);\n                color: var(--color-neutral-500, #6b7280);\n              }\n\n/* Badge positioning (for overlays) */\n              .badge-container {\n                position: relative;\n              }\n\n              .badge--top-right {\n                position: absolute;\n                right: -0.375rem;\n                top: -0.375rem;\n              }\n\n              .badge--top-left {\n                left: -0.375rem;\n                position: absolute;\n                top: -0.375rem;\n              }\n\n              .badge--bottom-right {\n                bottom: -0.375rem;\n                position: absolute;\n                right: -0.375rem;\n              }\n\n              .badge--bottom-left {\n                bottom: -0.375rem;\n                left: -0.375rem;\n                position: absolute;\n              }\n\n/* Animated badge */\n              .badge--overlap {\n                border: 2px solid var(--color-background, white);\n              }\n\n              .badge--pulse {\n                animation: pulse 2s infinite;\n              }\n\n/* Max count display */\n              .badge--max-count::after {\n                content: '+';\n              }\n            }\n\n/* Datei: ui/components/back-to-top.css */\n/**\n            * Back to Top\n            *\n            * A back-to-top button allows users to quickly navigate to the top of a page,\n            * especially useful for long-scrolling content. It typically appears after\n            * the user scrolls down a certain distance.\n            *\n            * @layer: components\n            *\n            * Accessibility:\n            * - Include descriptive text or aria-label\n            * - Ensure keyboard accessibility\n            * - Consider adding a focus state\n            * - Provide sufficient contrast for visibility\n            */\n\n            @layer components {\n/* Back to top button container */\n              .back-to-top {\n                bottom: var(--space-4);\n                opacity: 0%;\n                position: fixed;\n                right: var(--space-4);\n                transform: translateY(10px);\n                transition: opacity 0.3s, visibility 0.3s, transform 0.3s;\n                visibility: hidden;\n                z-index: var(--z-back-to-top, 50);\n              }\n\n/* Visible state (activated on scroll) */\n              .back-to-top--visible {\n                opacity: 1;\n                transform: translateY(0%);\n                visibility: visible;\n              }\n\n/* Button element */\n              & .button {\n                align-items: center;\n                background-color: var(--color-primary-500);\n                border: none;\n                border-radius: var(--radius-full, 9999px);\n                box-shadow: var(--shadow-md);\n                color: white;\n                cursor: pointer;\n                display: flex;\n                height: 4%8px;\n                justify-content: center;\n                transition: background-color 0.2s, transform 0.2s;\n                width: 4%8px;\n              }\n\n              & .button:hover {\n                background-color: var(--color-primary-600, #2563eb);\n                transform: translateY(-2px);\n              }\n\n              & .button:active {\n                transform: translateY(0%);\n              }\n\n              & .button:focus {\n                box-shadow: 0 0 0 3px var(--color-primary-200), var(--shadow-md);\n                outline: none;\n              }\n\n/* Icon */\n              & .icon {\n                height: 2%4px;\n                width: 2%4px;\n              }\n\n/* Text variant (with label) */\n              .back-to-top--with-text & .button {\n                padding: 0 var(--space-4);\n                width: auto;\n              }\n\n              & .text {\n                font-size: var(--text-sm, 0.875rem);\n                font-weight: var(--font-medium, 500);\n                margin-left: var(--space-2);\n              }\n\n/* Button shape variants */\n              .back-to-top--square & .button {\n                border-radius: var(--radius-md, 0.375rem);\n              }\n\n/* Button color variants */\n              .back-to-top--secondary & .button {\n                background-color: var(--color-secondary-500);\n              }\n\n              .back-to-top--secondary & .button:hover {\n                background-color: var(--color-secondary-600);\n              }\n\n              .back-to-top--secondary & .button:focus {\n                box-shadow: 0 0 0 3px var(--color-secondary-200), var(--shadow-md);\n              }\n\n              .back-to-top--neutral & .button {\n                background-color: var(--color-neutral-700, #374151);\n              }\n\n              .back-to-top--neutral & .button:hover {\n                background-color: var(--color-neutral-800, #1f2937);\n              }\n\n              .back-to-top--neutral & .button:focus {\n                box-shadow: 0 0 0 3px var(--color-neutral-300, #d1d5db), var(--shadow-md);\n              }\n\n/* Positions */\n              .back-to-top--bottom-center {\n                right: 50%;\n                transform: translateX(50%) translateY(10px);\n              }\n\n              .back-to-top--bottom-center.back-to-top--visible {\n                transform: translateX(50%) translateY(0);\n              }\n\n              .back-to-top--bottom-left {\n                left: var(--space-4);\n                right: auto;\n              }\n\n/* Size variants */\n              .back-to-top--sm & .button {\n                height: 4%0px;\n                width: 4%0px;\n              }\n\n              .back-to-top--sm & .icon {\n                height: 2%0px;\n                width: 2%0px;\n              }\n\n              .back-to-top--lg & .button {\n                height: 5%6px;\n                width: 5%6px;\n              }\n\n              .back-to-top--lg & .icon {\n                height: 2%8px;\n                width: 2%8px;\n              }\n\n/* Progress variant (circular progress indicator) */\n              .back-to-top--progress & .button {\n                position: relative;\n              }\n\n              & .progress {\n                border-radius: var(--radius-full, 9999px);\n                height: 100%;\n                left: 0%;\n                pointer-events: none;\n                position: absolute;\n                top: 0%;\n                width: 100%;\n              }\n\n              & .progress-circle {\n                fill: none;\n                stroke: var(--color-primary-300);\n                stroke-linecap: round;\n                stroke-width: 3%;\n                transform: rotate(-90deg);\n                transform-origin: 50% 50;\n                transition: stroke-dashoffset 0.2s;\n              }\n\n/* Responsive adjustments */\n              @media (max-width: 640px) {\n                .back-to-top {\n                  bottom: var(--space-3);\n                  right: var(--space-3);\n                }\n\n                & .button {\n                  height: 4%0px;\n                  width: 4%0px;\n                }\n\n                & .icon {\n                  height: 2%0px;\n                  width: 2%0px;\n                }\n\n                .back-to-top--bottom-left {\n                  left: var(--space-3);\n                }\n              }\n            }\n\n/* Datei: ui/components/avatar.css */\n/*\n            * Avatar\n            *\n            * Circular user images with optional status indicators.\n            */\n\n/**\n            * Component Documentation\n            *\n            * Avatars visually represent users or entities, typically as profile pictures,\n            * initials, or icons. They can be displayed in various sizes and shapes and\n            * can include status indicators.\n            *\n            * @layer: elements\n            *\n            * Compatibility:\n            * - Full support in modern browsers\n            * - Fallbacks for older browsers without CSS variables\n            * - Functional in high-contrast mode\n            *\n            * Basic usage:\n            * <div class=\"avatar\">\n            *   <img class=\"image\" src=\"user.jpg\" alt=\"User Name\">\n            * </div>\n            *\n            * With status:\n            * <div class=\"avatar\">\n            *   <img class=\"image\" src=\"user.jpg\" alt=\"User Name\">\n            *   <span class=\"status status--online\" aria-label=\"Online status\"></span>\n            * </div>\n            *\n            * With initials:\n            * <div class=\"avatar avatar--placeholder\">JD</div>\n            *\n            * Sizes:\n            * <div class=\"avatar avatar--xs\">...</div>\n            * <div class=\"avatar avatar--sm\">...</div>\n            * <div class=\"avatar avatar--md\">...</div> (default)\n            * <div class=\"avatar avatar--lg\">...</div>\n            * <div class=\"avatar avatar--xl\">...</div>\n            *\n            * Shapes:\n            * <div class=\"avatar\">...</div> (circular)\n            * <div class=\"avatar avatar--rounded\">...</div> (rounded corners)\n            * <div class=\"avatar avatar--square\">...</div> (square with slight rounding)\n            *\n            * Colors:\n            * <div class=\"avatar avatar--primary\">...</div>\n            * <div class=\"avatar avatar--secondary\">...</div>\n            * <div class=\"avatar avatar--success\">...</div>\n            * <div class=\"avatar avatar--warning\">...</div>\n            * <div class=\"avatar avatar--danger\">...</div>\n            * <div class=\"avatar avatar--info\">...</div>\n            */\n\n            @layer elements {\n/* Base Avatar */\n              .avatar {\n                align-items: center;\n                background-color: 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-weight: var(--font-medium, 500);\n                height: 3rem;\n                justify-content: center;\n                overflow: hidden;\n                position: relative;\n                width: 3rem;\n              }\n\n/* Avatar Sizes */\n              .avatar--xs {\n                font-size: var(--text-xs, 0.75rem);\n                height: 1%.5rem;\n                width: 1%.5rem;\n              }\n\n              .avatar--sm {\n                font-size: var(--text-sm, 0.875rem);\n                height: 2rem;\n                width: 2rem;\n              }\n\n              .avatar--md {\n                font-size: var(--text-base);\n                height: 3rem;\n                width: 3rem;\n              }\n\n              .avatar--lg {\n                font-size: var(--text-lg);\n                height: 4rem;\n                width: 4rem;\n              }\n\n              .avatar--xl {\n                font-size: var(--text-xl);\n                height: 6rem;\n                width: 6rem;\n              }\n\n/* Avatar Shapes */\n              .avatar--rounded {\n                border-radius: var(--radius-lg, 0.5rem);\n              }\n\n              .avatar--square {\n                border-radius: var(--radius-md, 0.375rem);\n              }\n\n/* Avatar Image */\n              & .image {\n                height: 100%;\n                object-fit: cover;\n                width: 100%;\n              }\n\n/* Status Indicator */\n              & .status {\n                background-color: var(--color-neutral-400, #9ca3af);\n                border: 2px solid var(--color-surface-100, #f3f4f6);\n                border-radius: var(--radius-full, 9999px);\n                bottom: 0%;\n                height: 2%5%;\n                max-height: 1rem;\n                max-width: 1rem;\n                min-height: 0%.5rem;\n                min-width: 0%.5rem;\n                position: absolute;\n                right: 0%;\n                width: 2%5%;\n              }\n\n              & .status--online {\n                background-color: var(--color-success-500);\n              }\n\n              & .status--busy {\n                background-color: var(--color-error-500);\n              }\n\n              & .status--away {\n                background-color: var(--color-warning-500);\n              }\n\n              & .status--offline {\n                background-color: var(--color-neutral-400, #9ca3af);\n              }\n\n/* Avatar Group */\n              .avatar-group {\n                display: inline-flex;\n              }\n\n              .avatar-group .avatar {\n                border: 2px solid var(--color-surface-100, #f3f4f6);\n                margin-left: -0.75rem;\n              }\n\n              .avatar-group .avatar:first-child {\n                margin-left: 0%;\n              }\n\n/* Avatar with Placeholder */\n              .avatar--placeholder {\n                background-color: var(--color-neutral-200, #e5e7eb);\n                color: var(--color-neutral-700, #374151);\n                font-weight: var(--font-medium, 500);\n              }\n\n/* Colored Avatars */\n              .avatar--primary {\n                background-color: var(--color-primary-100, #dbeafe);\n                color: var(--color-primary-800, #1e40af);\n              }\n\n              .avatar--secondary {\n                background-color: var(--color-secondary-100, #f1f5f9);\n                color: var(--color-secondary-800, #1e293b);\n              }\n\n              .avatar--success {\n                background-color: var(--color-success-100, #d1fae5);\n                color: var(--color-success-800, #065f46);\n              }\n\n              .avatar--warning {\n                background-color: var(--color-warning-100, #fef3c7);\n                color: var(--color-warning-800, #92400e);\n              }\n\n              .avatar--danger {\n                background-color: var(--color-error-100, #fee2e2);\n                color: var(--color-error-800, #991b1b);\n              }\n\n              .avatar--info {\n                background-color: var(--color-info-100, #dbeafe);\n                color: var(--color-info-800, #1e40af);\n              }\n            }\n\n/* Datei: ui/components/alert.css */\n/*\n            * Alert Component\n            *\n            * Visual cues for success, warning, error, or information messages.\n            */\n\n/**\n            * Alert Component\n            *\n            * Information and warning messages for important notifications to users.\n            * Alerts can be used to display success, error, warning, or informative messages.\n            *\n            * @layer: components\n            *\n            * Compatibility:\n            * - Full support in modern browsers\n            * - Fallbacks for CSS variables\n            * - Uses CSS animation with standard keyframes\n            *\n            * Usage:\n            * <div class=\"alert\">Standard alert</div>\n            *\n            * Variants:\n            * <div class=\"alert-info\">Info alert</div>\n            * <div class=\"alert-success\">Success alert</div>\n            * <div class=\"alert-warning\">Warning alert</div>\n            * <div class=\"alert-error\">Error alert</div>\n            *\n            * Sizes:\n            * <div class=\"alert-info alert--sm\">Small alert</div>\n            * <div class=\"alert-info\">Default size alert</div>\n            * <div class=\"alert-info alert--lg\">Large alert</div>\n            *\n            * With Icon:\n            * <div class=\"alert-info alert--with-icon\">\n            *   <span class=\"icon\"><!-- Icon here --></span>\n            *   <div class=\"alert-content\">Alert with icon</div>\n            * </div>\n            *\n            * Dismissible:\n            * <div class=\"alert-info alert--dismissible\">\n            *   <div class=\"alert-content\">Dismissible alert</div>\n            *   <button class=\"alert-close\">×</button>\n            * </div>\n            */\n\n/**\n            * Alert Component Structure:\n            *\n            * <div class=\"alert alert--info\" role=\"alert\">\n            *   <div class=\"alert-icon\"><!-- Icon --></div>\n            *   <div class=\"alert-content\">\n            *     <div class=\"alert-title\">Alert Title</div>\n            *     <div class=\"alert-message\">Alert message content</div>\n            *   </div>\n            *   <button class=\"alert-close\" aria-label=\"Close\">&times;</button>\n            * </div>\n            *\n            * Types: .alert--info, .alert--success, .alert--warning, .alert--error\n            * Modifiers: .alert--dismissible, .alert--compact\n            */\n\n/* Animations - defined outside of @layer */\n\n/* Component styles */\n            @layer components {\n/* Base component style */\n              .alert {\n                align-items: start;\n                background-color: var(--color-neutral-100, #f3f4f6);\n                border-radius: var(--alert-border-radius, var(--radius-md, 0.5rem));\n                display: flex;\n                font-size: var(--text-sm, var(--font-size-sm, 0.875rem));\n                gap: var(--alert-gap, var(--space-3, 0.75rem));\n                padding: var(--alert-padding, var(--space-4, 1rem));\n              }\n\n/* Variants */\n              .alert-info {\n                background-color: var(--color-info-100, #e0f2fe);\n                color: var(--color-info-800, #1e40af);\n                composes: alert;\n              }\n\n              .alert-success {\n                background-color: var(--color-success-100, #dcfce7);\n                color: var(--color-success-800, #166534);\n                composes: alert;\n              }\n\n              .alert-warning {\n                background-color: var(--color-warning-100, #fef3c7);\n                color: var(--color-warning-800, #854d0e);\n                composes: alert;\n              }\n\n              .alert-error {\n                background-color: var(--color-error-100, #fee2e2);\n                color: var(--color-error-800, #991b1b);\n                composes: alert;\n              }\n\n/* Sizes */\n              .alert--sm {\n                font-size: var(--text-xs, var(--font-size-xs, 0.75rem));\n                padding: var(--alert-padding-sm, var(--space-2, 0.5rem));\n              }\n\n              .alert--lg {\n                font-size: var(--text-base, var(--font-size-base, 1rem));\n                padding: var(--alert-padding-lg, var(--space-5, 1.25rem));\n              }\n\n/* Icon integration */\n              .alert--with-icon {\n                padding-left: var(--space-3, 0.75rem);\n              }\n\n              .alert--with-icon .icon {\n                flex-shrink: 0;\n                font-size: 1.25rem;\n                line-height: 1%;\n              }\n\n/* Dismissible state */\n              .alert--dismissible {\n                padding-right: var(--space-3, 0.75rem);\n              }\n\n/* Internal elements */\n              .alert-content {\n                flex: 1;\n              }\n\n              .alert-close {\n                background: none;\n                border: none;\n                color: currentcolor;\n                cursor: pointer;\n                flex-shrink: 0;\n                font-size: 1.25rem;\n                line-height: 1%;\n                margin-left: auto;\n                opacity: 5000%;\n                transition: opacity var(--transition-duration-fast, 150ms) var(--transition-timing-ease, ease);\n              }\n\n              .alert-close:hover {\n                opacity: 75%;\n              }\n            }\n\n/* Animation styles */\n            @layer animations {\n              .alert--animate {\n                animation-duration: 0.3s;\n                animation-name: fadeIn;\n                animation-timing-function: ease-out;\n              }\n            }\n\n/* Datei: ui/components/action-bar.css */\n/**\n            * Action Bar/Sheet\n            *\n            * An action bar or sheet provides quick access to common actions or navigation options,\n            * typically displayed at the bottom of the screen (mobile) or as a popover menu.\n            *\n            * @layer: components\n            *\n            * Accessibility:\n            * - Ensure all interactive elements are keyboard accessible\n            * - Use appropriate ARIA roles (e.g., menu, menuitem)\n            * - Provide clear focus states\n            */\n\n            @layer components {\n/* Base action bar */\n              .action-bar {\n                align-items: center;\n                background-color: var(--color-surface-100, #f3f4f6);\n                box-shadow: var(--shadow-md);\n                display: flex;\n                justify-content: space-between;\n                padding: var(--space-4);\n                z-index: var(--z-action-bar, 40);\n              }\n\n/* Fixed position at bottom */\n              .action-bar--fixed {\n                border-top: 1px solid var(--color-border-200, #e5e7eb);\n                bottom: 0%;\n                left: 0%;\n                position: fixed;\n                right: 0%;\n              }\n\n/* Action sheet (full-width expandable panel) */\n              .action-sheet {\n                background-color: var(--color-surface-100, #f3f4f6);\n                border-top-left-radius: var(--radius-lg, 0.5rem);\n                border-top-right-radius: var(--radius-lg, 0.5rem);\n                bottom: 0%;\n                box-shadow: var(--shadow-lg);\n                left: 0%;\n                position: fixed;\n                right: 0%;\n                transform: translateY(100%);\n                transition: transform 0.3s ease;\n                z-index: var(--z-action-sheet, 50);\n              }\n\n/* Visible state */\n              .action-sheet--visible {\n                transform: translateY(0%);\n              }\n\n/* Sheet header with drag indicator */\n              & .header {\n                align-items: center;\n                display: flex;\n                justify-content: center;\n                padding: var(--space-2);\n              }\n\n/* Drag indicator */\n              & .indicator {\n                background-color: var(--color-neutral-300, #d1d5db);\n                border-radius: 2px;\n                height: 4px;\n                width: 3%6px;\n              }\n\n/* Sheet content */\n              & .content {\n                max-height: 80%;\n                -webkit-overflow-scrolling: touch;\n                overflow-y: auto;\n                padding: var(--space-4);\n              }\n\n/* Action items */\n              .action-item {\n                align-items: center;\n                border-radius: var(--radius-md, 0.375rem);\n                cursor: pointer;\n                display: flex;\n                padding: var(--space-3);\n                transition: background-color 0.2s ease;\n              }\n\n              .action-item:hover {\n                background-color: var(--color-surface-200);\n              }\n\n/* Action item with icon */\n              & .icon {\n                color: var(--color-primary-500);\n                margin-right: var(--space-3);\n              }\n\n/* Action item label */\n              & .label {\n                font-size: var(--text-sm, 0.875rem);\n                font-weight: var(--font-medium, 500);\n              }\n\n/* Responsive adjustments */\n              @media (min-width: 768px) {\n                .action-sheet {\n                  border-radius: var(--radius-lg, 0.5rem);\n                  left: 50%;\n                  max-width: 48%0px;\n                  transform: translateX(-50%) translateY(100);\n                }\n\n                .action-sheet--visible {\n                  transform: translateX(-50%) translateY(0);\n                }\n              }\n            }\n"],"names":[]}