/* Abschnitt Projekte */
#projects {
  padding: 40px 20px;
  color: #f4f4f9;
  max-width: 800px;
  margin: 0 auto;
}

#projects h2 {
  text-align: center;
  color: #48e5c2;
  margin-bottom: 30px;
}

/* Grid-Layout */
.project-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr); /* 3 Spalten für Desktop */
  gap: 20px;
}

@media screen and (max-width: 900px) {
  .project-grid {
    grid-template-columns: repeat(2, 1fr); /* 2 Spalten für Tablets */
  }
}

@media screen and (max-width: 600px) {
  .project-grid {
    grid-template-columns: 1fr; /* 1 Spalte für Mobile */
  }

  .project-card:hover .card-front,
  .project-card:hover .card-back {
    transform: none;
  }
}

/* Kacheln */
.project-card {
  position: relative;
  width: 100%;
  padding-top: 100%; /* Quadratische Kacheln */
  perspective: 1000px;
}

.project-card > div {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  backface-visibility: hidden;
  border-radius: 10px;
  overflow: hidden;
  transition: transform 0.6s ease;
}

.card-front {
  background: #313552;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 1.2rem;
  color: #48e5c2;
}

.card-back {
  background: #313552;
  text-align: center;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 1rem;
  color: white;
  transform: rotateY(180deg);
  overflow-y: auto; /* Ermöglicht Scrollen für langen Text */
  padding: 10px;
  max-height: 100%;
}

/* Flip bei Hover */
.project-card:hover .card-front {
  transform: rotateY(180deg);
}

.project-card:hover .card-back {
  transform: rotateY(0deg);
}

/* Flip bei Klick */
.project-card.clicked .card-front {
  transform: rotateY(180deg);
}

.project-card.clicked .card-back {
  transform: rotateY(0deg);
}

/* Flip bei Scroll */
.project-card.scrolled .card-front {
  transform: rotateY(180deg);
}

.project-card.scrolled .card-back {
  transform: rotateY(0deg);
}