.grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  grid-auto-rows: 10px;
  gap: 5rem;
  position: relative;
}

@media (max-width: 900px) {
  .grid {
    gap: 2rem; /* Kleinere Lücke auf kleinen Bildschirmen */
  }
}

.item {
  padding: 8px;
  box-sizing: border-box;
  display: flex; /* Flexbox aktivieren */
  flex-direction: column;
  align-items: center; /* Bild horizontal zentrieren */
  text-align: left; /* Text linksbündig */
}

.item img {
  max-width: 100%; /* Bild soll die Breite nicht überschreiten */
  height: auto;
  display: block;
  margin-bottom: 8px; /* Abstand zwischen Bild und Titel */
  margin-top: 20px;
}

.item div.text {
  margin: 0; /* Optional, falls du den Abstand vom Titel reduzieren möchtest */
  margin-bottom: 20px;
}




.grid .item a:not([href]):hover,
.grid .item a:not([href]):focus {
  /* Kein Hover-Styling für leere Links */
  opacity: 1;
}


.grid .item a:not([href]) {
  pointer-events: none;
  cursor: default;
}


/* Ausnahme: Input-Felder innerhalb von a:not([href]) sollen wieder einen Fokus bekommen */
.grid .item a:not([href]) input:focus {
  outline: auto;
  box-shadow: 0 0 0 2px #3332; /* Beispiel für sichtbaren Fokus */
}

.grid .item a:not([href]) input,
.grid .item a:not([href]) button {
  pointer-events: auto;
}

.grid .item a:not([href]) button:hover {
  opacity: 0.75;
}