:root {
  font-family: 'Graduate'; /* Dieser Name korrespondiert mit den Einstellungen in fonts.css */
}

body {
  background-color: #009b3a;
  margin: 0;
  padding: 0;
  overflow: hidden;
  animation-name: ani-hg-farbe;
  animation-duration: 20s;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
}

@keyframes ani-hg-farbe {
  0% {background-color: #c60c30;}
  12.5% {background-color: #00a1de;}
  25% {background-color: #62361b;}
  37.5% {background-color: #009b3a;}
  50% {background-color: #f9461c;}
  62.5% {background-color: #e27ea6;}
  75% {background-color: #522398;}
  87.5% {background-color: #f9e300;}
  100% {background-color: #c60c30;}
}

/* Hintergrund */

#gridcontainer-hg {
  display: grid;
  grid-template-columns: repeat(6, 16.6vw);
  grid-template-rows: repeat(3, 33.3vh);
  justify-items: center; 
  align-items: center; 
  position: absolute;
}

.textcontainer-hg {
  display: flex;
  justify-content: center; 
  align-items: center;
  position: relative;
}

.buchstaben-hg {
  font-size: 50vh;
  line-height: 5vw;
  color: #c60c30;
  margin: 0;
  text-align: center;
  position: absolute;
  animation: ani-hg-bewegung;
  animation-duration: 4s;
  animation-direction: alternate;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
  animation-fill-mode: backwards;
}

@keyframes ani-hg-bewegung {
  0% {  font-variation-settings: "XOPQ" 100, "XTRA" 400, "OPSZ" 16, "GRAD" 0, "YTRA" 750, "CNTR" 0,
    "YOPQ" 100, "SERF" 0, "YTAS" 0, "YTLC" 650, "YTDE" 0, "SELE" 0;}
  100% { font-variation-settings: "XOPQ" 900, "XTRA" 400, "OPSZ" 16, "GRAD" 20, "YTRA" 750, "CNTR" 0,
    "YOPQ" 800, "SERF" 0, "YTAS" 0, "YTLC" 650, "YTDE" 0, "SELE" 0;}
}



.verzoegerung1 {
  animation-delay: 0.2s;
}

.verzoegerung2 {
  animation-delay: 0.4s;
}

.verzoegerung3 {
  animation-delay: 0.6s;
}

.verzoegerung4 {
  animation-delay: 0.8s;
}

.verzoegerung5 {
  animation-delay: 1s;
}

.verzoegerung6 {
  animation-delay: 1.2s;
}

.verzoegerung7 {
  animation-delay: 1.4s;
}

.verzoegerung8 {
  animation-delay: 1.6s;
}

.verzoegerung9 {
  animation-delay: 1.8s;
}

.verzoegerung10 {
  animation-delay: 2s;
}

.verzoegerung11 {
  animation-delay: 2.2s;
}

.verzoegerung12 {
  animation-delay: 2.4s;
}

.verzoegerung13 {
  animation-delay: 2.6s;
}

.verzoegerung14 {
  animation-delay: 2.8s;
}

.verzoegerung15 {
  animation-delay: 3s;
}

.verzoegerung16 {
  animation-delay: 3.2s;
}

.verzoegerung17 {
  animation-delay: 3.4s;
}

/* Breitenvariation */

#breitenvariation-flexbox {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  position: absolute;
  height: 100%;
  width: 100%;
}

.breitenvariation1 {
  font-size: 22vw;
  line-height: 14vw;
  margin: 0;
  text-align: center;
  position: relative;
  animation-name: ani-breitenvariation1;
  animation-duration: 13s;
  animation-delay: 6s;
  animation-timing-function: ease-in-out;
  animation-iteration-count: infinite;
  animation-direction: alternate;
  animation-fill-mode: backwards;
}

.breitenvariation2 {
  font-size: 22vw;
  line-height: 14vw;
  margin: 0;
  text-align: center;
  position: relative;
  animation-name: ani-breitenvariation2;
  animation-duration: 13s;
  animation-delay: 6s;
  animation-timing-function: ease-in-out;
  animation-iteration-count: infinite;
  animation-direction: alternate;
  animation-fill-mode: backwards;
}

@keyframes ani-breitenvariation1 {
  0% {opacity: 0; font-variation-settings: "XOPQ" 100, "XTRA" 400, "OPSZ" 16, "GRAD" 0, "YTRA" 750, "CNTR" 0,
    "YOPQ" 100, "SERF" 0, "YTAS" 0, "YTLC" 650, "YTDE" 0, "SELE" 0; color: #e27ea6;}
  1% {opacity: 1; font-variation-settings: "XOPQ" 100, "XTRA" 400, "OPSZ" 16, "GRAD" 0, "YTRA" 750, "CNTR" 0,
    "YOPQ" 100, "SERF" 0, "YTAS" 0, "YTLC" 650, "YTDE" 0, "SELE" 0; }
  11% {font-variation-settings: "XOPQ" 300, "XTRA" 400, "OPSZ" 16, "GRAD" 20, "YTRA" 750, "CNTR" 100,
    "YOPQ" 100, "SERF" 0, "YTAS" 0, "YTLC" 650, "YTDE" 0, "SELE" 0;}
  21% {font-variation-settings: "XOPQ" 100, "XTRA" 400, "OPSZ" 16, "GRAD" 0, "YTRA" 750, "CNTR" 0,
    "YOPQ" 100, "SERF" 0, "YTAS" 0, "YTLC" 650, "YTDE" 0, "SELE" 0; }
  31% {font-variation-settings: "XOPQ" 300, "XTRA" 400, "OPSZ" 16, "GRAD" 20, "YTRA" 750, "CNTR" 100,
    "YOPQ" 100, "SERF" 0, "YTAS" 0, "YTLC" 650, "YTDE" 0, "SELE" 0; filter: blur(0);}
  41% {font-variation-settings: "XOPQ" 100, "XTRA" 400, "OPSZ" 16, "GRAD" 0, "YTRA" 750, "CNTR" 0,
    "YOPQ" 100, "SERF" 0, "YTAS" 0, "YTLC" 650, "YTDE" 0, "SELE" 0;}
  51% {opacity: 1; font-variation-settings: "XOPQ" 300, "XTRA" 400, "OPSZ" 16, "GRAD" 20, "YTRA" 750, "CNTR" 100,
    "YOPQ" 100, "SERF" 0, "YTAS" 0, "YTLC" 650, "YTDE" 0, "SELE" 0; filter: blur(10vw);}
  52% {opacity: 0; color: #f9e300;}
  100% {opacity: 0;}
}

@keyframes ani-breitenvariation2 {
  0% {opacity: 0; font-variation-settings: "XOPQ" 300, "XTRA" 400, "OPSZ" 16, "GRAD" 20, "YTRA" 750, "CNTR" 100,
    "YOPQ" 100, "SERF" 0, "YTAS" 0, "YTLC" 650, "YTDE" 0, "SELE" 0; filter: blur(10vw); color: #f9e300;}
  1% {opacity: 1; font-variation-settings: "XOPQ" 300, "XTRA" 400, "OPSZ" 16, "GRAD" 20, "YTRA" 750, "CNTR" 100,
    "YOPQ" 100, "SERF" 0, "YTAS" 0, "YTLC" 650, "YTDE" 0, "SELE" 0; filter: blur(5vw);}
  11% {font-variation-settings: "XOPQ" 100, "XTRA" 400, "OPSZ" 16, "GRAD" 0, "YTRA" 750, "CNTR" 0,
    "YOPQ" 100, "SERF" 0, "YTAS" 0, "YTLC" 650, "YTDE" 0, "SELE" 0;}
  21% {font-variation-settings: "XOPQ" 300, "XTRA" 400, "OPSZ" 16, "GRAD" 20, "YTRA" 750, "CNTR" 100,
    "YOPQ" 100, "SERF" 0, "YTAS" 0, "YTLC" 650, "YTDE" 0, "SELE" 0; filter: blur(0);}
  31% {font-variation-settings: "XOPQ" 100, "XTRA" 400, "OPSZ" 16, "GRAD" 0, "YTRA" 750, "CNTR" 0,
    "YOPQ" 100, "SERF" 0, "YTAS" 0, "YTLC" 650, "YTDE" 0, "SELE" 0;}
  41% {font-variation-settings: "XOPQ" 300, "XTRA" 400, "OPSZ" 16, "GRAD" 20, "YTRA" 750, "CNTR" 100,
    "YOPQ" 100, "SERF" 0, "YTAS" 0, "YTLC" 650, "YTDE" 0, "SELE" 0; }
  51% {opacity: 1; font-variation-settings: "XOPQ" 100, "XTRA" 400, "OPSZ" 16, "GRAD" 0, "YTRA" 750, "CNTR" 0,
    "YOPQ" 100, "SERF" 0, "YTAS" 0, "YTLC" 650, "YTDE" 0, "SELE" 0;}
  52% {opacity: 0; color: #009b3a;}
  100% {opacity: 0;}
}


/* Schattenmuster  */

#schattenmuster-gridcontainer {
  display: grid;
  grid-template-columns: repeat(6, 16.6vw);
  grid-template-rows: repeat(3, 33.3vh);
  justify-items: center; 
  align-items: center; 
  position: absolute;
}

.schattenmuster-textcontainer {
  display: flex;
  justify-content: center; 
  align-items: center;
  position: relative;
}


.schattenmuster-text {
  font-size: 100vh;
  line-height: 0vw;
  margin: 0;
  text-align: center;
  position: absolute;
  animation-name: ani-schattenmuster;
  animation-duration: 13s;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
  animation-fill-mode: backwards;
  animation-direction: alternate;
}

@keyframes ani-schattenmuster {
  0% {font-variation-settings: "XOPQ" 100;
    color: #f9e300;
    text-shadow: none;
    opacity: 0;}
  34% {opacity: 0;}
  35% {  font-variation-settings: "XOPQ" 100;
    color: #f9e300;
    text-shadow: none;
    opacity: 1;
  }
  45% {  font-variation-settings: "XOPQ" 300;
    color: #e27ea6;
    text-shadow: 1vw 1vw 1vw #f9e300;
  }

  55% {  font-variation-settings: "XOPQ" 100;
    color: #f9461c;
    text-shadow: 2vw 2vw 4vw #00a1de;
  }

  65% {  font-variation-settings: "XOPQ" 300;
    color: #522398;
    text-shadow: 0 0 1vw #f9461c;
    opacity: 1;
  }
  66% {opacity: 0;}
  100% {font-variation-settings: "XOPQ" 300;
    color: #522398;
    text-shadow: 0 0 1vw #f9461c;
    opacity: 0;}
}

.schattenmuster-verzoegerung1 {
  animation-delay: 0.05s;
}

.schattenmuster-verzoegerung2 {
  animation-delay: 0.1s;
}

.schattenmuster-verzoegerung3 {
  animation-delay: 0.15s;
}

.schattenmuster-verzoegerung4 {
  animation-delay: 0.2s;
}

.schattenmuster-verzoegerung5 {
  animation-delay: 0.25s;
}

.schattenmuster-verzoegerung6 {
  animation-delay: 0.3s;
}

.schattenmuster-verzoegerung7 {
  animation-delay: 0.35s;
}

.schattenmuster-verzoegerung8 {
  animation-delay: 0.4s;
}

.schattenmuster-verzoegerung9 {
  animation-delay: 0.45s;
}

.schattenmuster-verzoegerung10 {
  animation-delay: 0.5s;
}

.schattenmuster-verzoegerung11 {
  animation-delay: 0.55s;
}

.schattenmuster-verzoegerung12 {
  animation-delay: 0.6s;
}

.schattenmuster-verzoegerung13 {
  animation-delay: 0.65s;
}

.schattenmuster-verzoegerung14 {
  animation-delay: 0.7s;
}

.schattenmuster-verzoegerung15 {
  animation-delay: 0.75s;
}

.schattenmuster-verzoegerung16 {
  animation-delay: 0.8s;
}

.schattenmuster-verzoegerung17 {
  animation-delay: 0.85s;
}





/* Gridcontainer */

#gridcontainer-10er {
  display: grid;
  height: 100vh;
  width: 100vw;
  grid-template-columns: repeat(10, 10vw);
  grid-template-rows: repeat(10, 10vh);
  justify-items: center; 
  align-items: center; 
  position: absolute;
}

.textcontainer {
  display: flex;
  justify-content: center; 
  align-items: center;
  position: relative;
}


/* CTA1 */

.CTA1 {
  font-size: 7vh;
  line-height: 0vw;
  margin: 0;
  text-align: center;
  position: absolute;
  animation-name: ani-CTA1;
  animation-duration: 9.5s;
  animation-iteration-count: infinite;
}

.CTA1-obenrechts {
  grid-column: 10 / 11;
  grid-row: 1 / 2;
  color: #00a1de;
}

.CTA1-untenrechts {
  grid-column: 10 / 11;
  grid-row: 10 / 11;
  color: #f9e300;
}

.CTA1-obenlinks {
  grid-column: 1 / 2;
  grid-row: 1 / 2;
  color: #e27ea6;
}

.CTA1-untenlinks {
  grid-column: 1 / 2;
  grid-row: 10 / 11;
  color: #522398;
}

@keyframes ani-CTA1 {
  0% {opacity: 0;}
  1% {font-variation-settings: "XOPQ" 100, "XTRA" 400, "OPSZ" 16, "GRAD" 0, "YTRA" 750, "CNTR" 0,
    "YOPQ" 100, "SERF" 0, "YTAS" 0, "YTLC" 650, "YTDE" 0, "SELE" 0; opacity: 1;}
  10% {font-variation-settings: "XOPQ" 100, "XTRA" 400, "OPSZ" 16, "GRAD" 0, "YTRA" 750, "CNTR" 0,
    "YOPQ" 800, "SERF" 0, "YTAS" 0, "YTLC" 650, "YTDE" 0, "SELE" 0; opacity: 1;}
  20% {font-variation-settings: "XOPQ" 100, "XTRA" 400, "OPSZ" 16, "GRAD" 0, "YTRA" 750, "CNTR" 0,
    "YOPQ" 100, "SERF" 0, "YTAS" 0, "YTLC" 650, "YTDE" 0, "SELE" 0; opacity: 1;}
  30% {font-variation-settings: "XOPQ" 100, "XTRA" 400, "OPSZ" 16, "GRAD" 0, "YTRA" 750, "CNTR" 0,
    "YOPQ" 800, "SERF" 0, "YTAS" 0, "YTLC" 650, "YTDE" 0, "SELE" 0; opacity: 1;}
  31% {opacity: 0;}
  100% {opacity: 0;}
}

/* CTA Einzelbuchstaben gross */

.CTA-einzel-gross {
  font-size: 160vh;
  line-height: 0;
  margin: 0;
  text-align: center;
  position: absolute;
  grid-row: 5 / 7;
  animation-name: ani-CTA-einzel-gross;
  animation-iteration-count: infinite;
  animation-fill-mode: backwards;
}

.CTA-einzel-gross-C {
  color: #f9e300;
  text-shadow: 2vh 2vh 4vh #009b3a,
  -2vh -2vh 4vh #e27ea6,
  1vh 1vh 2vh #009b3a,
  -1vh -1vh 2vh #e27ea6;
  grid-column: 2 / 4;
  animation-duration: 10.5s;
}

.CTA-einzel-gross-T {
  color: #e27ea6;
  text-shadow: 2vh 2vh 4vh #522398,
  -2vh -2vh 4vh #f9e300,
  1vh 1vh 2vh #522398,
  -1vh -1vh 2vh #f9e300;
  grid-column: 5 / 7;
  animation-duration: 12s;
  animation-delay: 3s;
}

.CTA-einzel-gross-A {
  color: #522398;
  text-shadow: 2vh 2vh 4vh #f9e300,
  -2vh -2vh 4vh #009b3a,
  1vh 1vh 2vh #f9e300,
  -1vh -1vh 2vh #009b3a;
  grid-column: 8 / 10;
  animation-duration: 15s;
  animation-delay: 6s;
}

@keyframes ani-CTA-einzel-gross {
  0% {opacity: 0; filter: blur(10vh);}
  40% {opacity: 1; filter: blur(10vh);}
  49% {filter: blur(0);}
  51% {filter: blur(0);}
  60% {opacity: 1; filter: blur(10vh);}
  100% {opacity: 0; filter: blur(10vh);}
}



/* CTA2 */

.CTA2 {
  color: #f9e300;
  font-size: 50vh;
  line-height: 0vw;
  margin: 0;
  text-align: center;
  position: absolute;
  grid-column: 5 / 7;
  grid-row: 5 / 7;
  animation-name: ani-CTA2;
  animation-duration: 10s;
  animation-delay: 2s;
  animation-iteration-count: infinite;
  animation-fill-mode: backwards;
}

@keyframes ani-CTA2 {
  0% {font-variation-settings: "XOPQ" 100, "XTRA" 400, "OPSZ" 16, "GRAD" 0, "YTRA" 750, "CNTR" 0,
    "YOPQ" 100, "SERF" 0, "YTAS" 0, "YTLC" 650, "YTDE" 0, "SELE" 0; opacity: 0;}
  1% {font-variation-settings: "XOPQ" 100, "XTRA" 400, "OPSZ" 16, "GRAD" 0, "YTRA" 750, "CNTR" 0,
    "YOPQ" 100, "SERF" 0, "YTAS" 0, "YTLC" 650, "YTDE" 0, "SELE" 0; opacity: 1;}
  6% {font-variation-settings: "XOPQ" 900, "XTRA" 400, "OPSZ" 16, "GRAD" 20, "YTRA" 750, "CNTR" 100,
    "YOPQ" 100, "SERF" 0, "YTAS" 0, "YTLC" 650, "YTDE" 0, "SELE" 0;}
  11% {font-variation-settings: "XOPQ" 100, "XTRA" 400, "OPSZ" 16, "GRAD" 0, "YTRA" 750, "CNTR" 0,
    "YOPQ" 100, "SERF" 0, "YTAS" 0, "YTLC" 650, "YTDE" 0, "SELE" 0;}
  16% {font-variation-settings: "XOPQ" 900, "XTRA" 400, "OPSZ" 16, "GRAD" 20, "YTRA" 750, "CNTR" 100,
    "YOPQ" 100, "SERF" 0, "YTAS" 0, "YTLC" 650, "YTDE" 0, "SELE" 0;}
  21% {font-variation-settings: "XOPQ" 100, "XTRA" 400, "OPSZ" 16, "GRAD" 0, "YTRA" 750, "CNTR" 0,
    "YOPQ" 100, "SERF" 0, "YTAS" 0, "YTLC" 650, "YTDE" 0, "SELE" 0;}
  26% {font-variation-settings: "XOPQ" 900, "XTRA" 400, "OPSZ" 16, "GRAD" 20, "YTRA" 750, "CNTR" 100,
    "YOPQ" 100, "SERF" 0, "YTAS" 0, "YTLC" 650, "YTDE" 0, "SELE" 0; opacity: 1;}
  31% {font-variation-settings: "XOPQ" 100, "XTRA" 400, "OPSZ" 16, "GRAD" 0, "YTRA" 750, "CNTR" 0,
      "YOPQ" 100, "SERF" 0, "YTAS" 0, "YTLC" 650, "YTDE" 0, "SELE" 0; opacity: 1;}
  32% {opacity: 0;}
  100% {opacity: 0;}
}