/* =========================================================
   WF SPACING SYSTEM
   Modern + responsive + legacy-friendly
   ========================================================= */

/* =========================================================
   1. TOKENS / VARIABLES
   ========================================================= */
:root {
  --wf-space-tokens-0: 0;
  --wf-space-tokens-base: clamp(0.75rem, 1vw + 0.5rem, 1.25rem);

  --wf-space-tokens-xs: calc(var(--wf-space-tokens-base) * 0.5);
  --wf-space-tokens-sm: calc(var(--wf-space-tokens-base) * 1);
  --wf-space-tokens-md: calc(var(--wf-space-tokens-base) * 1.5);
  --wf-space-tokens-lg: calc(var(--wf-space-tokens-base) * 2);
  --wf-space-tokens-xl: calc(var(--wf-space-tokens-base) * 2.5);

  /* große Abstände separat */
  --wf-space-tokens-2xl: clamp(1.5rem, 3.5vw, 4.75rem);
  --wf-space-tokens-3xl: clamp(1.5rem, 4vw, 5rem);
  --wf-space-tokens-4xl: clamp(2rem, 5vw, 6.25rem);
  --wf-space-tokens-5xl: clamp(2.5rem, 8vw, 7.5rem);
  --wf-space-tokens-6xl: clamp(3rem, 10vw, 9rem);
  --wf-space-tokens-7xl: clamp(3.5rem, 12vw, 10.5rem);  

  /* Feste Legacy-Werte */
  --wf-space-tokens-fixed-0: 0;
}

/* Nur wenn cqw unterstützt wird */
@supports (width: 1cqw) {
  :root {

  --wf-space-tokens-base: clamp(0.75rem, 1cqw + 0.5rem, 1.25rem);

  --wf-space-tokens-xs: calc(var(--wf-space-tokens-base) * 0.5);
  --wf-space-tokens-sm: calc(var(--wf-space-tokens-base) * 1);
  --wf-space-tokens-md: calc(var(--wf-space-tokens-base) * 1.5);
  --wf-space-tokens-lg: calc(var(--wf-space-tokens-base) * 2);
  --wf-space-tokens-xl: calc(var(--wf-space-tokens-base) * 2.5);
  /* --wf-space-tokens-2xl: calc(var(--wf-space-tokens-base) * 3); */

  /* große Abstände separat */
  --wf-space-tokens-2xl: clamp(1.5rem, 3.5cqw, 4.75rem);
  --wf-space-tokens-3xl: clamp(1.5rem, 4cqw, 5rem);
  --wf-space-tokens-4xl: clamp(2rem, 5cqw, 6.25rem);
  --wf-space-tokens-5xl: clamp(2.5rem, 8cqw, 7.5rem);
  --wf-space-tokens-6xl: clamp(3rem, 10cqw, 9rem);
  --wf-space-tokens-7xl: clamp(3.5rem, 12cqw, 10.5rem);  



  }
}


/* =========================================================
   2. MODERNE PADDING UTILITIES
   ========================================================= */

/* Padding Top */
.wf-pt-xs  { padding-top: var(--wf-space-tokens-xs); }
.wf-pt-sm  { padding-top: var(--wf-space-tokens-sm); }
.wf-pt-md  { padding-top: var(--wf-space-tokens-md); }
.wf-pt-lg  { padding-top: var(--wf-space-tokens-lg); }
.wf-pt-xl  { padding-top: var(--wf-space-tokens-xl); }
.wf-pt-2xl { padding-top: var(--wf-space-tokens-2xl); }
.wf-pt-3xl { padding-top: var(--wf-space-tokens-3xl); }
.wf-pt-4xl { padding-top: var(--wf-space-tokens-4xl); }
.wf-pt-5xl { padding-top: var(--wf-space-tokens-5xl); }

