/**
 * 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; }
}