#zitattext {
  font-family: "Shadows Into Light", cursive;
  font-size: clamp(2.5rem, -1.5rem + 8vw, 5rem);
  font-style: italic;
  padding: 50px;
  font-weight: 500;
  text-shadow: 2px 2px 1px rgba(0, 0, 0, 0.5);
}
#zitatname {
  font-family: "Open Sans", sans-serif;
  text-align: end;
  font-size: 30px;
  padding-right: 100px;
}
body {
  background: fixed;
  font-family: "Open Sans", sans-serif;
  height: 100%;
 
  background-repeat: no-repeat;
  background-size: cover;
  color: white;
}

* {
  padding: 0;
  margin: 0;
}

@media only screen and (min-width: 1320px) {
  .grid-container {
    display: grid;
   
    place-items: center;
    grid-template-columns: 2 1 1 1 2;
    grid-template-rows: minmax(100px, auto);
    row-gap: 40px;
    column-gap: 10px;
    margin-left: 25px;
    margin-right: 25px;
    margin-bottom: 60px;
    grid-template-areas:
      "eins eins eins eins eins"
      "zwei zwei zwei zwei drei"
      "vier fuenf fuenf fuenf fuenf"
      "sechs sechs sechs sechs sieben"
      "neun acht acht acht acht"
      "zwoelf elv elv elv vierzehn"
      "dreizehn dreizehn dreizehn zehn zehn"
      "fuenfzehn fuenfzehn fuenfzehn fuenfzehn fuenfzehn"
      "sechzehn sechzehn siebzehn achtzehn achtzehn ";
  }
  #oli {
    width: 80%;
  }
}

@media only screen and (max-width: 1320px) and (min-width: 1100px) {
  .grid-container {
    display: grid;
    place-items: center;
    grid-template-columns: 1 1;
    grid-template-rows: minmax(100px, auto);
    row-gap: 40px;
    column-gap: 10px;
    margin-left: 25px;
    margin-right: 25px;
    margin-bottom: 60px;
    grid-template-areas:
      "eins eins"
      "zwei zwei"
      "zwoelf drei"
      "fuenf fuenf"
      "neun neun"
      "sechs sechs"
      "siebzehn sieben"
      "acht acht"
      "elv vier"
      "dreizehn zehn"
      "dreizehn vierzehn"
      "fuenfzehn fuenfzehn"
      "achtzehn sechzehn "
      "neunzehn neunzehn"
      "zwanzig zwanzig";
  }
}

@media only screen and (max-width: 1100px) {
  .grid-container {
    display: grid;
    place-items: center;
    grid-template-columns: 1;
    margin-left: 15px;
    margin-right: 15px;
    grid-template-areas:
      "eins"
      "zwei"
      "vier"
      "fuenf"
      "drei"
      "sechs"
      "neun"
      "acht"
      "sechzehn"
      "elv"
      "zehn"
      "dreizehn"
      "achtzehn"
      "fuenfzehn"
      "sieben"
      "neunzehn"
      "zwanzig";
  }
  .item17 {
    display: none;
  }
  .item12 {
    display: none;
  }
  .item14 {
    display: none;
  }
  .bild{
    width: 80%;
  }

}
.item1 {
  grid-area: eins;
}

.item2 {
  grid-area: zwei;
}

.item3 {
  grid-area: drei;
}

.item4 {
  grid-area: vier;
}

.item5 {
  grid-area: fuenf;
}

.item6 {
  grid-area: sechs;
}

.item7 {
  grid-area: sieben;
}

.item8 {
  grid-area: acht;
}

.item9 {
  grid-area: neun;
}

.item10 {
  grid-area: zehn;
}

.item11 {
  grid-area: elv;
}
.item12 {
  grid-area: zwoelf;
}
.item13 {
  grid-area: dreizehn;
}
.item14 {
  grid-area: vierzehn;
}
.item15 {
  grid-area: fuenfzehn;
}
.item15 h2 {
  text-align: center;
}
.item16 {
  grid-area: sechzehn;
}
.item17 {
  grid-area: siebzehn;
}
.item18 {
  grid-area: achtzehn;
}

.bild {
  padding: 8px;
  background-color: white;
  border-radius: 8px;
  margin-top: 15px;
  margin-bottom: 15px;
}

.text {
  text-align: start;
  color: black;
  font-size: 24px;
  background-color: rgba(255, 255, 255, 0.7);
  font-size: 24px;
  font-weight: 500%;
  padding: 15px;
  border-radius: 8px;
  line-height: 1.4;
}
#WZ {
  text-align: center;
  background-color: rgba(128, 128, 128, 0.7);
  padding-left: 15px;
  padding-right: 15px;
  border: solid 3px black;
}