/* Allgemein */

@font-face {
  font-family: "StudioFeixenSans";
  font-weight: regular;
  src: url("StudioFeixenSans-Medium.otf") format("opentype");
}

body {
  background-color: #9cb5c7;
  font-family: "StudioFeixenSans", Helvetica, sans-serif;
  font-size: 26px;
  color: rgb(0, 0, 0);
}

a {
  text-decoration: none;
  color: rgb(0, 0, 0);
  cursor: pointer;
}

a:hover {
  color: rgb(255, 255, 255);
  cursor: pointer;
}

.height {
  height: 100%;
}

/* Navigation */

.navigation {
  display: flex;
  justify-content: space-between;
  position: fixed;
  left: calc(40 / 1728 * 100vw);
  right: calc(40 / 1728 * 100vw);
  z-index: 100;
}

.navigation-oben {
  top: calc(40 / 1728 * 100vw);
}

.navigation-unten {
  bottom: calc(40 / 1728 * 100vw);
}

/* Bilder Endprodukt */

.bild-endprodukt-allgemein {
  position: sticky;
  top: calc(80 / 1728 * 100vw);
  margin-top: calc(400 / 1728 * 100vw);
}

.bild-endprodukt-1 {
  width: calc(((1728 - (13 * 40)) / 12 * 6 + (5 * 40)) / 1728 * 100vw);
  margin-left: calc(((1728 - (13 * 40)) / 12 * 4 + (5 * 40)) / 1728 * 100vw);
}

.bild-endprodukt-2 {
  width: calc(((1728 - (13 * 40)) / 12 * 4 + (3 * 40)) / 1728 * 100vw);
  margin-left: calc(((1728 - (13 * 40)) / 12 * 1 + (2 * 40)) / 1728 * 100vw);
}

.bild-endprodukt-3 {
  width: calc(((1728 - (13 * 40)) / 12 * 6 + (5 * 40)) / 1728 * 100vw);
  margin-left: calc(((1728 - (13 * 40)) / 12 * 6 + (7 * 40)) / 1728 * 100vw);
}

.bild-endprodukt-4 {
  width: calc(((1728 - (13 * 40)) / 12 * 6 + (5 * 40)) / 1728 * 100vw);
  margin-left: calc(((1728 - (13 * 40)) / 12 * 0 + (1 * 40)) / 1728 * 100vw);
}

.bild-endprodukt-5 {
  width: calc(((1728 - (13 * 40)) / 12 * 7 + (6 * 40)) / 1728 * 100vw);
  margin-left: calc(((1728 - (13 * 40)) / 12 * 5 + (6 * 40)) / 1728 * 100vw);
}

.bild-endprodukt-6 {
  width: calc(((1728 - (13 * 40)) / 12 * 6 + (5 * 40)) / 1728 * 100vw);
  margin-left: calc(((1728 - (13 * 40)) / 12 * 3 + (4 * 40)) / 1728 * 100vw);
}

.bild-endprodukt-7 {
  width: calc(((1728 - (13 * 40)) / 12 * 5 + (4 * 40)) / 1728 * 100vw);
  margin-left: calc(((1728 - (13 * 40)) / 12 * 6 + (7 * 40)) / 1728 * 100vw);
}

.bild-endprodukt-8 {
  width: calc(((1728 - (13 * 40)) / 12 * 7 + (6 * 40)) / 1728 * 100vw);
  margin-left: calc(((1728 - (13 * 40)) / 12 * 2 + (3 * 40)) / 1728 * 100vw);
}

.bild-endprodukt-9 {
  width: calc(((1728 - (13 * 40)) / 12 * 12 + (11 * 40)) / 1728 * 100vw);
  margin-left: calc(((1728 - (13 * 40)) / 12 * 0 + (1 * 40)) / 1728 * 100vw);
}

.bild-volumen {
  margin: calc(((1728 - (13 * 40)) / 12 * 1 + (2 * 40)) / 1728 * 100vw);
}

/* Videos */

.video {
  position: absolute;
  top: 0px;
  left: 0px;
  width: 90%;
}

.schatten-video {
  position: relative;
  top: 0;
  left: 0;
}

.schatten {
  position: relative;
  top: 0;
  left: 0;
}

/* Infotext */

.infotext {
  display: flex;
  flex-direction: column;
  margin-top: calc(420 / 1728 * 100vw);
  margin-left: calc(((1728 - (13 * 40)) / 12 * 3 + (4 * 40)) / 1728 * 100vw);
  margin-bottom: calc(420 / 1728 * 100vw);
  width: calc(((1728 - (13 * 40)) / 12 * 6 + (5 * 40)) / 1728 * 100vw);
}

.infotext-titel {
  /* TODO: font family*/
  margin-bottom: 10px;
}

.abstand {
  margin-top: calc(40 / 1728 * 100vw);
}

/* Nebenprodukt / Prozess */

.neben-produkt {
  display: grid;
  grid-template-columns: repeat(8);
  gap: calc(40 / 1728 * 100vw);
  width: calc(((1728 - (13 * 40)) / 12 * 8 + (7 * 40)) / 1728 * 100vw);
  margin-left: calc(((1728 - (13 * 40)) / 12 * 2 + (3 * 40)) / 1728 * 100vw);
  margin-bottom: calc(100 / 1728 * 100vw);
}

