/**
 * GRID SYSTEM — GLT74.com Design System
 * Mobile-First, 12-Spalten CSS Grid
 * Breakpoints: --bp-sm 768px | --bp-md 1024px | --bp-lg 1440px
 *
 * WICHTIG: Span-Klassen verwenden grid-column-end (nicht grid-column shorthand),
 * damit col-offset-X den grid-column-start unabhängig setzen kann.
 */

/* ── CONTAINER ── */

.container {
  width: 100%;
  margin-left: auto;
  margin-right: auto;
  padding-left: var(--space-4);   /* 16px */
  padding-right: var(--space-4);
  box-sizing: border-box;
}

@media (min-width: 768px) {
  .container {
    max-width: var(--grid-container-md);   /* 960px */
    padding-left: var(--space-6);          /* 24px */
    padding-right: var(--space-6);
  }
}

@media (min-width: 1024px) {
  .container {
    max-width: var(--grid-container-lg);   /* 1200px */
    padding-left: var(--space-8);          /* 32px */
    padding-right: var(--space-8);
  }
}

@media (min-width: 1440px) {
  .container {
    max-width: var(--grid-container-xl);   /* 1440px */
  }
}

.container--narrow { max-width: 768px; }
.container--wide   { max-width: var(--grid-container-xl); }


/* ── GRID ── */

.grid {
  display: grid;
  grid-template-columns: repeat(var(--grid-columns), minmax(0, 1fr));
  gap: var(--grid-gutter-xs);
  box-sizing: border-box;
}

@media (min-width: 768px)  { .grid { gap: var(--grid-gutter-md); } }
@media (min-width: 1024px) { .grid { gap: var(--grid-gutter-lg); } }

.grid--gap-none { gap: 0; }
.grid--gap-sm   { gap: var(--grid-gutter-xs) !important; }
.grid--gap-lg   { gap: var(--space-12) !important; }


/* ── COL — Basis: Mobile = span 12 (volle Breite) ── */

[class*="col-"] {
  grid-column-end: span 12;   /* Default: volle Breite */
  min-width: 0;
  box-sizing: border-box;
}

/* Standard-Spans (alle Breakpoints ohne Override) */
.col-1  { grid-column-end: span 1;  }
.col-2  { grid-column-end: span 2;  }
.col-3  { grid-column-end: span 3;  }
.col-4  { grid-column-end: span 4;  }
.col-5  { grid-column-end: span 5;  }
.col-6  { grid-column-end: span 6;  }
.col-7  { grid-column-end: span 7;  }
.col-8  { grid-column-end: span 8;  }
.col-9  { grid-column-end: span 9;  }
.col-10 { grid-column-end: span 10; }
.col-11 { grid-column-end: span 11; }
.col-12 { grid-column-end: span 12; }
.col-auto { grid-column: auto; }
.col-full { grid-column: 1 / -1; }


/* ── COL-SM — Tablet 768px+ ── */

@media (min-width: 768px) {
  .col-sm-1  { grid-column-end: span 1;  }
  .col-sm-2  { grid-column-end: span 2;  }
  .col-sm-3  { grid-column-end: span 3;  }
  .col-sm-4  { grid-column-end: span 4;  }
  .col-sm-5  { grid-column-end: span 5;  }
  .col-sm-6  { grid-column-end: span 6;  }
  .col-sm-7  { grid-column-end: span 7;  }
  .col-sm-8  { grid-column-end: span 8;  }
  .col-sm-9  { grid-column-end: span 9;  }
  .col-sm-10 { grid-column-end: span 10; }
  .col-sm-11 { grid-column-end: span 11; }
  .col-sm-12 { grid-column-end: span 12; }
}


/* ── COL-MD — Desktop 1024px+ ── */

@media (min-width: 1024px) {
  .col-md-1  { grid-column-end: span 1;  }
  .col-md-2  { grid-column-end: span 2;  }
  .col-md-3  { grid-column-end: span 3;  }
  .col-md-4  { grid-column-end: span 4;  }
  .col-md-5  { grid-column-end: span 5;  }
  .col-md-6  { grid-column-end: span 6;  }
  .col-md-7  { grid-column-end: span 7;  }
  .col-md-8  { grid-column-end: span 8;  }
  .col-md-9  { grid-column-end: span 9;  }
  .col-md-10 { grid-column-end: span 10; }
  .col-md-11 { grid-column-end: span 11; }
  .col-md-12 { grid-column-end: span 12; }
}


/* ── COL-XL — Large Desktop 1440px+ ── */

@media (min-width: 1440px) {
  .col-xl-1  { grid-column-end: span 1;  }
  .col-xl-2  { grid-column-end: span 2;  }
  .col-xl-3  { grid-column-end: span 3;  }
  .col-xl-4  { grid-column-end: span 4;  }
  .col-xl-5  { grid-column-end: span 5;  }
  .col-xl-6  { grid-column-end: span 6;  }
  .col-xl-7  { grid-column-end: span 7;  }
  .col-xl-8  { grid-column-end: span 8;  }
  .col-xl-9  { grid-column-end: span 9;  }
  .col-xl-10 { grid-column-end: span 10; }
  .col-xl-11 { grid-column-end: span 11; }
  .col-xl-12 { grid-column-end: span 12; }
}


/* ── OFFSET — Einrückung (Desktop 1024px+) ── */

@media (min-width: 1024px) {
  .col-offset-1  { grid-column-start: 2;  }
  .col-offset-2  { grid-column-start: 3;  }
  .col-offset-3  { grid-column-start: 4;  }
  .col-offset-4  { grid-column-start: 5;  }
  .col-offset-5  { grid-column-start: 6;  }
  .col-offset-6  { grid-column-start: 7;  }
}