@casoon/dragonfly
Version:
Modular, lightweight CSS framework and design system for modern web projects. Optimized for Astro JS, LightningCSS and Container Queries with @layer-based architecture and comprehensive accessibility.
1 lines • 202 kB
Source Map (JSON)
{"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