/* ============================================================================
   BOOTSTRAP GRID SYSTEM
   
   Standalone Bootstrap-ähnliche Grid-Klassen extrahiert aus styles.css
   
   Enthält:
   - Column Klassen (.col, .col-{breakpoint}-{number})
   - Grid Utility Klassen (.grid-boost-*)
   - Order Klassen (.order-*-down-*)
   - Display Utility Klassen (.d-*-down-*)
   - Container und Grid Layout Klassen
   
   Breakpoints:
   - ss (super small): < 420px
   - xs (extra small): < 578px
   - sm (small): >= 578px
   - md (medium): >= 740px
   - lg (large): >= 992px
   - llg (extra large): >= 1200px
   - xl: >= 1400px
   - xxl: >= 1600px
   
   Hinweis: Diese Datei enthält nur reine Bootstrap Grid-Selektoren.
   Verschachtelte Selektoren (z.B. .component .col-lg-12) bleiben in styles.css.
   ============================================================================ */

/* Base column classes (no breakpoint) */
.col,
.col-1,
.col-2,
.col-3,
.col-4,
.col-5,
.col-6,
.col-7,
.col-8,
.col-9,
.col-10,
.col-11,
.col-12,
.col-auto,
/* Super small (< 420px) */
.col-ss,
.col-ss-1,
.col-ss-2,
.col-ss-3,
.col-ss-4,
.col-ss-5,
.col-ss-6,
.col-ss-7,
.col-ss-8,
.col-ss-9,
.col-ss-10,
.col-ss-11,
.col-ss-12,
.col-ss-auto,
/* Small (>= 578px) */
.col-sm,
.col-sm-1,
.col-sm-2,
.col-sm-3,
.col-sm-4,
.col-sm-5,
.col-sm-6,
.col-sm-7,
.col-sm-8,
.col-sm-9,
.col-sm-10,
.col-sm-11,
.col-sm-12,
.col-sm-auto,
/* Medium (>= 740px) */
.col-md,
.col-md-1,
.col-md-2,
.col-md-3,
.col-md-4,
.col-md-5,
.col-md-6,
.col-md-7,
.col-md-8,
.col-md-9,
.col-md-10,
.col-md-11,
.col-md-12,
.col-md-auto,
/* Large (>= 992px) */
.col-lg,
.col-lg-1,
.col-lg-2,
.col-lg-3,
.col-lg-4,
.col-lg-5,
.col-lg-6,
.col-lg-7,
.col-lg-8,
.col-lg-9,
.col-lg-10,
.col-lg-11,
.col-lg-12,
.col-lg-auto,
/* Extra Large (>= 1200px) */
.col-llg,
.col-llg-1,
.col-llg-2,
.col-llg-3,
.col-llg-4,
.col-llg-5,
.col-llg-6,
.col-llg-7,
.col-llg-8,
.col-llg-9,
.col-llg-10,
.col-llg-11,
.col-llg-12,
.col-llg-auto,
/* Extra Extra Large (>= 1400px) */
.col-xl,
.col-xl-1,
.col-xl-2,
.col-xl-3,
.col-xl-4,
.col-xl-5,
.col-xl-6,
.col-xl-7,
.col-xl-8,
.col-xl-9,
.col-xl-10,
.col-xl-11,
.col-xl-12,
.col-xl-auto,
/* Extra Extra Extra Large (>= 1600px) */
.col-xxl,
.col-xxl-1,
.col-xxl-2,
.col-xxl-3,
.col-xxl-4,
.col-xxl-5,
.col-xxl-6,
.col-xxl-7,
.col-xxl-8,
.col-xxl-9,
.col-xxl-10,
.col-xxl-11,
.col-xxl-12,
.col-xxl-auto {
  position: relative;
  width: 100%;
  padding-right: 0.875rem;
  padding-left: 0.875rem;
}

.main-full-width,
.container-full-width,
.content-container {
  --bs-gutter-x: 1.5rem;
  --bs-gutter-y: 0;

  padding-right: calc(var(--bs-gutter-x) * 0.5);
  padding-left: calc(var(--bs-gutter-x) * 0.5);
  margin-right: auto;
  margin-left: auto;
  position: relative;
  width: 100%;
}

