/**
 * IDS Basic Layout – Grid (Flexbox)
 * Klassen aus Resources/Private/Grid/Bootstrap4_5.json
 * sowie .grid-row / .grid-col aus den Fluid-Templates.
 */
:root {
  --ibl-grid-gutter: 1.5rem;
}

.grid-container,
.ge-container {
  width: 100%;
  box-sizing: border-box;
}

.grid-container.ge-container {
  padding-bottom: 2.5rem;
}

/* Container-CType (Wrapper) */
.container {
  width: 100%;
  max-width: 1200px;
  margin-left: auto;
  margin-right: auto;
  padding-left: 1rem;
  padding-right: 1rem;
  box-sizing: border-box;
}

.container-fluid {
  width: 100%;
  max-width: none;
  padding-left: 1rem;
  padding-right: 1rem;
  box-sizing: border-box;
}

.row,
.grid-row {
  display: flex;
  flex-wrap: wrap;
  box-sizing: border-box;
  margin-left: calc(var(--ibl-grid-gutter) / -2);
  margin-right: calc(var(--ibl-grid-gutter) / -2);
}

/* Nur direkte Spalten – kein globales [class*="col"] */
.grid-col,
.row > [class*="col"],
.grid-row > [class*="col"] {
  position: relative;
  width: 100%;
  box-sizing: border-box;
  padding-left: calc(var(--ibl-grid-gutter) / 2);
  padding-right: calc(var(--ibl-grid-gutter) / 2);
}

/* Mobile / Default: volle Breite */
.col,
.col-12,
.col-sm-6,
.col-md-4,
.col-md-6,
.col-lg,
.col-lg-2,
.col-lg-3,
.col-lg-4,
.col-lg-6,
.col-lg-8,
.col-lg-9 {
  flex: 0 0 100%;
  max-width: 100%;
}

/* sm ≥576px */
@media (min-width: 576px) {
  .col-sm-6 {
    flex: 0 0 50%;
    max-width: 50%;
  }
}

/* md ≥768px */
@media (min-width: 768px) {
  .col-md-4 {
    flex: 0 0 33.333333%;
    max-width: 33.333333%;
  }

  .col-md-6 {
    flex: 0 0 50%;
    max-width: 50%;
  }
}

/* lg ≥992px – Ratio-Klassen überschreiben .col-12 aus dem Mobile-Default */
@media (min-width: 992px) {
  .col,
  .col-lg {
    flex: 1 0 0%;
    max-width: 100%;
  }

  .col-lg-2 {
    flex: 0 0 16.666667%;
    max-width: 16.666667%;
  }

  .col-lg-3 {
    flex: 0 0 25%;
    max-width: 25%;
  }

  .col-lg-4 {
    flex: 0 0 33.333333%;
    max-width: 33.333333%;
  }

  .col-lg-6 {
    flex: 0 0 50%;
    max-width: 50%;
  }

  .col-lg-8 {
    flex: 0 0 66.666667%;
    max-width: 66.666667%;
  }

  .col-lg-9 {
    flex: 0 0 75%;
    max-width: 75%;
  }

  /* Nur .grid-col ohne Ratio-Klasse → gleichmäßig aufteilen */
  .grid-row > .grid-col:not([class*="col-lg-"]):not([class*="col-md-"]):not([class*="col-sm-"]):not(.col-12):not(.col) {
    flex: 1 1 0;
    max-width: none;
  }
}

/* Leere Spalten behalten ihre Breite als Platzhalter */
.grid-col--empty {
  min-width: 0;
}