html, body {
  margin: 0;
  padding-left: 0px;
  background-color: rgb(1, 39, 39);
  background-image: none;
  color: white;
  scroll-behavior: smooth;
  background-image: url("Vorschaubilder/Hintergrund/Homehintergrunde.png");
  background-size: cover;
}

@media only screen and (max-width: 1080px) {
  html, body {
      background-image: none;
  }    
}

@keyframes NaviAktiv {

  0% {    filter:grayscale(0.8);
          transform: scale(20%);} 

  50% {   filter:grayscale(1);
          transform: scale(20%);} 

  100% {  filter:grayscale(0.8);
          transform: scale(20%);} 

}

#home {
  filter: grayscale();
  border-color: #64646486;
  animation-name: NaviAktiv;
  animation-duration: 1s;
  animation-iteration-count: infinite;
}

#home:hover {
  animation-name: NaviAktiv;
  animation-duration: 1s;
}

.homebanner {
  width: 77vw;
  margin-left: 17vw;
  border: 0.5vw solid black;
}

@media only screen and (max-width: 1080px) {
  .homebanner {
      width: 94vw;
      margin-left: 2vw;
      border: 0.15vw solid black;
  }
}

.Willkommenbild{
  margin-left: 26vw;
  width: 60vw;
  border: 0.5vw solid black;
}

@media only screen and (max-width: 1080px) {
  .Willkommenbild {
      width: 94vw;
      margin-left: 2vw;
      border: 0.15vw solid black;
  }
}

#container {
  text-align: justify;
  font-family: sans-serif;
  margin-left: 15vw;
  font-size: 1vw;
  display: grid;
  grid-template-columns: repeat(8, 8vw);
  grid-template-rows: repeat(4, 8vw);
  grid-gap: 2vw;
  padding: 2vw;
  margin-bottom: 5vw;
}

@media only screen and (max-width: 1080px) {
  #container {
      margin-left: 0vw;
      font-size: 1vw;
      display: grid;
      grid-template-columns: repeat(4, 22vw);
      grid-template-rows: repeat(16, 8vw);
      grid-gap: 2vw;
      padding: 2vw;
      margin-bottom: 5vw;
  }
}

.LetzerSale {
  position: relative;
  width: 50vw;
  margin-left: 27vw;
  margin-top: -7vw;
}

@media only screen and (max-width: 1080px) {
  .LetzerSale {
      width: 100vw;
      margin-left: 0vw;
  }
}


.inhalt {
  border: 1px solid #ff0000;
}

.uberschrift{
  font-size: 2vw;
  text-align: center;
}

@media only screen and (max-width: 1080px) {
  .uberschrift{
      font-size: 5vw;
  }
}

.unterschrift{
  display: none;
}

.Hierklick {
  color: white;
  font-style: italic;
}

.Navigationsbildweiterleitung {
  height: 4vw;
  margin-top: 2vw;
  margin-left:1.5vw;
  margin-right:1.5vw;
  animation-name: Navigationsbilder;
  animation-duration: 5s ;
  animation-iteration-count: infinite;
  animation-direction: alternate;
}

.Navigationsbildweiterleitungtext {
  height: 6vw;
  margin-top: 2vw;
  margin-left:1.5vw;
  margin-right:1.5vw;
}

@keyframes Pfeilani {

  0% {    margin-left: 0vw;} 


  100% {  margin-left: 5vw;}

}

@keyframes PfeilaniR {

  0% {    margin-right: 0vw;} 


  100% {  margin-right: 5vw;}

}

.Pfeilsale {
  height: 4vw;
  animation-name: PfeilaniR;
  animation-duration: 1s ;
  animation-iteration-count: infinite;
  animation-direction: alternate;
}

.Pfeilsaleumkehr {
  transform: rotate(180deg);
  animation-name: Pfeilani;
  animation-duration: 1s ;
  animation-iteration-count: infinite;
  animation-direction: alternate;
}

@media only screen and (max-width: 1080px) { 
  .Navigationsbildweiterleitungtext {
    height: 10vw;
  }
  .Navigationsbildweiterleitung {
    height: 8vw;
  }
}

