/* ============================================================
   NG MARKETING — projekte.css
============================================================ */

.filters {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
  margin-bottom: 48px;
}
.filter-btn {
  padding: 10px 20px;
  border-radius: var(--radius-full);
  border: 1px solid rgba(26, 28, 30, 0.15);
  font-size: 0.9rem;
  font-weight: 500;
  color: rgba(26, 28, 30, 0.6);
  transition: all 0.2s;
}
.filter-btn:hover { border-color: rgba(26,28,30,.4); color: var(--eerie); }
.filter-btn.active {
  background: var(--eerie);
  border-color: var(--eerie);
  color: var(--cloud);
}

.projects-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}
.projects-grid .project-card { flex-basis: auto; }
.project-card[hidden] { display: none; }

/* Shared .modal-* rules live in style.css (used on projekte.html AND spielwiese.html). */

@media (max-width: 960px) {
  .projects-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 640px) {
  .projects-grid { grid-template-columns: 1fr; }
  .modal-box { padding: 26px; }
}