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

        .print\:invisible { visibility: hidden !important; }
      }
    }

/* Datei: layout/responsive-utilities.css */
/**
    * Responsive Layout Utilities
    *
    * Advanced responsive utilities specifically designed for grid and flex layouts.
    * This system provides responsive variants of layout-specific properties that
    * complement the base grid and flex systems with breakpoint-aware functionality.
    *
    * @layer layout.responsive-utilities
    * @version 2.0
    * @author Design System Team
    *
    * FEATURES:
    * - Responsive grid column and row utilities
    * - Responsive flexbox direction and alignment
    * - Responsive gap and spacing controls
    * - Mobile-first responsive design approach
    * - Consistent breakpoint system across all utilities
    * - Optimized CSS output with minimal redundancy
    * - Semantic class naming for better maintainability
    * - Performance-optimized media queries
    *
    * 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)
    *
    * RESPONSIVE GRID UTILITIES:
    * - sm:grid-cols-{1-12}: Responsive grid columns
    * - md:col-span-{1-12}: Responsive column spans
    * - lg:row-span-{1-6}: Responsive row spans
    * - xl:grid-auto-fit: Responsive auto-fit layouts
    * - 2xl:grid-subgrid: Responsive subgrid layouts
    *
    * RESPONSIVE FLEX UTILITIES:
    * - sm:flex-row: Responsive flex direction
    * - md:flex-col: Responsive flex direction
    * - lg:items-center: Responsive item alignment
    * - xl:justify-between: Responsive content justification
    * - 2xl:flex-wrap: Responsive flex wrapping
    *
    * RESPONSIVE SPACING:
    * - sm:gap-{size}: Responsive gap utilities
    * - md:space-x-{size}: Responsive horizontal spacing
    * - lg:space-y-{size}: Responsive vertical spacing
    *
    * USAGE EXAMPLES:
    *
    * Responsive Grid Layout:
    * <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4">
    *   <!-- 1 column on mobile, 2 on tablet, 3 on laptop, 4 on desktop -->
    *   <div>Item 1</div>
    *   <div>Item 2</div>
    *   <div>Item 3</div>
    *   <div>Item 4</div>
    * </div>
    *
    * Responsive Flex Direction:
    * <div class="flex flex-col md:flex-row gap-4">
    *   <!-- Vertical on mobile, horizontal on tablet+ -->
    *   <main class="flex-1">Main content</main>
    *   <aside class="md:w-64">Sidebar</aside>
    * </div>
    *
    * Responsive Column Spans:
    * <div class="grid grid-cols-12 gap-4">
    *   <div class="col-span-12 md:col-span-8 lg:col-span-9">
    *     <!-- Full width on mobile, 8/12 on tablet, 9/12 on laptop -->
    *     Main content
    *   </div>
    *   <div class="col-span-12 md:col-span-4 lg:col-span-3">
    *     <!-- Full width on mobile, 4/12 on tablet, 3/12 on laptop -->
    *     Sidebar
    *   </div>
    * </div>
    *
    * Responsive Alignment:
    * <div class="flex flex-col items-start md:flex-row md:items-center lg:justify-between">
    *   <!-- Different alignment at each breakpoint -->
    *   <h1>Title</h1>
    *   <nav>Navigation</nav>
    * </div>
    *
    * Responsive Card Grid:
    * <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-4 lg:gap-6">
    *   <!-- Responsive columns with responsive gaps -->
    *   <div class="card">Card 1</div>
    *   <div class="card">Card 2</div>
    *   <div class="card">Card 3</div>
    * </div>
    *
    * Complex Responsive Layout:
    * <div class="grid grid-cols-1 lg:grid-cols-4 gap-6">
    *   <header class="col-span-1 lg:col-span-4">Header</header>
    *   <main class="col-span-1 lg:col-span-3">Main</main>
    *   <aside class="col-span-1">Sidebar</aside>
    *   <footer class="col-span-1 lg:col-span-4">Footer</footer>
    * </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+)
    * - Gap Property: Chrome 84+, Firefox 63+, Safari 14.1+
    * - Subgrid: Firefox 71+, Safari 16+, Chrome 117+
    *
    * PERFORMANCE NOTES:
    * - Mobile-first approach reduces CSS payload for mobile devices
    * - Uses min-width media queries for optimal performance
    * - Consolidated media queries reduce CSS file size
    * - Efficient selector specificity prevents cascade conflicts
    * - Gap properties are more performant than margin utilities
    *
    * ACCESSIBILITY:
    * - Responsive layouts maintain semantic HTML structure
    * - Grid and flex layouts preserve document flow for screen readers
    * - Responsive changes don't affect keyboard navigation order
    * - Visual layout changes don't impact assistive technology
    * - Ensure content remains accessible at all breakpoints
    *
    * INTEGRATION:
    * - Extends layout/grid-system.css with responsive variants
    * - Complements layout/flex-layouts.css with responsive variants
    * - Works with layout/spacing.css for responsive spacing
    * - Compatible with layout/containers.css for responsive containers
    * - Enhanced by layout/responsive.css for display utilities
    *
    * BEST PRACTICES:
    * - Start with mobile-first design approach
    * - Use semantic breakpoint names (sm, md, lg, xl, 2xl)
    * - Test layouts across all target breakpoints
    * - Combine grid and flex utilities for complex layouts
    * - Use consistent spacing scales across breakpoints
    * - Avoid excessive responsive variants that create maintenance overhead
    * - Consider performance impact of complex responsive layouts
    *
    * DEBUGGING:
    * Add responsive debug utilities:
    * .debug-responsive::before {
      *   content: 'mobile';
      *   position: fixed;
      *   top: 0%;
      *   right: 0%;
      *   background: red;
      *   color: white;
      *   padding: 0.25rem;
      * }
      * @media (min-width: 640px) {
        *   .debug-responsive::before { content: 'sm'; }
        * }
        *
        * MIGRATION:
        * From older responsive systems:
        * - .col-md-6 → .col-span-6.md:col-span-6
        * - .flex-sm-row → .flex-col.sm:flex-row
        * - .d-lg-block → .hidden.lg:block
        */

        @layer layout.responsive-utilities {
/* ================= RESPONSIVE GRID UTILITIES ================= */

/* Small screens (640px and up) */
          @media (min-width: 640px) {
            .sm\:grid-cols-1 { grid-template-columns: repeat(1, 1fr); }

            .sm\:grid-cols-2 { grid-template-columns: repeat(2, 1fr); }

            .sm\:grid-cols-3 { grid-template-columns: repeat(3, 1fr); }

            .sm\:grid-cols-4 { grid-template-columns: repeat(4, 1fr); }

            .sm\:grid-cols-6 { grid-template-columns: repeat(6, 1fr); }

            .sm\:grid-cols-12 { grid-template-columns: repeat(12, 1fr); }

            .sm\:grid-auto-fit { grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); }

            .sm\:grid-auto-fill { grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); }

            .sm\:col-span-1 { grid-column: span 1; }

            .sm\:col-span-2 { grid-column: span 2; }

            .sm\:col-span-3 { grid-column: span 3; }

            .sm\:col-span-4 { grid-column: span 4; }

            .sm\:col-span-6 { grid-column: span 6; }

            .sm\:col-span-12 { grid-column: span 12; }

            .sm\:col-span-full { grid-column: 1 / -1; }

            .sm\:row-span-1 { grid-row: span 1; }

            .sm\:row-span-2 { grid-row: span 2; }

            .sm\:row-span-3 { grid-row: span 3; }

            .sm\:row-span-4 { grid-row: span 4; }

            .sm\:row-span-5 { grid-row: span 5; }

            .sm\:row-span-6 { grid-row: span 6; }

            .sm\:row-span-full { grid-row: 1 / -1; }
          }

/* Medium screens (768px and up) */
          @media (min-width: 768px) {
            .md\:grid-cols-1 { grid-template-columns: repeat(1, 1fr); }

            .md\:grid-cols-2 { grid-template-columns: repeat(2, 1fr); }

            .md\:grid-cols-3 { grid-template-columns: repeat(3, 1fr); }

            .md\:grid-cols-4 { grid-template-columns: repeat(4, 1fr); }

            .md\:grid-cols-6 { grid-template-columns: repeat(6, 1fr); }

            .md\:grid-cols-12 { grid-template-columns: repeat(12, 1fr); }

            .md\:grid-auto-fit { grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); }

            .md\:grid-auto-fill { grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); }

            .md\:col-span-1 { grid-column: span 1; }

            .md\:col-span-2 { grid-column: span 2; }

            .md\:col-span-3 { grid-column: span 3; }

            .md\:col-span-4 { grid-column: span 4; }

            .md\:col-span-6 { grid-column: span 6; }

            .md\:col-span-12 { grid-column: span 12; }

            .md\:col-span-full { grid-column: 1 / -1; }

            .md\:row-span-1 { grid-row: span 1; }

            .md\:row-span-2 { grid-row: span 2; }

            .md\:row-span-3 { grid-row: span 3; }

            .md\:row-span-4 { grid-row: span 4; }

            .md\:row-span-5 { grid-row: span 5; }

            .md\:row-span-6 { grid-row: span 6; }

            .md\:row-span-full { grid-row: 1 / -1; }
          }

/* Large screens (1024px and up) */
          @media (min-width: 1024px) {
            .lg\:grid-cols-1 { grid-template-columns: repeat(1, 1fr); }

            .lg\:grid-cols-2 { grid-template-columns: repeat(2, 1fr); }

            .lg\:grid-cols-3 { grid-template-columns: repeat(3, 1fr); }

            .lg\:grid-cols-4 { grid-template-columns: repeat(4, 1fr); }

            .lg\:grid-cols-6 { grid-template-columns: repeat(6, 1fr); }

            .lg\:grid-cols-12 { grid-template-columns: repeat(12, 1fr); }

            .lg\:grid-auto-fit { grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); }

            .lg\:grid-auto-fill { grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); }

            .lg\:col-span-1 { grid-column: span 1; }

            .lg\:col-span-2 { grid-column: span 2; }

            .lg\:col-span-3 { grid-column: span 3; }

            .lg\:col-span-4 { grid-column: span 4; }

            .lg\:col-span-6 { grid-column: span 6; }

            .lg\:col-span-12 { grid-column: span 12; }

            .lg\:col-span-full { grid-column: 1 / -1; }

            .lg\:row-span-1 { grid-row: span 1; }

            .lg\:row-span-2 { grid-row: span 2; }

            .lg\:row-span-3 { grid-row: span 3; }

            .lg\:row-span-4 { grid-row: span 4; }

            .lg\:row-span-5 { grid-row: span 5; }

            .lg\:row-span-6 { grid-row: span 6; }

            .lg\:row-span-full { grid-row: 1 / -1; }
          }

/* Extra large screens (1280px and up) */
          @media (width >= 1280px) {
            .xl\:grid-cols-1 { grid-template-columns: repeat(1, 1fr); }

            .xl\:grid-cols-2 { grid-template-columns: repeat(2, 1fr); }

            .xl\:grid-cols-3 { grid-template-columns: repeat(3, 1fr); }

            .xl\:grid-cols-4 { grid-template-columns: repeat(4, 1fr); }

            .xl\:grid-cols-6 { grid-template-columns: repeat(6, 1fr); }

            .xl\:grid-cols-12 { grid-template-columns: repeat(12, 1fr); }

            .xl\:grid-auto-fit { grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); }

            .xl\:grid-auto-fill { grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); }

            .xl\:col-span-1 { grid-column: span 1; }

            .xl\:col-span-2 { grid-column: span 2; }

            .xl\:col-span-3 { grid-column: span 3; }

            .xl\:col-span-4 { grid-column: span 4; }

            .xl\:col-span-6 { grid-column: span 6; }

            .xl\:col-span-12 { grid-column: span 12; }

            .xl\:col-span-full { grid-column: 1 / -1; }

            .xl\:row-span-1 { grid-row: span 1; }

            .xl\:row-span-2 { grid-row: span 2; }

            .xl\:row-span-3 { grid-row: span 3; }

            .xl\:row-span-4 { grid-row: span 4; }

            .xl\:row-span-5 { grid-row: span 5; }

            .xl\:row-span-6 { grid-row: span 6; }

            .xl\:row-span-full { grid-row: 1 / -1; }
          }