.container-full-width {
  width: 100vw;
}

.main-full-width {
  width: 100%;
}

.main-full-width> :first-child {
  margin-top: 2.5rem;
}

.container-full-width {
  margin-left: -0.875rem;
  margin-right: -0.875rem;
}

@media (min-width: 66.875rem) {
  .container-full-width {
    margin-left: calc((66.875rem - 100vw) / 2);
    margin-right: calc((66.875rem - 100vw) / 2);
  }
}

.container-full-width.gradient-jumo-gray,
.container-full-width.gray {
  padding-top: 3rem;
  padding-bottom: 3rem;
  margin-top: 3rem;
  margin-bottom: 3rem;
}

.container-full-width.gradient-jumo-gray> :first-child,
.container-full-width.gray> :first-child {
  margin-top: 0;
}

.container-full-width.gradient-jumo-gray> :last-child,
.container-full-width.gray> :last-child {
  margin-bottom: 0;
}

.container-full-width.gray {
  background-color: #ECEFF1;
}

.main-grid,
.inner-grid,
.container-grid,
.content-grid {
  --bs-gutter-x: 1.75rem;
  --bs-gutter-y: 0;

  display: flex;
  flex-wrap: wrap;
  margin-top: calc(-1 * var(--bs-gutter-y));
  margin-right: calc(-0.5 * var(--bs-gutter-x));
  margin-left: calc(-0.5 * var(--bs-gutter-x));
  justify-content: center;
  position: relative;
  max-width: 66.875rem;
}

.main-grid.a-left,
.inner-grid.a-left,
.container-grid.a-left,
.content-grid.a-left {
  justify-content: flex-start;
}

.main-grid,
.container-grid,
.content-grid {
  margin-left: auto;
  margin-right: auto;
}

.container-grid {
  flex-shrink: 0;
  width: 100%;
  max-width: 100%;
  margin-top: var(--bs-gutter-y);
  padding-left: 0;
  padding-right: 0;
}

main:has(.section) {
  max-width: 100% !important;
}

main>.section {
  --bs-gutter-x: 1.5rem;
  --bs-gutter-y: 0;

  margin: 0 auto 0;
}

main>.section.stage-container {
   margin-top: 0;
}

main>.section.col-small>div {
  flex-shrink: 0;
  width: 100%;
  max-width: 100%;
  margin-top: var(--bs-gutter-y);
  padding-right: calc(var(--bs-gutter-x) * 0.5);
  padding-left: calc(var(--bs-gutter-x) * 0.5);
}

@media (min-width: 740px) {
  main>.section.col-small>div {
    flex: 0 0 auto;
    width: 83.33333333%;
  }
}

@media (min-width: 992px) {
  main>.section.col-small>div {
    flex: 0 0 auto;
    width: 66.66666667%;
    max-width: 44.5833333356rem;
  }
}

.col-standard {
  flex-shrink: 0;
  width: 100%;
  max-width: 100%;
  padding-right: calc(var(--bs-gutter-x) * 0.5);
  padding-left: calc(var(--bs-gutter-x) * 0.5);
  margin-top: var(--bs-gutter-y);
}

@media (min-width: 740px) {
  .col-standard {
    flex: 0 0 auto;
    width: 83.33333333%;
  }
}

@media (min-width: 992px) {
  .col-standard {
    flex: 0 0 auto;
    width: 66.66666667%;
  }
}

.col-standard-slim {
  flex-shrink: 0;
  width: 100%;
  max-width: 100%;
  padding-right: calc(var(--bs-gutter-x) * 0.5);
  padding-left: calc(var(--bs-gutter-x) * 0.5);
  margin-top: var(--bs-gutter-y);
}

/* Base classes (no media queries) */
.grid-boost-xs-4 {
  margin-left: calc(((100% - 5.25rem) * 12 / 4 + 21rem - 100%) * -0.5);
  margin-right: calc(((100% - 5.25rem) * 12 / 4 + 21rem - 100%) * -0.5);
}

.grid-boost-xs-5 {
  margin-left: calc(((100% - 7rem) * 12 / 5 + 21rem - 100%) * -0.5);
  margin-right: calc(((100% - 7rem) * 12 / 5 + 21rem - 100%) * -0.5);
}