/* Padding Bottom */
.wf-pb-xs  { padding-bottom: var(--wf-space-tokens-xs); }
.wf-pb-sm  { padding-bottom: var(--wf-space-tokens-sm); }
.wf-pb-md  { padding-bottom: var(--wf-space-tokens-md); }
.wf-pb-lg  { padding-bottom: var(--wf-space-tokens-lg); }
.wf-pb-xl  { padding-bottom: var(--wf-space-tokens-xl); }
.wf-pb-2xl { padding-bottom: var(--wf-space-tokens-2xl); }
.wf-pb-3xl { padding-bottom: var(--wf-space-tokens-3xl); }
.wf-pb-4xl { padding-bottom: var(--wf-space-tokens-4xl); }
.wf-pb-5xl { padding-bottom: var(--wf-space-tokens-5xl); }

/* Padding Left */
.wf-pl-xs  { padding-left: var(--wf-space-tokens-xs); }
.wf-pl-sm  { padding-left: var(--wf-space-tokens-sm); }
.wf-pl-md  { padding-left: var(--wf-space-tokens-md); }
.wf-pl-lg  { padding-left: var(--wf-space-tokens-lg); }
.wf-pl-xl  { padding-left: var(--wf-space-tokens-xl); }
.wf-pl-2xl { padding-left: var(--wf-space-tokens-2xl); }
.wf-pl-3xl { padding-left: var(--wf-space-tokens-3xl); }
.wf-pl-4xl { padding-left: var(--wf-space-tokens-4xl); }
.wf-pl-5xl { padding-left: var(--wf-space-tokens-5xl); }

/* Padding Right */
.wf-pr-xs  { padding-right: var(--wf-space-tokens-xs); }
.wf-pr-sm  { padding-right: var(--wf-space-tokens-sm); }
.wf-pr-md  { padding-right: var(--wf-space-tokens-md); }
.wf-pr-lg  { padding-right: var(--wf-space-tokens-lg); }
.wf-pr-xl  { padding-right: var(--wf-space-tokens-xl); }
.wf-pr-2xl { padding-right: var(--wf-space-tokens-2xl); }
.wf-pr-3xl { padding-right: var(--wf-space-tokens-3xl); }
.wf-pr-4xl { padding-right: var(--wf-space-tokens-4xl); }
.wf-pr-5xl { padding-right: var(--wf-space-tokens-5xl); }

/* =========================================================
   3. MODERNE MARGIN UTILITIES
   ========================================================= */

/* Margin Top */
.wf-mt-0   { margin-top: var(--wf-space-tokens-0); }
.wf-mt-xs  { margin-top: var(--wf-space-tokens-xs); }
.wf-mt-sm  { margin-top: var(--wf-space-tokens-sm); }
.wf-mt-md  { margin-top: var(--wf-space-tokens-md); }
.wf-mt-lg  { margin-top: var(--wf-space-tokens-lg); }
.wf-mt-xl  { margin-top: var(--wf-space-tokens-xl); }
.wf-mt-2xl { margin-top: var(--wf-space-tokens-2xl); }
.wf-mt-3xl { margin-top: var(--wf-space-tokens-3xl); }
.wf-mt-4xl { margin-top: var(--wf-space-tokens-4xl); }
.wf-mt-5xl { margin-top: var(--wf-space-tokens-5xl); }

/* Margin Bottom */
.wf-mb-0   { margin-bottom: var(--wf-space-tokens-0); }
.wf-mb-xs  { margin-bottom: var(--wf-space-tokens-xs); }
.wf-mb-sm  { margin-bottom: var(--wf-space-tokens-sm); }
.wf-mb-md  { margin-bottom: var(--wf-space-tokens-md); }
.wf-mb-lg  { margin-bottom: var(--wf-space-tokens-lg); }
.wf-mb-xl  { margin-bottom: var(--wf-space-tokens-xl); }
.wf-mb-2xl { margin-bottom: var(--wf-space-tokens-2xl); }
.wf-mb-3xl { margin-bottom: var(--wf-space-tokens-3xl); }
.wf-mb-4xl { margin-bottom: var(--wf-space-tokens-4xl); }
.wf-mb-5xl { margin-bottom: var(--wf-space-tokens-5xl); }