/* 2X large screens (1536px and up) */
          @media (width >= 1536px) {
            .\32xl\:grid-cols-1 { grid-template-columns: repeat(1, 1fr); }

            .\32xl\:grid-cols-2 { grid-template-columns: repeat(2, 1fr); }

            .\32xl\:grid-cols-3 { grid-template-columns: repeat(3, 1fr); }

            .\32xl\:grid-cols-4 { grid-template-columns: repeat(4, 1fr); }

            .\32xl\:grid-cols-6 { grid-template-columns: repeat(6, 1fr); }

            .\32xl\:grid-cols-12 { grid-template-columns: repeat(12, 1fr); }

            .\32xl\:grid-auto-fit { grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); }

            .\32xl\:grid-auto-fill { grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); }

            .\32xl\:col-span-1 { grid-column: span 1; }

            .\32xl\:col-span-2 { grid-column: span 2; }

            .\32xl\:col-span-3 { grid-column: span 3; }

            .\32xl\:col-span-4 { grid-column: span 4; }

            .\32xl\:col-span-6 { grid-column: span 6; }

            .\32xl\:col-span-12 { grid-column: span 12; }

            .\32xl\:col-span-full { grid-column: 1 / -1; }

            .\32xl\:row-span-1 { grid-row: span 1; }

            .\32xl\:row-span-2 { grid-row: span 2; }

            .\32xl\:row-span-3 { grid-row: span 3; }

            .\32xl\:row-span-4 { grid-row: span 4; }

            .\32xl\:row-span-5 { grid-row: span 5; }

            .\32xl\:row-span-6 { grid-row: span 6; }

            .\32xl\:row-span-full { grid-row: 1 / -1; }
          }
        }


/* Datei: layout/index.css */
/**
        * Layout System Index
        *
        * Konsolidiertes Layout-System mit optimierter Struktur:
        *
        * CORE LAYOUT SYSTEMS:
        * - Grid System: Utility-basiertes 12-Spalten-Grid (.grid, .grid-cols-*, .col-span-*)
        * - Flex System: Flexbox-Utilities (.flex, .flex-row, .items-center, etc.)
        * - Container System: Container-Größen und -Eigenschaften (.container, .container-md, etc.)
        *
        * RESPONSIVE & UTILITIES:
        * - Responsive: Container Queries + Media Query Fallbacks (.sm:block, .md:hidden, etc.)
        * - Responsive Utilities: Responsive Grid/Flex-Utilities (.sm:grid-cols-2, .md:flex-row, etc.)
        * - Spacing: Gap-, Margin-, Padding-Utilities (.gap-4, .mx-auto, .p-6, etc.)
        *
        * HINWEIS:
        * - Page-Layouts sind in core/logical-properties.css verfügbar (.layout)
        * - Sidebar-Komponenten sind in ui/regions/sidebar.css und ui/menu/sidebar.css verfügbar
        */

/* ================= CORE LAYOUT SYSTEMS ================= */
/* Importierte Datei: layout/grid-system.css */
/**
        * Grid Layout System
        *
        * A comprehensive 12-column grid system with utility classes for modern web layouts.
        * This system provides flexible grid layouts using CSS Grid with semantic class names
        * and responsive capabilities.
        *
        * @layer layout.grid
        * @version 2.0
        * @author Design System Team
        *
        * FEATURES:
        * - 12-column grid system with flexible column spans
        * - Auto-fit and auto-fill grid layouts for responsive cards
        * - Subgrid support for nested layouts
        * - Semantic utility classes (.grid, .grid-cols-*, .col-span-*)
        * - CSS Grid native implementation (no flexbox fallbacks)
        * - Works with spacing.css for gap utilities
        * - Compatible with responsive-utilities.css for breakpoint variants
        *
        * GRID CLASSES:
        * - .grid: Base grid container
        * - .grid-cols-{1-12}: Define number of columns
        * - .col-span-{1-12}: Span multiple columns
        * - .col-span-full: Span all available columns
        * - .row-span-{1-6}: Span multiple rows
        * - .grid-auto-fit: Auto-fit responsive layout
        * - .grid-auto-fill: Auto-fill responsive layout
        *
        * LAYOUT VARIANTS:
        * - .layout-grid: Semantic grid with default gutter
        * - .layout-grid-{2,3,4,6}: Predefined column layouts
        * - .layout-grid-auto-fit: Responsive card layouts
        *
        * SUBGRID SUPPORT:
        * - .grid-subgrid: Inherit parent grid columns
        * - .row-subgrid: Inherit parent grid rows
        *
        * USAGE EXAMPLES:
        *
        * Basic Grid:
        * <div class="grid grid-cols-3 gap-4">
        *   <div>Item 1</div>
        *   <div>Item 2</div>
        *   <div>Item 3</div>
        * </div>
        *
        * Responsive Card Layout:
        * <div class="grid-auto-fit gap-6">
        *   <div class="card">Card 1</div>
        *   <div class="card">Card 2</div>
        *   <div class="card">Card 3</div>
        * </div>
        *
        * Complex Layout:
        * <div class="grid grid-cols-12 gap-4">
        *   <div class="col-span-8">Main content</div>
        *   <div class="col-span-4">Sidebar</div>
        *   <div class="col-span-full">Footer</div>
        * </div>
        *
        * Subgrid Example:
        * <div class="grid grid-cols-4 gap-4">
        *   <div class="col-span-2 grid-subgrid gap-2">
        *     <div>Nested 1</div>
        *     <div>Nested 2</div>
        *   </div>
        * </div>
        *
        * RESPONSIVE USAGE:
        * Use with responsive-utilities.css for breakpoint-specific layouts:
        * <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4">
        *   <!-- Responsive grid that adapts to screen size -->
        * </div>
        *
        * BROWSER SUPPORT:
        * - CSS Grid: All modern browsers (IE 11+ with -ms- prefix)
        * - Subgrid: Firefox 71+, Safari 16+, Chrome 117+
        * - Container Queries: Chrome 105+, Firefox 110+, Safari 16+
        *
        * PERFORMANCE NOTES:
        * - CSS Grid is highly optimized for layout performance
        * - Subgrid reduces layout recalculations
        * - Auto-fit/auto-fill are efficient for responsive designs
        * - Use gap properties instead of margins for better performance
        *
        * ACCESSIBILITY:
        * - Grid layouts maintain document flow for screen readers
        * - Use semantic HTML elements within grid containers
        * - Ensure logical tab order is preserved
        * - Test with keyboard navigation
        *
        * INTEGRATION:
        * - Works seamlessly with layout/containers.css for container sizing
        * - Combines with layout/spacing.css for gap utilities
        * - Enhanced by layout/responsive-utilities.css for responsive variants
        * - Compatible with layout/flex-layouts.css for hybrid layouts
        */

        @layer layout.grid {
/* ================= GRID-LAYOUT-SYSTEM ================= */

/* Basierend auf dem 12-Spalten-Grid-System, mit einheitlichen Abständen */
          .layout-grid {
            display: grid;
            gap: var(--grid-gutter, 1rem);
            grid-template-columns: repeat(var(--grid-columns, 12), 1fr);
          }

/* Varianten mit unterschiedlichen Spaltenanzahlen */
          .layout-grid-2 {
            display: grid;
            gap: var(--grid-gutter, 1rem);
            grid-template-columns: repeat(2, 1fr);
          }

          .layout-grid-3 {
            display: grid;
            gap: var(--grid-gutter, 1rem);
            grid-template-columns: repeat(3, 1fr);
          }

          .layout-grid-4 {
            display: grid;
            gap: var(--grid-gutter, 1rem);
            grid-template-columns: repeat(4, 1fr);
          }

          .layout-grid-6 {
            display: grid;
            gap: var(--grid-gutter, 1rem);
            grid-template-columns: repeat(6, 1fr);
          }

/* Auto-Fit Grid für responsive Karten-Layouts */
          .layout-grid-auto-fit {
            display: grid;
            gap: var(--grid-gutter, 1rem);
            grid-template-columns: repeat(auto-fit, minmax(var(--grid-auto-fit-min, 200px), 1fr));
          }

/* ================= SUBGRID / NESTED ================= */

/* Komponenten für verschachtelte Grid-Layouts mit Subgrid */
          .grid-subgrid {
            display: grid;
            grid-template-columns: subgrid;
          }

          .row-subgrid {
            display: grid;
            grid-template-rows: subgrid;
          }

/* ================= GRID UTILITIES ================= */

/* Grid-Spalten */
          .grid { display: grid; }

          .grid-cols-1 { grid-template-columns: repeat(1, 1fr); }

          .grid-cols-2 { grid-template-columns: repeat(2, 1fr); }

          .grid-cols-3 { grid-template-columns: repeat(3, 1fr); }

          .grid-cols-4 { grid-template-columns: repeat(4, 1fr); }

          .grid-cols-6 { grid-template-columns: repeat(6, 1fr); }

          .grid-cols-12 { grid-template-columns: repeat(12, 1fr); }

          .grid-auto-fit { grid-template-columns: repeat(auto-fit, minmax(var(--grid-auto-fit-min, 200px), 1fr)); }

          .grid-auto-fill { grid-template-columns: repeat(auto-fill, minmax(var(--grid-auto-fill-min, 200px), 1fr)); }

/* Spaltenspannen für Grid-Items */
          .col-span-1 { grid-column: span 1; }

          .col-span-2 { grid-column: span 2; }

          .col-span-3 { grid-column: span 3; }

          .col-span-4 { grid-column: span 4; }

          .col-span-6 { grid-column: span 6; }

          .col-span-12 { grid-column: span 12; }

          .col-span-full { grid-column: 1 / -1; }

/* Grid-Zeilen */
          .grid-rows-1 { grid-template-rows: repeat(1, 1fr); }

          .grid-rows-2 { grid-template-rows: repeat(2, 1fr); }

          .grid-rows-3 { grid-template-rows: repeat(3, 1fr); }

          .grid-rows-4 { grid-template-rows: repeat(4, 1fr); }

          .grid-rows-5 { grid-template-rows: repeat(5, 1fr); }

          .grid-rows-6 { grid-template-rows: repeat(6, 1fr); }

/* Zeilen-Span */
          .row-span-1 { grid-row: span 1; }

          .row-span-2 { grid-row: span 2; }

          .row-span-3 { grid-row: span 3; }

          .row-span-4 { grid-row: span 4; }

          .row-span-5 { grid-row: span 5; }

          .row-span-6 { grid-row: span 6; }

          .row-span-full { grid-row: 1 / -1; }
        }