.grid-boost-xs-6 {
  margin-left: calc(((100% - 8.75rem) * 12 / 6 + 21rem - 100%) * -0.5);
  margin-right: calc(((100% - 8.75rem) * 12 / 6 + 21rem - 100%) * -0.5);
}

.grid-boost-xs-7 {
  margin-left: calc(((100% - 10.5rem) * 12 / 7 + 21rem - 100%) * -0.5);
  margin-right: calc(((100% - 10.5rem) * 12 / 7 + 21rem - 100%) * -0.5);
}

.grid-boost-xs-8 {
  margin-left: calc(((100% - 12.25rem) * 12 / 8 + 21rem - 100%) * -0.5);
  margin-right: calc(((100% - 12.25rem) * 12 / 8 + 21rem - 100%) * -0.5);
}

.grid-boost-xs-9 {
  margin-left: calc(((100% - 14rem) * 12 / 9 + 21rem - 100%) * -0.5);
  margin-right: calc(((100% - 14rem) * 12 / 9 + 21rem - 100%) * -0.5);
}

.grid-boost-xs-10 {
  margin-left: calc(((100% - 15.75rem) * 12 / 10 + 21rem - 100%) * -0.5);
  margin-right: calc(((100% - 15.75rem) * 12 / 10 + 21rem - 100%) * -0.5);
}

.grid-boost-xs-11 {
  margin-left: calc(((100% - 17.5rem) * 12 / 11 + 21rem - 100%) * -0.5);
  margin-right: calc(((100% - 17.5rem) * 12 / 11 + 21rem - 100%) * -0.5);
}

.col-12 {
  flex: 0 0 100%;
  max-width: 100%;
}

.order-0 {
  order: 0;
}

.order-1 {
  order: 1;
}

.order-2 {
  order: 2;
}

.order-3 {
  order: 3;
}

.order-4 {
  order: 4;
}

.order-5 {
  order: 5;
}

.order-6 {
  order: 6;
}

.order-7 {
  order: 7;
}

.order-8 {
  order: 8;
}

.order-9 {
  order: 9;
}

.order-10 {
  order: 10;
}

.order-11 {
  order: 11;
}

.order-12 {
  order: 12;
}

.order-xs-down-0,
.order-xs-down-1,
.order-xs-down-2,
.order-xs-down-3,
.order-xs-down-4,
.order-xs-down-5,
.order-xs-down-6,
.order-xs-down-7,
.order-xs-down-8,
.order-xs-down-9,
.order-xs-down-10,
.order-xs-down-11,
.order-xs-down-12 {
  order: var(--order-xs-down);
}

.order-xs-down-0 { order: 0; }
.order-xs-down-1 { order: 1; }
.order-xs-down-2 { order: 2; }
.order-xs-down-3 { order: 3; }
.order-xs-down-4 { order: 4; }
.order-xs-down-5 { order: 5; }
.order-xs-down-6 { order: 6; }
.order-xs-down-7 { order: 7; }
.order-xs-down-8 { order: 8; }
.order-xs-down-9 { order: 9; }
.order-xs-down-10 { order: 10; }
.order-xs-down-11 { order: 11; }
.order-xs-down-12 { order: 12; }

.d-xs-down-none {
  display: none;
}

.d-xs-down-block {
  display: block;
}

.d-xs-down-flex {
  display: flex;
}

.d-xs-down-inline-block {
  display: inline-block;
}

.d-xs-down-inline {
  display: inline;
}

/* ============================================================================
   MEDIA QUERIES - MOBILE FIRST ORDER
   ============================================================================ */