/* Margin Left */
.wf-ml-0   { margin-left: var(--wf-space-tokens-0); }
.wf-ml-xs  { margin-left: var(--wf-space-tokens-xs); }
.wf-ml-sm  { margin-left: var(--wf-space-tokens-sm); }
.wf-ml-md  { margin-left: var(--wf-space-tokens-md); }
.wf-ml-lg  { margin-left: var(--wf-space-tokens-lg); }
.wf-ml-xl  { margin-left: var(--wf-space-tokens-xl); }
.wf-ml-2xl { margin-left: var(--wf-space-tokens-2xl); }
.wf-ml-3xl { margin-left: var(--wf-space-tokens-3xl); }
.wf-ml-4xl { margin-left: var(--wf-space-tokens-4xl); }
.wf-ml-5xl { margin-left: var(--wf-space-tokens-5xl); }

/* Margin Right */
.wf-mr-0   { margin-right: var(--wf-space-tokens-0); }
.wf-mr-xs  { margin-right: var(--wf-space-tokens-xs); }
.wf-mr-sm  { margin-right: var(--wf-space-tokens-sm); }
.wf-mr-md  { margin-right: var(--wf-space-tokens-md); }
.wf-mr-lg  { margin-right: var(--wf-space-tokens-lg); }
.wf-mr-xl  { margin-right: var(--wf-space-tokens-xl); }
.wf-mr-2xl { margin-right: var(--wf-space-tokens-2xl); }
.wf-mr-3xl { margin-right: var(--wf-space-tokens-3xl); }
.wf-mr-4xl { margin-right: var(--wf-space-tokens-4xl); }
.wf-mr-5xl { margin-right: var(--wf-space-tokens-5xl); }


/* =========================================================
   ERWEITERUNG 6XL / 7XL
   ========================================================= */


/* Padding Top */
.wf-pt-6xl { padding-top: var(--wf-space-tokens-6xl); }
.wf-pt-7xl { padding-top: var(--wf-space-tokens-7xl); }

/* Padding Bottom */
.wf-pb-6xl { padding-bottom: var(--wf-space-tokens-6xl); }
.wf-pb-7xl { padding-bottom: var(--wf-space-tokens-7xl); }

/* Padding Left */
.wf-pl-6xl { padding-left: var(--wf-space-tokens-6xl); }
.wf-pl-7xl { padding-left: var(--wf-space-tokens-7xl); }

/* Padding Right */
.wf-pr-6xl { padding-right: var(--wf-space-tokens-6xl); }
.wf-pr-7xl { padding-right: var(--wf-space-tokens-7xl); }

/* Margin Top */
.wf-mt-6xl { margin-top: var(--wf-space-tokens-6xl); }
.wf-mt-7xl { margin-top: var(--wf-space-tokens-7xl); }

/* Margin Bottom */
.wf-mb-6xl { margin-bottom: var(--wf-space-tokens-6xl); }
.wf-mb-7xl { margin-bottom: var(--wf-space-tokens-7xl); }

/* Margin Left */
.wf-ml-6xl { margin-left: var(--wf-space-tokens-6xl); }
.wf-ml-7xl { margin-left: var(--wf-space-tokens-7xl); }

/* Margin Right */
.wf-mr-6xl { margin-right: var(--wf-space-tokens-6xl); }
.wf-mr-7xl { margin-right: var(--wf-space-tokens-7xl); }

/* Gap */
.wf-gap-6xl { gap: var(--wf-space-tokens-6xl); }
.wf-gap-7xl { gap: var(--wf-space-tokens-7xl); }

/* Padding all */
.wf-p-6xl { padding: var(--wf-space-tokens-6xl); }
.wf-p-7xl { padding: var(--wf-space-tokens-7xl); }

/* Padding top + bottom */
.wf-ptb-6xl { padding-top: var(--wf-space-tokens-6xl); padding-bottom: var(--wf-space-tokens-6xl); }
.wf-ptb-7xl { padding-top: var(--wf-space-tokens-7xl); padding-bottom: var(--wf-space-tokens-7xl); }

/* Padding left + right */
.wf-plr-6xl { padding-left: var(--wf-space-tokens-6xl); padding-right: var(--wf-space-tokens-6xl); }
.wf-plr-7xl { padding-left: var(--wf-space-tokens-7xl); padding-right: var(--wf-space-tokens-7xl); }



/* =========================================================
   4. MODERNE GAP UTILITIES
   ========================================================= */
