/* ===========================
   Buttons
=========================== */
.indexbutton {
  font-family: 'IBMPlexMono';
  font-size: 1vw;
  font-weight: 500;
  background-color: #EBF227;
  color: #510273;
  padding: 12px 24px;
  border: none;
  border-radius: 2vw;
  cursor: pointer;
  text-decoration: none;
  display: inline-block;
  transition: 0.25s ease;
  margin-top: 3vw;
}

.indexbutton:hover {
  background-color: #510273;
  color: #EBF227;
  transform: translateY(-2px);
}

/* ===========================
   Layout / Hero
=========================== */

.choose {
  text-align: center;
  margin-bottom: 3vw;
}

.hero {
    display: flex;
    justify-content: center; /* zentriert horizontal */
    align-items: center;     /* vertikal zentriert */
    gap: 3vw;               /* Abstand zwischen den Bildern */
    flex-wrap: wrap;         /* falls Bildschirm zu klein, umbrechen */
}

.hero img {
    width: 20vw;             /* kleinere Breite für die Kreise */
    height: 20vw;            /* gleiche Höhe, damit Quadrate bleiben */
    cursor: pointer;
    transition: transform 0.25s ease; /* optional: für Hover-Effekt */
}

.hero img:hover {
    transform: scale(1.1);  /* leichter Hover-Zoom */
}

main {
    display: flex;                /* Flexbox aktivieren */
    flex-direction: column;       /* Elemente untereinander */
    justify-content: center;      /* vertikal zentrieren */
    align-items: center;          /* horizontal zentrieren */
    min-height: 100vh;            /* Main füllt die Höhe des Viewports */
    padding: 1rem;                /* optional: Innenabstand */
    box-sizing: border-box;
}




.choose {
  opacity: 0;                    
  animation: fadeIn 3s forwards;  
  text-align: center;           
}

@keyframes fadeIn {
  to {
    opacity: 1;                 
  }
}