/* Projekte listing page — Figma 87:336 page-specific styles only */

.projects-page { background: var(--white); }

.projects-hero {
  position: relative;
  min-height: 904px;
  overflow: hidden;
  background: var(--black);
  color: var(--white);
}

.projects-hero__bg,
.projects-hero__overlay {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.projects-hero__bg img {
  position: absolute;
  inset: 0 0 0 auto;
  width: 72%;
  height: 100%;
  max-width: none;
  object-fit: cover;
  object-position: center top;
}

.projects-hero__overlay {
  background: linear-gradient(90deg, #000 0%, #000 33%, rgba(0, 0, 0, 0.72) 48%, rgba(0, 0, 0, 0) 68%);
  z-index: 1;
}

.projects-hero__inner {
  position: relative;
  z-index: 2;
  min-height: 904px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 80px;
  padding-top: 98px;
}

.projects-hero__content {
  width: 592px;
  max-width: 100%;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 26px;
}

.projects-hero__title {
  font-size: 48px;
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.02em;
}

.projects-hero__title .line-white { color: var(--white); }
.projects-hero__title .line-soft { color: var(--soft); }

.projects-hero__sub {
  max-width: 427px;
  color: var(--white);
  font-size: 16px;
  line-height: 25px;
  letter-spacing: -0.01em;
}

.projects-hero__signature {
  position: absolute;
  right: 8px;
  bottom: 84px;
  width: min(50vw, 610px);
  max-height: 136px;
  object-fit: contain;
  opacity: 0.88;
  mix-blend-mode: screen;
}

.projects-intro {
  padding: 120px 0 80px;
}

.projects-intro__inner {
  display: grid;
  grid-template-columns: 380px minmax(0, 1fr);
  gap: 20px;
  align-items: start;
}

.projects-intro__inner p {
  max-width: 760px;
  font-size: clamp(1.125rem, 1.5vw, 1.5rem);
  line-height: 1.408;
  letter-spacing: -0.02em;
}

.projects-cases {
  padding: 0 0 150px;
}

.projects-cases__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}

.projects-card {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.projects-card__media {
  position: relative;
  display: flex;
  min-height: 486px;
  align-items: flex-end;
  overflow: hidden;
  border-radius: var(--radius);
  padding: 30px;
  color: var(--color);
  background: var(--black);
}

.projects-card__media::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(24deg, rgb(0,0,0) 22%, rgba(0,0,0,0.54) 44%, rgba(0,0,0,0) 66%);
  z-index: 1;
}

.projects-card__media > img:not(.projects-card__arrow) {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: cover;
  transition: transform .35s ease;
}

.projects-card--available:hover .projects-card__media > img:not(.projects-card__arrow) { transform: scale(1.03); }

.projects-card__media--unavailable {
  cursor: default;
}

.projects-card__media--unavailable > img:not(.projects-card__arrow) {
  filter: saturate(.78) contrast(.96);
}

.projects-card__badge {
  position: absolute;
  z-index: 3;
  top: 20px;
  right: 20px;
  display: inline-flex;
  align-items: center;
  min-height: 40px;
  padding: 0 16px;
  border: 1px solid rgba(255, 255, 255, .42);
  border-radius: 999px;
  background: rgba(0, 0, 0, .48);
  color: var(--white);
  font-size: 13px;
  font-weight: 600;
  line-height: 1;
  letter-spacing: .02em;
  text-transform: uppercase;
  backdrop-filter: blur(10px);
}

.projects-card__media h3 {
  position: relative;
  z-index: 2;
  max-width: 260px;
  font-size: 32px;
  line-height: 1;
  letter-spacing: -0.02em;
}

.projects-card__arrow {
  position: absolute;
  z-index: 3;
  top: 20px;
  right: 20px;
  width: 40px;
  height: 40px;
  transform: rotate(135deg);
  opacity: .72;
}

.projects-card > p {
  max-width: 330px;
  font-size: 16px;
  line-height: 25px;
  letter-spacing: -0.01em;
}

.projects-card__link { align-self: flex-start; }

.projects-card__status {
  align-self: flex-start;
  display: inline-flex;
  align-items: center;
  min-height: 36px;
  padding: 0 14px;
  border: 1px solid var(--black);
  border-radius: 999px;
  color: var(--black);
  font-size: 14px;
  font-weight: 600;
  line-height: 1;
  letter-spacing: .01em;
}

.client-projects {
  padding: 0 0 150px;
}

.client-projects h2 { margin-bottom: 60px; }

.client-logo-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1px;
  background: var(--color-2);
  border: 1px solid var(--color-2);
}