.prozess {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: calc(40 / 1728 * 100vw);
  width: calc(((1728 - (13 * 40)) / 12 * 12 + (11 * 40)) / 1728 * 100vw);
  margin: calc(40 / 1728 * 100vw);
  margin-top: calc(400 / 1728 * 100vw);
  margin-bottom: calc(100 / 1728 * 100vw);
}

.width {
  width: calc(((1728 - (13 * 40)) / 12 * 2 + (1 * 40)) / 1728 * 100vw);
}
.width2 {
  width: calc(((1728 - (13 * 40)) / 12 * 4 + (3 * 40)) / 1728 * 100vw);
}

/* Grid Rows  */

.row-1 {
  grid-row: 1;
}

.row-2 {
  grid-row: 2;
}

.row-3 {
  grid-row: 3;
}

.row-4 {
  grid-row: 4;
}

.row-5 {
  grid-row: 5;
}

.row-6 {
  grid-row: 6;
}

.row-7 {
  grid-row: 7;
}

.row-8 {
  grid-row: 8;
}

.row-9 {
  grid-row: 9;
}

.row-10 {
  grid-row: 10;
}

.row-11 {
  grid-row: 11;
}

.row-12 {
  grid-row: 12;
}

.row-13 {
  grid-row: 13;
}

.row-14 {
  grid-row: 14;
}

.row-15 {
  grid-row: 15;
}

.row-16 {
  grid-row: 16;
}

.row-17 {
  grid-row: 17;
}

.row-18 {
  grid-row: 18;
}

.row-19 {
  grid-row: 19;
}

.row-20 {
  grid-row: 20;
}

.row-21 {
  grid-row: 21;
}

.row-1-3 {
  grid-row: 1 / 3;
}

.row-2-3 {
  grid-row: 2 / 3;
}

.row-2-4 {
  grid-row: 2 / 4;
}

.row-3-5 {
  grid-row: 3 / 5;
}

.row-3-6 {
  grid-row: 3 / 6;
}

.row-3-7 {
  grid-row: 3 / 7;
}

.row-4-5 {
  grid-row: 4 / 5;
}

.row-5-7 {
  grid-row: 5 / 7;
}

.row-6-8 {
  grid-row: 6 / 8;
}

.row-6-9 {
  grid-row: 6 / 9;
}

.row-6-10 {
  grid-row: 6 / 10;
}

.row-7-9 {
  grid-row: 7 / 9;
}

.row-8-9 {
  grid-row: 8 / 9;
}

.row-9-11 {
  grid-row: 9 / 11;
}

.row-10-11 {
  grid-row: 10 / 11;
}

.row-10-12 {
  grid-row: 10 / 12;
}

.row-11-13 {
  grid-row: 11 / 13;
}

.row-13-15 {
  grid-row: 13 / 15;
}

.row-13-17 {
  grid-row: 13 / 17;
}

.row-14-16 {
  grid-row: 14 / 16;
}

.row-14-17 {
  grid-row: 14 / 17;
}

.row-16-18 {
  grid-row: 16 / 18;
}

.row-17-19 {
  grid-row: 17 / 19;
}

.row-17-20 {
  grid-row: 17 / 20;
}

.row-17-21 {
  grid-row: 17 / 21;
}

.row-18-21 {
  grid-row: 18 / 21;
}

.row-19-21 {
  grid-row: 19 / 21;
}

/* Grid Columns  */
.column-1-2 {
  grid-column: 1 / 2;
}

.column-1-3 {
  grid-column: 1 / 3;
}

.column-1-4 {
  grid-column: 1 / 4;
}

.column-1-5 {
  grid-column: 1 / 5;
}

.column-1-6 {
  grid-column: 1 / 6;
}

.column-1-7 {
  grid-column: 1 / 7;
}

.column-2-4 {
  grid-column: 2 / 4;
}

.column-3-5 {
  grid-column: 3 / 5;
}

.column-3-6 {
  grid-column: 3 / 6;
}

.column-3-7 {
  grid-column: 3 / 7;
}

.column-3-8 {
  grid-column: 3 / 8;
}

.column-4-6 {
  grid-column: 4 / 6;
}

.column-4-7 {
  grid-column: 4 / 7;
}
.column-4-8 {
  grid-column: 4 / 8;
}

.column-5-6 {
  grid-column: 5/6;
}

.column-5-7 {
  grid-column: 5 / 7;
}

.column-5-9 {
  grid-column: 5 / 9;
}

.column-5-10 {
  grid-column: 5 / 10;
}

.column-5-13 {
  grid-column: 5 / 13;
}

.column-6-8 {
  grid-column: 6 / 8;
}

.column-6-10 {
  grid-column: 6 / 10;
}

.column-6-11 {
  grid-column: 6 / 11;
}

.column-6-13 {
  grid-column: 6 / 13;
}

.column-7-9 {
  grid-column: 7 / 9;
}

.column-7-10 {
  grid-column: 7 / 10;
}

.column-7-11 {
  grid-column: 7 / 11;
}
.column-7-13 {
  grid-column: 7 / 13;
}

.column-8-10 {
  grid-column: 8 / 10;
}

.column-8-11 {
  grid-column: 8 / 11;
}

.column-8-13 {
  grid-column: 8 / 13;
}

.column-9-13 {
  grid-column: 9 / 13;
}

.column-10-13 {
  grid-column: 10 / 13;
}

.column-11-13 {
  grid-column: 11 / 13;
}