/* ---------- SHADOWS ---------- */

.xxl-shadow-drop {
    filter: drop-shadow(40px 40px 80px rgba(51, 53, 52, 0.25));
}

.xxl-shadow-box {
    box-shadow: 40px 40px 80px rgba(51, 53, 52, 0.25);
}

.xxl-shadow-drop {
    filter: drop-shadow(40px 40px 80px rgba(51, 53, 52, 0.25));
}

.xxl-shadow-box {
    box-shadow: 40px 40px 80px rgba(51, 53, 52, 0.25);
}

.lg-shadow-drop {
    filter: drop-shadow(30px 30px 60px rgba(51, 53, 52, 0.30));
}

.lg-shadow-box {
    box-shadow: 30px 30px 60px rgba(51, 53, 52, 0.30);
}

.md-shadow-drop {
    filter: drop-shadow(30px 30px 60px rgba(51, 53, 52, 0.10));
}

.md-shadow-box {
    box-shadow: 30px 30px 60px rgba(51, 53, 52, 0.10);
}

.sm-shadow-drop {
    filter: drop-shadow(20px 20px 40px rgba(51, 53, 52, 0.25));
}

.md-shadow-box {
    box-shadow: 20px 20px 40px rgba(51, 53, 52, 0.25);
}

/* ---------- SPACING-VALUES ---------- */
:root {
    /* 3px (min) – 4px (max) | freeze unter 376px, dann scale bis 1280px */
    --space-050: clamp(0.1875rem, calc(0.1875rem + (100vw - 23.5rem) * 0.00110), 0.25rem);

    /* 6px (min) – 8px (max) */
    --space-100: clamp(0.375rem, calc(0.375rem + (100vw - 23.5rem) * 0.00221), 0.5rem);

    /* 12px (min) – 16px (max) */
    --space-200: clamp(0.75rem, calc(0.75rem + (100vw - 23.5rem) * 0.00442), 1rem);

    /* 15px (min) – 20px (max) */
    --space-300: clamp(0.9375rem, calc(0.9375rem + (100vw - 23.5rem) * 0.00553), 1.25rem);

    /* 18px (min) – 24px (max) */
    --space-350: clamp(1.125rem, calc(1.125rem + (100vw - 23.5rem) * 0.00664), 1.5rem);

    /* 24px (min) – 32px (max) */
    --space-400: clamp(1.5rem, calc(1.5rem + (100vw - 23.5rem) * 0.00885), 2rem);

    /* 30px (min) – 40px (max) */
    --space-500: clamp(1.875rem, calc(1.875rem + (100vw - 23.5rem) * 0.01106), 2.5rem);

    /* 36px (min) – 48px (max) */
    --space-600: clamp(2.25rem, calc(2.25rem + (100vw - 23.5rem) * 0.01327), 3rem);

    /* 42px (min) – 56px (max) */
    --space-700: clamp(2.625rem, calc(2.625rem + (100vw - 23.5rem) * 0.01548), 3.5rem);

    /* 48px (min) – 64px (max) */
    --space-800: clamp(3rem, calc(3rem + (100vw - 23.5rem) * 0.01769), 4rem);

    /* 72px (min) – 96px (max) */
    --space-1200: clamp(4.5rem, calc(4.5rem + (100vw - 23.5rem) * 0.02655), 6rem);

    /* 96px (min) – 128px (max) */
    --space-1600: clamp(6rem, calc(6rem + (100vw - 23.5rem) * 0.03540), 8rem);
}

/* ---------- PADDING (ALL) ---------- */

/* All sides */
.p-050  { padding: var(--space-050); }
.p-100  { padding: var(--space-100); }
.p-200  { padding: var(--space-200); }
.p-300  { padding: var(--space-300); }
.p-350  { padding: var(--space-350); }
.p-400  { padding: var(--space-400); }
.p-500  { padding: var(--space-500); }
.p-600  { padding: var(--space-600); }
.p-700  { padding: var(--space-700); }
.p-800  { padding: var(--space-800); }
.p-1200 { padding: var(--space-1200); }
.p-1600 { padding: var(--space-1600); }

/* Vertical (top + bottom) */
.py-050  { padding-block: var(--space-050); }
.py-100  { padding-block: var(--space-100); }
.py-200  { padding-block: var(--space-200); }
.py-300  { padding-block: var(--space-300); }
.py-350  { padding-block: var(--space-350); }
.py-400  { padding-block: var(--space-400); }
.py-500  { padding-block: var(--space-500); }
.py-600  { padding-block: var(--space-600); }
.py-700  { padding-block: var(--space-700); }
.py-800  { padding-block: var(--space-800); }
.py-1200 { padding-block: var(--space-1200); }
.py-1600 { padding-block: var(--space-1600); }

/* Horizontal (left + right) */
.px-050  { padding-inline: var(--space-050); }
.px-100  { padding-inline: var(--space-100); }
.px-200  { padding-inline: var(--space-200); }
.px-300  { padding-inline: var(--space-300); }
.px-350  { padding-inline: var(--space-350); }
.px-400  { padding-inline: var(--space-400); }
.px-500  { padding-inline: var(--space-500); }
.px-600  { padding-inline: var(--space-600); }
.px-700  { padding-inline: var(--space-700); }
.px-800  { padding-inline: var(--space-800); }
.px-1200 { padding-inline: var(--space-1200); }
.px-1600 { padding-inline: var(--space-1600); }

/* ---------- MARGIN (ALL) ---------- */

/* All sides */
.m-050  { margin: var(--space-050); }
.m-100  { margin: var(--space-100); }
.m-200  { margin: var(--space-200); }
.m-300  { margin: var(--space-300); }
.m-350  { margin: var(--space-350); }
.m-400  { margin: var(--space-400); }
.m-500  { margin: var(--space-500); }
.m-600  { margin: var(--space-600); }
.m-700  { margin: var(--space-700); }
.m-800  { margin: var(--space-800); }
.m-1200 { margin: var(--space-1200); }
.m-1600 { margin: var(--space-1600); }

/* Vertical (top + bottom) */
.my-050  { margin-block: var(--space-050); }
.my-100  { margin-block: var(--space-100); }
.my-200  { margin-block: var(--space-200); }
.my-300  { margin-block: var(--space-300); }
.my-350  { margin-block: var(--space-350); }
.my-400  { margin-block: var(--space-400); }
.my-500  { margin-block: var(--space-500); }
.my-600  { margin-block: var(--space-600); }
.my-700  { margin-block: var(--space-700); }
.my-800  { margin-block: var(--space-800); }
.my-1200 { margin-block: var(--space-1200); }
.my-1600 { margin-block: var(--space-1600); }

/* Horizontal (left + right) */
.mx-050  { margin-inline: var(--space-050); }
.mx-100  { margin-inline: var(--space-100); }
.mx-200  { margin-inline: var(--space-200); }
.mx-300  { margin-inline: var(--space-300); }
.mx-350  { margin-inline: var(--space-350); }
.mx-400  { margin-inline: var(--space-400); }
.mx-500  { margin-inline: var(--space-500); }
.mx-600  { margin-inline: var(--space-600); }
.mx-700  { margin-inline: var(--space-700); }
.mx-800  { margin-inline: var(--space-800); }
.mx-1200 { margin-inline: var(--space-1200); }
.mx-1600 { margin-inline: var(--space-1600); }