/*
 * Öffentliche Klassengrenzen des Projektmoduls.
 * Die Legacy-Klassen bleiben während der visuellen Migration zusätzlich im
 * Markup. Neue Seiten und Varianten greifen ausschließlich auf diese Klassen zu.
 */
.projects-section,
.projects-section__inner,
.projects-section__grid,
.project-card,
.project-card__content {
  min-width: 0;
}

.project-card__media img {
  display: block;
  width: 100%;
  height: 100%;
  max-width: 100%;
  object-fit: cover;
  object-position: center top;
  transition: transform .45s ease;
}

.projects-section { background: #f3f5ff; }
.projects-section__title em { color: #6153ef; font-style: normal; }
.projects-section__description { max-width: 420px; margin: 0 0 5px; color: var(--muted); font-size: 15px; line-height: 1.7; }
.projects-section__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }
.project-card { overflow: hidden; border: 1px solid #e4e6f2; border-radius: 14px; background: #fff; box-shadow: 0 16px 40px #2226570d; }
.project-card__media { aspect-ratio: 16 / 9; height: auto; padding: 0; overflow: hidden; background: #15172a; }
.project-card:hover .project-card__media img { transform: scale(1.035); }
.project-card__content { display: block; padding: 24px 28px; }
.project-card__services { color: #5754ed; font-size: 9px; font-weight: 800; letter-spacing: 1.4px; }
.project-card__title { margin: 7px 0 0; font-size: 22px; }
.project-card__description { display: block; margin: 8px 0 0; color: var(--muted); font-size: 13px; line-height: 1.65; }
.project-card__link { display: inline-flex; align-items: center; gap: 7px; width: auto; height: auto; margin-top: 12px; border: 0; border-bottom: 1px solid #aeb0c2; border-radius: 0; padding: 12px 0 7px; color: var(--ink); background: transparent; font-size: 14px; font-weight: 700; white-space: nowrap; }
.project-card__link svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; transition: transform .2s ease; }
.project-card__link:hover svg,
.project-card__link:focus-visible svg { transform: translate(2px, -2px); }

@media (max-width: 900px) { .projects-section__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 620px) { .projects-section__grid { grid-template-columns: 1fr; } }