/* =========================================================
   WF GUTTERS / TOKENS
   dynamisch / viewport-basiert
   Stand: 19.04.2026
   modernes Design-System (ähnlich Tailwind / Design Tokens)
   ========================================================= */

:root {
  /* Basis */
  --wf-space-gutters-tokens-0: 0;
  --wf-space-gutters-tokens-base: clamp(0.75rem, 1vw + 0.5rem, 1.25rem);

  /* kleine bis mittlere Abstände */
  --wf-space-gutters-tokens-xs: calc(var(--wf-space-gutters-tokens-base) * 0.5);
  --wf-space-gutters-tokens-sm: calc(var(--wf-space-gutters-tokens-base) * 1);
  --wf-space-gutters-tokens-md: calc(var(--wf-space-gutters-tokens-base) * 1.5);
  --wf-space-gutters-tokens-lg: calc(var(--wf-space-gutters-tokens-base) * 2);
  --wf-space-gutters-tokens-xl: calc(var(--wf-space-gutters-tokens-base) * 2.5);
  --wf-space-gutters-tokens-2xl: calc(var(--wf-space-gutters-tokens-base) * 3);

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


/* Nur wenn cqw unterstützt wird 

.wf-container {
  container-type: inline-size;
}

*/
@supports (width: 1cqw) {
  :root {
    --wf-space-gutters-tokens-base: clamp(0.75rem, 1cqw + 0.5rem, 1.25rem);

    --wf-space-gutters-tokens-3xl: clamp(1.5rem, 4cqw, 5rem);
    --wf-space-gutters-tokens-4xl: clamp(2rem, 5cqw, 6.25rem);
    --wf-space-gutters-tokens-5xl: clamp(2.5rem, 8cqw, 7.5rem);
    --wf-space-gutters-tokens-6xl: clamp(2.75rem, 5cqw, 6rem);
    --wf-space-gutters-tokens-7xl: clamp(3.5rem, 12cqw, 10.5rem);
  }
}

/* =========================================================
   FLEX HELPERS
   ========================================================= */

.wf-row-flex-wrap {
  display: flex;
  flex-wrap: wrap;
}

.wf-row-flex {
  display: flex;
}

.wf-row-flex-wrap-column {
  display: flex;
  flex-wrap: wrap;
  flex-direction: column;
}

.wf-row-flex-space-between {
  height: 100%;
  display: flex;
  flex-flow: row wrap;
  align-content: space-between;
}


/* =========================================================
   GUTTER BASIS
   Verwendung:
   <div class="wf-row-flex-wrap wf-gutters-token wf-gutters-md">
   ========================================================= */

.wf-gutters-token {
  --wf-gutter-x: var(--wf-space-gutters-tokens-md);

  margin-left: calc(var(--wf-gutter-x) * -1);
  margin-right: calc(var(--wf-gutter-x) * -1);
}

.wf-gutters-token > .col,
.wf-gutters-token > .wf-col,
.wf-gutters-token > [class*="col-"] {
  padding-left: var(--wf-gutter-x);
  padding-right: var(--wf-gutter-x);
  box-sizing: border-box;
}


/* =========================================================
   GUTTER TOKEN KLASSEN
   ========================================================= */

.wf-gutters-0 {
  --wf-gutter-x: var(--wf-space-gutters-tokens-0);
}

.wf-gutters-xs {
  --wf-gutter-x: var(--wf-space-gutters-tokens-xs);
}

.wf-gutters-sm {
  --wf-gutter-x: var(--wf-space-gutters-tokens-sm);
}

.wf-gutters-md {
  --wf-gutter-x: var(--wf-space-gutters-tokens-md);
}

.wf-gutters-lg {
  --wf-gutter-x: var(--wf-space-gutters-tokens-lg);
}

.wf-gutters-xl {
  --wf-gutter-x: var(--wf-space-gutters-tokens-xl);
}

.wf-gutters-2xl {
  --wf-gutter-x: var(--wf-space-gutters-tokens-2xl);
}

.wf-gutters-3xl {
  --wf-gutter-x: var(--wf-space-gutters-tokens-3xl);
}

.wf-gutters-4xl {
  --wf-gutter-x: var(--wf-space-gutters-tokens-4xl);
}

.wf-gutters-5xl {
  --wf-gutter-x: var(--wf-space-gutters-tokens-5xl);
}

.wf-gutters-6xl {
  --wf-gutter-x: var(--wf-space-gutters-tokens-6xl);
}

.wf-gutters-7xl {
  --wf-gutter-x: var(--wf-space-gutters-tokens-7xl);
}


/* =========================================================
   OPTIONAL: RESPONSIVE GUTTERS
   Beispiel:
   <div class="wf-row-flex-wrap wf-gutters-token wf-gutters-responsive">
   ========================================================= */

.wf-gutters-responsive {
  --wf-gutter-x: var(--wf-space-gutters-tokens-sm);
}

@media (min-width: 576px) {
  .wf-gutters-responsive {
    --wf-gutter-x: var(--wf-space-gutters-tokens-md);
  }
}

@media (min-width: 768px) {
  .wf-gutters-responsive {
    --wf-gutter-x: var(--wf-space-gutters-tokens-lg);
  }
}

@media (min-width: 1200px) {
  .wf-gutters-responsive {
    --wf-gutter-x: var(--wf-space-gutters-tokens-xl);
  }
}

@media (min-width: 1600px) {
  .wf-gutters-responsive {
    --wf-gutter-x: var(--wf-space-gutters-tokens-2xl);
  }
}