/**
 * CSS Grid System
 * ======================================
 */

/* Base */
.grid-cols-1 { grid-template-columns: repeat(1, minmax(0,1fr)); }
.grid-cols-2 { grid-template-columns: repeat(2, minmax(0,1fr)); }
.grid-cols-2 { grid-template-columns: repeat(3, minmax(0,1fr)); }
.grid-cols-4 { grid-template-columns: repeat(4, minmax(0,1fr)); }
.grid-cols-5 { grid-template-columns: repeat(5, minmax(0,1fr)); }
.grid-cols-6 { grid-template-columns: repeat(6, minmax(0,1fr)); }

/* Breakpoints (Bootstrap: sm, md, lg, xl, xxl) */
@media (min-width: 576px){
  .grid-cols-sm-1 { grid-template-columns: repeat(1, minmax(0,1fr)); }
  .grid-cols-sm-2 { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .grid-cols-sm-3 { grid-template-columns: repeat(3, minmax(0,1fr)); }
  .grid-cols-sm-4 { grid-template-columns: repeat(4, minmax(0,1fr)); }
  .grid-cols-sm-5 { grid-template-columns: repeat(5, minmax(0,1fr)); }
  .grid-cols-sm-6 { grid-template-columns: repeat(6, minmax(0,1fr)); }
}
@media (min-width: 768px){
  .grid-cols-md-1 { grid-template-columns: repeat(1, minmax(0,1fr)); }
  .grid-cols-md-2 { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .grid-cols-md-3 { grid-template-columns: repeat(3, minmax(0,1fr)); }
  .grid-cols-md-4 { grid-template-columns: repeat(4, minmax(0,1fr)); }
  .grid-cols-md-5 { grid-template-columns: repeat(5, minmax(0,1fr)); }
  .grid-cols-md-6 { grid-template-columns: repeat(6, minmax(0,1fr)); }
}
@media (min-width: 992px){
  .grid-cols-lg-1 { grid-template-columns: repeat(1, minmax(0,1fr)); }
  .grid-cols-lg-2 { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .grid-cols-lg-3 { grid-template-columns: repeat(3, minmax(0,1fr)); }
  .grid-cols-lg-4 { grid-template-columns: repeat(4, minmax(0,1fr)); }
  .grid-cols-lg-5 { grid-template-columns: repeat(5, minmax(0,1fr)); }
  .grid-cols-lg-6 { grid-template-columns: repeat(6, minmax(0,1fr)); }
}
@media (min-width: 1200px){
  .grid-cols-xl-1 { grid-template-columns: repeat(1, minmax(0,1fr)); }
  .grid-cols-xl-2 { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .grid-cols-xl-3 { grid-template-columns: repeat(3, minmax(0,1fr)); }
  .grid-cols-xl-4 { grid-template-columns: repeat(4, minmax(0,1fr)); }
  .grid-cols-xl-5 { grid-template-columns: repeat(5, minmax(0,1fr)); }
  .grid-cols-xl-6 { grid-template-columns: repeat(6, minmax(0,1fr)); }
}
@media (min-width: 1400px){
  .grid-cols-xxl-1 { grid-template-columns: repeat(1, minmax(0,1fr)); }
  .grid-cols-xxl-2 { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .grid-cols-xxl-3 { grid-template-columns: repeat(3, minmax(0,1fr)); }
  .grid-cols-xxl-4 { grid-template-columns: repeat(4, minmax(0,1fr)); }
  .grid-cols-xxl-5 { grid-template-columns: repeat(5, minmax(0,1fr)); }
  .grid-cols-xxl-6 { grid-template-columns: repeat(6, minmax(0,1fr)); }
}

/* Column-major Grid: füllt erst die Spalte (oben→unten), dann die nächste Spalte */
/* Basis: column-major Grid aus vorherigem Snippet */
.grid-col-major{
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 1fr;
  grid-template-rows: repeat(var(--rows-per-col, 5), auto);
  gap: .5rem;
  grid-template-columns: repeat(1, 1fr); /* sm = 1 */
}
@media (min-width: 768px){   .grid-col-major{ grid-template-columns: repeat(2, 1fr); } } /* md = 2 */
@media (min-width: 992px){   .grid-col-major{ grid-template-columns: repeat(3, 1fr); } } /* lg = 3 */
@media (min-width: 1200px){  .grid-col-major{ grid-template-columns: repeat(4, 1fr); } } /* xl = 4 */

/* === Rows-Utilities (2–12) ========================================= */
/* Non-responsive */
.rows-2  { --rows-per-col: 2; }
.rows-3  { --rows-per-col: 3; }
.rows-4  { --rows-per-col: 4; }
.rows-5  { --rows-per-col: 5; }
.rows-6  { --rows-per-col: 6; }
.rows-7  { --rows-per-col: 7; }
.rows-8  { --rows-per-col: 8; }
.rows-9  { --rows-per-col: 9; }
.rows-10 { --rows-per-col: 10; }
.rows-11 { --rows-per-col: 11; }
.rows-12 { --rows-per-col: 12; }

/* Responsive (md, lg, xl) */
@media (min-width: 768px){
  .rows-md-2  { --rows-per-col: 2; }
  .rows-md-3  { --rows-per-col: 3; }
  .rows-md-4  { --rows-per-col: 4; }
  .rows-md-5  { --rows-per-col: 5; }
  .rows-md-6  { --rows-per-col: 6; }
  .rows-md-7  { --rows-per-col: 7; }
  .rows-md-8  { --rows-per-col: 8; }
  .rows-md-9  { --rows-per-col: 9; }
  .rows-md-10 { --rows-per-col: 10; }
  .rows-md-11 { --rows-per-col: 11; }
  .rows-md-12 { --rows-per-col: 12; }
}
@media (min-width: 992px){
  .rows-lg-2  { --rows-per-col: 2; }
  .rows-lg-3  { --rows-per-col: 3; }
  .rows-lg-4  { --rows-per-col: 4; }
  .rows-lg-5  { --rows-per-col: 5; }
  .rows-lg-6  { --rows-per-col: 6; }
  .rows-lg-7  { --rows-per-col: 7; }
  .rows-lg-8  { --rows-per-col: 8; }
  .rows-lg-9  { --rows-per-col: 9; }
  .rows-lg-10 { --rows-per-col: 10; }
  .rows-lg-11 { --rows-per-col: 11; }
  .rows-lg-12 { --rows-per-col: 12; }
}
@media (min-width: 1200px){
  .rows-xl-2  { --rows-per-col: 2; }
  .rows-xl-3  { --rows-per-col: 3; }
  .rows-xl-4  { --rows-per-col: 4; }
  .rows-xl-5  { --rows-per-col: 5; }
  .rows-xl-6  { --rows-per-col: 6; }
  .rows-xl-7  { --rows-per-col: 7; }
  .rows-xl-8  { --rows-per-col: 8; }
  .rows-xl-9  { --rows-per-col: 9; }
  .rows-xl-10 { --rows-per-col: 10; }
  .rows-xl-11 { --rows-per-col: 11; }
  .rows-xl-12 { --rows-per-col: 12; }
}


/* ! css-grid Steuerung */