.Navigationsbildweiterleitung:hover {
  transition: 1s;
  cursor: url("../Vorschaubilder/animation/PinselG.png"), auto;
  /*animation-name: EGGUnten;
  animation-duration: 1s ;
  animation-iteration-count: 1.5;*/
}

.Vorstellungtext {
  background-color: black;
  border: 0.6vw solid #000000;
  grid-column-start: 1;
  grid-column-end: 5;
  grid-row-start: 1;
  grid-row-end: 6;
  box-shadow: 0.3vw 0.3vw 1vw rgb(0, 0, 0);
  padding: 4vw;
  border-radius: 1vw;
}

.Vorstellungtextsozial {
  font-size: 0.7vw;
  color: rgb(1, 81, 254);
  font-style: italic;
}

@media only screen and (max-width: 1080px) { 
  .Vorstellungtextsozial {
      font-size: 2vw;
  }
}

@media only screen and (max-width: 1080px) { 
  .Vorstellungtext {
      border: 1px solid #000000;
      grid-column-start: 1;
      grid-column-end: 5;
      grid-row-start: 1;
      grid-row-end: 12;
      box-shadow: 0.3vw 0.3vw 1vw rgb(0, 0, 0);
      padding: 8vw;
      border-radius: 1vw;
      font-size: clamp(1rem, 1.5vw, 2rem);
      overflow: hidden;
  }
}

.Vorstellungtextscroll::-webkit-scrollbar {
  display: none;
}

.Vorstellungtextscroll {
  overflow: scroll;
}

.rahmen {
  width: 36.8vw;
  height: 41.5vw;
  position: absolute;
  margin-top: -4vw;
  margin-left: -4vw;
  user-select: none;
  border-radius: 1vw;
}

@media only screen and (max-width: 1080px) { 
  .rahmen {
      width: 93.3vw;
      height: 107.5vw;
      position: absolute;
      margin-top: -8vw;
      margin-left: -8vw;
      user-select: none;
      border-radius: 1vw;
      pointer-events: none;
  }
}

.homebild {
  max-width: 100%;
  border-radius: 1vw;
  box-shadow: 0.3vw 0.3vw 1vw rgb(0, 0, 0);
  overflow: hidden;
}

.homebild0 {
  grid-column-start: 5;
  grid-column-end: 7;
  grid-row-start: 1;
  grid-row-end: 3;
  overflow: hidden;
}

@media only screen and (max-width: 1080px) {
  .homebild0 {
      grid-column-start: 1;
      grid-column-end: 3;
      grid-row-start: 12;
      grid-row-end: 17;
  }
}

.homebild1 {
  grid-column-start: 7;
  grid-column-end: 9;
  grid-row-start: 1;
  grid-row-end: 3;
  overflow: hidden;
}

@media only screen and (max-width: 1080px) {
  .homebild1 {
      grid-column-start: 3;
      grid-column-end: 5;
      grid-row-start: 12;
      grid-row-end: 17;
  }
}

.homebild2 {
  grid-column-start: 5;
  grid-column-end: 7;
  grid-row-start: 3;
  grid-row-end: 5;
  overflow: hidden;
}

@media only screen and (max-width: 1080px) {
  .homebild2 {
      grid-column-start: 1;
      grid-column-end: 3;
      grid-row-start: 17;
      grid-row-end: 22;
  }
}

.homebild3 {
  grid-column-start: 7;
  grid-column-end: 9;
  grid-row-start: 3;
  grid-row-end: 5;
  overflow: hidden;
}

@media only screen and (max-width: 1080px) {
  .homebild3 {
      grid-column-start: 3;
      grid-column-end: 5;
      grid-row-start: 17;
      grid-row-end: 22;
  }
}

.homelinks {
  grid-column-start: 5;
  grid-column-end: 5;
  grid-row-start: 5;
  grid-row-end: 5;
  font-size: 2vw;
  color: blue;
  font-weight: bold;
  cursor: url("../Vorschaubilder/animation/PinselF.png"), auto;
  user-select: none;
  opacity: 0.7;
}

.homelinks:hover {
  opacity: 1;
}