.wf-gap-0   { gap: var(--wf-space-tokens-0); }
.wf-gap-xs  { gap: var(--wf-space-tokens-xs); }
.wf-gap-sm  { gap: var(--wf-space-tokens-sm); }
.wf-gap-md  { gap: var(--wf-space-tokens-md); }
.wf-gap-lg  { gap: var(--wf-space-tokens-lg); }
.wf-gap-xl  { gap: var(--wf-space-tokens-xl); }
.wf-gap-2xl { gap: var(--wf-space-tokens-2xl); }
.wf-gap-3xl { gap: var(--wf-space-tokens-3xl); }
.wf-gap-4xl { gap: var(--wf-space-tokens-4xl); }
.wf-gap-5xl { gap: var(--wf-space-tokens-5xl); }

/* =========================================================
   5. MODERNE PADDING SHORTHANDS
   ========================================================= */

/* Padding all */
.wf-p-xs  { padding: var(--wf-space-tokens-xs); }
.wf-p-sm  { padding: var(--wf-space-tokens-sm); }
.wf-p-md  { padding: var(--wf-space-tokens-md); }
.wf-p-lg  { padding: var(--wf-space-tokens-lg); }
.wf-p-xl  { padding: var(--wf-space-tokens-xl); }
.wf-p-2xl { padding: var(--wf-space-tokens-2xl); }
.wf-p-3xl { padding: var(--wf-space-tokens-3xl); }
.wf-p-4xl { padding: var(--wf-space-tokens-4xl); }
.wf-p-5xl { padding: var(--wf-space-tokens-5xl); }

/* Padding top + bottom */
.wf-ptb-xs  { padding-top: var(--wf-space-tokens-xs); padding-bottom: var(--wf-space-tokens-xs); }
.wf-ptb-sm  { padding-top: var(--wf-space-tokens-sm); padding-bottom: var(--wf-space-tokens-sm); }
.wf-ptb-md  { padding-top: var(--wf-space-tokens-md); padding-bottom: var(--wf-space-tokens-md); }
.wf-ptb-lg  { padding-top: var(--wf-space-tokens-lg); padding-bottom: var(--wf-space-tokens-lg); }
.wf-ptb-xl  { padding-top: var(--wf-space-tokens-xl); padding-bottom: var(--wf-space-tokens-xl); }
.wf-ptb-2xl { padding-top: var(--wf-space-tokens-2xl); padding-bottom: var(--wf-space-tokens-2xl); }
.wf-ptb-3xl { padding-top: var(--wf-space-tokens-3xl); padding-bottom: var(--wf-space-tokens-3xl); }
.wf-ptb-4xl { padding-top: var(--wf-space-tokens-4xl); padding-bottom: var(--wf-space-tokens-4xl); }
.wf-ptb-5xl { padding-top: var(--wf-space-tokens-5xl); padding-bottom: var(--wf-space-tokens-5xl); }

/* Padding left + right */
.wf-plr-xs  { padding-left: var(--wf-space-tokens-xs); padding-right: var(--wf-space-tokens-xs); }
.wf-plr-sm  { padding-left: var(--wf-space-tokens-sm); padding-right: var(--wf-space-tokens-sm); }
.wf-plr-md  { padding-left: var(--wf-space-tokens-md); padding-right: var(--wf-space-tokens-md); }
.wf-plr-lg  { padding-left: var(--wf-space-tokens-lg); padding-right: var(--wf-space-tokens-lg); }
.wf-plr-xl  { padding-left: var(--wf-space-tokens-xl); padding-right: var(--wf-space-tokens-xl); }
.wf-plr-2xl { padding-left: var(--wf-space-tokens-2xl); padding-right: var(--wf-space-tokens-2xl); }
.wf-plr-3xl { padding-left: var(--wf-space-tokens-3xl); padding-right: var(--wf-space-tokens-3xl); }
.wf-plr-4xl { padding-left: var(--wf-space-tokens-4xl); padding-right: var(--wf-space-tokens-4xl); }
.wf-plr-5xl { padding-left: var(--wf-space-tokens-5xl); padding-right: var(--wf-space-tokens-5xl); }



/* =========================================================
   ZERO PADDING UTILITIES
   ========================================================= */

