@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,896 lines (1,161 loc) • 189 kB
CSS
/* Datei: layout/spacing.css */
/**
* Spacing Utilities System - Token-Based Version
*
* A comprehensive spacing system using design tokens for consistent gap, margin,
* and padding utilities. This version uses CSS custom properties from tokens/spacing.css
* for better maintainability and consistency.
*
* @layer layout.spacing
* @version 3.0
* @author Design System Team
*/
@layer layout.spacing {
/* ================= GAP UTILITIES ================= */
/* Gap für Grid- und Flex-Layouts */
.gap-0 { gap: var(--space-0, 0); }
.gap-px { gap: var(--space-px, 1px); }
.gap-1 { gap: var(--space-1, 0.25rem); }
.gap-2 { gap: var(--space-2, 0.5rem); }
.gap-3 { gap: var(--space-3, 0.75rem); }
.gap-4 { gap: var(--space-4, 1rem); }
.gap-5 { gap: var(--space-5, 1.25rem); }
.gap-6 { gap: var(--space-6, 1.5rem); }
.gap-7 { gap: var(--space-7, 1.75rem); }
.gap-8 { gap: var(--space-8, 2rem); }
.gap-9 { gap: var(--space-9, 2.25rem); }
.gap-10 { gap: var(--space-10, 2.5rem); }
.gap-11 { gap: var(--space-11, 2.75rem); }
.gap-12 { gap: var(--space-12, 3rem); }
.gap-14 { gap: var(--space-14, 3.5rem); }
.gap-16 { gap: var(--space-16, 4rem); }
.gap-20 { gap: var(--space-20, 5rem); }
.gap-24 { gap: var(--space-24, 6rem); }
.gap-28 { gap: var(--space-28, 7rem); }
.gap-32 { gap: var(--space-32, 8rem); }
.gap-36 { gap: var(--space-36, 9rem); }
.gap-40 { gap: var(--space-40, 10rem); }
.gap-44 { gap: var(--space-44, 11rem); }
.gap-48 { gap: var(--space-48, 12rem); }
.gap-52 { gap: var(--space-52, 13rem); }
.gap-56 { gap: var(--space-56, 14rem); }
.gap-60 { gap: var(--space-60, 15rem); }
.gap-64 { gap: var(--space-64, 16rem); }
.gap-72 { gap: var(--space-72, 18rem); }
.gap-80 { gap: var(--space-80, 20rem); }
.gap-96 { gap: var(--space-96, 24rem); }
/* Semantic Gap Utilities */
.gap-xs { gap: var(--space-xs, 0.75rem); }
.gap-sm { gap: var(--space-sm, 1.25rem); }
.gap-md { gap: var(--space-md, 1.75rem); }
.gap-lg { gap: var(--space-lg, 2.25rem); }
.gap-xl { gap: var(--space-xl, 3rem); }
.gap-2xl { gap: var(--space-2xl, 4rem); }
.gap-3xl { gap: var(--space-3xl, 5rem); }
/* Horizontale Gaps (column-gap) */
.gap-x-0 { column-gap: var(--space-0, 0); }
.gap-x-px { column-gap: var(--space-px, 1px); }
.gap-x-1 { column-gap: var(--space-1, 0.25rem); }
.gap-x-2 { column-gap: var(--space-2, 0.5rem); }
.gap-x-3 { column-gap: var(--space-3, 0.75rem); }
.gap-x-4 { column-gap: var(--space-4, 1rem); }
.gap-x-5 { column-gap: var(--space-5, 1.25rem); }
.gap-x-6 { column-gap: var(--space-6, 1.5rem); }
.gap-x-8 { column-gap: var(--space-8, 2rem); }
.gap-x-10 { column-gap: var(--space-10, 2.5rem); }
.gap-x-12 { column-gap: var(--space-12, 3rem); }
.gap-x-16 { column-gap: var(--space-16, 4rem); }
.gap-x-20 { column-gap: var(--space-20, 5rem); }
.gap-x-24 { column-gap: var(--space-24, 6rem); }
.gap-x-32 { column-gap: var(--space-32, 8rem); }
/* Vertikale Gaps (row-gap) */
.gap-y-0 { row-gap: var(--space-0, 0); }
.gap-y-px { row-gap: var(--space-px, 1px); }
.gap-y-1 { row-gap: var(--space-1, 0.25rem); }
.gap-y-2 { row-gap: var(--space-2, 0.5rem); }
.gap-y-3 { row-gap: var(--space-3, 0.75rem); }
.gap-y-4 { row-gap: var(--space-4, 1rem); }
.gap-y-5 { row-gap: var(--space-5, 1.25rem); }
.gap-y-6 { row-gap: var(--space-6, 1.5rem); }
.gap-y-8 { row-gap: var(--space-8, 2rem); }
.gap-y-10 { row-gap: var(--space-10, 2.5rem); }
.gap-y-12 { row-gap: var(--space-12, 3rem); }
.gap-y-16 { row-gap: var(--space-16, 4rem); }
.gap-y-20 { row-gap: var(--space-20, 5rem); }
.gap-y-24 { row-gap: var(--space-24, 6rem); }
.gap-y-32 { row-gap: var(--space-32, 8rem); }
/* ================= MARGIN UTILITIES ================= */
/* Margin in alle Richtungen */
.m-0 { margin: var(--space-0, 0); }
.m-px { margin: var(--space-px, 1px); }
.m-1 { margin: var(--space-1, 0.25rem); }
.m-2 { margin: var(--space-2, 0.5rem); }
.m-3 { margin: var(--space-3, 0.75rem); }
.m-4 { margin: var(--space-4, 1rem); }
.m-5 { margin: var(--space-5, 1.25rem); }
.m-6 { margin: var(--space-6, 1.5rem); }
.m-8 { margin: var(--space-8, 2rem); }
.m-10 { margin: var(--space-10, 2.5rem); }
.m-12 { margin: var(--space-12, 3rem); }
.m-16 { margin: var(--space-16, 4rem); }
.m-20 { margin: var(--space-20, 5rem); }
.m-24 { margin: var(--space-24, 6rem); }
.m-32 { margin: var(--space-32, 8rem); }
.m-auto { margin: auto; }
/* Horizontale Margins */
.mx-0 { margin-left: var(--space-0, 0); margin-right: var(--space-0, 0); }
.mx-px { margin-left: var(--space-px, 1px); margin-right: var(--space-px, 1px); }
.mx-1 { margin-left: var(--space-1, 0.25rem); margin-right: var(--space-1, 0.25rem); }
.mx-2 { margin-left: var(--space-2, 0.5rem); margin-right: var(--space-2, 0.5rem); }
.mx-3 { margin-left: var(--space-3, 0.75rem); margin-right: var(--space-3, 0.75rem); }
.mx-4 { margin-left: var(--space-4, 1rem); margin-right: var(--space-4, 1rem); }
.mx-5 { margin-left: var(--space-5, 1.25rem); margin-right: var(--space-5, 1.25rem); }
.mx-6 { margin-left: var(--space-6, 1.5rem); margin-right: var(--space-6, 1.5rem); }
.mx-8 { margin-left: var(--space-8, 2rem); margin-right: var(--space-8, 2rem); }
.mx-10 { margin-left: var(--space-10, 2.5rem); margin-right: var(--space-10, 2.5rem); }
.mx-12 { margin-left: var(--space-12, 3rem); margin-right: var(--space-12, 3rem); }
.mx-16 { margin-left: var(--space-16, 4rem); margin-right: var(--space-16, 4rem); }
.mx-20 { margin-left: var(--space-20, 5rem); margin-right: var(--space-20, 5rem); }
.mx-24 { margin-left: var(--space-24, 6rem); margin-right: var(--space-24, 6rem); }
.mx-32 { margin-left: var(--space-32, 8rem); margin-right: var(--space-32, 8rem); }
.mx-auto { margin-left: auto; margin-right: auto; }
/* Vertikale Margins */
.my-0 { margin-bottom: var(--space-0, 0); margin-top: var(--space-0, 0); }
.my-px { margin-bottom: var(--space-px, 1px); margin-top: var(--space-px, 1px); }
.my-1 { margin-bottom: var(--space-1, 0.25rem); margin-top: var(--space-1, 0.25rem); }
.my-2 { margin-bottom: var(--space-2, 0.5rem); margin-top: var(--space-2, 0.5rem); }
.my-3 { margin-bottom: var(--space-3, 0.75rem); margin-top: var(--space-3, 0.75rem); }
.my-4 { margin-bottom: var(--space-4, 1rem); margin-top: var(--space-4, 1rem); }
.my-5 { margin-bottom: var(--space-5, 1.25rem); margin-top: var(--space-5, 1.25rem); }
.my-6 { margin-bottom: var(--space-6, 1.5rem); margin-top: var(--space-6, 1.5rem); }
.my-8 { margin-bottom: var(--space-8, 2rem); margin-top: var(--space-8, 2rem); }
.my-10 { margin-bottom: var(--space-10, 2.5rem); margin-top: var(--space-10, 2.5rem); }
.my-12 { margin-bottom: var(--space-12, 3rem); margin-top: var(--space-12, 3rem); }
.my-16 { margin-bottom: var(--space-16, 4rem); margin-top: var(--space-16, 4rem); }
.my-20 { margin-bottom: var(--space-20, 5rem); margin-top: var(--space-20, 5rem); }
.my-24 { margin-bottom: var(--space-24, 6rem); margin-top: var(--space-24, 6rem); }
.my-32 { margin-bottom: var(--space-32, 8rem); margin-top: var(--space-32, 8rem); }
.my-auto { margin-bottom: auto; margin-top: auto; }
/* Einzelne Margin-Richtungen */
.mt-0 { margin-top: var(--space-0, 0); }
.mt-px { margin-top: var(--space-px, 1px); }
.mt-1 { margin-top: var(--space-1, 0.25rem); }
.mt-2 { margin-top: var(--space-2, 0.5rem); }
.mt-3 { margin-top: var(--space-3, 0.75rem); }
.mt-4 { margin-top: var(--space-4, 1rem); }
.mt-5 { margin-top: var(--space-5, 1.25rem); }
.mt-6 { margin-top: var(--space-6, 1.5rem); }
.mt-8 { margin-top: var(--space-8, 2rem); }
.mt-10 { margin-top: var(--space-10, 2.5rem); }
.mt-12 { margin-top: var(--space-12, 3rem); }
.mt-16 { margin-top: var(--space-16, 4rem); }
.mt-20 { margin-top: var(--space-20, 5rem); }
.mt-24 { margin-top: var(--space-24, 6rem); }
.mt-32 { margin-top: var(--space-32, 8rem); }
.mt-auto { margin-top: auto; }
.mr-0 { margin-right: var(--space-0, 0); }
.mr-px { margin-right: var(--space-px, 1px); }
.mr-1 { margin-right: var(--space-1, 0.25rem); }
.mr-2 { margin-right: var(--space-2, 0.5rem); }
.mr-3 { margin-right: var(--space-3, 0.75rem); }
.mr-4 { margin-right: var(--space-4, 1rem); }
.mr-5 { margin-right: var(--space-5, 1.25rem); }
.mr-6 { margin-right: var(--space-6, 1.5rem); }
.mr-8 { margin-right: var(--space-8, 2rem); }
.mr-10 { margin-right: var(--space-10, 2.5rem); }
.mr-12 { margin-right: var(--space-12, 3rem); }
.mr-16 { margin-right: var(--space-16, 4rem); }
.mr-20 { margin-right: var(--space-20, 5rem); }
.mr-24 { margin-right: var(--space-24, 6rem); }
.mr-32 { margin-right: var(--space-32, 8rem); }
.mr-auto { margin-right: auto; }
.mb-0 { margin-bottom: var(--space-0, 0); }
.mb-px { margin-bottom: var(--space-px, 1px); }
.mb-1 { margin-bottom: var(--space-1, 0.25rem); }
.mb-2 { margin-bottom: var(--space-2, 0.5rem); }
.mb-3 { margin-bottom: var(--space-3, 0.75rem); }
.mb-4 { margin-bottom: var(--space-4, 1rem); }
.mb-5 { margin-bottom: var(--space-5, 1.25rem); }
.mb-6 { margin-bottom: var(--space-6, 1.5rem); }
.mb-8 { margin-bottom: var(--space-8, 2rem); }
.mb-10 { margin-bottom: var(--space-10, 2.5rem); }
.mb-12 { margin-bottom: var(--space-12, 3rem); }
.mb-16 { margin-bottom: var(--space-16, 4rem); }
.mb-20 { margin-bottom: var(--space-20, 5rem); }
.mb-24 { margin-bottom: var(--space-24, 6rem); }
.mb-32 { margin-bottom: var(--space-32, 8rem); }
.mb-auto { margin-bottom: auto; }
.ml-0 { margin-left: var(--space-0, 0); }
.ml-px { margin-left: var(--space-px, 1px); }
.ml-1 { margin-left: var(--space-1, 0.25rem); }
.ml-2 { margin-left: var(--space-2, 0.5rem); }
.ml-3 { margin-left: var(--space-3, 0.75rem); }
.ml-4 { margin-left: var(--space-4, 1rem); }
.ml-5 { margin-left: var(--space-5, 1.25rem); }
.ml-6 { margin-left: var(--space-6, 1.5rem); }
.ml-8 { margin-left: var(--space-8, 2rem); }
.ml-10 { margin-left: var(--space-10, 2.5rem); }
.ml-12 { margin-left: var(--space-12, 3rem); }
.ml-16 { margin-left: var(--space-16, 4rem); }
.ml-20 { margin-left: var(--space-20, 5rem); }
.ml-24 { margin-left: var(--space-24, 6rem); }
.ml-32 { margin-left: var(--space-32, 8rem); }
.ml-auto { margin-left: auto; }
/* ================= NEGATIVE MARGINS ================= */
/* Negative Margins für Overlapping-Layouts */
.-m-1 { margin: calc(-1 * var(--space-1, 0.25rem)); }
.-m-2 { margin: calc(-1 * var(--space-2, 0.5rem)); }
.-m-3 { margin: calc(-1 * var(--space-3, 0.75rem)); }
.-m-4 { margin: calc(-1 * var(--space-4, 1rem)); }
.-m-5 { margin: calc(-1 * var(--space-5, 1.25rem)); }
.-m-6 { margin: calc(-1 * var(--space-6, 1.5rem)); }
.-m-8 { margin: calc(-1 * var(--space-8, 2rem)); }
.-m-10 { margin: calc(-1 * var(--space-10, 2.5rem)); }
.-m-12 { margin: calc(-1 * var(--space-12, 3rem)); }
.-m-16 { margin: calc(-1 * var(--space-16, 4rem)); }
.-m-20 { margin: calc(-1 * var(--space-20, 5rem)); }
.-m-24 { margin: calc(-1 * var(--space-24, 6rem)); }
.-m-32 { margin: calc(-1 * var(--space-32, 8rem)); }
/* ================= PADDING UTILITIES ================= */
/* Padding in alle Richtungen */
.p-0 { padding: var(--space-0, 0); }
.p-px { padding: var(--space-px, 1px); }
.p-1 { padding: var(--space-1, 0.25rem); }
.p-2 { padding: var(--space-2, 0.5rem); }
.p-3 { padding: var(--space-3, 0.75rem); }
.p-4 { padding: var(--space-4, 1rem); }
.p-5 { padding: var(--space-5, 1.25rem); }
.p-6 { padding: var(--space-6, 1.5rem); }
.p-8 { padding: var(--space-8, 2rem); }
.p-10 { padding: var(--space-10, 2.5rem); }
.p-12 { padding: var(--space-12, 3rem); }
.p-16 { padding: var(--space-16, 4rem); }
.p-20 { padding: var(--space-20, 5rem); }
.p-24 { padding: var(--space-24, 6rem); }
.p-32 { padding: var(--space-32, 8rem); }
/* Horizontales Padding */
.px-0 { padding-left: var(--space-0, 0); padding-right: var(--space-0, 0); }
.px-px { padding-left: var(--space-px, 1px); padding-right: var(--space-px, 1px); }
.px-1 { padding-left: var(--space-1, 0.25rem); padding-right: var(--space-1, 0.25rem); }
.px-2 { padding-left: var(--space-2, 0.5rem); padding-right: var(--space-2, 0.5rem); }
.px-3 { padding-left: var(--space-3, 0.75rem); padding-right: var(--space-3, 0.75rem); }
.px-4 { padding-left: var(--space-4, 1rem); padding-right: var(--space-4, 1rem); }
.px-5 { padding-left: var(--space-5, 1.25rem); padding-right: var(--space-5, 1.25rem); }
.px-6 { padding-left: var(--space-6, 1.5rem); padding-right: var(--space-6, 1.5rem); }
.px-8 { padding-left: var(--space-8, 2rem); padding-right: var(--space-8, 2rem); }
.px-10 { padding-left: var(--space-10, 2.5rem); padding-right: var(--space-10, 2.5rem); }
.px-12 { padding-left: var(--space-12, 3rem); padding-right: var(--space-12, 3rem); }
.px-16 { padding-left: var(--space-16, 4rem); padding-right: var(--space-16, 4rem); }
.px-20 { padding-left: var(--space-20, 5rem); padding-right: var(--space-20, 5rem); }
.px-24 { padding-left: var(--space-24, 6rem); padding-right: var(--space-24, 6rem); }
.px-32 { padding-left: var(--space-32, 8rem); padding-right: var(--space-32, 8rem); }
/* Vertikales Padding */
.py-0 { padding-bottom: var(--space-0, 0); padding-top: var(--space-0, 0); }
.py-px { padding-bottom: var(--space-px, 1px); padding-top: var(--space-px, 1px); }
.py-1 { padding-bottom: var(--space-1, 0.25rem); padding-top: var(--space-1, 0.25rem); }
.py-2 { padding-bottom: var(--space-2, 0.5rem); padding-top: var(--space-2, 0.5rem); }
.py-3 { padding-bottom: var(--space-3, 0.75rem); padding-top: var(--space-3, 0.75rem); }
.py-4 { padding-bottom: var(--space-4, 1rem); padding-top: var(--space-4, 1rem); }
.py-5 { padding-bottom: var(--space-5, 1.25rem); padding-top: var(--space-5, 1.25rem); }
.py-6 { padding-bottom: var(--space-6, 1.5rem); padding-top: var(--space-6, 1.5rem); }
.py-8 { padding-bottom: var(--space-8, 2rem); padding-top: var(--space-8, 2rem); }
.py-10 { padding-bottom: var(--space-10, 2.5rem); padding-top: var(--space-10, 2.5rem); }
.py-12 { padding-bottom: var(--space-12, 3rem); padding-top: var(--space-12, 3rem); }
.py-16 { padding-bottom: var(--space-16, 4rem); padding-top: var(--space-16, 4rem); }
.py-20 { padding-bottom: var(--space-20, 5rem); padding-top: var(--space-20, 5rem); }
.py-24 { padding-bottom: var(--space-24, 6rem); padding-top: var(--space-24, 6rem); }
.py-32 { padding-bottom: var(--space-32, 8rem); padding-top: var(--space-32, 8rem); }
/* Einzelne Padding-Richtungen */
.pt-0 { padding-top: var(--space-0, 0); }
.pt-px { padding-top: var(--space-px, 1px); }
.pt-1 { padding-top: var(--space-1, 0.25rem); }
.pt-2 { padding-top: var(--space-2, 0.5rem); }
.pt-3 { padding-top: var(--space-3, 0.75rem); }
.pt-4 { padding-top: var(--space-4, 1rem); }
.pt-5 { padding-top: var(--space-5, 1.25rem); }
.pt-6 { padding-top: var(--space-6, 1.5rem); }
.pt-8 { padding-top: var(--space-8, 2rem); }
.pt-10 { padding-top: var(--space-10, 2.5rem); }
.pt-12 { padding-top: var(--space-12, 3rem); }
.pt-16 { padding-top: var(--space-16, 4rem); }
.pt-20 { padding-top: var(--space-20, 5rem); }
.pt-24 { padding-top: var(--space-24, 6rem); }
.pt-32 { padding-top: var(--space-32, 8rem); }
.pr-0 { padding-right: var(--space-0, 0); }
.pr-px { padding-right: var(--space-px, 1px); }
.pr-1 { padding-right: var(--space-1, 0.25rem); }
.pr-2 { padding-right: var(--space-2, 0.5rem); }
.pr-3 { padding-right: var(--space-3, 0.75rem); }
.pr-4 { padding-right: var(--space-4, 1rem); }
.pr-5 { padding-right: var(--space-5, 1.25rem); }
.pr-6 { padding-right: var(--space-6, 1.5rem); }
.pr-8 { padding-right: var(--space-8, 2rem); }
.pr-10 { padding-right: var(--space-10, 2.5rem); }
.pr-12 { padding-right: var(--space-12, 3rem); }
.pr-16 { padding-right: var(--space-16, 4rem); }
.pr-20 { padding-right: var(--space-20, 5rem); }
.pr-24 { padding-right: var(--space-24, 6rem); }
.pr-32 { padding-right: var(--space-32, 8rem); }
.pb-0 { padding-bottom: var(--space-0, 0); }
.pb-px { padding-bottom: var(--space-px, 1px); }
.pb-1 { padding-bottom: var(--space-1, 0.25rem); }
.pb-2 { padding-bottom: var(--space-2, 0.5rem); }
.pb-3 { padding-bottom: var(--space-3, 0.75rem); }
.pb-4 { padding-bottom: var(--space-4, 1rem); }
.pb-5 { padding-bottom: var(--space-5, 1.25rem); }
.pb-6 { padding-bottom: var(--space-6, 1.5rem); }
.pb-8 { padding-bottom: var(--space-8, 2rem); }
.pb-10 { padding-bottom: var(--space-10, 2.5rem); }
.pb-12 { padding-bottom: var(--space-12, 3rem); }
.pb-16 { padding-bottom: var(--space-16, 4rem); }
.pb-20 { padding-bottom: var(--space-20, 5rem); }
.pb-24 { padding-bottom: var(--space-24, 6rem); }
.pb-32 { padding-bottom: var(--space-32, 8rem); }
.pl-0 { padding-left: var(--space-0, 0); }
.pl-px { padding-left: var(--space-px, 1px); }
.pl-1 { padding-left: var(--space-1, 0.25rem); }
.pl-2 { padding-left: var(--space-2, 0.5rem); }
.pl-3 { padding-left: var(--space-3, 0.75rem); }
.pl-4 { padding-left: var(--space-4, 1rem); }
.pl-5 { padding-left: var(--space-5, 1.25rem); }
.pl-6 { padding-left: var(--space-6, 1.5rem); }
.pl-8 { padding-left: var(--space-8, 2rem); }
.pl-10 { padding-left: var(--space-10, 2.5rem); }
.pl-12 { padding-left: var(--space-12, 3rem); }
.pl-16 { padding-left: var(--space-16, 4rem); }
.pl-20 { padding-left: var(--space-20, 5rem); }
.pl-24 { padding-left: var(--space-24, 6rem); }
.pl-32 { padding-left: var(--space-32, 8rem); }
}
/* Datei: layout/spacing-old.css */
/**
* Spacing Utilities System
*
* A comprehensive spacing system providing consistent gap, margin, and padding
* utilities for modern web layouts. This system uses a harmonious spacing scale
* based on design tokens and provides utilities for all spacing needs.
*
* @layer layout.spacing
* @version 2.0
* @author Design System Team
*
* FEATURES:
* - Consistent spacing scale based on design tokens
* - Gap utilities for CSS Grid and Flexbox layouts
* - Margin utilities for external spacing
* - Padding utilities for internal spacing
* - Directional spacing controls (top, right, bottom, left)
* - Axis-based spacing (horizontal, vertical)
* - Negative margin utilities for overlapping layouts
* - Auto margin utilities for centering
* - Responsive variants available via responsive-utilities.css
*
* SPACING SCALE:
* Based on a harmonious scale with consistent ratios:
* - 0: 0 (no spacing)
* - 1: 0.25rem (4px)
* - 2: 0.5rem (8px)
* - 3: 0.75rem (12px)
* - 4: 1rem (16px) - Base unit
* - 5: 1.25rem (20px)
* - 6: 1.5rem (24px)
* - 8: 2rem (32px)
* - 10: 2.5rem (40px)
* - 12: 3rem (48px)
* - 16: 4rem (64px)
* - 20: 5rem (80px)
* - 24: 6rem (96px)
* - 32: 8rem (128px)
*
* GAP UTILITIES:
* For CSS Grid and Flexbox layouts:
* - .gap-{size}: Gap in all directions
* - .gap-x-{size}: Horizontal gap (column-gap)
* - .gap-y-{size}: Vertical gap (row-gap)
*
* MARGIN UTILITIES:
* For external spacing around elements:
* - .m-{size}: Margin in all directions
* - .mx-{size}: Horizontal margins (left + right)
* - .my-{size}: Vertical margins (top + bottom)
* - .mt-{size}: Margin top
* - .mr-{size}: Margin right
* - .mb-{size}: Margin bottom
* - .ml-{size}: Margin left
* - .m-auto: Auto margin (centering)
* - .mx-auto: Auto horizontal margins (horizontal centering)
* - .my-auto: Auto vertical margins (vertical centering)
*
* NEGATIVE MARGINS:
* For overlapping layouts and adjustments:
* - .-m-{size}: Negative margin in all directions
* - .-mx-{size}: Negative horizontal margins
* - .-my-{size}: Negative vertical margins
* - .-mt-{size}: Negative margin top
* - .-mr-{size}: Negative margin right
* - .-mb-{size}: Negative margin bottom
* - .-ml-{size}: Negative margin left
*
* PADDING UTILITIES:
* For internal spacing within elements:
* - .p-{size}: Padding in all directions
* - .px-{size}: Horizontal padding (left + right)
* - .py-{size}: Vertical padding (top + bottom)
* - .pt-{size}: Padding top
* - .pr-{size}: Padding right
* - .pb-{size}: Padding bottom
* - .pl-{size}: Padding left
*
* USAGE EXAMPLES:
*
* Grid Layout with Gap:
* <div class="grid grid-cols-3 gap-6">
* <!-- 24px gap between grid items -->
* <div>Item 1</div>
* <div>Item 2</div>
* <div>Item 3</div>
* </div>
*
* Flex Layout with Different Gaps:
* <div class="flex gap-x-4 gap-y-2">
* <!-- 16px horizontal gap, 8px vertical gap -->
* <div>Item 1</div>
* <div>Item 2</div>
* </div>
*
* Card with Padding:
* <div class="bg-white p-6 rounded-lg">
* <!-- 24px padding on all sides -->
* <h2 class="mb-4">Card Title</h2>
* <p>Card content with bottom margin</p>
* </div>
*
* Centered Container:
* <div class="max-w-4xl mx-auto px-4">
* <!-- Horizontally centered with side padding -->
* <h1>Page Title</h1>
* </div>
*
* Overlapping Elements:
* <div class="relative">
* <img src="background.jpg" alt="Background">
* <div class="absolute -mt-8 bg-white p-4">
* <!-- Overlaps background by 32px -->
* <h2>Overlapping Content</h2>
* </div>
* </div>
*
* Responsive Spacing:
* <div class="p-4 md:p-6 lg:p-8">
* <!-- 16px on mobile, 24px on tablet, 32px on desktop -->
* <h1>Responsive Padding</h1>
* </div>
*
* BROWSER SUPPORT:
* - Gap Property: Chrome 84+, Firefox 63+, Safari 14.1+
* - Margin/Padding: All browsers
* - CSS Custom Properties: All modern browsers (IE 11+ with fallbacks)
* - Flexbox Gap: Chrome 84+, Firefox 63+, Safari 14.1+
* - Grid Gap: All browsers with CSS Grid support
*
* PERFORMANCE NOTES:
* - Gap properties are more performant than margin-based spacing
* - CSS custom properties enable efficient theming
* - Utility classes reduce CSS specificity conflicts
* - Consistent spacing scale improves visual rhythm
* - Negative margins should be used sparingly for performance
*
* ACCESSIBILITY:
* - Adequate spacing improves readability and usability
* - Consistent spacing creates predictable layouts
* - Sufficient padding improves touch target sizes
* - Proper spacing helps with focus indicators
* - Consider spacing for users with motor impairments
*
* INTEGRATION:
* - Works seamlessly with layout/grid-system.css for grid gaps
* - Compatible with layout/flex-layouts.css for flex gaps
* - Enhanced by layout/responsive-utilities.css for responsive spacing
* - Supports layout/containers.css for container padding
* - Integrates with design token system for consistent theming
*
* DESIGN TOKENS:
* Spacing utilities are based on design tokens:
* :root {
* --spacing-0: 0;
* --spacing-1: 0.25rem;
* --spacing-2: 0.5rem;
* --spacing-3: 0.75rem;
* --spacing-4: 1rem;
* --spacing-5: 1.25rem;
* --spacing-6: 1.5rem;
* --spacing-8: 2rem;
* --spacing-10: 2.5rem;
* --spacing-12: 3rem;
* --spacing-16: 4rem;
* --spacing-20: 5rem;
* --spacing-24: 6rem;
* --spacing-32: 8rem;
* }
*
* BEST PRACTICES:
* - Use gap utilities for layout spacing (grid/flex)
* - Use margin utilities for component spacing
* - Use padding utilities for internal component spacing
* - Prefer consistent spacing scale over arbitrary values
* - Use responsive spacing for better mobile experience
* - Avoid excessive negative margins that can break layouts
* - Test spacing across different screen sizes
* - Consider spacing in relation to typography scale
*
* DEBUGGING:
* Add temporary backgrounds to debug spacing:
* .debug-spacing * {
* background: rgba(255, 0, 0, 0.1) !important;
* outline: 1px solid red !important;
* }
*
* MIGRATION:
* From older spacing systems:
* - .margin-small → .m-2
* - .padding-large → .p-8
* - .no-margin → .m-0
* - .center → .mx-auto
*/
@layer layout.spacing {
/* ================= GAP UTILITIES ================= */
/* Gap für Grid- und Flex-Layouts */
.gap-0 { gap: 0; }
.gap-1 { gap: 0.25rem; }
.gap-2 { gap: 0.5rem; }
.gap-3 { gap: 0.75rem; }
.gap-4 { gap: 1rem; }
.gap-5 { gap: 1.25rem; }
.gap-6 { gap: 1.5rem; }
.gap-8 { gap: 2rem; }
.gap-10 { gap: 2.5rem; }
.gap-12 { gap: 3rem; }
.gap-16 { gap: 4rem; }
.gap-20 { gap: 5rem; }
.gap-24 { gap: 6rem; }
.gap-32 { gap: 8rem; }
/* Horizontale Gaps (column-gap) */
.gap-x-0 { column-gap: 0; }
.gap-x-1 { column-gap: 0.25rem; }
.gap-x-2 { column-gap: 0.5rem; }
.gap-x-3 { column-gap: 0.75rem; }
.gap-x-4 { column-gap: 1rem; }
.gap-x-5 { column-gap: 1.25rem; }
.gap-x-6 { column-gap: 1.5rem; }
.gap-x-8 { column-gap: 2rem; }
.gap-x-10 { column-gap: 2.5rem; }
.gap-x-12 { column-gap: 3rem; }
.gap-x-16 { column-gap: 4rem; }
.gap-x-20 { column-gap: 5rem; }
.gap-x-24 { column-gap: 6rem; }
.gap-x-32 { column-gap: 8rem; }
/* Vertikale Gaps (row-gap) */
.gap-y-0 { row-gap: 0; }
.gap-y-1 { row-gap: 0.25rem; }
.gap-y-2 { row-gap: 0.5rem; }
.gap-y-3 { row-gap: 0.75rem; }
.gap-y-4 { row-gap: 1rem; }
.gap-y-5 { row-gap: 1.25rem; }
.gap-y-6 { row-gap: 1.5rem; }
.gap-y-8 { row-gap: 2rem; }
.gap-y-10 { row-gap: 2.5rem; }
.gap-y-12 { row-gap: 3rem; }
.gap-y-16 { row-gap: 4rem; }
.gap-y-20 { row-gap: 5rem; }
.gap-y-24 { row-gap: 6rem; }
.gap-y-32 { row-gap: 8rem; }
/* ================= MARGIN UTILITIES ================= */
/* Margin in alle Richtungen */
.m-0 { margin: 0; }
.m-1 { margin: 0.25rem; }
.m-2 { margin: 0.5rem; }
.m-3 { margin: 0.75rem; }
.m-4 { margin: 1rem; }
.m-5 { margin: 1.25rem; }
.m-6 { margin: 1.5rem; }
.m-8 { margin: 2rem; }
.m-10 { margin: 2.5rem; }
.m-12 { margin: 3rem; }
.m-16 { margin: 4rem; }
.m-20 { margin: 5rem; }
.m-24 { margin: 6rem; }
.m-32 { margin: 8rem; }
.m-auto { margin: auto; }
/* Horizontale Margins */
.mx-0 { margin-left: 0%; margin-right: 0%; }
.mx-1 { margin-left: 0%.25rem; margin-right: 0%.25rem; }
.mx-2 { margin-left: 0%.5rem; margin-right: 0%.5rem; }
.mx-3 { margin-left: 0%.75rem; margin-right: 0%.75rem; }
.mx-4 { margin-left: 1rem; margin-right: 1rem; }
.mx-5 { margin-left: 1%.25rem; margin-right: 1%.25rem; }
.mx-6 { margin-left: 1%.5rem; margin-right: 1%.5rem; }
.mx-8 { margin-left: 2rem; margin-right: 2rem; }
.mx-10 { margin-left: 2%.5rem; margin-right: 2%.5rem; }
.mx-12 { margin-left: 3rem; margin-right: 3rem; }
.mx-16 { margin-left: 4rem; margin-right: 4rem; }
.mx-20 { margin-left: 5rem; margin-right: 5rem; }
.mx-24 { margin-left: 6rem; margin-right: 6rem; }
.mx-32 { margin-left: 8rem; margin-right: 8rem; }
.mx-auto { margin-left: auto; margin-right: auto; }
/* Vertikale Margins */
.my-0 { margin-bottom: 0%; margin-top: 0%; }
.my-1 { margin-bottom: 0%.25rem; margin-top: 0%.25rem; }
.my-2 { margin-bottom: 0%.5rem; margin-top: 0%.5rem; }
.my-3 { margin-bottom: 0%.75rem; margin-top: 0%.75rem; }
.my-4 { margin-bottom: 1rem; margin-top: 1rem; }
.my-5 { margin-bottom: 1%.25rem; margin-top: 1%.25rem; }
.my-6 { margin-bottom: 1%.5rem; margin-top: 1%.5rem; }
.my-8 { margin-bottom: 2rem; margin-top: 2rem; }
.my-10 { margin-bottom: 2%.5rem; margin-top: 2%.5rem; }
.my-12 { margin-bottom: 3rem; margin-top: 3rem; }
.my-16 { margin-bottom: 4rem; margin-top: 4rem; }
.my-20 { margin-bottom: 5rem; margin-top: 5rem; }
.my-24 { margin-bottom: 6rem; margin-top: 6rem; }
.my-32 { margin-bottom: 8rem; margin-top: 8rem; }
.my-auto { margin-bottom: auto; margin-top: auto; }
/* Einzelne Margin-Richtungen */
.mt-0 { margin-top: 0%; }
.mt-1 { margin-top: 0%.25rem; }
.mt-2 { margin-top: 0%.5rem; }
.mt-3 { margin-top: 0%.75rem; }
.mt-4 { margin-top: 1rem; }
.mt-5 { margin-top: 1%.25rem; }
.mt-6 { margin-top: 1%.5rem; }
.mt-8 { margin-top: 2rem; }
.mt-10 { margin-top: 2%.5rem; }
.mt-12 { margin-top: 3rem; }
.mt-16 { margin-top: 4rem; }
.mt-20 { margin-top: 5rem; }
.mt-24 { margin-top: 6rem; }
.mt-32 { margin-top: 8rem; }
.mt-auto { margin-top: auto; }
.mr-0 { margin-right: 0%; }
.mr-1 { margin-right: 0%.25rem; }
.mr-2 { margin-right: 0%.5rem; }
.mr-3 { margin-right: 0%.75rem; }
.mr-4 { margin-right: 1rem; }
.mr-5 { margin-right: 1%.25rem; }
.mr-6 { margin-right: 1%.5rem; }
.mr-8 { margin-right: 2rem; }
.mr-10 { margin-right: 2%.5rem; }
.mr-12 { margin-right: 3rem; }
.mr-16 { margin-right: 4rem; }
.mr-20 { margin-right: 5rem; }
.mr-24 { margin-right: 6rem; }
.mr-32 { margin-right: 8rem; }
.mr-auto { margin-right: auto; }
.mb-0 { margin-bottom: 0%; }
.mb-1 { margin-bottom: 0%.25rem; }
.mb-2 { margin-bottom: 0%.5rem; }
.mb-3 { margin-bottom: 0%.75rem; }
.mb-4 { margin-bottom: 1rem; }
.mb-5 { margin-bottom: 1%.25rem; }
.mb-6 { margin-bottom: 1%.5rem; }
.mb-8 { margin-bottom: 2rem; }
.mb-10 { margin-bottom: 2%.5rem; }
.mb-12 { margin-bottom: 3rem; }
.mb-16 { margin-bottom: 4rem; }
.mb-20 { margin-bottom: 5rem; }
.mb-24 { margin-bottom: 6rem; }
.mb-32 { margin-bottom: 8rem; }
.mb-auto { margin-bottom: auto; }
.ml-0 { margin-left: 0%; }
.ml-1 { margin-left: 0%.25rem; }
.ml-2 { margin-left: 0%.5rem; }
.ml-3 { margin-left: 0%.75rem; }
.ml-4 { margin-left: 1rem; }
.ml-5 { margin-left: 1%.25rem; }
.ml-6 { margin-left: 1%.5rem; }
.ml-8 { margin-left: 2rem; }
.ml-10 { margin-left: 2%.5rem; }
.ml-12 { margin-left: 3rem; }
.ml-16 { margin-left: 4rem; }
.ml-20 { margin-left: 5rem; }
.ml-24 { margin-left: 6rem; }
.ml-32 { margin-left: 8rem; }
.ml-auto { margin-left: auto; }
/* ================= NEGATIVE MARGINS ================= */
/* Negative Margins für Überlappungen */
.-m-1 { margin: -0.25rem; }
.-m-2 { margin: -0.5rem; }
.-m-3 { margin: -0.75rem; }
.-m-4 { margin: -1rem; }
.-m-5 { margin: -1.25rem; }
.-m-6 { margin: -1.5rem; }
.-m-8 { margin: -2rem; }
.-m-10 { margin: -2.5rem; }
.-m-12 { margin: -3rem; }
.-m-16 { margin: -4rem; }
.-m-20 { margin: -5rem; }
.-m-24 { margin: -6rem; }
.-m-32 { margin: -8rem; }
/* Negative horizontale Margins */
.-mx-1 { margin-left: -0.25rem; margin-right: -0.25rem; }
.-mx-2 { margin-left: -0.5rem; margin-right: -0.5rem; }
.-mx-3 { margin-left: -0.75rem; margin-right: -0.75rem; }
.-mx-4 { margin-left: -1rem; margin-right: -1rem; }
.-mx-5 { margin-left: -1.25rem; margin-right: -1.25rem; }
.-mx-6 { margin-left: -1.5rem; margin-right: -1.5rem; }
.-mx-8 { margin-left: -2rem; margin-right: -2rem; }
.-mx-10 { margin-left: -2.5rem; margin-right: -2.5rem; }
.-mx-12 { margin-left: -3rem; margin-right: -3rem; }
.-mx-16 { margin-left: -4rem; margin-right: -4rem; }
.-mx-20 { margin-left: -5rem; margin-right: -5rem; }
.-mx-24 { margin-left: -6rem; margin-right: -6rem; }
.-mx-32 { margin-left: -8rem; margin-right: -8rem; }
/* Negative vertikale Margins */
.-my-1 { margin-bottom: -0.25rem; margin-top: -0.25rem; }
.-my-2 { margin-bottom: -0.5rem; margin-top: -0.5rem; }
.-my-3 { margin-bottom: -0.75rem; margin-top: -0.75rem; }
.-my-4 { margin-bottom: -1rem; margin-top: -1rem; }
.-my-5 { margin-bottom: -1.25rem; margin-top: -1.25rem; }
.-my-6 { margin-bottom: -1.5rem; margin-top: -1.5rem; }
.-my-8 { margin-bottom: -2rem; margin-top: -2rem; }
.-my-10 { margin-bottom: -2.5rem; margin-top: -2.5rem; }
.-my-12 { margin-bottom: -3rem; margin-top: -3rem; }
.-my-16 { margin-bottom: -4rem; margin-top: -4rem; }
.-my-20 { margin-bottom: -5rem; margin-top: -5rem; }
.-my-24 { margin-bottom: -6rem; margin-top: -6rem; }
.-my-32 { margin-bottom: -8rem; margin-top: -8rem; }
/* Einzelne negative Margins */
.-mt-1 { margin-top: -0.25rem; }
.-mt-2 { margin-top: -0.5rem; }
.-mt-3 { margin-top: -0.75rem; }
.-mt-4 { margin-top: -1rem; }
.-mt-5 { margin-top: -1.25rem; }
.-mt-6 { margin-top: -1.5rem; }
.-mt-8 { margin-top: -2rem; }
.-mt-10 { margin-top: -2.5rem; }
.-mt-12 { margin-top: -3rem; }
.-mt-16 { margin-top: -4rem; }
.-mt-20 { margin-top: -5rem; }
.-mt-24 { margin-top: -6rem; }
.-mt-32 { margin-top: -8rem; }
.-mr-1 { margin-right: -0.25rem; }
.-mr-2 { margin-right: -0.5rem; }
.-mr-3 { margin-right: -0.75rem; }
.-mr-4 { margin-right: -1rem; }
.-mr-5 { margin-right: -1.25rem; }
.-mr-6 { margin-right: -1.5rem; }
.-mr-8 { margin-right: -2rem; }
.-mr-10 { margin-right: -2.5rem; }
.-mr-12 { margin-right: -3rem; }
.-mr-16 { margin-right: -4rem; }
.-mr-20 { margin-right: -5rem; }
.-mr-24 { margin-right: -6rem; }
.-mr-32 { margin-right: -8rem; }
.-mb-1 { margin-bottom: -0.25rem; }
.-mb-2 { margin-bottom: -0.5rem; }
.-mb-3 { margin-bottom: -0.75rem; }
.-mb-4 { margin-bottom: -1rem; }
.-mb-5 { margin-bottom: -1.25rem; }
.-mb-6 { margin-bottom: -1.5rem; }
.-mb-8 { margin-bottom: -2rem; }
.-mb-10 { margin-bottom: -2.5rem; }
.-mb-12 { margin-bottom: -3rem; }
.-mb-16 { margin-bottom: -4rem; }
.-mb-20 { margin-bottom: -5rem; }
.-mb-24 { margin-bottom: -6rem; }
.-mb-32 { margin-bottom: -8rem; }
.-ml-1 { margin-left: -0.25rem; }
.-ml-2 { margin-left: -0.5rem; }
.-ml-3 { margin-left: -0.75rem; }
.-ml-4 { margin-left: -1rem; }
.-ml-5 { margin-left: -1.25rem; }
.-ml-6 { margin-left: -1.5rem; }
.-ml-8 { margin-left: -2rem; }
.-ml-10 { margin-left: -2.5rem; }
.-ml-12 { margin-left: -3rem; }
.-ml-16 { margin-left: -4rem; }
.-ml-20 { margin-left: -5rem; }
.-ml-24 { margin-left: -6rem; }
.-ml-32 { margin-left: -8rem; }
/* ================= PADDING UTILITIES ================= */
/* Padding in alle Richtungen */
.p-0 { padding: 0; }
.p-1 { padding: 0.25rem; }
.p-2 { padding: 0.5rem; }
.p-3 { padding: 0.75rem; }
.p-4 { padding: 1rem; }
.p-5 { padding: 1.25rem; }
.p-6 { padding: 1.5rem; }
.p-8 { padding: 2rem; }
.p-10 { padding: 2.5rem; }
.p-12 { padding: 3rem; }
.p-16 { padding: 4rem; }
.p-20 { padding: 5rem; }
.p-24 { padding: 6rem; }
.p-32 { padding: 8rem; }
/* Horizontales Padding */
.px-0 { padding-left: 0%; padding-right: 0%; }
.px-1 { padding-left: 0%.25rem; padding-right: 0%.25rem; }
.px-2 { padding-left: 0%.5rem; padding-right: 0%.5rem; }
.px-3 { padding-left: 0%.75rem; padding-right: 0%.75rem; }
.px-4 { padding-left: 1rem; padding-right: 1rem; }
.px-5 { padding-left: 1%.25rem; padding-right: 1%.25rem; }
.px-6 { padding-left: 1%.5rem; padding-right: 1%.5rem; }
.px-8 { padding-left: 2rem; padding-right: 2rem; }
.px-10 { padding-left: 2%.5rem; padding-right: 2%.5rem; }
.px-12 { padding-left: 3rem; padding-right: 3rem; }
.px-16 { padding-left: 4rem; padding-right: 4rem; }
.px-20 { padding-left: 5rem; padding-right: 5rem; }
.px-24 { padding-left: 6rem; padding-right: 6rem; }
.px-32 { padding-left: 8rem; padding-right: 8rem; }
/* Vertikales Padding */
.py-0 { padding-bottom: 0%; padding-top: 0%; }
.py-1 { padding-bottom: 0%.25rem; padding-top: 0%.25rem; }
.py-2 { padding-bottom: 0%.5rem; padding-top: 0%.5rem; }
.py-3 { padding-bottom: 0%.75rem; padding-top: 0%.75rem; }
.py-4 { padding-bottom: 1rem; padding-top: 1rem; }
.py-5 { padding-bottom: 1%.25rem; padding-top: 1%.25rem; }
.py-6 { padding-bottom: 1%.5rem; padding-top: 1%.5rem; }
.py-8 { padding-bottom: 2rem; padding-top: 2rem; }
.py-10 { padding-bottom: 2%.5rem; padding-top: 2%.5rem; }
.py-12 { padding-bottom: 3rem; padding-top: 3rem; }
.py-16 { padding-bottom: 4rem; padding-top: 4rem; }
.py-20 { padding-bottom: 5rem; padding-top: 5rem; }
.py-24 { padding-bottom: 6rem; padding-top: 6rem; }
.py-32 { padding-bottom: 8rem; padding-top: 8rem; }
/* Einzelne Padding-Richtungen */
.pt-0 { padding-top: 0%; }
.pt-1 { padding-top: 0%.25rem; }
.pt-2 { padding-top: 0%.5rem; }
.pt-3 { padding-top: 0%.75rem; }
.pt-4 { padding-top: 1rem; }
.pt-5 { padding-top: 1%.25rem; }
.pt-6 { padding-top: 1%.5rem; }
.pt-8 { padding-top: 2rem; }
.pt-10 { padding-top: 2%.5rem; }
.pt-12 { padding-top: 3rem; }
.pt-16 { padding-top: 4rem; }
.pt-20 { padding-top: 5rem; }
.pt-24 { padding-top: 6rem; }
.pt-32 { padding-top: 8rem; }
.pr-0 { padding-right: 0%; }
.pr-1 { padding-right: 0%.25rem; }
.pr-2 { padding-right: 0%.5rem; }
.pr-3 { padding-right: 0%.75rem; }
.pr-4 { padding-right: 1rem; }
.pr-5 { padding-right: 1%.25rem; }
.pr-6 { padding-right: 1%.5rem; }
.pr-8 { padding-right: 2rem; }
.pr-10 { padding-right: 2%.5rem; }
.pr-12 { padding-right: 3rem; }
.pr-16 { padding-right: 4rem; }
.pr-20 { padding-right: 5rem; }
.pr-24 { padding-right: 6rem; }
.pr-32 { padding-right: 8rem; }
.pb-0 { padding-bottom: 0%; }
.pb-1 { padding-bottom: 0%.25rem; }
.pb-2 { padding-bottom: 0%.5rem; }
.pb-3 { padding-bottom: 0%.75rem; }
.pb-4 { padding-bottom: 1rem; }
.pb-5 { padding-bottom: 1%.25rem; }
.pb-6 { padding-bottom: 1%.5rem; }
.pb-8 { padding-bottom: 2rem; }
.pb-10 { padding-bottom: 2%.5rem; }
.pb-12 { padding-bottom: 3rem; }
.pb-16 { padding-bottom: 4rem; }
.pb-20 { padding-bottom: 5rem; }
.pb-24 { padding-bottom: 6rem; }
.pb-32 { padding-bottom: 8rem; }
.pl-0 { padding-left: 0%; }
.pl-1 { padding-left: 0%.25rem; }
.pl-2 { padding-left: 0%.5rem; }
.pl-3 { padding-left: 0%.75rem; }
.pl-4 { padding-left: 1rem; }
.pl-5 { padding-left: 1%.25rem; }
.pl-6 { padding-left: 1%.5rem; }
.pl-8 { padding-left: 2rem; }
.pl-10 { padding-left: 2%.5rem; }
.pl-12 { padding-left: 3rem; }
.pl-16 { padding-left: 4rem; }
.pl-20 { padding-left: 5rem; }
.pl-24 { padding-left: 6rem; }
.pl-32 { padding-left: 8rem; }
}
/* Datei: layout/responsive.css */
/**
* Responsive Display & Visibility System
*
* A comprehensive responsive utility system for controlling element visibility,
* display properties, and responsive behavior across different screen sizes.
* This system provides mobile-first responsive design utilities with semantic
* class names and consistent breakpoint management.
*
* @layer layout.responsive
* @version 2.0
* @author Design System Team
*
* FEATURES:
* - Mobile-first responsive design approach
* - Display utilities for all CSS display values
* - Visibility controls for showing/hiding elements
* - Responsive variants for all major breakpoints
* - Print-specific utilities for print media
* - Screen reader utilities for accessibility
* - Consistent breakpoint system across all utilities
* - Performance-optimized CSS with minimal specificity
*
* BREAKPOINT SYSTEM:
* - Base: 0 and up (mobile-first)
* - sm: 640px and up (small tablets)
* - md: 768px and up (tablets)
* - lg: 1024px and up (laptops)
* - xl: 1280px and up (desktops)
* - 2xl: 1536px and up (large desktops)
*
* DISPLAY UTILITIES:
* - .block: Block-level element
* - .inline-block: Inline block element
* - .inline: Inline element
* - .flex: Flexbox container
* - .inline-flex: Inline flexbox container
* - .grid: CSS Grid container
* - .inline-grid: Inline grid container
* - .table: Table display
* - .table-cell: Table cell display
* - .table-row: Table row display
* - .hidden: Hide element (display: none)
*
* VISIBILITY UTILITIES:
* - .visible: Element is visible
* - .invisible: Element is invisible but takes space
* - .sr-only: Screen reader only (visually hidden)
* - .not-sr-only: Remove screen reader only styling
*
* RESPONSIVE VARIANTS:
* All display utilities are available with responsive prefixes:
* - sm:block, md:flex, lg:grid, xl:hidden, etc.
* - Example: .hidden.md:block (hidden on mobile, block on tablet+)
*
* PRINT UTILITIES:
* - .print:block: Show as block in print
* - .print:hidden: Hide in print
* - .print:inline: Show as inline in print
*
* USAGE EXAMPLES:
*
* Responsive Navigation:
* <nav class="hidden md:block">
* <!-- Hidden on mobile, visible on tablet+ -->
* <ul>Navigation items</ul>
* </nav>
*
* Mobile Menu Toggle:
* <button class="block md:hidden">
* <!-- Visible on mobile, hidden on tablet+ -->
* Menu Toggle
* </button>
*
* Responsive Layout:
* <div class="block lg:flex">
* <!-- Block layout on mobile/tablet, flex on desktop -->
* <main class="lg:flex-1">Content</main>
* <aside class="lg:flex-none">Sidebar</aside>
* </div>
*
* Progressive Enhancement:
* <div class="grid-fallback block sm:grid">
* <!-- Block fallback, grid on small screens+ -->
* <div>Item 1</div>
* <div>Item 2</div>
* </div>
*
* Accessibility:
* <span class="sr-only">
* Screen reader description
* </span>
* <button aria-describedby="description">
* <span class="sr-only">Close dialog</span>
* ×
* </button>
*
* Print Optimization:
* <div class="print:hidden">
* <!-- Hidden when printing -->
* <button>Interactive element</button>
* </div>
*
* <div class="hidden print:block">
* <!-- Only visible when printing -->
* <p>Print-specific content</p>
* </div>
*
* BROWSER SUPPORT:
* - CSS Grid: All modern browsers (IE 11+ with -ms- prefix)
* - Flexbox: All modern browsers (IE 11+ with -ms- prefix)
* - Media Queries: All modern browsers (IE 9+)
* - CSS Custom Properties: All modern browsers (IE 11+ with fallbacks)
*
* PERFORMANCE NOTES:
* - Mobile-first approach reduces CSS payload for mobile devices
* - Uses min-width media queries for better performance
* - Minimal CSS specificity prevents cascade conflicts
* - Print styles are separated to avoid render blocking
*
* ACCESSIBILITY:
* - .sr-only provides content for screen readers while hiding visually
* - Maintains semantic HTML structure regardless of display changes
* - Responsive visibility changes don't affect tab order
* - Print utilities ensure important content is available in print
*
* INTEGRATION:
* - Works seamlessly with layout/grid-system.css
* - Compatible with layout/flex-layouts.css
* - Enhanced by layout/responsive-utilities.css for layout-specific responsive variants
* - Supports layout/containers.css responsive containers
*
* BEST PRACTICES:
* - Use mobile-first approach: start with mobile styles, enhance for larger screens
* - Combine with semantic HTML for better accessibility
* - Test responsive behavior across all target breakpoints
* - Use .sr-only for important context that should be available to screen readers
* - Consider print styles for content-heavy applications
* - Avoid excessive responsive variants that create maintenance overhead
*
* DEBUGGING:
* Add temporary borders to debug responsive layouts:
* .debug * { border: 1px solid red !important; }
*
* MIGRATION:
* From older responsive systems:
* - .show-sm → .hidden.sm:block
* - .hide-md → .block.md:hidden
* - .visible-lg → .hidden.lg:block
*/
@layer layout.responsive {
/* ================= DISPLAY UTILITIES ================= */
/* Basis-Display-Eigenschaften */
.block { display: block; }
.inline-block { display: inline-block; }
.inline { display: inline; }
.flex { display: flex; }
.inline-flex { display: inline-flex; }
.grid { display: grid; }
.inline-grid { display: inline-grid; }
.table { display: table; }
.table-cell { display: table-cell; }
.table-row { display: table-row; }
.hidden { display: none; }
/* ================= VISIBILITY UTILITIES ================= */
/* Sichtbarkeits-Kontrollen */
.visible { visibility: visible; }
.invisible { visibility: hidden; }
/* Screen Reader Only - für Barrierefreiheit */
.sr-only {
border: 0;
clip: rect(0, 0, 0, 0);
height: 1px;
margin: -1px;
overflow: hidden;
padding: 0;
position: absolute;
white-space: nowrap;
width: 1px;
}
.not-sr-only {
border: initial;
clip: initial;
height: initial;
margin: initial;
overflow: initial;
padding: initial;
position: initial;
white-space: initial;
width: initial;
}
/* ================= RESPONSIVE BREAKPOINTS ================= */
/* Small screens (640px and up) */
@media (min-width: 640px) {
.sm\:block { display: block; }
.sm\:inline-block { display: inline-block; }
.sm\:inline { display: inline; }
.sm\:flex { display: flex; }
.sm\:inline-flex { display: inline-flex; }
.sm\:grid { display: grid; }
.sm\:inline-grid { display: inline-grid; }
.sm\:table { display: table; }
.sm\:table-cell { display: table-cell; }
.sm\:table-row { display: table-row; }
.sm\:hidden { display: none; }
.sm\:visible { visibility: visible; }
.sm\:invisible { visibility: hidden; }
}
/* Medium screens (768px and up) */
@media (min-width: 768px) {
.md\:block { display: block; }
.md\:inline-block { display: inline-block; }
.md\:inline { display: inline; }
.md\:flex { display: flex; }
.md\:inline-flex { display: inline-flex; }
.md\:grid { display: grid; }
.md\:inline-grid { display: inline-grid; }
.md\:table { display: table; }
.md\:table-cell { display: table-cell; }
.md\:table-row { display: table-row; }
.md\:hidden { display: none; }
.md\:visible { visibility: visible; }
.md\:invisible { visibility: hidden; }
}
/* Large screens (1024px and up) */
@media (min-width: 1024px) {
.lg\:block { display: block; }
.lg\:inline-block { display: inline-block; }
.lg\:inline { display: inline; }
.lg\:flex { display: flex; }
.lg\:inline-flex { display: inline-flex; }
.lg\:grid { display: grid; }
.lg\:inline-grid { display: inline-grid; }
.lg\:table { display: table; }
.lg\:table-cell { display: table-cell; }
.lg\:table-row { display: table-row; }
.lg\:hidden { display: none; }
.lg\:visible { visibility: visible; }
.lg\:invisible { visibility: hidden; }
}
/* Extra large screens (1280px and up) */
@media (width >= 1280px) {
.xl\:block { display: block; }
.xl\:inline-block { display: inline-block; }
.xl\:inline { display: inline; }
.xl\:flex { display: flex; }
.xl\:inline-flex { display: inline-flex; }
.xl\:grid { display: grid; }
.xl\:inline-grid { display: inline-grid; }
.xl\:table { display: table; }
.xl\:table-cell { display: table-cell; }
.xl\:table-row { display: table-row; }
.xl\:hidden { display: none; }
.xl\:visible { visibility: visible; }
.xl\:invisible { visibility: hidden; }
}
/* 2X large screens (1536px and up) */
@media (width >= 1536px) {
.\32xl\:block { display: block; }
.\32xl\:inline-block { display: inline-block; }
.\32xl\:inline { display: inline; }
.\32xl\:flex { display: flex; }
.\32xl\:inline-flex { display: inline-flex; }
.\32xl\:grid { display: grid; }
.\32xl\:inline-grid { display: inline-grid; }
.\32xl\:table { display: table; }
.\32xl\:table-cell { display: table-cell; }
.\32xl\:table-row { display: table-row; }
.\32xl\:hidden { display: none; }
.\32xl\:visible { visibility: visible; }
.\32xl\:invisible { visibility: hidden; }
}
/* ================= PRINT UTILITIES ================= */
/* Print-spezifische Stile */
@media print {
.print\:block { display: block !important; }
.print\:inline-block { display: inline-block !important; }
.print\:inline { display: inline !important; }
.print\:hidden { display: none !important; }
.print\:visible { visibility: visible !important; }