/* ================================================================
   NEW GRID 2.0
   ================================================================

   Gültige Spaltenbreiten:
   288px  = 1 Slot  (16px + 288px + 16px = 320px)
   608px  = 2 Slots (16px + 608px + 16px = 640px)
   928px  = 3 Slots (16px + 928px + 16px = 960px)
   1248px = 4 Slots (16px + 1248px + 16px = 1280px)

   128px  = kleiner Slot (für 6- und 8-Spalten)

   Wrapper-Snaps: 320px | 640px | 960px | 1280px

   ================================================================
   LAYOUT-ÜBERSICHT
   ================================================================

   1 Spalte
   └─ .bk1col-wrapper / .bk1
      Immer volle Breite, max. 1280px.

   2 Spalten  1:1
   └─ .bk11col-wrapper / .bk11_1 · .bk11_2
      < 640px:  gestapelt    · je 288px
      ≥ 640px:  nebeneinander · je 288px  (Wrapper 640px)
      ≥ 1280px: nebeneinander · je 608px  (Wrapper 1280px)

   3 Spalten  1:1:1
   └─ .bk111col-wrapper / .bk111_1 · .bk111_2 · .bk111_3
      < 640px:  gestapelt    · je 288px
      ≥ 640px:  2 + 1        · je 288px  (Wrapper 640px)
      ≥ 960px:  nebeneinander · je 288px  (Wrapper 960px — Max)

   4 Spalten  1:1:1:1
   └─ .bk1111col-wrapper / .bk1111_1–.bk1111_4
      < 640px:  gestapelt    · je 288px
      ≥ 640px:  2 × 2        · je 288px  (Wrapper 640px)
      ≥ 1280px: nebeneinander · je 288px  (Wrapper 1280px)

   2:1  (groß links, klein rechts)
   └─ .bk21col-wrapper / .bk21_1 .bk21_3 … (groß) · .bk21_2 .bk21_4 … (klein)
      < 960px:  gestapelt    · je 288px
      ≥ 960px:  nebeneinander · 608px + 288px  (Wrapper 960px)
      ≥ 1280px: nebeneinander · 928px + 288px  (Wrapper 1280px)

   1:2  (klein links, groß rechts)
   └─ .bk12col-wrapper / .bk12_1 .bk12_3 … (klein) · .bk12_2 .bk12_4 … (groß)
      < 960px:  gestapelt    · je 288px
      ≥ 960px:  nebeneinander · 288px + 608px  (Wrapper 960px)
      ≥ 1280px: nebeneinander · 288px + 928px  (Wrapper 1280px)

   6 Spalten  1:1:1:1:1:1
   └─ .bk111111col-wrapper / .bk111111_1–.bk111111_6
      < 320px:  1 Spalte     · 128px
      ≥ 320px:  2 Spalten    · je 128px  (Wrapper 320px)
      ≥ 640px:  4 Spalten    · je 128px  (Wrapper 640px)
      ≥ 960px:  6 Spalten    · je 128px  (Wrapper 960px — Max)

   8 Spalten  1:1:1:1:1:1:1:1
   └─ .bk11111111col-wrapper / .bk11111111_1–.bk11111111_8
      < 320px:  1 Spalte     · 128px
      ≥ 320px:  2 Spalten    · je 128px  (Wrapper 320px)
      ≥ 640px:  4 Spalten    · je 128px  (Wrapper 640px)
      ≥ 1280px: 8 Spalten    · je 128px  (Wrapper 1280px)

   ================================================================ */


/* ================================================================
   BILDER — globale Grundregel
   ================================================================ */

img {
  max-width: 100%;
  height: auto;
}


/* ================================================================
   SPACER — Vielfache von 16px
   ================================================================ */

.spacer1top    { padding-top:    16px !important; }
.spacer2top    { padding-top:    32px !important; }
.spacer3top    { padding-top:    48px !important; }
.spacer4top    { padding-top:    64px !important; }
.spacer5top    { padding-top:    80px !important; }
.spacer6top    { padding-top:    96px !important; }

.spacer1bottom { padding-bottom: 16px !important; }
.spacer2bottom { padding-bottom: 32px !important; }
.spacer3bottom { padding-bottom: 48px !important; }
.spacer4bottom { padding-bottom: 64px !important; }
.spacer5bottom { padding-bottom: 80px !important; }
.spacer6bottom { padding-bottom: 96px !important; }

hr.spacer1top,    hr.spacer2top,    hr.spacer3top,
hr.spacer4top,    hr.spacer5top,    hr.spacer6top,
hr.spacer1bottom, hr.spacer2bottom, hr.spacer3bottom,
hr.spacer4bottom, hr.spacer5bottom, hr.spacer6bottom {
  color: transparent;
  border: 0;
}


/* ================================================================
   CLEARFIX — für alle Float-Wrapper
   ================================================================ */

.bk1col-wrapper::after,
.bk11col-wrapper::after,
.bk111col-wrapper::after,
.bk1111col-wrapper::after,
.bk21col-wrapper::after,
.bk12col-wrapper::after,
.bk111111col-wrapper::after,
.bk11111111col-wrapper::after {
  content: "";
  display: table;
  clear: both;
}