/* --- Super Small: min-width 420px (ss breakpoint) --- */
@media (min-width: 420px) {
  .grid-boost-ss-4 {
    margin-left: calc(((100% - 5.25rem) * 12 / 4 + 21rem - 100%) * -0.5);
    margin-right: calc(((100% - 5.25rem) * 12 / 4 + 21rem - 100%) * -0.5);
  }

  .grid-boost-ss-5 {
    margin-left: calc(((100% - 7rem) * 12 / 5 + 21rem - 100%) * -0.5);
    margin-right: calc(((100% - 7rem) * 12 / 5 + 21rem - 100%) * -0.5);
  }

  .grid-boost-ss-6 {
    margin-left: calc(((100% - 8.75rem) * 12 / 6 + 21rem - 100%) * -0.5);
    margin-right: calc(((100% - 8.75rem) * 12 / 6 + 21rem - 100%) * -0.5);
  }

  .grid-boost-ss-7 {
    margin-left: calc(((100% - 10.5rem) * 12 / 7 + 21rem - 100%) * -0.5);
    margin-right: calc(((100% - 10.5rem) * 12 / 7 + 21rem - 100%) * -0.5);
  }

  .grid-boost-ss-8 {
    margin-left: calc(((100% - 12.25rem) * 12 / 8 + 21rem - 100%) * -0.5);
    margin-right: calc(((100% - 12.25rem) * 12 / 8 + 21rem - 100%) * -0.5);
  }

  .grid-boost-ss-9 {
    margin-left: calc(((100% - 14rem) * 12 / 9 + 21rem - 100%) * -0.5);
    margin-right: calc(((100% - 14rem) * 12 / 9 + 21rem - 100%) * -0.5);
  }

  .grid-boost-ss-10 {
    margin-left: calc(((100% - 15.75rem) * 12 / 10 + 21rem - 100%) * -0.5);
    margin-right: calc(((100% - 15.75rem) * 12 / 10 + 21rem - 100%) * -0.5);
  }

  .grid-boost-ss-11 {
    margin-left: calc(((100% - 17.5rem) * 12 / 11 + 21rem - 100%) * -0.5);
    margin-right: calc(((100% - 17.5rem) * 12 / 11 + 21rem - 100%) * -0.5);
  }
}

/* --- Super Small Down: max-width 419.98px (ss-down breakpoint) --- */
@media (max-width: 419.98px) {
  .order-ss-down-0 {
    order: 0;
  }

  .d-ss-down-none {
    display: none;
  }

  .d-ss-down-block {
    display: block;
  }

  .d-ss-down-flex {
    display: flex;
  }

  .d-ss-down-inline-block {
    display: inline-block;
  }

  .d-ss-down-inline {
    display: inline;
  }
}

/* --- Small: min-width 578px (sm breakpoint) --- */
@media (min-width: 578px) {
  .col-sm-1 { flex: 0 0 8.33333333%; max-width: 8.33333333%; }
  .col-sm-2 { flex: 0 0 16.66666667%; max-width: 16.66666667%; }
  .col-sm-3 { flex: 0 0 25%; max-width: 25%; }
  .col-sm-4 { flex: 0 0 33.33333333%; max-width: 33.33333333%; }
  .col-sm-5 { flex: 0 0 41.66666667%; max-width: 41.66666667%; }
  .col-sm-6 { flex: 0 0 50%; max-width: 50%; }
  .col-sm-7 { flex: 0 0 58.33333333%; max-width: 58.33333333%; }
  .col-sm-8 { flex: 0 0 66.66666667%; max-width: 66.66666667%; }
  .col-sm-9 { flex: 0 0 75%; max-width: 75%; }
  .col-sm-10 { flex: 0 0 83.33333333%; max-width: 83.33333333%; }
  .col-sm-11 { flex: 0 0 91.66666667%; max-width: 91.66666667%; }
  .col-sm-12 { flex: 0 0 100%; max-width: 100%; }

  .offset-sm-2 {
    margin-left: 16.66666667%;
  }

  .order-sm-0 { order: 0; }
  .order-sm-1 { order: 1; }
  .order-sm-2 { order: 2; }
  .order-sm-3 { order: 3; }
  .order-sm-4 { order: 4; }
  .order-sm-5 { order: 5; }
  .order-sm-6 { order: 6; }
  .order-sm-7 { order: 7; }
  .order-sm-8 { order: 8; }
  .order-sm-9 { order: 9; }
  .order-sm-10 { order: 10; }
  .order-sm-11 { order: 11; }
  .order-sm-12 { order: 12; }
}

