.textButton {
  position: relative;
  display: inherit;
  padding-top: 1rem;
  padding-bottom: 1rem;
  cursor: pointer;
  width: -moz-fit-content;
  width: fit-content;
  height: -moz-fit-content;
  height: fit-content;
  justify-content: left;
  align-items: center;
  height: 50px;
  width: fit-content;
  padding: 15px;
  margin: 0px 5px 10px 5px;
  border-radius: var(--BorderRadiusStyle);
  opacity: 0.7;
  cursor: pointer;
  color: var(--ColorWhite);
  background: var(--ColorHighlight);
  transition: opacity 0.2s ease-in-out;
}
.textButton:hover {
  opacity: 1;
}
.textButton.backToHome {
  position: fixed;
  top: 80px;
  left: 24px;
  width: 100%;
  z-index: 6;
}
.textButton.backToHome span {
  border-radius: 0px 5px 5px 0px;
}
.textButton.backToHome span::before {
  content: " ";
  position: absolute;
  border-top: 25px solid transparent;
  border-bottom: 25px solid transparent;
  right: 100%;
  top: 0px;
  border-right: 25px solid var(--ColorGrayTopggle);
}

.homeIntro {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 100vW;
  margin-top: 0;
  margin-bottom: 0;
  margin-left: 0;
  margin-right: 0;
  padding-top: 2rem;
  padding-bottom: 2rem;
  -webkit-backdrop-filter: blur(10px);
          backdrop-filter: blur(10px);
  transition: background 0.3s ease-in-out;
}
.homeIntro .scrollMe {
  position: absolute;
  display: flex;
  flex-direction: column;
  bottom: 200px;
  left: calc(50% - 10px);
}
.homeIntro .homeWelcome {
  display: flex;
  flex-direction: row;
  justify-content: center;
  justify-items: center;
  justify-self: center;
  align-content: center;
  align-items: center;
  align-self: center;
  width: 80vW;
  margin-left: 10vW;
  margin-right: 10vW;
  max-width: var(--MaxWidthInnerContent);
}
.homeIntro .homeWelcome .homeWelcomePicture {
  position: absolute;
  top: 0;
  left: 0;
  display: flex;
  justify-content: center;
  justify-items: center;
  justify-self: center;
  align-content: center;
  align-items: center;
  align-self: center;
  width: 100%;
  height: 100%;
  opacity: 1;
}
.homeIntro .homeWelcome .homeWelcomePicture .logo {
  position: absolute;
  top: calc(35% - 130px);
  left: calc(50% - 150px);
  height: auto;
  max-width: 300px;
  max-height: 300px;
}
.homeIntro .homeWelcome .homeWelcomePicture .logo svg {
  width: 300px;
  height: auto;
}

