@charset "utf-8";
/* CSS Document */

/* Kachel-Layout Basis */
.kachel-container-1 {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  justify-content: center;
  padding: 40px 20px;
}

.kachel-1 {
  display: flex;
  flex-direction: column; /* Stapelt Bild oben, Text unten */
  width: 300px;
  height: 450px; /* Etwas höher, damit der Text Platz hat */
  background: white;
  border-radius: 15px;
  overflow: hidden;
  cursor: pointer;
  box-shadow: 0 10px 20px rgba(0,0,0,0.1);
  transition: transform 0.3s ease;
}

.kachel:hover-1 {
  transform: scale(1.02);
}

/* Bild-Bereich (40%) */
.kachel-bild-1 {
  position: relative;
  height: 60%; /* 40% der Kachelhöhe */
  width: 100%;
  overflow: hidden;
}

.kachel-bild img-1 {
  width: 100%;
  height: 100%;
  object-fit: cover; /* Bild wird perfekt eingepasst */
}

/* Text-Bereich (60%) */
.kachel-info-1 {
  height: 40%; /* 60% der Kachelhöhe */
  padding: 20px;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  background: #ffffff;
}

.kachel-info-1 h3 {
  margin: 0 0 10px 0;
  font-size: 1.2rem;
  color: #0a8585;
  font-weight:bold;
}

.kachel-info-1 p {
  margin: 0;
  font-size: 0.95rem;
  color: #333;
  line-height: 1.5;
}

/* Plus-Icon Anpassung (jetzt im Bild positioniert) */
.plus-icon-1 {
  position: absolute;
  top: 15px;
  right: 15px;
  background: rgba(255, 255, 255, 0.9);
  width: 35px;
  height: 35px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  font-size: 20px;
  font-weight: bold;
  color: #333;
  transition: transform 0.4s ease;
  z-index: 2;
}

.kachel:hover-1 .plus-icon-1 {
  transform: rotate(90deg);
}