/* ================================================================
   1 SPALTE
   ================================================================ */

.bk1col-wrapper {
  width: 100%;
  max-width: 1280px;
  margin-right: auto;
  margin-left: auto;
  clear: both;
}

.bk1 {
  max-width: 100%;
  margin-right: 16px;
  margin-left: 16px;
}


/* ================================================================
   2 SPALTEN  1:1
   ================================================================ */

.bk11col-wrapper {
  width: 320px;
  margin-right: auto;
  margin-left: auto;
  clear: both;
}

@media (min-width: 640px) {
  .bk11col-wrapper {
    width: 640px;
  }
}

@media (min-width: 1280px) {
  .bk11col-wrapper {
    width: 1280px;
  }
}

.bk11_1,
.bk11_2 {
  width: 288px;
  margin-right: 16px;
  margin-left: 16px;
  float: left;
}

@media (min-width: 1280px) {
  .bk11_1,
  .bk11_2 {
    width: 608px;
  }
}


/* ================================================================
   3 SPALTEN  1:1:1
   ================================================================ */

.bk111col-wrapper {
  width: 320px;
  margin-right: auto;
  margin-left: auto;
  clear: both;
}

@media (min-width: 640px) {
  .bk111col-wrapper {
    width: 640px;
  }
}

@media (min-width: 960px) {
  .bk111col-wrapper {
    width: 960px;
    /* Max — 3-Spalten-Layout wächst nicht über 960px */
  }
}

.bk111_1,
.bk111_2,
.bk111_3 {
  width: 288px;
  margin-right: 16px;
  margin-left: 16px;
  float: left;
  /* Breite bleibt immer 288px — egal bei welchem Wrapper-Snap */
}


/* ================================================================
   4 SPALTEN  1:1:1:1
   ================================================================ */

.bk1111col-wrapper {
  width: 320px;
  margin-right: auto;
  margin-left: auto;
  clear: both;
}

@media (min-width: 640px) {
  .bk1111col-wrapper {
    width: 640px;   /* → 2 × 2 Gitter */
  }
}

@media (min-width: 1280px) {
  .bk1111col-wrapper {
    width: 1280px;  /* → 4 nebeneinander */
  }
}

.bk1111_1,
.bk1111_2,
.bk1111_3,
.bk1111_4 {
  width: 288px;
  margin-right: 16px;
  margin-left: 16px;
  float: left;
  /* Breite bleibt immer 288px — Wrapper bestimmt wie viele passen */
}


/* ================================================================
   2:1  (groß links, klein rechts)
   ================================================================ */

.bk21col-wrapper {
  width: 320px;
  margin-right: auto;
  margin-left: auto;
  clear: both;
}

@media (min-width: 960px) {
  .bk21col-wrapper {
    width: 960px;
  }
}

@media (min-width: 1280px) {
  .bk21col-wrapper {
    width: 1280px;
  }
}

.bk21col-wrapper img {
  max-width: 100%;
  height: auto;
}

/* Ungerade = groß */
.bk21col-wrapper .bk21_1,
.bk21col-wrapper .bk21_3,
.bk21col-wrapper .bk21_5,
.bk21col-wrapper .bk21_7,
.bk21col-wrapper .bk21_9,
.bk21col-wrapper .bk21_11,
.bk21col-wrapper .bk21_13,
.bk21col-wrapper .bk21_15,
.bk21col-wrapper .bk21_17,
.bk21col-wrapper .bk21_19 {
  width: 288px;     /* gestapelt */
  margin-right: 16px;
  margin-left: 16px;
  float: left;
}

@media (min-width: 960px) {
  .bk21col-wrapper .bk21_1,
  .bk21col-wrapper .bk21_3,
  .bk21col-wrapper .bk21_5,
  .bk21col-wrapper .bk21_7,
  .bk21col-wrapper .bk21_9,
  .bk21col-wrapper .bk21_11,
  .bk21col-wrapper .bk21_13,
  .bk21col-wrapper .bk21_15,
  .bk21col-wrapper .bk21_17,
  .bk21col-wrapper .bk21_19 {
    width: 608px;   /* 2 Slots */
  }
}

@media (min-width: 1280px) {
  .bk21col-wrapper .bk21_1,
  .bk21col-wrapper .bk21_3,
  .bk21col-wrapper .bk21_5,
  .bk21col-wrapper .bk21_7,
  .bk21col-wrapper .bk21_9,
  .bk21col-wrapper .bk21_11,
  .bk21col-wrapper .bk21_13,
  .bk21col-wrapper .bk21_15,
  .bk21col-wrapper .bk21_17,
  .bk21col-wrapper .bk21_19 {
    width: 928px;   /* 3 Slots */
  }
}

/* Gerade = klein */
.bk21col-wrapper .bk21_2,
.bk21col-wrapper .bk21_4,
.bk21col-wrapper .bk21_6,
.bk21col-wrapper .bk21_8,
.bk21col-wrapper .bk21_10,
.bk21col-wrapper .bk21_12,
.bk21col-wrapper .bk21_14,
.bk21col-wrapper .bk21_16,
.bk21col-wrapper .bk21_18,
.bk21col-wrapper .bk21_20 {
  width: 288px;     /* 1 Slot — ändert sich nie */
  margin-right: 16px;
  margin-left: 16px;
  float: left;
}