@keyframes homeWelcomeMottoButton {
  0% {
    opacity: 0;
    transform: translateX(-100vW);
  }
  100% {
    opacity: 1;
    transform: translateX(0px);
  }
}
@keyframes homeWelcomeMottoText {
  0% {
    transform: translateX(100vW);
    opacity: 0;
  }
  100% {
    transform: translateX(0px);
    opacity: 1;
  }
}
.homeArt {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  background: var(--BackgroundBox);
  transition: background 0.3s ease-in-out;
}
.homeArt .homeArtWrapper {
  display: grid;
  grid-template-columns: repeat(1, 1fr);
  grid-template-rows: repeat(7, auto);
  grid-column-gap: 2rem;
  grid-row-gap: 2rem;
  flex-direction: column;
  width: -moz-fit-content;
  width: fit-content;
  margin-left: 10vW;
  margin-right: 0vW;
  padding: 2rem;
  max-width: var(--MaxWidthInnerContent);
  background: var(--BackgroundFilter);
  -webkit-backdrop-filter: blur(10px);
          backdrop-filter: blur(10px);
  border-radius: var(--BorderRadiusStyle);
}
.homeArt .homeArtWrapper .homeArtHead {
  grid-row-start: 1;
  grid-row-end: 2;
  grid-column-start: 1;
  grid-column-end: 4;
}
.homeArt .homeArtWrapper .homeArtHead h1 {
  animation-duration: 0.8s;
  animation-timing-function: ease-in-out;
  animation-fill-mode: forwards;
}
.homeArt .homeArtWrapper .homeArtShorty {
  grid-row-start: 2;
  grid-row-end: 3;
  grid-column-start: 1;
  grid-column-end: 4;
}
.homeArt .homeArtWrapper .homeArtStory {
  grid-row-start: 3;
  grid-row-end: 4;
  grid-column-start: 1;
  grid-column-end: 4;
}
.homeArt .homeArtWrapper .homeArtPicture {
  position: relative;
  grid-row-start: 4;
  grid-row-end: 5;
  grid-column-start: 1;
  grid-column-end: 5;
  position: relative;
  display: flex;
  justify-content: center;
  justify-items: center;
  justify-self: center;
  align-content: center;
  align-items: center;
  align-self: center;
  width: 20vW;
  height: auto;
  min-width: 250px;
  max-width: 400px;
  max-height: auto;
  opacity: 1;
  background: var(--ColorBackGrayTrans);
  transition: all 0.4s ease-in-out;
}
.homeArt .homeArtWrapper .homeArtPicture .homeArtImageFilter {
  position: relative;
  width: 100%;
}
.homeArt .homeArtWrapper .homeArtPicture .homeArtImageFilter img {
  width: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  transform: scale(0.9);
  z-index: -1;
}
.homeArt .homeArtWrapper .homeArtPicture.ready {
  cursor: pointer;
  opacity: 1;
}
.homeArt .homeArtWrapper .homeArtistImagelable {
  grid-row-start: 5;
  grid-row-end: 6;
  grid-column-start: 1;
  grid-column-end: 5;
  position: relative;
  display: flex;
  justify-content: center;
  font-size: 1rem;
  font-weight: bold;
  color: var(--ColorSpan);
}
.homeArt .homeArtWrapper h1 {
  font-size: 2rem;
}
.homeArt .homeArtWrapper h2 {
  font-size: 1rem;
}
.homeArt .homeArtWrapper p {
  font-size: 0.9rem;
  line-height: 1.4rem;
}
.homeArt .homeArtButton {
  grid-row-start: 6;
  grid-row-end: 7;
  grid-column-start: 1;
  grid-column-end: 4;
}

.homeArtists {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  margin-top: 0;
  margin-bottom: 0;
  margin-left: 0;
  margin-right: 0;
  padding-top: 2rem;
  padding-bottom: 2rem;
}
.homeArtists .homeArtist {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(7, auto);
  grid-column-gap: 2rem;
  grid-row-gap: 2rem;
  flex-direction: row;
  margin-left: 10vW;
  margin-right: 10vW;
  max-width: var(--MaxWidthInnerContent);
}
.homeArtists .homeArtist .homeArtistHead {
  grid-row-start: 1;
  grid-row-end: 2;
  grid-column-start: 1;
  grid-column-end: 4;
}
.homeArtists .homeArtist .homeArtistHead h1 {
  animation-duration: 0.8s;
  animation-timing-function: ease-in-out;
  animation-fill-mode: forwards;
}
.homeArtists .homeArtist .homeArtistShorty {
  grid-row-start: 2;
  grid-row-end: 3;
  grid-column-start: 1;
  grid-column-end: 4;
}
.homeArtists .homeArtist .homeArtistStory {
  grid-row-start: 3;
  grid-row-end: 4;
  grid-column-start: 1;
  grid-column-end: 4;
}
.homeArtists .homeArtist .homeArtistPicture {
  position: relative;
  grid-row-start: 4;
  grid-row-end: 5;
  grid-column-start: 1;
  grid-column-end: 5;
  position: relative;
  display: flex;
  justify-content: center;
  justify-items: center;
  justify-self: center;
  align-content: center;
  align-items: center;
  align-self: center;
  width: 20vW;
  min-width: 250px;
  max-width: 400px;
  height: 100%;
  max-height: 400px;
  opacity: 1;
  border-radius: var(--BorderRadiusStyle);
  transition: all 0.15s ease-in-out;
}
.homeArtists .homeArtist .homeArtistPicture .homeArtistImageFilter {
  position: relative;
  width: 100%;
  height: 100%;
}
.homeArtists .homeArtist .homeArtistPicture .homeArtistImageFilter img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  border-radius: var(--BorderRadiusStyle);
  z-index: -1;
  transform: scale(0.94);
}
.homeArtists .homeArtist .homeArtistPicture :before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  border-radius: var(--BorderRadiusStyle);
  background-color: var(--ColorFilterTopggle);
  background: rgb(169, 112, 34);
  background: linear-gradient(300deg, rgba(169, 112, 34, 0) 0%, rgb(169, 112, 34) 20%, rgb(169, 112, 34) 80%, rgba(169, 112, 34, 0) 100%);
  opacity: 0.3;
  z-index: 3;
  transition: background-color 0.3s ease-in-out;
}
.homeArtists .homeArtist .homeArtistPicture.ready {
  cursor: pointer;
  opacity: 1;
  transition: opacity 1.15s ease-in-out;
}
.homeArtists .homeArtist .homeArtistImagelable {
  grid-row-start: 5;
  grid-row-end: 6;
  grid-column-start: 1;
  grid-column-end: 5;
  position: relative;
  display: flex;
  justify-content: center;
  font-size: 1rem;
  font-weight: bold;
  color: var(--ColorSpan);
}
.homeArtists .homeArtist h1 {
  font-size: 2rem;
}
.homeArtists .homeArtist h2 {
  font-size: 1rem;
}
.homeArtists .homeArtist p {
  font-size: 0.9rem;
  line-height: 1.4rem;
}
.homeArtists .homeArtistButton {
  grid-row-start: 6;
  grid-row-end: 7;
  grid-column-start: 1;
  grid-column-end: 4;
}

