.container-cards {
   display: grid;
   grid-template: 1fr 1fr /1fr 1fr 1fr 1fr 1fr;
   gap: 10px;
}

.container-cards.psychologen {
   display: grid;
   grid-template: 1fr 1fr /1fr 1fr 1fr 1fr 1fr;
   gap: 10px;
}

.container-cards.physio-sport {
   display: grid;
   grid-template: 1fr 1fr 1fr /1fr 1fr 1fr 1fr 1fr;
   gap: 10px;
}

.container-cards.verwaltung {
   display: grid;
   grid-template: 1fr 1fr /1fr 1fr 1fr 1fr 1fr;
   gap: 10px;
}

.container-cards.technischer_dienst {
   display: grid;
   grid-template: 1fr /1fr 1fr 1fr 1fr 1fr;
   gap: 10px;
}

.container-cards.welcome {
   width: 70%;
   margin: auto;
   grid-template: 1fr /1fr 1fr 1fr 1fr;
}

.container-cards.anmeldung {
   width: 50%;
   margin: auto;
   grid-template: 1fr /1fr 1fr 1fr;
}

.container-cards .cardBox {
   position: relative;
   height: 400px;
   display: inline-block;
}

.container-cards .cardBox .cardBox-left {
   align-self: start;
}

.container-cards .cardBox .card-imgBox {
   position: relative;
   overflow: hidden;

}

.container-cards .cardBox .card-imgBox img {
   width: 100%;
   height: 400px;
   transition: transform 2s;
   object-fit: cover;
}
.container-cards .cardBox:hover .card-imgBox img {
   transform: scale(1.05) translateY(-10px);
   filter: blur(2px);

}

.container-cards .cardBox .cardDetails {
   position: absolute;
   top: 10px;
   left: 10px;
   bottom: 10px;
   right: 10px;
   background: rgba(67, 183, 248, 0.6);
   transform: scaleY(0) translateY(300px);
   opacity: 0;
   transition: all 1s;
}

.container-cards .cardBox:hover .cardDetails {
   opacity: 100%;
   background: rgba(67, 183, 248, 0.6);
   transform: scaleY(1) translateY(0);
}

.container-cards .cardBox .cardDetails .cardContent {
   position: absolute;
   width: 100%;
   top: 50%;
   left: 0;
   transform: translateY(-50%);
   text-align: center;
   padding: 20px;
   color: #fff;
}

.container-cards .cardBox .cardDetails .cardContent h3 {
   margin: 0;
   padding: 0;
   font-size: 1rem;
   line-height: 1.25rem;
   text-align: center;
   color: #fff;
}

.container-cards .cardBox .cardDetails .cardContent p {
   margin: 10px 0;
   text-align: center;
   padding: 0;
   font-size: 0.85rem;
   line-height: 1rem;
}


@media screen and (min-width: 1024px) and (max-width: 1920px) {
   .container-cards {
      grid-template: 1fr 1fr 1fr /1fr 1fr 1fr 1fr;
   }
   .container-cards.psychologen {
      grid-template: 1fr 1fr /1fr 1fr 1fr 1fr;
   }

   .container-cards.physio-sport {
      grid-template: 1fr 1fr 1fr 1fr /1fr 1fr 1fr 1fr ;
   }

   .container-cards.technischer_dienst {
      grid-template: 1fr /1fr 1fr 1fr 1fr;
   }

   .container-cards.verwaltung {
      grid-template: 1fr 1fr /1fr 1fr 1fr 1fr;
   }

   .container-cards.welcome {
      width: 80%;
      margin: auto;
      grid-template: 1fr /1fr 1fr 1fr 1fr;
   }

   .container-cards.anmeldung {
      width: 60%;
      margin: auto;
      grid-template: 1fr /1fr 1fr 1fr;
   }

}

@media screen and (min-width: 769px) and (max-width: 1023px) {

   .container-text.cardStyle {
      width: 80%;
   }
   .container-cards {
      grid-template: 1fr 1fr 1fr /1fr 1fr 1fr;
   }

   .container-cards.psychologen {
      grid-template: 1fr 1fr /1fr 1fr 1fr;
   }

   .container-cards.physio-sport {
      grid-template: 1fr 1fr 1fr 1fr /1fr 1fr 1fr ;
   }

   .container-cards.technischer_dienst {
      grid-template: 1fr /1fr 1fr 1fr;
   }

   .container-cards.verwaltung {
      display: grid;
      grid-template: 1fr 1fr /1fr 1fr 1fr;
      gap: 10px;
   }

   .container-cards.welcome {
      width: 70%;
      margin: auto;
      grid-template: 1fr 1fr /1fr 1fr;
   }

   .container-cards.anmeldung {
      width: 70%;
      margin: auto;
      grid-template: 1fr /1fr 1fr 1fr;
   }
}

@media screen and (min-width: 481px) and (max-width: 768px) {

   .container-text.cardStyle {
      width: 90%;
   }
   .container-cards {
      grid-template: 1fr 1fr 1fr /1fr 1fr 1fr;
   }

   .container-cards.psychologen {
      grid-template: 1fr 1fr /1fr 1fr 1fr;
   }

   .container-cards.psychologen,
   .container-cards.physio-sport,
   .container-cards.verwaltung,
   .container-cards.technischer_dienst {
      grid-template: 1fr 1fr 1fr / 1fr 1fr;
   }

   .container-cards.welcome {
      width: 80%;
      margin: auto;
      grid-template: 1fr 1fr /1fr 1fr;
   }

   .container-cards.anmeldung {
      width: 70%;
      margin: auto;
      grid-template: 1fr /1fr 1fr;
   }
}

@media screen and (min-width: 400px) and (max-width: 480px) {
   .container-text.cardStyle {
      width: 100%;
      padding: 0.5rem;
   }
   .container-cards {
      display: grid;
      grid-template: 1fr 1fr 1fr /1fr 1fr;
      gap: 5px;
   }

   .container-cards.psychologen {
      grid-template: 1fr 1fr /1fr 1fr;
   }

   .container-cards.psychologen,
   .container-cards.physio-sport,
   .container-cards.verwaltung,
   .container-cards.technischer_dienst {
      grid-template: 1fr 1fr 1fr / 1fr 1fr;
   }

   .container-cards.welcome {
      width: 80%;
      margin: auto;
      grid-template: 1fr 1fr /1fr 1fr;
   }

   .container-cards.anmeldung {
      width: 90%;
      margin: auto;
      grid-template: 1fr /1fr 1fr;
   }
}

@media screen and (min-width: 320px) and (max-width: 399px) {
   .container-text.cardStyle {
      width: 100%;
      padding: 0.5rem;
   }
   .container-cards {
      grid-template: 1fr /1fr 1fr;
   }

   .container-cards.psychologen,
   .container-cards.physio-sport,
   .container-cards.verwaltung,
   .container-cards.technischer_dienst {
      grid-template: 1fr / 1fr 1fr;
   }

   .container-cards.welcome {
      width: 90%;
      margin: auto;
      grid-template: 1fr /1fr;
   }

   .container-cards.anmeldung {
      width: 90%;
      margin: auto;
      grid-template: 1fr /1fr 1fr;
   }
}