.karte{
  position: relative;
display:flex;
flex-direction: column;
align-items:center;
width:15vw;
min-width: 250px;
min-height:300px;
max-height:400px;
border-style: none;
border-radius: 10px;
background-color: white;
box-shadow: 0px 7px 20px -10px black;
transform: translateY(-1vh);
margin-bottom:2vh;
}
.karte .kreis{
  transition: transform 0.4s, background-color 1s;
  display:flex;
  justify-content: center;
  align-items: center;
  margin-top:2vh;
  border-radius: 100%;
  height:8vw;
  width:8vw;
  box-shadow: 0px 3px 15px -1px black;
}
.karte .kreis img{
  width:80%;
  height:auto;
}
.karte .kreis:hover{
  transform: scale(1.05);
  background-color:black;
  transition: transform 0.4s, background-color 1s;
}
.karte h2{
  margin-top:1em;
  font-weight:bold;
  font-size:1.4vw;
  font-family:"Gill Sans", sans-serif;
}
.karte p{
  margin-top:1em;
  width:80%;
  height:4em;
  text-align:center;
  font-size:0.9vw;
  font-family:sans-serif;
  color:#b4b4b4;
}
.karte .button:hover{
  transform:scale(1.05) translateY(2px);
  transition:all 500ms;
}

#karten{
  display:flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: center;
}
.reihe{
  width:92vw;
  display:flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: space-evenly;
}
.karte .button{
  padding-left: 10px;
  padding-right: 10px;
  text-decoration:none;
  transition:all 500ms;
  line-height:3vh;
  font-family:sans-serif;
  font-weight:500;
  font-size:0.9em;
  box-sizing:border-box;
  min-width:6vw;
  height:3vh;
  display:inline-block;
  text-align:center;
  border-radius:3px 3px 3px 3px;
  box-shadow:0px 3px 1px -2px black;
}

.karte a.blue:hover{
  box-shadow:0px 10px 30px -8px rgb(47,165,250),
              0px 0px 20px 0px rgb(124,226,249) inset;
}
.karte a.green:hover{
  box-shadow:0px 10px 30px -8px green,
              0px 0px 20px 0px rgb(28,200,0) inset;
}
.karte a.red:hover{
  box-shadow:0px 10px 30px -8px rgb(250,72,72),
              0px 0px 20px 0px rgba(249,73,73,.85) inset;
}
.karte a.yellow:hover{
  box-shadow:0px 10px 30px -8px rgb(255,161,0),
              0px 0px 20px 0px rgba(229,247,114,1) inset;
}
.karte a.violet:hover{
  box-shadow:0px 10px 30px -8px rgb(97,0,255),
              0px 0px 20px 0px rgb(145,88,236) inset;
}

@media screen and (max-aspect-ratio:13/9){
  .karte{
    min-width:180px;
    max-width:250px;
    min-height:250px;
    max-height:300px;
    transform: translateY(-1vh);
  }
  .karte .kreis{
    height:12vh;
    width:12vh;
  }
  .karte h2{
    font-size:2vh;
  }
  .karte .button{
    width:80%;
    font-size:2.5vw;
  }
  .karte p{
    font-size:2vw;
    text-align: justify;
    width:95%;
  }
}