/* ====================================================
   Grid — 12 Spalten, Mobile-first

   Breakpoints:
     xs  :  < 576px   (Standard, kein Media Query)
     sm  :  ≥  576px
     md  :  ≥  768px
     lg  :  ≥  992px
     xl  :  ≥ 1200px

   Spalten-Klassen nutzen grid-column-end: span N,
   damit .col-* und .col-start-* kombinierbar bleiben.
   ==================================================== */

/* ===== Variablen ===== */

:root {
    --col-gap : 1.5rem;
}


/* ===== Row (Grid-Container) ===== */

/* Setzt das 12-Spalten-Layout auf .row.
   Modifier-Klassen (.grid-2, .grid-3 etc. aus layout.css)
   überschreiben grid-template-columns durch höhere Spezifität. */
.row {
    grid-template-columns : repeat(12, 1fr);
    gap                   : var(--col-gap);
}

.grid, .row {
    display        : grid;
    container-type : inline-size;
}

/* Gap-Varianten */
.row.gap-0   { gap : 0; }
.row.gap-xs  { gap : 0.5rem; }
.row.gap-sm  { gap : 0.75rem; }
.row.gap-lg  { gap : 2.5rem; }
.row.gap-xl  { gap : 4rem; }

/* Selektiv: nur Row-Gap oder nur Column-Gap entfernen */
.row.no-row-gap { row-gap    : 0; }
.row.no-col-gap { column-gap : 0; }

/* Alignment auf dem Container */
.row.align-start   { align-items : start; }
.row.align-center  { align-items : center; }
.row.align-end     { align-items : end; }
.row.align-stretch { align-items : stretch; }

/* Presets */
.cols-2 { grid-template-columns : 1fr 1fr; }
.cols-3 { grid-template-columns : 1fr 1fr 1fr; }
.cols-4 { grid-template-columns : 1fr 1fr 1fr 1fr; }
.cols-xs-1 { grid-template-columns : 1fr; }
.cols-12 { grid-template-columns : 1fr; }


/* ===== Spalten — xs (Standard, kein Media Query) ===== */

.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; }

/* Natürliche Auto-Breite (1 implizite Spalte, Grid-Platzierung übernimmt) */
.col-auto { grid-column : auto; }


/* ===== Offset — Startposition ===== */
/* Kombinierbar mit .col-*: <div class="col-6 col-start-4"> */

.col-start-1  { grid-column-start : 1; }
.col-start-2  { grid-column-start : 2; }
.col-start-3  { grid-column-start : 3; }
.col-start-4  { grid-column-start : 4; }
.col-start-5  { grid-column-start : 5; }
.col-start-6  { grid-column-start : 6; }
.col-start-7  { grid-column-start : 7; }
.col-start-8  { grid-column-start : 8; }
.col-start-9  { grid-column-start : 9; }
.col-start-10 { grid-column-start : 10; }
.col-start-11 { grid-column-start : 11; }
.col-start-12 { grid-column-start : 12; }


/* ===== Row Span (Zeilen überbrücken) ===== */

.row-span-2 { grid-row : span 2; }
.row-span-3 { grid-row : span 3; }
.row-span-4 { grid-row : span 4; }


/* ===== Alignment auf einzelnen Spalten ===== */

.align-self-start   { align-self : start; }
.align-self-center  { align-self : center; }
.align-self-end     { align-self : end; }
.align-self-stretch { align-self : stretch; }

.justify-self-start   { justify-self : start; }
.justify-self-center  { justify-self : center; }
.justify-self-end     { justify-self : end; }
.justify-self-stretch { justify-self : stretch; }


/* ===== Reihenfolge ===== */

.order-first { order : -1; }
.order-last  { order : 999; }


/* ===== Text-Ausrichtung — xs (Standard) ===== */

.text-center-xs { text-align : center; }
.text-left-xs   { text-align : left; }
.text-right-xs  { text-align : right; }


/* ===== Sichtbarkeit — Basis ===== */

/* show-*: standardmäßig versteckt, sichtbar ab dem jeweiligen Breakpoint */
.show-sm,
.show-md,
.show-lg,
.show-xl {
    display : none;
}

/* hide-xs: nur auf xs versteckt; ab sm wieder sichtbar (siehe sm-Block) */
.hide-xs { display : none; }


/* ===== sm — min-width: 576px ===== */

@media (min-width : 576px) {
    /* Presets */
    .cols-sm-1 { grid-template-columns : 1fr; }
    .cols-sm-2 { grid-template-columns : 1fr 1fr; }
    .cols-sm-6 { grid-template-columns : 1fr 1fr; }

    /* Spalten */
    .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-sm-auto { grid-column : auto; }

    /* Sichtbarkeit */
    .hide-sm { display : none !important; }
    .show-sm { display : revert !important; }
    .show-xs { display : none !important; }
    .hide-xs { display : revert !important; }

    /* Reihenfolge */
    .order-sm-first { order : -1; }
    .order-sm-last  { order : 999; }

    /* Text */
    .text-center-sm { text-align : center; }
    .text-left-sm   { text-align : left; }
    .text-right-sm  { text-align : right; }
}


/* ===== md — min-width: 768px ===== */

@media (min-width : 768px) {
    /* Presets */
    .cols-md-3 { grid-template-columns : 4fr 4fr 4fr; }

    /* Spalten */
    .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-md-auto { grid-column : auto; }

    /* Sichtbarkeit */
    .hide-md { display : none !important; }
    .show-md { display : revert !important; }

    /* Reihenfolge */
    .order-md-first { order : -1; }
    .order-md-last  { order : 999; }

    /* Text */
    .text-center-md { text-align : center; }
    .text-left-md   { text-align : left; }
    .text-right-md  { text-align : right; }
}


/* ===== lg — min-width: 992px ===== */

@media (min-width : 992px) {
    /* Presets */
    .cols-lg-3 { grid-template-columns : 4fr 4fr 4fr; }

    /* Spalten */
    .col-lg-1    { grid-column-end : span 1; }
    .col-lg-2    { grid-column-end : span 2; }
    .col-lg-3    { grid-column-end : span 3; }
    .col-lg-4    { grid-column-end : span 4; }
    .col-lg-5    { grid-column-end : span 5; }
    .col-lg-6    { grid-column-end : span 6; }
    .col-lg-7    { grid-column-end : span 7; }
    .col-lg-8    { grid-column-end : span 8; }
    .col-lg-9    { grid-column-end : span 9; }
    .col-lg-10   { grid-column-end : span 10; }
    .col-lg-11   { grid-column-end : span 11; }
    .col-lg-12   { grid-column-end : span 12; }
    .col-lg-auto { grid-column : auto; }

    /* Sichtbarkeit */
    .hide-lg { display : none !important; }
    .show-lg { display : revert !important; }

    /* Reihenfolge */
    .order-lg-first { order : -1; }
    .order-lg-last  { order : 999; }

    /* Text */
    .text-center-lg { text-align : center; }
    .text-left-lg   { text-align : left; }
    .text-right-lg  { text-align : right; }
}


/* ===== xl — min-width: 1200px ===== */

@media (min-width : 1200px) {
    /* Spalten */
    .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; }
    .col-xl-auto { grid-column : auto; }

    /* Sichtbarkeit */
    .hide-xl { display : none !important; }
    .show-xl { display : revert !important; }

    /* Reihenfolge */
    .order-xl-first { order : -1; }
    .order-xl-last  { order : 999; }

    /* Text */
    .text-center-xl { text-align : center; }
    .text-left-xl   { text-align : left; }
    .text-right-xl  { text-align : right; }
}