.wf-pt-0  { padding-top: 0; }
.wf-pb-0  { padding-bottom: 0; }
.wf-pl-0  { padding-left: 0; }
.wf-pr-0  { padding-right: 0; }
.wf-p-0   { padding: 0; }

.wf-ptb-0 {
  padding-top: 0;
  padding-bottom: 0;
}

.wf-plr-0 {
  padding-left: 0;
  padding-right: 0;
}


/* =========================================================
   XS 480px
   ========================================================= */
@media (min-width: 480px) {
  .wf-pt-xs-0  { padding-top: 0; }
  .wf-pb-xs-0  { padding-bottom: 0; }
  .wf-pl-xs-0  { padding-left: 0; }
  .wf-pr-xs-0  { padding-right: 0; }
  .wf-p-xs-0   { padding: 0; }

  .wf-ptb-xs-0 {
    padding-top: 0;
    padding-bottom: 0;
  }

  .wf-plr-xs-0 {
    padding-left: 0;
    padding-right: 0;
  }
}


/* =========================================================
   SM 576px
   ========================================================= */
@media (min-width: 576px) {
  .wf-pt-sm-0  { padding-top: 0; }
  .wf-pb-sm-0  { padding-bottom: 0; }
  .wf-pl-sm-0  { padding-left: 0; }
  .wf-pr-sm-0  { padding-right: 0; }
  .wf-p-sm-0   { padding: 0; }

  .wf-ptb-sm-0 {
    padding-top: 0;
    padding-bottom: 0;
  }

  .wf-plr-sm-0 {
    padding-left: 0;
    padding-right: 0;
  }
}


/* =========================================================
   MD 768px
   ========================================================= */
@media (min-width: 768px) {
  .wf-pt-md-0  { padding-top: 0; }
  .wf-pb-md-0  { padding-bottom: 0; }
  .wf-pl-md-0  { padding-left: 0; }
  .wf-pr-md-0  { padding-right: 0; }
  .wf-p-md-0   { padding: 0; }

  .wf-ptb-md-0 {
    padding-top: 0;
    padding-bottom: 0;
  }

  .wf-plr-md-0 {
    padding-left: 0;
    padding-right: 0;
  }
}


/* =========================================================
   LG 992px
   ========================================================= */
@media (min-width: 992px) {
  .wf-pt-lg-0  { padding-top: 0; }
  .wf-pb-lg-0  { padding-bottom: 0; }
  .wf-pl-lg-0  { padding-left: 0; }
  .wf-pr-lg-0  { padding-right: 0; }
  .wf-p-lg-0   { padding: 0; }

  .wf-ptb-lg-0 {
    padding-top: 0;
    padding-bottom: 0;
  }

  .wf-plr-lg-0 {
    padding-left: 0;
    padding-right: 0;
  }
}


/* =========================================================
   XL 1200px
   ========================================================= */
@media (min-width: 1200px) {
  .wf-pt-xl-0  { padding-top: 0; }
  .wf-pb-xl-0  { padding-bottom: 0; }
  .wf-pl-xl-0  { padding-left: 0; }
  .wf-pr-xl-0  { padding-right: 0; }
  .wf-p-xl-0   { padding: 0; }

  .wf-ptb-xl-0 {
    padding-top: 0;
    padding-bottom: 0;
  }

  .wf-plr-xl-0 {
    padding-left: 0;
    padding-right: 0;
  }
}


/* =========================================================
   2XL 1400px
   ========================================================= */
@media (min-width: 1400px) {
  .wf-pt-2xl-0  { padding-top: 0; }
  .wf-pb-2xl-0  { padding-bottom: 0; }
  .wf-pl-2xl-0  { padding-left: 0; }
  .wf-pr-2xl-0  { padding-right: 0; }
  .wf-p-2xl-0   { padding: 0; }

  .wf-ptb-2xl-0 {
    padding-top: 0;
    padding-bottom: 0;
  }

  .wf-plr-2xl-0 {
    padding-left: 0;
    padding-right: 0;
  }
}


/* =========================================================
   ZERO MARGIN UTILITIES
   Zum Entfernen von Margin ab bestimmten Breakpoints
   ========================================================= */