.homePictureBackground {
  grid-row-start: 4;
  grid-row-end: 5;
  grid-column-start: 1;
  grid-column-end: 5;
  padding: 10rem;
  background: var(--BackgroundBoxIntense);
  border-radius: 8px;
}

@keyframes storyAnimation {
  0% {
    transform: translateX(-100vW);
  }
  25% {
    transform: translateX(10vW);
  }
  50% {
    transform: translateX(-7vW);
  }
  70% {
    transform: translateX(2vW);
  }
  100% {
    transform: translateX(0vW);
  }
}
.homeArtistGoogleNavigation {
  position: relative;
  text-decoration: none;
  padding: 8px;
  border-radius: 8px;
  color: var(--ColorSpan);
  transition: color 0.3s ease-in-out;
  transition: background-color 0.3s ease-in-out;
}
.homeArtistGoogleNavigation::after {
  content: "";
  position: absolute;
  bottom: 4px;
  left: 0;
  width: 100%;
  height: 0.1em;
  background-color: var(--ColorHighlight);
  opacity: 0;
  transition: opacity 0.1s, transform 0.35s;
  transform: scale(0);
  transform-origin: left;
}
.homeArtistGoogleNavigation:hover::after {
  opacity: 1;
  transform: scale(1);
}

/* ----- STYLE (alte kleine Telefone - quer) ----- */
@media only screen and (min-width: 370px) and (orientation: landscape) {
  .homeIntro .scrollMe {
    display: flex;
    flex-direction: column;
    bottom: 250px;
    left: 100px;
  }
}
/* ----- STYLE (iphone - quer) ----- */
@media only screen and (min-width: 786px) and (orientation: landscape) {
  .homeIntro .homeWelcome h1 {
    font-size: 2.4rem;
  }
  .homeIntro .homeWelcome h2 {
    font-size: 1.4rem;
  }
  .homeIntro .homeWelcome p {
    font-size: 1rem;
    line-height: 1.4rem;
  }
  .homeIntro .homeWelcome .homeWelcomePicture .logo {
    top: calc(50% - 200px);
    left: calc(50% - 200px);
    width: 400px;
    height: auto;
  }
  .homeIntro .homeWelcome .homeWelcomePicture .logo svg {
    width: 400px;
    height: auto;
  }
  .homeIntro .scrollMe {
    display: flex;
    flex-direction: column;
    bottom: 200px;
    left: 100px;
  }
  .homeArt .homeArtWrapper h1 {
    font-size: 2.4rem;
  }
  .homeArt .homeArtWrapper h2 {
    font-size: 1.4rem;
  }
  .homeArt .homeArtWrapper p {
    font-size: 1rem;
    line-height: 1.4rem;
  }
  .homeArt .homeArtWrapper .homeArtHead {
    grid-row-start: 1;
    grid-row-end: 2;
    grid-column-start: 1;
    grid-column-end: 4;
  }
  .homeArt .homeArtWrapper .homeArtHead h1 {
    font-size: 3rem;
  }
  .homeArt .homeArtWrapper .homeArtShorty {
    grid-row-start: 2;
    grid-row-end: 3;
    grid-column-start: 1;
    grid-column-end: 3;
  }
  .homeArt .homeArtWrapper .homeArtStory {
    grid-row-start: 3;
    grid-row-end: 5;
    grid-column-start: 1;
    grid-column-end: 3;
  }
  .homeArt .homeArtWrapper .homeArtPicture {
    grid-row-start: 3;
    grid-row-end: 5;
    grid-column-start: 3;
    grid-column-end: 4;
  }
  .homeArt .homeArtWrapper .homeArtImagelable {
    grid-row-start: 5;
    grid-row-end: 6;
    grid-column-start: 3;
    grid-column-end: 4;
  }
  .homeArt .homeArtWrapper .homeArtButton {
    grid-row-start: 5;
    grid-row-end: 6;
    grid-column-start: 1;
    grid-column-end: 4;
  }
  .homeArtists .homeArtist h1 {
    font-size: 2.4rem;
  }
  .homeArtists .homeArtist h2 {
    font-size: 1.4rem;
  }
  .homeArtists .homeArtist p {
    font-size: 1rem;
    line-height: 1.4rem;
  }
  .homeArtists .homeArtist .homeArtistHead {
    grid-row-start: 1;
    grid-row-end: 2;
    grid-column-start: 1;
    grid-column-end: 4;
  }
  .homeArtists .homeArtist .homeArtistHead h1 {
    font-size: 3rem;
  }
  .homeArtists .homeArtist .homeArtistShorty {
    grid-row-start: 2;
    grid-row-end: 3;
    grid-column-start: 1;
    grid-column-end: 3;
  }
  .homeArtists .homeArtist .homeArtistStory {
    grid-row-start: 3;
    grid-row-end: 5;
    grid-column-start: 1;
    grid-column-end: 3;
  }
  .homeArtists .homeArtist .homeArtistPicture {
    grid-row-start: 3;
    grid-row-end: 5;
    grid-column-start: 3;
    grid-column-end: 4;
  }
  .homeArtists .homeArtist .homeArtistImagelable {
    grid-row-start: 5;
    grid-row-end: 6;
    grid-column-start: 3;
    grid-column-end: 4;
  }
  .homeArtists .homeArtist .homeArtistButton {
    grid-row-start: 5;
    grid-row-end: 6;
    grid-column-start: 1;
    grid-column-end: 4;
  }
  .homePictureBackground {
    grid-row-start: 2;
    grid-row-end: 8;
    grid-column-start: 3;
    grid-column-end: 4;
  }
}
/* ----- STYLE (PC und iPad hochkant) ----- */
@media only screen and (min-width: 786px) and (orientation: portrait) {
  .homeIntro .homeWelcome h1 {
    font-size: 2.4rem;
  }
  .homeIntro .homeWelcome h2 {
    font-size: 1.4rem;
  }
  .homeIntro .homeWelcome p {
    font-size: 1rem;
    line-height: 1.4rem;
  }
  .homeIntro .homeWelcome .homeWelcomePicture .logo {
    top: calc(50% - 300px);
    left: calc(50% - 300px);
    width: 600px;
    height: auto;
  }
  .homeIntro .homeWelcome .homeWelcomePicture .logo svg {
    width: 600px;
    height: auto;
  }
}
/* ----- STYLE (PC und ipad quer) ----- */
@media only screen and (min-width: 1080px) {
  .homeIntro .homeWelcome {
    margin-top: 0rem;
  }
  .homeIntro .homeWelcome .homeWelcomePicture .logo {
    top: calc(50% - 200px);
    left: calc(50% - 200px);
    width: 400px;
    height: auto;
  }
  .homeIntro .homeWelcome .homeWelcomePicture .logo svg {
    width: 400px;
    height: auto;
  }
  .homeIntro .scrollMe {
    display: flex;
    flex-direction: column;
    bottom: 200px;
    left: calc(50% - 20px);
    transition: opacity 0.5s ease-in-out;
  }
  .homeArt .homeArtWrapper .homeArtPicture {
    grid-row-start: 2;
    grid-row-end: 5;
    grid-column-start: 3;
    grid-column-end: 4;
  }
  .homeArtists .homeArtist .homeArtistPicture {
    grid-row-start: 2;
    grid-row-end: 5;
    grid-column-start: 3;
    grid-column-end: 4;
  }
  .homePictureBackground {
    grid-row-start: 1;
    grid-row-end: 8;
    grid-column-start: 3;
    grid-column-end: 4;
  }
}/*# sourceMappingURL=home.css.map */