/* Importierte Datei: layout/flex-layouts.css */
/**
        * Flex Layout System
        *
        * A comprehensive flexbox-based layout system providing flexible and responsive
        * layout utilities for modern web applications. This system offers semantic
        * flexbox classes with intuitive naming conventions.
        *
        * @layer layout.flex
        * @version 2.0
        * @author Design System Team
        *
        * FEATURES:
        * - Complete flexbox utility system
        * - Semantic layout components (.layout-flex-*)
        * - Direction, wrapping, and alignment utilities
        * - Flexible item sizing with flex-basis utilities
        * - Self-alignment controls for individual items
        * - Grow and shrink utilities for dynamic layouts
        * - Works seamlessly with CSS Grid system
        * - Responsive-ready with breakpoint variants
        *
        * FLEX CONTAINER CLASSES:
        * - .flex: Base flex container
        * - .inline-flex: Inline flex container
        * - .flex-row: Horizontal direction (default)
        * - .flex-col: Vertical direction
        * - .flex-wrap: Allow wrapping
        * - .flex-nowrap: Prevent wrapping
        *
        * ALIGNMENT CLASSES:
        * - .items-start: Align items to start
        * - .items-center: Center align items
        * - .items-end: Align items to end
        * - .items-stretch: Stretch items to fill
        * - .items-baseline: Baseline alignment
        * - .justify-start: Justify content to start
        * - .justify-center: Center justify content
        * - .justify-end: Justify content to end
        * - .justify-between: Space between items
        * - .justify-around: Space around items
        * - .justify-evenly: Even space distribution
        *
        * FLEX ITEM CLASSES:
        * - .flex-1: Grow and shrink equally
        * - .flex-auto: Grow and shrink based on content
        * - .flex-none: Don't grow or shrink
        * - .flex-initial: Initial flex value
        * - .flex-grow: Allow growing
        * - .flex-shrink: Allow shrinking
        *
        * FLEX BASIS UTILITIES:
        * - .flex-basis-1-2: 50 basis
        * - .flex-basis-1-3: 33.33% basis
        * - .flex-basis-2-3: 66.67% basis
        * - .flex-basis-1-4: 25% basis
        * - .flex-basis-3-4: 75% basis
        * - .flex-basis-1-5: 20 basis
        * - .flex-basis-2-5: 40 basis
        * - .flex-basis-3-5: 60 basis
        * - .flex-basis-4-5: 80 basis
        *
        * SELF-ALIGNMENT:
        * - .self-auto: Auto alignment
        * - .self-start: Align self to start
        * - .self-center: Center align self
        * - .self-end: Align self to end
        * - .self-stretch: Stretch self
        *
        * LAYOUT COMPONENTS:
        * - .layout-flex: Semantic flex column with gap
        * - .layout-flex-row: Semantic flex row with gap
        * - .layout-flex-column: Semantic flex column with gap
        * - .layout-flex-between: Space-between layout
        * - .layout-flex-center: Centered layout
        *
        * USAGE EXAMPLES:
        *
        * Basic Flex Layout:
        * <div class="flex items-center justify-between">
        *   <div>Logo</div>
        *   <nav class="flex gap-4">
        *     <a href="#">Home</a>
        *     <a href="#">About</a>
        *   </nav>
        * </div>
        *
        * Card Layout:
        * <div class="flex flex-col gap-4">
        *   <h2>Card Title</h2>
        *   <p class="flex-1">Card content that grows</p>
        *   <button>Action</button>
        * </div>
        *
        * Responsive Layout:
        * <div class="flex flex-col md:flex-row gap-6">
        *   <main class="flex-1">Main content</main>
        *   <aside class="flex-basis-1-3">Sidebar</aside>
        * </div>
        *
        * Complex Alignment:
        * <div class="flex flex-wrap items-start justify-center gap-4">
        *   <div class="flex-basis-1-3 self-stretch">Item 1</div>
        *   <div class="flex-basis-1-3 self-center">Item 2</div>
        *   <div class="flex-basis-1-3 self-end">Item 3</div>
        * </div>
        *
        * RESPONSIVE USAGE:
        * Use with responsive-utilities.css for breakpoint-specific layouts:
        * <div class="flex-col sm:flex-row items-center sm:items-start">
        *   <!-- Responsive flex direction and alignment -->
        * </div>
        *
        * BROWSER SUPPORT:
        * - Flexbox: All modern browsers (IE 11+ with -ms- prefix)
        * - Gap property: Chrome 84+, Firefox 63+, Safari 14.1+
        * - Fallback: Use margin utilities for older browsers
        *
        * PERFORMANCE NOTES:
        * - Flexbox is highly optimized for one-dimensional layouts
        * - Use CSS Grid for two-dimensional layouts
        * - Gap property is more performant than margins
        * - Avoid deep nesting of flex containers
        *
        * ACCESSIBILITY:
        * - Flex layouts maintain document flow for screen readers
        * - Use semantic HTML elements within flex containers
        * - Be careful with flex-direction: column and tab order
        * - Test with keyboard navigation
        * - Consider using order property sparingly
        *
        * INTEGRATION:
        * - Complements layout/grid-system.css for hybrid layouts
        * - Works with layout/spacing.css for gap utilities
        * - Enhanced by layout/responsive-utilities.css for responsive variants
        * - Compatible with layout/containers.css for container sizing
        *
        * BEST PRACTICES:
        * - Use flexbox for one-dimensional layouts (rows or columns)
        * - Use CSS Grid for two-dimensional layouts
        * - Prefer gap over margins for spacing
        * - Use semantic layout components for common patterns
        * - Test responsive behavior across breakpoints
        * - Ensure accessibility with proper HTML structure
        */

        @layer layout.flex {
/* ================= FLEX-LAYOUT-SYSTEM ================= */

          .layout-flex {
            display: flex;
            flex-direction: column;
            gap: var(--grid-gutter, 1rem);
          }

/* Typische Flex-Layouts */
          .layout-flex-row {
            display: flex;
            flex-direction: row;
            gap: var(--grid-gutter, 1rem);
          }

          .layout-flex-column {
            display: flex;
            flex-direction: column;
            gap: var(--grid-gutter, 1rem);
          }

/* Verteilte Layouts */
          .layout-flex-between {
            display: flex;
            flex-direction: row;
            gap: var(--grid-gutter, 1rem);
            justify-content: space-between;
          }

          .layout-flex-center {
            align-items: center;
            display: flex;
            gap: var(--grid-gutter, 1rem);
            justify-content: center;
          }

/* ================= FLEX UTILITIES ================= */

/* Display-Typen */
          .flex { display: flex; }

          .inline-flex { display: inline-flex; }

/* Flex-Richtung und Umbruchverhalten */
          .flex-row { flex-direction: row; }

          .flex-col { flex-direction: column; }

          .flex-wrap { flex-wrap: wrap; }

          .flex-nowrap { flex-wrap: nowrap; }

/* Ausrichtung von Flex-Items */
          .items-start { align-items: flex-start; }

          .items-center { align-items: center; }

          .items-end { align-items: flex-end; }

          .items-stretch { align-items: stretch; }

          .items-baseline { align-items: baseline; }

          .justify-start { justify-content: flex-start; }

          .justify-center { justify-content: center; }

          .justify-end { justify-content: flex-end; }

          .justify-between { justify-content: space-between; }

          .justify-around { justify-content: space-around; }

          .justify-evenly { justify-content: space-evenly; }

/* Flex-Eigenschaften */
          .flex-1 { flex: 1 1 0; }

          .flex-auto { flex: 1 1 auto; }

          .flex-none { flex: none; }

          .flex-initial { flex: 0 1 auto; }

/* Flex-Basis für flexible Layouts */
          .flex-basis-1-2 { flex-basis: 50%; }

          .flex-basis-1-3 { flex-basis: 33.3333%; }

          .flex-basis-2-3 { flex-basis: 66.6667%; }

          .flex-basis-1-4 { flex-basis: 25%; }

          .flex-basis-3-4 { flex-basis: 75%; }

          .flex-basis-1-5 { flex-basis: 20%; }

          .flex-basis-2-5 { flex-basis: 40%; }

          .flex-basis-3-5 { flex-basis: 60%; }

          .flex-basis-4-5 { flex-basis: 80%; }

/* Flex-Grow und Flex-Shrink */
          .flex-grow { flex-grow: 1; }

          .flex-grow-0 { flex-grow: 0; }

          .flex-shrink { flex-shrink: 1; }

          .flex-shrink-0 { flex-shrink: 0; }

/* Self-Alignment */
          .self-auto { align-self: auto; }

          .self-start { align-self: flex-start; }

          .self-center { align-self: center; }

          .self-end { align-self: flex-end; }

          .self-stretch { align-self: stretch; }
        }