/* =========================================================
   1. BASIS
   ========================================================= */
.wf-mt-0  { margin-top: 0; }
.wf-mb-0  { margin-bottom: 0; }
.wf-ml-0  { margin-left: 0; }
.wf-mr-0  { margin-right: 0; }
.wf-m-0   { margin: 0; }

.wf-mtb-0 {
  margin-top: 0;
  margin-bottom: 0;
}

.wf-mlr-0 {
  margin-left: 0;
  margin-right: 0;
}


/* =========================================================
   2. XS  480px
   ========================================================= */
@media (min-width: 480px) {
  .wf-mt-xs-0  { margin-top: 0; }
  .wf-mb-xs-0  { margin-bottom: 0; }
  .wf-ml-xs-0  { margin-left: 0; }
  .wf-mr-xs-0  { margin-right: 0; }
  .wf-m-xs-0   { margin: 0; }

  .wf-mtb-xs-0 {
    margin-top: 0;
    margin-bottom: 0;
  }

  .wf-mlr-xs-0 {
    margin-left: 0;
    margin-right: 0;
  }
}


/* =========================================================
   3. SM 576px
   ========================================================= */
@media (min-width: 576px) {
  .wf-mt-sm-0  { margin-top: 0; }
  .wf-mb-sm-0  { margin-bottom: 0; }
  .wf-ml-sm-0  { margin-left: 0; }
  .wf-mr-sm-0  { margin-right: 0; }
  .wf-m-sm-0   { margin: 0; }

  .wf-mtb-sm-0 {
    margin-top: 0;
    margin-bottom: 0;
  }

  .wf-mlr-sm-0 {
    margin-left: 0;
    margin-right: 0;
  }
}


/* =========================================================
   4. MD 768px
   ========================================================= */
@media (min-width: 768px) {
  .wf-mt-md-0  { margin-top: 0; }
  .wf-mb-md-0  { margin-bottom: 0; }
  .wf-ml-md-0  { margin-left: 0; }
  .wf-mr-md-0  { margin-right: 0; }
  .wf-m-md-0   { margin: 0; }

  .wf-mtb-md-0 {
    margin-top: 0;
    margin-bottom: 0;
  }

  .wf-mlr-md-0 {
    margin-left: 0;
    margin-right: 0;
  }
}


/* =========================================================
   5. LG 992px
   ========================================================= */
@media (min-width: 992px) {
  .wf-mt-lg-0  { margin-top: 0; }
  .wf-mb-lg-0  { margin-bottom: 0; }
  .wf-ml-lg-0  { margin-left: 0; }
  .wf-mr-lg-0  { margin-right: 0; }
  .wf-m-lg-0   { margin: 0; }

  .wf-mtb-lg-0 {
    margin-top: 0;
    margin-bottom: 0;
  }

  .wf-mlr-lg-0 {
    margin-left: 0;
    margin-right: 0;
  }
}


/* =========================================================
   6. XL 1200px
   ========================================================= */
@media (min-width: 1200px) {
  .wf-mt-xl-0  { margin-top: 0; }
  .wf-mb-xl-0  { margin-bottom: 0; }
  .wf-ml-xl-0  { margin-left: 0; }
  .wf-mr-xl-0  { margin-right: 0; }
  .wf-m-xl-0   { margin: 0; }

  .wf-mtb-xl-0 {
    margin-top: 0;
    margin-bottom: 0;
  }

  .wf-mlr-xl-0 {
    margin-left: 0;
    margin-right: 0;
  }
}


/* =========================================================
   7. 2XL 1400px
   ========================================================= */
@media (min-width: 1400px) {
  .wf-mt-2xl-0  { margin-top: 0; }
  .wf-mb-2xl-0  { margin-bottom: 0; }
  .wf-ml-2xl-0  { margin-left: 0; }
  .wf-mr-2xl-0  { margin-right: 0; }
  .wf-m-2xl-0   { margin: 0; }

  .wf-mtb-2xl-0 {
    margin-top: 0;
    margin-bottom: 0;
  }

  .wf-mlr-2xl-0 {
    margin-left: 0;
    margin-right: 0;
  }
}