.client-logo-card {
  min-height: 248px;
  padding: 24px;
  background: var(--color);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 28px;
}

.client-logo-card__mark {
  min-height: 54px;
  display: flex;
  align-items: flex-start;
}

.client-logo-card__mark img {
  max-width: 150px;
  max-height: 54px;
  object-fit: contain;
  filter: grayscale(1) contrast(1.05);
}

.client-logo-card__mark span {
  width: 54px;
  height: 54px;
  border-radius: 50%;
  background: var(--black);
  color: var(--main);
  display: grid;
  place-items: center;
  font-size: 24px;
}

.client-logo-card p {
  font-size: 16px;
  line-height: 25px;
  letter-spacing: -0.01em;
  color: var(--black);
}

.more-projects {
  padding: 0 0 150px;
}

.more-projects__inner {
  display: grid;
  grid-template-columns: 380px minmax(0, 1fr);
  gap: 20px;
  align-items: start;
}

.more-projects__list {
  display: flex;
  flex-direction: column;
  border-top: 1px solid var(--black);
}

.more-projects__list li {
  display: flex;
  align-items: center;
  min-height: 52px;
  border-bottom: 1px solid var(--black);
  font-size: 24px;
  line-height: 1.408;
  letter-spacing: -0.02em;
}

.projects-stats { padding-bottom: 150px; }

.projects-testimonials .testimonials__grid { column-gap: 12px; }

.projects-page .cta .btn--primary { width: auto; }

@media (max-width: 1228px) {
  .projects-hero__inner { padding-left: var(--container-padding); padding-right: var(--container-padding); }
}

@media (max-width: 1024px) {
  .projects-hero,
  .projects-hero__inner { min-height: 760px; }

  .projects-hero__bg img { width: 100%; opacity: .55; }
  .projects-hero__overlay { background: linear-gradient(90deg, #000 0%, rgba(0,0,0,.82) 58%, rgba(0,0,0,.18) 100%); }
  .projects-hero__signature { width: 74vw; right: 24px; bottom: 44px; }

  .projects-intro__inner,
  .more-projects__inner { grid-template-columns: 1fr; gap: 28px; }
  .projects-cases__grid { grid-template-columns: repeat(2, 1fr); }
  .client-logo-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 640px) {
  .projects-hero,
  .projects-hero__inner { min-height: 720px; }
  .projects-hero__inner { padding-top: 120px; align-items: flex-start; }
  .projects-hero__title { font-size: clamp(2.5rem, 12vw, 3.25rem); }
  .projects-hero__signature { width: 88vw; bottom: 26px; }

  .projects-intro { padding: 72px 0 64px; }
  .projects-cases,
  .client-projects,
  .more-projects,
  .projects-stats { padding-bottom: 88px; }

  .projects-cases__grid,
  .client-logo-grid { grid-template-columns: 1fr; }
  .projects-card__media { min-height: 400px; }
  .client-logo-card { min-height: 210px; }
  .more-projects__list li { min-height: 48px; font-size: 20px; }
}


/* ═══ Figma Desktop Parity Pass — Projekte 87:336 ═══ */
@media (min-width: 1025px) {
  .projects-hero { min-height: 932px; }
  .projects-hero__inner { min-height: 932px; padding-top: 102px; }
  .projects-intro { padding: 129px 0 80px; }
  .projects-intro__inner { grid-template-columns: 511px minmax(0, 1fr); gap: 8px; }
  .projects-cases__grid { gap: 27px; }
  .projects-page .testimonials__heading h2 { font-size: 48px; line-height: 1; letter-spacing: -0.02em; }
}