/* ============================================================
   Datei:        assets/css/startseite/projekt-raster.css
   Seite:        Startseite (index.html)
   Zweck:        Raster der Projektkarten (1, 2, 3 Spalten) und sanftes Umblenden beim Filtern
   Abhängig von: assets/css/shared/variablen.css, assets/css/shared/karte.css, assets/css/shared/animationen.css
   Genutzt von:  index.html
   ============================================================ */

/* --- 1. Raster (mobile first: 1 Spalte, ab 640 px 2, ab 1024 px 3) --- */
.projekt-raster {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--abstand-4);
  transition: opacity var(--dauer-kurz) ease, transform var(--dauer-kurz) ease;
}

@media (min-width: 640px) {
  .projekt-raster {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 1024px) {
  .projekt-raster {
    grid-template-columns: repeat(3, 1fr);
  }
}

/* --- 2. Umblenden beim Filterwechsel (Klasse setzt projekt-raster.js) --- */
.projekt-raster--wechsel {
  opacity: 0;
  transform: translateY(6px);
}

.projekt-raster > .karte {
  animation: karte-ein 420ms var(--ease) both;
  animation-delay: calc(min(var(--karten-nr, 0), 8) * 40ms);
}

/* --- 3. Leere Auswahl --- */
.projekt-raster__leer {
  grid-column: 1 / -1;
  padding: var(--abstand-5) 0;
  color: var(--farbe-text-gedaempft);
}