// Mixin für das Grid-System
=col($size)
  flex: 0 0 $size
  max-width: $size

// Dynamische Spalten (1 bis 12)
@for $i from 1 through 12
  .col-#{$i}
    +col(percentage($i / 12))

// Flexbox-Ausrichtungen
=flex-align($align-items, $justify-content)
  display: flex
  align-items: $align-items
  justify-content: $justify-content

.d-flex
  display: flex

.d-flex-center
  +flex-align(center, center)

.d-flex-start
  +flex-align(flex-start, flex-start)

.d-flex-end
  +flex-align(flex-end, flex-end)

.d-flex-between
  +flex-align(center, space-between)

// Spacing Mixins (Margin und Padding)
=spacing($type, $size)
  #{$type}: $size

=m($size)
  +spacing(margin, $size)

=mt($size)
  +spacing(margin-top, $size)

=mb($size)
  +spacing(margin-bottom, $size)

=p($size)
  +spacing(padding, $size)

=pt($size)
  +spacing(padding-top, $size)

=pb($size)
  +spacing(padding-bottom, $size)

// Margin Klassen
.m-0
  +m(0)
.m-1
  +m(0.25rem)
.m-2
  +m(0.5rem)
.m-3
  +m(0.75rem)
.m-4
  +m(1rem)
.m-5
  +m(1.25rem)
.m-6
  +m(1.5rem)

// Margin Top Klassen
.mt-0
  +mt(0)
.mt-1
  +mt(0.25rem)
.mt-2
  +mt(0.5rem)
.mt-3
  +mt(0.75rem)
.mt-4
  +mt(1rem)
.mt-5
  +mt(1.25rem)
.mt-6
  +mt(1.5rem)

// Margin Bottom Klassen
.mb-0
  +mb(0)
.mb-1
  +mb(0.25rem)
.mb-2
  +mb(0.5rem)
.mb-3
  +mb(0.75rem)
.mb-4
  +mb(1rem)
.mb-5
  +mb(1.25rem)
.mb-6
  +mb(1.5rem)

// Padding Klassen
.p-0
  +p(0)
.p-1
  +p(0.25rem)
.p-2
  +p(0.5rem)
.p-3
  +p(0.75rem)
.p-4
  +p(1rem)
.p-5
  +p(1.25rem)
.p-6
  +p(1.5rem)

// Padding Top Klassen
.pt-0
  +pt(0)
.pt-1
  +pt(0.25rem)
.pt-2
  +pt(0.5rem)
.pt-3
  +pt(0.75rem)
.pt-4
  +pt(1rem)
.pt-5
  +pt(1.25rem)
.pt-6
  +pt(1.5rem)

// Padding Bottom Klassen
.pb-0
  +pb(0)
.pb-1
  +pb(0.25rem)
.pb-2
  +pb(0.5rem)
.pb-3
  +pb(0.75rem)
.pb-4
  +pb(1rem)
.pb-5
  +pb(1.25rem)
.pb-6
  +pb(1.5rem)

// Text-Ausrichtungen
=text-align($align)
  text-align: $align

.text-left
  +text-align(left)

.text-center
  +text-align(center)

.text-right
  +text-align(right)

// Vertikale Ausrichtung
.align-items-start
  align-items: flex-start

.align-items-center
  align-items: center

.align-items-end
  align-items: flex-end

.align-items-baseline
  align-items: baseline

.align-items-stretch
  align-items: stretch

// Horizontale Ausrichtung
.justify-content-start
  justify-content: flex-start

.justify-content-center
  justify-content: center

.justify-content-end
  justify-content: flex-end

.justify-content-between
  justify-content: space-between

.justify-content-around
  justify-content: space-around

.justify-content-evenly
  justify-content: space-evenly  

// Globales Box-Sizing für alle Elemente
*
  box-sizing: border-box

// Row-Klasse für das Grid-System
.row
  display: flex
  flex-wrap: wrap
  margin-left: -15px
  margin-right: -15px
  width: 100%

  // Optional: Unterstützung für no-gutters (keine Abstände zwischen Spalten)
  &.no-gutters
    margin-left: 0
    margin-right: 0

    > .col,
    > [class*="col-"]
      padding-left: 0
      padding-right: 0

// Standard-Padding für Spalten (Gutter)
[class*="col-"]
  padding-left: 15px
  padding-right: 15px

// Mixin für das Grid-System
=col($size)
  flex: 0 0 $size
  width: $size
  max-width: $size

// Dynamische Spalten (1 bis 12) - Standardbreiten für große Bildschirme
@for $i from 1 through 12
  .col-#{$i}
    +col(percentage($i / 12))

// Breakpoints – jetzt mit min-width
$breakpoints: (lg: 1200px, md: 992px, sm: 768px)

=breakpoint($size)
  @media (min-width: $size)
    @content

=col-responsive($col, $size)
  @each $key, $value in $breakpoints
    +breakpoint($value)
      .col-#{$key}-#{$col}
        flex: 0 0 (100% / 12 * $col)
        width: (100% / 12 * $col)
        max-width: (100% / 12 * $col)

// Responsive Spalten
@for $i from 1 through 12
  +col-responsive($i, lg)
  +col-responsive($i, md)
  +col-responsive($i, sm)

// Responsive Stacking für kleinere Bildschirme
@media (max-width: 992px)
  [class*="col-"]
    flex: 0 0 100%
    width: 100%
    max-width: 100%