/* Importierte Datei: layout/containers.css */
/**
        * Container Layout System
        *
        * A comprehensive container system providing responsive width constraints,
        * positioning utilities, and specialized container types for modern web layouts.
        * This system consolidates all container-related functionality into a unified
        * and maintainable solution.
        *
        * @layer layout.containers
        * @version 2.0
        * @author Design System Team
        *
        * FEATURES:
        * - Responsive container system with breakpoint-based max-widths
        * - Fluid containers that adapt to viewport width
        * - Positioned containers for overlays and modals
        * - Visual containers with styling and effects
        * - Functional containers for specific UI patterns
        * - Z-index management system for layering
        * - CSS custom properties for easy customization
        * - Mobile-first responsive design approach
        *
        * CONTAINER TYPES:
        *
        * BASE CONTAINERS:
        * - .container: Responsive container with max-width constraints
        * - .container-fluid: Full-width container without max-width
        * - .container-sm: Small container (max-width: 64%0px)
        * - .container-md: Medium container (max-width: 768px)
        * - .container-lg: Large container (max-width: 102%4px)
        * - .container-xl: Extra large container (max-width: 128%0px)
        * - .container-2xl: 2X large container (max-width: 153%6px)
        *
        * RESPONSIVE CONTAINERS:
        * - .container-responsive: Adapts max-width at each breakpoint
        * - Automatically adjusts width based on screen size
        * - Includes horizontal padding for mobile spacing
        *
        * POSITIONED CONTAINERS:
        * - .container-fixed: Fixed positioning container
        * - .container-absolute: Absolute positioning container
        * - .container-relative: Relative positioning container
        * - .container-sticky: Sticky positioning container
        * - .container-centered: Centered positioning with transforms
        *
        * VISUAL CONTAINERS:
        * - .container-card: Card-style container with shadow and border
        * - .container-bordered: Container with border styling
        * - .container-rounded: Container with rounded corners
        * - .container-shadow: Container with drop shadow
        * - .container-elevated: Container with elevation effect
        *
        * FUNCTIONAL CONTAINERS:
        * - .container-modal: Modal dialog container
        * - .container-toast: Toast notification container
        * - .container-dropdown: Dropdown menu container
        * - .container-tooltip: Tooltip container
        * - .container-popover: Popover container
        * - .container-sidebar: Sidebar container
        * - .container-header: Header container
        * - .container-footer: Footer container
        *
        * RESPONSIVE BREAKPOINTS:
        * - sm: 640px and up
        * - md: 768px and up
        * - lg: 1024px and up
        * - xl: 1280px and up
        * - 2xl: 1536px and up
        *
        * USAGE EXAMPLES:
        *
        * Basic Container:
        * <div class="container">
        *   <h1>Page Title</h1>
        *   <p>Content with responsive width constraints</p>
        * </div>
        *
        * Responsive Container:
        * <div class="container-responsive">
        *   <!-- Adapts width at each breakpoint -->
        *   <main>Main content</main>
        * </div>
        *
        * Modal Container:
        * <div class="container-modal">
        *   <div class="container-card">
        *     <h2>Modal Title</h2>
        *     <p>Modal content</p>
        *   </div>
        * </div>
        *
        * Card Layout:
        * <div class="container-card container-rounded">
        *   <h3>Card Title</h3>
        *   <p>Card content with styling</p>
        * </div>
        *
        * Sidebar Layout:
        * <aside class="container-sidebar">
        *   <nav>Navigation items</nav>
        * </aside>
        *
        * CUSTOMIZATION:
        * Override CSS custom properties to customize containers:
        *
        * :root {
          *   --container-padding: 1rem;
          *   --container-max-width: 120%0px;
          *   --container-border-radius: 0.5rem;
          *   --container-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
          * }
          *
          * BROWSER SUPPORT:
          * - CSS Custom Properties: All modern browsers (IE 11+ with fallbacks)
          * - CSS Grid: All modern browsers (IE 11+ with -ms- prefix)
          * - Container Queries: Chrome 105+, Firefox 110+, Safari 16+
          * - Backdrop Filter: Chrome 76+, Firefox 103+, Safari 9+
          *
          * PERFORMANCE NOTES:
          * - Use container queries for component-based responsive design
          * - Backdrop filters can impact performance on mobile devices
          * - Z-index values are optimized to prevent stacking conflicts
          * - CSS custom properties enable efficient theming
          *
          * ACCESSIBILITY:
          * - Containers maintain semantic HTML structure
          * - Modal containers include proper ARIA attributes
          * - Focus management for overlay containers
          * - Keyboard navigation support
          * - Screen reader compatibility
          *
          * INTEGRATION:
          * - Works with layout/grid-system.css for grid layouts
          * - Compatible with layout/flex-layouts.css for flex layouts
          * - Enhanced by layout/spacing.css for margin/padding utilities
          * - Supports layout/responsive-utilities.css for responsive variants
          *
          * Z-INDEX SYSTEM:
          * - Base content: 1-10
          * - Dropdowns: 1000-1010
          * - Sticky elements: 1020-1030
          * - Fixed headers: 1040-1050
          * - Overlays: 1060-1070
          * - Modals: 1080-1090
          * - Tooltips: 1100-1110
          * - Toasts: 1120-1130
          *
          * BEST PRACTICES:
          * - Use semantic container classes for specific UI patterns
          * - Combine container types for complex layouts
          * - Test responsive behavior across all breakpoints
          * - Ensure proper z-index layering for overlays
          * - Maintain accessibility standards for interactive containers
          * - Use CSS custom properties for consistent theming
          */

          @layer layout.containers {
/* ================= BASE CONTAINERS ================= */

/* Standard-Container mit maximaler Breite */
            .container {
              margin-left: auto;
              margin-right: auto;
              max-width: var(--container-max-width, 1200px);
              padding-left: var(--container-padding, 1rem);
              padding-right: var(--container-padding, 1rem);
              width: 100%;
            }

/* Fluid-Container ohne maximale Breite */
            .container-fluid {
              margin-left: auto;
              margin-right: auto;
              padding-left: var(--container-padding, 1rem);
              padding-right: var(--container-padding, 1rem);
              width: 100%;
            }

/* Container mit festen Größen */
            .container-sm {
              margin-left: auto;
              margin-right: auto;
              max-width: var(--container-sm, 640px);
              padding-left: var(--container-padding, 1rem);
              padding-right: var(--container-padding, 1rem);
              width: 100%;
            }

            .container-md {
              margin-left: auto;
              margin-right: auto;
              max-width: var(--container-md, 768px);
              padding-left: var(--container-padding, 1rem);
              padding-right: var(--container-padding, 1rem);
              width: 100%;
            }

            .container-lg {
              margin-left: auto;
              margin-right: auto;
              max-width: var(--container-lg, 1024px);
              padding-left: var(--container-padding, 1rem);
              padding-right: var(--container-padding, 1rem);
              width: 100%;
            }

            .container-xl {
              margin-left: auto;
              margin-right: auto;
              max-width: var(--container-xl, 1280px);
              padding-left: var(--container-padding, 1rem);
              padding-right: var(--container-padding, 1rem);
              width: 100%;
            }

            .container-2xl {
              margin-left: auto;
              margin-right: auto;
              max-width: var(--container-2xl, 1536px);
              padding-left: var(--container-padding, 1rem);
              padding-right: var(--container-padding, 1rem);
              width: 100%;
            }

/* ================= RESPONSIVE CONTAINERS ================= */

/* Container Query Support */
            .container-query {
              container-name: main;
              container-type: inline-size;
            }

            .container-query-size {
              container-type: size;
            }

            .container-query-normal {
              container-type: normal;
            }

/* Responsive Container mit anpassbarer maximaler Breite */
            .container-responsive {
              margin-left: auto;
              margin-right: auto;
              padding-left: var(--container-padding, 1rem);
              padding-right: var(--container-padding, 1rem);
              width: 100%;
            }

            @media (min-width: 640px) {
              .container-responsive {
                max-width: var(--container-sm, 640px);
              }
            }

            @media (min-width: 768px) {
              .container-responsive {
                max-width: var(--container-md, 768px);
              }
            }

            @media (min-width: 1024px) {
              .container-responsive {
                max-width: var(--container-lg, 1024px);
              }
            }

            @media (width >= 1280px) {
              .container-responsive {
                max-width: var(--container-xl, 1280px);
              }
            }

            @media (width >= 1536px) {
              .container-responsive {
                max-width: var(--container-2xl, 1536px);
              }
            }

/* ================= POSITIONED CONTAINERS ================= */

/* Container mit verschiedenen Positionierungen */
            .container-fixed {
              position: fixed;
            }

            .container-absolute {
              position: absolute;
            }

            .container-relative {
              position: relative;
            }

            .container-sticky {
              position: sticky;
              top: 0%;
              z-index: var(--z-sticky, 1020);
            }

/* Zentrierter Container */
            .container-centered {
              left: 50%;
              position: absolute;
              top: 50%;
              transform: translate(-50%, -50);
            }

/* ================= VISUAL CONTAINERS ================= */

/* Container mit visuellen Stilen */
            .container-card {
              background: var(--container-bg, #fff);
              border: 1px solid var(--container-border-color, #e5e7eb);
              border-radius: var(--container-border-radius, 0.5rem);
              box-shadow: var(--container-shadow, 0 1px 3px rgb(0 0 0 / 0.1));
              padding: var(--container-card-padding, 1.5rem);
            }

            .container-bordered {
              border: 1px solid var(--container-border-color, #e5e7eb);
            }

            .container-rounded {
              border-radius: var(--container-border-radius, 0.5rem);
            }

            .container-shadow {
              box-shadow: var(--container-shadow, 0 4px 6px rgb(0 0 0 / 0.1));
            }

            .container-elevated {
              box-shadow: var(--container-elevated-shadow, 0 10px 25px rgb(0 0 0 / 15%));
              transform: translateY(-2px);
              transition: all 0.3s ease;
            }

            .container-elevated:hover {
              box-shadow: var(--container-elevated-hover-shadow, 0 20px 40px rgb(0 0 0 / 0.2));
              transform: translateY(-4px);
            }

/* ================= FUNCTIONAL CONTAINERS ================= */

/* Modal-Container */
            .container-modal {
              align-items: center;
              backdrop-filter: blur(4px);
              background: rgb(0 0 0 / 0.5);
              display: flex;
              height: 100%;
              justify-content: center;
              left: 0%;
              position: fixed;
              top: 0%;
              width: 100vw;
              z-index: var(--z-modal, 1060);
            }

/* Toast-Container */
            .container-toast {
              background: var(--container-bg, #fff);
              border-radius: var(--container-border-radius, 0.5rem);
              box-shadow: var(--container-elevated-shadow, 0 10px 15px rgb(0 0 0 / 0.1));
              max-width: var(--modal-max-width, 32rem);
              padding: var(--container-card-padding, 1.5rem);
              position: fixed;
              right: 1rem;
              top: 1rem;
              z-index: var(--z-toast, 1080);
            }

/* Dropdown-Container */
            .container-dropdown {
              background: var(--container-bg, #fff);
              border: 1px solid var(--container-border-color, #e5e7eb);
              border-radius: var(--container-border-radius, 0.5rem);
              box-shadow: var(--container-shadow, 0 1px 3px rgb(0 0 0 / 0.1));
              position: absolute;
              z-index: var(--z-dropdown, 1000);
            }

/* Tooltip-Container */
            .container-tooltip {
              background: var(--container-bg, #fff);
              border: 1px solid var(--container-border-color, #e5e7eb);
              border-radius: var(--container-border-radius, 0.5rem);
              box-shadow: var(--container-shadow, 0 1px 3px rgb(0 0 0 / 0.1));
              max-width: var(--tooltip-max-width, 20rem);
              padding: var(--space-2, 0.5rem);
              position: absolute;
              z-index: var(--z-tooltip, 1070);
            }

/* Popover-Container */
            .container-popover {
              background: var(--container-bg, #fff);
              border: 1px solid var(--container-border-color, #e5e7eb);
              border-radius: var(--container-border-radius, 0.5rem);
              box-shadow: var(--container-elevated-shadow, 0 10px 15px rgb(0 0 0 / 0.1));
              max-width: var(--popover-max-width, 24rem);
              padding: var(--container-card-padding, 1.5rem);
              position: absolute;
              z-index: var(--z-popover, 1040);
            }

/* Sidebar-Container */
            .container-sidebar {
              background: var(--container-bg, #fff);
              border-right: 1px solid var(--container-border-color, #e5e7eb);
              height: 100%;
              position: fixed;
              width: var(--sidebar-width, 16rem);
              z-index: var(--z-fixed, 1000);
            }

/* Header-Container */
            .container-header {
              background: var(--container-bg, #fff);
              border-bottom: 1px solid var(--container-border-color, #e5e7eb);
              height: var(--header-height, 4rem);
              position: fixed;
              width: 100%;
              z-index: var(--z-fixed, 1000);
            }

/* Footer-Container */
            .container-footer {
              background: var(--container-bg, #fff);
              border-top: 1px solid var(--container-border-color, #e5e7eb);
              height: var(--footer-height, 4rem);
              position: relative;
              width: 100%;
            }

/* ================= Z-INDEX MANAGEMENT ================= */

/* Z-Index-Variablen für konsistente Layering */
            :root {
              --z-base: 1;
              --z-dropdown: 1000;
              --z-sticky: 1020;
              --z-header: 1050;
              --z-sidebar: 1040;
              --z-popover: 1060;
              --z-overlay: 1070;
              --z-modal: 1080;
              --z-tooltip: 1100;
              --z-toast: 1120;
            }

/* Z-Index Utilities */
            .z-0 { z-index: 0; }

            .z-10 { z-index: 10; }

            .z-20 { z-index: 20; }

            .z-30 { z-index: 30; }

            .z-40 { z-index: 40; }

            .z-50 { z-index: 50; }

            .z-auto { z-index: auto; }

/* Spezielle Z-Index-Klassen */
            .z-dropdown { z-index: var(--z-dropdown, 1000); }

            .z-sticky { z-index: var(--z-sticky, 1010); }

            .z-header { z-index: var(--z-header, 1020); }

            .z-sidebar { z-index: var(--z-sidebar, 1030); }

            .z-popover { z-index: var(--z-popover, 1040); }

            .z-overlay { z-index: var(--z-overlay, 1050); }

            .z-modal { z-index: var(--z-modal, 1060); }

            .z-tooltip { z-index: var(--z-tooltip, 1070); }

            .z-toast { z-index: var(--z-toast, 1080); }
          }



/* ================= RESPONSIVE & UTILITIES ================= */
/* Importierte 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; }

              .print\:invisible { visibility: hidden !important; }
            }
          }

/* Importierte Datei: layout/responsive-utilities.css */
/**
          * Responsive Layout Utilities
          *
          * Advanced responsive utilities specifically designed for grid and flex layouts.
          * This system provides responsive variants of layout-specific properties that
          * complement the base grid and flex systems with breakpoint-aware functionality.
          *
          * @layer layout.responsive-utilities
          * @version 2.0
          * @author Design System Team
          *
          * FEATURES:
          * - Responsive grid column and row utilities
          * - Responsive flexbox direction and alignment
          * - Responsive gap and spacing controls
          * - Mobile-first responsive design approach
          * - Consistent breakpoint system across all utilities
          * - Optimized CSS output with minimal redundancy
          * - Semantic class naming for better maintainability
          * - Performance-optimized media queries
          *
          * 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)
          *
          * RESPONSIVE GRID UTILITIES:
          * - sm:grid-cols-{1-12}: Responsive grid columns
          * - md:col-span-{1-12}: Responsive column spans
          * - lg:row-span-{1-6}: Responsive row spans
          * - xl:grid-auto-fit: Responsive auto-fit layouts
          * - 2xl:grid-subgrid: Responsive subgrid layouts
          *
          * RESPONSIVE FLEX UTILITIES:
          * - sm:flex-row: Responsive flex direction
          * - md:flex-col: Responsive flex direction
          * - lg:items-center: Responsive item alignment
          * - xl:justify-between: Responsive content justification
          * - 2xl:flex-wrap: Responsive flex wrapping
          *
          * RESPONSIVE SPACING:
          * - sm:gap-{size}: Responsive gap utilities
          * - md:space-x-{size}: Responsive horizontal spacing
          * - lg:space-y-{size}: Responsive vertical spacing
          *
          * USAGE EXAMPLES:
          *
          * Responsive Grid Layout:
          * <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4">
          *   <!-- 1 column on mobile, 2 on tablet, 3 on laptop, 4 on desktop -->
          *   <div>Item 1</div>
          *   <div>Item 2</div>
          *   <div>Item 3</div>
          *   <div>Item 4</div>
          * </div>
          *
          * Responsive Flex Direction:
          * <div class="flex flex-col md:flex-row gap-4">
          *   <!-- Vertical on mobile, horizontal on tablet+ -->
          *   <main class="flex-1">Main content</main>
          *   <aside class="md:w-64">Sidebar</aside>
          * </div>
          *
          * Responsive Column Spans:
          * <div class="grid grid-cols-12 gap-4">
          *   <div class="col-span-12 md:col-span-8 lg:col-span-9">
          *     <!-- Full width on mobile, 8/12 on tablet, 9/12 on laptop -->
          *     Main content
          *   </div>
          *   <div class="col-span-12 md:col-span-4 lg:col-span-3">
          *     <!-- Full width on mobile, 4/12 on tablet, 3/12 on laptop -->
          *     Sidebar
          *   </div>
          * </div>
          *
          * Responsive Alignment:
          * <div class="flex flex-col items-start md:flex-row md:items-center lg:justify-between">
          *   <!-- Different alignment at each breakpoint -->
          *   <h1>Title</h1>
          *   <nav>Navigation</nav>
          * </div>
          *
          * Responsive Card Grid:
          * <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-4 lg:gap-6">
          *   <!-- Responsive columns with responsive gaps -->
          *   <div class="card">Card 1</div>
          *   <div class="card">Card 2</div>
          *   <div class="card">Card 3</div>
          * </div>
          *
          * Complex Responsive Layout:
          * <div class="grid grid-cols-1 lg:grid-cols-4 gap-6">
          *   <header class="col-span-1 lg:col-span-4">Header</header>
          *   <main class="col-span-1 lg:col-span-3">Main</main>
          *   <aside class="col-span-1">Sidebar</aside>
          *   <footer class="col-span-1 lg:col-span-4">Footer</footer>
          * </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+)
          * - Gap Property: Chrome 84+, Firefox 63+, Safari 14.1+
          * - Subgrid: Firefox 71+, Safari 16+, Chrome 117+
          *
          * PERFORMANCE NOTES:
          * - Mobile-first approach reduces CSS payload for mobile devices
          * - Uses min-width media queries for optimal performance
          * - Consolidated media queries reduce CSS file size
          * - Efficient selector specificity prevents cascade conflicts
          * - Gap properties are more performant than margin utilities
          *
          * ACCESSIBILITY:
          * - Responsive layouts maintain semantic HTML structure
          * - Grid and flex layouts preserve document flow for screen readers
          * - Responsive changes don't affect keyboard navigation order
          * - Visual layout changes don't impact assistive technology
          * - Ensure content remains accessible at all breakpoints
          *
          * INTEGRATION:
          * - Extends layout/grid-system.css with responsive variants
          * - Complements layout/flex-layouts.css with responsive variants
          * - Works with layout/spacing.css for responsive spacing
          * - Compatible with layout/containers.css for responsive containers
          * - Enhanced by layout/responsive.css for display utilities
          *
          * BEST PRACTICES:
          * - Start with mobile-first design approach
          * - Use semantic breakpoint names (sm, md, lg, xl, 2xl)
          * - Test layouts across all target breakpoints
          * - Combine grid and flex utilities for complex layouts
          * - Use consistent spacing scales across breakpoints
          * - Avoid excessive responsive variants that create maintenance overhead
          * - Consider performance impact of complex responsive layouts
          *
          * DEBUGGING:
          * Add responsive debug utilities:
          * .debug-responsive::before {
            *   content: 'mobile';
            *   position: fixed;
            *   top: 0%;
            *   right: 0%;
            *   background: red;
            *   color: white;
            *   padding: 0.25rem;
            * }
            * @media (min-width: 640px) {
              *   .debug-responsive::before { content: 'sm'; }
              * }
              *
              * MIGRATION:
              * From older responsive systems:
              * - .col-md-6 → .col-span-6.md:col-span-6
              * - .flex-sm-row → .flex-col.sm:flex-row
              * - .d-lg-block → .hidden.lg:block
              */

              @layer layout.responsive-utilities {
/* ================= RESPONSIVE GRID UTILITIES ================= */

/* Small screens (640px and up) */
                @media (min-width: 640px) {
                  .sm\:grid-cols-1 { grid-template-columns: repeat(1, 1fr); }

                  .sm\:grid-cols-2 { grid-template-columns: repeat(2, 1fr); }

                  .sm\:grid-cols-3 { grid-template-columns: repeat(3, 1fr); }

                  .sm\:grid-cols-4 { grid-template-columns: repeat(4, 1fr); }

                  .sm\:grid-cols-6 { grid-template-columns: repeat(6, 1fr); }

                  .sm\:grid-cols-12 { grid-template-columns: repeat(12, 1fr); }

                  .sm\:grid-auto-fit { grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); }

                  .sm\:grid-auto-fill { grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); }

                  .sm\:col-span-1 { grid-column: span 1; }

                  .sm\:col-span-2 { grid-column: span 2; }

                  .sm\:col-span-3 { grid-column: span 3; }

                  .sm\:col-span-4 { grid-column: span 4; }

                  .sm\:col-span-6 { grid-column: span 6; }

                  .sm\:col-span-12 { grid-column: span 12; }

                  .sm\:col-span-full { grid-column: 1 / -1; }

                  .sm\:row-span-1 { grid-row: span 1; }

                  .sm\:row-span-2 { grid-row: span 2; }

                  .sm\:row-span-3 { grid-row: span 3; }

                  .sm\:row-span-4 { grid-row: span 4; }

                  .sm\:row-span-5 { grid-row: span 5; }

                  .sm\:row-span-6 { grid-row: span 6; }

                  .sm\:row-span-full { grid-row: 1 / -1; }
                }

/* Medium screens (768px and up) */
                @media (min-width: 768px) {
                  .md\:grid-cols-1 { grid-template-columns: repeat(1, 1fr); }

                  .md\:grid-cols-2 { grid-template-columns: repeat(2, 1fr); }

                  .md\:grid-cols-3 { grid-template-columns: repeat(3, 1fr); }

                  .md\:grid-cols-4 { grid-template-columns: repeat(4, 1fr); }

                  .md\:grid-cols-6 { grid-template-columns: repeat(6, 1fr); }

                  .md\:grid-cols-12 { grid-template-columns: repeat(12, 1fr); }

                  .md\:grid-auto-fit { grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); }

                  .md\:grid-auto-fill { grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); }

                  .md\:col-span-1 { grid-column: span 1; }

                  .md\:col-span-2 { grid-column: span 2; }

                  .md\:col-span-3 { grid-column: span 3; }

                  .md\:col-span-4 { grid-column: span 4; }

                  .md\:col-span-6 { grid-column: span 6; }

                  .md\:col-span-12 { grid-column: span 12; }

                  .md\:col-span-full { grid-column: 1 / -1; }

                  .md\:row-span-1 { grid-row: span 1; }

                  .md\:row-span-2 { grid-row: span 2; }

                  .md\:row-span-3 { grid-row: span 3; }

                  .md\:row-span-4 { grid-row: span 4; }

                  .md\:row-span-5 { grid-row: span 5; }

                  .md\:row-span-6 { grid-row: span 6; }

                  .md\:row-span-full { grid-row: 1 / -1; }
                }

/* Large screens (1024px and up) */
                @media (min-width: 1024px) {
                  .lg\:grid-cols-1 { grid-template-columns: repeat(1, 1fr); }

                  .lg\:grid-cols-2 { grid-template-columns: repeat(2, 1fr); }

                  .lg\:grid-cols-3 { grid-template-columns: repeat(3, 1fr); }

                  .lg\:grid-cols-4 { grid-template-columns: repeat(4, 1fr); }

                  .lg\:grid-cols-6 { grid-template-columns: repeat(6, 1fr); }

                  .lg\:grid-cols-12 { grid-template-columns: repeat(12, 1fr); }

                  .lg\:grid-auto-fit { grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); }

                  .lg\:grid-auto-fill { grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); }

                  .lg\:col-span-1 { grid-column: span 1; }

                  .lg\:col-span-2 { grid-column: span 2; }

                  .lg\:col-span-3 { grid-column: span 3; }

                  .lg\:col-span-4 { grid-column: span 4; }

                  .lg\:col-span-6 { grid-column: span 6; }

                  .lg\:col-span-12 { grid-column: span 12; }

                  .lg\:col-span-full { grid-column: 1 / -1; }

                  .lg\:row-span-1 { grid-row: span 1; }

                  .lg\:row-span-2 { grid-row: span 2; }

                  .lg\:row-span-3 { grid-row: span 3; }

                  .lg\:row-span-4 { grid-row: span 4; }

                  .lg\:row-span-5 { grid-row: span 5; }

                  .lg\:row-span-6 { grid-row: span 6; }

                  .lg\:row-span-full { grid-row: 1 / -1; }
                }

/* Extra large screens (1280px and up) */
                @media (width >= 1280px) {
                  .xl\:grid-cols-1 { grid-template-columns: repeat(1, 1fr); }

                  .xl\:grid-cols-2 { grid-template-columns: repeat(2, 1fr); }

                  .xl\:grid-cols-3 { grid-template-columns: repeat(3, 1fr); }

                  .xl\:grid-cols-4 { grid-template-columns: repeat(4, 1fr); }

                  .xl\:grid-cols-6 { grid-template-columns: repeat(6, 1fr); }

                  .xl\:grid-cols-12 { grid-template-columns: repeat(12, 1fr); }

                  .xl\:grid-auto-fit { grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); }

                  .xl\:grid-auto-fill { grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); }

                  .xl\:col-span-1 { grid-column: span 1; }

                  .xl\:col-span-2 { grid-column: span 2; }

                  .xl\:col-span-3 { grid-column: span 3; }

                  .xl\:col-span-4 { grid-column: span 4; }

                  .xl\:col-span-6 { grid-column: span 6; }

                  .xl\:col-span-12 { grid-column: span 12; }

                  .xl\:col-span-full { grid-column: 1 / -1; }

                  .xl\:row-span-1 { grid-row: span 1; }

                  .xl\:row-span-2 { grid-row: span 2; }

                  .xl\:row-span-3 { grid-row: span 3; }

                  .xl\:row-span-4 { grid-row: span 4; }

                  .xl\:row-span-5 { grid-row: span 5; }

                  .xl\:row-span-6 { grid-row: span 6; }

                  .xl\:row-span-full { grid-row: 1 / -1; }
                }

/* 2X large screens (1536px and up) */
                @media (width >= 1536px) {
                  .\32xl\:grid-cols-1 { grid-template-columns: repeat(1, 1fr); }

                  .\32xl\:grid-cols-2 { grid-template-columns: repeat(2, 1fr); }

                  .\32xl\:grid-cols-3 { grid-template-columns: repeat(3, 1fr); }

                  .\32xl\:grid-cols-4 { grid-template-columns: repeat(4, 1fr); }

                  .\32xl\:grid-cols-6 { grid-template-columns: repeat(6, 1fr); }

                  .\32xl\:grid-cols-12 { grid-template-columns: repeat(12, 1fr); }

                  .\32xl\:grid-auto-fit { grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); }

                  .\32xl\:grid-auto-fill { grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); }

                  .\32xl\:col-span-1 { grid-column: span 1; }

                  .\32xl\:col-span-2 { grid-column: span 2; }

                  .\32xl\:col-span-3 { grid-column: span 3; }

                  .\32xl\:col-span-4 { grid-column: span 4; }

                  .\32xl\:col-span-6 { grid-column: span 6; }

                  .\32xl\:col-span-12 { grid-column: span 12; }

                  .\32xl\:col-span-full { grid-column: 1 / -1; }

                  .\32xl\:row-span-1 { grid-row: span 1; }

                  .\32xl\:row-span-2 { grid-row: span 2; }

                  .\32xl\:row-span-3 { grid-row: span 3; }

                  .\32xl\:row-span-4 { grid-row: span 4; }

                  .\32xl\:row-span-5 { grid-row: span 5; }

                  .\32xl\:row-span-6 { grid-row: span 6; }

                  .\32xl\:row-span-full { grid-row: 1 / -1; }
                }
              }


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


/* ================= LAYOUT FOUNDATION ================= */

/*
              * Basis-Layout-Definitionen
              * Enthält grundlegende Variablen und Konfigurationen für das Layout-System
              */
              @layer layout {
                :root {
/* Raster-Konfiguration für grid-system.css */
                  --grid-columns: 12;
                  --grid-gutter: var(--space-4, 1rem);
                  --grid-gutter-sm: var(--space-2, 0.5rem);
                  --grid-gutter-md: var(--space-4, 1rem);
                  --grid-gutter-lg: var(--space-6, 1.5rem);
                  --grid-gutter-xl: var(--space-8, 2rem);

/* Container-Abstände für containers.css */
                  --container-padding-sm: var(--space-2, 0.5rem);
                  --container-padding-md: var(--space-4, 1rem);
                  --container-padding-lg: var(--space-6, 1.5rem);
                }
              }

/* ================= LAYOUT UTILITIES ================= */

/*
              * Layout-Utilities
              * Häufig benötigte Hilfsklassen für Layout-Anpassungen
              */
              @layer layout.utilities {
/* Dimension-Utilities */
                .w-full { width: 100%; }

                .h-full { height: 100%; }

                .min-h-screen { min-height: 100%; }

                .min-h-dvh { min-height: 100%dvh; }

                .max-w-full { max-width: 100%; }

/* Positionierung */
                .mx-auto { margin-inline: auto; }

                .my-auto { margin-block: auto; }

/* Display */
                .block { display: block; }

                .inline { display: inline; }

                .inline-block { display: inline-block; }

                .hidden { display: none; }

/* Overflow */
                .overflow-hidden { overflow: hidden; }

                .overflow-auto { overflow: auto; }

                .overflow-x-auto { overflow-x: auto; }

                .overflow-y-auto { overflow-y: auto; }
              }

/* Datei: layout/grid-system.css */
/**
              * Grid Layout System
              *
              * A comprehensive 12-column grid system with utility classes for modern web layouts.
              * This system provides flexible grid layouts using CSS Grid with semantic class names
              * and responsive capabilities.
              *
              * @layer layout.grid
              * @version 2.0
              * @author Design System Team
              *
              * FEATURES:
              * - 12-column grid system with flexible column spans
              * - Auto-fit and auto-fill grid layouts for responsive cards
              * - Subgrid support for nested layouts
              * - Semantic utility classes (.grid, .grid-cols-*, .col-span-*)
              * - CSS Grid native implementation (no flexbox fallbacks)
              * - Works with spacing.css for gap utilities
              * - Compatible with responsive-utilities.css for breakpoint variants
              *
              * GRID CLASSES:
              * - .grid: Base grid container
              * - .grid-cols-{1-12}: Define number of columns
              * - .col-span-{1-12}: Span multiple columns
              * - .col-span-full: Span all available columns
              * - .row-span-{1-6}: Span multiple rows
              * - .grid-auto-fit: Auto-fit responsive layout
              * - .grid-auto-fill: Auto-fill responsive layout
              *
              * LAYOUT VARIANTS:
              * - .layout-grid: Semantic grid with default gutter
              * - .layout-grid-{2,3,4,6}: Predefined column layouts
              * - .layout-grid-auto-fit: Responsive card layouts
              *
              * SUBGRID SUPPORT:
              * - .grid-subgrid: Inherit parent grid columns
              * - .row-subgrid: Inherit parent grid rows
              *
              * USAGE EXAMPLES:
              *
              * Basic Grid:
              * <div class="grid grid-cols-3 gap-4">
              *   <div>Item 1</div>
              *   <div>Item 2</div>
              *   <div>Item 3</div>
              * </div>
              *
              * Responsive Card Layout:
              * <div class="grid-auto-fit gap-6">
              *   <div class="card">Card 1</div>
              *   <div class="card">Card 2</div>
              *   <div class="card">Card 3</div>
              * </div>
              *
              * Complex Layout:
              * <div class="grid grid-cols-12 gap-4">
              *   <div class="col-span-8">Main content</div>
              *   <div class="col-span-4">Sidebar</div>
              *   <div class="col-span-full">Footer</div>
              * </div>
              *
              * Subgrid Example:
              * <div class="grid grid-cols-4 gap-4">
              *   <div class="col-span-2 grid-subgrid gap-2">
              *     <div>Nested 1</div>
              *     <div>Nested 2</div>
              *   </div>
              * </div>
              *
              * RESPONSIVE USAGE:
              * Use with responsive-utilities.css for breakpoint-specific layouts:
              * <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4">
              *   <!-- Responsive grid that adapts to screen size -->
              * </div>
              *
              * BROWSER SUPPORT:
              * - CSS Grid: All modern browsers (IE 11+ with -ms- prefix)
              * - Subgrid: Firefox 71+, Safari 16+, Chrome 117+
              * - Container Queries: Chrome 105+, Firefox 110+, Safari 16+
              *
              * PERFORMANCE NOTES:
              * - CSS Grid is highly optimized for layout performance
              * - Subgrid reduces layout recalculations
              * - Auto-fit/auto-fill are efficient for responsive designs
              * - Use gap properties instead of margins for better performance
              *
              * ACCESSIBILITY:
              * - Grid layouts maintain document flow for screen readers
              * - Use semantic HTML elements within grid containers
              * - Ensure logical tab order is preserved
              * - Test with keyboard navigation
              *
              * INTEGRATION:
              * - Works seamlessly with layout/containers.css for container sizing
              * - Combines with layout/spacing.css for gap utilities
              * - Enhanced by layout/responsive-utilities.css for responsive variants
              * - Compatible with layout/flex-layouts.css for hybrid layouts
              */

              @layer layout.grid {
/* ================= GRID-LAYOUT-SYSTEM ================= */

/* Basierend auf dem 12-Spalten-Grid-System, mit einheitlichen Abständen */
                .layout-grid {
                  display: grid;
                  gap: var(--grid-gutter, 1rem);
                  grid-template-columns: repeat(var(--grid-columns, 12), 1fr);
                }

/* Varianten mit unterschiedlichen Spaltenanzahlen */
                .layout-grid-2 {
                  display: grid;
                  gap: var(--grid-gutter, 1rem);
                  grid-template-columns: repeat(2, 1fr);
                }

                .layout-grid-3 {
                  display: grid;
                  gap: var(--grid-gutter, 1rem);
                  grid-template-columns: repeat(3, 1fr);
                }

                .layout-grid-4 {
                  display: grid;
                  gap: var(--grid-gutter, 1rem);
                  grid-template-columns: repeat(4, 1fr);
                }

                .layout-grid-6 {
                  display: grid;
                  gap: var(--grid-gutter, 1rem);
                  grid-template-columns: repeat(6, 1fr);
                }

/* Auto-Fit Grid für responsive Karten-Layouts */
                .layout-grid-auto-fit {
                  display: grid;
                  gap: var(--grid-gutter, 1rem);
                  grid-template-columns: repeat(auto-fit, minmax(var(--grid-auto-fit-min, 200px), 1fr));
                }

/* ================= SUBGRID / NESTED ================= */

/* Komponenten für verschachtelte Grid-Layouts mit Subgrid */
                .grid-subgrid {
                  display: grid;
                  grid-template-columns: subgrid;
                }

                .row-subgrid {
                  display: grid;
                  grid-template-rows: subgrid;
                }

/* ================= GRID UTILITIES ================= */

/* Grid-Spalten */
                .grid { display: grid; }

                .grid-cols-1 { grid-template-columns: repeat(1, 1fr); }

                .grid-cols-2 { grid-template-columns: repeat(2, 1fr); }

                .grid-cols-3 { grid-template-columns: repeat(3, 1fr); }

                .grid-cols-4 { grid-template-columns: repeat(4, 1fr); }

                .grid-cols-6 { grid-template-columns: repeat(6, 1fr); }

                .grid-cols-12 { grid-template-columns: repeat(12, 1fr); }

                .grid-auto-fit { grid-template-columns: repeat(auto-fit, minmax(var(--grid-auto-fit-min, 200px), 1fr)); }

                .grid-auto-fill { grid-template-columns: repeat(auto-fill, minmax(var(--grid-auto-fill-min, 200px), 1fr)); }

/* Spaltenspannen für Grid-Items */
                .col-span-1 { grid-column: span 1; }

                .col-span-2 { grid-column: span 2; }

                .col-span-3 { grid-column: span 3; }

                .col-span-4 { grid-column: span 4; }

                .col-span-6 { grid-column: span 6; }

                .col-span-12 { grid-column: span 12; }

                .col-span-full { grid-column: 1 / -1; }

/* Grid-Zeilen */
                .grid-rows-1 { grid-template-rows: repeat(1, 1fr); }

                .grid-rows-2 { grid-template-rows: repeat(2, 1fr); }

                .grid-rows-3 { grid-template-rows: repeat(3, 1fr); }

                .grid-rows-4 { grid-template-rows: repeat(4, 1fr); }

                .grid-rows-5 { grid-template-rows: repeat(5, 1fr); }

                .grid-rows-6 { grid-template-rows: repeat(6, 1fr); }

/* Zeilen-Span */
                .row-span-1 { grid-row: span 1; }

                .row-span-2 { grid-row: span 2; }

                .row-span-3 { grid-row: span 3; }

                .row-span-4 { grid-row: span 4; }

                .row-span-5 { grid-row: span 5; }

                .row-span-6 { grid-row: span 6; }

                .row-span-full { grid-row: 1 / -1; }
              }

/* Datei: layout/flex-layouts.css */
/**
              * Flex Layout System
              *
              * A comprehensive flexbox-based layout system providing flexible and responsive
              * layout utilities for modern web applications. This system offers semantic
              * flexbox classes with intuitive naming conventions.
              *
              * @layer layout.flex
              * @version 2.0
              * @author Design System Team
              *
              * FEATURES:
              * - Complete flexbox utility system
              * - Semantic layout components (.layout-flex-*)
              * - Direction, wrapping, and alignment utilities
              * - Flexible item sizing with flex-basis utilities
              * - Self-alignment controls for individual items
              * - Grow and shrink utilities for dynamic layouts
              * - Works seamlessly with CSS Grid system
              * - Responsive-ready with breakpoint variants
              *
              * FLEX CONTAINER CLASSES:
              * - .flex: Base flex container
              * - .inline-flex: Inline flex container
              * - .flex-row: Horizontal direction (default)
              * - .flex-col: Vertical direction
              * - .flex-wrap: Allow wrapping
              * - .flex-nowrap: Prevent wrapping
              *
              * ALIGNMENT CLASSES:
              * - .items-start: Align items to start
              * - .items-center: Center align items
              * - .items-end: Align items to end
              * - .items-stretch: Stretch items to fill
              * - .items-baseline: Baseline alignment
              * - .justify-start: Justify content to start
              * - .justify-center: Center justify content
              * - .justify-end: Justify content to end
              * - .justify-between: Space between items
              * - .justify-around: Space around items
              * - .justify-evenly: Even space distribution
              *
              * FLEX ITEM CLASSES:
              * - .flex-1: Grow and shrink equally
              * - .flex-auto: Grow and shrink based on content
              * - .flex-none: Don't grow or shrink
              * - .flex-initial: Initial flex value
              * - .flex-grow: Allow growing
              * - .flex-shrink: Allow shrinking
              *
              * FLEX BASIS UTILITIES:
              * - .flex-basis-1-2: 50 basis
              * - .flex-basis-1-3: 33.33% basis
              * - .flex-basis-2-3: 66.67% basis
              * - .flex-basis-1-4: 25% basis
              * - .flex-basis-3-4: 75% basis
              * - .flex-basis-1-5: 20 basis
              * - .flex-basis-2-5: 40 basis
              * - .flex-basis-3-5: 60 basis
              * - .flex-basis-4-5: 80 basis
              *
              * SELF-ALIGNMENT:
              * - .self-auto: Auto alignment
              * - .self-start: Align self to start
              * - .self-center: Center align self
              * - .self-end: Align self to end
              * - .self-stretch: Stretch self
              *
              * LAYOUT COMPONENTS:
              * - .layout-flex: Semantic flex column with gap
              * - .layout-flex-row: Semantic flex row with gap
              * - .layout-flex-column: Semantic flex column with gap
              * - .layout-flex-between: Space-between layout
              * - .layout-flex-center: Centered layout
              *
              * USAGE EXAMPLES:
              *
              * Basic Flex Layout:
              * <div class="flex items-center justify-between">
              *   <div>Logo</div>
              *   <nav class="flex gap-4">
              *     <a href="#">Home</a>
              *     <a href="#">About</a>
              *   </nav>
              * </div>
              *
              * Card Layout:
              * <div class="flex flex-col gap-4">
              *   <h2>Card Title</h2>
              *   <p class="flex-1">Card content that grows</p>
              *   <button>Action</button>
              * </div>
              *
              * Responsive Layout:
              * <div class="flex flex-col md:flex-row gap-6">
              *   <main class="flex-1">Main content</main>
              *   <aside class="flex-basis-1-3">Sidebar</aside>
              * </div>
              *
              * Complex Alignment:
              * <div class="flex flex-wrap items-start justify-center gap-4">
              *   <div class="flex-basis-1-3 self-stretch">Item 1</div>
              *   <div class="flex-basis-1-3 self-center">Item 2</div>
              *   <div class="flex-basis-1-3 self-end">Item 3</div>
              * </div>
              *
              * RESPONSIVE USAGE:
              * Use with responsive-utilities.css for breakpoint-specific layouts:
              * <div class="flex-col sm:flex-row items-center sm:items-start">
              *   <!-- Responsive flex direction and alignment -->
              * </div>
              *
              * BROWSER SUPPORT:
              * - Flexbox: All modern browsers (IE 11+ with -ms- prefix)
              * - Gap property: Chrome 84+, Firefox 63+, Safari 14.1+
              * - Fallback: Use margin utilities for older browsers
              *
              * PERFORMANCE NOTES:
              * - Flexbox is highly optimized for one-dimensional layouts
              * - Use CSS Grid for two-dimensional layouts
              * - Gap property is more performant than margins
              * - Avoid deep nesting of flex containers
              *
              * ACCESSIBILITY:
              * - Flex layouts maintain document flow for screen readers
              * - Use semantic HTML elements within flex containers
              * - Be careful with flex-direction: column and tab order
              * - Test with keyboard navigation
              * - Consider using order property sparingly
              *
              * INTEGRATION:
              * - Complements layout/grid-system.css for hybrid layouts
              * - Works with layout/spacing.css for gap utilities
              * - Enhanced by layout/responsive-utilities.css for responsive variants
              * - Compatible with layout/containers.css for container sizing
              *
              * BEST PRACTICES:
              * - Use flexbox for one-dimensional layouts (rows or columns)
              * - Use CSS Grid for two-dimensional layouts
              * - Prefer gap over margins for spacing
              * - Use semantic layout components for common patterns
              * - Test responsive behavior across breakpoints
              * - Ensure accessibility with proper HTML structure
              */

              @layer layout.flex {
/* ================= FLEX-LAYOUT-SYSTEM ================= */

                .layout-flex {
                  display: flex;
                  flex-direction: column;
                  gap: var(--grid-gutter, 1rem);
                }

/* Typische Flex-Layouts */
                .layout-flex-row {
                  display: flex;
                  flex-direction: row;
                  gap: var(--grid-gutter, 1rem);
                }

                .layout-flex-column {
                  display: flex;
                  flex-direction: column;
                  gap: var(--grid-gutter, 1rem);
                }

/* Verteilte Layouts */
                .layout-flex-between {
                  display: flex;
                  flex-direction: row;
                  gap: var(--grid-gutter, 1rem);
                  justify-content: space-between;
                }

                .layout-flex-center {
                  align-items: center;
                  display: flex;
                  gap: var(--grid-gutter, 1rem);
                  justify-content: center;
                }

/* ================= FLEX UTILITIES ================= */

/* Display-Typen */
                .flex { display: flex; }

                .inline-flex { display: inline-flex; }

/* Flex-Richtung und Umbruchverhalten */
                .flex-row { flex-direction: row; }

                .flex-col { flex-direction: column; }

                .flex-wrap { flex-wrap: wrap; }

                .flex-nowrap { flex-wrap: nowrap; }

/* Ausrichtung von Flex-Items */
                .items-start { align-items: flex-start; }

                .items-center { align-items: center; }

                .items-end { align-items: flex-end; }

                .items-stretch { align-items: stretch; }

                .items-baseline { align-items: baseline; }

                .justify-start { justify-content: flex-start; }

                .justify-center { justify-content: center; }

                .justify-end { justify-content: flex-end; }

                .justify-between { justify-content: space-between; }

                .justify-around { justify-content: space-around; }

                .justify-evenly { justify-content: space-evenly; }

/* Flex-Eigenschaften */
                .flex-1 { flex: 1 1 0; }

                .flex-auto { flex: 1 1 auto; }

                .flex-none { flex: none; }

                .flex-initial { flex: 0 1 auto; }

/* Flex-Basis für flexible Layouts */
                .flex-basis-1-2 { flex-basis: 50%; }

                .flex-basis-1-3 { flex-basis: 33.3333%; }

                .flex-basis-2-3 { flex-basis: 66.6667%; }

                .flex-basis-1-4 { flex-basis: 25%; }

                .flex-basis-3-4 { flex-basis: 75%; }

                .flex-basis-1-5 { flex-basis: 20%; }

                .flex-basis-2-5 { flex-basis: 40%; }

                .flex-basis-3-5 { flex-basis: 60%; }

                .flex-basis-4-5 { flex-basis: 80%; }

/* Flex-Grow und Flex-Shrink */
                .flex-grow { flex-grow: 1; }

                .flex-grow-0 { flex-grow: 0; }

                .flex-shrink { flex-shrink: 1; }

                .flex-shrink-0 { flex-shrink: 0; }

/* Self-Alignment */
                .self-auto { align-self: auto; }

                .self-start { align-self: flex-start; }

                .self-center { align-self: center; }

                .self-end { align-self: flex-end; }

                .self-stretch { align-self: stretch; }
              }

/* Datei: layout/containers.css */
/**
              * Container Layout System
              *
              * A comprehensive container system providing responsive width constraints,
              * positioning utilities, and specialized container types for modern web layouts.
              * This system consolidates all container-related functionality into a unified
              * and maintainable solution.
              *
              * @layer layout.containers
              * @version 2.0
              * @author Design System Team
              *
              * FEATURES:
              * - Responsive container system with breakpoint-based max-widths
              * - Fluid containers that adapt to viewport width
              * - Positioned containers for overlays and modals
              * - Visual containers with styling and effects
              * - Functional containers for specific UI patterns
              * - Z-index management system for layering
              * - CSS custom properties for easy customization
              * - Mobile-first responsive design approach
              *
              * CONTAINER TYPES:
              *
              * BASE CONTAINERS:
              * - .container: Responsive container with max-width constraints
              * - .container-fluid: Full-width container without max-width
              * - .container-sm: Small container (max-width: 64%0px)
              * - .container-md: Medium container (max-width: 768px)
              * - .container-lg: Large container (max-width: 102%4px)
              * - .container-xl: Extra large container (max-width: 128%0px)
              * - .container-2xl: 2X large container (max-width: 153%6px)
              *
              * RESPONSIVE CONTAINERS:
              * - .container-responsive: Adapts max-width at each breakpoint
              * - Automatically adjusts width based on screen size
              * - Includes horizontal padding for mobile spacing
              *
              * POSITIONED CONTAINERS:
              * - .container-fixed: Fixed positioning container
              * - .container-absolute: Absolute positioning container
              * - .container-relative: Relative positioning container
              * - .container-sticky: Sticky positioning container
              * - .container-centered: Centered positioning with transforms
              *
              * VISUAL CONTAINERS:
              * - .container-card: Card-style container with shadow and border
              * - .container-bordered: Container with border styling
              * - .container-rounded: Container with rounded corners
              * - .container-shadow: Container with drop shadow
              * - .container-elevated: Container with elevation effect
              *
              * FUNCTIONAL CONTAINERS:
              * - .container-modal: Modal dialog container
              * - .container-toast: Toast notification container
              * - .container-dropdown: Dropdown menu container
              * - .container-tooltip: Tooltip container
              * - .container-popover: Popover container
              * - .container-sidebar: Sidebar container
              * - .container-header: Header container
              * - .container-footer: Footer container
              *
              * RESPONSIVE BREAKPOINTS:
              * - sm: 640px and up
              * - md: 768px and up
              * - lg: 1024px and up
              * - xl: 1280px and up
              * - 2xl: 1536px and up
              *
              * USAGE EXAMPLES:
              *
              * Basic Container:
              * <div class="container">
              *   <h1>Page Title</h1>
              *   <p>Content with responsive width constraints</p>
              * </div>
              *
              * Responsive Container:
              * <div class="container-responsive">
              *   <!-- Adapts width at each breakpoint -->
              *   <main>Main content</main>
              * </div>
              *
              * Modal Container:
              * <div class="container-modal">
              *   <div class="container-card">
              *     <h2>Modal Title</h2>
              *     <p>Modal content</p>
              *   </div>
              * </div>
              *
              * Card Layout:
              * <div class="container-card container-rounded">
              *   <h3>Card Title</h3>
              *   <p>Card content with styling</p>
              * </div>
              *
              * Sidebar Layout:
              * <aside class="container-sidebar">
              *   <nav>Navigation items</nav>
              * </aside>
              *
              * CUSTOMIZATION:
              * Override CSS custom properties to customize containers:
              *
              * :root {
                *   --container-padding: 1rem;
                *   --container-max-width: 120%0px;
                *   --container-border-radius: 0.5rem;
                *   --container-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
                * }
                *
                * BROWSER SUPPORT:
                * - CSS Custom Properties: All modern browsers (IE 11+ with fallbacks)
                * - CSS Grid: All modern browsers (IE 11+ with -ms- prefix)
                * - Container Queries: Chrome 105+, Firefox 110+, Safari 16+
                * - Backdrop Filter: Chrome 76+, Firefox 103+, Safari 9+
                *
                * PERFORMANCE NOTES:
                * - Use container queries for component-based responsive design
                * - Backdrop filters can impact performance on mobile devices
                * - Z-index values are optimized to prevent stacking conflicts
                * - CSS custom properties enable efficient theming
                *
                * ACCESSIBILITY:
                * - Containers maintain semantic HTML structure
                * - Modal containers include proper ARIA attributes
                * - Focus management for overlay containers
                * - Keyboard navigation support
                * - Screen reader compatibility
                *
                * INTEGRATION:
                * - Works with layout/grid-system.css for grid layouts
                * - Compatible with layout/flex-layouts.css for flex layouts
                * - Enhanced by layout/spacing.css for margin/padding utilities
                * - Supports layout/responsive-utilities.css for responsive variants
                *
                * Z-INDEX SYSTEM:
                * - Base content: 1-10
                * - Dropdowns: 1000-1010
                * - Sticky elements: 1020-1030
                * - Fixed headers: 1040-1050
                * - Overlays: 1060-1070
                * - Modals: 1080-1090
                * - Tooltips: 1100-1110
                * - Toasts: 1120-1130
                *
                * BEST PRACTICES:
                * - Use semantic container classes for specific UI patterns
                * - Combine container types for complex layouts
                * - Test responsive behavior across all breakpoints
                * - Ensure proper z-index layering for overlays
                * - Maintain accessibility standards for interactive containers
                * - Use CSS custom properties for consistent theming
                */

                @layer layout.containers {
/* ================= BASE CONTAINERS ================= */

/* Standard-Container mit maximaler Breite */
                  .container {
                    margin-left: auto;
                    margin-right: auto;
                    max-width: var(--container-max-width, 1200px);
                    padding-left: var(--container-padding, 1rem);
                    padding-right: var(--container-padding, 1rem);
                    width: 100%;
                  }

/* Fluid-Container ohne maximale Breite */
                  .container-fluid {
                    margin-left: auto;
                    margin-right: auto;
                    padding-left: var(--container-padding, 1rem);
                    padding-right: var(--container-padding, 1rem);
                    width: 100%;
                  }

/* Container mit festen Größen */
                  .container-sm {
                    margin-left: auto;
                    margin-right: auto;
                    max-width: var(--container-sm, 640px);
                    padding-left: var(--container-padding, 1rem);
                    padding-right: var(--container-padding, 1rem);
                    width: 100%;
                  }

                  .container-md {
                    margin-left: auto;
                    margin-right: auto;
                    max-width: var(--container-md, 768px);
                    padding-left: var(--container-padding, 1rem);
                    padding-right: var(--container-padding, 1rem);
                    width: 100%;
                  }

                  .container-lg {
                    margin-left: auto;
                    margin-right: auto;
                    max-width: var(--container-lg, 1024px);
                    padding-left: var(--container-padding, 1rem);
                    padding-right: var(--container-padding, 1rem);
                    width: 100%;
                  }

                  .container-xl {
                    margin-left: auto;
                    margin-right: auto;
                    max-width: var(--container-xl, 1280px);
                    padding-left: var(--container-padding, 1rem);
                    padding-right: var(--container-padding, 1rem);
                    width: 100%;
                  }

                  .container-2xl {
                    margin-left: auto;
                    margin-right: auto;
                    max-width: var(--container-2xl, 1536px);
                    padding-left: var(--container-padding, 1rem);
                    padding-right: var(--container-padding, 1rem);
                    width: 100%;
                  }

/* ================= RESPONSIVE CONTAINERS ================= */

/* Container Query Support */
                  .container-query {
                    container-name: main;
                    container-type: inline-size;
                  }

                  .container-query-size {
                    container-type: size;
                  }

                  .container-query-normal {
                    container-type: normal;
                  }

/* Responsive Container mit anpassbarer maximaler Breite */
                  .container-responsive {
                    margin-left: auto;
                    margin-right: auto;
                    padding-left: var(--container-padding, 1rem);
                    padding-right: var(--container-padding, 1rem);
                    width: 100%;
                  }

                  @media (min-width: 640px) {
                    .container-responsive {
                      max-width: var(--container-sm, 640px);
                    }
                  }

                  @media (min-width: 768px) {
                    .container-responsive {
                      max-width: var(--container-md, 768px);
                    }
                  }

                  @media (min-width: 1024px) {
                    .container-responsive {
                      max-width: var(--container-lg, 1024px);
                    }
                  }

                  @media (width >= 1280px) {
                    .container-responsive {
                      max-width: var(--container-xl, 1280px);
                    }
                  }

                  @media (width >= 1536px) {
                    .container-responsive {
                      max-width: var(--container-2xl, 1536px);
                    }
                  }

/* ================= POSITIONED CONTAINERS ================= */

/* Container mit verschiedenen Positionierungen */
                  .container-fixed {
                    position: fixed;
                  }

                  .container-absolute {
                    position: absolute;
                  }

                  .container-relative {
                    position: relative;
                  }

                  .container-sticky {
                    position: sticky;
                    top: 0%;
                    z-index: var(--z-sticky, 1020);
                  }

/* Zentrierter Container */
                  .container-centered {
                    left: 50%;
                    position: absolute;
                    top: 50%;
                    transform: translate(-50%, -50);
                  }

/* ================= VISUAL CONTAINERS ================= */

/* Container mit visuellen Stilen */
                  .container-card {
                    background: var(--container-bg, #fff);
                    border: 1px solid var(--container-border-color, #e5e7eb);
                    border-radius: var(--container-border-radius, 0.5rem);
                    box-shadow: var(--container-shadow, 0 1px 3px rgb(0 0 0 / 0.1));
                    padding: var(--container-card-padding, 1.5rem);
                  }

                  .container-bordered {
                    border: 1px solid var(--container-border-color, #e5e7eb);
                  }

                  .container-rounded {
                    border-radius: var(--container-border-radius, 0.5rem);
                  }

                  .container-shadow {
                    box-shadow: var(--container-shadow, 0 4px 6px rgb(0 0 0 / 0.1));
                  }

                  .container-elevated {
                    box-shadow: var(--container-elevated-shadow, 0 10px 25px rgb(0 0 0 / 15%));
                    transform: translateY(-2px);
                    transition: all 0.3s ease;
                  }

                  .container-elevated:hover {
                    box-shadow: var(--container-elevated-hover-shadow, 0 20px 40px rgb(0 0 0 / 0.2));
                    transform: translateY(-4px);
                  }

/* ================= FUNCTIONAL CONTAINERS ================= */

/* Modal-Container */
                  .container-modal {
                    align-items: center;
                    backdrop-filter: blur(4px);
                    background: rgb(0 0 0 / 0.5);
                    display: flex;
                    height: 100%;
                    justify-content: center;
                    left: 0%;
                    position: fixed;
                    top: 0%;
                    width: 100vw;
                    z-index: var(--z-modal, 1060);
                  }

/* Toast-Container */
                  .container-toast {
                    background: var(--container-bg, #fff);
                    border-radius: var(--container-border-radius, 0.5rem);
                    box-shadow: var(--container-elevated-shadow, 0 10px 15px rgb(0 0 0 / 0.1));
                    max-width: var(--modal-max-width, 32rem);
                    padding: var(--container-card-padding, 1.5rem);
                    position: fixed;
                    right: 1rem;
                    top: 1rem;
                    z-index: var(--z-toast, 1080);
                  }

/* Dropdown-Container */
                  .container-dropdown {
                    background: var(--container-bg, #fff);
                    border: 1px solid var(--container-border-color, #e5e7eb);
                    border-radius: var(--container-border-radius, 0.5rem);
                    box-shadow: var(--container-shadow, 0 1px 3px rgb(0 0 0 / 0.1));
                    position: absolute;
                    z-index: var(--z-dropdown, 1000);
                  }

/* Tooltip-Container */
                  .container-tooltip {
                    background: var(--container-bg, #fff);
                    border: 1px solid var(--container-border-color, #e5e7eb);
                    border-radius: var(--container-border-radius, 0.5rem);
                    box-shadow: var(--container-shadow, 0 1px 3px rgb(0 0 0 / 0.1));
                    max-width: var(--tooltip-max-width, 20rem);
                    padding: var(--space-2, 0.5rem);
                    position: absolute;
                    z-index: var(--z-tooltip, 1070);
                  }

/* Popover-Container */
                  .container-popover {
                    background: var(--container-bg, #fff);
                    border: 1px solid var(--container-border-color, #e5e7eb);
                    border-radius: var(--container-border-radius, 0.5rem);
                    box-shadow: var(--container-elevated-shadow, 0 10px 15px rgb(0 0 0 / 0.1));
                    max-width: var(--popover-max-width, 24rem);
                    padding: var(--container-card-padding, 1.5rem);
                    position: absolute;
                    z-index: var(--z-popover, 1040);
                  }

/* Sidebar-Container */
                  .container-sidebar {
                    background: var(--container-bg, #fff);
                    border-right: 1px solid var(--container-border-color, #e5e7eb);
                    height: 100%;
                    position: fixed;
                    width: var(--sidebar-width, 16rem);
                    z-index: var(--z-fixed, 1000);
                  }

/* Header-Container */
                  .container-header {
                    background: var(--container-bg, #fff);
                    border-bottom: 1px solid var(--container-border-color, #e5e7eb);
                    height: var(--header-height, 4rem);
                    position: fixed;
                    width: 100%;
                    z-index: var(--z-fixed, 1000);
                  }

/* Footer-Container */
                  .container-footer {
                    background: var(--container-bg, #fff);
                    border-top: 1px solid var(--container-border-color, #e5e7eb);
                    height: var(--footer-height, 4rem);
                    position: relative;
                    width: 100%;
                  }

/* ================= Z-INDEX MANAGEMENT ================= */

/* Z-Index-Variablen für konsistente Layering */
                  :root {
                    --z-base: 1;
                    --z-dropdown: 1000;
                    --z-sticky: 1020;
                    --z-header: 1050;
                    --z-sidebar: 1040;
                    --z-popover: 1060;
                    --z-overlay: 1070;
                    --z-modal: 1080;
                    --z-tooltip: 1100;
                    --z-toast: 1120;
                  }

/* Z-Index Utilities */
                  .z-0 { z-index: 0; }

                  .z-10 { z-index: 10; }

                  .z-20 { z-index: 20; }

                  .z-30 { z-index: 30; }

                  .z-40 { z-index: 40; }

                  .z-50 { z-index: 50; }

                  .z-auto { z-index: auto; }

/* Spezielle Z-Index-Klassen */
                  .z-dropdown { z-index: var(--z-dropdown, 1000); }

                  .z-sticky { z-index: var(--z-sticky, 1010); }

                  .z-header { z-index: var(--z-header, 1020); }

                  .z-sidebar { z-index: var(--z-sidebar, 1030); }

                  .z-popover { z-index: var(--z-popover, 1040); }

                  .z-overlay { z-index: var(--z-overlay, 1050); }

                  .z-modal { z-index: var(--z-modal, 1060); }

                  .z-tooltip { z-index: var(--z-tooltip, 1070); }

                  .z-toast { z-index: var(--z-toast, 1080); }
                }