/* ================================================================
   1:2  (klein links, groß rechts)
   ================================================================ */

.bk12col-wrapper {
  width: 320px;
  margin-right: auto;
  margin-left: auto;
  clear: both;
}

@media (min-width: 960px) {
  .bk12col-wrapper {
    width: 960px;
  }
}

@media (min-width: 1280px) {
  .bk12col-wrapper {
    width: 1280px;
  }
}

.bk12col-wrapper img {
  max-width: 100%;
  height: auto;
}

/* Ungerade = klein */
.bk12col-wrapper .bk12_1,
.bk12col-wrapper .bk12_3,
.bk12col-wrapper .bk12_5,
.bk12col-wrapper .bk12_7,
.bk12col-wrapper .bk12_9,
.bk12col-wrapper .bk12_11,
.bk12col-wrapper .bk12_13,
.bk12col-wrapper .bk12_15,
.bk12col-wrapper .bk12_17,
.bk12col-wrapper .bk12_19 {
  width: 288px;     /* 1 Slot — ändert sich nie */
  margin-right: 16px;
  margin-left: 16px;
  float: left;
}

/* Gerade = groß */
.bk12col-wrapper .bk12_2,
.bk12col-wrapper .bk12_4,
.bk12col-wrapper .bk12_6,
.bk12col-wrapper .bk12_8,
.bk12col-wrapper .bk12_10,
.bk12col-wrapper .bk12_12,
.bk12col-wrapper .bk12_14,
.bk12col-wrapper .bk12_16,
.bk12col-wrapper .bk12_18,
.bk12col-wrapper .bk12_20 {
  width: 288px;     /* gestapelt */
  margin-right: 16px;
  margin-left: 16px;
  float: left;
}

@media (min-width: 960px) {
  .bk12col-wrapper .bk12_2,
  .bk12col-wrapper .bk12_4,
  .bk12col-wrapper .bk12_6,
  .bk12col-wrapper .bk12_8,
  .bk12col-wrapper .bk12_10,
  .bk12col-wrapper .bk12_12,
  .bk12col-wrapper .bk12_14,
  .bk12col-wrapper .bk12_16,
  .bk12col-wrapper .bk12_18,
  .bk12col-wrapper .bk12_20 {
    width: 608px;   /* 2 Slots */
  }
}

@media (min-width: 1280px) {
  .bk12col-wrapper .bk12_2,
  .bk12col-wrapper .bk12_4,
  .bk12col-wrapper .bk12_6,
  .bk12col-wrapper .bk12_8,
  .bk12col-wrapper .bk12_10,
  .bk12col-wrapper .bk12_12,
  .bk12col-wrapper .bk12_14,
  .bk12col-wrapper .bk12_16,
  .bk12col-wrapper .bk12_18,
  .bk12col-wrapper .bk12_20 {
    width: 928px;   /* 3 Slots */
  }
}


/* ================================================================
   6 SPALTEN  1:1:1:1:1:1
   ================================================================
   6 × (16 + 128 + 16) = 960px  → passt exakt auf 960px Wrapper
   ================================================================ */

.bk111111col-wrapper {
  width: 320px;
  margin-right: auto;
  margin-left: auto;
  clear: both;
}

@media (min-width: 640px) {
  .bk111111col-wrapper {
    width: 640px;   /* → 4 Spalten sichtbar */
  }
}

@media (min-width: 960px) {
  .bk111111col-wrapper {
    width: 960px;   /* → alle 6 Spalten, Max */
  }
}

.bk111111_1,
.bk111111_2,
.bk111111_3,
.bk111111_4,
.bk111111_5,
.bk111111_6 {
  width: 128px;
  margin-right: 16px;
  margin-left: 16px;
  float: left;
  /* Breite bleibt immer 128px */
}


/* ================================================================
   8 SPALTEN  1:1:1:1:1:1:1:1
   ================================================================
   8 × (16 + 128 + 16) = 1280px → passt exakt auf 1280px Wrapper
   4 × (16 + 128 + 16) = 640px  → passt exakt auf 640px Wrapper
   2 × (16 + 128 + 16) = 320px  → passt exakt auf 320px Wrapper
   ================================================================ */

.bk11111111col-wrapper {
  width: 320px;
  margin-right: auto;
  margin-left: auto;
  clear: both;
}

@media (min-width: 640px) {
  .bk11111111col-wrapper {
    width: 640px;   /* → 4 Spalten */
  }
}

@media (min-width: 1280px) {
  .bk11111111col-wrapper {
    width: 1280px;  /* → alle 8 Spalten */
  }
}

.bk11111111_1,
.bk11111111_2,
.bk11111111_3,
.bk11111111_4,
.bk11111111_5,
.bk11111111_6,
.bk11111111_7,
.bk11111111_8 {
  width: 128px;
  margin-right: 16px;
  margin-left: 16px;
  float: left;
  /* Breite bleibt immer 128px */
}