@media only screen and (max-width: 1080px) {
  .homelinks {
      grid-column-start: 1;
      grid-column-end: 3;
      grid-row-start: 12;
      grid-row-end: 22;
      z-index: 100;
  }
}

.homerechts {
  grid-column-start: 8;
  grid-column-end: 8;
  grid-row-start: 5;
  grid-row-end: 5;
  font-size: 2vw;
  text-align: right;
  color: blue;
  font-weight: bold;
  cursor: url("../Vorschaubilder/animation/PinselF.png"), auto;
  user-select: none;
  opacity: 0.7;
}

.homerechts:hover {
  opacity: 1;
}

@media only screen and (max-width: 1080px) {
  .homerechts {
      z-index: 100;
      grid-column-start: 3;
      grid-column-end: 5;
      grid-row-start: 12;
      grid-row-end: 22;
  }
}


.diashow{
  margin-top: 4vw;
  width: 50vw;
  height: 25vw;
  box-shadow: 0px 0px 0.5vw gray;
  position: relative;
}

@media only screen and (max-width: 1080px) { 
  .diashow{
      margin-left: 0.5vw;
      width: 99vw;
      height: 50vw;
  }
}

.diabox {
  position: absolute;
  border: blue;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  overflow: hidden;
}

.diabild {
  display: none;
  width: 100%;
  opacity: 0;
  transition: 2s;
}


.diatext {
  position: absolute;
  top: 0%;
  right: 0%;
  left: 0%;
  top: 18vw;
  text-align: center;
  color: white;
  background-color: rgba(0, 0, 0, 0.5);
  opacity: 0;
  transition: 2s;
  user-select: none;
}

@media only screen and (max-width: 1080px) { 
  .diatext {
      top: 37vw;
  }
}

.diabildaktiv {
  display: block;
  opacity: 1;
}


.Pfeil_L {
  position: absolute;
  font-size: 5vw;
  left: 10%;
  top: 17vw;
  color: white;
  opacity: 0.5;
  transition: 0.3s;
  cursor:move;
  user-select: none;
}

.Pfeil_L:hover {
  opacity: 1;
  transform: scale(130%);
}

@media only screen and (max-width: 1080px) { 
  .Pfeil_L {
      top: 33vw;
      font-size: 15vw;
  }
}

.Pfeil_R {
  position: absolute;
  font-size: 5vw;
  right: 10%;
  top: 17vw;
  color: white;
  opacity: 0.5;
  transition: 0.3s;
  cursor:move;
  user-select: none;
}

.Pfeil_R:hover {
  opacity: 1;
  transform: scale(130%);
}

@media only screen and (max-width: 1080px) { 
  .Pfeil_R {
      top: 33vw;
      font-size: 15vw;
  }
}

.ausblenden {
  display: none;
}




.eigenwerbung {
  padding: 1vw;
  font-size: 3vw;
  transition: 1s;
  margin-bottom: 1vw;
}

@media only screen and (max-width: 1080px) { 
  .eigenwerbung {
      font-size: 6vw;
      margin-top: 2vw;
      margin-bottom: 3vw;
  }

}

.Froschgott{
  opacity: 0;
  left: 50%;
  transform: translate(-50%, -0%);
  position: absolute;
  text-align: center;
  align-items: center;
  margin-top: -4vw;
  transition: 1s;
  user-select: none;
}

@media only screen and (max-width: 1080px) { 
  .Froschgott{
      font-size: 3vw;
      margin-top: -8vw;
  }
}

.eigenwerbung:hover + .Froschgott {
  margin-top: -2.5vw;
  transition: 1s;
  opacity: 100;
  color: greenyellow;
}

@media only screen and (max-width: 1080px) { 
  .eigenwerbung:hover + .Froschgott {
      margin-top: -4vw;
  }
  
}

.center {
  text-align: center;
  margin-left: 11vw;
}
@media only screen and (max-width: 1080px) { 
  .center {
      margin-left: 0vw;
  }
}

.Kuninfobox {
  text-align: right;
}

.Kuninfo {
  height: 20vw;
  transform:translateY(0.2vw)
}

@media only screen and (max-width: 1080px) { 
  .Kuninfo {
    height: 60vw;
    transform:translateY(11.5vw)
  }
}