/* --- Medium: min-width 740px (md breakpoint) --- */
@media (min-width: 740px) {
  .col-md-1 { flex: 0 0 8.33333333%; max-width: 8.33333333%; }
  .col-md-2 { flex: 0 0 16.66666667%; max-width: 16.66666667%; }
  .col-md-3 { flex: 0 0 25%; max-width: 25%; }
  .col-md-4 { flex: 0 0 33.33333333%; max-width: 33.33333333%; }
  .col-md-5 { flex: 0 0 41.66666667%; max-width: 41.66666667%; }
  .col-md-6 { flex: 0 0 50%; max-width: 50%; }
  .col-md-7 { flex: 0 0 58.33333333%; max-width: 58.33333333%; }
  .col-md-8 { flex: 0 0 66.66666667%; max-width: 66.66666667%; }
  .col-md-9 { flex: 0 0 75%; max-width: 75%; }
  .col-md-10 { flex: 0 0 83.33333333%; max-width: 83.33333333%; }
  .col-md-11 { flex: 0 0 91.66666667%; max-width: 91.66666667%; }
  .col-md-12 { flex: 0 0 100%; max-width: 100%; }

  .offset-md-7 {
    margin-left: 58.33333333%;
  }

  .order-md-0 { order: 0; }
  .order-md-1 { order: 1; }
  .order-md-2 { order: 2; }
  .order-md-3 { order: 3; }
  .order-md-4 { order: 4; }
  .order-md-5 { order: 5; }
  .order-md-6 { order: 6; }
  .order-md-7 { order: 7; }
  .order-md-8 { order: 8; }
  .order-md-9 { order: 9; }
  .order-md-10 { order: 10; }
  .order-md-11 { order: 11; }
  .order-md-12 { order: 12; }
}

/* --- Large: min-width 992px (lg breakpoint) --- */
@media (min-width: 992px) {
  .col-lg-1 { flex: 0 0 8.33333333%; max-width: 8.33333333%; }
  .col-lg-2 { flex: 0 0 16.66666667%; max-width: 16.66666667%; }
  .col-lg-3 { flex: 0 0 25%; max-width: 25%; }
  .col-lg-4 { flex: 0 0 33.33333333%; max-width: 33.33333333%; }
  .col-lg-5 { flex: 0 0 41.66666667%; max-width: 41.66666667%; }
  .col-lg-6 { flex: 0 0 50%; max-width: 50%; }
  .col-lg-7 { flex: 0 0 58.33333333%; max-width: 58.33333333%; }
  .col-lg-8 { flex: 0 0 66.66666667%; max-width: 66.66666667%; }
  .col-lg-9 { flex: 0 0 75%; max-width: 75%; }
  .col-lg-10 { flex: 0 0 83.33333333%; max-width: 83.33333333%; }
  .col-lg-11 { flex: 0 0 91.66666667%; max-width: 91.66666667%; }
  .col-lg-12 { flex: 0 0 100%; max-width: 100%; }

  .offset-lg-8 {
    margin-left: 66.66666667%;
  }

  .order-lg-0 { order: 0; }
  .order-lg-1 { order: 1; }
  .order-lg-2 { order: 2; }
  .order-lg-3 { order: 3; }
  .order-lg-4 { order: 4; }
  .order-lg-5 { order: 5; }
  .order-lg-6 { order: 6; }
  .order-lg-7 { order: 7; }
  .order-lg-8 { order: 8; }
  .order-lg-9 { order: 9; }
  .order-lg-10 { order: 10; }
  .order-lg-11 { order: 11; }
  .order-lg-12 { order: 12; }
}

/* --- Extra Large: min-width 66.875rem = 1070px (llg breakpoint) --- */
@media (min-width: 66.875rem) {
  .container-full-width {
    margin-left: calc((66.875rem - 100vw) / 2);
    margin-right: calc((66.875rem - 100vw) / 2);
  }

  .order-llg-0 { order: 0; }
  .order-llg-1 { order: 1; }
  .order-llg-2 { order: 2; }
  .order-llg-3 { order: 3; }
  .order-llg-4 { order: 4; }
  .order-llg-5 { order: 5; }
  .order-llg-6 { order: 6; }
  .order-llg-7 { order: 7; }
  .order-llg-8 { order: 8; }
  .order-llg-9 { order: 9; }
  .order-llg-10 { order: 10; }
  .order-llg-11 { order: 11; }
  .order-llg-12 { order: 12; }
}