{"version":3,"sourceRoot":null,"mappings":"AAaA,sBA08BM,qCAQA,yCAMA,yCAIA,0CAEA,0CAEA,0CAEA,0CAEA,0CA2JA,gDAEA,8CAEA,gDAEA,4CAEA,kDAEA,gDAEA,4CAEA,iDAEA,6CAEA,6CAEA,6CAEA,6CAEA,6CAGA,gDAEA,8CAEA,gDAEA,4CAEA,kDAEA,gDAEA,4CAEA,iDAEA,6CAEA,6CAEA,6CAEA,6CAEA,6CAGA,0BAEA,yBAEA,0BAEA,wBAEA,2BAEA,0BAEA,wBAEA,2BAEA,yBAEA,yBAEA,yBAEA,yBAEA,yBAEA,4BAEA,2BAEA,4BAEA,0BAEA,6BAEA,4BAEA,0BAEA,6BAEA,2BAEA,2BAEA,2BAEA,2BAEA,2BAEA,6BAEA,4BAEA,6BAEA,2BAEA,8BAEA,6BAEA,2BAEA,8BAEA,4BAEA,4BAEA,4BAEA,4BAEA,4BAEA,2BAEA,0BAEA,2BAEA,yBAEA,4BAEA,2BAEA,yBAEA,4BAEA,0BAEA,0BAEA,0BAEA,0BAEA,0BA+DA,uCAQA,2CAMA,2CAIA,4CAEA,4CAEA,4CAEA,4CAEA,4CA8nFU,4BAEA,gCAEA,iCAEA,gCAEA,iCAEA,+BAEA,kCAEA,iCAEA,kCAEA,+BAEA,kCAEA,mCAEA,oCAEA,iCAEA,mCAEA,iCAEA,iCAEA,iCAEA,iCAEA,iCAEA,iCAEA,kCAEA,kCAEA,kCAEA,kCAEA,kCAEA,kCAEA,kCAEA,kCAEA,kCAEA,kCAGA,mCAEA,oCAEA,oCAEA,oCAEA,iCAEA,mCAEA,mCAGA,qCAEA,yCAEA,0CAEA,yCAEA,0CAEA,wCAEA,2CAEA,0CAEA,wCAEA,4CAEA,0CAEA,0CAEA,0CAEA,0CAEA,0CAGA,kCAEA,sCAEA,uCAEA,sCAEA,uCAEA,qCAEA,wCAEA,uCAEA,qCAEA,yCAEA,uCAEA,uCAEA,uCAEA,uCAEA,uCAKA,6BAEA,iCAEA,kCAEA,iCAEA,kCAEA,gCAEA,mCAEA,kCAEA,gCAEA,oCAEA,kCAEA,kCAEA,kCAEA,kCAEA,kCAEA,oBAGA,iEAEA,wEAEA,2EAEA,yEAEA,2EAEA,uEAEA,6EAEA,2EAEA,uEAEA,8EAEA,0EAEA,0EAEA,0EAEA,0EAEA,0EAEA,4CAGA,iEAEA,wEAEA,2EAEA,yEAEA,2EAEA,uEAEA,6EAEA,2EAEA,uEAEA,8EAEA,0EAEA,0EAEA,0EAEA,0EAEA,0EAEA,4CAGA,kCAEA,sCAEA,uCAEA,sCAEA,uCAEA,qCAEA,wCAEA,uCAEA,qCAEA,yCAEA,uCAEA,uCAEA,uCAEA,uCAEA,uCAEA,yBAEA,oCAEA,wCAEA,yCAEA,wCAEA,yCAEA,uCAEA,0CAEA,yCAEA,uCAEA,2CAEA,yCAEA,yCAEA,yCAEA,yCAEA,yCAEA,2BAEA,qCAEA,yCAEA,0CAEA,yCAEA,0CAEA,wCAEA,2CAEA,0CAEA,wCAEA,4CAEA,0CAEA,0CAEA,0CAEA,0CAEA,0CAEA,4BAEA,mCAEA,uCAEA,wCAEA,uCAEA,wCAEA,sCAEA,yCAEA,wCAEA,sCAEA,0CAEA,wCAEA,wCAEA,wCAEA,wCAEA,wCAEA,0BAKA,4CAEA,2CAEA,4CAEA,0CAEA,6CAEA,4CAEA,0CAEA,8CAEA,4CAEA,4CAEA,4CAEA,4CAEA,4CAKA,8BAEA,kCAEA,mCAEA,kCAEA,mCAEA,iCAEA,oCAEA,mCAEA,iCAEA,qCAEA,mCAEA,mCAEA,mCAEA,mCAEA,mCAGA,mEAEA,0EAEA,6EAEA,2EAEA,6EAEA,yEAEA,+EAEA,6EAEA,yEAEA,gFAEA,4EAEA,4EAEA,4EAEA,4EAEA,4EAGA,mEAEA,0EAEA,6EAEA,2EAEA,6EAEA,yEAEA,+EAEA,6EAEA,yEAEA,gFAEA,4EAEA,4EAEA,4EAEA,4EAEA,4EAGA,mCAEA,uCAEA,wCAEA,uCAEA,wCAEA,sCAEA,yCAEA,wCAEA,sCAEA,0CAEA,wCAEA,wCAEA,wCAEA,wCAEA,wCAEA,qCAEA,yCAEA,0CAEA,yCAEA,0CAEA,wCAEA,2CAEA,0CAEA,wCAEA,4CAEA,0CAEA,0CAEA,0CAEA,0CAEA,0CAEA,sCAEA,0CAEA,2CAEA,0CAEA,2CAEA,yCAEA,4CAEA,2CAEA,yCAEA,6CAEA,2CAEA,2CAEA,2CAEA,2CAEA,2CAEA,oCAEA,wCAEA,yCAEA,wCAEA,yCAEA,uCAEA,0CAEA,yCAEA,uCAEA,2CAEA,yCAEA,yCAEA,yCAEA,yCAEA,0CAv9FZ,yBA6DE,sBACE,yBAEA,uCAEA,2BAEA,uBAEA,qCAEA,uBAEA,qCAEA,yBAEA,mCAEA,iCAEA,yBAEA,gCAEA,kCAIF,sBACE,yBAEA,uCAEA,2BAEA,uBAEA,qCAEA,uBAEA,qCAEA,yBAEA,mCAEA,iCAEA,yBAEA,gCAEA,kCAIF,uBACE,yBAEA,uCAEA,2BAEA,uBAEA,qCAEA,uBAEA,qCAEA,yBAEA,mCAEA,iCAEA,yBAEA,gCAEA,kCAIF,uBACE,yBAEA,uCAEA,2BAEA,uBAEA,qCAEA,uBAEA,qCAEA,yBAEA,mCAEA,iCAEA,yBAEA,gCAEA,kCAIF,uBACE,6BAEA,2CAEA,+BAEA,2BAEA,yCAEA,2BAEA,yCAEA,6BAEA,uCAEA,qCAEA,6BAEA,oCAEA,sCAMF,aACE,sCAEA,oDAEA,wCAEA,sCAEA,6CAEA,+CA2hDI,qBAEA,mCAEA,uBAEA,mBAEA,iCAEA,mBAEA,iCAEA,qBAEA,+BAEA,6BAEA,qBAKA,4BAEA,6BAGA,qIAYA,2JAeA,sBACE,yBAEA,uCAEA,2BAEA,uBAEA,qCAEA,uBAEA,qCAEA,yBAEA,mCAEA,iCAEA,yBAEA,gCAEA,kCAIF,sBACE,yBAEA,uCAEA,2BAEA,uBAEA,qCAEA,uBAEA,qCAEA,yBAEA,mCAEA,iCAEA,yBAEA,gCAEA,kCAIF,uBACE,yBAEA,uCAEA,2BAEA,uBAEA,qCAEA,uBAEA,qCAEA,yBAEA,mCAEA,iCAEA,yBAEA,gCAEA,kCAIF,uBACE,yBAEA,uCAEA,2BAEA,uBAEA,qCAEA,uBAEA,qCAEA,yBAEA,mCAEA,iCAEA,yBAEA,gCAEA,kCAIF,uBACE,6BAEA,2CAEA,+BAEA,2BAEA,yCAEA,2BAEA,yCAEA,6BAEA,uCAEA,qCAEA,6BAEA,oCAEA,sCAMF,aACE,sCAEA,oDAEA,wCAEA,sCAEA,6CAEA,gDA7kDN,mCAIE,sBACE,qDAEA,qDAEA,qDAEA,qDAEA,qDAEA,uDAEA,4EAEA,8EAEA,mCAEA,mCAEA,mCAEA,mCAEA,mCAEA,qCAEA,oCAEA,gCAEA,gCAEA,gCAEA,gCAEA,gCAEA,gCAEA,kCAIF,sBACE,qDAEA,qDAEA,qDAEA,qDAEA,qDAEA,uDAEA,4EAEA,8EAEA,mCAEA,mCAEA,mCAEA,mCAEA,mCAEA,qCAEA,oCAEA,gCAEA,gCAEA,gCAEA,gCAEA,gCAEA,gCAEA,kCAIF,uBACE,qDAEA,qDAEA,qDAEA,qDAEA,qDAEA,uDAEA,4EAEA,8EAEA,mCAEA,mCAEA,mCAEA,mCAEA,mCAEA,qCAEA,oCAEA,gCAEA,gCAEA,gCAEA,gCAEA,gCAEA,gCAEA,kCAIF,uBACE,qDAEA,qDAEA,qDAEA,qDAEA,qDAEA,uDAEA,4EAEA,8EAEA,mCAEA,mCAEA,mCAEA,mCAEA,mCAEA,qCAEA,oCAEA,gCAEA,gCAEA,gCAEA,gCAEA,gCAEA,gCAEA,kCAIF,uBACE,yDAEA,yDAEA,yDAEA,yDAEA,yDAEA,2DAEA,gFAEA,kFAEA,uCAEA,uCAEA,uCAEA,uCAEA,uCAEA,yCAEA,wCAEA,oCAEA,oCAEA,oCAEA,oCAEA,oCAEA,oCAEA,sCA2gDI,sBACE,qDAEA,qDAEA,qDAEA,qDAEA,qDAEA,uDAEA,4EAEA,8EAEA,mCAEA,mCAEA,mCAEA,mCAEA,mCAEA,qCAEA,oCAEA,gCAEA,gCAEA,gCAEA,gCAEA,gCAEA,gCAEA,kCAIF,sBACE,qDAEA,qDAEA,qDAEA,qDAEA,qDAEA,uDAEA,4EAEA,8EAEA,mCAEA,mCAEA,mCAEA,mCAEA,mCAEA,qCAEA,oCAEA,gCAEA,gCAEA,gCAEA,gCAEA,gCAEA,gCAEA,kCAIF,uBACE,qDAEA,qDAEA,qDAEA,qDAEA,qDAEA,uDAEA,4EAEA,8EAEA,mCAEA,mCAEA,mCAEA,mCAEA,mCAEA,qCAEA,oCAEA,gCAEA,gCAEA,gCAEA,gCAEA,gCAEA,gCAEA,kCAIF,uBACE,qDAEA,qDAEA,qDAEA,qDAEA,qDAEA,uDAEA,4EAEA,8EAEA,mCAEA,mCAEA,mCAEA,mCAEA,mCAEA,qCAEA,oCAEA,gCAEA,gCAEA,gCAEA,gCAEA,gCAEA,gCAEA,kCAIF,uBACE,yDAEA,yDAEA,yDAEA,yDAEA,yDAEA,2DAEA,gFAEA,kFAEA,uCAEA,uCAEA,uCAEA,uCAEA,uCAEA,yCAEA,wCAEA,oCAEA,oCAEA,oCAEA,oCAEA,oCAEA,oCAEA,uCAnnDV,mBA05EQ,+GAOA,4FAMA,4FAMA,4FAMA,4FAOA,iJASA,yDAKA,qDAQA,mBAEA,iDAEA,iDAEA,iDAEA,iDAEA,iDAEA,mDAEA,iGAEA,oGAGA,+BAEA,+BAEA,+BAEA,+BAEA,+BAEA,iCAEA,gCAGA,8CAEA,8CAEA,8CAEA,8CAEA,8CAEA,8CAGA,4BAEA,4BAEA,4BAEA,4BAEA,4BAEA,4BAEA,8BAjwER,mBAy5EQ,4EAOA,6EAMA,mFAOA,+GAOA,uGAUA,mBAEA,iCAGA,6BAEA,gCAEA,0BAEA,8BAGA,oCAEA,iCAEA,gCAEA,mCAEA,qCAEA,0CAEA,uCAEA,sCAEA,+CAEA,6CAEA,6CAGA,mBAEA,qBAEA,qBAEA,0BAGA,+BAEA,oCAEA,oCAEA,+BAEA,+BAEA,+BAEA,+BAEA,+BAEA,+BAGA,uBAEA,yBAEA,2BAEA,6BAGA,2BAEA,kCAEA,+BAEA,8BAEA,kCAtvEN,yBA6FE,sBACE,2DAKF,sBACE,2DAKF,uBACE,4DAKF,uBACE,4DAKF,uBACE,6DAoyEI,4LAUA,sJASA,uLASA,uLASA,wLASA,wLASA,0LAYA,4CAKA,0CAIA,8CAKA,2JAQA,sBACE,2DAKF,sBACE,2DAKF,uBACE,4DAKF,uBACE,4DAKF,uBACE,6DAQF,gCAIA,sCAIA,sCAIA,sEAOA,uFAUA,kQAQA,2EAIA,sEAIA,yEAIA,oIAMA,yHAQA,yMAeA,6TAaA,0QAUA,8UAYA,yWAYA,4MAUA,2MAUA,+KAWA,qKAcA,eAEA,iBAEA,iBAEA,iBAEA,iBAEA,iBAEA,qBAGA,2CAEA,uCAEA,uCAEA,yCAEA,yCAEA,yCAEA,qCAEA,yCAEA,sCA1gCJ,cACE,sVAsBF,wBAEE,mBAEA,oBAEA,8BAEA,8BAEA,2BAGA,4BAEA,2BAGA,qBAEA,uBAEA,mCAEA,qBAGA,iCAEA,6BAEA,iCAEA","sources":["Users/jseidel/GitHub/dragonfly/dist/temp/layout-temp-combined.css"],"sourcesContent":["/* Datei: layout/spacing.css */\n/**\n* Spacing Utilities System - Token-Based Version\n*\n* A comprehensive spacing system using design tokens for consistent gap, margin,\n* and padding utilities. This version uses CSS custom properties from tokens/spacing.css\n* for better maintainability and consistency.\n*\n* @layer layout.spacing\n* @version 3.0\n* @author Design System Team\n*/\n\n@layer layout.spacing {\n/* ================= GAP UTILITIES ================= */\n\n/* Gap für Grid- und Flex-Layouts */\n  .gap-0 { gap: var(--space-0, 0); }\n\n  .gap-px { gap: var(--space-px, 1px); }\n\n  .gap-1 { gap: var(--space-1, 0.25rem); }\n\n  .gap-2 { gap: var(--space-2, 0.5rem); }\n\n  .gap-3 { gap: var(--space-3, 0.75rem); }\n\n  .gap-4 { gap: var(--space-4, 1rem); }\n\n  .gap-5 { gap: var(--space-5, 1.25rem); }\n\n  .gap-6 { gap: var(--space-6, 1.5rem); }\n\n  .gap-7 { gap: var(--space-7, 1.75rem); }\n\n  .gap-8 { gap: var(--space-8, 2rem); }\n\n  .gap-9 { gap: var(--space-9, 2.25rem); }\n\n  .gap-10 { gap: var(--space-10, 2.5rem); }\n\n  .gap-11 { gap: var(--space-11, 2.75rem); }\n\n  .gap-12 { gap: var(--space-12, 3rem); }\n\n  .gap-14 { gap: var(--space-14, 3.5rem); }\n\n  .gap-16 { gap: var(--space-16, 4rem); }\n\n  .gap-20 { gap: var(--space-20, 5rem); }\n\n  .gap-24 { gap: var(--space-24, 6rem); }\n\n  .gap-28 { gap: var(--space-28, 7rem); }\n\n  .gap-32 { gap: var(--space-32, 8rem); }\n\n  .gap-36 { gap: var(--space-36, 9rem); }\n\n  .gap-40 { gap: var(--space-40, 10rem); }\n\n  .gap-44 { gap: var(--space-44, 11rem); }\n\n  .gap-48 { gap: var(--space-48, 12rem); }\n\n  .gap-52 { gap: var(--space-52, 13rem); }\n\n  .gap-56 { gap: var(--space-56, 14rem); }\n\n  .gap-60 { gap: var(--space-60, 15rem); }\n\n  .gap-64 { gap: var(--space-64, 16rem); }\n\n  .gap-72 { gap: var(--space-72, 18rem); }\n\n  .gap-80 { gap: var(--space-80, 20rem); }\n\n  .gap-96 { gap: var(--space-96, 24rem); }\n\n/* Semantic Gap Utilities */\n  .gap-xs { gap: var(--space-xs, 0.75rem); }\n\n  .gap-sm { gap: var(--space-sm, 1.25rem); }\n\n  .gap-md { gap: var(--space-md, 1.75rem); }\n\n  .gap-lg { gap: var(--space-lg, 2.25rem); }\n\n  .gap-xl { gap: var(--space-xl, 3rem); }\n\n  .gap-2xl { gap: var(--space-2xl, 4rem); }\n\n  .gap-3xl { gap: var(--space-3xl, 5rem); }\n\n/* Horizontale Gaps (column-gap) */\n  .gap-x-0 { column-gap: var(--space-0, 0); }\n\n  .gap-x-px { column-gap: var(--space-px, 1px); }\n\n  .gap-x-1 { column-gap: var(--space-1, 0.25rem); }\n\n  .gap-x-2 { column-gap: var(--space-2, 0.5rem); }\n\n  .gap-x-3 { column-gap: var(--space-3, 0.75rem); }\n\n  .gap-x-4 { column-gap: var(--space-4, 1rem); }\n\n  .gap-x-5 { column-gap: var(--space-5, 1.25rem); }\n\n  .gap-x-6 { column-gap: var(--space-6, 1.5rem); }\n\n  .gap-x-8 { column-gap: var(--space-8, 2rem); }\n\n  .gap-x-10 { column-gap: var(--space-10, 2.5rem); }\n\n  .gap-x-12 { column-gap: var(--space-12, 3rem); }\n\n  .gap-x-16 { column-gap: var(--space-16, 4rem); }\n\n  .gap-x-20 { column-gap: var(--space-20, 5rem); }\n\n  .gap-x-24 { column-gap: var(--space-24, 6rem); }\n\n  .gap-x-32 { column-gap: var(--space-32, 8rem); }\n\n/* Vertikale Gaps (row-gap) */\n  .gap-y-0 { row-gap: var(--space-0, 0); }\n\n  .gap-y-px { row-gap: var(--space-px, 1px); }\n\n  .gap-y-1 { row-gap: var(--space-1, 0.25rem); }\n\n  .gap-y-2 { row-gap: var(--space-2, 0.5rem); }\n\n  .gap-y-3 { row-gap: var(--space-3, 0.75rem); }\n\n  .gap-y-4 { row-gap: var(--space-4, 1rem); }\n\n  .gap-y-5 { row-gap: var(--space-5, 1.25rem); }\n\n  .gap-y-6 { row-gap: var(--space-6, 1.5rem); }\n\n  .gap-y-8 { row-gap: var(--space-8, 2rem); }\n\n  .gap-y-10 { row-gap: var(--space-10, 2.5rem); }\n\n  .gap-y-12 { row-gap: var(--space-12, 3rem); }\n\n  .gap-y-16 { row-gap: var(--space-16, 4rem); }\n\n  .gap-y-20 { row-gap: var(--space-20, 5rem); }\n\n  .gap-y-24 { row-gap: var(--space-24, 6rem); }\n\n  .gap-y-32 { row-gap: var(--space-32, 8rem); }\n\n/* ================= MARGIN UTILITIES ================= */\n\n/* Margin in alle Richtungen */\n  .m-0 { margin: var(--space-0, 0); }\n\n  .m-px { margin: var(--space-px, 1px); }\n\n  .m-1 { margin: var(--space-1, 0.25rem); }\n\n  .m-2 { margin: var(--space-2, 0.5rem); }\n\n  .m-3 { margin: var(--space-3, 0.75rem); }\n\n  .m-4 { margin: var(--space-4, 1rem); }\n\n  .m-5 { margin: var(--space-5, 1.25rem); }\n\n  .m-6 { margin: var(--space-6, 1.5rem); }\n\n  .m-8 { margin: var(--space-8, 2rem); }\n\n  .m-10 { margin: var(--space-10, 2.5rem); }\n\n  .m-12 { margin: var(--space-12, 3rem); }\n\n  .m-16 { margin: var(--space-16, 4rem); }\n\n  .m-20 { margin: var(--space-20, 5rem); }\n\n  .m-24 { margin: var(--space-24, 6rem); }\n\n  .m-32 { margin: var(--space-32, 8rem); }\n\n  .m-auto { margin: auto; }\n\n/* Horizontale Margins */\n  .mx-0 { margin-left: var(--space-0, 0); margin-right: var(--space-0, 0); }\n\n  .mx-px { margin-left: var(--space-px, 1px); margin-right: var(--space-px, 1px); }\n\n  .mx-1 { margin-left: var(--space-1, 0.25rem); margin-right: var(--space-1, 0.25rem); }\n\n  .mx-2 { margin-left: var(--space-2, 0.5rem); margin-right: var(--space-2, 0.5rem); }\n\n  .mx-3 { margin-left: var(--space-3, 0.75rem); margin-right: var(--space-3, 0.75rem); }\n\n  .mx-4 { margin-left: var(--space-4, 1rem); margin-right: var(--space-4, 1rem); }\n\n  .mx-5 { margin-left: var(--space-5, 1.25rem); margin-right: var(--space-5, 1.25rem); }\n\n  .mx-6 { margin-left: var(--space-6, 1.5rem); margin-right: var(--space-6, 1.5rem); }\n\n  .mx-8 { margin-left: var(--space-8, 2rem); margin-right: var(--space-8, 2rem); }\n\n  .mx-10 { margin-left: var(--space-10, 2.5rem); margin-right: var(--space-10, 2.5rem); }\n\n  .mx-12 { margin-left: var(--space-12, 3rem); margin-right: var(--space-12, 3rem); }\n\n  .mx-16 { margin-left: var(--space-16, 4rem); margin-right: var(--space-16, 4rem); }\n\n  .mx-20 { margin-left: var(--space-20, 5rem); margin-right: var(--space-20, 5rem); }\n\n  .mx-24 { margin-left: var(--space-24, 6rem); margin-right: var(--space-24, 6rem); }\n\n  .mx-32 { margin-left: var(--space-32, 8rem); margin-right: var(--space-32, 8rem); }\n\n  .mx-auto { margin-left: auto; margin-right: auto; }\n\n/* Vertikale Margins */\n  .my-0 { margin-bottom: var(--space-0, 0); margin-top: var(--space-0, 0); }\n\n  .my-px { margin-bottom: var(--space-px, 1px); margin-top: var(--space-px, 1px); }\n\n  .my-1 { margin-bottom: var(--space-1, 0.25rem); margin-top: var(--space-1, 0.25rem); }\n\n  .my-2 { margin-bottom: var(--space-2, 0.5rem); margin-top: var(--space-2, 0.5rem); }\n\n  .my-3 { margin-bottom: var(--space-3, 0.75rem); margin-top: var(--space-3, 0.75rem); }\n\n  .my-4 { margin-bottom: var(--space-4, 1rem); margin-top: var(--space-4, 1rem); }\n\n  .my-5 { margin-bottom: var(--space-5, 1.25rem); margin-top: var(--space-5, 1.25rem); }\n\n  .my-6 { margin-bottom: var(--space-6, 1.5rem); margin-top: var(--space-6, 1.5rem); }\n\n  .my-8 { margin-bottom: var(--space-8, 2rem); margin-top: var(--space-8, 2rem); }\n\n  .my-10 { margin-bottom: var(--space-10, 2.5rem); margin-top: var(--space-10, 2.5rem); }\n\n  .my-12 { margin-bottom: var(--space-12, 3rem); margin-top: var(--space-12, 3rem); }\n\n  .my-16 { margin-bottom: var(--space-16, 4rem); margin-top: var(--space-16, 4rem); }\n\n  .my-20 { margin-bottom: var(--space-20, 5rem); margin-top: var(--space-20, 5rem); }\n\n  .my-24 { margin-bottom: var(--space-24, 6rem); margin-top: var(--space-24, 6rem); }\n\n  .my-32 { margin-bottom: var(--space-32, 8rem); margin-top: var(--space-32, 8rem); }\n\n  .my-auto { margin-bottom: auto; margin-top: auto; }\n\n/* Einzelne Margin-Richtungen */\n  .mt-0 { margin-top: var(--space-0, 0); }\n\n  .mt-px { margin-top: var(--space-px, 1px); }\n\n  .mt-1 { margin-top: var(--space-1, 0.25rem); }\n\n  .mt-2 { margin-top: var(--space-2, 0.5rem); }\n\n  .mt-3 { margin-top: var(--space-3, 0.75rem); }\n\n  .mt-4 { margin-top: var(--space-4, 1rem); }\n\n  .mt-5 { margin-top: var(--space-5, 1.25rem); }\n\n  .mt-6 { margin-top: var(--space-6, 1.5rem); }\n\n  .mt-8 { margin-top: var(--space-8, 2rem); }\n\n  .mt-10 { margin-top: var(--space-10, 2.5rem); }\n\n  .mt-12 { margin-top: var(--space-12, 3rem); }\n\n  .mt-16 { margin-top: var(--space-16, 4rem); }\n\n  .mt-20 { margin-top: var(--space-20, 5rem); }\n\n  .mt-24 { margin-top: var(--space-24, 6rem); }\n\n  .mt-32 { margin-top: var(--space-32, 8rem); }\n\n  .mt-auto { margin-top: auto; }\n\n  .mr-0 { margin-right: var(--space-0, 0); }\n\n  .mr-px { margin-right: var(--space-px, 1px); }\n\n  .mr-1 { margin-right: var(--space-1, 0.25rem); }\n\n  .mr-2 { margin-right: var(--space-2, 0.5rem); }\n\n  .mr-3 { margin-right: var(--space-3, 0.75rem); }\n\n  .mr-4 { margin-right: var(--space-4, 1rem); }\n\n  .mr-5 { margin-right: var(--space-5, 1.25rem); }\n\n  .mr-6 { margin-right: var(--space-6, 1.5rem); }\n\n  .mr-8 { margin-right: var(--space-8, 2rem); }\n\n  .mr-10 { margin-right: var(--space-10, 2.5rem); }\n\n  .mr-12 { margin-right: var(--space-12, 3rem); }\n\n  .mr-16 { margin-right: var(--space-16, 4rem); }\n\n  .mr-20 { margin-right: var(--space-20, 5rem); }\n\n  .mr-24 { margin-right: var(--space-24, 6rem); }\n\n  .mr-32 { margin-right: var(--space-32, 8rem); }\n\n  .mr-auto { margin-right: auto; }\n\n  .mb-0 { margin-bottom: var(--space-0, 0); }\n\n  .mb-px { margin-bottom: var(--space-px, 1px); }\n\n  .mb-1 { margin-bottom: var(--space-1, 0.25rem); }\n\n  .mb-2 { margin-bottom: var(--space-2, 0.5rem); }\n\n  .mb-3 { margin-bottom: var(--space-3, 0.75rem); }\n\n  .mb-4 { margin-bottom: var(--space-4, 1rem); }\n\n  .mb-5 { margin-bottom: var(--space-5, 1.25rem); }\n\n  .mb-6 { margin-bottom: var(--space-6, 1.5rem); }\n\n  .mb-8 { margin-bottom: var(--space-8, 2rem); }\n\n  .mb-10 { margin-bottom: var(--space-10, 2.5rem); }\n\n  .mb-12 { margin-bottom: var(--space-12, 3rem); }\n\n  .mb-16 { margin-bottom: var(--space-16, 4rem); }\n\n  .mb-20 { margin-bottom: var(--space-20, 5rem); }\n\n  .mb-24 { margin-bottom: var(--space-24, 6rem); }\n\n  .mb-32 { margin-bottom: var(--space-32, 8rem); }\n\n  .mb-auto { margin-bottom: auto; }\n\n  .ml-0 { margin-left: var(--space-0, 0); }\n\n  .ml-px { margin-left: var(--space-px, 1px); }\n\n  .ml-1 { margin-left: var(--space-1, 0.25rem); }\n\n  .ml-2 { margin-left: var(--space-2, 0.5rem); }\n\n  .ml-3 { margin-left: var(--space-3, 0.75rem); }\n\n  .ml-4 { margin-left: var(--space-4, 1rem); }\n\n  .ml-5 { margin-left: var(--space-5, 1.25rem); }\n\n  .ml-6 { margin-left: var(--space-6, 1.5rem); }\n\n  .ml-8 { margin-left: var(--space-8, 2rem); }\n\n  .ml-10 { margin-left: var(--space-10, 2.5rem); }\n\n  .ml-12 { margin-left: var(--space-12, 3rem); }\n\n  .ml-16 { margin-left: var(--space-16, 4rem); }\n\n  .ml-20 { margin-left: var(--space-20, 5rem); }\n\n  .ml-24 { margin-left: var(--space-24, 6rem); }\n\n  .ml-32 { margin-left: var(--space-32, 8rem); }\n\n  .ml-auto { margin-left: auto; }\n\n/* ================= NEGATIVE MARGINS ================= */\n\n/* Negative Margins für Overlapping-Layouts */\n  .-m-1 { margin: calc(-1 * var(--space-1, 0.25rem)); }\n\n  .-m-2 { margin: calc(-1 * var(--space-2, 0.5rem)); }\n\n  .-m-3 { margin: calc(-1 * var(--space-3, 0.75rem)); }\n\n  .-m-4 { margin: calc(-1 * var(--space-4, 1rem)); }\n\n  .-m-5 { margin: calc(-1 * var(--space-5, 1.25rem)); }\n\n  .-m-6 { margin: calc(-1 * var(--space-6, 1.5rem)); }\n\n  .-m-8 { margin: calc(-1 * var(--space-8, 2rem)); }\n\n  .-m-10 { margin: calc(-1 * var(--space-10, 2.5rem)); }\n\n  .-m-12 { margin: calc(-1 * var(--space-12, 3rem)); }\n\n  .-m-16 { margin: calc(-1 * var(--space-16, 4rem)); }\n\n  .-m-20 { margin: calc(-1 * var(--space-20, 5rem)); }\n\n  .-m-24 { margin: calc(-1 * var(--space-24, 6rem)); }\n\n  .-m-32 { margin: calc(-1 * var(--space-32, 8rem)); }\n\n/* ================= PADDING UTILITIES ================= */\n\n/* Padding in alle Richtungen */\n  .p-0 { padding: var(--space-0, 0); }\n\n  .p-px { padding: var(--space-px, 1px); }\n\n  .p-1 { padding: var(--space-1, 0.25rem); }\n\n  .p-2 { padding: var(--space-2, 0.5rem); }\n\n  .p-3 { padding: var(--space-3, 0.75rem); }\n\n  .p-4 { padding: var(--space-4, 1rem); }\n\n  .p-5 { padding: var(--space-5, 1.25rem); }\n\n  .p-6 { padding: var(--space-6, 1.5rem); }\n\n  .p-8 { padding: var(--space-8, 2rem); }\n\n  .p-10 { padding: var(--space-10, 2.5rem); }\n\n  .p-12 { padding: var(--space-12, 3rem); }\n\n  .p-16 { padding: var(--space-16, 4rem); }\n\n  .p-20 { padding: var(--space-20, 5rem); }\n\n  .p-24 { padding: var(--space-24, 6rem); }\n\n  .p-32 { padding: var(--space-32, 8rem); }\n\n/* Horizontales Padding */\n  .px-0 { padding-left: var(--space-0, 0); padding-right: var(--space-0, 0); }\n\n  .px-px { padding-left: var(--space-px, 1px); padding-right: var(--space-px, 1px); }\n\n  .px-1 { padding-left: var(--space-1, 0.25rem); padding-right: var(--space-1, 0.25rem); }\n\n  .px-2 { padding-left: var(--space-2, 0.5rem); padding-right: var(--space-2, 0.5rem); }\n\n  .px-3 { padding-left: var(--space-3, 0.75rem); padding-right: var(--space-3, 0.75rem); }\n\n  .px-4 { padding-left: var(--space-4, 1rem); padding-right: var(--space-4, 1rem); }\n\n  .px-5 { padding-left: var(--space-5, 1.25rem); padding-right: var(--space-5, 1.25rem); }\n\n  .px-6 { padding-left: var(--space-6, 1.5rem); padding-right: var(--space-6, 1.5rem); }\n\n  .px-8 { padding-left: var(--space-8, 2rem); padding-right: var(--space-8, 2rem); }\n\n  .px-10 { padding-left: var(--space-10, 2.5rem); padding-right: var(--space-10, 2.5rem); }\n\n  .px-12 { padding-left: var(--space-12, 3rem); padding-right: var(--space-12, 3rem); }\n\n  .px-16 { padding-left: var(--space-16, 4rem); padding-right: var(--space-16, 4rem); }\n\n  .px-20 { padding-left: var(--space-20, 5rem); padding-right: var(--space-20, 5rem); }\n\n  .px-24 { padding-left: var(--space-24, 6rem); padding-right: var(--space-24, 6rem); }\n\n  .px-32 { padding-left: var(--space-32, 8rem); padding-right: var(--space-32, 8rem); }\n\n/* Vertikales Padding */\n  .py-0 { padding-bottom: var(--space-0, 0); padding-top: var(--space-0, 0); }\n\n  .py-px { padding-bottom: var(--space-px, 1px); padding-top: var(--space-px, 1px); }\n\n  .py-1 { padding-bottom: var(--space-1, 0.25rem); padding-top: var(--space-1, 0.25rem); }\n\n  .py-2 { padding-bottom: var(--space-2, 0.5rem); padding-top: var(--space-2, 0.5rem); }\n\n  .py-3 { padding-bottom: var(--space-3, 0.75rem); padding-top: var(--space-3, 0.75rem); }\n\n  .py-4 { padding-bottom: var(--space-4, 1rem); padding-top: var(--space-4, 1rem); }\n\n  .py-5 { padding-bottom: var(--space-5, 1.25rem); padding-top: var(--space-5, 1.25rem); }\n\n  .py-6 { padding-bottom: var(--space-6, 1.5rem); padding-top: var(--space-6, 1.5rem); }\n\n  .py-8 { padding-bottom: var(--space-8, 2rem); padding-top: var(--space-8, 2rem); }\n\n  .py-10 { padding-bottom: var(--space-10, 2.5rem); padding-top: var(--space-10, 2.5rem); }\n\n  .py-12 { padding-bottom: var(--space-12, 3rem); padding-top: var(--space-12, 3rem); }\n\n  .py-16 { padding-bottom: var(--space-16, 4rem); padding-top: var(--space-16, 4rem); }\n\n  .py-20 { padding-bottom: var(--space-20, 5rem); padding-top: var(--space-20, 5rem); }\n\n  .py-24 { padding-bottom: var(--space-24, 6rem); padding-top: var(--space-24, 6rem); }\n\n  .py-32 { padding-bottom: var(--space-32, 8rem); padding-top: var(--space-32, 8rem); }\n\n/* Einzelne Padding-Richtungen */\n  .pt-0 { padding-top: var(--space-0, 0); }\n\n  .pt-px { padding-top: var(--space-px, 1px); }\n\n  .pt-1 { padding-top: var(--space-1, 0.25rem); }\n\n  .pt-2 { padding-top: var(--space-2, 0.5rem); }\n\n  .pt-3 { padding-top: var(--space-3, 0.75rem); }\n\n  .pt-4 { padding-top: var(--space-4, 1rem); }\n\n  .pt-5 { padding-top: var(--space-5, 1.25rem); }\n\n  .pt-6 { padding-top: var(--space-6, 1.5rem); }\n\n  .pt-8 { padding-top: var(--space-8, 2rem); }\n\n  .pt-10 { padding-top: var(--space-10, 2.5rem); }\n\n  .pt-12 { padding-top: var(--space-12, 3rem); }\n\n  .pt-16 { padding-top: var(--space-16, 4rem); }\n\n  .pt-20 { padding-top: var(--space-20, 5rem); }\n\n  .pt-24 { padding-top: var(--space-24, 6rem); }\n\n  .pt-32 { padding-top: var(--space-32, 8rem); }\n\n  .pr-0 { padding-right: var(--space-0, 0); }\n\n  .pr-px { padding-right: var(--space-px, 1px); }\n\n  .pr-1 { padding-right: var(--space-1, 0.25rem); }\n\n  .pr-2 { padding-right: var(--space-2, 0.5rem); }\n\n  .pr-3 { padding-right: var(--space-3, 0.75rem); }\n\n  .pr-4 { padding-right: var(--space-4, 1rem); }\n\n  .pr-5 { padding-right: var(--space-5, 1.25rem); }\n\n  .pr-6 { padding-right: var(--space-6, 1.5rem); }\n\n  .pr-8 { padding-right: var(--space-8, 2rem); }\n\n  .pr-10 { padding-right: var(--space-10, 2.5rem); }\n\n  .pr-12 { padding-right: var(--space-12, 3rem); }\n\n  .pr-16 { padding-right: var(--space-16, 4rem); }\n\n  .pr-20 { padding-right: var(--space-20, 5rem); }\n\n  .pr-24 { padding-right: var(--space-24, 6rem); }\n\n  .pr-32 { padding-right: var(--space-32, 8rem); }\n\n  .pb-0 { padding-bottom: var(--space-0, 0); }\n\n  .pb-px { padding-bottom: var(--space-px, 1px); }\n\n  .pb-1 { padding-bottom: var(--space-1, 0.25rem); }\n\n  .pb-2 { padding-bottom: var(--space-2, 0.5rem); }\n\n  .pb-3 { padding-bottom: var(--space-3, 0.75rem); }\n\n  .pb-4 { padding-bottom: var(--space-4, 1rem); }\n\n  .pb-5 { padding-bottom: var(--space-5, 1.25rem); }\n\n  .pb-6 { padding-bottom: var(--space-6, 1.5rem); }\n\n  .pb-8 { padding-bottom: var(--space-8, 2rem); }\n\n  .pb-10 { padding-bottom: var(--space-10, 2.5rem); }\n\n  .pb-12 { padding-bottom: var(--space-12, 3rem); }\n\n  .pb-16 { padding-bottom: var(--space-16, 4rem); }\n\n  .pb-20 { padding-bottom: var(--space-20, 5rem); }\n\n  .pb-24 { padding-bottom: var(--space-24, 6rem); }\n\n  .pb-32 { padding-bottom: var(--space-32, 8rem); }\n\n  .pl-0 { padding-left: var(--space-0, 0); }\n\n  .pl-px { padding-left: var(--space-px, 1px); }\n\n  .pl-1 { padding-left: var(--space-1, 0.25rem); }\n\n  .pl-2 { padding-left: var(--space-2, 0.5rem); }\n\n  .pl-3 { padding-left: var(--space-3, 0.75rem); }\n\n  .pl-4 { padding-left: var(--space-4, 1rem); }\n\n  .pl-5 { padding-left: var(--space-5, 1.25rem); }\n\n  .pl-6 { padding-left: var(--space-6, 1.5rem); }\n\n  .pl-8 { padding-left: var(--space-8, 2rem); }\n\n  .pl-10 { padding-left: var(--space-10, 2.5rem); }\n\n  .pl-12 { padding-left: var(--space-12, 3rem); }\n\n  .pl-16 { padding-left: var(--space-16, 4rem); }\n\n  .pl-20 { padding-left: var(--space-20, 5rem); }\n\n  .pl-24 { padding-left: var(--space-24, 6rem); }\n\n  .pl-32 { padding-left: var(--space-32, 8rem); }\n}\n\n/* Datei: layout/spacing-old.css */\n/**\n* Spacing Utilities System\n*\n* A comprehensive spacing system providing consistent gap, margin, and padding\n* utilities for modern web layouts. This system uses a harmonious spacing scale\n* based on design tokens and provides utilities for all spacing needs.\n*\n* @layer layout.spacing\n* @version 2.0\n* @author Design System Team\n*\n* FEATURES:\n* - Consistent spacing scale based on design tokens\n* - Gap utilities for CSS Grid and Flexbox layouts\n* - Margin utilities for external spacing\n* - Padding utilities for internal spacing\n* - Directional spacing controls (top, right, bottom, left)\n* - Axis-based spacing (horizontal, vertical)\n* - Negative margin utilities for overlapping layouts\n* - Auto margin utilities for centering\n* - Responsive variants available via responsive-utilities.css\n*\n* SPACING SCALE:\n* Based on a harmonious scale with consistent ratios:\n* - 0: 0 (no spacing)\n* - 1: 0.25rem (4px)\n* - 2: 0.5rem (8px)\n* - 3: 0.75rem (12px)\n* - 4: 1rem (16px) - Base unit\n* - 5: 1.25rem (20px)\n* - 6: 1.5rem (24px)\n* - 8: 2rem (32px)\n* - 10: 2.5rem (40px)\n* - 12: 3rem (48px)\n* - 16: 4rem (64px)\n* - 20: 5rem (80px)\n* - 24: 6rem (96px)\n* - 32: 8rem (128px)\n*\n* GAP UTILITIES:\n* For CSS Grid and Flexbox layouts:\n* - .gap-{size}: Gap in all directions\n* - .gap-x-{size}: Horizontal gap (column-gap)\n* - .gap-y-{size}: Vertical gap (row-gap)\n*\n* MARGIN UTILITIES:\n* For external spacing around elements:\n* - .m-{size}: Margin in all directions\n* - .mx-{size}: Horizontal margins (left + right)\n* - .my-{size}: Vertical margins (top + bottom)\n* - .mt-{size}: Margin top\n* - .mr-{size}: Margin right\n* - .mb-{size}: Margin bottom\n* - .ml-{size}: Margin left\n* - .m-auto: Auto margin (centering)\n* - .mx-auto: Auto horizontal margins (horizontal centering)\n* - .my-auto: Auto vertical margins (vertical centering)\n*\n* NEGATIVE MARGINS:\n* For overlapping layouts and adjustments:\n* - .-m-{size}: Negative margin in all directions\n* - .-mx-{size}: Negative horizontal margins\n* - .-my-{size}: Negative vertical margins\n* - .-mt-{size}: Negative margin top\n* - .-mr-{size}: Negative margin right\n* - .-mb-{size}: Negative margin bottom\n* - .-ml-{size}: Negative margin left\n*\n* PADDING UTILITIES:\n* For internal spacing within elements:\n* - .p-{size}: Padding in all directions\n* - .px-{size}: Horizontal padding (left + right)\n* - .py-{size}: Vertical padding (top + bottom)\n* - .pt-{size}: Padding top\n* - .pr-{size}: Padding right\n* - .pb-{size}: Padding bottom\n* - .pl-{size}: Padding left\n*\n* USAGE EXAMPLES:\n*\n* Grid Layout with Gap:\n* <div class=\"grid grid-cols-3 gap-6\">\n*   <!-- 24px gap between grid items -->\n*   <div>Item 1</div>\n*   <div>Item 2</div>\n*   <div>Item 3</div>\n* </div>\n*\n* Flex Layout with Different Gaps:\n* <div class=\"flex gap-x-4 gap-y-2\">\n*   <!-- 16px horizontal gap, 8px vertical gap -->\n*   <div>Item 1</div>\n*   <div>Item 2</div>\n* </div>\n*\n* Card with Padding:\n* <div class=\"bg-white p-6 rounded-lg\">\n*   <!-- 24px padding on all sides -->\n*   <h2 class=\"mb-4\">Card Title</h2>\n*   <p>Card content with bottom margin</p>\n* </div>\n*\n* Centered Container:\n* <div class=\"max-w-4xl mx-auto px-4\">\n*   <!-- Horizontally centered with side padding -->\n*   <h1>Page Title</h1>\n* </div>\n*\n* Overlapping Elements:\n* <div class=\"relative\">\n*   <img src=\"background.jpg\" alt=\"Background\">\n*   <div class=\"absolute -mt-8 bg-white p-4\">\n*     <!-- Overlaps background by 32px -->\n*     <h2>Overlapping Content</h2>\n*   </div>\n* </div>\n*\n* Responsive Spacing:\n* <div class=\"p-4 md:p-6 lg:p-8\">\n*   <!-- 16px on mobile, 24px on tablet, 32px on desktop -->\n*   <h1>Responsive Padding</h1>\n* </div>\n*\n* BROWSER SUPPORT:\n* - Gap Property: Chrome 84+, Firefox 63+, Safari 14.1+\n* - Margin/Padding: All browsers\n* - CSS Custom Properties: All modern browsers (IE 11+ with fallbacks)\n* - Flexbox Gap: Chrome 84+, Firefox 63+, Safari 14.1+\n* - Grid Gap: All browsers with CSS Grid support\n*\n* PERFORMANCE NOTES:\n* - Gap properties are more performant than margin-based spacing\n* - CSS custom properties enable efficient theming\n* - Utility classes reduce CSS specificity conflicts\n* - Consistent spacing scale improves visual rhythm\n* - Negative margins should be used sparingly for performance\n*\n* ACCESSIBILITY:\n* - Adequate spacing improves readability and usability\n* - Consistent spacing creates predictable layouts\n* - Sufficient padding improves touch target sizes\n* - Proper spacing helps with focus indicators\n* - Consider spacing for users with motor impairments\n*\n* INTEGRATION:\n* - Works seamlessly with layout/grid-system.css for grid gaps\n* - Compatible with layout/flex-layouts.css for flex gaps\n* - Enhanced by layout/responsive-utilities.css for responsive spacing\n* - Supports layout/containers.css for container padding\n* - Integrates with design token system for consistent theming\n*\n* DESIGN TOKENS:\n* Spacing utilities are based on design tokens:\n* :root {\n  *   --spacing-0: 0;\n  *   --spacing-1: 0.25rem;\n  *   --spacing-2: 0.5rem;\n  *   --spacing-3: 0.75rem;\n  *   --spacing-4: 1rem;\n  *   --spacing-5: 1.25rem;\n  *   --spacing-6: 1.5rem;\n  *   --spacing-8: 2rem;\n  *   --spacing-10: 2.5rem;\n  *   --spacing-12: 3rem;\n  *   --spacing-16: 4rem;\n  *   --spacing-20: 5rem;\n  *   --spacing-24: 6rem;\n  *   --spacing-32: 8rem;\n  * }\n  *\n  * BEST PRACTICES:\n  * - Use gap utilities for layout spacing (grid/flex)\n  * - Use margin utilities for component spacing\n  * - Use padding utilities for internal component spacing\n  * - Prefer consistent spacing scale over arbitrary values\n  * - Use responsive spacing for better mobile experience\n  * - Avoid excessive negative margins that can break layouts\n  * - Test spacing across different screen sizes\n  * - Consider spacing in relation to typography scale\n  *\n  * DEBUGGING:\n  * Add temporary backgrounds to debug spacing:\n  * .debug-spacing * {\n    *   background: rgba(255, 0, 0, 0.1) !important;\n    *   outline: 1px solid red !important;\n    * }\n    *\n    * MIGRATION:\n    * From older spacing systems:\n    * - .margin-small → .m-2\n    * - .padding-large → .p-8\n    * - .no-margin → .m-0\n    * - .center → .mx-auto\n    */\n\n    @layer layout.spacing {\n/* ================= GAP UTILITIES ================= */\n\n/* Gap für Grid- und Flex-Layouts */\n      .gap-0 { gap: 0; }\n\n      .gap-1 { gap: 0.25rem; }\n\n      .gap-2 { gap: 0.5rem; }\n\n      .gap-3 { gap: 0.75rem; }\n\n      .gap-4 { gap: 1rem; }\n\n      .gap-5 { gap: 1.25rem; }\n\n      .gap-6 { gap: 1.5rem; }\n\n      .gap-8 { gap: 2rem; }\n\n      .gap-10 { gap: 2.5rem; }\n\n      .gap-12 { gap: 3rem; }\n\n      .gap-16 { gap: 4rem; }\n\n      .gap-20 { gap: 5rem; }\n\n      .gap-24 { gap: 6rem; }\n\n      .gap-32 { gap: 8rem; }\n\n/* Horizontale Gaps (column-gap) */\n      .gap-x-0 { column-gap: 0; }\n\n      .gap-x-1 { column-gap: 0.25rem; }\n\n      .gap-x-2 { column-gap: 0.5rem; }\n\n      .gap-x-3 { column-gap: 0.75rem; }\n\n      .gap-x-4 { column-gap: 1rem; }\n\n      .gap-x-5 { column-gap: 1.25rem; }\n\n      .gap-x-6 { column-gap: 1.5rem; }\n\n      .gap-x-8 { column-gap: 2rem; }\n\n      .gap-x-10 { column-gap: 2.5rem; }\n\n      .gap-x-12 { column-gap: 3rem; }\n\n      .gap-x-16 { column-gap: 4rem; }\n\n      .gap-x-20 { column-gap: 5rem; }\n\n      .gap-x-24 { column-gap: 6rem; }\n\n      .gap-x-32 { column-gap: 8rem; }\n\n/* Vertikale Gaps (row-gap) */\n      .gap-y-0 { row-gap: 0; }\n\n      .gap-y-1 { row-gap: 0.25rem; }\n\n      .gap-y-2 { row-gap: 0.5rem; }\n\n      .gap-y-3 { row-gap: 0.75rem; }\n\n      .gap-y-4 { row-gap: 1rem; }\n\n      .gap-y-5 { row-gap: 1.25rem; }\n\n      .gap-y-6 { row-gap: 1.5rem; }\n\n      .gap-y-8 { row-gap: 2rem; }\n\n      .gap-y-10 { row-gap: 2.5rem; }\n\n      .gap-y-12 { row-gap: 3rem; }\n\n      .gap-y-16 { row-gap: 4rem; }\n\n      .gap-y-20 { row-gap: 5rem; }\n\n      .gap-y-24 { row-gap: 6rem; }\n\n      .gap-y-32 { row-gap: 8rem; }\n\n/* ================= MARGIN UTILITIES ================= */\n\n/* Margin in alle Richtungen */\n      .m-0 { margin: 0; }\n\n      .m-1 { margin: 0.25rem; }\n\n      .m-2 { margin: 0.5rem; }\n\n      .m-3 { margin: 0.75rem; }\n\n      .m-4 { margin: 1rem; }\n\n      .m-5 { margin: 1.25rem; }\n\n      .m-6 { margin: 1.5rem; }\n\n      .m-8 { margin: 2rem; }\n\n      .m-10 { margin: 2.5rem; }\n\n      .m-12 { margin: 3rem; }\n\n      .m-16 { margin: 4rem; }\n\n      .m-20 { margin: 5rem; }\n\n      .m-24 { margin: 6rem; }\n\n      .m-32 { margin: 8rem; }\n\n      .m-auto { margin: auto; }\n\n/* Horizontale Margins */\n      .mx-0 { margin-left: 0%; margin-right: 0%; }\n\n      .mx-1 { margin-left: 0%.25rem; margin-right: 0%.25rem; }\n\n      .mx-2 { margin-left: 0%.5rem; margin-right: 0%.5rem; }\n\n      .mx-3 { margin-left: 0%.75rem; margin-right: 0%.75rem; }\n\n      .mx-4 { margin-left: 1rem; margin-right: 1rem; }\n\n      .mx-5 { margin-left: 1%.25rem; margin-right: 1%.25rem; }\n\n      .mx-6 { margin-left: 1%.5rem; margin-right: 1%.5rem; }\n\n      .mx-8 { margin-left: 2rem; margin-right: 2rem; }\n\n      .mx-10 { margin-left: 2%.5rem; margin-right: 2%.5rem; }\n\n      .mx-12 { margin-left: 3rem; margin-right: 3rem; }\n\n      .mx-16 { margin-left: 4rem; margin-right: 4rem; }\n\n      .mx-20 { margin-left: 5rem; margin-right: 5rem; }\n\n      .mx-24 { margin-left: 6rem; margin-right: 6rem; }\n\n      .mx-32 { margin-left: 8rem; margin-right: 8rem; }\n\n      .mx-auto { margin-left: auto; margin-right: auto; }\n\n/* Vertikale Margins */\n      .my-0 { margin-bottom: 0%; margin-top: 0%; }\n\n      .my-1 { margin-bottom: 0%.25rem; margin-top: 0%.25rem; }\n\n      .my-2 { margin-bottom: 0%.5rem; margin-top: 0%.5rem; }\n\n      .my-3 { margin-bottom: 0%.75rem; margin-top: 0%.75rem; }\n\n      .my-4 { margin-bottom: 1rem; margin-top: 1rem; }\n\n      .my-5 { margin-bottom: 1%.25rem; margin-top: 1%.25rem; }\n\n      .my-6 { margin-bottom: 1%.5rem; margin-top: 1%.5rem; }\n\n      .my-8 { margin-bottom: 2rem; margin-top: 2rem; }\n\n      .my-10 { margin-bottom: 2%.5rem; margin-top: 2%.5rem; }\n\n      .my-12 { margin-bottom: 3rem; margin-top: 3rem; }\n\n      .my-16 { margin-bottom: 4rem; margin-top: 4rem; }\n\n      .my-20 { margin-bottom: 5rem; margin-top: 5rem; }\n\n      .my-24 { margin-bottom: 6rem; margin-top: 6rem; }\n\n      .my-32 { margin-bottom: 8rem; margin-top: 8rem; }\n\n      .my-auto { margin-bottom: auto; margin-top: auto; }\n\n/* Einzelne Margin-Richtungen */\n      .mt-0 { margin-top: 0%; }\n\n      .mt-1 { margin-top: 0%.25rem; }\n\n      .mt-2 { margin-top: 0%.5rem; }\n\n      .mt-3 { margin-top: 0%.75rem; }\n\n      .mt-4 { margin-top: 1rem; }\n\n      .mt-5 { margin-top: 1%.25rem; }\n\n      .mt-6 { margin-top: 1%.5rem; }\n\n      .mt-8 { margin-top: 2rem; }\n\n      .mt-10 { margin-top: 2%.5rem; }\n\n      .mt-12 { margin-top: 3rem; }\n\n      .mt-16 { margin-top: 4rem; }\n\n      .mt-20 { margin-top: 5rem; }\n\n      .mt-24 { margin-top: 6rem; }\n\n      .mt-32 { margin-top: 8rem; }\n\n      .mt-auto { margin-top: auto; }\n\n      .mr-0 { margin-right: 0%; }\n\n      .mr-1 { margin-right: 0%.25rem; }\n\n      .mr-2 { margin-right: 0%.5rem; }\n\n      .mr-3 { margin-right: 0%.75rem; }\n\n      .mr-4 { margin-right: 1rem; }\n\n      .mr-5 { margin-right: 1%.25rem; }\n\n      .mr-6 { margin-right: 1%.5rem; }\n\n      .mr-8 { margin-right: 2rem; }\n\n      .mr-10 { margin-right: 2%.5rem; }\n\n      .mr-12 { margin-right: 3rem; }\n\n      .mr-16 { margin-right: 4rem; }\n\n      .mr-20 { margin-right: 5rem; }\n\n      .mr-24 { margin-right: 6rem; }\n\n      .mr-32 { margin-right: 8rem; }\n\n      .mr-auto { margin-right: auto; }\n\n      .mb-0 { margin-bottom: 0%; }\n\n      .mb-1 { margin-bottom: 0%.25rem; }\n\n      .mb-2 { margin-bottom: 0%.5rem; }\n\n      .mb-3 { margin-bottom: 0%.75rem; }\n\n      .mb-4 { margin-bottom: 1rem; }\n\n      .mb-5 { margin-bottom: 1%.25rem; }\n\n      .mb-6 { margin-bottom: 1%.5rem; }\n\n      .mb-8 { margin-bottom: 2rem; }\n\n      .mb-10 { margin-bottom: 2%.5rem; }\n\n      .mb-12 { margin-bottom: 3rem; }\n\n      .mb-16 { margin-bottom: 4rem; }\n\n      .mb-20 { margin-bottom: 5rem; }\n\n      .mb-24 { margin-bottom: 6rem; }\n\n      .mb-32 { margin-bottom: 8rem; }\n\n      .mb-auto { margin-bottom: auto; }\n\n      .ml-0 { margin-left: 0%; }\n\n      .ml-1 { margin-left: 0%.25rem; }\n\n      .ml-2 { margin-left: 0%.5rem; }\n\n      .ml-3 { margin-left: 0%.75rem; }\n\n      .ml-4 { margin-left: 1rem; }\n\n      .ml-5 { margin-left: 1%.25rem; }\n\n      .ml-6 { margin-left: 1%.5rem; }\n\n      .ml-8 { margin-left: 2rem; }\n\n      .ml-10 { margin-left: 2%.5rem; }\n\n      .ml-12 { margin-left: 3rem; }\n\n      .ml-16 { margin-left: 4rem; }\n\n      .ml-20 { margin-left: 5rem; }\n\n      .ml-24 { margin-left: 6rem; }\n\n      .ml-32 { margin-left: 8rem; }\n\n      .ml-auto { margin-left: auto; }\n\n/* ================= NEGATIVE MARGINS ================= */\n\n/* Negative Margins für Überlappungen */\n      .-m-1 { margin: -0.25rem; }\n\n      .-m-2 { margin: -0.5rem; }\n\n      .-m-3 { margin: -0.75rem; }\n\n      .-m-4 { margin: -1rem; }\n\n      .-m-5 { margin: -1.25rem; }\n\n      .-m-6 { margin: -1.5rem; }\n\n      .-m-8 { margin: -2rem; }\n\n      .-m-10 { margin: -2.5rem; }\n\n      .-m-12 { margin: -3rem; }\n\n      .-m-16 { margin: -4rem; }\n\n      .-m-20 { margin: -5rem; }\n\n      .-m-24 { margin: -6rem; }\n\n      .-m-32 { margin: -8rem; }\n\n/* Negative horizontale Margins */\n      .-mx-1 { margin-left: -0.25rem; margin-right: -0.25rem; }\n\n      .-mx-2 { margin-left: -0.5rem; margin-right: -0.5rem; }\n\n      .-mx-3 { margin-left: -0.75rem; margin-right: -0.75rem; }\n\n      .-mx-4 { margin-left: -1rem; margin-right: -1rem; }\n\n      .-mx-5 { margin-left: -1.25rem; margin-right: -1.25rem; }\n\n      .-mx-6 { margin-left: -1.5rem; margin-right: -1.5rem; }\n\n      .-mx-8 { margin-left: -2rem; margin-right: -2rem; }\n\n      .-mx-10 { margin-left: -2.5rem; margin-right: -2.5rem; }\n\n      .-mx-12 { margin-left: -3rem; margin-right: -3rem; }\n\n      .-mx-16 { margin-left: -4rem; margin-right: -4rem; }\n\n      .-mx-20 { margin-left: -5rem; margin-right: -5rem; }\n\n      .-mx-24 { margin-left: -6rem; margin-right: -6rem; }\n\n      .-mx-32 { margin-left: -8rem; margin-right: -8rem; }\n\n/* Negative vertikale Margins */\n      .-my-1 { margin-bottom: -0.25rem; margin-top: -0.25rem; }\n\n      .-my-2 { margin-bottom: -0.5rem; margin-top: -0.5rem; }\n\n      .-my-3 { margin-bottom: -0.75rem; margin-top: -0.75rem; }\n\n      .-my-4 { margin-bottom: -1rem; margin-top: -1rem; }\n\n      .-my-5 { margin-bottom: -1.25rem; margin-top: -1.25rem; }\n\n      .-my-6 { margin-bottom: -1.5rem; margin-top: -1.5rem; }\n\n      .-my-8 { margin-bottom: -2rem; margin-top: -2rem; }\n\n      .-my-10 { margin-bottom: -2.5rem; margin-top: -2.5rem; }\n\n      .-my-12 { margin-bottom: -3rem; margin-top: -3rem; }\n\n      .-my-16 { margin-bottom: -4rem; margin-top: -4rem; }\n\n      .-my-20 { margin-bottom: -5rem; margin-top: -5rem; }\n\n      .-my-24 { margin-bottom: -6rem; margin-top: -6rem; }\n\n      .-my-32 { margin-bottom: -8rem; margin-top: -8rem; }\n\n/* Einzelne negative Margins */\n      .-mt-1 { margin-top: -0.25rem; }\n\n      .-mt-2 { margin-top: -0.5rem; }\n\n      .-mt-3 { margin-top: -0.75rem; }\n\n      .-mt-4 { margin-top: -1rem; }\n\n      .-mt-5 { margin-top: -1.25rem; }\n\n      .-mt-6 { margin-top: -1.5rem; }\n\n      .-mt-8 { margin-top: -2rem; }\n\n      .-mt-10 { margin-top: -2.5rem; }\n\n      .-mt-12 { margin-top: -3rem; }\n\n      .-mt-16 { margin-top: -4rem; }\n\n      .-mt-20 { margin-top: -5rem; }\n\n      .-mt-24 { margin-top: -6rem; }\n\n      .-mt-32 { margin-top: -8rem; }\n\n      .-mr-1 { margin-right: -0.25rem; }\n\n      .-mr-2 { margin-right: -0.5rem; }\n\n      .-mr-3 { margin-right: -0.75rem; }\n\n      .-mr-4 { margin-right: -1rem; }\n\n      .-mr-5 { margin-right: -1.25rem; }\n\n      .-mr-6 { margin-right: -1.5rem; }\n\n      .-mr-8 { margin-right: -2rem; }\n\n      .-mr-10 { margin-right: -2.5rem; }\n\n      .-mr-12 { margin-right: -3rem; }\n\n      .-mr-16 { margin-right: -4rem; }\n\n      .-mr-20 { margin-right: -5rem; }\n\n      .-mr-24 { margin-right: -6rem; }\n\n      .-mr-32 { margin-right: -8rem; }\n\n      .-mb-1 { margin-bottom: -0.25rem; }\n\n      .-mb-2 { margin-bottom: -0.5rem; }\n\n      .-mb-3 { margin-bottom: -0.75rem; }\n\n      .-mb-4 { margin-bottom: -1rem; }\n\n      .-mb-5 { margin-bottom: -1.25rem; }\n\n      .-mb-6 { margin-bottom: -1.5rem; }\n\n      .-mb-8 { margin-bottom: -2rem; }\n\n      .-mb-10 { margin-bottom: -2.5rem; }\n\n      .-mb-12 { margin-bottom: -3rem; }\n\n      .-mb-16 { margin-bottom: -4rem; }\n\n      .-mb-20 { margin-bottom: -5rem; }\n\n      .-mb-24 { margin-bottom: -6rem; }\n\n      .-mb-32 { margin-bottom: -8rem; }\n\n      .-ml-1 { margin-left: -0.25rem; }\n\n      .-ml-2 { margin-left: -0.5rem; }\n\n      .-ml-3 { margin-left: -0.75rem; }\n\n      .-ml-4 { margin-left: -1rem; }\n\n      .-ml-5 { margin-left: -1.25rem; }\n\n      .-ml-6 { margin-left: -1.5rem; }\n\n      .-ml-8 { margin-left: -2rem; }\n\n      .-ml-10 { margin-left: -2.5rem; }\n\n      .-ml-12 { margin-left: -3rem; }\n\n      .-ml-16 { margin-left: -4rem; }\n\n      .-ml-20 { margin-left: -5rem; }\n\n      .-ml-24 { margin-left: -6rem; }\n\n      .-ml-32 { margin-left: -8rem; }\n\n/* ================= PADDING UTILITIES ================= */\n\n/* Padding in alle Richtungen */\n      .p-0 { padding: 0; }\n\n      .p-1 { padding: 0.25rem; }\n\n      .p-2 { padding: 0.5rem; }\n\n      .p-3 { padding: 0.75rem; }\n\n      .p-4 { padding: 1rem; }\n\n      .p-5 { padding: 1.25rem; }\n\n      .p-6 { padding: 1.5rem; }\n\n      .p-8 { padding: 2rem; }\n\n      .p-10 { padding: 2.5rem; }\n\n      .p-12 { padding: 3rem; }\n\n      .p-16 { padding: 4rem; }\n\n      .p-20 { padding: 5rem; }\n\n      .p-24 { padding: 6rem; }\n\n      .p-32 { padding: 8rem; }\n\n/* Horizontales Padding */\n      .px-0 { padding-left: 0%; padding-right: 0%; }\n\n      .px-1 { padding-left: 0%.25rem; padding-right: 0%.25rem; }\n\n      .px-2 { padding-left: 0%.5rem; padding-right: 0%.5rem; }\n\n      .px-3 { padding-left: 0%.75rem; padding-right: 0%.75rem; }\n\n      .px-4 { padding-left: 1rem; padding-right: 1rem; }\n\n      .px-5 { padding-left: 1%.25rem; padding-right: 1%.25rem; }\n\n      .px-6 { padding-left: 1%.5rem; padding-right: 1%.5rem; }\n\n      .px-8 { padding-left: 2rem; padding-right: 2rem; }\n\n      .px-10 { padding-left: 2%.5rem; padding-right: 2%.5rem; }\n\n      .px-12 { padding-left: 3rem; padding-right: 3rem; }\n\n      .px-16 { padding-left: 4rem; padding-right: 4rem; }\n\n      .px-20 { padding-left: 5rem; padding-right: 5rem; }\n\n      .px-24 { padding-left: 6rem; padding-right: 6rem; }\n\n      .px-32 { padding-left: 8rem; padding-right: 8rem; }\n\n/* Vertikales Padding */\n      .py-0 { padding-bottom: 0%; padding-top: 0%; }\n\n      .py-1 { padding-bottom: 0%.25rem; padding-top: 0%.25rem; }\n\n      .py-2 { padding-bottom: 0%.5rem; padding-top: 0%.5rem; }\n\n      .py-3 { padding-bottom: 0%.75rem; padding-top: 0%.75rem; }\n\n      .py-4 { padding-bottom: 1rem; padding-top: 1rem; }\n\n      .py-5 { padding-bottom: 1%.25rem; padding-top: 1%.25rem; }\n\n      .py-6 { padding-bottom: 1%.5rem; padding-top: 1%.5rem; }\n\n      .py-8 { padding-bottom: 2rem; padding-top: 2rem; }\n\n      .py-10 { padding-bottom: 2%.5rem; padding-top: 2%.5rem; }\n\n      .py-12 { padding-bottom: 3rem; padding-top: 3rem; }\n\n      .py-16 { padding-bottom: 4rem; padding-top: 4rem; }\n\n      .py-20 { padding-bottom: 5rem; padding-top: 5rem; }\n\n      .py-24 { padding-bottom: 6rem; padding-top: 6rem; }\n\n      .py-32 { padding-bottom: 8rem; padding-top: 8rem; }\n\n/* Einzelne Padding-Richtungen */\n      .pt-0 { padding-top: 0%; }\n\n      .pt-1 { padding-top: 0%.25rem; }\n\n      .pt-2 { padding-top: 0%.5rem; }\n\n      .pt-3 { padding-top: 0%.75rem; }\n\n      .pt-4 { padding-top: 1rem; }\n\n      .pt-5 { padding-top: 1%.25rem; }\n\n      .pt-6 { padding-top: 1%.5rem; }\n\n      .pt-8 { padding-top: 2rem; }\n\n      .pt-10 { padding-top: 2%.5rem; }\n\n      .pt-12 { padding-top: 3rem; }\n\n      .pt-16 { padding-top: 4rem; }\n\n      .pt-20 { padding-top: 5rem; }\n\n      .pt-24 { padding-top: 6rem; }\n\n      .pt-32 { padding-top: 8rem; }\n\n      .pr-0 { padding-right: 0%; }\n\n      .pr-1 { padding-right: 0%.25rem; }\n\n      .pr-2 { padding-right: 0%.5rem; }\n\n      .pr-3 { padding-right: 0%.75rem; }\n\n      .pr-4 { padding-right: 1rem; }\n\n      .pr-5 { padding-right: 1%.25rem; }\n\n      .pr-6 { padding-right: 1%.5rem; }\n\n      .pr-8 { padding-right: 2rem; }\n\n      .pr-10 { padding-right: 2%.5rem; }\n\n      .pr-12 { padding-right: 3rem; }\n\n      .pr-16 { padding-right: 4rem; }\n\n      .pr-20 { padding-right: 5rem; }\n\n      .pr-24 { padding-right: 6rem; }\n\n      .pr-32 { padding-right: 8rem; }\n\n      .pb-0 { padding-bottom: 0%; }\n\n      .pb-1 { padding-bottom: 0%.25rem; }\n\n      .pb-2 { padding-bottom: 0%.5rem; }\n\n      .pb-3 { padding-bottom: 0%.75rem; }\n\n      .pb-4 { padding-bottom: 1rem; }\n\n      .pb-5 { padding-bottom: 1%.25rem; }\n\n      .pb-6 { padding-bottom: 1%.5rem; }\n\n      .pb-8 { padding-bottom: 2rem; }\n\n      .pb-10 { padding-bottom: 2%.5rem; }\n\n      .pb-12 { padding-bottom: 3rem; }\n\n      .pb-16 { padding-bottom: 4rem; }\n\n      .pb-20 { padding-bottom: 5rem; }\n\n      .pb-24 { padding-bottom: 6rem; }\n\n      .pb-32 { padding-bottom: 8rem; }\n\n      .pl-0 { padding-left: 0%; }\n\n      .pl-1 { padding-left: 0%.25rem; }\n\n      .pl-2 { padding-left: 0%.5rem; }\n\n      .pl-3 { padding-left: 0%.75rem; }\n\n      .pl-4 { padding-left: 1rem; }\n\n      .pl-5 { padding-left: 1%.25rem; }\n\n      .pl-6 { padding-left: 1%.5rem; }\n\n      .pl-8 { padding-left: 2rem; }\n\n      .pl-10 { padding-left: 2%.5rem; }\n\n      .pl-12 { padding-left: 3rem; }\n\n      .pl-16 { padding-left: 4rem; }\n\n      .pl-20 { padding-left: 5rem; }\n\n      .pl-24 { padding-left: 6rem; }\n\n      .pl-32 { padding-left: 8rem; }\n    }\n\n/* Datei: layout/responsive.css */\n/**\n    * Responsive Display & Visibility System\n    *\n    * A comprehensive responsive utility system for controlling element visibility,\n    * display properties, and responsive behavior across different screen sizes.\n    * This system provides mobile-first responsive design utilities with semantic\n    * class names and consistent breakpoint management.\n    *\n    * @layer layout.responsive\n    * @version 2.0\n    * @author Design System Team\n    *\n    * FEATURES:\n    * - Mobile-first responsive design approach\n    * - Display utilities for all CSS display values\n    * - Visibility controls for showing/hiding elements\n    * - Responsive variants for all major breakpoints\n    * - Print-specific utilities for print media\n    * - Screen reader utilities for accessibility\n    * - Consistent breakpoint system across all utilities\n    * - Performance-optimized CSS with minimal specificity\n    *\n    * BREAKPOINT SYSTEM:\n    * - Base: 0 and up (mobile-first)\n    * - sm: 640px and up (small tablets)\n    * - md: 768px and up (tablets)\n    * - lg: 1024px and up (laptops)\n    * - xl: 1280px and up (desktops)\n    * - 2xl: 1536px and up (large desktops)\n    *\n    * DISPLAY UTILITIES:\n    * - .block: Block-level element\n    * - .inline-block: Inline block element\n    * - .inline: Inline element\n    * - .flex: Flexbox container\n    * - .inline-flex: Inline flexbox container\n    * - .grid: CSS Grid container\n    * - .inline-grid: Inline grid container\n    * - .table: Table display\n    * - .table-cell: Table cell display\n    * - .table-row: Table row display\n    * - .hidden: Hide element (display: none)\n    *\n    * VISIBILITY UTILITIES:\n    * - .visible: Element is visible\n    * - .invisible: Element is invisible but takes space\n    * - .sr-only: Screen reader only (visually hidden)\n    * - .not-sr-only: Remove screen reader only styling\n    *\n    * RESPONSIVE VARIANTS:\n    * All display utilities are available with responsive prefixes:\n    * - sm:block, md:flex, lg:grid, xl:hidden, etc.\n    * - Example: .hidden.md:block (hidden on mobile, block on tablet+)\n    *\n    * PRINT UTILITIES:\n    * - .print:block: Show as block in print\n    * - .print:hidden: Hide in print\n    * - .print:inline: Show as inline in print\n    *\n    * USAGE EXAMPLES:\n    *\n    * Responsive Navigation:\n    * <nav class=\"hidden md:block\">\n    *   <!-- Hidden on mobile, visible on tablet+ -->\n    *   <ul>Navigation items</ul>\n    * </nav>\n    *\n    * Mobile Menu Toggle:\n    * <button class=\"block md:hidden\">\n    *   <!-- Visible on mobile, hidden on tablet+ -->\n    *   Menu Toggle\n    * </button>\n    *\n    * Responsive Layout:\n    * <div class=\"block lg:flex\">\n    *   <!-- Block layout on mobile/tablet, flex on desktop -->\n    *   <main class=\"lg:flex-1\">Content</main>\n    *   <aside class=\"lg:flex-none\">Sidebar</aside>\n    * </div>\n    *\n    * Progressive Enhancement:\n    * <div class=\"grid-fallback block sm:grid\">\n    *   <!-- Block fallback, grid on small screens+ -->\n    *   <div>Item 1</div>\n    *   <div>Item 2</div>\n    * </div>\n    *\n    * Accessibility:\n    * <span class=\"sr-only\">\n    *   Screen reader description\n    * </span>\n    * <button aria-describedby=\"description\">\n    *   <span class=\"sr-only\">Close dialog</span>\n    *   ×\n    * </button>\n    *\n    * Print Optimization:\n    * <div class=\"print:hidden\">\n    *   <!-- Hidden when printing -->\n    *   <button>Interactive element</button>\n    * </div>\n    *\n    * <div class=\"hidden print:block\">\n    *   <!-- Only visible when printing -->\n    *   <p>Print-specific content</p>\n    * </div>\n    *\n    * BROWSER SUPPORT:\n    * - CSS Grid: All modern browsers (IE 11+ with -ms- prefix)\n    * - Flexbox: All modern browsers (IE 11+ with -ms- prefix)\n    * - Media Queries: All modern browsers (IE 9+)\n    * - CSS Custom Properties: All modern browsers (IE 11+ with fallbacks)\n    *\n    * PERFORMANCE NOTES:\n    * - Mobile-first approach reduces CSS payload for mobile devices\n    * - Uses min-width media queries for better performance\n    * - Minimal CSS specificity prevents cascade conflicts\n    * - Print styles are separated to avoid render blocking\n    *\n    * ACCESSIBILITY:\n    * - .sr-only provides content for screen readers while hiding visually\n    * - Maintains semantic HTML structure regardless of display changes\n    * - Responsive visibility changes don't affect tab order\n    * - Print utilities ensure important content is available in print\n    *\n    * INTEGRATION:\n    * - Works seamlessly with layout/grid-system.css\n    * - Compatible with layout/flex-layouts.css\n    * - Enhanced by layout/responsive-utilities.css for layout-specific responsive variants\n    * - Supports layout/containers.css responsive containers\n    *\n    * BEST PRACTICES:\n    * - Use mobile-first approach: start with mobile styles, enhance for larger screens\n    * - Combine with semantic HTML for better accessibility\n    * - Test responsive behavior across all target breakpoints\n    * - Use .sr-only for important context that should be available to screen readers\n    * - Consider print styles for content-heavy applications\n    * - Avoid excessive responsive variants that create maintenance overhead\n    *\n    * DEBUGGING:\n    * Add temporary borders to debug responsive layouts:\n    * .debug * { border: 1px solid red !important; }\n    *\n    * MIGRATION:\n    * From older responsive systems:\n    * - .show-sm → .hidden.sm:block\n    * - .hide-md → .block.md:hidden\n    * - .visible-lg → .hidden.lg:block\n    */\n\n    @layer layout.responsive {\n/* ================= DISPLAY UTILITIES ================= */\n\n/* Basis-Display-Eigenschaften */\n      .block { display: block; }\n\n      .inline-block { display: inline-block; }\n\n      .inline { display: inline; }\n\n      .flex { display: flex; }\n\n      .inline-flex { display: inline-flex; }\n\n      .grid { display: grid; }\n\n      .inline-grid { display: inline-grid; }\n\n      .table { display: table; }\n\n      .table-cell { display: table-cell; }\n\n      .table-row { display: table-row; }\n\n      .hidden { display: none; }\n\n/* ================= VISIBILITY UTILITIES ================= */\n\n/* Sichtbarkeits-Kontrollen */\n      .visible { visibility: visible; }\n\n      .invisible { visibility: hidden; }\n\n/* Screen Reader Only - für Barrierefreiheit */\n      .sr-only {\n        border: 0;\n        clip: rect(0, 0, 0, 0);\n        height: 1px;\n        margin: -1px;\n        overflow: hidden;\n        padding: 0;\n        position: absolute;\n        white-space: nowrap;\n        width: 1px;\n      }\n\n      .not-sr-only {\n        border: initial;\n        clip: initial;\n        height: initial;\n        margin: initial;\n        overflow: initial;\n        padding: initial;\n        position: initial;\n        white-space: initial;\n        width: initial;\n      }\n\n/* ================= RESPONSIVE BREAKPOINTS ================= */\n\n/* Small screens (640px and up) */\n      @media (min-width: 640px) {\n        .sm\\:block { display: block; }\n\n        .sm\\:inline-block { display: inline-block; }\n\n        .sm\\:inline { display: inline; }\n\n        .sm\\:flex { display: flex; }\n\n        .sm\\:inline-flex { display: inline-flex; }\n\n        .sm\\:grid { display: grid; }\n\n        .sm\\:inline-grid { display: inline-grid; }\n\n        .sm\\:table { display: table; }\n\n        .sm\\:table-cell { display: table-cell; }\n\n        .sm\\:table-row { display: table-row; }\n\n        .sm\\:hidden { display: none; }\n\n        .sm\\:visible { visibility: visible; }\n\n        .sm\\:invisible { visibility: hidden; }\n      }\n\n/* Medium screens (768px and up) */\n      @media (min-width: 768px) {\n        .md\\:block { display: block; }\n\n        .md\\:inline-block { display: inline-block; }\n\n        .md\\:inline { display: inline; }\n\n        .md\\:flex { display: flex; }\n\n        .md\\:inline-flex { display: inline-flex; }\n\n        .md\\:grid { display: grid; }\n\n        .md\\:inline-grid { display: inline-grid; }\n\n        .md\\:table { display: table; }\n\n        .md\\:table-cell { display: table-cell; }\n\n        .md\\:table-row { display: table-row; }\n\n        .md\\:hidden { display: none; }\n\n        .md\\:visible { visibility: visible; }\n\n        .md\\:invisible { visibility: hidden; }\n      }\n\n/* Large screens (1024px and up) */\n      @media (min-width: 1024px) {\n        .lg\\:block { display: block; }\n\n        .lg\\:inline-block { display: inline-block; }\n\n        .lg\\:inline { display: inline; }\n\n        .lg\\:flex { display: flex; }\n\n        .lg\\:inline-flex { display: inline-flex; }\n\n        .lg\\:grid { display: grid; }\n\n        .lg\\:inline-grid { display: inline-grid; }\n\n        .lg\\:table { display: table; }\n\n        .lg\\:table-cell { display: table-cell; }\n\n        .lg\\:table-row { display: table-row; }\n\n        .lg\\:hidden { display: none; }\n\n        .lg\\:visible { visibility: visible; }\n\n        .lg\\:invisible { visibility: hidden; }\n      }\n\n/* Extra large screens (1280px and up) */\n      @media (width >= 1280px) {\n        .xl\\:block { display: block; }\n\n        .xl\\:inline-block { display: inline-block; }\n\n        .xl\\:inline { display: inline; }\n\n        .xl\\:flex { display: flex; }\n\n        .xl\\:inline-flex { display: inline-flex; }\n\n        .xl\\:grid { display: grid; }\n\n        .xl\\:inline-grid { display: inline-grid; }\n\n        .xl\\:table { display: table; }\n\n        .xl\\:table-cell { display: table-cell; }\n\n        .xl\\:table-row { display: table-row; }\n\n        .xl\\:hidden { display: none; }\n\n        .xl\\:visible { visibility: visible; }\n\n        .xl\\:invisible { visibility: hidden; }\n      }\n\n/* 2X large screens (1536px and up) */\n      @media (width >= 1536px) {\n        .\\32xl\\:block { display: block; }\n\n        .\\32xl\\:inline-block { display: inline-block; }\n\n        .\\32xl\\:inline { display: inline; }\n\n        .\\32xl\\:flex { display: flex; }\n\n        .\\32xl\\:inline-flex { display: inline-flex; }\n\n        .\\32xl\\:grid { display: grid; }\n\n        .\\32xl\\:inline-grid { display: inline-grid; }\n\n        .\\32xl\\:table { display: table; }\n\n        .\\32xl\\:table-cell { display: table-cell; }\n\n        .\\32xl\\:table-row { display: table-row; }\n\n        .\\32xl\\:hidden { display: none; }\n\n        .\\32xl\\:visible { visibility: visible; }\n\n        .\\32xl\\:invisible { visibility: hidden; }\n      }\n\n/* ================= PRINT UTILITIES ================= */\n\n/* Print-spezifische Stile */\n      @media print {\n        .print\\:block { display: block !important; }\n\n        .print\\:inline-block { display: inline-block !important; }\n\n        .print\\:inline { display: inline !important; }\n\n        .print\\:hidden { display: none !important; }\n\n        .print\\:visible { visibility: visible !important; }\n\n        .print\\:invisible { visibility: hidden !important; }\n      }\n    }\n\n/* Datei: layout/responsive-utilities.css */\n/**\n    * Responsive Layout Utilities\n    *\n    * Advanced responsive utilities specifically designed for grid and flex layouts.\n    * This system provides responsive variants of layout-specific properties that\n    * complement the base grid and flex systems with breakpoint-aware functionality.\n    *\n    * @layer layout.responsive-utilities\n    * @version 2.0\n    * @author Design System Team\n    *\n    * FEATURES:\n    * - Responsive grid column and row utilities\n    * - Responsive flexbox direction and alignment\n    * - Responsive gap and spacing controls\n    * - Mobile-first responsive design approach\n    * - Consistent breakpoint system across all utilities\n    * - Optimized CSS output with minimal redundancy\n    * - Semantic class naming for better maintainability\n    * - Performance-optimized media queries\n    *\n    * BREAKPOINT SYSTEM:\n    * - Base: 0 and up (mobile-first)\n    * - sm: 640px and up (small tablets)\n    * - md: 768px and up (tablets)\n    * - lg: 1024px and up (laptops)\n    * - xl: 1280px and up (desktops)\n    * - 2xl: 1536px and up (large desktops)\n    *\n    * RESPONSIVE GRID UTILITIES:\n    * - sm:grid-cols-{1-12}: Responsive grid columns\n    * - md:col-span-{1-12}: Responsive column spans\n    * - lg:row-span-{1-6}: Responsive row spans\n    * - xl:grid-auto-fit: Responsive auto-fit layouts\n    * - 2xl:grid-subgrid: Responsive subgrid layouts\n    *\n    * RESPONSIVE FLEX UTILITIES:\n    * - sm:flex-row: Responsive flex direction\n    * - md:flex-col: Responsive flex direction\n    * - lg:items-center: Responsive item alignment\n    * - xl:justify-between: Responsive content justification\n    * - 2xl:flex-wrap: Responsive flex wrapping\n    *\n    * RESPONSIVE SPACING:\n    * - sm:gap-{size}: Responsive gap utilities\n    * - md:space-x-{size}: Responsive horizontal spacing\n    * - lg:space-y-{size}: Responsive vertical spacing\n    *\n    * USAGE EXAMPLES:\n    *\n    * Responsive Grid Layout:\n    * <div class=\"grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4\">\n    *   <!-- 1 column on mobile, 2 on tablet, 3 on laptop, 4 on desktop -->\n    *   <div>Item 1</div>\n    *   <div>Item 2</div>\n    *   <div>Item 3</div>\n    *   <div>Item 4</div>\n    * </div>\n    *\n    * Responsive Flex Direction:\n    * <div class=\"flex flex-col md:flex-row gap-4\">\n    *   <!-- Vertical on mobile, horizontal on tablet+ -->\n    *   <main class=\"flex-1\">Main content</main>\n    *   <aside class=\"md:w-64\">Sidebar</aside>\n    * </div>\n    *\n    * Responsive Column Spans:\n    * <div class=\"grid grid-cols-12 gap-4\">\n    *   <div class=\"col-span-12 md:col-span-8 lg:col-span-9\">\n    *     <!-- Full width on mobile, 8/12 on tablet, 9/12 on laptop -->\n    *     Main content\n    *   </div>\n    *   <div class=\"col-span-12 md:col-span-4 lg:col-span-3\">\n    *     <!-- Full width on mobile, 4/12 on tablet, 3/12 on laptop -->\n    *     Sidebar\n    *   </div>\n    * </div>\n    *\n    * Responsive Alignment:\n    * <div class=\"flex flex-col items-start md:flex-row md:items-center lg:justify-between\">\n    *   <!-- Different alignment at each breakpoint -->\n    *   <h1>Title</h1>\n    *   <nav>Navigation</nav>\n    * </div>\n    *\n    * Responsive Card Grid:\n    * <div class=\"grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-4 lg:gap-6\">\n    *   <!-- Responsive columns with responsive gaps -->\n    *   <div class=\"card\">Card 1</div>\n    *   <div class=\"card\">Card 2</div>\n    *   <div class=\"card\">Card 3</div>\n    * </div>\n    *\n    * Complex Responsive Layout:\n    * <div class=\"grid grid-cols-1 lg:grid-cols-4 gap-6\">\n    *   <header class=\"col-span-1 lg:col-span-4\">Header</header>\n    *   <main class=\"col-span-1 lg:col-span-3\">Main</main>\n    *   <aside class=\"col-span-1\">Sidebar</aside>\n    *   <footer class=\"col-span-1 lg:col-span-4\">Footer</footer>\n    * </div>\n    *\n    * BROWSER SUPPORT:\n    * - CSS Grid: All modern browsers (IE 11+ with -ms- prefix)\n    * - Flexbox: All modern browsers (IE 11+ with -ms- prefix)\n    * - Media Queries: All modern browsers (IE 9+)\n    * - Gap Property: Chrome 84+, Firefox 63+, Safari 14.1+\n    * - Subgrid: Firefox 71+, Safari 16+, Chrome 117+\n    *\n    * PERFORMANCE NOTES:\n    * - Mobile-first approach reduces CSS payload for mobile devices\n    * - Uses min-width media queries for optimal performance\n    * - Consolidated media queries reduce CSS file size\n    * - Efficient selector specificity prevents cascade conflicts\n    * - Gap properties are more performant than margin utilities\n    *\n    * ACCESSIBILITY:\n    * - Responsive layouts maintain semantic HTML structure\n    * - Grid and flex layouts preserve document flow for screen readers\n    * - Responsive changes don't affect keyboard navigation order\n    * - Visual layout changes don't impact assistive technology\n    * - Ensure content remains accessible at all breakpoints\n    *\n    * INTEGRATION:\n    * - Extends layout/grid-system.css with responsive variants\n    * - Complements layout/flex-layouts.css with responsive variants\n    * - Works with layout/spacing.css for responsive spacing\n    * - Compatible with layout/containers.css for responsive containers\n    * - Enhanced by layout/responsive.css for display utilities\n    *\n    * BEST PRACTICES:\n    * - Start with mobile-first design approach\n    * - Use semantic breakpoint names (sm, md, lg, xl, 2xl)\n    * - Test layouts across all target breakpoints\n    * - Combine grid and flex utilities for complex layouts\n    * - Use consistent spacing scales across breakpoints\n    * - Avoid excessive responsive variants that create maintenance overhead\n    * - Consider performance impact of complex responsive layouts\n    *\n    * DEBUGGING:\n    * Add responsive debug utilities:\n    * .debug-responsive::before {\n      *   content: 'mobile';\n      *   position: fixed;\n      *   top: 0%;\n      *   right: 0%;\n      *   background: red;\n      *   color: white;\n      *   padding: 0.25rem;\n      * }\n      * @media (min-width: 640px) {\n        *   .debug-responsive::before { content: 'sm'; }\n        * }\n        *\n        * MIGRATION:\n        * From older responsive systems:\n        * - .col-md-6 → .col-span-6.md:col-span-6\n        * - .flex-sm-row → .flex-col.sm:flex-row\n        * - .d-lg-block → .hidden.lg:block\n        */\n\n        @layer layout.responsive-utilities {\n/* ================= RESPONSIVE GRID UTILITIES ================= */\n\n/* Small screens (640px and up) */\n          @media (min-width: 640px) {\n            .sm\\:grid-cols-1 { grid-template-columns: repeat(1, 1fr); }\n\n            .sm\\:grid-cols-2 { grid-template-columns: repeat(2, 1fr); }\n\n            .sm\\:grid-cols-3 { grid-template-columns: repeat(3, 1fr); }\n\n            .sm\\:grid-cols-4 { grid-template-columns: repeat(4, 1fr); }\n\n            .sm\\:grid-cols-6 { grid-template-columns: repeat(6, 1fr); }\n\n            .sm\\:grid-cols-12 { grid-template-columns: repeat(12, 1fr); }\n\n            .sm\\:grid-auto-fit { grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); }\n\n            .sm\\:grid-auto-fill { grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); }\n\n            .sm\\:col-span-1 { grid-column: span 1; }\n\n            .sm\\:col-span-2 { grid-column: span 2; }\n\n            .sm\\:col-span-3 { grid-column: span 3; }\n\n            .sm\\:col-span-4 { grid-column: span 4; }\n\n            .sm\\:col-span-6 { grid-column: span 6; }\n\n            .sm\\:col-span-12 { grid-column: span 12; }\n\n            .sm\\:col-span-full { grid-column: 1 / -1; }\n\n            .sm\\:row-span-1 { grid-row: span 1; }\n\n            .sm\\:row-span-2 { grid-row: span 2; }\n\n            .sm\\:row-span-3 { grid-row: span 3; }\n\n            .sm\\:row-span-4 { grid-row: span 4; }\n\n            .sm\\:row-span-5 { grid-row: span 5; }\n\n            .sm\\:row-span-6 { grid-row: span 6; }\n\n            .sm\\:row-span-full { grid-row: 1 / -1; }\n          }\n\n/* Medium screens (768px and up) */\n          @media (min-width: 768px) {\n            .md\\:grid-cols-1 { grid-template-columns: repeat(1, 1fr); }\n\n            .md\\:grid-cols-2 { grid-template-columns: repeat(2, 1fr); }\n\n            .md\\:grid-cols-3 { grid-template-columns: repeat(3, 1fr); }\n\n            .md\\:grid-cols-4 { grid-template-columns: repeat(4, 1fr); }\n\n            .md\\:grid-cols-6 { grid-template-columns: repeat(6, 1fr); }\n\n            .md\\:grid-cols-12 { grid-template-columns: repeat(12, 1fr); }\n\n            .md\\:grid-auto-fit { grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); }\n\n            .md\\:grid-auto-fill { grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); }\n\n            .md\\:col-span-1 { grid-column: span 1; }\n\n            .md\\:col-span-2 { grid-column: span 2; }\n\n            .md\\:col-span-3 { grid-column: span 3; }\n\n            .md\\:col-span-4 { grid-column: span 4; }\n\n            .md\\:col-span-6 { grid-column: span 6; }\n\n            .md\\:col-span-12 { grid-column: span 12; }\n\n            .md\\:col-span-full { grid-column: 1 / -1; }\n\n            .md\\:row-span-1 { grid-row: span 1; }\n\n            .md\\:row-span-2 { grid-row: span 2; }\n\n            .md\\:row-span-3 { grid-row: span 3; }\n\n            .md\\:row-span-4 { grid-row: span 4; }\n\n            .md\\:row-span-5 { grid-row: span 5; }\n\n            .md\\:row-span-6 { grid-row: span 6; }\n\n            .md\\:row-span-full { grid-row: 1 / -1; }\n          }\n\n/* Large screens (1024px and up) */\n          @media (min-width: 1024px) {\n            .lg\\:grid-cols-1 { grid-template-columns: repeat(1, 1fr); }\n\n            .lg\\:grid-cols-2 { grid-template-columns: repeat(2, 1fr); }\n\n            .lg\\:grid-cols-3 { grid-template-columns: repeat(3, 1fr); }\n\n            .lg\\:grid-cols-4 { grid-template-columns: repeat(4, 1fr); }\n\n            .lg\\:grid-cols-6 { grid-template-columns: repeat(6, 1fr); }\n\n            .lg\\:grid-cols-12 { grid-template-columns: repeat(12, 1fr); }\n\n            .lg\\:grid-auto-fit { grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); }\n\n            .lg\\:grid-auto-fill { grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); }\n\n            .lg\\:col-span-1 { grid-column: span 1; }\n\n            .lg\\:col-span-2 { grid-column: span 2; }\n\n            .lg\\:col-span-3 { grid-column: span 3; }\n\n            .lg\\:col-span-4 { grid-column: span 4; }\n\n            .lg\\:col-span-6 { grid-column: span 6; }\n\n            .lg\\:col-span-12 { grid-column: span 12; }\n\n            .lg\\:col-span-full { grid-column: 1 / -1; }\n\n            .lg\\:row-span-1 { grid-row: span 1; }\n\n            .lg\\:row-span-2 { grid-row: span 2; }\n\n            .lg\\:row-span-3 { grid-row: span 3; }\n\n            .lg\\:row-span-4 { grid-row: span 4; }\n\n            .lg\\:row-span-5 { grid-row: span 5; }\n\n            .lg\\:row-span-6 { grid-row: span 6; }\n\n            .lg\\:row-span-full { grid-row: 1 / -1; }\n          }\n\n/* Extra large screens (1280px and up) */\n          @media (width >= 1280px) {\n            .xl\\:grid-cols-1 { grid-template-columns: repeat(1, 1fr); }\n\n            .xl\\:grid-cols-2 { grid-template-columns: repeat(2, 1fr); }\n\n            .xl\\:grid-cols-3 { grid-template-columns: repeat(3, 1fr); }\n\n            .xl\\:grid-cols-4 { grid-template-columns: repeat(4, 1fr); }\n\n            .xl\\:grid-cols-6 { grid-template-columns: repeat(6, 1fr); }\n\n            .xl\\:grid-cols-12 { grid-template-columns: repeat(12, 1fr); }\n\n            .xl\\:grid-auto-fit { grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); }\n\n            .xl\\:grid-auto-fill { grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); }\n\n            .xl\\:col-span-1 { grid-column: span 1; }\n\n            .xl\\:col-span-2 { grid-column: span 2; }\n\n            .xl\\:col-span-3 { grid-column: span 3; }\n\n            .xl\\:col-span-4 { grid-column: span 4; }\n\n            .xl\\:col-span-6 { grid-column: span 6; }\n\n            .xl\\:col-span-12 { grid-column: span 12; }\n\n            .xl\\:col-span-full { grid-column: 1 / -1; }\n\n            .xl\\:row-span-1 { grid-row: span 1; }\n\n            .xl\\:row-span-2 { grid-row: span 2; }\n\n            .xl\\:row-span-3 { grid-row: span 3; }\n\n            .xl\\:row-span-4 { grid-row: span 4; }\n\n            .xl\\:row-span-5 { grid-row: span 5; }\n\n            .xl\\:row-span-6 { grid-row: span 6; }\n\n            .xl\\:row-span-full { grid-row: 1 / -1; }\n          }\n\n/* 2X large screens (1536px and up) */\n          @media (width >= 1536px) {\n            .\\32xl\\:grid-cols-1 { grid-template-columns: repeat(1, 1fr); }\n\n            .\\32xl\\:grid-cols-2 { grid-template-columns: repeat(2, 1fr); }\n\n            .\\32xl\\:grid-cols-3 { grid-template-columns: repeat(3, 1fr); }\n\n            .\\32xl\\:grid-cols-4 { grid-template-columns: repeat(4, 1fr); }\n\n            .\\32xl\\:grid-cols-6 { grid-template-columns: repeat(6, 1fr); }\n\n            .\\32xl\\:grid-cols-12 { grid-template-columns: repeat(12, 1fr); }\n\n            .\\32xl\\:grid-auto-fit { grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); }\n\n            .\\32xl\\:grid-auto-fill { grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); }\n\n            .\\32xl\\:col-span-1 { grid-column: span 1; }\n\n            .\\32xl\\:col-span-2 { grid-column: span 2; }\n\n            .\\32xl\\:col-span-3 { grid-column: span 3; }\n\n            .\\32xl\\:col-span-4 { grid-column: span 4; }\n\n            .\\32xl\\:col-span-6 { grid-column: span 6; }\n\n            .\\32xl\\:col-span-12 { grid-column: span 12; }\n\n            .\\32xl\\:col-span-full { grid-column: 1 / -1; }\n\n            .\\32xl\\:row-span-1 { grid-row: span 1; }\n\n            .\\32xl\\:row-span-2 { grid-row: span 2; }\n\n            .\\32xl\\:row-span-3 { grid-row: span 3; }\n\n            .\\32xl\\:row-span-4 { grid-row: span 4; }\n\n            .\\32xl\\:row-span-5 { grid-row: span 5; }\n\n            .\\32xl\\:row-span-6 { grid-row: span 6; }\n\n            .\\32xl\\:row-span-full { grid-row: 1 / -1; }\n          }\n        }\n\n\n/* Datei: layout/index.css */\n/**\n        * Layout System Index\n        *\n        * Konsolidiertes Layout-System mit optimierter Struktur:\n        *\n        * CORE LAYOUT SYSTEMS:\n        * - Grid System: Utility-basiertes 12-Spalten-Grid (.grid, .grid-cols-*, .col-span-*)\n        * - Flex System: Flexbox-Utilities (.flex, .flex-row, .items-center, etc.)\n        * - Container System: Container-Größen und -Eigenschaften (.container, .container-md, etc.)\n        *\n        * RESPONSIVE & UTILITIES:\n        * - Responsive: Container Queries + Media Query Fallbacks (.sm:block, .md:hidden, etc.)\n        * - Responsive Utilities: Responsive Grid/Flex-Utilities (.sm:grid-cols-2, .md:flex-row, etc.)\n        * - Spacing: Gap-, Margin-, Padding-Utilities (.gap-4, .mx-auto, .p-6, etc.)\n        *\n        * HINWEIS:\n        * - Page-Layouts sind in core/logical-properties.css verfügbar (.layout)\n        * - Sidebar-Komponenten sind in ui/regions/sidebar.css und ui/menu/sidebar.css verfügbar\n        */\n\n/* ================= CORE LAYOUT SYSTEMS ================= */\n/* Importierte Datei: layout/grid-system.css */\n/**\n        * Grid Layout System\n        *\n        * A comprehensive 12-column grid system with utility classes for modern web layouts.\n        * This system provides flexible grid layouts using CSS Grid with semantic class names\n        * and responsive capabilities.\n        *\n        * @layer layout.grid\n        * @version 2.0\n        * @author Design System Team\n        *\n        * FEATURES:\n        * - 12-column grid system with flexible column spans\n        * - Auto-fit and auto-fill grid layouts for responsive cards\n        * - Subgrid support for nested layouts\n        * - Semantic utility classes (.grid, .grid-cols-*, .col-span-*)\n        * - CSS Grid native implementation (no flexbox fallbacks)\n        * - Works with spacing.css for gap utilities\n        * - Compatible with responsive-utilities.css for breakpoint variants\n        *\n        * GRID CLASSES:\n        * - .grid: Base grid container\n        * - .grid-cols-{1-12}: Define number of columns\n        * - .col-span-{1-12}: Span multiple columns\n        * - .col-span-full: Span all available columns\n        * - .row-span-{1-6}: Span multiple rows\n        * - .grid-auto-fit: Auto-fit responsive layout\n        * - .grid-auto-fill: Auto-fill responsive layout\n        *\n        * LAYOUT VARIANTS:\n        * - .layout-grid: Semantic grid with default gutter\n        * - .layout-grid-{2,3,4,6}: Predefined column layouts\n        * - .layout-grid-auto-fit: Responsive card layouts\n        *\n        * SUBGRID SUPPORT:\n        * - .grid-subgrid: Inherit parent grid columns\n        * - .row-subgrid: Inherit parent grid rows\n        *\n        * USAGE EXAMPLES:\n        *\n        * Basic Grid:\n        * <div class=\"grid grid-cols-3 gap-4\">\n        *   <div>Item 1</div>\n        *   <div>Item 2</div>\n        *   <div>Item 3</div>\n        * </div>\n        *\n        * Responsive Card Layout:\n        * <div class=\"grid-auto-fit gap-6\">\n        *   <div class=\"card\">Card 1</div>\n        *   <div class=\"card\">Card 2</div>\n        *   <div class=\"card\">Card 3</div>\n        * </div>\n        *\n        * Complex Layout:\n        * <div class=\"grid grid-cols-12 gap-4\">\n        *   <div class=\"col-span-8\">Main content</div>\n        *   <div class=\"col-span-4\">Sidebar</div>\n        *   <div class=\"col-span-full\">Footer</div>\n        * </div>\n        *\n        * Subgrid Example:\n        * <div class=\"grid grid-cols-4 gap-4\">\n        *   <div class=\"col-span-2 grid-subgrid gap-2\">\n        *     <div>Nested 1</div>\n        *     <div>Nested 2</div>\n        *   </div>\n        * </div>\n        *\n        * RESPONSIVE USAGE:\n        * Use with responsive-utilities.css for breakpoint-specific layouts:\n        * <div class=\"grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4\">\n        *   <!-- Responsive grid that adapts to screen size -->\n        * </div>\n        *\n        * BROWSER SUPPORT:\n        * - CSS Grid: All modern browsers (IE 11+ with -ms- prefix)\n        * - Subgrid: Firefox 71+, Safari 16+, Chrome 117+\n        * - Container Queries: Chrome 105+, Firefox 110+, Safari 16+\n        *\n        * PERFORMANCE NOTES:\n        * - CSS Grid is highly optimized for layout performance\n        * - Subgrid reduces layout recalculations\n        * - Auto-fit/auto-fill are efficient for responsive designs\n        * - Use gap properties instead of margins for better performance\n        *\n        * ACCESSIBILITY:\n        * - Grid layouts maintain document flow for screen readers\n        * - Use semantic HTML elements within grid containers\n        * - Ensure logical tab order is preserved\n        * - Test with keyboard navigation\n        *\n        * INTEGRATION:\n        * - Works seamlessly with layout/containers.css for container sizing\n        * - Combines with layout/spacing.css for gap utilities\n        * - Enhanced by layout/responsive-utilities.css for responsive variants\n        * - Compatible with layout/flex-layouts.css for hybrid layouts\n        */\n\n        @layer layout.grid {\n/* ================= GRID-LAYOUT-SYSTEM ================= */\n\n/* Basierend auf dem 12-Spalten-Grid-System, mit einheitlichen Abständen */\n          .layout-grid {\n            display: grid;\n            gap: var(--grid-gutter, 1rem);\n            grid-template-columns: repeat(var(--grid-columns, 12), 1fr);\n          }\n\n/* Varianten mit unterschiedlichen Spaltenanzahlen */\n          .layout-grid-2 {\n            display: grid;\n            gap: var(--grid-gutter, 1rem);\n            grid-template-columns: repeat(2, 1fr);\n          }\n\n          .layout-grid-3 {\n            display: grid;\n            gap: var(--grid-gutter, 1rem);\n            grid-template-columns: repeat(3, 1fr);\n          }\n\n          .layout-grid-4 {\n            display: grid;\n            gap: var(--grid-gutter, 1rem);\n            grid-template-columns: repeat(4, 1fr);\n          }\n\n          .layout-grid-6 {\n            display: grid;\n            gap: var(--grid-gutter, 1rem);\n            grid-template-columns: repeat(6, 1fr);\n          }\n\n/* Auto-Fit Grid für responsive Karten-Layouts */\n          .layout-grid-auto-fit {\n            display: grid;\n            gap: var(--grid-gutter, 1rem);\n            grid-template-columns: repeat(auto-fit, minmax(var(--grid-auto-fit-min, 200px), 1fr));\n          }\n\n/* ================= SUBGRID / NESTED ================= */\n\n/* Komponenten für verschachtelte Grid-Layouts mit Subgrid */\n          .grid-subgrid {\n            display: grid;\n            grid-template-columns: subgrid;\n          }\n\n          .row-subgrid {\n            display: grid;\n            grid-template-rows: subgrid;\n          }\n\n/* ================= GRID UTILITIES ================= */\n\n/* Grid-Spalten */\n          .grid { display: grid; }\n\n          .grid-cols-1 { grid-template-columns: repeat(1, 1fr); }\n\n          .grid-cols-2 { grid-template-columns: repeat(2, 1fr); }\n\n          .grid-cols-3 { grid-template-columns: repeat(3, 1fr); }\n\n          .grid-cols-4 { grid-template-columns: repeat(4, 1fr); }\n\n          .grid-cols-6 { grid-template-columns: repeat(6, 1fr); }\n\n          .grid-cols-12 { grid-template-columns: repeat(12, 1fr); }\n\n          .grid-auto-fit { grid-template-columns: repeat(auto-fit, minmax(var(--grid-auto-fit-min, 200px), 1fr)); }\n\n          .grid-auto-fill { grid-template-columns: repeat(auto-fill, minmax(var(--grid-auto-fill-min, 200px), 1fr)); }\n\n/* Spaltenspannen für Grid-Items */\n          .col-span-1 { grid-column: span 1; }\n\n          .col-span-2 { grid-column: span 2; }\n\n          .col-span-3 { grid-column: span 3; }\n\n          .col-span-4 { grid-column: span 4; }\n\n          .col-span-6 { grid-column: span 6; }\n\n          .col-span-12 { grid-column: span 12; }\n\n          .col-span-full { grid-column: 1 / -1; }\n\n/* Grid-Zeilen */\n          .grid-rows-1 { grid-template-rows: repeat(1, 1fr); }\n\n          .grid-rows-2 { grid-template-rows: repeat(2, 1fr); }\n\n          .grid-rows-3 { grid-template-rows: repeat(3, 1fr); }\n\n          .grid-rows-4 { grid-template-rows: repeat(4, 1fr); }\n\n          .grid-rows-5 { grid-template-rows: repeat(5, 1fr); }\n\n          .grid-rows-6 { grid-template-rows: repeat(6, 1fr); }\n\n/* Zeilen-Span */\n          .row-span-1 { grid-row: span 1; }\n\n          .row-span-2 { grid-row: span 2; }\n\n          .row-span-3 { grid-row: span 3; }\n\n          .row-span-4 { grid-row: span 4; }\n\n          .row-span-5 { grid-row: span 5; }\n\n          .row-span-6 { grid-row: span 6; }\n\n          .row-span-full { grid-row: 1 / -1; }\n        }\n\n/* Importierte Datei: layout/flex-layouts.css */\n/**\n        * Flex Layout System\n        *\n        * A comprehensive flexbox-based layout system providing flexible and responsive\n        * layout utilities for modern web applications. This system offers semantic\n        * flexbox classes with intuitive naming conventions.\n        *\n        * @layer layout.flex\n        * @version 2.0\n        * @author Design System Team\n        *\n        * FEATURES:\n        * - Complete flexbox utility system\n        * - Semantic layout components (.layout-flex-*)\n        * - Direction, wrapping, and alignment utilities\n        * - Flexible item sizing with flex-basis utilities\n        * - Self-alignment controls for individual items\n        * - Grow and shrink utilities for dynamic layouts\n        * - Works seamlessly with CSS Grid system\n        * - Responsive-ready with breakpoint variants\n        *\n        * FLEX CONTAINER CLASSES:\n        * - .flex: Base flex container\n        * - .inline-flex: Inline flex container\n        * - .flex-row: Horizontal direction (default)\n        * - .flex-col: Vertical direction\n        * - .flex-wrap: Allow wrapping\n        * - .flex-nowrap: Prevent wrapping\n        *\n        * ALIGNMENT CLASSES:\n        * - .items-start: Align items to start\n        * - .items-center: Center align items\n        * - .items-end: Align items to end\n        * - .items-stretch: Stretch items to fill\n        * - .items-baseline: Baseline alignment\n        * - .justify-start: Justify content to start\n        * - .justify-center: Center justify content\n        * - .justify-end: Justify content to end\n        * - .justify-between: Space between items\n        * - .justify-around: Space around items\n        * - .justify-evenly: Even space distribution\n        *\n        * FLEX ITEM CLASSES:\n        * - .flex-1: Grow and shrink equally\n        * - .flex-auto: Grow and shrink based on content\n        * - .flex-none: Don't grow or shrink\n        * - .flex-initial: Initial flex value\n        * - .flex-grow: Allow growing\n        * - .flex-shrink: Allow shrinking\n        *\n        * FLEX BASIS UTILITIES:\n        * - .flex-basis-1-2: 50 basis\n        * - .flex-basis-1-3: 33.33% basis\n        * - .flex-basis-2-3: 66.67% basis\n        * - .flex-basis-1-4: 25% basis\n        * - .flex-basis-3-4: 75% basis\n        * - .flex-basis-1-5: 20 basis\n        * - .flex-basis-2-5: 40 basis\n        * - .flex-basis-3-5: 60 basis\n        * - .flex-basis-4-5: 80 basis\n        *\n        * SELF-ALIGNMENT:\n        * - .self-auto: Auto alignment\n        * - .self-start: Align self to start\n        * - .self-center: Center align self\n        * - .self-end: Align self to end\n        * - .self-stretch: Stretch self\n        *\n        * LAYOUT COMPONENTS:\n        * - .layout-flex: Semantic flex column with gap\n        * - .layout-flex-row: Semantic flex row with gap\n        * - .layout-flex-column: Semantic flex column with gap\n        * - .layout-flex-between: Space-between layout\n        * - .layout-flex-center: Centered layout\n        *\n        * USAGE EXAMPLES:\n        *\n        * Basic Flex Layout:\n        * <div class=\"flex items-center justify-between\">\n        *   <div>Logo</div>\n        *   <nav class=\"flex gap-4\">\n        *     <a href=\"#\">Home</a>\n        *     <a href=\"#\">About</a>\n        *   </nav>\n        * </div>\n        *\n        * Card Layout:\n        * <div class=\"flex flex-col gap-4\">\n        *   <h2>Card Title</h2>\n        *   <p class=\"flex-1\">Card content that grows</p>\n        *   <button>Action</button>\n        * </div>\n        *\n        * Responsive Layout:\n        * <div class=\"flex flex-col md:flex-row gap-6\">\n        *   <main class=\"flex-1\">Main content</main>\n        *   <aside class=\"flex-basis-1-3\">Sidebar</aside>\n        * </div>\n        *\n        * Complex Alignment:\n        * <div class=\"flex flex-wrap items-start justify-center gap-4\">\n        *   <div class=\"flex-basis-1-3 self-stretch\">Item 1</div>\n        *   <div class=\"flex-basis-1-3 self-center\">Item 2</div>\n        *   <div class=\"flex-basis-1-3 self-end\">Item 3</div>\n        * </div>\n        *\n        * RESPONSIVE USAGE:\n        * Use with responsive-utilities.css for breakpoint-specific layouts:\n        * <div class=\"flex-col sm:flex-row items-center sm:items-start\">\n        *   <!-- Responsive flex direction and alignment -->\n        * </div>\n        *\n        * BROWSER SUPPORT:\n        * - Flexbox: All modern browsers (IE 11+ with -ms- prefix)\n        * - Gap property: Chrome 84+, Firefox 63+, Safari 14.1+\n        * - Fallback: Use margin utilities for older browsers\n        *\n        * PERFORMANCE NOTES:\n        * - Flexbox is highly optimized for one-dimensional layouts\n        * - Use CSS Grid for two-dimensional layouts\n        * - Gap property is more performant than margins\n        * - Avoid deep nesting of flex containers\n        *\n        * ACCESSIBILITY:\n        * - Flex layouts maintain document flow for screen readers\n        * - Use semantic HTML elements within flex containers\n        * - Be careful with flex-direction: column and tab order\n        * - Test with keyboard navigation\n        * - Consider using order property sparingly\n        *\n        * INTEGRATION:\n        * - Complements layout/grid-system.css for hybrid layouts\n        * - Works with layout/spacing.css for gap utilities\n        * - Enhanced by layout/responsive-utilities.css for responsive variants\n        * - Compatible with layout/containers.css for container sizing\n        *\n        * BEST PRACTICES:\n        * - Use flexbox for one-dimensional layouts (rows or columns)\n        * - Use CSS Grid for two-dimensional layouts\n        * - Prefer gap over margins for spacing\n        * - Use semantic layout components for common patterns\n        * - Test responsive behavior across breakpoints\n        * - Ensure accessibility with proper HTML structure\n        */\n\n        @layer layout.flex {\n/* ================= FLEX-LAYOUT-SYSTEM ================= */\n\n          .layout-flex {\n            display: flex;\n            flex-direction: column;\n            gap: var(--grid-gutter, 1rem);\n          }\n\n/* Typische Flex-Layouts */\n          .layout-flex-row {\n            display: flex;\n            flex-direction: row;\n            gap: var(--grid-gutter, 1rem);\n          }\n\n          .layout-flex-column {\n            display: flex;\n            flex-direction: column;\n            gap: var(--grid-gutter, 1rem);\n          }\n\n/* Verteilte Layouts */\n          .layout-flex-between {\n            display: flex;\n            flex-direction: row;\n            gap: var(--grid-gutter, 1rem);\n            justify-content: space-between;\n          }\n\n          .layout-flex-center {\n            align-items: center;\n            display: flex;\n            gap: var(--grid-gutter, 1rem);\n            justify-content: center;\n          }\n\n/* ================= FLEX UTILITIES ================= */\n\n/* Display-Typen */\n          .flex { display: flex; }\n\n          .inline-flex { display: inline-flex; }\n\n/* Flex-Richtung und Umbruchverhalten */\n          .flex-row { flex-direction: row; }\n\n          .flex-col { flex-direction: column; }\n\n          .flex-wrap { flex-wrap: wrap; }\n\n          .flex-nowrap { flex-wrap: nowrap; }\n\n/* Ausrichtung von Flex-Items */\n          .items-start { align-items: flex-start; }\n\n          .items-center { align-items: center; }\n\n          .items-end { align-items: flex-end; }\n\n          .items-stretch { align-items: stretch; }\n\n          .items-baseline { align-items: baseline; }\n\n          .justify-start { justify-content: flex-start; }\n\n          .justify-center { justify-content: center; }\n\n          .justify-end { justify-content: flex-end; }\n\n          .justify-between { justify-content: space-between; }\n\n          .justify-around { justify-content: space-around; }\n\n          .justify-evenly { justify-content: space-evenly; }\n\n/* Flex-Eigenschaften */\n          .flex-1 { flex: 1 1 0; }\n\n          .flex-auto { flex: 1 1 auto; }\n\n          .flex-none { flex: none; }\n\n          .flex-initial { flex: 0 1 auto; }\n\n/* Flex-Basis für flexible Layouts */\n          .flex-basis-1-2 { flex-basis: 50%; }\n\n          .flex-basis-1-3 { flex-basis: 33.3333%; }\n\n          .flex-basis-2-3 { flex-basis: 66.6667%; }\n\n          .flex-basis-1-4 { flex-basis: 25%; }\n\n          .flex-basis-3-4 { flex-basis: 75%; }\n\n          .flex-basis-1-5 { flex-basis: 20%; }\n\n          .flex-basis-2-5 { flex-basis: 40%; }\n\n          .flex-basis-3-5 { flex-basis: 60%; }\n\n          .flex-basis-4-5 { flex-basis: 80%; }\n\n/* Flex-Grow und Flex-Shrink */\n          .flex-grow { flex-grow: 1; }\n\n          .flex-grow-0 { flex-grow: 0; }\n\n          .flex-shrink { flex-shrink: 1; }\n\n          .flex-shrink-0 { flex-shrink: 0; }\n\n/* Self-Alignment */\n          .self-auto { align-self: auto; }\n\n          .self-start { align-self: flex-start; }\n\n          .self-center { align-self: center; }\n\n          .self-end { align-self: flex-end; }\n\n          .self-stretch { align-self: stretch; }\n        }\n\n/* Importierte Datei: layout/containers.css */\n/**\n        * Container Layout System\n        *\n        * A comprehensive container system providing responsive width constraints,\n        * positioning utilities, and specialized container types for modern web layouts.\n        * This system consolidates all container-related functionality into a unified\n        * and maintainable solution.\n        *\n        * @layer layout.containers\n        * @version 2.0\n        * @author Design System Team\n        *\n        * FEATURES:\n        * - Responsive container system with breakpoint-based max-widths\n        * - Fluid containers that adapt to viewport width\n        * - Positioned containers for overlays and modals\n        * - Visual containers with styling and effects\n        * - Functional containers for specific UI patterns\n        * - Z-index management system for layering\n        * - CSS custom properties for easy customization\n        * - Mobile-first responsive design approach\n        *\n        * CONTAINER TYPES:\n        *\n        * BASE CONTAINERS:\n        * - .container: Responsive container with max-width constraints\n        * - .container-fluid: Full-width container without max-width\n        * - .container-sm: Small container (max-width: 64%0px)\n        * - .container-md: Medium container (max-width: 768px)\n        * - .container-lg: Large container (max-width: 102%4px)\n        * - .container-xl: Extra large container (max-width: 128%0px)\n        * - .container-2xl: 2X large container (max-width: 153%6px)\n        *\n        * RESPONSIVE CONTAINERS:\n        * - .container-responsive: Adapts max-width at each breakpoint\n        * - Automatically adjusts width based on screen size\n        * - Includes horizontal padding for mobile spacing\n        *\n        * POSITIONED CONTAINERS:\n        * - .container-fixed: Fixed positioning container\n        * - .container-absolute: Absolute positioning container\n        * - .container-relative: Relative positioning container\n        * - .container-sticky: Sticky positioning container\n        * - .container-centered: Centered positioning with transforms\n        *\n        * VISUAL CONTAINERS:\n        * - .container-card: Card-style container with shadow and border\n        * - .container-bordered: Container with border styling\n        * - .container-rounded: Container with rounded corners\n        * - .container-shadow: Container with drop shadow\n        * - .container-elevated: Container with elevation effect\n        *\n        * FUNCTIONAL CONTAINERS:\n        * - .container-modal: Modal dialog container\n        * - .container-toast: Toast notification container\n        * - .container-dropdown: Dropdown menu container\n        * - .container-tooltip: Tooltip container\n        * - .container-popover: Popover container\n        * - .container-sidebar: Sidebar container\n        * - .container-header: Header container\n        * - .container-footer: Footer container\n        *\n        * RESPONSIVE BREAKPOINTS:\n        * - sm: 640px and up\n        * - md: 768px and up\n        * - lg: 1024px and up\n        * - xl: 1280px and up\n        * - 2xl: 1536px and up\n        *\n        * USAGE EXAMPLES:\n        *\n        * Basic Container:\n        * <div class=\"container\">\n        *   <h1>Page Title</h1>\n        *   <p>Content with responsive width constraints</p>\n        * </div>\n        *\n        * Responsive Container:\n        * <div class=\"container-responsive\">\n        *   <!-- Adapts width at each breakpoint -->\n        *   <main>Main content</main>\n        * </div>\n        *\n        * Modal Container:\n        * <div class=\"container-modal\">\n        *   <div class=\"container-card\">\n        *     <h2>Modal Title</h2>\n        *     <p>Modal content</p>\n        *   </div>\n        * </div>\n        *\n        * Card Layout:\n        * <div class=\"container-card container-rounded\">\n        *   <h3>Card Title</h3>\n        *   <p>Card content with styling</p>\n        * </div>\n        *\n        * Sidebar Layout:\n        * <aside class=\"container-sidebar\">\n        *   <nav>Navigation items</nav>\n        * </aside>\n        *\n        * CUSTOMIZATION:\n        * Override CSS custom properties to customize containers:\n        *\n        * :root {\n          *   --container-padding: 1rem;\n          *   --container-max-width: 120%0px;\n          *   --container-border-radius: 0.5rem;\n          *   --container-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);\n          * }\n          *\n          * BROWSER SUPPORT:\n          * - CSS Custom Properties: All modern browsers (IE 11+ with fallbacks)\n          * - CSS Grid: All modern browsers (IE 11+ with -ms- prefix)\n          * - Container Queries: Chrome 105+, Firefox 110+, Safari 16+\n          * - Backdrop Filter: Chrome 76+, Firefox 103+, Safari 9+\n          *\n          * PERFORMANCE NOTES:\n          * - Use container queries for component-based responsive design\n          * - Backdrop filters can impact performance on mobile devices\n          * - Z-index values are optimized to prevent stacking conflicts\n          * - CSS custom properties enable efficient theming\n          *\n          * ACCESSIBILITY:\n          * - Containers maintain semantic HTML structure\n          * - Modal containers include proper ARIA attributes\n          * - Focus management for overlay containers\n          * - Keyboard navigation support\n          * - Screen reader compatibility\n          *\n          * INTEGRATION:\n          * - Works with layout/grid-system.css for grid layouts\n          * - Compatible with layout/flex-layouts.css for flex layouts\n          * - Enhanced by layout/spacing.css for margin/padding utilities\n          * - Supports layout/responsive-utilities.css for responsive variants\n          *\n          * Z-INDEX SYSTEM:\n          * - Base content: 1-10\n          * - Dropdowns: 1000-1010\n          * - Sticky elements: 1020-1030\n          * - Fixed headers: 1040-1050\n          * - Overlays: 1060-1070\n          * - Modals: 1080-1090\n          * - Tooltips: 1100-1110\n          * - Toasts: 1120-1130\n          *\n          * BEST PRACTICES:\n          * - Use semantic container classes for specific UI patterns\n          * - Combine container types for complex layouts\n          * - Test responsive behavior across all breakpoints\n          * - Ensure proper z-index layering for overlays\n          * - Maintain accessibility standards for interactive containers\n          * - Use CSS custom properties for consistent theming\n          */\n\n          @layer layout.containers {\n/* ================= BASE CONTAINERS ================= */\n\n/* Standard-Container mit maximaler Breite */\n            .container {\n              margin-left: auto;\n              margin-right: auto;\n              max-width: var(--container-max-width, 1200px);\n              padding-left: var(--container-padding, 1rem);\n              padding-right: var(--container-padding, 1rem);\n              width: 100%;\n            }\n\n/* Fluid-Container ohne maximale Breite */\n            .container-fluid {\n              margin-left: auto;\n              margin-right: auto;\n              padding-left: var(--container-padding, 1rem);\n              padding-right: var(--container-padding, 1rem);\n              width: 100%;\n            }\n\n/* Container mit festen Größen */\n            .container-sm {\n              margin-left: auto;\n              margin-right: auto;\n              max-width: var(--container-sm, 640px);\n              padding-left: var(--container-padding, 1rem);\n              padding-right: var(--container-padding, 1rem);\n              width: 100%;\n            }\n\n            .container-md {\n              margin-left: auto;\n              margin-right: auto;\n              max-width: var(--container-md, 768px);\n              padding-left: var(--container-padding, 1rem);\n              padding-right: var(--container-padding, 1rem);\n              width: 100%;\n            }\n\n            .container-lg {\n              margin-left: auto;\n              margin-right: auto;\n              max-width: var(--container-lg, 1024px);\n              padding-left: var(--container-padding, 1rem);\n              padding-right: var(--container-padding, 1rem);\n              width: 100%;\n            }\n\n            .container-xl {\n              margin-left: auto;\n              margin-right: auto;\n              max-width: var(--container-xl, 1280px);\n              padding-left: var(--container-padding, 1rem);\n              padding-right: var(--container-padding, 1rem);\n              width: 100%;\n            }\n\n            .container-2xl {\n              margin-left: auto;\n              margin-right: auto;\n              max-width: var(--container-2xl, 1536px);\n              padding-left: var(--container-padding, 1rem);\n              padding-right: var(--container-padding, 1rem);\n              width: 100%;\n            }\n\n/* ================= RESPONSIVE CONTAINERS ================= */\n\n/* Container Query Support */\n            .container-query {\n              container-name: main;\n              container-type: inline-size;\n            }\n\n            .container-query-size {\n              container-type: size;\n            }\n\n            .container-query-normal {\n              container-type: normal;\n            }\n\n/* Responsive Container mit anpassbarer maximaler Breite */\n            .container-responsive {\n              margin-left: auto;\n              margin-right: auto;\n              padding-left: var(--container-padding, 1rem);\n              padding-right: var(--container-padding, 1rem);\n              width: 100%;\n            }\n\n            @media (min-width: 640px) {\n              .container-responsive {\n                max-width: var(--container-sm, 640px);\n              }\n            }\n\n            @media (min-width: 768px) {\n              .container-responsive {\n                max-width: var(--container-md, 768px);\n              }\n            }\n\n            @media (min-width: 1024px) {\n              .container-responsive {\n                max-width: var(--container-lg, 1024px);\n              }\n            }\n\n            @media (width >= 1280px) {\n              .container-responsive {\n                max-width: var(--container-xl, 1280px);\n              }\n            }\n\n            @media (width >= 1536px) {\n              .container-responsive {\n                max-width: var(--container-2xl, 1536px);\n              }\n            }\n\n/* ================= POSITIONED CONTAINERS ================= */\n\n/* Container mit verschiedenen Positionierungen */\n            .container-fixed {\n              position: fixed;\n            }\n\n            .container-absolute {\n              position: absolute;\n            }\n\n            .container-relative {\n              position: relative;\n            }\n\n            .container-sticky {\n              position: sticky;\n              top: 0%;\n              z-index: var(--z-sticky, 1020);\n            }\n\n/* Zentrierter Container */\n            .container-centered {\n              left: 50%;\n              position: absolute;\n              top: 50%;\n              transform: translate(-50%, -50);\n            }\n\n/* ================= VISUAL CONTAINERS ================= */\n\n/* Container mit visuellen Stilen */\n            .container-card {\n              background: var(--container-bg, #fff);\n              border: 1px solid var(--container-border-color, #e5e7eb);\n              border-radius: var(--container-border-radius, 0.5rem);\n              box-shadow: var(--container-shadow, 0 1px 3px rgb(0 0 0 / 0.1));\n              padding: var(--container-card-padding, 1.5rem);\n            }\n\n            .container-bordered {\n              border: 1px solid var(--container-border-color, #e5e7eb);\n            }\n\n            .container-rounded {\n              border-radius: var(--container-border-radius, 0.5rem);\n            }\n\n            .container-shadow {\n              box-shadow: var(--container-shadow, 0 4px 6px rgb(0 0 0 / 0.1));\n            }\n\n            .container-elevated {\n              box-shadow: var(--container-elevated-shadow, 0 10px 25px rgb(0 0 0 / 15%));\n              transform: translateY(-2px);\n              transition: all 0.3s ease;\n            }\n\n            .container-elevated:hover {\n              box-shadow: var(--container-elevated-hover-shadow, 0 20px 40px rgb(0 0 0 / 0.2));\n              transform: translateY(-4px);\n            }\n\n/* ================= FUNCTIONAL CONTAINERS ================= */\n\n/* Modal-Container */\n            .container-modal {\n              align-items: center;\n              backdrop-filter: blur(4px);\n              background: rgb(0 0 0 / 0.5);\n              display: flex;\n              height: 100%;\n              justify-content: center;\n              left: 0%;\n              position: fixed;\n              top: 0%;\n              width: 100vw;\n              z-index: var(--z-modal, 1060);\n            }\n\n/* Toast-Container */\n            .container-toast {\n              background: var(--container-bg, #fff);\n              border-radius: var(--container-border-radius, 0.5rem);\n              box-shadow: var(--container-elevated-shadow, 0 10px 15px rgb(0 0 0 / 0.1));\n              max-width: var(--modal-max-width, 32rem);\n              padding: var(--container-card-padding, 1.5rem);\n              position: fixed;\n              right: 1rem;\n              top: 1rem;\n              z-index: var(--z-toast, 1080);\n            }\n\n/* Dropdown-Container */\n            .container-dropdown {\n              background: var(--container-bg, #fff);\n              border: 1px solid var(--container-border-color, #e5e7eb);\n              border-radius: var(--container-border-radius, 0.5rem);\n              box-shadow: var(--container-shadow, 0 1px 3px rgb(0 0 0 / 0.1));\n              position: absolute;\n              z-index: var(--z-dropdown, 1000);\n            }\n\n/* Tooltip-Container */\n            .container-tooltip {\n              background: var(--container-bg, #fff);\n              border: 1px solid var(--container-border-color, #e5e7eb);\n              border-radius: var(--container-border-radius, 0.5rem);\n              box-shadow: var(--container-shadow, 0 1px 3px rgb(0 0 0 / 0.1));\n              max-width: var(--tooltip-max-width, 20rem);\n              padding: var(--space-2, 0.5rem);\n              position: absolute;\n              z-index: var(--z-tooltip, 1070);\n            }\n\n/* Popover-Container */\n            .container-popover {\n              background: var(--container-bg, #fff);\n              border: 1px solid var(--container-border-color, #e5e7eb);\n              border-radius: var(--container-border-radius, 0.5rem);\n              box-shadow: var(--container-elevated-shadow, 0 10px 15px rgb(0 0 0 / 0.1));\n              max-width: var(--popover-max-width, 24rem);\n              padding: var(--container-card-padding, 1.5rem);\n              position: absolute;\n              z-index: var(--z-popover, 1040);\n            }\n\n/* Sidebar-Container */\n            .container-sidebar {\n              background: var(--container-bg, #fff);\n              border-right: 1px solid var(--container-border-color, #e5e7eb);\n              height: 100%;\n              position: fixed;\n              width: var(--sidebar-width, 16rem);\n              z-index: var(--z-fixed, 1000);\n            }\n\n/* Header-Container */\n            .container-header {\n              background: var(--container-bg, #fff);\n              border-bottom: 1px solid var(--container-border-color, #e5e7eb);\n              height: var(--header-height, 4rem);\n              position: fixed;\n              width: 100%;\n              z-index: var(--z-fixed, 1000);\n            }\n\n/* Footer-Container */\n            .container-footer {\n              background: var(--container-bg, #fff);\n              border-top: 1px solid var(--container-border-color, #e5e7eb);\n              height: var(--footer-height, 4rem);\n              position: relative;\n              width: 100%;\n            }\n\n/* ================= Z-INDEX MANAGEMENT ================= */\n\n/* Z-Index-Variablen für konsistente Layering */\n            :root {\n              --z-base: 1;\n              --z-dropdown: 1000;\n              --z-sticky: 1020;\n              --z-header: 1050;\n              --z-sidebar: 1040;\n              --z-popover: 1060;\n              --z-overlay: 1070;\n              --z-modal: 1080;\n              --z-tooltip: 1100;\n              --z-toast: 1120;\n            }\n\n/* Z-Index Utilities */\n            .z-0 { z-index: 0; }\n\n            .z-10 { z-index: 10; }\n\n            .z-20 { z-index: 20; }\n\n            .z-30 { z-index: 30; }\n\n            .z-40 { z-index: 40; }\n\n            .z-50 { z-index: 50; }\n\n            .z-auto { z-index: auto; }\n\n/* Spezielle Z-Index-Klassen */\n            .z-dropdown { z-index: var(--z-dropdown, 1000); }\n\n            .z-sticky { z-index: var(--z-sticky, 1010); }\n\n            .z-header { z-index: var(--z-header, 1020); }\n\n            .z-sidebar { z-index: var(--z-sidebar, 1030); }\n\n            .z-popover { z-index: var(--z-popover, 1040); }\n\n            .z-overlay { z-index: var(--z-overlay, 1050); }\n\n            .z-modal { z-index: var(--z-modal, 1060); }\n\n            .z-tooltip { z-index: var(--z-tooltip, 1070); }\n\n            .z-toast { z-index: var(--z-toast, 1080); }\n          }\n\n\n\n/* ================= RESPONSIVE & UTILITIES ================= */\n/* Importierte Datei: layout/responsive.css */\n/**\n          * Responsive Display & Visibility System\n          *\n          * A comprehensive responsive utility system for controlling element visibility,\n          * display properties, and responsive behavior across different screen sizes.\n          * This system provides mobile-first responsive design utilities with semantic\n          * class names and consistent breakpoint management.\n          *\n          * @layer layout.responsive\n          * @version 2.0\n          * @author Design System Team\n          *\n          * FEATURES:\n          * - Mobile-first responsive design approach\n          * - Display utilities for all CSS display values\n          * - Visibility controls for showing/hiding elements\n          * - Responsive variants for all major breakpoints\n          * - Print-specific utilities for print media\n          * - Screen reader utilities for accessibility\n          * - Consistent breakpoint system across all utilities\n          * - Performance-optimized CSS with minimal specificity\n          *\n          * BREAKPOINT SYSTEM:\n          * - Base: 0 and up (mobile-first)\n          * - sm: 640px and up (small tablets)\n          * - md: 768px and up (tablets)\n          * - lg: 1024px and up (laptops)\n          * - xl: 1280px and up (desktops)\n          * - 2xl: 1536px and up (large desktops)\n          *\n          * DISPLAY UTILITIES:\n          * - .block: Block-level element\n          * - .inline-block: Inline block element\n          * - .inline: Inline element\n          * - .flex: Flexbox container\n          * - .inline-flex: Inline flexbox container\n          * - .grid: CSS Grid container\n          * - .inline-grid: Inline grid container\n          * - .table: Table display\n          * - .table-cell: Table cell display\n          * - .table-row: Table row display\n          * - .hidden: Hide element (display: none)\n          *\n          * VISIBILITY UTILITIES:\n          * - .visible: Element is visible\n          * - .invisible: Element is invisible but takes space\n          * - .sr-only: Screen reader only (visually hidden)\n          * - .not-sr-only: Remove screen reader only styling\n          *\n          * RESPONSIVE VARIANTS:\n          * All display utilities are available with responsive prefixes:\n          * - sm:block, md:flex, lg:grid, xl:hidden, etc.\n          * - Example: .hidden.md:block (hidden on mobile, block on tablet+)\n          *\n          * PRINT UTILITIES:\n          * - .print:block: Show as block in print\n          * - .print:hidden: Hide in print\n          * - .print:inline: Show as inline in print\n          *\n          * USAGE EXAMPLES:\n          *\n          * Responsive Navigation:\n          * <nav class=\"hidden md:block\">\n          *   <!-- Hidden on mobile, visible on tablet+ -->\n          *   <ul>Navigation items</ul>\n          * </nav>\n          *\n          * Mobile Menu Toggle:\n          * <button class=\"block md:hidden\">\n          *   <!-- Visible on mobile, hidden on tablet+ -->\n          *   Menu Toggle\n          * </button>\n          *\n          * Responsive Layout:\n          * <div class=\"block lg:flex\">\n          *   <!-- Block layout on mobile/tablet, flex on desktop -->\n          *   <main class=\"lg:flex-1\">Content</main>\n          *   <aside class=\"lg:flex-none\">Sidebar</aside>\n          * </div>\n          *\n          * Progressive Enhancement:\n          * <div class=\"grid-fallback block sm:grid\">\n          *   <!-- Block fallback, grid on small screens+ -->\n          *   <div>Item 1</div>\n          *   <div>Item 2</div>\n          * </div>\n          *\n          * Accessibility:\n          * <span class=\"sr-only\">\n          *   Screen reader description\n          * </span>\n          * <button aria-describedby=\"description\">\n          *   <span class=\"sr-only\">Close dialog</span>\n          *   ×\n          * </button>\n          *\n          * Print Optimization:\n          * <div class=\"print:hidden\">\n          *   <!-- Hidden when printing -->\n          *   <button>Interactive element</button>\n          * </div>\n          *\n          * <div class=\"hidden print:block\">\n          *   <!-- Only visible when printing -->\n          *   <p>Print-specific content</p>\n          * </div>\n          *\n          * BROWSER SUPPORT:\n          * - CSS Grid: All modern browsers (IE 11+ with -ms- prefix)\n          * - Flexbox: All modern browsers (IE 11+ with -ms- prefix)\n          * - Media Queries: All modern browsers (IE 9+)\n          * - CSS Custom Properties: All modern browsers (IE 11+ with fallbacks)\n          *\n          * PERFORMANCE NOTES:\n          * - Mobile-first approach reduces CSS payload for mobile devices\n          * - Uses min-width media queries for better performance\n          * - Minimal CSS specificity prevents cascade conflicts\n          * - Print styles are separated to avoid render blocking\n          *\n          * ACCESSIBILITY:\n          * - .sr-only provides content for screen readers while hiding visually\n          * - Maintains semantic HTML structure regardless of display changes\n          * - Responsive visibility changes don't affect tab order\n          * - Print utilities ensure important content is available in print\n          *\n          * INTEGRATION:\n          * - Works seamlessly with layout/grid-system.css\n          * - Compatible with layout/flex-layouts.css\n          * - Enhanced by layout/responsive-utilities.css for layout-specific responsive variants\n          * - Supports layout/containers.css responsive containers\n          *\n          * BEST PRACTICES:\n          * - Use mobile-first approach: start with mobile styles, enhance for larger screens\n          * - Combine with semantic HTML for better accessibility\n          * - Test responsive behavior across all target breakpoints\n          * - Use .sr-only for important context that should be available to screen readers\n          * - Consider print styles for content-heavy applications\n          * - Avoid excessive responsive variants that create maintenance overhead\n          *\n          * DEBUGGING:\n          * Add temporary borders to debug responsive layouts:\n          * .debug * { border: 1px solid red !important; }\n          *\n          * MIGRATION:\n          * From older responsive systems:\n          * - .show-sm → .hidden.sm:block\n          * - .hide-md → .block.md:hidden\n          * - .visible-lg → .hidden.lg:block\n          */\n\n          @layer layout.responsive {\n/* ================= DISPLAY UTILITIES ================= */\n\n/* Basis-Display-Eigenschaften */\n            .block { display: block; }\n\n            .inline-block { display: inline-block; }\n\n            .inline { display: inline; }\n\n            .flex { display: flex; }\n\n            .inline-flex { display: inline-flex; }\n\n            .grid { display: grid; }\n\n            .inline-grid { display: inline-grid; }\n\n            .table { display: table; }\n\n            .table-cell { display: table-cell; }\n\n            .table-row { display: table-row; }\n\n            .hidden { display: none; }\n\n/* ================= VISIBILITY UTILITIES ================= */\n\n/* Sichtbarkeits-Kontrollen */\n            .visible { visibility: visible; }\n\n            .invisible { visibility: hidden; }\n\n/* Screen Reader Only - für Barrierefreiheit */\n            .sr-only {\n              border: 0;\n              clip: rect(0, 0, 0, 0);\n              height: 1px;\n              margin: -1px;\n              overflow: hidden;\n              padding: 0;\n              position: absolute;\n              white-space: nowrap;\n              width: 1px;\n            }\n\n            .not-sr-only {\n              border: initial;\n              clip: initial;\n              height: initial;\n              margin: initial;\n              overflow: initial;\n              padding: initial;\n              position: initial;\n              white-space: initial;\n              width: initial;\n            }\n\n/* ================= RESPONSIVE BREAKPOINTS ================= */\n\n/* Small screens (640px and up) */\n            @media (min-width: 640px) {\n              .sm\\:block { display: block; }\n\n              .sm\\:inline-block { display: inline-block; }\n\n              .sm\\:inline { display: inline; }\n\n              .sm\\:flex { display: flex; }\n\n              .sm\\:inline-flex { display: inline-flex; }\n\n              .sm\\:grid { display: grid; }\n\n              .sm\\:inline-grid { display: inline-grid; }\n\n              .sm\\:table { display: table; }\n\n              .sm\\:table-cell { display: table-cell; }\n\n              .sm\\:table-row { display: table-row; }\n\n              .sm\\:hidden { display: none; }\n\n              .sm\\:visible { visibility: visible; }\n\n              .sm\\:invisible { visibility: hidden; }\n            }\n\n/* Medium screens (768px and up) */\n            @media (min-width: 768px) {\n              .md\\:block { display: block; }\n\n              .md\\:inline-block { display: inline-block; }\n\n              .md\\:inline { display: inline; }\n\n              .md\\:flex { display: flex; }\n\n              .md\\:inline-flex { display: inline-flex; }\n\n              .md\\:grid { display: grid; }\n\n              .md\\:inline-grid { display: inline-grid; }\n\n              .md\\:table { display: table; }\n\n              .md\\:table-cell { display: table-cell; }\n\n              .md\\:table-row { display: table-row; }\n\n              .md\\:hidden { display: none; }\n\n              .md\\:visible { visibility: visible; }\n\n              .md\\:invisible { visibility: hidden; }\n            }\n\n/* Large screens (1024px and up) */\n            @media (min-width: 1024px) {\n              .lg\\:block { display: block; }\n\n              .lg\\:inline-block { display: inline-block; }\n\n              .lg\\:inline { display: inline; }\n\n              .lg\\:flex { display: flex; }\n\n              .lg\\:inline-flex { display: inline-flex; }\n\n              .lg\\:grid { display: grid; }\n\n              .lg\\:inline-grid { display: inline-grid; }\n\n              .lg\\:table { display: table; }\n\n              .lg\\:table-cell { display: table-cell; }\n\n              .lg\\:table-row { display: table-row; }\n\n              .lg\\:hidden { display: none; }\n\n              .lg\\:visible { visibility: visible; }\n\n              .lg\\:invisible { visibility: hidden; }\n            }\n\n/* Extra large screens (1280px and up) */\n            @media (width >= 1280px) {\n              .xl\\:block { display: block; }\n\n              .xl\\:inline-block { display: inline-block; }\n\n              .xl\\:inline { display: inline; }\n\n              .xl\\:flex { display: flex; }\n\n              .xl\\:inline-flex { display: inline-flex; }\n\n              .xl\\:grid { display: grid; }\n\n              .xl\\:inline-grid { display: inline-grid; }\n\n              .xl\\:table { display: table; }\n\n              .xl\\:table-cell { display: table-cell; }\n\n              .xl\\:table-row { display: table-row; }\n\n              .xl\\:hidden { display: none; }\n\n              .xl\\:visible { visibility: visible; }\n\n              .xl\\:invisible { visibility: hidden; }\n            }\n\n/* 2X large screens (1536px and up) */\n            @media (width >= 1536px) {\n              .\\32xl\\:block { display: block; }\n\n              .\\32xl\\:inline-block { display: inline-block; }\n\n              .\\32xl\\:inline { display: inline; }\n\n              .\\32xl\\:flex { display: flex; }\n\n              .\\32xl\\:inline-flex { display: inline-flex; }\n\n              .\\32xl\\:grid { display: grid; }\n\n              .\\32xl\\:inline-grid { display: inline-grid; }\n\n              .\\32xl\\:table { display: table; }\n\n              .\\32xl\\:table-cell { display: table-cell; }\n\n              .\\32xl\\:table-row { display: table-row; }\n\n              .\\32xl\\:hidden { display: none; }\n\n              .\\32xl\\:visible { visibility: visible; }\n\n              .\\32xl\\:invisible { visibility: hidden; }\n            }\n\n/* ================= PRINT UTILITIES ================= */\n\n/* Print-spezifische Stile */\n            @media print {\n              .print\\:block { display: block !important; }\n\n              .print\\:inline-block { display: inline-block !important; }\n\n              .print\\:inline { display: inline !important; }\n\n              .print\\:hidden { display: none !important; }\n\n              .print\\:visible { visibility: visible !important; }\n\n              .print\\:invisible { visibility: hidden !important; }\n            }\n          }\n\n/* Importierte Datei: layout/responsive-utilities.css */\n/**\n          * Responsive Layout Utilities\n          *\n          * Advanced responsive utilities specifically designed for grid and flex layouts.\n          * This system provides responsive variants of layout-specific properties that\n          * complement the base grid and flex systems with breakpoint-aware functionality.\n          *\n          * @layer layout.responsive-utilities\n          * @version 2.0\n          * @author Design System Team\n          *\n          * FEATURES:\n          * - Responsive grid column and row utilities\n          * - Responsive flexbox direction and alignment\n          * - Responsive gap and spacing controls\n          * - Mobile-first responsive design approach\n          * - Consistent breakpoint system across all utilities\n          * - Optimized CSS output with minimal redundancy\n          * - Semantic class naming for better maintainability\n          * - Performance-optimized media queries\n          *\n          * BREAKPOINT SYSTEM:\n          * - Base: 0 and up (mobile-first)\n          * - sm: 640px and up (small tablets)\n          * - md: 768px and up (tablets)\n          * - lg: 1024px and up (laptops)\n          * - xl: 1280px and up (desktops)\n          * - 2xl: 1536px and up (large desktops)\n          *\n          * RESPONSIVE GRID UTILITIES:\n          * - sm:grid-cols-{1-12}: Responsive grid columns\n          * - md:col-span-{1-12}: Responsive column spans\n          * - lg:row-span-{1-6}: Responsive row spans\n          * - xl:grid-auto-fit: Responsive auto-fit layouts\n          * - 2xl:grid-subgrid: Responsive subgrid layouts\n          *\n          * RESPONSIVE FLEX UTILITIES:\n          * - sm:flex-row: Responsive flex direction\n          * - md:flex-col: Responsive flex direction\n          * - lg:items-center: Responsive item alignment\n          * - xl:justify-between: Responsive content justification\n          * - 2xl:flex-wrap: Responsive flex wrapping\n          *\n          * RESPONSIVE SPACING:\n          * - sm:gap-{size}: Responsive gap utilities\n          * - md:space-x-{size}: Responsive horizontal spacing\n          * - lg:space-y-{size}: Responsive vertical spacing\n          *\n          * USAGE EXAMPLES:\n          *\n          * Responsive Grid Layout:\n          * <div class=\"grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4\">\n          *   <!-- 1 column on mobile, 2 on tablet, 3 on laptop, 4 on desktop -->\n          *   <div>Item 1</div>\n          *   <div>Item 2</div>\n          *   <div>Item 3</div>\n          *   <div>Item 4</div>\n          * </div>\n          *\n          * Responsive Flex Direction:\n          * <div class=\"flex flex-col md:flex-row gap-4\">\n          *   <!-- Vertical on mobile, horizontal on tablet+ -->\n          *   <main class=\"flex-1\">Main content</main>\n          *   <aside class=\"md:w-64\">Sidebar</aside>\n          * </div>\n          *\n          * Responsive Column Spans:\n          * <div class=\"grid grid-cols-12 gap-4\">\n          *   <div class=\"col-span-12 md:col-span-8 lg:col-span-9\">\n          *     <!-- Full width on mobile, 8/12 on tablet, 9/12 on laptop -->\n          *     Main content\n          *   </div>\n          *   <div class=\"col-span-12 md:col-span-4 lg:col-span-3\">\n          *     <!-- Full width on mobile, 4/12 on tablet, 3/12 on laptop -->\n          *     Sidebar\n          *   </div>\n          * </div>\n          *\n          * Responsive Alignment:\n          * <div class=\"flex flex-col items-start md:flex-row md:items-center lg:justify-between\">\n          *   <!-- Different alignment at each breakpoint -->\n          *   <h1>Title</h1>\n          *   <nav>Navigation</nav>\n          * </div>\n          *\n          * Responsive Card Grid:\n          * <div class=\"grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-4 lg:gap-6\">\n          *   <!-- Responsive columns with responsive gaps -->\n          *   <div class=\"card\">Card 1</div>\n          *   <div class=\"card\">Card 2</div>\n          *   <div class=\"card\">Card 3</div>\n          * </div>\n          *\n          * Complex Responsive Layout:\n          * <div class=\"grid grid-cols-1 lg:grid-cols-4 gap-6\">\n          *   <header class=\"col-span-1 lg:col-span-4\">Header</header>\n          *   <main class=\"col-span-1 lg:col-span-3\">Main</main>\n          *   <aside class=\"col-span-1\">Sidebar</aside>\n          *   <footer class=\"col-span-1 lg:col-span-4\">Footer</footer>\n          * </div>\n          *\n          * BROWSER SUPPORT:\n          * - CSS Grid: All modern browsers (IE 11+ with -ms- prefix)\n          * - Flexbox: All modern browsers (IE 11+ with -ms- prefix)\n          * - Media Queries: All modern browsers (IE 9+)\n          * - Gap Property: Chrome 84+, Firefox 63+, Safari 14.1+\n          * - Subgrid: Firefox 71+, Safari 16+, Chrome 117+\n          *\n          * PERFORMANCE NOTES:\n          * - Mobile-first approach reduces CSS payload for mobile devices\n          * - Uses min-width media queries for optimal performance\n          * - Consolidated media queries reduce CSS file size\n          * - Efficient selector specificity prevents cascade conflicts\n          * - Gap properties are more performant than margin utilities\n          *\n          * ACCESSIBILITY:\n          * - Responsive layouts maintain semantic HTML structure\n          * - Grid and flex layouts preserve document flow for screen readers\n          * - Responsive changes don't affect keyboard navigation order\n          * - Visual layout changes don't impact assistive technology\n          * - Ensure content remains accessible at all breakpoints\n          *\n          * INTEGRATION:\n          * - Extends layout/grid-system.css with responsive variants\n          * - Complements layout/flex-layouts.css with responsive variants\n          * - Works with layout/spacing.css for responsive spacing\n          * - Compatible with layout/containers.css for responsive containers\n          * - Enhanced by layout/responsive.css for display utilities\n          *\n          * BEST PRACTICES:\n          * - Start with mobile-first design approach\n          * - Use semantic breakpoint names (sm, md, lg, xl, 2xl)\n          * - Test layouts across all target breakpoints\n          * - Combine grid and flex utilities for complex layouts\n          * - Use consistent spacing scales across breakpoints\n          * - Avoid excessive responsive variants that create maintenance overhead\n          * - Consider performance impact of complex responsive layouts\n          *\n          * DEBUGGING:\n          * Add responsive debug utilities:\n          * .debug-responsive::before {\n            *   content: 'mobile';\n            *   position: fixed;\n            *   top: 0%;\n            *   right: 0%;\n            *   background: red;\n            *   color: white;\n            *   padding: 0.25rem;\n            * }\n            * @media (min-width: 640px) {\n              *   .debug-responsive::before { content: 'sm'; }\n              * }\n              *\n              * MIGRATION:\n              * From older responsive systems:\n              * - .col-md-6 → .col-span-6.md:col-span-6\n              * - .flex-sm-row → .flex-col.sm:flex-row\n              * - .d-lg-block → .hidden.lg:block\n              */\n\n              @layer layout.responsive-utilities {\n/* ================= RESPONSIVE GRID UTILITIES ================= */\n\n/* Small screens (640px and up) */\n                @media (min-width: 640px) {\n                  .sm\\:grid-cols-1 { grid-template-columns: repeat(1, 1fr); }\n\n                  .sm\\:grid-cols-2 { grid-template-columns: repeat(2, 1fr); }\n\n                  .sm\\:grid-cols-3 { grid-template-columns: repeat(3, 1fr); }\n\n                  .sm\\:grid-cols-4 { grid-template-columns: repeat(4, 1fr); }\n\n                  .sm\\:grid-cols-6 { grid-template-columns: repeat(6, 1fr); }\n\n                  .sm\\:grid-cols-12 { grid-template-columns: repeat(12, 1fr); }\n\n                  .sm\\:grid-auto-fit { grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); }\n\n                  .sm\\:grid-auto-fill { grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); }\n\n                  .sm\\:col-span-1 { grid-column: span 1; }\n\n                  .sm\\:col-span-2 { grid-column: span 2; }\n\n                  .sm\\:col-span-3 { grid-column: span 3; }\n\n                  .sm\\:col-span-4 { grid-column: span 4; }\n\n                  .sm\\:col-span-6 { grid-column: span 6; }\n\n                  .sm\\:col-span-12 { grid-column: span 12; }\n\n                  .sm\\:col-span-full { grid-column: 1 / -1; }\n\n                  .sm\\:row-span-1 { grid-row: span 1; }\n\n                  .sm\\:row-span-2 { grid-row: span 2; }\n\n                  .sm\\:row-span-3 { grid-row: span 3; }\n\n                  .sm\\:row-span-4 { grid-row: span 4; }\n\n                  .sm\\:row-span-5 { grid-row: span 5; }\n\n                  .sm\\:row-span-6 { grid-row: span 6; }\n\n                  .sm\\:row-span-full { grid-row: 1 / -1; }\n                }\n\n/* Medium screens (768px and up) */\n                @media (min-width: 768px) {\n                  .md\\:grid-cols-1 { grid-template-columns: repeat(1, 1fr); }\n\n                  .md\\:grid-cols-2 { grid-template-columns: repeat(2, 1fr); }\n\n                  .md\\:grid-cols-3 { grid-template-columns: repeat(3, 1fr); }\n\n                  .md\\:grid-cols-4 { grid-template-columns: repeat(4, 1fr); }\n\n                  .md\\:grid-cols-6 { grid-template-columns: repeat(6, 1fr); }\n\n                  .md\\:grid-cols-12 { grid-template-columns: repeat(12, 1fr); }\n\n                  .md\\:grid-auto-fit { grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); }\n\n                  .md\\:grid-auto-fill { grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); }\n\n                  .md\\:col-span-1 { grid-column: span 1; }\n\n                  .md\\:col-span-2 { grid-column: span 2; }\n\n                  .md\\:col-span-3 { grid-column: span 3; }\n\n                  .md\\:col-span-4 { grid-column: span 4; }\n\n                  .md\\:col-span-6 { grid-column: span 6; }\n\n                  .md\\:col-span-12 { grid-column: span 12; }\n\n                  .md\\:col-span-full { grid-column: 1 / -1; }\n\n                  .md\\:row-span-1 { grid-row: span 1; }\n\n                  .md\\:row-span-2 { grid-row: span 2; }\n\n                  .md\\:row-span-3 { grid-row: span 3; }\n\n                  .md\\:row-span-4 { grid-row: span 4; }\n\n                  .md\\:row-span-5 { grid-row: span 5; }\n\n                  .md\\:row-span-6 { grid-row: span 6; }\n\n                  .md\\:row-span-full { grid-row: 1 / -1; }\n                }\n\n/* Large screens (1024px and up) */\n                @media (min-width: 1024px) {\n                  .lg\\:grid-cols-1 { grid-template-columns: repeat(1, 1fr); }\n\n                  .lg\\:grid-cols-2 { grid-template-columns: repeat(2, 1fr); }\n\n                  .lg\\:grid-cols-3 { grid-template-columns: repeat(3, 1fr); }\n\n                  .lg\\:grid-cols-4 { grid-template-columns: repeat(4, 1fr); }\n\n                  .lg\\:grid-cols-6 { grid-template-columns: repeat(6, 1fr); }\n\n                  .lg\\:grid-cols-12 { grid-template-columns: repeat(12, 1fr); }\n\n                  .lg\\:grid-auto-fit { grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); }\n\n                  .lg\\:grid-auto-fill { grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); }\n\n                  .lg\\:col-span-1 { grid-column: span 1; }\n\n                  .lg\\:col-span-2 { grid-column: span 2; }\n\n                  .lg\\:col-span-3 { grid-column: span 3; }\n\n                  .lg\\:col-span-4 { grid-column: span 4; }\n\n                  .lg\\:col-span-6 { grid-column: span 6; }\n\n                  .lg\\:col-span-12 { grid-column: span 12; }\n\n                  .lg\\:col-span-full { grid-column: 1 / -1; }\n\n                  .lg\\:row-span-1 { grid-row: span 1; }\n\n                  .lg\\:row-span-2 { grid-row: span 2; }\n\n                  .lg\\:row-span-3 { grid-row: span 3; }\n\n                  .lg\\:row-span-4 { grid-row: span 4; }\n\n                  .lg\\:row-span-5 { grid-row: span 5; }\n\n                  .lg\\:row-span-6 { grid-row: span 6; }\n\n                  .lg\\:row-span-full { grid-row: 1 / -1; }\n                }\n\n/* Extra large screens (1280px and up) */\n                @media (width >= 1280px) {\n                  .xl\\:grid-cols-1 { grid-template-columns: repeat(1, 1fr); }\n\n                  .xl\\:grid-cols-2 { grid-template-columns: repeat(2, 1fr); }\n\n                  .xl\\:grid-cols-3 { grid-template-columns: repeat(3, 1fr); }\n\n                  .xl\\:grid-cols-4 { grid-template-columns: repeat(4, 1fr); }\n\n                  .xl\\:grid-cols-6 { grid-template-columns: repeat(6, 1fr); }\n\n                  .xl\\:grid-cols-12 { grid-template-columns: repeat(12, 1fr); }\n\n                  .xl\\:grid-auto-fit { grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); }\n\n                  .xl\\:grid-auto-fill { grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); }\n\n                  .xl\\:col-span-1 { grid-column: span 1; }\n\n                  .xl\\:col-span-2 { grid-column: span 2; }\n\n                  .xl\\:col-span-3 { grid-column: span 3; }\n\n                  .xl\\:col-span-4 { grid-column: span 4; }\n\n                  .xl\\:col-span-6 { grid-column: span 6; }\n\n                  .xl\\:col-span-12 { grid-column: span 12; }\n\n                  .xl\\:col-span-full { grid-column: 1 / -1; }\n\n                  .xl\\:row-span-1 { grid-row: span 1; }\n\n                  .xl\\:row-span-2 { grid-row: span 2; }\n\n                  .xl\\:row-span-3 { grid-row: span 3; }\n\n                  .xl\\:row-span-4 { grid-row: span 4; }\n\n                  .xl\\:row-span-5 { grid-row: span 5; }\n\n                  .xl\\:row-span-6 { grid-row: span 6; }\n\n                  .xl\\:row-span-full { grid-row: 1 / -1; }\n                }\n\n/* 2X large screens (1536px and up) */\n                @media (width >= 1536px) {\n                  .\\32xl\\:grid-cols-1 { grid-template-columns: repeat(1, 1fr); }\n\n                  .\\32xl\\:grid-cols-2 { grid-template-columns: repeat(2, 1fr); }\n\n                  .\\32xl\\:grid-cols-3 { grid-template-columns: repeat(3, 1fr); }\n\n                  .\\32xl\\:grid-cols-4 { grid-template-columns: repeat(4, 1fr); }\n\n                  .\\32xl\\:grid-cols-6 { grid-template-columns: repeat(6, 1fr); }\n\n                  .\\32xl\\:grid-cols-12 { grid-template-columns: repeat(12, 1fr); }\n\n                  .\\32xl\\:grid-auto-fit { grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); }\n\n                  .\\32xl\\:grid-auto-fill { grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); }\n\n                  .\\32xl\\:col-span-1 { grid-column: span 1; }\n\n                  .\\32xl\\:col-span-2 { grid-column: span 2; }\n\n                  .\\32xl\\:col-span-3 { grid-column: span 3; }\n\n                  .\\32xl\\:col-span-4 { grid-column: span 4; }\n\n                  .\\32xl\\:col-span-6 { grid-column: span 6; }\n\n                  .\\32xl\\:col-span-12 { grid-column: span 12; }\n\n                  .\\32xl\\:col-span-full { grid-column: 1 / -1; }\n\n                  .\\32xl\\:row-span-1 { grid-row: span 1; }\n\n                  .\\32xl\\:row-span-2 { grid-row: span 2; }\n\n                  .\\32xl\\:row-span-3 { grid-row: span 3; }\n\n                  .\\32xl\\:row-span-4 { grid-row: span 4; }\n\n                  .\\32xl\\:row-span-5 { grid-row: span 5; }\n\n                  .\\32xl\\:row-span-6 { grid-row: span 6; }\n\n                  .\\32xl\\:row-span-full { grid-row: 1 / -1; }\n                }\n              }\n\n\n/* Importierte Datei: layout/spacing.css */\n/**\n              * Spacing Utilities System - Token-Based Version\n              *\n              * A comprehensive spacing system using design tokens for consistent gap, margin,\n              * and padding utilities. This version uses CSS custom properties from tokens/spacing.css\n              * for better maintainability and consistency.\n              *\n              * @layer layout.spacing\n              * @version 3.0\n              * @author Design System Team\n              */\n\n              @layer layout.spacing {\n/* ================= GAP UTILITIES ================= */\n\n/* Gap für Grid- und Flex-Layouts */\n                .gap-0 { gap: var(--space-0, 0); }\n\n                .gap-px { gap: var(--space-px, 1px); }\n\n                .gap-1 { gap: var(--space-1, 0.25rem); }\n\n                .gap-2 { gap: var(--space-2, 0.5rem); }\n\n                .gap-3 { gap: var(--space-3, 0.75rem); }\n\n                .gap-4 { gap: var(--space-4, 1rem); }\n\n                .gap-5 { gap: var(--space-5, 1.25rem); }\n\n                .gap-6 { gap: var(--space-6, 1.5rem); }\n\n                .gap-7 { gap: var(--space-7, 1.75rem); }\n\n                .gap-8 { gap: var(--space-8, 2rem); }\n\n                .gap-9 { gap: var(--space-9, 2.25rem); }\n\n                .gap-10 { gap: var(--space-10, 2.5rem); }\n\n                .gap-11 { gap: var(--space-11, 2.75rem); }\n\n                .gap-12 { gap: var(--space-12, 3rem); }\n\n                .gap-14 { gap: var(--space-14, 3.5rem); }\n\n                .gap-16 { gap: var(--space-16, 4rem); }\n\n                .gap-20 { gap: var(--space-20, 5rem); }\n\n                .gap-24 { gap: var(--space-24, 6rem); }\n\n                .gap-28 { gap: var(--space-28, 7rem); }\n\n                .gap-32 { gap: var(--space-32, 8rem); }\n\n                .gap-36 { gap: var(--space-36, 9rem); }\n\n                .gap-40 { gap: var(--space-40, 10rem); }\n\n                .gap-44 { gap: var(--space-44, 11rem); }\n\n                .gap-48 { gap: var(--space-48, 12rem); }\n\n                .gap-52 { gap: var(--space-52, 13rem); }\n\n                .gap-56 { gap: var(--space-56, 14rem); }\n\n                .gap-60 { gap: var(--space-60, 15rem); }\n\n                .gap-64 { gap: var(--space-64, 16rem); }\n\n                .gap-72 { gap: var(--space-72, 18rem); }\n\n                .gap-80 { gap: var(--space-80, 20rem); }\n\n                .gap-96 { gap: var(--space-96, 24rem); }\n\n/* Semantic Gap Utilities */\n                .gap-xs { gap: var(--space-xs, 0.75rem); }\n\n                .gap-sm { gap: var(--space-sm, 1.25rem); }\n\n                .gap-md { gap: var(--space-md, 1.75rem); }\n\n                .gap-lg { gap: var(--space-lg, 2.25rem); }\n\n                .gap-xl { gap: var(--space-xl, 3rem); }\n\n                .gap-2xl { gap: var(--space-2xl, 4rem); }\n\n                .gap-3xl { gap: var(--space-3xl, 5rem); }\n\n/* Horizontale Gaps (column-gap) */\n                .gap-x-0 { column-gap: var(--space-0, 0); }\n\n                .gap-x-px { column-gap: var(--space-px, 1px); }\n\n                .gap-x-1 { column-gap: var(--space-1, 0.25rem); }\n\n                .gap-x-2 { column-gap: var(--space-2, 0.5rem); }\n\n                .gap-x-3 { column-gap: var(--space-3, 0.75rem); }\n\n                .gap-x-4 { column-gap: var(--space-4, 1rem); }\n\n                .gap-x-5 { column-gap: var(--space-5, 1.25rem); }\n\n                .gap-x-6 { column-gap: var(--space-6, 1.5rem); }\n\n                .gap-x-8 { column-gap: var(--space-8, 2rem); }\n\n                .gap-x-10 { column-gap: var(--space-10, 2.5rem); }\n\n                .gap-x-12 { column-gap: var(--space-12, 3rem); }\n\n                .gap-x-16 { column-gap: var(--space-16, 4rem); }\n\n                .gap-x-20 { column-gap: var(--space-20, 5rem); }\n\n                .gap-x-24 { column-gap: var(--space-24, 6rem); }\n\n                .gap-x-32 { column-gap: var(--space-32, 8rem); }\n\n/* Vertikale Gaps (row-gap) */\n                .gap-y-0 { row-gap: var(--space-0, 0); }\n\n                .gap-y-px { row-gap: var(--space-px, 1px); }\n\n                .gap-y-1 { row-gap: var(--space-1, 0.25rem); }\n\n                .gap-y-2 { row-gap: var(--space-2, 0.5rem); }\n\n                .gap-y-3 { row-gap: var(--space-3, 0.75rem); }\n\n                .gap-y-4 { row-gap: var(--space-4, 1rem); }\n\n                .gap-y-5 { row-gap: var(--space-5, 1.25rem); }\n\n                .gap-y-6 { row-gap: var(--space-6, 1.5rem); }\n\n                .gap-y-8 { row-gap: var(--space-8, 2rem); }\n\n                .gap-y-10 { row-gap: var(--space-10, 2.5rem); }\n\n                .gap-y-12 { row-gap: var(--space-12, 3rem); }\n\n                .gap-y-16 { row-gap: var(--space-16, 4rem); }\n\n                .gap-y-20 { row-gap: var(--space-20, 5rem); }\n\n                .gap-y-24 { row-gap: var(--space-24, 6rem); }\n\n                .gap-y-32 { row-gap: var(--space-32, 8rem); }\n\n/* ================= MARGIN UTILITIES ================= */\n\n/* Margin in alle Richtungen */\n                .m-0 { margin: var(--space-0, 0); }\n\n                .m-px { margin: var(--space-px, 1px); }\n\n                .m-1 { margin: var(--space-1, 0.25rem); }\n\n                .m-2 { margin: var(--space-2, 0.5rem); }\n\n                .m-3 { margin: var(--space-3, 0.75rem); }\n\n                .m-4 { margin: var(--space-4, 1rem); }\n\n                .m-5 { margin: var(--space-5, 1.25rem); }\n\n                .m-6 { margin: var(--space-6, 1.5rem); }\n\n                .m-8 { margin: var(--space-8, 2rem); }\n\n                .m-10 { margin: var(--space-10, 2.5rem); }\n\n                .m-12 { margin: var(--space-12, 3rem); }\n\n                .m-16 { margin: var(--space-16, 4rem); }\n\n                .m-20 { margin: var(--space-20, 5rem); }\n\n                .m-24 { margin: var(--space-24, 6rem); }\n\n                .m-32 { margin: var(--space-32, 8rem); }\n\n                .m-auto { margin: auto; }\n\n/* Horizontale Margins */\n                .mx-0 { margin-left: var(--space-0, 0); margin-right: var(--space-0, 0); }\n\n                .mx-px { margin-left: var(--space-px, 1px); margin-right: var(--space-px, 1px); }\n\n                .mx-1 { margin-left: var(--space-1, 0.25rem); margin-right: var(--space-1, 0.25rem); }\n\n                .mx-2 { margin-left: var(--space-2, 0.5rem); margin-right: var(--space-2, 0.5rem); }\n\n                .mx-3 { margin-left: var(--space-3, 0.75rem); margin-right: var(--space-3, 0.75rem); }\n\n                .mx-4 { margin-left: var(--space-4, 1rem); margin-right: var(--space-4, 1rem); }\n\n                .mx-5 { margin-left: var(--space-5, 1.25rem); margin-right: var(--space-5, 1.25rem); }\n\n                .mx-6 { margin-left: var(--space-6, 1.5rem); margin-right: var(--space-6, 1.5rem); }\n\n                .mx-8 { margin-left: var(--space-8, 2rem); margin-right: var(--space-8, 2rem); }\n\n                .mx-10 { margin-left: var(--space-10, 2.5rem); margin-right: var(--space-10, 2.5rem); }\n\n                .mx-12 { margin-left: var(--space-12, 3rem); margin-right: var(--space-12, 3rem); }\n\n                .mx-16 { margin-left: var(--space-16, 4rem); margin-right: var(--space-16, 4rem); }\n\n                .mx-20 { margin-left: var(--space-20, 5rem); margin-right: var(--space-20, 5rem); }\n\n                .mx-24 { margin-left: var(--space-24, 6rem); margin-right: var(--space-24, 6rem); }\n\n                .mx-32 { margin-left: var(--space-32, 8rem); margin-right: var(--space-32, 8rem); }\n\n                .mx-auto { margin-left: auto; margin-right: auto; }\n\n/* Vertikale Margins */\n                .my-0 { margin-bottom: var(--space-0, 0); margin-top: var(--space-0, 0); }\n\n                .my-px { margin-bottom: var(--space-px, 1px); margin-top: var(--space-px, 1px); }\n\n                .my-1 { margin-bottom: var(--space-1, 0.25rem); margin-top: var(--space-1, 0.25rem); }\n\n                .my-2 { margin-bottom: var(--space-2, 0.5rem); margin-top: var(--space-2, 0.5rem); }\n\n                .my-3 { margin-bottom: var(--space-3, 0.75rem); margin-top: var(--space-3, 0.75rem); }\n\n                .my-4 { margin-bottom: var(--space-4, 1rem); margin-top: var(--space-4, 1rem); }\n\n                .my-5 { margin-bottom: var(--space-5, 1.25rem); margin-top: var(--space-5, 1.25rem); }\n\n                .my-6 { margin-bottom: var(--space-6, 1.5rem); margin-top: var(--space-6, 1.5rem); }\n\n                .my-8 { margin-bottom: var(--space-8, 2rem); margin-top: var(--space-8, 2rem); }\n\n                .my-10 { margin-bottom: var(--space-10, 2.5rem); margin-top: var(--space-10, 2.5rem); }\n\n                .my-12 { margin-bottom: var(--space-12, 3rem); margin-top: var(--space-12, 3rem); }\n\n                .my-16 { margin-bottom: var(--space-16, 4rem); margin-top: var(--space-16, 4rem); }\n\n                .my-20 { margin-bottom: var(--space-20, 5rem); margin-top: var(--space-20, 5rem); }\n\n                .my-24 { margin-bottom: var(--space-24, 6rem); margin-top: var(--space-24, 6rem); }\n\n                .my-32 { margin-bottom: var(--space-32, 8rem); margin-top: var(--space-32, 8rem); }\n\n                .my-auto { margin-bottom: auto; margin-top: auto; }\n\n/* Einzelne Margin-Richtungen */\n                .mt-0 { margin-top: var(--space-0, 0); }\n\n                .mt-px { margin-top: var(--space-px, 1px); }\n\n                .mt-1 { margin-top: var(--space-1, 0.25rem); }\n\n                .mt-2 { margin-top: var(--space-2, 0.5rem); }\n\n                .mt-3 { margin-top: var(--space-3, 0.75rem); }\n\n                .mt-4 { margin-top: var(--space-4, 1rem); }\n\n                .mt-5 { margin-top: var(--space-5, 1.25rem); }\n\n                .mt-6 { margin-top: var(--space-6, 1.5rem); }\n\n                .mt-8 { margin-top: var(--space-8, 2rem); }\n\n                .mt-10 { margin-top: var(--space-10, 2.5rem); }\n\n                .mt-12 { margin-top: var(--space-12, 3rem); }\n\n                .mt-16 { margin-top: var(--space-16, 4rem); }\n\n                .mt-20 { margin-top: var(--space-20, 5rem); }\n\n                .mt-24 { margin-top: var(--space-24, 6rem); }\n\n                .mt-32 { margin-top: var(--space-32, 8rem); }\n\n                .mt-auto { margin-top: auto; }\n\n                .mr-0 { margin-right: var(--space-0, 0); }\n\n                .mr-px { margin-right: var(--space-px, 1px); }\n\n                .mr-1 { margin-right: var(--space-1, 0.25rem); }\n\n                .mr-2 { margin-right: var(--space-2, 0.5rem); }\n\n                .mr-3 { margin-right: var(--space-3, 0.75rem); }\n\n                .mr-4 { margin-right: var(--space-4, 1rem); }\n\n                .mr-5 { margin-right: var(--space-5, 1.25rem); }\n\n                .mr-6 { margin-right: var(--space-6, 1.5rem); }\n\n                .mr-8 { margin-right: var(--space-8, 2rem); }\n\n                .mr-10 { margin-right: var(--space-10, 2.5rem); }\n\n                .mr-12 { margin-right: var(--space-12, 3rem); }\n\n                .mr-16 { margin-right: var(--space-16, 4rem); }\n\n                .mr-20 { margin-right: var(--space-20, 5rem); }\n\n                .mr-24 { margin-right: var(--space-24, 6rem); }\n\n                .mr-32 { margin-right: var(--space-32, 8rem); }\n\n                .mr-auto { margin-right: auto; }\n\n                .mb-0 { margin-bottom: var(--space-0, 0); }\n\n                .mb-px { margin-bottom: var(--space-px, 1px); }\n\n                .mb-1 { margin-bottom: var(--space-1, 0.25rem); }\n\n                .mb-2 { margin-bottom: var(--space-2, 0.5rem); }\n\n                .mb-3 { margin-bottom: var(--space-3, 0.75rem); }\n\n                .mb-4 { margin-bottom: var(--space-4, 1rem); }\n\n                .mb-5 { margin-bottom: var(--space-5, 1.25rem); }\n\n                .mb-6 { margin-bottom: var(--space-6, 1.5rem); }\n\n                .mb-8 { margin-bottom: var(--space-8, 2rem); }\n\n                .mb-10 { margin-bottom: var(--space-10, 2.5rem); }\n\n                .mb-12 { margin-bottom: var(--space-12, 3rem); }\n\n                .mb-16 { margin-bottom: var(--space-16, 4rem); }\n\n                .mb-20 { margin-bottom: var(--space-20, 5rem); }\n\n                .mb-24 { margin-bottom: var(--space-24, 6rem); }\n\n                .mb-32 { margin-bottom: var(--space-32, 8rem); }\n\n                .mb-auto { margin-bottom: auto; }\n\n                .ml-0 { margin-left: var(--space-0, 0); }\n\n                .ml-px { margin-left: var(--space-px, 1px); }\n\n                .ml-1 { margin-left: var(--space-1, 0.25rem); }\n\n                .ml-2 { margin-left: var(--space-2, 0.5rem); }\n\n                .ml-3 { margin-left: var(--space-3, 0.75rem); }\n\n                .ml-4 { margin-left: var(--space-4, 1rem); }\n\n                .ml-5 { margin-left: var(--space-5, 1.25rem); }\n\n                .ml-6 { margin-left: var(--space-6, 1.5rem); }\n\n                .ml-8 { margin-left: var(--space-8, 2rem); }\n\n                .ml-10 { margin-left: var(--space-10, 2.5rem); }\n\n                .ml-12 { margin-left: var(--space-12, 3rem); }\n\n                .ml-16 { margin-left: var(--space-16, 4rem); }\n\n                .ml-20 { margin-left: var(--space-20, 5rem); }\n\n                .ml-24 { margin-left: var(--space-24, 6rem); }\n\n                .ml-32 { margin-left: var(--space-32, 8rem); }\n\n                .ml-auto { margin-left: auto; }\n\n/* ================= NEGATIVE MARGINS ================= */\n\n/* Negative Margins für Overlapping-Layouts */\n                .-m-1 { margin: calc(-1 * var(--space-1, 0.25rem)); }\n\n                .-m-2 { margin: calc(-1 * var(--space-2, 0.5rem)); }\n\n                .-m-3 { margin: calc(-1 * var(--space-3, 0.75rem)); }\n\n                .-m-4 { margin: calc(-1 * var(--space-4, 1rem)); }\n\n                .-m-5 { margin: calc(-1 * var(--space-5, 1.25rem)); }\n\n                .-m-6 { margin: calc(-1 * var(--space-6, 1.5rem)); }\n\n                .-m-8 { margin: calc(-1 * var(--space-8, 2rem)); }\n\n                .-m-10 { margin: calc(-1 * var(--space-10, 2.5rem)); }\n\n                .-m-12 { margin: calc(-1 * var(--space-12, 3rem)); }\n\n                .-m-16 { margin: calc(-1 * var(--space-16, 4rem)); }\n\n                .-m-20 { margin: calc(-1 * var(--space-20, 5rem)); }\n\n                .-m-24 { margin: calc(-1 * var(--space-24, 6rem)); }\n\n                .-m-32 { margin: calc(-1 * var(--space-32, 8rem)); }\n\n/* ================= PADDING UTILITIES ================= */\n\n/* Padding in alle Richtungen */\n                .p-0 { padding: var(--space-0, 0); }\n\n                .p-px { padding: var(--space-px, 1px); }\n\n                .p-1 { padding: var(--space-1, 0.25rem); }\n\n                .p-2 { padding: var(--space-2, 0.5rem); }\n\n                .p-3 { padding: var(--space-3, 0.75rem); }\n\n                .p-4 { padding: var(--space-4, 1rem); }\n\n                .p-5 { padding: var(--space-5, 1.25rem); }\n\n                .p-6 { padding: var(--space-6, 1.5rem); }\n\n                .p-8 { padding: var(--space-8, 2rem); }\n\n                .p-10 { padding: var(--space-10, 2.5rem); }\n\n                .p-12 { padding: var(--space-12, 3rem); }\n\n                .p-16 { padding: var(--space-16, 4rem); }\n\n                .p-20 { padding: var(--space-20, 5rem); }\n\n                .p-24 { padding: var(--space-24, 6rem); }\n\n                .p-32 { padding: var(--space-32, 8rem); }\n\n/* Horizontales Padding */\n                .px-0 { padding-left: var(--space-0, 0); padding-right: var(--space-0, 0); }\n\n                .px-px { padding-left: var(--space-px, 1px); padding-right: var(--space-px, 1px); }\n\n                .px-1 { padding-left: var(--space-1, 0.25rem); padding-right: var(--space-1, 0.25rem); }\n\n                .px-2 { padding-left: var(--space-2, 0.5rem); padding-right: var(--space-2, 0.5rem); }\n\n                .px-3 { padding-left: var(--space-3, 0.75rem); padding-right: var(--space-3, 0.75rem); }\n\n                .px-4 { padding-left: var(--space-4, 1rem); padding-right: var(--space-4, 1rem); }\n\n                .px-5 { padding-left: var(--space-5, 1.25rem); padding-right: var(--space-5, 1.25rem); }\n\n                .px-6 { padding-left: var(--space-6, 1.5rem); padding-right: var(--space-6, 1.5rem); }\n\n                .px-8 { padding-left: var(--space-8, 2rem); padding-right: var(--space-8, 2rem); }\n\n                .px-10 { padding-left: var(--space-10, 2.5rem); padding-right: var(--space-10, 2.5rem); }\n\n                .px-12 { padding-left: var(--space-12, 3rem); padding-right: var(--space-12, 3rem); }\n\n                .px-16 { padding-left: var(--space-16, 4rem); padding-right: var(--space-16, 4rem); }\n\n                .px-20 { padding-left: var(--space-20, 5rem); padding-right: var(--space-20, 5rem); }\n\n                .px-24 { padding-left: var(--space-24, 6rem); padding-right: var(--space-24, 6rem); }\n\n                .px-32 { padding-left: var(--space-32, 8rem); padding-right: var(--space-32, 8rem); }\n\n/* Vertikales Padding */\n                .py-0 { padding-bottom: var(--space-0, 0); padding-top: var(--space-0, 0); }\n\n                .py-px { padding-bottom: var(--space-px, 1px); padding-top: var(--space-px, 1px); }\n\n                .py-1 { padding-bottom: var(--space-1, 0.25rem); padding-top: var(--space-1, 0.25rem); }\n\n                .py-2 { padding-bottom: var(--space-2, 0.5rem); padding-top: var(--space-2, 0.5rem); }\n\n                .py-3 { padding-bottom: var(--space-3, 0.75rem); padding-top: var(--space-3, 0.75rem); }\n\n                .py-4 { padding-bottom: var(--space-4, 1rem); padding-top: var(--space-4, 1rem); }\n\n                .py-5 { padding-bottom: var(--space-5, 1.25rem); padding-top: var(--space-5, 1.25rem); }\n\n                .py-6 { padding-bottom: var(--space-6, 1.5rem); padding-top: var(--space-6, 1.5rem); }\n\n                .py-8 { padding-bottom: var(--space-8, 2rem); padding-top: var(--space-8, 2rem); }\n\n                .py-10 { padding-bottom: var(--space-10, 2.5rem); padding-top: var(--space-10, 2.5rem); }\n\n                .py-12 { padding-bottom: var(--space-12, 3rem); padding-top: var(--space-12, 3rem); }\n\n                .py-16 { padding-bottom: var(--space-16, 4rem); padding-top: var(--space-16, 4rem); }\n\n                .py-20 { padding-bottom: var(--space-20, 5rem); padding-top: var(--space-20, 5rem); }\n\n                .py-24 { padding-bottom: var(--space-24, 6rem); padding-top: var(--space-24, 6rem); }\n\n                .py-32 { padding-bottom: var(--space-32, 8rem); padding-top: var(--space-32, 8rem); }\n\n/* Einzelne Padding-Richtungen */\n                .pt-0 { padding-top: var(--space-0, 0); }\n\n                .pt-px { padding-top: var(--space-px, 1px); }\n\n                .pt-1 { padding-top: var(--space-1, 0.25rem); }\n\n                .pt-2 { padding-top: var(--space-2, 0.5rem); }\n\n                .pt-3 { padding-top: var(--space-3, 0.75rem); }\n\n                .pt-4 { padding-top: var(--space-4, 1rem); }\n\n                .pt-5 { padding-top: var(--space-5, 1.25rem); }\n\n                .pt-6 { padding-top: var(--space-6, 1.5rem); }\n\n                .pt-8 { padding-top: var(--space-8, 2rem); }\n\n                .pt-10 { padding-top: var(--space-10, 2.5rem); }\n\n                .pt-12 { padding-top: var(--space-12, 3rem); }\n\n                .pt-16 { padding-top: var(--space-16, 4rem); }\n\n                .pt-20 { padding-top: var(--space-20, 5rem); }\n\n                .pt-24 { padding-top: var(--space-24, 6rem); }\n\n                .pt-32 { padding-top: var(--space-32, 8rem); }\n\n                .pr-0 { padding-right: var(--space-0, 0); }\n\n                .pr-px { padding-right: var(--space-px, 1px); }\n\n                .pr-1 { padding-right: var(--space-1, 0.25rem); }\n\n                .pr-2 { padding-right: var(--space-2, 0.5rem); }\n\n                .pr-3 { padding-right: var(--space-3, 0.75rem); }\n\n                .pr-4 { padding-right: var(--space-4, 1rem); }\n\n                .pr-5 { padding-right: var(--space-5, 1.25rem); }\n\n                .pr-6 { padding-right: var(--space-6, 1.5rem); }\n\n                .pr-8 { padding-right: var(--space-8, 2rem); }\n\n                .pr-10 { padding-right: var(--space-10, 2.5rem); }\n\n                .pr-12 { padding-right: var(--space-12, 3rem); }\n\n                .pr-16 { padding-right: var(--space-16, 4rem); }\n\n                .pr-20 { padding-right: var(--space-20, 5rem); }\n\n                .pr-24 { padding-right: var(--space-24, 6rem); }\n\n                .pr-32 { padding-right: var(--space-32, 8rem); }\n\n                .pb-0 { padding-bottom: var(--space-0, 0); }\n\n                .pb-px { padding-bottom: var(--space-px, 1px); }\n\n                .pb-1 { padding-bottom: var(--space-1, 0.25rem); }\n\n                .pb-2 { padding-bottom: var(--space-2, 0.5rem); }\n\n                .pb-3 { padding-bottom: var(--space-3, 0.75rem); }\n\n                .pb-4 { padding-bottom: var(--space-4, 1rem); }\n\n                .pb-5 { padding-bottom: var(--space-5, 1.25rem); }\n\n                .pb-6 { padding-bottom: var(--space-6, 1.5rem); }\n\n                .pb-8 { padding-bottom: var(--space-8, 2rem); }\n\n                .pb-10 { padding-bottom: var(--space-10, 2.5rem); }\n\n                .pb-12 { padding-bottom: var(--space-12, 3rem); }\n\n                .pb-16 { padding-bottom: var(--space-16, 4rem); }\n\n                .pb-20 { padding-bottom: var(--space-20, 5rem); }\n\n                .pb-24 { padding-bottom: var(--space-24, 6rem); }\n\n                .pb-32 { padding-bottom: var(--space-32, 8rem); }\n\n                .pl-0 { padding-left: var(--space-0, 0); }\n\n                .pl-px { padding-left: var(--space-px, 1px); }\n\n                .pl-1 { padding-left: var(--space-1, 0.25rem); }\n\n                .pl-2 { padding-left: var(--space-2, 0.5rem); }\n\n                .pl-3 { padding-left: var(--space-3, 0.75rem); }\n\n                .pl-4 { padding-left: var(--space-4, 1rem); }\n\n                .pl-5 { padding-left: var(--space-5, 1.25rem); }\n\n                .pl-6 { padding-left: var(--space-6, 1.5rem); }\n\n                .pl-8 { padding-left: var(--space-8, 2rem); }\n\n                .pl-10 { padding-left: var(--space-10, 2.5rem); }\n\n                .pl-12 { padding-left: var(--space-12, 3rem); }\n\n                .pl-16 { padding-left: var(--space-16, 4rem); }\n\n                .pl-20 { padding-left: var(--space-20, 5rem); }\n\n                .pl-24 { padding-left: var(--space-24, 6rem); }\n\n                .pl-32 { padding-left: var(--space-32, 8rem); }\n              }\n\n\n/* ================= LAYOUT FOUNDATION ================= */\n\n/*\n              * Basis-Layout-Definitionen\n              * Enthält grundlegende Variablen und Konfigurationen für das Layout-System\n              */\n              @layer layout {\n                :root {\n/* Raster-Konfiguration für grid-system.css */\n                  --grid-columns: 12;\n                  --grid-gutter: var(--space-4, 1rem);\n                  --grid-gutter-sm: var(--space-2, 0.5rem);\n                  --grid-gutter-md: var(--space-4, 1rem);\n                  --grid-gutter-lg: var(--space-6, 1.5rem);\n                  --grid-gutter-xl: var(--space-8, 2rem);\n\n/* Container-Abstände für containers.css */\n                  --container-padding-sm: var(--space-2, 0.5rem);\n                  --container-padding-md: var(--space-4, 1rem);\n                  --container-padding-lg: var(--space-6, 1.5rem);\n                }\n              }\n\n/* ================= LAYOUT UTILITIES ================= */\n\n/*\n              * Layout-Utilities\n              * Häufig benötigte Hilfsklassen für Layout-Anpassungen\n              */\n              @layer layout.utilities {\n/* Dimension-Utilities */\n                .w-full { width: 100%; }\n\n                .h-full { height: 100%; }\n\n                .min-h-screen { min-height: 100%; }\n\n                .min-h-dvh { min-height: 100%dvh; }\n\n                .max-w-full { max-width: 100%; }\n\n/* Positionierung */\n                .mx-auto { margin-inline: auto; }\n\n                .my-auto { margin-block: auto; }\n\n/* Display */\n                .block { display: block; }\n\n                .inline { display: inline; }\n\n                .inline-block { display: inline-block; }\n\n                .hidden { display: none; }\n\n/* Overflow */\n                .overflow-hidden { overflow: hidden; }\n\n                .overflow-auto { overflow: auto; }\n\n                .overflow-x-auto { overflow-x: auto; }\n\n                .overflow-y-auto { overflow-y: auto; }\n              }\n\n/* Datei: layout/grid-system.css */\n/**\n              * Grid Layout System\n              *\n              * A comprehensive 12-column grid system with utility classes for modern web layouts.\n              * This system provides flexible grid layouts using CSS Grid with semantic class names\n              * and responsive capabilities.\n              *\n              * @layer layout.grid\n              * @version 2.0\n              * @author Design System Team\n              *\n              * FEATURES:\n              * - 12-column grid system with flexible column spans\n              * - Auto-fit and auto-fill grid layouts for responsive cards\n              * - Subgrid support for nested layouts\n              * - Semantic utility classes (.grid, .grid-cols-*, .col-span-*)\n              * - CSS Grid native implementation (no flexbox fallbacks)\n              * - Works with spacing.css for gap utilities\n              * - Compatible with responsive-utilities.css for breakpoint variants\n              *\n              * GRID CLASSES:\n              * - .grid: Base grid container\n              * - .grid-cols-{1-12}: Define number of columns\n              * - .col-span-{1-12}: Span multiple columns\n              * - .col-span-full: Span all available columns\n              * - .row-span-{1-6}: Span multiple rows\n              * - .grid-auto-fit: Auto-fit responsive layout\n              * - .grid-auto-fill: Auto-fill responsive layout\n              *\n              * LAYOUT VARIANTS:\n              * - .layout-grid: Semantic grid with default gutter\n              * - .layout-grid-{2,3,4,6}: Predefined column layouts\n              * - .layout-grid-auto-fit: Responsive card layouts\n              *\n              * SUBGRID SUPPORT:\n              * - .grid-subgrid: Inherit parent grid columns\n              * - .row-subgrid: Inherit parent grid rows\n              *\n              * USAGE EXAMPLES:\n              *\n              * Basic Grid:\n              * <div class=\"grid grid-cols-3 gap-4\">\n              *   <div>Item 1</div>\n              *   <div>Item 2</div>\n              *   <div>Item 3</div>\n              * </div>\n              *\n              * Responsive Card Layout:\n              * <div class=\"grid-auto-fit gap-6\">\n              *   <div class=\"card\">Card 1</div>\n              *   <div class=\"card\">Card 2</div>\n              *   <div class=\"card\">Card 3</div>\n              * </div>\n              *\n              * Complex Layout:\n              * <div class=\"grid grid-cols-12 gap-4\">\n              *   <div class=\"col-span-8\">Main content</div>\n              *   <div class=\"col-span-4\">Sidebar</div>\n              *   <div class=\"col-span-full\">Footer</div>\n              * </div>\n              *\n              * Subgrid Example:\n              * <div class=\"grid grid-cols-4 gap-4\">\n              *   <div class=\"col-span-2 grid-subgrid gap-2\">\n              *     <div>Nested 1</div>\n              *     <div>Nested 2</div>\n              *   </div>\n              * </div>\n              *\n              * RESPONSIVE USAGE:\n              * Use with responsive-utilities.css for breakpoint-specific layouts:\n              * <div class=\"grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4\">\n              *   <!-- Responsive grid that adapts to screen size -->\n              * </div>\n              *\n              * BROWSER SUPPORT:\n              * - CSS Grid: All modern browsers (IE 11+ with -ms- prefix)\n              * - Subgrid: Firefox 71+, Safari 16+, Chrome 117+\n              * - Container Queries: Chrome 105+, Firefox 110+, Safari 16+\n              *\n              * PERFORMANCE NOTES:\n              * - CSS Grid is highly optimized for layout performance\n              * - Subgrid reduces layout recalculations\n              * - Auto-fit/auto-fill are efficient for responsive designs\n              * - Use gap properties instead of margins for better performance\n              *\n              * ACCESSIBILITY:\n              * - Grid layouts maintain document flow for screen readers\n              * - Use semantic HTML elements within grid containers\n              * - Ensure logical tab order is preserved\n              * - Test with keyboard navigation\n              *\n              * INTEGRATION:\n              * - Works seamlessly with layout/containers.css for container sizing\n              * - Combines with layout/spacing.css for gap utilities\n              * - Enhanced by layout/responsive-utilities.css for responsive variants\n              * - Compatible with layout/flex-layouts.css for hybrid layouts\n              */\n\n              @layer layout.grid {\n/* ================= GRID-LAYOUT-SYSTEM ================= */\n\n/* Basierend auf dem 12-Spalten-Grid-System, mit einheitlichen Abständen */\n                .layout-grid {\n                  display: grid;\n                  gap: var(--grid-gutter, 1rem);\n                  grid-template-columns: repeat(var(--grid-columns, 12), 1fr);\n                }\n\n/* Varianten mit unterschiedlichen Spaltenanzahlen */\n                .layout-grid-2 {\n                  display: grid;\n                  gap: var(--grid-gutter, 1rem);\n                  grid-template-columns: repeat(2, 1fr);\n                }\n\n                .layout-grid-3 {\n                  display: grid;\n                  gap: var(--grid-gutter, 1rem);\n                  grid-template-columns: repeat(3, 1fr);\n                }\n\n                .layout-grid-4 {\n                  display: grid;\n                  gap: var(--grid-gutter, 1rem);\n                  grid-template-columns: repeat(4, 1fr);\n                }\n\n                .layout-grid-6 {\n                  display: grid;\n                  gap: var(--grid-gutter, 1rem);\n                  grid-template-columns: repeat(6, 1fr);\n                }\n\n/* Auto-Fit Grid für responsive Karten-Layouts */\n                .layout-grid-auto-fit {\n                  display: grid;\n                  gap: var(--grid-gutter, 1rem);\n                  grid-template-columns: repeat(auto-fit, minmax(var(--grid-auto-fit-min, 200px), 1fr));\n                }\n\n/* ================= SUBGRID / NESTED ================= */\n\n/* Komponenten für verschachtelte Grid-Layouts mit Subgrid */\n                .grid-subgrid {\n                  display: grid;\n                  grid-template-columns: subgrid;\n                }\n\n                .row-subgrid {\n                  display: grid;\n                  grid-template-rows: subgrid;\n                }\n\n/* ================= GRID UTILITIES ================= */\n\n/* Grid-Spalten */\n                .grid { display: grid; }\n\n                .grid-cols-1 { grid-template-columns: repeat(1, 1fr); }\n\n                .grid-cols-2 { grid-template-columns: repeat(2, 1fr); }\n\n                .grid-cols-3 { grid-template-columns: repeat(3, 1fr); }\n\n                .grid-cols-4 { grid-template-columns: repeat(4, 1fr); }\n\n                .grid-cols-6 { grid-template-columns: repeat(6, 1fr); }\n\n                .grid-cols-12 { grid-template-columns: repeat(12, 1fr); }\n\n                .grid-auto-fit { grid-template-columns: repeat(auto-fit, minmax(var(--grid-auto-fit-min, 200px), 1fr)); }\n\n                .grid-auto-fill { grid-template-columns: repeat(auto-fill, minmax(var(--grid-auto-fill-min, 200px), 1fr)); }\n\n/* Spaltenspannen für Grid-Items */\n                .col-span-1 { grid-column: span 1; }\n\n                .col-span-2 { grid-column: span 2; }\n\n                .col-span-3 { grid-column: span 3; }\n\n                .col-span-4 { grid-column: span 4; }\n\n                .col-span-6 { grid-column: span 6; }\n\n                .col-span-12 { grid-column: span 12; }\n\n                .col-span-full { grid-column: 1 / -1; }\n\n/* Grid-Zeilen */\n                .grid-rows-1 { grid-template-rows: repeat(1, 1fr); }\n\n                .grid-rows-2 { grid-template-rows: repeat(2, 1fr); }\n\n                .grid-rows-3 { grid-template-rows: repeat(3, 1fr); }\n\n                .grid-rows-4 { grid-template-rows: repeat(4, 1fr); }\n\n                .grid-rows-5 { grid-template-rows: repeat(5, 1fr); }\n\n                .grid-rows-6 { grid-template-rows: repeat(6, 1fr); }\n\n/* Zeilen-Span */\n                .row-span-1 { grid-row: span 1; }\n\n                .row-span-2 { grid-row: span 2; }\n\n                .row-span-3 { grid-row: span 3; }\n\n                .row-span-4 { grid-row: span 4; }\n\n                .row-span-5 { grid-row: span 5; }\n\n                .row-span-6 { grid-row: span 6; }\n\n                .row-span-full { grid-row: 1 / -1; }\n              }\n\n/* Datei: layout/flex-layouts.css */\n/**\n              * Flex Layout System\n              *\n              * A comprehensive flexbox-based layout system providing flexible and responsive\n              * layout utilities for modern web applications. This system offers semantic\n              * flexbox classes with intuitive naming conventions.\n              *\n              * @layer layout.flex\n              * @version 2.0\n              * @author Design System Team\n              *\n              * FEATURES:\n              * - Complete flexbox utility system\n              * - Semantic layout components (.layout-flex-*)\n              * - Direction, wrapping, and alignment utilities\n              * - Flexible item sizing with flex-basis utilities\n              * - Self-alignment controls for individual items\n              * - Grow and shrink utilities for dynamic layouts\n              * - Works seamlessly with CSS Grid system\n              * - Responsive-ready with breakpoint variants\n              *\n              * FLEX CONTAINER CLASSES:\n              * - .flex: Base flex container\n              * - .inline-flex: Inline flex container\n              * - .flex-row: Horizontal direction (default)\n              * - .flex-col: Vertical direction\n              * - .flex-wrap: Allow wrapping\n              * - .flex-nowrap: Prevent wrapping\n              *\n              * ALIGNMENT CLASSES:\n              * - .items-start: Align items to start\n              * - .items-center: Center align items\n              * - .items-end: Align items to end\n              * - .items-stretch: Stretch items to fill\n              * - .items-baseline: Baseline alignment\n              * - .justify-start: Justify content to start\n              * - .justify-center: Center justify content\n              * - .justify-end: Justify content to end\n              * - .justify-between: Space between items\n              * - .justify-around: Space around items\n              * - .justify-evenly: Even space distribution\n              *\n              * FLEX ITEM CLASSES:\n              * - .flex-1: Grow and shrink equally\n              * - .flex-auto: Grow and shrink based on content\n              * - .flex-none: Don't grow or shrink\n              * - .flex-initial: Initial flex value\n              * - .flex-grow: Allow growing\n              * - .flex-shrink: Allow shrinking\n              *\n              * FLEX BASIS UTILITIES:\n              * - .flex-basis-1-2: 50 basis\n              * - .flex-basis-1-3: 33.33% basis\n              * - .flex-basis-2-3: 66.67% basis\n              * - .flex-basis-1-4: 25% basis\n              * - .flex-basis-3-4: 75% basis\n              * - .flex-basis-1-5: 20 basis\n              * - .flex-basis-2-5: 40 basis\n              * - .flex-basis-3-5: 60 basis\n              * - .flex-basis-4-5: 80 basis\n              *\n              * SELF-ALIGNMENT:\n              * - .self-auto: Auto alignment\n              * - .self-start: Align self to start\n              * - .self-center: Center align self\n              * - .self-end: Align self to end\n              * - .self-stretch: Stretch self\n              *\n              * LAYOUT COMPONENTS:\n              * - .layout-flex: Semantic flex column with gap\n              * - .layout-flex-row: Semantic flex row with gap\n              * - .layout-flex-column: Semantic flex column with gap\n              * - .layout-flex-between: Space-between layout\n              * - .layout-flex-center: Centered layout\n              *\n              * USAGE EXAMPLES:\n              *\n              * Basic Flex Layout:\n              * <div class=\"flex items-center justify-between\">\n              *   <div>Logo</div>\n              *   <nav class=\"flex gap-4\">\n              *     <a href=\"#\">Home</a>\n              *     <a href=\"#\">About</a>\n              *   </nav>\n              * </div>\n              *\n              * Card Layout:\n              * <div class=\"flex flex-col gap-4\">\n              *   <h2>Card Title</h2>\n              *   <p class=\"flex-1\">Card content that grows</p>\n              *   <button>Action</button>\n              * </div>\n              *\n              * Responsive Layout:\n              * <div class=\"flex flex-col md:flex-row gap-6\">\n              *   <main class=\"flex-1\">Main content</main>\n              *   <aside class=\"flex-basis-1-3\">Sidebar</aside>\n              * </div>\n              *\n              * Complex Alignment:\n              * <div class=\"flex flex-wrap items-start justify-center gap-4\">\n              *   <div class=\"flex-basis-1-3 self-stretch\">Item 1</div>\n              *   <div class=\"flex-basis-1-3 self-center\">Item 2</div>\n              *   <div class=\"flex-basis-1-3 self-end\">Item 3</div>\n              * </div>\n              *\n              * RESPONSIVE USAGE:\n              * Use with responsive-utilities.css for breakpoint-specific layouts:\n              * <div class=\"flex-col sm:flex-row items-center sm:items-start\">\n              *   <!-- Responsive flex direction and alignment -->\n              * </div>\n              *\n              * BROWSER SUPPORT:\n              * - Flexbox: All modern browsers (IE 11+ with -ms- prefix)\n              * - Gap property: Chrome 84+, Firefox 63+, Safari 14.1+\n              * - Fallback: Use margin utilities for older browsers\n              *\n              * PERFORMANCE NOTES:\n              * - Flexbox is highly optimized for one-dimensional layouts\n              * - Use CSS Grid for two-dimensional layouts\n              * - Gap property is more performant than margins\n              * - Avoid deep nesting of flex containers\n              *\n              * ACCESSIBILITY:\n              * - Flex layouts maintain document flow for screen readers\n              * - Use semantic HTML elements within flex containers\n              * - Be careful with flex-direction: column and tab order\n              * - Test with keyboard navigation\n              * - Consider using order property sparingly\n              *\n              * INTEGRATION:\n              * - Complements layout/grid-system.css for hybrid layouts\n              * - Works with layout/spacing.css for gap utilities\n              * - Enhanced by layout/responsive-utilities.css for responsive variants\n              * - Compatible with layout/containers.css for container sizing\n              *\n              * BEST PRACTICES:\n              * - Use flexbox for one-dimensional layouts (rows or columns)\n              * - Use CSS Grid for two-dimensional layouts\n              * - Prefer gap over margins for spacing\n              * - Use semantic layout components for common patterns\n              * - Test responsive behavior across breakpoints\n              * - Ensure accessibility with proper HTML structure\n              */\n\n              @layer layout.flex {\n/* ================= FLEX-LAYOUT-SYSTEM ================= */\n\n                .layout-flex {\n                  display: flex;\n                  flex-direction: column;\n                  gap: var(--grid-gutter, 1rem);\n                }\n\n/* Typische Flex-Layouts */\n                .layout-flex-row {\n                  display: flex;\n                  flex-direction: row;\n                  gap: var(--grid-gutter, 1rem);\n                }\n\n                .layout-flex-column {\n                  display: flex;\n                  flex-direction: column;\n                  gap: var(--grid-gutter, 1rem);\n                }\n\n/* Verteilte Layouts */\n                .layout-flex-between {\n                  display: flex;\n                  flex-direction: row;\n                  gap: var(--grid-gutter, 1rem);\n                  justify-content: space-between;\n                }\n\n                .layout-flex-center {\n                  align-items: center;\n                  display: flex;\n                  gap: var(--grid-gutter, 1rem);\n                  justify-content: center;\n                }\n\n/* ================= FLEX UTILITIES ================= */\n\n/* Display-Typen */\n                .flex { display: flex; }\n\n                .inline-flex { display: inline-flex; }\n\n/* Flex-Richtung und Umbruchverhalten */\n                .flex-row { flex-direction: row; }\n\n                .flex-col { flex-direction: column; }\n\n                .flex-wrap { flex-wrap: wrap; }\n\n                .flex-nowrap { flex-wrap: nowrap; }\n\n/* Ausrichtung von Flex-Items */\n                .items-start { align-items: flex-start; }\n\n                .items-center { align-items: center; }\n\n                .items-end { align-items: flex-end; }\n\n                .items-stretch { align-items: stretch; }\n\n                .items-baseline { align-items: baseline; }\n\n                .justify-start { justify-content: flex-start; }\n\n                .justify-center { justify-content: center; }\n\n                .justify-end { justify-content: flex-end; }\n\n                .justify-between { justify-content: space-between; }\n\n                .justify-around { justify-content: space-around; }\n\n                .justify-evenly { justify-content: space-evenly; }\n\n/* Flex-Eigenschaften */\n                .flex-1 { flex: 1 1 0; }\n\n                .flex-auto { flex: 1 1 auto; }\n\n                .flex-none { flex: none; }\n\n                .flex-initial { flex: 0 1 auto; }\n\n/* Flex-Basis für flexible Layouts */\n                .flex-basis-1-2 { flex-basis: 50%; }\n\n                .flex-basis-1-3 { flex-basis: 33.3333%; }\n\n                .flex-basis-2-3 { flex-basis: 66.6667%; }\n\n                .flex-basis-1-4 { flex-basis: 25%; }\n\n                .flex-basis-3-4 { flex-basis: 75%; }\n\n                .flex-basis-1-5 { flex-basis: 20%; }\n\n                .flex-basis-2-5 { flex-basis: 40%; }\n\n                .flex-basis-3-5 { flex-basis: 60%; }\n\n                .flex-basis-4-5 { flex-basis: 80%; }\n\n/* Flex-Grow und Flex-Shrink */\n                .flex-grow { flex-grow: 1; }\n\n                .flex-grow-0 { flex-grow: 0; }\n\n                .flex-shrink { flex-shrink: 1; }\n\n                .flex-shrink-0 { flex-shrink: 0; }\n\n/* Self-Alignment */\n                .self-auto { align-self: auto; }\n\n                .self-start { align-self: flex-start; }\n\n                .self-center { align-self: center; }\n\n                .self-end { align-self: flex-end; }\n\n                .self-stretch { align-self: stretch; }\n              }\n\n/* Datei: layout/containers.css */\n/**\n              * Container Layout System\n              *\n              * A comprehensive container system providing responsive width constraints,\n              * positioning utilities, and specialized container types for modern web layouts.\n              * This system consolidates all container-related functionality into a unified\n              * and maintainable solution.\n              *\n              * @layer layout.containers\n              * @version 2.0\n              * @author Design System Team\n              *\n              * FEATURES:\n              * - Responsive container system with breakpoint-based max-widths\n              * - Fluid containers that adapt to viewport width\n              * - Positioned containers for overlays and modals\n              * - Visual containers with styling and effects\n              * - Functional containers for specific UI patterns\n              * - Z-index management system for layering\n              * - CSS custom properties for easy customization\n              * - Mobile-first responsive design approach\n              *\n              * CONTAINER TYPES:\n              *\n              * BASE CONTAINERS:\n              * - .container: Responsive container with max-width constraints\n              * - .container-fluid: Full-width container without max-width\n              * - .container-sm: Small container (max-width: 64%0px)\n              * - .container-md: Medium container (max-width: 768px)\n              * - .container-lg: Large container (max-width: 102%4px)\n              * - .container-xl: Extra large container (max-width: 128%0px)\n              * - .container-2xl: 2X large container (max-width: 153%6px)\n              *\n              * RESPONSIVE CONTAINERS:\n              * - .container-responsive: Adapts max-width at each breakpoint\n              * - Automatically adjusts width based on screen size\n              * - Includes horizontal padding for mobile spacing\n              *\n              * POSITIONED CONTAINERS:\n              * - .container-fixed: Fixed positioning container\n              * - .container-absolute: Absolute positioning container\n              * - .container-relative: Relative positioning container\n              * - .container-sticky: Sticky positioning container\n              * - .container-centered: Centered positioning with transforms\n              *\n              * VISUAL CONTAINERS:\n              * - .container-card: Card-style container with shadow and border\n              * - .container-bordered: Container with border styling\n              * - .container-rounded: Container with rounded corners\n              * - .container-shadow: Container with drop shadow\n              * - .container-elevated: Container with elevation effect\n              *\n              * FUNCTIONAL CONTAINERS:\n              * - .container-modal: Modal dialog container\n              * - .container-toast: Toast notification container\n              * - .container-dropdown: Dropdown menu container\n              * - .container-tooltip: Tooltip container\n              * - .container-popover: Popover container\n              * - .container-sidebar: Sidebar container\n              * - .container-header: Header container\n              * - .container-footer: Footer container\n              *\n              * RESPONSIVE BREAKPOINTS:\n              * - sm: 640px and up\n              * - md: 768px and up\n              * - lg: 1024px and up\n              * - xl: 1280px and up\n              * - 2xl: 1536px and up\n              *\n              * USAGE EXAMPLES:\n              *\n              * Basic Container:\n              * <div class=\"container\">\n              *   <h1>Page Title</h1>\n              *   <p>Content with responsive width constraints</p>\n              * </div>\n              *\n              * Responsive Container:\n              * <div class=\"container-responsive\">\n              *   <!-- Adapts width at each breakpoint -->\n              *   <main>Main content</main>\n              * </div>\n              *\n              * Modal Container:\n              * <div class=\"container-modal\">\n              *   <div class=\"container-card\">\n              *     <h2>Modal Title</h2>\n              *     <p>Modal content</p>\n              *   </div>\n              * </div>\n              *\n              * Card Layout:\n              * <div class=\"container-card container-rounded\">\n              *   <h3>Card Title</h3>\n              *   <p>Card content with styling</p>\n              * </div>\n              *\n              * Sidebar Layout:\n              * <aside class=\"container-sidebar\">\n              *   <nav>Navigation items</nav>\n              * </aside>\n              *\n              * CUSTOMIZATION:\n              * Override CSS custom properties to customize containers:\n              *\n              * :root {\n                *   --container-padding: 1rem;\n                *   --container-max-width: 120%0px;\n                *   --container-border-radius: 0.5rem;\n                *   --container-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);\n                * }\n                *\n                * BROWSER SUPPORT:\n                * - CSS Custom Properties: All modern browsers (IE 11+ with fallbacks)\n                * - CSS Grid: All modern browsers (IE 11+ with -ms- prefix)\n                * - Container Queries: Chrome 105+, Firefox 110+, Safari 16+\n                * - Backdrop Filter: Chrome 76+, Firefox 103+, Safari 9+\n                *\n                * PERFORMANCE NOTES:\n                * - Use container queries for component-based responsive design\n                * - Backdrop filters can impact performance on mobile devices\n                * - Z-index values are optimized to prevent stacking conflicts\n                * - CSS custom properties enable efficient theming\n                *\n                * ACCESSIBILITY:\n                * - Containers maintain semantic HTML structure\n                * - Modal containers include proper ARIA attributes\n                * - Focus management for overlay containers\n                * - Keyboard navigation support\n                * - Screen reader compatibility\n                *\n                * INTEGRATION:\n                * - Works with layout/grid-system.css for grid layouts\n                * - Compatible with layout/flex-layouts.css for flex layouts\n                * - Enhanced by layout/spacing.css for margin/padding utilities\n                * - Supports layout/responsive-utilities.css for responsive variants\n                *\n                * Z-INDEX SYSTEM:\n                * - Base content: 1-10\n                * - Dropdowns: 1000-1010\n                * - Sticky elements: 1020-1030\n                * - Fixed headers: 1040-1050\n                * - Overlays: 1060-1070\n                * - Modals: 1080-1090\n                * - Tooltips: 1100-1110\n                * - Toasts: 1120-1130\n                *\n                * BEST PRACTICES:\n                * - Use semantic container classes for specific UI patterns\n                * - Combine container types for complex layouts\n                * - Test responsive behavior across all breakpoints\n                * - Ensure proper z-index layering for overlays\n                * - Maintain accessibility standards for interactive containers\n                * - Use CSS custom properties for consistent theming\n                */\n\n                @layer layout.containers {\n/* ================= BASE CONTAINERS ================= */\n\n/* Standard-Container mit maximaler Breite */\n                  .container {\n                    margin-left: auto;\n                    margin-right: auto;\n                    max-width: var(--container-max-width, 1200px);\n                    padding-left: var(--container-padding, 1rem);\n                    padding-right: var(--container-padding, 1rem);\n                    width: 100%;\n                  }\n\n/* Fluid-Container ohne maximale Breite */\n                  .container-fluid {\n                    margin-left: auto;\n                    margin-right: auto;\n                    padding-left: var(--container-padding, 1rem);\n                    padding-right: var(--container-padding, 1rem);\n                    width: 100%;\n                  }\n\n/* Container mit festen Größen */\n                  .container-sm {\n                    margin-left: auto;\n                    margin-right: auto;\n                    max-width: var(--container-sm, 640px);\n                    padding-left: var(--container-padding, 1rem);\n                    padding-right: var(--container-padding, 1rem);\n                    width: 100%;\n                  }\n\n                  .container-md {\n                    margin-left: auto;\n                    margin-right: auto;\n                    max-width: var(--container-md, 768px);\n                    padding-left: var(--container-padding, 1rem);\n                    padding-right: var(--container-padding, 1rem);\n                    width: 100%;\n                  }\n\n                  .container-lg {\n                    margin-left: auto;\n                    margin-right: auto;\n                    max-width: var(--container-lg, 1024px);\n                    padding-left: var(--container-padding, 1rem);\n                    padding-right: var(--container-padding, 1rem);\n                    width: 100%;\n                  }\n\n                  .container-xl {\n                    margin-left: auto;\n                    margin-right: auto;\n                    max-width: var(--container-xl, 1280px);\n                    padding-left: var(--container-padding, 1rem);\n                    padding-right: var(--container-padding, 1rem);\n                    width: 100%;\n                  }\n\n                  .container-2xl {\n                    margin-left: auto;\n                    margin-right: auto;\n                    max-width: var(--container-2xl, 1536px);\n                    padding-left: var(--container-padding, 1rem);\n                    padding-right: var(--container-padding, 1rem);\n                    width: 100%;\n                  }\n\n/* ================= RESPONSIVE CONTAINERS ================= */\n\n/* Container Query Support */\n                  .container-query {\n                    container-name: main;\n                    container-type: inline-size;\n                  }\n\n                  .container-query-size {\n                    container-type: size;\n                  }\n\n                  .container-query-normal {\n                    container-type: normal;\n                  }\n\n/* Responsive Container mit anpassbarer maximaler Breite */\n                  .container-responsive {\n                    margin-left: auto;\n                    margin-right: auto;\n                    padding-left: var(--container-padding, 1rem);\n                    padding-right: var(--container-padding, 1rem);\n                    width: 100%;\n                  }\n\n                  @media (min-width: 640px) {\n                    .container-responsive {\n                      max-width: var(--container-sm, 640px);\n                    }\n                  }\n\n                  @media (min-width: 768px) {\n                    .container-responsive {\n                      max-width: var(--container-md, 768px);\n                    }\n                  }\n\n                  @media (min-width: 1024px) {\n                    .container-responsive {\n                      max-width: var(--container-lg, 1024px);\n                    }\n                  }\n\n                  @media (width >= 1280px) {\n                    .container-responsive {\n                      max-width: var(--container-xl, 1280px);\n                    }\n                  }\n\n                  @media (width >= 1536px) {\n                    .container-responsive {\n                      max-width: var(--container-2xl, 1536px);\n                    }\n                  }\n\n/* ================= POSITIONED CONTAINERS ================= */\n\n/* Container mit verschiedenen Positionierungen */\n                  .container-fixed {\n                    position: fixed;\n                  }\n\n                  .container-absolute {\n                    position: absolute;\n                  }\n\n                  .container-relative {\n                    position: relative;\n                  }\n\n                  .container-sticky {\n                    position: sticky;\n                    top: 0%;\n                    z-index: var(--z-sticky, 1020);\n                  }\n\n/* Zentrierter Container */\n                  .container-centered {\n                    left: 50%;\n                    position: absolute;\n                    top: 50%;\n                    transform: translate(-50%, -50);\n                  }\n\n/* ================= VISUAL CONTAINERS ================= */\n\n/* Container mit visuellen Stilen */\n                  .container-card {\n                    background: var(--container-bg, #fff);\n                    border: 1px solid var(--container-border-color, #e5e7eb);\n                    border-radius: var(--container-border-radius, 0.5rem);\n                    box-shadow: var(--container-shadow, 0 1px 3px rgb(0 0 0 / 0.1));\n                    padding: var(--container-card-padding, 1.5rem);\n                  }\n\n                  .container-bordered {\n                    border: 1px solid var(--container-border-color, #e5e7eb);\n                  }\n\n                  .container-rounded {\n                    border-radius: var(--container-border-radius, 0.5rem);\n                  }\n\n                  .container-shadow {\n                    box-shadow: var(--container-shadow, 0 4px 6px rgb(0 0 0 / 0.1));\n                  }\n\n                  .container-elevated {\n                    box-shadow: var(--container-elevated-shadow, 0 10px 25px rgb(0 0 0 / 15%));\n                    transform: translateY(-2px);\n                    transition: all 0.3s ease;\n                  }\n\n                  .container-elevated:hover {\n                    box-shadow: var(--container-elevated-hover-shadow, 0 20px 40px rgb(0 0 0 / 0.2));\n                    transform: translateY(-4px);\n                  }\n\n/* ================= FUNCTIONAL CONTAINERS ================= */\n\n/* Modal-Container */\n                  .container-modal {\n                    align-items: center;\n                    backdrop-filter: blur(4px);\n                    background: rgb(0 0 0 / 0.5);\n                    display: flex;\n                    height: 100%;\n                    justify-content: center;\n                    left: 0%;\n                    position: fixed;\n                    top: 0%;\n                    width: 100vw;\n                    z-index: var(--z-modal, 1060);\n                  }\n\n/* Toast-Container */\n                  .container-toast {\n                    background: var(--container-bg, #fff);\n                    border-radius: var(--container-border-radius, 0.5rem);\n                    box-shadow: var(--container-elevated-shadow, 0 10px 15px rgb(0 0 0 / 0.1));\n                    max-width: var(--modal-max-width, 32rem);\n                    padding: var(--container-card-padding, 1.5rem);\n                    position: fixed;\n                    right: 1rem;\n                    top: 1rem;\n                    z-index: var(--z-toast, 1080);\n                  }\n\n/* Dropdown-Container */\n                  .container-dropdown {\n                    background: var(--container-bg, #fff);\n                    border: 1px solid var(--container-border-color, #e5e7eb);\n                    border-radius: var(--container-border-radius, 0.5rem);\n                    box-shadow: var(--container-shadow, 0 1px 3px rgb(0 0 0 / 0.1));\n                    position: absolute;\n                    z-index: var(--z-dropdown, 1000);\n                  }\n\n/* Tooltip-Container */\n                  .container-tooltip {\n                    background: var(--container-bg, #fff);\n                    border: 1px solid var(--container-border-color, #e5e7eb);\n                    border-radius: var(--container-border-radius, 0.5rem);\n                    box-shadow: var(--container-shadow, 0 1px 3px rgb(0 0 0 / 0.1));\n                    max-width: var(--tooltip-max-width, 20rem);\n                    padding: var(--space-2, 0.5rem);\n                    position: absolute;\n                    z-index: var(--z-tooltip, 1070);\n                  }\n\n/* Popover-Container */\n                  .container-popover {\n                    background: var(--container-bg, #fff);\n                    border: 1px solid var(--container-border-color, #e5e7eb);\n                    border-radius: var(--container-border-radius, 0.5rem);\n                    box-shadow: var(--container-elevated-shadow, 0 10px 15px rgb(0 0 0 / 0.1));\n                    max-width: var(--popover-max-width, 24rem);\n                    padding: var(--container-card-padding, 1.5rem);\n                    position: absolute;\n                    z-index: var(--z-popover, 1040);\n                  }\n\n/* Sidebar-Container */\n                  .container-sidebar {\n                    background: var(--container-bg, #fff);\n                    border-right: 1px solid var(--container-border-color, #e5e7eb);\n                    height: 100%;\n                    position: fixed;\n                    width: var(--sidebar-width, 16rem);\n                    z-index: var(--z-fixed, 1000);\n                  }\n\n/* Header-Container */\n                  .container-header {\n                    background: var(--container-bg, #fff);\n                    border-bottom: 1px solid var(--container-border-color, #e5e7eb);\n                    height: var(--header-height, 4rem);\n                    position: fixed;\n                    width: 100%;\n                    z-index: var(--z-fixed, 1000);\n                  }\n\n/* Footer-Container */\n                  .container-footer {\n                    background: var(--container-bg, #fff);\n                    border-top: 1px solid var(--container-border-color, #e5e7eb);\n                    height: var(--footer-height, 4rem);\n                    position: relative;\n                    width: 100%;\n                  }\n\n/* ================= Z-INDEX MANAGEMENT ================= */\n\n/* Z-Index-Variablen für konsistente Layering */\n                  :root {\n                    --z-base: 1;\n                    --z-dropdown: 1000;\n                    --z-sticky: 1020;\n                    --z-header: 1050;\n                    --z-sidebar: 1040;\n                    --z-popover: 1060;\n                    --z-overlay: 1070;\n                    --z-modal: 1080;\n                    --z-tooltip: 1100;\n                    --z-toast: 1120;\n                  }\n\n/* Z-Index Utilities */\n                  .z-0 { z-index: 0; }\n\n                  .z-10 { z-index: 10; }\n\n                  .z-20 { z-index: 20; }\n\n                  .z-30 { z-index: 30; }\n\n                  .z-40 { z-index: 40; }\n\n                  .z-50 { z-index: 50; }\n\n                  .z-auto { z-index: auto; }\n\n/* Spezielle Z-Index-Klassen */\n                  .z-dropdown { z-index: var(--z-dropdown, 1000); }\n\n                  .z-sticky { z-index: var(--z-sticky, 1010); }\n\n                  .z-header { z-index: var(--z-header, 1020); }\n\n                  .z-sidebar { z-index: var(--z-sidebar, 1030); }\n\n                  .z-popover { z-index: var(--z-popover, 1040); }\n\n                  .z-overlay { z-index: var(--z-overlay, 1050); }\n\n                  .z-modal { z-index: var(--z-modal, 1060); }\n\n                  .z-tooltip { z-index: var(--z-tooltip, 1070); }\n\n                  .z-toast { z-index: var(--z-toast, 1080); }\n                }\n\n"],"names":[]}