/*

Mit der Klasse .grid-container wird das Grid generiert.
Dieses ist auch responsive.
Mit dem Attribut data-col kann die Anzahl der Spalten festgelegt werden.
Es sind bis zu 6 Spalten möglich.
Das Grind passt sich automatisch an die Größe von Hintergrundbildern an, wenn
eines vorhanden ist. Anderenfalls nimmt es die Größe der einzelnen Objekte im
Grid.

Beispiel:
<div class="grid-container" data-cols="3">
  <div>...</div>
  <div>...</div>
  <div>...</div>
  <div>...</div>
  <div>...</div>
  <div>...</div>
</div>

*/

.grid-container {
  position: relative;
}

.flexbox .grid-container {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  width: calc(100% + 1rem);
  margin: -.5rem;
}

.flexbox .grid-container > * {
  width: calc(100% / 3 - 1rem);
  margin: .5rem;
}

.flexbox .grid-container .lightbox-link{
    width: 100%;
    height: 100%;
}

.lb-data .lb-number {
    display: none!important; /* AUF ENGLISCH */
}

.flexbox .grid-container[data-cols="1"] > * { width: calc(100% / 1 - 1rem); }
.flexbox .grid-container[data-cols="2"] > * { width: calc(100% / 2 - 1rem); }
.flexbox .grid-container[data-cols="3"] > * { width: calc(100% / 3 - 1rem); }
.flexbox .grid-container[data-cols="4"] > * { width: calc(100% / 4 - 1rem); }
.flexbox .grid-container[data-cols="5"] > * { width: calc(100% / 5 - 1rem); }
.flexbox .grid-container[data-cols="6"] > * { width: calc(100% / 6 - 1rem); }

@media screen and (max-width: 1280px) {
  .flexbox .grid-container[data-cols="1"] > * { width: calc(100% / 1 - 1rem); }
  .flexbox .grid-container[data-cols="2"] > * { width: calc(100% / 2 - 1rem); }
  .flexbox .grid-container[data-cols="3"] > * { width: calc(100% / 3 - 1rem); }
  .flexbox .grid-container[data-cols="4"] > * { width: calc(100% / 3 - 1rem); }
  .flexbox .grid-container[data-cols="5"] > * { width: calc(100% / 4 - 1rem); }
  .flexbox .grid-container[data-cols="6"] > * { width: calc(100% / 4 - 1rem); }
}

@media screen and (max-width: 450px) {
  .flexbox .grid-container[data-cols="1"] > * { width: calc(100% / 1 - 1rem); }
  .flexbox .grid-container[data-cols="2"] > * { width: calc(100% / 1 - 1rem); }
  .flexbox .grid-container[data-cols="3"] > * { width: calc(100% / 1 - 1rem); }
  .flexbox .grid-container[data-cols="4"] > * { width: calc(100% / 2 - 1rem); }
  .flexbox .grid-container[data-cols="5"] > * { width: calc(100% / 2 - 1rem); }
  .flexbox .grid-container[data-cols="6"] > * { width: calc(100% / 2 - 1rem); }
}